@charset "UTF-8";

.animation {
    height: 30px;
    overflow: hidden;
    margin-left: 1rem;
}

@media (min-width: 992px) {
    .animation {
        height: 60px;
    }
}

.animation > div > div {
    padding: 0.25rem 0.75rem;
    display:inline-block;
}

.animation div:first-child {
    animation: text-animation 8s infinite;
}

@keyframes text-animation {
    0% {margin-top: 0;}
    10% {margin-top: 0;}
    20% {margin-top: -2rem;}
    30% {margin-top: -2rem;}
    40% {margin-top: -4rem;}
    60% {margin-top: -4rem;}
    70% {margin-top: -2rem;}
    80% {margin-top: -2rem;}
    90% {margin-top: 0;}
    100% {margin-top: 0;}
}


@media (min-width: 992px) {
    @keyframes text-animation {
        0% {margin-top: 0;}
        10% {margin-top: 0;}
        20% {margin-top: -4rem;}
        30% {margin-top: -4rem;}
        40% {margin-top: -8rem;}
        60% {margin-top: -8rem;}
        70% {margin-top: -4rem;}
        80% {margin-top: -4rem;}
        90% {margin-top: 0;}
        100% {margin-top: 0;}
    }
}