* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

:root {
	--notchSize: 0.4em;	
}

@font-face{
	font-family: 'BG';
	src: url('j-light.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}

@font-face{
	font-family: 'BG';
	src: url('j-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
}

@font-face{
	font-family: 'BG';
	src: url('j-black.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
}

@font-face{
	font-family: 'Fira Sans';
	src: url('FiraGO-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face{
	font-family: 'Fira Sans';
	src: url('FiraGO-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
}

@font-face{
	font-family: 'Fira Sans';
	src: url('FiraGO-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}

@font-face{
	font-family: 'Fira Sans';
	src: url('FiraGO-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
}

body {
	line-height: 1.7em;
	color: rgb(173, 184, 184);
	background-color:rgb(8,22,23);
	font-family: 'Fira Sans';
	font-size: 14px;
	--wh:rgb(253,246,227);
	padding: 0;
	margin: 0;
	--csb:var(--sb);
}
body.ln {
	--deg: 160;
	--pc:hsl(160, 100%, 42%);
	--bc:rgb(66,148,120);
	--cb:hsl(160, 52%, 11%);
	--sb:hsla(160, 80%, 20%, 0.8);
	--pb:hsla(168, 20%, 20%, 0.8);
}
body.my {
	--deg: 203;
	--pc:hsl(var(--deg), 100%, 42%);
	--bc:hsl(var(--deg), 43%, 42%);
	--cb:hsl(var(--deg), 52%, 11%);
	--sb:hsla(var(--deg), 80%, 20%, 0.8);
	--pb:hsla(var(--deg), 20%, 20%, 0.8);
}
body.xx {--deg: 338;}

h1,h2,h3 {
	font-family: 'BG';
	color: var(--bc);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 1em 0;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */

div.content h2,div.ribbon h2 {text-align: center;width:100%;}

header {
	position:fixed;
	top:0;
	left:0;
	padding:0.5em;
	font-family: 'BG';
	font-weight: 200;
	width: 100%;
	height: 60px;
	z-index: 4;
	text-transform: uppercase;
	display:flex;
	align-items: center;
	justify-content: space-between;
}

header::before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(90deg,var(--pc),var(--cb));
	z-index: -1;
	transition: opacity 0.5s linear;
	opacity:0;
}

header * {
	user-select: none;
	-webkit-user-select: none;
}

header .home {
	color: var(--wh);
	font-weight: 800;
	letter-spacing: 0.05em;
	padding:1em 1em;
	opacity:0;
	cursor: pointer;
}

header.down::before,header.down .home {opacity:1;}

header ul {
	display: flex;
	list-style: none;
}

header ul li {
	padding: 1em 1em;
	line-height:1.5em;
}

header a {color:#afb8b8;text-decoration: none;}
header a img {height:0.7em;width:0.7em;}
header li:hover a img {opacity:.75;}
.cfs {font-weight:600;cursor:pointer;}
.cfs:hover {color:var(--pc);}

.splash-container {
	z-index: 1;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	position: fixed;
	display:flex;
	align-items: center;
	justify-content: center;
	background: center center rgb(0,0,0);
	background-size: contain;
	background-repeat: no-repeat;
	height:100vh;
}

.ln .splash-container {background-image: url(/ln/img/bg-ln.jpg);}
.my .splash-container {background-image: url(/ln/img/bg-my.jpg);}

.splash {
	display: none;
	margin: auto;
	min-width:50vw;
	text-align: center;
	text-transform: uppercase;
	font-family: 'BG';
}
.splash *, header, header * {transition: all ease 0.5s;}

/* This is the main heading that appears on the blue section */
.splash-head {
	font-size: 20px;
	font-weight:300;
	color: var(--wh);
	padding: 1.4em 0.5em;
	background-color:var(--sb);//rgba(66,148,120,0.25)
	text-shadow: 0px 0px 6px #000000;
	//border-radius: 5px;
	line-height: 1em;
	margin: 0;
	--notch: calc(2*var(--notch));
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
	color: var(--wh);
	letter-spacing: 0.05em;
	opacity: 0.8;
	font-weight: 500;
	text-shadow: 0px 0px 4px #000000;
	margin: 0.5em 0 0 0;
}

.content-wrapper {
	/* These styles are required for the "scroll-over" effect */
	position: absolute;
	top: 99.5vh;
	width: 100%;
	min-height: 12%;
	z-index: 2;
		font-size: 16px;
}

.scroll-prompt {
	position: absolute;
	bottom: 10.5vh;
	left: 50%;
	z-index: 100;
	transition: 1s opacity ease-out;
}

.scroll-prompt .scroll-prompt-shape {
	position: relative;
	animation: slidedown 2.25s infinite;
}

.scroll-prompt .scroll-prompt-shape:before,
.scroll-prompt .scroll-prompt-shape:after {
	content: "";
	display: block;
	position: absolute;
	width: 2em;
	height: .45em;
	top: 0;
	left: 0;
	background: var(--pc);
	border-radius: 0 .25em .25em 0;
	transform-origin: bottom left;
}

.scroll-prompt .scroll-prompt-shape:before {
	transform: scaleX(-1) rotate(-45deg);
}
.scroll-prompt .scroll-prompt-shape:after {
	transform: rotate(-45deg);
}

@keyframes slidedown {
	0% {opacity: 0;} 
	75% {opacity: 0.25;transform: translate(0, 5vh);}
	100% {opacity: 0;transform: translate(0, 5vh);}
}

/* We want to give the content area some more padding */
.content,.ribbon {
	padding: 1em 1em 3em;
	margin:0 auto;
	max-width: 1000px;
}

.content {background-color: var(--cb);}
.content::last-of-type {padding-bottom: 6em;}

.ribbon {background-color: rgba(0,0,0,0.5);}

footer {
	color: rgb(88,110,117);
	position: fixed;
	bottom: 0;
	width: 100%;
	font-family: 'BG';
	text-transform: uppercase;
	font-weight: 200;
	opacity:0.5;
	transition: all ease 0.5s;
	padding: 1em;
	text-align:center;
}
footer.down {
	background: rgba(0,0,0,0.8);
	opacity:1;
} 

.rip {--csb:rgba(200, 200, 200, 0.8);}
.portee {--csb:var(--pb);}
.content.category {background-color: var(--csb);padding:1em 1em 1em;opacity:0.9;}
.content.category h2 {color: var(--pc);}

.content-wrapper .content:first-child {
	clip-path: polygon(var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% calc(var(--notchSize)), 100% 100%,0% 100%, 0% var(--notchSize));
}

.content A,.label A {
	//font-weight:bold;
	text-decoration: none;
	font-variant: small-caps;
	color:var(--pc);
}
.content A:hover,.content A:focus {text-decoration: underline;}

.content B,.ribbon B {font-weight:400;font-variant: small-caps;}

.splash b {font-weight:500;}
.splash strong {font-weight:900;}
.my .splash strong,.my .home {font-feature-settings: "ss01";}
.ln .splash strong,.ln .home {font-feature-settings: "hlig";}
.content h2 b {font-weight:800;font-feature-settings: "hlig";}
.ln .alt {font-feature-settings: "ss02";}
.ln .home small {font-size:inherit;font-weight:100;}


section.content {padding:0;display:flex;align-items: center;background-color:var(--csb);}
section.content:nth-child(even) {flex-direction: row;}
section.content:nth-child(odd) {flex-direction: row-reverse;}
section div.Cdetails {
	width:50%;
	aspect-ratio:4/3;
	background-image:var(--url);
	background-size: cover;
	padding:1em;
	display:flex;
	flex-direction: column-reverse;
	//align-content: space-between;
	flex-wrap: wrap;
}

section.portee div.Cdetails {
	aspect-ratio:1/1;
}

section.vd {--lc: #D60011;--w:200;}
section.rv {--lc: #d65900;--w:200;}
section.en {--lc: #d6c400;--w:500;}
section.av {--lc: var(--pc);--w:800;}


section div.Cdetails div[class], .splash-head {
	clip-path: polygon(0% var(--notchSize), var(--notchSize) 0%, calc(100% - var(--notchSize)) 0%, 100% var(--notchSize), 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, var(--notchSize) 100%, 0% calc(100% - var(--notchSize)));
}


section div.Cdetails div {height:2em;line-height:2em;margin-top:1em;text-transform: uppercase;}
section div.Cdetails div[class] {
	color:var(--wh);padding:0 1em;
}
section.content:nth-child(even) h2 {
	background: linear-gradient(45deg,var(--wh),var(--pc));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
}
section.content:nth-child(odd) h2 {
	background: linear-gradient(45deg,var(--pc),var(--wh));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
}
.content.category.rip h2 {color:var(--cb);}
section.content.rip:nth-child(n) h2 {--wh:black;}
section.rip {color:rgb(43, 46, 46);}
section div.Cdetails div.statut {background-color: var(--lc);font-family:'BG';letter-spacing: 0.1em;font-weight:var(--w);}
section div.Cdetails div.icon {height:2em;width:2em;padding:0;cursor:help;}
section div.Cdetails div.icon>* {height:2em;width:2em;}
section div.Cbio {width:50%;padding:2em;}
section.content:nth-child(even) .Cdetails {
	align-items: flex-start;
	clip-path: polygon(0% 0%, 100% 0%, 100% calc(50% - 2 * var(--notchSize)), calc(100% - 2 * var(--notchSize)) 50%, 100% calc(50% + 2 * var(--notchSize)), 100% 100%, 0 100%);
}
section.content:nth-child(odd) .Cdetails {
	align-items: flex-end;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%, 0% calc(50% + 2 * var(--notchSize)), calc(2 * var(--notchSize)) 50%, 0% calc(50% - 2 * var(--notchSize)));
}
section.content:nth-child(even) .Cbio {text-align: left;}
section.content:nth-child(odd) .Cbio {text-align: right;}
#coat {display:none;}

.help {min-width:2vw;min-height:2em;line-height:2em;padding:0 1em;position:absolute;background-color:rgba(0,0,0,80%);z-index:100;height:auto;}
.help.odd {
	clip-path: polygon(calc(var(--notchSize)) 0%, calc(100% - var(--notchSize)) 0%, calc(100% - var(--notchSize)) 100%, calc(var(--notchSize)) 100%, calc(var(--notchSize)) calc(50% + calc(var(--notchSize))), 0 50%, calc(var(--notchSize)) calc(50% - var(--notchSize)));	
}
.help.even {
	clip-path: polygon(calc(var(--notchSize)) 0%, calc(100% - var(--notchSize)) 0%, calc(100% - var(--notchSize)) calc(50% - calc(var(--notchSize))), 100% 50%, calc(100% - var(--notchSize)) calc(50% + var(--notchSize)), calc(100% - var(--notchSize)) 100%, calc(var(--notchSize)) 100%);	
}

.content .contenu,.ribbon .contenu {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.ribbon .contenu {align-items: center;}

.content .contenu div,.ribbon .contenu div {
	padding: 1em;
	width: 50%;
}

.ribbon .contenu div img {
	width:100%;
}
h2 span {font-size:50%;}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 36em) {
	body {
	}

	.splash-head {
		font-size: 225%;
	}
}

@media (min-width: 48em) {
	body {
		font-size: 16px;
	}

	.splash-head {
		font-size: 225%;
	}
}


@media (max-width: 36em) {
	.splash-head {
		font-size: 200%;
	}
	
	section.content:nth-child(n) {flex-direction: column;}
	section.content>div {width:100%;}
	section.content:nth-child(n) .Cdetails {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(50% + 2 * var(--notchSize)) 100%, 50% calc(100% - 2 * var(--notchSize)), calc(50% - 2 * var(--notchSize)) 100%, 0 100%);
	}

	header ul {padding:0;}
	header ul li:first-child {display: none;}

	.content .contenu,.ribbon .contenu {
		flex-direction: column;
	}
	.content .contenu div,.ribbon .contenu div {
		width:100%;
	}

}
/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
	/* We increase the header font size even more */
	.splash-head {
		font-size: 300%;
	}
}

@media (min-width: 64em) {
	.content .contenu div {
		width:25%;
	}
}