/*==========================================================================
  Navigation / Header
  ========================================================================== */

header
  position: relative
  z-index: 4
  background-color: $yellow

  .grid-row
    padding: 0
    +flex(center, center)

    >.grid-col
      +flex(space-between, center)
      width: 100%

    // Main logo
    .logo
      position: absolute
      top: 0
      left: -15px
      background-color: $darkgrey
      display: inline-block
      width: 280px
      padding: 15px 30px 30px
      box-shadow: 0 0 20px rgba(0,0,0,0.4)

      +respond-to-width(1100)
        width: 230px

      +respond-to-width(910)
        width: 210px


      img
        width: 100%

    /* Navigation
     ========================================================================== */

    nav
      +flex(flex-end, center)
      position: relative
      flex: 1 1 auto
      margin-left: 280px

      +respond-to-width(1100)
        margin-left: 230px

      +respond-to-width(910)
        margin-left: 210px

      ul
        +flex(flex-end, center)
        list-style: none
        margin: 0
        padding: 0
        width: calc(100% - 3vw)

        li
          margin-right: 3.8%
          white-space: nowrap

          +respond-to-width(1250)
            margin-right: 2.5vw

          +respond-to-width(1050)
            margin-right: 2.0vw

          a
            display: inline-block
            padding: 42px 0
            font-size: 0.8rem
            line-height: 1.2
            color: $dark
            text-decoration: none
            transition: opacity 0.3s

            +respond-to-width(1075)
              font-size: 0.75rem

            +respond-to-width(1000)
              font-size: 0.7rem

            +respond-to-width(830)
              font-size: 0.6rem

          &:last-of-type
            margin-right: 0

          &:hover
            a
              opacity: 0.6

          &.active
            a
              position: relative
              font-weight: bold()
              opacity: 1

              &::after
                position: absolute
                left: 0
                bottom: 38px
                content: ""
                display: block
                width: 100%
                height: 1px
                background-color: $darkgrey

          &.special-1
            margin-right: 1.5%
            a
              padding: 10px
              background-color: $darkgrey
              color: $yellow

            &.active a::after
              bottom: -8px

          &.special-2
            a
              padding: 10px
              background-color: white
              color: black

            &.active a::after
              bottom: -8px

      .language-menu
        width: 100px

  +respond-to-width(750)
    display: none