#mobile_header {
  display: none;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .upperLeftUI, .upperRightUI, .openCheatsheet, .mapInfoIcon, .uv-icon, .chat-box, #exploreMapsHeader {
    display: none !important;
  }
  
  #mobile_header {
    display: block;
  }
  
  .homeWrapper {
    width: 96%;
    padding: 0 2%;
  }
  .homeTitle {
    text-align: left;
  }
  .homeIntro {
    text-align: left;
  }
  .fullWidthWrapper.withVideo {
    height: auto;
  }
  .homeVideo {
    width: 100%;
    height: auto;
  }
  .fullWidthWrapper.withPartners {
    display: none;
  }
  .learnMoreCTA {
    display: none !important;
  }
  
  #yield {
    margin-top: 50px;
  }
  
  .wrapper div.mapInfoBox {
    position: fixed;
    top: 50px;
    right: 0px;
    bottom: auto;
    width: 100%;
    max-width: 360px;
  }
  
  #wrapper .requestInvite {
    width: 100%;
    padding: 0;
  }
}

#mobile_header {
  height: 50px;
  background: #EEE;
  width: 100%;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
  position: fixed;
}

#menu_icon {
  width: 50px;
  height: 50px;
  border-right: 1px solid #DDD;
  position: absolute;
  background: #EEE url('<%= asset_path('menu-alt-256.png') %>') no-repeat center center;
  background-size: 30px;
}

#header_content {
  position: absolute;
  width: 100%;
  overflow-x: scroll;
  padding-left: 60px;
  font-size: 24px;
  line-height: 50px;
}

#mobile_menu {
 display: none;
  background: #EEE;
  position: fixed;
  top: 50px;
  border-top: 1px solid #DDD;
  padding: 10px;
  width: 200px;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.23), 3px 3px 3px rgba(0,0,0,0.16);
}

#mobile_menu li {
  padding: 10px;
}