/* menu bar */
.s-rorate-in {
    animation-name: rorate-in;
    animation-duration: 0.5s;
}
@keyframes rorate-in {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.s-rorate-out {
    animation-name: rorate-out;
    animation-duration: 0.5s;
}
@keyframes rorate-out {
    0% {
        transform: rotate(360deg)
    }
    100% {
        transform: rotate(0deg)
    }
}

.s-innav {
    animation-name: innav;
    animation-duration: 0.5s;
}
@keyframes innav {
    0% {
        left: -220px;
    }
    100% {
        left: 0px;
    }
}

.s-outnav {
    animation-name: outnav;
    animation-duration: 0.5s;
}
@keyframes outnav {
    0% {
        left: 0px;
    }
    100% {
        left: -220px;
    }
}

/* guide - explain */
.s-ingiex {
    animation-name: ingiex;
    animation-duration: 0.5s;
}
@keyframes ingiex {
    0% {
        left: 100%;
        right: -100%;
    }
    100% {
        left: 0;
        right: 0;
    }
}

.s-outgiex {
    animation-name: outgiex;
    animation-duration: 0.5s;
}
@keyframes outgiex {
    0% {
        left: 0;
        right: 0;
    }
    100% {
        left: 100%;
        right: -100%;
    }
}

.s-backlgiex {
    animation-name: backgiex;
    animation-duration: 0.5s;
}
@keyframes backgiex {
    0% {
        left: -100%;
        right: 100%;
    }
    100% {
        left: 0;
        right: 0;
    }
}

.s-nextlgiex {
    animation-name: nextgiex;
    animation-duration: 0.5s;
}
@keyframes nextgiex {
    0% {
        left: 0;
        right: 0;
    }
    100% {
        left: -100%;
        right: 100%;
    }
}


/* items */
.s-out-opacity {
    animation-name: out-opacity;
    animation-duration: 2s;
}
@keyframes out-opacity {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* footer */
.s-up-footer {
    animation-name: footer;
    animation-duration: 0.5s;
}
@keyframes footer {
    0% {
        bottom: -100%;
    }
    100% {
        bottom: 0;
    }
}


/* messenger box / loader */
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}