/* Container that hides the overflowing text */
.news-horizontal-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap; /* Forces all items into a single horizontal line */
  position: relative;
  padding: 15px 0; 
}

/* The track that actually moves */
.news-horizontal-track {
  display: inline-block;
  margin: 0;
  padding: 0;
  /* 35s controls the speed. Increase the number for slower reading, decrease for faster */
  animation: marquee-horizontal 35s linear infinite;
}

/* Pause the scrolling when the user hovers over it to read or click */
.news-horizontal-container:hover .news-horizontal-track {
  animation-play-state: paused;
}

/* Styling for the individual news items */
.news-horizontal-track li {
  display: inline-block; /* Puts the list items side-by-side */
  list-style: none;
  margin-right: 60px; /* Space between each news item */
  vertical-align: middle;
}

/* The Animation Keyframes */
/* Moves left by exactly 50% of its width, then instantly resets */
@keyframes marquee-horizontal {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}