:root {
	--bg: #070708;
	--panel: rgba(15, 15, 18, 0.68);
	--text: #f4f1ff;
	--muted: rgba(244, 241, 255, 0.68);
	--accent: #7c4dff;
	--accent-2: #37d7ff;
	--shadow: 0 40px 90px rgba(0, 0, 0, 0.52);
	--active-width: 563px;
	--active-height: 581px;
	--side-width: 303px;
	--side-height: 353px;
	--side-scale-x: calc(303 / 563);
	--side-scale-y: calc(353 / 581);
	--card-gap: 15px;
	--card-offset: calc((var(--active-width) / 2) + ((var(--active-width) * var(--side-scale-x)) / 2) + var(--card-gap));
	--nav-size: 54px;
	--nav-clearance: 12px;
	--switch-duration: 560ms;
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


.specproekt_box .hero-slider {
	position: relative;
	min-height: 50vh;
	overflow: hidden;
	display: grid;
	place-items: center;
	padding: 0 0 20px;
}

.specproekt_box .hero-slider__shell {
	position: relative;
	width: min(100%, 1520px);
	z-index: 1;
}

.specproekt_box .hero-slider__stage {
	position: relative;
	height: min(80vh, 840px);
	min-height: 785px;
	border-radius: 0;
	isolation: isolate;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	cursor: -webkit-grab;
	cursor: grab;
}

.specproekt_box .hero-slider__stage.is-dragging {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

.specproekt_box .hero-slider__stage.is-dragging .slide {
	-webkit-transition: none;
	transition: none;
}

.specproekt_box .hero-slider__glow {
	position: absolute;
	inset: auto;
	border-radius: 0;
	pointer-events: none;
	opacity: 0.75;
}

.specproekt_box .hero-slider__glow--one {
	width: 360px;
	height: 360px;
	left: -120px;
	bottom: 10%;
	background: radial-gradient(circle, rgba(124, 77, 255, 0.55), transparent 70%);
}

.specproekt_box .hero-slider__glow--two {
	width: 300px;
	height: 300px;
	right: -80px;
	top: 8%;
	background: radial-gradient(circle, rgba(55, 215, 255, 0.34), transparent 72%);
}

.specproekt_box .slide {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--active-width);
	height: var(--active-height);
	-webkit-transform:
		translate(-50%, -50%) translateX(calc(var(--x, 0px) + var(--drag-offset, 0px))) scale(var(--scale-x, 1), var(--scale-y, 1));
	transform:
		translate(-50%, -50%) translateX(calc(var(--x, 0px) + var(--drag-offset, 0px))) scale(var(--scale-x, 1), var(--scale-y, 1));
	opacity: var(--opacity, 0);
	-webkit-transition:
		opacity calc(var(--switch-duration) * 0.72) ease,
		-webkit-transform var(--switch-duration) cubic-bezier(0.22, 1, 0.36, 1),
		-webkit-filter calc(var(--switch-duration) * 0.72) ease;
	transition:
		opacity calc(var(--switch-duration) * 0.72) ease,
		-webkit-transform var(--switch-duration) cubic-bezier(0.22, 1, 0.36, 1),
		-webkit-filter calc(var(--switch-duration) * 0.72) ease;
	transition:
		transform var(--switch-duration) cubic-bezier(0.22, 1, 0.36, 1),
		opacity calc(var(--switch-duration) * 0.72) ease,
		filter calc(var(--switch-duration) * 0.72) ease;
	transition:
		transform var(--switch-duration) cubic-bezier(0.22, 1, 0.36, 1),
		opacity calc(var(--switch-duration) * 0.72) ease,
		filter calc(var(--switch-duration) * 0.72) ease,
		-webkit-transform var(--switch-duration) cubic-bezier(0.22, 1, 0.36, 1),
		-webkit-filter calc(var(--switch-duration) * 0.72) ease;
	z-index: var(--z, 1);
	will-change: transform, opacity;
	pointer-events: none;
}

.specproekt_box .slide.is-active {
	--opacity: 1;
	--z: 3;
	--scale-x: 1;
	--scale-y: 1;
	--frame-blur: 0px;
	--frame-scale: 1;

	.slide__text_box {
		opacity: 1;
	}

	.slide__frame img {
		-o-object-fit: scale-down;
		object-fit: scale-down;
	}

}

.specproekt_box .slide.is-prev {
	--opacity: 0.54;
	--z: 2;
	--scale-x: var(--side-scale-x);
	--scale-y: var(--side-scale-y);
	--frame-blur: 0px;
	--frame-scale: 1;
}

.specproekt_box .slide.is-next {
	--opacity: 0.54;
	--z: 2;
	--scale-x: var(--side-scale-x);
	--scale-y: var(--side-scale-y);
	--frame-blur: 0px;
	--frame-scale: 1;
}

.specproekt_box .slide__frame {
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-transform: translateZ(0) scale(var(--frame-scale, 1));
	transform: translateZ(0) scale(var(--frame-scale, 1));
	margin: 0 0 35px;
	-webkit-transition:
		opacity calc(var(--switch-duration) * 0.72) ease,
		-webkit-transform var(--switch-duration) cubic-bezier(0.22, 1, 0.36, 1),
		-webkit-filter calc(var(--switch-duration) * 0.72) ease;
	transition:
		opacity calc(var(--switch-duration) * 0.72) ease,
		-webkit-transform var(--switch-duration) cubic-bezier(0.22, 1, 0.36, 1),
		-webkit-filter calc(var(--switch-duration) * 0.72) ease;
	transition:
		transform var(--switch-duration) cubic-bezier(0.22, 1, 0.36, 1),
		filter calc(var(--switch-duration) * 0.72) ease,
		opacity calc(var(--switch-duration) * 0.72) ease;
	transition:
		transform var(--switch-duration) cubic-bezier(0.22, 1, 0.36, 1),
		filter calc(var(--switch-duration) * 0.72) ease,
		opacity calc(var(--switch-duration) * 0.72) ease,
		-webkit-transform var(--switch-duration) cubic-bezier(0.22, 1, 0.36, 1),
		-webkit-filter calc(var(--switch-duration) * 0.72) ease;
}

.specproekt_box .slide__frame img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.specproekt_box .slide__text_box {
	font-weight: 400;
	font-size: 20px;
	line-height: 120%;
	text-align: center;
	color: #000;
	display: block;
	opacity: 0;
	text-wrap: balance;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}


.specproekt_box .nav {
	position: absolute;
	bottom: -15px;
	top: auto;
	place-items: center;
	cursor: pointer;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 4;
	background: none;
	border: none;
	width: 76px;
	height: 43px;
}

.specproekt_box .nav:hover {
	-webkit-transform: translateY(-50%) scale(1.04);
	transform: translateY(-50%) scale(1.04);
	border-color: rgba(124, 77, 255, 0.45);
}

.specproekt_box .nav:active {
	-webkit-transform: translateY(-50%) scale(0.98);
	transform: translateY(-50%) scale(0.98);
}

.specproekt_box .nav span {
	font-size: 42px;
	line-height: 1;
	margin-top: -2px;
}

.specproekt_box .nav--prev {
	left: max(4px, calc(65% - (var(--active-width) / 2) - ((var(--active-width) * var(--side-scale-x))) - var(--card-gap) - (var(--nav-size) / 2) - var(--nav-clearance)));
}

.specproekt_box .nav--next {
	right: max(4px, calc(65% - (var(--active-width) / 2) - ((var(--active-width) * var(--side-scale-x))) - var(--card-gap) - (var(--nav-size) / 2) - var(--nav-clearance)));
}

.specproekt_box .hero-slider__footer {
	display: none;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
	padding-inline: 8px;
}

.specproekt_box .counter {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.06);
	color: var(--muted);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 12px;
}

.specproekt_box .counter__current,
.specproekt_box .counter__total {
	color: var(--text);
}

.specproekt_box .dots {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
}

.specproekt_box .dot {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.26);
	cursor: pointer;
	-webkit-transition:
		background 200ms ease,
		width 200ms ease,
		-webkit-transform 200ms ease;
	transition:
		background 200ms ease,
		width 200ms ease,
		-webkit-transform 200ms ease;
	transition:
		transform 200ms ease,
		background 200ms ease,
		width 200ms ease;
	transition:
		transform 200ms ease,
		background 200ms ease,
		width 200ms ease,
		-webkit-transform 200ms ease;
}

.specproekt_box .dot.is-active {
	width: 36px;
	background: -webkit-gradient(linear, left top, right top, from(var(--accent)), to(var(--accent-2)));
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.specproekt_box .dot:hover {
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}

@media (max-width: 1100px) {
	:root {
		--active-width: min(92vw, 563px);
		--active-height: calc(var(--active-width) * 581 / 563);
	}

	.specproekt_box .hero-slider__stage {
		height: auto;
		min-height: calc((var(--active-height)) + 80px);
		padding-bottom: 76px;
	}

	.specproekt_box .nav--prev {
		left: calc(50% - (var(--active-width) / 2) - var(--nav-size) - 12px);
		right: auto;
	}

	.specproekt_box .nav--next {
		right: calc(50% - (var(--active-width) / 2) - var(--nav-size) - 12px);
	}

	.specproekt_box .slide.is-prev,
	.specproekt_box .slide.is-next {
		opacity: 0;
		pointer-events: none;
	}

	.specproekt_box .slide__frame {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.specproekt_box .slide__frame img {
		width: 96% !important;
		height: 96% !important;
	}

	.specproekt_box .nav--next,
	.specproekt_box .nav--prev {
		top: auto !important;
		bottom: -25px !important;
		width: 40px !important;
	}

	.specproekt_box .slide__text_box {
		max-width: 80%;
		margin: 0 auto;
	}


}

@media (max-width: 760px) {
	.specproekt_box .hero-slider {
		padding: 16px;
		-ms-touch-action: auto;
		touch-action: auto;
		overscroll-behavior: auto;
		overscroll-behavior: contain;
	}

	.specproekt_box .hero-slider__stage {
		height: calc(var(--active-height) + 104px);
		min-height: calc(var(--active-height) + 104px);
		padding-top: 16px;
		padding-bottom: 84px;
		-ms-touch-action: pan-y;
		touch-action: pan-y;
		overscroll-behavior: auto;
		overscroll-behavior: contain;
	}

	.specproekt_box .slide {
		left: 50%;
		top: 50%;
		width: var(--active-width);
		height: var(--active-height);
		-webkit-transform:
			translate(-50%, -50%) translateX(calc(var(--x, 0px) + var(--drag-offset, 0px))) scale(var(--scale-x, 1), var(--scale-y, 1));
		transform:
			translate(-50%, -50%) translateX(calc(var(--x, 0px) + var(--drag-offset, 0px))) scale(var(--scale-x, 1), var(--scale-y, 1));
		-webkit-transition:
			opacity 380ms ease,
			-webkit-transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
		transition:
			opacity 380ms ease,
			-webkit-transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
		transition:
			transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 380ms ease,
			filter 320ms ease;
		transition:
			transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 380ms ease,
			filter 320ms ease,
			-webkit-transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
	}

	.specproekt_box .slide.is-active {
		opacity: 1;
		--scale-x: 1;
		--scale-y: 1;
		--frame-scale: 1;
	}

	.specproekt_box .slide.is-prev,
	.specproekt_box .slide.is-next {
		display: block;
		opacity: 0.58;
		pointer-events: none;
		--scale-x: calc(var(--side-scale-x) * 0.98);
		--scale-y: calc(var(--side-scale-y) * 0.98);
		--frame-scale: 1;
	}

	.specproekt_box .hero-slider.is-mobile-safari .slide {
		-webkit-transform:
			translate(-50%, -50%) translateX(calc(var(--x, 0px) + var(--drag-offset, 0px))) scale(var(--scale-x, 1), var(--scale-y, 1));
		transform:
			translate(-50%, -50%) translateX(calc(var(--x, 0px) + var(--drag-offset, 0px))) scale(var(--scale-x, 1), var(--scale-y, 1));
		-webkit-transition:
			opacity 780ms ease,
			-webkit-transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
		transition:
			opacity 780ms ease,
			-webkit-transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
		transition:
			transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 780ms ease,
			filter 320ms ease;
		transition:
			transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 780ms ease,
			filter 320ms ease,
			-webkit-transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
	}

	.specproekt_box .hero-slider.is-mobile-safari .slide.is-active {
		opacity: 1;
		--mobile-zoom: 1;
		--scale-x: 1;
		--scale-y: 1;
		--frame-scale: 1;
	}

	.specproekt_box .hero-slider.is-mobile-safari .slide.is-prev,
	.specproekt_box .hero-slider.is-mobile-safari .slide.is-next {
		display: block;
		opacity: 0;
		pointer-events: none;
		--mobile-zoom: 0.94;
		--scale-x: 1;
		--scale-y: 1;
		--frame-scale: var(--mobile-zoom, 1);
	}

	.specproekt_box .hero-slider.is-mobile-safari .slide__frame {
		-webkit-transform: translateZ(0) scale(var(--frame-scale, 1));
		transform: translateZ(0) scale(var(--frame-scale, 1));
		-webkit-transition:
			opacity 780ms ease,
			-webkit-transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
		transition:
			opacity 780ms ease,
			-webkit-transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
		transition:
			transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
			filter 320ms ease,
			opacity 780ms ease;
		transition:
			transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
			filter 320ms ease,
			opacity 780ms ease,
			-webkit-transform 860ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
	}

	.specproekt_box .hero-slider:not(.is-mobile-safari) .slide__frame {
		-webkit-transform: translateZ(0) scale(var(--frame-scale, 1));
		transform: translateZ(0) scale(var(--frame-scale, 1));
		-webkit-transition:
			opacity 380ms ease,
			-webkit-transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
		transition:
			opacity 380ms ease,
			-webkit-transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
		transition:
			transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
			filter 320ms ease,
			opacity 380ms ease;
		transition:
			transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
			filter 320ms ease,
			opacity 380ms ease,
			-webkit-transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
			-webkit-filter 320ms ease;
	}

	.specproekt_box .slide__frame img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.specproekt_box .nav {
		top: calc(100% + 80px);
		bottom: 16px;
		-webkit-transform: none;
		transform: none;
	}

	.specproekt_box .nav:hover,
	.specproekt_box .nav:active {
		-webkit-transform: none;
		transform: none;
	}

	.specproekt_box .nav--prev {
		left: 5vw;
	}

	.specproekt_box .nav--next {
		left: auto;
		right: 5vw;
	}

	.specproekt_box .hero-slider__footer {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
		margin-top: 18px;
		padding-inline: 0;
	}

	.specproekt_box .dots {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.specproekt_box .counter {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.specproekt_box *,
	.specproekt_box *::before,
	.specproekt_box *::after {
		scroll-behavior: auto !important;
		-webkit-animation-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		-webkit-animation-iteration-count: 1 !important;
		animation-iteration-count: 1 !important;
		-webkit-transition-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}
