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 #57ABD0;
}

.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: #0F0F78; background-image: url("../img/sliderimage01.jpg");}
#slide-2 {background-color: #0F0F78; animation-delay: 5s; background-image: url("../img/sliderimage02.jpg");}
#slide-3 {background-color: #0F0F78; animation-delay: 10s; background-image: url("../img/sliderimage03.jpg");}

@keyframes slider-animation {

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