@media screen and (max-width: 1620px)
{
    .page-top .wrapper-1600{width: 100%}
}

@media screen and (max-width: 1280px)
{
    .right-side h1+p{max-width: 100%;}
}

@media screen and (max-width: 1200px)
{
    .project-item .description{top: 60%;}
    .project-item:hover .description{top: 30%}
    .project-item .description .name{font-size: 20px}
    .projects-list .project-item{width: calc((100% - 40px)/3);}
    .projects-list .project-item:nth-child(2n){margin-right: 20px}
    .projects-list .project-item:nth-child(3n){margin-right: 0}
    .clients-list .client{padding: 0 20px 20px;}
    .review .right-side .pink-block{padding: 115px 20px 45px 160px}
}

@media screen and (max-width: 980px)
{
    .index-content .project-item{width: calc((100% - 20px)/2);}
    .index-content .project-item:nth-child(2n){margin-right: 0}
    .page-top .right-side{padding: 60px 10px 60px 20px}
    .right-side h1+select{width: 50%; min-width: 0; position: absolute; bottom: 30px; left: 50%; transform: translateX(-30%)}
    .clients-list .client{width: 20%}
    .services-list .service{width: 33.3%; padding: 0 20px 10px}
    .cursor{display: none}
    *{cursor: auto}
}

@media screen and (max-width: 900px)
{
    .top-menu li:not(.menu-button){display: none}
    .index-content h1, .page-bottom .header{font-size: 68px}
    .page-bottom .header+p{font-size: 32px}
    .page-top .numerals>div{width: 100%; float: none}
    .chess-order>div:nth-child(2n) .text{padding-left: 25px}
    .chess-order>div:nth-child(odd) .text{padding-right: 25px}
    .chess-order>div:nth-child(2n) .image{padding-right: 0}
    .chess-order>div:nth-child(odd) .image{padding-left: 0}
    .chess-order>div:not(.video){padding-bottom: 20px}
    .info-block .text{margin-top: 0; margin-bottom: 20px}
    .info-block.video{padding: 30px 0!important}
    h1{font-size: 42px;}
}

@media screen and (max-width: 800px)
{
    .projects-list .project-item{width: calc((100% - 20px)/2);}
    .projects-list .project-item:nth-child(3n){margin-right: 20px}
    .projects-list .project-item:nth-child(2n){margin-right: 0}
    .clients-list .client{width: 25%}
    .review .right-side .pink-block{padding: 115px 20px 45px 90px}
    .services-list .row:not(:last-child){margin-bottom: 0}
    .services-list .service, .services-list .pink-row .service{width: 100%; padding: 20px 10px}
    .services-list .row:first-child .service:first-child{padding-top: 0}
    .services-list .row:last-child .service:last-child{padding-bottom: 0}
    .services-list .pink-row{background: #fff}
    .services-list .row:nth-child(odd) .service:nth-child(even){background: #ffd9d7}
    .services-list .row:nth-child(even) .service:nth-child(odd){background: #ffd9d7}
    .services-list .rows .wrapper-1600{padding: 0}
    #to-top{right: 10px}
}

@media screen and (max-width: 720px)
{
    .top-menu{width: 50%; background: #3fd5ae;}
    .top-menu .menu-button{padding: 17px 30px;}
    .logo{width: 150px; margin: 12px 0 0 0}
    #header{height: 58px}
    .index-content h1,  .page-bottom .header{font-size: 55px;}
    .page-bottom .header+p{font-size: 20px;}
    .swiper-carousel{padding: 0 40px}
    #main-menu{padding: 25px 0 100px}
    #main-menu ul{margin-top: 25px}
    #main-menu ul li{margin-bottom: 20px}
    #main-menu ul li a{font-size: 24px}
    #main-menu .wrapper-1600{flex-direction: column-reverse}
    #main-menu .right-side, #main-menu .left-side{width: 100%}
    #main-menu .left-side{margin-top: 20px}
    #main-menu .address{position: static; margin-top: 20px}
    .chess-order .image, .chess-order .text{float: none; width: 100%; padding: 0!important}
}

@media screen and (max-width: 630px)
{
     h1{font-size: 32px;}
    .swiper-button-prev{left: -10px!important}
    .swiper-button-next{right: -10px!important}
    .review .left-side, .review .right-side{float: none; width: 100%}
    .review .left-side{padding: 0 10px}
    .reviewer-photo{position: relative; display: block; left: 50%; transform: translateX(-50%); top: 50px}
    .reviews-list .reviewer-photo{top: 0}
    .review .right-side .pink-block{padding: 80px 10px 20px 10px; background-position: top left 10px}
    .clients-list .client{width: 33.3%}
    canvas, #myCanvasContainer{width: 100%!important}
    #footer{padding: 30px 0 0; height: 430px}
    #sticky-footer-wrapper{padding-bottom: 430px}
    #footer .left-column{float: none}
    #footer .right-column{padding-top: 15px; float: none; text-align: left}
}

@media screen and (max-width: 500px)
{
    .page-top{position: relative; margin-bottom: 0}
    .page-top .left-side, .page-top .right-side{float: none; width: 100%}
    .page-top .right-side {padding: 0 10px 30px 10px}
    .left-side .red-block{width: 50%; height: 220px;}
    .index-content .left-side .red-block{height: 300px;}
    .right-side h1, .index-content .right-side h1{position: absolute; top: 50px; left: 27px; max-width: calc(100% - 27px)}
    .right-side h1+select{width: calc(100% - 50px); position: absolute; top: 130px; bottom: auto; left: 27px; transform: none}
    .projects-list .project-item, .index-content .project-item{width: 100%}
    .project-item:nth-child(n){margin-right: 0}
    .page-bottom .header+p{width: 210px; right: -40px}
    .clients-list .client{width: 50%}
}