@charset "utf-8";
/* CSS Document */

#slideshow3 { 
    position: relative; 
    width: 300px; 
    height: 225px; 
    padding: 15px; 
    margin: 0 auto 2em; 
    border: 1px solid #ddd; 
    background: #FFF; 
    /* CSS3 effects */ 
    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); 
} 
    
 
#slideshow3:before, 
#slideshow3: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); 
} 
#slideshow3:before { 
    left:0; 
    transform: rotate(-4deg); 
} 
#slideshow3:after { 
    right:0; 
    transform: rotate(4deg); 
}
/* gestion des dimensions et débordement du conteneur */ 
#slideshow3 .container { 
    position:relative; 
    width: 303px; 
    height: 225px; 
    overflow: hidden; 
} 
/* on prévoit un petit espace gris pour la timeline */ 
#slideshow3 .container: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
*/ 
#slideshow3 .slider { 
    position: absolute; 
    left:0; top:0; 
    width: 500%; 
    height: 225px; 
} 
/* annulation des marges sur figure */ 
#slideshow3 figure { 
    position:relative; 
    display:inline-block; 
    padding:0; margin:0; 
} 
/* petit effet de vignette sur les images */ 
#slideshow3 figure:after { 
    position: absolute; 
    display:block; 
    content: " "; 
    top:0; left:0; 
    width: 100%; height: 100%; 
    box-shadow: 0 0 65px rgba(255,255,255, 0.5) inset; 
}
/* styles de nos légendes */ 
#slideshow3 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: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #555;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	font-size: small;
}
/* fonction d'animation, n'oubliez pas de prefixer ! */ 
@keyframes slider { 
    0%, 20%, 100%   { left: 0 } 
    25%, 45%        { left: -100% } 
    50%, 70%        { left: -200% } 
    75%, 95%        { left: -300% }
	100%, 120%        { left: -400% }
}
/* complétez le sélecteur : */ 
#slideshow3 .slider { 
    /* ... avec la propriété animation */ 
    animation: slider 16s infinite; 
}
#timeline { 
    position: absolute; 
    background: #999; 
    bottom: 15px; 
    left: 15px; 
    height: 1px; 
    background: rgb(214,98,13); 
    background: rgba(214,98,13,.8); 
    width: 0; 
    /* fonction d'animation */ 
    animation: timeliner 32s infinite; 
}
@keyframes timeliner { 
    0%, 25%, 50%, 75%, 100% { width: 0;     } 
    20%, 45%, 70%, 90%      { width: 300px; } 
}
@keyframes figcaptionner { 
    0%, 25%, 50%, 75%, 100%                     { bottom: -55px;    } 
    5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%       { bottom: 5px;      } 
}
/* ajouter à l'élément : */ 
#slideshow3 figcaption { 
    /* ... la propriété animation */ 
    animation: figcaptionner 32s infinite; 
}
.play_commands { 
    /* positionnement en haut à droite */ 
    position: absolute; 
    top: 25px; right: 25px; 
    z-index: 10; 
    /* dimensionnement des icônes */ 
    width: 22px; 
    height: 22px; 
    text-indent: -9999px; 
    border:0 none; 
    /* placez l'opacité à 1 si vous souhaitez voir les commandes */ 
    opacity: 0; 
    /* préparation de transition sur opacicty et right */ 
    transition: opacity 1s, right 1s; 
} 
/* on décale play légèrement sur la gauche */ 
.play { right: 55px; cursor: default; } 
    
/* création de l'icône pause avec 2 pseudos éléments */ 
.pause:after, 
.pause:before {
	position: absolute;
	display: block;
	content: " ";
	top: 0;
	width: 38%;
	height: 22px;
	background: #fff;
	background-color: rgba(255,255,255,0.5);
} 
.pause:after { right:0; } 
.pause:before { left:0; } 
    
/* création de l'icône play avec des bordures */ 
.play { 
    width: 1px; 
    height: 1px; 
    /* les transparentes forment la flèche */ 
    border-top: 10px solid transparent; 
    border-bottom: 10px solid transparent; 
    border-left: 20px solid #fff; 
    border-left: 20px solid rgba(0,0,0,0.5); 
    /* renseignez 1 pour voir l'icône de suite */ 
    opacity: 0; 
} 
    
/* apparition du bouton pause au survole */ 
/* apparition des boutons au focus */ 
#slideshow3:hover .pause, 
.play_commands:focus { 
    opacity: 1; 
    outline: none; 
}
/* stopper les animation */ 
.sl_command:target ~ #slideshow3 .slider, 
.sl_command:target ~ #slideshow3 figcaption, 
.sl_command:target ~ #slideshow3 #timeline, 
.sl_command:target ~ #slideshow3 .dots_commands li:first-child a:after { 
    animation-play-state: paused; 
} 
    
/* redémarrer les animations */ 
#sl_play:target ~ #slideshow3 .slider, 
#sl_play:target ~ #slideshow3 figcaption, 
#sl_play:target ~ #slideshow3 #timeline, 
#sl_play:target ~ #slideshow3 .dots_commands li:first-child a:after { 
    animation-play-state: running; 
} 
    
/* switch entre les boutons */ 
.sl_command:target ~ #slideshow3 .pause      { opacity:0; } 
#sl_play:target ~ #slideshow3:hover .pause, 
#sl_play:target ~ #slideshow3 .pause:focus   { opacity:1; } 
.sl_command:target ~ #slideshow3 .play       { opacity:1; right: 25px; cursor: pointer; } 
#sl_play:target ~ #slideshow3 .play          { opacity:0; right: 55px; cursor: default; }
#slideshow3 .commands { 
    position: absolute; 
    top: 45%; 
    padding: 5px 13px; 
    border-bottom:0; 
    font-size: 1.3em; 
    color: #aaa; 
    text-decoration:none; 
    background-color: #eee; 
    background-image: linear-gradient(#fff,#ddd); 
    text-shadow: 0 0 1px #aaa; 
    border-radius: 50%; 
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
} 
    
#slideshow3 .prev { left: -48px; } 
#slideshow3 .next { right: -48px; } 
    
#slideshow3 .commands { display:none; } 
#slideshow3 .commands1 { display: block; }
#slideshow3 .c_slider { 
    position: absolute; 
    left:0; top:0; 
    width: 400%; 
    height: 225px; 
    
}
/* on cache le slider */ 
.sl_i:target ~ #slideshow3 .slider                                   { visibility: hidden } 

/* lorsque on cible le premier slider */ 
/* on cache tous les "précédent" et "suivant" */ 
#sl_i1:target ~ #slideshow3 .commands                                { display: none; } 
/* on affiche seulement deux flèches */ 
#sl_i1:target ~ #slideshow3 .commands1                               { display: block; } 
/* correspond au décalage des images */ 
#sl_i1:target ~ #slideshow3 .c_slider                                { background-position: 0 0, 300px 0, 600px 0, 900px 0, 1200px 0; } 

    
/* même procédé lorsqu'on cible le second slide */ 
#sl_i2:target ~ #slideshow3 .commands                                { display: none; } 
#sl_i2:target ~ #slideshow3 .commands2                               { display: block; } 
#sl_i2:target ~ #slideshow3 .c_slider                                { background-position: -300px 0, 0 0, 300px 0, 600px 0, 900px 0; } 
#sl_i2:target ~ #slideshow3  li:first-child a:before   { left:18px; } 
    
/* puis le 3ème */ 
#sl_i3:target ~ #slideshow3 .commands                                { display: none; } 
#sl_i3:target ~ #slideshow3 .commands3                               { display: block; } 
#sl_i3:target ~ #slideshow3 .c_slider                                { background-position: -600px 0, -300px 0, 0 0, 300px 0, 600px 0; } 
#sl_i3:target ~ #slideshow3  li:first-child a:before   { left:36px; } 
    
/* et enfin le 4ème */ 
#sl_i4:target ~ #slideshow3 .commands                                { display: none; } 
#sl_i4:target ~ #slideshow3 .commands4                               { display: block; } 
#sl_i4:target ~ #slideshow3 .c_slider                                { background-position: -900px 0, -6000px 0, -300px 0, 0 0, 300px 0; } 
#sl_i4:target ~ #slideshow3  li:first-child a:before   { left:54px; }

/* et enfin le 4ème */ 
#sl_i5:target ~ #slideshow3 .commands                                { display: none; } 
#sl_i5:target ~ #slideshow3 .commands5                               { display: block; } 
#sl_i5:target ~ #slideshow3 .c_slider                                { background-position: -1200px 0, -9000px 0, -600px 0, -300px 0, 0 0; } 
#sl_i5:target ~ #slideshow3  li:first-child a:before   { left:72px; }



/* c'est parti pour l'animation ! */ 
@keyframes dotser { 
    0%, 100%    { opacity: 1; left: 0;      } 
    
    20%         { opacity: 1; left: 0;      } 
    22%         { opacity: 0; left: 0;      } 
    23%         { opacity: 0; left: 18px;   } 
    25%         { opacity: 1; left: 18px;   } 
    
    45%         { opacity: 1; left: 18px;   } 
    47%         { opacity: 0; left: 18px;   } 
    48%         { opacity: 0; left: 36px;   } 
    50%         { opacity: 1; left: 36px;   } 
    
    60%         { opacity: 1; left: 36px;   } 
    62%         { opacity: 0; left: 36px;   } 
    63%         { opacity: 0; left: 54px;   } 
    65%         { opacity: 1; left: 54px;   } 
   
    70%         { opacity: 1; left: 54px;   } 
    72%         { opacity: 0; left: 54px;   } 
    73%         { opacity: 0; left: 72px;   } 
    75%         { opacity: 1; left: 72px;   } 
	
    95%         { opacity: 1; left: 72px;   } 
    97%         { opacity: 0; left: 72px;   } 
    98%         { opacity: 0; left: 0;  } 
}