/* CSS3 ANIMATIONS */

.zoom-in{
    -webkit-animation: zoomIn 400ms ease both;
    -moz-animation: zoomIn 400ms ease both;
    -o-animation: zoomIn 400ms ease both;
    animation: zoomIn 400ms ease both;
}
@-webkit-keyframes zoomIn {
    0% { -webkit-transform: scale(1.5); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes zoomIn {
    0% { -moz-transform: scale(1.5); }
    100% { -moz-transform: scale(1); }
}
@-o-keyframes zoomIn {
    0% { opacity: 0; -o-transform: scale(1.5); }
    100% { opacity: 1; -o-transform: scale(1); }
}
@keyframes zoomIn {
    0% { transform: scale(1.5); }
    100% { transform: scale(1); }
}
.zoom-out{
    -webkit-animation: zoomOut 400ms ease both;
    -moz-animation: zoomOut 400ms ease both;
    -o-animation: zoomOut 400ms ease both;
    animation: zoomOut 400ms ease both;
}
@-webkit-keyframes zoomOut {
    0% { -webkit-transform: scale(.6); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes zoomOut {
    0% { -moz-transform: scale(.6); }
    100% { -moz-transform: scale(1); }
}
@-o-keyframes zoomOut {
    0% { -o-transform: scale(.6); }
    100% { -o-transform: scale(1); }
}
@keyframes zoomOut {
    0% { transform: scale(.6); }
    100% { transform: scale(1); }
}
.drop-up{
    -webkit-animation: drop-up 400ms ease both;
    -moz-animation: drop-up 400ms ease both;
    -o-animation: drop-up 400ms ease both;
    animation: drop-up 400ms ease both;
}
@-webkit-keyframes drop-up {
    0% { -webkit-transform: translateY(100px); }
    100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes drop-up {
    0% { -moz-transform: translateY(100px); }
    100% { -moz-transform: translateY(0); }
}
@-o-keyframes drop-up {
    0% { -o-transform: translateY(100px); }
    100% { -o-transform: translateY(0); }
}
@keyframes drop-up {
    0% { transform: translateY(100px); }
    100% { transform: translateY(0); }
}
.drop-left{
    -webkit-animation: drop-left 400ms ease both;
    -moz-animation: drop-left 400ms ease both;
    -o-animation: drop-left 400ms ease both;
    animation: drop-left 400ms ease both;
}
@-webkit-keyframes drop-left {
    0% { -webkit-transform: translateX(-100px); }
    100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes drop-left {
    0% { -moz-transform: translateX(-100px); }
    100% { -moz-transform: translateX(0); }
}
@-o-keyframes drop-left {
    0% { -o-transform: translateX(-100px); }
    100% { -o-transform: translateX(0); }
}
@keyframes drop-left {
    0% { transform: translateX(-100px); }
    100% { transform: translateX(0); }
}
.swing {
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-o-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation: swing 400ms ease-out both;
	-moz-animation: swing 400ms ease-out both;
	-o-animation: swing 400ms ease-out both;
	animation: swing 400ms ease-out both;
}
@-webkit-keyframes swing {
	20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
	20% { -webkit-transform: rotate(15deg); }	
	40% { -webkit-transform: rotate(-10deg); }
	60% { -webkit-transform: rotate(5deg); }	
	80% { -webkit-transform: rotate(-5deg); }	
	100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes swing {
	20% { -moz-transform: rotate(15deg); }	
	40% { -moz-transform: rotate(-10deg); }
	60% { -moz-transform: rotate(5deg); }	
	80% { -moz-transform: rotate(-5deg); }	
	100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes swing {
	20% { -o-transform: rotate(15deg); }	
	40% { -o-transform: rotate(-10deg); }
	60% { -o-transform: rotate(5deg); }	
	80% { -o-transform: rotate(-5deg); }	
	100% { -o-transform: rotate(0deg); }
}
@keyframes swing {
	20% { transform: rotate(15deg); }	
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }	
	80% { transform: rotate(-5deg); }	
	100% { transform: rotate(0deg); }
}

.flip-animation{
	-webkit-animation: flip-animation 700ms ease both;
	-moz-animation: flip-animation 700ms ease both;
    -o-animation: flip-animation 700ms ease both;
    animation: flip-animation 700ms ease both;
}
@-webkit-keyframes flip-animation {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

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

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

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

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

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

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

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
.roll-in{
	-webkit-animation: roll-in 400ms ease both;
	-moz-animation: roll-in 400ms ease both;
    -o-animation: roll-in 400ms ease both;
    animation: roll-in 400ms ease both;
}
@-webkit-keyframes roll-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-15deg);
    transform: translateX(-100%) rotate(-15deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}
@keyframes roll-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-15deg);
    -ms-transform: translateX(-100%) rotate(-15deg);
    transform: translateX(-100%) rotate(-15deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}
.stretch{
	-webkit-animation: stretch 500ms ease both;
	-moz-animation: stretch 500ms ease both;
    -o-animation: stretch 500ms ease both;
    animation: stretch 500ms ease both;
	transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%; 		
}
@keyframes stretch{
	0% { transform: scaleX(0.3); }
	40% { transform: scaleX(1.02); }
	60% { transform: scaleX(0.98); }
	80% { transform: scaleX(1.01); }
	100% { transform: scaleX(0.98); }				
	80% { transform: scaleX(1.01); }
	100% { transform: scaleX(1); }							
}
@-webkit-keyframes stretch{
	0% { -webkit-transform: scaleX(0.3); }
	40% { -webkit-transform: scaleX(1.02); }
	60% { -webkit-transform: scaleX(0.98); }
	80% { -webkit-transform: scaleX(1.01); }
	100% { -webkit-transform: scaleX(0.98); }				
	80% { -webkit-transform: scaleX(1.01); }
	100% { -webkit-transform: scaleX(1); }		
}
@-o-keyframes stretch{
	0% { -o-transform: scaleX(0.3); }
	40% { -o-transform: scaleX(1.02); }
	60% { -o-transform: scaleX(0.98); }
	80% { -o-transform: scaleX(1.01); }
	100% { -o-transform: scaleX(0.98); }				
	80% { -o-transform: scaleX(1.01); }
	100% { -o-transform: scaleX(1); }		
}