.mobile
  display: none
  .blue
    color: $fontRed
  p
    color: $background

@media screen and (max-width: 840px)
  .mobile
    display: block
    position: fixed
    top: 0
    left: 0
    z-index: 10000
    width: 100%
    a
      text-decoration: none
      color: $fontRed

    .subscribe-button2
      margin: 40px auto
      background-color: $darkRed
      width: 100%
      cursor: pointer
      text-align: center
      p
        font-size: 18px
        padding: 10px 0
        line-height: 30px
        color: black
        font-weight: 100

  .mobile .header
    position: relative
    width: 100%
    height: 60px
    margin-top: 0
    background: $darkRed
    text-align: center
    +transition(all 2s)
    +transition-delay(3s)
    &.intro
      margin-top: -60px

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

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

  .mobile .mobile_btn.nav
    float: left
    border-right: 1px solid #A91B19

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

  .mobile .mobile_btn.nav:hover:not(.selected)
    background: #fff

  .mobile .mobile_btn.nav:hover:not(.selected) .icon
    background-position: -10px -10px

  .mobile .mobile_btn.contact
    float: right
    border-left: 1px solid #A91B19

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

  .mobile .mobile_btn.contact:hover:not(.selected)
    background: #fff

  .mobile .mobile_btn.contact:hover:not(.selected) .icon
    background-position: -70px -10px

  .mobile .mobile_btn.selected
    background: #fff

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

  .mobile .mobile_btn.selected .icon:hover .icon
    background-position: -40px -10px
    margin-top: -6px

  .mobile .logo
    background: url('/images/structure/logo_mobile.png') no-repeat 50% 50%
    display: inline-block
    margin-top: 8.5px
    background-size: contain
    height: 35px
    width: 65%




  .mobile .mb_content
    position: relative
    overflow-y: scroll

  .mobile .mb_content nav
    position: relative
    overflow: hidden
    height: 0

  .mobile .mb_content nav ul
    display: block
    margin: 0
    padding: 0
    width: 100%
    background: $background

  .mobile .mb_content nav ul.inner
    padding-bottom: 80px


  .mobile .mb_content nav ul li
    display: block
    position: relative
    width: 100%

  .mobile .mb_content nav ul li .title
    display: block
    position: relative
    padding: 0 0 0 60px
    width: 100%
    height: 59px
    text-transform: capitalize
    border-bottom: 1px solid rgba(255, 255, 255, 0.9)
    color: black
    line-height: 60px
    box-sizing: border-box
    -moz-box-sizing: border-box
    cursor: pointer

  .mobile .mb_content nav ul li .title:hover
    background: #CCCCCC


  .mobile .mb_content nav ul li .title .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

  .mobile .mb_content nav ul li.selected .title
    color: $darkRed

  .mobile .mb_content nav ul li.selected .title .dd_arrow
    background-position: -100px -24px

  .mobile .mb_content nav ul li.mb_dropdown
    display: block
    +font-bold
    span
      +font-bold

  .mobile .mb_content nav ul li.mb_dropdown ul
    display: block
    position: relative
    overflow: hidden
    padding: 0
    height: 0

  .mobile .mb_content nav ul li.mb_dropdown ul li .title
    padding-left: 90px
    background: $background
    color: white

    &.special
      color: white
      background-color: $darkRed

  .mobile .mb_content nav ul li.mb_dropdown ul li .title .dd_arrow
    left: 65px
    background-position: -100px -10px

  .mobile .mb_content nav ul li.mb_dropdown ul li .title:hover
    background: #33353d

  .mobile .mb_content nav ul li.mb_dropdown ul li .title.special:hover
    background-color: #1077D4

  .mobile .mb_content nav ul li.mb_dropdown ul li.selected .title
    color: $darkRed

  .mobile .mb_content nav ul li.mb_dropdown ul li.selected .title .dd_arrow
    background-position: -100px -24px

  .mobile .mb_content nav ul li.mb_dropdown ul li.mb_dropdown
    display: block

  .mobile .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul
    display: block
    position: relative
    overflow: hidden
    padding: 0
    height: 0

  .mobile .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title
    padding-left: 120px
    height: 39px
    border-bottom: 1px solid #cccccc
    background: #EAEAEA
    color: #575765

    line-height: 40px

  .mobile .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title:hover
    background: $background

  .mobile .mb_content #mobile_contact
    position: relative
    overflow: hidden
    height: 0
    background: #fff


  .mobile .mb_content #mobile_contact .inner
    padding: 30px
    box-sizing: border-box
    -moz-box-sizing: border-box

  .mobile .mb_content #mobile_contact .inner .title
    display: block
    margin-bottom: 1em
    color: $darkRed


  .mobile .mb_content #mobile_contact .inner .data_title
    display: inline-block
    width: 50%
    max-width: 150px
    color: $fontRed

    text-transform: uppercase

  .mobile .blur
    display: none
    position: fixed
    top: 0
    left: 0
    z-index: -1
    width: 100%
    background: $darkRed
    opacity: 0
    filter: alpha(opacity=0)

  .mobile.phone .mb_content nav ul li .title:hover
    background: none

  .mobile.phone .mb_content nav ul li.mb_dropdown ul li .title:hover
    background: #33353d

  .mobile.phone .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title:hover
    background: #33353d !important