#slideshow-container{
	position: relative;
	width: 100%;
	overflow: hidden;
}

#slideshow{
	position: relative;
	width: 400%;
	list-style-type: none;
	margin: 0;
	padding: 0;
    -webkit-transition-property:all;
	-webkit-transition-duration:1s;
	-moz-transition-property:all;
	-moz-transition-duration:1s;
   transition-property:all;
	transition-duration:1s;
}
.slide{
	
}
#slideshow .slide{
	width: 25%;
	margin: 0;
	padding: 0;
	float: left;
}

.slide1 #slideshow{
	left:0;
}
.slide2 #slideshow{
	left:-100%;
}
.slide3 #slideshow{
	left:-200%;
}
.slide4 #slideshow{
	left:-300%;
}
#bouton{
    position:relative;
    width:244px;
    height:55px;
    margin: 300px 0px 0px 40px;
    cursor:pointer;
}
      
      /* Les points de navigation */
#dots{
        position:absolute;
        width:130px;
        height:15px;
        right:80px;
        bottom:-10px;
      }
      
      /* les points, avec leur background non selectionné */
      #dots li{
        float:left;
        margin: 0px 2px;
        width:12px;
        height:12px;
        background-image: url(../images/empty-dot.png);
        cursor:pointer;
		list-style: none;
      }
      /* Point au survol */
      #dots li:hover{
        background-image: url(../images/selected-dot.png);
      }
      
      /* Point "selectionné". De la même manière que l'image, on change en fonction de la classe de slider */
      .slide1 #dots li.button1, .slide2 #dots li.button2, .slide3 #dots li.button3, .slide4 #dots li.button4{
        background-image: url(../images/selected-dot.png);
        cursor:normal;
      }
.btn{
	position: absolute;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background-size: 30px 30px;
}
.left{
	bottom: 10px;
	right: 45px;
	background-image: url(../images/prev.png)
}
.right{
	bottom: 10px;
	right: 10px;
	background-image: url(../images/next.png)
}