/*Диалог*/
.dialog
{
	position: fixed;
	overflow: hidden;
	width: 100vw;
	height:var(--app-height);
	top: 0px;
	bottom: 0px;
	border: none;
	background-color: rgba(0, 0, 0, 0.3);
	animation: none;
	z-index: 255;
	will-change:opacity, transform;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	backdrop-filter:blur(13px);
	-webkit-backdrop-filter: blur(13px);
}

.dialog.show
{
	animation-name: show-backdrop;
}

.dialog.hide
{
	animation-name: hide-backdrop;
	animation-delay: 0.2s;
	animation-fill-mode: backwards;
}

.dialog__window
{
	animation: none;
	opacity: 0;
	will-change:transform, opacity;
	/*+border-radius: 12px;*/
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	-khtml-border-radius: 12px;
	border-radius: 12px;
	padding:var(--indent);
	background-color: #F8F8F8;
	margin: 0 auto;
}

.dialog__content
{
}

.show .dialog__window
{
	animation-name: show-dialog;
	animation-delay: 0.2s;
	animation-duration:var(--transition-time);
	animation-fill-mode: forwards;
}

.hide .dialog__window
{
	animation-name: hide-dialog;
	animation-duration:var(--transition-time);
	animation-fill-mode: backwards;
}

.main-menu.show .dialog__window
{
	animation-name: show-dialog-from-left;
}

.main-menu.hide .dialog__window
{
	animation-name: hide-dialog-to-left;
}

.dialog p:not(:last-of-type)
{
	margin-bottom: calc(1 * var(--gap));
}

.dialog__close-btn
{
	position: absolute;
	top:var(--vu);
	right:var(--vu);
	width: 32px;
	height: 32px;
	background-image:var(--icon-close);
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 2;
	margin-left: auto;
	transition:var(--transition);
}

.dialog__close-btn:hover
{
	opacity: 0.5;
}

.main-menu .dialog__window
{
	padding-top: 13.5vh;
	height: 100%;
	display: grid;
	align-content: space-between;
	margin-left: 0;
}

.main-menu__logo
{
	margin: 50px auto 25px;
	width: 111px;
	/*filter: invert(0.7);*/
}

.popup__grid
{
	gap:var(--indent) !important;
}

.popup__title
{
	margin-bottom: 0;
	font-family:var(--primary-font);
	text-transform: none;
}

.popup__subtitle
{
	margin-bottom:var(--vu);
	opacity: 0.5;
}

.popup__description:not(:last-child)
{
	margin-bottom:var(--vu);
}

.popup__description-title
{
	display: block;
}

@media (max-width: 990px)
{
	.popup .dialog__window
	{
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	
	.popup .dialog__close-btn
	{
		position: sticky;
		top: 0px;
		right: 0px;
		margin-bottom:var(--vu);
	}
}

@media (min-width: 990px)
{
	.dialog
	{
		width: 100vw;
		height: 100vh;
		align-content: center;
	}
	
	.dialog__window
	{
		width: 800px;
		height: auto;
	}
	
	.main-menu .dialog__window
	{
		width: 370px !important;
	}
	
	.popup__image
	{
		height: 100%;
		object-fit: cover;
	}
	
	.main-menu .dialog__close-btn
	{
		right: auto;
		left:var(--vu);
	}
}

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

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

@keyframes show-dialog-from-left
{
	from
	{
		opacity: 0;
		transform: translateX(-200px);
	}
	
	to
	{
		opacity: 1;
		transform: translateX(0px);
	}
}

@keyframes hide-dialog-to-left
{
	from
	{
		opacity: 1;
		transform: translateX(0px);
	}
	
	to
	{
		opacity: 0;
		transform: translateX(-200px);
	}
}

@keyframes show-backdrop
{
	from
	{
		opacity: 0;
	}
	
	to
	{
		opacity: 1;
	}
}

@keyframes hide-backdrop
{
	from
	{
		opacity: 1;
	}
	
	to
	{
		opacity: 0;
	}
}

@media (min-width: 990px)
{
	@keyframes show-backdrop
	{
		from
		{
			opacity: 0;
		}
		
		to
		{
			opacity: 1;
		}
	}
	
	@keyframes hide-backdrop
	{
		from
		{
			opacity: 1;
		}
		
		to
		{
			opacity: 0;
		}
	}
}