/* Marquee Container */
.lgpt-ticker-wrap {
    width: 100%;
    overflow: hidden;
    background-color: transparent;
    /* Transparent background */
    color: #fff;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0;
    /* No padding */
    font-family: Arial, sans-serif;
    font-size: 14px;
    position: relative;
    line-height: 1.5;
}

/* Marquee Content Animation */
.lgpt-ticker {
    display: inline-block;
    white-space: nowrap;
    /* We will animate a container that holds 2x the content */
    animation: lgpt-marquee 60s linear infinite;
    /* Slower speed for longer content */
}

/* Pause on hover */
.lgpt-ticker-wrap:hover .lgpt-ticker {
    animation-play-state: paused;
}

/* Individual Items */
.lgpt-item {
    display: inline-block;
    padding: 0 20px;
    border-right: 1px solid #555;
}

/* We don't remove the last border-right here because for seamless loop 
   we want the separator between the last item of set 1 and first item of set 2 
*/
.lgpt-region {
    font-weight: bold;
    color: #ffd700;
    /* Gold Color */
    margin-right: 5px;
}

.lgpt-karat {
    margin-left: 5px;
}

@keyframes lgpt-marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}