/*********************************
ANIMATIONS: INTRO CARDS FLYING IN VIA CSS
*********************************/

.card-1 .card-back{
  -webkit-animation-name: slideInDown-card-1;
  animation-name: slideInDown-card-1;
  -webkit-animation-duration: .55s;
  animation-duration: .55s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
 animation-delay: .76s;
  }
  @-webkit-keyframes slideInDown-card-1 {
  0% {
  -webkit-transform: translateY(-150%) translateX(-150%) rotate(1500deg);
  transform: translateY(-150%) translateX(-150%) rotate(1500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  }
  @keyframes slideInDown-card-1 {
  0% {
  -webkit-transform: translateY(-150%) translateX(-150%) rotate(1500deg);
  transform: translateY(-150%) translateX(-150%) rotate(1500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  } 


.card-2 .card-back{
  -webkit-animation-name: slideInDown-card-2;
  animation-name: slideInDown-card-2;
  -webkit-animation-duration: .76s;
  animation-duration: .76s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInDown-card-2 {
  0% {
  -webkit-transform: translateY(-200%) translateX(100%) rotate(1000deg);
  transform: translateY(-200%) translateX(100%) rotate(1000deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  }
  @keyframes slideInDown-card-2 {
  0% {
  -webkit-transform: translateY(-200%) translateX(100%) rotate(1000deg);
  transform: translateY(-200%) translateX(100%) rotate(1000deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  } 

.card-3 .card-back{
  -webkit-animation-name: slideInDown-card-3;
  animation-name: slideInDown-card-3;
  -webkit-animation-duration: .76s;
  animation-duration: .76s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
 animation-delay: .5s;
  }

  @-webkit-keyframes slideInDown-card-3 {
  0% {
  -webkit-transform: translateY(100%) translateX(-200%) rotate(500deg);
  transform: translateY(100%) translateX(-200%) rotate(500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  }
  @keyframes slideInDown-card-3 {
  0% {
  -webkit-transform: translateY(100%) translateX(-200%) rotate(500deg);
  transform: translateY(100%) translateX(-200%) rotate(500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  } 

.card-4 .card-back{
  -webkit-animation-name: slideInDown-card-4;
  animation-name: slideInDown-card-4;
  -webkit-animation-duration: .76s;
  animation-duration: .76s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
 animation-delay: .25s;
  }

  @-webkit-keyframes slideInDown-card-4 {
  0% {
  -webkit-transform: translateY(100%) translateX(-200%) rotate(500deg);
  transform: translateY(100%) translateX(-200%) rotate(500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  }
  @keyframes slideInDown-card-4 {
  0% {
  -webkit-transform: translateY(100%) translateX(-200%) rotate(500deg);
  transform: translateY(100%) translateX(-200%) rotate(500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  }

.card-5 .card-back{
  -webkit-animation-name: slideInDown-card-5;
  animation-name: slideInDown-card-5;
  -webkit-animation-duration: .76s;
  animation-duration: .76s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }

  @-webkit-keyframes slideInDown-card-5 {
  0% {
  -webkit-transform: translateY(-100%) translateX(-200%) rotate(-1500deg);
  transform: translateY(-100%) translateX(-200%) rotate(-1500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  }
  @keyframes slideInDown-card-5 {
  0% {
  -webkit-transform: translateY(-100%) translateX(-200%) rotate(-1500deg);
  transform: translateY(-100%) translateX(-200%) rotate(-1500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  }

.card-6 .card-back{
  -webkit-animation-name: slideInDown-card-6;
  animation-name: slideInDown-card-6;
  -webkit-animation-duration: .76s;
  animation-duration: .76s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
 animation-delay: .76s;
  }

  @-webkit-keyframes slideInDown-card-6 {
  0% {
  -webkit-transform: translateY(150%) translateX(150%) rotate(-1500deg);
  transform: translateY(150%) translateX(150%) rotate(-1500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0deg);
  transform: translateY(0) translateX(0)  rotate(0deg);
  }
  }
  @keyframes slideInDown-card-6 {
  0% {
  -webkit-transform: translateY(150%) translateX(150%) rotate(-1500deg);
  transform: translateY(150%) translateX(150%) rotate(-1500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0deg);
  transform: translateY(0) translateX(0)  rotate(0deg);
  }
  } 

.card-7 .card-back{
  -webkit-animation-name: slideInDown-card-7;
  animation-name: slideInDown-card-7;
  -webkit-animation-duration: .55s;
  animation-duration: .55s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
 animation-delay: .5s;
  }

  @-webkit-keyframes slideInDown-card-7 {
  0% {
  -webkit-transform: translateY(-150%) translateX(-150%) rotate(1500deg);
  transform: translateY(-150%) translateX(-150%) rotate(1500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  }
  @keyframes slideInDown-card-7 {
  0% {
  -webkit-transform: translateY(-150%) translateX(-150%) rotate(1500deg);
  transform: translateY(-150%) translateX(-150%) rotate(1500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  } 

.card-8 .card-back{
  -webkit-animation-name: slideInDown-card-8;
  animation-name: slideInDown-card-8;
  -webkit-animation-duration: .76s;
  animation-duration: .76s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
 animation-delay: .76s;
  }

  @-webkit-keyframes slideInDown-card-8 {
  0% {
  -webkit-transform: translateY(-200%) translateX(100%) rotate(1000deg);
  transform: translateY(-200%) translateX(100%) rotate(1000deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  }
  @keyframes slideInDown-card-8 {
  0% {
  -webkit-transform: translateY(-200%) translateX(100%) rotate(1000deg);
  transform: translateY(-200%) translateX(100%) rotate(1000deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  } 

.card-9 .card-back{
  -webkit-animation-name: slideInDown-card-9;
  animation-name: slideInDown-card-9;
  -webkit-animation-duration: .76s;
  animation-duration: .76s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }

  @-webkit-keyframes slideInDown-card-9 {
  0% {
  -webkit-transform: translateY(100%) translateX(-200%) rotate(-500deg);
  transform: translateY(100%) translateX(-200%) rotate(-500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  }
  @keyframes slideInDown-card-9 {
  0% {
  -webkit-transform: translateY(100%) translateX(-200%) rotate(-500deg);
  transform: translateY(100%) translateX(-200%) rotate(-500deg);
  }
  100% {
  -webkit-transform: translateY(0) translateX(0) rotate(0);
  transform: translateY(0) translateX(0) rotate(0);
  }
  }