/*IDSYNC*/

/*--------------------------------------------------------------------START 1600px-------------------*/
@media screen and (max-width: 1600px) {
}

/*--------------------------------------------------------------------START 1366px-------------------*/
@media screen and (max-width: 1366px) {

    .background-home {
        width: 880px !important;
    }

    #mb_parallax_four {
        padding: 0vh 0vh 10vh 0vh !important;
        margin: 0px 85px !important;
    }

    .title-feature {
        left: 70px !important;
    }
}
/*--------------------------------------------------------------------START 1280px-------------------*/
@media screen and (max-width: 1280px) {

    #mb_parallax_four {
        padding: 0vh 0vh 10vh 0vh !important;
        margin: 0px 15px !important;
    }

    #mb_parallax_one {
        padding: 20vh 10vh !important;
    }
}

/*--------------------------------------------------------------------START 1024px-------------------*/
@media screen and (max-width: 1024px) {

    .background-home {
        width: 768px !important;
    }

    .title-feature {
        left: 0px !important;
        padding: 100px 60px !important;
    }

    #mb_parallax_one {
        padding: 20vh 0vh !important;
    }

    #home h2 {
        font-size: 40px !important;
    }

    .laptop-screen {
        margin: 51px 271px !important;
        width: 429px !important;
        height: 390px !important;
        top: 215px !important;
    }

    .benefit-text {
        margin-top: 20px !important;
    }

    #mb_parallax_four {
        margin: 0px 0px !important;
        background: unset;
    }

    #mb_parallax_two {
        padding: 0px 5vh !important;
    }

    .promo-details p {
        width: 300px !important;
    }

    section.promo-details.section img {
        height: 252px !important;
    }
}

/*--------------------------------------------------------------------START 980px-------------------*/
@media screen and (max-width: 980px) {
    .mini-menu {
        display: block;
    }

    .logo-resize.animate {
        width: 35px;
    }

    section.product-name img {
        width: 145px;
    }

    section.about-product img {
        width: 190px;
    }

    .mt-100 {
        margin-top: 0px;
    }

    .navigation {
        padding: 25px 50px !important;
    }

    section.about-product {
        margin: 120px 0px 70px 0px !important;
    }

    .small-loading.imgproduct-skeleton {
        width: 145px !important;
    }

    .imgproduct-skeleton .progress {
        height: 145px !important;
    }

    .small-loading.nameproduct-skeleton {
        width: 145px !important;
    }

    .nameproduct-skeleton .progress {
        height: 45px !important;
    }

    .about-product .small-loading.imgproduct-skeleton {
        width: 200px !important;
    }

        .about-product .small-loading.imgproduct-skeleton .progress {
            height: 60px !important;
        }

    .feature-app img.img-area, img.animation-right.img-area {
        height: 185px !important;
    }

    .skeleton-navbar ol.olskeleton {
        visibility: hidden !important;
        margin: 0px !important;
    }


    .desc-about {
        width: 420px !important;
    }

    img.header-logo {
        top: 10px !important;
    }

    .title-feature {
        padding: 100px 0px !important;
    }


    .laptop-screen {
        margin: 51px 230px !important;
        width: 429px !important;
        height: 390px !important;
        top: 196px !important;
    }

    section#benefit h2 {
        font-size: 40px !important;
        margin-bottom: 20px !important;
    }

    .testiarea hr {
        margin: 0px;
    }
}

/*--------------------------------------------------------------------START 800px-------------------*/
@media screen and (max-width: 800px) {

    .hero-area h1 {
        margin-top: 0px !important;
        font-size: 46px !important;
    }

    #home h2 {
        font-size: 30px !important;
    }

    .title-feature {
        padding: 15px 0px !important;
    }

    .desc-about {
        width: 300px !important;
        margin-top: -45px;
    }

    .background-home {
        width: 660px !important;
    }

    section.feature-list.section img {
        margin-top: 100px !important;
    }

    .testiarea hr {
        margin: 15px !important;
    }

    section.promo-details.section img { 
        height: 240px;
    }
}

/*--------------------------------------------------------------------START 768px-------------------*/
@media screen and (max-width: 768px) {
    .fade-out {
        display: none;
    }

    section.product-name img {
        width: 35px;
    }

    .mt-100 {
        margin-top: 0px;
        margin: 30px 0px;
    }

    .socialmedia.pull-right {
        text-align: right;
        float: left !important;
        text-align: left;
        margin-top: 50px;
    }

    .feature-list .content.mt-100 {
        padding: 30px;
    }

    section.feature-list.section img {
        margin-top: 230px !important;
    }

    .desc-about {
        width: 100% !important;
        margin-top: 0px !important;
    }


    .background-home {
        float: right;
        margin-right: 0px !important;
        background-size: cover !important;
        z-index: 4;
        padding-bottom: 40vh;
    }

    #mb_parallax_one {
        padding: 8vh 0vh 0vh 0vh !important;
    }

    section#feature .col-md-6 {
        width: 100%;
    }

    .hero-area .col-md-6 {
        width: 100%;
    }

    .laptop-screen {
        margin: 51px 309px !important;
        width: 426px !important;
        height: 390px !important;
        top: 228px !important;
    }

    .promo-details p {
        width: 100% !important;
    }

    .title-feature {
        padding: 15px 0px !important;
        position: relative !important;
        top: -50px !important;
    }

        .title-feature h1 {
            margin-bottom: 10px !important;
        }

    section#benefit .col-md-6 {
        width: 100% !important;
    }

    section.feature-list.section img {
        margin-top: 0px !important;
    }

    #mb_parallax_three {
        padding: 10vh 10vh 0vh 10vh !important;
    }

    section#testimony {
        padding: 0px !important;
    }

    .col-md-4.testimony-grid {
        width: 100% !important;
    }

    .col-md-4.testimony-grid {
        width: 100% !important;
    }

    .testiarea hr {
        margin: 20px 200px !important;
    }

    .hidden-sm-testimoni {
        display: none;
    }

    .dt-laptop-slider {
        margin-right: -80px !important;
    }

    section.promo-details.section img { 
        height: 266px !important;
    }
}
/*--------------------------------------------------------------------START 640px-------------------*/
@media screen and (max-width: 640px) {

    #mb_parallax_one {
        height: 160vh !important;
    }

    .background-home {
        padding-bottom: 75vh !important;
        margin-bottom: 25px;
    }

    #mb_parallax_one {
        padding: 15vh 0vh 0vh 0vh !important;
    }

    .dt-laptop-slider {
        margin-right: -80px !important;
        width: 706px !important;
        padding-bottom: 10% !important;
    }

    .laptop-screen {
        margin: 51px 215px !important;
        width: 298px !important;
        height: 390px !important;
        top: 144px !important;
    }

    .hidden-sm-testimoni {
        display: none;
    }

    #mb_parallax_four {
        padding: 0vh 0vh 20vh 0vh !important;
    }

    .desc-about .rectangle {
        display: none;
    }

    section.feature-list.section img {
        padding: 0px 100px;
    }

    .feature-list .content.mt-100 {
        margin-top: 0px;
    }

    section.promo-details.section img { 
        height: 185px !important;
    }


}

/*--------------------------------------------------------------------START 600px-------------------*/
@media screen and (max-width: 600px) {

    .dt-laptop-slider {
        margin-right: -60px !important;
    }

    .background-home {
        width: 550px !important;
    }
}

/*--------------------------------------------------------------------START 480px-------------------*/
@media screen and (max-width: 480px) {

    .contact input.form-control {
        margin: auto !important;
    }

    .second-testimonial {
        display: none !important;
    }

    .dt-laptop-slider {
        margin-right: -55px !important;
    }

    .background-home {
        width: 455px !important;
    }

    .title-feature .rectangle { 
        display: none !important;
    }

    section.feature-list.section img {
        padding: 0px 40px !important;
    }

    img.header-logo { 
        left: 20px !important;
    }

    #mb_parallax_three {
        padding: 10vh 0vh 0vh 5vh !important;
    }
     
}

/*--------------------------------------------------------------------START 414px-------------------*/
@media screen and (max-width: 414px) {

    .background-home {
        width: 414px !important;
    }

    #mb_parallax_one { 
        margin-bottom: 25px !important;
    }

    #mb_parallax_three {
        padding: 10vh 0vh 0vh 10vh !important;
    }

    .section {
        padding: 40px 0;
    }

    .background-home {
        background-size: contain !important;
        width: 390px !important;
        padding-bottom: 35vh !important;
    }

    #mb_parallax_one {
        height: 98vh !important;
    }

    #client .heading {
        padding: 0px !important;
    }

    .list-client img {
        height: 85px !important; 
    }
}

/*--------------------------------------------------------------------START 360px-------------------*/
@media screen and (max-width: 360px) {

    .background-home {
        width: 360px !important;
        padding-bottom: 35vh !important;
    }

    .hero-area h1 { 
        font-size: 40px !important;
    }

    #mb_parallax_one {
        height: 108vh !important;
    }

    #mb_parallax_two {
        padding: 0px 2vh !important;
    }

    #mb_parallax_three {
        padding: 10vh 0vh 0vh 5vh !important;
    }

    .feature-list .content.mt-100 {
        padding: 10px !important;
    }

    #client .heading {
        padding-bottom: 0px !important;
    }

    .list-client img {
        height: 75px !important;
        padding: 10px;
    }
    section#contact .heading h3 {
        display: none !important;
    }

    .testiarea hr {
        margin: 20px 65px !important;
    }

    .dt-laptop-slider {
        margin-right: -43px !important;
    }

    .title-feature h1 {
        margin-bottom: -5px !important;
        font-size: 32px;
    }

    img.logoysi {
        width: 75px !important;
    }

}