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

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>

	
	<h1>Testimonials</h1>

<div class="content-slider">
  <div class="slider">
    <div class="mask">
      <ul>
        <li class="anim1">
          <div class="quote">"The speakers were entertaining and very knowledgeable. They made the training fun."</div>
          <div class="source">- HCD 101 Attendee</div>
        </li>
        <li class="anim2">
          <div class="quote">"The breakout rooms were very beneficial. It helped reinforce the concepts that were being presented."</div>
          <div class="source">- HCD 101 Attendee</div>
        </li>
        <li class="anim3">
          <div class="quote">"The exercises were thought-provoking and easy to apply in day-to-day work tasks."</div>
          <div class="source"></div>
        </li>
        <li class="anim4">
          <div class="quote">"I enjoyed the activities that gave us an opportunity to pilot some of the strategies we were learning."</div>
          <div class="source"></div>
        </li>
        <li class="anim5">
          <div class="quote">"The exercises were thought-provoking and easy to apply in day-to-day work tasks."</div>
          <div class="source"></div>
        </li>
      </ul>
    </div>
  </div>
</div>

<hr>
<p align="center">
<a href="https://www.goodreads.com/book/show/2420301.The_Back_of_the_Napkin" title="Drawing on twenty years of visual problem solving combined with the recent discoveries of vision science, this book shows anyone how to clarify a problem or sell an idea by visually breaking it down using a simple set of visual thinking tools – tools that take advantage of everyone’s innate ability to look, see, imagine, and show."> <img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1432738947i/2420301._SX50_.jpg"><br>The Back of the Napkin</a> 
</p><hr>
<p align="center">
<a href="https://www.goodreads.com/book/show/18197267-don-t-make-me-think-revisited" title="Since Don’t Make Me Think was first published in 2000, over 400,000 Web designers and developers have relied on Steve Krug’s guide to help them understand the principles of intuitive navigation and information design."> <img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1384736553i/18197267._SX50_.jpg" alt="Don't Make Me Think"><br>Don't Make Me Think</a> 
</p>