.header {
  z-index: 9999;
  height: 15vh;
  width: 100%;
  top: 0%;
  position: sticky;
  transition: background-color 0.8s ease;
  transition: height 1s ease;
  transition: box-shadow 2s ease;
}

.header_contacts p {
  color: black;
  transition: color 1s ease;
}

.header {
  display: grid;
  grid-template-columns: 5% 8% 10% 30% 13% 14% 15% 5%;
  grid-template-rows: 5% 1fr 1fr 1fr 5%;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . ."
    ". header_logo . . header_contacts . header_button ."
    ". header_logo header_social_icons header_menu header_contacts header_phone header_button ."
    ". header_logo . . header_contacts . header_button ."
    ". . . . . . . .";
    background: #EDEDED;
    box-shadow: 0px 0px 25px #EDEDED;
}


.header_active {
  background-color: rgba(0,0,0,0.97);
  height: 10vh;
  box-shadow:  10px 10px 30px #d9d9d9,
             -10px -10px 30px #ffffff;
}

.header_active p {
  color: white;
}

.header_active .header_logo img {
  display: none;
}

.header_logo {
  grid-area: header_logo;
}

.header_logo img {
  margin: auto;
  width: 15vw;
  transition: display 0.8s ease;
}

.header_social_icons {
  grid-area: header_social_icons;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.header_social_icons img {
  width: 40%;
  margin: auto;
}

.header_menu {
  grid-area: header_menu;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

.header_menu a {
  font-size: 14px;
}


.header a {
  margin: auto;
  color: black;
  transition: color 1s ease;
}

.header_active a {
  color: white;
  transition: color 1s ease;
}

.header_phone a {
  color: black;
  transition: color 1s ease;
}

.header_active .header_phone a {
  color: rgb(251, 201, 220);
}

.header_phone {
  grid-area: header_phone;
  margin: auto;
}

.header_contacts {
  grid-area: header_contacts;
  margin: auto;
}


.header_button {
  grid-area: header_button;
  margin: auto;
}

.header_button a {
  text-decoration: none;
  color: inherit;
}

.header_button a:hover {
  color: white;
}

.cta {
  position: relative;
  margin: auto;
  padding: 19px 22px;
  transition: all 0.2s ease;
}

.cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 28px;
  background: -webkit-linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b);
  width: 56px;
  height: 56px;
  transition: all 0.3s ease;
}

.cta span {
  font-family: CeraRoundPro-Medium;
  color: black;
  transition: color 1s ease;
  position: relative;
  font-size: 14px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  vertical-align: middle;
}

.header_active .cta span {
  color: white;
}


.cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: white;
  transition: all 0.3s ease;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

.header_active .cta svg{
  stroke: black;
}

.cta:hover:before {
  width: 100%;
  background: color: rgb(251, 201, 220);
}

.cta:hover svg {
  transform: translateX(0);
  stroke: white;
}

.cta:hover span {
  color: white;
}

.cta:active {
  transform: scale(0.96);
}


@media only screen and (max-width: 768px) {
  .header_social_icons {
    display: none;
  }
  .header_menu {
    display: none;
  }
  .header_contacts {
    display: none;
  }
  .header_phone {
    display: none;
  }

  .header {  display: grid;
    grid-template-columns: 5% 1fr 1fr 5%;
    grid-template-rows: 5% 1fr 5%;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      ". . . ."
      ". header_logo header_button ."
      ". . . .";
    width: 100%;
    height: 10vh;
  }
  .header_logo { grid-area: header_logo; }
  .header_logo img { width: 40vw; }
  .header_active .header_logo img { width: 20vw; }
  .header_button { grid-area: header_button; }

  .cta:before {
    border-radius: 25px;
    width: 50px;
    height: 50px;
  }

  .cta span {
    font-size: 10px;
  }

  .cta svg {
    margin-left: 0px;
    stroke-width: 1;
  }

}






/* Landscape Tablet*/
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {

  .header_logo img { width: 8vw; }
  .header_active .header_logo img { width: 7vw; }

  .header_menu a {
    font-size: 0.5rem;
  }

  .header_contacts p {
    font-size: 0.5rem;
  }

  .header_phone a {
    font-size: 0.7rem;
  }
  .cta:before {
    border-radius: 25px;
    width: 50px;
    height: 50px;
  }

  .cta span {
    font-size: 10px;
  }

  .cta svg {
    display: none;
  }

}