*{margin: 0;padding: 0;}
body{text-align:center; font-size:16px; overflow-x:hidden; font-family: 'Patrick Hand', cursive; background-color:#f8f4ef;}
h1 span{padding:0 50px; color:#000; background:#fff;}
a, a:hover, a:focus, a:visited, a:active{text-decoration:none; color:#fff;}

header{text-align:center; background:url(img/banniere_memory_theme.jpeg) scroll repeat-x center center / cover; margin-bottom:80px; box-shadow: 0px 10px 5px 0px #ececec; height:158px;}
h1{display:inline-block; padding:10px 40px; border-radius:20px; background-color:#00a19a; color:#fff; margin-top:50px;}

/* Page pourquoi  */
 #pourquoi{width:1024px; max-width:100%; font-size:22px; margin:0 auto;}
 #pourquoi p, #credits p{margin-bottom:30px;}
/* Page crédits */
 #credits{color:#000 !important; font-size:24px; width:600px; margin:0 auto;}
 #credits a{color:#000 !important;}

.clear{clear:both; display:block; border:none;}

/* Gestion de la galerie d'image */
#galerie-bg{position:fixed; width:100%; height:100%; background-color:rgba(0,0,0,0.3); top:0; left:0; z-index:500; display:none; flex-direction:column; justify-content:center; overflow:scroll;}
#galerie-bg.on{display:flex;}
.galerie{width:60%; max-width:50%; max-height:89%; margin:0 auto; position:relative;}
#galerie-carousel{padding-bottom:50px;}
.item img{margin:0 auto; height:100%;}

.close-galerie{position:absolute; top:-15px; right:-15px; display:inline-block; padding:5px 10px; background-color:#000; border-radius:200px; border:2px solid #fff;}
.line{width:25px; height:5px; background-color:#fff; display:block; margin:8px auto;}
.line:nth-child(1){-webkit-transform: translateY(6px) rotate(45deg);-ms-transform: translateY(6px) rotate(45deg);-o-transform: translateY(6px) rotate(45deg);transform: translateY(6px) rotate(45deg);}
.line:nth-child(2){-webkit-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); -o-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg);}

.carousel-control.left, .carousel-control.right{background:inherit;}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next{font-size:60px;}

li{width:260px; height:260px; display:inline-block; background-color:red; font-family: 'Lobster', cursive; padding:0 20px; cursor:pointer;}


.square{display:inline-block; cursor:pointer;}
.square img{max-width:100%;}
.next-quest{font-size:130%; color:#fff; display:inline-block; margin:30px 0; padding:10px; display:inline-block; border:1px solid #fff;}
.next-quest:hover{color:#D00134; background-color:#fff;}
.imageurs{padding:10px; display:inline-block;}

/* SYSTEME DE CARTE QUI SE RETOURNE  ---------------------------------------------------------------------------------*/

/* entire container, keeps perspective */
.flip-container, .flip-containerie{perspective: 1000; position:relative; width:10%; height:auto;}
.flip-container:before, .flip-containerie:before{content:""; float:left; padding-top:100%;}
.locked:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; z-index:3; background-color:rgba(0,0,0,0.2);}


/* flip the pane when hovered */
.flip-container.hover .flipper{transform: rotateY(180deg);}
.flip-containerie.hover .flipper{transform: rotateY(360deg);}
.flip-containerie *{width:100%;}
.flip-container, .flip-containerie{text-align: center; display:inline-block; margin:0 20px 40px;}
/*.flip-container, .flip-containerie, .front, .frontie, .back {width:260px; height:260px;}*/
.front, .frontie{z-index: 2; /* for firefox 31 */ transform: rotateY(0deg);}
.back{transform: rotateY(180deg);}
.back img{max-width:100%;}
/* flip speed goes here */
.flipper {transition: 0.6s;transform-style: preserve-3d;position: relative;}
/* hide back of pane during swap */
.front, .frontie, .back {	backface-visibility: hidden; position: absolute; top: 0; left: 0; box-shadow:3px 3px 7px 0 rgba(0, 0, 0, 0.3)}


.backie{position:absolute; top:0; left:0; height:100%; width:100%; text-align:center; font-weight:bold; font-size:250%; color:#d00134; font-family: 'Lobster', cursive; display:none;}
.flip-containerie.hover .backie{display:block; width:100%;}
.flip-containerie.hover .frontie{display:none;}
.flip-containerie.hover *{width:100%;}
.backie p:first-child{font-size:100%; transform:rotateY(360deg);}


/* Pages félicitations */
.victoire{width:5%;}
#felicitations h2{font-size:250%; color:#007e78;}
#felicitations{font-size:300%;}

/* Logos */
.logos-footer{text-align:center;}
.logos-footer img{vertical-align:bottom;}
.logo-auvergne{width:80px;}
.logo-ste{margin:0 40px;}
.logo-eu{width:40px;}
.logo-engage{width:65px;}
.separator{margin-bottom:30px;}

footer{text-align:center; padding:10px 0 20px; background:url(img/footer_memory_theme.jpeg) scroll repeat-x center center / cover; box-shadow: 0px 10px 5px 0px #ececec; position:fixed; bottom:0; left:0; width:100%; position:fixed; bottom:0; width:100%;}
footer a, footer a:hover, footer a:active, footer a:visited{text-align: center; display:inline-block; vertical-align:top; color:#007e78; width:30%;}
.footer-memory a, .footer-memory a:hover, .footer-memory a:active, .footer-memory a:visited{width:auto; vertical-align:middle;}
footer a img{display:block; margin:0 auto;}
footer a img:hover{opacity:0.8;}
.footer-int{background:url(images/banniere_footer_bois.jpeg) scroll no-repeat center center / cover; padding:15px 0; margin-top:80px; position:fixed; bottom:0; width:100%; color:#634e42;}
.footer-int .footernav{font-size:128%;}
.footer-int a, .footer-int a:hover, .footer-int a:active, .footer-int a:visited{color:#634e42; width:auto;}
.footer-int a:hover{color:#3B9E9B;}
.open-galerie{margin:-10px 100px 0;}

@media all and (min-width:1600px){
	.galerie{max-width:42%;}
	.text-container{padding-top:3%;}
}
@media all and (max-width:1780px){
	h1{margin:30px auto; font-size:240%;}
	.flip-container, .flip-containerie{margin:0 15px 30px;}
}



@media all and (max-width:1400px){
	header{background-size:inherit; padding:3px 0; margin-bottom:30px; height:118px;}
	h1{margin:30px auto; font-size:200%;}
	.flip-container, .flip-containerie{width:10%; height:auto; margin:0 7px 14px;}
	.flip-container:before, .flip-containerie:before{content:""; float:left; padding-top:100%;}
	.flip-container *, .flip-containerie *{width:100%; height:auto;}
	footer{background-size:inherit; padding:10px 0;}
 	#pourquoi{font-size:20px; margin-bottom:80px;}


	.victoire{width:8%;}
	#felicitations h2{font-size:200%;}
	#felicitations{font-size:250%;}
}

@media all and (max-width:900px){
	header{background-size:inherit; padding:10px 0; margin-bottom:40px;}
	h1{font-size:160%;}
	.galerie{width:90%; max-width:90%; max-height:89%;}

	.flip-container, .flip-containerie{width:20%; height:auto; margin:0 7px 14px;}
	.flip-container:before, .flip-containerie:before{content:""; float:left; padding-top:100%;}
	.flip-container *, .flip-containerie *{width:100%; height:auto;}

	.victoire{width:20%;}
	#felicitations h2{font-size:180%;}
	#felicitations{font-size:200%;}
}
/*
@media all and (max-width:1024px){
	h1{font-size:200%; margin-bottom:20px;}
	#carre{margin-bottom:20px;}
	.flip-container, .flip-containerie, .front, .frontie, .back, .square{width:245px; height:245px;}
}
@media all and (max-width:1100px){
	.flip-container{margin:0;}
	#felicitations .imageurs{margin-top:100px;}
}
@media all and (max-width:800px){
	h1{font-size:200%; margin-bottom:40px;}
	h1 span{padding:0 15px;}
	#carre{margin-bottom:40px;}
	#felicitations{margin-top:50px;}
	#felicitations .imageurs{margin-top:50px;}
	.flip-container, .flip-containerie, .front, .frontie, .back, .square{width:230px; height:230px;}
	.flip-container, .flip-containerie{margin:0;}
}
@media all and (max-width:600px){
	h1{padding:0; background:none;}
	h1 span{padding:0;}
}*/