$selected : $gums
$blurColor : $gums

body
  +respond-to(mobileNavigation)
    padding-top: 60px

.mobile-navigation
  display: none

  +respond-to(mobileNavigation)
    display: block
    +position(fixed, 0 null null 0)
    z-index: 1000
    width: 100%

  header
    position: relative
    width: 100%
    height: 60px
    background: $purpleDark

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

    .icon
      display: block
      +position(absolute, 50% null null 50%)

    &.nav
      float: left
      border-right: 1px solid $purpleLight

      .icon
        margin: -7px 0 0 -9px
        +spriteMobile(-10px, -40px, 18px, 15px)

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

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

      .icon
        margin: -10px 0 0 -10px
        +spriteMobile(-70px, -40px, 20px, 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
        margin-top: -6px

  .logo
    display: block
    +position(absolute, 50% null null 50%)

    margin: -15px 0 0 -65px
    width: 130px
    height: 30px

    +sprite(-240px,-180px,208px,60px,.6)

  .mb_content
    position: relative
    overflow-y: scroll

    nav
      position: relative
      overflow: hidden
      height: 0

      ul
        display: block
        width: 100%
        background: #F7F8F9

        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, 50% null null 30px)
              margin: -2px 0 0 -5px

              +spriteMobile(-100px, -10px, 10px, 6px)

          &.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: 60px
        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