/* CSS Slide Show */




#slideshow {      /*dimensions du cadre blanc autour des images*/
	position: relative;
	width: 640px;
	height: 310px;
	padding: 15px;
	/*padding-bottom: 90px;*/
	margin: 0 auto 2em;
	border: 1px solid #ddd;
	background: #ffffff;
	/* CSS3 effects */
/*	effet dégradé le long du cadre blanc*/
/*	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);*/	
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

/*@media screen and (max-width: 600px) {
				#slideshow {display: none;}
}*/


 
/* avanced box-shadow
 * tutorial @
 * https://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow 
*/

#slideshow:before,
#slideshow:after {
	position: absolute;
	bottom:16px;
	z-index: -10;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}

#slideshow:before {
	left:0;
	transform: rotate(-4deg);
}

#slideshow:after {
	right:0;
	transform: rotate(4deg);
}



/*#menu-item1 {
	width: 33.33%;
	}
	
#menu-item2 {
	width: 33.33%;
	}
	
#menu-item3 {
	width: 33.33%;
	}*/



/* gestion des dimensions et débordement du conteneur - des images par rapport au cadre */
#slideshow .container {
	position:relative;
	width: 640px;
	height: 310px;
	overflow: hidden;
}
	
	
/* on prévoit un petit espace gris pour la timeline*/
/*#slideshow .containerslide:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	width: 100%;
	height: 1px;
	background: #999;
}*/



/* 
   le conteneur des slides
   en largeur il fait 100% x (le nombre de slides + 1)
*/
#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 1500%;
	height: 310px;
}

#slideshow img {
     width : 640px;
     height : 310px;
}


/* annulation des marges sur figure */
#slideshow figure {
	position:relative;
	display:inline-block;
	padding:0; margin:0;
}



/* petit effet de vignette sur les images */
/*#slideshow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}*/



/* styles de nos légendes */
#slideshow figcaption {
	position:absolute;
	left:0; right:0; bottom: 5px;
	padding: 20px;
	margin:0;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Arial, Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #000;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}




/* fonction d'animation, n'oubliez pas de prefixer ! */

@-webkit-keyframes slider {
	0%, 5%, 100%	{ left: 0 }        /* 5% = le temps de visionnage de chaque image  */
	7%, 12%		    { left: -101% }    /* -101% = le décalage de l'image par rapport à la fenêtre visible */
	14%, 19%		{ left: -201% }    /* il faut ajuster ce % pour que chaque photo ne dépasse pas  */
	21%, 26%		{ left: -302% }    /* la différence entre 19% et 21 % = le temps pour passer à la photo suivante  */
    28%, 33%		{ left: -402% }
    35%, 40%		{ left: -503% }
    42%, 47%		{ left: -604% }
    49%, 54%		{ left: -704% }
    56%, 60%		{ left: -805% }
    62%, 67%		{ left: -905% }
    69%, 74%		{ left: -1006% }
    76%, 81%		{ left: -1107% }
    83%, 88%		{ left: -1208% }
    90%, 95%		{ left: -1309% }
}

@-moz-keyframes slider {
	0%, 5%, 100%	{ left: 0 }        /* 5% = le temps de visionnage de chaque image  */
	7%, 12%		    { left: -101% }    /* -101% = le décalage de l'image par rapport à la fenêtre visible */
	14%, 19%		{ left: -201% }    /* il faut ajuster ce % pour que chaque photo ne dépasse pas  */
	21%, 26%		{ left: -302% }    /* la différence entre 19% et 21 % = le temps pour passer à la photo suivante  */
    28%, 33%		{ left: -402% }
    35%, 40%		{ left: -503% }
    42%, 47%		{ left: -604% }
    49%, 54%		{ left: -704% }
    56%, 60%		{ left: -805% }
    62%, 67%		{ left: -905% }
    69%, 74%		{ left: -1006% }
    76%, 81%		{ left: -1107% }
    83%, 88%		{ left: -1208% }
    90%, 95%		{ left: -1309% }
}

@-ms-keyframes slider {
	0%, 5%, 100%	{ left: 0 }        /* 5% = le temps de visionnage de chaque image  */
	7%, 12%		    { left: -101% }    /* -101% = le décalage de l'image par rapport à la fenêtre visible */
	14%, 19%		{ left: -201% }    /* il faut ajuster ce % pour que chaque photo ne dépasse pas  */
	21%, 26%		{ left: -302% }    /* la différence entre 19% et 21 % = le temps pour passer à la photo suivante  */
    28%, 33%		{ left: -402% }
    35%, 40%		{ left: -503% }
    42%, 47%		{ left: -604% }
    49%, 54%		{ left: -704% }
    56%, 60%		{ left: -805% }
    62%, 67%		{ left: -905% }
    69%, 74%		{ left: -1006% }
    76%, 81%		{ left: -1107% }
    83%, 88%		{ left: -1208% }
    90%, 95%		{ left: -1309% }
}

@-o-keyframes slider {
	0%, 5%, 100%	{ left: 0 }        /* 5% = le temps de visionnage de chaque image  */
	7%, 12%		    { left: -101% }    /* -101% = le décalage de l'image par rapport à la fenêtre visible */
	14%, 19%		{ left: -201% }    /* il faut ajuster ce % pour que chaque photo ne dépasse pas  */
	21%, 26%		{ left: -302% }    /* la différence entre 19% et 21 % = le temps pour passer à la photo suivante  */
    28%, 33%		{ left: -402% }
    35%, 40%		{ left: -503% }
    42%, 47%		{ left: -604% }
    49%, 54%		{ left: -704% }
    56%, 60%		{ left: -805% }
    62%, 67%		{ left: -905% }
    69%, 74%		{ left: -1006% }
    76%, 81%		{ left: -1107% }
    83%, 88%		{ left: -1208% }
    90%, 95%		{ left: -1309% }
}   

@keyframes slider {
	0%, 5%, 100%	{ left: 0 }        /* 5% = le temps de visionnage de chaque image  */
	7%, 12%		    { left: -101% }    /* -101% = le décalage de l'image par rapport à la fenêtre visible */
	14%, 19%		{ left: -201% }    /* il faut ajuster ce % pour que chaque photo ne dépasse pas  */
	21%, 26%		{ left: -302% }    /* la différence entre 19% et 21 % = le temps pour passer à la photo suivante  */
    28%, 33%		{ left: -402% }
    35%, 40%		{ left: -503% }
    42%, 47%		{ left: -604% }
    49%, 54%		{ left: -704% }
    56%, 60%		{ left: -805% }
    62%, 67%		{ left: -905% }
    69%, 74%		{ left: -1006% }
    76%, 81%		{ left: -1107% }
    83%, 88%		{ left: -1208% }
    90%, 95%		{ left: -1309% }
}


/* complétez le sélecteur : */
#slideshow .slider {
	/* ... avec la propriété animation */
	animation: slider 50s infinite;
}


@keyframes figcaptionner {
	0%, 7%, 14%, 21%, 28%, 35%, 42%, 49%, 56%, 62%, 69%, 76%, 83%, 90%, 100%			{ bottom: -55px;	}
	1%, 4%, 8%, 11%, 15%, 18%, 22%, 25%, 29%, 32%, 36%, 39%, 43%, 46%, 50%, 53%, 57%, 59%, 63%, 66%, 70%, 73%, 77%, 80%, 84%, 87%, 91%, 94%		{ bottom: 0px;		}
}



/* ajouter à l'élément : */
#slideshow figcaption {
	/* ... la propriété animation */
	animation: figcaptionner 50s infinite;

}