.flechebas {

	position: absolute;
	left: 65%;
	top:60%;

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}



div {
  width:860px;
  height:550px;
  margin:auto;
  position:absolute;
  top:39%;
  left:30%;
  overflow:hidden;
  
}
div img {
  position:absolute;
  top:0;
  left:0;
  transition:1s;
  vertical-align:bottom;
}
div img:nth-child(even) {
  left:100%;
}
div img:nth-child(2n+3) {
  left:100%;
}
div img:focus + img {
  left:0;
  transition:1s;
  ;
}

/* make it responsive ? */
div , img {max-width:100%;height:auto;}
img:first-child {position:static;}

html {
  min-height:100%;
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
  
}



.wouters {
  width:320px;
  height:480px;
  margin:auto;
  position:absolute;
  top:75%;
  left:2%;
  overflow:scroll;

  
}