/*
 * Envo Blocks - entrance animations of blocks. The names of the movements follow Animate.css and Elementor; the
 * keyframes are our own, with smaller distances (a whole block flying in by its own height looks heavy).
 *
 * States: html.envo-anim-js (set in the head) hides .envo-anim until the script plays it (.envo-anim-play) or
 * shows it without a movement (.envo-anim-done). Without the script the blocks are shown after 3 seconds.
 */
.envo-anim,
.envo-anim-item {
	--envo-anim-duration: 0.9s;
	--envo-anim-delay: 0s;
	--envo-anim-d: 40px;
}

.envo-anim[data-envo-anim-speed="slow"],
.envo-anim[data-envo-anim-speed="slow"] .envo-anim-item {
	--envo-anim-duration: 1.6s;
}

.envo-anim[data-envo-anim-speed="fast"],
.envo-anim[data-envo-anim-speed="fast"] .envo-anim-item {
	--envo-anim-duration: 0.5s;
}

html.envo-anim-js .envo-anim:not(.envo-anim-done):not(.envo-anim-play),
html.envo-anim-js .envo-anim-item:not(.envo-anim-done):not(.envo-anim-play) {
	opacity: 0;
}

/* The script did not start (an error, blocked): show everything. */
html.envo-anim-js:not(.envo-anim-on) .envo-anim {
	animation: envo-anim-show 0s 3s forwards;
}

.envo-anim-play {
	animation-delay: var(--envo-anim-delay);
	animation-duration: var(--envo-anim-duration);
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	opacity: 1;
}

.envo-anim-play.envo-anim--fadeIn { animation-name: envo-fadeIn; }
.envo-anim-play.envo-anim--fadeInUp { animation-name: envo-fadeInUp; }
.envo-anim-play.envo-anim--fadeInDown { animation-name: envo-fadeInDown; }
.envo-anim-play.envo-anim--fadeInLeft { animation-name: envo-fadeInLeft; }
.envo-anim-play.envo-anim--fadeInRight { animation-name: envo-fadeInRight; }
.envo-anim-play.envo-anim--zoomIn { animation-name: envo-zoomIn; }
.envo-anim-play.envo-anim--zoomInUp { animation-name: envo-zoomInUp; }
.envo-anim-play.envo-anim--zoomInDown { animation-name: envo-zoomInDown; }
.envo-anim-play.envo-anim--zoomInLeft { animation-name: envo-zoomInLeft; }
.envo-anim-play.envo-anim--zoomInRight { animation-name: envo-zoomInRight; }
.envo-anim-play.envo-anim--zoomOut { animation-name: envo-zoomOut; }
.envo-anim-play.envo-anim--slideInUp { animation-name: envo-slideInUp; }
.envo-anim-play.envo-anim--slideInDown { animation-name: envo-slideInDown; }
.envo-anim-play.envo-anim--slideInLeft { animation-name: envo-slideInLeft; }
.envo-anim-play.envo-anim--slideInRight { animation-name: envo-slideInRight; }
.envo-anim-play.envo-anim--bounceIn { animation-name: envo-bounceIn; }
.envo-anim-play.envo-anim--bounceInUp { animation-name: envo-bounceInUp; }
.envo-anim-play.envo-anim--bounceInDown { animation-name: envo-bounceInDown; }
.envo-anim-play.envo-anim--bounceInLeft { animation-name: envo-bounceInLeft; }
.envo-anim-play.envo-anim--bounceInRight { animation-name: envo-bounceInRight; }
.envo-anim-play.envo-anim--flipInX { animation-name: envo-flipInX; }
.envo-anim-play.envo-anim--flipInY { animation-name: envo-flipInY; }
.envo-anim-play.envo-anim--rotateIn { animation-name: envo-rotateIn; }
.envo-anim-play.envo-anim--rotateInDownLeft { animation-name: envo-rotateInDownLeft; }
.envo-anim-play.envo-anim--rotateInDownRight { animation-name: envo-rotateInDownRight; }
.envo-anim-play.envo-anim--rotateInUpLeft { animation-name: envo-rotateInUpLeft; }
.envo-anim-play.envo-anim--rotateInUpRight { animation-name: envo-rotateInUpRight; }
.envo-anim-play.envo-anim--lightSpeedInLeft { animation-name: envo-lightSpeedInLeft; }
.envo-anim-play.envo-anim--lightSpeedInRight { animation-name: envo-lightSpeedInRight; }
.envo-anim-play.envo-anim--rollIn { animation-name: envo-rollIn; }
.envo-anim-play.envo-anim--blurIn { animation-name: envo-blurIn; }
.envo-anim-play.envo-anim--bounce { animation-name: envo-bounce; transform-origin: center bottom; }
.envo-anim-play.envo-anim--flash { animation-name: envo-flash; }
.envo-anim-play.envo-anim--pulse { animation-name: envo-pulse; }
.envo-anim-play.envo-anim--rubberBand { animation-name: envo-rubberBand; }
.envo-anim-play.envo-anim--shake { animation-name: envo-shake; }
.envo-anim-play.envo-anim--headShake { animation-name: envo-headShake; animation-timing-function: ease-in-out; }
.envo-anim-play.envo-anim--swing { animation-name: envo-swing; transform-origin: top center; }
.envo-anim-play.envo-anim--tada { animation-name: envo-tada; }
.envo-anim-play.envo-anim--wobble { animation-name: envo-wobble; }
.envo-anim-play.envo-anim--jello { animation-name: envo-jello; transform-origin: center; }
.envo-anim-play.envo-anim--heartBeat { animation-name: envo-heartBeat; animation-timing-function: ease-in-out; }

/* Movements that should not ease out at the end. */
.envo-anim-play.envo-anim--bounceIn,
.envo-anim-play.envo-anim--bounceInUp,
.envo-anim-play.envo-anim--bounceInDown,
.envo-anim-play.envo-anim--bounceInLeft,
.envo-anim-play.envo-anim--bounceInRight {
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.envo-anim-play.envo-anim--flipInX,
.envo-anim-play.envo-anim--flipInY {
	backface-visibility: visible;
}

@keyframes envo-anim-show { to { opacity: 1; } }

@keyframes envo-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes envo-fadeInUp { from { opacity: 0; transform: translate3d(0, var(--envo-anim-d), 0); } to { opacity: 1; transform: none; } }
@keyframes envo-fadeInDown { from { opacity: 0; transform: translate3d(0, calc(var(--envo-anim-d) * -1), 0); } to { opacity: 1; transform: none; } }
@keyframes envo-fadeInLeft { from { opacity: 0; transform: translate3d(calc(var(--envo-anim-d) * -1.5), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes envo-fadeInRight { from { opacity: 0; transform: translate3d(calc(var(--envo-anim-d) * 1.5), 0, 0); } to { opacity: 1; transform: none; } }

@keyframes envo-zoomIn { from { opacity: 0; transform: scale3d(0.6, 0.6, 0.6); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes envo-zoomInUp { from { opacity: 0; transform: scale3d(0.6, 0.6, 0.6) translate3d(0, calc(var(--envo-anim-d) * 2), 0); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes envo-zoomInDown { from { opacity: 0; transform: scale3d(0.6, 0.6, 0.6) translate3d(0, calc(var(--envo-anim-d) * -2), 0); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes envo-zoomInLeft { from { opacity: 0; transform: scale3d(0.6, 0.6, 0.6) translate3d(calc(var(--envo-anim-d) * -3), 0, 0); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes envo-zoomInRight { from { opacity: 0; transform: scale3d(0.6, 0.6, 0.6) translate3d(calc(var(--envo-anim-d) * 3), 0, 0); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes envo-zoomOut { from { opacity: 0; transform: scale3d(1.25, 1.25, 1.25); } to { opacity: 1; transform: none; } }

@keyframes envo-slideInUp { from { transform: translate3d(0, calc(var(--envo-anim-d) * 3), 0); } to { transform: none; } }
@keyframes envo-slideInDown { from { transform: translate3d(0, calc(var(--envo-anim-d) * -3), 0); } to { transform: none; } }
@keyframes envo-slideInLeft { from { transform: translate3d(calc(var(--envo-anim-d) * -4), 0, 0); } to { transform: none; } }
@keyframes envo-slideInRight { from { transform: translate3d(calc(var(--envo-anim-d) * 4), 0, 0); } to { transform: none; } }

@keyframes envo-bounceIn {
	from { opacity: 0; transform: scale3d(0.4, 0.4, 0.4); }
	40% { opacity: 1; transform: scale3d(1.08, 1.08, 1.08); }
	65% { transform: scale3d(0.96, 0.96, 0.96); }
	85% { transform: scale3d(1.02, 1.02, 1.02); }
	to { opacity: 1; transform: none; }
}
@keyframes envo-bounceInUp {
	from { opacity: 0; transform: translate3d(0, calc(var(--envo-anim-d) * 3), 0); }
	55% { opacity: 1; transform: translate3d(0, -12px, 0); }
	75% { transform: translate3d(0, 6px, 0); }
	90% { transform: translate3d(0, -3px, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes envo-bounceInDown {
	from { opacity: 0; transform: translate3d(0, calc(var(--envo-anim-d) * -3), 0); }
	55% { opacity: 1; transform: translate3d(0, 12px, 0); }
	75% { transform: translate3d(0, -6px, 0); }
	90% { transform: translate3d(0, 3px, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes envo-bounceInLeft {
	from { opacity: 0; transform: translate3d(calc(var(--envo-anim-d) * -4), 0, 0); }
	55% { opacity: 1; transform: translate3d(14px, 0, 0); }
	75% { transform: translate3d(-7px, 0, 0); }
	90% { transform: translate3d(3px, 0, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes envo-bounceInRight {
	from { opacity: 0; transform: translate3d(calc(var(--envo-anim-d) * 4), 0, 0); }
	55% { opacity: 1; transform: translate3d(-14px, 0, 0); }
	75% { transform: translate3d(7px, 0, 0); }
	90% { transform: translate3d(-3px, 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes envo-flipInX {
	from { opacity: 0; transform: perspective(600px) rotate3d(1, 0, 0, 80deg); }
	45% { opacity: 1; transform: perspective(600px) rotate3d(1, 0, 0, -12deg); }
	75% { transform: perspective(600px) rotate3d(1, 0, 0, 6deg); }
	to { opacity: 1; transform: perspective(600px); }
}
@keyframes envo-flipInY {
	from { opacity: 0; transform: perspective(600px) rotate3d(0, 1, 0, 80deg); }
	45% { opacity: 1; transform: perspective(600px) rotate3d(0, 1, 0, -12deg); }
	75% { transform: perspective(600px) rotate3d(0, 1, 0, 6deg); }
	to { opacity: 1; transform: perspective(600px); }
}

@keyframes envo-rotateIn { from { opacity: 0; transform: rotate3d(0, 0, 1, -120deg); } to { opacity: 1; transform: none; } }
@keyframes envo-rotateInDownLeft { from { opacity: 0; transform-origin: left bottom; transform: rotate3d(0, 0, 1, -30deg); } to { opacity: 1; transform-origin: left bottom; transform: none; } }
@keyframes envo-rotateInDownRight { from { opacity: 0; transform-origin: right bottom; transform: rotate3d(0, 0, 1, 30deg); } to { opacity: 1; transform-origin: right bottom; transform: none; } }
@keyframes envo-rotateInUpLeft { from { opacity: 0; transform-origin: left bottom; transform: rotate3d(0, 0, 1, 30deg); } to { opacity: 1; transform-origin: left bottom; transform: none; } }
@keyframes envo-rotateInUpRight { from { opacity: 0; transform-origin: right bottom; transform: rotate3d(0, 0, 1, -30deg); } to { opacity: 1; transform-origin: right bottom; transform: none; } }

@keyframes envo-lightSpeedInLeft {
	from { opacity: 0; transform: translate3d(calc(var(--envo-anim-d) * -4), 0, 0) skewX(25deg); }
	60% { opacity: 1; transform: skewX(-12deg); }
	80% { transform: skewX(4deg); }
	to { opacity: 1; transform: none; }
}
@keyframes envo-lightSpeedInRight {
	from { opacity: 0; transform: translate3d(calc(var(--envo-anim-d) * 4), 0, 0) skewX(-25deg); }
	60% { opacity: 1; transform: skewX(12deg); }
	80% { transform: skewX(-4deg); }
	to { opacity: 1; transform: none; }
}
@keyframes envo-rollIn { from { opacity: 0; transform: translate3d(calc(var(--envo-anim-d) * -4), 0, 0) rotate3d(0, 0, 1, -90deg); } to { opacity: 1; transform: none; } }
@keyframes envo-blurIn { from { filter: blur(14px); opacity: 0; transform: scale3d(1.04, 1.04, 1.04); } to { filter: none; opacity: 1; transform: none; } }

/* Attention seekers: the block is visible, the movement draws the eye. */
@keyframes envo-bounce {
	0%, 20%, 53%, to { transform: none; }
	40%, 43% { transform: translate3d(0, -22px, 0) scaleY(1.06); }
	70% { transform: translate3d(0, -11px, 0) scaleY(1.03); }
	80% { transform: translate3d(0, 0, 0) scaleY(0.97); }
	90% { transform: translate3d(0, -3px, 0); }
}
@keyframes envo-flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0.15; } }
@keyframes envo-pulse { from, to { transform: none; } 50% { transform: scale3d(1.05, 1.05, 1.05); } }
@keyframes envo-rubberBand {
	from, to { transform: none; }
	30% { transform: scale3d(1.2, 0.8, 1); }
	40% { transform: scale3d(0.8, 1.2, 1); }
	50% { transform: scale3d(1.1, 0.9, 1); }
	65% { transform: scale3d(0.96, 1.04, 1); }
	75% { transform: scale3d(1.03, 0.97, 1); }
}
@keyframes envo-shake {
	from, to { transform: none; }
	10%, 30%, 50%, 70%, 90% { transform: translate3d(-8px, 0, 0); }
	20%, 40%, 60%, 80% { transform: translate3d(8px, 0, 0); }
}
@keyframes envo-headShake {
	0%, 50% { transform: none; }
	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); }
}
@keyframes envo-swing {
	20% { transform: rotate3d(0, 0, 1, 12deg); }
	40% { transform: rotate3d(0, 0, 1, -8deg); }
	60% { transform: rotate3d(0, 0, 1, 4deg); }
	80% { transform: rotate3d(0, 0, 1, -4deg); }
	to { transform: none; }
}
@keyframes envo-tada {
	from, to { transform: none; }
	10%, 20% { transform: scale3d(0.94, 0.94, 0.94) rotate3d(0, 0, 1, -3deg); }
	30%, 50%, 70%, 90% { transform: scale3d(1.06, 1.06, 1.06) rotate3d(0, 0, 1, 3deg); }
	40%, 60%, 80% { transform: scale3d(1.06, 1.06, 1.06) rotate3d(0, 0, 1, -3deg); }
}
@keyframes envo-wobble {
	from, to { transform: none; }
	15% { transform: translate3d(-12%, 0, 0) rotate3d(0, 0, 1, -5deg); }
	30% { transform: translate3d(9%, 0, 0) rotate3d(0, 0, 1, 3deg); }
	45% { transform: translate3d(-7%, 0, 0) rotate3d(0, 0, 1, -3deg); }
	60% { transform: translate3d(4%, 0, 0) rotate3d(0, 0, 1, 2deg); }
	75% { transform: translate3d(-2%, 0, 0) rotate3d(0, 0, 1, -1deg); }
}
@keyframes envo-jello {
	from, 11.1%, to { transform: none; }
	22.2% { transform: skewX(-10deg) skewY(-10deg); }
	33.3% { transform: skewX(5deg) skewY(5deg); }
	44.4% { transform: skewX(-2.5deg) skewY(-2.5deg); }
	55.5% { transform: skewX(1.2deg) skewY(1.2deg); }
	66.6% { transform: skewX(-0.6deg) skewY(-0.6deg); }
	77.7% { transform: skewX(0.3deg) skewY(0.3deg); }
}
@keyframes envo-heartBeat {
	0%, 28%, 70% { transform: none; }
	14%, 42% { transform: scale3d(1.12, 1.12, 1.12); }
}

/* The page scrolls sideways during movements from the side: keep it inside the screen. */
html.envo-anim-js body {
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	html.envo-anim-js .envo-anim,
	html.envo-anim-js .envo-anim-item {
		animation: none !important;
		opacity: 1 !important;
	}
}