/* Указываем box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Убираем внутренние отступы */
ul[class],
ol[class],
ul {
  padding: 0;
}

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd,
ul {
  margin: 0;
}

/* Выставляем основные настройки по-умолчанию для body */
body {
  position: relative;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  z-index: 20;
}

/* Стили главной страници */

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1350px;
}

main section > div {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}

main {
  width: 95%;
  position: relative;
}

.head {
  position: relative;
}

.head_bottom_deg {
  background: no-repeat center/100% url(../assets/back_head/back_head.jpg);
  width: 100%;
  min-height: 500px;
  position: relative;
  top: -100px;
}

.head_top  {
  position: relative;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.9);
}

.head_footer {
  width: 100%;
}


.head_bottom_deg > .head_footer > span {
  position: absolute;
  display: flex;
  align-items: center;
  padding-left: 50px;
  width: 100%;
  background-color: #252525;
  color: #fff;
  min-height: 100px;
  font-size: 2.2rem;
  top: 70%;
}

main h1, 
#slider_sertificats > h3 {
  text-transform: uppercase;
}

.head_log {
  display: flex;
  align-items: center;
  
}

#logo {
  width: 50px;
  height: 50px;
}

.head_discription {
  width: 80%;
  margin: 0 0 20px 0;
}

.head_contacts {
  align-self: self-start;
  margin-top: 15px;
  font-weight: bold;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  background-color: #504e4e;
  color: #fff;
}


/*Треугольники*/
.head_bottom_deg::after {
  content: ''; 
  position: absolute;
  right: 0; 
  bottom: -100px; 
  border: 100px solid transparent; 
  border-top: 100px solid red;
  border-right: 100px solid red; 
  transform: skewY(-45deg);
 }

 .head_bottom_deg::before {
  content: ''; 
  position: absolute; 
  right: 0; 
  bottom: -150px; 
  border: 150px solid transparent; 
  border-top: 150px solid rgba(255, 0, 0, 0.3);
  border-right: 150px solid rgba(255, 0, 0, 0.3); 
  transform: skewY(-45deg);
 }


 /* Оборудование */

 .equipment {
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: center;
 }

 .equipment_block_1,
 .equipment_block_2,
 .equipment_block_3,
 .equipment_block_4,
 .equipment_block_5,
 .equipment_block_6,
 .equipment_block_7,
 .equipment_block_8,
 .equipment_block_9,
 .equipment_block_10,
 .equipment_block_11,
 .equipment_block_12,
 .equipment_block_13,
 .equipment_block_14,
 .equipment_block_15,
 .equipment_block_16,
 .equipment_block_17  {
  display: flex;
  justify-content: center;
 }

 .equipment_descriptio { 
  display: flex;
 }

 .capacitive_equipment {
  width: 100%;
  display: flex;
  flex-direction: column;
 }


 .equipment_block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 25px;
 }

 .capacitive_equipment > .equipment_block > h3 {
  display: block;
  word-wrap: wrap;
  margin-bottom: 15px;
 }

 h3 {
  max-width: 400px;
  text-align: center;
 }

 img {
  width: 400px;
  height: 400px;
 }

 #capacitive_equipment_first {
  align-self: center;
 }

 .equipment_block_3 > .equipment_block > img,
 #equipment_block_7_img > img,
 .equipment_block_6 > .equipment_block > img,
 .equipment_block_9 > .equipment_block > h3, 
 .equipment_block_9 > .equipment_block > img {
  width: auto;
  max-width: none;
 }

 .equipment_block_3 > .equipment_block > h3,
 .capacitive_equipment > .equipment_head > h2,
 .capacitive_equipment > .equipment_head {
  width: 100%;
  max-width: none;
 }

 .equipment_block {
  display: flex;
  align-items: center;
  width: 100%;
 }

 .underground_storage_tanks_equipment,
 .mobile_complex_equipment,
 .mobile_complex_fire_equipment,
 .mobile_complex_hard_equipment,
 .mobile_complex_hard_equipment, 
 .pipeline_details_equipment {
  width: 100%;
 }
 
 h2 {
  text-align: center;
  color: #fff;
  background-color: rgb(165, 5, 5);
  width: 100%;
 }

 .mobile_complex_fire_equipment > .equipment_block_10 > .equipment_block > div > img,
 .mobile_complex_fire_equipment > .equipment_block_10 > .equipment_block > img,
 .pipeline_details_equipment > .equipment_block_14 > .equipment_block > img,
 .aluminum_slag_equipment > .equipment_block_15 > .equipment_block > img {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
 }
  

 
 .equipment_block_11 > .equipment_block > img:first-child,
 .equipment_block_15 > .equipment_block > img:first-child,
 .equipment_block_17 > .equipment_block > img:first-child {
  align-self: flex-start;
 }

 
 .equipment_block_11 > .equipment_block > img:last-child,
 .equipment_block_15 > .equipment_block > img:last-child,
 .equipment_block_17 > .equipment_block > img:last-child {
  align-self: flex-end;
 }

 .mobile_complex_hard_equipment > .equipment_block_12 > .equipment_block > img {
  width: auto;
  height: auto;
  max-width: none;
  max-height: 400px;
 }


 .equipment_block_14 > .equipment_block > h3:first-child {
  align-self: flex-start;
  width: auto;
 }

 .equipment_block_14 > .equipment_block > img:nth-child(2) {
  align-self: flex-start;
 }

 .equipment_block_14 > .equipment_block > img:last-child {
  align-self: flex-end;
  
 }

 .mobile_complex_hard_equipment > .equipment_block_11 > .equipment_block > img {
  width: auto;
  height: auto;
  max-height: 500px;
 }

 .equipment_block_16 > .equipment_block > img {
  max-width: none;
  max-height: none;
  width: auto;
 }

 .equipment_block_17 > .equipment_block > img {
  max-width: 600px;
  max-height: 350px;
  width: auto;
 }

/* Slider sertificats */ 

#slider_sertificats {
  width: 95%;
  display: flex;
  flex-direction: column;
}

#slider_sertificats > div.gallery {
  display: flex;
}

#slider_sertificats > div.gallery > figure {
  flex-basis: 24%;
  max-width: 500px;
}

#slider_sertificats > div.gallery > figure > img {
  width: 100%;
  height: 100%;
}

@media (max-width: 769px) {
  #slider_sertificats > div.gallery {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}

/* equipment_list */

#equipment_list {
  width: 95%;
}

#equipment_list > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#equipment_list > ul > li {
  text-decoration: none;
  list-style-type: none;
  margin: 5px;
  padding: 3px;
  border: 1px solid red;
  font-size: 1.5rem;
}

#equipment_list > ul > li:hover {
  cursor: pointer;
  background-color: red;
  color: #fff;
}