: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: right;
    --block-reveal-direction-ll: left;
    --block-reveal-direction-tt: top;
    --block-reveal-direction-tb: bottom;
    /*CONTROLS THE COLOR OF THE FIRST BLOCK*/
    --blockcolor1: #000;
    /*CONTROLS THE ANIMATION DURATION OF THE FIRST BLOCK*/
    --block1-reveal-duration: 1.5;
    /*CONTROLS THE ANIMATION DELAY OF THE FIRST BLOCK*/
    --block1-reveal-delay: 0.1;
    /*CONTROLS THE COLOR OF THE SECOND BLOCK*/
    --blockcolor2: #2C2C39;
    /*CONTROLS THE ANIMATION DURATION OF THE SECOND BLOCK*/
    --block2-reveal-duration: 1.5;
    /*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: 0.5;
    /*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 backgroundleft ANIMATION
/*************************************************/

.backgroundleft {
    animation: none !important;
}
.backgroundleft .elementor-widget-container:first-child {
    --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);
}
.backgroundleft:before,
.backgroundleft:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scalex(0);
    transform-origin: var(--block-reveal-direction-ll);
}
.backgroundleft: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);
}
.backgroundleft: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;
    }
}
/*************************************************
LEFT / RIGHT BLOCK REVEAL ANIMATION FOR WIDGETS
REPLACEMENT WITH backgroundright ANIMATION
/*************************************************/

.backgroundright {
    animation: none !important;
}
.backgroundright .elementor-widget-container:first-child {
    --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);
}
.backgroundright:before,
.backgroundright:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scalex(0);
    transform-origin: var(--block-reveal-direction-lr);
}
.backgroundright: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);
}
.backgroundright: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 backgroundtop ANIMATION
/*************************************************/

.backgroundtop {
    animation: none !important;
}
.backgroundtop .elementor-widget-container > *:first-child {
    --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);
}
.backgroundtop:before,
.backgroundtop:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: var(--block-reveal-direction-tt);
    transform: scaleY(0);
}
.backgroundtop: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);
}
.backgroundtop: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);
    }
}
/*************************************************
TOP / BOTTOM BLOCK REVEAL ANIMATION FOR WIDGETS
REPLACEMENT WITH backgroundbotoom ANIMATION
/*************************************************/

.backgroundbottom {
    animation: none !important;
}
.backgroundbottom .elementor-widget-container > *:first-child {
    --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);
}
.backgroundbottom:before,
.backgroundbottom:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: var(--block-reveal-direction-tb);
    transform: scaleY(0);
}
.backgroundbottom: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);
}
.backgroundbottom: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);
    }
}