body{
	font-family: 'Roboto' ;
	font-weight: 400;
	background-color: #eee ;
	color: #000;
	font-size: 17px;
	padding: 0;
	margin: 0;
}
a{
	text-decoration: none;
	font-family: 'Roboto mono' ;
	font-weight: 400;
	color: #000;
	border-bottom: 3px solid #0073a1;
}
a:hover{
	/* color: #0073a1; */
	font-weight: 800;
	border-bottom: 3px solid #000;
}
p{ line-height: 1.6em; }
h1 {
	font-size: 4em;
	font-weight: 500;
	margin: 0.5em 1.5em;
	display: block;
	margin-bottom: 0;
}
h2{
	margin-left: 3em;
	font-weight: 400;
	font-size: 2em;
	/* margin-bottom: 0; */
	/* margin-left: -19vw; */
}
h3{
	font-size: 1.35em;
	font-weight: 500;
	line-height: 1em;
	padding-left: 0em;
}
pre{
	font-size: 1em;
	font-weight: 500;
	line-height: 1.4em;
	font-family: 'Roboto mono';
}
.programme pre {column-count: 2; margin-left:0 !important; margin: 2em auto; }
.programme h3 { margin-left: -4em; margin-bottom: 1.5em; }
.programme-ctn { display: flow-root;  margin-top: 4em;}
.programme-img img{ max-width: 100%; max-height: 100%; margin-top: 0.4em; }
.programme-img{
	max-width: 24vw;
	max-height: 100%;
	float: left;
	margin-left: -26vw;
	/* margin-top: 1.5em; */
}
.ico { border-bottom: none !important; font-weight: normal !important; }
.ico img {
	mix-blend-mode: multiply;
	width: 2em;
}
.ico img:hover { opacity: 0.6; transition:0.1s; }
::-moz-selection { background-color: #0a95c3; color: #ffdb00; }
::selection { background-color: #0a95c3; color: #ffdb00; }
.bleu ::-moz-selection { background-color: #eee; color: #000; }
.bleu ::selection { background-color: #eee; color: #000; }

.svg{ height: 1em; margin-bottom: -0.2em; display: inline;}
.link{ padding-top: 1em; display: inline-block;}
/* HEADER ///////////////////////////////////////////*/
#menu{
	background-color: #eee;
	position: sticky;
	box-sizing: border-box;
	width: 100%;
	z-index: 2;
	top:0;
	left:0;
	padding: 2em 2em;
	display: flex;
	justify-content: space-between;
}
#menu a{
	text-align: center;
	z-index: 3;
	color: #000;
	font-weight: 400;
	border: none;
}
#menu a:last-child{ padding: 0;}
#menu a:hover{
	/* color: #0073a1; */
	border: none;
	font-weight: 900;
 }
.lineMenu{
	position: absolute;
	background-color: #000;
	top: 3.5em;
	height: 3px;
	transition: 0.5s;
	z-index: 2;
	border-radius: 3px;
}

.hidden{ display: none; }

/* PAGE INTRO ///////////////////////////////////////////*/
.bleu{
	width: 100%;
	background-color: #0083ae;
	color: #ffdb00;
	overflow: hidden;
}
.bleu.header, .bleu.footer{ height: 60vh; }
.code{
	font-family: "Flow Circular";
	font-size: 0.33em;
	line-height: 1.1em;
}
.header pre.code{
	margin-top: 6.1em;
	padding-left: 34vw;
	margin-left: -42em;
	position: absolute;
	max-height: 58vh;
	overflow: hidden;
}
.part{
	display: block;
	margin: auto;
	padding: 1em 10vw;
	max-width: 33em;
}
.part:not(.blue){
	margin-bottom: 4em;
	margin-top: 0;
	padding-top: 0;
}
.part pre:not(.code){ margin-left: -6em; white-space: normal; }
.part p{
}
.caroussel{
	width: 65vw;
	height: 60vh;
	position: absolute;
}
.caroussel1 { right: 0; top: 0; }
.caroussel2 { left: 0; top: 0; }
.blueShadow{
	background-color: #86c7e1;
	width: 66vw;
	position: absolute;
	mix-blend-mode: multiply;
}


.caroussel img {
	width: inherit;
	height: inherit;
	object-fit: cover;
	position: absolute;
}

/* PAGE ENSEIGNANTS  ///////////////////////////////////////////*/
.part.enseignants, .part.direction{
	padding-left: 6em;
	max-width: none;
}
.part.enseignants h2, .part.direction h2{ margin: 1em 2em 0.2em 0em; width: 100%; }
.face{
	width: calc(0.11 * ( 100vw - 8em ) );
	height: calc(0.16 * ( 100vw - 8em ) );
	background: -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box;
	background-position: center/cover ;
	/* margin: auto; */
	/* margin-bottom:0.5em; */
	/* filter: contrast(110%) brightness(110%) grayscale(100%); */
	filter: saturate(90%);
	/* filter: brightness(40%) saturate(10%) invert(2%) sepia(3%) saturate(4035%) hue-rotate(323deg) brightness(100%) contrast(103%); */
	/* background-blend-mode: lighten; */
	margin-top: 0.5em;
	margin-left: 2em;
	position: inherit;
	margin-bottom: 0.7em;
}
.peopleContainer{
	display: inline-block;
	padding-left: 0vw;
	padding-right: 0vw;
	width: calc(0.23 * ( 100vw - 8em ) );
	height: calc(0.23 * ( 100vw - 8em ) );
	overflow: hide;
	position: relative;
	vertical-align: top;
	margin-bottom: 4em;
}
.peopleContainer .code{
	position: absolute;
	top: 0; left:0;
	overflow: clip;
	width: calc(0.11 * ( 100vw - 8em ) );
	height: calc(0.16 * ( 100vw - 8em ) );
}
.peopleContainer .blueShadow{
	margin: 1.1em 1.2em;
	width: calc(0.11 * ( 100vw - 8em ) );
	height: calc(0.16 * ( 100vw - 8em ) );
	/* display: none; */
}
.peopleContainer a{ color: inherit; border: none; font-weight: normal; font-family: 'Roboto';}
.bio{ display: none; }
.bioShow{
position: absolute;
width: 20em;
padding: 0.6em 1em 0.6em 0.85em;
background-color: #eee;
color: #000;
font-size: 0.8em;
font-weight: 400;
}
a.partenaires { display: inline-block; border: none; margin: 0 1.5em 1.5em 0; }
a.partenaires img{ margin: 0; width:9em}

/* FOOTER ///////////////////////////////////////////*/
.inscription a {  }
.footer { position: absolute; }
.footer pre.code{
	left: 63vw;
	padding-top: 6em;
	position: absolute;
	max-height: 58vh;
	overflow: hidden;
}

.logoContainer a{
	border: none;
	display: block;
	padding-bottom: 0.2em;
}
.topLogo{
	left: 0;
	right: auto !important;
}

.logo { width: 7em; display: block; margin: 0.3em;}
.mixed {  mix-blend-mode: multiply; }
pre.logo{ width: fit-content; margin-bottom: 2em;}
pre.logo a{ border-bottom: none; color: #ffdb00; }
pre.logo a:hover{ border-bottom: 3px solid #ffdb00; }
.logoContainer{
	padding: 1.5em;
	background-color: #;
	z-index: 2;
	position: absolute;
	right: 0;
	background-color: #0083ae;
	/* background: #eee; */
	/* background-clip: content-box; */
}




@media (max-width: 800px), (orientation:portrait) { /************************************************************************************/

	body {font-size: 4.5vw; margin: 0; }
	h1 {font-size: 2.8em;  }
	h1, h2,.part { width: 96%; margin: 0 !important; padding:3% 2% !important; }
	h2 {  padding-bottom: 4% !important; }
	.mobileHidden{ display: none !important; }
	.part:not(.blue) pre, .peopleContainer { width: 100%; margin: 0 !important; padding:0 !important; }
h3{ margin: 1em 0; }
	.peopleContainer .code, .face, .peopleContainer .blueShadow {
		display: none;
	}
	.peopleContainer{display: block; height:auto; }
	.enseignants p { display: none; }
	.enseignants h2 { padding-bottom: 0% !important; padding-left: 0 !important; }
	.logoContainer{ right: auto; background: none !important; padding: 3% 2% !important; }
/* /////////////////////// BARRE MENU  /////////////////////////////////	 */

#menu, #menu a{ display: block; font-size: 1.2em; padding-bottom: 0.4em;  }
#menu { padding: 0; position: fixed;}
#menu a{ padding-top: 0.5em; }
#menuButton{
	display: inline !important;
	position: fixed;
	padding-top: 0.2em;
	right: 18px;
	width: 40px;
}
#menuButton:hover div{ border-top-color: #999 !important; }
#menuButton div{
	border-top: solid 3px #000 !important;
	height: 1px;
	padding-top:0.33em;
}
.lineMenu{ display: none; }


/* /////////////////////// INTRO  /////////////////////////////////	 */
	.caroussel {
		height: 30vh;
		margin: 0;
		margin-top: 25vh;
		width: 100%;
	}
	.caroussel2{ margin-top: 30vh; bottom: 0;}
	.blueShadow.caroussel1{ height: 17; margin-top: 23vh; }
	.blueShadow.caroussel2{ height: 17; margin-top: 28vh; }
.header{height: 55vh !important; }
.header a { margin: 4%; }
.header pre.code, .footer pre.code { margin-left: 4%; margin-top: 17%; padding:0 !important; width: 96% !important; height: 30vh;}
.footer pre.code {left: 24em; margin-top:8% !important; }

/* /////////////////////// hamburger  /////////////////////////////////	 */
	#hamburger { position: fixed; left: -9999px; }
	.line, .bgLine{
		display: block;
		cursor: pointer;
	    position: absolute;
		right: 24px;
	}
	.bgLine{ width:3em; height: 3em; }
	.line {
		height: 3px;
		width: 40px;
		background: black;
	}
	.top, .bottom {
	    display: block;
	    position: absolute;
	    background: black;
	}
	.top{ top: 15px; }
	.middle{  top: calc(12px + 15px) ; }
	.bottom { top: calc(24px + 15px) ; }
	.line { -webkit-transition: background 0s 0s; transition: background 0s 0s; }
	.top, .bottom {
	    -webkit-transition-duration: 0.1s, 0.1s;
	    transition-duration: 0.1s, 0.1s;
	    -webkit-transition-property: top, -webkit-transform;
	    transition-property: top, transform;
	}
	.middle {
	    -webkit-transition-property: opacity, -webkit-transform;
	    transition-property: opacity, transform;
	}
	#hamburger:checked ~ .middle { opacity: 0; }
	#hamburger:checked + .top {
	    -webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    transform: rotate(45deg);
	    top:  calc(12px + 15px) ;
	}
	#hamburger:checked ~ .bottom {
	    -webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    top:  calc(12px + 15px) ;
	}
}