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

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*
==============================================
fadeIn
==============================================
*/

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

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;
	animation-fill-mode: backwards;/**/
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;

	visibility: visible !important;	
}

@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;	
	}
	50% {
		transform: scale(1.1);	
	}
	70% {
		transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}	
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;
	}
	50% {
		-webkit-transform: scale(1.1);
	}
	70% {
		-webkit-transform: scale(0.9);
		opacity: 1;
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}

/*
==============================================
fadeIn2
==============================================
*/

.fadeIn2{
	animation-name: fadeIn2;
	-webkit-animation-name: fadeIn2;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;
	animation-fill-mode: backwards;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;

	visibility: visible !important;	
}

@keyframes fadeIn2 {
	0% {
		transform: scale(0.8);
		opacity: 0.8;	
		overflow: hidden;	
	}
	50% {
		transform: scale(1.1);	
		overflow: hidden;
	}
	70% {
		transform: scale(0.9);
		opacity: 1;	
		overflow: hidden;
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
		overflow: hidden;
	}	
}

@-webkit-keyframes fadeIn2 {
	0% {
		-webkit-transform: scale(0.8);
		opacity: 0.8;	
		overflow: hidden;	
	}
	50% {
		-webkit-transform: scale(1.1);
		overflow: hidden;
	}
	70% {
		-webkit-transform: scale(0.9);
		opacity: 1;	
		overflow: hidden;
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
		overflow: hidden;
	}
}

/*
==============================================
pulse2
==============================================
*/

.pulse2{
	animation-name: pulse2;
	-webkit-animation-name: pulse2;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse2 {
	0% {
		transform: scale(0.9);
	}
	50% {
		transform: scale(1);
	}	
	100% {
		transform: scale(0.9);
	}			
}


/*
==============================================
pulse3
==============================================
*/

.pulse3{
	animation-name: pulse3;
	-webkit-animation-name: pulse3;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse3 {
	0% {
		transform: translateY(0%) scale(0.95);
	}
	50% {
		transform: translateY(3%) scale(1);
	}	
	100% {
		transform: translateY(0%) scale(0.95);
	}			
}

/*
==============================================
keydown
==============================================
*/

.keydown{
	animation-name: keydown;
	-webkit-animation-name: keydown;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;
	animation-fill-mode: backwards;/**/
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;

	visibility: visible !important;	
}

@keyframes keydown {
	0% {
		transform: scale(0.8);	
	}
	100% {
		transform: scale(0.8);
	}		
}

@-webkit-keyframes keydown {
	0% {
		-webkit-transform: scale(0.8);	
	}	
	100% {
		-webkit-transform: scale(0.8);
	}
}


/*
==============================================
slideExpandUp
==============================================
*/


.slideExpandUp{
	animation-name: slideExpandUp;
	-webkit-animation-name: slideExpandUp;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease -out;

	visibility: visible !important;	
}

@keyframes slideExpandUp {
	0% {
		transform: translateY(100%) scaleX(0.5);
	}
	30%{
		transform: translateY(-8%) scaleX(0.5);
	}	
	40%{
		transform: translateY(2%) scaleX(0.5);
	}
	50%{
		transform: translateY(0%) scaleX(1.1);
	}
	60%{
		transform: translateY(0%) scaleX(0.9);		
	}
	70% {
		transform: translateY(0%) scaleX(1.05);
	}			
	80%{
		transform: translateY(0%) scaleX(0.95);		
	}
	90% {
		transform: translateY(0%) scaleX(1.02);
	}	
	100%{
		transform: translateY(0%) scaleX(1);		
	}
}

@-webkit-keyframes slideExpandUp {
	0% {
		-webkit-transform: translateY(100%) scaleX(0.5);
	}
	30%{
		-webkit-transform: translateY(-8%) scaleX(0.5);
	}	
	40%{
		-webkit-transform: translateY(2%) scaleX(0.5);
	}
	50%{
		-webkit-transform: translateY(0%) scaleX(1.1);
	}
	60%{
		-webkit-transform: translateY(0%) scaleX(0.9);		
	}
	70% {
		-webkit-transform: translateY(0%) scaleX(1.05);
	}			
	80%{
		-webkit-transform: translateY(0%) scaleX(0.95);		
	}
	90% {
		-webkit-transform: translateY(0%) scaleX(1.02);
	}	
	100%{
		-webkit-transform: translateY(0%) scaleX(1);		
	}
}


/*
==============================================
slideUp
==============================================
*/


.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

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

	visibility: visible !important;			
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}			
	100% {
		transform: translateY(0%);
	}	
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}
	95%{
		-webkit-transform: translateY(2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/*
==============================================
slideUp2
==============================================
*/


.slideUp2{
	animation-name: slideUp2;
	-webkit-animation-name: slideUp2;	

	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;

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

	visibility: visible !important;			
}

@keyframes slideUp2 {
	0% {
		transform: translateY(-100%);
		scale:2;		
		opacity:0;
	}		
	100% {
		transform: translateY(0%);
		scale:1;
		opacity:1;
	}	
}

@-webkit-keyframes slideUp2 {
	0% {
		-webkit-transform: translateY(-100%);
		-webkit-scale:2;
		-webkit-opacity:0;
	}	
	100% {
		-webkit-transform: translateY(0%);
		-webkit-scale:1;
		-webkit-opacity:1;
	}	
}


/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideLeft {
	0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}			
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}

/*
==============================================
scale
==============================================
*/


.scale{
	animation-name: scale;
	-webkit-animation-name: scale;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes scale {
	0% {
		transform: scale(1);
	}			
	100% {
		transform: scale(0.8);
	}
}

@-webkit-keyframes scale {
	0% {
		-webkit-transform: scale(1);
	}
	100%{
		-webkit-transform: scale(0.8);
	}
}

.scale2{
	animation-name: scale2;
	-webkit-animation-name: scale2;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes scale2 {
	0% {
		transform: scale(1);
	}			
	100% {
		transform: scale(0);
	}
}

@-webkit-keyframes scale2 {
	0% {
		-webkit-transform: scale(1);
	}
	100%{
		-webkit-transform: scale(0);
	}
}

/*
==============================================
hatch
==============================================
*/

.hatch{
	animation-name: hatch;
	-webkit-animation-name: hatch;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 

	visibility: visible !important;		
}

.hatch2{
	animation-name: hatch;
	-webkit-animation-name: hatch;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	
	/**/
	animation-iteration-count:2;
  	-webkit-animation-iteration-count:2;
	

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 

	visibility: visible !important;		
}

@keyframes hatch {
	0% {
		transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		transform: rotate(2deg) scaleY(1);
	}
	50% {
		transform: rotate(-2deg);
	}	
	65% {
		transform: rotate(1deg);
	}	
	80% {
		transform: rotate(-1deg);
	}		
	100% {
		transform: rotate(0deg);
	}									
}

@-webkit-keyframes hatch {
	0% {
		-webkit-transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		-webkit-transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		-webkit-transform: rotate(2deg) scaleY(1);
	}
	50% {
		-webkit-transform: rotate(-2deg);
	}	
	65% {
		-webkit-transform: rotate(1deg);
	}	
	80% {
		-webkit-transform: rotate(-1deg);
	}		
	100% {
		-webkit-transform: rotate(0deg);
	}		
}

/*
==============================================
slide
==============================================
*/

.slide{
	animation-name: slide;
	-webkit-animation-name: slide;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	
	animation-iteration-count:infinite;
  	-webkit-animation-iteration-count:infinite;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 

	visibility: visible !important;		
}

@keyframes slide {
	0% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(-2deg);
	}
	35% {
		transform: rotate(2deg);
	}
	50% {
		transform: rotate(-2deg);
	}	
	65% {
		transform: rotate(1deg);
	}	
	80% {
		transform: rotate(-1deg);
	}		
	100% {
		transform: rotate(0deg);
	}									
}

@-webkit-keyframes slide {
	0% {
		-webkit-transform: rotate(0deg);
	}
	20% {
		-webkit-transform: rotate(-2deg);
	}
	35% {
		-webkit-transform: rotate(2deg);
	}
	50% {
		-webkit-transform: rotate(-2deg);
	}	
	65% {
		-webkit-transform: rotate(1deg);
	}	
	80% {
		-webkit-transform: rotate(-1deg);
	}		
	100% {
		-webkit-transform: rotate(0deg);
	}		
}

/*
==============================================
bounceOutDown
==============================================
*/

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
  
	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;	

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 
	
	visibility: visible !important;		
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

/*
==============================================
FadeOut
==============================================
*/
.FadeOut{
	animation-name: FadeOut;
	-webkit-animation-name: FadeOut;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

.FadeOut2{
	animation-name: FadeOut;
	-webkit-animation-name: FadeOut;	

	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

.FadeOut3{
	animation-name: FadeOut;
	-webkit-animation-name: FadeOut;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;
	
	animation-iteration-count:infinite;
  	-webkit-animation-iteration-count:infinite;

	visibility: visible !important;	
}

@keyframes FadeOut {
	0% {
		opacity: 1;
	}			
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes FadeOut {
	0% {
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

/*
==============================================
FadeIn2
==============================================
*/

.FadeIn2{
	animation-name: FadeIn2;
	-webkit-animation-name: FadeIn2;	

	animation-duration: 0.2s;	
	-webkit-animation-duration: 0.2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

.FadeIn5{
	animation-name: FadeIn2;
	-webkit-animation-name: FadeIn2;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

.FadeIn3{
	animation-name: FadeIn2;
	-webkit-animation-name: FadeIn2;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	
	animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;

	visibility: visible !important;	
}

.FadeIn4{
	animation-name: FadeIn4;
	-webkit-animation-name: FadeIn4;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;
	
	animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;

	visibility: visible !important;	
}

@keyframes FadeIn2 {
	0% {
		opacity: 0;
	}			
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes FadeIn2 {
	0% {
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@keyframes FadeIn4 {
	0% {
		opacity: 0.5;
	}			
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
	}			
}

@-webkit-keyframes FadeIn4 {
	0% {
		opacity: 0.5;
	}			
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
	}	
}


/*
==============================================
expandUp
==============================================
*/


.expandUp{
	animation-name: expandUp;
	-webkit-animation-name: expandUp;	

	animation-duration: 0.7s;	
	-webkit-animation-duration: 0.7s;

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

	visibility: visible !important;	
}

@keyframes expandUp {
	0% {
		transform: translateY(100%) scale(0.6) scaleY(0.5);
	}
	60%{
		transform: translateY(-7%) scaleY(1.12);
	}
	75%{
		transform: translateY(3%);
	}	
	100% {
		transform: translateY(0%) scale(1) scaleY(1);
	}	
}

@-webkit-keyframes expandUp {
	0% {
		-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
	}
	60%{
		-webkit-transform: translateY(-7%) scaleY(1.12);
	}
	75%{
		-webkit-transform: translateY(3%);
	}	
	100% {
		-webkit-transform: translateY(0%) scale(1) scaleY(1);
	}	
}


/*
==============================================
rotate
==============================================
*/

.rotate{
	animation-name: rotate;
	-webkit-animation-name: rotate;	
	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

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

	visibility: visible !important;	
}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/*
==============================================
rotateBig
==============================================
*/

.rotateBig{
	animation-name: rotateBig;
	-webkit-animation-name: rotateBig;	
	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

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

	visibility: visible !important;	
}

@-webkit-keyframes rotateBig {
	from {
		-webkit-transform:scale(0);
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform:scale(1);
		-webkit-transform: rotate(360deg);
	}
}
@keyframes rotateBig {
	from {
		transform:scale(0);
		transform: rotate(0deg);
	}
	to {
		transform:scale(1);
		transform: rotate(360deg);
	}
}

/*
==============================================
opacity
==============================================
*/

.opacity{
	animation-name: opacity;
	-webkit-animation-name: opacity;
	
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
	
	animation-iteration-count:2;
	-webkit-animation-iteration-count:2;
	
	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;

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

	visibility: visible !important;	
}

.opacity2{
	animation-name: opacity;
	-webkit-animation-name: opacity;
	
	animation-direction:alternate;
	-webkit-animation-direction:alternate;
	
	animation-iteration-count:10;
	-webkit-animation-iteration-count:10;
	
	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;

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

	visibility: visible !important;	
}


@-webkit-keyframes opacity {
	from {
		-webkit-opacity: 0.0;
	}
	to {
		-webkit-opacity: 1;
	}
}
@keyframes opacity {
	from {
		opacity: 0.0;
	}
	to {
		opacity: 1;
	}
}


/*
==============================================
rubberBand
==============================================
*/
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  
  animation-direction:alternate;
  -webkit-animation-direction:alternate;
  
  animation-iteration-count:2;
  -webkit-animation-iteration-count:2;
  
  animation-duration: 1s;	
  -webkit-animation-duration: 1s;
  
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;

}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/*
==============================================
bounceOut
==============================================
*/
.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
  
  animation-duration: 1s;	
  -webkit-animation-duration: 1s;
    
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}


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


.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

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

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}


/*
==============================================
ZoomIn
==============================================
*/

.ZoomIn{
	animation-name: ZoomIn;
	-webkit-animation-name: ZoomIn;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;

	visibility: visible !important;	
}

@keyframes ZoomIn {
	0% {
		transform: scale(0.0);	
	}
	100% {
		transform: scale(1.3);
	}		
}

@-webkit-keyframes ZoomIn {
	0% {
		-webkit-transform: scale(0.0);	
	}	
	100% {
		-webkit-transform: scale(1.3);
	}
}


/*
==============================================
Bigger
==============================================
*/

.Bigger{
	animation-name: Bigger;
	-webkit-animation-name: Bigger;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	
	transform-origin:center bottom;

	visibility: visible !important;	
}

@keyframes Bigger {
	0% {
		opacity:0;
		transform: scale(0.0) rotate(5deg);	
	}
	50% {
		opacity:1;
		transform: scale(1);
	}
	100% {
		opacity:0;
		transform: scale(1.3) rotate(0deg);
	}		
}

@-webkit-keyframes Bigger {
	0% {
		-webkit-opacity:0;
		-webkit-transform: scale(0.0) rotate(5deg);	
	}	
	50% {
		-webkit-opacity:1;
		-webkit-transform: scale(1) rotate(5deg);
	}
	100% {
		-webkit-opacity:0;
		-webkit-transform: scale(1.3) rotate(0deg);
	}
}


/*
==============================================
floating
==============================================
*/

.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(3%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(3%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

/*
==============================================
tossing
==============================================
*/

.tossing{
	animation-name: tossing;
	-webkit-animation-name: tossing;	

	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
	0% {
		transform: rotate(-4deg);	
	}
	50% {
		transform: rotate(4deg);
	}
	100% {
		transform: rotate(-4deg);	
	}						
}

@-webkit-keyframes tossing {
	0% {
		-webkit-transform: rotate(-4deg);	
	}
	50% {
		-webkit-transform: rotate(4deg);
	}
	100% {
		-webkit-transform: rotate(-4deg);	
	}				
}

/*
==============================================
click1
==============================================
*/

.click1{
	animation-name: click1;
	-webkit-animation-name: click1;	

	animation-duration: 0.05s;	
	-webkit-animation-duration: 0.05s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;

	visibility: visible !important;	
}

@keyframes click1 {
	0% {
		transform: scale(1.0);	
	}
	100% {
		transform: scale(0.95);
	}		
}

@-webkit-keyframes click1 {
	0% {
		-webkit-transform: scale(1.0);	
	}	
	100% {
		-webkit-transform: scale(0.95);
	}
}


/*
==============================================
flash
==============================================
*/

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
  animation-duration: 1s;	
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;	
  -webkit-animation-timing-function: ease-in-out;

  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;

  visibility: visible !important;	
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0.3;
  }
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0.3;
  }
}

/*
==============================================
rubberBand 
==============================================
*/
.bounceInUp {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: 1s;	
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;	
  -webkit-animation-timing-function: ease-in-out;

  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;

  visibility: visible !important;	
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}



/*
==============================================
bounceInUp 
==============================================
*/
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
  animation-duration: 1s;	
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;	
  -webkit-animation-timing-function: ease-in-out;

  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;

  visibility: visible !important;	
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


/*
==============================================
Test
==============================================
*/

.Test{
	animation-name: Test;
	-webkit-animation-name: Test;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;

	
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	/**/

	visibility: visible !important;	
}

@keyframes Test {
	0% {
		transform: translateY(0%) scale(1) rotate(360deg);
	}
	100% {
		transform: translateY(0%) scale(0.3) rotate(-360deg);
	}		
}

@-webkit-keyframes Test {
	0% {
		-webkit-transform: translateY(0%) scale(1) rotate(360deg);
	}	
	100% {
		-webkit-transform: translateY(0%) scale(0.3) rotate(-360deg);
	}
}

/*
==============================================
flipInY
==============================================
*/

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

/*
==============================================
fadeOutUp
==============================================
*/
.fadeOutUp {
  animation-name: fadeOutUp;
  -webkit-animation-name: fadeOutUp;	

  animation-duration: 1.5s;	
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

@-webkit-keyframes fadeOutUp {
	0% {
		opacity: 1;
	}	
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
	}			
}

/*
==============================================
swing
==============================================
*/

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
  
  animation-duration: 1.5s;	
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;  
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

/*
==============================================
tada
==============================================
*/
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
  
  animation-duration: 0.8s;	
  -webkit-animation-duration: 0.8s;

  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;/**/
  
  animation-delay:0.5s;
  -webkit-animation-delay:0.5s;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}