@media (min-width:901px) {
	:root {
		--blockmark-height:88px;
	}
	#blockmark {
		height:calc(var(--blockmark-height) + 20px);
		background-color:rgba(76,77,79,0.4);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	#logo {
		height:calc(100% - 30px);
		margin:0 auto 10px auto;
	}
	#dates {
		border-radius:0 20px 0 0;
	}
	#nav {
		--button-margins:calc((var(--crwchronobar_height) - var(--button-size)) / 2);
	}
	#nav.on {
		bottom:0;
	}
	#nav .burger, 
	#nav .cross {
		height:var(--button-size);
		width:var(--button-size);
	}
	#nav .content {
		position:absolute;
		top:0;
		right:0;
		width:auto;
		display:flex;
		flex-direction:column;
		padding-right:0;
		padding-top:var(--crwchronobar_height);
		overflow:auto;
  }
	#nav a {
		opacity:0.5;
		min-height:var(--size);
	}
	#nav a.on {
		display:none;
	}
	#nav a:hover,
	#nav a.on {
		opacity:1;
	}
	#nav.on a.on {
		display:inherit;
	}

	#report {
		background-color:rgba(76,77,79,0.4);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	#reportlist {
		--stealth-width:20px;
		width:calc(var(--report-width) + var(--stealth-width));
	}
	#reportlist.bkgweft {
		background-image:none;
		background-color:transparent;
	}
	#reportlist .row {
		width:var(--report-width);
	}
	#report.shrink #reportlist .row.STM:after {
		content:'STM';
	}
	#report.dashboard #reportlist .row.STM:after {
		content:'S';
	}
	

	#datetime {
		clip-path:var(--rounded-clip-bottom-right);
		min-width:189px;
	}
	#timeline .bar, 
	#timeline .backbar, 
	#timeline .interval {
		height:8px;
	}

	#forecasts {
		--top-when-under:calc(var(--crwchronobar_height) + 10px);
	}		

	#sig {
		left:0;
	}
	#coords {
		left:var(--report-width);
	}
}


@media (max-width:1000px) {
	#crwchrono .time label {
		font-size:12px;
	}
	#crwchrono .time .chrono {
		font-size:16px;
	}
}



@media (max-width:900px) {
	:root {
		--blockmark-height:45px;
		--crwchronobar_height:45px;
		--viewer-top-margin:var(--crwchronobar_height);
		--forecast-margin:2px;
		--dates-buttons-width:35px;
	}
	#crwchrono {
		left:0;
		clip-path:none;
		padding-right:5px;
		padding-left:5px;
	}
	#blockmark {
		width:auto;
		right:0;
		justify-content:flex-start;
	}
	#logo {
		margin:0;
	}
	#nav {
		--size:35px;
		--button-size:30px;
		--button-margins:calc((var(--blockmark-height) - var(--button-size)) / 2);
		top:0;
	}
	#nav .buttons {
		top:5px;
		right:5px;
	}
	#nav.on .content {
		top:var(--viewer-top-margin);
		bottom:calc(var(--viewer-top-margin) * 3);
		height:auto;
		transform:translateX(-50%);
		overflow:auto;
		scrollbar-width:none;
	}
	#nav.on .content::-webkit-scrollbar {
		width:0px;
	}
	#dates {
		top:calc(var(--viewer-top-margin) + 5px);
		right:5px;
	}
	#dates .buttons {
		border-radius:50%;
	}
	#dates .button {
		margin-bottom:2px;
	}
	#crwchrono .time {
		flex-direction:row;
		align-items:center;
		border-right:none;
		margin-right:10px;
	}
	#crwchrono .time label {
		font-size:14px;
		padding-right:7px;
		margin-right:7px;
		border-right:2px solid #B1001D;
	}
	#crwchrono .time .chrono {
		font-size:16px;
	}
	#crwchrono .nite label {
		padding-right:7px;
		margin-right:7px;
	}
	#crwchrono .nite label svg {
		height:12px;
	}
	#crwchrono .nite span br {
		display:none;
	}
	#timekeeper {
		flex:1;
		padding: 0 30px 0 20px;
		max-width: 40px;
	}
	#datetime {
		flex:auto;
	}
	#datetime > span {
		display:flex;
		align-items:center;
	}
	#datetime .day {
		font-size:24px;
		line-height:0.8;
		border-right:none;
	}
	#datetime .date,
	#datetime .hour {
		font-size:16px;
	}
	#datetime .date {
		border-right:2px solid #B1001D;
		padding-right:7px;
		margin-right:5px;
	}
	#replay {
		display:none;
	}
	#brackets {
		display:none;
	}
	#geovoile {
		margin-left:0; 
	}
	#forecasts {
		--hour-width:39px;
		top: calc(var(--viewer-top-margin) + var(--blockmark-height) + var(--report-height) + var(--forecast-margin));
		left:var(--forecast-margin);
		right:var(--forecast-margin);
		width:auto;
	}		
	#reportlist {
		--stealth-width:var(--panelslider-width);
	}
	#display > .button {
		bottom:5px;
		right:5px;
	}
	#tools {
		right:10px;
		bottom:55px;
	}
	#geovoile {
		background-color:transparent;
		fill:rgba(26,26,26,1.00);
	}
}



@media (max-width:430px) {
	#crwchrono .nite span {
		display:none;
	}
	#crwchrono .nite label {
		border-right:none;
	}
	#refresh {
		padding:0 3px 0 calc(var(--timekeeper-skewval) + 3px);
	}
	#datetime .day {
		font-size:16px;
	}
	#datetime .date,
	#datetime .hour {
		font-size:12px;
	}
}
@media (max-width:370px) {
  #datetime {
	  flex:auto;
    padding:0;
    justify-content:flex-start;
  }
}


@media (max-width:320px) {
	#refresh {
		display:none;
	}
}