/* ----------------------------------------------
 * Generated by Animista on 2020-3-9 11:24:13
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-out-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

 
 
/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-out-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(-500px);
            transform: translateX(-500px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(-500px);
            transform: translateX(-500px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

 
 /**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(500px);
            transform: translateX(500px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(500px);
            transform: translateX(500px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-out-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(500px);
            transform: translateX(500px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(500px);
            transform: translateX(500px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation slide-out-right
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-right-delayed {
  0% {
    -webkit-transform: translateX(500px);
            transform: translateX(500px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out-right-delayed {
  0% {
    -webkit-transform: translateX(500px);
            transform: translateX(500px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
 
 
/**
 * ----------------------------------------
 * animation scale-in-topleft
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-topleft {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-topleft {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation scale-out-topleft
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-topleft {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes scale-out-topleft {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}



/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0%;
	width:0px;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
	width:50px;	
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
	width:0px;	
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
	width:50px;	
  }
}
/**
 * ----------------------------------------
 * animation scale-out-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-out-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}



/**
 * ----------------------------------------
 * animation scale-in-up-top
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-up-top {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
	 opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
	 opacity: 1;			
  }
}
@keyframes scale-in-up-top {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
	 opacity: 0;			
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
	 opacity: 1;			
  }
}
/**
 * ----------------------------------------
 * animation scale-out-up-top
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-up-top {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
	 opacity: 0;				
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
	opacity: 1;	
  }
}
@keyframes scale-out-up-top {
  0% {
    -webkit-transform: scale(0.2);
            transform: scale(0.2);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
	 opacity: 0;				
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
	 opacity: 1;				
  }
}

----------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center-fixed-width 
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center-fixed-width {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
	 opacity: 0;				
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
	 opacity: 1;			
  }
}
@keyframes scale-in-center-fixed-width  {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
	 opacity: 0;			
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
	 opacity: 1;				
  }
}



/**
 * ----------------------------------------
 * animation scale-out-center-fixed-width
 * ----------------------------------------
 */
@-webkit-keyframes scale-out-center-fixed-width {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
	 opacity: 0;				
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
	 opacity: 1;				
  }
}
@keyframes scale-out-center-fixed-width {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
	 opacity: 0;				
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
	 opacity: 1;				
  }
}


/**
 * ----------------------------------------
 * animation flip-in-ver-left
 * ----------------------------------------
 */
@-webkit-keyframes flip-in-ver-left {
  0% {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
    opacity: 1;
  }
  30% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }  
}
@keyframes flip-in-ver-left {
  0% {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
    opacity: 1;
  }
  30% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }  
}
/**
 * ----------------------------------------
 * animation flip-out-ver-left
 * ----------------------------------------
 */
@-webkit-keyframes flip-out-ver-left {
  0% {
    -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);

    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }
}
@keyframes flip-out-ver-left {
  0% {
    -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation flip-in-ver-left-scale
 * ----------------------------------------
 */
@-webkit-keyframes flip-in-ver-left-scale {
  0% {
    -webkit-transform: rotateY(90deg) scale(1.3);
            transform: rotateY(90deg) scale(1.3);
		
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0) scale(1);
            transform: rotateY(0) scale(1);
			
    opacity: 1;
  }
}
@keyframes flip-in-ver-left-scale {
  0% {
    -webkit-transform: rotateY(90deg) scale(1.3);
            transform: rotateY(90deg) scale(1.3);

			
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0) scale(1);
            transform: rotateY(0) scale(1);
	
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation flip-out-ver-left-scale
 * ----------------------------------------
 */
@-webkit-keyframes flip-out-ver-left-scale {
  0% {
    -webkit-transform: rotateY(-90deg) scale(1.3);
            transform: rotateY(-90deg) scale(1.3);
			
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0) scale(1);
            transform: rotateY(0) scale(1);
				
    opacity: 1;
  }
}
@keyframes flip-out-ver-left-scale {
  0% {
    -webkit-transform: rotateY(-90deg) scale(1.3);
            transform: rotateY(-90deg) scale(1.3);
			
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0) scale(1);
            transform: rotateY(0) scale(1);

    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation flip-in-hor-left
 * ----------------------------------------
 */
@-webkit-keyframes flip-in-hor-left {
  0% {
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-in-hor-left {
  0% {
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation flip-out-hor-left
 * ----------------------------------------
 */
@-webkit-keyframes flip-out-hor-left {
  0% {
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-out-hor-left {
  0% {
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}



/**
 * ----------------------------------------
 * animation slide-in-right-3d-flip
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-right-3d-flip {
  0% {
    -webkit-transform: translateX(0) rotateY(0deg);
            transform: translateX(0) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(500px) rotateY(-80deg);
            transform: translateX(500px)rotateY(-80deg);
    opacity: 0;
  }
}
@keyframes slide-in-right-3d-flip {
  0% {
    -webkit-transform: translateX(0) rotateY(0deg);
            transform: translateX(0) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(500px) rotateY(-80deg);
            transform: translateX(500px) rotateY(-80deg);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation slide-out-right-3d-flip
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-right-3d-flip {
  0% {
    -webkit-transform: translateX(500px) rotateY(-80deg);
            transform: translateX(500px) rotateY(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0deg);
            transform: translateX(0)rotateY(0deg);
    opacity: 1;
  }
}
@keyframes slide-out-right-3d-flip {
  0% {
    -webkit-transform: translateX(500px) rotateY(-80deg);
            transform: translateX(500px) rotateY(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0deg);
            transform: translateX(0) rotateY(0deg);
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation slide-in-left-3d-flip
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left-3d-flip{
  0% {
    -webkit-transform: perspective(800px) translateX(0) rotateY(0deg);
            transform: perspective(800px) translateX(0) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(800px) translateX(-100px) rotateY(80deg);
            transform: perspective(800px) translateX(-100px) rotateY(80deg);
    opacity: 0;
  }
}
@keyframes slide-in-left-3d-flip  {
  0% {
    -webkit-transform: perspective(800px) translateX(0) rotateY(0deg);
            transform: perspective(800px) translateX(0) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(800px) translateX(-100px) rotateY(80deg);
            transform: perspective(800px) translateX(-100px) rotateY(80deg);
    opacity: 0;
  }
}
/**
 * ----------------------------------------
 * animation slide-out-left-3d-flip
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-left-3d-flip {
  0% {
    -webkit-transform: perspective(800px) translateX(-100px) rotateY(80deg);
            transform: perspective(800px) translateX(-100px) rotateY(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: perspective(800px) translateX(0) rotateY(0deg);
            transform: perspective(800px) translateX(0) rotateY(0deg);
    opacity: 1;
  }
}
@keyframes slide-out-left-3d-flip  {
  0% {
    -webkit-transform: perspective(800px) translateX(-100px) rotateY(80deg);
            transform: perspective(800px) translateX(-100px) rotateY(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: perspective(800px) translateX(0) rotateY(0deg);
            transform: perspective(800px) translateX(0) rotateY(0deg);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation zoom-in-center-start
 * ----------------------------------------
 */
@-webkit-keyframes zoom-in-center-start{
  0% {
    -webkit-transform: translateZ(-8000px);
            transform: translateZ(-8000px);
		
    opacity: 0;
    -webkit-filter: blur(80px);
            filter: blur(80px);				
  } 
  90% {
    -webkit-transform: translateZ(-8000px);
            transform: translateZ(-8000px); 	
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);				
  }  

  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);			
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);				
  }
}
@keyframes zoom-in-center-start{
  0% {
    -webkit-transform: translateZ(-8000px);
            transform: translateZ(-8000px);
		
    opacity: 0;
    -webkit-filter: blur(80px);
            filter: blur(80px);				
  } 
  90% {
    -webkit-transform: translateZ(-8000px);
            transform: translateZ(-8000px); 	
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);				
  }  

  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);			
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);				
  }
}
/**
 * ----------------------------------------
 * animation zoom-in-center
 * ----------------------------------------
 */
@-webkit-keyframes zoom-in-center{
  0% {
    -webkit-transform: translateZ(-8000px);
            transform: translateZ(-8000px);
		
    opacity: 0;
    -webkit-filter: blur(80px);
            filter: blur(80px);				
  } 
  90% {
    -webkit-transform: translateZ(-8000px);
            transform: translateZ(-8000px); 	
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);				
  }  

  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);			
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);				
  }
}
@keyframes zoom-in-center{
  0% {
    -webkit-transform: translateZ(-8000px);
            transform: translateZ(-8000px);
		
    opacity: 0;
    -webkit-filter: blur(80px);
            filter: blur(80px);				
  } 
  90% {
    -webkit-transform: translateZ(-8000px);
            transform: translateZ(-8000px); 	
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);				
  }  

  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);			
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);				
  }
}

/**
 * ----------------------------------------
 * animation zoom-out-center
 * ----------------------------------------
 */
@-webkit-keyframes zoom-out-center {
  0% {
    -webkit-transform: translateZ(-20000px);
            transform: translateZ(-20000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes zoom-out-center {
  0% {
    -webkit-transform: translateZ(-20000px);
            transform: translateZ(-20000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation zoom-in-center-megazoom-quick
 * ----------------------------------------
 */
@-webkit-keyframes zoom-in-center-megazoom-quick {
  0% {
    -webkit-transform: translateZ(1);
            transform: translateZ(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(500px);
            transform: translateZ(500px);
    opacity: 1;
  }
}
@keyframes zoom-in-center-megazoom-quick{
  0% {
    -webkit-transform: translateZ(1);
            transform: translateZ(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(500px);
            transform: translateZ(500px);
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation zoom-in-center-megazoom
 * ----------------------------------------
 */
@-webkit-keyframes zoom-in-center-megazoom {
  0% {
    -webkit-transform: translateZ(1);
            transform: translateZ(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(1000px);
            transform: translateZ(1000px);
    opacity: 0;
  }
}
@keyframes zoom-in-center-megazoom{
  0% {
    -webkit-transform: translateZ(1);
            transform: translateZ(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(1000px);
            transform: translateZ(1000px);
    opacity: 0;
  }
}


/**
 * ----------------------------------------
 * animation zoom-out-center-megazoom
 * ----------------------------------------
 */
@-webkit-keyframes zoom-out-center-megazoom{
  0% {
    -webkit-transform: translateZ(1);
            transform: translateZ(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(600px);
            transform: translateZ(600px);
    opacity: 0;
  }
}
@keyframes zoom-out-center-megazoom {
  0% {
    -webkit-transform: translateZ(1);
            transform: translateZ(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(600px);
            transform: translateZ(600px);
    opacity: 0;
  }
}


/**
 * ----------------------------------------
 * animation fall-in-center-elliptic
 * ----------------------------------------
 */
@-webkit-keyframes fall-in-center-elliptic {
  0% {
    -webkit-transform: translateY(-600px) rotateX(30deg) scale(0.5);
            transform: translateY(-600px) rotateX(30deg) scale(0.5);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -500px;
            transform-origin: 50% -500px;
    opacity: 1;
  }
}
@keyframes fall-in-center-elliptic {
  0% {
    -webkit-transform: translateY(-600px) rotateX(30deg) scale(0.5);
            transform: translateY(-600px) rotateX(30deg) scale(0.5);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -500px;
            transform-origin: 50% -500px;
    opacity: 1;
  }
}
/

/**
 * ----------------------------------------
 * animation fall-out-center-elliptic
 * ----------------------------------------
 */
@-webkit-keyframes fall-out-center-elliptic{
  0% {
    -webkit-transform: translateY(-600px) rotateX(30deg) scale(0.5);
            transform: translateY(-600px) rotateX(30deg) scale(0.5);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -500px;
            transform-origin: 50% -500px;
    opacity: 1;
  }
}
@keyframes fall-out-center-elliptic{
  0% {
    -webkit-transform: translateY(-600px) rotateX(30deg) scale(0.5);
            transform: translateY(-600px) rotateX(30deg) scale(0.5);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% -500px;
            transform-origin: 50% -500px;
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation fall-in-topleft
 * ----------------------------------------
 */
@-webkit-keyframes fall-in-topleft {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
            transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
@keyframes fall-in-topleft {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
            transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation tilt-in-fwd-tl
 * ----------------------------------------
 */
@-webkit-keyframes fall-out-topleft {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
            transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
@keyframes fall-out-topleft{
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
            transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
------------------------------------------ */

/**
 * ----------------------------------------
 * animation rotate-in-right
 * ----------------------------------------
 */
@-webkit-keyframes rotate-in-right{
  0% {
    -webkit-transform: translateZ(500px) rotate(45deg);
            transform: translateZ(500px) rotate(45deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) rotate(0);
            transform: translateZ(0) rotate(0);
    opacity: 1;
  }
}
@keyframes rotate-in-right {
  0% {
    -webkit-transform: translateZ(500px) rotate(45deg);
            transform: translateZ(500px) rotate(45deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) rotate(0);
            transform: translateZ(0) rotate(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation rotate-out-right
 * ----------------------------------------
 */
@-webkit-keyframes rotate-out-right{
  0% {
    -webkit-transform: translateZ(0) rotate(0);
            transform: translateZ(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotate(45deg);
            transform: translateZ(-500px) rotate(45deg);
    opacity: 0;
  }
}
@keyframes rotate-out-right {
  0% {
    -webkit-transform: translateZ(0) rotate(0);
            transform: translateZ(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotate(45deg);
            transform: translateZ(-500px) rotate(45deg);
    opacity: 0;
  }
}


/**
 * ----------------------------------------
 * animation rotate-in-left
 * ----------------------------------------
 */
@-webkit-keyframes rotate-in-left{
  0% {
    -webkit-transform: translateX(-500px) rotate(-360deg);
            transform: translateX(-500px) rotate(-360deg);			
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0);
            transform: translateX(0) rotate(0);

    opacity: 1;
  }
}
@keyframes rotate-in-left {
  0% {
    -webkit-transform: translateX(-500px) rotate(-360deg);
            transform: translateX(-500px) rotate(-360deg);
		
    opacity: 0;
  }

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


/**
 * ----------------------------------------
 * animation rotate-out-left
 * ----------------------------------------
 */
@-webkit-keyframes rotate-out-left{
  0% {
    -webkit-transform: translateZ(0) rotate(0);
            transform: translateZ(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotate(-45deg);
            transform: translateZ(-500px) rotate(-45deg);
    opacity: 0;
  }
}
@keyframes rotate-out-left {
  0% {
    -webkit-transform: translateZ(0) rotate(0);
            transform: translateZ(0) rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-500px) rotate(-45deg);
            transform: translateZ(-500px) rotate(-45deg);
    opacity: 0;
  }
}

/**
 * ----------------------------------------
 * animation label-glow-in
 * ----------------------------------------
 */
@-webkit-keyframes label-glow-in{
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

  }
  100% {
	-webkit-box-shadow: 0px 0 10px 10px rgba(54, 255, 0, 0.6);
            box-shadow: 0px 0 10px 10px rgba(54, 255, 0, 0.6);
  }
}
@keyframes label-glow-in {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }

  100% {
	-webkit-box-shadow: 0px 0 10px 10px rgba(54, 255, 0, 0.6);
            box-shadow: 0px 0 10px 10px rgba(54, 255, 0, 0.6);
  }
}


/**
 * ----------------------------------------
 * animation label-glow-out
 * ----------------------------------------
 */
@-webkit-keyframes label-glow-out{
   0% {
	-webkit-box-shadow: 0px 0 10px 10px rgba(54, 255, 0, 0.6);
            box-shadow: 0px 0 10px 10px rgba(54, 255, 0, 0.6);
}
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
@keyframes label-glow-in {
  0% {
	-webkit-box-shadow: 0px 0 10px 10px rgba(54, 255, 0, 0.6);
            box-shadow: 0px 0 10px 10px rgba(54, 255, 0, 0.6);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}



/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -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(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -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(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

-------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-in-ver-left
 * ----------------------------------------
 */
@-webkit-keyframes flip-in-ver-left {
  0% {
    -webkit-transform: rotateY(-80deg);
            transform: rotateY(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }
}
@keyframes flip-in-ver-left {
  0% {
    -webkit-transform: rotateY(-80deg);
            transform: rotateY(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation tilt-in-fwd-tl
 * ----------------------------------------
 */
@-webkit-keyframes tilt-in-fwd-tl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-100px, -100px) skew(35deg, -10deg);
            transform: rotateY(-20deg) rotateX(35deg) translate(-100px, -100px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
@keyframes tilt-in-fwd-tl {
  0% {
    -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-100px, -100px) skew(35deg, -10deg);
            transform: rotateY(-20deg) rotateX(35deg) translate(-100px, -100px) skew(35deg, -10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}




/**
  * ##################################################################################################################################################################################
 * ----------------------------------------
 * IN and OUT-Animation MIXED
 * ----------------------------------------
  * ##################################################################################################################################################################################
 */

/**
 * ----------------------------------------
 * animation flip-scale-2-hor-top
 * ----------------------------------------
 */
@-webkit-keyframes flip-scale-2-hor-top {
  0% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
  50% {
    -webkit-transform: translateY(-50%) rotateX(-90deg) scale(2);
            transform: translateY(-50%) rotateX(-90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateY(-100%) rotateX(-180deg) scale(1);
            transform: translateY(-100%) rotateX(-180deg) scale(1);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
}
@keyframes flip-scale-2-hor-top {
  0% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
  50% {
    -webkit-transform: translateY(-50%) rotateX(-90deg) scale(2);
            transform: translateY(-50%) rotateX(-90deg) scale(2);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: translateY(-100%) rotateX(-180deg) scale(1);
            transform: translateY(-100%) rotateX(-180deg) scale(1);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
}



/**
 * ----------------------------------------
 * animation rotate-scale-up
 * ----------------------------------------
 */
@-webkit-keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}




/**
 * ----------------------------------------
 * animation slide-down-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-down-top{
  0% {
    opacity: 0;
	height: 0px;
	margin-top:0px;	
  }
  100% {
    opacity: 1;
	height: 100px;
	margin-top:5px;	
  }
}
@keyframes slide-down-top{
  0% {
    opacity: 0;
	height: 0px;
	margin-top:0px;		
  }
  100% {
    opacity: 1;
	height: 100px;
	margin-top:5px;		
  }
}


/**
 * ----------------------------------------
 * animation slide-up-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-up-top {
  0% {
    opacity: 1;
	height: 100px;
	margin-top:5px;		
  }
  100% {
    opacity: 0;
	height: 0px;
	margin-top:0px;		
  }
}
@keyframes slide-up-top{
  0% {
    opacity: 1;
	height: 100px;
	margin-top:5px;		
  }
  100% {
    opacity: 0;
	height: 0px;
	margin-top:0px;		
  }
}


/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}





/**
  * ##################################################################################################################################################################################
 * ----------------------------------------
 * INFINITE ANIMATION LOOPS 
 * ----------------------------------------
  * ##################################################################################################################################################################################
 */


/**
 * ----------------------------------------
 * animation rotate-scale-up-down
 * ----------------------------------------
 */
@-webkit-keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}


/**
 * ----------------------------------------
 * animation lower-opacity
 * ----------------------------------------
 */
@-webkit-keyframes lower-opacity{
  0% {
    opacity: 1;
  }
  100% {

    opacity: 0.2;
  }
}
@keyframes lower-opacity{
  0% {

    opacity: 1;
  }
  100% {

    opacity: 0.2;
  }
}

/**
 * ----------------------------------------
 * animation higher-opacity
 * ----------------------------------------
 */
@-webkit-keyframes higher-opacity{
  0% {
    opacity: 0.2;
  }
  100% {

    opacity: 1;
  }
}
@keyframes higher-opacity{
  0% {

    opacity: 0.2;
  }
  100% {

    opacity: 1;
  }
}