/* Lightbox */

.lightbox {
	--caption-bg: #77a341;
	--caption-text: #fff;
	--overlay-bg: #fffc;
	--panel-bg: transparent;
	--button-bg: #77a341;
	position: relative;
	z-index: 300;
}

.lightbox__overlay,
.lightbox__panel {
	bottom: 0;
	left: -200vw;
	opacity: 0;
	position: fixed;
	right: 100vw;
	top: 0;
	transition: opacity 0.1s ease-in, left 0s 0.2s, right 0s 0.2s;
}

.lightbox__overlay {
	background-color: var(--overlay-bg);
	z-index: 200;
}

.lightbox__panel {
	align-items: center;
	background-color: var(--panel-bg);
	display: flex;
	justify-content: center;
	z-index: 300;
}

.lightbox__inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: auto;
	justify-content: center;
	position: relative;
}

.lightbox__caption {
	background-color: var(--caption-bg);
	box-sizing: border-box;
	color: var(--caption-text);
	font-size: 0.9em;
	padding: 0.45em 1.35em;
	width: 100%;
}

.lightbox__caption--empty {
	display: none;
}

.lightbox--visible .lightbox__overlay,
.lightbox--visible .lightbox__panel {
	left: 0;
	opacity: 1;
	transition: opacity 0.1s ease-in;
	right: 0;
}

.lightbox__btn {
	border-radius: 0.25em;
	overflow: hidden;
	height: 30px;
	margin: 0;
	padding: 0;
	position: fixed;
	text-indent: 200%;
	white-space: nowrap;
	width: 30px;
	z-index: 400;
}

@media (min-width: 768px) {
	.lightbox__btn {
		height: 40px;
		width: 40px;
	}
}

.lightbox__btn,
.lightbox__btn:hover,
.lightbox__btn:active {
	background-color: var(--button-bg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 66% auto;
}

.lightbox__btn--close {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgZD0iTTEgMSA3IDdNMSA3IDcgMSIvPjwvc3ZnPg==");
	right: 0.225em;
	top: 0.225em;
}

.lightbox__btn--prev,
.lightbox__btn--next {
	top: 100%;
	transform: translateY(-100%);
	transform: translateY(calc(-100% - 0.45em));
}

.lightbox__btn--prev {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjgiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgZD0iTTYgMSAzIDQgNiA3Ii8+PC9zdmc+");
	right: 50%;
	right: calc(50% + 0.45em);
}

.lightbox__btn--next {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjgiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgZD0iTTMgMSA2IDQgMyA3Ii8+PC9zdmc+");
	left: 50%;
	left: calc(50% + 0.45em);
}

@media (min-width: 1024px) {

	.lightbox__btn--close {
		right: 0.45em;
		top: 0.45em;
	}

	.lightbox__btn--prev,
	.lightbox__btn--next {
		top: 50%;
		transform: translateY(-50%);
	}

	.lightbox__btn--prev {
		left: 0.45em;
		right: auto;
	}

	.lightbox__btn--next {
		left: auto;
		right: 0.45em;
	}

}

.lightbox__img {
	box-shadow: 0 0 0.9em #0009;
	box-shadow: 0 0 0.9em -0.675em #000, 0 0.45em 1.35em #0003;
	display: block;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: scale-down;
	object-position: 50% 50%;
	opacity: 0;
	transition: opacity 0.1s ease-in;
	width: auto;
}

.lightbox__img--loaded {
	opacity: 1;
}