@media (max-width: 999px) {

  HTML {
      height: 100%;
  }

  BODY {
      margin: 0px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      /*min-height:480px;
      min-width:600px;*/
      height: 100%;
  }

  body.map {
      /*overflow: hidden;*/
  }

  #map_title_forecast, #map_title_time, #map_title_timezone {
    font-size: 20px;
    padding-right: 9px!important;
  }


  /* Map & controls -------------------------------------------------------------------------------------------------- */

  #map {
      position:absolute;
      left:0px;
      top:0px;
  }


  #map_title {
      float:right;
      clear:none;
      z-index:9;
      margin-top:60px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      text-align:right;
      /*text-shadow: 0 0 4px #c0c0c0;*/
      position:relative;
      padding-right:0px;
      font-weight:bold;
  }

  #map_title_forecast {
      font-size:22px;
      padding-right:29px;
      margin-top: -2px;
      margin-bottom: 2px;
  }

  #map_title_time {
      font-size:16px;
      padding-right:29px;
      margin-top: -5px;
      margin-bottom: -4px;
  }

  #map_title_timezone {
      font-size:16px;
      padding-right:29px;
  }

  #map_title_timezone_dropdown {
      position:relative;
      top:-51px;
      display:none;
  }

  #map_title_timezone_button {
      font-size:30px;
      text-align:right;
      text-shadow: 0 0 4px #c0c0c0;
      display:none;
  }

  #legend {
      position: absolute;
      z-index: 8;
      width: 54px;
      height: 200px;
      opacity: 1;
      right: -5px !important;
      bottom: 102px;
  }

  #button_legend {
      position:absolute;
      z-index: 8;
      top:250px;
      opacity: 1;
      width:90px;
      height:300px;
      display:none;
  }

  #forecast_groups {
      position:absolute;
      top:61px;
      left:8px;
      z-index:9;
  }

  #forecast_groups_icons {
      float:left;
      clear:none;
      position:relative;
  }

  #forecast_groups_buttons {
      float:left;
      clear:none;
      margin-left:-53px;
      display:none;
  }

  DIV.forecast_icon {
      clear:left;
      float:left;
      padding-top:7px;
      padding-bottom:6px;
      padding-left:13px;
      opacity:0.4;

  }

  IMG.forecast_icon {
      width:40px;
      height:40px;
  }

  BUTTON.forecast_button {
      text-align:left;
  }

  SPAN.forecast_button {
      padding-left:20px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }


  #timeline {
      position:absolute;
      width:100%;
      height:70px;
      left:0px;
      z-index:7;
      margin:0px;
      padding:0px;
  }

  #timeline_inactive {
      width:100%;
      height:70px;
      position: absolute;
      left: 0px;
      top: 0px;
  }


  #timeline_active {
      width:100%;
      height:70px;
      background-color:rgba(0, 0, 0, 0.4);
      display:none;
      position:absolute;
      left:0px;
      top:0px;
      z-index:8;
  }

  button.timeline {
      position:absolute;
      border-radius:30px;
      width:40px;
      height:40px;
      padding:0px;
  }

  span.timeline {
      width:40px;
      height:40px;
      padding:0px;
      display:inline-block;
      margin-top:4px;
  }

  button.timeline_inactive {
      position: absolute;
      width:40px;
      height:40px;
      background-color:rgba(0,0,0,0);
      border-color:rgba(0,0,0,0);
      padding:0px;
  }

  canvas.timeline {
      position:absolute;
      width:800px;
      height:70px;
  }

  #timeline_current {
      position:absolute;
      z-index:9;
  }

  span.timeline {
      font-size:30px;
      position:relative;
      top:-1px;
      width:40px;
  }

  .preview_layer {
      background-color:#ff0000;
      opacity:0.5;
      display:block;
      position:absolute;
      left:0px;
      top:0px;
  }


  .marker_icon {
      font-size:32px;
      color:#000000;
  }

  .marker_name {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size:32px;
      position:relative;
      top:-16px;
      left:-25px;
      text-shadow: 0 0 4px #c0c0c0;
  }

  .marker_value {
      font-size:20px;
      position:relative;
      left:65px;
      top:-15px;
  }

  #popover {
      position:absolute;
      left:0px;
      top:0px;
  }

  #place_selector {
      border:none;
      border-radius:0px;
      padding:0px;
      background-color:rgba(0,0,0,0);
  }

  #place_selector:focus {
      outline-color: transparent;
      outline-style: none;
  }

  #place_selector_arrow {
      position:absolute;
      left:50%;
      top:0px;
      z-index:1100;
  }

  #custom_forecast_left {
      float:left;
      width:280px;
  }

  .custom_forecast_left_item {
      float:right;
      clear:right;
  }

  #custom_forecast_right {
      float:right;
      width:280px;
  }

  .custom_forecast_right_item {
      float:left;
      clear:left;
      display:none;

  }

  .rdiv.search {
    display: none!important;
  }

  SPAN.forecast_button {
    display: none!important;
  }

  #toggle_anim {
    left: 8px!important;
  }
  /*
  #menu_bar A.logo {
    width: 30px;
    height: 30px;
    margin-top: 4px;
    background-size: cover;
    margin-left: -5px; 
  }
  */
}

/* iPhone4 */
@media (max-height: 380px) {
  #legend {
    bottom: 57px!important;
  }
  #timeline {
    height: 50px!important;
  }
  #toggle_anim {
    bottom: 60px!important;
    display: none!important;
  }
  #toggle_anim2 {
    display: block!important;
    position: absolute;
    left: 7px;
    top: 13px;
  }
  #timeline .chart-wrapper {
    position: relative;
  }
  #timeline .chart-wrapper svg {
    margin-left: 42px;
  }

  div.forecast_icon, #forecast_groups_buttons .btn {
    margin-bottom: -2px!important;
  }
}

@media (max-height: 365px) {
  div.forecast_icon, #forecast_groups_buttons .btn {
    margin-bottom: -6px!important;
  }
  #forecast_groups {
    left: 5px;
    top: 60px;
  }
  #toggle_anim {
    left: 40px!important;
  }
}