@media (min-width:901px) {
	:root {
		--display-button-size:54px;
	}
	#sig {
		left:0;
		bottom:0;
	}
	#zoomwindow {
		left:calc(var(--blockmark-margin) * 2 + var(--report-width) + 10vmin);
		bottom:calc(var(--blockmark-margin) * 4 + var(--time-height) + 8vmin);
		top:calc(var(--blockmark-margin) * 2 + var(--blockmark-half-height) + 8vmin);
	}
	#blockmark {
		left:var(--blockmark-margin);
		top:var(--blockmark-margin);
		clip-path:none;
		padding-right:0;
	}
	#vr {
		left:calc(var(--blockmark-width) + var(--blockmark-margin) * 2);
		clip-path:none;
		padding:0 0 0 5px;
	}
	 #subtitle:empty + #vr {
    top:10px;
  }
	 #nav {
		 top:var(--blockmark-margin);
		 right:var(--blockmark-margin);
	 }
	#nav .buttons {
		padding:0 0 0 var(--skewval);
		clip-path:polygon(var(--skewval) 0, 100% 0, 100% 100%, 0 100%);
	}
	#nav .content {
		padding-right:calc(var(--size) - 1px);
	}
	#nav a {
	}
	#nav a sup {
		line-height:1.1;
	}
	#nav a sub {
		font-size:13px;
	}	
	#dates {
		--skewval:calc(var(--dates-height) * var(--skewfactor));
    top:calc(var(--blockmark-height) + var(--blockmark-margin) * 2);
		left:var(--blockmark-margin);
		width:var(--dates-width);
		clip-path:polygon(var(--skewval) 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
		padding:0;
	}
	#startdate, 
	#reportdate {
		line-height:14px;
	}
	#report {
		left:var(--blockmark-margin);
		top:calc(var(--blockmark-height) + var(--dates-height) + var(--blockmark-margin) * 3);
		bottom:calc(var(--blockmark-margin) * 4 + var(--time-height));
	}
	#reportswitch {
		--skewval:calc(var(--dates-height) * var(--skewfactor));
		position:absolute;
		top:calc(0px - var(--dates-height) - var(--blockmark-margin));
		left:calc(var(--blockmark-width) - var(--favorites-width));
		clip-path:polygon(var(--skewval) 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
	}
	#reportswitch .button {
		display:none;
	}
	#reportswitch .button.fav {
		display:flex;
		height:var(--dates-height);
		width:var(--favorites-width);
		max-width:calc(var(--favorites-width));
	}
	#boatclasseslist {
		--skewval:calc(var(--classlist-height) * var(--skewfactor));
		height:var(--classlist-height);
		margin-bottom:var(--blockmark-margin);
		overflow:visible;
	}
	#boatclasseslist .boatclass {
		--skewval:calc(var(--classlist-height) * var(--skewfactor));
		line-height:var(--classlist-height);
		clip-path:polygon(var(--skewval) 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
	}
	#reportopener {
		display:none;
	}
	#reportlist {
		--photo-size:75px;
		background-color:transparent;
	}
	#reportlist .row {
		margin-bottom:var(--blockmark-margin);
		border-bottom-width:0;
		padding-left:0;
		background-color:transparent !important;
	}
	#reportlist .row:before {
		content:'';
		position:absolute;
		top:0;
		bottom:0px;
		z-index:1;
	}
	#reportlist .row:before {
		background-color:#FFFFFF;
		left:55px;
		right:12px;
		transform: skew(-17deg); 
	}
	#reportlist .row:hover:before {
		background-color:#F3F3F3;
	}
	#reportlist .row>* {
		z-index:2;
	}
	#reportlist .row .photos {
		--skewval:calc(var(--photo-size) * var(--skewfactor));
		width:110px;
		height:75px;
		clip-path:polygon(var(--skewval) 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
		background-image:url(bkg_photo_light.jpg);
		display:flex;
		justify-content:flex-start;
		margin:0 5px 0 0;
	}
	body.CLASS_LE_DEFI_PAPREC #reportlist .row .photos {
		width:140px;
	}
	#reportlist .row .photos .img {
		position:relative;
		justify-content:flex-start;
	}
	body.CLASS_LA_SOLITAIRE #reportlist .row .photos .img {
		margin-left:5px;
	}
	#reportlist .row .rank {
		display:block;
		position:absolute;
		top:0;
		left:65px;
		margin:0;
		z-index:3;
		color:#041523;
		font-size:24px;
		text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
		text-align:right;
	}
	#reportlist .row[alt="class2"] .rank {
		left:100px;
	}
	#reportlist .row.on .rank {
		color:#FFFFFF;
		text-shadow: -1px -1px 0 #041523, 1px -1px 0 #041523, -1px 1px 0 #041523, 1px 1px 0 #041523;
	}

	#boatcard {
		--photo-size:75px;
	}
	#boatcard header .photos {
		--skewval:calc(var(--photo-size) * var(--skewfactor));
		width:100px;
		height:75px;
		clip-path:polygon(0 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
		background-image:url(bkg_photo_light.jpg);
		display:flex;
		justify-content:flex-start;
		margin:-5px 5px 0 -5px;
	}
	/*#reportlist .row[alt='class2'] .photos {
		width:140px;
	}*/
	#boatcard header .photos .img {
		position:relative;
		justify-content:flex-start;
	}
	#reportlist .row[alt="class1"] .photos .img {
		margin-left:5px;
	}
	#boatcard .rank {
		display:block;
		position:absolute;
		top:-5px;
		left:50px;
		margin:0;
		z-index:3;
		color:#041523;
		font-size:24px;
		text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
		text-align:right;
	}

	body.CLASS_LE_DEFI_PAPREC #boatcard header .photos {
		width:150px;
	}
	body.CLASS_LE_DEFI_PAPREC #boatcard .rank {
		left:105px;
	}
	#time {
		bottom:calc(var(--blockmark-margin) * 2);
		left:calc(var(--blockmark-margin) * 2);
		right:calc(var(--blockmark-margin) * 2 + var(--display-button-size) + 8px);
		width:auto;
		clip-path:polygon(var(--timekeeper-skewval) 0, 100% 0, calc(100% - var(--timekeeper-skewval)) 100%, 0 100%);
	}
	#geovoile {
		padding:0 10px;
	}
	#geovoile .link svg {
		height:70%;
	}
	#chrono {
		margin-left:-2px;
	}
	#coords {
		--height:15px;
		background-color:transparent;
		color: #FFFFFF;
		mix-blend-mode:difference;
	}
	
	#display {
		--pref-height:30px;
		right:var(--blockmark-margin);
		bottom:calc(var(--blockmark-margin) * 2);
	}
  #display>.button {
    padding:0 var(--skewval);
    clip-path:polygon(var(--skewval) 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%);
  }
	#display.on>.button {
		display:flex !important;
		z-index:1002;
	}
	
  #display .content {
		margin-bottom:calc(var(--display-button-size) + var(--blockmark-margin));
		padding-bottom:calc(var(--pref-height) + var(--blockmark-margin) * 2);
	}
  #display .preferences {
		height:var(--pref-height);
    bottom:calc(var(--margin) + var(--display-button-size) + var(--blockmark-margin));
    width:calc(100% - var(--margin) * 2);
		clip-path:none;
	}

	#forecasts.under {
		top:calc(var(--blockmark-half-height) + var(--blockmark-margin) * 2);
		right:var(--blockmark-margin);
	}
	#forecasts .variables {
		padding:0 var(--skewval);
		margin-right:calc(var(--skewval) + 1px);
		box-sizing: border-box;
	}
	#forecasts .scroll {
		/* clip-path: polygon(var(--skewval) 0, 100% 0, calc(100% - var(--skewval)) 100%, 0 100%); */
		/* margin-right:calc(var(--skewval) * 2); */
		/* width:var(--width); */
	}
	#forecasts legend {
		--thisskewval:calc(12px * var(--skewfactor));
		margin-right:calc(var(--skewval) * 3);
		clip-path: polygon(var(--thisskewval) 0, 100% 0, 100% 100%, 0 100%);
		box-sizing: border-box;
	}
	#forecasts .advert {
		clip-path: polygon(var(--thisskewval) 0, 100% 0, 100% 100%, 0 100%);
		margin-right:calc(var(--skewval) * 3 + var(--thisskewval));
		box-sizing: border-box;
	}
	#gridlines {
		padding-left:calc(var(--report-width) + var(--blockmark-margin) * 2); 
		padding-bottom:calc(var(--time-height) + var(--blockmark-margin) * 2); 
	}

	#reportlist .row .claw.center {
		left:87px;
	}
	body.CLASS_LE_DEFI_PAPREC #reportlist .row .claw.center {
		left:117px;
	}
	#reportlist .row.on .claw {
		fill:#FFFFFF !important;
	}
	#boatcard header .claw.center {
		left:78px;
	}
	body.CLASS_LE_DEFI_PAPREC #boatcard header .claw.center {
		left:128px;
	}
	#nav a .claw.right{
		right:0px;
	}
	#nav a:first-of-type .claw.left,
	#nav a.on .claw.left {
		left:1px;
	}
	#nav a:last-of-type .claw.right,
	#nav a.on .claw.right {
		right:2px;
	}
	#nav.on a.on .claw.right {
		right:0px;
	}
	#time>.claw {
		position:absolute !important;
	}
	#time>.claw.left {
		left:1px;
	}
	#time>.claw.right {
		right:0px;
	}
	#replay>.claw.left {
		left:-24px;
	}
	#geovoile>.claw.left {
		left:1px;
	}
	#display>.button .claw.left {
		left:1px;
	}
}


@media (max-width:900px) {
	:root {
		--favorites-width:38px;
	 }
	#carousel a {
		background-position:center;
	}
	#reportswitch {
		background-color:#063151;
		border-top-color:rgba(255,255,255,0.00);
		color:#FFFFFF;
		stroke:#FFFFFF;
		fill:#FFFFFF;
	}
	body.CLASS_LE_DEFI_PAPREC .photos.flip {
		width:110px;
	}
	body.LEG2  .photos.flip {
		width:110px;
	}
	.claw {
		display:none !important;
	}

	#reportlist .row.on {
		background-color:var(--main-color);
	}

}