@charset "UTF-8";



:root {
    --flip-duration: 1700ms;
}


.st-flip-page {
    transition: transform var(--flip-duration) cubic-bezier(0.2, 0.6, 0.3, 1),
                opacity var(--flip-duration) ease;
}


.st-flip-spread {
    transition: opacity var(--flip-duration) ease;
}


@keyframes stDoorOpenLeft {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
        z-index: 5;
    }
    65% {
        transform: rotateY(-90deg);
        opacity: 1;
        z-index: 5;
    }
    100% {
        transform: rotateY(-130deg);
        opacity: 0;
        z-index: 1;
    }
}


@keyframes stDoorOpenRight {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
        z-index: 5;
    }
    65% {
        transform: rotateY(90deg);
        opacity: 1;
        z-index: 5;
    }
    100% {
        transform: rotateY(130deg);
        opacity: 0;
        z-index: 1;
    }
}


@keyframes stDoorCloseLeft {
    0% {
        transform: rotateY(-130deg);
        opacity: 0;
        z-index: 1;
    }
    35% {
        transform: rotateY(-90deg);
        opacity: 1;
        z-index: 5;
    }
    100% {
        transform: rotateY(0deg);
        opacity: 1;
        z-index: 5;
    }
}


@keyframes stDoorLeaveLeft {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
        z-index: 5;
    }
    100% {
        transform: rotateY(10deg);
        opacity: 0;
        z-index: 1;
    }
}


@keyframes stDoorCloseRight {
    0% {
        transform: rotateY(130deg);
        opacity: 0;
        z-index: 1;
    }
    35% {
        transform: rotateY(90deg);
        opacity: 1;
        z-index: 5;
    }
    100% {
        transform: rotateY(0deg);
        opacity: 1;
        z-index: 5;
    }
}


@keyframes stDoorLeaveRight {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
        z-index: 5;
    }
    100% {
        transform: rotateY(-10deg);
        opacity: 0;
        z-index: 1;
    }
}


@keyframes stDoorPageIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


@keyframes stDoorPageInLeft {
    0% {
        opacity: 0;
        transform: rotateY(10deg);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}


@keyframes stDoorPageInRight {
    0% {
        opacity: 0;
        transform: rotateY(-10deg);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}




.st-flip-page--leaving-forward.st-flip-page--left {
    animation: stDoorOpenLeft var(--flip-duration) cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.st-flip-page--leaving-forward.st-flip-page--right {
    animation: stDoorOpenRight var(--flip-duration) cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.st-flip-page--entering-forward.st-flip-page--left {
    animation: stDoorPageInLeft var(--flip-duration) cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.st-flip-page--entering-forward.st-flip-page--right {
    animation: stDoorPageInRight var(--flip-duration) cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}


.st-flip-page--leaving-back.st-flip-page--left {
    animation: stDoorLeaveLeft var(--flip-duration) cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.st-flip-page--leaving-back.st-flip-page--right {
    animation: stDoorLeaveRight var(--flip-duration) cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.st-flip-page--entering-back.st-flip-page--left {
    animation: stDoorCloseLeft var(--flip-duration) cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
.st-flip-page--entering-back.st-flip-page--right {
    animation: stDoorCloseRight var(--flip-duration) cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}