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

header
  position: relative
  z-index: 4

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

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

    a
      display: inline-block
      font-size: 0.65rem
      line-height: 1.2
      color: white
      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.4

      &.facebook, &.twitter
        margin-right: 10px
        .icon
          +flex(center, center)
          width: 30px
          height: 30px
          margin-right: 0
          opacity: 1
          transition: opacity 0.2s

          &:before
            content: ''

          &:hover
            opacity: 0.5


        &.facebook
          .icon
            &:before
              +facebook

        &.twitter
          .icon
            &:before
              +twitter

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

    // Main logo
    .logo
      img
        width: 150px


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

    nav
      position: relative
      width: calc(100% - 160px)

      ul
        +flex(flex-end, center)
        +flex-rows

        li
          margin-left: 45px
          a
            display: inline-block
            font-size: 0.65rem
            line-height: 1.8
            color: $darkGray
            text-transform: uppercase
            font-weight: semi-bold()
            text-decoration: none
            transition: color 0.3s

          &:first-of-type
            margin-left: 0

          &:hover
            a
              color: $darkGray

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