@charset "UTF-8";
.modal-fader {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--fader);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/* html.open-modal {
		overflow: hidden;
}
html:not(.open-modal) .modal-fader {
		opacity: 0;
		pointer-events: none;
} */
.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		overflow-y: auto;
		z-index: 1000;
		backface-visibility: hidden;
		transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		display: flex;
		flex-direction: column;
		pointer-events: none;
}
/* .modal:not(.open) {
		opacity: 0;
} */
.modal.open .close, .modal.open .modal-content {
		pointer-events: all;
}
.modal-max {
		flex: 0 0 auto;
		margin: auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: var(--gap);
		max-width: 613px;
}
.modal .close {
		align-self: flex-end;
}
.modal-content {
		flex: 0 0 auto;
		width: 100%;
		backface-visibility: hidden;
		border-radius: var(--radius);
		padding: 20px var(--side-padding);
		background: rgba(255, 255, 255, 0.07);
}
.modal-content .btn-pink-black:before {
		background-color: var(--grey-bg7);
}
.modal-head {
		margin: 0 0 24px 0;
}
.modal-head .h3 {
		margin: 0 0 12px 0;
}
.modal-head .text {
		opacity: 0.65;
		font-weight: 300;
}
@media only screen and (max-width: 699px) {
		.modal .close {
				width: 56px;
				height: 56px;
				padding: 0;
				margin-right: var(--side-padding);
		}
		.modal .close span {
				display: none;
		}
}
@media only screen and (min-width: 700px) {
		.modal .close svg {
				display: none;
		}
		.modal-content {
				padding: 50px var(--side-padding);
		}
		.modal-head {
				font-size: 20px;
		}
}
@media only screen and (min-width: 1000px) {
		.modal {
				/* width: calc(100% - var(--side-padding) * 2); */
		}
		.modal-content {
				padding: 50px;
		}
}