﻿@media (min-width:901px) {
#sig {
	top:0 !important;
}
#zoom .button {
  height:38px;
  width:38px;
}
#zoom {
  height:120px;
}
#tools {
  right:9px;
}
}


@media (max-width:900px) {
body {
	--time-height:54px;
}
#tools {
	display:none;
}
#zoom {
	bottom:40px;
}
#timekeeper {
	padding:0;
}
#forecasts.under {
	top:0;
}
#forecasts .scroll {
	clip-path:none;
}

#geovoile {
	padding-left:0;
}

#forecasts {
	top:0;
	width:100%;
	max-width:100%;
}  
#forecasts .cursor, 
#forecasts .wait {
	left:50%;
}
#forecasts .hours {
	left:calc(50% - var(--current-index) * var(--hour-width));
}
#forecasts .scroll {
	clip-path:none;
	width:100%;
}  
#forecasts .advert {
	clip-path:none;
}  

#sodebo_line .point.equator1 label {
	transform:translate(0, 8px);
}
}


@media (max-width:840px) {
	#sodebo_line .point.equator1 label,
	#sodebo_line .point.equator2 label {
		transform:translate(-2px, 10px);
	}
}


@media (max-width:600px) {
  #geoblog {
    width:85%;
    min-width:initial;
    max-width:initial;
  }
  #geoblog article {
    max-height:initial;
      
  }
  #geoblog .hat {
    max-height:80px;
    overflow:auto;
  }
  #geoblog .content {
    max-height:150px;
    overflow:auto;
  }
  #geoblog #mediaVideo {
    min-width:initial;
  }
	#infowindow {
		left:10px;
		right:10px;
		transform:translateY(-50%);
		width:auto;
	}
}


@media (max-width:450px) {
  #forecasts .variables {
    width:calc(100% + var(--variables-skewval));
    display:flex;
    margin-left:calc(0px - var(--variables-skewval));
  }
  #forecasts .variables .var {
    width:auto;
    flex:auto;
    margin-right:calc(-2px - var(--variables-skewval));
  }
  #forecasts .variables .var label {
    display:none;
  }
  #forecasts .params {
    height:auto;
    width:100%;
    flex-direction:column-reverse;
    padding-left:0;
    clip-path:none;
  }
  #forecasts .options {
    display:none;
  }
  #forecasts legend {
    width:100%;
  }
  #forecasts .advert {
    width:100%;
    box-sizing:border-box;
    text-align:center;
  }
}
