/* CSS Text Slider */

.content-slider {
    width: 40%;
    height: 360px;
    margin-top: 100px;
}

.slider {
    height: 320px;
    width: 100%;
    overflow: visible;
    position: relative;
}

.mask {
    overflow: hidden;
    height: 320px;
}

.slider ul {
    margin: 0;
    padding: 0;
    position: relative;
}

.slider li {
    width: 100%;
    height: 320px;
    position: absolute;
    top: -325px;
    list-style: none;
}

.slider .quote {
    color: #000;
    font-size: 125%;
    line-height: 1em;
}

.slider .source {
    color: #000;
    font-size: 100%;
    padding-top: 18px;
}
    .slider .source a:link, .slider .source a:visited {
        color: #000;
        font-weight: 700;
        text-decoration: underline;
    }
    .slider .source a:hover {
        color: #999;
    }

.slider li.anim1 {
    animation: cycle 15s linear infinite;
    animation-duration: 35s;
}

.slider li.anim2 {
    animation: cycle2 15s linear infinite;
    animation-duration: 35s;
}

.slider li.anim3 {
    animation: cycle3 15s linear infinite;
    animation-duration: 35s;
}

.slider li.anim4 {
    animation: cycle4 15s linear infinite;
    animation-duration: 35s;
}

.slider li.anim5 {
    animation: cycle5 15s linear infinite;
    animation-duration: 35s;
}

.slider:hover li {
    animation-play-state: paused;
}

@keyframes cycle {
    0% {
        top: 0px;
    }

    4% {
        top: 0px;
    }

    16% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }

    20% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }

    21% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }

    50% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }

    92% {
        top: -325px;
        opacity: 0;
        z-index: 0;
    }

    96% {
        top: -325px;
        opacity: 0;
    }

    100% {
        top: 0px;
        opacity: 1;
    }
}

@keyframes cycle2 {
    0% {
        top: -325px;
        opacity: 0;
    }

    16% {
        top: -325px;
        opacity: 0;
    }

    20% {
        top: 0px;
        opacity: 1;
    }

    24% {
        top: 0px;
        opacity: 1;
    }

    36% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }

    40% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }

    41% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }

    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cycle3 {
    0% {
        top: -325px;
        opacity: 0;
    }

    36% {
        top: -325px;
        opacity: 0;
    }

    40% {
        top: 0px;
        opacity: 1;
    }

    44% {
        top: 0px;
        opacity: 1;
    }

    56% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }

    60% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }

    61% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }

    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cycle4 {
    0% {
        top: -325px;
        opacity: 0;
    }

    56% {
        top: -325px;
        opacity: 0;
    }

    60% {
        top: 0px;
        opacity: 1;
    }

    64% {
        top: 0px;
        opacity: 1;
    }

    76% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }

    80% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }

    81% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }

    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cycle5 {
    0% {
        top: -325px;
        opacity: 0;
    }

    76% {
        top: -325px;
        opacity: 0;
    }

    80% {
        top: 0px;
        opacity: 1;
    }

    84% {
        top: 0px;
        opacity: 1;
    }

    96% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }

    100% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
}

/* On screens that are 991px or less */
@media screen and (max-width: 991px) {
    .content-slider {
        width: 60%;
        margin-top: 30px;
    }

    .slider .quote {
        font-size: 100%;
    }

}