@charset "utf-8";
/* CSS Document */


/* Flip animation container, keeps perspective */
.auto{
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}

/* Set animation variables */



  
#p1{
  -webkit-animation-duration: 7s;
  -moz-animation-duration: 7s;
  -ms-animation-duration: 7s;
  animation-duration: 7s;
   
} 
  
#p2{
  -webkit-animation-duration: 9s;
  -moz-animation-duration: 9s;
  -ms-animation-duration: 9s;
  animation-duration: 9s;
  
} 
  
 #p3{
  -webkit-animation-duration: 11s;
  -moz-animation-duration: 11s;
  -ms-animation-duration: 11s;
  animation-duration: 11s;
  
}  

 

.frontauto, .backauto, #p1, #p2, #p3{

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  animation-timing-function: ease;

  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

/* Call the animations for each side of the card */
.frontauto, #p1, #p2, #p3{
  -webkit-animation-name: cardFlipFront;
  -moz-animation-name: cardFlipFront;
  -ms-animation-name: cardFlipFront;
  animation-name: cardFlipFront;
}

.backauto, #p1, #p2, #p3{
  -webkit-animation-name: cardFlipBack;
  -moz-animation-name: cardFlipBack;
  -ms-animation-name: cardFlipBack;
  animation-name: cardFlipBack;
 
}

/* We have two seperate @keyframe animations for each side of the card so we can get this working in IE */

/* This one animates the front card */
@keyframes cardFlipFront {
  0% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  22.5% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  27.5% {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  72.5% {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  77.5% {
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

/* This one animates the front card in webkit*/ 
@-webkit-keyframes cardFlipFront {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  22.5% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  27.5% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  72.5% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  77.5% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}

/* This one animates the back card */
@keyframes cardFlipBack {
  0% {
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  22.5% {
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  27.5% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  72.5% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  77.5% {
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  100% {
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
}

/* This one animates the back card in webkit */
@-webkit-keyframes cardFlipBack {
  0% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  22.5% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  27.5% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  72.5% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  77.5% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
  100% {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
}

/* Hide back of card during swap */
.frontauto, .backauto{
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* Front card stacked above the back card */
.frontauto {
  z-index: 2;
}

/* The back, initially hidden, card */
.backauto {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}