/*

* style.css 

* Example CSS for Animation - look to Elementor keyframes (defualt things) to copy and overrid it.

* https://gist.github.com/stoffl6781/d28ed53e2e350e7b89e78c6e2f2471de

*/

:root {

    --animationDistance : 15px!important;

    --animationDistanceMinus : -15px!important;

}



/* Custom Slide Animations */

.customSlideDown{

	animation-name: customSlideDown;

    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

}





@keyframes customSlideDown {

	0% {

        opacity: 0;

    transform: translateY(var(--animationDistance))



}

	100% {

        opacity: 1;

        transform: translateY(0)

}

}



.customSlideleft{

	animation-name: customSlideLeft;

    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

}





@keyframes customSlideLeft {

	0% {

    opacity: 0;

    transform: translateX(var(--animationDistanceMinus));



}

	100% {

        opacity: 1;

        transform: translateX(0px);

}

}



.customSlideRight{

	animation-name: customSlideRight;

    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

}





@keyframes customSlideRight {

	0% {

    opacity: 0;

    transform: translateX(var(--animationDistance));



}

	100% {

        opacity: 1;

        transform: translateX(0px);

}

}





.customSlideUp{

    animation-name: customSlideUp;

    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

}



@keyframes customSlideUp {

    0% {

        opacity: 0;

    transform: translateY(var(--animationDistanceMinus));

    

}

    100% {

        opacity: 1;

    transform: translateY(0px);

}

}