/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================

Made by Justin Aguilar

www.justinaguilar.com/animations/

Questions, comments, concerns, love letters:
justin@justinaguilar.com
==============================================
*/

/*
==============================================
slideDown
==============================================
*/

[class*='ab-animation-'] {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  visibility: visible !important;
}

/*
 * Scale up
 */
 .ab-animation-scale-up {
  -webkit-animation-name: ab-animation-scale-up;
  animation-name: ab-animation-scale-up;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform:scale(0);
    transform:scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform:scale(1);
    transform:scale(1);    
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    -moz-transform:scale(0);
    -webkit-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
  }

  100% {
    opacity: 1;
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);    
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }

  50% {
    opacity: .2;
  }  

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    transform: translateX(-100px);
  }

  50% {
    opacity: .2;
  }  

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }

  50% {
    opacity: .3;
  }  

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(200px);
    -ms-transform: translateX(200px);
    transform: translateX(200px);
  }

  50% {
    opacity: .3;
  }   

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
  }

  50% {
    opacity: .3;
  }  

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200px);
    -ms-transform: translateY(200px);
    transform: translateY(200px);
  }

  50% {
    opacity: .3;
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-250px);
    transform: translateX(-250px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-250px);
    -ms-transform: translateX(-250px);
    transform: translateX(-250px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;  
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(250px);
    -ms-transform: translateX(250px);
    transform: translateX(250px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes fadeInLeft2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-110px);
    transform: translateX(-110px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-110px);
    -ms-transform: translateX(-110px);
    transform: translateX(-110px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft2 {
  -webkit-animation-name: fadeInLeft2;
  animation-name: fadeInLeft2;
}


@-webkit-keyframes fadeInLeft3 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-120px);
    transform: translateX(-120px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft3 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-120px);
    -ms-transform: translateX(-120px);
    transform: translateX(-120px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft3 {
  -webkit-animation-name: fadeInLeft3;
  animation-name: fadeInLeft3;
}

@-webkit-keyframes fadeInLeft4 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-130px);
    transform: translateX(-130px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft4 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-130px);
    -ms-transform: translateX(-130px);
    transform: translateX(-130px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft4 {
  -webkit-animation-name: fadeInLeft4;
  animation-name: fadeInLeft4;
}

@-webkit-keyframes fadeInLeft5 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-140px);
    transform: translateX(-140px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft5 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-140px);
    -ms-transform: translateX(-140px);
    transform: translateX(-140px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft5 {
  -webkit-animation-name: fadeInLeft5;
  animation-name: fadeInLeft5;
}

@-webkit-keyframes fadeInLeft6 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-150px);
    transform: translateX(-150px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft6 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-150px);
    -ms-transform: translateX(-150px);
    transform: translateX(-150px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft6 {
  -webkit-animation-name: fadeInLeft6;
  animation-name: fadeInLeft6;
}

@-webkit-keyframes fadeInLeft7 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-160px);
    transform: translateX(-160px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft7 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-160px);
    -ms-transform: translateX(-160px);
    transform: translateX(-160px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft7 {
  -webkit-animation-name: fadeInLeft7;
  animation-name: fadeInLeft7;
}

@-webkit-keyframes fadeInLeft8 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-170px);
    transform: translateX(-170px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft8 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-170px);
    -ms-transform: translateX(-170px);
    transform: translateX(-170px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft8 {
  -webkit-animation-name: fadeInLeft8;
  animation-name: fadeInLeft8;
}

@-webkit-keyframes fadeInLeft9 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-180px);
    transform: translateX(-180px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft9 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-180px);
    -ms-transform: translateX(-180px);
    transform: translateX(-180px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft9 {
  -webkit-animation-name: fadeInLeft9;
  animation-name: fadeInLeft9;
}

@-webkit-keyframes fadeInLeft10 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-190px);
    transform: translateX(-190px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft10 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-190px);
    -ms-transform: translateX(-190px);
    transform: translateX(-190px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft10 {
  -webkit-animation-name: fadeInLeft10;
  animation-name: fadeInLeft10;
}

.fadeInLeft6,
.fadeInLeft5,
.fadeInLeft4,
.fadeInLeft3,
.fadeInLeft2,
.fadeInLeft1,
.fadeInLeft7,
.fadeInLeft8,
.fadeInLeft9,
.fadeInLeft10 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@-webkit-keyframes fadeIn2 {
  0% {
    opacity: 0;
    -webkit-transform:scale(0);
    transform:scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform:scale(1);
    transform:scale(1);    
  }
}

@keyframes fadeIn2 {
  0% {
    opacity: 0;
    -moz-transform:scale(0);
    -webkit-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
  }

  100% {
    opacity: 1;
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);    
  }
}

.fadeIn2 {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;  
}

@-webkit-keyframes fadeIn3 {
  0% {
    opacity: 0;
    -webkit-transform:scale(0);
    transform:scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform:scale(1);
    transform:scale(1);    
  }
}

@keyframes fadeIn3 {
  0% {
    opacity: 0;
    -moz-transform:scale(0);
    -webkit-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
  }

  100% {
    opacity: 1;
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);    
  }
}

.fadeIn3 {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;  
}

@-webkit-keyframes fadeIn4 {
  0% {
    opacity: 0;
    -webkit-transform:scale(0);
    transform:scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform:scale(1);
    transform:scale(1);    
  }
}

@keyframes fadeIn4 {
  0% {
    opacity: 0;
    -moz-transform:scale(0);
    -webkit-transform:scale(0);
    -ms-transform:scale(0);
    transform:scale(0);
  }

  100% {
    opacity: 1;
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);    
  }
}

.fadeIn4 {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;  
}

/* UKI KIT */
/* ========================================================================
   Component: Animation
 ========================================================================== */
[class*='ab-animation-'] {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/* Hide animated element if scrollspy is used */
@media screen {
  [data-ab-scrollspy*='ab-animation-'] {
    opacity: 0;
  }
}
/*
 * Fade
 */
.ab-animation-fade {
  -webkit-animation-name: ab-fade;
  animation-name: ab-fade;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
/*
 * Scale
 */
.ab-animation-scale-up {
  -webkit-animation-name: ab-scale-up;
  animation-name: ab-scale-up;
}
.ab-animation-scale-down {
  -webkit-animation-name: ab-scale-down;
  animation-name: ab-scale-down;
}
/*
 * Slide
 */
.ab-animation-slide-top {
  -webkit-animation-name: ab-slide-top;
  animation-name: ab-slide-top;
}
.ab-animation-slide-bottom {
  -webkit-animation-name: ab-slide-bottom;
  animation-name: ab-slide-bottom;
}
.ab-animation-slide-left {
  -webkit-animation-name: ab-slide-left;
  animation-name: ab-slide-left;
}
.ab-animation-slide-right {
  -webkit-animation-name: ab-slide-right;
  animation-name: ab-slide-right;
}
/*
 * Shake
 */
.ab-animation-shake {
  -webkit-animation-name: ab-shake;
  animation-name: ab-shake;
}
/* Modifiers
 ========================================================================== */
.ab-animation-reverse {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}
/* Keyframes
 ========================================================================== */
/*
 * Fade
 */
@-webkit-keyframes ab-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ab-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*
 * Scale up
 */
@-webkit-keyframes ab-scale-up {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.9);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
@keyframes ab-scale-up {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/*
 * Scale down
 */
@-webkit-keyframes ab-scale-down {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
@keyframes ab-scale-down {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/*
 * Slide top
 */
@-webkit-keyframes ab-slide-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes ab-slide-top {
  0% {
    opacity: 0;
    transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Slide bottom
 */
@-webkit-keyframes ab-slide-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes ab-slide-bottom {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Slide left
 */
@-webkit-keyframes ab-slide-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes ab-slide-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Slide right
 */
@-webkit-keyframes ab-slide-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@keyframes ab-slide-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Shake
 */
@-webkit-keyframes ab-shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
  }
  10% {
    -webkit-transform: translateX(-9px);
  }
  20% {
    -webkit-transform: translateX(8px);
  }
  30% {
    -webkit-transform: translateX(-7px);
  }
  40% {
    -webkit-transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-5px);
  }
  60% {
    -webkit-transform: translateX(4px);
  }
  70% {
    -webkit-transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
  }
  90% {
    -webkit-transform: translateX(-1px);
  }
}
@keyframes ab-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-9px);
  }
  20% {
    transform: translateX(8px);
  }
  30% {
    transform: translateX(-7px);
  }
  40% {
    transform: translateX(6px);
  }
  50% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}
/*
 * Slide top fixed
 */
@-webkit-keyframes ab-slide-top-fixed {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes ab-slide-top-fixed {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Slide bottom fixed
 */
@-webkit-keyframes ab-slide-bottom-fixed {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes ab-slide-bottom-fixed {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Spin
 */
@-webkit-keyframes ab-spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes ab-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}


/*===================================================================================*/
/*  flipInX                                                                          */
/*===================================================================================*/

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.animated.flipInX {
    opacity: 1;

    -webkit-backface-visibility: visible !important;
       -moz-backface-visibility: visible !important;
         -o-backface-visibility: visible !important;
            backface-visibility: visible !important;

    -webkit-animation-name: flipInX;
       -moz-animation-name: flipInX;
         -o-animation-name: flipInX;
            animation-name: flipInX;
}