/*!
* PT. IMAJIKU CIPTA MEDIA
* Copyright 2019-2021 IMAJIKU.
*/


/* Desktop First Design */

/* Larger Devices, Wider Screens */
@media only screen and (min-width : 1700px) {}

@media (min-width : 1500px) and (max-width: 1700px) {}

@media only screen and (min-width : 1367px) {}

/* Medium Devices, Desktops */
@media (min-width : 1200px) and (max-width: 1300px) {
    .navbar {
        padding: 0px 2rem 0;
    }

    .counter-numb-item-desc h3 {
        font-size: 54px;
    }
}

@media only screen and (max-width : 1200px) {
    .career-info-box .card-mjk-desc-text h3 {
        font-size: 20px;
    }

    .slider-img-desktop {
        height: calc(80vh - 60px);
    }

    .media-hero-slider-box .slider-caption-desc h1 {
        font-size: 32px;
    }

    .card-news-row-box .card-time {
        width: 80%;
    }

    .menu-page-box ul li a {
        font-size: 14px;
        white-space: pre;
    }

    .menu-page-box ul li {
        margin: 0px 15px;
    }

    .card-desc-mini-box .slick-list {
        padding: 0px 55% 0 0 !important;
    }

    .card-counter-box .card-box {
        width: calc(90% / 3);
        margin-bottom: 40px;
    }

    .counter-numb-item-desc h3 {
        font-size: 54px;
    }
}

@media only screen and (min-width: 1200px) {
    .single-content-right-full.single-home .container {
        max-width: 1140px;
    }

}

@media only screen and (min-width : 1024px) {}

@media only screen and (max-width : 1024px) {
    .slider-caption-desc h1 {
        font-size: 35px;
    }

    .slider-caption-desc h5 {
        font-size: 25px;
    }

    .slider-caption {
        margin: 10px 50px;
    }

    .slider-caption-desc:after {
        bottom: 0px;
    }

    .card-counter-box .card-box {
        width: calc(90% / 3);
    }

    .card-history .container {
        max-width: 100%;
        padding: 0 15px;
        overflow: hidden;
    }

    .card-history .card-1row-box .card-box {
        margin: 20px 5px 20px 5px;
    }

    .card-news-row-box .card-meta {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .career-info-box .card-mjk-desc-text h3 {
        font-size: 20px;
    }

    .list-project-box .filter-mjk-group .select-mjk-box {
        min-width: 235px;
    }

    .project-detail .card-list-box .card-box:first-child .card-package {
        border-bottom-left-radius: 6px;
    }

    .project-detail .card-list-box .card-box:last-child .card-package {
        border-bottom-right-radius: 6px;
    }

    .banner-top-box.variant-2 {
        height: 350px;
    }

    .banner-top-box.variant-2 .img-banner-top {
        height: 350px;
    }

    .banner-top-caption h1,
    .banner-top-caption h2,
    .banner-top-caption h3 {
        font-size: 25px;
    }

    .banner-top-caption p {
        font-size: 30px;
    }

    .slider-img-desktop {
        height: 450px;
    }

    .media-hero-slider-box .slider-caption-desc h1 {
        font-size: 24px;
    }

    .card-client-slider-box-center .slider-button-prev {
        left: -20px;
    }

    .card-client-slider-box-center .slider-button-next {
        right: -20px;
    }

    .card-desc-mini-box .slick-list {
        padding: 0px 55% 0 0 !important;
    }
}

@media only screen and (max-width : 992px) {}

/* Start mobile responsive */
@media only screen and (max-width : 991.5px) {
    .slider-caption-desc h1 {
        font-size: 26px;
    }

    .slider-caption-desc h5 {
        font-size: 18px;
    }

    .slider-caption:before {
        width: 50%;
        top: -10px;
        background-size: contain;
        left: -20px;
    }

    .slider-caption-desc:after {
        width: 50%;
        background-size: contain;
    }

    .icon-arrow {
        width: 20px;
    }

    .slider-button-prev {
        right: 75px;
    }

    .slider-caption-box {
        top: 0px;
    }

    .card-counter-box .card-box {
        width: calc(90% / 2);
        margin-bottom: 40px;
    }

    .single-content-left-full .card-img-box,
    .single-content-left .card-img-box {
        flex: 0 0 calc(100% - 0px);
        margin: 0 0px 0 0;
        padding: 10px
    }

    .single-content-left-full .card-desc-box,
    .single-content-left .card-desc-box {
        flex: 0 0 calc(100% - 0px);
        padding: 10px;
        margin: 0;
    }

    .single-content-right-full .card-img-box,
    .single-content-right .card-img-box {
        flex: 0 0 calc(100% - 0px);
        margin: 0 0px 0 0;
        padding: 10px;
    }

    .single-content-right-full .card-desc-box,
    .single-content-right .card-desc-box {
        flex: 0 0 calc(100% - 0px);
        padding: 10px;
        margin: 0;
    }

    .single-content-right-full .col-12 {
        padding-right: 15px;
    }

    .card-center-slider-box .slider-dots {
        display: none;
    }

    .card-center-slider-box .slider-button-next {
        right: 4%;
    }

    .card-center-slider-box .slider-button-prev {
        left: 4%;
    }

    .banner-top-box:after {
        background: linear-gradient(0deg, rgb(0 0 0 / 80%), rgb(255 255 255 / 0%));
        z-index: 3;
    }

    .banner-top-caption {
        margin: 10px auto 15px;
    }

    .card-vision-mision .card-icon-box .card-box {
        width: calc(100% / 3);
    }

    .about-sidebar-item {
        flex-direction: column-reverse;
    }

    .sbmenu-box {
        position: relative;
        margin-bottom: 20px;
    }

    .banner-career-form .banner-top-caption {
        margin: 10px auto 10px;
    }

    .career-form iframe {
        margin-top: 30px;
    }

    .career-info-box .card-mjk-desc-text h3 {
        font-size: 16px;
    }

    .project-detail .card-list-area-box .card-box {
        width: calc((100% / 3) - 0px);
    }

    /*.project-detail .card-list-area-box .card-box:nth-child(5) .card-package {
        border-right: 1px solid #ED2224;
    }*/

    .project-detail .card-list-area-box .card-box:nth-child(3) .card-package {
        border-right: none;
    }

    .project-detail .card-list-area-box .card-box:nth-child(6) .card-package {
        border-right: none;
    }

    .project-detail .card-list-area-box .card-box .card-package .card-title h3 {
        font-size: 14px;
    }

    .project-detail .card-list-area-box .card-box .card-package .card-desc p {
        font-size: 20px;
    }

    .card-project-row-box {
        --columns: 2;
    }

    .cta-video .title-primary h2 {
        font-size: 30px;
    }

    .card-center-slider-box [data-my-slick-attr="2"] .card-package {
        transform: none;
    }

    .card-center-slider-box [data-my-slick-attr="0"] .card-package {
        transform: none;
    }

    .card-searching-img {
        width: 30%;
    }

    /*timeline*/
    .timeline-history {
        width: 100%;
        padding-bottom: 0;
    }

    .timeline-history:before {
        left: 20px;
        height: 100%;
    }

    .timeline-history ul li:nth-child(odd),
    .timeline-history ul li:nth-child(even) {
        width: 100%;
        text-align: left;
        padding-left: 50px;
        padding-bottom: 50px;
    }

    .timeline-history ul li:nth-child(odd):before,
    .timeline-history ul li:nth-child(even):before {
        top: -18px;
        left: 16px;
    }

    .timeline-history ul li:nth-child(odd) .timeline-content-time,
    .timeline-history ul li:nth-child(even) .timeline-content-time {
        top: -30px;
        left: 35px;
        right: inherit;
        width: 100%;
        text-align: left;
    }

    .timeline-history-box .card-mjk {
        width: 90%;
    }

    .timeline-card-flip {
        margin: 15px 0;
    }

    .timeline-history .show-timeline,
    .timeline-history .hide-timeline {
        right: auto;
        margin-right: 0;
    }

    .filter-fine-mobile.sort {
        background-color: transparent;
        border-color: transparent;
    }

    .filter-fine-mobile .btn-mjk {
        background-color: #ed2224;
    }

    .list-project-box .filter-mjk-group .form-group:nth-child(2) {
        margin: 0 0 10px;
    }

    .list-project-box .filter-mjk-group .form-group {
        margin-bottom: 10px;
    }

    .list-project-box .filter-mjk-group-box {
        padding: 25px 30px 25px 15px;
    }

    .intro-pages-box {
        z-index: unset;
    }

    .list-project-box {
        z-index: unset;
    }

    .filter-horizontal-box.open {
        margin-top: 0 !important;
        padding: 70px 15px 20px;
    }

    .filter-horizontal-box.open .close,
    .filter-vertical-box.open .close {
        background-color: #d9d9d9;
        top: 15px;
    }

    .article-title h1 {
        font-size: 26px;
    }

    .project-detail .card-list-box {
        margin-bottom: 40px;
        --columns: 2;
    }

    .project-detail .article-post {
        padding: 30px 0px;
    }

    .cta-img-box .title-primary h2 {
        font-size: 30px;
    }

    .article-post h3 {
        font-size: 20px;
    }

    .media-hero-slider-box .slider-button-prev {
        left: 0px;
    }

    .media-hero-slider-box .slider-button-next {
        right: 0px;
    }

    .contact-box .bg-section-img {
        display: none;
    }

    .contact-box .form-text-label {
        height: 60px;
    }

    .contact-box .form-text-group {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .contact-box .form-text-group .form-text-desc {
        padding-left: 15px;
    }

    #object {
        transform: unset !important;
        transition: unset;
        margin-top: 0px;
    }

    .banner-top-box.variant-2 {
        height: auto;
    }

    .banner-top-box.variant-2 .img-banner-top {
        height: 350px;
    }

    .banner-top-box .banner-top-caption h1,
    .banner-top-box .banner-top-caption h2,
    .banner-top-box .banner-top-caption h3 {
        font-size: 18px;
    }

    .banner-top-box .banner-top-caption p {
        font-size: 26px;
        font-weight: 700;
    }

    .filter-mjk-group .form-group:last-child {
        margin-left: 0px;
    }

    .single-content-left-full .col-12 {
        padding-left: 15px;
    }

    /*  .single-content-right-full .card-desc-box {
        padding: 0;
    }

    .single-content-left-full .card-desc-box {
        padding: 0;
    }

    .single-content-left-full .card-img-box,
    .single-content-left .card-img-box {
        padding: 0;
    }*/

    .btn-mjk {
        margin-bottom: 10px;
    }

    /* .menu-page-box {
        display: none;
    }

    #best-work {
        padding-top: 100px;
        margin: 0 !important;
    }

    #project {
        padding-top: 100px;
    }

    #customer {
        padding-top: 100px;
    }

    #client {
        padding-top: 50px;
    }*/
    .card-vision-mision .bg-section-img {
        height: 100%;
    }

    .card-vision-mision .bg-section-box:after {
        height: 100%;
    }

    .counter-numb-item-desc h3 {
        font-size: 50px;
        padding-left: 10px;
    }

    .btn-filter-mobile {
        justify-content: flex-end;
        position: relative;
    }

    .filter-fine-mobile.sort {
        margin: 5px 0 -10px;
    }

    .filter-fine-mobile .btn-mjk {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        min-width: unset;
        padding: 15px 5px 10px 10px;
    }

    .navtotop {
        right: 20px;
        bottom: 25px;
    }

    .about-tab .tabs-square .tabs-mjk-nav .nav-tabs .nav-item {
        margin: 5px 10px 5px 0px;
    }

    .card-desc-mini-box .slick-list {
        padding: 0px 8% 5px 0 !important;
    }

    .card-client-slider-box-center .slider-button-prev {
        left: -15px;
    }

    .card-client-slider-box-center .slider-button-next {
        right: -15px;
    }

    #object .single-img-desktop {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Small Devices, Desktops */
@media only screen and (max-width : 812px) {
    .card-center-slider-box .card-1row-box .card-box {
        max-width: 640px;
    }
}

@media only screen and (max-width : 768px) {
    .project-detail .card-list-box {
        --columns: 1;
    }

    .title-primary h5 {
        font-size: 24px;
    }

    .card-desc-mini-box .slick-list {
        padding: 0px 8% 5px 0 !important;
    }

    .card-client-slider-box-center .slider-button-prev {
        left: -15px;
    }

    .card-client-slider-box-center .slider-button-next {
        right: -15px;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 767.5px) {
    .card-vision-mision .card-icon-box .card-box {
        width: calc(100% / 1);
    }

    .card-vision-mision .card-icon-box .card-box {
        margin: 5px 0px 0px 0;
    }

    .card-vision-mision .bg-section-img {
        height: 100%;
    }

    .card-vision-mision .bg-section-box:after {
        height: 100%;
    }

    .card-img-appoarch .card-img-box .card-box {
        margin-bottom: 30px;
    }

    .card-img-appoarch .card-img-box {
        --columns: 1;
    }

    .card-icon-appoarch .card-icon-box {
        --columns: 1;
    }

    .card-news-row-box {
        --columns: 1;
    }

    .filter-mjk-group .form-group:last-child {
        margin-left: 0;
    }

    .menu-page-box ul {
        justify-content: left;
        max-width: 495px;
        overflow-x: scroll;
        padding-bottom: 15px;
        white-space: pre;
        margin-bottom: 0;
        overflow-y: hidden;
    }

    .menu-page-box ul li a {
        padding: 0;
        text-align: center;
        font-size: 14px;
        padding: 10px 15px 10px;
    }

    .menu-page-box ul li a:hover {
        padding: 10px 15px 10px;
    }

    .timeline-history-box .card-mjk {
        width: 100%;
    }

    .timeline-card-flip,
    .card-flip-front,
    .card-flip-back {
        min-height: 300px;
        max-height: 380px;
        overflow-y: auto;
    }

    .contact-box .form-text-label {
        height: 45px;
    }

    .card-desc-mini-box .slick-list {
        padding: 0px 50% 5px 0 !important;
    }

    .counter-numb-item-desc h3 {
        font-size: 48px;
        padding-left: 20px;
        text-align: center;
    }
}

@media only screen and (max-width : 667.5px) {

    .single-content-infographic .single-img-desktop,
    .single-content-left-full .single-img-desktop,
    .bg-section-box .single-img-desktop {
        display: none;
    }

    .single-content-infographic .single-img-mobile,
    .single-content-left-full .single-img-mobile,
    .bg-section-box .single-img-mobile {
        display: block;
    }
}

@media only screen and (max-width : 640px) {
    .card-center-slider-box .card-1row-box .card-box {
        max-width: 500px;
    }

    .card-center-slider-box .card-title h3 a {
        font-size: 16px;
    }

    .slick-dots li button {
        width: 20px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        margin-left: 10px;
    }

    .slider-box .slick-dots li button::before {
        width: 20px;
        height: 5px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }

    .slider-box .slick-dots li.slick-active button {
        width: 20px;
        height: 5px;
    }

    .slider-box .slick-dots li.slick-active button:before {
        width: 20px;
        height: 5px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
    }

    .slider-box .slick-dots li button {
        width: 20px;
        height: 5px;
    }

    .card-project-center-slider-box .card-box {
        padding: 0px;
    }

    .gallery-center-slider-box .card-box {
        padding: 0px;
    }

    .cta-img-box {
        min-height: 500px;
    }

    .contact-box .form-text-label {
        width: 40px;
        height: 40px;
        padding: 10px;
    }

    .card-desc-mini-box .slick-list {
        padding: 0px 50% 5px 0 !important;
    }
}

@media only screen and (max-width : 575.5px) {
    .slider-img-mobile {
        height: 100%;
        max-height: 500px;
    }

    .slider-caption:before {
        width: 50%;
        left: -15px;
        top: -20px;
        height: 40px;
        background-size: contain;
    }

    .slider-caption-desc:after {
        width: 50%;
        right: -20px;
        height: 30px;
        background-size: contain;
    }

    .slider-caption {
        margin: 10px 10px;
    }

    .slider-caption {
        padding: 0;
        width: 93%;
    }

    .slider-button-prev {
        bottom: 20px;
    }

    .slider-button-next {
        bottom: 20px;
    }

    .slider-caption-box {
        top: -50px;
    }

    .card-counter-box .card-box {
        width: calc(90% / 1);
        margin: 20px 0px 20px 0;
    }

    .media-hero-slider-box .slider-caption-desc h1 {
        font-size: 24px;
    }

    .career-info-box .col-12:nth-child(2) .card-mjk-box.variant-horizontal .card-mjk {
        flex-direction: row-reverse;
    }

    .career-info-box .col-12:nth-child(3) .card-mjk-box.variant-horizontal .card-mjk {
        flex-direction: row;
    }

    .card-project-center-slider-box .card-package {
        transform: scale(1);
    }

    .card-project-center-slider-box .slick-center .card-package {
        transform: scale(1);
    }

    .card-project-center-slider-box .slick-active {
        padding: 0px;
    }

    .card-project-center-slider-box .slider-button-next {
        right: 0px;
    }

    .card-project-center-slider-box .slider-button-prev {
        left: 0px;
    }

    .gallery-center-slider-box .card-package {
        transform: scale(1);
    }

    .gallery-center-slider-box .slick-center .card-package {
        transform: scale(1);
    }

    .gallery-center-slider-box .slick-active {
        padding: 0px;
    }

    .gallery-center-slider-box .slider-button-next {
        right: 0px;
        top: 0;
    }

    .gallery-center-slider-box .slider-button-prev {
        left: 0px;
        top: 0;
    }

    .card-project-row-box {
        --columns: 1;
    }

    .card-center-slider-box .card-title h3 {
        min-height: unset;
    }

    .card-desc-mini-box .slick-list {
        padding: 0px 50% 5px 0 !important;
    }


}

@media only screen and (max-width : 480.5px) {
    .foo-social-network ul {
        justify-content: center;
    }

    .card-center-slider-box .card-1row-box .card-box {
        max-width: 400px;
        padding: 0;
    }

    .card-center-slider-box .slider-button-next {
        right: 0px;
    }

    .card-center-slider-box .slider-button-prev {
        left: 0px;
    }

    .card-center-slider-box .card-item {
        margin: -30px 0 0 20px;
    }

    .card-center-slider-box {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    .card-center-slider-box .card-item {
        max-width: 350px;
    }

    .career-testimonial-box .slider-button-prev {
        left: -15px;
    }

    .career-testimonial-box .slider-button-next {
        right: -15px;
    }

    .timeline-history-box .card-mjk-desc h4 {
        font-size: 14px;
    }

    .timeline-content-time h4 {
        font-size: 24px;
    }

    .timeline-card-flip {
        margin: 5px 0;
    }

    .timeline-card-flip {
        min-height: 230px;
    }

    .career-testimonial-box .slider-button-prev:before {
        left: -60px;
    }

    .career-testimonial-box .slider-button-next:before {
        right: -60px;
    }

    .card-desc-mini-box .slick-list {
        padding: 0px 15% 5px 0 !important;
    }
}

@media only screen and (max-width : 375.5px) {
    .project-detail .card-list-area-box .card-box .card-package .card-desc p {
        font-size: 16px;
    }

    .project-detail .card-list-area-box .card-box {
        width: calc((100% / 2) - 0px);
    }

    .project-detail .card-list-area-box .card-box:nth-child(2) .card-package {
        border-right: none;
    }

    .project-detail .card-list-area-box .card-box:nth-child(3) .card-package {
        border-right: none;
    }

    .project-detail .card-list-area-box .card-box:nth-child(4) .card-package {
        border-left: 1px solid #ED2224;
        border-right: none;
    }

    .card-center-slider-box .card-item {
        max-width: 320px;
    }

}

@media only screen and (max-width : 360px) {}

@media only screen and (max-width : 320px) {
    .article .share-network {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .card-center-slider-box .card-item {
        max-width: 300px;
    }

    .card-center-slider-box .card-item {
        margin: -30px 0 0 0px;
    }
}