@import url(http://fonts.googleapis.com/css?family=Dorsa);
@charset "utf-8";
/* CSS Document Slider */

.slideshow{
  position: relative;  
  width: 620px;  
  height: 440px;  
  padding: 15px;
  margin-top: 55px;   
  border: 1px solid #ddd;  
  background: #FFF;  
  /* CSS3 effects */  
  background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);  
  border-radius: 20px 20px 20px 20px;  
  box-shadow: 0 0 3px rgba(0,0,0, 0.2);
  float: left;
}

.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);
}

.slideshow .container{
  position: relative;
  width: 620px;
  height: 440px;
  overflow: hidden;
}

.slideshow .container:after{
  position: absolute;
  bottom: 0;
  left: 0;
  content: " ";
  width: 100%;
  height: 1px;
  background: #999;
}

.slideshow .slider{
  position: absolute;
  left: 0;
  top: 0;
  width: 400%;
  height: 310px;
}

.slideshow figure {  
    position:relative;  
    display:inline-block;  
    padding:0; margin:0;  
}  

.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;  
}  

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

.slideshow .slider {  
    /* ... avec la propriété animation */  
    animation: slider 32s infinite;  
}  

.slideshow .commands { 
  display: block;
  width: 60px;
  height: 60px; 
  position: absolute;  
  top: 45%;  
  padding: 5px 13px;  
  border-bottom:0;  
  font-size: 1.3em;  
  text-decoration:none;    
}  
   
.slideshow .prev {
  margin-top: -10px;
  left: -10px; 
  z-index: 1;
  text-decoration: none;
  list-style: none;
  background: url(../img/gauche.png) no-repeat;
} 

.slideshow .next { 
  margin-top: 0px;
  right: -20px;
  text-decoration: none;
  list-style: none;
  z-index: 1;
  background: url(../img/droite.png) no-repeat;
}  
 
.slideshow a{
  
  background: none;
}  

.slideshow .commands { 
  display:none; 
  text-decoration: none;
  list-style: none;
}  

.slideshow .commands1 { 
  display: block; 
  text-decoration: none;
  list-style: none;

}

.slideshow .c_slider {  
    position: absolute;  
    left:0; top:0;  
    width: 400%;  
    height: 440px;  
    /* multiple background */  
    background: url(../img/slider_1.jpg) 0 0 no-repeat,  
                url(../img/slider_2.jpg) 640px 0 no-repeat,  
                url(../img/slider_3.jpg) 1280px 0 no-repeat,  
                url(../img/slider_4.jpg) 1920px 0 no-repeat;  
    transition: background 1s;  
}  

/* on cache le slider */  
.sl_i:target ~ .slideshow .slider{ 
  visibility: hidden 
}  
/* on planque la 1ère pastille (cf. bonux suivant) */  
.sl_i:target ~ .slideshow .dots_commands li:first-child a:after{ 
  display:none; 
}  
/* pour afficher la 2ème pastille (cf. bonux suivant) */  
.sl_i:target ~ .slideshow .dots_commands li:first-child a:before{ 
  display:block; 
}  
   
/* lorsque on cible le premier slider */  
/* on cache tous les "précédent" et "suivant" */  
#sl_i1:target ~ .slideshow .commands{ 
  display: none; 
}  
/* on affiche seulement deux flèches */  
#sl_i1:target ~ .slideshow .commands1{ 
  display: block; 
}  
/* correspond au décalage des images */  
#sl_i1:target ~ .slideshow .c_slider{ 
  background-position: 0 0, 640px 0, 1280px 0, 1920px 0; 
}  
/* on place la pastille tout à gauche */  
#sl_i1:target ~ .slideshow .dots_commands li:first-child a:before{ 
  left:0; 
}  
   
/* même procédé lorsqu'on cible le second slide */  
#sl_i2:target ~ .slideshow .commands{ 
  display: none;
}  
#sl_i2:target ~ .slideshow .commands2{ 
  display: block; 
}  
#sl_i2:target ~ .slideshow .c_slider{ 
  background-position: -640px 0, 0 0, 640px 0, 1280px 0; 
}  
#sl_i2:target ~ .slideshow .dots_commands li:first-child a:before{ 
  left:18px; 
}  
   
/* puis le 3ème */  
#sl_i3:target ~ .slideshow .commands{ 
  display: none; 
}  
#sl_i3:target ~ .slideshow .commands3{ 
  display: block; 
}  
#sl_i3:target ~ .slideshow .c_slider{ 
  background-position: -1280px 0, -640px 0, 0 0, 640px 0; 
}  
#sl_i3:target ~ .slideshow .dots_commands li:first-child a:before{ 
  left:36px; 
}  
   
/* et enfin le 4ème */  
#sl_i4:target ~ .slideshow .commands{ 
  display: none; 
}  
#sl_i4:target ~ .slideshow .commands4{ 
  display: block; 
}  
#sl_i4:target ~ .slideshow .c_slider{ 
  background-position: -1920px 0, -1280px 0, -640px 0, 0 0; 
}  
#sl_i4:target ~ .slideshow .dots_commands li:first-child a:before{ 
  left:54px; 
}  

.dots_commands  {  
    padding:0;  
    margin:420px 0 0;  
    text-align: center;
}  
.dots_commands li {  
    display: inline;  
    padding:0; margin:0;  
}  
.dots_commands a {  
    position: relative;  
    display: inline-block;  
    height:8px; width: 8px;  
    margin: 0 5px;  
    text-indent: -9999px;  
    background: #fff;  
   
    border-radius: 50%;  
    box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;  
  
}  
/* quelques styles au focus */  
.dots_commands a:focus {   
    outline: none;  
    background: orange;  
}  
.dots_commands li:first-child a { z-index: 25; } 

/* on style after et before, on utilisera les deux */  
.dots_commands li:first-child a:after,  
.dots_commands li:first-child a:before {  
    position: absolute;  
    top: 0; left: 0;  
    content: " ";  
    width: 8px; height: 8px;  
    background: #bd9b83;  
    z-index:20;  
  
    border-radius: 50%;  
    box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;  
}  
/* on anime "after" */  
.dots_commands li:first-child a:after {  
    animation: dotser 32s infinite;  
}  
/* on cache "before", on l'utilise uniquement au clic (cf. bonux précédent) */  
.dots_commands li:first-child a:before { display:none; }  
   
/* 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;   }  
         
    70%         { opacity: 1; left: 36px;   }  
    72%         { opacity: 0; left: 36px;   }  
    73%         { opacity: 0; left: 54px;   }  
    75%         { opacity: 1; left: 54px;   }  
         
    95%         { opacity: 1; left: 54px;   }  
    97%         { opacity: 0; left: 54px;   }  
    98%         { opacity: 0; left: 0;  }  
}