@charset "UTF-8";
@media only screen and (max-width: 767px) {
	:root {
		font-size: 4.102564vw;
	}

	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
	.logo {
		position: absolute;
		top: 20px;
		left: 20px;
		width: 120px;
		height: 120px;
		z-index: 10;
	}
	.open-menu .logo {
		color: var(--blue);
		opacity: 1;
		pointer-events: all;
	}
	.open-menu .logo svg {
		fill: var(--white);
	}
	.toggle-menu {
		position: fixed;
		z-index: 101;
		top: 20px;
		right: 20px;
		cursor: pointer;
		user-select: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		width: 40px;
		height: 40px;
		background: url("../img/menu-link.svg") no-repeat 50% 50%;
		background-size: contain;
	}
	.toggle-menu > * {
		flex: 0 0 auto;
		width: 16px;
		height: 2px;
		border-radius: 1px;
		transition-property: transform, opacity;
		transition-duration: 0.25s;
		transition-timing-function: ease;
		transform: translate3d(0, 0, 0);
		transition-delay: 0.25s;
	}
	.toggle-menu > *:before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 1px;
		background: var(--blue);
		transition-property: transform;
		transition-duration: 0.25s;
		transition-timing-function: ease;
	}
	.open-menu .toggle-menu > * {
		transition-delay: 0s;
	}
	.open-menu .toggle-menu > *:nth-child(2) {
		opacity: 0;
	}
	.open-menu .toggle-menu > *:nth-child(1) {
		transform: translate3d(0, 5px, 0);
	}
	.open-menu .toggle-menu > *:nth-child(3) {
		transform: translate3d(0, -5px, 0);
	}
	.open-menu .toggle-menu > *:nth-child(1):before,
	.open-menu .toggle-menu > *:nth-child(3):before {
		transition-delay: 0.34ßs;
	}
	.open-menu .toggle-menu > *:nth-child(1):before {
		transform: rotate(45deg);
	}
	.open-menu .toggle-menu > *:nth-child(3):before {
		transform: rotate(-45deg);
	}
	.menu {
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 214px 20px 30px 20px;
	}
	.menu .logo {
		opacity: 0;
		pointer-events: none;
		transition: all 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
		/* transform: translate3d(0, -20px, 0); */
	}
	.show-logo .menu .logo {
		transform: translate3d(0, 0, 0) !important;
	}
	.open-menu .menu {
		pointer-events: all;
	}
	.open-menu .menu .logo {
		opacity: 1;
		pointer-events: all;
		transform: translate3d(0, 0, 0);
	}
	.menu .bg {
		background: var(--dark);
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		transition: all 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, -100%, 0) skewY(-10deg);
		margin-top: -80px;
		margin-bottom: -230px;
		box-shadow:
			inset 0 -40px 0 var(--dark),
			inset 0 -80px 0 var(--grey);
	}
	.open-menu .menu .bg {
		transform: translate3d(0, 0, 0) skewY(-10deg);
	}
	.menu .links {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.menu .link {
		overflow: hidden;
		flex: 0 0 auto;
		max-width: 100%;
		color: var(--white);
		font-weight: 500;
		font-size: 32px;
		line-height: 50px;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		text-decoration: none;
		position: relative;
	}
	.menu .link .text {
		display: block;
		transition: all 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
		transform: translate3d(0, 100%, 0);
	}
	.open-menu .link .text {
		transform: translate3d(0, 0, 0);
	}
	.open-menu .link:nth-child(1) > .text {
		transition-delay: 0.3s;
	}
	.open-menu .link:nth-child(2) > .text {
		transition-delay: 0.4s;
	}
	.open-menu .link:nth-child(3) > .text {
		transition-delay: 0.5s;
	}
	.open-menu .link:nth-child(4) > .text {
		transition-delay: 0.6s;
	}
	.menu .email {
		flex: 0 0 auto;
		max-width: 100%;
		margin-top: auto;
		line-height: 1.4;
		color: var(--white);
		font-weight: normal;
	}
	.menu .email a {
		color: inherit;
		text-decoration: none;
	}
	.menu .email .small {
		font-size: 18px;
		opacity: 0.5;
	}
	.menu .email .big {
		font-size: 18px;
		margin-top: 7px;
	}
	.menu .email > * {
		overflow: hidden;
	}
	.menu .email > * > * {
		display: inline-block;
		vertical-align: top;
		transition: all 0.9s cubic-bezier(0.075, 0.82, 0.165, 1);
		max-width: 100%;
		transform: translate3d(0, 100%, 0);
	}
	.open-menu .menu .email > * > * {
		transform: translate3d(0, 0, 0);
	}
	.open-menu .menu .email > *:nth-child(1) > * {
		transition-delay: 0.4s;
	}
	.open-menu .menu .email > *:nth-child(2) > * {
		transition-delay: 0.5s;
	}
	.top-block {
		font-size: 36px;
		padding-bottom: 20px;
	}
	.about {
		padding-top: 100px;
		padding-bottom: calc(50vh - 130px);
		padding-bottom: calc(50lvh - 130px);
	}
	.shadow-text {
		font-size: 27px;
	}
	.about .years {
		padding-top: 10rem;
		padding-bottom: 10rem;
		font-size: 20px;
	}
	.about .years img {
		transform: translate3d(0, calc(-20% * var(--percent1) + 5% * var(--percent2)), 0)
			scale(calc(1.3 - 0.3 * var(--percent1)));
	}
	.about:after {
		background-image: url("../img/figure-small.svg");
		width: 371px;
		height: 371px;
		margin: -175px;
	}
	.equipment {
		padding-top: 100px;
		display: flex;
		flex-direction: column-reverse;
	}
	.equipment:before {
		content: "";
		position: absolute;
		top: 50%;
		left: -519px;
		width: 721px;
		height: 721px;
		background: url("../img/figure-big.svg") no-repeat 50% 50%;
		background-size: contain;
		margin: -360px 0;
		animation: slow-rotating 40s linear infinite;
	}
	.equipment .bg {
		flex: 0 0 auto;
		width: 100%;
		position: relative;
		background: url("../video/video-poster-lazer.html") no-repeat 50% 50%;
		background-size: cover;
	}
	.equipment .bg:before {
		content: "";
		display: block;
		padding-top: 100%;
	}
	.equipment .bg:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100px;
		background: linear-gradient(to bottom, var(--grey) 0%, var(--grey0) 100%);
	}
	.equipment .bg video,
	.equipment .bg img {
		width: 140%;
		height: 100%;
	}
	.equipment .big {
		font-weight: normal;
		font-size: 34px;
		margin-bottom: 80px;
	}
	.equipment ul {
		gap: 80px;
		font-size: 22px;
	}
	.service {
		padding-top: 120px;
		padding-bottom: 110px;
	}
	.service:after {
		content: "";
		position: absolute;
		animation: slow-rotating 40s linear infinite;
		pointer-events: none;
		background: url("../img/figure-small.svg") no-repeat 50% 50%;
		background-size: contain;
		width: 371px;
		height: 371px;
		top: -86px;
		right: -175px;
	}
	.service .dot-title,
	.service .big {
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
	.service .big {
		font-size: 34px;
		margin-bottom: 80px;
	}
	.service ul {
		flex-direction: column;
		align-items: center;
		margin: 0 -20px;
	}
	.service li {
		font-size: 17.4px;
	}
	.contacts .bg2 {
		position: sticky;
		top: 0;
		height: 0;
		pointer-events: none;
	}
	.contacts .bg2 div {
		width: 100%;
		height: 100vh;
		height: 100lvh;
		overflow: hidden;
		position: absolute;
		top: -150px;
		left: 0;
	}
	.contacts .bg2 div:before {
		content: "";
		position: absolute;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
		animation: slow-rotating 40s linear infinite;
	}
	.contacts .bg2 div:before {
		width: 371px;
		height: 371px;
		background-image: url("../img/figure-small.svg");
		top: 50px;
		right: -170px;
	}
	.contacts {
		padding-top: 120px;
		padding-bottom: 28px;
	}
	.contacts .big {
		font-size: 30px;
		margin-bottom: 90px;
	}
	.contacts .image {
		height: 300px;
		position: relative;
		top: -150px;
		animation: bouge-2 3s ease infinite alternate;
	}
	.contacts .image img {
		width: calc(100% + 40px);
		max-width: 448px;
		height: 393px;
		position: absolute;
		top: 55%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		object-fit: cover;
		object-position: left center;
		/* width: calc(100% + 200px);
		left: 50%;
		/* height: 600px; */
		object-fit: contain;
		object-position: left center;
	}
	.contacts .image {
		transform: translate3d(0, calc(-150px * var(--percent2)), 0);
	}
	.contacts .text {
		transform: translate3d(0, calc(-240px * var(--percent2)), 0);
		max-width: 14.533333em;
		margin-top: 50px;
	}
	.contacts .bottom {
		margin-top: -80px;
	}
	.loader svg.loader-svg {
		width: 35px !important;
		height: 35px !important;
		bottom: 1.5rem !important;
		right: 1.5rem !important;
	}
	.logo-svg {
		top: 20px;
		left: 20px !important;
		position: absolute;
	}
}