html.lightbox-open,
html.lightbox-open body {
	overflow: hidden;
}

#modern-lightbox {
	position: fixed;
	z-index: 10000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: rgba(9, 9, 9, 0.88);
}

#modern-lightbox.is-visible {
	display: flex;
}

.modern-lightbox-frame {
	position: relative;
	display: flex;
	box-sizing: border-box;
	max-width: 1100px;
	max-height: 94vh;
	align-items: center;
	justify-content: center;
}

.modern-lightbox-image {
	display: block;
	box-sizing: border-box;
	max-width: calc(100vw - 48px);
	max-height: calc(94vh - 72px);
	border: 6px solid #f3eadc;
	background-color: #111111;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.modern-lightbox-close,
.modern-lightbox-prev,
.modern-lightbox-next {
	position: absolute;
	border: 1px solid rgba(242, 179, 84, 0.4);
	border-radius: 3px;
	color: #ffffff;
	background-color: rgba(20, 20, 20, 0.88);
	font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
}

.modern-lightbox-close:hover,
.modern-lightbox-close:focus,
.modern-lightbox-prev:hover,
.modern-lightbox-prev:focus,
.modern-lightbox-next:hover,
.modern-lightbox-next:focus {
	color: #151515;
	background-color: #f2b354;
	outline: none;
}

.modern-lightbox-close {
	top: -44px;
	right: 0;
	padding: 8px 12px;
}

.modern-lightbox-prev,
.modern-lightbox-next {
	top: 50%;
	width: 82px;
	padding: 10px 8px;
	transform: translateY(-50%);
}

.modern-lightbox-prev {
	left: -96px;
}

.modern-lightbox-next {
	right: -96px;
}

.modern-lightbox-meta {
	position: absolute;
	right: 6px;
	bottom: -34px;
	left: 6px;
	display: flex;
	justify-content: space-between;
	color: #f3eadc;
	font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
	font-size: 13px;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

@media (max-width: 720px) {
	#modern-lightbox {
		padding: 14px;
	}

	.modern-lightbox-image {
		max-width: calc(100vw - 28px);
		max-height: calc(94vh - 110px);
		border-width: 4px;
	}

	.modern-lightbox-close {
		top: auto;
		right: 0;
		bottom: -54px;
	}

	.modern-lightbox-prev,
	.modern-lightbox-next {
		top: auto;
		bottom: -54px;
		width: 74px;
		transform: none;
	}

	.modern-lightbox-prev {
		left: 0;
	}

	.modern-lightbox-next {
		right: 104px;
	}

	.modern-lightbox-meta {
		bottom: -88px;
		display: block;
	}

	.modern-lightbox-counter {
		display: block;
		margin-top: 4px;
	}
}