.mobile
  display: none
  position: fixed
  top: 0
  left: 0
  z-index: 10000
  width: 100%
  a
    text-decoration: none
    color: white

  .blue
    color: $green
  p
    color: $darkBlue

  .subscribe-button2
    margin: 40px auto
    background-color: $green
    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
  background: $green
  text-align: center
  display: block
  visibility: visible

.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('/img/mobile_sprite.png')

.mobile .mobile_btn.nav
  float: left
  border-right: 1px solid $green

.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 $green

.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
  +sprite(0 0, 244px, 75px)
  display: inline-block
  //+transform(scale(0.6))
  //+transform-origin(25% 10%)
  margin-top: 5px


.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: lighten($green, 5%)

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


.mobile .mb_content nav ul li
  display: block
  position: relative
  width: 100%
  color: black
  padding-bottom: 15px
  padding-left: 15px
  padding-top: 15px
  border-bottom: 1px solid rgba(255, 255, 255, 0.3)

.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.1)
  color: $darkBlue
  line-height: 60px
  box-sizing: border-box
  -moz-box-sizing: border-box
  cursor: pointer
  &.active
    color: $green
    background-color: $darkBlue
    font-weight: bold


.mobile .mb_content nav ul li .title:hover
  background: #33353d
  color: $green
  font-weight: bold

.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('/img/mobile_sprite.png') -100px -10px

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

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

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

  span


.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: white
  color: $darkBlue

  &.active
    color: $green
    background-color: $darkBlue
    font-weight: bold

.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.active:hover
  background-color: $green
  color: $darkBlue

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

.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 #fff
  background: #EAEAEA
  color: #575765

  line-height: 40px

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

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

.mobile .mb_content #mobile_contact
  .info
    p, a
      +font-light(24px)
      color: $black

  .social
    margin-top: 50px
    >a
      display: inline-block
      margin-left: 5px
      +transform(scale(1))
      +transition(transform 0.3s)
      &:hover
        +transform(scale(1.3))
    .facebook
      margin-left: 0
      +sprite(-255px 0, 30px, 30px)
    .twitter
      +sprite(-287px 0, 30px, 30px)
    .googlePlus
      +sprite(-319px 0, 30px, 30px)
    .linkedin
      +sprite(-351px 0, 30px, 30px)
    .pinterest
      +sprite(-384px 0, 30px, 30px)

.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: $green


.mobile .mb_content #mobile_contact .inner .data_title
  display: inline-block
  color: $darkBlue
  font-weight: bold

  text-transform: uppercase

.mobile .blur
  display: none
  position: fixed
  top: 0
  left: 0
  z-index: -1
  width: 100%
  background: $green
  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
  color: $green
  font-weight: bold

.mobile.phone .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title:hover
  background: #33353d !important
  color: $green
  font-weight: bold

.mobile-contact
  height: 100%

.mobile-contact-info
  .feature-title
    color: white
  padding-top: 100px
  padding-bottom: 50px
  p
    font-size: 14pt !important
  background-color: white
  text-align: center
  z-index: 99999999
  opacity: 1
  height: 100%
  filter: alpha(opacity=1)

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

+media-query(400px)
  .mobile .mb_content #mobile_contact .inner .data_title
    width: 100%
    display: block
    margin-top: 10px

+media-query(400px)
  .mobile header
    >.logo
      +transform(scale(0.8))
      padding-top: 8px
      position: absolute
      left: 60px

+media-query(338px)
  .mobile header
    >.logo
      +transform(scale(0.7))
      padding-top: 10px
      position: absolute
      left: 30px

+media-query(295px)
  .mobile header
    >.logo
      display: none