/*
  =====================================
  ======== Utility classes
  =====================================
*/
.o_animate {
    animation-duration: 1s;
    animation-fill-mode: both;
    transform: translate3d(0,0,0); // force GPU acceleration
    backface-visibility: hidden; // avoid flickering
    text-rendering: geometricPrecision; // take care of animated titles
    visibility: hidden;
}
.o_animate_preview {
    visibility: visible;
}

/*
  =====================================
  ======== Durations
  =====================================
*/
.o_anim_dur500 {
    animation-duration: 500ms;
}
// DEFAULT 1000ms;
.o_anim_dur1500 {
    animation-duration: 1500ms;
}
.o_anim_dur2000 {
    animation-duration: 2000ms;
}
.o_anim_dur2500 {
    animation-duration: 2500ms;
}
.o_anim_dur3000 {
    animation-duration: 3000ms;
}

/*
  =====================================
  ======== Delays
  =====================================
*/
.o_anim_del500 {
    animation-delay: 500ms;
}
.o_anim_del1000{
    animation-delay: 1000ms;
}
.o_anim_del1500{
    animation-delay: 1500ms;
}
.o_anim_del2000{
    animation-delay: 2000ms;
}
.o_anim_del2500{
    animation-delay: 2500ms;
}

@-moz-keyframes o_animate_timeline_duration {
    0% { width: 0; }
    100% { width: 100%; }
}
@-webkit-keyframes o_animate_timeline_duration {
    0% { width: 0; }
    100% { width: 100%; }
}
@keyframes o_animate_timeline_duration {
    0% { width: 0; }
    100% { width: 100%; }
}
@-moz-keyframes o_animate_timeline_delay {
    0% { width: 0; }
    100% { width: 100%; }
}
@-webkit-keyframes o_animate_timeline_delay {
    0% { width: 0; }
    100% { width: 100%; }
}
@keyframes o_animate_timeline_delay {
    0% { width: 0; }
    100% { width: 100%; }
}
@-moz-keyframes o_anim_bounce_in {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.03);
    }
    80% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@-webkit-keyframes o_anim_bounce_in {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.03);
    }
    80% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes o_anim_bounce_in {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.03);
    }
    80% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.o_anim_bounce_in {
    animation-name: o_anim_bounce_in;
}
@-moz-keyframes o_anim_bounce_in_down {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate(0, -3000px);
    }
    60% {
        opacity: 1;
        transform: translate(0, 25px);
    }
    75% {
        transform: translate(0, -10px);
    }
    90% {
        transform: translate(0, 5px);
    }
    100% {
        transform: translate(0, 0);
    }
}
@-webkit-keyframes o_anim_bounce_in_down {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate(0, -3000px);
    }
    60% {
        opacity: 1;
        transform: translate(0, 25px);
    }
    75% {
        transform: translate(0, -10px);
    }
    90% {
        transform: translate(0, 5px);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes o_anim_bounce_in_down {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate(0, -3000px);
    }
    60% {
        opacity: 1;
        transform: translate(0, 25px);
    }
    75% {
        transform: translate(0, -10px);
    }
    90% {
        transform: translate(0, 5px);
    }
    100% {
        transform: translate(0, 0);
    }
}
.o_anim_bounce_in_down {
    animation-name: o_anim_bounce_in_down;
}
@-moz-keyframes o_anim_bounce_in_left {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate(-3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate(25px, 0);
    }
    75% {
        transform: translate(-10px, 0);
    }
    90% {
        transform: translate(5px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@-webkit-keyframes o_anim_bounce_in_left {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate(-3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate(25px, 0);
    }
    75% {
        transform: translate(-10px, 0);
    }
    90% {
        transform: translate(5px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes o_anim_bounce_in_left {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate(-3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate(25px, 0);
    }
    75% {
        transform: translate(-10px, 0);
    }
    90% {
        transform: translate(5px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
.o_anim_bounce_in_left {
    animation-name: o_anim_bounce_in_left;
}
@-moz-keyframes o_anim_bounce_in_right {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate(3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate(-25px, 0);
    }
    75% {
        transform: translate(10px, 0);
    }
    90% {
        transform: translate(-5px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@-webkit-keyframes o_anim_bounce_in_right {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate(3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate(-25px, 0);
    }
    75% {
        transform: translate(10px, 0);
    }
    90% {
        transform: translate(-5px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes o_anim_bounce_in_right {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate(3000px, 0);
    }
    60% {
        opacity: 1;
        transform: translate(-25px, 0);
    }
    75% {
        transform: translate(10px, 0);
    }
    90% {
        transform: translate(-5px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
.o_anim_bounce_in_right {
    animation-name: o_anim_bounce_in_right;
}
@-moz-keyframes o_anim_fade_in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-webkit-keyframes o_anim_fade_in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes o_anim_fade_in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.o_anim_fade_in {
    animation-name: o_anim_fade_in;
}
@-moz-keyframes o_anim_fade_in_down {
    0% {
        opacity: 0;
        transform: translate(0, -100%);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@-webkit-keyframes o_anim_fade_in_down {
    0% {
        opacity: 0;
        transform: translate(0, -100%);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes o_anim_fade_in_down {
    0% {
        opacity: 0;
        transform: translate(0, -100%);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.o_anim_fade_in_down {
    animation-name: o_anim_fade_in_down;
}
@-moz-keyframes o_anim_fade_in_left {
    0% {
        opacity: 0;
        transform: translate(-100%, 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@-webkit-keyframes o_anim_fade_in_left {
    0% {
        opacity: 0;
        transform: translate(-100%, 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes o_anim_fade_in_left {
    0% {
        opacity: 0;
        transform: translate(-100%, 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.o_anim_fade_in_left {
    animation-name: o_anim_fade_in_left;
}
@-moz-keyframes o_anim_fade_in_right {
    0% {
        opacity: 0;
        transform: translate(100%, 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@-webkit-keyframes o_anim_fade_in_right {
    0% {
        opacity: 0;
        transform: translate(100%, 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes o_anim_fade_in_right {
    0% {
        opacity: 0;
        transform: translate(100%, 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.o_anim_fade_in_right {
    animation-name: o_anim_fade_in_right;
}
@-moz-keyframes o_anim_fade_in_up {
    0% {
        opacity: 0;
        transform: translate(0, 100%);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@-webkit-keyframes o_anim_fade_in_up {
    0% {
        opacity: 0;
        transform: translate(0, 100%);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes o_anim_fade_in_up {
    0% {
        opacity: 0;
        transform: translate(0, 100%);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
.o_anim_fade_in_up {
    animation-name: o_anim_fade_in_up;
}
@-moz-keyframes o_anim_fade_out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@-webkit-keyframes o_anim_fade_out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes o_anim_fade_out {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.o_anim_fade_out {
    animation-name: o_anim_fade_out;
}
@-moz-keyframes o_anim_rotate_in {
    0% {
        opacity: 0;
        transform-origin: center;
        transform: rotate(-200deg);
    }
    100% {
        opacity: 1;
        transform-origin: center;
        transform: rotate(0);
    }
}
@-webkit-keyframes o_anim_rotate_in {
    0% {
        opacity: 0;
        transform: rotate(-200deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}
@keyframes o_anim_rotate_in {
    0% {
        opacity: 0;
        transform: rotate(-200deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}
.o_anim_rotate_in {
    animation-name: o_anim_rotate_in;
}
@-moz-keyframes o_anim_rotate_in_down_left {
    0% {
        opacity: 0;
        transform-origin: left bottom;
        transform: rotate(-45deg);
    }
    100% {
        opacity: 1;
        transform-origin: left bottom;
        transform: rotate(0);
    }
}
@-webkit-keyframes o_anim_rotate_in_down_left {
    0% {
        opacity: 0;
        transform-origin: left bottom;
        transform: rotate(-45deg);
    }
    100% {
        opacity: 1;
        transform-origin: left bottom;
        transform: rotate(0);
    }
}
@keyframes o_anim_rotate_in_down_left {
    0% {
        opacity: 0;
        transform-origin: left bottom;
        transform: rotate(-45deg);
    }
    100% {
        opacity: 1;
        transform-origin: left bottom;
        transform: rotate(0);
    }
}
.o_anim_rotate_in_down_left {
    animation-name: o_anim_rotate_in_down_left;
}
@-moz-keyframes o_anim_rotate_in_down_right {
    0% {
        opacity: 0;
        transform-origin: right bottom;
        transform: rotate(45deg);
    }
    100% {
        opacity: 1;
        transform-origin: right bottom;
        transform: rotate(0);
    }
}
@-webkit-keyframes o_anim_rotate_in_down_right {
    0% {
        opacity: 0;
        transform-origin: right bottom;
        transform: rotate(45deg);
    }
    100% {
        opacity: 1;
        transform-origin: right bottom;
        transform: rotate(0);
    }
}
@keyframes o_anim_rotate_in_down_right {
    0% {
        opacity: 0;
        transform-origin: right bottom;
        transform: rotate(45deg);
    }
    100% {
        opacity: 1;
        transform-origin: right bottom;
        transform: rotate(0);
    }
}
.o_anim_rotate_in_down_right {
    animation-name: o_anim_rotate_in_down_right;
}
@-moz-keyframes o_anim_zoom_in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
    }
}
@-webkit-keyframes o_anim_zoom_in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
    }
}
@keyframes o_anim_zoom_in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
    }
}
.o_anim_zoom_in {
    animation-name: o_anim_zoom_in;
}
@-moz-keyframes o_anim_zoom_in_down {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@-webkit-keyframes o_anim_zoom_in_down {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@keyframes o_anim_zoom_in_down {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.o_anim_zoom_in_down {
    animation-name: o_anim_zoom_in_down;
}
@-moz-keyframes o_anim_zoom_in_left {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@-webkit-keyframes o_anim_zoom_in_left {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@keyframes o_anim_zoom_in_left {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.o_anim_zoom_in_left {
    animation-name: o_anim_zoom_in_left;
}
@-moz-keyframes o_anim_zoom_in_right {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@-webkit-keyframes o_anim_zoom_in_right {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
@keyframes o_anim_zoom_in_right {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}
.o_anim_zoom_in_right {
    animation-name: o_anim_zoom_in_right;
}
@-moz-keyframes o_anim_flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}
@-webkit-keyframes o_anim_flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}
@keyframes o_anim_flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}
.o_anim_flash {
    animation-name: o_anim_flash;
}
@-moz-keyframes o_anim_pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@-webkit-keyframes o_anim_pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes o_anim_pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.o_anim_pulse {
    animation-name: o_anim_pulse;
}
@-moz-keyframes o_anim_shake {
    0%, 100% {
        transform: translate(0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate(-10px, 0);
    }
    20%, 40%, 60%, 80% {
        transform: translate(10px, 0);
    }
}
@-webkit-keyframes o_anim_shake {
    0%, 100% {
        transform: translate(0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate(-10px, 0);
    }
    20%, 40%, 60%, 80% {
        transform: translate(10px, 0);
    }
}
@keyframes o_anim_shake {
    0%, 100% {
        transform: translate(0, 0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translate(-10px, 0);
    }
    20%, 40%, 60%, 80% {
        transform: translate(10px, 0);
    }
}
.o_anim_shake {
    animation-name: o_anim_shake;
}
@-moz-keyframes o_anim_tada {
    0% {
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        transform: scale3d(0.9, 0.9, 0.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);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes o_anim_tada {
    0% {
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        transform: scale3d(0.9, 0.9, 0.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);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
@keyframes o_anim_tada {
    0% {
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        transform: scale3d(0.9, 0.9, 0.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);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
.o_anim_tada {
    animation-name: o_anim_tada;
}
@-moz-keyframes o_anim_flip_in_x {
    0% {
        perspective: 400px;
        transform: rotateX(90deg);
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        perspective: 400px;
        transform: rotateX(-20deg);
        transition-timing-function: ease-in;
    }
    60% {
        perspective: 400px;
        transform: rotateX(10deg);
        opacity: 1;
    }
    80% {
        perspective: 400px;
        transform: rotateX(-5deg);
    }
    100% {
        perspective: 400px;
    }
}
@-webkit-keyframes o_anim_flip_in_x {
    0% {
        perspective: 400px;
        transform: rotateX(90deg);
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        perspective: 400px;
        transform: rotateX(-20deg);
        transition-timing-function: ease-in;
    }
    60% {
        perspective: 400px;
        transform: rotateX(10deg);
        opacity: 1;
    }
    80% {
        perspective: 400px;
        transform: rotateX(-5deg);
    }
    100% {
        perspective: 400px;
    }
}
@keyframes o_anim_flip_in_x {
    0% {
        perspective: 400px;
        transform: rotateX(90deg);
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        perspective: 400px;
        transform: rotateX(-20deg);
        transition-timing-function: ease-in;
    }
    60% {
        perspective: 400px;
        transform: rotateX(10deg);
        opacity: 1;
    }
    80% {
        perspective: 400px;
        transform: rotateX(-5deg);
    }
    100% {
        perspective: 400px;
    }
}
.o_anim_flip_in_x {
    backface-visibility: visible;
    animation-name: o_anim_flip_in_x;
}
@-moz-keyframes o_anim_flip_in_y {
    0% {
        perspective: 400px;
        transform: rotateY(90deg);
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        perspective: 400px;
        transform: rotateY(-20deg);
        transition-timing-function: ease-in;
    }
    60% {
        perspective: 400px;
        transform: rotateY(10deg);
        opacity: 1;
    }
    80% {
        perspective: 400px;
        transform: rotateY(-5deg);
    }
    100% {
        perspective: 400px;
    }
}
@-webkit-keyframes o_anim_flip_in_y {
    0% {
        perspective: 400px;
        transform: rotateY(90deg);
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        perspective: 400px;
        transform: rotateY(-20deg);
        transition-timing-function: ease-in;
    }
    60% {
        perspective: 400px;
        transform: rotateY(10deg);
        opacity: 1;
    }
    80% {
        perspective: 400px;
        transform: rotateY(-5deg);
    }
    100% {
        perspective: 400px;
    }
}
@keyframes o_anim_flip_in_y {
    0% {
        perspective: 400px;
        transform: rotateY(90deg);
        transition-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        perspective: 400px;
        transform: rotateY(-20deg);
        transition-timing-function: ease-in;
    }
    60% {
        perspective: 400px;
        transform: rotateY(10deg);
        opacity: 1;
    }
    80% {
        perspective: 400px;
        transform: rotateY(-5deg);
    }
    100% {
        perspective: 400px;
    }
}
.o_anim_flip_in_y {
    backface-visibility: visible;
    animation-name: o_anim_flip_in_y;
}