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

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

  .large-row
    padding: 35px 0
    +flex(space-between, center)

    // Main logo
    .logo
      img
        width: 165px
        max-height: 70px

        +respond-to-width(1380)
          width: 160px
          max-height: 55px


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

    nav
      position: relative

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

        li
          margin-right: 45px

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

          a
            display: inline-block
            font-size: 0.75rem
            line-height: 1.2
            color: white
            font-family: roboto()
            text-decoration: none
            transition: opacity 0.3s

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

          &:hover
            a
              opacity: 0.6

          &.active
            a
              font-weight: bold()
              color: $royalForkGreen
              opacity: 1

  .shadow
    position: absolute
    left: 0
    bottom: -40px
    width: 100%
    height: 40px
    opacity: 0.4
    background:
      image: url("/img/vertical-gradient.png")
      size: contain

  /* Mobile Navigation
     ========================================================================== */
  +respond-to-width(840)
    display: none