header
  height: 60px
  background: $blackBackground
  +position(fixed, 0 0 null 0)
  z-index: 999

  .content-container
    width: calc(100% - 80px)
    padding: 0 40px
    position: relative

  .logo
    height: 100%
    a
      +flex(flex-start, center)
      height: 100%

    span
      +sprite(-250px 0, 48px, 16px)
      display: inline-block
      margin-right: 8px

    h1
      +font-default(16px, 20px)
      font-weight: 500
      color: white

  ul
    background: #000
    +flex(space-around, center)
    height: 100%
    min-width: 720px

    li
      height: 100%
      a
        height: 100%
        display: block
        position: relative
        +flex(center, center)
        font-size: 14px
        line-height: 16px

        &:hover
          color: darken(white, 25%)

        &.active
          color: white

          &:after
            content: ""
            height: 4px
            width: 100%
            +position(absolute, null 0 0 0)
            background: $highLightRed

  .site-change
    width: 150px
    position: absolute
    right: 40px
    margin-left: auto
    +flex(flex-end, center)
    height: 100%

    a
      +font-semi-bold(14px, 16.8px)
      border: 2px solid $defaultRed
      color: $greyBackground
      padding: 7px 10px
      border-radius: 9px
      transition: all 0.3s

      &:hover
        background-color: $defaultRed

.isolation
  header
    .logo span
      +sprite(-250px -20px, 48px, 16px)

    ul li a.active:after
      background: $selectedGreen

  .site-change
    a
      border: 2px solid $selectedGreen

      &:hover
        background-color: darken($selectedGreen, 10%)

+media-query(($maxWidth + 40px))
  header
    .content-container
      +flex(space-between, initial)

      .grid3
        width: initial


+media-query(1350px)
  header
    .content-container
      ul
        margin-right: 160px

+media-query(1180px)
  header:not(.offer)
    .logo
      h1
        display: none