/* http://daneden.me/animate V3.5.2 - Copyright (c) 2017 Daniel Eden */
.animated {animation-duration: 1s;animation-fill-mode: both;}
.animated.infinite {animation-iteration-count: infinite;}
.animated.hinge {animation-duration: 2s;}
.animated.motion {animation-duration: .5s;}
/* animation motion */
.a-delay1 {animation-delay: 0.1s;}
.a-delay2 {animation-delay: 0.2s;}
.a-delay3 {animation-delay: 0.3s;}
.a-delay4 {animation-delay: 0.4s;}
.a-delay5 {animation-delay: 0.5s;}
.a-delay6 {animation-delay: 0.6s;}
.a-delay7 {animation-delay: 0.7s;}
.a-delay8 {animation-delay: 0.8s;}
.a-delay9 {animation-delay: 0.9s;}
.a-delay10 {animation-delay: 1s;}

/*.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut {animation-duration: .75s;}*/
.bigEntrance{animation-name: bigEntrance;animation-duration: 1.6s;animation-timing-function: ease-out;visibility: visible !important;}
@keyframes bigEntrance { 0%{transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);opacity: 0.2;} 30%{transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);opacity: 1;}45%{transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);opacity: 1;} 60%{transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);opacity: 1;}5%{transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);opacity: 1;}90%{transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);opacity: 1;} 100%{transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);opacity: 1;}}

.bounce{animation-name: bounce;animation-duration: 1.6s;animation-timing-function: ease;transform-origin: 50% 100%;}
@keyframes bounce { 0%{transform: translateY(0%) scaleY(0.6);} 60%{transform: translateY(-100%) scaleY(1.1);} 70%{transform: translateY(0%) scaleY(0.95) scaleX(1.05);} 80%{transform: translateY(0%) scaleY(1.05) scaleX(1);}90%{transform: translateY(0%) scaleY(0.95) scaleX(1);} 100%{transform: translateY(0%) scaleY(1) scaleX(1);}}

.bounceIn {animation-name: bounceIn;}
@keyframes bounceIn {from, 20%, 40%, 60%, 80%, to{animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}0%{opacity: 0;transform: scale3d(.3, .3, .3);} 20%{transform: scale3d(1.1, 1.1, 1.1);} 40%{transform: scale3d(.9, .9, .9);} 60%{opacity: 1;transform: scale3d(1.03, 1.03, 1.03);} 80%{transform: scale3d(.97, .97, .97);} to{opacity: 1;transform: scale3d(1, 1, 1);}}

.bounceInDown {animation-name: bounceInDown;}
@keyframes bounceInDown {from, 60%, 75%, 90%, to{animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}0%{opacity: 0;transform: translate3d(0, -3000px, 0);} 60%{opacity: 1;transform: translate3d(0, 25px, 0);}75%{transform: translate3d(0, -10px, 0);}90%{transform: translate3d(0, 5px, 0);} to{transform: none;}}

.bounceInLeft {animation-name: bounceInLeft;}
@keyframes bounceInLeft {from, 60%, 75%, 90%, to{animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}0%{opacity: 0;transform: translate3d(-3000px, 0, 0);} 60%{opacity: 1;transform: translate3d(25px, 0, 0);}75%{transform: translate3d(-10px, 0, 0);}90%{transform: translate3d(5px, 0, 0);} to{transform: none;}}

.bounceInRight {animation-name: bounceInRight;}
@keyframes bounceInRight {from, 60%, 75%, 90%, to{animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}from {opacity: 0;transform: translate3d(3000px, 0, 0);} 60%{opacity: 1;transform: translate3d(-25px, 0, 0);}75%{transform: translate3d(10px, 0, 0);}90%{transform: translate3d(-5px, 0, 0);} to{transform: none;}}

.bounceInUp {animation-name: bounceInUp;}
@keyframes bounceInUp {from, 60%, 75%, 90%, to{animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}from {opacity: 0;transform: translate3d(0, 3000px, 0);} 60%{opacity: 1;transform: translate3d(0, -20px, 0);}75%{transform: translate3d(0, 10px, 0);}90%{transform: translate3d(0, -5px, 0);} to{transform: translate3d(0, 0, 0);}}

.bounceOut {animation-name: bounceOut;}
@keyframes bounceOut {20%{transform: scale3d(.9, .9, .9);} 50%, 55%{opacity: 1;transform: scale3d(1.1, 1.1, 1.1);} to{opacity: 0;transform: scale3d(.3, .3, .3);}}

.bounceOutDown {animation-name: bounceOutDown;}
@keyframes bounceOutDown {20%{transform: translate3d(0, 10px, 0);} 40%, 45%{opacity: 1;transform: translate3d(0, -20px, 0);} to{opacity: 0;transform: translate3d(0, 2000px, 0);}}

.bounceOutLeft {animation-name: bounceOutLeft;}
@keyframes bounceOutLeft {20%{opacity: 1;transform: translate3d(20px, 0, 0);} to{opacity: 0;transform: translate3d(-2000px, 0, 0);}}

.bounceOutRight {animation-name: bounceOutRight;}
@keyframes bounceOutRight {20%{opacity: 1;transform: translate3d(-20px, 0, 0);} to{opacity: 0;transform: translate3d(2000px, 0, 0);}}

.bounceOutUp {animation-name: bounceOutUp;}
@keyframes bounceOutUp {20%{transform: translate3d(0, -10px, 0);} 40%, 45%{opacity: 1;transform: translate3d(0, 20px, 0);} to{opacity: 0;transform: translate3d(0, -2000px, 0);}}

.expandUp{animation-name: expandUp;animation-duration: 0.7s;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);}}

.expandOpen{animation-name: expandOpen;animation-duration: 1.2s;-webkit-animation-duration: 1.2s;animation-timing-function: ease-out;visibility: visible !important;}
@keyframes expandOpen { 0%{transform: scale(1.8);} 50%{transform: scale(0.95);} 80%{transform: scale(1.05);}90%{transform: scale(0.98);} 100%{transform: scale(1);}}

.flash {animation-name: flash;}
@keyframes flash {from, 50%, to{opacity: 1;}25%, 75%{opacity: 0;}}

.floating{animation-name: floating;animation-duration: 1.5s;animation-iteration-count: infinite;}
@keyframes floating { 0%{transform: translateY(0%);} 50%{transform: translateY(8%);} 100%{transform: translateY(0%);}}

.fadeIn{animation-name: fadeIn;animation-duration: 1.5s;animation-timing-function: ease-in-out;visibility: visible !important;}
@keyframes fadeIn { 0%{transform: scale(0);opacity: 0.0;} 60%{transform: scale(1.1);} 80%{transform: scale(0.9);opacity: 1;} 100%{transform: scale(1);opacity: 1;}}

.fadeInDown {animation-name: fadeInDown;}
@keyframes fadeInDown { from{opacity: 0;transform: translate3d(0, -100%, 0);} to{opacity: 1;transform: none;}}

.fadeInDownBig {animation-name: fadeInDownBig;}
@keyframes fadeInDownBig { from{opacity: 0;transform: translate3d(0, -2000px, 0);} to{opacity: 1;transform: none;}}

.fadeInLeft {animation-name: fadeInLeft;}
@keyframes fadeInLeft { from{opacity: 0;transform: translate3d(-100%, 0, 0);} to{opacity: 1;transform: none;}}

.fadeInLeftBig {animation-name: fadeInLeftBig;}
@keyframes fadeInLeftBig { from{opacity: 0;transform: translate3d(-2000px, 0, 0);} to{opacity: 1;transform: none;}}

.fadeInRight {animation-name: fadeInRight;}
@keyframes fadeInRight { from{opacity: 0;transform: translate3d(100%, 0, 0);} to{opacity: 1;transform: none;}}

.fadeInRightBig {animation-name: fadeInRightBig;}
@keyframes fadeInRightBig { from{opacity: 0;transform: translate3d(2000px, 0, 0);} to{opacity: 1;transform: none;}}

.fadeInUp {animation-name: fadeInUp;}
@keyframes fadeInUp { from{opacity: 0;transform: translate3d(0, 100%, 0);} to{opacity: 1;transform: none;}}

.fadeInUpBig {animation-name: fadeInUpBig;}
@keyframes fadeInUpBig { from{opacity: 0;transform: translate3d(0, 2000px, 0);} to{opacity: 1;transform: none;}}

.fadeOut {animation-name: fadeOut;}
@keyframes fadeOut { from{opacity: 1;} to{opacity: 0;}}

.fadeOutDown {animation-name: fadeOutDown;}
@keyframes fadeOutDown { from{opacity: 1;} to{opacity: 0;transform: translate3d(0, 100%, 0);}}

.fadeOutDownBig {animation-name: fadeOutDownBig;}
@keyframes fadeOutDownBig { from{opacity: 1;} to{opacity: 0;transform: translate3d(0, 2000px, 0);}}

.fadeOutLeft {animation-name: fadeOutLeft;}
@keyframes fadeOutLeft { from{opacity: 1;} to{opacity: 0;transform: translate3d(-100%, 0, 0);}}

.fadeOutLeftBig {animation-name: fadeOutLeftBig;}
@keyframes fadeOutLeftBig { from{opacity: 1;} to{opacity: 0;transform: translate3d(-2000px, 0, 0);}}

.fadeOutRight {animation-name: fadeOutRight;}
@keyframes fadeOutRight { from{opacity: 1;} to{opacity: 0;transform: translate3d(100%, 0, 0);}}

.fadeOutRightBig {animation-name: fadeOutRightBig;}
@keyframes fadeOutRightBig { from{opacity: 1;} to{opacity: 0;transform: translate3d(2000px, 0, 0);}}

.fadeOutUp {animation-name: fadeOutUp;}
@keyframes fadeOutUp { from{opacity: 1;} to{opacity: 0;transform: translate3d(0, -100%, 0);}}

.fadeOutUpBig {animation-name: fadeOutUpBig;}
@keyframes fadeOutUpBig { from{opacity: 1;} to{opacity: 0;transform: translate3d(0, -2000px, 0);}}

.flip {animation-name: flip;-backface-visibility: visible;}
@keyframes flip { from{transform: perspective(400px) rotate3d(0, 1, 0, -360deg);animation-timing-function: ease-out;} 40%{transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);animation-timing-function: ease-out;} 50%{transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);animation-timing-function: ease-in;} 80%{transform: perspective(400px) scale3d(.95, .95, .95);animation-timing-function: ease-in;} to{transform: perspective(400px);animation-timing-function: ease-in;}}

.flipInX {animation-name: flipInX;backface-visibility: visible !important;}
@keyframes flipInX { from{transform: perspective(400px) rotate3d(1, 0, 0, 90deg);animation-timing-function: ease-in;opacity: 0;} 40%{transform: perspective(400px) rotate3d(1, 0, 0, -20deg);animation-timing-function: ease-in;} 60%{transform: perspective(400px) rotate3d(1, 0, 0, 10deg);opacity: 1;} 80%{transform: perspective(400px) rotate3d(1, 0, 0, -5deg);} to{transform: perspective(400px);}}

.flipInY {animation-name: flipInY;backface-visibility: visible !important;}
@keyframes flipInY { from{transform: perspective(400px) rotate3d(0, 1, 0, 90deg);animation-timing-function: ease-in;opacity: 0;} 40%{transform: perspective(400px) rotate3d(0, 1, 0, -20deg);animation-timing-function: ease-in;} 60%{transform: perspective(400px) rotate3d(0, 1, 0, 10deg);opacity: 1;} 80%{transform: perspective(400px) rotate3d(0, 1, 0, -5deg);} to{transform: perspective(400px);}}

.flipOutX {animation-name: flipOutX;  backface-visibility: visible !important;}
@keyframes flipOutX { from{transform: perspective(400px);} 30%{transform: perspective(400px) rotate3d(1, 0, 0, -20deg);opacity: 1;} to{transform: perspective(400px) rotate3d(1, 0, 0, 90deg);opacity: 0;}}

.flipOutY {animation-name: flipOutY;backface-visibility: visible !important;}
@keyframes flipOutY { from{transform: perspective(400px);} 30%{transform: perspective(400px) rotate3d(0, 1, 0, -15deg);opacity: 1;} to{transform: perspective(400px) rotate3d(0, 1, 0, 90deg);opacity: 0;}}

.hatch{animation-name: hatch;animation-duration: 2s;animation-timing-function: ease-in-out;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);}}

.headShake {animation-timing-function: ease-in-out;animation-name: headShake;}
@keyframes headShake { 0%{transform: translateX(0);}6.5%{transform: translateX(-6px) rotateY(-9deg);}18.5%{transform: translateX(5px) rotateY(7deg);}31.5%{transform: translateX(-3px) rotateY(-5deg);}43.5%{transform: translateX(2px) rotateY(3deg);} 50%{transform: translateX(0);}}

.hinge {animation-name: hinge;}
@keyframes hinge { 0%{transform-origin: top left;animation-timing-function: ease-in-out;} 20%, 60%{transform: rotate3d(0, 0, 1, 80deg);transform-origin: top left;animation-timing-function: ease-in-out;} 40%, 80%{transform: rotate3d(0, 0, 1, 60deg);transform-origin: top left;animation-timing-function: ease-in-out;opacity: 1;} to{transform: translate3d(0, 700px, 0);opacity: 0;}}

.jackInTheBox {animation-name: jackInTheBox;}
@keyframes jackInTheBox { from{opacity: 0;transform: scale(0.1) rotate(30deg);transform-origin: center bottom;} 50%{transform: rotate(-10deg);} 70%{transform: rotate(3deg);} to{opacity: 1;transform: scale(1);}}

.jello {animation-name: jello;transform-origin: center;}
@keyframes jello {from, 11.1%, to{transform: none;}22.2%{transform: skewX(-12.5deg) skewY(-12.5deg);}33.3%{transform: skewX(6.25deg) skewY(6.25deg);}44.4%{transform: skewX(-3.125deg) skewY(-3.125deg);}55.5%{transform: skewX(1.5625deg) skewY(1.5625deg);}66.6%{transform: skewX(-0.78125deg) skewY(-0.78125deg);}77.7%{transform: skewX(0.390625deg) skewY(0.390625deg);}88.8%{transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}}

.lightSpeedIn {animation-name: lightSpeedIn; animation-timing-function: ease-out;}
@keyframes lightSpeedIn { from{transform: translate3d(100%, 0, 0) skewX(-30deg);opacity: 0;} 60%{transform: skewX(20deg);opacity: 1;} 80%{transform: skewX(-5deg);opacity: 1;} to{transform: none;opacity: 1;}}

.lightSpeedOut {animation-name: lightSpeedOut;animation-timing-function: ease-in;}
@keyframes lightSpeedOut { from{opacity: 1;} to{transform: translate3d(100%, 0, 0) skewX(30deg);opacity: 0;}}

.pulse{animation-name: pulse;animation-duration: 1.5s;animation-iteration-count: infinite;}
@keyframes pulse { 0%{transform: scale(0.9);opacity: 0.7;} 50%{transform: scale(1);opacity: 1;} 100%{transform: scale(0.9);opacity: 0.7;}}

.pullUp{animation-name: pullUp;animation-duration: 1.1s;animation-timing-function: ease-out;transform-origin: 50% 100%;}
@keyframes pullUp { 0%{transform: scaleY(0.1);} 40%{transform: scaleY(1.02);} 60%{transform: scaleY(0.98);} 80%{transform: scaleY(1.01);} 100%{transform: scaleY(0.98);} 80%{transform: scaleY(1.01);} 100%{transform: scaleY(1);}}

.pullDown{animation-name: pullDown;animation-duration: 1.1s;animation-timing-function: ease-out;transform-origin: 50% 0%;}
@keyframes pullDown { 0%{transform: scaleY(0.1);} 40%{transform: scaleY(1.02);} 60%{transform: scaleY(0.98);} 80%{transform: scaleY(1.01);} 100%{transform: scaleY(0.98);} 80%{transform: scaleY(1.01);} 100%{transform: scaleY(1);}}

.rubberBand {animation-name: rubberBand;}
@keyframes rubberBand { from{transform: scale3d(1, 1, 1);} 30%{transform: scale3d(1.25, 0.75, 1);} 40%{transform: scale3d(0.75, 1.25, 1);} 50%{transform: scale3d(1.15, 0.85, 1);} 65%{transform: scale3d(.95, 1.05, 1);}75%{transform: scale3d(1.05, .95, 1);} to{transform: scale3d(1, 1, 1);}}

.rollIn {animation-name: rollIn;}
@keyframes rollIn { from{opacity: 0;transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);} to{opacity: 1;transform: none;}}

.rollOut {animation-name: rollOut;}
@keyframes rollOut { from{opacity: 1;} to{opacity: 0;transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);}}

.rotateIn {animation-name: rotateIn;}
@keyframes rotateIn { from{transform-origin: center;transform: rotate3d(0, 0, 1, -200deg);opacity: 0;} to{transform-origin: center;transform: none;opacity: 1;}}

.rotateInDownLeft {animation-name: rotateInDownLeft;}
@keyframes rotateInDownLeft { from{transform-origin: left bottom;transform: rotate3d(0, 0, 1, -45deg);opacity: 0;} to{transform-origin: left bottom;transform: none;opacity: 1;}}

.rotateInDownRight {animation-name: rotateInDownRight;}
@keyframes rotateInDownRight { from{transform-origin: right bottom;transform: rotate3d(0, 0, 1, 45deg);opacity: 0;} to{transform-origin: right bottom;transform: none;opacity: 1;}}

.rotateInUpLeft {animation-name: rotateInUpLeft;}
@keyframes rotateInUpLeft { from{transform-origin: left bottom;transform: rotate3d(0, 0, 1, 45deg);opacity: 0;} to{transform-origin: left bottom;transform: none;opacity: 1;}}

.rotateInUpRight {animation-name: rotateInUpRight;}
@keyframes rotateInUpRight { from{transform-origin: right bottom;transform: rotate3d(0, 0, 1, -90deg);opacity: 0;} to{transform-origin: right bottom;transform: none;opacity: 1;}}

.rotateOut {animation-name: rotateOut;}
@keyframes rotateOut { from{transform-origin: center;opacity: 1;} to{transform-origin: center;transform: rotate3d(0, 0, 1, 200deg);opacity: 0;}}

.rotateOutDownLeft {animation-name: rotateOutDownLeft;}
@keyframes rotateOutDownLeft { from{transform-origin: left bottom;opacity: 1;} to{transform-origin: left bottom;transform: rotate3d(0, 0, 1, 45deg);opacity: 0;}}

.rotateOutDownRight {animation-name: rotateOutDownRight;}
@keyframes rotateOutDownRight { from{transform-origin: right bottom;opacity: 1;} to{transform-origin: right bottom;transform: rotate3d(0, 0, 1, -45deg);opacity: 0;}}

.rotateOutUpLeft {animation-name: rotateOutUpLeft;}
@keyframes rotateOutUpLeft { from{transform-origin: left bottom;opacity: 1;} to{transform-origin: left bottom;transform: rotate3d(0, 0, 1, -45deg);opacity: 0;}}

.rotateOutUpRight {animation-name: rotateOutUpRight;}
@keyframes rotateOutUpRight { from{transform-origin: right bottom;opacity: 1;} to{transform-origin: right bottom;transform: rotate3d(0, 0, 1, 90deg);opacity: 0;}}

.scaleIn {animation-name: scaleIn;animation-duration:0.6s;animation-timing-function:ease;}
@keyframes scaleIn { from{transform:scale(1.1,1.1);} to{transform:scale(1,1);}}

.scaleOut {animation-name: scaleOut;animation-duration:0.6s;animation-timing-function: ease-in-out;}
@keyframes scaleOut { from{transform:scale(1,1);} to{transform:scale(1.1,1.1);}}

.scaleOutIn {animation-name: scaleOut;animation-duration:0.6s;animation-timing-function: ease-in-out;}
@keyframes scaleOutIn { from{transform:scale(1,1);} 50%{transform:scale(1.1,1.1);} to{transform:scale(1,1);}

.slideDown{animation-name: slideDown;animation-duration: 1s;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%);}}

.slideUp{animation-name: slideUp;animation-duration: 1s;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%);}}

.slideLeft{animation-name: slideLeft;animation-duration: 1s;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%);}}

.slideRight{animation-name: slideRight;animation-duration: 1s;animation-timing-function: ease-in-out;visibility: visible !important;}
@keyframes slideRight { 0%{transform: translateX(-150%);} 50%{transform: translateX(8%);} 65%{transform: translateX(-4%);} 80%{transform: translateX(4%);} 95%{transform: translateX(-2%);} 100%{transform: translateX(0%);}}

.slideExpandUp{animation-name: slideExpandUp;animation-duration: 1.6s;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);}}

.slideInUp {animation-name: slideInUp;}
@keyframes slideInUp { from{transform: translate3d(0, 100%, 0);visibility: visible;} to{transform: translate3d(0, 0, 0);}}

.slideInDown {animation-name: slideInDown;}
@keyframes slideInDown { from{transform: translate3d(0, -100%, 0);visibility: visible;} to{transform: translate3d(0, 0, 0);}}

.slideInLeft {animation-name: slideInLeft;}
@keyframes slideInLeft { from{transform: translate3d(-100%, 0, 0);visibility: visible;} to{transform: translate3d(0, 0, 0);}}

.slideInRight {animation-name: slideInRight;}
@keyframes slideInRight { from{transform: translate3d(100%, 0, 0);visibility: visible;} to{transform: translate3d(0, 0, 0);}}

.slideOutDown {animation-name: slideOutDown;}
@keyframes slideOutDown { from{transform: translate3d(0, 0, 0);} to{visibility: hidden;transform: translate3d(0, 100%, 0);}}

.slideOutLeft {animation-name: slideOutLeft;}
@keyframes slideOutLeft { from{transform: translate3d(0, 0, 0);} to{visibility: hidden;transform: translate3d(-100%, 0, 0);}}

.slideOutRight {animation-name: slideOutRight;}
@keyframes slideOutRight { from{transform: translate3d(0, 0, 0);} to{visibility: hidden;transform: translate3d(100%, 0, 0);}}

.slideOutUp {animation-name: slideOutUp;}
@keyframes slideOutUp { from{transform: translate3d(0, 0, 0);} to{visibility: hidden;transform: translate3d(0, -100%, 0);}}

.stretchLeft{animation-name: stretchLeft;animation-duration: 1.5s;animation-timing-function: ease-out;transform-origin: 100% 0%;}
@keyframes stretchLeft { 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);}}

.stretchRight{animation-name: stretchRight;animation-duration: 1.5s;animation-timing-function: ease-out;transform-origin: 0% 0%;}
@keyframes stretchRight { 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);}}

.shake {animation-name: shake;}
@keyframes shake {from, to{transform: translate3d(0, 0, 0);}10%, 30%, 50%, 70%, 90%{transform: translate3d(-10px, 0, 0);} 20%, 40%, 60%, 80%{transform: translate3d(10px, 0, 0);}}

.swing {transform-origin: top center;animation-name: swing;}
@keyframes swing {20%{transform: rotate3d(0, 0, 1, 15deg);} 40%{transform: rotate3d(0, 0, 1, -10deg);} 60%{transform: rotate3d(0, 0, 1, 5deg);} 80%{transform: rotate3d(0, 0, 1, -5deg);} to{transform: rotate3d(0, 0, 1, 0deg);}}

.tada {animation-name: tada;}
@keyframes tada { from{transform: scale3d(1, 1, 1);} 10%, 20%{transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);} 30%, 50%, 70%, 90%{transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);} 40%, 60%, 80%{transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);} to{transform: scale3d(1, 1, 1);}}

.tossing{animation-name: tossing;animation-duration: 2.5s;animation-iteration-count: infinite;}
@keyframes tossing { 0%{transform: rotate(-4deg);} 50%{transform: rotate(4deg);} 100%{transform: rotate(-4deg);}}

.wobble {animation-name: wobble;}
@keyframes wobble { from{transform: none;}15%{transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);} 30%{transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);}45%{transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);} 60%{transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);}75%{transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);} to{transform: none;}}

.zoomIn {animation-name: zoomIn;}
@keyframes zoomIn { from{opacity: 0;transform: scale3d(.3, .3, .3);} 50%{opacity: 1;}}

.zoomInDown {animation-name: zoomInDown;}
@keyframes zoomInDown { from{opacity: 0;transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);} 60%{opacity: 1;transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}}

.zoomInLeft {animation-name: zoomInLeft;}
@keyframes zoomInLeft { from{opacity: 0;transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);} 60%{opacity: 1;transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}}

.zoomInRight {animation-name: zoomInRight;}
@keyframes zoomInRight { from{opacity: 0;transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);} 60%{opacity: 1;transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}}

.zoomInUp {animation-name: zoomInUp;}
@keyframes zoomInUp { from{opacity: 0;transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);} 60%{opacity: 1;transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}}

.zoomOut {animation-name: zoomOut;}
@keyframes zoomOut { from{opacity: 1;} 50%{opacity: 0;transform: scale3d(.3, .3, .3);} to{opacity: 0;}}

.zoomOutDown {animation-name: zoomOutDown;}
@keyframes zoomOutDown {40%{opacity: 1;transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);} to{opacity: 0;transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);transform-origin: center bottom;animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}}

.zoomOutLeft {animation-name: zoomOutLeft;}
@keyframes zoomOutLeft {40%{opacity: 1;transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);} to{opacity: 0;transform: scale(.1) translate3d(-2000px, 0, 0);transform-origin: left center;}}

.zoomOutRight {animation-name: zoomOutRight;}
@keyframes zoomOutRight {40%{opacity: 1;transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);} to{opacity: 0;transform: scale(.1) translate3d(2000px, 0, 0);transform-origin: right center;}}

.zoomOutUp {animation-name: zoomOutUp;}
@keyframes zoomOutUp {40%{opacity: 1;transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);} to{opacity: 0;transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);transform-origin: center bottom;animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}}