/* ==========================================================================
   Testimonials rotator (Testimonial Rotator plugin, "default" template)
   ========================================================================== */

.testimonials {
  padding: 10px 0;
  background-color: #cecdc1;
}

.testimonial-rotator {
  position: relative;
  margin: 20px 10px 40px;   /* 20px wrap margin + 20px element margin */
  padding: 10px;
  overflow: hidden;
  touch-action: pan-y;
}

.testimonial-rotator__track {
  position: relative;
}

.testimonial {
  display: flow-root;
  width: 100%;
}

/* Rotator mode: slides stack and scroll horizontally (set by JS) */
.testimonial-rotator.is-ready .testimonial {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transform: translateX(100%);
}
.testimonial-rotator.is-ready .testimonial.is-active,
.testimonial-rotator.is-ready .testimonial.is-entering,
.testimonial-rotator.is-ready .testimonial.is-leaving {
  visibility: visible;
}
.testimonial-rotator.is-ready .testimonial.is-active {
  transform: translateX(0);
}
.testimonial-rotator.is-ready .testimonial.is-animating {
  transition: transform 1s ease-in-out;
}
/* Without JS all slides are listed */
.testimonial-rotator:not(.is-ready) .testimonial + .testimonial {
  margin-top: 40px;
}

.testimonial__img {
  float: left;
  width: 20%;
  margin-right: 5%;
  padding-top: .5em;
}
.testimonial__img img {
  width: 100%;
  max-width: 150px;
  height: auto;
}

.testimonial__text {
  float: left;
  width: 75%;
  line-height: 1.5;
}

.testimonial__title {
  margin: 0 0 5px;
  color: #222;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.05em;
}

.testimonial__quote p {
  margin: 0 0 1.5em;
}
.testimonial__quote p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-rotator.is-ready .testimonial.is-animating {
    transition: none;
  }
}