/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
*{-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-user-select: text}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, img {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
input, textarea, button {
	font-family:	inherit;
	font-size:		inherit;
	color:			inherit;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
button {
	cursor: pointer;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/**** END OF CSS RESET ****/

* {
    margin:     0;
    padding:    0;
    border:     0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility:hidden;
	-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
    -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
/*
	-webkit-user-select: none;
    touch-action: none;
	cursor: none;
*/
}
.debug * {
    cursor: initial;
}

i{font-style: normal;}
a{color: inherit;}

h1 { font-size: calc(var(--fontSize) * 2.4); }
h2 { font-size: calc(var(--fontSize) * 2.2); }
h3 { font-size: calc(var(--fontSize) * 2.0); }
h4 { font-size: calc(var(--fontSize) * 1.8); }
h5 { font-size: calc(var(--fontSize) * 1.4); }
h6 { font-size: calc(var(--fontSize) * 1.2); }



body  {
	font-display: 		optional;
	font-family:    	JobLabo, arial, sans-serif;
	text-align:		    center;
	font-size:			1em;
	color:				#000;
	background:			#f4f4f4;

	--white:			#fff;
	--black:			#000;
	--lightgrey:		#acacac;
	--darkgrey:			#505050;
	--yellow:			#fceb21;
	--red:				#fc2121;
	--darkred:			#a70101;
	--green:			#00bb40;
	--darkgreen:		#006322;
	--orange:			#e79f00;
	--blue:				#276bc4;
	--darkblue:			#0f458c;

	--fontSize:			1em;

}
header, section, footer {
	width:			    100%;
}
hr { display: none; visibility: hidden; }

html[lang="en"] *[data-lg="fr"],
html[lang="en"] *[data-lg="nl"],
html[lang="fr"] *[data-lg="en"],
html[lang="fr"] *[data-lg="nl"],
html[lang="nl"] *[data-lg="fr"],
html[lang="nl"] *[data-lg="en"] {
    display:none!important;
}
i{font-style: normal;}


.hide { display: none!important }
.tcenter 	{	text-align:	center!important;	}
.tleft		{	text-align:	left!important;		}
.tright		{	text-align:	right!important;	}

.s10		{	font-size:	1rem!important;	    }
.s11		{	font-size:	1.1rem!important;	}
.s12		{	font-size:	1.2rem!important;	}
.s13		{	font-size:	1.3rem!important;	}
.s14		{	font-size:	1.4rem!important;	}
.s15		{	font-size:	1.5rem!important;	}
.s16		{	font-size:	1.6rem!important;	}
.s17		{	font-size:	1.7rem!important;	}
.s18		{	font-size:	1.8rem!important;	}
.s19		{	font-size:	1.9rem!important;	}
.s20		{	font-size:	2rem!important;	    }

.w5p { width: 5%; }
.w10p { width: 10%; }
.w15p { width: 15%; }
.w20p { width: 20%; }
.w25p { width: 25%; }
.w30p { width: 30%; }
.w33p { width: 33%; }
.w35p { width: 35%; }
.w40p { width: 40%; }
.w45p { width: 45%; }
.w50p { width: 50%; }
.w55p { width: 55%; }
.w60p { width: 60%; }
.w65p { width: 65%; }
.w66p { width: 66%; }
.w70p { width: 70%; }
.w75p { width: 75%; }
.w77p { width: 77%; }
.w80p { width: 80%; }
.w85p { width: 85%; }
.w90p { width: 90%; }
.w95p { width: 95%; }
.w100p { width: 100%; }

.pad05      {   padding:    0.5em!important;    }
.pad1       {   padding:    1em!important;    }


/***** MODIFIERS *****/
.hide { display: none!important; }

.hexaclip {
	clip-path: 		polygon(50% 0, 93% 25%, 93% 73%, 50% 100%,7% 75%,7% 25%);
}


.title {
	font-size:		3rem;
	font-weight: 	lighter;
}

/***** BUTTONS *****/
.button {
	display: 			flex;
	flex-wrap: 			wrap;
	flex-direction: 	row;
	align-items: 		center;
	font-family: 		inherit;
	font-size:  		inherit;
	color:				var(--white);
	font-weight: 		lighter;
	text-align:			center;
	text-transform: 	uppercase;
	text-decoration: 	none;
	color:				var(--white);
	background:			var(--black);
	box-shadow:			0 0 0 .1em var(--black);
}
.button span {
	display:			flex;
	align-items: 		center;
	justify-content: 	center;
	padding:			.8em 1.2em .75em 1.2em;
	width:				100%;
	font-size:  		inherit;
}
.button.button-inactive {
	opacity:			.4;
}
.button.button-red {
	color:				var(--white);
	background:			var(--red);
	box-shadow:			0 0 0 .1em var(--red);
}
.button.button-green {
	color:				var(--white);
	background:			var(--green);
	box-shadow:			0 0 0 .1em var(--green);
}
.button.button-transparent {
	color:				var(--black);
	background:			transparent;
	border:				0;
	box-shadow:			0 0 0 .1em var(--black);
}
.button.button-transparent span {
	color:				var(--black);
}
.button:hover {
	color:				var(--black);
	background:			var(--yellow);
	box-shadow:			0 0 0 .1em var(--yellow);
}
.button.button-transparent:hover {
	color:				var(--black);
	background:			var(--yellow);
	box-shadow:			0 0 0 .1em var(--black);
}
.button.button-red:hover {
	color:				var(--white);
	background:			var(--darkred);
	box-shadow:			0 0 0 .1em var(--darkred);
}
.button.button-green:hover {
	color:				var(--white);
	background:			var(--darkgreen);
	box-shadow:			0 0 0 .1em var(--darkgreen);
}
.button.tapped {
	animation:			tapped 150ms ease-out;
}


input.text {
	display:		inline-block;
	padding:        .8em .8em .75em .8em;
	background: 	#eee;
	background-clip: padding-box;
	border:			.1em solid #000;
	border-radius:	0;
	outline:		0;
}
input.text:hover {
	background-color:	rgba(0,0,0,.05);
}
input.text:active,
input.text:focus {
	border-color: 	var(--yellow);
	box-shadow:     none;
}




/***** BUTTONS *****/
.main__wrapper {
	display:		inline-block;
	margin:			0 auto;
	width:			100%;
}




#header {
	position: 		fixed;
	z-index:		9;
	top:			0;
	left:			0;
	width:			100%;
	min-height:		5em;
	background: 	var(--white);
	border-bottom: 	1px solid var(--lightgrey);
}
#header::before {
	content:		'';
	display:		block;
	width:			100%;
	height:			1.3em;
	background:		var(--black);
}
#header__logo {
	position: 		absolute;
	top:			0;
	left:			0;
	width:			11em;
	overflow: 		hidden;
}
#header__logo::before,
#header__logo::after {
	content:		'';
	position: 		absolute;
	z-index: 		1;
	top:			0;
	left:			0;
	display:		block;
	width:			3.9em;
	height:			6.6em;
	background:		var(--black);
	transform-origin: 100% 100%;
	transform:		skewY(30deg);
}
#header__logo::after {
	left:			4em;
	width:			7em;
	height:			5em;
	transform-origin: 0 100%;
	transform:		skewY(-30deg);
}
#header__logo img {
	position: 		relative;
	z-index: 		2;
	margin-left: 	1em;
	height:			6.6em;
}


.js #header__menu-button {
	position: 		absolute;
	top:			1.65em;
	right:			.5em;
	z-index: 		3;
	display:		inline-block;
	padding:		.5em .7em;
	font-size:		1.1em;
	text-transform: uppercase;
}
.js #header__menu-button::after {
	content:		'≡';
	display:		inline-block;
	vertical-align: middle;
	padding-left: 	.5em;
	font-size: 		1.25em;
}
.nojs #header__menu-button,
.nojs #header__menu-close {
	display:		none;
}

.nojs #header__menu {
	display:		block;
	text-align: 	right;
	padding-top:	.5em;
	padding-bottom:	.5em;
}

#header__menu a {
	display:		block;
	padding:		.5em;
	text-decoration: none;
}

.js #header__menu {
	display:		none;
	text-align: 	center;
}
.js #header__menu.open::after {
	content:		'';
	position: 		fixed;
	z-index: 		1;
	top:			50vh;
	left:			50vw;
	margin:			-150vw 0 0 -150vw;
	display:		block;
	width: 			300vw;
	height: 		300vw;
	background: 	var(--black);
	clip-path: 		polygon(50% 0, 93% 25%, 93% 73%, 50% 100%,7% 75%,7% 25%);
	animation:		scaleIn 300ms cubic-bezier(0.6,0,1,0.6);
}

.js #header__menu.open {
	display:		flex;
	flex-direction: column;
	position: 		fixed;
	z-index: 		9;
	top:			0;
	left:			0;
	width:			100vw;
	height:			100vh;
	justify-content:center;
}
.js #header__menu.open ol {
	position: 		relative;
	z-index: 		2;
	width:			100%;
	height:			auto;
	color:			var(--white);
}
.js #header__menu.open ol::before {
	content:		'';
	position: 		fixed;
	z-index: 		2;
	bottom:			-2em;
	right:			0;
	display:		block;
	width: 			3em;
	height: 		12em;
	background:		var(--yellow);
	transform: 		skewY(-30deg);
	transform-origin: 0 0;
}
.js #header__menu.open li a {
	display:		block;
	text-align: 	center;
	padding:		1.3em .8em;
	font-size:		1.4em;
	animation:		fadeIn 300ms ease-out;
}

#header__menu-close {
	position: 		relative;
	z-index: 		2;
	display:		inline-block;
	margin:			1em auto;
	width: 			4em;
	height: 		4em;
	background:		var(--white);
}
#header__menu-close::before,
#header__menu-close::after {
	content:		'';
	position: 		absolute;
	z-index: 		1;
	top:			48%;
	left:			25%;
	width:			50%;
	height:			.1em;
	background: 	var(--black);
	transform:		rotate(45deg);
}
#header__menu-close::after {
	transform:		rotate(-45deg);
}





#main {
	margin-top:		4.85em;
	padding-bottom:	3em;
}
#main h1[role="heading"] {
    margin-bottom:  .3em;
}
#main h6[role="heading"],
#main .main__intro {
    color:          var(--darkgrey);
	padding-bottom:	1em;
	font-weight: 	normal;
	line-height: 	1.1em;
}

#main .content-grid .content-griditem {
    margin:         1em 0 2em 0;
    padding:        1.5em 1em;
    background:     rgba(255,255,255,.8);
    box-shadow:     0 0 1em rgba(0,0,0,.3);
}




#footer {
	padding-top:	1em;
	padding-bottom:	3em;
	color:			var(--white);
	background:		var(--black);
}
#footer img {
	vertical-align: top;
	display:		inline-block;
	margin:			0 2em 1em 2em;
	width:			4em;
}
#footer .main__wrapper div {
	display:		inline-block;
	vertical-align: top;
	padding:		0 1em;
}
#footer .main__wrapper div a {
	display: 		inline-block;
	margin-top:		.5em;
}


#prompt-message {
	position:    fixed;
	z-index:     8;
	top:         4.9em;
	left:        0;
	padding:     2em .5em;
	width:       100%;
	text-align:  center;
	color:       var(--white);
	background:  var(--green);
	animation:	 slideInFromTop 200ms cubic-bezier(0,0.6,0.6,1);
}
#prompt-message[data-type="error"] {
	color:         var(--white);
	background:    var(--red);
}


@media (min-width: 20em) {
	body {
		font-size:			4.9vw;
		--fontSize:			4.9vw;
	}
	#header__menu ol a br {
		display:			none;
	}
}
@media (min-width: 25em) {
	body {
		font-size:			3.7vw;
		--fontSize:			3.7vw;
	}
	#footer .main__wrapper img {
		margin:			0 1em 1em 1em;
		width:			4em;
	}
	#footer .main__wrapper div {
		padding:		0 1em 0 0;
		width:			65%;
		text-align: 	left;
	}
}
@media (min-width: 700px) {
	body {
		font-size:		2.3vw;
		--fontSize:		2.3vw;
	}

	#header__logo {
		width:			11em;
	}

	#header__menu-button,
	#header__menu-close {
		display:		none!important;
	}
	#header__menu {
		display:		block!important;
		margin-left:	24%;
		width:			76%;
	}
	#header__menu ol {
		position: 		relative;
		z-index: 		2;
		display: 		inline-flex;
		flex-direction: row;
		align-items: 	center;
		justify-content: space-around;
		width:			100%;
		height:			4em;
	}
	#header__menu ol li {
		width:			100%;
		height: 		100%;
		font-size: 		1em;
	}
	#header__menu ol a {
		display:		flex;
		align-items: 	center;
		justify-content: center;
		height: 		100%;
		font-size:		.9em;
	}
	#header__menu ol a:hover,
	#header__menu ol a.active {
		background:		var(--yellow);
	}
	#header__menu ol a br {
		display:			initial;
	}

	#main {
		margin-top:		5em;
	}

	#main .main__wrapper .content-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
		gap:    1.5em;
	}

}
@media (min-width: 900px) {
	body {
		font-size:		1em;
		--fontSize:		1em;
	}
	.main__wrapper {
		width: 			850px;
		text-align: 	left;
	}

	#header__logo {
		left:			50%;
		margin-left:	-27.5em;
		width:			7.5em;
		overflow: 		initial;
	}
	#header__logo::before {
		left:			-5.4em;
		width:			9.3em;
	}
	#header #header__menu {
		display: 		inline-block;
		margin:			0 auto;
		width:			53.5em;
		text-align:		right;
	}
	#header #header__menu ol {
		width:			43.8em;
		text-align:		center;
	}
	#header #header__menu ol a {
		font-size:		1.1em;
	}


	#footer .main__wrapper {
		display:		inline-flex;
		flex-direction: row;
		align-items: 	center;
		padding-top:	2em;
	}
	#footer .main__wrapper img {
		margin:			0 1.5em 0 0;
	}
	#footer .main__wrapper div {
		width:			auto;
	}
}
@media (min-width: 1200px) {
	.main__wrapper {
		width: 			1150px;
	}
	#header {
		min-height:		6em;
	}
	#header__logo::before {
		left:		-9.5em;
		width:		12.3em;
		height: 	7em;
	}
	#header__logo::after {
		left:		6.5em;
		width:		12em;
		height: 	5em;
	}
	#header__logo {
		margin-left:	-37em;
	}
	#header__logo img {
		height:			8em;
	}
	#header #header__menu {
		width:			71.5em;
	}
	#header #header__menu ol {
		width:			51em;
		height:			4.7em;
	}

	#main {
		margin-top:		6em;
	}
	#main .main__wrapper .content-grid {
		grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
		gap:    	2.5em;
	}

	#prompt-message {
		top:		5.8em;
	}
	#prompt-message p {
		font-size:	1.3em;
	}
}