* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.eaf-slider {
    width: 800px;
    height: 600px;
    display: flex;
    flex-direction: column;
}

.eaf-slider .ul-slider {
    /*no tiene altura*/
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 600px;
}

.eaf-slider .ul-slider li {
    position: absolute;
    left: -800px;
    width: 100%;
}
.eaf-slider .ul-slider li[role=loading] {
    left: 0px
}

.eaf-slider .ul-slider li[role=loading] img {
    border: 1px solid red;
}

.eaf-slider .ul-slider li iframe {
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 600px;
}

.eaf-slider .li-animation-in {
    animation: kf-slide-in 0.5s forwards;
}

.eaf-slider .li-animation-out {
    animation: kf-slide-out 0.5s forwards;
}

.eaf-slider .slider-nav {
    display: flex;
    justify-content: center;
}

.eaf-slider nav a.prev, a.next {
    cursor: pointer;
}

@keyframes kf-slide-in {
    100% { left: 0px; }
}

@keyframes kf-slide-out {
    100% { left: -800px; }
}

.eaf-slider .loading-out {
    animation: kf-slide-out 0.5s forwards;
}