.slider {
    border-radius: 0.25em;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 100%;
}
.slider ul {
    animation: 15s ease 0s normal none infinite slide-animation;
    height: auto;
    left: 0;
    line-height: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 1000%;
}
.slider li {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 10%;
}
.slider ul:hover {
    animation-play-state: paused;
}
.slider img {
    border-radius: 0.25em;
    width: 100%;
}
.slider span {
    background-color: rgba(54, 44, 48, 0.6);
    border-radius: 0.25em;
    bottom: 0;
    color: #FCFCFC;
    display: block;
    font-size: 0.8em;
    font-weight: normal;
    height: 3.125em;
    margin-top: -3.125em;
    overflow: hidden;
    padding: 0.031em 1.25em 0;
    position: relative;
    text-shadow: 0 0.063em 0.063em #9D9D9D;
}
@keyframes slide-animation{
1% {
    left: 0;
    opacity: 1;
}
18% {
    left: 0;
    opacity: 1;
}
19% {
    opacity: 0.2;
}
20% {
    left: -100%;
    opacity: 1;
}
58% {
    left: -100%;
    opacity: 1;
}
59% {
    opacity: 0.2;
}
60% {
    left: -200%;
    opacity: 1;
}
98% {
    left: -200%;
    opacity: 1;
}
99% {
    opacity: 0.5;
}
100% {
    left: 0;
}
}