body {
  background-color: black;
  padding: 20px 5% 30px 5%;
}

.wrap {
  background-color: white;
  margin: 0 auto;
  box-sizing: border-box;
  max-width: 1600px;
}

.top-heaader {
  background-color: #1abc9c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 5% 0 5%;
  min-height: 50px;
  box-sizing: border-box;
}

.top-heaader a {
  color: #ffffff;
  font-size: 14px;
  font-family: 'Open Sans';
  color: rgb(254, 254, 254);
  font-weight: 300;
}

.top-heaader a:hover {
  color: aquamarine;
}

.contacts {
  text-decoration: none;
  line-height: 2;
}

.info-list {
  display: flex;
  justify-content: space-between;

  list-style: none;
  line-height: 0;
}

header {
  margin: 0 auto;
}

.logo a {
  font-size: 30px;
  font-family: 'Roboto', sans-serif;

  text-transform: uppercase;
  font-weight: 400;
}

.green-logo {
  font-size: 30px;
  font-family: 'Roboto', sans-serif;
  color: #1abc9c;
  text-transform: uppercase;
  line-height: 1.067;
  font-weight: 700;
}

#hover a:hover {
  color: #1abc9c;
}

nav a {
  color: black;
  font-size: 14px;
  font-family: 'Open Sans';
  text-transform: uppercase;
  line-height: 0.786;
  font-weight: bold;
}

.flex-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 2% 50px 2% 50px;
}

.nav-list {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}

.nav-item {
  margin-left: 30px;
}

/* Head Section */

.head-position {
  position: relative;
  text-align: center;
}

.head-section {
  background-color: grey;
  margin-bottom: 5%;
  position: relative;
}

.head-section::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(to left, #000002, #000002);
  opacity: 0.52;
}

.head-gradient {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(to left, #11de93, #0e7ad6);
  opacity: 0;
}

/* Псевдоанимация градиента */
.head-position:hover > .head-gradient {
  opacity: 0.5;
  transition: 2s;
}

.head-img {
  display: block;
  width: 100%;
}

.head-content {
  position: absolute;

  /* Центрирование: */
  top: 50%;
  left: 50%;
  /* translate(x,y) */
  /* Сдвигает элемент на новое место, перемещая относительно 
  обычного положения вправо и вниз, используя координаты X и Y, 
  не затрагивая при этом соседние элементы. 
  Если нужно сдвинуть элемент влево или вверх, то нужно 
  использовать отрицательные значения. */
  transform: translate(-50%, -50%);
  /* width: 50%; */

  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 48px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.head-content h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
  font-weight: 300;
  margin: 0;
  padding: 0;
}

.head-content p {
  margin: 0 0 3% 0;
  padding: 0;
}

.head-content a {
  display: block;
  width: 160px;
  height: 50px;
  border-radius: 3px;
  background-color: #1abc9c;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 200;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 50px;
}

.head-content a:hover {
  background-color: #16a588;
}

.head-green {
  font-weight: 600;
  color: #1abc9c;
}

/* Icon section */

.big-icon {
  font-size: 70px;
  color: rgb(26, 188, 156);
  line-height: 0.457;
  text-align: center;
  padding: 0;
  margin: 0;
}

.icon-section h3 {
  font-size: 18px;
  font-family: 'Open Sans';
  color: rgb(85, 82, 82);
  font-weight: bold;
  line-height: 1.778;
  text-align: center;
}

.icon-p {
  font-size: 14px;
  font-family: 'Open Sans';
  color: rgb(85, 82, 82);
  line-height: 1.714;
  /* текст по ширине */
  text-align: justify;
}

.icon-block {
  width: 255px;
  text-align: center;
  margin: 10px;
}

.icon-section {
  display: flex;
  justify-content: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 10% 5% 10%;
}

/* New-collection */
.new-collection {
  padding: 5% 10% 5% 10%;
  box-sizing: border-box;
  background-color: #e9f0fd;
  display: flex;
  flex-direction: column;
  margin-bottom: 5%;
}

/* Fitrst section */

.flex-block {
  margin: 10px;
  display: flex;
  width: 255px;
  flex-wrap: wrap;
  cursor: pointer;
  position: relative;
  /* Скрываем все, что вокруг */
  overflow: hidden;
}

/* Блок подписи карточек */

.black {
  position: relative;
  width: 200px;
  height: 40px;
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  line-height: 40px;
  background-color: #323232;
  box-sizing: border-box;
  font-size: 18px;
  font-family: 'Roboto';
}

.grey {
  position: relative;
  background-color: #8c8c8c;
  color: #ffffff;
  line-height: 40px;
  box-sizing: border-box;
  width: 55px;
  height: 40px;
  font-size: 18px;
  font-family: 'Roboto';
  text-align: center;
}

.flex-block:hover .black {
  animation-name: black-green;
  animation-duration: 250ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
}

@keyframes black-green {
  from {
  }

  to {
    background-color: #1abc9c;
  }
}

.flex-block:hover .grey {
  animation-name: grey-green;
  animation-duration: 250ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
}

@keyframes grey-green {
  from {
  }

  to {
    background-color: #7fd9c7;
  }
}

.block-gradient {
  width: 255px;
  height: 280px;

  position: absolute;
  transform: translate(0, 280px);
  background-image: linear-gradient(to left, #000000, #000000);
  opacity: 0.54;
  /* Делаем рамку внутри блока */
  outline: 10px solid #ffffff;
  outline-offset: -10px;
}

/* При наведении на блок меняем блок градиента */
.flex-block:hover > .block-gradient {
  animation-name: Grad-anim;
  animation-duration: 250ms;
  /* Чтобы анимация не сбрасывалась сама */
  animation-fill-mode: forwards;
}

/* Описываем анимацию */
@keyframes Grad-anim {
  from {
  }

  to {
    transform: translate(0, 0);
  }
}

.first-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10% 100px 10%;
}

.h2 {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -2px;
  color: rgb(81, 81, 81);
  text-transform: uppercase;
  text-align: center;
  line-height: 0.667;
  font-family: 'Roboto';
}

h2 {
  margin: 0 0 40px 0;
}

h2::after {
  content: url(../img/Green-line1.png);
  display: block;
  text-align: center;
  margin: 10px auto;
}

header,
.first-section {
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
}

a {
  text-decoration: none;
}

.flexlist {
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.flexlist img {
  width: 255px;
  height: 280px;
}

/* Блок кнопок карточки */

.button-block {
  width: 255px;
  height: 280px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  margin: 0;
  padding: 86px 44px 87px 45px;
  box-sizing: border-box;
  position: absolute;
  /* Перемещает блок по горизонтали и вертикали: */
  transform: translate(0, 0);
  opacity: 0;
}

/* При наведении на блок меняем блок кнопок */
.flex-block:hover > .button-block {
  /* Создаем анимацию */
  animation-name: Button-block-anim;
  /* Задержка старта анимации */
  animation-delay: 250ms;
  /* Продолжительность анимации */
  animation-duration: 250ms;
  /* Чтобы анимация не сбрасывалась сама */
  animation-fill-mode: forwards;
}

/* Описываем анимацию */
@keyframes Button-block-anim {
  from {
  }

  to {
    opacity: 1;
  }
}

.button-block-1 {
  background-image: url(../img/Card_button_01.png);
  width: 50px;
  height: 50px;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.button-block-2 {
  background-image: url(../img/Card_button_02.png);
  width: 50px;
  height: 50px;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.button-block-3 {
  background-image: url(../img/Card_button_03.png);
  width: 50px;
  height: 50px;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.button-block-4 {
  background-image: url(../img/Card_button_04.png);
  width: 167px;
  height: 50px;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* Second section */

.second-section {
  padding: 5% 10% 5% 10%;
  box-sizing: border-box;
  background-color: #e9f0fd;
  display: flex;
  flex-direction: column;
}

.second-section h3::after {
  content: url(../img/Green_line2.png);
  display: block;
}

.flex-block2 {
  width: 350px;
  height: 495px;
  margin: 10px 10px 50px 10px;
}

.flex-list2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-block2 a {
  display: block;
  width: 160px;
  height: 50px;
  border-radius: 3px;
  background-color: rgb(78, 198, 171);
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 50px;
}

.flex-block2 a:hover {
  background-color: rgb(58, 148, 129);
}

.flex-block2 p {
  font-size: 14px;
  font-family: 'OpenSans';
  color: rgb(85, 82, 82);
  line-height: 1.857;
  margin: 10px 0 10px 0;
}

h3 {
  font-size: 18px;
  font-family: 'OpenSans';
  color: rgb(85, 82, 82);
  line-height: 1.444;
  margin: 15px 0 15px 0;
}

.flex-list2 img {
  margin: 0%;
  padding: 0;
  width: 350px;
  height: 260px;
}

/* Footer */

.footer {
  background-image: url(../img/Footer_back.png);
  background-size: cover;
  padding-bottom: 10px;
  text-align: center;
  width: 100%;
  height: auto;
}

.footer p {
  font-size: 16px;
  font-family: 'Open Sans';
  font-weight: 300;
  color: rgb(255, 255, 255);
  line-height: 1.625;
  margin: 0 0 2% 0;
}

.footer h2 {
  padding: 5% 0 2% 0;
  margin: 0;
}

.footer h2::after {
  content: url(../img/White-line.png);
  display: block;
  text-align: center;
  margin: 1% auto;
}

.input {
  width: 540px; /* Ширина поля с кнопкой */
  border: 3px solid #ffffff; /* Параметры рамки */
  border-radius: 5px;
  min-height: 65px; /* Минимальная высота */
  margin: 2% auto 5% auto;
  background-color: #ffffff;
}

.input:hover {
  border: 3px solid #e7c0c0;
}

.input-email {
  border: none; /* Убираем рамку */
  outline: none; /* Убираем свечение в Chrome и Safari */
  -webkit-appearance: none; /* Убираем рамку в Chrome и Safari */
  width: 440px; /* Ширина поля */
  height: 65px;
  margin: 0;
  padding: 0 0 0 10px;
  vertical-align: top;
  font-size: 24px;
}

.input-button {
  width: 86px; /* Ширина кнопки */
  height: 65px; /* Высота кнопки */
  border: none; /* Убираем рамку */
  margin: 0;
  padding: 0 0 0 3px;
  text-align: center;
  font-size: 55px;
  color: rgb(255, 255, 255);
  line-height: 0;
  cursor: pointer;
  background-color: #4ec6ab;
  border-radius: 0 5px 5px 0;
}

.input-button:hover {
  background-color: #358d7a;
}

.input-span {
  line-height: 65px;
}