/* fix for animation on home page due to overflow being hidden on mobile in flatsome.css */
body.home {
	overflow-x: visible !important;
}

.e5_hero_disable_overflow .section-content {
	overflow: visible;
}

.hero-animation-container {
	position: sticky;
	top: 0;
	height: 120vh;
}

.hero-animation-inner {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
}

.e5_hero_sticky_container {
	position: absolute;
	top: 0;
	z-index: 2;
	height: 120vh;
}

.e5_hero_sticky_inner {
	position: absolute;
	top: 0px;
	height: 110vh;
	width: 100vw;
}

.e5_hero_arrow_container {
	position: absolute;
	bottom: 20vh;
	left: 50%;
	transform: translateX(-50%) rotate(90deg);
}

.e5_hero_arrow {
	width: 65px;
	cursor: pointer;
	z-index: 1;
	transition: opacity 0.2s;
}

.hero-animation-container.active .e5_hero_arrow {
	opacity: 0;
}

.e5_hero_headline {
	max-width: 1540px;
	width: 100%;
	z-index: 2;
	position: absolute;
	bottom: 30vh;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.2s;
}

.hero-animation-container.active .e5_hero_headline {
	opacity: 1;
}

.e5_hero_headline h1 {
	color: #ffffff;
	text-shadow: 0px 0px 16px #00000029;
}

.hero-animation-container-spacer {
	display: block;
}

.csc {
	height: 91.7%;
	width: 100vw;
	position: static !important;
	top: 0 !important;
	bottom: calc(100vh * -0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	background-size: cover;
	background-position: center;
	-webkit-mask-image: linear-gradient(rgb(0, 0, 0) 90%, transparent);
	mask-image: linear-gradient(rgb(0, 0, 0) 90%, transparent);
	transform: translateY(-10vh);
	transition: transform 0.5s;
}

.csc-canvas {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
	object-fit: cover !important;
	width: 100% !important;
	height: 100%;
}

.e5_hero_arrow.animated {
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-name: e5-arrow-bounce;
}

@keyframes e5-arrow-bounce {
	0% {transform: scale(1,1) translateX(0);}
	10% {transform: scale(1.1,.9) translateX(0);}
	30% {transform: scale(.9,1.1) translateX(-25px);}
	50% {transform: scale(1,1) translateX(0);}
	57% {transform: scale(1,1) translateX(-3px);}
	64% {transform: scale(1,1) translateX(0);}
	100% {transform: scale(1,1) translateX(0);}
}



/* Responsive */
@media (max-aspect-ratio: 1/1) {
	.e5_hero_headline {
		opacity: 1;
	}

	.hero-animation-container.active .e5_hero_headline {
		opacity: 0;
	}
}

@media screen and (max-width: 1639px) {
	.e5_hero_headline {
		width: 80%;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1289px) {
	.e5_hero_headline h1 {
		font-size: 75px;
	}
}

@media screen and (max-width: 849px) {
	.e5_hero_headline h1 {
		font-size: 40px !important;
	}

	.e5_hero_arrow {
		display: none;
	}
}