img[data-action=lumos] {
	cursor: zoom-in; }

div#lumos-container {
	transition: all 250ms ease-in-out;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(50,50,50,0.80);
	z-index: 1000;
	justify-content: center;
	align-items: center;
	display: flex;
	transform: scale(0);
	opacity: 0;
	cursor: zoom-out;
}
div#lumos-container.visible {
	animation-name: animatelumos-in;
    animation-duration: 250ms;
    animation-fill-mode: forwards;
}
div#lumos-container.hidden {
    animation: animatelumos-out;
    animation-duration: 250ms;
    animation-fill-mode: forwards;
}
img#lumos-image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border:#9f885b solid 2px;
}
@media (min-width: 768px) {
	img#lumos-image {
		max-width: 95%;
		max-height: 95%;
	}
}
@keyframes animatelumos-in {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	1% {
		transform: scale(0.9);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes animatelumos-out {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	99% {
		transform: scale(0.9);
		opacity: 0;
	}
	100% {
		transform: scale(0);
		opacity: 0; } }