.Lightbox {
	z-index: 20;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.9);
	display: none;
	vertical-align: middle;
	pointer-events: all;
}

.LightboxImage {
	max-width: 90%;
	max-height: 90%;
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.closeLightboxButton {
	z-index: 3;	
	position: fixed;
	right: 1em;
	top: 1em;
	bottom: auto;
	height: 2em;
	width: 2em;
	padding: 0.25em;
	border-radius: 4em;
	transition: 0.2s;
	background-color: rgba(0,0,0,1);
	cursor: pointer;
	box-shadow: 0.75vh 0.75vh rgba(0,0,0,0.5);
}

.closeLightboxButtonImage {
	float: right;
	height: 100%;
	width: auto;
	
	user-drag: none;
    -webkit-user-drag: none;
	user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.changeLightboxImageButton {
	z-index: 2;
	position: fixed;
	height: 100%;
	width: 20%;
	cursor: pointer;
	opacity: 0.0;
	transition: 0.2s;
}

.changeLightboxImageButton:hover {
	opacity: 0.25;
}

.changeLightboxImageButton#switchImageBack {
	left: 0%;
	background-image: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}

.changeLightboxImageButton#switchImageForward {
	left: 80%;
	background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}



/* Phones. */
@media (max-width: 70em) {
	
	.LightboxImage {
		max-width: 100%;
		max-height: 100%;
	}
	
	.closeLightboxButton {
		top: auto;
		bottom: 8em;
		height: 4em;
		width: 4em;
		padding: 0.5em;
		box-shadow: 0.375em 0.375em rgba(0,0,0,0.5);
	}
	
	.changeLightboxImageButton:hover {
		opacity: 0.0;
	}
	
	/* Landscape orientation. */
	@media (min-aspect-ratio: 5/3) {
		
		.closeLightboxButton {
			height: 3em;
			width: 3em;
			padding: 0.375em;
			bottom: 2.5em;
		}
	
	}
	
}