﻿@font-face {
	font-family:"aktiv-grotesk";
	src:url("https://use.typekit.net/af/855c4b/00000000000000007753ca4f/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),
	url("https://use.typekit.net/af/855c4b/00000000000000007753ca4f/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),
	url("https://use.typekit.net/af/855c4b/00000000000000007753ca4f/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
	font-style:normal;
	font-weight:normal;
	font-stretch:normal;
}

@font-face {
	font-family:"aktiv-grotesk";
	src:url("https://use.typekit.net/af/7d84d7/00000000000000007753ca28/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),
	url("https://use.typekit.net/af/7d84d7/00000000000000007753ca28/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),
	url("https://use.typekit.net/af/7d84d7/00000000000000007753ca28/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
	font-style:italic;
	font-weight:normal;
	font-stretch:normal;
}

@font-face {
	font-family:"aktiv-grotesk";
	src:url("https://use.typekit.net/af/0e4445/00000000000000007753ca37/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
	url("https://use.typekit.net/af/0e4445/00000000000000007753ca37/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
	url("https://use.typekit.net/af/0e4445/00000000000000007753ca37/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
	font-style:normal;
	font-weight:bold;
	font-stretch:normal;
}

@font-face {
	font-family:"aktiv-grotesk";
	src:url("https://use.typekit.net/af/bf7c1c/00000000000000007753ca27/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),
	url("https://use.typekit.net/af/bf7c1c/00000000000000007753ca27/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),
	url("https://use.typekit.net/af/bf7c1c/00000000000000007753ca27/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
	font-style:italic;
	font-weight:bold;
	font-stretch:normal;
}

@font-face {
	font-family:"termina";
	src:url("https://use.typekit.net/af/ae1086/00000000000000007735b222/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),
	url("https://use.typekit.net/af/ae1086/00000000000000007735b222/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),
	url("https://use.typekit.net/af/ae1086/00000000000000007735b222/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
	font-style:normal;
	font-weight:bold;
	font-stretch:normal;
}

@font-face {
	font-family:"intercom";
	src:url("https://use.typekit.net/af/84fea4/0000000000000000774f4a73/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),
	url("https://use.typekit.net/af/84fea4/0000000000000000774f4a73/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),
	url("https://use.typekit.net/af/84fea4/0000000000000000774f4a73/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
	font-style:italic;
	font-weight:bold;
	font-stretch:normal;
}

body, * {
  font-family:"aktiv-grotesk";
  font-size:11px;
}

:root {
	--skewfactor:0;
	--rounded-clip-bottom-right:polygon(0 0, 100% 0, calc(100% - 11px) calc(100% - 10px), calc(100% - 12px) calc(100% - 8px), calc(100% - 13px) calc(100% - 6px), calc(100% - 15px) calc(100% - 4px), calc(100% - 17px) calc(100% - 3px), calc(100% - 19px) calc(100% - 2px), calc(100% - 26px) 100%, 0 100%);
	--rounded-clip-top-left:polygon(26px 0, 19px 2px, 17px 3px, 15px 4px, 13px 6px, 12px 8px, 11px 10px, 0 100%, 100% 100%, 100% 0);
	--rounded-clip-bottom-left:polygon(0 0, 17px calc(100% - 17px), 18px calc(100% - 12px), 21px calc(100% - 8px), 24px calc(100% - 5px), 28px calc(100% - 3px), 31px calc(100% - 2px), 40px calc(100% - 1px), 55px 100%, 100% 100%, 100% 0);
	--forecast-margin:5px;
	--blockmark-height:88px;
	--crwchronobar_height:76px;
}

.nat::before {
	border-radius:6px;
}

#nav {
	--size:56px;
	--button-size:54px;
	height:auto;
}
#nav .buttons {
	border-radius:50%;
	top:var(--button-margins);
	right:var(--button-margins);
}
#nav .burger .line,
#nav .burger .line:before {
	width:calc(var(--button-size) / 2.2);
}
#nav .burger .line {
	margin-top:calc(var(--button-size) / 6);
}
#nav .burger .line:before {
	top:calc(0px - (var(--button-size) / 6));
}
#nav .burger .line:after {
	display:none;
}
#nav a {
	opacity:1 !important;
}
#nav a sup {
	font-family:intercom;
	font-style:italic;
	font-weight:bold;
	text-transform:uppercase;
	line-height:1;
}
#nav a sub {
	font-family:"aktiv-grotesk";
	font-weight:bold;
	color:#98A4AC;
}
#nav a:hover sub,
#nav a.on sub {
	color:#FFFFFF;
}
#nav a:hover {
	color: #FFFFFF;
	background-color: #019EEB;
}
#dates em {
	font-family:intercom;
	font-size:18px;
	font-style:italic;
	font-weight:bold;
	text-transform:uppercase;
}
#startdate, 
#reportdate {
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;
}

#reportlist {
	--stealth-width:20px;
}
#reportlist .row {
	overflow:visible;
}
#reportlist .row .rank {
	font-family:intercom;
	font-style:italic;
	font-weight:bold;
	font-size:18px;
	margin: 7px 5px;
	border-radius:11px;
}
#report.shrink #reportlist .row .rank {
	margin:2px 5px;
	border-radius:7px;
}
#report.dashboard #reportlist .row .rank {
	margin:0px 5px;
	border-radius:75px;
}
#reportlist .row .photos {
	border-radius:11px;
	overflow:hidden;
}
#reportlist .row .boat {
	font-family:intercom;
	font-weight:bold;
	font-style:italic;
	font-size:16px;
	text-transform:uppercase;
}
#reportlist .row .skippers {
	font-size:11px;
	text-transform:uppercase;
	font-weight:bold;
	white-space:nowrap;
}
#reportlist .row .infos {
	font-size:11px;
}
#reportlist .row.STM {
	background-color:#333333;
	color:#FFFFFF;
}
#reportlist .row.STM .boat {
	color: #FFFFFF;
}
#reportlist .row.STM .skippers {
	color:#9DAAB2;
}
#reportlist .row.STM .rank {
	color:#FFFFFF !important;
	background-color:#3F4344;
}
#reportlist .row.STM:after {
	content:'STEALTH';
	position:absolute;
	top:0;
	right:calc(0px - var(--stealth-width));
	bottom:0;
	width:var(--stealth-width);
	border-radius:7px 0 0 7px;
	writing-mode:vertical-lr;
	text-orientation:mixed;
	display:flex;
	justify-content:center;
	align-items:center;
	color:#FFFFFF;
	font-weight:bold;
	background-color:#B1001D;
	transform:rotate(180deg);
}

#boatcard article {
	border-radius:12px;
	overflow:hidden;
}
#boatcard .rank {
	border-radius:11px;
	font-family:intercom;
	font-weight:bold;
	font-style:italic;
	font-size:18px;
}
#boatcard .photos {
	border-radius:11px;
	overflow:hidden;
}
#boatcard header .boat {
	font-family: intercom;
	font-weight: bold;
	font-style: italic;
	font-size: 16px;
	text-transform: uppercase;
}
#boatcard header .skippers {
font-size:11px;
  text-transform:uppercase;
  font-weight:bold;
  white-space:nowrap;
}
#dashboard:before {
	background-color:rgba(76,77,79,0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
#dashboard .content .group {
	padding: 22px 10px 10px 10px;
	border-radius:10px;
}
#dashboard header .row .status {
	opacity:1;
	font-style:normal;
	font-weight:bold;
	font-size: 12px;
	text-transform:uppercase;
}
#dashboard header .row .boat {
	font-family:intercom;
	font-weight:bold;
	font-style:italic;
	text-transform:uppercase;
	font-size:16px;
}
#dashboard header .row .skippers {
	font-size:11px;
	text-transform:uppercase;
	font-weight:bold;
	white-space:nowrap;
}
#dashboard header .row .rank {
	margin:0 5px;
	border-radius:11px;
	font-size:18px;
	font-style:italic;
}
#dashboard header .row .photos {
	border-radius:11px;
	overflow:hidden;
}
#dashboard .dials text {
	font-size:14px;
	opacity:1;
}
#dashboard .content .val label {
	font-family:intercom;
	font-style:italic;
	font-weight:bold;
  text-transform:uppercase;
  font-size:16px;
}
#dashboard .content .val var {
	font-weight:bold;
  font-size:14px;
}
#dashboard .results {
	text-transform:uppercase;
}
#dashboard .environment .val.val wind,
#dashboard .environment .val.waves {
	max-width:38%;
}

#timekeeper {
	padding: 0 46px;
}
#timekeeper img {
	height:calc(var(--timekeeper-height) * 0.65);
}
#timekeeper:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
  background-color:#1A1A1A;
	clip-path:var(--rounded-clip-bottom-right);
}

#brackets {
	background-color:#2E2E2E;
	clip-path:var(--rounded-clip-top-left);
	padding:0 31px 0 22px;
}
#geovoile {
	clip-path:var(--rounded-clip-top-left);
	padding-left:11px;
	margin-left:-24px;
}
#datetime {
	padding-right:24px;
}
#datetime>span {
	display:grid;
}
#datetime .day {
	grid-column: 1 / 2;
  grid-row: 1 / 3;
	display:flex;
	align-items:center;
	font-family:intercom;
	font-style:italic;
	font-weight:bold;
	font-size:33px;
	line-height:0.8;
	border-right:2px solid #B1001D;
	padding-right:7px;
	margin-right:5px;
}
#datetime .date {
	grid-column: 2 / 3;
  grid-row: 1 / 2;
}
#datetime .hour {
	grid-column: 2 / 3;
  grid-row: 2 / 3;
}
#datetime .date,
#datetime .hour {
	font-size:14px;
	color:#98A4AC;
}
#chrono {
	display:none;
}

#forecasts {
	--hour-width:39px;
	right:10px;
}		
#forecasts .variables {
	background-color:#333333;
	border-radius:19px;
	overflow:hidden;
	height:auto;
}
#forecasts .variables .var {
	margin:var(--forecast-margin);
	border-radius:13px;
	width:auto;
	padding:0 10px;
}
#forecasts.shrinked .variables .var {
	padding-right:0;
}	
#forecasts .variables .var label {
	font-size: 12px;
}
#forecasts .hours > div {
	padding:5px 10px;
	font-size:12px;
}
#forecasts .scroll {
	margin-top:var(--forecast-margin);
	border-radius:13px;
}
#forecasts .cursor {
	border-radius:13px;
	margin-left:0;
}
#forecasts .params {
	margin-top:var(--forecast-margin);
	border-radius:8px;
}
#forecasts legend {
	border-radius:0 8px 8px 0;
	overflow:hidden;
}
#forecasts .advert {
	margin-top:var(--forecast-margin);
	border-radius:8px;
}

body.WEATHER #bathymetry {
	background-color:#515B62;
}

#display > .button {
	bottom:10px;
	right:10px;
	border-radius:50%;
}
#tools {
	right:10px;
}

#poiLayer g text {
	text-transform:uppercase;
}
#poiLayer .buoy.splittime text {
	text-transform:uppercase;
	font-family:intercom;
  font-weight:bold;
  font-style:italic;
  font-size:14px;
	fill:#FFFFFF;
}
#poiLayer .icon.sptresults {
	cursor:pointer;
}
#poiLayer .icon.sptresults rect {
	fill:#828A8E;
}
#poiLayer .icon.sptresults text {
	text-transform:uppercase;
  font-weight:bold;
  font-size:10px;
	fill:#FFFFFF;
	user-select:none;
	cursor:pointer;
}
body.SPLITTIMES #poiLayer .icon.sptresults.active rect,
#poiLayer .icon.sptresults:hover rect {
	fill:#FFC72C;
	cursor:pointer;
}
#poiLayer #icon_resultsprint>g {
	transform:translateY(10px);
}
#gatesLayer g.option path {
	stroke: #005495;
}
#gatesLayer g.option circle, 
#poiLayer g.option circle {
	fill: #005495;
}

#areasLayer #doldrums_corridor {
	stroke:none;
	fill:rgba(0,0,0,0.1);
}
#gatesLayer #doldrums_corridor_left path,
#gatesLayer #doldrums_corridor_right path {
	stroke:rgba(0,0,0,0.5);
}
#gatesLayer #doldrums_corridor_left circle,
#gatesLayer #doldrums_corridor_right circle {
	display:none;
}
body.LEG2 #poiLayer #area_doldrums_corridor text {
	transform: translate(-9px,0px) rotate(-90deg);
}
body.LEG7 #poiLayer #area_doldrums_corridor text {
	transform: rotate(82deg);
}
#splittimesLayer .icon {
	display:none !important;
	visibility:hidden ! important;
}



#crwchrono {
	position:absolute;
	top:0;
	right:0;
	height:var(--crwchronobar_height);
	background-color:#1A1A1A;
	display:flex;
	align-items:center;
	padding-right:90px;
	clip-path:var(--rounded-clip-bottom-left);
	padding-left:40px;
	color:#FFFFFF;
}
#crwchrono .time {
	position:relative;
	display:flex;
	flex-direction:column;
	margin-right:20px;
	padding-right:20px;
	line-height: 0.9;
}
#crwchrono .time:after {
	content:'';
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:0;
	height:90%;
	width:3px;
	background-color:#B1001D;
}
#crwchrono .time label {
	color:#98A4AC;
	text-transform:uppercase;
	font-weight:bold;
	font-size:16px;
}
#crwchrono .time .chrono {
	font-family:intercom;
	font-style:italic;
	font-weight:bold;
	font-size:33px;
	text-transform:uppercase;
}
body[rel='fr'] #crwchrono .time .chrono b:after {
	content:'j';
}
body[rel='en'] #crwchrono .time .chrono b:after {
	content:'d';
}
#crwchrono .time .chrono u:after {
	content:'h';
}
#crwchrono .time .chrono i:after {
	content:'m';
}
#crwchrono .time .chrono s:after {
	content:'s';
}
#crwchrono .nite {
	display:flex;
	align-items:center;
	color:#FFFFFF !important
}
#crwchrono .nite label {
	margin-right:20px;
	padding-right:20px;
	border-right:2px solid #606060;
	font-size:0;
}
#crwchrono .nite label svg {
	aspect-ratio:51 / 10;
	height:20px;
	fill:#FFFFFF;
}
#crwchrono .nite span {
	font-family:termina, sans-serif;
	font-weight:bold;
	font-style:normal;
	font-size:10px;
	text-transform:uppercase;
	line-height:1.2;
}

/*### THREEDEE BOATS ###*/
@media screen  {
#boatsLayer>g .threedee .q>g {
  display:none;
}
#boatsLayer>g .threedee.q0 .q>g.N,
#boatsLayer>g .threedee.q1 .q>g.NE,
#boatsLayer>g .threedee.q2 .q>g.E,
#boatsLayer>g .threedee.q3 .q>g.SE,
#boatsLayer>g .threedee.q4 .q>g.S,
#boatsLayer>g .threedee.q5 .q>g.SW,
#boatsLayer>g .threedee.q6 .q>g.W,
#boatsLayer>g .threedee.q7 .q>g.NW,
#boatsLayer>g .threedee.q8 .q>g.N {
  display:block;
}
#boatsLayer>g .threedee {
  display:none;
}
body.THREEDEEBOATS #boatsLayer .threedee {
  display:inherit;
}
body.THREEDEEBOATS #boatsLayer .twodee {
  display:none;
}

#boatsLayer>g  .threedee .c5 {fill:#3C3C3C;}
#boatsLayer>g  .threedee .c6 {fill:#F3F3F3;}
#boat20 .threedee .c1{fill:#00335B;}
#boat20 .threedee .c2{fill:#012744;}
#boat20 .threedee .c3{fill:#ED1C24;}
#boat20 .threedee .c4{fill:#00AEEF;}
#boat26 .threedee .c1{fill:#CD3D7D;}
#boat26 .threedee .c2{fill:#992C5C;}
#boat26 .threedee .c3{fill:#15B1D9;}
#boat26 .threedee .c4{fill:#15B1D9;}
#boat21 .threedee .c1{fill:#6ABD45;}
#boat21 .threedee .c2{fill:#569337;}
#boat21 .threedee .c3{fill:#FBE006;}
#boat21 .threedee .c4{fill:#0D88A5;}
#boat27 .threedee .c1{fill:#FFFFFF;}
#boat27 .threedee .c2{fill:#000000;}
#boat27 .threedee .c3{fill:#0AD7FF;}
#boat27 .threedee .c4{fill:#0AD7FF;}
#boat22 .threedee .c1{fill:#4D4D4F;}
#boat22 .threedee .c2{fill:#FFFFFF;}
#boat22 .threedee .c3{fill:#FAD16D;}
#boat22 .threedee .c4{fill:#FAD16D;}
#boat28 .threedee .c1{fill:#DF0A00;}
#boat28 .threedee .c2{fill:#870218;}
#boat28 .threedee .c3{fill:#ECEF00;}
#boat28 .threedee .c4{fill:#ECEF00;}
#boat23 .threedee .c1{fill:#FFFFFF;}
#boat23 .threedee .c2{fill:#1072B8;}
#boat23 .threedee .c3{fill:#E32A34;}
#boat23 .threedee .c4{fill:#E32A34;}
#boat29 .threedee .c1{fill:#0B072C;}
#boat29 .threedee .c2{fill:#2E6EF5;}
#boat29 .threedee .c3{fill:#E85200;}
#boat29 .threedee .c4{fill:#F7BF03;}
#boat25 .threedee .c1{fill:#21285D;}
#boat25 .threedee .c2{fill:#141940;}
#boat25 .threedee .c3{fill:#FFFFFF;}
#boat25 .threedee .c4{fill:#C8103E;}
#boat30 .threedee .c1{fill:#1CABE2;}
#boat30 .threedee .c2{fill:#1582AC;}
#boat30 .threedee .c3{fill:#FFFF00;}
#boat30 .threedee .c4{fill:#FFFFFF;}

}

#nav.on a:nth-child(n+2) {
	display:none;
}






/*#poiLayer .icon.sptresults {
	display:none !important;
}*/