/* 
 * Date created: Oct.04.2014
 * Author: Dear
 * Reimplemented testimonials slideshow in css to replace the WordPress/jQuery heavyweight version
 * Idea + code from:
 * - http://cssdeck.com/labs/tu1e6uq5
 * - http://www.techumber.com/2012/11/Wow-Quotes-Showcase-Widget-Using-Pure-CSS3.html
 * 
 * Notes:
 * - http://www.css3files.com/animation/
 *   animation-name: cycle-quote;          -- reqd
 *   animation-duration: 25s;              -- reqd seconds | millisecond
 *   animation-timing-function: ease;      -- opt. ease | ease-out | ease-in | ease-in-out | linear
 *   animation-delay: 0s;                  -- opt. seconds
 *   animation-iteration-count: infinite;  -- opt. number | infinite
 *   animation-direction: normal;          -- opt. normal, alternate
 *   animation-fill-mode: forwards;        -- opt. forwards, backwards, both, none
 *
 * Used in:
 * - index.html
 * - about.html
 */


/* ------ Slideshow for Testimonials ------ */

.testimonials {
  /*border: 1px solid red;*/
  border: 0px none;
  margin: 0px;
  padding: 0px;
  vertical-align: baseline;
  height: 230px;
  position: relative;
}

.quote {
  position: absolute;
  z-index: 4;
  top: 0px;
  overflow: hidden;
  opacity: 0;
  /*border: 1px solid blue;*/
  border-top:    1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  width: 100%;
  margin: 16px 0px 20px 0px;
  padding: 0px;
  padding-bottom: 30px;
  animation: cycle-quote 25s infinite;
  animation-play-state: running;
}

.quote div {
  /*border: 1px solid cyan;*/
  color: #666666;
  margin-left:  60px;
  margin-right: 80px;
  margin-top:   35px;
  padding: 10px 0px 0 50px;
  font-family: 'Vollkorn:400italic';
  font-size: 20px;
  font-style: italic;
  line-height: 1.4em;
  background: url('/imgs/quote.png') no-repeat;
}

.quote cite {
  /*border: 1px solid green;*/
  display: block;
  color: #333333;
  float: right;
  font-size: 16px;
  margin-top: 10px;
  margin-right: 70px;
}

/* pause on hover */
.testimonials:hover .quote { animation-play-state: paused; }

/* hide all items except the first one */
.quote + .quote { opacity: 0; }

/* negative delay needed to pause; works on hover 
.quote:nth-child(2) { animation-delay: -20s; }
.quote:nth-child(3) { animation-delay: -15s; }
.quote:nth-child(4) { animation-delay: -10s; }
.quote:nth-child(5) { animation-delay:  -5s; }
*/

/* cross-browser fade in/out animations */
.quote:nth-child(1) {
  -webkit-animation: cycle-quote 25s 0s linear infinite;
  -moz-animation:    cycle-quote 25s 0s linear infinite;
  -ms-animation:     cycle-quote 25s 0s linear infinite;
  -o-animation:      cycle-quote 25s 0s linear infinite;
  animation:         cycle-quote 25s 0s linear infinite;
}
.quote:nth-child(2) {
  -webkit-animation: cycle-quote 25s 5s linear infinite;
  -moz-animation:    cycle-quote 25s 5s linear infinite;
  -ms-animation:     cycle-quote 25s 5s linear infinite;
  -o-animation:      cycle-quote 25s 5s linear infinite;
  animation:         cycle-quote 25s 5s linear infinite;
}
.quote:nth-child(3) {
  -webkit-animation: cycle-quote 25s 10s linear infinite;
  -moz-animation:    cycle-quote 25s 10s linear infinite;
  -ms-animation:     cycle-quote 25s 10s linear infinite;
  -o-animation:      cycle-quote 25s 10s linear infinite;
  animation:         cycle-quote 25s 10s linear infinite;
}
.quote:nth-child(4) {
  -webkit-animation: cycle-quote 25s 15s linear infinite;
  -moz-animation:    cycle-quote 25s 15s linear infinite;
  -ms-animation:     cycle-quote 25s 15s linear infinite;
  -o-animation:      cycle-quote 25s 15s linear infinite;
  animation:         cycle-quote 25s 15s linear infinite;
}
.quote:nth-child(5) {
  -webkit-animation: cycle-quote 25s 20s linear infinite;
  -moz-animation:    cycle-quote 25s 20s linear infinite;
  -ms-animation:     cycle-quote 25s 20s linear infinite;
  -o-animation:      cycle-quote 25s 20s linear infinite;
  animation:         cycle-quote 25s 20s linear infinite;
}

/* cross-browser keyframe animation 
 * we have 5 items; we want each slide to play for 5s
 * each slide will play 1/5 of animation = 20%
 * 1% of animation is for transitions (fading)
 */
/* Standard syntax */
@keyframes cycle-quote {
    0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
         filter: alpha(opacity=0);   opacity: 0; z-index: 2; }
    1% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
         filter: alpha(opacity=100); opacity: 1; z-index: 2; }
   20% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
         filter: alpha(opacity=100); opacity: 1; }
   21% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
         filter: alpha(opacity=0);   opacity: 0; z-index: 1; }
  100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
         filter: alpha(opacity=0);   opacity: 0; }
}
/* Firefox */
@-moz-keyframes cycle-quote {
    0% { filter: alpha(opacity=0);   opacity: 0; }
    1% { filter: alpha(opacity=100); opacity: 1; }
   20% { filter: alpha(opacity=100); opacity: 1; }
   21% { filter: alpha(opacity=0);   opacity: 0; }
  100% { filter: alpha(opacity=0);   opacity: 0; }
}
/* Chrome, Safari */
@-webkit-keyframes cycle-quote {
    0% { filter: alpha(opacity=0);   opacity: 0; }
    1% { filter: alpha(opacity=100); opacity: 1; }
   20% { filter: alpha(opacity=100); opacity: 1; }
   21% { filter: alpha(opacity=0);   opacity: 0; }
  100% { filter: alpha(opacity=0);   opacity: 0; }
}
/* Micro$oft */
@-ms-keyframes cycle-quote {
    0% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
         filter: alpha(opacity=0);   opacity: 0; }
    1% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
         filter: alpha(opacity=100); opacity: 1; }
   20% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
         filter: alpha(opacity=100); opacity: 1; }
   21% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
         filter: alpha(opacity=0);   opacity: 0; }
  100% { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
         filter: alpha(opacity=0);   opacity: 0; }
}
/* Opera */
@-o-keyframes cycle-quote {
    0% { filter: alpha(opacity=0);   opacity: 0; }
    1% { filter: alpha(opacity=100); opacity: 1; }
   20% { filter: alpha(opacity=100); opacity: 1; }
   21% { filter: alpha(opacity=0);   opacity: 0; }
  100% { filter: alpha(opacity=0);   opacity: 0; }
}