@media screen and (max-width: 1100px){
    .container{
        width: 98%;
    }
}

@media screen and (max-width: 1050px){
    .plan ul{
        background: none;
    }
    .ul-left {
        display: block;
        margin: 20px auto;
        border-right: 1px dashed #9f9f9f;
        width: 56%;
    }
    .ul-right{
        display: block;
        margin: 20px auto;
        width: 56%;
    }
    .work ul{
        text-align: center;
    }
    .work ul li{
        width: 27%;
    }
    .info{
        width: 640px;
    }
    .logo{
        float: left;
    }
    .icon{
        float: right;
    }
    .nav ul li{
        padding-right: 25px;
    }
    .contact{
        margin-left: 20px;
    }
    .footer .contact{
        clear: none;
    }
    .contact p{
        font-size: 25px;
    }
    .top-header {
        padding: 10px 0 40px 0;
    }
    .info h1{
        font-size: 30px;
    }
    .box span{
        font-size: 20px;
    }
    .logo img{
        width: 123px;
        height: auto;
    }
    .logo h2{
        font-size: 16px;
    }
    .logo{
        width: 295px;
    }
   .bloc{
       padding-top: 45px;
   }
   .bloc .form{
       background-size: contain;
   }
   .form button{
       margin: 11px auto;
   }

    .header .form h2 {
        padding-bottom: 3px;
    }
}


@media screen and (max-width: 1000px){
    .header .container .bloc {
        position: absolute;
        top: 28px;
        left: 70%;
        margin-left: -500px;
    }
    .work ul li{
        width: 40%;
        margin-right: 0;
    }
    .top-header {
        padding: 60px 0 20px 0;
    }
    .sale{
        background-size: contain;
        width: 260px;
        padding: 5px 30px 30px 20px;
    }
    .info{
        width: 352px;
    }
    .bloc .form{
        float: right;
    }
    .sale{
        margin-top: 10px;
    }
    .bloc{
        padding-top: 28px;
    }
    .box{
        padding-top: 0;
    }
    .ul-left {
        width: 65%;
    }
    .ul-right{
        width: 66%;
    }
    .nav ul li {
        padding-right: 20px;
    }
    .nav ul li:last-child {
        padding-right: 5px;
    }
    .work ul li:hover .child {
        left: 61px;
        top: 246px;
        width: 62%;
    }
    .materials .bottom .child{
        width: 100%;
    }
    .materials ul .bottom:hover .child {
        display: block;
        position: absolute;
        left: -18px;
        top: 143px;
        z-index: 10;
    }
    .logo img{
        padding-top: 50px;
    }
    .footer{
        padding: 30px 0;
    }
}
@media screen and (max-width: 900px){
    .header .container .bloc {
        top: 74px;
    }
    .logo{
        width: 135px;
    }
    .logo h2{
        float: none;
        clear: both;
        padding-top: 15px;
    }
    .footer{
        padding: 30px 0;
    }
    .top-header .contact{
        padding-top: 0;
    }
    .contact{
        text-align: left;
        margin-top: 15px;
        margin-left: 0;
    }
    .contact button{
        margin-left: 0;
    }
    .contact p{
        font-size: 30px;
    }
    .materials h3, .work h3, .recommendations h2{
        text-align: center;
    }
    .materials ul li{
        margin-right: 10px;
    }
    .materials .bottom {
        margin-right: 25px;
    }
    .materials ul li:hover .child {
        left: 14px;
    }
    .advantages> .container {
        width: 98%;
    }
    .advantages .left, .advantages .right{
        display: block;
        width: 55%;
        margin: auto;
    }
    .nav ul li {
        padding-right: 20px;
    }
    .nav ul li a{
        font-size: 16px;
    }
    .plan ul li{
        width: 95%;
    }
    .plan span{
        width: 330px;
    }
    .sale h2 {
        font-size: 29px;
        padding-bottom: 5px;
    }
    .form button{
        margin: 11px auto;
    }
    .footer h2{
        font-size: 19px;
    }
    .work ul li:hover .child {
        left: 61px;
        top: 246px;
        width: 70%;
    }
}
@media screen and (max-width: 850px){
    .logo img{
        padding-top: 41px;
    }
    .nav {
        background: #efefef;
    }
    .plan span{
        width: 35%;
    }
    .plan p{
        width: 47%;
    }
    .menu-button{
        display: block;
        position: absolute;
        top: -3px;
        left: 10px;
        margin: 10px auto;
        background: #f11b25;
        background: linear-gradient(to top, #007800, #00bd42);
        padding: 12px;
        transition: 1s;
        border-radius: 5px;
        display: block;
        cursor: pointer;
        border-bottom: 3px solid #074611;

    }
    .nav{
        padding: 30px 0;
    }
    .nav ul{
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        width: 100%;
        background:rgba(51,51,51,0.8);
        padding: 10px 15px;
        box-sizing: border-box;
        z-index: 9;

    }
    .nav  ul li{
        display: block;
        padding: 11px 0;
        text-align: left;
        border-radius: 0;
        border-bottom: 1px solid #fff;
    }
    .nav ul li:last-child{
        border-bottom: none;
    }
    .nav ul li a{
        color: #fff;
    }
    .footer h2 {
        position: absolute;
        top: 162px;
        left: 0;
        font-size: 20px;
       margin-left: 0;
    }
    .work ul li:hover .child {
        left: 28px;
    }
}
@media screen and (max-width: 800px){
    .header .container .bloc {
        top: 38px;
    }
    .materials ul li:hover .child {
        left: 3px;
    }
    .materials .bottom .child {
        width: 50%;
    }
    .materials ul .bottom:hover .child {
        left: 70px;
        top: 154px;
    }
    .ul-left{
        width: 69%;
    }
    .ul-right{
        width: 70%;
    }
    .top-header .logo, .top-header .icon, .top-header .contact{
        display: block;
        margin: 0 auto;
        float: none;
        text-align: center;
    }
    .top-header .contact{
        padding-top: 10px;
    }
    .work ul li{
        display: block;
        margin: 15px auto;
    }
    .work ul li:nth-child(3n){
        margin: 0 auto;
    }
    .materials .bottom{
        width: 45%;
    }
    .logo img{
        width: 100%;
    }
    .logo h2{
        font-size: 16px;
    }
    .contact button {
        margin: 10px auto;
    }
    .footer h2{
        top: 178px;
    }
    .work ul li:hover .child {
        left: 5px;
        top: 262px;
        width: 91%;
    }
    .work ul .has-child .child {
        padding: 0px 5px 30px 5px;
        background: #019549;
        border-radius: 5px;
        position: relative;
    }
    .work ul .has-child .child:before{
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        top: -9px;
        margin-left: -14px;
        width: 28px;
        height: 10px;
        background: url("../img/child-before.png") no-repeat;
    }
}
@media screen and (max-width: 750px){
    .header .container .bloc {
        left: 50%;
        width: 300px;
        margin-left: -150px;
    }
    .advantages .container{
        width: 100%;
    }
    .advantages .left, .advantages .right{
        width: 80%;
    }
    .advantages p{
        padding-left: 30px;
    }
    .advantages h4:after {
        right: 140px;
    }
    .company ul{
        width: 100%;
        text-align: center;
    }
    .company ul li{
        text-align: center;
        padding-right: 0;
        display: inline-block;
        padding-bottom: 15px;
    }
    .recommendations ul{
        width: 98%;
        text-align: center;
    }
    .recommendations ul li{
        display: inline-block;
       margin-top: 15px;
        padding-right: 0;
    }
    .bloc .form{
        float: none;
        display: block;
        margin: 0 auto;
    }
    .info{
        display: none;
    }

}

@media screen and (max-width: 700px){
    .materials ul li:hover .child {
        left: 56px;
    }
    .materials ul .bottom:hover .child {
        left: 52px;
    }
    .materials ul li {
        width: 45%;
        margin-right: 0;
    }
    .materials .bottom{
        margin-right: 10px;
    }
    .plan span{
        width: 30%;
        font-size: 16px;
    }
    .plan p{
        width: 50%;
    }
    .ul-left{
        width: 83%;
    }
    .ul-right{
        width: 84%;
    }
    .work:before{
        width: 300px;
        background-size: contain;
    }
}
@media screen and (max-width: 640px){
    .footer h2 {
        top: 205px;
        left: 50%;
        margin-left: -200px;
    }
}
@media screen and (max-width: 600px){

    .materials ul li:hover .child {
        left: 27px;
    }
    .materials .bottom .child {
        width: 59%;
    }
    .materials ul .bottom:hover .child {
        left: 24px;
    }
    .plan span{
        display: none;
    }
    .plan p{
        width: 60%;
    }
    .advantages h4:after {
        right: 80px;
    }
    .work ul li{
        width: 60%;
    }
    .advantages li {
        margin-bottom: 11px;
    }
    .work img{
        width: 200px;
        height: auto;
        padding-bottom: 10px;
    }
    .solutions li a{
        font-size: 16px;
    }

    .work ul li:hover .child {
        left: 41px;
        top: 194px;
        width: 74%;
    }
}
@media screen and (max-width: 520px){
    .header .container .bloc {
        margin-left: -158px;
    }
    .materials ul li:hover .child {
        left: 14px;
    }
    .advantages li{
        width: 95%;
    }
    .advantages p{
        width: 65%;
        padding-left: 10px;
    }
    .ul-left, .ul-right{
        width: 90%;
    }
    .advantages h4:after {
        right: 38px;
    }
    .examples p, .examples h4 {
        text-align: center;
    }
    .top-header .logo {
        width: 50%;
    }
    .solutions li a {
        font-size: 14px;
    }
    .work ul .has-child .child li, .materials ul .has-child .child li {
        padding: 8px 0 0 10px;
        width: 100%;
    }
    .work .child li{
        margin: 5px auto;
    }
    .work ul li:hover .child {
        left: 30px;
        width: 82%;
    }

}
@media screen and (max-width: 450px){
    .materials ul li:hover .child {
        left: 5px;
    }
    .materials .bottom .child {
        width: 74%;
    }
    .materials ul .bottom:hover .child {
        left: 3px;
    }
    .advantages p {
        width: 280px;
        margin: 0 auto;
        display: block;
        text-align: center;
        padding-left: 0;
    }
    .advantages img{
        display: block;
        margin: 0 auto;
    }
    .advantages h4:after {
        right: 8px;
    }
    .plan img{
        width: 50px;
    }
    .plan p{
        width: 70%;
        font-size: 19px;
    }
    .ul-right, .ul-left{
        width: 95%;
    }
    .solutions li a{
        font-size: 12px;
    }
    .contact p{
        font-size: 20px;
    }
    .green {
        padding: 20px 10px 43px 10px;
        left: 55%;
    }
    .materials img{
        width: 140px;
        height: auto;
    }
    .factor{
        font-size: 25px;
    }
    .footer h2{
        font-size: 19px;
    }
}
@media screen and (max-width: 400px){
    .materials ul li:hover .child {
        top: 115px;
    }
    .materials ul .bottom:hover .child {
        top: 120px;
    }
    .footer h2 {
        font-size: 14px;
        font-weight: bold;
        left: 202px;
    }
   .advantages h4:after{
        display: none;
    }
    .icon ul li{
        padding-right: 0;
    }
    .icon p{
        width: 100px;
        font-size: 14px;
    }
    .icon ul li:first-child{
        padding-right: 0;
    }
    .work h3, .materials h3, .advantages h3, .solutions h2, .company h2, .examples h2, .maps-contact h2 {
        font-size: 34px;
    }
    .green {
        top: 171px;
        width: 320px;
        box-sizing: border-box;
        left: 61%;
    }
    .green p{
        padding-bottom: 5px;
    }
    .bottom-form{
        background-size: contain;
        width: 320px;
    }
    .bottom-form {
        padding: 26px 0;

    }
    .icon{
        width: 313px;
    }
    .footer .contact{
        width: 180px;
    }
    .footer .top-info{
        font-size: 16px;
    }
    .ul-right, .ul-left {
        width: 100%;
    }

    .work ul li:hover .child {
        left: 14px;
        width: 100%;
    }
}
@media screen and (max-width: 370px){
    .ul-right li a, .ul-leftt li a {
        padding-left: 5px;
    }
    .solutions li a{
        font-size: 10px;
    }
    .materials img {
        width: 125px;
    }
    .plan img {
        width: 45px;
    }
    .plan ul li {
        width: 100%;
    }
    .plan p, .work a, .materials a {
        font-size: 18px;
    }
    .bottom-form, .header .form{
        width: 300px !important;
        background-size: contain;
    }
    .header .form{
        padding: 20px 0;
    }

    .bottom-form button {
        margin: 5px auto 6px;
    }
    .header .form button {
        margin: 11px auto 5px;
    }
    .header .form p, .bottom-form p, #call p {
        line-height: 19px;
    }
    .header .form .bottom{
        width: 89%;
    }
}
@media screen and (max-width: 350px){
    .materials ul li:hover .child {
        top: 105px;
        left: -3px;
    }
    .materials ul .bottom:hover .child {
        top: 111px;
    }
    .work ul li:hover .child {
        left: 2px;
        top: 195px;
        width: 106%;
    }
    .logo{
        width: 114px;
    }
    .footer h2{
        font-size: 14px;
        left: 202px;
    }
    .materials ul li, .materials .bottom {
        width: 52%;

    }
}