.soda-anim-mask-from-up {
    -webkit-animation-name: SodaMaskFromUp;
    animation-name: SodaMaskFromUp;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}
.soda-anim-mask-from-down {
    -webkit-animation-name: SodaMaskFromDown;
    animation-name: SodaMaskFromDown;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}
.soda-anim-mask-from-left {
    -webkit-animation-name: SodaMaskFromLeft;
    animation-name: SodaMaskFromLeft;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}
.soda-anim-mask-from-right {
    -webkit-animation-name: SodaMaskFromRight;
    animation-name: SodaMaskFromRight;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}
@-webkit-keyframes SodaMaskFromUp {
    from {
        -webkit-clip-path: inset(0 0 100% 0);
        clip-path: inset(0 0 100% 0);
        opacity: 1;
    }
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
@keyframes SodaMaskFromUp {
    from {
        -webkit-clip-path: inset(0 0 100% 0);
        clip-path: inset(0 0 100% 0);
        opacity: 1;
    }
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
@-webkit-keyframes SodaMaskFromDown {
    from {
        -webkit-clip-path: inset(100% 0 0 0);
        clip-path: inset(100% 0 0 0);
        opacity: 1;
    }
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
@keyframes SodaMaskFromDown {
    from {
        -webkit-clip-path: inset(100% 0 0 0);
        clip-path: inset(100% 0 0 0);
        opacity: 1;
    }
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
@-webkit-keyframes SodaMaskFromRight {
    from {
        -webkit-clip-path: inset(0 0 0 100%);
        clip-path: inset(0 0 0 100%);
        opacity: 1;
    }
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
@keyframes SodaMaskFromRight {
    from {
        -webkit-clip-path: inset(0 0 0 100%);
        clip-path: inset(0 0 0 100%);
        opacity: 1;
    }
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
@-webkit-keyframes SodaMaskFromLeft {
    from {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
@keyframes SodaMaskFromLeft {
    from {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }
    to {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}
[class*="soda-anim-reveal-from"] > .e-con-inner::after,
[class*="soda-anim-reveal-from"] > .elementor-container::after,
[class*="soda-anim-reveal-from"] > .elementor-element-populated::after,
[class*="soda-anim-reveal-from"]::after {
    content: "";
    position: absolute;
    background: var(--e-global-color-primary);
    width: 100%;
    height: 100%;
    z-index: 999;
    -webkit-transition: 1.25s cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: 1.25s cubic-bezier(0.19, 1, 0.22, 1);
    transition: 1.25s cubic-bezier(0.19, 1, 0.22, 1);

}
.animated[class*="soda-anim-reveal-from"] > .e-con-inner::after,
.animated[class*="soda-anim-reveal-from"] > .elementor-container::after,
.animated[class*="soda-anim-reveal-from"] > .elementor-element-populated::after,
.animated[class*="soda-anim-reveal-from"]::after {
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}
.animated.animated-slow[class*="soda-anim-reveal-from"] > .e-con-inner::after,
.animated.animated-slow[class*="soda-anim-reveal-from"] > .elementor-container::after,
.animated.animated-slow[class*="soda-anim-reveal-from"] > .elementor-element-populated::after,
.animated.animated-slow[class*="soda-anim-reveal-from"] > ::after {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}
.animated.animated-fast[class*="soda-anim-reveal-from"] > .e-con-inner::after,
.animated.animated-fast[class*="soda-anim-reveal-from"] > .elementor-container::after,
.animated.animated-fast[class*="soda-anim-reveal-from"] > .elementor-element-populated::after,
.animated.animated-fast[class*="soda-anim-reveal-from"]::after {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}
.soda-anim-reveal-from-up > .e-con-inner::after,
.soda-anim-reveal-from-up > .elementor-container::after,
.soda-anim-reveal-from-up > .elementor-element-populated::after,
.soda-anim-reveal-from-up::after {
    bottom: 0;
    left: 0;
    height: 0;
    -webkit-animation-name: SodaRevealVertical;
    animation-name: SodaRevealVertical;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}
.soda-anim-reveal-from-down > .e-con-inner::after,
.soda-anim-reveal-from-down > .elementor-container::after,
.soda-anim-reveal-from-down > .elementor-element-populated::after,
.soda-anim-reveal-from-down::after {
    top: 0;
    left: 0;
    height: 0;
    -webkit-animation-name: SodaRevealVertical;
    animation-name: SodaRevealVertical;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}
.soda-anim-reveal-from-left > .e-con-inner::after,
.soda-anim-reveal-from-left > .elementor-container::after,
.soda-anim-reveal-from-left > .elementor-element-populated::after,
.soda-anim-reveal-from-left::after {
    top: 0;
    right: 0;
    width: 0;
    -webkit-animation-name: SodaRevealHorizontal;
    animation-name: SodaRevealHorizontal;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

}
.soda-anim-reveal-from-right > .e-con-inner::after,
.soda-anim-reveal-from-right > .elementor-container::after,
.soda-anim-reveal-from-right > .elementor-element-populated::after,
.soda-anim-reveal-from-right::after {
    top: 0;
    left: 0;
    width: 0;
    -webkit-animation-name: SodaRevealHorizontal;
    animation-name: SodaRevealHorizontal;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
@-webkit-keyframes SodaRevealVertical {
    from {
        height: 100%;
    }
    to {
        height: 0;
    }
}
@keyframes SodaRevealVertical {
    from {
        height: 100%;
    }
    to {
        height: 0;
    }
}
@-webkit-keyframes SodaRevealHorizontal {
    from {
        width: 100%;
    }
    to {
        width: 0;
    }
}
@keyframes SodaRevealHorizontal {
    from {
        width: 100%;
    }
    to {
        width: 0;
    }
}
