/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Fades */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@keyframes fadeIn {
    0% {
        opacity: 0;
    } 100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    } 100% {
        opacity: 0;
    }
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Fades And Movements */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@keyframes fadeInAndPopFromBottom {
    0% {
        opacity: 0;
        transform: translateY(100px);
    } 100% {
        opacity: 1;
        transform: translateY(0px);
    }
}
@keyframes fadeOutAndUnpopFromTop {
    0% {
        opacity: 1;
        transform: translateY(0px);
    } 100% {
        opacity: 0;
        transform: translateY(100px);
    }
}
@keyframes fadeInNotificationAndPopFromBottom {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(100px);
    } 100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0px);
    }
}
@keyframes fadeOutNotificationAndUnpopFromTop {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0px);
    } 100% {
        opacity: 0;
        transform: translateX(-50%) translateY(100px);
    }
}