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

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

  .bar
    height: 60px
    background-color: $barColor
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.11)
    pointer-events: all
    position: relative
    z-index: 4
    +translate3d(0,0,0)
    +transition(all 0.3s)
    +transition-delay(0.4s)
    .toggle-menu
      width: 80px
      height: 100%
      z-index: 3
      background-color: $mainColor
      border: $borderColor
      cursor: pointer
      position: relative
      +flex(center, center)
      .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
        .icon
          span:last-of-type
            width: 25px
    .logo
      height: 100%
      width: 100%
      position: absolute
      left: 0
      top: 0
      +flex(center, center)
      span

        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
    background-color: $mainColor
    min-width: 300px
    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-light()
      font-size: 18px !important
      line-height: 40px !important
      color: $fontColor
      strong
        +font-semi-bold()
        font-size: 15px !important
        line-height: 32px !important
        color: $fontColor

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

        &.active
          a
            +font-light()
            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: 16px !important
          line-height: 42px !important
          color: $fontColor
        p
          //+font-default()
          font-size: 18px !important
          line-height: 42px !important
          color: $fontColor
          cursor: pointer

        &:hover
          p
            color: $hoverColor

        a
          position: relative
          display: block
          +transition(all 0.2s)

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

        &.active
          a
            color: $activeColor

  .contact-information
    margin-top: 60px
    background-color: darken($mainColor, 5%)
    padding: 40px 20px
    position: relative
    &:before, &:after
      content: ''
      background-image: url('/img/shadow/horizontal-shadow.png')
      height: 40px
      width: 100%
      position: absolute
      left: 0
      top: 0
    &:after
      top: auto
      bottom: 0
      +transform(rotate(180deg))

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

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

  .social
    margin-top: 40px
    strong
      display: block
      opacity: 0.7
      border-bottom: 1px 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
        border-left: 1px solid $borderColor
        .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
      +translate3d(0, 0, 0)
    .shader
      opacity: 0.4
      pointer-events: all

+media-query(900px)
  .mobile-navigation
    display: block

  #navigation
    display: none