/* Ticker CSS */
.ticker {
    background-color: #f2f2f2;
    padding: 20px;
    overflow: hidden;
    position: relative;
}

.ticker ul {
    position: absolute;
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    animation: ticker 200s linear infinite !important;
    right: -1%;
    top: 25%;
    transform: translateY(-50%);
    height: 2em;
}

.ticker li {
    display: inline-block;
    padding-right: 10%; /* default padding */
}

/* Set different padding values for different screen sizes */
@media only screen and (min-width: 768px) {
    .ticker li {
        padding-right: 50px;
    }
}

@media only screen and (min-width: 992px) {
    .ticker li {
        padding-right: 100px;
    }
}


@keyframes ticker {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-110%);
    }
}