/**
 * Animations
 */
.animated:active { animation-fill-mode: both; animation-duration: 1s }
.animated.hinge { animation-duration: 2s }
@keyframes flash {
    0%, 50%, 100% { opacity: 1 }
    25%, 75% { opacity: 0 }
}
.flash { animation-name: flash }
@keyframes shake {
    0%, 100% { transform: translateX(0) }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px) }
    20%, 40%, 60%, 80% { transform: translateX(10px) }
}
.shake { animation-name: shake }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) }
    40% { transform: translateY(-30px) }
    60% { transform: translateY(-15px) }
}
.bounce { animation-name: bounce }
@keyframes tada {
    0% { transform: scale(1) }
    10%, 20% { transform: scale(0.9) rotate(-3deg) }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg) }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg) }
    100% { transform: scale(1) rotate(0) }
}
.tada { animation-name: tada }
@keyframes swing {
    20% { transform: rotate(15deg) }
    40% { transform: rotate(-10deg) }
    60% { transform: rotate(5deg) }
    80% { transform: rotate(-5deg) }
    100% { transform: rotate(0deg) }
}
.swing { transform-origin: top center; animation-name: swing }
@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%) }
}
.wobble { animation-name: wobble }
@keyframes wiggle {
    0% { transform: skewX(9deg) }
    10% { transform: skewX(-8deg) }
    20% { transform: skewX(7deg) }
    30% { transform: skewX(-6deg) }
    40% { transform: skewX(5deg) }
    50% { transform: skewX(-4deg) }
    60% { transform: skewX(3deg) }
    70% { transform: skewX(-2deg) }
    80% { transform: skewX(1deg) }
    90% { transform: skewX(0deg) }
    100% { transform: skewX(0deg) }
}
.wiggle { animation-name: wiggle; animation-timing-function: ease-in }
@keyframes pulse {
    0% { transform: scale(1) }
    50% { transform: scale(1.1) }
    100% { transform: scale(1) }
}
.pulse { animation-name: pulse }
@keyframes flip {
    0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out }
    40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out }
    50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in }
    80% { transform: perspective(400px) rotateY(360deg) scale(.95); animation-timing-function: ease-in }
    100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in }
}
.flip {
    transform-style: preserve-3d;
    backface-visibility: visible !important;
    animation-name: flip;
}
@keyframes flipInX {
    0% { transform: perspective(400px) rotateX(90deg); opacity: 0 }
    40% { transform: perspective(400px) rotateX(-10deg) }
    70% { transform: perspective(400px) rotateX(10deg) }
    100% { transform: perspective(400px) rotateX(0deg); opacity: 1 }
}
.flipInX {
    backface-visibility: visible !important;
    animation-name: flipInX;
}
@keyframes flipOutX {
    0% { transform: perspective(400px) rotateX(0deg); opacity: 1 }
    100% { transform: perspective(400px) rotateX(90deg); opacity: 0 }
}
.flipOutX {
    animation-name: flipOutX;
    backface-visibility: visible !important;
}
@keyframes flipInY {
    0% { transform: perspective(400px) rotateY(90deg); opacity: 0 }
    40% { transform: perspective(400px) rotateY(-10deg) }
    70% { transform: perspective(400px) rotateY(10deg) }
    100% { transform: perspective(400px) rotateY(0deg); opacity: 1 }
}
.flipInY {
    backface-visibility: visible !important;
    animation-name: flipInY;
}
@keyframes flipOutY {
    0% { transform: perspective(400px) rotateY(0deg); opacity: 1 }
    100% { transform: perspective(400px) rotateY(90deg); opacity: 0 }
}
.flipOutY {
    backface-visibility: visible !important;
    animation-name: flipOutY;
}
@keyframes fadeIn {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
.fadeIn { animation-name: fadeIn }
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(20px) }
    100% { opacity: 1; transform: translateY(0) }
}
.fadeInUp { animation-name: fadeInUp }
@keyframes fadeInDown {
    0% { opacity: 0; transform: translateY(-20px) }
    100% { opacity: 1; transform: translateY(0) }
}
.fadeInDown { animation-name: fadeInDown }
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translateX(-20px) }
    100% { opacity: 1; transform: translateX(0) }
}
.fadeInLeft { animation-name: fadeInLeft }
@keyframes fadeInRight {
    0% { opacity: 0; transform: translateX(20px) }
    100% { opacity: 1; transform: translateX(0) }
}
.fadeInRight { animation-name: fadeInRight }
@keyframes fadeInUpBig {
    0% { opacity: 0; transform: translateY(2000px) }
    100% { opacity: 1; transform: translateY(0) }
}
.fadeInUpBig { animation-name: fadeInUpBig }
@keyframes fadeInDownBig {
    0% { opacity: 0; transform: translateY(-2000px) }
    100% { opacity: 1; transform: translateY(0) }
}
.fadeInDownBig { animation-name: fadeInDownBig }
@keyframes fadeInLeftBig {
    0% { opacity: 0; transform: translateX(-2000px) }
    100% { opacity: 1; transform: translateX(0) }
}
.fadeInLeftBig { animation-name: fadeInLeftBig }
@keyframes fadeInRightBig {
    0% { opacity: 0; transform: translateX(2000px) }
    100% { opacity: 1; transform: translateX(0) }
}
.fadeInRightBig { animation-name: fadeInRightBig }
@keyframes fadeOut {
    0% { opacity: 1 }
    100% { opacity: 0 }
}
.fadeOut { animation-name: fadeOut }
@keyframes fadeOutUp {
    0% { opacity: 1; transform: translateY(0) }
    100% { opacity: 0; transform: translateY(-20px) }
}
.fadeOutUp { animation-name: fadeOutUp }
@keyframes fadeOutDown {
    0% { opacity: 1; transform: translateY(0) }
    100% { opacity: 0; transform: translateY(20px) }
}
.fadeOutDown { animation-name: fadeOutDown }
@keyframes fadeOutLeft {
    0% { opacity: 1; transform: translateX(0) }
    100% { opacity: 0; transform: translateX(-20px) }
}
.fadeOutLeft { animation-name: fadeOutLeft }
@keyframes fadeOutRight {
    0% { opacity: 1; transform: translateX(0) }
    100% { opacity: 0; transform: translateX(20px) }
}
.fadeOutRight { animation-name: fadeOutRight }
@keyframes fadeOutUpBig {
    0% { opacity: 1; transform: translateY(0) }
    100% { opacity: 0; transform: translateY(-2000px) }
}
.fadeOutUpBig { animation-name: fadeOutUpBig }
@keyframes fadeOutDownBig {
    0% { opacity: 1; transform: translateY(0) }
    100% { opacity: 0; transform: translateY(2000px) }
}
.fadeOutDownBig { animation-name: fadeOutDownBig }
@keyframes fadeOutLeftBig {
    0% { opacity: 1; transform: translateX(0) }
    100% { opacity: 0; transform: translateX(-2000px) }
}
.fadeOutLeftBig { animation-name: fadeOutLeftBig }
@keyframes fadeOutRightBig {
    0% { opacity: 1; transform: translateX(0) }
    100% { opacity: 0; transform: translateX(2000px) }
}
.fadeOutRightBig { animation-name: fadeOutRightBig }
@keyframes bounceIn {
    0% { opacity: 0; transform: scale(.3) }
    50% { opacity: 1; transform: scale(1.05) }
    70% { transform: scale(.9) }
    100% { transform: scale(1) }
}
.bounceIn { animation-name: bounceIn }
@keyframes bounceInUp {
    0% { opacity: 0; transform: translateY(2000px) }
    60% { opacity: 1; transform: translateY(-30px) }
    80% { transform: translateY(10px) }
    100% { transform: translateY(0) }
}
.bounceInUp { animation-name: bounceInUp }
@keyframes bounceInDown {
    0% { opacity: 0; transform: translateY(-2000px) }
    60% { opacity: 1; transform: translateY(30px) }
    80% { transform: translateY(-10px) }
    100% { transform: translateY(0) }
}
.bounceInDown { animation-name: bounceInDown }
@keyframes bounceInLeft {
    0% { opacity: 0; transform: translateX(-2000px) }
    60% { opacity: 1; transform: translateX(30px) }
    80% { transform: translateX(-10px) }
    100% { transform: translateX(0) }
}
.bounceInLeft { animation-name: bounceInLeft }
@keyframes bounceInRight {
    0% { opacity: 0; transform: translateX(2000px) }
    60% { opacity: 1; transform: translateX(-30px) }
    80% { transform: translateX(10px) }
    100% { transform: translateX(0) }
}
.bounceInRight { animation-name: bounceInRight }
@keyframes bounceOut {
    0% { transform: scale(1) }
    25% { transform: scale(.95) }
    50% { opacity: 1; transform: scale(1.1) }
    100% { opacity: 0; transform: scale(.3) }
}
.bounceOut { animation-name: bounceOut }
@keyframes bounceOutUp {
    0% { transform: translateY(0) }
    20% { opacity: 1; transform: translateY(20px) }
    100% { opacity: 0; transform: translateY(-2000px) }
}
.bounceOutUp { animation-name: bounceOutUp }
@keyframes bounceOutDown {
    0% { transform: translateY(0) }
    20% { opacity: 1; transform: translateY(-20px) }
    100% { opacity: 0; transform: translateY(2000px) }
}
.bounceOutDown { animation-name: bounceOutDown }
@keyframes bounceOutLeft {
    0% { transform: translateX(0) }
    20% { opacity: 1; transform: translateX(20px) }
    100% { opacity: 0; transform: translateX(-2000px) }
}
.bounceOutLeft { animation-name: bounceOutLeft }
@keyframes bounceOutRight {
    0% { transform: translateX(0) }
    20% { opacity: 1; transform: translateX(-20px) }
    100% { opacity: 0; transform: translateX(2000px) }
}
.bounceOutRight { animation-name: bounceOutRight }
@keyframes rotateIn {
    0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0 }
    100% { transform-origin: center center; transform: rotate(0); opacity: 1 }
}
.rotateIn { animation-name: rotateIn }
@keyframes rotateInUpLeft {
    0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0 }
    100% { transform-origin: left bottom; transform: rotate(0); opacity: 1 }
}
.rotateInUpLeft { animation-name: rotateInUpLeft }
@keyframes rotateInDownLeft {
    0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0 }
    100% { transform-origin: left bottom; transform: rotate(0); opacity: 1 }
}
.rotateInDownLeft { animation-name: rotateInDownLeft }
@keyframes rotateInUpRight {
    0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0 }
    100% { transform-origin: right bottom; transform: rotate(0); opacity: 1 }
}
.rotateInUpRight { animation-name: rotateInUpRight }
@keyframes rotateInDownRight {
    0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0 }
    100% { transform-origin: right bottom; transform: rotate(0); opacity: 1 }
}
.rotateInDownRight { animation-name: rotateInDownRight }
@keyframes rotateOut {
    0% { transform-origin: center center; transform: rotate(0); opacity: 1 }
    100% { transform-origin: center center; transform: rotate(200deg); opacity: 0 }
}
.rotateOut { animation-name: rotateOut }
@keyframes rotateOutUpLeft {
    0% { transform-origin: left bottom; transform: rotate(0); opacity: 1 }
    100% { -transform-origin: left bottom; -transform: rotate(-90deg); opacity: 0 }
}
.rotateOutUpLeft { animation-name: rotateOutUpLeft }
@keyframes rotateOutDownLeft {
    0% { transform-origin: left bottom; transform: rotate(0); opacity: 1 }
    100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0 }
}
.rotateOutDownLeft { animation-name: rotateOutDownLeft }
@keyframes rotateOutUpRight {
    0% { transform-origin: right bottom; transform: rotate(0); opacity: 1 }
    100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0 }
}
.rotateOutUpRight { animation-name: rotateOutUpRight }
@keyframes rotateOutDownRight {
    0% { transform-origin: right bottom; transform: rotate(0); opacity: 1 }
    100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0 }
}
.rotateOutDownRight { animation-name: rotateOutDownRight }
@keyframes lightSpeedIn {
    0% { transform: translateX(100%) skewX(-30deg); opacity: 0 }
    60% { transform: translateX(-20%) skewX(30deg); opacity: 1 }
    80% { transform: translateX(0%) skewX(-15deg); opacity: 1 }
    100% { transform: translateX(0%) skewX(0deg); opacity: 1 }
}
.lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out }
@keyframes lightSpeedOut {
    0% { transform: translateX(0%) skewX(0deg); opacity: 1 }
    100% { transform: translateX(100%) skewX(-30deg); opacity: 0 }
}
.lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in }
@keyframes hinge {
    0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out }
    20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out }
    40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out }
    80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out }
    100% { transform: translateY(700px); opacity: 0 }
}
.hinge { animation-name: hinge }
@keyframes rollIn {
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg) }
    100% { opacity: 1; transform: translateX(0px) rotate(0deg) }
}
.rollIn { animation-name: rollIn }
@keyframes rollOut {
    0% { opacity: 1; transform: translateX(0px) rotate(0deg) }
    100% { opacity: 0; transform: translateX(100%) rotate(120deg) }
}
.rollOut { animation-name: rollOut }