/* ANIMATIONS ADJUSTMENT / REPLACEMENT 2.0 (08-2021) BY FRANK TIELEMANS 
THIS VERSION WORKS WITH ELEMNTOR 3.3.0 and later */


/* BEFORE YOU USE THIS FILE, make sure you delete the previous version,
also remove the action you've made in the theme FUNCTIONS.PHP 
to dequeue the original entrance animations and enqueue these customised animations.
You DON'T need them anymore, everything can be loaded via CSS now.
This also means that you don't have to worry the custom animations will be overridden when Elementor got a new update.

You can paste this whole stylesheet in the Elementor custom code (Dashboard > Elementor > Custom code) if you want
BUT...BE AWARE if you do so.

First wrap this in <style> HTML tags and expect serious lag in the code editor! I don't know why this happens,
but the new Elementor code editor lags like hell when you paste large code snippets in it.
It makes it hard to modify the variables.

I prefer to do this with a plugin like 'Custom CSS & JS' or Code snippets via PHP.
Custom CSS & JS plugin is free : https://wordpress.org/plugins/custom-css-js/
Paste the stylesheet in there and you are good to go. You can activate and deactivate the stylesheet at any time if you want.

Another free plugin is Code snippets: https://wordpress.org/plugins/code-snippets/
Code Snippets is an easy, clean and simple way to run PHP code snippets on your site.
It removes the need to add custom snippets to your theme’s functions.php file. 
Here are two tutorials on how to use it:
https://www.youtube.com/watch?v=XvI4eAmSurg
https://www.youtube.com/watch?v=8WGhhXsIjJQ

That's all, have fun with this style sheet. Below are variables to customise some animations, read the comments.
 */

:root {
    /*CONTROLS THE OFFSET VALUE OF THE ELEMENT BEFORE IT FADES IN RIGHT & FADES IN UP
 VERY IMPORTANT THAT THIS IS A POSITIVE VALUE!*/
    --fade-right-up-offset: 40px;
    /*CONTROLS THE OFFSET VALUE OF THE ELEMENT BEFORE IT FADES IN LEFT & FADES IN DOWN
 VERY IMPORTANT THAT THIS IS A NEGATIVE VALUE!*/
    --fade-left-down-offset: -40px;
    --block-reveal-direction-lr: left;
    --block-reveal-direction-tb: top;
    /*CONTROLS THE COLOR OF THE FIRST BLOCK*/
    --blockcolor1: #F0A122;
    /*CONTROLS THE ANIMATION DURATION OF THE FIRST BLOCK*/
    --block1-reveal-duration: 2.8;
    /*CONTROLS THE ANIMATION DELAY OF THE FIRST BLOCK*/
    --block1-reveal-delay: 0.1;
    /*CONTROLS THE COLOR OF THE SECOND BLOCK*/
    --blockcolor2: #014A57;
    /*CONTROLS THE ANIMATION DURATION OF THE SECOND BLOCK*/
    --block2-reveal-duration: 2;
    /*CONTROLS THE ANIMATION DELAY OF THE SECOND BLOCK*/
    --block2-reveal-delay: 0.4;
    /*CONTROLS THE ANIMATION DELAY FOR THE ELEMENT GOT SHOWN. USE ABOUT HALF OF THE LONGEST BLOCK DURATION TO BE SAFE.*/
    --show-element-delay: 1.4;
    /*CONTROLS THE ANIMATION TRANSITION OF THE ELEMENT - KEEP IT SHORT */
    --show-element-transition: 0.3;
}

/*************************************************
   EXPERIMENTAL BLOCK REVEAL ANIMS FOR WIDGETS
/*************************************************/


/*************************************************
LEFT / RIGHT BLOCK REVEAL ANIMATION FOR WIDGETS
REPLACEMENT WITH FLASH ANIMATION
/*************************************************/

.flash {
    animation: none !important;
}
.flash .elementor-widget-container {
    --show-el: calc(var(--show-element-delay) * 1s);
    --show-trans: calc(var(--show-element-transition) * 1s);
    opacity: 0;
    animation: show-element var(--show-trans) linear forwards;
    animation-delay: var(--show-el);
}
.flash:before,
.flash:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scalex(0);
    transform-origin: var(--block-reveal-direction-lr);
}
.flash:after {
    --block1-dur: calc(var(--block1-reveal-duration) * 1s);
    --block1-del: calc(var(--block1-reveal-delay) * 1s);
    background: var(--blockcolor1);
    animation: reveal-blockX var(--block1-dur) cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: var(--block1-del);
}
.flash:before {
    --block2-dur: calc(var(--block2-reveal-duration) * 1s);
    --block2-del: calc(var(--block2-reveal-delay) * 1s);
    background: var(--blockcolor2);
    animation: reveal-blockX var(--block2-dur) cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: var(--block2-del);
    z-index: 2;
}
@keyframes reveal-blockX {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}
@keyframes show-element {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*************************************************
TOP / BOTTOM BLOCK REVEAL ANIMATION FOR WIDGETS
REPLACEMENT WITH PULSE ANIMATION
/*************************************************/

.pulse {
    animation: none !important;
}
.pulse .elementor-widget-container {
    --show-el: calc(var(--show-element-delay) * 1s);
    --show-trans: calc(var(--show-element-transition) * 1s);
    opacity: 0;
    animation: show-element var(--show-trans) linear forwards;
    animation-delay: var(--show-el);
}
.pulse:before,
.pulse:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: var(--block-reveal-direction-tb);
    transform: scaleY(0);
}
.pulse:after {
    --block1-dur: calc(var(--block1-reveal-duration) * 0.75s);
    --block1-del: calc(var(--block1-reveal-delay) * 1s);
    background: var(--blockcolor1);
    animation: reveal-blockY var(--block1-dur) cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: var(--block1-del);
}
.pulse:before {
    --block2-dur: calc(var(--block2-reveal-duration) * 0.75s);
    --block2-del: calc(var(--block2-reveal-delay) * 1s);
    background: var(--blockcolor2);
    animation: reveal-blockY var(--block2-dur) cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: var(--block2-del);
    z-index: 2;
}
@keyframes reveal-blockY {
    0% {
        transform: scaleY(0);
    }
    50% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}

/*************************************************
   EXPERIMENTAL BLOCK REVEAL ANIMS FOR COLUMNS
/*************************************************/


/*************************************************
LEFT TO RIGHT BLOCK REVEAL ANIMATION FOR COLUMNS
REPLACEMENT WITH RUBBERBAND ANIMATION
/*************************************************/

.rubberBand {
    animation: none !important;
}
.rubberBand .elementor-widget-wrap {
    --show-el: calc(var(--show-element-delay) * 1s);
    --show-trans: calc(var(--show-element-transition) * 1s);
    opacity: 0;
    animation: show-element var(--show-trans) linear forwards;
    animation-delay: var(--show-el);
}
.rubberBand:before,
.rubberBand:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: var(--block-reveal-direction-lr);
    transform: scalex(0);
}
.rubberBand:after {
    --block1-dur: calc(var(--block1-reveal-duration) * 1s);
    --block1-del: calc(var(--block1-reveal-delay) * 1s);
    background: var(--blockcolor1);
    animation: reveal-blockX var(--block1-dur) cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: var(--block1-del);
}
.rubberBand:before {
    --block2-dur: calc(var(--block2-reveal-duration) * 1s);
    --block2-del: calc(var(--block2-reveal-delay) * 1s);
    background: var(--blockcolor2);
    animation: reveal-blockX var(--block2-dur) cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: var(--block2-del);
    z-index: 2;
}

/*************************************************
TOP TO BOTTOM BLOCK REVEAL ANIMATION FOR COLUMNS
REPLACEMENT WITH SHAKE ANIMATION
/*************************************************/

.shake {
    animation: none !important;
}
.shake .elementor-widget-wrap {
    --show-el: calc(var(--show-element-delay) * 1s);
    --show-trans: calc(var(--show-element-transition) * 1s);
    opacity: 0;
    animation: show-element var(--show-trans) linear forwards;
    animation-delay: var(--show-el);
}
.shake:before,
.shake:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: var(--block-reveal-direction-tb);
    transform: scaleY(0);
}
.shake:after {
    --block1-dur: calc(var(--block1-reveal-duration) * 1s);
    --block1-del: calc(var(--block1-reveal-delay) * 1s);
    background: var(--blockcolor1);
    animation: reveal-blockY var(--block1-dur) cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: var(--block1-del);
}
.shake:before {
    --block2-dur: calc(var(--block2-reveal-duration) * 1s);
    --block2-del: calc(var(--block2-reveal-delay) * 1s);
    background: var(--blockcolor2);
    animation: reveal-blockY var(--block2-dur) cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: var(--block2-del);
    z-index: 2;
}

/****************
    FADE ANIMS
*****************/

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
.fadeIn {
    animation-name: fadeIn
}
@keyframes fadeDown {
    0% {
        transform: translateY(var(--fade-left-down-offset));
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.fadeInDown {
    animation-name: fadeDown !important;
    animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
    animation-fill-mode: both;
}
@keyframes fadeLeft {
    0% {
        transform: translateX(var(--fade-left-down-offset));
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
.fadeInLeft {
    animation-name: fadeLeft !important;
    animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
    animation-fill-mode: both;
}
@keyframes fadeRight {
    0% {
        transform: translateX(var(--fade-right-up-offset));
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
.fadeInRight {
    animation-name: fadeRight !important;
    animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
    animation-fill-mode: both;
}
@keyframes fadeUp {
    0% {
        transform: translateY(var(--fade-right-up-offset));
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.fadeInUp {
    animation-name: fadeUp !important;
    animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
    animation-fill-mode: both;
}

/****************
   BOUNCE ANIMS
*****************/

.bounce {
    animation-name: bounce-new !important;
}
@keyframes bounce-new {
    0% {
        transform: scale(0);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: scale(1);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: scale(0.7);
        animation-timing-function: ease-in;
    }
    72% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    81% {
        transform: scale(0.84);
        animation-timing-function: ease-in;
    }
    89% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    95% {
        transform: scale(0.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}
.bounceIn {
    animation-name: bounceIn-new !important;
}
@keyframes bounceIn-new {
    0% {
        transform: scale(7);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: scale(1);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: scale(1.5);
        animation-timing-function: ease-in;
    }
    72% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    81% {
        transform: scale(1.24);
        animation-timing-function: ease-in;
    }
    89% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
    95% {
        transform: scale(1.04);
        animation-timing-function: ease-in;
    }
    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}
.bounceInDown {
    animation-name: bounceInDown-new !important
}
@keyframes bounceInDown-new {
    0% {
        transform: translateY(-500px);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: translateY(0) scale(0.98, 1.02);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateY(-65px) scale(1.02, 0.98);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateY(0) scale(0.99, 1.01);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateY(-28px) scale(0.99, 1);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateY(0) scale(1, 1);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateY(-8px) scale(1, 1);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
}
.bounceInLeft {
    animation-name: bounceInLeft-new !important
}
@keyframes bounceInLeft-new {
    0% {
        transform: translateX(-600px);
        animation-timing-function: ease-in;
        transform-origin: right;
        opacity: 0;
    }
    38% {
        transform: translateX(0) scale(1.02, 0.98);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateX(-68px) scale(0.98, 1.02);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateX(0) scale(1.01, 0.99);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateX(-28px) scale(0.99, 1.01);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateX(0) scale(1, 0.99);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateX(-8px) scale(1, 1);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateX(0) scale(1, 1);
        animation-timing-function: ease-out;
    }
}
.bounceInRight {
    animation-name: bounceInRight-new !important
}
@keyframes bounceInRight-new {
    0% {
        transform: translateX(600px);
        animation-timing-function: ease-in;
        transform-origin: left;
        opacity: 0;
    }
    38% {
        transform: translateX(0) scale(1.02, 0.98);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateX(68px) scale(0.98, 1.02);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateX(0) scale(1.01, 0.99);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateX(32px) scale(0.99, 1.01);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateX(0) scale(1, 0.99);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateX(8px) scale(1, 1);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateX(0) scale(1, 1);
        animation-timing-function: ease-out;
    }
}
.bounceInUp {
    animation-name: bounceInUp-new !important
}
@keyframes bounceInUp-new {
    0% {
        transform: translateY(500px);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: translateY(0) scale(0.98, 1.02);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateY(65px) scale(1.02, 0.98);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateY(0) scale(0.99, 1.01);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateY(28px) scale(0.99, 1);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateY(0) scale(0.99, 1);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateY(8px) scale(1, 0.99);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0) scale(1, 1);
        animation-timing-function: ease-out;
    }
}

/****************
   ROTATE ANIMS
*****************/

.rotateIn {
    animation-name: rotateIn-new !important;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
@keyframes rotateIn-new {
    0% {
        opacity: 0;
        transform: scale(0.35, 0.25) rotateX(15deg) rotateZ(20deg) translateY(150px) translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1) rotateX(0deg) rotateZ(0deg) translateY(0) translateX(0);
    }
}
.rotateInDownLeft {
    animation-name: rotateInDownLeft-new !important;
}
@keyframes rotateInDownLeft-new {
    0% {
        transform: translateY(800px) rotate(720deg);
        filter: blur(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
}
.rotateInDownRight {
    animation-name: rotateInDownRight-new !important;
}
@keyframes rotateInDownRight-new {
    0% {
        transform: translateY(-800px) rotate(-720deg);
        filter: blur(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotate(0deg);
        filter: blur(0);
        opacity: 1;
    }
}
.rotateInUpLeft {
    animation-name: rotateInUpLeft-new !important;
    ;
    animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation-fill-mode: both;
}
@keyframes rotateInUpLeft-new {
    0% {
        transform: translateX(-1000px) rotate(-720deg);
        filter: blur(50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0deg);
        filter: blur(0);
        opacity: 1;
    }
}
.rotateInUpRight {
    animation-name: rotateInUpRight-new !important;
    ;
    animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation-fill-mode: both;
}
@keyframes rotateInUpRight-new {
    0% {
        transform: translateX(1000px) rotate(720deg);
        filter: blur(50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0deg);
        filter: blur(0);
        opacity: 1;
    }
}

/****************
   ZOOM ANIMS
*****************/

.zoomIn {
    animation-name: zoomIn-new !important;
    ;
}
@keyframes zoomIn-new {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}
.zoomInDown {
    animation-name: zoomInDown-new !important;
    ;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: both;
}
@keyframes zoomInDown-new {
    0% {
        transform: translateY(-600px) rotateX(30deg) scale(6.5);
        transform-origin: 50% 200%;
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotateX(0) scale(1);
        transform-origin: 50% -500px;
        opacity: 1;
    }
}
.zoomInLeft {
    animation-name: zoomInLeft-new !important;
    ;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: both;
}
@keyframes zoomInLeft-new {
    0% {
        transform: translateX(-800px) rotateY(-30deg) scale(6.5);
        transform-origin: 200% 50%;
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotateY(0) scale(1);
        transform-origin: -600px 50%;
        opacity: 1;
    }
}
.zoomInRight {
    animation-name: zoomInRight-new !important;
    ;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: both;
}
@keyframes zoomInRight-new {
    0% {
        transform: translateX(800px) rotateY(30deg) scale(6.5);
        transform-origin: -200% 50%;
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotateY(0) scale(1);
        transform-origin: 1800px 50%;
        opacity: 1;
    }
}
.zoomInUp {
    animation-name: zoomInUp-new !important;
    ;
    animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    animation-fill-mode: both;
}
@keyframes zoomInUp-new {
    0% {
        transform: translateY(600px) rotateX(-30deg) scale(6.5);
        transform-origin: 50% -100%;
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotateX(0) scale(1);
        transform-origin: 50% 500px;
        opacity: 1;
    }
}

/****************
   SLIDE ANIMS
*****************/

.slideInDown {
    animation-name: slideInDown-new !important;
    ;
    animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation-fill-mode: both;
}
@keyframes slideInDown-new {
    0% {
        transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
        transform-origin: 50% 0%;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}
.slideInLeft {
    animation-name: slideInLeft-new !important;
    ;
    animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation-fill-mode: both;
}
@keyframes slideInLeft-new {
    0% {
        transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
        transform-origin: 100% 50%;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}
.slideInRight {
    animation-name: slideInRight-new !important;
    ;
    animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation-fill-mode: both;
}
@keyframes slideInRight-new {
    0% {
        transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
        transform-origin: 0% 50%;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}
.slideInUp {
    animation-name: slideInUp-new !important;
    ;
    animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation-fill-mode: both;
}
@keyframes slideInUp-new {
    0% {
        transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
        transform-origin: 50% 100%;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

/*************************************************
THESE ANIMATIONS ARE NOT EDITED
/*************************************************/

@keyframes headShake {
    0% {
        transform: translateX(0)
    }
    6.5% {
        transform: translateX(-6px) rotateY(-9deg)
    }
    18.5% {
        transform: translateX(5px) rotateY(7deg)
    }
    31.5% {
        transform: translateX(-3px) rotateY(-5deg)
    }
    43.5% {
        transform: translateX(2px) rotateY(3deg)
    }
    50% {
        transform: translateX(0)
    }
}
.headShake {
    animation-timing-function: ease-in-out;
    animation-name: headShake
}
@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg)
    }
    40% {
        transform: rotate3d(0, 0, 1, -10deg)
    }
    60% {
        transform: rotate3d(0, 0, 1, 5deg)
    }
    80% {
        transform: rotate3d(0, 0, 1, -5deg)
    }
    to {
        transform: rotate3d(0, 0, 1, 0deg)
    }
}
.swing {
    transform-origin: top center;
    animation-name: swing
}
@keyframes tada {
    from,
    to {
        transform: scale3d(1, 1, 1)
    }
    10%,
    20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
}
.tada {
    animation-name: tada
}
@keyframes wobble {
    from,
    to {
        transform: none
    }
    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }
    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }
    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }
    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }
    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }
}
.wobble {
    animation-name: wobble
}
@keyframes jello {
    11.1%,
    from,
    to {
        transform: none
    }
    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }
    77.7% {
        transform: skewX(.390625deg) skewY(.390625deg)
    }
    88.8% {
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}
.jello {
    animation-name: jello;
    transform-origin: center
}
@keyframes lightSpeedIn {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
    60% {
        transform: skewX(20deg);
        opacity: 1
    }
    80% {
        transform: skewX(-5deg);
        opacity: 1
    }
    to {
        transform: none;
        opacity: 1
    }
}
.lightSpeedIn {
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out
}
@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }
    to {
        opacity: 1;
        transform: none
    }
}
.rollIn {
    animation-name: rollIn
}
.elementor-animation-grow {
    transition-duration: .3s;
    transition-property: transform
}
.elementor-animation-grow:active,
.elementor-animation-grow:focus,
.elementor-animation-grow:hover {
    transform: scale(1.1)
}
.elementor-animation-shrink {
    transition-duration: .3s;
    transition-property: transform
}
.elementor-animation-shrink:active,
.elementor-animation-shrink:focus,
.elementor-animation-shrink:hover {
    transform: scale(0.9)
}
@keyframes elementor-animation-pulse {
    25% {
        transform: scale(1.1)
    }
    75% {
        transform: scale(0.9)
    }
}
.elementor-animation-pulse:active,
.elementor-animation-pulse:focus,
.elementor-animation-pulse:hover {
    animation-name: elementor-animation-pulse;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}
@keyframes elementor-animation-pulse-grow {
    to {
        transform: scale(1.1)
    }
}
.elementor-animation-pulse-grow:active,
.elementor-animation-pulse-grow:focus,
.elementor-animation-pulse-grow:hover {
    animation-name: elementor-animation-pulse-grow;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate
}
@keyframes elementor-animation-pulse-shrink {
    to {
        transform: scale(0.9)
    }
}
.elementor-animation-pulse-shrink:active,
.elementor-animation-pulse-shrink:focus,
.elementor-animation-pulse-shrink:hover {
    animation-name: elementor-animation-pulse-shrink;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate
}
@keyframes elementor-animation-push {
    50% {
        transform: scale(0.8)
    }
    100% {
        transform: scale(1)
    }
}
.elementor-animation-push:active,
.elementor-animation-push:focus,
.elementor-animation-push:hover {
    animation-name: elementor-animation-push;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-iteration-count: 1
}
@keyframes elementor-animation-pop {
    50% {
        transform: scale(1.2)
    }
}
.elementor-animation-pop:active,
.elementor-animation-pop:focus,
.elementor-animation-pop:hover {
    animation-name: elementor-animation-pop;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-iteration-count: 1
}
.elementor-animation-bounce-in {
    transition-duration: .5s
}
.elementor-animation-bounce-in:active,
.elementor-animation-bounce-in:focus,
.elementor-animation-bounce-in:hover {
    transform: scale(1.2);
    transition-timing-function: cubic-bezier(0.47, 2.02, .31, -.36)
}
.elementor-animation-bounce-out {
    transition-duration: .5s
}
.elementor-animation-bounce-out:active,
.elementor-animation-bounce-out:focus,
.elementor-animation-bounce-out:hover {
    transform: scale(0.8);
    transition-timing-function: cubic-bezier(0.47, 2.02, .31, -.36)
}
.elementor-animation-rotate {
    transition-duration: .3s;
    transition-property: transform
}
.elementor-animation-rotate:active,
.elementor-animation-rotate:focus,
.elementor-animation-rotate:hover {
    transform: rotate(4deg)
}
.elementor-animation-grow-rotate {
    transition-duration: .3s;
    transition-property: transform
}
.elementor-animation-grow-rotate:active,
.elementor-animation-grow-rotate:focus,
.elementor-animation-grow-rotate:hover {
    transform: scale(1.1) rotate(4deg)
}
.elementor-animation-float {
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out
}
.elementor-animation-float:active,
.elementor-animation-float:focus,
.elementor-animation-float:hover {
    transform: translateY(-8px)
}
.elementor-animation-sink {
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out
}
.elementor-animation-sink:active,
.elementor-animation-sink:focus,
.elementor-animation-sink:hover {
    transform: translateY(8px)
}
@keyframes elementor-animation-bob {
    0% {
        transform: translateY(-8px)
    }
    50% {
        transform: translateY(-4px)
    }
    100% {
        transform: translateY(-8px)
    }
}
@keyframes elementor-animation-bob-float {
    100% {
        transform: translateY(-8px)
    }
}
.elementor-animation-bob:active,
.elementor-animation-bob:focus,
.elementor-animation-bob:hover {
    animation-name: elementor-animation-bob-float, elementor-animation-bob;
    animation-duration: .3s, 1.5s;
    animation-delay: 0s, .3s;
    animation-timing-function: ease-out, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards;
    animation-direction: normal, alternate
}
@keyframes elementor-animation-hang {
    0% {
        transform: translateY(8px)
    }
    50% {
        transform: translateY(4px)
    }
    100% {
        transform: translateY(8px)
    }
}
@keyframes elementor-animation-hang-sink {
    100% {
        transform: translateY(8px)
    }
}
.elementor-animation-hang:active,
.elementor-animation-hang:focus,
.elementor-animation-hang:hover {
    animation-name: elementor-animation-hang-sink, elementor-animation-hang;
    animation-duration: .3s, 1.5s;
    animation-delay: 0s, .3s;
    animation-timing-function: ease-out, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards;
    animation-direction: normal, alternate
}
.elementor-animation-skew {
    transition-duration: .3s;
    transition-property: transform
}
.elementor-animation-skew:active,
.elementor-animation-skew:focus,
.elementor-animation-skew:hover {
    transform: skew(-10deg)
}
.elementor-animation-skew-forward {
    transition-duration: .3s;
    transition-property: transform;
    transform-origin: 0 100%
}
.elementor-animation-skew-forward:active,
.elementor-animation-skew-forward:focus,
.elementor-animation-skew-forward:hover {
    transform: skew(-10deg)
}
.elementor-animation-skew-backward {
    transition-duration: .3s;
    transition-property: transform;
    transform-origin: 0 100%
}
.elementor-animation-skew-backward:active,
.elementor-animation-skew-backward:focus,
.elementor-animation-skew-backward:hover {
    transform: skew(10deg)
}
@keyframes elementor-animation-wobble-vertical {
    16.65% {
        transform: translateY(8px)
    }
    33.3% {
        transform: translateY(-6px)
    }
    49.95% {
        transform: translateY(4px)
    }
    66.6% {
        transform: translateY(-2px)
    }
    83.25% {
        transform: translateY(1px)
    }
    100% {
        transform: translateY(0)
    }
}
.elementor-animation-wobble-vertical:active,
.elementor-animation-wobble-vertical:focus,
.elementor-animation-wobble-vertical:hover {
    animation-name: elementor-animation-wobble-vertical;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}
@keyframes elementor-animation-wobble-horizontal {
    16.65% {
        transform: translateX(8px)
    }
    33.3% {
        transform: translateX(-6px)
    }
    49.95% {
        transform: translateX(4px)
    }
    66.6% {
        transform: translateX(-2px)
    }
    83.25% {
        transform: translateX(1px)
    }
    100% {
        transform: translateX(0)
    }
}
.elementor-animation-wobble-horizontal:active,
.elementor-animation-wobble-horizontal:focus,
.elementor-animation-wobble-horizontal:hover {
    animation-name: elementor-animation-wobble-horizontal;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}
@keyframes elementor-animation-wobble-to-bottom-right {
    16.65% {
        transform: translate(8px, 8px)
    }
    33.3% {
        transform: translate(-6px, -6px)
    }
    49.95% {
        transform: translate(4px, 4px)
    }
    66.6% {
        transform: translate(-2px, -2px)
    }
    83.25% {
        transform: translate(1px, 1px)
    }
    100% {
        transform: translate(0, 0)
    }
}
.elementor-animation-wobble-to-bottom-right:active,
.elementor-animation-wobble-to-bottom-right:focus,
.elementor-animation-wobble-to-bottom-right:hover {
    animation-name: elementor-animation-wobble-to-bottom-right;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}
@keyframes elementor-animation-wobble-to-top-right {
    16.65% {
        transform: translate(8px, -8px)
    }
    33.3% {
        transform: translate(-6px, 6px)
    }
    49.95% {
        transform: translate(4px, -4px)
    }
    66.6% {
        transform: translate(-2px, 2px)
    }
    83.25% {
        transform: translate(1px, -1px)
    }
    100% {
        transform: translate(0, 0)
    }
}
.elementor-animation-wobble-to-top-right:active,
.elementor-animation-wobble-to-top-right:focus,
.elementor-animation-wobble-to-top-right:hover {
    animation-name: elementor-animation-wobble-to-top-right;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}
@keyframes elementor-animation-wobble-top {
    16.65% {
        transform: skew(-12deg)
    }
    33.3% {
        transform: skew(10deg)
    }
    49.95% {
        transform: skew(-6deg)
    }
    66.6% {
        transform: skew(4deg)
    }
    83.25% {
        transform: skew(-2deg)
    }
    100% {
        transform: skew(0)
    }
}
.elementor-animation-wobble-top {
    transform-origin: 0 100%
}
.elementor-animation-wobble-top:active,
.elementor-animation-wobble-top:focus,
.elementor-animation-wobble-top:hover {
    animation-name: elementor-animation-wobble-top;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}
@keyframes elementor-animation-wobble-bottom {
    16.65% {
        transform: skew(-12deg)
    }
    33.3% {
        transform: skew(10deg)
    }
    49.95% {
        transform: skew(-6deg)
    }
    66.6% {
        transform: skew(4deg)
    }
    83.25% {
        transform: skew(-2deg)
    }
    100% {
        transform: skew(0)
    }
}
.elementor-animation-wobble-bottom {
    transform-origin: 100% 0
}
.elementor-animation-wobble-bottom:active,
.elementor-animation-wobble-bottom:focus,
.elementor-animation-wobble-bottom:hover {
    animation-name: elementor-animation-wobble-bottom;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}
@keyframes elementor-animation-wobble-skew {
    16.65% {
        transform: skew(-12deg)
    }
    33.3% {
        transform: skew(10deg)
    }
    49.95% {
        transform: skew(-6deg)
    }
    66.6% {
        transform: skew(4deg)
    }
    83.25% {
        transform: skew(-2deg)
    }
    100% {
        transform: skew(0)
    }
}
.elementor-animation-wobble-skew:active,
.elementor-animation-wobble-skew:focus,
.elementor-animation-wobble-skew:hover {
    animation-name: elementor-animation-wobble-skew;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}
@keyframes elementor-animation-buzz {
    50% {
        transform: translateX(3px) rotate(2deg)
    }
    100% {
        transform: translateX(-3px) rotate(-2deg)
    }
}
.elementor-animation-buzz:active,
.elementor-animation-buzz:focus,
.elementor-animation-buzz:hover {
    animation-name: elementor-animation-buzz;
    animation-duration: .15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}
@keyframes elementor-animation-buzz-out {
    10% {
        transform: translateX(3px) rotate(2deg)
    }
    20% {
        transform: translateX(-3px) rotate(-2deg)
    }
    30% {
        transform: translateX(3px) rotate(2deg)
    }
    40% {
        transform: translateX(-3px) rotate(-2deg)
    }
    50% {
        transform: translateX(2px) rotate(1deg)
    }
    60% {
        transform: translateX(-2px) rotate(-1deg)
    }
    70% {
        transform: translateX(2px) rotate(1deg)
    }
    80% {
        transform: translateX(-2px) rotate(-1deg)
    }
    90% {
        transform: translateX(1px) rotate(0)
    }
    100% {
        transform: translateX(-1px) rotate(0)
    }
}
.elementor-animation-buzz-out:active,
.elementor-animation-buzz-out:focus,
.elementor-animation-buzz-out:hover {
    animation-name: elementor-animation-buzz-out;
    animation-duration: .75s;
    animation-timing-function: linear;
    animation-iteration-count: 1
}v