$selected: #EEA905
$blurColor: #EEA905

.mobile-navigation
  display: none
  position: fixed
  top: 0
  left: 0
  z-index: 10000
  width: 100%
  font-family: 'DIN Next W02 Regular',arial, sans-serif

  +respond-to(small-screen)
    display: block

  header
    position: relative
    width: 100%
    height: 60px
    background: repeat-x url('/images/structure/header_bg.jpg')

    .orangeLine
      display: block
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      height: 3px
      background: #EEA905

  .mobile_btn
    position: relative
    width: 60px
    height: 100%
    cursor: pointer

    .icon
      display: block
      position: absolute
      top: 50%
      left: 50%
      background: url('/images/structure/mobile_sprite.png')

    &.nav
      float: left
      border-right: 1px solid #575765

      .icon
        margin: -7px 0 0 -9px
        width: 18px
        height: 15px
        background-position: -10px -40px

      &:hover:not(.selected) .icon
        background-position: -10px -10px

      &.selected
        .icon
          background-position: -40px -10px
          margin-top: -6px
    &.contact
      float: right
      border-left: 1px solid #575765

      .icon
        margin: -10px 0 0 -10px
        width: 20px
        height: 20px
        background-position: -70px -40px

      &:hover:not(.selected)
        .icon
          background-position: -70px -10px

      &.selected
        .icon
          background-position: -40px -10px
          margin-top: -6px

      &:hover .icon
        background-position: -40px -10px

  .logo
    display: block
    position: absolute
    top: 50%
    left: 50%
    margin: -15px 0 0 -90px
    width: 180px
    height: 30px

    img
      width: 100%

  .mb_content
    position: relative
    overflow-y: scroll

    nav
      position: relative
      overflow: hidden
      height: 0

      ul
        display: block
        width: 100%
        background: #F7F8F9
        margin: 0
        padding: 0

        li
          display: block
          position: relative
          width: 100%

          .title
            display: block
            position: relative
            padding: 0 0 0 60px
            width: 100%
            height: 59px
            border-bottom: 1px solid #DFE5E9
            color: #575766
            font-size: 1.142857143em
            font-weight: 600
            line-height: 60px
            box-sizing: border-box
            cursor: pointer

            &:hover
              background: #fff

            .dd_arrow
              display: block
              position: absolute
              left: 30px
              top: 50%
              margin: -2px 0 0 -5px
              width: 10px
              height: 6px
              background: url('/images/structure/mobile_sprite.png') -100px -10px

          &.selected
            .title
              color: $selected
              .dd_arrow
                background-position: -100px -24px

          &.mb_dropdown
            display: block

            ul
              display: block
              position: relative
              overflow: hidden
              padding: 0
              height: 0

              li
                .title
                  padding-left: 90px
                  background: #fff
                  color: #9999A2
                  font-weight: 400

                  .dd_arrow
                    left: 65px
                    background-position: -100px -10px

                  &:hover
                    background: #FBFBFC

                &.selected
                  .title
                    color: $selected

                    .dd_arrow
                      background-position: -100px -24px

                &.mb_dropdown
                  display: block

                  ul
                    display: block
                    position: relative
                    overflow: hidden
                    padding: 0
                    height: 0

                    li
                      .title
                        padding-left: 120px
                        height: 39px
                        border-bottom: 1px solid #fff
                        background: #EAEAEA
                        color: #575765
                        font-weight: 300
                        line-height: 40px

                        &:hover
                          background: #F7F8F9

    #mobile_contact
      position: relative
      overflow: hidden
      height: 0
      background: #fff
      font-size: 1.142857143em

      .inner
        padding: 30px
        box-sizing: border-box

        .title
          display: block
          margin-bottom: 1em
          color: $selected
          font-size: 1.375em

        .data_title
          display: inline-block
          width: 60px
          color: $selected
          font-weight: 600
          font-size: .875em
          text-transform: uppercase

  .blur
    display: none
    position: fixed
    top: 0
    left: 0
    z-index: -1
    width: 100%
    background: $blurColor
    opacity: 0

  &.phone
    .mb_content nav ul li .title:hover
      background: none
    .mb_content nav ul li.mb_dropdown ul li .title:hover
      background: #fff
    .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title:hover
      background: #EAEAEA !important