/* (A) FIXED WRAPPER */
.hwrap {
    overflow: hidden;
    /* HIDE SCROLL BAR */
    background: #eee;
    background-color: #000;
    color: #fff;
    padding: 8px 0
}

/* (B) MOVING TICKER WRAPPER */
.hmove {
    display: flex;
}

/* (C) ITEMS - INTO A LONG HORIZONTAL ROW */
.hitem {
    flex-shrink: 0;
    width: 100%;
    width: auto;
    box-sizing: border-box;
    padding: 10px 100px;
    text-align: center;
    font-size: 20px;
}

/* (D) ANIMATION - MOVE ITEMS FROM RIGHT TO LEFT */
/* 4 ITEMS -400%, CHANGE THIS IF YOU ADD/REMOVE ITEMS */
@keyframes tickerh {
    0% {
        transform: translate3d(100%, 0, 0);
    }

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

.hmove {
    animation: tickerh 30s linear 1s infinite;
}

.hmove:hover {
    animation-play-state: paused;
}
@media only screen and (max-width:576px){
    @keyframes tickerh {
    0% {
        transform: translate3d(100%, 0, 0);
    }

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

}