html,body {  font-family: 'Droid Serif', serif;}
h1 {  font-size: 60px;  text-align: center;}
.content-slider {  width: 100%;  height: 1000vh;}
.slider {  height: 100%;  width: 100%;  margin: 40px auto 0;  overflow: visible;  position: relative; left: 20%;}
.mask {  overflow: hidden;  height: 100%;}
.slider ul {  margin: 0;  padding: 0;  position: relative;}
.slider li {  width: 100%;  height: 100%;  position: absolute;  top: 1%;  list-style: none;}
.slider .quote {  font-size: 40px;  font-style: italic;width: 100%; height: 100%;}
.slider .source {  font-size: 20px;  text-align: right;}
.slider li.anim1 {  animation: cycle 15s linear infinite;}
.slider li.anim2 {  animation: cycle2 15s linear infinite;}
.slider li.anim3 {  animation: cycle3 15s linear infinite;}
.slider li.anim4 {  animation: cycle4 15s linear infinite;}
.slider li.anim5 {  animation: cycle5 15s 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;
  }
}
@media (max-width:320px){
  html,body {  font-family: 'Droid Serif', serif; width: 100%; height: 100%;}
  h1 {  font-size: 20px;  text-align: center;}
  .content-slider {  width: 100%;  height: 100 0vh;}
  .slider {  height: 70%;  width: 70%;  margin: 20px auto 0;  overflow: visible;  position: relative; left: 1%;}
  .mask {  overflow: hidden;  height: 100%;}
  .slider ul {  margin: 0;  padding: 0;  position: relative;}
  .slider li {  width: 100%;  height: 100%;  position: absolute;  top: 1%;  list-style: none;}
  .slider .quote {  font-size: 40px;  font-style: italic;width: 50%; height: 50%;}
  .slider .source {  font-size: 20px;  text-align: right;}
  .slider li.anim1 {  animation: cycle 15s linear infinite;}
  .slider li.anim2 {  animation: cycle2 15s linear infinite;}
  .slider li.anim3 {  animation: cycle3 15s linear infinite;}
  .slider li.anim4 {  animation: cycle4 15s linear infinite;}
  .slider li.anim5 {  animation: cycle5 15s 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;
    }
  }  
}