/*!

Design & codes by Geoffrey Crofte
http://creativejuiz.fr/

*/

/*SECTION slideshow*/
#slideshow {
/*	position: relative; */
        position: relative;
	width: 700px;
        /*width: 100%;*/
	height: 260px;
	margin: auto;
/*	background: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #eeeeee), color-stop(0.50, #ffffff),color-stop(1.00, #f2f1f0));
	background: -webkit-linear-gradient(90deg,#f2f1f0,#ffffff,#eeeeee);
	background: -moz-linear-gradient(90deg,#f2f1f0,#ffffff,#eeeeee);
	background: -o-linear-gradient(90deg,#f2f1f0,#ffffff,#eeeeee);
	background: linear-gradient(90deg,#f2f1f0,#ffffff,#eeeeee);
	background-repeat: no-repeat; */
    /*    z-index: -1; */
}
#slideshow .shadow {
	height: 8px;
	background: #f0f0f0;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #bbbbbb), color-stop(1.00, #f0f0f0));
	background: -webkit-linear-gradient(90deg,#f0f0f0,#bbbbbb);
	background: -moz-linear-gradient(90deg,#f0f0f0,#bbbbbb);
	background: -o-linear-gradient(90deg,#f0f0f0,#bbbbbb);
	background: linear-gradient(90deg,#f0f0f0,#bbbbbb);
	background-repeat: no-repeat;
}
#slideshow .next, #slideshow .prev {
	/*styles des liens du slideshow*/
	position: absolute;
	top: 120px;
	width: 60px;
	height: 2em;
	border: 1px solid #bbb;
	font-size: 1.5em;
	line-height: 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	color: #4d4d4d;
	outline: 0 none;
	-webkit-box-shadow: 0 0 5px #7799a7;
	-moz-box-shadow: 0 0 5px #7799a7;
	-ms-box-shadow: 0 0 5px #7799a7;
	-o-box-shadow: 0 0 5px #7799a7;
	box-shadow: 0 0 5px #7799a7;
}
#slideshow .next {
	/*right: 0;  */
	right: 65px;
	padding-right: 10px;
	border-right: 0;
	-webkit-border-radius: 8px 0 0 8px;
	-moz-border-radius: 8px 0 0 8px;
	-ms-border-radius: 8px 0 0 8px;
	border-radius: 8px 0 0 8px;
}
#slideshow .prev {
	left: 0;
	padding-left: 10px;
	border-left: 0;
	-webkit-border-radius: 0 8px 8px 0;
	-moz-border-radius: 0 8px 8px 0;
	-ms-border-radius: 0 8px 8px 0;
	border-radius: 0 8px 8px 0;
}
#slideshow .next:hover, #slideshow .prev:hover {
	-webkit-box-shadow: 0 0 3px #7799a7;
	-moz-box-shadow: 0 0 3px #7799a7;
	-ms-box-shadow: 0 0 3px #7799a7;
	-o-box-shadow: 0 0 3px #7799a7;
	box-shadow: 0 0 3px #7799a7;
}
#slideshow .next:focus, #slideshow .prev:focus { text-decoration: underline; }
#slideshow .next:active, #slideshow .prev:active {
	-webkit-box-shadow: 0 0 1px #7799a7;
	-moz-box-shadow: 0 0 1px #7799a7;
	-ms-box-shadow: 0 0 1px #7799a7;
	-o-box-shadow: 0 0 1px #7799a7;
	box-shadow: 0 0 1px #7799a7;
}
#slideshow figure {
	position: relative;
	top: 0;
/*	left: 95px; */
	left: 55px;
	width: 455px;
	z-index: 200;
}
#slideshow figcaption {
	position: absolute;
	top: 70px;
	left: 240px;
	width: 180px;
	padding: 10px;
	font-family: verdana, arial, sans-serif;
	font-size: 1.1em;
	color: #5d7885;
	background: #fff;
	border: 1px solid #809eac;
	background: rgba(255,255,255,0.7);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
	
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#slideshow figcaption strong {
	display: block;
	font-weight: bold;
	margin-bottom: 10px;
}
#slideshow figure:hover figcaption {
	left: 200px;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

/* SLIDESHOW CSS3 */
#sLast {
	position: relative;
	overflow: hidden; /*cache ce qui déborde de la division*/
	height:250px;
}
#sLast figure {
	float: left; 			/*pour aligner les figures*/
	margin-right: 400px; 	/*pour espacer les figures*/
}
#sContent {
	position: absolute; 		/* position absolue pour gérer plus facilement le glissement horizontal */
	left: 0; 					/* position de départ à gauche */
	z-index: 20; 				/* pour placer le contenu en dessous des boutons */
	width: 7500px; 				/* largeur du contenu : largeurFigure + largeurEspacementFigure = (500px + 400px) x 3 */
	height:245px; 				/* hauteur d'un figure */
	-webkit-transition: all 1s; /* on prévoit l'effet de transition pour webkit */
	-moz-transition: all 1s; 	/* idem pour firefox 3.7 */
	-ms-transition: all 1s; 	/* ms */
	-o-transition: all 1s; 		/* idem pour opera 10.5+ */
	transition: all 1s; 		/* w3c*/
}
.next, .prev { z-index: 30; } 							/* on place les boutons au dessus du contenu */
.prev2, .next2, .prev3, .next3, .prev4, .next4, .prev5, .next5, .prev6, .next6, .prev7, .next7, .prev8 { display: none; } 				/* les "autres" boutons ne sont pas immédiatement dispo */

/* quand S1 est targeté (donc quand on vient de la visu de S2) */
#s1:target #sContent { left: 0px; }						/* on revient à la position initiale */
#s1:target .next, #s1:target .prev { display: none; }		/* on planque tout les boutons, mais... */			
#s1:target .next1 { display: block; } 					/* ...on on fait réaparaitre le next1 */

/* quand S2 est targeté */
#s2:target #sContent { left: -900px; }					/* on fait défiler le contenu à 900px (400 d'espacement + 455 de largeur figure) */
#s2:target .next, #s2:target .prev { display: none; } 	/* on planque tous les boutons mais... */
#s2:target .next2, #s2:target .prev2 { display: block; } 	/* ...on fait réapparaitre les boutons suiv.(vers S3) et prec.(vers S1) */

/* quand S3 est targeté */
#s3:target #sContent { left: -1795px; }					/* on fait défiler le contenu à 1800px (400 d'espacement + 500 de largeur figure le tout par 2) */
#s3:target .next, #s3:target .prev { display: none; }		/* on planque tout mais...*/
#s3:target .prev3, #s3:target .next3{ display: block; }					/* ...on fait réapparaitre prec3 (vers S2) */

/* quand S4 est targeté */
#s4:target #sContent { left: -2690px; }					/* on fait défiler le contenu à 900px (400 d'espacement + 500 de largeur figure) */
#s4:target .next, #s4:target .prev { display: none; } 	/* on planque tous les boutons mais... */
#s4:target .next4, #s4:target .prev4 { display: block; } 	/* ...on fait réapparaitre les boutons suiv.(vers S3) et prec.(vers S1) */

/* quand S5 est targeté */
#s5:target #sContent { left: -3585px; }					/* on fait défiler le contenu à 900px (400 d'espacement + 500 de largeur figure) */
#s5:target .next, #s5:target .prev { display: none; } 	/* on planque tous les boutons mais... */
#s5:target .next5, #s5:target .prev5 { display: block; } 	/* ...on fait réapparaitre les boutons suiv.(vers S3) et prec.(vers S1) */

/* quand S6 est targeté */
#s6:target #sContent { left: -4480px; }					/* on fait défiler le contenu à 900px (400 d'espacement + 500 de largeur figure) */
#s6:target .next, #s6:target .prev { display: none; } 	/* on planque tous les boutons mais... */
#s6:target .next6, #s6:target .prev6 { display: block; } 	/* ...on fait réapparaitre les boutons suiv.(vers S3) et prec.(vers S1) */

/* quand S7 est targeté */
#s7:target #sContent { left: -5375px; }					/* on fait défiler le contenu à 900px (400 d'espacement + 500 de largeur figure) */
#s7:target .next, #s7:target .prev { display: none; } 	/* on planque tous les boutons mais... */
#s7:target .next7, #s7:target .prev7 { display: block; } 	/* ...on fait réapparaitre les boutons suiv.(vers S3) et prec.(vers S1) */

/* quand S8 est targeté */
#s8:target #sContent { left: -6285px; }					/* on fait défiler le contenu à 900px (400 d'espacement + 500 de largeur figure) */
#s8:target .next, #s8:target .prev { display: none; } 	/* on planque tous les boutons mais... */
#s8:target .prev8 { display: block; } 	/* ...on fait réapparaitre le bouton prec.(vers S7) */

/* ... */
/* END - SLIDESHOW CSS3 */