//.header {
//  position: relative;
//  padding: 5px 0 20px;
//  font-size: (16px / 20px) + rem;
//  z-index: 100;
//  @include media-breakpoint-down(md) {
//    padding-top: 10px;
//    padding-bottom: 10px;
//    font-size: 1rem;
//  }
//
//  &--sticky {
//    position: sticky;
//    top: 0;
//    opacity: 0.95;
//    background-color: color(lightest-gray);
//    transform: translateY(-100%);
//
//  }
//  $parent: &;
//
//  &--inversed#{$parent}--sticky{
//    background-color: #09171C;
//  }
//
//  &--sticky-pin {
//    transition: transform 0.5s ease;
//  }
//
//  &--transition {
//    transform: translateY(0);
//
//  }
//
//  &--over {
//    position: absolute;
//    left: 0;
//    right: 0;
//    top: 0;
//
//    &.header--sticky {
//      position: fixed;
//      left: 0;
//      right: 0;
//    }
//
//    @include media-breakpoint-down(md) {
//      position: relative;
//      &.header--sticky {
//        position: sticky;
//      }
//    }
//  }
//
//  &__row {
//    position: relative;
//    z-index: 100;
//    display: flex;
//    justify-content: space-between;
//    align-items: flex-end;
//
//    @include media-breakpoint-down(md) {
//      align-items: center;
//    }
//  }
//
//  &__logo {
//    flex: 0 0 277px;
//    height: 57px;
//    color: color(primary);
//
//    @include media-breakpoint-down(lg) {
//      flex-basis: 200px;
//    }
//    @include media-breakpoint-down(md) {
//      padding: 0 10px;
//      height: auto;
//    }
//
//    a {
//      display: flex;
//      flex-direction: column;
//      justify-content: flex-end;
//      width: 100%;
//      height: 100%;
//    }
//
//    //.menu-opened & svg {
//    //  fill: color(white);
//    //}
//  }
//
//  &__menu {
//
//  }
//
//  &__contacts {
//    flex: 0 0 165px;
//    transform: translate(0,5px);
//    @include media-breakpoint-down(md) {
//      flex: 0 0 35px;
//    }
//    position: relative;
//  }
//
//  &__contacts-button {
//    display: none;
//    background: none;
//    border: none;
//    color: color(primary);
//    @include media-breakpoint-down(lg) {
//      display: block;
//    }
//    @include media-breakpoint-down(sm) {
//      padding: 5px 10px 0 3px;
//      margin-right: -10px;
//      box-sizing: content-box;
//      width: 19px;
//    }
//  }
//
//  &--inversed &__contacts-button{
//    color: color(white);
//  }
//
//  &__contacts-button svg {
//    max-width: 100%;
//  }
//
//  &__contacts-button:focus + &__contacts-container,
//  &__contacts:hover &__contacts-container,
//  &__contacts:focus-within &__contacts-container {
//    @include media-breakpoint-down(md) {
//      opacity: 1;
//      visibility: visible;
//      outline: none;
//      clip: unset;
//      width: auto;
//      height: auto;
//      margin: 0;
//      padding: 0 10px 10px;
//      margin-right: -10px;
//    }
//  }
//
//  &__contacts-container {
//    @include media-breakpoint-down(lg) {
//      opacity: 0;
//      min-width: 235px;
//      text-align: right;
//      right: 0;
//      position: absolute;
//      clip: rect(0 0 0 0);
//      width: 1px;
//      height: 1px;
//      margin: -1px;
//      background-color: color(lightest-gray);
//    }
//  }
//
//  //&__button {
//  //}
//}

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  font-size: 16px;
  padding: 5px 0 20px;


  &__wrapper {
    max-width: 1280px;

    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    @include media-breakpoint-up(xl) {
      align-items: flex-end;
      flex-wrap: nowrap;
    }
  }

  &__logo {
    flex: 0 0 277px;
    max-width: 50%;
    color: #0096aa;
    padding: 0 15px;
    @include media-breakpoint-up(lg) {
      height: 57px;
    }

    @each $breakpoint in map_keys($wrapper-gutters) {
      @include media-breakpoint-only($breakpoint) {
        $padding: map-get($wrapper-gutters, $breakpoint);

        @if $padding > 0 and $breakpoint!= xs {
          padding-left: $padding;
        }
      }
    }
  }

  &__logo svg {
    height: 100%;
  }

  &__menu {
    order: 1;
    width: 100%;
    margin-top: 5px;

    @include media-breakpoint-up(xl) {
      order: 0;
    }
  }

  &__contacts {
    flex: 0 0 auto;
    flex-grow: 1;
    transform: translate(0, 5px);
    display: flex;
    justify-content: flex-end;
    padding: 0 15px;
    @each $breakpoint in map_keys($wrapper-gutters) {
      @include media-breakpoint-only($breakpoint) {
        $padding: map-get($wrapper-gutters, $breakpoint);

        @if $padding > 0 and $breakpoint!= xs {
          padding-right: $padding;
        }
      }
    }
  }

  &__btn {
    padding: calc((30px - 16px * 1.25) / 2) 10px;
    font-size: 16px;
    border-radius: 10px;
  }
}