@media screen and (max-width:1024px) {
    .banner img.bg {
        height: 360px;
    }
    .banner .wrap {
        margin-top: -80px;
    }
    .banner ul li {
        font-size: 16px;
    }
    .banner ul li .text {
        width: calc(100% - 80px);
    }
    .banner ul li .icon {
        width: 80px;
        height: 80px;
    }
    
    .section.services .tbg .image .box,
    .section.services .tbg.oil-and-filters .image .box,
    .section.services .tbg.brakes .image .box,
    .section.services .tbg.suspension .image .box {
        width: 400px;
    }
}

@media screen and (max-width:1000px) {
    .wrap {
        width: 80%;
    }
    
    
    .section.services .tbg .image img.bg {
        display: none;
    }
    .section.services .tbg .image img.bg.nofx {
        display: block;
    }
    
    .section.services .tbg.oil-and-filters,
    .section.services .tbg.brakes,
    .section.services .tbg.suspension {
        margin-left: auto; margin-right: auto;
    }
    .section.services .tbg .image .box,
    .section.services .tbg.oil-and-filters .image .box,
    .section.services .tbg.brakes .image .box,
    .section.services .tbg.suspension .image .box,
    .section.services .tbg .image .box:nth-of-type(1),
    .section.services .tbg .image .box:nth-of-type(2),
    .section.services .tbg .image .box:nth-of-type(3) {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 100%; max-width: 440px;
        margin: 0 auto 0 auto;
    }
    .section.services .tbg .image .box hr {
        display: none;
    }
    .section.services .tbg.oil-and-filters .image .box {
        margin-top: -30px;
    }
    .section.services .tbg.brakes .image .box {
        margin-top: 20px;
    }
    .section.services .tbg.suspension {
        margin-top: 100px;
    }
}


@media screen and (max-width:960px) {
    header {
        width: 50px;
    }
    header ul {
        display: none;
        position: absolute;
        top: 100%; right: 0;
        background: rgba(0,0,0, 0.50);
        border-top: 1px solid rgba(255,255,255, 0.30);
        width: 100vw;
        height: calc(100vh - 70px);
        line-height: normal;
        padding: 0;
        margin: 0;
    }
    header ul li {
        display: block;
        border-bottom: 1px solid rgba(255,255,255, 0.30);
        width: 100%;
        padding: 20px 20px 20px 40px;
        margin: 0;
    }
    header img.menu-toggle {
        display: inline-block;
    }
    
    .wrap {
        width: 90%;
    }
    
    .section.services .tech {
        margin: 0 0 200px 0;
    }
    .section.services .tech .box,
    .section.services .tech .box:nth-of-type(1),
    .section.services .tech .box:nth-of-type(2),
    .section.services .tech .box:nth-of-type(3),
    .section.services .tech .box:nth-of-type(4) {
        width: 100%;
        margin-left: 0; margin-right: 0;
    }
}

@media screen and (max-width:760px) {
    .section.services-dark .wrap .left,
    .section.services-dark .wrap .right {
        width: 100%;
        text-align: center;
    }
    .section.services-dark img.graph {
        margin: 0 auto;
    }
    .section.services-dark .gains,
    .section.services-dark .gains .col .info {
        margin-left: auto; margin-right: auto;
    }
    .section.services-dark .wrap {
        margin-top: 440px;
    }
    .section.services-dark .engine {
        position: absolute;
        top: 0; left: 0;
        margin: -200px 0 0 0;
    }
    .section.services-dark .wrap .right .details {
        width: 100%;
        margin: 60px auto 0 auto;
    }
}

@media screen and (max-width:720px) {
    .banner ul li {
        font-size: 14px;
    }
    .banner ul li .text .sub-text {
        font-size: 11px;
    }
    .banner ul li .text {
        width: calc(100% - 60px);
    }
    .banner ul li .icon {
        width: 60px;
        height: 60px;
    }
    .banner ul li .icon img {
        margin: -12px 10px 0 0;
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width:680px) {
    footer .about-us {
        width: 100%;
    }
    
    footer .contact-info,
    footer .author {
        position: static;
        margin: 40px 0 0 0;
    }
}

@media screen and (max-width:580px) {
    .banner img.bg {
        object-position: 40% 0%;
    }
    .banner ul {
        display: block;
    }
    .banner ul {
        width: fit-content;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        margin: 0 auto;
    }
    .banner ul li {
        width: 100%;
        font-size: 14px;
    }
    
    .section.services .tbg.oil-and-filters {
        margin-top: 50px;
    }
}

@media screen and (max-width:420px) {
    .section.services .page-caption .smaller {
        position: static;
        width: auto;
        margin: 0;
        text-align: center;
    }
    
    .section.services .tech .box .image {
        width: 100px;
    }
    .section.services .tech .box .text {
        width: calc(100% - 100px);
    }
}

@media screen and (max-width:360px) {
    .section.services .tech .box .image {
        width: 100px;
        margin: 0 auto 20px auto;
    }
    .section.services .tech .box .text {
        width: 100%;
    }
    .section.services .tech .box .details .image,
    .section.services .tech .box .details.swap .image {
        order: 1;
    }
    .section.services .tech .box .details .text,
    .section.services .tech .box .details.swap .text {
        order: 2;
    }
}