@media all and (max-width: 1400px) {
    header .col2 {
        text-align: center !important;
        float: none;
        height: auto;
        width: 100%;
    }
    header .col2:last-child {
        padding-top: 10px;
    }
    main {
        padding-top: 88px;
    }
}

@media all and (max-width: 1181px) {
    .page-width {
        width: 100%;
        padding: 10px;
    }
    .col-container {
        margin: 0;
    }
    #work-process .col6, #work-process .col6.open, #work-process .col6:hover, #work-process .col-container:hover .col6.open:not(:hover) {
        width: 33.333%;
        min-height: 490px;
    }
    #work-process .col6 .description-text, #work-process .col-container:hover .col6.open:not(:hover) .description-text {
        display: block;
    }
    #single .col-30, #single .col-70 {
        width: 100%;
    }
    #single .col-30 ul li {
        width: 25%;
        float: left;
    }
    #single .col-70 >.col-container >.col2 img {
        width: 100%;
    }
    #carousel-3 .owl-nav {
        display: none;
    }
    #single .col-30 .pay-box .pay-box-help {
        min-width: 100%;
        left: 0;
    }
}

@media all and (max-width: 1040px) {
    #banner-two .col3 {
        padding: 10px;
    }
    footer .col3 {
        padding: 10px;
    }
    footer .col3:nth-child(2) {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
        text-align: left;
        padding-left: 50px;
    }
}

@media all and (max-width: 900px) {
    #projects .col3 {
        width: 50%;
    }
    #pay .col3 {
        width: 100%;
    }
    #test-build > .page-width > .col2 {
        width: 100%;
    }
    #map .col-30, #map .col-70 {
        width: 100%;
    }
    #single .col-30 ul li {
        width: 50%;
    }
}

@media all and (max-width: 800px){
    #work-process .col6, #work-process .col-container:hover .col6.open:not(:hover), #work-process .col6.open, #work-process .col6:hover {
        width: 50%;
    }
    #work-process .col6 .description-text, #work-process .col-container:hover .col6.open:not(:hover) .description-text {
        display: block;
    }
    footer .col3 {
        width: 50%;
    }
    footer .col3:nth-child(2) {
        text-align: right;
        padding: 0 50px 0 0;
    }
    footer .col3:last-child {
        width: 100%;
        clear: both;
    }
    #about-desc .col2, #about-desc_next .col2  {
        width: 100%;
    }
    #single .col-70 >.col-container >.col2  {
        width: 100%;
    }
}

@media all and (max-width: 740px) {
    header nav {
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        z-index: 999;
        min-height: 100%;
        height: auto !important;
        background: #fff;
        display: none;
        padding-top: 50px;
        transition: none;
    }
    header nav a {
        display: block !important;
        text-align: right;
        padding: 10px 25px;
        border-bottom: 1px solid #ebebeb;
        margin: 0;
    }
    header .col2 figure, header .col2.textalign-r {
        display: none;
    }
    .mob-ico {
        display: block;
        z-index: 9999;
    }
    .mob-header {
        display: block;
    }
    .mob-header .phone {
        margin: 0;
    }
    main {
        padding-top: 48px;
    }
    #main .logo {
        width: 50%;
        margin: 0 auto;
        padding-bottom: 30px;
    }
    #main .logo img {
        width: 100%;
    }
    #main .h1, #banner-one .h1, #banner-three .h1 {
        font-size: 5vw;
        line-height: 1.5;
    }
    #calculation .col3 {
        width: 100%;
        padding: 10px 0;
    }
    #reviews .col3 {
        width: 50%;
    }
}

@media all and (max-width: 680px) {
    #banner-two .col3 {
        width: 100%;
    }
}

@media all and (max-width: 600px) {
    #projects .col3 {
        width: 100%;
    }
    #reviews .col3 {
        width: 100%;
    }
    #work-process .col6, #work-process .col-container:hover .col6.open:not(:hover), #work-process .col6.open, #work-process .col6:hover {
        width: 100%;
        text-align: center;
        padding-bottom: 40px;
    }
    #work-process .col6 .img-box img {
        width: 100%;
    }
    #test-build > .page-width > .col2 .col2 {
        width: 100%;
        padding: 10px 0;
    }
    #test-build .btn-box .btn {
        padding: 19px 0;
        width: 100%;
    }
    #main .h1, #banner-one .h1, #banner-three .h1 {
        font-size: 7vw;
    }
    #single .col-30 ul {
        text-align: center;
    }
    #single .col-30 ul li, #single .col-30 .pay-box .col3 {
        width: 100%;
        padding: 35px 0 40px;
    }
    #single .col-30 ul li i {
        right: 0;
        margin: 0 auto;
    }
    #single .col-30 .pay-box .h6 {
        font-weight: 700;
        font-family: "MuseoSansBold", sans-serif;
        font-size: 24px;
        text-align: center;
    }
    #single .col-30 ul li, #single .col-30 .pay-box .col3 {
        text-align: center;
    }
    #single .col-30 .pay-box a.text-box {
        display: inline-block;
        text-align: center;
        padding-top: 110px;
    }
}

@media all and (max-width: 480px) {
    .mob-header .phone {
        display: none;
    }
    .mob-header .callback .btn {
        margin: 0;
    }
    #calculation form .col2 {
        width: 100%;
        text-align: center;
    }
    #pay .col3 {
        padding: 20px 0;
    }
    footer .col3 {
        width: 100%;
        text-align: center;
    }
    footer .col3 .logo img {
        margin: 0 auto;
    }
    footer .callback .mail {
        display: inline-block;
    }
    #reviews .col3 .play-box a, #carousel-2 .item .play-box a {
        padding: 15% 0;
    }
    #carousel-2 .item .play-box a i:before {
        font-size: 90px;
        line-height: 90px;
    }
}

@media all and (max-width: 440px) {

}

@media all and (max-width: 360px) {
    #about .btn, #projects > .page-width > .btn-box > .btn, #reviews .btn-box .btn {
        width: 100%;
        padding: 20px 0;
    }
}