.rollingtext .slick-slide {
    /* padding: 2rem 0; */
    height: 12rem !important;
    font-size: 2.5rem;
    line-height: 1.2;
    font-family: 'Jeko Bold';
    font-weight: bold;
    font-style: normal;
    opacity: .5;
    transition: 500ms;
    position: relative;
}
.rollingtext .slick-slide div {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 100%;
}
.rollingtext .slick-slide.slick-current + .slick-active {
    /* padding: 2rem 0; */
    height: 12rem !important;
    font-size: 3.5rem;
    opacity: 1;
    transition: 500ms;
}

.wrapper {
    width: 100%;
    height: 100%;
    
}

.wrapper .outer {
position: absolute;
width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.wrapper .card {
    display: flex;
    width: 100%;
    align-items: center;
    height: 12rem;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    animation: animate 15s linear infinite;
    animation-delay: calc(3s * var(--delay));
    font-size: 3rem;
    line-height: 1.4;
    font-family: 'Jeko Bold';
    font-weight: bold;
    font-style: normal;
}

.wrapper .card:last-child {
    animation-delay: calc(-3s * var(--delay));
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: translateY(100%) scale(0.5);
    }

    5%,
    20% {
        opacity: 0.4;
        transform: translateY(100%) scale(0.7);
    }

    25%,
    40% {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0%) scale(1);
    }

    45%,
    60% {
        opacity: 0.4;
        transform: translateY(-100%) scale(0.7);
    }

    65%,
    100% {
        opacity: 0;
        transform: translateY(-100%) scale(0.5);
    }
}

.card .content {
    width: 100%;
    text-align: center;
}