/* --FICHIER CSS BILLETOPHILIE SLIDE DU 15/08/2018-- */


/* --images taille et position-- */

.item img{
    margin:auto;
    margin-top:10px;
    width:640px;
    height:310px;
}
.item{
    float:left;
    width:640px;
    height:310px;
    position:relative;
}

/* --taille fenetre slide show taille images 640 + 20px  = 660 px-- */

#article1, #article2, #article3, #article4 , #article5,
#article6, #article7, #article8, #article9 , #article10,
#article11, #article12, #article13, #article14 , #article15 , #article16
{
    overflow:hidden;
    background:transparent;
    width:660px;
    height:450px;
    margin:0 auto;
    position:relative;
}

div.wrapper {
text-align: center;
margin-top: 80px;
}

/* --fenetre de defilement présentation déco-- */

.sliderContainer
{
	
	position:relative;
    border:10px solid;
	color:#DDDDDD;
    height:310px;
    width:640px;
    overflow:hidden;
	-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 8px 10px rgba(0,0,0, 0.7);
	-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 8px 10px rgba(0,0,0, 0.7);
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 8px 10px rgba(0,0,0, 0.7);
	
	background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	
	-webkit-border-radius: 2px 2px 2px 2px;
	-moz-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
    border-radius: 10px;
}

a{
    text-decoration: none;        
}

/* --fenetre defilement interne largeur image x nbre images multiple de 640-- */
.content{
    position:absolute;    
    top:-10px;
    left:0px;
    height:310px;
    width:10240px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
    transition:all 1s ease;
    
}

/* --position premiere image-- */
#article1:target .content{
    left:0px;
}

#article2:target .content, #article3:target .content, #article4:target .content, #article5:target .content,
#article6:target .content, #article7:target .content, #article8:target .content, #article9:target .content,
#article10:target .content, #article11:target .content, #article12:target .content, #article13:target .content,
#article14:target .content, #article15:target .content, #article16:target .content

{
    -webkit-transform: translate(-640px, 0px);
    -moz-transform: translate(-640px, 0px);
    -o-transform: translate(-640px, 0px);
    -ms-transform: translate(-640px, 0px);
    transform: translate(-640px, 0px);
}
#article3:target .content{
    -webkit-transform: translate(-1280px, 0px);
    -moz-transform: translate(-1280px, 0px);
    -o-transform: translate(-1280px, 0px);
    -ms-transform: translate(-1280px, 0px);
    transform: translate(-1280px, 0px);
}
#article4:target .content{
    -webkit-transform: translate(-1920px, 0px);
    -moz-transform: translate(-1920px, 0px);
    -o-transform: translate(-1920px, 0px);
    -ms-transform: translate(-1920px, 0px);
    transform: translate(-1920px, 0px);
}

#article5:target .content{
    -webkit-transform: translate(-2560px, 0px);
    -moz-transform: translate(-2560px, 0px);
    -o-transform: translate(-2560px, 0px);
    -ms-transform: translate(-2560px, 0px);
    transform: translate(-2560px, 0px);
}

#article6:target .content{
    -webkit-transform: translate(-3200px, 0px);
    -moz-transform: translate(-3200px, 0px);
    -o-transform: translate(-3200px, 0px);
    -ms-transform: translate(-3200px, 0px);
    transform: translate(-3200px, 0px);
}

#article7:target .content{
    -webkit-transform: translate(-3840px, 0px);
    -moz-transform: translate(-3840px, 0px);
    -o-transform: translate(-3840px, 0px);
    -ms-transform: translate(-3840px, 0px);
    transform: translate(-3840px, 0px);
}

#article8:target .content{
    -webkit-transform: translate(-4480px, 0px);
    -moz-transform: translate(-4480px, 0px);
    -o-transform: translate(-4480px, 0px);
    -ms-transform: translate(-4480px, 0px);
    transform: translate(-4480px, 0px);
}

#article9:target .content{
    -webkit-transform: translate(-5120px, 0px);
    -moz-transform: translate(-5120px, 0px);
    -o-transform: translate(-5120px, 0px);
    -ms-transform: translate(-5120px, 0px);
    transform: translate(-5120px, 0px);
}

#article10:target .content{
    -webkit-transform: translate(-5760px, 0px);
    -moz-transform: translate(-5760px, 0px);
    -o-transform: translate(-5760px, 0px);
    -ms-transform: translate(-5760px, 0px);
    transform: translate(-5760px, 0px);
}

#article11:target .content{
    -webkit-transform: translate(-6400px, 0px);
    -moz-transform: translate(-6400px, 0px);
    -o-transform: translate(-6400px, 0px);
    -ms-transform: translate(-6400px, 0px);
    transform: translate(-6400px, 0px);
}

#article12:target .content{
    -webkit-transform: translate(-7040px, 0px);
    -moz-transform: translate(-7040px, 0px);
    -o-transform: translate(-7040px, 0px);
    -ms-transform: translate(-7040px, 0px);
    transform: translate(-7040px, 0px);
}

#article13:target .content{
    -webkit-transform: translate(-7680px, 0px);
    -moz-transform: translate(-7680px, 0px);
    -o-transform: translate(-7680px, 0px);
    -ms-transform: translate(-7680px, 0px);
    transform: translate(-7680px, 0px);
}

#article14:target .content{
    -webkit-transform: translate(-8320px, 0px);
    -moz-transform: translate(-8320px, 0px);
    -o-transform: translate(-8320px, 0px);
    -ms-transform: translate(-8320px, 0px);
    transform: translate(-8320px, 0px);
}

#article15:target .content{
    -webkit-transform: translate(-8960px, 0px);
    -moz-transform: translate(-8960px, 0px);
    -o-transform: translate(-8960px, 0px);
    -ms-transform: translate(-8960px, 0px);
    transform: translate(-8960px, 0px);
}

#article16:target .content{
    -webkit-transform: translate(-9600px, 0px);
    -moz-transform: translate(-9600px, 0px);
    -o-transform: translate(-9600px, 0px);
    -ms-transform: translate(-9600px, 0px);
    transform: translate(-9600px, 0px);
}

/* --BOUTONS-- */

/* --boutons sous slide description et position +30 entre chaque boutons  -- */

 #article1 a,#article2 a,#article3 a, #article4 a, #article5 a,
 #article6 a,#article7 a,#article8 a, #article9 a, #article10 a,
 #article11 a,#article12 a,#article13 a, #article14 a, #article15 a, #article16 a
 
 {
    width:17px;
    height:9px;
    padding:8px 0;
    padding-top:0px;
	-moz-border-radius: 50%;
    -webkit-border-radius: 390px;
    border-radius: 390px;
    position:absolute;
    bottom:0px;
    left:15px;
	margin-left:70px;
}

#article2 a{
    position:absolute;
    bottom:0px;
    left:45px;
	
}
#article3 a{
    position:absolute;
    bottom:0px;
    left:75px;
}
#article4 a{
    position:absolute;
    bottom:0px;
    left:105px;
}

#article5 a{
    position:absolute;
    bottom:0px;
    left:135px;
}

#article6 a{
    position:absolute;
    bottom:0px;
    left:165px;
	
}
#article7 a{
    position:absolute;
    bottom:0px;
    left:195px;
}
#article8 a{
    position:absolute;
    bottom:0px;
    left:225px;
}

#article9 a{
    position:absolute;
    bottom:0px;
    left:255px;
}

#article10 a{
    position:absolute;
    bottom:0px;
    left:285px;
	
}
#article11 a{
    position:absolute;
    bottom:0px;
    left:315px;
}
#article12 a{
    position:absolute;
    bottom:0px;
    left:345px;
}

#article13 a{
    position:absolute;
    bottom:0px;
    left:375px;
}

#article14 a{
    position:absolute;
    bottom:0px;
    left:405px;
}
#article15 a{
    position:absolute;
    bottom:0px;
    left:435px;
}

#article16 a{
    position:absolute;
    bottom:0px;
    left:465px;
}

/* --boutons sous slide couleur debut-- */

#article1:target> a, #article2:target> a, #article3:target> a, #article4:target> a, #article5:target> a,
#article6:target> a, #article7:target> a, #article8:target> a, #article9:target> a, #article10:target> a,
#article11:target> a, #article12:target> a, #article13:target> a, #article14:target> a, #article15:target> a,
#article16:target> a 
{
    background-color: #00F100;
}