html{
    font-size: 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;
        }
      
      
       @media (max-width:390px) {
        .header {
            position: relative;
            width:100vw;
        }
        .header .logo {
            position:absolute;
            width:50vw;
            height: auto;
            top:-5vw;
            left:3.5vw;
   
        }
           .header .exit{
            display:block;
            margin-top: 7vw;
            text-align: right;
            padding-right: 15vw;   
           position:relative;
           margin-bottom: 10vw;
           font-size: 1.2rem;  
           }
           .header .exit::after{
               position:absolute;
               content:"";
               width:5vw;
               height:0.7vw;
               top:2.5vw;
               right:9vw;
               background-color: #fff; 
               transform: rotate(45deg);
              }
              .header .exit::before{
               position:absolute;
               content:"";
               width:5vw;
               height:0.7vw;
               top:2.5vw;
               right:9vw;
               background-color: #fff; 
               transform: rotate(-45deg);
              }
              .header h1 {
                  
               
                text-align: center;
                  margin:0;
                  padding:0;
                  font-size: 1.5rem;
                  font-weight: 300;
                  margin-bottom: 5vw;
                  
              }
              main {
                  width:100vw;
              }

/* контейнер 2*/ 
      /* Сравнение изображений*/
      .container {
        position: relative;
        width: 90vw;
        height: 70vw;
        border: 0.1vw solid #1B7496;
        margin-bottom: 12vw;
      }
      .img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: 90vw 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.2vw;
        height: 70vw;
        background: rgba(28, 27, 27, 0.73);
      }
      .slider-button {
        pointer-events: none;
        position: absolute;
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
        background-color: rgba(28, 27, 27, 0.73);
        left: calc(50% - 3vw);
        top: calc(50% - 1vw);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .slider-button::after {
        content: '';
        padding: 1vw;
        display: inline-block;
        border: solid #fff;
        border-width: 0 0.15vw 0.15vw 0;
        transform: rotate(-45deg);
      }
      .slider-button::before {
        content: '';
        padding: 1vw;
        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;
        display:flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.2rem;
      }
      .myDIV2_contener1 p:nth-child(1) {
       width:100vw;
       height:50vw;
       background-image: url("image/headlight2.webp");  
       background-repeat: no-repeat;
       background-size: cover; 
      
      }
      .myDIV2_contener1 p:nth-child(2){
          margin-top: 5vw;
        width:100vw;
text-align: justify;
    padding-left: 2vw;
        padding-right: 2vw;
      }
      .myDIV2_contener2 {
        width:100vw;
        display:flex;
        flex-direction: column;
        justify-content: center;

      }
      .myDIV2_contener2 ul{

   
        text-align: justify; 
        margin-bottom: 5vw; 
      }
      .myDIV2_contener2 ul li {
        padding-bottom: 1vw;
        position:relative;
        text-indent: 4vw;
              line-height: 1.2rem;
      }
      .myDIV2_contener2 ul li:first-of-type{
        padding-top: 3vw;
        padding-bottom: 3vw;
      color:#1B7496; 
      font-size: 1.2rem; 

     
      }
      .myDIV2_contener2 ul li:not(:first-of-type)::before {
      
          content:"";
          background-image:  url('image/galka/Group1.svg');
          width:5vw;
          height: 5vw;
          background-repeat: no-repeat;
          background-size: contain; 
          position: absolute;
          top:-0.4vw;
          left:-1vw;  
         }
         .container::after{
           content:"До полировки";
           position: absolute;
          top:70vw;
          right:7vw;
          font-size: 1rem;
         }
         .container::before{
          content:"После полировки";
          position: absolute;
         top:70vw;
        left:3vw;
         font-size: 1rem;
        }
        .myDIV4 {
         
          text-align:justify;
          padding-left:5vw;
          padding-right:5vw;
          padding-top: 2vw;
         
        }
        .myDIV1_social p {
          font-style: italic;      
         padding-bottom: 1vw;  
         text-align: center; 
         font-size: 1.2rem; 
         padding-top: 3vw;
         }
         .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:5vw;
         height: 5vw;
         background-repeat: no-repeat;
         background-size: contain; 
         position: absolute;
         left:-5.5vw;  
        }
        .myDIV1_social .myDIV1_vk::before {
         content:"";
         background-image:  url('image/social/VK.com-logo 1.svg');
         width:5vw;
         height: 5vw;
         background-repeat: no-repeat;
         background-size: contain; 
         position: absolute;
         left:-5.5vw;  
        }
        .form{
          display: block;
          margin-top: 10vw;
          width:100vw;
          height:10vw;
          line-height: 10vw;
      text-align: center;
      background-color: rgba(228, 0, 70, 1);
      margin-bottom: 5vw;

      }
    }