/*==========================================================================
  Sub Menu bar
  ========================================================================== */

.sub-menu
  position: fixed
  left: calc( (100% - 2200px) / 2 )
  top: 0
  width: 80px
  height: 100%
  +flex(center, center)

  +respond-to-width(2216)
    left: 0

  ul
    padding: 0
    list-style: none

    li
      width: 100%
      text-align: center
      margin-bottom: 5px

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

      a
        display: block
        opacity: 1
        transition: color 0.3s
        text-decoration: none
        color: $lightGray
        line-height: 1
        background-color: transparent !important
        &:after
          content: '•'

        &:hover
          color: $darkGray

      &.overview
        a
          opacity: 0.6
          transition: opacity 0.3s

          &:after
            content: ''
            +sprite(-33px -1px, 22px, 21px)
            display: inline-block


          &:hover
            opacity: 1

      &.active
        a
          color: $red

        &.overview
          a
            opacity: 1
            &:after
              +sprite(-55px -1px, 22px, 21px)

  +respond-to-width(1370)
    width: 60px

  +respond-to-width-or-height(500, 600)
    display: none