/* CSS3 */
/* Developed by: MrCh0n <mrchon@gmail.com> */  
/* fecha de creacion: 29/10/2014 */  
/* fecha de modificacion: 07/11/2014 */

.animated { 
 	-webkit-animation-name: bounceIn;
 	-webkit-animation-duration: 4s;
 	-webkit-animation-iteration-count: 10;
 	-webkit-animation-timing-function: ease-out;
 	-webkit-animation-fill-mode: forwards;
	
 	animation-name: bounceIn;
 	animation-duration: 4s;
 	animation-iteration-count: 10;
 	animation-timing-function: ease-out;
 	animation-fill-mode: forwards;
} 

/*
 * Animation for webkit
*/
@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 
  
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 
  
/*
 * Adding the animation to our element
*/
.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
}


/*
 * FadeIn animation
*/
  
@-webkit-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
.fadeIn { 
    -webkit-animation-name: fadeIn; 
    animation-name: fadeIn; 
}
  
/*
 * FadeOut animation
*/
  
@-webkit-keyframes fadeOut { 
    0% {opacity: 1;} 
    100% {opacity: 0;} 
} 
@keyframes fadeOut{ 
    0% {opacity: 1;} 
    100% {opacity: 0;} 
} 
.fadeOut { 
    -webkit-animation-name: fadeOut; 
    animation-name: fadeOut; 
}


/*
 * Pulse animation
*/
  
@-webkit-keyframes pulse { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(1.1); } 
    100% { -webkit-transform: scale(1); } 
} 
@keyframes pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.1); } 
    100% { transform: scale(1); } 
} 
.pulse { 
    -webkit-animation-name: pulse; 
    animation-name: pulse; 
}

/*
 * Flash animation
*/
  
@-webkit-keyframes flash { 
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;} 
} 
@keyframes flash { 
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;} 
} 
.flash { 
    -webkit-animation-name: flash; 
    animation-name: flash; 
}


/*
 * Shake animation
*/
  
@-webkit-keyframes shake { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-30px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(30px);} 
} 
@keyframes shake { 
    0%, 100% {transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {transform: translateX(-30px);} 
    20%, 40%, 60%, 80% {transform: translateX(30px);} 
} 
.shake { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
}