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

header
  position: relative
  z-index: 4
  //background-color: $blue

  &:after
    $gradientSize: 20px
    content: ''
    position: absolute
    left: 0
    bottom: -#{$gradientSize}px
    right: 0
    display: block
    width: 100%
    height: $gradientSize
    background: linear-gradient($blackGradient)
    opacity: 0.4 

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

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

    // Main logo
    .logo
      display: inline-block
      width: 90px
      margin-left: column(2, 14)

      +respond-to-width(1250)
        margin-left: column(1, 14)

      +respond-to-width(900)
        margin-left: 0

      img
        width: 100%
        max-height: 72px

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

    nav
      position: relative

      ul
        +flex(flex-end, center)
        list-style: none
        margin: 0
        padding: 0

        li
          margin-right: 45px

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

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

          +respond-to-width(1100)
            margin-right: 30px

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

          &:hover
            a
              color: $grey

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

              &:after
                content: ''
                position: absolute
                left: 0
                bottom: 40px
                width: 100%
                height: 2px
                background: $lightGrey

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