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: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section,main {
	display: block;
}
body {
	line-height: 1;
	letter-spacing:1px;
	font-size:16px;
	color:#3f4946;
	background:#fff;
	font-family: 'Quicksand', sans-serif;
	min-width:520px;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
h1{font-size:3em;}
h2{font-size:1.3em;}
h3{font-size:1.55em;}
a{text-decoration:none;color:#3f4946;}
em{font-style:italic;}
strong{font-weight:bold;}
img{height:auto;width:auto;}

.clr{clear:both;}
/*******************************************************************************************************************************/
/****  HEADER  **************************************************************************************************************/

#top{position:relative;height:100vh;}

#slider{position:relative;height:100vh;overflow:hidden;}
	#slider img{position:absolute;top:-100%;bottom:-100%;left:-100%;right:-100%;min-width:100%;min-height:100%;margin:auto;}

#icons{position:absolute;right:0;top:10%;background:#fff;}
	#icons img{display:block;margin:15px 8px;}

#menu{position:absolute;bottom:0;width:100%;background:#fff;padding:2em 0;box-shadow:0 0 5px 0 #ccc;
	-webkit-transition:padding .3s;
		-ms-transition:padding .3s;
			transition:padding .3s;}
#menu.sticky{position:fixed;top:0;left:0;bottom:auto;padding:0;z-index:2;}
	
	#logo {float:left;font-size:1.5em;font-weight:bold;margin-left:5%;}
		#logo div{line-height:25px;}
		#logo div:nth-child(2){font-size:1.133em;}
		#logo div:nth-child(3){font-size:0.745em;}

	#menu nav {float:right;margin-right:5%;}
		#menu li {float:left;}
			#menu a{display:block;text-transform:uppercase;padding:0.4em 0.7em; margin: 0 0.2em;font-weight:bold;}


/*******************************************************************************************************************************/
/****  OBJECTIFS  **************************************************************************************************************/

#objectifs{position:relative;padding-bottom:30.75%; color:#fff;
	background-image:url('images/fond-formation.jpg');
	background-size:cover;
}
	#objectifs h1, #objectifs > img, #objectifs li{position:absolute;}
		#objectifs h1{left:5%;top:5%;color:#e1d97f;font-size:1.8em;text-transform:uppercase;}
		#objectifs > img{right:5%;top:-3%;box-shadow: -2px -2px 10px -2px #333;}

		#rosette{width:10%;max-width:150px;top:50%;left:50%;margin:-5% 0 0 -5%;z-index:1;}
			#rosette img{width:100%; display:block;}
			#rosette li{width:350%;font-size:1.2em;font-weight:bold;}
			#rosette li:after{position:absolute;content:'';top:0.6em;height:1px;background:#fff;z-index:-1;}
			#rosette li:nth-child(1){right:150%;top:-20%;text-align:right;}
			#rosette li:nth-child(2){right:110%;top:110%;}
				#rosette li:nth-child(1):after,
				#rosette li:nth-child(2):after{left:105%;width:30%;
					-webkit-transform-origin:-20% 50%;
					    -ms-transform-origin:-20% 50%;
					        transform-origin:-20% 50%;
				}
					#rosette li:nth-child(1):after{
						-webkit-transform:rotate(30deg);
							-ms-transform:rotate(30deg);
								transform:rotate(30deg);
					}
					#rosette li:nth-child(2):after{
							-webkit-transform:rotate(-55deg);
								-ms-transform:rotate(-55deg);
									transform:rotate(-55deg);
					}
			#rosette li:nth-child(3){left:110%;top:-50%;}
			#rosette li:nth-child(4){left:160%;top:20%;}
			#rosette li:nth-child(5){left:100%;bottom:-30%;}
				#rosette li:nth-child(3):after,
				#rosette li:nth-child(4):after,
				#rosette li:nth-child(5):after{right:105%;width:30%;
					-webkit-transform-origin:110% 50%;
					    -ms-transform-origin:110% 50%;
					        transform-origin:110% 50%;
				}
					#rosette li:nth-child(3):after{
							-webkit-transform:rotate(-60deg);
								-ms-transform:rotate(-60deg);
									transform:rotate(-60deg);
					}
					#rosette li:nth-child(4):after{
							-webkit-transform:rotate(-5deg);
								-ms-transform:rotate(-5deg);
									transform:rotate(-5deg);
					}
					#rosette li:nth-child(5):after{
							-webkit-transform:rotate(65deg);
								-ms-transform:rotate(65deg);
									transform:rotate(65deg);
					}

/*******************************************************************************************************************************/
/****  FORMATION  **************************************************************************************************************/
#formation{background:#b1ae8c;font-family: 'Open Sans', sans-serif;font-size:0.85em;margin-top:5%;}
	#formation:after{content:'';display:block;clear:both;}
		#formation li{position:relative;line-height:1.2em;}
			#formation li:before{content:'';width:0.3em;height:0.3em;border-radius:50%;background:#fff;position:absolute;left:-1em;top:0.6em;}

	#formation .left{position:relative;float:left; width:50%;color:#fff;background:#48413a;height:100%;}
		#formation header{background:#ca4277;padding:4% 10% 4% 15%;}
			#formation h1{font-size:1.6em;font-weight:bold;line-height:1.2em;}
				#formation h1 span{display:block;font-size:0.7em;font-weight:normal;}
				#formation #tanguy{position:absolute;left:0;top:-5%;height:195%;}
		#formation #kakemono2{position:absolute;top:0;right:0;width:8%;}
		
		#formation .left h2{padding-left:15%;margin-top:4%;}
		#formation .left ul{padding:2% 8% 5% 15%;}

		#formation .right{margin-left:50%;padding:2% 2% 0 2%;}
			#formation .right h2{margin:4% 2% 2% 0;}
			#formation .right li{padding-left:7em;}
				#formation .right li:before{background:#48413a;}
				#formation .right li span{position:absolute;left:0;width:7em;top:0;}

#commentaires{position:relative;width:50%;margin-left:40%;padding-bottom: 1.5em;background:#ca4277;background-clip:content-box;color:#fff;overflow:hidden;}
	#commentaires footer{font-family: 'Open Sans', sans-serif;position:absolute;bottom:0;right:5%;color:#48413a;line-height:1.8em;padding-left:0.5em;}
	#commentaires footer:before{content:''; position:absolute;right:100%;top:0;border-right:1.2em solid #ca4277;border-bottom:1.5em solid transparent;}


#com_w{width:200%;overflow:hidden;
		-webkit-animation: comSlide 12s infinite alternate;
		        animation: comSlide 12s infinite alternate;}
	#com_w:hover{animation-play-state:paused;-webkit-animation-play-state:paused;}
		#com_w p{width:46%;float:left;padding:1% 2%;}
	}

	@-webkit-keyframes comSlide{
		0% {-webkit-transform: translateX(0);transform: translateX(0);}
		45% {-webkit-transform: translateX(0);transform: translateX(0);}
		55% {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
		100% {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
	}

	@keyframes comSlide{
		0% {-webkit-transform: translateX(0);transform: translateX(0);}
		45% {-webkit-transform: translateX(0);transform: translateX(0);}
		55% {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
		100% {-webkit-transform: translateX(-50%);transform: translateX(-50%);}
	}


/*******************************************************************************************************************************/
/****  MODULES  **************************************************************************************************************/
#modules{margin-top:10%;padding:0 8%;overflow:hidden}
	#modules h1{font-size:1.5em;margin-bottom:2%;}
	#modules ul{margin-right:-5%;}
		#modules li{float:left;width:22.5%;margin-right:2.5%;position:relative;color:#fff;}
			#modules .fond{width:100%;display:block;margin:0 auto;}
			#modules li p{position:absolute;bottom:0;width:80%;font-size:1.2em;height:12em;padding:0 10% 5%;text-align:center;font-weight:bold;}
			#modules .mod2 {color:#bc385a}
			#modules .mod4 {color:#48413a}
				#modules .icon{display:block;margin:10% auto;}

/*******************************************************************************************************************************/
/****  ACTIVITES  **************************************************************************************************************/

#activites{margin-top:10%;position:relative;padding:0 4% 20% 0;overflow:hidden;}
	#activites:after{content:'';display:block;clear:both;}

	#activites h3, #activites article{float:left;width:29.333%;margin-left:4%;}
	#activites h3{font-size:1.4em;color:#a48b5c;}
		#activites h3 span{display:block;font-weight:bold;font-size:1.2em;}
	#activites h1{font-size:1.1em;font-weight:bold;border-bottom:1px solid #333;padding-bottom:2.5%;margin-bottom:2.5%;}
		#activites h1 span{text-transform:uppercase;}
			#activites article p{margin-bottom:5%;}

	#bg{position:absolute;bottom:0;width:100%;height:100%;z-index:-1;}
		#bg img{position:absolute;bottom:0;left:0;width:100%;
			-webkit-animation: fade 30s infinite;
			        animation: fade 30s infinite;}
		#bg img:nth-child(2){-webkit-animation-delay:-20s;animation-delay:-20s;}
		#bg img:nth-child(3){-webkit-animation-delay:-10s;animation-delay:-10s}


	@-webkit-keyframes fade {
	    0%, 53%, 100% {opacity: 0;}
	    20%, 33% {opacity: 1;}
	}
	@keyframes fade {
	    0%, 53%, 100% {opacity: 0;}
	    20%, 33% {opacity: 1;}
	}

/*******************************************************************************************************************************/
/****  MODALITES  **************************************************************************************************************/

#modalites h1{position:relative;font-size:1.8em;padding:1% 5%;margin-bottom:5px;background:#433d37;color:#fff;}
	#modalites h1:before{content:'';position:absolute;bottom:100%;left:5%;width:8%;padding-bottom:4%;
		border-top-left-radius:50% 100%;border-top-right-radius:50% 100%;box-shadow: inset 0px -10px 20px -10px #000;
		background-color:#ca4277;background:#ca4277 url('images/icons/icon-mod-inter.png') center no-repeat;background-size:30%;
	}
#modalites table{width:100%;text-align:left;font-weight:bold;}
	#modalites th:first-child, #modalites td:first-child{padding-left:5%;border-left:none;width:30%;}
	#modalites th{background:#e0944b;color:#fff;padding:1em 1em 1em 2em;border-left:2px solid #fff;}
	#modalites td{padding:2em;border-left:2px solid #fff;}
	#modalites tr:nth-child(2) td{background:#b1ae8c;}
	#modalites tr:nth-child(3) td{background:#e4ae79;}

	#modalites table li{position:relative;margin-left:1em;}
	#modalites table li:before{content:'';position:absolute;left:-0.9em;top:0.4em;width:0.3em;height:0.3em;border-radius:50%;background:#3f4946;}

#modalites p{width:45%;margin-left:50%;font-style:italic;text-align:right;}


/*******************************************************************************************************************************/
/****  CONTACT  **************************************************************************************************************/

#contact{margin-top:2%;background:url('images/fond_contact.jpg');background-size:cover;color:#fff;padding:5% 0;box-shadow: inset 0px 0px 20px 0px #000;}
	
	#contact h1{font-size:1.2em;margin:0 0 5% 32.5%;font-weight:bold;text-transform:uppercase;}

/*** Form *************************/
form{width:60%;margin:0 auto;font-size:1.2em;}
	form p{margin:2% 0;}
	textarea, input, input:hover, input:focus{
		width:67.5%;line-height:2em;box-sizing:border-box;margin-left:2.5%;
		border:1px solid #fff;background:#fff;padding:0 1%;outline:none;font-family: 'Quicksand', sans-serif;color:#000;font-size:1.2em;}
	textarea{font-size:1em;line-height:1.2em;height:9.6em;}
	input[type="submit"], input[type="submit"]:hover, input[type="submit"]:focus{
		width:auto;padding:0 2%;margin-left: 32.5%;background:#ebd599;color:#433d37;border:none;cursor:pointer;font-size:1em;font-weight:bold;text-transform:uppercase;}

	label{float:left;width:30%;text-align:right;line-height:2em;font-weight:bold;}

	.condition{text-align:right;}
	#info{background:rgba(0,0,0,0.5);padding:1%;margin-left:32.5%;}
	form #info p{margin:0;}




/*******************************************************************************************************************************/
/****  MEDIA QUERIES  **************************************************************************************************************/

@media (max-width: 1300px) {
	textarea, input, input:hover, input:focus{width:50%;}
	label{width:40%;clear:left;}
	form{width:80%}
	.condition{width:90%;}
	#info{margin-left:0;}
}

@media (max-width: 1200px) {
	body{font-size:14px;}
	#rosette li{width:280%;}
}
@media (max-width: 1000px) {
	body{font-size:12px;}
	#modules li p{height:15em;}

}
@media (max-width: 850px) {
	#formation .left, #formation .right{float:none;width:100%;margin:0;padding:0;}
	#formation .right ul {padding: 2% 8% 5% 15%;}
	#formation .right h2 {padding-left: 15%;}
	#commentaires {width:70%;margin-left:20%;}
	#modules .icon{width:40%;}

	#modules li{width:30%;margin:2% 10%;}
}
@media (max-width: 800px) {
	#menu nav, #logo{float:none;text-align:center;}
		.sticky #logo{display:none;}
		#menu li {display:inline-block;float:none;}
	#objectifs{padding-bottom:45%;}
}
@media (max-width: 700px) {
	#objectifs {padding-bottom:5%;}
		#objectifs li, #objectifs h1{position:static;}
		#objectifs h1{padding:2% 5%;}
		#rosette{display:block;width:100%;max-width:100%;margin:0;}
			#rosette img{width:10%;margin:0 auto;}
		#rosette li, #rosette li:nth-child(1){list-style-type:disc;margin: 2% 20%;width:auto;text-align:left;}
			#rosette li:after{display:none;}

	#modules li{width:40%;margin:2% 5%;}

	#activites h3{float:none;width:92%;text-align:center;margin-bottom:5%;}
	#activites article{width:46%;margin:0 2%;}
	#bg{display:none;}

	#modalites p{width:65%;margin-left:30%;}

	label{float:none;display:block;width:auto;text-align:left;margin-bottom:0;line-height:1.2em;}
	textarea, input, input:hover, input:focus{width:90%;margin:0;}

}