//Colors used in Mobile Menu
$fontColor: white
$mainColor: darken($primaryColor, 20%)
$activeColor: $highlightColor
$barColor: $primaryColor
$hoverColor: $secondaryColor
$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: 60px
    background-color: white
    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-contact
      width: 80px
      height: 100%
      z-index: 3
      background-color: $contactBtnBg
      border: $contactBtnBorderColor
      cursor: pointer
      position: absolute
      top: 0
      right: 0
      +flex(center, center)
    .toggle-menu
      width: 80px
      height: 100%
      z-index: 3
      background-color: $hamburgerBtnBg
      border: $hamburgerBtnBorderColor
      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
        //+sprite(-470px -55px, 129px, 20px)
        display: inline-block

      +respond-to-width(740)
        display: none

  .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: white
    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: 15px !important
      line-height: 32px !important
      color: $black
      strong
        +font-bold()
        font-size: 15px !important
        line-height: 32px !important
        color: $black

  .contact
    +flex(center, center)
    padding: 105px 25px 45px 25px
    height: auto
    width: 100%
    margin: 0 auto
    left: 0
    top: 0
    background-color: $mobileNavBg
    min-width: 300px
    position: absolute
    overflow-x: auto
    pointer-events: all
    z-index: 3
    transition: all 0.4s
    transition-timing-function: ease-in-out
    +translate3d(0, -100%, 0)

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

    .contact-container
      width: 100%
      max-width: 300px
      +flex(space-between, flex-end)

      +respond-to-width(440)
        +flex-direction(column)
        +flex(center, center)
        max-width: auto
        text-align: center

      div:first-of-type
        margin-right: 20px

        +respond-to-width(440)
          margin-right: 0
          margin-bottom: 15px

    h3
      +font-semi-bold(30px, 30px)
      padding: 0
      margin: 0
      margin-bottom: 10px
      color: $mobileNavTextColor
    p
      +font-default(22px, 26px)
      padding: 0
      margin: 0
      color: $mobileNavTextColor

    a
      +font-default(22px, 26px)
      padding: 0
      margin: 0
      color: $mobileNavLinkColor
      transition: color 0.4s ease
      &:hover
        color: $mobileNavHoverColor

  .shader-contact
    visibility: hidden
    opacity: 0
    background: rgba(darken($blue, 20%), 0.75)
    position: relative
    z-index: 0
    width: 100vw
    height: 100vh
    transition: opacity 1s ease, visibility 1s ease

    &.active
      visibility: visible
      opacity: 1
      pointer-events: auto

  .language
    padding: 0 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: 14px !important
          line-height: 38px !important
          color: $mobileNavLinkColor
          opacity: 0.4
          position: relative

        &.active
          a
            +font-light()
            color: $mobileNavLinkColor
            opacity: 1
            &:after
              content: ''
              width: 100%
              height: 1px
              background-color: $mobileNavLinkColor
              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: rgba($black, 0.5)
          position: relative
          display: block
          transition: all 0.2s

        &:hover
          a
            color: $black

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

        &.active
          a
            color: $blue
            font-weight: bold

  .contact-information
    margin-top: 60px
    background-color: $mobileNavBg
    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: $mobileNavTextColor

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

  .social
    margin-top: 40px
    strong
      display: block
      opacity: 0.7
      border-bottom: 1px solid rgba($black, 0.5)
    .icons
      margin-top: 15px
      display: block
    a
      margin-right: 5px
      span
        opacity: 1
        transition: all 0.25s
        &:hover
          opacity: 0.5

      &.facebook
        span
          +facebook
      &.twitter
        span
          +twitter
      &.linkedin
        span
          +linkedin
      &.instagram
        span
          +instagram
      &.youtube
        span
          +youtube
      &.pinterest
        span
          +pinterest

  &.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
      z-index: 1
      opacity: 0.4
      pointer-events: all

.mobile-logo
  height: 100%
  width: 100%
  position: absolute
  left: 0
  top: 0
  +flex(flex-end, center)
  padding-right: 20px

  img
    width: 119px
    height: 45px
    display: inline-block


+media-query(1180px)

  header
    height: 60px
    visibility: hidden
    overflow: hidden
  .sticky-header, .sticky-header.show
    display: none
  .mobile-navigation
    display: block