#menu-button
  display: none
  box-shadow: none
  justify-content: space-around
  align-items: center
  flex-direction: column
  font-size: 35px
  padding: 0.4em 0.35em
  border-radius: 0px $standard-border-radius $standard-border-radius 0px
  background: $ct-blue
  width: 7rem
  height: 6rem
  position: fixed
  left: 0
  top: 20px
  z-index: 10000

  @media (max-width: $tablet)
    display: flex
    cursor: pointer

  span
    width: 36px
    height: 0.15em
    display: inline-block
    background: #FFF
    border-radius: .075em
    transition: all 375ms $timing-function
  &:hover,
  &:focus
    transform: none
    box-shadow: none


nav
  position: fixed
  top: 0
  width: 100%
  z-index: 9000

  @media (max-width: $tablet)
    padding-top: 2rem
    width: auto
    height: auto
    overflow: hidden
  width: 100%
  height: 5rem
  font-size: 16px
  background: rgba(9,20,154,0.55)
  transition-delay: 0.3s
  transition-property: width
  transition-timing-function: ease

  &:hover
    background: rgba(9,20,154,0.74)

  @media (max-width: $tablet)
    width: 0%
    height: 100%
    top: 10rem
    position: fixed
    background: none
  
    &:hover
      background: none

  button
    font-size: 16px
    background: rgba(0,0,0,0)
    box-shadow: none
    color: $white
    vertical-align: none
    cursor: pointer
    *
      pointer-events: none
    span
      border: 1px solid transparent
      padding: 0 2px
    &:hover,
        text-shadow: 0px 0px 5px #BBB
        transform: scale(1)
    &:focus,
      outline: none
      text-shadow: 0px 0px 5px #BBB
      transform: scale(1)
      span
        border: 1px solid $white
        border-radius: 2px


    @media (max-width: $tablet)
      background: $ct-blue
      border: 2px solid $ct-blue
      padding: 0.7em 1em
      &:focus
        border-color: #00008b
        span
          border-color: transparent

  .links
    @extend .wrapper
    list-style-type: none
    height: 100%
    display: flex
    justify-content: center
    align-items: center

    @media (max-width: $tablet)
      flex-direction: column
      align-items: flex-start
      height: auto
      padding-left: 2rem

    button
      @media (max-width: $tablet)
        margin: 0.5em 0

    a
      display: block
      list-style-type: none
      margin: 0em 1em
      padding: 0 2px
      color: #FFF
      border: 1px solid transparent
      border-radius: 2px
      @include text-style('title')
      text-decoration: none
      &:hover,
        text-shadow: 0px 0px 5px #BBB
      &:focus,
        outline: none
        border-color: $white
        text-shadow: 0px 0px 5px #BBB

      @media (max-width: $tablet)
        visibility: hidden
        margin: 0.5em 0
        text-shadow: none
        background: $ct-blue
        border: 2px solid $ct-blue
        padding: 0.7em 1em
        border-radius: $standard-border-radius
        opacity: 0
        transform: translateX(-3rem)
        &:focus
          border-color: #00008b
        @for $i from 1 through 7
          &:nth-child(#{abs($i - 8)})
            transition:
              property: all
              duration: 150ms
              delay: ($i - 1) * 75ms
              timing-function: $timing-function

.submenu
  visibility: hidden
  position: fixed
  top: 5rem
  height: auto
  width: auto
  background: $ct-purple
  border-bottom-left-radius: $standard-border-radius
  border-bottom-right-radius: $standard-border-radius
  box-shadow: 0px 6px 0px 0px rgba(0, 0, 0, 0.06)

  @media (max-width: $tablet)
    position: inherit
    background: none
    box-shadow: none
    height: 0
    overflow: hidden

  .links
    flex-direction: column
    align-items: flex-start
    padding: 0.5em 0

    @media (max-width: $tablet)
      margin: 0
      margin-left: 1em
      padding: 0em 0
      &:focus
        border-color: #00008b
    li
      margin: 0.5em 0
      a
        @media (max-width: $tablet)
          margin: 0
          background: $ct-purple
          border: 2px solid $ct-purple
          &:focus
            border-color: #00008b
.submenu.active
  visibility: visible

  @media (max-width: $tablet)
    height: auto
    overflow: auto

// Mobile Navigation Drawer
.mobilenav-backdrop
  transition: filter 375ms $timing-function

#menu-button
  ~ .mobilenav-backdrop.active
    @media (max-width: $tablet)
      filter: blur(10px)
      pointer-events: none

  ~ .mobilenav-toggle.active span:nth-child(2)
    transform: translateX(20%)

  ~ .navigation.active
    width: 100%

    @media (max-width: $tablet)
      padding-top: 10rem
      padding-bottom: 1em
      background: rgba(#FFF, 0.5)
      overflow: auto
      top: 0
      left: 0
      right: 0

    .links li
      @media (max-width: $tablet)
        a
          visibility: visible
          opacity: 1
          transform: translateX(0rem)

      @for $i from 1 through 7
        &:nth-child(#{$i})
          a
            transition-delay: ($i - 1) * 75ms
