Page History

<style>
.content-slider {
  width: 100%;
  height: 130px;

margin-bottom: -25px;
background-color: #ffffff;
}

.slider {
  height: 120px;
  width: 380px;
background-color: #ffffff;
  margin: 40px auto 0;
  overflow: visible;
  position: relative;
}

.mask {
  overflow: hidden;
  height: 120px;
  background-color: #ffffff;
}

.slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}

.slider li {
  width: 360px;
  height: 320px;
  position: absolute;
  top: -325px;
  list-style: none;
}

.slider .quote {
  font-size: 20px;
  font-style: italic;
}

.slider .source {
  font-size: 20px;
  text-align: right;
}

.slider li.anim1 {
  animation: cycle 55s linear infinite;
}

.slider li.anim2 {
  animation: cycle2 55s linear infinite;
}

.slider li.anim3 {
  animation: cycle3 55s linear infinite;
}

.slider li.anim4 {
  animation: cycle4 55s linear infinite;
}

.slider li.anim5 {
  animation: cycle5 55s linear infinite;
}

.slider:hover li {
  animation-play-state: paused;
}

@keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}
</style>
	<h2><strong>Testimonials</strong>
<div class="content-slider">
  <div class="slider">
    <div class="mask">
      <ul>
        <li class="anim1">
          <div class="quote">"The keynote was fantastic! Also loved the way these sessions encouraged me to think outside the box when it comes to designing custom facing services. It really helped me to think about putting myself in someone else's position when interacting with a service."</div>
          <div class="source"></div>
        </li>
        <li class="anim2">
          <div class="quote">"It was nice hearing the tools that other organizations are using to tackle complex problems, along with lessons learned. There were a lot of valuable techniques shared that could benefit other Programs. I'm looking forward to incorporating some of today's learnings into my role."</div>
          <div class="source"></div>
        </li>
        <li class="anim3">
          <div class="quote">"Dr T's energy really kicked things off in the best way possible! The topics were really interesting and didn't feel stale."</div>
          <div class="source"></div>
        </li>
        <li class="anim4">
          <div class="quote">"The variety of speakers and topics was great and it was nice to have folks outside of CMS give their perspective."</div>
          <div class="source"></div>
        </li>
        <li class="anim5">
          <div class="quote">"Really fantastic and insightful sessions. It was especially wonderful to hear the CMS perspective with Ariele's (CMS CXO) interview with Howard."</div>
          <div class="source"></div>
        </li>
      </ul>
    </div>
  </div>
</div>