/* CSS Document */

@media (min-width: 1430px) {
    .container {
        min-width: 1430px;
    } 
}

@media (max-width: 1430px) {
    
    #main-menu li {
        padding: 0 10px;
    }
    
    #main-menu li:first-child {
        padding: 0 10px 0 0;
    }
    
    #main-menu li:last-child {
        padding: 0 0 0 10px;
    }
    
    #main-menu a {
        font-size: 18px;
    }
    
    .main-banner h2 {
        font-size: 31px;
        line-height: 34px;
        padding: 120px 72px 0 0;
    }
    
    .section1 h3 {
        font-size: 27px;
    }
    
    .section1 .text p {
        font-size: 19px;
    }
    
    .section2 .box .text h4 {
        font-size: 26px;
        line-height: 26px;
    }
    
    .section2 .box .text {
        top: 22%;
    }
    
    .section2 .box .text img {
        width: 55px;
    }
    
    .brands li {
        padding: 0 35px;
    }
    
    .parallax {
        height: 390px;
    }
    
    .section3 form .file,
    .section3 form input {
        height: 50px;
        line-height: 50px;
    }
    
    .section3 form label.button {
        height: 40px;
        line-height: 38px;
    }

}

@media (max-width: 1199.98px) {
    
    #main-menu {
        border-top: 1px solid #FFF;
        margin-top: 15px;
    }
    
    #main-menu li {
        text-align: center;
        padding: 5px 0;
    }
    
    #main-menu li:after {
        display: none;
    }
    
    .main-banner h2 {
        font-size: 26px;
        line-height: 29px;
    }
    
    .main-banner {
        height: 640px;
    }
    
    .main-banner h2 {
        font-size: 28px;
        line-height: 31px;
        padding: 0 72px 0 0;
    }
    
    .section1 h3 {
        font-size: 24px;
    }
    
    .section1 .text p {
        font-size: 17px;
        line-height: 27px;
    }
    
    .float-box p {
        width: 72%;
        font-size: 24px;
        line-height: 27px;
    }
    
    .section2 .box .text {
        top: 15%;
    }
    
    .section2 .box .text h4 {
        font-size: 22px;
        line-height: 23px;
    }
    
    .brands li {
        padding: 0 12px;
    }
    
    .parallax {
        height: 340px;
        background-position: right center;
    }
    
    .section3 form label {
        font-size: 19px;
        padding-bottom: 5px;
    }
    
    .section3 form .file,
    .section3 form input {
        height: 45px;
        line-height: 45px;
    }
    
    .section3 form label.button {
        height: 34px;
        line-height: 32px;
    }
    
    .section3 form .small {
        bottom: -4px;
        font-size: 15px;
        line-height: 18px;
        right: 15px;
    }
    
    .section3 form .inputfile {
        width: 87%;
    }
    
    .main-banner h2.style2 {
        font-size: 22px;
        line-height: 26px;
    }
    
    .half-text {
        padding: 60px 0;
    }
    
    #footer .top ul {
        text-align: center;
    }
    
    #footer .logo {
        float: none;
        margin: 20px auto 0;
        display: block;
    }

}

@media (max-width: 991.98px) {

    #header .top-bar .box p {
        font-size: 16px;
    }
    
    #header .top-bar .box .social li {
        padding: 0 0 0 15px;
    }
    
    #header .main-logo {
        width: 185px;
    }
    
    #header #main-menu {
        background: rgba(0,0,0,0.6);
        padding-bottom: 18px;
    }
    
    #header .active #main-menu {
        background: none;
    }
    
    #main-menu .dropdown-menu a:before {
        display: none !important;
    }
    
    #main-menu .dropdown-menu a:hover {
        font-weight: 700;
        padding-left: 0;
        background-color: rgba(10,10,10,0.23);
    }
    
    #main-menu li a {
        text-align: center;
        padding-left: 0 !important;
    }

    .main-banner {
        height: 450px;
    }
    
    .main-banner h2 {
        font-size: 22px;
        line-height: 23px;
        padding: 70px 22px 0 0;
    }
    
    .section1 h3 {
        font-size: 21px;
        padding: 0;
    }
    
    .section1 .text {
        width: 100%;
    }
    
    .section1 .text p {
        line-height: 24px;
    }
    
    .float-box p {
        width: 85%;
        font-size: 21px;
    }
    
    .section2 .box .text img {
        width: 47px;
    }
    
    .section2 .box .text h4 {
        font-size: 19px;
        line-height: 20px;
    }
    
    .section2 .box .text .button {
        font-size: 14px;
        margin: 13px 0 0 0;
    }
    
    .brands {
        padding: 50px 0 60px;
    }
    
    .brands li {
        padding: 17px 40px;
    }
    
    .parallax {
        height: 310px;
    }
    
    #interactive-image {
    }
    
    #interactive-image .items {
        right: 130px;
        top: 103px;
    }
    
    #interactive-image .items .item1 {
        top: -2px;
        right: 37px;
    }
    
    #interactive-image .items .item2 {
        top: 337px;
        right: 32px;
    }

    #interactive-image .items .item4 {
        top: 263px;
        right: 357px;
    }
    
    #interactive-image .items .item5 {
        top: 394px;
        right: 205px;
    }
    
    #interactive-image .items .item3 {
        top: 688px;
        right: 37px;
    }
    
    .main-banner h2.style2 {
        font-size: 18px;
        line-height: 24px;
    }

    #footer .top li {
        padding: 0 30px 0 0;
    }
    
}

@media (max-width: 767.98px) {
    
    .d-mobile {
        display: none !important;
    }
    
    #header .top-bar .box {
        line-height: 38px;
    }
    
    #header .top-bar .box .social li:first-child {
        padding: 0;
    }
    
    #header .top-bar .box {
        padding: 0 5px;
    }
    
    #header .top-bar .box:last-child {
        padding: 0 8px 0 3px;
    }
    
    #header .main-logo {
        width: 156px;
    }
    
    #header .navbar-toggler {
        padding: 6px;
        top: -33px;
    }
    
    .main-banner {
        background-position: 82% center;
    }
    
    .main-banner h2 {
        font-size: 20px;
        line-height: 25px;
        padding: 0 22px 0 0;
    }
    
    .icon-scroll::before {
        margin-left: -7px;
        top: 9px;
    }
    
    .section1 {
        height: auto;
        padding: 30px 0;
    }
    
    .section1 h3 {
        font-size: 19px;
    }
    
    .section1 .text {
        padding: 25px 0 0 0;
    }
    
    .section1 .text p {
        font-size: 16px;
    }
    
    .float-box {
        margin: -19px 0 35px;
        padding: 40px 0;
    }
    
    .float-box p {
        line-height: 24px;
        font-size: 19px;
    }
    
    .section2 .box {
        width: 50%;
    }
    
    .parallax {
        height: 250px;
        background-position: 75% center;
        background-size: auto 100%;
    }
    
    .section3 header p {
        font-size: 18px;
        line-height: 22px;
        padding: 10px 0 0 0;
    }
    
    .section3 header {
        padding-bottom: 45px;
    }
    
    .section3 form label {
        font-size: 17px;
    }
    
    .section3 form .file,
    .section3 form input,
    .section3 form textarea {
        margin-bottom: 20px;
    }
    
    .section3 form .small {
        bottom: 8px;
        line-height: -1px;
        right: 0;
        position: relative;
        left: 0;
    }
    
    .section3 form .bottom {
        text-align: center;
        margin: 0;
    }
    
    .section3 form button {
        display: block;
        font-size: 18px;
        height: 50px;
        line-height: 44px;
        padding: 0;
        margin: 20px auto 0;
        width: 100%;
    }
    
    #interactive-image {
        height: 300px;
    }
    
    #footer .bottom p {
        text-align: center;
    }
    
    #footer .bottom .social {
        text-align: center;
        width: 100%;
        padding: 15px 0 0 0;
    }
    
    #interactive-image .items {
        right: 0;
        top: 27px;
        width: 100%;
    }
    
    #interactive-image .items .button {
        width: 23px;
        height: 23px;
        font-size: 14px;
        line-height: 22px;
    }
    
    #interactive-image .items .button:after {
        width: 34px;
        height: 34px;
    }
    
    #interactive-image .items .item1 {
        right: -127px;
    }
    
    #interactive-image .items .item2 {
        top: 93px;
        right: -127px;
    }
    
    #interactive-image .items .item3 {
        top: 217px;
        right: -126px;
    }
    
    #interactive-image .items .item4 {
        top: 92px;
        right: -17px;
    }
    
    #interactive-image .items .item5 {
        top: 132px;
        right: -72px;
    }
    
    #interactive-image .deploy {
        margin: 0 0 0 -50px;
        width: 180px;
        padding: 10px;
    }
    
    #interactive-image .deploy h5 {
        font-size: 16px;
    }
    
    #interactive-image .deploy p {
        font-size: 13px;
    }
    
    .icon-scroll img {
        width: 57%;
    }
    
    .main-banner .arrow-down {
        bottom: 20px;
    }
    
    .main-banner h2.style2 {
        font-size: 16px;
        line-height: 18px;
        padding: 50px 0 0 0;
    }
    
    
}

@media (max-width: 575.98px) {
    
    .section2 .box {
        width: 100%;
    }
    
    .section2 .box .text h4 {
        font-size: 28px;
        line-height: 28px;
    }
    
    .section2 .box .text img {
        width: 79px;
    }
    
}
