/* Animation */

/* Contain animation on page */
.animation-wrapper {overflow:hidden;}

/* Fade In */
[data-animation="fade-in"] {opacity:0; transition:opacity 1.2s ease-out 0.3s !important;}
.animation.animate [data-animation="fade-in"],
[data-animation="fade-in"].animate {opacity:1;}

/* Fade Up */
[data-animation="fade-up"] {opacity:0; transform:translateY(2rem); transition:opacity .5s ease-out 0.3s, transform .9s ease-out 0.3s !important; transition-delay: .5s !important;}
.animation.animate [data-animation="fade-up"],
[data-animation="fade-up"].animate {opacity:1; transform:translateY(0);}

 /* Fade Down */
[data-animation="fade-down"] {opacity:0; transform:translateY(-2rem); transition:opacity .5s ease-out 0.3s, transform .9s ease-out 0.3s !important; transition-delay: .5s !important;}
.animation.animate [data-animation="fade-down"],
[data-animation="fade-down"].animate {opacity:1; transform:translateY(0);}

/* Fade In Left */
[data-animation="fade-in-left"] {opacity:0; transform:translateX(-2rem); transition:opacity .5s ease-out 0.3s, transform .5s ease-out 0.3s !important;}
.animation.animate [data-animation="fade-in-left"],
[data-animation="fade-in-left"].animate {opacity:1; transform:translateX(0);} 

/* Fade In When Rotated */
[data-animation="fade-in-left"].rotate-90 {transform:translateX(calc(-100% - 2rem));}
.animation.animate [data-animation="fade-in-left"].rotate-90,
[data-animation="fade-in-left"].rotate-90.animate {transform:translateX(-100%) !important;}

/* Fade In Right */
[data-animation="fade-in-right"] {opacity:0; transform:translateX(2rem); transition:opacity .5s ease-out 0.3s, transform .5s ease-out 0.3s !important;}
.animation.animate [data-animation="fade-in-right"],
[data-animation="fade-in-right"].animate
{opacity:1; transform:translateX(0) !important;}

/* Animate Psuedo Element backgrounds */
.animation-psuedo::before {opacity:0; transition:opacity 1s ease-out 0.3s}
.animation-psuedo.animate::before {opacity:1;}


/* Delay Adjust */
.animation-delay-05, [data-animation-delay="05"] {transition-delay: .5s !important;}
.animation-delay-1, [data-animation-delay="1"] {transition-delay: 1s !important;}
.animation-delay-2, [data-animation-delay="2"] {transition-delay: 2s !important;}
.animation-delay-3, [data-animation-delay="3"] {transition-delay: 3s !important;}


/* Duration Adjust */
.animation-duration-03, [data-animation-duration="03"] {transition-duration: .3s !important;}
.animation-duration-05, [data-animation-duration="05"] {transition-duration: .5s !important;}
.animation-duration-1, [data-animation-duration="2"] {transition-duration: 1s !important;}
.animation-duration-2, [data-animation-duration="3"] {transition-duration: 2s !important;}
.animation-duration-3, [data-animation-duration="3"] {transition-duration: 3s !important;}
.animation-duration-4, [data-animation-duration="4"] {transition-duration: 4s !important;}
.animation-duration-5, [data-animation-duration="5"] {transition-duration: 5s !important;}