nav.main
  position: relative
  z-index: 10
  width: 100%
  +row-height(2)

  background: #fff

  +respond-to-width(1024)
    +row-height(1.5)

  +respond-to(mobileNavigation)
    display: none

  ul
    height: 100%
    border-bottom: 1px solid $borderLight

    @extend %clearfix

  li
    position: relative
    overflow: hidden
    float: left
    +column(2)
    border-right: 1px solid $borderLight

    +row-line-height(2)
    +row-height(2)

    text-align: center
    +transition(line-height 100ms ease-out,background 100ms ease-out)

    +respond-to-width(1024)
      +row-line-height(1.5)
      +row-height(1.5)

    &:last-child
      border-right: none

    a
      display: block

      color: $purpleDark

      +RalewayExtraBold
      font-size: .777777778em
      text-transform: uppercase
      letter-spacing: .15em

      +respond-to-width(1280)
        font-size: .722222222em 
        letter-spacing: .1em

      +respond-to-width(1024)
        font-size: .666666667em
        letter-spacing: .05em

    &.active, &:hover
      background : #f7f7f7

      +row-line-height(1.9)

      +respond-to-width(1024)
        +row-line-height(1.3)

      .wave
        top: 65%

    &.active
      background : $purpleDark
      a
        color: #fff
  .wave
    display: block
    position: absolute
    top: 110%
    left: 50%
    margin-left: -11px
    +transition(top, 100ms ease-out)