/* =====[ RESET ]======================================================================== */

body,h1,h2,h3,h4,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
}
ol{	margin-left:18px;}


/* =====[ GENERAL ]======================================================================== */
body {
	font-family: 'Muli', sans-serif;
	font-size:15px;
	color:#2c2c2c;
	position: relative;
	margin:0;
	padding:0;
	z-index:0;
	font-weight:400;
	

}

strong{	font-weight:700}

a {	text-decoration:none; color:#f61a28; }
a:hover {color:#0face3;}
p { text-align:left;	margin:10px 0; }
p > a, li > a {	 text-decoration:underline}

.contact a{text-decoration:none;}
hr {background: #ffffff;border:none; height:1px; margin: 10px 0}


h1{	font-size:40px; color:#ffffff; font-weight:400; text-transform: uppercase;}
h1 span{font-weight:900; font-size:48px; display:block}

.page h1{color:#0face3; margin:5% 0 30px 0; font-size:45px; font-weight:900}
.page h1 span{color:#000000; font-size:30px; font-weight:400}

h2{	font-size:34px; font-weight:400; color:#454545; text-transform: uppercase;}
h2 span{font-weight:900; display:block; font-size:38px;}
h3{	font-size:24px;	color:#000000; font-weight:400; margin:0; text-transform: uppercase;}
h3 span{font-weight:900; display:block; font-size:30px;}
h3 strong{font-weight:900;  font-size:24px;}
h4{	font-size:25px;	color:#454545; font-weight:300;}

hr{height:3px; background:#facf06; margin:20px 0}

.contenu{	position:relative;	width:80%;	margin:0 auto; }
.contenu2{	position:relative;	width:90%;	margin:0 auto; }
.icon{	margin:10px 5px; display:inline-block; font-size:25px; vertical-align: middle; }
.bg-gris{background:#f2f2f2; padding:5% 0}
.bg-noir{background:#111111; padding:5% 0; color:#ffffff}
.bg-rouge{background:#f61a28; padding:5% 0; color:#ffffff}
.bg-rouge h2{ color:#ffffff}

.theme{ width:90%; margin:0 auto; padding-top:5%; position:relative; z-index:-2 }
.theme img{width:100%; height:auto; max-width:1800px;}

.important{background:#f61a28; color:#ffffff; text-align:center; z-index:25; padding:20px; position:fixed; top:0; left:0; right:0; width:100%; box-sizing: border-box;}
.important a{color:#ffffff; font-weight: bold;}
.marge{padding:5% 0;}

ul.list {padding:25px; background:#f2f2f2}
ul.list li{list-style:none; text-align:left}
ul.list li:before{content: "➝ ";}

.center h2{text-align:center}

.note-pale{color:#817f7f }
.note-gros{font-size:18px; color:#f61a28}
.cadre{border:2px solid #817f7f; padding:25px; margin-top:40px; background:#f2f2f2}

#toTop {
    font-size: 40px;
    position: fixed;
    bottom: 5%;
    right: 5%;
    cursor: pointer;
    display: none;
    opacity: 0.2;
    z-index: 20;}

	#toTop:hover {
		color: #015696;
		opacity: 1;}

		/*ul.video-responsive li{
			overflow:hidden;
			padding-bottom:56.25%; 
			position:relative;
			height:0;
		   }
		   ul.video-responsive li iframe {
			left:0;
			top:0;
			height:100%;
			width:100%;
			position:absolute;
		   }

		   */


.video ul {display:flex; list-style:none; flex-wrap: wrap}
.video ul li{margin-bottom:25px; width:30%; margin-right:2.5%;
	}
	.video ul li div{
		overflow:hidden;
		padding-bottom:56.25%; 
		position:relative;
		height:0;}

	.video ul li div iframe {
		left:0;
		top:0;
		height:100%;
		width:100%;
		position:absolute;
	   }
.video ul li:nth-child(3){ margin-right:0;}

.video p{text-align:center}


.accueilvideo {border:1px solid #facf06; padding:20px; margin:5% auto;}
.accueilvideo p{text-align:center}

.img-promo-spyder{
	width:100%}

/* =====[ HEADER ]======================================================================== */
.icone-top{position:absolute; top:25%; right:0; display:flex; justify-content:flex-start; }
.icone-top a{padding:5px; }




header{display:flex; position:relative; }
header div:first-child{width:55%; background:#000000; color:#ffffff; padding:8% 100px 5% 100px; box-sizing:border-box; margin-bottom:50px;}
header div:last-child img{max-width:1042px; width:100%; height:auto;}
header div{width:45%;}
header h1{margin-top:5%;}

header.section{display:flex; position:absolute; top:0; left:0; right:0; }
header.section div{width:55%; background:#000000; color:#ffffff; padding:20px 100px; box-sizing:border-box;}
header.section div img{width:120px; height:auto;}
header.section h1{	font-size:18px; margin-top:0;}
header.section h1 span{font-size:22px;}

.annonce{max-width:800px; width:100%; height:auto; margin-bottom:20px;}



/* =====[ ACCUEIL ]======================================================================== */
.intro{position:relative; padding-bottom:5%;}
.intro img{max-width:1536px; width:100%; height:auto;}
.slogan{position:absolute; bottom:0px; left:-5%; background:#ffffff; padding:10px; box-sizing:border-box; width:30%;}

.icon-cours{display:flex; justify-content:center; align-items:center; margin:2% auto 5% auto; flex-wrap: wrap}
.icon-cours img{margin:0 10px; box-sizing: border-box; border: 0;
	border-radius: 50%;
	
	object-fit: cover; background:#000000}


	.icon-cours a:hover img{box-shadow: 0 0 10px rgb(0,0,0,0.8);}

.accueil-cours{display:flex; align-items:center}
.accueil-cours img{max-width:1065px; width:100%; height:auto;  }
.accueil-cours div:first-child{width:55%;}
.accueil-cours div:last-child{width:45%; box-sizing:border-box; padding:0 10% 0 5%;}

.accueil-cours .btn-border-noir, .accueil-cours .btn-bleu{margin:5px 0}
/*
.e-roule img{max-width:1920px; width:100%; height:auto; min-height:200px; }*/
.e-roule div{background:url('../images/bg-eroule.png') no-repeat top center; position:relative; padding:5%; box-sizing: border-box;} 
.e-roule h2{background:#facf06; padding:6px 25px; color:#ffffff;  display:inline-block; margin-left:5%}
.e-roule h3{color:#ffffff; font-size:40px; padding-bottom:25px;}
.e-roule h3 span{color:#3d4d56; display:block; font-size:38px;}
.e-roule .logo-eroule{position:absolute; bottom:0; left:20%;}
.e-roule .b-plus{margin:0 auto; margin-bottom:85px;}

.demi{display:flex; align-items: flex-start; justify-content:space-between; }
.demi > div{width:60%; box-sizing:border-box; }
.demi > div:last-child{width:40%; padding-left:5%; }


.accueil-enligne{ align-items:stretch; display:flex; flex-direction: row; justify-content:space-between; }
.accueil-enligne > div:first-child{width:38%; padding:0}
.accueil-enligne > div:first-child > div{ padding:35px; box-sizing: border-box;}
.accueil-enligne > div{width:58%;}
.accueil-enligne img{max-width:672px; width:100%; height:auto; }

.accueil-enligne .cadre{border:15px solid #454545; background:#ffffff; padding:35px; box-sizing:border-box;}
.accueil-enligne .cadre2{ border:0;  padding:6% 10%; text-align:center ; background:#f2f2f2; height:49%; }

.accueil-enligne .btn-bleu{margin:0 0 10px 0}


.accueil-enligne .cadre2 p{ text-align:center  }


.accueil-enligne .espace{margin-bottom:2%;}

a.show, a.linkToggle {
	background:url('../images/iconplus.png') no-repeat 0 0;
	padding:0 0 0 40px;
	display:inline-block;
	height:28px;
	text-decoration:none;
	margin-bottom:0px;
}
.showPlus{	border-bottom:1px solid #e0dfdf; margin-bottom:20px; padding-bottom:20px;}
a.show.minus, a.linkToggle.minus {	background-position:0 -28px;}

.showPlus > div{ padding:2% 0 3% 0}

.showPlus ul{margin:25px 25px 0 25px; list-style: square; color:#454545}
.showPlus ul li{padding-bottom:15px; }
.showPlus h3{color:#817f7f; }
.showPlus h4{color:#0face3; }

.img100 img{width: 100%; height:auto;}
.img100 {margin:5% auto}
.acces-rapide a{ display:block; }
.btn-gris{ font-size:18px; border:1px solid #b3b3b3; color:#817f7f; text-decoration: none; padding:10px; transition: 0.3s;}
a:hover.btn-gris{background:#b3b3b3; color:#ffffff;}
/* =====[ BOUTON]======================================================================== */

.btn-noir, .btn-rouge, .btn-border-noir, .btn-border-rouge, .btn-border-noir, .btn-border-blanc, .btn-bleu{display:inline-block; margin:20px 0; padding:10px 35px; text-decoration: none; transition: 0.3s;}

.btn-noir{background:#000000; color:#ffffff; border:1px solid #000000;  }
.btn-rouge{background:#f61a28; color:#ffffff; border:1px solid #f61a28 }
.btn-bleu{background:#0face3; color:#ffffff;  border:1px solid #0face3}
.btn-border-noir{border:1px solid #000000; color:#000000; }
.btn-border-rouge{border:1px solid #f61a28; color:#f61a28; }
.btn-border-blanc{border:1px solid #ffffff; color:#ffffff; }

a:hover.btn-noir{border:1px solid #000000; color:#000000;  background:transparent }
a:hover.btn-rouge{border:1px solid #f61a28; color:#f61a28;  background:transparent }
a:hover.btn-bleu{border:1px solid #0face3; color:#0face3;  background:transparent }

a:hover.btn-border-noir{border:1px solid #000000; color:#ffffff; background:#000000 }
.btn-bleu .icon, .btn-rouge .icon{	margin:0 5px;}

/* =====[ FOOTER ]======================================================================== */

footer {padding-top:3%}
footer p{	text-align:center; margin:20px 0}
footer ul{	display:flex; align-items:stretch; list-style:none;}
footer ul li{width:50%; box-sizing:border-box; padding:40px;}
.contact{background:#000000; padding:3% 0; color:#f2f2f2; text-align:center}
.contact ul{display:flex; justify-content:center;  text-align:center; list-style:none; align-items:center }
.contact ul li{width:30%; }
.contact ul li:nth-child(2){width:40%;  text-align:center }
.contact h2, .contact h3{color:#f2f2f2; text-align:center;}
.contact a, .contact a:hover{color:#cb2823; }
.contact .icon{color:#cb2823}

.bg-ndr{background:url(../images/footer-ndr.jpg) no-repeat top center; background-position: cover; min-height:1000px; position:relative;  }
.bg-ndr .contenu{padding-top:3%; }

.logo-conduipro { /*position:absolute; bottom:35px; left:0; right:0;*/ text-align:center}
.logo-conduipro img{max-width:275px; width:100%; height:auto;}

/*.bg-ndr .contenu{position:absolute; bottom:25px; left:0; right:0}*/

/* :::::[ IPAD HORIZONTAL ]:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and  (max-width: 1400px) {

}

@media screen and  (max-width: 1200px) {

	.contenu{	width:90%; }
	


.demi > div{width:50%; }
.demi > div:last-child{width:50%;  }
.contact ul{flex-flow: column}
.contact ul li{width:100%; }
.contact ul li:nth-child(2){width:100%; order:1   }

header h1{	font-size:28px;}
header h1 span{ font-size:32px; }

}


/* :::::[ GENERALE plus petit qu'un ipad vertical' ]:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (max-width: 1008px) {

	h1{	font-size:36px;}
	h1 span{font-size:40px; }
	
	h2{	font-size:30px; }
	h2 span{ font-size:34px;}
	h3{	font-size:22px;	}
	h3 span{font-size:28px;}
	h3 strong{font-size:22px;}
	h4{	font-size:18px;}

	.page h1{margin-top:45px; }
	

	.accueil-cours{flex-flow: column}
	
	.accueil-cours div, .accueil-cours div:first-child{width:80%;}
	.accueil-cours div:last-child{width:80%; padding:5% 0 0 0}
	header div:first-child img{width:140px; height:auto}

	.marge{padding:35px 0;}
	.bg-ndr .contenu{padding-top:10%; }
	.video ul {justify-content:space-between}
.video ul li{ width:48%; margin-right:0;}
}


/* :::::[ 480 PIXELS LAYOUT (IPHONE HORIZONTALE)]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (max-width: 752px) {

header div:first-child{width:100%; margin-bottom:0; padding:18px 5% 20px 5%; }
header div:first-child a{margin-left:100px; }


header{flex-flow: column; }
header.section{ position:relative;  }
header.section div, header div {width:100%;}

.theme{width:100%; padding-top:0; }
	
.accueil-enligne{  flex-direction: column; }
.accueil-enligne > div:first-child{width:80%; margin:0 auto}
.accueil-enligne > div{width:80%; margin:0 auto 3% auto}	
.accueil-enligne .cadre2{  padding:5%; height:auto; }


.demi{flex-flow: column }
.demi > div{width:100%; box-sizing:border-box; }
.demi > div:last-child{width:100%; padding-left:0; }

.e-roule{ overflow: hidden;}
.e-roule h2{margin:0 auto;}
.e-roule div{background-position:top left; } 
.video ul li{ width:100%; }

}
/* :::::[ 320 PIXELS LAYOUT (iphone vertical) ]::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@media screen and (max-width: 464px) {


	h1{	font-size:28px;}
	h1 span{font-size:32px; }
	
	h2{	font-size:28px; }
	h2 span{ font-size:32px;}
	h3{	font-size:20px;	}
	h3 span{font-size:26px;}
	h3 strong{font-size:20px;}

	/*header h1{	font-size:20px;}
	header h1 span{ font-size:22px; }*/

	.page h1{font-size:34px; }
	.page h1 span{ font-size:28px; }

	.accueil-cours div, .accueil-cours div:first-child{width:90%;}
	.accueil-cours div:last-child{width:90%; }	

.accueil-enligne > div:first-child{width:90%;}
.accueil-enligne > div{width:90%; }	

.e-roule h3{ font-size:35px; }
.e-roule h3 span{font-size:32px;}


}