/* block */


.modal_overflow
{
	overflow-y: hidden;
}
.modal
{
	--modal-blackout-color: var(--c-black);
	--modal-blackout-color-alpha: .6;
	--modal-text-color: var(--c-black);
	/*--modal-text-color: var(--c-white);*/
	--modal-x-color: var(--modal-text-color);
	--modal-background-color: var(--c-white);
	/*--modal-background-color: var(--c-secondary);*/
	--modal-background-color-alpha: 1;
	--modal-padding-h: calc(var(--gap) * 4);
	--modal-padding-v: calc(var(--gap) * 2);
	--modal-backdrop-blur: 4px;

	display: unset;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	background-color: rgba(var(--modal-blackout-color) / var(--modal-blackout-color-alpha));
	z-index: 5;

	backdrop-filter: blur(var(--modal-backdrop-blur));
}

.modal::before,
.modal::after {
	content: "";
	display: table;
	clear: both;
}
.modal:not(.modal_active):not(.modal_load)
{
	display: none;
}
.modal__wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: calc(var(--limiter) + var(--limiter-padding) * 2);
	min-height: 100%;
	margin-inline: auto;
	padding-top: calc(var(--gap) * 2);
	padding-bottom: calc(var(--gap) * 2);
	padding-inline: var(--limiter-padding);
}
.modal_medium .modal__wrapper {
	max-width: calc(var(--limiter-medium) + var(--limiter-padding) * 2);
}
.modal_small .modal__wrapper {
	max-width: calc(var(--limiter-small) + var(--limiter-padding) * 2);
}
.modal__container {
	width: 100%;
	background-color: rgba(var(--modal-background-color) / var(--modal-background-color-alpha));
	color: rgb(var(--modal-text-color) / 1);
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
}
.modal_fit .modal__container{
	width: auto;
}
.modal_fill .modal__container{
	width: 100%;
}
.modal__header,
.modal__content,
.modal__footer {
}
.modal__content
{
	/*padding: calc(var(--gap)) calc(var(--gap) * 4);*/
	/*padding-inline: calc(var(--gap) * 4);*/
	display: grid;
	gap: var(--gap);
	margin-top: var(--modal-padding-v);
	margin-bottom: var(--modal-padding-v);
	padding-inline: var(--modal-padding-h);
}
.modal__x {
	display: block;
	position: relative;
}
.modal__x::after
{
	font-family: var(--ff-fa);
	font-weight: 200;
	content: "\f00d";
	position: absolute;
	top: 0;
	left: auto;
	right: 0;
	bottom: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--gap) * 1.5 + var(--gap));
	height: calc(var(--gap) * 1.5 + var(--gap));
	font-size: calc(var(--gap) * 1.5);
	color: rgb(var(--modal-x-color));
	cursor: pointer;
	z-index: 1;
}
.modal__footer {
	text-align: center;
}
.modal__footer {
	/*position: relative;*/
}
.modal__footer .modal__close {
	/*position: absolute;*/
	/*transform: translateX(-50%);*/
}
.modal__footer .modal__close {
	/*text-decoration: underline;*/
	/*cursor: pointer;*/
	/*opacity: .5;*/
}
.modal__footer .modal__close:hover {
	opacity: .75;
}

.modal.modal_load {
	animation: modal-bg-open .2s ease-in forwards;
}
@keyframes modal-bg-open {
	0% {
		display: none;
		left: -999999px;
		background-color: transparent;
		backdrop-filter: blur(0);
	}
	0.001% {
		display: block;
		left: 0;
		background-color: transparent;
		backdrop-filter: blur(0);
	}
	100% {
		left: 0;
		background-color: rgba(var(--modal-blackout-color) / var(--modal-blackout-color-alpha));
		backdrop-filter: blur(--modal-backdrop-blur);
	}
}

.modal.modal_load:not(.modal_active){
	animation: modal-bg-close .2s ease-in forwards ;
}
@keyframes modal-bg-close {
	0% {
		left: 0;
		background-color: rgba(var(--modal-blackout-color) / var(--modal-blackout-color-alpha));
		backdrop-filter: blur(--modal-backdrop-blur);
	}
	99.999% {
		display: block;
		left: 0;
		background-color: transparent;
		backdrop-filter: blur(0);
	}
	100% {
		display: none;
		left: -999999px;
		background-color: transparent;
		backdrop-filter: blur(0);
	}
}

.modal.modal_load .modal__container {
	animation: modal-container-open .3s ease-out forwards;
}
@keyframes modal-container-open {
	0% {
		opacity: 0;
		transform: translateY(10svh);
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateY(0%);
	}
}

.modal.modal_load:not(.modal_active) .modal__container {
	animation: modal-container-close .3s ease-out forwards;
}
@keyframes modal-container-close {
	0% {
		opacity: 1;
		transform: translateY(0%);
	}
	100% {
		opacity: 0;
		transform: translateY(10svh);
	}
}

/* /block */





.modal_nav .modal__wrapper {
    padding: unset;
    /* display: flex; */
    justify-content: flex-end;
}
.modal_nav .modal__container {
    width: calc(var(--gap) * 15);
    max-width: 100%;
    height: 100dvh;
    border-radius: unset;
}
.modal_nav .modal__content {
    /*padding: calc(var(--gap) * 2) 0;*/
    padding-inline: unset;
}
.modal_nav ul {
    list-style: none;
    margin: unset;
    padding: unset;
}
.modal_nav a {
    text-decoration: none;
    color: inherit;
}
.modal_nav ul {
    display: flex;
    flex-direction: column;
}
.modal_nav ul a {
    display: block;
    padding: var(--gap-small) var(--gap-big);
}
.modal_nav ul a:hover {
    color: rgb(var(--c-primary));
}


.modal.modal_nav.modal_load .modal__container {
	animation: modal-nav-container-open .3s ease-out forwards;
}
@keyframes modal-nav-container-open {
	0% {
		opacity: 0;
		transform: translateX(10svh);
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateX(0%);
	}
}

.modal.modal_nav.modal_load:not(.modal_active) .modal__container {
	animation: modal-nav-container-close .3s ease-out forwards;
}
@keyframes modal-nav-container-close {
	0% {
		opacity: 1;
		transform: translateX(0%);
	}
	100% {
		opacity: 0;
		transform: translateX(10svh);
	}
}




.modal_cookie {
	--modal-padding-h: calc(var(--gap) * 2);
	/*--modal-blackout-color-alpha: 0;*/
	--modal-text-color: var(--c-white);
	--modal-background-color: var(--c-secondary);
	--modal-background-color-alpha: .9;
	
}
.modal_cookie .modal__container {
    width: calc(var(--gap) * 30);
    box-shadow: 2px 2px 5px rgb(var(--c-black) / .25);
}
.modal_cookie .modal__wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.modal_cookie .modal__header,
.modal_cookie .modal__content,
.modal_cookie .modal__footer {
    /*margin-top: var(--gap);*/
    /*margin-bottom: var(--gap);*/
}
.modal_cookie .modal__footer .modal__close {
    width: 100%;
    box-sizing: border-box;
}