html {
  min-height: 100%;
}

body {
  height: 100%;
}

.slideshow {
  list-style: none;
  z-index: 1;
}


.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 32s linear infinite 0s;
  -moz-animation: imageAnimation 32s linear infinite 0s;
  animation: imageAnimation 32s linear infinite 0s;
}


.slideshow li:nth-child(1) span {
  background-image: url(../img/main-1.jpg);
}

.slideshow li:nth-child(2) span {
  background-image: url(../img/main-2.jpg);
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  animation-delay: 8s;
}

.slideshow li:nth-child(3) span {
  background-image: url(../img/main-3.jpg);
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  animation-delay: 16s;
}

.slideshow li:nth-child(4) span {
  background-image: url(../img/main-4.jpg);
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  animation-delay: 24s;
}

@-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;
  }
}

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


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

.slideshow li span { 

    top: 0px;
    left: 0px;
    color: transparent; background-repeat:no-repeat;
    background-size: cover;}
	
	.slideshow li:nth-child(1) span {
  background-image: url(../img/main-m1.jpg);
}

.slideshow li:nth-child(2) span {
  background-image: url(../img/main-m2.jpg);

}

.slideshow li:nth-child(3) span {
  background-image: url(../img/main-m3.jpg);

}

.slideshow li:nth-child(4) span {
  background-image: url(../img/main-m4.jpg);

}
}

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

.slideshow li span { 

    top: 80px;
    left: 0px;
    color: transparent; background-repeat:no-repeat;
    background-size: contain;}
	

}


@media screen and (max-width: 640px) { 
.slideshow li span { 
    top: 50px;
 
}