/*Основное меню*/
.main-menu
{
	/*background-color:var(--primary-color);*/
	background-color: var(--menu-color, --primary-color);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	position: fixed;
	top: calc(var(--header-height) - 1px);
	height: calc(100vh - var(--header-height));
	width: 100vw;
	border: none;
	z-index: 20;
	animation: none;
	padding: 0;
	will-change:clip-path;
}

.main-menu.show
{
	animation: show-backdrop 0.6s normal;
}

.main-menu.hide
{
	animation: hide-backdrop 0.6s normal;
}

.burger
{
	height: 18px;
	width: 32px;
	position: relative;
	cursor: pointer;
}

.burger__bar
{
	display: block;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	width: 100%;
	height: 2px;
	background-color:var(--white);
	transform-origin: center center;
	transition: var(--transition);
	transition-duration: 0.2s;
}

.burger__bar-top
{
	transform: translate(0, 0);
}

.burger__bar-middle
{
	transform: translate(0, 8px) scale(1);
	opacity: 1;
}

.burger__bar-bottom
{
	transform: translate(0, 16px);
}

.menu-opened .burger__bar-top
{
	transform: rotate(45deg) translate(6px, 6px);
}

.menu-opened .burger__bar-middle
{
	transform: translate(0, 8px) scale(0);
	opacity: 0;
}

.menu-opened .burger__bar-bottom
{
	transform: rotate(-45deg) translate(-6px, 6px);
}

@media (min-width: 990px)
{
	.main-menu
	{
		padding-top:var(--header-height);
	}
	
	.menu-toggler__bar
	{
		height: 3px;
	}
	
	.menu-opened .menu-toggler__bar-top
	{
		transform: rotate(45deg) translate(20px, 20px);
	}
	
	.menu-opened .menu-toggler__bar-bottom
	{
		transform: rotate(-45deg) translate(-20px, 20px);
	}
}

/*Диалог*/
.dialog
{
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	border: none;
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter:blur(15px);
	-webkit-backdrop-filter: blur(15px);
	animation: none;
	z-index: 255;
	will-change:transform, opacity, backdrop-filter;
}

.dialog.show
{
	animation: show-backdrop 0.6s normal;
	display: grid;
}

.dialog.hide
{
	animation: hide-backdrop 0.6s 0.2s 4 normal;
	display: grid;
}

.show .dialog__window
{
	animation: show-dialog 0.6s normal;
}

.hide .dialog__window
{
	animation: hide-dialog 0.6s normal;
}

@keyframes show-dialog
{
	from
	{
		opacity: 0;
		transform: translateY(-80%);
	}
	
	to
	{
		opacity: 1;
		transform: translateY(0%);
	}
}

@keyframes hide-dialog
{
	from
	{
		opacity: 1;
		transform: translateY(0%);
	}
	
	to
	{
		opacity: 0;
		transform: translateY(-80%);
	}
}

@keyframes show-backdrop
{
	from
	{
		clip-path:polygon(0 0, 100% 0, 100% 0%, 0 0%);
	}
	
	to
	{
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

@keyframes hide-backdrop
{
	from
	{
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
	
	to
	{
		clip-path:polygon(0 0, 100% 0, 100% 0%, 0 0%);
	}
}