//Colors used in Mobile Menu
$fontColor: $lightBlue
$mainColor: $darkBlue
$activeColor: white
$barColor: $blue
$hoverColor: $gray
$borderColor: rgba(255,255,255, .1)

.preventScroll
  overflow: hidden
  overflow-y: scroll
  position: fixed
  width: 100%


.mobile-navigation
  position: fixed
  z-index: 97
  height: 100vh
  display: none
  overflow: hidden
  width: 100%
  left: 0
  top: 0
  pointer-events: none

  .shader
    width: 100%
    height: 100%
    position: absolute
    left: 0
    top: 0
    background-color: $mainColor
    opacity: 0
    transition-delay: 0.4s

  .menu
    height: calc(100% - 60px)
    width: 80%
    left: 0
    top: 68px
    background-color: $mainColor
    min-width: 275px
    position: absolute
    overflow-x: auto
    pointer-events: all
    z-index: 5
    +translate3d(-100%, 0, 0)

    +respond-to-width(500)
      width: 90%

    .logo
      width: 65%
      max-width: 250px
      margin: 40px auto 0
      a
        width: 100%
        img
          width: 100%



  nav
    margin-top: 50px
    padding: 0 10px 80px 60px

    h3
      font-size: 1.3rem
      color: white

    ul
      padding: 0
      list-style: none
      font-size: 1.8rem
      &.locations
        margin-bottom: 45px
      &.locations, &.business
        margin-top: 5px


      li
        margin-bottom: 10px
        a, span
          color: rgba($lightBlue, 0.4)
          position: relative
          display: inline-block
          text-decoration: none
          transition: color 0.2s
          cursor: pointer
          +phenomena

        a:hover
          color: rgba($lightBlue, 0.75)

        &.active
          a, span
            color: $activeColor

  &.active
    .menu
      +translate3d(0, 0, 0)

  &.shader-active
    .shader
      opacity: 0.4
      pointer-events: all

  &.allow-animation
    .shader
      transition: all 0.2s
    .menu
      transition: all 0.3s
      transition-timing-function: ease-in-out

  +respond-to-width(950)
    display: block
    header
      height: 60px
      visibility: hidden
      overflow: hidden
    .sticky-header, .sticky-header.show
      display: none
    .mobile-navigation
      display: block

  +respond-to-width(400)
    nav
      padding-left: 30px

      ul
        font-size: 1.6rem