@media screen and (max-width: 1024px) {
    .intro .left{min-width: 70%}
    .about .square1{ left:40px; bottom:50px}
    .about .square2{ right:40px; top:50px}
}

@media screen and (max-width: 990px) {
    .catalog .col.item {
        width: 48%
    }
   
     .intro h1 {
         font-size: 38px;
        line-height: 40px;
    }
    
    .intro h1 span {
        font-size: 30px;
        line-height: 40px;
    }
    .about .col{min-width: 100%; margin-bottom: 30px}
    
    .about .square1{display: none}
    .about .square2{display: none}
    
    
     .advantage-block .col{max-width: 48%; flex-basis:auto; margin-right: 0px;    margin-bottom: 15px;}
     .advantage-block .bg{background-position: top right;}
    
}



@media screen and (max-width: 779px) {
  	.callback-bt{height: 60px; width:60px; bottom: 25px;right: 35px; }
	.callback-bt .text-call{height: 60px; width:60px;}
	.callback-bt svg {margin: 13px auto;width: 30px;height: 30px;}
    .carticon{right: 20px; top: 60px}
  
    .intro .left h1{width: 70%}
    .intro .image{min-width: 30%; width: 30%; position: absolute; right: 15px; top: 60px; }
    
    
    
    
 /*    .intro .left{
        min-width:100%;    
    }
    .intro .image{display: none}
    .intro .image-mobile{display: block; max-width: 300px}
   */ 
    
    .about-sepa .row div{min-width: 50%}
    
/********selection***********/    
    .selection .col {
        flex-basis: auto;
        flex-grow: 1;
        min-width: 100%;
        margin-right: 0px;
    }
    .selection .relative {
        position: relative;
        height: 400px;
        overflow: hidden;
    }
    .selection .subtitle{
        width: 90%;
    }
    .selection.width .col.left {
        max-width: 100%;
    }
    .selection.width .col.left img{
        display: block; margin: 0 auto 15px  auto;
    }
    .contact .left-block, .contact .right-block{width: 100%}
    footer .btn {
        margin-left: 0px;
        margin-top: 25px;
        display: block;
    }
    .contact .left-block{margin-bottom: 30px; text-align: center}
}


@media screen and (max-width: 729px) {
    header .messengers{
        display: none;
        max-width: 40px;
    }
    header nav{
        display: none;
        text-align: left
        
    }
     header nav li{
        display: block;
        margin-right:0;
        height: 43px;
        border-bottom: 1px solid #666666 
    }
    header nav a{
    font-size: 14px;
    }
    .mobile-menu{ display: block}
     .wrapper{
        padding: 50px 30px;
    }
   
	 
    
	
}

@media screen and (max-width: 640px) {
    
    
    .about .square1{display:  block; bottom:-8%; left: 8%}
    .about .square2{display:  block; top:-8%; right: 8% }
  
   
    .intro h3{width: 100%}
    
    .calculator .subtitle,.selection .subtitle, .quiz .subtitle, .catalog .subtitle{width: 100%; font-size: 18px; line-height: 24px}
    .calculator .sepa{margin-bottom: 0}
    .catalog .wrapper{padding-left:15px; padding-right: 15px}
    .catalog .col.item{padding: 15px}
    .catalog .item_name{font-size: 16px}
    .catalog .col.item {width: 100%; margin-left: auto; margin-right: auto}
}
@media screen and (max-width: 550px) {
    .intro h1 span {
        display: block;
      
        margin-top: 5px;
    }
    h2 {
        font-size: 24px;
        line-height: 36px;
    } 
    footer .row .col{min-width: 100%; text-align: center}
    footer .row .col.right{text-align: center}
    footer .btn {margin: 30px auto}
    .about-sepa img {padding: 0}
    
    .intro .image{display: none}
    .intro .left{min-width: 100%}
    .intro .left h1{width: 100%; text-align: center}
    .intro .image-mobile{display: block; margin-bottom: 30px}
    .intro .price{text-align: center}
    .intro .col{min-width: 100%; margin-bottom: 15px}
    .intro .btn{margin-left: auto; margin-right: auto; display: block}
    .advantage-block .col{flex-basis:auto; margin-right: 0px; padding-top: 80px;   margin-bottom: 15px; max-width: 344px}
    .advantage-block .bg {background-size: cover;}
        
    
}
@media screen and (max-width: 460px) {
     .about .square1{bottom:-10%; left: 8%}
    .about .square2{top:-10%; right: 8% }
    .selection .relative{height: auto; overflow: visible}
    .selection.type img{margin-bottom: 15px}
    .selection .absolute{position: relative; border: 3px solid #ebebeb;}
    .quiz .step-app > .step-content{padding: 30px 15px 0}
    .quiz .text-error {margin: 0px -15px 0;}
    
    
	.popup-content {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }
    .popup-window{
        padding: 20px;
    }
    .popup-content label, .popup-content button {
        width: 100%;
    }
    .popup-close{
        top:0px;
        right:0px
    }
    .popup-content h3{
        font-size: 22px;
    }
    .wrapper{
        padding: 50px 15px;
    }
    .mobile-menu{margin-left: -10px; margin-right: -10px;}

}
@media screen and (max-width: 410px) {
     .about .square1{ display: none}
    .about .square2{ display: none}
    .intro h1{
        font-size: 34px;
      
    }.intro h1 span {
        display: block;
        font-size: 22px;
        line-height: 32px;
        margin-top: 5px;
    }
    .intro h3{
        font-size: 22px;
        line-height: 30px
      
    }
    .intro .sale{width: 100%; margin-top: 40px }
    .intro .eTimer{padding: 30px 15px}
    
    .delivery .desc {
        font-size: 14px
    }
    .delivery .title{
        font-size: 16px
    }
      .calculator .btn{font-size: 14px}
   
}
@media screen and (max-width: 360px) {
 
    .about .col2.big{font-size: 50px; margin-right: 15px}
}


@media screen and (max-width: 330px) {
  
    .wrapper{
        padding: 40px 15px;
    }
    
    .intro .sale {
        width: 100%;
    }
    .eTimer .etUnit .etNumber{font-size: 29px !important;}
    .eTimer .etTitle{font-size: 18px!important}
    .catalog .row.forma label{font-size: 14px}
}