/* Header */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}

body.-scroll-lock .header {
  right: var(--scrollbar-width);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  display: block;
  height: 33px;
  width: auto;
}

.header__logo img,
.header__logo svg {
  display: block;
  height: 100%;
  width: auto;
}

.header__right {
  position: relative;
  z-index: 21;
  display: flex;
  align-items: center;

  width: 100%;
  max-width: 706px;
  height: 54px;
  padding-right: 23px;
  padding-left: 20px;

  background-color: var(--gray);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 0 0 20px 20px;
  border-radius: 0 0 20px 20px;
}

.header__search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;

  width: 100%;
  max-width: 394px;
  margin-right: 20px;
  white-space: nowrap;
}

.header-search__form,
.header-search__form form {
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.header-search__form .search-icon {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin-top: -2px;
  margin-right: 7px;

  font-size: 0;
  border: none;

  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.8045 14.862L11.2545 10.312C12.1359 9.22334 12.6665 7.84 12.6665 6.33334C12.6665 2.84134 9.8252 0 6.33324 0C2.84128 0 0 2.84131 0 6.33331C0 9.82531 2.84131 12.6667 6.33327 12.6667C7.83991 12.6667 9.22324 12.136 10.3119 11.2547L14.8618 15.8047C14.9918 15.9347 15.1625 16 15.3332 16C15.5039 16 15.6745 15.9347 15.8045 15.8047C16.0652 15.544 16.0652 15.1227 15.8045 14.862ZM6.33327 11.3333C3.57596 11.3333 1.33333 9.09066 1.33333 6.33331C1.33333 3.57597 3.57596 1.33331 6.33327 1.33331C9.09059 1.33331 11.3332 3.57597 11.3332 6.33331C11.3332 9.09066 9.09056 11.3333 6.33327 11.3333Z' fill='%2335354E'/%3E%3C/svg%3E%0A")
    no-repeat center transparent;
  -webkit-background-size: contain;
  background-size: contain;

  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.header-search__form .search-input {
  width: 100%;
  max-width: 345px;

  border: none;
  background-color: transparent;

  font-family: "Basis Grotesque Pro", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: var(--blue);
}

.header-search__form .search-input::placeholder {
  color: #8e8e8e;
  opacity: 1;
}

.header-search__result {
  position: absolute;
  left: -20px;
  right: -16px;
  top: calc(100% + 10px);
  z-index: -1;

  height: 183px;
  max-height: 278px;
  padding: 7px 43px;

  background-colot: var(--white);
  -webkit-border-radius: 20px;
  border-radius: 20px;

  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
}

.header-search__result.-show {
  opacity: 1;
  pointer-events: auto;
}

.header-search__result .header-search__link {
  width: 100%;
  padding: 14px 0;
  color: var(--blue);

  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.header-search__result .header-search__link:first-child {
  margin-top: 0;
}

.header-search__result .header-search__link em {
  font-weight: 700;
}

.header__locale-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 40px;
  margin-left: auto;
}

.header__locale-wrapper a {
  color: #8e8e8e;

  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}

.header__locale-wrapper a + a {
  margin-left: 20px;
}

.header__locale-wrapper a.-active {
  color: var(--blue);
  pointer-events: none;
}

.header__menu-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.header-menu__button .icon {
  background-color: var(--blue);

  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
}

.header-menu__button .icon:after {
  content: "";
  display: block;
  width: 13px;
  min-width: 13px;
  height: 13px;

  background-color: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='1.5' cy='6.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='1.5' cy='11.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='6.5' cy='1.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='6.5' cy='6.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='6.5' cy='11.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='11.5' cy='1.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='11.5' cy='6.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='11.5' cy='11.5' r='1.5' fill='%2335354E'/%3E%3C/svg%3E%0A")
    no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='1.5' cy='6.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='1.5' cy='11.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='6.5' cy='1.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='6.5' cy='6.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='6.5' cy='11.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='11.5' cy='1.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='11.5' cy='6.5' r='1.5' fill='%2335354E'/%3E%3Ccircle cx='11.5' cy='11.5' r='1.5' fill='%2335354E'/%3E%3C/svg%3E%0A")
    no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;

  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
}

.header-menu__button p {
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}

.header-menu__button .icon + p {
  margin-left: 7px;
}

.header__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -23px;

  width: 266px;
  height: 100px;
  padding: 32px 30px 32px 32px;

  background-color: #ffffff;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.12);
  -webkit-border-radius: 20px;
  border-radius: 20px;

  pointer-events: none;
  opacity: 0;
  overflow: hidden;

  -webkit-transition: height 0.4s, opacity 0.4s;
  transition: height 0.4s, opacity 0.4s;
}

.header__menu.-show {
  opacity: 1;
  pointer-events: auto;
}

.header-menu__link {
  -webkit-transform: translateX(calc(100% + 30px));
  transform: translateX(calc(100% + 30px));

  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
}

.header-menu__link + .header-menu__link {
  margin-top: 20px;
}

.header-menu__link a {
  white-space: nowrap;
}

.header__menu.-animate .header-menu__link {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.header__menu:not(.-animate) .header-menu__link {
  -webkit-transition: transform 0s !important;
  transition: transform 0s !important;
  -webkit-transition-delay: 0s !important;
  transition-delay: 0s !important;
}

.header-menu__socials {
  margin-top: 48px;
}

.header-dark-bg {
  display: none;
}

.header__search-wrapper.-loading .search-icon {
  /* background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto; background: none; display: block; shape-rendering: auto;' width='247px' height='247px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cg transform='translate(80,50)'%3E%3Cg transform='rotate(0)'%3E%3Ccircle cx='0' cy='0' r='6' fill='%2335354e' fill-opacity='1'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.875s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='1s' repeatCount='indefinite' values='1;0' begin='-0.875s'%3E%3C/animate%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(71.21320343559643,71.21320343559643)'%3E%3Cg transform='rotate(45)'%3E%3Ccircle cx='0' cy='0' r='6' fill='%2335354e' fill-opacity='0.875'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.75s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='1s' repeatCount='indefinite' values='1;0' begin='-0.75s'%3E%3C/animate%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(50,80)'%3E%3Cg transform='rotate(90)'%3E%3Ccircle cx='0' cy='0' r='6' fill='%2335354e' fill-opacity='0.75'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.625s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='1s' repeatCount='indefinite' values='1;0' begin='-0.625s'%3E%3C/animate%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(28.786796564403577,71.21320343559643)'%3E%3Cg transform='rotate(135)'%3E%3Ccircle cx='0' cy='0' r='6' fill='%2335354e' fill-opacity='0.625'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.5s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='1s' repeatCount='indefinite' values='1;0' begin='-0.5s'%3E%3C/animate%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(20,50.00000000000001)'%3E%3Cg transform='rotate(180)'%3E%3Ccircle cx='0' cy='0' r='6' fill='%2335354e' fill-opacity='0.5'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.375s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='1s' repeatCount='indefinite' values='1;0' begin='-0.375s'%3E%3C/animate%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(28.78679656440357,28.786796564403577)'%3E%3Cg transform='rotate(225)'%3E%3Ccircle cx='0' cy='0' r='6' fill='%2335354e' fill-opacity='0.375'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.25s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='1s' repeatCount='indefinite' values='1;0' begin='-0.25s'%3E%3C/animate%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(49.99999999999999,20)'%3E%3Cg transform='rotate(270)'%3E%3Ccircle cx='0' cy='0' r='6' fill='%2335354e' fill-opacity='0.25'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.125s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='1s' repeatCount='indefinite' values='1;0' begin='-0.125s'%3E%3C/animate%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(71.21320343559643,28.78679656440357)'%3E%3Cg transform='rotate(315)'%3E%3Ccircle cx='0' cy='0' r='6' fill='%2335354e' fill-opacity='0.125'%3E%3CanimateTransform attributeName='transform' type='scale' begin='0s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='1s' repeatCount='indefinite' values='1;0' begin='0s'%3E%3C/animate%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C!-- %5Bldio%5D generated by https://loading.io/ --%3E%3C/svg%3E"); */
}

.header__search-wrapper .header-search__result .os-content {
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.header__search-wrapper.-loading .header-search__result .os-content {
  opacity: 0.4;
  pointer-events: none;
}

@media screen and (max-width: 1024px) {
  .main-background {
    display: none;
  }

  .header {
    background-color: transparent;
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
  }

  .header .container {
    padding: 0;
  }

  .header__logo {
    display: none;
  }

  .header-container {
    display: block;
  }

  .header__right {
    justify-content: space-between;
    width: 100%;
    max-width: none;
    height: 38px;
    padding: 0;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    box-shadow: none;
  }

  .header__locale-wrapper {
    /* display: none; */
    margin-top: 30px
  }

  .header__menu-wrapper {
    position: absolute;
    right: 20px;
    z-index: 3;

    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
  }

  .header-menu__button.-active .icon {
    background-color: var(--white);
  }

  .header-menu__button.-active .icon:after {
    background-color: var(--blue);
  }

  .header-menu__button.-active p {
    color: var(--white);
  }

  .header__menu {
    top: calc(100% + 3px);
    right: 0;
    padding: 26px 33px 27px 29px;
  }

  .header-menu__link + .header-menu__link {
    margin-top: 19px;
  }

  .header-menu__link {
    -webkit-transform: translateX(calc(100% + 33px));
    transform: translateX(calc(100% + 33px));
  }

  .header-menu__socials {
    margin-top: 40px;
  }

  .header-dark-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    display: block;
    height: var(--window-inner-height);
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;

    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
    pointer-events: none;
  }

  .header__menu-wrapper + .header-dark-bg {
    z-index: 2;
  }

  .header .-focus + .header-dark-bg,
  .header .-showed + .header-dark-bg {
    opacity: 1;
    pointer-events: auto;
  }

  /* Search */

  .header__search-wrapper {
    padding: 0 20px;
    z-index: 2;
    margin-right: 0;
    width: 100%;
    max-width: none;

    -webkit-transition: background-color 0.4s;
    transition: background-color 0.4s;
  }

  .header-search__form {
    height: 100%;
  }

  .header-search__form form {
    height: 100%;
  }

  .header-search__form .search-input {
    max-width: none;
  }

  .header-search__result {
    left: 20px;
    right: 20px;
    padding: 11px 23px;

    height: 171px;
    max-height: 213px;

    -webkit-transition: opacity 0.4s, height 0.4s, transform 0.4s;
    transition: opacity 0.4s, height 0.4s, transform 0.4s;
  }

  .header-search__result .header-search__link {
    padding: 12px 0;
  }

  .header__search-wrapper.-focus {
    background-color: var(--white);
  }

  .header__search-wrapper.-focus ~ .header__menu-wrapper {
    opacity: 0;
    pointer-events: none;
  }

  .header__search-wrapper.-focus ~ .header-dark-bg {
    z-index: auto;
  }

  /* Header on inside page */

  /* body.-inside-page .header {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
  }

  body.-inside-page .header__right {
    position: static;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    height: auto;
  }

  body.-inside-page .header .header__logo {
    display: block;
    height: 22px;
  }

  body.-inside-page .header-container {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 47px;
  }

  body.-inside-page .header .header__search-wrapper + .header-dark-bg,
  body.-inside-page .header .header__search-wrapper {
    display: none;
  } */
}

@media screen and (max-width: 759px) {
  .header {
    padding: 0;
  }

  .header__left {
    display: none;
  }

  .header__right {
    justify-content: space-between;
    max-width: none;
    border-radius: 0;
  }

  .menu-nav {
    top: calc(100% + 15px);
  }

  .header__right .locale-wrapper {
    display: none;
  }

  .header.-header-page .search-wrapper {
    display: none;
  }

  .header__menu-wrapper {
    right: 10px;
  }

  /* Search */

  .header__search-wrapper {
    padding: 0 10px;
  }

  .header-search__result {
    left: 10px;
    right: 10px;
  }

  /* Header on inside page */

  /* body.-inside-page .header-container {
    padding: 0 10px;
  } */
}
