.animated {
    animation-duration: 1.5s;
    animation-fill-mode: both;
}
.animated.hinge {
    animation-duration: 1.5s;
}
@keyframes pulse {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.1);
}
100% {
    transform: scale(1);
}
}
@keyframes pulse {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.1);
}
100% {
    transform: scale(1);
}
}
.pulse {
    animation-name: pulse;
}
@keyframes flipInX {
0% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}
40% {
    transform: perspective(400px) rotateX(-10deg);
}
70% {
    transform: perspective(400px) rotateX(10deg);
}
100% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}
}
@keyframes flipInX {
0% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}
40% {
    transform: perspective(400px) rotateX(-10deg);
}
70% {
    transform: perspective(400px) rotateX(10deg);
}
100% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}
}
.flipInX {
    animation-name: flipInX;
    backface-visibility: visible !important;
}
@keyframes flipOutX {
0% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}
100% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}
}
@keyframes flipOutX {
0% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}
100% {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}
}
.flipOutX {
    animation-name: flipOutX;
    backface-visibility: visible !important;
}
@keyframes flipInY {
0% {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
}
40% {
    transform: perspective(400px) rotateY(-10deg);
}
70% {
    transform: perspective(400px) rotateY(10deg);
}
100% {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
}
}
@keyframes flipInY {
0% {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
}
40% {
    transform: perspective(400px) rotateY(-10deg);
}
70% {
    transform: perspective(400px) rotateY(10deg);
}
100% {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
}
}
.flipInY {
    animation-name: flipInY;
    backface-visibility: visible !important;
}
@keyframes fadeIn {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@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(0px);
}
}
@keyframes fadeInUp {
0% {
    opacity: 0;
    transform: translateY(20px);
}
100% {
    opacity: 1;
    transform: translateY(0px);
}
}
.fadeInUp {
    animation-name: fadeInUp;
}
@keyframes fadeInDown {
0% {
    opacity: 0;
    transform: translateY(-20px);
}
100% {
    opacity: 1;
    transform: translateY(0px);
}
}
@keyframes fadeInDown {
0% {
    opacity: 0;
    transform: translateY(-20px);
}
100% {
    opacity: 1;
    transform: translateY(0px);
}
}
.fadeInDown {
    animation-name: fadeInDown;
}
@keyframes fadeInLeft {
0% {
    opacity: 0;
    transform: translateX(-20px);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeInLeft {
0% {
    opacity: 0;
    transform: translateX(-20px);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
.fadeInLeft {
    animation-name: fadeInLeft;
}
@keyframes fadeInRight {
0% {
    opacity: 0;
    transform: translateX(20px);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeInRight {
0% {
    opacity: 0;
    transform: translateX(20px);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
.fadeInRight {
    animation-name: fadeInRight;
}
@keyframes bounceIn {
0% {
    opacity: 0;
    transform: scale(0.3);
}
50% {
    opacity: 1;
    transform: scale(1.05);
}
70% {
    transform: scale(0.9);
}
100% {
    transform: scale(1);
}
}
@keyframes bounceIn {
0% {
    opacity: 0;
    transform: scale(0.3);
}
50% {
    opacity: 1;
    transform: scale(1.05);
}
70% {
    transform: scale(0.9);
}
100% {
    transform: scale(1);
}
}
.bounceIn {
    animation-name: bounceIn;
}
@keyframes rotateIn {
0% {
    opacity: 0;
    transform: rotate(-200deg);
    transform-origin: center center 0;
}
100% {
    opacity: 1;
    transform: rotate(0deg);
    transform-origin: center center 0;
}
}
@keyframes rotateIn {
0% {
    opacity: 0;
    transform: rotate(-200deg);
    transform-origin: center center 0;
}
100% {
    opacity: 1;
    transform: rotate(0deg);
    transform-origin: center center 0;
}
}
.rotateIn {
    animation-name: rotateIn;
}
@keyframes rollIn {
0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
}
100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
}
}
@keyframes rollIn {
0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
}
100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
}
}
.rollIn {
    animation-name: rollIn;
}