/* ==========================================================================
   appear animation
   ========================================================================== */
.move_up {
    opacity: 0;
    transform: translateY(5vh);
    transition: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animation.is_active.move_up {
    opacity: 1 !important;
    transform: translateY(0);
}

.move_down {
    opacity: 0;
    transform: translateY(-5vh);
    transition: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animation.is_active.move_down {
    opacity: 1 !important;
    transform: translateY(0);
}

.move_left {
    opacity: 0;
    transform: translateX(5vh);
    transition: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animation.move_left.is_active {
    opacity: 1 !important;
    transform: translateY(0);
}

.move_right {
    opacity: 0;
    transform: translateX(-5vh);
    transition: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animation.move_right.is_active {
    opacity: 1 !important;
    transform: translateY(0);
}

.zoom{
    transform: scale(1.2);
    transition: transform;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.animation.zoom.is_active{
    transform: scale(1);
}

.appear{
    opacity: 0;
}
.animation.appear.is_active{
    opacity: 1 !important;
    transition: opacity;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.appearx2{
    opacity: 0;
}
.animation.appearx2.is_active{
    opacity: 1 !important;
    transition: opacity;
    transition-delay: 0.2s;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.appearx3{
    opacity: 0;
}
.animation.appearx3.is_active{
    opacity: 1 !important;
    transition: opacity;
    transition-delay: 0.4s;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.appearx4{
    opacity: 0;
}
.animation.appearx4.is_active{
    opacity: 1 !important;
    transition: opacity;
    transition-delay: 0.5s;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.appearx5{
    opacity: 0;
}
.animation.appearx5.is_active{
    opacity: 1 !important;
    transition: opacity;
    transition-delay: 0.6s;
    transition-duration: 3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}