@charset "UTF-8";

section {
  overflow: hidden;
  background: #F2F5E4 url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/380275/paper-3.png") repeat fixed center;
  font-family: "Libre Baskerville", Georgia, serif;
}

.testimonial {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.testimonial p {
	font-size: 1.2em;
}

#testContainer {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.bg-customer {
  cursor: default;
  padding: 2rem 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 6vw;
  line-height: 4vw;
  customer-wrap: break-customer;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

#behind {
  color: #424954;
  opacity: 0.3;
}

#infront {
  color: #555;
  opacity: 0.05;
  z-index: 20;
}

_::-webkit-full-page-media, _:future, :root #behind {
  opacity: 0.02; 
}

#card {
  overflow: hidden;
  z-index: 10;
  padding: 3rem;
  width: 95vw;
  max-width: 51rem;
  min-height: 15.75rem;
  box-shadow: 0 50px 70px -50px rgba(0, 0, 0, 0.45), 0 50px 200px -50px rgba(0, 0, 0, 0.5);
  background: #FFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#card * {
  -webkit-transition: opacity 0.4s, text-shadow 0.8s, color 0.4s, -webkit-transform 0s;
  transition: opacity 0.4s, text-shadow 0.8s, color 0.4s, -webkit-transform 0s;
  transition: opacity 0.4s, text-shadow 0.8s, color 0.4s, transform 0s;
  transition: opacity 0.4s, text-shadow 0.8s, color 0.4s, transform 0s, -webkit-transform 0s;
  opacity: 1;
}

#customer {
  -ms-flex-item-align: end;
      align-self: flex-end;
  font-size: 2rem;
  line-height: 1rem;
}

#type {
  font-size: 1.1rem;
  -ms-flex-item-align: end;
      align-self: flex-end;
  font-style: italic;
  margin-top: .5em;
  line-height: auto;
  color: #424954;
}

#description {
  width: 100%;
}

#last, #next {
  margin: 20px;
  width: 0px;
  height: 0px;
  z-index: 25;
  background: transparent;
  border-radius: 0;
  outline: none;
  border: none;
  cursor: pointer;
}

#last {
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid rgba(255, 255, 255, 0.5);
  -webkit-transition: 0.1s;
  transition: 0.1s;
}
#last:hover {
  border-right: 20px solid #FFF;
}

#next {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid rgba(255, 255, 255, 0.5);
  -webkit-transition: 0.1s;
  transition: 0.1s;
}
#next:hover {
  border-left: 20px solid #FFF;
}

#testContainer > #next:active ~ #card, #testContainer > #last:active ~ #card {
  -webkit-transition: 0.05s 0s;
  transition: 0.05s 0s;
  -webkit-transform: translateY(0.5rem);
          transform: translateY(0.5rem);
}

#card.fadeout #customer, #card.fadeout #description, #card.fadeout #type {
  opacity: 0;
  color: transparent;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -webkit-transform: translateY(-21rem) scale(3);
          transform: translateY(-21rem) scale(3);
  -webkit-transition: all 1.2s 0.1s, color 0.5s 0s, text-shadow 0.5s 0s;
  transition: all 1.2s 0.1s, color 0.5s 0s, text-shadow 0.5s 0s;
}

#card.fadeout #description {
  -webkit-transform: translateY(21rem) translateX(-6rem) scale(2);
          transform: translateY(21rem) translateX(-6rem) scale(2);
}

@media (max-width: 600px) {

  #last {
    margin: 0 0.4rem 0 0;
  }

  #next {
    margin: 0 0 0 0.4rem;
  }

  #card {
    padding: 1rem;
    min-height: 10rem;
  }

  #customer {
    font-size: 1.5rem;
  }

  #type, #description {
    font-size: 1rem;
  }
}