.sp-menu-bg,
.custom-sp-menu {
	display: none;
}

@media (max-width: 991px) {
	.custom-sp-menu {
		display: block;
	}

	#vk-mobile-nav {
		display: none !important;
	}

	.sp-menu-bg {
		--menu-origin-x: calc(100vw - 48px);
		--menu-origin-y: 50px;
		--menu-bg-size: 110vmax;
		--menu-bg-scale: 1.45;
		--menu-bg-offset-y: 80px;

		display: block;
		position: fixed;
		inset: 0;
		z-index: 10000;
		pointer-events: none;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0.2s ease;
		background-color: #e7e7e7c2;
	}

	.sp-menu-bg__layer {
		position: absolute;
		top: var(--menu-origin-y);
		left: var(--menu-origin-x);
		width: var(--menu-bg-size);
		height: var(--menu-bg-size);
		max-width: unset;
		transform: translate(-50%, -50%) scale(0);
		transform-origin: center center;
		transition: transform 0.42s cubic-bezier(0.76, 0, 0.24, 1);
		will-change: transform;
	}

	.sp-menu-bg.is-active,
	.sp-menu-bg.is-closing {
		opacity: 1;
		visibility: visible;
	}

	.sp-menu-bg__img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: unset;
		object-fit: contain;
		transform: translateY(var(--menu-bg-offset-y));
		transform-origin: center center;
		will-change: transform;
	}

	.sp-menu-bg.is-expanding .sp-menu-bg__layer {
		transform: translate(-70%, -58%) scale(var(--menu-bg-scale));
	}
	.sp-menu-bg.is-closing .sp-menu-bg__layer {
		transform: translate(-50%, -50%) scale(0);
	}
	.sp-menu-bg.is-rotating .sp-menu-bg__layer--01 .sp-menu-bg__img {
		animation: spMenuRotate01 15s linear infinite;
	}
	.sp-menu-bg.is-rotating .sp-menu-bg__layer--02 .sp-menu-bg__img {
		animation: spMenuRotate02 40s linear infinite reverse;
	}

	.custom-sp-menu {
		position: fixed;
		inset: 0;
		z-index: 10005;
		display: block;
		padding: 92px 24px 40px;
		background: transparent;
		overflow-y: auto;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(12px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	}

	.custom-sp-menu.is-show {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.custom-sp-menu__list {
		width: min(100%, 320px);
		margin: 0 auto;
		padding: 0 0 32px;
		list-style: none;
		max-height: calc(100vh - 130px);
		overflow-y: auto;
	}

	.site-header,
	.site-header-container {
		z-index: 10030 !important;
	}

	.vk-mobile-nav-menu-btn,
	body.header_scrolled .vk-mobile-nav-menu-btn {
		z-index: 10040 !important;
		pointer-events: auto !important;
	}
}

@keyframes spMenuRotate01 {
	from {
		transform: translateY(var(--menu-bg-offset-y)) rotate(0deg);
	}
	to {
		transform: translateY(var(--menu-bg-offset-y)) rotate(360deg);
	}
}
@keyframes spMenuRotate02 {
	from {
		transform: translateY(var(--menu-bg-offset-y)) rotate(0deg);
	}
	to {
		transform: translateY(var(--menu-bg-offset-y)) rotate(360deg);
	}
}