//Colors used in Mobile Menu
.preventScroll
  +respond-to-width(840)
    overflow: hidden
    overflow-y: scroll
    position: fixed
    width: 100%


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

  .c-mobile-language
    display: none
    margin-top: 40px



  .shader
    width: 100%
    height: 100%
    position: absolute
    left: 0
    top: 0
    background: rgba(15,35,70,1) linear-gradient(90deg, rgba(white, 0) 0%, rgba(black, 0.1) 100%)
    opacity: 0
    transition-delay: 0.4s

  .menu
    position: absolute
    right: 0
    top: 0
    height: 100%
    width: 100%
    max-width: 50%
    min-width: 275px
    padding: 220px 120px

    background: $blue-300
    background-image: url('/img/header_bg.jpg'), linear-gradient(0deg, $blue-300 0%, $blue 100%)
    background-repeat: no-repeat
    background-size: cover
    overflow-x: auto
    pointer-events: all
    z-index: 5
    transform: translate3d(100%, 0, 0)

    nav
      position: relative
      width: column(6,7)

      .menu-list
        margin-top: 40px
        position: relative

        ul
          margin: 0
          padding: 0
          list-style: none
          font-size: 1rem
          line-height: 1.2

          + ul
            margin-top: 24px

          li
            a
              display: inline-block
              text-decoration: none
              transition: color 0.2s
              cursor: pointer

              color: $neutral-200
              font-size: 1.375rem
              font-weight: bold
              line-height: 3rem

              &:hover
                color: $pastelBlue

            ul
              font-size: 0.85rem
              margin: 15px 0 60px 0
              +flex(space-between, flex-start)
              flex-wrap: wrap

              li
                width: 50%

                a
                  color: $pastelBlue
                  font-size: 1.125rem
                  line-height: 2.125rem
                  font-weight: normal

                  &:hover
                    color: $neutral-200

                &.active
                  > a
                    &:before
                      top: 8px

            &.active
              > a
                position: relative

                &:before
                  content: ''
                  position: absolute
                  top: 15px
                  left: -30px

                  width: 0
                  height: 0
                  border-bottom: 16px solid $pastelBlue
                  border-left: 16px solid transparent

        a.button
          background-color: $pastelBlue
          color: white
          text-decoration: none
          font-size: 1rem
          font-weight: 500
          line-height: 1.1875rem
          padding: 15.5px 20px

          position: absolute
          right: 0
          bottom: 68px

          &:hover
            background-color: lighten($pastelBlue, 10%)

          &:last-child
            bottom: 0
            background-color: transparent
            border: 1px solid white

            &:hover
              background-color: lighten($pastelBlue, 10%)
              border-color: transparent
  &.active
    .bar
      .toggle-menu
        .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))
    .menu
      transform: translate3d(0, 0, 0)

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

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

  +respond-to-width(1440)
    .menu
      nav
        .menu-list
          a.button
            position: relative
            bottom: 0
            margin-top: 20px


  +respond-to-width(1200)
    .menu
      nav
        .menu-list
          ul
            li
              ul
                margin-bottom: 15px
                li
                  width: 100%

  +respond-to-width(840)
    display: block

    .bar
      display: block

    .menu
      max-width: none
      padding-top: 140px

  +respond-to-width(650)
    .menu
      padding-left: 60px

  +respond-to-width(450)
    .c-mobile-language
      display: block

  +respond-to-width(400)
    .menu
      padding-left: 45px
      nav
        ul
          font-size: 1.2rem