/*
  =====================================
  ======== Utility classes
  =====================================
*/
.o_animate {
  animation-duration: 1s;
  animation-fill-mode: both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  text-rendering: geometricPrecision;
  visibility: hidden;
}

.o_animate_preview {
  visibility: visible;
}

/*
  =====================================
  ======== Durations
  =====================================
*/
.o_anim_dur500 {
  animation-duration: 500ms;
}

.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;
}