html { height: 100%; }
body { min-height: 100%; font-size:1em; font-family:Exo 2; font-weight:300; background:#2c2c2c; color:#fff; margin:0; padding:0; overflow-y:auto; overflow-x:hidden; }

/* LINKS */
a { text-decoration:none }
a:hover { color:#fff; }

a.prev-link { width:100%; text-align:center; color:#fff; float:left; z-index:99999; }
a.prev-link:hover { color:#e5c40b; }

a.link { color:#fff; }
a.link:hover { color:#e5c40b; }
a.link span { position:relative; top:0; animation:arrowmove infinite both 2s; }

a.page-nav { font-size:1.2em }

.text a { text-decoration:underline; color:#fff; }
.text a:hover { color:#e5c40b; }

a.button, input[type=submit].button { width:auto; min-width:300px; height:50px; line-height:50px; text-align:center; background-color:#e5c40b; color:#1e4e64; font-size:1.4em; font-family:"Lobster Two"; padding:0 20px; display:inline-block; margin:auto; box-sizing:border-box; font-weight:bold; transition:background-color ease .5s; box-shadow:0 0 0 #fff; }
a.button:hover, .button:focus, input[type=submit].button:hover, input[type=submit].button:focus { background-color:#fff; box-shadow:0 0 10px #fff; color:#1e4e64; }

/* TITRES */
h2 { font-size:3em; font-weight:100; color:#fff; text-align:left; border-bottom:1px solid #20E1C6; padding-bottom:50px; font-family:'Work Sans'; }
h2 strong { font-weight:100; color:#20E1C6; }
	
h3 { width:100%;font-size:2em; font-weight:bold; text-align:center; color:#e5c40b; margin:10px 0; font-family:Lobster Two; float:left;}
.text h3 { text-align:left; }

/* PAGES */
.page { width:100%; height:100%; float:left; position:relative; top:0; z-index:999; opacity:0; transition:opacity ease 0.5s; overflow:auto; box-sizing:border-box; }
.page.focus { overflow:hidden; }
	.page .wrap { width:100%; height:auto; float:left; overflow:auto; overflow:hidden; padding:75px 0; box-sizing:border-box; position:relative; }
	.page .wrap.focus { overflow:auto; }
	.page .wrap .content { width:1000px; margin:auto; transition: top ease 0.5s; max-height:auto; text-align:center; overflow:auto; padding-bottom:20px; }
	 #create .wrap .content { width:820px; }
	.page .content .text { width:100%; padding:20px 0; font-size:1em; box-sizing:border-box; margin:auto; margin-bottom:20px; text-align:justify; }
	.page .content .text p { margin:10px 0; }

	#home .wrap .content {padding-bottom:100px}
	
	.page.black { background:#2c2c2c; z-index:1; }
	.page.blue { background:#20E1C6; z-index:1; }
	.page.white { border-top:10px solid #20E1C6; background:#fff; z-index:1; }
	.page.transparent { width:1px; background:transparent; z-index:0; }

	
.pages-front {
position:absolute; top:0; left:0; width:100%; z-index:1;
}
.pages-back {
position:fixed; top:0; left:0; width:100%; z-index:1;
}
.pages-middle {
position:absolute; top:0; left:0; width:100%; z-index:1;
}

#home.page { overflow:hidden }
	
/* PARTENAIRES */
.page .partenaires .partenaire { width:100%; float:left; margin-bottom:20px; }
	.page .partenaires .partenaire .logo { width:120px; height:120px; float:left; margin-top:10px; }
	.page .partenaires .partenaire .logo img { height:100px; line-height:100px; }
	.page .partenaires .partenaire .txt {	width:660px; height:150px; float:right;	}
	.page .partenaires .partenaire .txt h3 { text-align:left; margin-top:0; }
	

/* ETAPES */ 
.steps { width:650px; height:200px; margin:0 auto 20px auto; padding:20px 0; display:inline-block; }
	.steps h4 { margin-bottom:0px; }
	.steps p { margin:5px 0; }
	.steps .fa { font-size:1.8em; }
	.step { width:200px; height:200px; border-radius:125px; float:left; background:#fff; color:#1e4e64; padding:20px; box-sizing:border-box; }
	.step:nth-child(2) { margin:0 25px; }

/* POURCENTAGE */
.percent { width:600px; background:rgba(255,255,255,0.7); height:24px; line-height:24px; border-radius:3px; margin-bottom:10px; position:relative; top:-20px; margin:auto; }
.percent:hover { background:rgba(255,255,255,1); }
.percent .done { width:0%; background:#e5c40b; height:20px; border-radius:3px; display:inline-block; float:left; }
.percent .total { width:100%; position:absolute; left:0; color:#1e4e64 }

/* BOUTONS DE PARTAGE */
.share { width:100%; float:left; text-align:center; margin:20px 0; }
	.share ul { padding:0; }
	.share ul li { display:inline; }
	.share ul li a { font-size:1.6em; color:#1e4e64; background:#fff; width:40px; height:40px; line-height:40px; display:inline-block; border-radius:5px; transition:background-color ease .5s; margin:2px; }
	.share ul li a:hover, #share ul li a:focus { background-color:#e5c40b; }
	
/* FORMULAIRES */
input { border:none; border-bottom:1px dotted rgba(255,255,255,0.5); background:transparent; width:300px; height:30px; line-height:30px; margin:0; padding-bottom:10px; font-size:1.4em; color:#e5c40b; font-family:Lobster Two; text-align:center; }
	input:invalid { border-bottom:1px solid #F00; color:#f00; }
	input.button { border:none; cursor:pointer; }
	textarea { border:1px dotted rgba(255,255,255,0.5); background:transparent; width:600px; height:100px; line-height:30px; margin:10px 0 20px; padding:10px; font-size:1em; color:#e5c40b; font-family:Arial; text-align:left; }
	#give input { width:200px; margin:20px 0 30px; font-size:1.5em; }
	#nomperenoel #img-saved, #nomperenoel #img-saved img  { width:150px; height:150px; margin:auto; }
	
/* SLIDER */
.flexslider { background:transparent !important; border:none !important; font-size:1.4em; text-align:center; }
	.flexslider p { width:100%; margin:auto; overflow:hidden; padding:0 50px; box-sizing:border-box;  }
	.flex-control-paging li a { background-color:#FFF !important; }
	.flex-control-paging li a.flex-active { background-color:#E5C40B !important; }
	.flex-direction-nav a, .flex-direction-nav a.flex-next::before, .flex-direction-nav a.flex-prev::before  { color:#fff !important; }
	.flexslider .flex-direction-nav a { opacity:0.5 !important; }
	.flexslider:hover .flex-direction-nav a { opacity:1 !important; }
	.flex-direction-nav .flex-prev { left:0 !important; text-align:left; }
	.flex-direction-nav .flex-next { right:0 !important; }

/* MENU PRINCIPAL */
#main-menu { width:100%; height:50px; background:#fff; position:fixed; top:0; z-index:9999; box-shadow: 0 0 20px rgba(0,0,0,0.5) }
	#main-menu .content { width:800px; height:50px; margin:auto; }
	#main-menu .content ul { width:100%; height:50px; margin:0; padding:0; }
	#main-menu .content ul li { height:50px; line-height:50px; display:inline-block; }
	#main-menu .content ul li a { height:50px; line-height:50px; font-size:1em; color:#1e4e64; padding:0 10px; }
	#main-menu .content ul li a:hover, #main-menu .content ul li a:focus { color:#e5c40b; }
	#main-menu .content ul li.lang { float:right }

/* MENU FOOTER */
#footer-menu { width:100%; height:50px; background:#fff; position:fixed; bottom:0; z-index:9999; font-size:0.9em; box-shadow: 0 0 20px rgba(0,0,0,0.5) }
	#footer-menu .content { width:800px; height:50px; margin:auto; }
	#footer-menu .content ul { width:100%; height:50px; margin:0; padding:0; }
	#footer-menu .content ul li { height:50px; line-height:50px; display:inline-block; }
	#footer-menu .content ul li .logo { height:20px; position:relative; top:5px; }
	#footer-menu .content ul li a { height:50px; line-height:50px; font-size:1em; color:#1e4e64; padding:0 10px; }
	#footer-menu .content ul li a:hover, #footer-menu .content ul li a:focus { color:#e5c40b; }

@media (max-width:800px) {

	#maisons, #maisons2, #maisons-back, #ciel { display:none !important; }

	video { width:100% }
	
	h2 { font-size:2.5em !important }
	#home h2 { font-size:4em !important }
	h3 { font-size:1.5em !important }

	.bigger { font-size:1em; }	
	.video { width:100%; height:225px; }
	
	#main-menu { display:none }
	#footer-menu { display:none }
	
	/* PAGES */
	.page .wrap { padding:25px 0; box-sizing:border-box; top:0px !important }
	.page .wrap .content { width:100% !important; padding:0 20px; box-sizing:border-box; }
	
	/* ETAPES */ 
	.steps { width:100%; height:auto; }
		.steps p { margin:5px 0; }
		.steps .fa { font-size:1.8em; }
		.step { float:none; display:inline-block; margin:0 auto; clear:both; }
		.step:nth-child(2) { margin:25px auto; }
	
	/* SLIDER */
	.flexslider { font-size:1em }
	.flexslider p { padding: 0px 50px; }
	
	/* AVATARS */
	.avatars .avatar { margin:10px auto; float:none; clear:both; }

	/* POURCENTAGE */
	.percent { width:100%; }
	
	/* GENERATEUR */
	#generateur { width:300px; height:600px; }
		#generateur #elements-wrapper { width:100%; height:600px; }
		#generateur #elements-wrapper #types { width:100%; height:300px; }
		#generateur #elements-wrapper #types nav { width:100%; height:40px; line-height:40px; font-size:.8em; }
		#generateur #elements-wrapper #types nav a { width:40px; height:40px; }
		#generateur #elements-wrapper #types ul { height:260px; padding:0; }
		#generateur #elements-wrapper #elements { width:100%; height:300px; position:absolute; top:300px; left:0px; }
		#generateur #elements-wrapper #elements.active { top:0px; left:0px; }
		#generateur #elements-wrapper #elements > div { height:260px; top:40px; }
		#generateur #elements-wrapper #elements > div .mCustomScrollBox  { width:100%; height:180px; position:absolute; top:20px; }
		#generateur #elements-wrapper #elements nav { width:100%; height:40px; line-height:40px; font-size:.8em; }
		#generateur #elements-wrapper #elements nav a { width:40px; height:40px; }
		#generateur #elements-wrapper #elements ul { width:100%; height:260px; }
		#generateur #elements-wrapper #elements ul li { width:90px; height:90px; }
		#generateur #elements-wrapper #elements ul li a { width:90px; height:90px; }
		#generateur #elements-wrapper #elements ul li a img { width:90px; height:90px; float:left; }
		#generateur #elements-wrapper #elements div a { transform: scale(0.8,0.8) !important; background-position:center !important; }
		#generateur #resultat { width:100%; height:300px; position:absolute; left:0px; top:300px; }
		#generateur #resultat > div { width:100%; height:300px; }
		#generateur #resultat > div img { width:100%; height:300px; }
	
	a.button, input.button[type="submit"] { font-size:0.85em; }
	
}

@media (max-height:600px) {

	#maisons, #maisons2, #maisons-back, #ciel { display:none !important; }
	
}



.cellule {
width:20px; height:20px; background:transparent; position:absolute; bottom:-50px; border-radius:50%; box-shadow:0 0 10px rgba(255,255,255,0.3);
}