/* ----------------------------- ----------------------------- ----------------------------- */
/* CSS GENERIQUES */



/* ----------------------------- */
/* AFFICHER LES DIV BOOTSTRAP 

[class*="col-"] {
	 border: 1px solid grey;
	 border-radius: 6px;

} */
/* ----------------------------- */
/* BODY */
body{
	margin:0;
	padding:0;
	font-family: 'Roboto', sans-serif;
	text-align: left;
	color:#3f4950;
	line-height: 1.5em;
	background-color: #000;
	scroll-behavior: smooth;

	background-image:none;
}

.container{
	z-index:2;
}

a:link { 
text-decoration:none; 
} 

strong{
	color:inherit;
	font-weight: 500;
}
/*
.logo{
	font-weight: 700;
	font-style: italic;
}*/

/* ----------------------------- ----------------------------- ----------------------------- */
/* RESIZE & CENTER */
.imgResize100{
	max-width: 100%;
}

.imgResize80{
	max-width: 80%; 
	box-sizing: border-box;
}
.imgResize60{
	max-width: 60%; 
	box-sizing: border-box;
}
.imgResize40{
	max-width: 40%; 
	box-sizing: border-box;
}

.hCenter{
	text-align: center;
	display: flex;
	justify-content: center;
}

.hCenterColumn{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vCenter{
	display: flex;
	align-items: center;
}

.txtCenter{text-align: center;}

/* ----------------------------- ----------------------------- ----------------------------- */
/* MARGIN & vSPACE */

.marginBottom50{margin-bottom: 50px;}
.marginBottom80{margin-bottom: 80px;}

.paddingTop20{padding-top: 20px;}
.paddingTop50{padding-top: 50px;}

.vSpace_2{height: 2px;}
.vSpace_25{height: 25px;}
.vSpace_50{height: 50px;}
.vSpace_100{height: 100px;}
.vSpace_150{height: 150px;}

/* ----------------------------- ----------------------------- ----------------------------- */

.imgArrondieOmbree{
	border: 3px solid white;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.3); 
  	-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.3); 
  	box-shadow: 4px 4px 8px rgba(0,0,0,0.3); 

  	margin-bottom: 80px;
}

/* ----------------------------- ----------------------------- ----------------------------- */
/* BOUTONS */
.button{
	border: 2px solid;
	border-radius: 10px;
	text-align: center;
	padding: 10px 30px 10px 30px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-weight: 500;
	font-size: 20px;
}

.buttonContainer{
	display: flex;
	justify-content: center;
	position: relative;
}

.buttonContainer2{
	transition-property: opacity; 
    transition-duration: .3s; 
}
.buttonContainer2:hover{
	opacity:0.5;
}

/* ----------------------------- ----------------------------- ----------------------------- */
/* TITRES H2 */
h2{
	font-weight: 700;
	font-size: 40px;
	text-align: left;
	margin-bottom: 50px;
	line-height: 0.8em;
}

h2 small{
	font-weight: 300;
	font-size: 32px;	
	letter-spacing:-0.05em;
	color:inherit;
}

h2 .xsmall{ 
	font-weight: 300;
	font-size: 24px;	
	letter-spacing:-0.06em;
	}

.titresH1{
	display: flex;
}

.puceTitreH1{margin:0px 8px 0px 8px;}


iframe{
	border-radius: 5px;
}
/* ----------------------------- ----------------------------- ----------------------------- */
/* BLOCS DE TEXTES*/
.txtBlocs{
	margin-top :10px;
	padding: 20px 30px 20px 30px;
	font-weight: 300;
	font-size: 19px;
	text-align: left;
	line-height: 1.3em;
}


@media(max-width:767px){
	.txtBlocs{padding: 20px 100px 20px 100px;}
	.BlocDeTexteAvecIconeDessus{padding-top:50px;}

}

.iconeSurTxt{
	height: 90px;
	line-height:90px;
	text-align: center;
	margin-top: 20px;
}

.grdTxt{
	font-weight: 500;
	font-size: 22px;
}

.letterSpacingFaible{
	letter-spacing: -0.07em;
}

.sepOmbre{
	width:100%;
	height:16px;
	background-image:url(../../images/main/sepOmbre.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 80% 16px;
	margin-top:12px;
}

/* ----------------------------- ----------------------------- ----------------------------- */
/* CAROUSEL IMAC*/
.carouselIMAC{
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}

.carouselIMAC_ecran{
	width:100%;
	max-width: 600px;
	border:#070b18 25px solid;
	border-radius: 15px 15px 0px 0px;
}

.carouselIMAC_pied{
	width:100%;
	max-width: 600px;
}

.carousel-control.left,.carousel-control.right{
	background-image: none;
}

.carousel-indicators {
    bottom: -73px;
}

/* ----------------------------- ----------------------------- ----------------------------- */
/* BOUTS FIXES */


.objetsFixes{
	position: fixed;
	z-index:auto;
	right:17px;
	top:50%;
}

.boutFixe{
	height: 25px;
	width:25px;

	opacity: .3;

	
	background-image: url(../../images/main/boutFixeRd_bg.svg);
	background-repeat:  no-repeat;
	background-position: center;
	background-size: contain;
}

.boutFixe:hover{
	transition-property: opacity; 
    transition-duration: .3s; 
    opacity:.7;
}





/* ---------------------------- ---------------------------- ----------------------------*/
/* Backgrounds */
#main_navbar.shrink-active{background: #FFF;webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.3); box-shadow: 0px 2px 4px rgba(0,0,0,0.3);}


.navbar-brand {/*display: none;*/}
.wrapper{	
	width:100%;

	

}
/* ----- BG1 POUR ORANGE
#bg1{
	background-color:#ff7800;
	background-image: 
		url(../../images/main/_bg/bg1_fin.svg);
	background-repeat:  no-repeat;
	background-position:  bottom;
	background-size: 110%;
	background-attachment: scroll;
	background-blend-mode: normal;
	padding-top:50px;
	min-height:600px;
}
*/


#bg1{
	background-image: 
		radial-gradient(#03c1f0, #304fa3),
		url(../../images/main/_bg/bg1_fin.svg), 
		url(../../images/main/_bg/bg1_rd_blancs_01.png);
	background-repeat:  no-repeat, no-repeat, no-repeat;
	background-position:  center, bottom, 50% 87px;
	background-size: 110%;
	background-attachment: fixed, scroll, fixed;
	background-blend-mode: normal, normal, color-dodge;
	padding-top:50px;
	min-height: 800px;
}

.rdBlancs{
	background-image: url(../../images/main/_bg/bg1_rd_blancs_01.png);
	background-size:100%;
	width:1291px;
	height:733px;
	position:fixed;
	left:0%;
	top:10%;
	z-index:1;
	
}


#bgWhite1{
	background-color: white;
	width:100%;
}

#bg2{
	width:100%;
	background-color: #FFF;
}

#bgWhite2{
	background-color: white;
	margin-top: -1px;
}

#bg3{	
	background-image: 
		url(../../images/main/_bg/bg3_deb.svg), 
		url(../../images/main/_bg/bg3_fin.svg), 
		linear-gradient(to right, #fcaa36, #fc7336);
	background-repeat:  no-repeat, no-repeat, no-repeat;
	background-position:  top, bottom, center;
	background-size: 110%, 110%,100%;
	padding:80px 0px;
}

#bgWhite3{
	background-color: white;
	padding-top: 80px;
	margin-top: -1px;
}

#bg4{
	height:250px;
	background-image: 
		url(../../images/main/_bg/bg4_deb.svg), 
		radial-gradient(at top, #273f61, #041122);
	background-repeat:  no-repeat, no-repeat;
	background-position:  top, bottom;
	background-size: 110%, 110%;
}

/* ---------------------------- ---------------------------- ----------------------------*/
/* HEADER */

header{
	color:#FFF;
	font-size: 16px;
	
	margin-top:20px;

}
header.col-md-2 {
	height: 53px;
	line-height: -2em;
}

#menuHaut{
	font-weight: 100;
	margin-bottom:50px;
}

.logoHeader{
	padding: 0px 15px 0px 15px;
	margin-bottom: 50px;

}

/*.imgHeader{max-width: 534px;}*/

#baseline{
	padding: 0px 15px 0px 15px;
	
}
#baseline1{
	color: #FFF;
	text-align: center;
	font-weight: 300;
	font-size: 26px;
	line-height: 1.2em;
}
#baseline2{
	margin-top:15px;
	color: #FFF;
	text-align: left;
	font-weight: 100;
	font-size: 20px;
	
	line-height: 1.2em;
}

/* ---------------------------- ---------------------------- ----------------------------*/
/* 3 Blocs */

.cont3blocs{
	padding: 0px;
	margin-top: 30px;
}

._3Blocs{
	max-width:700px;
	min-height: 100px;
	padding:20px 20px 50px 20px; 
	margin:-1px 25px 10px 25px;
	background-color: #FFF;
	border-radius: 0px 0px 0px 0px;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

._3blocsTop{
	height: 35px;
	margin:0px 5px 0px 5px;
	background-size: 100% 102%;
	background-position: bottom center;
	background-repeat: no-repeat;
}


/*
#topBlocDirecteur{background-image: url("../../images/main/3Blocs_blocDir_bg.svg");}
#topBlocFormateur{background-image: url("../../images/main/3Blocs_blocForm_bg.svg");}
#topBlocStudent{background-image: url("../../images/main/3Blocs_blocStudent_bg.svg");}
*/

/* Titre 3Blocs */
.titre3Blocs{
	text-align: center;
	line-height: 1.7em;
	vertical-align: middle;
	
	display: flex;
	flex-direction: row;
	justify-content:center;
}

.titre3Blocs_txt{margin-left: 10px;}

.titre3blocs_thin{
	font-size: 20px;
	font-weight: 300;
	font-style: italic;
}
.titre3Blocs_bold{
	font-size: 35px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: -0.01em;
}

/* Textes 3Blocs */
.txt1_3Blocs{
	font-size: 18px;
	font-weight: 300;
	text-align: center;
	margin-top: 15px;
	letter-spacing: -0.02em;
}

.txt2_3Blocs{
	font-size: 16px;
	font-weight: 300;
	color:#74849a;
	text-align: center;
	padding-top: 10px;
	margin-bottom: 20px;
}

/* buttons 3Blocs */

#b_savoirPlus_dir, #b_savoirPlus_dir a{
	border-color: #e18e00;
	color :#e18e00;
	margin-top: 0px;

}

#b_savoirPlus_form, #b_savoirPlus_form a{
	border-color: #dfb70c;
	color :#dfb70c;
	margin-top: 0px;

}

#form_class_code label{
	color:#e09602;
}
#form_class_code label div{display:inline;}

#boutGoStudent.boutGo, #boutGoStudent.boutGo a, #form_class_code .input-group-btn:last-child > .btn{
	    border-radius: 50px;
    border: 2px #e09602 solid;
    color: #e09602;
    font-size: 26px;
    font-weight: 500;
    padding: 8px;
    width: auto;
    line-height: 0.7em;
    height: auto;
}

.inputStudent{
	margin-top: 0px;
	color :#e09602;	
	font-size: 18px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.inputStudent strong{font-size: 20px;}

.zoneInputStudent, #form_class_code input{
	width:146px;
	height: 28px;
	background-color: #faefd9;
	border-radius: 5px;
	margin-right: 10px;
	margin-top: 6px;
}
.inputStudentZoneEtBout{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}



/* ---------------------------- ---------------------------- ----------------------------*/
/* etage 3 DeuxServices */

#bg2, #bg2 a, #bg2 h2{color:#FFF;} /*color:#364f66;*/

#bg2 .txtBlocs{
	padding: inherit 50px inherit 50px;
}



/* ----------------------------- */
/* etage 4 Directeur */

#bgWhite2 .txtTitreH2 h2{color:#a8b3c5;}

#bgWhite2 .txtBlocs{
	font-size: 16px;
	margin-top:15px;
	padding-top:5px;	
}

#bgWhite2 .txtBlocs strong{
	font-size: 20px;
}
#bgWhite2 em{
	font-style: normal;
	font-weight:500;
	color:#e18e00;
}

/* ----------------------------- */
/* etage 5 Formateur */

#bg3, #bg3 h2{color:#FFF;}

#bg3 .txtBlocs{
	padding: 50px inherit 40px inherit;
}

.conclusion{
	font-weight: 500;
	font-size: 22px;
	margin-bottom: 40px;
}

/* ----------------------------- */
/* etage 6 Nos jeux */

#bgWhite3 .txtBlocs{
	padding: 20px 50px 40px 50px;
}

#bgWhite3 {
	color:#375066;
}

#bgWhite3 .txtTitreH2 h2{
	color:#375066;
}

/* ----------------------------- */
/* FOOTER */

#bg4{
	color:#FFF;
	font-weight: 300;
}

/* Needed to avoid a blue line form the .wrapper bg. */
footer{
	margin-top: -50px;
	background-image: none;;
}


.video_container_in_home_big_bandeau{
	text-align: center;
	display: flex;
	justify-content: center;

}
.video_container_in_home_big_bandeau iframe{border: solid 4px #FFF;}