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

header
  position: relative
  z-index: 4

  .small-row
    background: linear-gradient(90deg, $redGradient)
    padding: 12px 0

    .grid-row
      +flex(flex-end, center)

    a
      display: inline-block
      font-size: 0.65rem
      line-height: 1.2
      color: $offsetWhite
      text-transform: uppercase
      font-weight: semi-bold()
      text-decoration: none
      margin-right: 30px

      &.no-margin-right
        margin-right: 0

      span
        color: white
        display: inline-block
        margin-right: 10px
        opacity: 0.7

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

    // Main logo
    .logo
      img
        width: 180px


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

    nav
      position: relative

      ul
        +flex(flex-end, center)
        padding: 0 0 0 10px

        li
          margin-right: 35px

          +respond-to-width(900)
            margin-right: 25px

          a
            display: inline-block
            font-size: 0.65rem
            line-height: 1.2
            color: $semiBlack
            text-transform: uppercase
            font-weight: semi-bold()
            text-decoration: none
            transition: opacity 0.3s

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

          &:hover
            a
              opacity: 0.6

          &.active
            a
              font-weight: bold()
              color: $redTheme2
              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