
/* ---------------------------------------- Animations Control ---------------------------------------- */


/* -------------------- Fade ins -------------------- */


/* ---------- Simple Fade in (no translation) ---------- */


/* ----- Flag ----- */
.animate_flag_FadeIn{
    opacity: 0;
}

/* ----- Keyframes ----- */
@keyframes fadeIn {
    0% {
        opacity: 0;    }
    100% {
        opacity: 1;
    }
}

.animate_FadeIn {
    position: relative;
    animation: fadeIn ease 0.75s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}



/* ---------- Fade in from left ---------- */


/* ----- Flag ----- */
.animate_flag_FadeinFromLeft{
    opacity: 0;
}

/* ----- Keyframes ----- */
@keyframes fadeInFromLeft {
    0% {
        opacity: 0;
        right: 100%;
    }
    100% {
        opacity: 1;
        right: 0%;
    }
}

.animate_FadeInFromLeft {
    position: relative;
    animation: fadeInFromLeft ease 0.75s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


/* ---------- Fade in from right ---------- */


/* ----- Flag ----- */

.animate_flag_FadeInFromRight{
    opacity: 0;
}

/* ----- Keyframes ----- */

@keyframes fadeInFromRight {
    0% {
        opacity: 0;
        left: 100%;
    }
    100% {
        opacity: 1;
        left: 0%;
    }
}

/* ----- Animation ----- */

.animate_FadeInFromRight {
    position: relative;
    animation: fadeInFromRight ease 0.75s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


/* ---------- Fade in from right ---------- */


/* ----- Flag ----- */

.animate_flag_FadeInFromBottom{
    opacity: 0;
}

/* ----- Keyframes ----- */

@keyframes fadeInFromBottom {
    0% {
        opacity: 0;
        top: 500px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}

/* ----- Animation ----- */

.animate_FadeInFromBottom {
    position: relative;
    animation: fadeInFromBottom ease 0.75s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


/* -------------------- Fade outs -------------------- */




/* ---------- Simple Fade out (no translation) ---------- */

/* ----- Flag ----- */
.animate_flag_FadeOut{
    opacity: 1;
}

/* ----- Keyframes ----- */
@keyframes fadeOut {
    0% {
        opacity: 1;    
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}

.animate_FadeOut {
    position: relative;
    animation: fadeOut ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}








/* ------------------------- Exits & Enters ------------------------- */



/* -------------------- Exits -------------------- */


/* ---------- Exit Page Left ---------- */


/* ----- Flag ----- */
.animate_flag_ExitLeft{
    opacity: 1;
}

/* ----- Keyframes ----- */

@keyframes exitPageLeft {
    0% {
        opacity: 0;
        right: 0%;
    }
    100% {
        opacity: 1;
        right: 200%;
    }
}

/* ----- Animation ----- */

.animate_ExitLeft {
    position: relative;
    animation: exitPageLeft ease 0.75s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}



/* ---------- Exit Page Right ---------- */

/* ----- Flag ----- */
.animate_flag_ExitRight{
    opacity: 1;
}

/* ----- Keyframes ----- */

@keyframes exitPageRight {
    0% {
        opacity: 0;
        left: 0%;
    }
    100% {
        opacity: 1;
        left: 200%;
    }
}

/* ----- Animation ----- */

.animate_ExitRight {
    position: relative;
    animation: exitPageRight ease 0.75s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}









/* -------------------- Enters -------------------- */


/* ---------- Enter Page From Right ---------- */


/* ----- Flag ----- */
.animate_flag_EnterFromRight{
    opacity: 1;
}

/* ----- Keyframes ----- */

@keyframes enterPageFromRight {
    0% {
        opacity: 0;
        left: 100%;
    }
    100% {
        opacity: 1;
        left: 0%;
    }
}

/* ----- Animation ----- */

.animate_EnterFromRight {
    position: relative;
    animation: enterPageFromRight ease 0.75s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* ---------- Enter Page From Right ---------- */


/* ----- Flag ----- */
.animate_flag_EnterFromLeft{
    opacity: 1;
}

/* ----- Keyframes ----- */

@keyframes enterPageFromLeft {
    0% {
        opacity: 0;
        right: 100%;
    }
    100% {
        opacity: 1;
        right: 0%;
    }
}

/* ----- Animation ----- */

.animate_EnterFromLeft {
    position: relative;
    animation: enterPageFromLeft ease 0.75s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
