.navigation-holder
  position: relative
  margin-top: 20px
  @extend %clearfix

  +respond-to(mobile)
    display: none

nav.main
  display: inline-block
  font-size: .818182em

  a
    display: block
    position: relative
    color: #878787

    +transition(color 150ms ease-out)

    .line
      +position(absolute, null null -4px 50%)
      display: block
      width: 0
      height: 1px
      background: #878787

      +transition(width 150ms ease-out, left 150ms ease-out)

    +respond-to-negative
      color: #fff

  li
    float: left
    list-style: none

    &.active
      a
        color: #000
        font-weight: 700

        +respond-to-negative
          color: #fff

    &:not(.active):hover
      .line
        left: 0
        width: 100%

  &.left
    float: left

    li
      margin-right: 25px

  &.right
    float: right

    li
      margin-left: 25px