/* animations
===========================*/

.zoom-in{
    -webkit-animation: zoomIn 600ms ease both;
    -moz-animation: zoomIn 600ms ease both;
    -o-animation: zoomIn 600ms ease both;
    animation: zoomIn 600ms 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 600ms ease both;
    -moz-animation: zoomOut 600ms ease both;
    -o-animation: zoomOut 600ms ease both;
    animation: zoomOut 600ms 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); }
}


.bounce-in{
    -webkit-animation: bounceIn 600ms ease both;
    -moz-animation: bounceIn 600ms ease both;
    -o-animation: bounceIn 600ms ease both;
    animation: bounceIn 600ms ease both;
}
@-webkit-keyframes bounceIn {
    0% { -webkit-transform: scale(.3); }
    50% { -webkit-transform: scale(1.05); }
    70% { -webkit-transform: scale(.9); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes bounceIn {
    0% { -moz-transform: scale(.3); }
    50% { -moz-transform: scale(1.05); }
    70% { -moz-transform: scale(.9); }
    100% { -moz-transform: scale(1); }
}
@-o-keyframes bounceIn {
    0% { -o-transform: scale(.3); }
    50% { -o-transform: scale(1.05); }
    70% { -o-transform: scale(.9); }
    100% { -o-transform: scale(1); }
}
@keyframes bounceIn {
    0% { transform: scale(.3); }
    50% { transform: scale(1.05); }
    70% { transform: scale(.9); }
    100% { transform: scale(1); }
}


.bounce-up{
    -webkit-animation: bounceInUp 600ms ease both;
    -moz-animation: bounceInUp 600ms ease both;
    -o-animation: bounceInUp 600ms ease both;
    animation: bounceInUp 600ms ease both;
}
@-webkit-keyframes bounceInUp {
    0% { -webkit-transform: translateY(2000px); }
    60% { -webkit-transform: translateY(-30px); }
    80% { -webkit-transform: translateY(10px); }
    100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes bounceInUp {
    0% { -moz-transform: translateY(2000px); }
    60% { -moz-transform: translateY(-30px); }
    80% { -moz-transform: translateY(10px); }
    100% { -moz-transform: translateY(0); }
}
@-o-keyframes bounceInUp {
    0% { -o-transform: translateY(2000px); }
    60% { -o-transform: translateY(-30px); }
    80% { -o-transform: translateY(10px); }
    100% { -o-transform: translateY(0); }
}
@keyframes bounceInUp {
    0% { transform: translateY(2000px); }
    60% { transform: translateY(-30px); }
    80% { transform: translateY(10px); }
    100% { transform: translateY(0); }
}


.bounce-right{
    -webkit-animation: bounceInRight 600ms ease both;
    -moz-animation: bounceInRight 600ms ease both;
    -o-animation: bounceInRight 600ms ease both;
    animation: bounceInRight 600ms ease both;
}
@-webkit-keyframes bounceInRight {
    0% { -webkit-transform: translateX(2000px); }
    60% { -webkit-transform: translateX(-30px); }
    80% { -webkit-transform: translateX(10px); }
    100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes bounceInRight {
    0% { -moz-transform: translateX(2000px); }
    60% { -moz-transform: translateX(-30px); }
    80% { -moz-transform: translateX(10px); }
    100% { -moz-transform: translateX(0); }
}
@-moz-keyframes bounceInRight {
    0% { -o-transform: translateX(2000px); }
    60% { -o-transform: translateX(-30px); }
    80% { -o-transform: translateX(10px); }
    100% { -o-transform: translateX(0); }
}
@keyframes bounceInRight {
    0% { transform: translateX(2000px); }
    60% { transform: translateX(-30px); }
    80% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}


.bounce-down{
    -webkit-animation: bounceInDown 600ms ease both;
    -moz-animation: bounceInDown 600ms ease both;
    -o-animation: bounceInDown 600ms ease both;
    animation: bounceInDown 600ms ease both;
}
@-webkit-keyframes bounceInDown {
    0% { -webkit-transform: translateY(-2000px); }
    60% { -webkit-transform: translateY(30px); }
    80% { -webkit-transform: translateY(-10px); }
    100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes bounceInDown {
    0% { -moz-transform: translateY(-2000px); }
    60% { -moz-transform: translateY(30px); }
    80% { -moz-transform: translateY(-10px); }
    100% { -moz-transform: translateY(0); }
}
@-o-keyframes bounceInDown {
    0% { -o-transform: translateY(-2000px); }
    60% { -o-transform: translateY(30px); }
    80% { -o-transform: translateY(-10px); }
    100% { -o-transform: translateY(0); }
}
@keyframes bounceInDown {
    0% { transform: translateY(-2000px); }
    60% { transform: translateY(30px); }
    80% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}


.bounce-left{
    -webkit-animation: bounceInLeft 600ms ease both;
    -moz-animation: bounceInLeft 600ms ease both;
    -o-animation: bounceInLeft 600ms ease both;
    animation: bounceInLeft 600ms ease both;
}
@-webkit-keyframes bounceInLeft {
    0% { -webkit-transform: translateX(-2000px); }
    60% { -webkit-transform: translateX(30px); }
    80% { -webkit-transform: translateX(-10px); }
    100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes bounceInLeft {
    0% { -moz-transform: translateX(-2000px); }
    60% { -moz-transform: translateX(30px); }
    80% { -moz-transform: translateX(-10px); }
    100% { -moz-transform: translateX(0); }
}
@-o-keyframes bounceInLeft {
    0% { -o-transform: translateX(-2000px); }
    60% { -o-transform: translateX(30px); }
    80% { -o-transform: translateX(-10px); }
    100% { -o-transform: translateX(0); }
}
@keyframes bounceInLeft {
    0% { transform: translateX(-2000px); }
    60% { transform: translateX(30px); }
    80% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}


.page-right{
    -webkit-animation: pageRight 600ms ease both;
    -webkit-transform-origin: 100% 50%;
    -moz-animation: pageRight 600ms ease both;
    -moz-transform-origin: 100% 50%;
    -o-animation: pageRight 600ms ease both;
    -o-transform-origin: 100% 50%;
    animation: pageRight 600ms ease both;
    transform-origin: 100% 50%;
}
@-webkit-keyframes pageRight {
    0% { -webkit-transform: perspective(400px) rotateY(90deg); }
    100% { -webkit-transform: perspective(400px) rotateY(0deg); }
}
@-moz-keyframes pageRight {
    0% { -moz-transform: perspective(400px) rotateY(90deg); }
    100% { -moz-transform: perspective(400px) rotateY(0deg); }
}
@-o-keyframes pageRight {
    0% { -o-transform: perspective(400px) rotateY(90deg); }
    100% { -o-transform: perspective(400px) rotateY(0deg); }
}
@keyframes pageRight {
    0% { transform: perspective(400px) rotateY(90deg); }
    100% { transform: perspective(400px) rotateY(0deg); }
}


.page-left{
    -webkit-animation: pageLeft 600ms ease both;
    -webkit-transform-origin: 0% 50%;
    -moz-animation: pageLeft 600ms ease both;
    -moz-transform-origin: 0% 50%;
    -o-animation: pageLeft 600ms ease both;
    -o-transform-origin: 0% 50%;
    animation: pageLeft 600ms ease both;
    transform-origin: 0% 50%;
}
@-webkit-keyframes pageLeft {
    0% { -webkit-transform: perspective(400px) rotateY(-90deg); }
    100% { -webkit-transform: perspective(400px) rotateY(0deg); }
}
@-moz-keyframes pageLeft {
    0% { -moz-transform: perspective(400px) rotateY(-90deg); }
    100% { -moz-transform: perspective(400px) rotateY(0deg); }
}
@-o-keyframes pageLeft {
    0% { -o-transform: perspective(400px) rotateY(-90deg); }
    100% { -o-transform: perspective(400px) rotateY(0deg); }
}
@keyframes pageLeft {
    0% { transform: perspective(400px) rotateY(-90deg); }
    100% { transform: perspective(400px) rotateY(0deg); }
}


.swing {
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-o-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation: swing 600ms ease-out both;
	-moz-animation: swing 600ms ease-out both;
	-o-animation: swing 600ms ease-out both;
	animation: swing 600ms 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); }
}


.wobble {
	-webkit-animation: wobble 600ms ease-out both;
	-moz-animation: wobble 600ms ease-out both;
	-o-animation: wobble 600ms ease-out both;
	animation: wobble 600ms ease-out both;
}
@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}
@-moz-keyframes wobble {
  0% { -moz-transform: translateX(0%); }
  15% { -moz-transform: translateX(-25%) rotate(-5deg); }
  30% { -moz-transform: translateX(20%) rotate(3deg); }
  45% { -moz-transform: translateX(-15%) rotate(-3deg); }
  60% { -moz-transform: translateX(10%) rotate(2deg); }
  75% { -moz-transform: translateX(-5%) rotate(-1deg); }
  100% { -moz-transform: translateX(0%); }
}
@-o-keyframes wobble {
  0% { -o-transform: translateX(0%); }
  15% { -o-transform: translateX(-25%) rotate(-5deg); }
  30% { -o-transform: translateX(20%) rotate(3deg); }
  45% { -o-transform: translateX(-15%) rotate(-3deg); }
  60% { -o-transform: translateX(10%) rotate(2deg); }
  75% { -o-transform: translateX(-5%) rotate(-1deg); }
  100% { -o-transform: translateX(0%); }
}
@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

