/*définition des éléments de la page*/
@font-face
{
	font-family: "CaviarDreams";
	src: url("Police/CaviarDreams.ttf") format("truetype"),
		url("Police/CaviarDreams.woff") format("woff"),
		url("Police/CaviarDreams.woff2") format("woff2");
}

body
{
font-family: Caviardreams, verdana, arial;	
}

/*les téchniques avancées avec CSS3 et box-shadow */
.contener1
{
	display:flex;
	justify-content:space-between;
	margin-right:160px;
	width:1200px;
	margin-top:3px;
	margin-left;3px;
}

#slideshow1
{
	position:relative;
	border:1px solid blue;
	width:1200px;
	height:50px;
	padding:13px;
	margin:0 3px 2em;
    margin-bottom:10px;
	margin-left:35px;
	
	/*CSS effectif   action dégradée de la couleur */
	
	box-shadow:0 0 3px rgba(0,0,0, 0.2);
	background:#FFF;
	background:linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius: 2px 2px 2px 2px;
}

#slideshow1:before, #slideshow1: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); 
}

/*gestion des dimensions et débordement du conteneur */
#slideshow1 .container1
{
	position:relative;
	width:1200px;
	height:50px;
	overflow:hidden;
}
/*on pévoit un petit espace gris pour la timeline */
#slideshow1 .container1: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 des slides*/

#slideshow1 .slider1
{
	position:absolute;
	left:0;
	top:0;
	width:400%;
	height:50px;
}

/*annulation des marges sur figure*/

#slideshow1 figure
{
	position:relative;
	display:inline-block;
	padding:0;
	margin:-3px;
}

/*petit effet de vignette sur les images*/

#slideshow1 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;
}

/*style de ma ledende */

#slideshow1 .figcaption1
{
	position:absolute;
	left:0;
	right:0;
	bottom:3px;
	padding:15px;
	margin:0;
	border-top:1px solid rgba(255,255,255);
	text-align:center;
	letter-spacing:0.05em;
	word-spacing:0.03em;
	font-size:20px;
	font-style: italic;
	font-weight:bold;
	font-family:georgia,times,serif;
	background:#FFF;
	background: rgba(255,255,255,0.7);
	color:purple;
	text-shadow:-1px -1px 0 rgba(255,255,255, 0.3);
	
}

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

@keyframes slider1 
{
	0%, 20%, 100%   { left:0}
	0%, 20%, 100%   { left:0}
	25%, 45%        { left:-100% }
	50%, 70%        { left:-200% }
	75%, 95%        { left:-300% } 
	
}

/*completons le selecteur avec la propriété animation*/

#slideshow1 .slider1
{
	animation:slider1 64s infinite;
}
#timeline1
{
position:absolute;
background:#999;
bottom:15px;
left:15px;
height:1px;
background:rgb(214,98,13);
background:rgba(214,98,13,0.8);
width:0;

animation:timeliner1 64s infinite;
}
@keyframes timeliner1 
{
	0%, 25%, 50%, 75%, 100% {width: 0; }
	0%, 25%, 50%, 75%, 100% {width: 0; }
	20%, 45%, 70%, 90%      { width:1200px;}
	
}
@keyframes figcaptionner1
{
	0%, 25%, 50%, 75%, 100%{bottom:-55px;}
	0%, 25%, 50%, 75%, 100%{bottom:-55px;}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%{bottom:5px;}
}

/*ajoutons à l'élément figcaption la propriété animation */
#slideshow1 .figcaption1
{
animation: figcaptionner1 64s infinite;		
}