#slider{
width:70%;
height:100%;
margin:0 auto;
position:relative;
float: left;
margin-left: 50px;
}
#mask{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
text-align:center;
}
div.fleche{
width:27px;
height:70px;
background: #1d4265;
position:absolute;
top:0;
cursor:pointer;
text-align:center;
line-height:70px;
z-index:20;
display: none;
}
#fleche_gauche{
left:-27px;
}
#fleche_droite{
right:0;
}
#image_container{
position:absolute;
width:100%;
height:100%;
-webkit-transition-property:all;
-webkit-transition-duration:1s;
-moz-transition-property:all;
-moz-transition-duration:1s;
transition-property:all;
transition-duration:1s;
}
#image_container > li{
float:left;
height:100%;
width:300%;
}
#dots{
position:absolute;
width:130px;
height:15px;
left:360px;
bottom:11px;
}
#dots li{
float: left;
margin: 0px 6px;
width: 7px;
height: 7px;
cursor: pointer;
border-radius: 6px;
border: 2px solid #fff;
}
#dots li:hover{
background: #fff;
}
.image1 #dots li.button1, .image2 #dots li.button2{
background: #fff;
cursor:normal;
}

@media screen and (max-width: 1500px){
  div.menu ul li a{
      padding: 9px 13px 0; 
  }
}
@media screen and (max-width: 1380px){
  div.fleche{
    display: block;
  }
}