@keyframes slide {
    0% { transform: translateX(0); }
    8% { transform: translateX(0); }
 
    12% { transform: translateX(-100%); }
    20% { transform: translateX(-100%); }
 
    24% { transform: translateX(-200%); }
    32% { transform: translateX(-200%); }           
 
    36% { transform: translateX(-300%); }
    44% { transform: translateX(-300%); }
 
    48% { transform: translateX(-400%); }
    56% { transform: translateX(-400%); }
 
    60% { transform: translateX(-500%); }
    68% { transform: translateX(-500%); }

    72% { transform: translateX(-600%); }
    80% { transform: translateX(-600%); }

    84% { transform: translateX(-700%); }
    92% { transform: translateX(-700%); }

    96% { transform: translateX(-800%); }
    100% { transform: translateX(-800%); }
}
 
* { box-sizing: border-box; }
 
html { scroll-behavior: smooth; }
 
body {
    font-family: sans-serif;
}
 
.wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
 
.slider {
    position: relative;
}
 
.slides {
    position: relative;
    display: flex;
    overflow: hidden;
}
 
.slide {
    width: 100vw;
    flex-shrink: 0;
    animation-name: slide;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
 
.slide img {
    width: 80%;
    vertical-align: top;
}
 
.slide a {
    width: 100%;
    display: inline-block;
    position: relative;
}
 
.caption {
    color: white;
    text-shadow: 1px 1px black;
    font-size: 8vw;
    position: absolute;
    bottom: 8vw;
    right: 4vw;                                 
}
 
.slide:target {
    animation-name: none;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
}
 

 
.slider-controler li {
    margin: 0 0.5rem;
    display: inline-block;
    vertical-align: top;
}
 
.slider-controler a {
    display: inline-block;
    vertical-align: top;            
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
}
 
@media only screen and (min-width: 1200px) {
    .slide {
        width: 1000px;
    }
 
    .caption {
        font-size: 96px;
        bottom: 96px;
        right: 50px; 
    }
}