.marquee {
  overflow: hidden;
  box-sizing: border-box;
}

.marquee > span {
  white-space: nowrap;
  padding-left: 100%;
  display: inline-block;
  -webkit-animation: marquee 30s infinite linear;
  -moz-animation: marquee 30s infinite linear;
  -ms-animation: marquee 30s infinite linear;
  animation: marquee 30s infinite linear;
  z-index: -1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.marquee:hover > span {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    
  }
}