html, body {
  margin: 0; padding: 0;
}

.slider-wrap {
z-index: -1;
max-width: 1920px;
max-height:500px;
position: relative;
padding-bottom: calc(40%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-bottom: 10px solid #78BE20;
}

.single-slide {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
animation: slider-animation;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
background-size: cover;
}

#slide-1 {background-color: #78BE20; background-image: url(sliderimage01.jpg);}
#slide-2 {background-color: #78BE20; animation-delay: 5s; background-image: url(sliderimage02.jpg);}
#slide-3 {background-color: white; animation-delay: 10s; background-image: url(sliderimage03.jpg);}

@keyframes slider-animation {

0% {
    opacity: 0;
}
12% {
    opacity: 1;
}
24% {
    opacity: 1;
}
48% {
    opacity: 0;
}
100% {
    opacity: 0;
}
}