/*==========================================================================
  Travel sub menu
  ========================================================================== */

.travel-menu
  z-index: 4
  vertical-align: bottom

  ul
    padding: 0
    margin: 0
    line-height: 0
    list-style: none

    li
      a
        position: relative
        display: inline-block
        text-decoration: none
        color: white

        .placeholder
          position: relative
          z-index: 1
          +flex(flex-start, center)

        span
          +flex(center, center)
          width: 70px
          height: 70px

          &:before
            content: ''
            display: inline-block

        p
          font-size: 0.9rem
          line-height: 1.2
          margin: 0
          padding-right: 30px
          opacity: 0
          transition: opacity 0.3s

        &:before
          content: ''
          position: absolute
          left: 0
          top: 0
          height: 100%
          width: 70px
          display: block
          transition: width 0.5s

        &:hover
          p
            opacity: 1
            transition-delay: 0.4s
          &:before
            width: 100%


      // Icon and color styling for each list item
      &.global
        a
          &:before
            background-color: $bluePurple1
            background: linear-gradient(45deg, $bluePurpleGradient12)

        span
          .border-span
            +flex(center, center)
            width: 22px
            height: 22px
            border: 1px solid white
            border-radius: 5px

            &:before
              content: ''
              display: inline-block
              +sprite(-33px -75px, 12px, 12px)

      &.travels_hike
        a
          &:before
            background-color: $bluePurple2
            background: linear-gradient(45deg, $menuGradient)

          span
            &:before
              +sprite(-33px -47px, 17px, 25px)

      &.travels_flight
        a
          &:before
            background-color: $green
            background: linear-gradient(45deg, $green, $lightGreen)
          span
            &:before
              +sprite(-33px -24px, 21px, 22px)

      &.travels_reflection
        a
          &:before
            background-color: $orange
            background: linear-gradient(45deg, $orange, $darkOrange)
          span
            &:before
              +sprite(-33px 0, 16px, 22px)

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

    ul
      +flex(flex-start, flex-start)
      +flex-rows

      li
        width: 50%

        a
          display: block

          &:before
            width: 100%

          p
            opacity: 1

  +respond-to-width(500)
    ul
      li
        width: 100%