@charset "UTF-8";
/* CSS Document */

/*:root {
 --main-rouge: rgba(211,57,60,1.00);
}*/

/* ***** GENERAL ***** */
*{
	padding:0;
	margin:0;
	-webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
html,body{
	width:100%;
	min-height:100%;
	position:absolute;
}
main,section{
	width:100%;
	box-sizing:border-box;
}
main:not(#mainAccueil){
	margin-top:60px;
}
h1,h2,h3{
	font-family: 'Montserrat', sans-serif;
}
p,a{
	font-family: 'Source Sans Pro', sans-serif;
}
a{
	text-decoration:none;
}
.btn{
	padding:7px 20px;
	text-align:center;
	border: 2px solid var(--main-rouge);
	color:#000;
	border-radius:40px;
	display:inline-block;
	font-size:14px;
	margin:20px;
}
/* ***** GENERAL ***** */

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

/* ***** ACCUEIL ***** */
#headerAccueil{
	width:100%;
	background-color:var(--main-rouge);
	padding-top:40px;
	padding-bottom:20px;
}
	#bigLogoAccueilContainer{
		background-color:#FFF;
		padding:10px;
		width:200px;
		height:200px;
		border-radius:50%;
		overflow:hidden;
		text-align:center;
		display:flex;
		flex-direction:column;
		justify-content:center;
		margin:auto;
	}
		#bigLogoAccueilContainer img{
			width:80%;
			height:auto;
			margin:auto;
		}
	#titleAccueilContainer{
		margin-top:40px;
		text-align:center;
		color:#FFF;
	}
		#titleAccueilContainer h1{
			font-size:22px;
			letter-spacing:2px;
		}
		#titleAccueilContainer p{
			font-size:14px;
			margin-top:20px;
			color:#FFF;
		}
	#animScrollContainer{
		margin-top:30px;
		position:relative;
		height:80px;
	}
	/* ----- SCROLL ANIM ----- */
	.icon-scroll,
	.icon-scroll:before{
	  position: absolute;
	  left: 50%;
	}
	.icon-scroll{
	  width: 20px;
	  height: 35px;
	  margin-left: -10px;
	  top: 50%;
	  margin-top: -35px;
	  box-shadow: inset 0 0 0 1px #fff;
	  border-radius: 25px;
	}
	.icon-scroll:before{
	  content: '';
	  width: 4px;
	  height: 4px;
	  background: #fff;
	  margin-left: -2px;
	  top: 4px;
	  border-radius: 2px;
	  animation-duration: 1.5s;
	  animation-iteration-count: infinite;
	  animation-name: scroll;
	}
	@keyframes scroll{
	  0%{
		opacity: 1
	  }
	  100%{
		opacity: 0;
		transform: translateY(20px);
	  }
	}
	/* ----- SCROLL ANIM ----- */
	#formations{
		width:100%;
		padding-top:30px;
	}
	#formationsList{
		width:100%;
		height:auto;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		list-style:none;
		border-sizing:border-box;
	}
	#formationsList li{
		margin:30px;
	}
	.formationBtn{
		width:200px;
		height:200px;
		padding:20px;
		text-align:center;
		font-size:13px;
		background-color:#CCC;
		color:#FFF;
		background-repeat:no-repeat;
		background-size:cover;
		display:flex;
		flex-direction:column;
		justify-content:center;
		border-radius:90%;
		box-shadow:5px 5px 10px #222;
	}
	
/* ***** ACCUEIL ***** */
/* -------------------------------------------------------- */

/* ***** ENTETE MENU ***** */
#headerMenu{
	width:100%;
	height:60px;
	background-color:var(--main-rouge);
	position:fixed;
	top:0;
	left:0;
	z-index:900;
}
	#logoHeaderMenuContainer{
		width:100px;
		height:100px;
		margin:auto;
		background:#FFF;
		border-radius:90%;
		overflow:hidden;
		display:flex;
		flex-direction:column;
		justify-content:center;
		text-align:center;
		border: solid 4px var(--main-rouge);
		position:relative;
		top:10px;
	}
		#logoHeaderMenuContainer img{
			width:80%;
			height:auto;
			display:inline-block;
			margin:auto;
		}
	#menu{
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		display:flex;
		flex-direction:row;
		justify-content:space-around;
	}
		.btnMenu{
			height:60px;
			line-height:60px;
			color:#FFF;
		}
/* ***** ENTETE MENU ***** */

#intro{
	min-height:650px;
	text-align:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
	position:relative;
	z-index:2;
	box-sizing:border-box;
	padding:20px;
}
	#intro h1{
		font-size:34px;
		color:#FFF;
		letter-spacing:2px;
		margin-bottom:20px;
	}

.withBackground{
	background-size:cover;
	background-repeat:no-repeat;
}
	@media screen and (min-width: 640px) {
		.withBackground{
			background-attachment:fixed;
		}
	}
	.withBackground p{
		color:#FFF;
	}
	.withBackground .btn{
		color:#FFF;
	}

section{
	padding:40px;
}
	
	section h2,#formations h2{
		color:var(--main-rouge);
		text-align:center;
		font-size:28px;
	}
	section h3{
		color:var(--main-rouge);
	}
	.title-container{
		margin-bottom:20px;
	}
	.text-container{
		padding:20px;
		margin:auto;
		margin-top:0px;
		margin-bottom:20px;
		width:80%;
		max-width:1200px;
	}
		.text-container p{
			width:100%;
		}
		.justify{
			text-align:justify;
		}
		.center{
			text-align:center;
		}
	
	.grid{
		display:grid;
		justify-items:center;
		max-width:1200px;
		margin:auto;
	}
		@media screen and (max-width: 640px) {
			.grid-2,.grid-3{
				grid-template-columns:100%;
			}
		}
		@media screen and (min-width: 640px) {
			.grid-2{
				grid-template-columns:50% 50%;
			}
			.grid-3{
				grid-template-columns:33% 33% 33%;
			}
		}
		

.contactSection{
	text-align:center;
	padding:20px;
}
#txt-prepacode{
	margin-top:20px;
}
#txt-prepacode img{
	margin-left:10px;
	vertical-align:middle;
	width:60px;
	height:60px;
}
/* -------------------------------------------------------- */

/* ***** FOOTER ***** */
#pushFooter{
	height:200px;
}
#footer{
	box-sizing:border-box;
	width:100%;
	padding:30px;
	background:rgba(26,33,38,1.00);
	color:#FFF;
	display:flex;
	flex-direction:row;
	font-size:12px;
	position:absolute;
	bottom:0px;
}
	#footerLeft,#footerRight{
		width:30%;
		text-align:center;
	}
	#footerLeft{
	}
	#footerCenter{
		width:40%;
		text-align:center;
	}
		#footerCenter img{
			display:block;
			margin:auto;
			width:80px;
			height:auto;
			margin-bottom:20px;
		}
	#footer a{
		padding:10px;
		margin:20px;
		color:#FFF;
	}
	
/* ***** FOOTER ***** */

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

/* ***** CONTACT ***** */
#mainContact{
	display:flex;
	text-align:center;
}
.map{
	width: 100%;
	height: 100%;
}
#contactContainer,#mapContainer{
	box-sizing:border-box;
}
	@media screen and (max-width: 640px) {
		#contactContainer,#mapContainer{
			width:100%;
		}
		#mainContact{
			flex-direction:column;
		}
		#contactContainer{
			padding-top:80px;
		}
		#mapContainer{
			height:400px;
		}
	}
	@media screen and (min-width: 640px) {
		#contactContainer,#mapContainer{
			width:50%;
		}
		#mainContact{
			flex-direction:row;
		}
	}
		#logoContactContainer{
			width:250px;
			margin:30px auto;
			text-align:left;
		}
		#logoContactContainer img{
			width:80%;
			height:auto;
		}
/* ***** CONTACT ***** */

/* ***** PARTENAIRES ***** */
#partenaires{
	padding-top:80px;
}
#partenairesList{
		width:100%;
		height:auto;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		list-style:none;
		border-sizing:border-box;
	}
	#partenairesList li{
		margin:20px;
	}
	.partenaireBtn{
		width:100px;
		height:100px;
		padding:20px;
		text-align:center;
		font-size:13px;
		background-color:#CCC;
		color:#FFF;
		background-repeat:no-repeat;
		background-size:cover;
		display:flex;
		flex-direction:column;
		justify-content:center;
		border-radius:90%;
		box-shadow:5px 5px 10px #222;
	}