@charset "UTF-8";
.hero {
		background: var(--black);
		font-size: 18px;
		color: var(--white);
		min-height: 100vh;
		min-height: 100svh;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: calc(var(--header-height) + 40px) 0 40px 0;
}
.hero video {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		border: 0;
		outline: none;
		box-shadow: none;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
}
.hero .bg {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		overflow: hidden;
}
.hero .bg:after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(to bottom, #000 30px, rgba(0, 0, 0, 0) 84px, rgba(0, 0, 0, 0) 67%, #000 calc(100% - 100px), #000 100%);
}
.hero .bg img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		backface-visibility: hidden;
		will-change: transform;
		transition: transform 1s var(--move-timing);
		transform: scale(calc(1 + 0.2 * var(--percent)));
}
@media only screen and (orientation: portrait) {
		.hero .bg.contain img, .hero .bg.contain video {
				object-fit: contain;
				object-position: 50% 20%;
		}
}
.hero.hero-strategies .bg img {
		height: 78%;
}
@media only screen and (orientation: portrait) {
		.hero.hero-strategies .bg img {
				height: calc(100% - 273px);
		}
}
.hero a {
		color: var(--white);
}
.hero .container {
		display: flex;
		flex-direction: column;
		position: relative;
}
.hero .container > * {
		flex: 0 0 auto;
		width: 100%;
}
.hero .h1, .hero .arrow {
		font-size: 32px;
}
.hero .h1 {
		flex: 0 0 auto;
		width: 100%;
		position: relative;
}
.hero .text {
		max-width: 27.2em;
}
.index-hero .text {
		max-width: 25.15em;
}
.hero .arrow {
		display: none;
}
@media only screen and (min-width: 800px) {
		.hero .container {
				flex-direction: row;
				align-items: flex-end;
				justify-content: space-between;
		}
		.hero .h1 {
				width: 10.89em;
				max-width: none;
				margin: 0 40px 0 0;
		}
		.index-hero .h1 {
				width: 8em;
				margin: 0;
		}
		.hero .arrow {
				display: block;
				flex: 0 0 auto;
				margin: 0 auto;
				background: url("../img/arrow-right-white.svg") no-repeat 50% 50%;
				background-size: contain;
				width: 0.575em;
				height: 0.575em;
				margin-bottom: 0.2625em;
				left: -0.45em;
				position: relative;
		}
		.hero .text {
				margin: 4px 0;
				flex: 1 1 auto;
				width: auto;
		}
}
@media only screen and (max-width: 1023px) {
		.hero .h1, .hero .arrow {
				font-size: 32px;
		}
		.index-hero .h1, .index-hero .arrow {
				font-size: 46px;
		}
}
@media only screen and (min-width: 1024px) {
		.hero {
				padding-bottom: 50px;
		}
		.hero .h1, .hero .arrow {
				font-size: 4rem;
		}
		.hero .text {
				margin: 0.5rem 0;
				font-size: 20px;
		}
		.index-hero .h1, .index-hero .swiper-arrow {
				font-size: 5rem;
		}
		.index-hero .text {
				margin: 0.75rem 0;
		}
}
/*animations*/
.hero .container > * {
		backface-visibility: hidden;
		transition-property: transform, opacity;
		transition-duration: 1.5s;
		transition-timing-function: var(--move-timing);
		transform: translate3d(0, 0, 0);
}
.hero:not(.visible) .container > * {
		opacity: 0 !important;
		pointer-events: none !important;
		transform: translate3d(0, var(--distance), 0);
}
.hero .arrow, .hero .text {
		transition-delay: 0.25s;
}
.hero .arrow ~ .text {
		transition-delay: 0.5s;
}