html{
font-size: 1.4vw;
font-family:'Roboto', sans-serif;
font-style: normal;
font-weight: normal;
letter-spacing: 0.03em;
}
* {
margin:0;
padding:0; 
box-sizing:border-box;
}
img, video {
max-width:100%;
height: auto;

}
a{
text-decoration:none;
color: #fff;
}
li {
list-style-type:none;
}
address {
font-size:inherit;
font-style:inherit;
}
.visiality-hidden {
visibility:hidden;
margin:0;
padding:0;
height: 0;
width: 0;
}

body {
background-color: #000;    
color: #fff;
}
h2 {
    font-size: 2vw;  
    font-style: normal;
font-weight: normal;
letter-spacing: 0.03em;
text-align: left;
text-indent: 10vw;
margin-top: 3vw;
margin-bottom: 2vw;
}
.visiality-hidden {
    visibility:hidden;
    margin:0;
    padding:0;
    height: 0;
    width: 0;
    }
  .myDIV{
    display: none;
    overflow: hidden;
    transition: max-height 0.2s ease-out;}
    .mobile_action, .form_mobile {
      display:none;
    } 
/* header*/
.header {
margin-top:0.8vw;  
margin-bottom: 0.5vw;  
position:relative; 
width: 100vw;
font-weight: 200;
font-size: 1.4vw;

}
.nav {
display:flex;
align-items: center;
}
.nav img {
margin: 0 auto;
width:14vw;
 }
nav ul {
    font-family: Roboto;


display:flex;
justify-content: space-around; 
align-items: center; 
width:100vw;  
height:4vw;
font-size:1.1rem;
}

   nav ul li a:hover {
     color:#1B7496;
    
    
      } 
      .nav ul .nav_MTS {
position:relative;
font-size:0.8rem;


   }
   .nav ul li p{
    font-size:1rem;
    line-height: 1.5vw;
    text-align: left;
    position:relative;
   }
   .nav ul li p::before {
    position:absolute;
    content:"";
    background-image: url("image/social/Rounded-Icon-Set-Conversation.svg"); 
    background-repeat: no-repeat;
    background-size:contain;
    width:2vw;
    height: 2vw;
    top:0vw;
    left:-2.5vw;
   }
   .nav ul .nav_MTS::before {
    position:absolute;
    content:"";
    background-image: url("image/logo_contener/MTC.svg"); 
    background-repeat: no-repeat;
    background-size:contain;
    width:3.5vw;
    height: 3.5vw;
    top:0.2vw;
    left:-3.6vw;
     
    } 
     .container_nav {
      display: none;

     }

     /* навигация мобильной версии*/
    @media (max-width:390px) {
html{
  font-size: 5vw;
}
      .nav {
        display:flex;
        flex-direction: column;
              }
        .mobile_menu {
       display:block;
                cursor: pointer;
       align-self: flex-start;
                order:-1;
         margin:0;
         padding:0;
         width:30vw;
         padding-left: 1vw;
         position: relative;
         margin-top: 1vw;
         margin-left: 1vw;
         }
      
         .bar1, .bar2, .bar3 {
          width: 20vw;
          height: 2vw;
          background-color: #333;
          margin: 3vw 0;
          transition: 0.4s;
      }
      .change1 {
        -webkit-transform: rotate(-45deg) translate(-3vw, 4vw);
        transform: rotate(-45deg) translate(-3vw, 4vw);
    }
    
    .change2 {opacity: 0;}
    
    .change3 {
        -webkit-transform: rotate(45deg) translate(-3.5vw, -3.5vw);
        transform: rotate(45deg) translate(-3vw, -4vw);
    }
        .nav img {
         display:none;
         }

         .mobile_menu::after {
          content:"";
          background-image: url("image/logoautoglass.svg");
          background-repeat: no-repeat;
          background-size:contain;
          position: absolute;
          width:60vw;
          height:20vw;
          top:0;
          left: 30vw;

         }

         .mobile_nav1,  .mobile_nav2{
         display:none;
         width:100vw;
         margin-top: 5vw;
         margin-bottom: 10vw;
         
                      }
        .nav-block {
             
          display:block;
          
         
        }
        .mobile_nav2 li:last-of-type{
          display:none;
        }
        .mobile_nav1 li,  .mobile_nav2 li {
          width:100vw;
          text-align: center;
          padding-top: 3vw;
      
        }

           nav ul li a:hover {
             color:#1B7496;
             
             } 
            
                     
    }
/* presento, банер*/
.presento {

min-height:35vw;
width:100vw;
margin:0 auto;
padding-top:0.5vw;
padding-bottom: 1vw;
}

/*слайдер*/
.mySlides {display: none;
  width:100vw;
  min-height:35vw;}
.slideshow-container {
  max-width: 100vw;
  position: relative;
  margin: auto;
}

/* Caption text */
.text1 {
  color: #fff;
  font-weight: bold;
  font-size: 3vw;
  font-style: italic;
  position: absolute;
  top:12vw;
  left:5vw;
  width: 60vw;
  text-shadow: 1px 1px 30px rgb(0, 0, 0);
  text-indent: 0;
}
.mySlides p{
  color: white;
  font-weight: bold;
  font-size: 1.5vw;
  font-style: italic;
  position: absolute;
  top:37vw;
  left:3vw;
  width: 60vw;
  text-shadow: 1px 1px 30px rgb(0, 0, 0);
  text-indent: 0;
}
.text2 {
  color: rgba(52, 251, 254, 0.8);
  font-weight: bold;
  font-size: 3vw;
  font-style: italic;
  position: absolute;
  top:0;
  left:10vw;
  width: 60vw;
  /*text-shadow: 1px 1px 20px rgba(52, 251, 254, 0.8);*/
  text-indent: 0;
}
.text21 {
  color:rgba(254, 52, 52, 0.8);
  font-weight: bold;
  font-size: 3vw;
  font-style: italic;
  position: absolute;
  top:7vw;
  left:35vw;
  width: 30vw;
  /*text-shadow: 1px 1px 30px rgb(255, 255, 255);*/
  text-indent: 0;
}
.text3 {
  color:rgb(255, 255, 255);
  font-weight: bold;
  font-size: 3vw;
  font-style: italic;
  position: absolute;
  top:1vw;
  left:5vw;
  width: 20vw;
  text-shadow: 1px 1px 50px rgba(151, 182, 208, 1);
  text-indent: 0;
}

/* Number text (1/3 etc) */


/* The dots/bullets/indicators */




/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}



.mySlides {
   width:100vw;
 height: auto;
  padding:0;
  margin:0;
 

}
.image1 {
 background-image: url('image/slade.webp');
 background-repeat: no-repeat;
background-size: cover;
}
.image2 {
 background-image: url('image/slade2.webp');
 background-repeat: no-repeat;
background-size: cover;
}
.image3 {
 background-image: url('image/slade3.webp');
 background-repeat: no-repeat;
background-size: cover;
}


.p_contener {
   display:flex;  
 justify-content: space-around;
 align-items: center;
   }

   .p_contener a {
  
   padding: 1vw;
    background-color: rgba(228, 0, 70, 1); 
    
    
    
   }
   .p_contener a:hover {
  
    background-color: rgba(12, 84, 160, 1);

    }
   .p_contener p {
     font-size: 1.3rem;

     font-weight: 100;
   }
   .logo_contener {
 width:100vw;
       margin-top: 1vw;
   display: flex;   
   justify-content: space-around; 
   align-items: center; 
   background-color: #fff;
   height: 6vw;
   }
   .logo_contener li .logo-KMK{
    width:5vw;
   }
   .logo_contener li .logo-XYG {
    width:15vw;
   }
   .logo_contener li .logo-lemson {
    width:5vw;
   }
   .logo_contener li .logo-fyg {
    width:12vw;
   }
   .logo_contener li .logo-sekurit {
    width:12vw;
   }
   .logo_contener li .logo-AGC {
    width:10vw;
   }
   .logo_contener li:hover{
   transform: scale(1.1);
   
   }
    /* Мобильная версия банера*/
   @media (max-width:390px) {
    .presento {

      min-height:35vw;
      width:100vw;
      margin:0 auto;
      padding-top:1vw;
      padding-bottom: 10vw;
      }
      
      /*слайдер*/
      .mySlides {display: none;}
       
      .slideshow-container {
        max-width: 100vw;
        position: relative;
        margin: auto;
      }
      
      /* Caption text */
      .text1 {
        color: #fff;
        font-weight: bold;
        font-size: 5vw;
        font-style: italic;
        position: absolute;
        top:12vw;
        left:5vw;
        width: 80vw;
        text-shadow: 1px 1px 30px rgb(0, 0, 0);
        text-indent: 0;
      }
      .mySlides p{
        color: white;
        font-weight: bold;
        font-size: 4vw;
        font-style: italic;
        position: absolute;
        top:46vw;
        left:3vw;
        width: 90vw;
        text-shadow: 1px 1px 30px rgb(0, 0, 0);
        text-indent: 0;
      }
      .text2 {
        color: rgba(52, 251, 254, 0.8);
        font-weight: bold;
        font-size: 5vw;
        font-style: italic;
        position: absolute;
        top:0;
        left:10vw;
        width: 80vw;
        /*text-shadow: 1px 1px 20px rgba(52, 251, 254, 0.8);*/
        text-indent: 0;
      }
      .text21 {
        color:rgba(254, 52, 52, 0.8);
        font-weight: bold;
        font-size: 5vw;
        font-style: italic;
        position: absolute;
        top:7vw;
        left:40vw;
        width: 30vw;
        /*text-shadow: 1px 1px 30px rgb(255, 255, 255);*/
        text-indent: 0;
      }
      .text3 {
        color:rgb(255, 255, 255);
        font-weight: bold;
        font-size: 5vw;
        font-style: italic;
        position: absolute;
        top:1vw;
        left:5vw;
        width: 25vw;
        text-shadow: 1px 1px 50px rgba(151, 182, 208, 1);
        text-indent: 0;
      }
      
      /* Number text (1/3 etc) */
      
      
      /* The dots/bullets/indicators */
      
      
      
      
      /* Fading animation */
      .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.5s;
        animation-name: fade;
        animation-duration: 1.5s;
      }
      
      @-webkit-keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
      }
      
      @keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
      }
      
      
      
      .mySlides {
         width:100vw;
       height: auto;
        padding:0;
        margin:0;
        
        min-height:45vw;}
      
      
      .image1 {
       background-image: url('image/slade.webp');
       background-repeat: no-repeat;
      background-size: cover;
      }
      .image2 {
       background-image: url('image/slade2.webp');
       background-repeat: no-repeat;
      background-size: cover;
      }
      .image3 {
       background-image: url('image/slade3.webp');
       background-repeat: no-repeat;
      background-size: cover;
      }
      
      
      .p_contener {
         display:none;  
       justify-content: space-around;
       align-items: center;
         }
      
         .form_mobile {
        display:block;
        width:100vw;
        min-height: 15vw;
       
        margin-top: 4vw;
         padding-top: 4.5vw;
         text-align: center;
          background-color: rgba(228, 0, 70, 1); 
          
          
          
         }
         .form_mobile:hover {
        
          background-color: rgba(12, 84, 160, 1);
      
          }
          .logo {
          width:100vw; 
           background-color: #fff;
           min-height: 30vw;
         margin-bottom: 1vw;
         padding-bottom: 1vw;
          }
         .logo_contener {
       display:flex;
       flex-wrap: wrap;
             padding-bottom: 1vw;
             justify-content: space-around;
             padding-left: 4vw;
             padding-right: 4vw;
                
         }
        
           .logo_contener li {
         padding-left: 3vw;
         padding-right: 3vw;
         }
  
       
         .logo_contener li .logo-KMK{
          width:15vw;
         }
         .logo_contener li .logo-XYG {
          width:20vw;
         }
         .logo_contener li .logo-lemson {
          width:15vw;
         }
         .logo_contener li .logo-fyg {
          width:25vw;
         }
         .logo_contener li .logo-sekurit {
          width:25vw;
         }
         .logo_contener li .logo-AGC {
          width:20vw;
         }
         .logo_contener li:hover{
         transform: scale(1.1);
         
         }
       

   }
   /* О нас*/
   .about {
     margin-top: 5vw;
    margin-bottom: 5vw;

   }
   .about p {
   
       margin-bottom: 3vw;
       margin-left: 4vw;
       margin-right: 4vw;
      text-align: justify; 
   }
   .about p span {
       margin-left: 2vw;
       font-size: 1.7vw;
       color: #1B7496;
   }
   .about_advantage {
     width:100vw;
    display: flex;
    justify-content: space-around; 
   align-items: center; 
   background-color: rgba(44, 42, 42, 0.65);
   min-height: 7vw;
   margin-top: 5vw;
   
   }
   .about_advantage li {
       text-align: center;
       font-size: 1.7vw;
       border-right: 1px solid #fff;
       padding-right: 4vw;
   }
   .about_advantage li:last-of-type {
    border-right: none; 
    padding-right: 1vw;
   }
   .about_advantage li span{
    font-size: 3vw;
    text-transform: uppercase;
    color: #1B7496;
   }
    /* О нас мобильная версия*/
   @media (max-width:390px) {
    .about {
      
      margin-top: 1vw;
     margin-bottom: 5vw;
 display:flex;
 flex-direction: column-reverse;
    }
    h2{
font-size: 5vw;

    }
    .about h2 {
      order:1;
    }
    .about p {
      font-size: 4vw;
        margin-bottom: 3vw;
        margin-left: 2vw;
        margin-right: 2vw;
       text-align: justify; 
    }
    .about p span {
      font-size: 4vw;
        margin-left: 2vw;
     
        color: #1B7496;
    }
    .about_advantage {
      width:100vw;
     display: block;
     background-color:black;
   order:2;
    margin-top: 10vw;
   
    
    }
    .about_advantage li {
      padding: 0;
      margin:0;
     margin-bottom: 8vw;
        text-align: center;
        font-size: 5vw;
        font-weight: 80;
         min-height: 15vw;
        width:100vw; 
          background-color: rgba(44, 42, 42, 0.65);
    }
    
    .about_advantage li span{
     font-size: 7vw;
     text-transform: uppercase;
     color: #1B7496;
    }



   }
 /* Услуги*/

.works h2{
 margin-bottom: 5vw;
 
 }
 .works .services .button{

    width:100vw;
     height: 13vw;
 border:0;
   cursor:pointer;
   font-size:2vw;

 }

 .glass {
     background-image: url("image/glass.webp");
     background-repeat: no-repeat;
     background-size: cover;
     text-align: center;
     line-height: 13vw;
     position: relative;
    
 }
 .glass::before {
     position: absolute;
     content: "Замена автомобильных стекол";
     background-color: rgba(44, 42, 42, 0.75);
     top:0;
     right:0;
     width:100vw;
     height: 13vw;
     color:#fff;
 }
 .headlight {
    background-image: url("image/headlight1.webp");
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    line-height: 13vw;
    position: relative;
}

.headlight::before {
    position: absolute;
    content: "Полировка фар";
    background-color: rgba(44, 42, 42, 0.75);
    top:0;
    right:0;
    width:100vw;
    height: 13vw;
    color:#fff;
}
.crack {
    background-image: url("image/crack1.webp");
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    line-height: 13vw;
    position: relative;
}
.crack::before {
    position: absolute;
    content: "Ремонт трещин и сколов";
    background-color: rgba(44, 42, 42, 0.75);
    top:0;
    right:0;
    width:100vw;
    height: 13vw;
    color:#fff;
}
.autoconditioner {
    background-image: url("image/autoconditioner1.webp");
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    line-height: 13vw;
    position: relative;
}
.autoconditioner::before {
    position: absolute;
    content: "Заправка автокондиционеров";
    background-color: rgba(44, 42, 42, 0.75);
    top:0;
    right:0;
    width:100vw;
    height: 13vw;
    color:#fff;    
}
/* Услуги мобильная версия*/
@media (max-width:390px) {
  .works h2{
    margin-bottom: 5vw;
    
    }
    .services {
      display:none;
    }
    .mobile_action {
      display: block;
      width:100vw;
    }
    .button_mobile {
      display: block;
       width:100vw;
        height: 25vw;
    border:0;
      cursor:pointer;
      font-size:5vw;
    }
  
   
    .glass_mobile {
        background-image: url("image/glass.webp");
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        line-height: 25vw;
        position: relative;
    }
    .glass_mobile::before {
        position: absolute;
        content: "Замена автомобильных стекол";
        background-color: rgba(44, 42, 42, 0.75);
        top:0;
        right:0;
        width:100vw;
        height: 25vw;
        color:#fff;
    }
    .headlight_mobile {
       background-image: url("image/headlight1.webp");
       background-repeat: no-repeat;
       background-size: 100%;
       text-align: center;
       line-height: 25vw;
       position: relative;
      
   }
   
   .headlight_mobile::before {
       position: absolute;
       content: "Полировка фар";
       background-color: rgba(44, 42, 42, 0.75);
       top:0;
       right:0;
       width:100vw;
       height: 25vw;
       color:#fff;
   }
   .crack_mobile {
       background-image: url("image/crack1.webp");
       background-repeat: no-repeat;
       background-size: cover;
       text-align: center;
       line-height: 25vw;
       position: relative;
     
   }
   .crack_mobile::before {
       position: absolute;
       content: "Ремонт трещин и сколов";
       background-color: rgba(44, 42, 42, 0.75);
       top:0;
       right:0;
       width:100vw;
       height: 25vw;
       color:#fff;
   }
   .autoconditioner_mobile {
       background-image: url("image/autoconditioner1.webp");
       background-repeat: no-repeat;
       background-size: cover;
       text-align: center;
       line-height: 25vw;
       position: relative;
   }
   .autoconditioner_mobile::before {
       position: absolute;
       content: "Заправка автокондиционеров";
       background-color: rgba(44, 42, 42, 0.75);
       top:0;
       right:0;
       width:100vw;
       height: 25vw;
       color:#fff;    
   }


}
/*интерактивность*/

 .works .services .button:hover::before{
     content:"Подробнее";
    background-color: rgba(44, 42, 42, 0);
    transition-duration: 200ms;
    transition-timing-function:linear;
    box-shadow:0 0 200px rgba(27, 116, 150, 1);
    color:#000;
    font-size: 2vw;
    font-weight: 700;
    
}
.glass_show>p{
width:100%;
background-color: #fff;
color:#000;
}
.glass_contener {
  display:flex;
  justify-content: space-around;  
}
.glass_contener p{
    width:25vw;
}



.between {
  width:100vw;
  height:8vw;
display: flex;
justify-content: center;
padding-top: 3vw;
padding-bottom: 2vw;
font-size: 2vw;
}

.between p{
position:relative;
color: #1B7496;
}
.between p::before{
content:"";
position:absolute;
background-image: url("image/galka/Group2.svg");
background-repeat: no-repeat;
background-size: contain;
width: 3vw;
height: 2.3vw;
left:-2.5vw;
top:-0vw;
}
/*интерактивность, мобильная версия*/
@media (max-width:390px) {

  .button_mobile:hover::before{
  content:"Подробнее";
 background-color: rgba(44, 42, 42, 0);
 transition-duration: 200ms;
 transition-timing-function:linear;
 box-shadow:0 0 200px rgba(27, 116, 150, 1);
 color:#000;
 font-size: 5vw;
 font-weight: 700;
 
}

.between {
 
width:100vw;
height:8vw;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5vw;
font-size: 5vw;
margin-bottom: 5vw;
}

.between p{
position:relative;
color: #1B7496;
}
.between p::before{
content:"";
position:absolute;
background-image: url("image/galka/Group2.svg");
background-repeat: no-repeat;
background-size: contain;
width: 5vw;
height: 5vw;
left:-4.5vw;
top:0;
}


}

/* Заполнение контейнера Замена автомобильного стекла*/
/* контейнер 1*/
.myDIV1_contener1{
    margin-top:2vw;
    display:flex;
    justify-content: space-around;
    font-size: 1.2vw;
    
}
.myDIV1_contener1>p {
text-align: justify;
width: 40vw; 
margin-right: 2vw;  
}
.myDIV1_contener1>div {
    width:49vw;
    text-align: center;
}

.img_contener1 {
    width:49vw;
background-size: cover;    
}
.myDIV1_contener1>div p:first-of-type{
    margin-top: 1vw;
    margin-bottom: 1vw;
 color:red;   
}
.myDIV1_contener1>div p:last-of-type{
    margin-top: 1vw;
    margin-bottom: 1vw;
    text-align: justify;
    text-indent: 1vw;
 color:rgb(27, 116, 150);   
}
.myDIV1_p1 {
 text-indent: 2vw; 
}
.myDIV1>p {
 text-align: center;
 font-size: 2.5vw;
 position: relative; 
 bottom: -3.2vw;
 font-style: italic;
  text-transform:uppercase;
 font-weight: 700;
 background:linear-gradient(0deg,rgb(255, 255, 255,1)40%, rgba(73, 143, 134, 1)50%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}
.myDIV1_contener2{
    background-color: #1C1B1B;
    margin-top:2vw;
    display:flex;
    justify-content: space-around;
    height:33vw;
   padding-bottom: 1vw;
}
.myDIV1_contener2 img {
    margin-top: 2vw;
 width:30vw;
 height:30vw; 
 background-size: contain; 
 margin-left: 10vw; 
}
.myDIV1_contener2 ul{
    margin-top: 2vw;
   
 width:70vw;
 height:30vw; 

}
.myDIV1_contener2 ul li {
    width:50vw;
text-align: justify;
text-indent: 1vw;
margin-bottom: 2vw;
position:relative;
}
.myDIV1_contener2 ul li::before{
content: "";
position:absolute;
background-image: url('image/galka/galka.svg');  
width:2vw;
height: 2vw;
background-repeat: no-repeat;
background-size: cover;  
top:-0.5vw;
left:-1.3vw;
}
.myDIV1_contener2 ul li:nth-child(1) {
 left:1vw;   
}
.myDIV1_contener2 ul li:nth-child(2) {
    left:0.5vw;   
   }
   .myDIV1_contener2 ul li:nth-child(3) {
    left:-0.3vw;   
   }
   .myDIV1_contener2 ul li:nth-child(4) {
    left:-1.5vw;   
   }
   .myDIV1_contener2 ul li:nth-child(5) {
    left:-2.7vw;   
   }
   .myDIV1_contener2 ul li:nth-child(6) {
    left:-4vw;   
   }
   .myDIV1_contener2 ul li:nth-child(7) {
    left:-4.7vw;   
   }
   /*Галерея*/
   .myDIV1_contener3 {
       margin-top: 1vw;
    padding-bottom: 1vw;  
    display:flex; 
    justify-content: center;
    align-items: center;
    width:100vw;
   }
   .myDIV1_contener3 .gallery {
   
	margin-top:2vw;
        text-align: center;
	font-size: 2vw;
  
        font-style: italic;
         
	}
    .myDIV1_contener3 .gallery .desktop{
         margin-bottom: 2vw;

    }
    .full-foto {
     width:40vw; 
     margin-right:5vw;
    margin-top: 1vw;  
    }
    .gallery-item {
        width:40vw;
        display:flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 2vw;  
    }
    .gallery-img_item {
     width:10vw;
     height:10vw; 
     border:0;
     cursor: pointer;  
position:relative;
    }
    .gallery-img_item::after {
        content:"";
        width:10vw;
        height:10vw;
        background-color: rgba(122, 100, 100, 0.5); 
      
   position:absolute;
   top:0;
   right:0;
  
       }  
       .gallery-img_item:hover::after {
                  background-color: rgba(122, 100, 100, 0); 
       }
       .myDIV1_social p {
         font-style: italic;      
        padding-bottom: 1vw;  
        text-align: center;  
        }
        .myDIV1_social p a{
       color:#498F86;
        position: relative;  
       }
       
       .myDIV1_social p a:hover {
        color:#1B7496;
       }
       .myDIV1_social .myDIV1_instagram::before {
        content:"";
        background-image:  url('image/social/Instagram_logo_2016 1.svg');
        width:2vw;
        height: 2vw;
        background-repeat: no-repeat;
        background-size: contain; 
        position: absolute;
        left:-2.5vw;  
       }
       .myDIV1_social .myDIV1_vk::before {
        content:"";
        background-image:  url('image/social/VK.com-logo 1.svg');
        width:2vw;
        height: 2vw;
        background-repeat: no-repeat;
        background-size: contain; 
        position: absolute;
        left:-2.5vw;  
       }
      /* контейнер 2*/ 
      /* Сравнение изображений*/
      .container {
        position: relative;
        width: 30vw;
        height: 24vw;
        border: 0.1vw solid #1B7496;
        margin-bottom: 3vw;
      }
      .img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: 30vw 100%;
        background-repeat: no-repeat;
      }
      .background-img {
        background-image: url('image/compare1.webp');
      }
      .foreground-img {
        background-image: url('image/compare2.webp');
        width: 50%;
      }
      .slider {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 100%;
        background: rgba(242,242,241,.3);
        outline: none;
        margin: 0;
        transition: all .2s;
      }
      .slider:hover {
        background: rgba(242,242,241,.1); 
      }
      .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 0.15vw;
        height: 24vw;
        background: rgba(28, 27, 27, 0.73);
      }
      .slider-button {
        pointer-events: none;
        position: absolute;
        width: 2vw;
        height: 2vw;
        border-radius: 50%;
        background-color: rgba(28, 27, 27, 0.73);
        left: calc(50% - 1vw);
        top: calc(50% - 1vw);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .slider-button::after {
        content: '';
        padding: 0.2vw;
        display: inline-block;
        border: solid #fff;
        border-width: 0 0.15vw 0.15vw 0;
        transform: rotate(-45deg);
      }
      .slider-button::before {
        content: '';
        padding: 0.2vw;
        display: inline-block;
        border: solid #fff;
        border-width: 0 0.15vw 0.15vw 0;
        transform: rotate(135deg);
      }
      .myDIV2 {
        width:100vw;
      }
      .myDIV2_contener1, .myDIV2_contener2{
        display: flex;
        margin-top: 2vw;
        padding-left: 5vw;
        padding-right: 5vw;
        justify-content: space-around;
        align-items: center;
        text-indent: 1vw;
      }
      .myDIV2_contener1 {
        text-indent: 2vw;
      }
      .myDIV2_contener1 p:nth-child(1) {
       width:46vw;
       height:26vw;
       background-image: url("image/headlight2.webp");  
       background-repeat: no-repeat;
       background-size: cover; 
      
      }
      .myDIV2_contener1 p:nth-child(2){
        width:35vw;
text-align: justify;
      }
    
      .myDIV2_contener2 ul{

        width:40vw; 
        text-align: justify;  
      }
      .myDIV2_contener2 ul li {
        padding-bottom: 1vw;
        position:relative;
      }
      .myDIV2_contener2 ul li:first-of-type{
      color:#1B7496;  
      
      }
      .myDIV2_contener2 ul li:not(:first-of-type)::before {
      
          content:"";
          background-image:  url('image/galka/Group1.svg');
          width:2vw;
          height: 2vw;
          background-repeat: no-repeat;
          background-size: contain; 
          position: absolute;
          top:-0.4vw;
          left:-1vw;  
         }
         .container::after{
           content:"До полировки";
           position: absolute;
          top:24vw;
          font-size: 1.2vw;
         }
         .container::before{
          content:"После полировки";
          position: absolute;
         top:24vw;
         right:18vw;
         font-size: 1.2vw;
        }
        .myDIV4 {
         
          text-align:justify;
          padding-left:5vw;
          padding-right:5vw;
          padding-top: 2vw;
         
        }
 /* контейнер 3*/ 
 .myDIV3 {
  font-size: 1.2vw;
  line-height: 1.7vw;
    letter-spacing: 0.1vw;
 }
 .myDIV3_contener {
   display:flex;
text-align: justify;
padding-left:5vw;
padding-right: 5vw;
margin-top: 1vw;
text-indent: 2vw;
align-items: center;
justify-content: space-between;
 }

 .myDIV3_image1 {
  width:45vw;
  height: 32vw;
   background-image: url("image/mobile-service-1024x684.webp");
   background-repeat: no-repeat;
   background-size: cover;
   margin-bottom: 1vw;
 }
 .myDIV3_contener p {
  width:42vw;
  font-size: 1.2vw;
  line-height: 1.7vw;
    letter-spacing: 0.1vw;
 }
 .myDIV3_p1 {
   text-align: left;
   margin-left:7vw;
   color:#498F86;
   font-size: 1.2vw;
  line-height: 1.7vw;
    letter-spacing: 0.1vw;
  }
  .myDIV3_ul1 {
   text-align: justify; 
   width:80vw;
   margin-left: 10vw;
   text-indent: 2vw;
   margin-top: 1vw;
   font-size: 1.2vw;
   line-height: 1.7vw;
     letter-spacing: 0.1vw;
  }
  .myDIV3_ul1 li {
   padding-bottom: 1vw;
   position: relative; 
   font-style: italic;
  }
  .myDIV3_ul1 li::before{
  content:"";
    background-image:  url('image/galka/galka.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width:1.5vw;
    height:1.5vw;
    position: absolute;
    top:0;
    left:0;
}

.myDIV3_p2 {
  text-align: justify;
  margin-left:5vw;
  width:85vw;
  color:#498F86;
  text-indent: 2vw;
   margin-top: 1vw;
   font-size: 1.2vw;
   line-height: 1.7vw;
     letter-spacing: 0.1vw;
 }
 .myDIV3_p3, .myDIV3_p4 {
  text-align: left;
  margin-left:7vw;
  margin-top: 1vw;
  font-size: 1.2vw;
   line-height: 1.7vw;
     letter-spacing: 0.1vw;
     text-indent: 2vw;
 }
 .myDIV3_p4 span {
   color:red;
 }
 .myDIV3_ul2 {
  text-align: justify; 
  width:85vw;
  margin-left: 5vw;
  text-indent: 2vw;
  margin-top: 1vw;
  font-size: 1.2vw;
   line-height: 1.7vw;
     letter-spacing: 0.1vw;
    
 
 }
 .myDIV3_ul2 li {
  padding-bottom: 1vw;
  position: relative; 
  font-style: italic;
  margin-left: 5vw;
 }
 .myDIV3_ul2 li::before{
 content:"";
   background-image:  url('image/galka/galka.svg');
   background-repeat: no-repeat;
   background-size: contain;
   width:1.5vw;
   height:1.5vw;
   position: absolute;
   top:0;
   left:0;
}
.video {
 margin: 0 auto;
 margin-top: 1vw;
  width:50vw;
}
.a_video {
  color:#1B7496;
}

a_video:hover {
  color:#CDFA2D;
}









           /* контейнер 4*/ 
           .myDIV4 {
            font-size: 1.2vw;
   line-height: 1.7vw;
     letter-spacing: 0.1vw;
           }
        .myDIV4 p{
text-indent: 1.5vw;
        }
                .myDIV4 span {
                  display:inline-block;
          color:#CDFA2D;
                 margin-top: 1vw;
                 margin-bottom: 1vw;
        }
        .myDIV4_image1 {
          width:40vw;
          height: 25vw;
          float: left;
          margin-right:2vw;
          margin-bottom:2vw;
        }
        .myDIV4_image2{
          width:20vw;
          height: 21vw;
                    float: right;
          margin-left:1.5vw;
          margin-top: 1vw;
        

        }
        .myDIV4_image3{
          width:38vw;
          height: 32vw;
          margin-right:1vw;
        
               }
               .myDIV4_image3 {
                float:left; 
              
                  padding-bottom: 1vw;
               }
               .clearfix {
                  clear: both;
                  height: 1vw;  
                  margin-bottom: 1vw;
               }
               .myDIV4_image45 {
              
             padding-bottom: 1vw;
          display:flex;
        
          justify-content: space-between;
          margin-bottom: 6vw;
               }

               .myDIV4_image4 {
                width:38vw;
                height: 32vw;
               

               }
               .myDIV4_image5 {
                width:38vw;
                height: 32vw;
                margin-top:1vw;
               }
            
               .myDIV4 ul li {
                text-indent: 2vw;
                padding-bottom: 1vw;
                font-style: italic;
                position:relative;
               }
               .myDIV4 .myDIV4_diagnostik li::before {
              content: "";
              background-image: url("image/galka/galka2.svg");
              width:2vw;
              height: 1.5vw;
              background-repeat: no-repeat;
              background-size: cover;
              position:absolute;
              top:0;
              left:0;
              }
              .myDIV4_masters li:first-of-type{
                color:#CDFA2D;
              }
              .myDIV4 .myDIV4_masters li:not(:first-of-type):before {
                content: "";
                background-image: url("image/galka/galka2.svg");
                width:2vw;
                height: 1.5vw;
                background-repeat: no-repeat;
                background-size: cover;
                position:absolute;
                top:0;
                left:39vw;
                }
                .myDIV4_recomendet  li:first-of-type{
                  color:#CDFA2D;
                }
                .myDIV4 .myDIV4_recomendet li:not(:first-of-type):before {
                  content: "";
                  background-image: url("image/galka/galka2.svg");
                  width:2vw;
                  height: 1.5vw;
                  background-repeat: no-repeat;
                  background-size: cover;
                  position:absolute;
                  top:0;
                  left:0;
                  }
                /*form и футер*/
                .footer {
                  display:flex;
                  justify-content: space-around;
                  margin-top: 5vw;
                  font-size: 1.3vw;
                }
                footer .contact{
                  width:40vw;

                }
               footer .map {
                max-width:100%;
                height:25vw; 
                margin-top: 1vw; 
                }

/*Заполнение формы*/
.form{

  width:35vw;
  margin:0;
  padding:0;
  }
  .form_title{
  text-align:center;
  font-size: 1.3vw;
  }
  .form_item{
  margin: 0px 0px 1vw 0px;
  }
  .form_label {
  display:block;
  margin: 1vw 0px 1vw 0px;
  }
  .form_input {
  height:3vw;
  padding:0px 1vw;
  border-radius:0.5vw;
  width:100%;
  transition: all 05.s ease 0s;
  }
  label.error{
      display: none!important;
  }
form input{
      border:none;
      font-size:1rem;
  }
 
  form input:focus{
      box-shadow: inset 0 0 1rem #055acaab;
      outline: none !important;
  }
 
  form input.error{
      box-shadow: inset 0 0 1rem red;  
  }
  ::placeholder {
    font-size:1rem;
  }


  input[type=text] {
    font-size:1rem;
  }
  textarea.form_input{
      min-height:10vw;
      resize: vertical;
      padding: 1vw;
    
    }
    textarea.form_input:focus{
      box-shadow: inset 0 0 2rem #055acaab;
    outline: none !important;
  }
  .file {
          margin-bottom:1vw;
      }
  
      
  
  .file_button{
      display: inline-flex;
      min-height: 3vw;
      border-radius: 0.5vw;
      justify-content: center;
      padding:0px 1vw;
      align-items: center;
      background-color: #d3dbe2;
      padding: 0px 1vw;
     border: none;
     margin-bottom: 1vw;
  
  }
  .form_button {
      margin-top: 1vw;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 5vw;
  background-color:  rgb(27, 115, 150);
  color:white;
  cursor: pointer;
  border-radius: 1vw; 
  font-size: 1.2vw;
line-height: 1.7vw;
  letter-spacing: 0.1vw;  
border: none; 
  }
  /*Футтер*/
  footer .contact {
text-align: center;
font-size: 1.3vw;
line-height: 1.7vw;
  letter-spacing: 0.1vw;
  }
  footer .contact ul {
    font-size: 1.3vw;
    line-height: 1.7vw;
      letter-spacing: 0.1vw; 
    margin-top: 1vw;  
  }
  footer .contact ul li{
    font-size: 1.3vw;
    line-height: 1.7vw;
      letter-spacing: 0.1vw; 
    padding-bottom: 1vw;  
  }
  footer .contact p:first-of-type {
    margin-bottom: 1vw;
    
      }
  footer .contact p:not(:first-of-type) {
color:#1B7496;

  }
  
  footer address {
    color:#CDFA2D;
    padding-bottom: 1vw;
  }
  footer .contact a:hover {
    color: #498F86;
  }
  footer .social a:hover {
    color:#498F86;
  }
  footer .tel .MTS {
  position: relative; 
 
  }
  footer .tel .MTS::before {
    position: absolute;
    content:"";
    background-image: url("image/logo_contener/MTC.svg"); 
    background-repeat: no-repeat;
    background-size:contain;
    width:5vw;
    height: 1.5vw;
    top:0.2vw;
    left:-5.2vw;
    }
    footer .tel .A1 {
      position: relative;  
      }
    .tel .A1::before {
      position: absolute;
      content:"";
      background-image: url("image/logo_contener/А1 1.svg"); 
      background-repeat: no-repeat;
      background-size:contain;
      width:2vw;
      height:2vw;
      top:-0.3vw;
      left:-2.5vw;
      }
       footer .instagram, .vk{
        position: relative;  
        }
        footer .instagram::before{
          position: absolute;
          content:"";
          background-image: url("image/social/Instagram_logo_2016 1.svg"); 
          background-repeat: no-repeat;
          background-size:contain;
          width:2vw;
          height:2vw;
          top:-0.3vw;
          left:-2.5vw;

        }
        footer .vk::before{
          position: absolute;
          content:"";
          background-image: url("image/social/VK.com-logo 1.svg"); 
          background-repeat: no-repeat;
          background-size:contain;
          width:2vw;
          height:2vw;
          top:-0.3vw;
          left:-2.7vw;

        }
        .developer {
          font-size: 1.2vw;
          font-style: italic;
          margin-top: 1vw;
          padding-top: 2vw;
          border-top: 1px solid #1C1B1B;
          text-align: center;
          color:#498F86;
          padding-bottom: 1vw;
        }
        .developer a {
          color:#1B7496;
        }
        /*form и футер мобильный*/
        @media (max-width:390px) {

.footer {
  display:flex;
flex-direction: column;
  justify-content: space-around;
  margin-top: 5vw;
  font-size: 4vw;
}
footer .contact{
  width:100vw;

}
footer .map {
max-width:90%;
height:45vw; 
margin: 0 auto;
margin-top: 4vw; 
}

/*Заполнение формы*/
.form{
  font-size: 4vw;
width:80vw;
margin:0 auto;
padding:0;

}
.form_title{
  margin-top: 7vw;
text-align:center;
font-size: 5vw;
font-weight: 100;
color:#CDFA2D;

}
.form_item{
margin: 0px 0px 1vw 0px;
}
.form_label {
display:block;
margin: 5vw 0px 1vw 0px;
}
.form_input {
height:7vw;
padding:0px 1vw;
border-radius:0.5vw;
width:100%;
transition: all 05.s ease 0s;
}
label.error{
display: none!important;
}
form input{
border:none;
font-size:0.8rem;
}

form input:focus{
box-shadow: inset 0 0 1rem #055acaab;
outline: none !important;
}

form input.error{
box-shadow: inset 0 0 1rem red;  
}
::placeholder {
font-size:0.8rem;
}


input[type=text] {
font-size:0.8rem;
}

textarea.form_input{
min-height:20vw;
resize: vertical;
padding: 1vw;
font-size:0.8rem;
}
textarea.form_input:focus{
box-shadow: inset 0 0 2rem #055acaab;
outline: none !important;
}
.file {
margin-bottom:1vw;
}



.file_button{
display: inline-flex;
min-height: 5vw;
border-radius: 0.5vw;
justify-content: center;
padding:0px 1vw;
align-items: center;
background-color: #d3dbe2;
padding: 0px 1vw;
border: none;
margin-bottom: 1vw;

}
.form_button {
margin-top: 1vw;
width:100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 15vw;
background-color:  rgb(27, 115, 150);
color:white;
cursor: pointer;
border-radius: 1vw; 
font-size: 4vw;

letter-spacing: 0.1vw;  
border: none; 
}
/*Футтер*/
footer .contact {
  display:flex;
  flex-direction: column;
justify-content: center;
font-size: 5vw;
letter-spacing: 0.1vw;
margin-top: 4vw;

}
footer .contact p{
  
  margin-top: 6vw;
  

}

footer .contact ul {

  font-size: 4vw;
margin-top: 2vw;
letter-spacing: 0.1vw; 

}
footer .contact ul li{
font-size: 4vw;
margin-top: 5vw;
letter-spacing: 0.1vw; 
  
}
footer .contact p:first-of-type {
margin-bottom: 1vw;
  text-decoration: underline;
}
footer .contact p:not(:first-of-type) {
  margin-top:4vw;
color:#1B7496;
line-height: 4vw;
}

footer address {
  margin-top: 4vw;
color:#CDFA2D;

line-height: 4vw;
}
footer .contact a:hover {
color: #498F86;
}
footer .social a:hover {
color:#498F86;
}
footer .tel .MTS {
position: relative; 

}
footer .tel .MTS::before {
position: absolute;
content:"";
background-image: url("image/logo_contener/MTC.svg"); 
background-repeat: no-repeat;
background-size:contain;
width:15vw;
height: 3vw;
top:0.5vw;
left:-14vw;
}
footer .tel .A1 {
position: relative;  
}
.tel .A1::before {
position: absolute;
content:"";
background-image: url("image/logo_contener/А1 1.svg"); 
background-repeat: no-repeat;
background-size:contain;
width:4vw;
height:4vw;
top:-0.3vw;
left:-4.5vw;
}
footer .instagram, .vk{
position: relative;  
}
footer .instagram::before{
position: absolute;
content:"";
background-image: url("image/social/Instagram_logo_2016 1.svg"); 
background-repeat: no-repeat;
background-size:contain;
width:4vw;
height:4vw;
top:0.3vw;
left:-4.5vw;

}
footer .vk::before{
position: absolute;
content:"";
background-image: url("image/social/VK.com-logo 1.svg"); 
background-repeat: no-repeat;
background-size:contain;
width:4vw;
height:4vw;
top:0.3vw;
left:-4.5vw;

}
.developer {
font-size: 3vw;
font-style: italic;
margin-top: 3vw;
padding-top: 3vw;
border-top: 1px solid #1C1B1B;
text-align: center;
color:#498F86;
padding-bottom: 3vw;
}
.developer a {
color:#1B7496;
}


        }