Edit in JSFiddle

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="0.css">
    <link rel="stylesheet" href="sl.css">
    <link rel="stylesheet" href="sl1.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap&subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
  </head>
  <body>
<main>
  <div class="div0">
    <p><img src="https://media.lpgenerator.ru/images/157195/galochkalogo.png#size_41x23" alt="0">
      <img src="https://media.lpgenerator.ru/images/157195/kvadratiklogo.png#size_37x37" alt="1"></p>
    <div ><p class="p0">компания</p>
      <span><b>АРТ</b>МЕБЕЛЬ</span></div>
  </div>
 <div class="div1">
   <p>+38 071 (429) 39 06</p>
   <a href="#" >Заказать звонок</a>
 </div>
 <img src="https://media.lpgenerator.ru/images/157195/shkafi-compressor.png#size_1397x654" alt="cupboard">
 <article class="">
   <h1>
     Индивидуальное изготовление
<br>шкафов-купе для дома
<br>и офиса от 3 дней
   </h1>
   <pre>Выезд дизайнера-замерщика,
доставка и сборка
заказа <b>БЕСПЛАТНО</b></pre>
<a href="#" class="swing">↓</a>
 </article>
</main>


<section class="sec0">
  <div class="div">

  <h1>ОСТАВЬТЕ ЗАЯВКУ</h1>
  <h3>на бесплатный вызов замерщика для расчета стоимости вашего шкафа-купе</h3>
  <div class="div1">

    <input type="text" name="" value="" placeholder="name">
    <input type="email" name="" value=""placeholder="email">
    <input type="text" name="" value=""placeholder="phone">
    <a href="#">Вызвать замерщика</a>
  </div>
</div>
</section>


<section class="sec1">
<h1>А вы сталкивались с такими проблемами?</h1>

<div class="" >
  <section>
      <article class="ar1">
        <h2>Некомпетентный
        персонал</h2>
        <p>Во многих компаниях
  сотрудники не умеют
  работать с клиентами,
  не все могут предоставить
  грамотную консультацию
  по дизайну, качеству,
  материалу и механизму
  изготовления шкафа</p>
  <img src="https://media.lpgenerator.ru/images/157195/vosznak.png#size_66x66" alt="">

      </article>
      <article class="ar2">
        <h2>Некачественные
  материалы</h2>
  <p>Многие компании предлагают
  некачественные конструкционные
  материалы и фурнитуру,
  в результате чего появляются
  дверные щели, изнашивание
  подшипников и шкафа</p>
      </article>
      <article class="ar3">
        <h2>Нежданное увеличение
  стоимости</h2>
  <p>Многие фирмы кроме основной
  стоимости заказа часто накручивают
  цены при сборке мебели на такие
  услуги: доставка подъём
  на этаж, крепёж, установка</p>
      </article>
        <article class="ar4">
          <h2>Затягивание
  сроков</h2>
  <p>Мелкие фирмы
  заказывают распил
  материала в крупных
  компаниях, в результате
  чего возникают
  задержки при
  выполнении заказа</p>
        </article>
        <div class='border'></div>
        <div class='border1' ></div>

  </section>


</div>


</section>

<img src="https://media.lpgenerator.ru/images/157195/veshalka.png#size_531x217" alt="" style="margin-left:21%;
margin-bottom: -7%;">

<section class="sec2">

  <h1>Мы гарантируем</h1>

  <section>
    <article class="">
      <img src="https://media.lpgenerator.ru/images/157195/figura1.png#size_58x65" alt="">
  <h2>Квалифицированные
  сотрудники</h2>
  <p>Опытный персонал с индивидуальным
  подходом к каждому клиенту поможет
  вам с выбором заказа от цвета дерева
  до материала ходовой системы</p>
    </article>
    <article class="">
      <img src="https://media.lpgenerator.ru/images/157195/figura2.png#size_42x60" alt="">
      <h2>Доступные и
  честные цены</h2>
      <p>Только у нас вы сможете заказать
  качественный шкаф-купе по
  конкурентной цене от 6000 рублей
  без дополнительных затрат</p>
    </article>
    <article class="">
      <img src="https://media.lpgenerator.ru/images/157195/figura3.png#size_59x60" alt="">
      <h2>Гарантия качества</h2>
      <p>Мы даем 6 лет гарантии
  на сборку и качество наших
  материалов и механизмов</p>
    </article>
    <article class="">

      <img src="https://media.lpgenerator.ru/images/157195/figura4.png#size_60x60" alt="">
      <h2>Оперативность работы</h2>
      <p>За 3 дня мы изготовим
      <br>  ваш шкаф-купе с момента
<br>  подписания договора</p>
    </article>
  </section>


</section>

<section class="sec3">
<article class="">

<div class="div0">
  <h1><strong>Выгодное предложение!</strong></h1>
<div class="div">Оставьте заявку до конца дня
<br>и получите <strong>скидку 850 рублей</strong>
<br>при заказе шкафа-купе</div>
  <p class="p"><b>Торопитесь!</b>
<br><span>Количество заявок ограничено</span></p>
<div class="grid">
  <div class="">
      <span id='time0' class="time">03</span>
  <p>часов</p>
    </div>
    <div class="">
      <span id='time1'class="time">44</span>
  <p>минут</p>
    </div>
    <div class="">
      <span id='time2'class="time">13</span>
  <p>секунд</p>
    </div>
</div>
</div>

</article>
<img src="https://media.lpgenerator.ru/images/157195/shkafakcii-compressor.png#size_353x472" class="cupboard">

</section>

<section class="sec0">
  <div class="div">

  <h1>ОСТАВЬТЕ ЗАЯВКУ</h1>
  <h3>на бесплатный вызов замерщика для расчета стоимости вашего шкафа-купе</h3>
  <div class="div1">

    <input type="text" name="" value="" placeholder="name">
    <input type="email" name="" value=""placeholder="email">
    <input type="text" name="" value=""placeholder="phone">
    <a href="#">Вызвать замерщика</a>
  </div>
</div>
</section>



<section class="sec4">
<h1>Дополнительные услуги</h1>
<div class="div">
  <section>
    <article class="ar1 figure">
      <img src="https://media.lpgenerator.ru/images/57561/i2_KF1GZb3.png#size_43x34" alt="">
      <h2>Фотопечать
        <br> на стекле</h2><div class="figure__hover-content" style="background-image: url(https://media.lpgenerator.ru/images/157195/img2.png#size_426x321)"></div>

</article>

    <article class="ar2 figure">
      <img src="https://media.lpgenerator.ru/images/57561/i2_KF1GZb3.png#size_43x34" alt="">
      <h2>Покраска дерева в индивидуальный цвет заказа</h2>

      <div class="figure__hover-content" style="background-image: url(https://media.lpgenerator.ru/images/157195/img2.png#size_426x321)"></div>

</article>

    <article class="ar3 figure">
      <img src="https://media.lpgenerator.ru/images/57561/i2_KF1GZb3.png#size_43x34" alt="">
      <h2>Услуга дизайнера в проектировании</h2>

      <div class="figure__hover-content" style="background-image: url(https://media.lpgenerator.ru/images/157195/img3-compressor-1.png#size_426x321)"></div>

    </article>


    <article class="ar4 figure" >
        <img src="https://media.lpgenerator.ru/images/57561/i2_KF1GZb3.png#size_43x34" alt="">
  <h2>Цветное матирование</h2>


<div class="figure__hover-content" style="background-image: url(https://media.lpgenerator.ru/images/157195/img4-compressor.png#size_290x210)"></div>

</article>
<div class='border'></div>
</div>

  </section>

</section>


<section class="sec5">
<h1>Портфолио</h1>
<div class="div">
  <section>
    <div class="div1">

    </div>
    <div class="div2">

    </div>
    <div class="div3">

        </div>
        <div class="div4">

        </div>
        <div class="div5">

            </div>

            <div class="div6">

            </div>
  </section>
</div>
</section>





<section class="sec6">

<h1>Работать с нами просто</h1>


  <section>
        <div class="">

<img src="https://media.lpgenerator.ru/images/157195/ikonkashema1.png#size_50x46" alt="">
<h2>1</h2>
<p>Оставляете заявку
или звоните</p>

        </div>

<img src="https://media.lpgenerator.ru/images/157195/strelochka.png#size_63x18" alt="">


        <div class="">

<img src="https://media.lpgenerator.ru/images/157195/ikonkashema2.png#size_52x53" alt="">
<h2>2</h2>
<p>Консультация
дизайнера</p>

        </div>

<img src="https://media.lpgenerator.ru/images/157195/strelochka.png#size_63x18" alt="">

        <div class="">

<img src="https://media.lpgenerator.ru/images/157195/ikonkashema3.png#size_52x52" alt="">
<h2>3</h2>
<p>Выезд
замерщика</p>

        </div>

<img src="https://media.lpgenerator.ru/images/157195/strelochka.png#size_63x18" alt="">


        <div class="">

<img src="https://media.lpgenerator.ru/images/157195/ikonkashema4.png#size_36x47" alt="">
<h2>4</h2>
<p>Составление
проекта и договора</p>

        </div>

<img src="https://media.lpgenerator.ru/images/157195/strelochka.png#size_63x18" alt="">

        <div class="">

<img src="https://media.lpgenerator.ru/images/157195/ikonkashema5.png#size_59x60" alt="">
<h2>5</h2>
<p>Доставка и сборка
материала</p>

        </div>
  </section >
</section>



<section class="sec7">
  <h1>Мнения наших клиентов</h1>

  <div class="slider">
    <div>
      <img src="https://media.lpgenerator.ru/images/157195/nikolai.png#size_168x168" alt="" />
      <article class="">
        <h2>Алексей</h2>
        <p>Заказывал в Арт-Мебель изготовление шкафа-купе в прихожую.
  На мои замеры цена устроила только в этой компании. Бесплатно
  вызвал дизайнера, после замера стоимость заказа не изменилась.
  Все сделали за 3 дня качественно и с гарантией.</p>

      </article>
    </div>
    <div>
      <img src="https://media.lpgenerator.ru/images/157195/alexandr.png#size_168x168" alt="" />
      <article class="">

        <h2>Николай</h2>
        <p>Недавно сделал ремонт в квартире и захотел поменять всю мебель,
  нашел команию Арт-Мебель и согласовал с дизайнером все свои
  задумки. Приятно, когда качественно, недорого и в срок получаешь
  осуществление своей мечты. Рекомендую всем!
</p>
      </article>
    </div>
    <div>
      <img src="https://media.lpgenerator.ru/images/157195/bez-imeni-1_otKhMtU.png#size_168x168" alt="" />
      <article class="">
        <h2>Светлана</h2>
        <p>Решила заказать шкафы-купе в прихожую и спальню. Позвонила в
  компанию Арт-Мебель и получила ответы на все интересующие меня вопросы.
  Вызвала дизайнера, сделала заказ. Сборщики доставку и сборку материалов.
  Работа была выполнена в сроки и качественно.</p>
      </article>


    </div>

  </div>
  <div id='divSlick'><p class="left">⯇</p><p class="right">⯈</p></div>

  </section>



<section class="sec8">

<h1>Сертификаты</h1>
<div class="slider1">
  <div class=""><img src="https://media.lpgenerator.ru/images/157195/gramotabolshaya-compressor.jpg#size_703x542" alt=""></div>
  <div class=""><img src="https://media.lpgenerator.ru/images/157195/gramotabolshaya-compressor.jpg#size_703x542" alt=""></div>
  <div class=""><img src="https://media.lpgenerator.ru/images/157195/gramotabolshaya-compressor.jpg#size_703x542" alt=""></div>
  <div class=""><img src="https://media.lpgenerator.ru/images/157195/gramotabolshaya-compressor.jpg#size_703x542" alt=""></div>
  <div class=""><img src="https://media.lpgenerator.ru/images/157195/gramotabolshaya-compressor.jpg#size_703x542" alt=""></div>
  <div class=""><img src="https://media.lpgenerator.ru/images/157195/gramotabolshaya-compressor.jpg#size_703x542" alt=""></div>
</div>
<div id='divSlick1'><p class="left1">⯇</p><p class="right1">⯈</p></div>

<div style="overflow:hidden;width: 100%;position: relative;"><iframe src="https://maps.google.com/maps?width=700&amp;height=440&amp;hl=en&amp;q=Moscow%2C%20Russia+(%D0%9D%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)&amp;ie=UTF8&amp;t=&amp;z=9&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="width:100%; height: 100vh; overflow:hidden"></iframe><div style="position: absolute;width: 80%;bottom: 10px;left: 0;right: 0;margin-left: auto;margin-right: auto;color: #000;text-align: center; overflow:hidden"><small style="overflow:hidden; line-height: 1.8;font-size: 2px;background: #fff;">Powered by <a href="https://embedgooglemaps.com/it/" style='overflow:hidden'>embedgooglemaps IT</a> & <a href="https://iamsterdamcard.it">http://iamsterdamcard.it/</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><br />

</section>

<section class="sec9">

  <div class="div0">
    <p><img src="https://media.lpgenerator.ru/images/157195/galochkalogo.png#size_41x23" alt="0">
      <img src="https://media.lpgenerator.ru/images/157195/kvadratiklogo.png#size_37x37" alt="1"></p>
    <div ><p class="p0">компания</p>
      <span><b>АРТ</b>МЕБЕЛЬ</span></div>
  </div>

<p id="p">Адрес: г.Москва
<br>Рождественский бул., 14</p>

<div class="div1">
  <p>+38 071 (429) 39 06</p>
  <a href="#">Заказать звонок</a>
</div>
</section>



<footer>
<div class="">
  ОГРН: 50777468873123
<span>ИНН: 783400924</span>

</div>
<p>положение об обработки персональных данных</p>
</footer>




    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

    <script type="text/javascript" src="0.js"></script>
    <script type="text/javascript" src="sl.js"></script>
    <script src="sl1.js"></script>
  </body>
</html>
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
}

strong{
  font-weight: 700 !important
}
body{

color: rgb(40, 40, 40);
overflow-x: hidden;
}
b{
  color: rgb(50, 50, 50);
  font-weight: 500 !important

}

main{

  background: url(fon1cekcii-compressor_DYZvWEH.jpg) center/cover;
  height: 108vh;
  overflow-y: hidden;
  color: DimGrey;

}
a{
  text-decoration: none;
  display: inline-block;
}
a:hover, span:hover, b:hover, h1:hover, h2:hover, strong:hover{
  filter: drop-shadow(0px 0px 9px black);
  background: black !important;
  color: silver !important
}


main .div0{

  margin-top: 20px;
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 4;
}
[alt="0"]{
  position: relative;
  left: 42px;
  bottom: 15px;

}main .p0{
  margin-left: 2px;
  position: relative;
  bottom: 4px;
  letter-spacing: 8px;
  font-size: 13px;
}main .div0 div{
margin-left: 14px;

}main .div0 div span{
  font-size: 22px;
  }main .div1 {
    position: relative;
    bottom: 40px;
    right: 50px;
float: right;
z-index: 4;
  }
  main .div1 p{
    font-size: 16px;
}main .div1 a{
  font-size: 2ch;
  text-decoration: none;
  color: DarkOrange;
  border-bottom: 2px dashed DarkOrange;
  padding-bottom: 3px;
  position: relative;
  left: 3px;


}
main article{
  margin-right: 220px;
position: relative;
bottom: 50px;
float: right;
text-align: right;
font-size: 24px;
border: 4px solid #a4d251;
border-radius: 10px;
padding: 45px 35px 140px 60px;
}main article h1{
  color: rgb(40, 40, 40);

  margin-bottom: 30px;
  position: relative;
  z-index: 2;
font-weight: 600;
  }main article pre{
font-size: 24px;
font-weight: 200;
position: relative;
z-index: 2;

}main [alt="cupboard"]{
  position: absolute;
  right: 20%;
  z-index: 1;

}main article a{
  z-index: 2;
position: relative;
top: 40px;
 margin-right: 150px;
 border: 3px solid #aaa;
  border-radius: 50%;
  width: 56px;
    height: 56px;
    display: inline-block;
    text-align: center;
  color: black;
font-size: 3ch;
font-weight: 400;
}main article a:hover{
  background: black ;
  border: 3px solid #fff;
color: #fff;
filter: drop-shadow(0px 0px 9px black);

}



.sec0{
  overflow-y: hidden;

  height: 40vh;
  background: #a4d251;
  font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;

}


.sec0 h1, .sec0 h3{
  text-align: left;
}
.sec0 .div {

display: flex;
flex-direction: column;
}.sec0 .div1{
  display: flex;
  flex-direction: row;
  margin-top: 20px
}.sec0 .div1 input{
  padding: 10px;
  border-radius: 5px;
  border: none;
  margin-left: 5px;

}.sec0 .div1 a{
  padding: 10px 28px;
  border-radius: 5px;
  border: none;
  color: white;
  background: orange;
  margin-left: 5px;
}


.sec1, .sec4{
height: minmax(140vh, auto);
text-align: center;
overflow-y: hidden;
}.sec1 h1{
  font-size: 5ch;
  margin-top: 70px;
}.sec1 div{
margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;

}

.sec1 section{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
overflow: hidden;
  }.sec1 section article{
  border: 2px solid #a4d251;
  padding: 50px;
  border-radius: 5px;
background: white;
}.sec1 .ar1{
    height: 331px;
    width: 315px;
position: relative;
left: 66px;
}.sec1 .ar2{
position: relative;
top: 40px;
   height: 291px;
width: 382px;
   }.sec1 .ar3{

     height: 291px;
  width: 382px;
   }.sec1 .ar4{
     height: 331px;
     width: 315px;

    }
   .sec1 section p{
margin-top:30px;


   }.sec1 section img{
     position: relative;
     left: 160px;
     bottom: 7px;
     z-index: 1;

}.sec1 .border{
  border: 2px solid #a4d251;
  border-radius: 8px;
padding: 310px 360px;
width: 0px;
position: absolute;
transform: rotate(355deg);
z-index: -1;
margin-bottom: 200px;
}.sec1 .border1{

   border: 2px solid #a4d251;
   border-radius: 8px;
 padding: 310px 360px;
 width: 0px;
 position: absolute;
 transform: rotate(342deg);
 z-index: -1;
 margin-bottom: 200px;
}

.sec2{
  height: 120vh;
background: Gainsboro;
text-align: center;
overflow-y: hidden;
display: flex;
align-items: center;
flex-direction: column;
}.sec2 h1{
  margin-top: 100px;
  margin-bottom:100px;
  font-size: 44px;
  font-weight: 100;
}
.sec2 h2{
  font-weight: 100;
  padding: 10px;
}

.sec2 section{
  display: grid;
  grid-template-columns: repeat(2, 290px);
grid-gap: 60px;
font-size: 14px;
}



.sec3{
  height: 100vh;
  overflow: hidden;
}  .sec3 article{
position: relative;
z-index: 0;
font-size: 25px;
border: 3px solid #a4d251;
border-radius: 8px;
width: 600px;
padding: 50px;
text-align: left;
transform: translate(170px, 90px);
}  .sec3 .div0 {
position: relative ;
z-index: 5 ;
}

.sec3 .div{
margin-top: 30px;
}  .sec3 h1{
font-size: 37px;
}  .sec3 b{
color: #a4d251;
font-size: 22px;

}
.sec3 .p{
margin-top: 30px;
font-size: 17px;
}
.sec3 .grid{
  display: flex;
flex-direction: row;
justify-content: flex-start;
position: relative;
right: 13px;
top: 12px
}.sec3 .time{
  font-size: 3ch;
  color: #a4d251;
  border: 2px solid #a4d251;
  border-radius: 5px;
  padding: 7px;

}.sec3 .grid p{
  color: #a4d251;

  font-size: 13px;
  text-align: center;
  margin-top: 8px;

}.sec3 .grid div{
    margin-left: 13px
  }

[class='cupboard']{
  z-index: 1;
  position: relative;
  margin-left: 500px;
  bottom: 200px;
  overflow-y: hidden;

}












/*  */
.sec4 h1{
margin-top: 100px;
font-size: 5ch;
}.sec4 .div{
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .sec1 div{
  display: flex;
  justify-content: center;
  align-items: center;

} */


  .sec4 section{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px;
  overflow: hidden;

    }
    /* .sec1 section{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
    overflow: hidden;
      } */
  .sec4 section article{
  border: 2px solid rgba(146, 209, 79, 0.8);
  border-radius: 50px;
background: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
overflow: hidden;

}

/* .sec1 section article{
border: 2px solid #a4d251;
padding: 50px;
border-radius: 5px;
background: white;
} */
.sec4 .ar1{
    height: 209px;
    width: 291px;
left: 135px;
top: 111px;
}.sec4 .ar2{
     height: 321px;
  width: 426px;
   }.sec4 .ar3{
        height: 321px;
     width: 426px;
   }.sec4 .ar4{
     height: 210px;
     width: 291px;
    }
   .sec4 section p{
margin-top:30px;
   }.sec4 .border{
  border: 1px solid rgba(40, 45, 40, 0.5);
  border-radius: 8px;
padding: 310px 360px;
width: 0px;
position: absolute;
transform: rotate(335deg);
z-index: -1;
margin-bottom: 200px;
}
.sec4 section img{
  margin-bottom: 5px;
}

  .figure__hover-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    opacity: 0;
    background-size: cover;
    background-position: 50% 50%;
    transition: opacity 1s;
  }


/* 
  .figure:hover .figure__hover-content {
    opacity: 1;
  } */





.sec5{
  overflow-y: hidden;
  background: rgb(230, 230, 225);
  height: 110vh;
  text-align: center;
  }.sec5 h1{
font-size:5ch;
margin-top: 100px;
margin-bottom: 50px


  }.sec5 .div{
    display: flex;
   justify-content: center;
   align-items: center;
margin: 50px 0;
    }.sec5 .div section{
    display: grid;
    grid-template-columns: repeat(3, 1fr) ;
    grid-gap: 10px;
    }.sec5 .div section div{
      width: 307px;
      height: 203px;
      border: 1px solid silver;
  }.sec5 .div section .div1{
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka5-compressor.jpg#size_1121x745) center/cover no-repeat;
    border-radius: 20px 0 0 0;
  }
  .sec5 .div section .div2{
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka4-compressor.jpg#size_1121x745) center/cover no-repeat;
  }
  .sec5 .div section .div3{
    border-radius:  0 20px 0 0;
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka3-compressor.jpg#size_1121x745) center/cover no-repeat;
  }
  .sec5 .div section .div4{
    border-radius:  0 0  0 20px;
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka2-compressor.jpg#size_1121x745) center/cover no-repeat;
  }
  .sec5 .div section .div5{
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka1-compressor.jpg#size_1121x744) center/cover no-repeat;
  }
  .sec5 .div section .div6{
    border-radius:  0 0 20px 0 ;
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka6-compressor.jpg#size_1121x745) center/cover no-repeat;
  }
.sec5 .div section div:hover{

  transform: scale(1.2);
  border-radius: 0;
}




















.sec6{
  overflow-y: hidden;
  background:  #a4d251;
  height: 80vh;
  text-align: center;
}.sec6 h1{
margin-top: 70px;
margin-bottom: 90px;
font-size: 32px;
}.sec6  section{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  }

  .sec6 section div img{
    background: url(https://media.lpgenerator.ru/images/157195/kvadratikshema1.png#size_98x98) center no-repeat;
    padding:30px;
   }

  .sec6 section>img {
    margin-top: 3em;
  }


.sec7{
  overflow-y: hidden;
  height: minmax(100vh, auto);
  background: Gainsboro;
}.sec7 h1{
  text-align: center;
  font-weight: 300;
  font-size: 40px;
  margin-top: 70px;
  margin-bottom: 30px;

}  .slider img{

margin: 30px;
float: left;
}.slider article{
  padding: 40px;
}.slider article h2{
  font-weight: 400;
  margin-bottom: 3px;
}


.sec8{
  overflow-y: hidden;
  height: minmax(100vh, auto);
}
.sec8 h1{
  text-align: center;
  font-weight: 300;
  font-size: 40px;
  margin-top: 70px;
  margin-bottom: 30px;

}
.sec9{

    overflow-y: hidden;
    height: 11vh;
display: flex;
justify-content: space-around;
flex-direction: row;
}.sec9 .div0{
  display: flex;
  flex-direction: row;

  }.sec9 .p0{
    margin-left: 2px;
    position: relative;
    bottom: 4px;
    letter-spacing: 8px;
    font-size: 13px;
  }.sec9 .div0 div{
  margin-left: 14px;

  }.sec9 .div0 div span{
    font-size: 22px;
    }
#p{
  text-align: center;
}


footer{

    overflow-y: hidden;
    height: 10vh;
    background: rgb(230, 225, 230);
    display: flex;
    justify-content: space-around;
    align-items: center;
}
footer div span{
margin-left: 4px
}



@-webkit-keyframes swing {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes swing {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

a {

  -webkit-animation: swing 0.6s ease;
  animation: swing 0.6s ease infinite;

   }









@keyframes toTransparent {
  from{
opacity: 1;
 }
  to{
opacity: 0;
 }
}




@media (max-width: 960px) {
  main{

    background: url(fon1cekcii-compressor_DYZvWEH.jpg) center/cover;
    height: 120vh;
    overflow: hidden;
    color: DimGrey;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }





  main .div0{

    margin-top: 80px;
    display: flex;
    flex-direction: column;
  }
  [alt="0"]{
    position: relative;
    left: 42px;
    bottom: 15px;

  }main .p0{
    margin-left: 2px;
    position: relative;
    bottom: 4px;
    letter-spacing: 8px;
    font-size: 10px;
  }main .div0 div{
  margin-left: 14px;

  }main .div0 div span{
    font-size: 16px;
    }main .div1 {
      margin-top: 25px;
      position: relative;
      bottom: 0;
      right: 0;
  float: right;
    }
    main .div1 p{
      font-size: 16px;
  }main .div1 a{
    font-size: 2ch;
    text-decoration: none;
    color: DarkOrange;
    border-bottom: 2px dashed DarkOrange;
    padding-bottom: 3px;
    position: relative;
    left: 3px;


  }
  main article{
    margin-right: 0;
  position: relative;
  bottom: 20px;
  float: none;
  text-align: center;
  font-size: 20px;
  border: none;
  padding: 45px 35px 140px 60px;
  }main article h1{
    color: rgb(40, 40, 40);

    margin-bottom: 30px;
    position: relative;
    z-index: 2;
  font-weight: 600;
    }main article pre{
  font-size: 18px;
  font-weight: 200;
  position: relative;
  z-index: 2;

  }main [alt="cupboard"]{
    /* position: absolute;
    right: 20%;
    z-index: 1; */
    display: none;
  }main article a{
    z-index: 2;
  position: static;
  margin-top: 50px;
  margin-right: 0;
   border: 3px solid #aaa;
    border-radius: 50%;
    width: 56px;
      height: 56px;
      display: inline-block;
      text-align: center;
    color: black;
  font-size: 2ch;
  font-weight: 400;
  }main article a:hover{
    background: black ;
    border: 3px solid #fff;
  color: #fff;

  }




  .sec5{
    overflow-y: hidden;
    background: rgb(230, 230, 225);
    height: auto;
    text-align: center;
    }.sec5 h1{
  font-size:5ch;
  margin-top: 100px;
  margin-bottom: 50px


    }.sec5 .div{
      display: flex;
     justify-content: center;
     align-items: center;
  margin: 50px 0;
      }.sec5 .div section{
      display: grid;
      grid-template-columns: repeat(3, 1fr) ;
      grid-gap: 10px;
      }.sec5 .div section div{
        width: 150px;
        height: 100px;
        border: 1px solid silver;
    }.sec5 .div section .div1{
      background: url(https://media.lpgenerator.ru/images/157195/bolkartinka5-compressor.jpg#size_1121x745) center/cover no-repeat;
      border-radius: 20px 0 0 0;
    }
    .sec5 .div section .div2{
      background: url(https://media.lpgenerator.ru/images/157195/bolkartinka4-compressor.jpg#size_1121x745) center/cover no-repeat;
    }
    .sec5 .div section .div3{
      border-radius:  0 20px 0 0;
      background: url(https://media.lpgenerator.ru/images/157195/bolkartinka3-compressor.jpg#size_1121x745) center/cover no-repeat;
    }
    .sec5 .div section .div4{
      border-radius:  0 0  0 20px;
      background: url(https://media.lpgenerator.ru/images/157195/bolkartinka2-compressor.jpg#size_1121x745) center/cover no-repeat;
    }
    .sec5 .div section .div5{
      background: url(https://media.lpgenerator.ru/images/157195/bolkartinka1-compressor.jpg#size_1121x744) center/cover no-repeat;
    }
    .sec5 .div section .div6{
      border-radius:  0 0 20px 0 ;
      background: url(https://media.lpgenerator.ru/images/157195/bolkartinka6-compressor.jpg#size_1121x745) center/cover no-repeat;
    }
  .sec5 .div section div:hover{

    transform: scale(1.2);
    border-radius: 0;
  }



}
@media (max-width: 880px) {




.sec4{  overflow: hidden;
}
  /*  */
  .sec4 h1{
  margin-top: 100px;
  font-size: 4ch;
  }.sec4 .div{
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* .sec1 div{
    display: flex;
    justify-content: center;
    align-items: center;

  } */


    .sec4 section{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
    overflow: hidden;
font-size: 10px;
      }
      /* .sec1 section{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 5px;
      overflow: hidden;
        } */
    .sec4 section article{
    border: 2px solid rgba(146, 209, 79, 0.8);
    border-radius: 50px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  }

  /* .sec1 section article{
  border: 2px solid #a4d251;
  padding: 50px;
  border-radius: 5px;
  background: white;
  } */
  .sec4 .ar1{
      height: 100px;
      width: 140px;
  left: 70px;
  top: 55px;
  }.sec4 .ar2{
       height: 156px;
    width: 210px;
     }.sec4 .ar3{
          height: 156px;
       width: 210px;
     }.sec4 .ar4{
       height: 100px;
       width: 140px;
      }
     .sec4 section p{
  margin-top:30px;
     }.sec4 .border{
    border: 1px solid rgba(40, 45, 40, 0.5);
    border-radius: 8px;
  padding: 300px 210px;
  width: 0px;
  position: absolute;
  transform: rotate(335deg);
  z-index: -1;
  margin-bottom: 200px;
  }
  .sec4 section img{
    margin-bottom: 5px;
    width: 33px;
  }
  /*
  .sec4 section .ar1:hover{
    cursor: pointer;
    background: url(https://media.lpgenerator.ru/images/157195/img2.png#size_426x321) center no-repeat;
    animation: toTransparent .7s  linear;
  }
  .sec4 section .ar2:hover{
    cursor: pointer;
    background: url(https://media.lpgenerator.ru/images/157195/img2.png#size_426x321) center no-repeat;
    animation: toTransparent .7s  linear;
  }
  .sec4 section .ar3:hover{

    background: url(https://media.lpgenerator.ru/images/157195/img3-compressor-1.png#size_426x321) center no-repeat;
    cursor: pointer;
    animation: toTransparent .7s  linear;
  }
  .sec4 section .ar4:hover{
    background: url(https://media.lpgenerator.ru/images/157195/img4-compressor.png#size_290x210) center no-repeat;
    cursor: pointer;
    animation: toTransparent .7s linear;
  } */








}




@media (max-width: 830px) {

  .sec6{
    overflow-y: hidden;
    background:  #a4d251;
    height: auto;
    text-align: center;

  }.sec6 h1{
  margin-top: 40px;
  margin-bottom: 50px;

  }.sec6  section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    }

    .sec6 section div img{
      /* background: url(https://media.lpgenerator.ru/images/157195/kvadratikshema1.png#size_98x98) center no-repeat;
      padding:30px; */

     }

    .sec6 section>img {
    }


}






@media (max-width: 790px) {
  .sec1 section img{
  left: 108px;
top: 49px
  }

  .sec1 {
  height: minmax(140vh, auto);
  text-align: center;
  overflow-y: hidden;

  }.sec1 h1{
    font-size: 4ch;
    margin-top: 70px;
    }.sec1 h2{
font-size: 18px;
}  .sec1 div{
  margin-top: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

  }

  .sec1 section{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px;
  overflow: hidden;

    }.sec1 section article{
    border: 2px solid #a4d251;
    padding: 20px;
    border-radius: 5px;
  background: white;
margin-top: 5px;
  }.sec1 .ar1{
    height: 420px;
    width: 215px;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
  }.sec1 .ar2{
    height: 420px;
    width: 214px;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
     }.sec1 .ar3{
       height: 420px;
       width: 215px;
       left: 1px;
       top: 1px;
       right: 1px;
       bottom: 1px;
     }.sec1 .ar4{
       height: 420px;
       width: 214px;
       left: 1px;
       top: 1px;
       right: 1px;
       bottom: 1px;
      }
     .sec1 section p{
  margin-top:30px;


     }
.sec1 .border{
    border: 2px solid #a4d251;
    border-radius: 8px;
  padding: 310px 360px;
  width: 0px;
  position: absolute;
  transform: rotate(355deg);
  z-index: -1;
  margin-bottom: 200px;
  }.sec1 .border1{

     border: 2px solid #a4d251;
     border-radius: 8px;
   padding: 310px 360px;
   width: 0px;
   position: absolute;
   transform: rotate(342deg);
   z-index: -1;
   margin-bottom: 200px;
  }


}




@media (max-width: 765px) {

  .sec0{
    overflow-y: hidden;

    height: 50vh;
    background: #a4d251;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
font-size: 16px;
  }


  .sec0 h1, .sec0 h3{
    text-align: left;
  }
  .sec0 .div {

  display: flex;
  flex-direction: column;
  margin: 15px ;

  }.sec0 .div1{
    display: flex;
    flex-direction: column;
    margin-top: 20px
  }.sec0 .div1 input{
    padding: 5px;
    border-radius: 5px;
    border: none;
    margin-top: 10PX
  }.sec0 .div1 a{
    padding: 5px 14px;
    border-radius: 5px;
    border: none;
    color: white;
    background: orange;
    margin-top: 10PX

  }


}



@media (max-width: 660px) {


  .sec9{
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 40vh;
  }.sec9 .div0{
    position: relative;
    right: 20px;
  }





  .sec3{
    height: 100vh;
    overflow: hidden;
  }  .sec3 article{
  font-size: 16px;
  border: 3px solid #a4d251;
  border-radius: 8px;
  width: 600px;
  padding: 50px;
  text-align: left;
  transform: translate(20px, 70px);
  }  .sec3 .div{
  margin-top: 30px;
  }  .sec3 h1{
  font-size: 22px;
  }  .sec3 b{
  color: #a4d251;
  font-size: 20px;

  }
  .sec3 .p{
  margin-top: 30px;
  font-size: 17px;
  }
  .sec3 .grid{
    display: flex;
  flex-direction: row;
  justify-content: flex-start;
  position: relative;
  right: 13px;
  top: 12px
  }.sec3 .time{
    font-size: 3ch;
    color: #a4d251;
    border: 2px solid #a4d251;
    border-radius: 5px;
    padding: 7px;

  }.sec3 .grid p{
    color: #a4d251;

    font-size: 13px;
    text-align: center;
    margin-top: 8px;

  }.sec3 .grid div{
      margin-left: 13px
    }

  [class='cupboard']{
    z-index: 1;
    position: relative;
    margin-left: 360px;
    bottom: 200px;
    overflow-y: hidden;

  }



  .sec2{
    height: 100vh;
  background: Gainsboro;
  text-align: center;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
  }.sec2 h1{
    margin-top: 100px;
    margin-bottom:100px;
    font-size: 40px;
    font-weight: 100;
  }
  .sec2 h2{
    font-weight: 100;
    padding: 10px;
  }

  .sec2 section{
    display: grid;
    grid-template-columns: repeat(2, 280px);
  grid-gap: 30px;
  }








}

@media (max-width: 610px) {


    .sec2{
      height: auto;
    background: Gainsboro;
    text-align: center;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    }.sec2 h1{
      margin-top: 100px;
      margin-bottom:100px;
      font-size: 40px;
      font-weight: 100;
    }
    .sec2 h2{
      font-weight: 100;
      padding: 10px;
    }

    .sec2 section{
      display: flex;
flex-direction: column;

    }.sec2 section article{

margin-bottom: 20px;

    }


}
@media (max-width: 520px) {
  .sec3{
    height: 70vh;
  }
  [class='cupboard']{
display: none;
}
}


@media (max-width: 490px) {

  .sec5 .div section div{
    width: 100px;
    height: 90px;
    border: 1px solid silver;
  }
  .sec1 section img{
  left: 108px;

  }

}

@media (max-width: 456px) {
section:is(.sec4, .sec1) h1{
  font-size: 3ch !important;
  }
  section:-webkit-any(.sec4, .sec1) h1 {
    font-size: 3ch !important;

  }
  section:-moz-any(.sec4, .sec1) h1 {
    font-size: 3ch !important;

  }

  .sec1 section img{
  left: 108px;
display: none;
  }

  .sec1 {
  height: minmax(140vh, auto);
  text-align: center;
  overflow-y: hidden;

  }.sec1 h1{
    font-size: 4ch;
    margin-top: 70px;
    }.sec1 h2{
font-size: 18px;
}  .sec1 div{
  margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .sec1 section{
  display: flex;
flex-direction: column;
  overflow: hidden;

    }.sec1 section article{
    border: 2px solid #a4d251;
    padding: 20px;
    border-radius: 5px;
  background: white;

  }.sec1 .ar1{
    height: 420px;
    width: 215px;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
  }.sec1 .ar2{
    height: 420px;
    width: 214px;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
     }.sec1 .ar3{
       height: 420px;
       width: 215px;
       left: 1px;
       top: 1px;
       right: 1px;
       bottom: 1px;
     }.sec1 .ar4{
       height: 420px;
       width: 214px;
       left: 1px;
       top: 1px;
       right: 1px;
       bottom: 1px;
      }
     .sec1 section p{
  margin-top:30px;


     }
.sec1 .border{
    border: 2px solid #a4d251;
    border-radius: 8px;
  padding: 310px 360px;
  width: 0px;
  position: absolute;
  transform: rotate(355deg);
  z-index: -1;
  margin-bottom: 200px;
  }.sec1 .border1{

     border: 2px solid #a4d251;
     border-radius: 8px;
   padding: 310px 360px;
   width: 0px;
   position: absolute;
   transform: rotate(342deg);
   z-index: -1;
   margin-bottom: 200px;
  }
  footer{

      height: 20vh;
      background: rgb(230, 225, 230);
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
  }
  footer div span{
  margin-left: 4px
  }

  .sec4 h1{
  margin-top: 100px;
  font-size: 4ch;
  }.sec4 .div{
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* .sec1 div{
    display: flex;
    justify-content: center;
    align-items: center;

  } */


    .sec4 section{
    display: flex;
flex-direction: column;
    overflow: hidden;
font-size: 10px;
      }
      /* .sec1 section{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 5px;
      overflow: hidden;
        } */
    .sec4 section article{
    border: 2px solid rgba(146, 209, 79, 0.8);
    border-radius: 50px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  }

  /* .sec1 section article{
  border: 2px solid #a4d251;
  padding: 50px;
  border-radius: 5px;
  background: white;
  } */
  .sec4 .ar1{
      height: 100px;
      width: 140px;
  left: 0;
  top: 0;
  }.sec4 .ar2{
       height: 156px;
    width: 210px;
     }.sec4 .ar3{
          height: 156px;
       width: 210px;
     }.sec4 .ar4{
       height: 100px;
       width: 140px;
      }
     .sec4 section p{
  margin-top:30px;
     }.sec4 .border{
    border: 1px solid rgba(40, 45, 40, 0.5);
    border-radius: 8px;
  padding: 300px 210px;
  width: 0px;
  position: absolute;
  transform: rotate(335deg);
  z-index: -1;
  margin-bottom: 200px;
  }
  .sec4 section img{
    margin-bottom: 5px;
    width: 33px;
  }




}





@media (max-width: 350px) {

  .sec5 h1{
margin-top: 40px;
margin-bottom: 30px;
font-size:3ch;


  }.sec5 .div{
    display: flex;
   justify-content: center;
   align-items: center;
margin: 20px 0;
    }.sec5 .div section{
    display: grid;
    grid-template-columns: repeat(3, 1fr) ;
    grid-gap: 10px;
    }.sec5 .div section div{
      width: 75px;
      height: 75px;
      border: 1px solid silver;
  }.sec5 .div section .div1{
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka5-compressor.jpg#size_1121x745) center/cover no-repeat;
    border-radius: 20px 0 0 0;
  }
  .sec5 .div section .div2{
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka4-compressor.jpg#size_1121x745) center/cover no-repeat;
  }
  .sec5 .div section .div3{
    border-radius:  0 20px 0 0;
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka3-compressor.jpg#size_1121x745) center/cover no-repeat;
  }
  .sec5 .div section .div4{
    border-radius:  0 0  0 20px;
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka2-compressor.jpg#size_1121x745) center/cover no-repeat;
  }
  .sec5 .div section .div5{
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka1-compressor.jpg#size_1121x744) center/cover no-repeat;
  }
  .sec5 .div section .div6{
    border-radius:  0 0 20px 0 ;
    background: url(https://media.lpgenerator.ru/images/157195/bolkartinka6-compressor.jpg#size_1121x745) center/cover no-repeat;
  }
.sec5 .div section div:hover{

  transform: scale(1.2);
  border-radius: 0;
}
}









.sec1 section img{

-webkit-animation: swing 0.6s ease;
animation: swing 0.6s ease infinite;
}
.sec1 section img:hover{
filter: drop-shadow(1px 1px 13px red);

}



@media (min-height: 690px) {
  main{
    height: 90vh
  }
}
function startTimer(secs, display) {
    var seconds = secs, date;
    setInterval(function () {
        date = new Date(seconds*1000);
        time0.textContent = ("0" + date.getUTCHours()).slice(-2);
        time1.textContent = ("0" + date.getMinutes()).slice(-2);
        time2.textContent = ("0" + date.getSeconds()).slice(-2);

        if (--seconds < 0) {
            seconds = secs;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 236 * 57,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

for (let variable of querySelectorAll('.figure')) {
  variable.onclick = function(){
  querySelector('.figure .figure__hover-content').style.opacity = '1';
  };
}