﻿@media (min-width:901px) {
#report {
	display:none;
}
}


@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;
}
footer {
	position:absolute;
	bottom:var(--time-height);
	background-color:#131314;
}
#sodebo_data .open {
	display:block;
}
#sodebo_data .close {
	display:none;
}
#sodebo_data .content {
	display:none;
	overflow:auto;
	scrollbar-width:none;
}
#sodebo_data .content::-webkit-scrollbar {
	width:0px;
}
#sodebo_data .separator {
	display:none;
}
#sodebo_data .block.wind {
  flex-direction:column;
	justify-content:center;
}

footer.on {
	top:var(--progressline-height);
	padding-top:20px;
}
footer.on #sodebo_data {
	display:flex;
}
footer.on #sodebo_data .open {
	display:none;
}
footer.on #sodebo_data .close {
	display:block;
}
footer.on #sodebo_data .content {
	display:flex;
	flex-direction:column;
}

#geovoile {
	padding-left:0;
}

#sodebo_line .point.equator1 label,
#sodebo_line .point.equator2 label {
	transform:translate(-2px, 10px);
}

#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;
}  

}


@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;
  }
  #boatcard {
    left:50% !important;
    transform:translateX(-50%);
  }
  #boatcard article.qd1 {
    left:50% !important;
    transform:translateX(-50%);
    bottom:15px;
  }
  #boatcard article.qd2 {
    left:50% !important;
    transform:translateX(-50%);
    top:15px;
  }
  #boatcard article.qd3 {
    right:auto;
    left:50% !important;
    transform:translateX(-50%);
    top:15px;
  }
  #boatcard article.qd4 {
    right:auto;
    left:50% !important;
    transform:translateX(-50%);
    bottom:15px;
  }
  #boatcard article.qd5 {
    left:50% !important;
    right:auto;
    top:15px;
    transform:translate(-50%, -50%);
  }
  #boatcard article.qd6 {
    left:50% !important;
    transform:translate(-50%, -50%);
  }
  #boatcard article.qd7 {
    bottom:15px;
    left:50% !important;
    transform:translateX(-50%);
  }
  #boatcard article.qd8 {
    top:15px;
    left:50% !important;
    transform:translateX(-50%);
  }
	#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;
  }
}


