@charset "UTF-8";

/* --------------------
 *   fade animation
 * -------------------- */

.hide {
    opacity: 0;
    transition: opacity 0.5s;
}

.show {
    opacity: 1;
}

.fade_left {
    opacity: 0;
    transform: translate(5rem, 0);
    transition: opacity 0.5s, transform 0.5s;
}

.fade_right {
    opacity: 0;
    transform: translate(-5rem, 0);
    transition: opacity 0.5s, transform 0.5s;
}

.fade_down {
    opacity: 0;
    transform: translate(0, -5rem);
    transition: opacity 0.5s, transform 0.5s;
}

.fade_up {
    opacity: 0;
    transform: translate(0, 5rem);
    transition: opacity 0.5s, transform 0.5s;
}

.fade_left.show,
.fade_right.show,
.fade_down.show,
.fade_up.show {
    opacity: 1;
    transform: translate(0, 0);
}

.fade_zoomin {
    text-align: center;
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition: opacity 0.5s, transform 0.5s;
}

.fade_zoomout {
    text-align: center;
    opacity: 0;
    transform: scale(2);
    transform-origin: center;
    transition: opacity 0.5s, transform 0.5s;
}

.fade_zoomin.show,
.fade_zoomout.show {
    opacity: 1;
    transform: scale(1);
}

.fade_rotateleft {
    opacity: 0;
    transform: rotateZ(360deg);
    transform-origin: center;
    transition: opacity 0.5s, transform 0.5s;
}

.fade_rotateright {
    opacity: 0;
    transform: rotateZ(-360deg);
    transform-origin: center;
    transition: opacity 0.5s, transform 0.5s;
}

.fade_rotateleft.show,
.fade_rotateright.show {
    opacity: 1;
    transform: rotateZ(0);
}

.fade_rotatein {
    opacity: 0;
    transform: scale(0) rotateZ(360deg);
    transform-origin: center;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.fade_rotateout {
    opacity: 0;
    transform: scale(2) rotateZ(-360deg);
    transform-origin: center;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.fade_rotatein.show,
.fade_rotateout.show {
    opacity: 1;
    transform: scale(1) rotateZ(0);
}

.fade_rotateX {
    opacity: 0;
    transform: rotateX(180deg);
    transform-origin: center;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade_rotateY {
    opacity: 0;
    transform: rotateY(180deg);
    transform-origin: center;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade_rotateX.show,
.fade_rotateY.show {
    opacity: 1;
    transform: rotateY(0);
}

.fade_delay1 {
    transition-delay: 0.25s;
}

.fade_delay2 {
    transition-delay: 0.5s;
}

.fade_delay3 {
    transition-delay: 0.75s;
}

.fade_delay4 {
    transition-delay: 1s;
}