html,
body {
	/*scroll-behavior: smooth;*/
}


.has-user-finished-tutorial .tutorial-arrow,
.has-user-finished-tutorial .tutorial {
	display: none;
}

body:not(.has-user-finished-tutorial) [data-step] {
	opacity: 0;
	transition: opacity 0.7s;
}

body:not(.has-user-finished-tutorial) [data-step].js--visible {
	opacity: 1;
	transition: all 0.3s ease 0s;
}

body.has-user-finished-tutorial .calc__form {}

.calc__buttons-wrap {
	z-index: 13;
}

[data-stepBtn] {
	transition: all 0.3s ease 0s;
}

[data-step] [data-stepBtn] {
	pointer-events: none;
}

[data-step].js--visible [data-stepBtn] {
	pointer-events: initial;
}

.tutorial__info.js--visible {
	z-index: 1;
}

.tutorial {
	position: absolute;
	inset: 0;
	z-index: 12;
	opacity: 0;
	pointer-events: none;
	/* transition: opacity 0.3s; */
	transition: all 0.4s ease 0s;
	height: 839px;
}

.calc.js--calc-visible [data-step] {
	opacity: 1;
	pointer-events: initial;
	transition: all 0.3s ease 0s;
}


.tutorial-arrow {
	z-index: 13;
	transition: opacity 0.3s;
	pointer-events: none !important;
}

.calc.js--calc-visible .tutorial-arrow[data-step] {
	opacity: 0;
}

.ranges.js--visible {
	z-index: 14;
}

.tutorial.js--visible-t {
	opacity: 1;
	pointer-events: initial;
}

.calc__range-wrapper {
	z-index: 13;
}

.calc__buttons-wrap.js--visible .tutorial-arrow-1.tutorial-arrow {
	opacity: 1;
}



@media screen and (max-width: 991px) {
	.tutorial-arrow-3 {
		left: 21%;
		bottom: 13.188rem;
		transform: rotateZ(-29deg);
	}

	.tutorial-calc .tutorial__info {
		top: 58%;
	}
}


@media screen and (max-width: 767px) {
	.tutorial__info {
		position: absolute;
		top: 47%;
	}

	.tutorial__info[data-step="2"] {
		top: 43%;
	}

	.tutorial__info[data-step="3"] {
		top: 51%;
	}

	.tutorial-arrow-3 {
		position: absolute;
		left: -8%;
		bottom: 22.188rem;
		opacity: 0;
		transform: rotateZ(-45deg);
		height: 144px;
	}

}

@media screen and (max-width:479px) {
	.tutorial-calc .tutorial__info {
		top: 53%;
	}
}