/*==========================================================================
  Navigation
  ========================================================================== */

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

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


.navigation
  position: fixed
  z-index: 1000
  height: 100vh
  //overflow: hidden
  width: 100%
  left: 0
  top: -100%
  pointer-events: none
  //background-color: rgba($darkerBlue, 0.95)
  background-color: rgba($lightGray, 0.95)
  opacity: 0
  transition: none
  overflow: hidden


  nav
    position: relative
    z-index: 2
    +flex(center, center)
    height: 100%

    h3
      font-size: 1.3rem
      color: white

    ul
      margin: 0
      padding: 0
      list-style: none
      font-size: 2rem
      font-family: din()
      &.locations
        margin-bottom: 45px
      &.locations, &.business
        margin-top: 5px


      li
        margin-bottom: 4px
        text-align: center
        a
          color: $gray
          position: relative
          display: inline-block
          text-decoration: none
          transition: color 0.2s
          cursor: pointer
          text-transform: uppercase

          &:hover
            color: $darkGray

        >ul
          padding-left: 20px
          font-size: 0.85em
          overflow: hidden
          opacity: 1
          transition: height 0.5s, opacity 0.2s
          &.hide
            height: 0 !important
            opacity: 0
          &.noTrans
            transition: height 0s
            opacity: 0

          li
            a
              color: $fontBlack

              &:before
                content: '› '
            &.active
              a
                color: $activeColor !important

        &.active
          a
            color: $activeColor !important
          >ul
            li
              a
                color: $activeColor !important

  .clouds
    position: absolute
    background-image: url("/img/rocket/clouds.png")
    background-repeat: no-repeat
    background-position: top center
    background-size: contain

    width: 40vw
    height: 33vh
    max-width: 865px
    min-width: 250px
    max-height: 408px



    &.cloud-1
      left: -2vw
      top: 3vh
      +cloudsAnimation

    &.cloud-2
      left: 60vw
      top: 20vh
      +cloudsAnimation2

    &.cloud-3
      left: 20vw
      top: 65vh
      +cloudsAnimation3


  &.active
    opacity: 1
    pointer-events: all

    .clouds
      animation-play-state: running

  &.top-fade-out
    top: 0

  &.allow-animation
    transition: opacity 0.3s
    transition-timing-function: ease-in-out

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

  +respond-to-width(400)
    nav
      ul
        font-size: 1.2rem


/* Menu icon
  ========================================================================== */
.toggle-menu
  position: absolute
  top: 80px
  right: 80px
  width: 60px
  height: 60px
  +flex(center, center)
  z-index: 100
  cursor: pointer
  background-color: white
  border-radius: 0 0 0 25px
  transition: border-radius 0.1s, opacity 0.3s

  .inProjects &
    border-radius: 0 25px 0 25px
    transition: border-radius 0.1s ease 0s, opacity 0.3s
    opacity: 0

  .corner
    position: absolute
    width: $corners
    height: $corners
    svg
      width: 100%
      height: 100%
      position: absolute
      left: 0
      top: 0
      path
        fill: white

    &.left-corner
      left: -$corners
      top: 0
    &.right-corner
      right: 0
      bottom: -$corners

  .icon
    span
      position: relative
      width: 25px
      height: 3px
      margin-bottom: 3px
      background-color: $darkGray
      border-radius: 9999px
      display: block
      transition: all 0.3s
      &:last-of-type
        margin-bottom: 0
        width: 17px
        bottom: 0
      &:first-of-type
        top: 0
  &:hover
    .icon
      span:last-of-type
        width: 25px

  &.active
    z-index: 1001
    border-radius: 0 25px 0 25px

    .icon
      span
        opacity: 0
        transition-delay: 0.4s
        &:first-of-type
          +transform(rotate(45deg))
          opacity: 1
          top: 6px
        &:last-of-type
          width: 25px
          opacity: 1
          bottom: 6px
          +transform(rotate(-45deg))

  +respond-to-width(1370)
    top: 60px
    right: 60px
    width: 50px
    height: 50px

  +respond-to-width-or-height(500, 600)
    position: fixed
    z-index: 1001
    right: 0
    top: 0
    border-radius: 0 0 0 25px !important