.animated-IN{
    opacity: 0;
}

/* Top ------------ */
.animatedFadeUp{
    animation: fadeUp 400ms ease-out 0s 1 normal;
    opacity: 1;
}
@keyframes fadeUp {
    from {
        transform: translateY(-70px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* Right ------------ */
.animatedFadeRight{
    animation: fadeRight 400ms ease-out 0s 1 normal;
    opacity: 1;
}
@keyframes fadeRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* Bottom ------------ */
.animatedFadeDown{
    animation: fadeDown 400ms ease-out 0s 1 normal;
    opacity: 1;
}
@keyframes fadeDown {
    from {
        transform: translateY(70px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* Left ------------ */
.animatedFadeLeft{
    animation: fadeLeft 400ms ease-out 0s 1 normal;
    opacity: 1;
}
@keyframes fadeLeft {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* Rotate L ------------ */
.animatedRotateLeft{
    animation: rotateLeft 500ms ease-out 0s 1 normal;
    opacity: 1;
}
@keyframes rotateLeft {
    from {
        transform: translate(10%,20%) rotate(35deg);
        opacity: 0;
    }
    to {
        transform: translate(10%,20%) rotate(0deg);
        opacity: 1;
    }
}

/* Rotate R ------------ */
.animatedRotateRight{
    animation: rotateRight 500ms ease-out 0s 1 normal;
    opacity: 1;
}
@keyframes rotateRight {
    from {
        transform: translate(10%,20%) rotate(-35deg);
        opacity: 0;
    }
    to {
        transform: translate(10%,20%) rotate(0deg);
        opacity: 1;
    }
}

/* Delay */
.del300m{
    animation-delay: 300ms;
}