/* CSS Document */

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

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

.show {
    opacity: 1;
}

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

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

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

.fade_up.hide {
    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.hide {
    opacity: 0;
    width: 5rem;
    height: 5rem;
    transform: scale(0);
    transition: opacity 0.5s, transform 0.5s;
}

.fade_zoomout.hide {
    opacity: 0;
    width: 5rem;
    height: 5rem;
    transform: scale(2);
    transition: opacity 0.5s, transform 0.5s;
}

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

.fade_rotateleft.hide {
    opacity: 0;
    width: 5rem;
    height: 5rem;
    transform: rotateZ(360deg);
    transition: opacity 0.5s, transform 0.5s;
}

.fade_rotateright.hide {
    opacity: 0;
    width: 5rem;
    height: 5rem;
    transform: rotateZ(-360deg);
    transition: opacity 0.5s, transform 0.5s;
}

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

.fade_rotatein.hide {
    opacity: 0;
    width: 5rem;
    height: 5rem;
    transform: scale(0) rotateZ(360deg);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.fade_rotateout.hide {
    opacity: 0;
    width: 5rem;
    height: 5rem;
    transform: scale(2) rotateZ(-360deg);
    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_rotateY.hide {
    opacity: 0;
    transform: rotateY(180deg);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

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

.hide.section_back::after {
    width: 0;
}

.show.section_back::after {
    width: 100vw;
}