/* Modal Windows
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal {
	width: 100vw;
	height: 100vh;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	padding: 2rem;
	overflow: hidden;
}

	.modal > .modal-close {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		background-color: rgb(11,11,11,.8);
		cursor: default;
	}

	.modal-frame {
		width: 500px;
		max-width: 100%;
		max-height: 100%;
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
		background-color: #fff;
		border: 1px solid #999;
		box-shadow: 0 8px 32px rgb(0,0,0,.15);
		overflow: hidden;
	}

		.modal-frame header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1.5rem 1rem 1.5rem 1.5rem;
			background-color: #f5f5f5;
			border-bottom: 1px solid #e4e4e4;
			overflow: hidden;
		}

		.modal-frame header.short {
			padding-top: .75rem;
			padding-bottom: .75rem;
		}

			.modal-frame header :where(h2, h3) {
				margin: 0;
				font-size: 15px;
				font-weight: normal;
				text-transform: uppercase;
			}

		.modal-frame .modal-close {
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #222;
			font-size: 1.5rem;
			font-weight: bold;
			opacity: .5;
		}

		.modal-frame .modal-close:hover {
			text-decoration: none;
			opacity: 1;
		}

		.modal-frame .content {
			padding: 2rem 1.5rem;
			overflow-y: auto;
		}

		.modal-frame .modal-back {
			display: flex;
			align-items: center;
			gap: .25em;
			padding: 0;
			margin: 0;
			background-color: transparent;
			border: 0;
			cursor: pointer;
			font-family: 'Titillium Web', sans-serif;
			font-size: 15px;
			opacity: .5;
		}

		.modal-frame .modal-back:hover {
			opacity: 1;
		}

		.modal-frame .modal-back::before {
			content: "";
			width: 1.3rem;
			height: 1.3rem;
			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 24 24'%3E%3Cpath fill-rule='nonzero' d='M9.474 5.209 3.22 11.468c-.147.146-.22.338-.22.53s.073.384.22.53l6.252 6.257a.742.742 0 0 0 .527.217.753.753 0 0 0 .534-1.278l-4.976-4.976h14.692a.75.75 0 0 0 0-1.5H5.557l4.978-4.979a.745.745 0 0 0-.006-1.054.749.749 0 0 0-1.055-.006z'/%3E%3C/svg%3E");
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 24 24'%3E%3Cpath fill-rule='nonzero' d='M9.474 5.209 3.22 11.468c-.147.146-.22.338-.22.53s.073.384.22.53l6.252 6.257a.742.742 0 0 0 .527.217.753.753 0 0 0 .534-1.278l-4.976-4.976h14.692a.75.75 0 0 0 0-1.5H5.557l4.978-4.979a.745.745 0 0 0-.006-1.054.749.749 0 0 0-1.055-.006z'/%3E%3C/svg%3E");
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-size: cover;
			mask-size: cover;
			-webkit-mask-position: center;
			mask-position: center;
			background-color: #222;
		}


/* Multi Pane
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal.multi-pane .modal-frame {
	height: 500px;
	display: flex;
}

.modal.multi-pane .modal-panes {
	width: 100%;
	display: flex;
	position: relative;
}

.modal.multi-pane .modal-pane {
	width: 100%;
	display: none;
	position: relative;
	z-index: 1;
	background-color: #fff;
}

.modal.multi-pane .js-pane-active {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	z-index: 2;
}


/* Open Modal
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal:target,
.modal.js-is-open {
	display: flex;
	align-items: center;
	justify-content: center;
}

	.modal:target > .modal-close,
	.modal.js-is-open > .modal-close {
		animation: .3s ease modalFade;
	}

	.modal:target .modal-frame,
	.modal.js-is-open .modal-frame {
		animation: .7s ease modalSlideIn;
	}


/* Animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@keyframes modalFade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes modalSlideIn {
	from {
		top: -100px;
		opacity: 0;
	}
	to {
		top: 0;
		opacity: 1;
	}
}