.lightbox {
	display: none;

	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1em 0;

	background: rgba(0, 0, 0, 0.8);
	cursor: pointer;

	&.visible {
		display: block;
		animation: fade-in .3s ease-out;

		div { animation: zoom-in .2s ease-out }
	}

	div {
		display: block;
		width: 100%;
		height: 100%;
		max-width: 1500px;
		margin: 0 auto;

		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
}

// Keyframes have to be used, because transition
// does not work with `display: none`
@keyframes fade-in {
	0% { display: none; opacity: 0 }
	1% { display: block; opacity: 0 }
	100% { display: block; opacity: 1 }
}
@keyframes zoom-in {
	0% { transform: scale(.5) }
	100% { transform: scale(1) }
}