@charset "UTF-8";
.numeric {
		background: var(--white);
		color: var(--black);
		overflow: hidden;
		position: relative;
		padding-top: 0;
		padding-bottom: 0;
		--vert-padding: 80px;
}
.numeric .container {
		position: relative;
}
.numeric .h2 {
		position: absolute;
		transform: scale(0);
		opacity: 0;
}
.numeric-slider {
		width: auto !important;
		margin-left: calc(var(--side-padding) * -1) !important;
		margin-right: calc(var(--side-padding) * -1) !important;
}
.numeric-slider .swiper-wrapper {
		min-height: 100vh;
		min-height: 100svh;
}
.numeric-slider .swiper-slide {
		width: 100%;
		padding: 198px var(--side-padding) calc(var(--vert-padding) * 1.5 + var(--swiper-arrows)) var(--side-padding);
		height: auto !important;
}
.numeric .swiper-arrows {
		position: absolute;
		bottom: var(--vert-padding);
		left: var(--side-padding);
}
.numeric .h3 {
		font-weight: 300;
		font-size: 36px;
		line-height: 1.1;
		margin-bottom: 20px;
}
.numeric .text {
		font-size: 20px;
		color: var(--blackgrey);
}
.numeric .image {
		position: relative;
		flex: 0 0 auto;
		margin: calc(var(--side-padding) * -1);
		overflow: hidden;
		backface-visibility: hidden;
}
.numeric .image:after {
		content: '';
		display: block;
		padding-top: 155.44%;
}
.numeric .image img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 33% 50%;
}
.numeric .image video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
}
.numeric .image img {
		top: 0;
		left: 0;
		backface-visibility: hidden;
		will-change: transform;
		transition: transform 1s var(--move-timing);
		transform: scale(calc(1 + 0.1 * var(--percent)));
}
.numeric .counter {
		position: absolute;
		top: var(--vert-padding);
		left: var(--side-padding);
		bottom: auto !important;
		width: auto !important;
		white-space: nowrap;
}
@media only screen and (min-width: 700px) {
		.numeric .h2 {
				display: block;
				position: absolute;
				bottom: 80px;
				left: var(--side-padding);
				width: 182px;
				margin: 0;
				transform: none;
				opacity: 1;
				font-weight: normal;
				font-size: 14px;
				line-height: 1.4;
		}
		.numeric .container {
				padding-left: calc(var(--side-padding) + 182px);
				padding-right: 0;
		}
		.numeric .container:before {
				content: '';
				position: absolute;
				top: calc(var(--vert-padding) * -1);
				bottom: 0;
				left: calc(var(--side-padding) + 182px);
				width: 1px;
				background: var(--body);
		}
		.numeric .h3 {
				line-height: 1.2;
		}
		.numeric-slider {
				margin: 0 !important;
		}
}
@media only screen and (min-width: 550px) and (max-width: 1023px) {
		.numeric .image {
				display: none;
		}
}
@media only screen and (max-width: 1023px) {
		.numeric .image.hide-on-mobile {
				display: none;
		}
}
@media only screen and (min-width: 1024px) {
		.numeric .h3 {
				font-size: 2.75rem;
		}
		.numeric .swiper-arrows {
				bottom: 65px;
		}
		.numeric .image {
				position: absolute;
				top: calc(var(--vert-padding) * -1);
				max-height: none;
				bottom: 0;
				right: 0;
				left: calc(var(--side-padding) + 782px);
				margin: 0;
		}
		.numeric-slider {
				width: 600px !important;
		}
		.numeric-slider .swiper-slide {
				padding-top: 263px;
		}
}
@media only screen and (min-width: 1440px) {
		.numeric .image {
				right: calc((100vw - 1440px) / -2);
		}
}
@media only screen and (max-height: 899px) {
		.numeric .h3 {
				font-size: 32px;
		}
}
@media only screen and (min-width: 1024px) and (max-height: 820px) {
		.numeric-slider .swiper-slide {
				padding-top: 160px;
		}
}