/* SLIDER HOME ================================================== */

.container-slider-home {
    width: 90%;
    max-width: 900px;
    margin: auto;
    overflow: hidden;
}

.slider-home {
    display: flex;
    align-items: center;
    color: #fff;
    width: 900%;
    height: 100px;
    margin-left: -100%;
}

.slider__section {
    width: 100%;
}

/* SLIDER HOME ================================================== */

/* OUTER CONTAINER */

.s-wrap {
    width: 100%;
    height: 65px;
    /* Optional */
    background: transparent;
    overflow: hidden;
    /* Hide scrollbars */
}

.s-wrap2 {
    width: 100%;
    height: auto;
    background: transparent;
    overflow: hidden;
}


/* MIDDLE WRAPPER */

.s-move {
    display: flex;
    position: relative;
    top: 0;
    right: 0;
}

.s-move-2 {
    display: flex;
    position: relative;
    top: 0;
    right: 0;
}

.s-move-4 {
    display: flex;
    position: relative;
    top: 0;
    right: 0;
}


/* SLIDES */

.slide {
    box-sizing: border-box;
    /*padding: 10px;*/
    /* Force all slides to layout horizontally */
    width: 100%;
    flex-shrink: 0;
}


/* SLIDE ANIMATION MAGIC */

@keyframes slideh {

    /* Will use keyframes to shift the 5 slides *
    0% { right: 0; }
    20% { right: 100%; }
    40% { right: 200%; }
    60% { right: 300%; }
    80% { right: 400%; }
    100% { right: 0; }*/
    /* BUT the above will be non-stop */
    /* We want short pauses between each slide, so... */
    0% {
        right: 0;
    }

    6% {
        right: 0;
    }

    11% {
        right: 100%;
    }

    16% {
        right: 100%;
    }

    22% {
        right: 200%;
    }

    27% {
        right: 200%;
    }

    33% {
        right: 300%;
    }

    38% {
        right: 300%;
    }

    44% {
        right: 400%;
    }

    49% {
        right: 400%;
    }

    55% {
        right: 500%;
    }

    61% {
        right: 500%;
    }

    66% {
        right: 600%;
    }

    72% {
        right: 600%;
    }

    77% {
        right: 700%;
    }

    83% {
        right: 700%;
    }

    88% {
        right: 800%;
    }

    94% {
        right: 800%;
    }

    100% {
        right: 0;
    }
}

@keyframes slideh2 {
    0% {
        right: 0;
    }

    25% {
        right: 0;
    }

    50% {
        right: 100%;
    }

    75% {
        right: 100%;
    }

    100% {
        right: 0;
    }
}

@keyframes slideh4 {
    0% {
        right: 0;
    }

    20% {
        right: 0;
    }

    30% {
        right: 100%;
    }

    40% {
        right: 100%;
    }

    50% {
        right: 200%;
    }

    60% {
        right: 200%;
    }

    70% {
        right: 300%;
    }

    80% {
        right: 300%;
    }

    100% {
        right: 0;
    }
}

.s-move {
    animation: slideh linear 40s infinite;
}

.s-move-2 {
    animation: slideh2 linear 20s infinite;
}

.s-move-4 {
    animation: slideh4 linear 20s infinite;
}

.s-move:hover {
    animation-play-state: paused;
}

.s-move-2:hover {
    animation-play-state: paused;
}

.s-move-4:hover {
    animation-play-state: paused;
}