/* 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: rgba(0,0,0,0.5);
	}

	.modal-frame {
		width: auto;
		max-width: 100%;
		max-height: 100%;
        display: flex;
		position: relative;
		z-index: 2;
		overflow: hidden;
	}

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


/* Media types
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.modal-frame .media-video {
    width: 700px;
    max-width: 100%;
    height: auto;
    background-color: #000;
}

.modal-frame .media-image {
    object-fit: contain;
}


/* Open Modal
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body.js-is-open {
    overflow: hidden;
}

.modal:target,
.modal.js-is-open {
	display: flex;
	justify-content: center;
    align-items: 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;
	}
}