.slideshow {
  list-style: none;
  z-index: 1;
  position: relative;
  width: 100%;
	height: 500px;
  
}

@media only screen and (max-width: 640px) {

.slideshow{
	height: 400px;
}}

.slideshow:before{
	content: "";
	display: block;
	padding-top: 60%;
}

.slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 48s linear infinite 0s;
  -moz-animation: imageAnimation 48s linear infinite 0s;
  animation: imageAnimation 48s linear infinite 0s;

}
@media only screen and (min-width: 768px) {

.slideshow li h3 {
  bottom: 30px;
  font-size: 2em;
}

}
@media only screen and (min-width: 1024px) {

.slideshow li h3 { font-size: 2em; }
}

.slideshow li:nth-child(1) span { background-image: url(../media/images/photo_acceuil.jpg); }

.slideshow li:nth-child(2) span {
  background-image: url(../media/images/photo_acceuil_2.jpg);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  animation-delay: 6s;
}

.slideshow li:nth-child(3) span {
  background-image: url(../media/images/photo_acceuil_3.jpg);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  animation-delay: 12s;
}

.slideshow li:nth-child(4) span {
  background-image: url(../media/images/photo_acceuil_4.jpg);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  animation-delay: 18s;
}
 @-webkit-keyframes 
imageAnimation {  0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -webkit-animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
@-moz-keyframes 
imageAnimation {  0% {
 opacity: 0;
 -moz-animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -moz-animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
@keyframes 
imageAnimation {  0% {
 opacity: 0;
 -webkit-animation-timing-function: ease-in;
 -moz-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
 12.5% {
 opacity: 1;
 -webkit-animation-timing-function: ease-out;
 -moz-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
@-webkit-keyframes 
titleAnimation {  0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
@-moz-keyframes 
titleAnimation {  0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
@keyframes 
titleAnimation {  0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 25% {
 opacity: 1;
}
 37.5% {
 opacity: 0;
}
 100% {
 opacity: 0;
}
}

.no-cssanimations .slideshow li span { opacity: 1; }