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

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

  .bar
    height: 80px
    pointer-events: none
    position: relative
    top: 40px
    z-index: 4
    +translate3d(0,0,0)
    +transition(all 0.4s)
    +transition-delay(0.15s)
    .toggle-menu
      width: 80px
      height: calc(100% - 10px)
      z-index: 3
      pointer-events: all
      border: $borderColor
      cursor: pointer
      left: 0
      position: relative
      +transition(all 0.3s)
      +flex(center, center)
      &:before
        content: ''
        +orangeLabel
        position: absolute
        z-index: -1
        right: -45px
        top: 0
        +transition(all 0.3s)
      .icon
        span
          position: relative
          width: 25px
          height: 3px
          margin-bottom: 3px
          background-color: $fontColor
          border-radius: 9999px
          display: block
          +transition(all 0.3s)
          &:last-of-type
            margin-bottom: 0
            width: 17px
      &:hover
        left: 10px
        &:before
          right: -55px
        .icon
          margin-left: 10px
          +transition(all 0.3s)
          span:last-of-type
            width: 25px
    .logo
      height: 100%
      width: 100%
      position: absolute
      left: 0
      top: 0
      +flex(center, center)
      span
        +sprite(-470px -55px, 129px, 20px)
        display: inline-block
  .shader
    width: 100%
    height: 100%
    position: absolute
    left: 0
    top: 0
    background-color: $mainColor
    opacity: 0
    +transition(all 0.2s)
    +transition-delay(0.4s)

  .menu
    height: 100%
    width: 80%
    left: 0
    top: 0
    padding: 20px 15px
    background: $mainColor url('/img/noise.png')
    min-width: 250px
    position: absolute
    overflow-x: auto
    pointer-events: all
    z-index: 5
    +transition(all 0.4s)
    +transition-timing-function(ease-in-out)
    +translate3d(-100%, 0, 0)

    >p
      margin-left: 20px
      margin-right: 20px
      +font-default()
      font-size: 15px !important
      line-height: 32px !important
      color: $fontColor
      strong
        +font-bold()
        font-size: 15px !important
        line-height: 32px !important
        color: $fontColor

  .language
    padding: 5px 20px
    display: none
    ul
      list-style: none
      padding: 0 0 5px
      margin: 0
      height: 60px
      +flex(flex-end, center)
      border-bottom: 5px solid $borderColor
      li
        margin-right: 20px
        a
          text-transform: uppercase
          +font-default()
          font-size: 14px !important
          line-height: 38px !important
          color: $fontColor
          opacity: 0.4
          position: relative

        &.active
          a
            +font-default()
            color: $fontColor
            opacity: 1
            &:after
              content: ''
              width: 100%
              height: 1px
              background-color: $fontColor
              position: absolute
              left: 0
              bottom: -3px

  nav
    padding: 0 20px
    ul
      padding: 0
      list-style: none
      li
        a
          +font-default()
          font-size: 18px !important
          line-height: 42px !important
          color: $fontColor
        a
          position: relative
          display: block
          +transition(all 0.2s)

          &:hover
            color: $hoverColor
        &.divide
          border-bottom: 5px solid $borderColor
          padding-top: 20px
          margin-bottom: 20px

        &.active
          >a
            color: $activeColor
        &.sub-item
          a
            font-size: 16px !important
            line-height: 38px !important

        &.title
          color: $hoverColor
          font-size: 18px !important
          line-height: 38px !important
        ul
          padding-left: 30px
          li
            a
              color: #b7b7b7
  .contact-information
    margin-top: 60px
    background-color: darken($mainColor, 5%)
    padding: 40px 20px
    position: relative
    &:before, &:after
      content: ''
      background-image: url('/img/horizontal-shadow.png')
      height: 40px
      width: 100%
      position: absolute
      left: 0
      top: 0
    &:after
      top: auto
      bottom: 0
      +transform(rotate(180deg))

    h3
      +font-bold()
      font-size: 20px !important
      color: $fontColor

    p
      +font-default()
      font-size: 15px !important
      line-height: 21px !important
      color: $fontColor
      a
        +font-bold()
        font-size: 15px !important
        line-height: 21px !important
        color: $activeColor

  .social
    margin-top: 40px
    strong
      display: block
      opacity: 0.7
      border-bottom: 5px solid $borderColor
    .icons
      margin-top: 15px
      display: block
    a
      margin-right: 5px
      span
        opacity: 0.6
        +transition(all 0.25s)
        &.facebook
          +facebookWhite
        &.twitter
          +twitterWhite
        &.linkedin
          +linkedinWhite
        &.instagram
          +instagramWhite
        &.youtube
          +youtubeWhite
        &.pinterest
          +pinterestWhite
        &:hover
          opacity: 1

  &.active
    .bar
      +translate3d(80%,0,0)
      +transition-delay(0s)
      .toggle-menu
        left: 0
        &:before
          right: -45px
        .icon
          margin-left: 0
          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
      +translate3d(0, 0, 0)
    .shader
      opacity: 0.4
      pointer-events: all

+media-query(1150px)
  .mobile-navigation
    display: block
  .main-menu
    display: none
+media-query-height(800px)
  .mobile-navigation
    display: block
  .main-menu
    display: none
+media-query(480px)
  .mobile-navigation
    &.active
      .bar
        +translate3d(77%,0,0)