.scroller {
    /* border: 1px dashed #fff;
    border-radius: 5px; */
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.scroller>.destinasi {
    position: absolute;
    /* top: 0;
    right: 0; */
    font-size: 26px;

    width: 100%;
    font-weight: 600;
    /* font-family: "Montserrat", Arial; */
    animation: textslide 30s infinite;
}

/* .scroller>.destinasi a {
    color: white;
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
} */



@keyframes textslide {
    0% {
        top: 0;
        color: black;
    }

    10% {
        top: -30px;
        color: orange;
    }

    20% {
        top: -60px;
        color: black;
    }

    30% {
        top: -90px;
        color: orange;
    }

    40% {
        top: -120px;
        color: black;
    }

    50% {
        top: -150px;
        color: orange;
    }

    60% {
        top: -180px;
        color: black;
    }

    70% {
        top: -210px;
        color: orange;
    }

    80% {
        top: -240px;
        color: black;
    }

    90% {
        top: -270px;
        color: orange;
    }

    100% {
        top: 0;
    }

}

@media screen and (max-width: 767px) {

    .scroller, .destinasi {
        font-size: 18px;
    }

}