@keyframes moveLeftBounceRight {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(35px);
        transform: translateX(35px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slideDown {
    from {
      max-height: 0;
      opacity: 0;
    }
    to {
      max-height: 200px;
      opacity: 1;
    }
}
@keyframes slideUp {
    from {
      max-height: 200px;
      opacity: 1;
    }
    to {
      max-height: 0;
      opacity: 0;
    }
}

.Marquee{
  width: 100%;
  box-sizing: border-box;
  padding: 1em;
  color: white;
  font-weight: 200;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.Marquee-content {
  display: flex;
  animation: marquee 20s linear infinite running;
}
.Marquee-content:hover {
  animation-play-state: paused
}

.Marquee-tag {
  width: 200px;
  margin: 0 .5em;
  padding: .5em;
  background: rgba(255, 255, 255, .1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}
.Marquee-tag:hover {
  background: rgba(255, 255, 255, .5);
  transform: scale(1.1);
  cursor: pointer;
}
    
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}