/* thumbnail wrapper */

.nlightbox-wrapper {
	cursor: pointer;
}

/* gallery */

.nlightbox-gallery {
	display: block;
	position: fixed;

	z-index: 999;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	overflow: hidden;

	color: white;
	background-color: rgba(0,0,0,0.85);

	opacity: 1;
	pointer-events: initial;

	transition: all .2s ease-in-out;
}

.nlightbox-gallery.nlightbox-hidden {
	opacity: 0;
	pointer-events: none;
}

.nlightbox-gallery .nlightbox-item {
	transition: all .2s ease-in-out;
	transform: scale(1);
}

.nlightbox-gallery.nlightbox-hidden .nlightbox-item {
	transform: scale(0.5);
}

/* next/prev arrows */

.nlightbox-arrows-hidden {
	display: none;
}

.nlightbox-arrows .nlightbox-prev,
.nlightbox-arrows .nlightbox-next {
	position: absolute;
	top: 50%;

	cursor: pointer;

	transform: translateY(-50%);
}

.nlightbox-arrows .nlightbox-prev {
	left: 1%;
}

.nlightbox-arrows .nlightbox-next {
	right: 1%;
}

.nlightbox-arrows .nlightbox-prev::before {
	display: block;
	content: url(images/arrow-left.svg);
}

.nlightbox-arrows .nlightbox-next::before {
	display: block;
	content: url(images/arrow-right.svg);
}

/* close button */

.nlightbox-gallery .nlightbox-close {
	position: absolute;

	top: 1em;
	right: 1em;

	cursor: pointer;
}

.nlightbox-gallery .nlightbox-close::before {
	display: block;
	content: url(images/eks.svg);
}

/* reset list */

ul.nlightbox-contents,
li.nlightbox-item {
	margin: 0;
	padding: 0;

	list-style-type: none;
}

/* items */

/* when dealing with dynamic content, since this module now supports all maner
 * of things other than images, scale the contents to fit the screen and 
 * center align. This should be backwards compatible with older versions of
 * the module */
.nlightbox-content {
	width: 100%;
	text-align: center;
}

.nlightbox-item {
	position: absolute;

	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	transition: left .2s ease-in-out;
}

.nlightbox-item.nlightbox-before {
	left: -100%;
}

.nlightbox-item.nlightbox-current {
	left: 0;
}

.nlightbox-item.nlightbox-after {
	left: 100%;
}

/* Fit the contents within the lightbox, and if it doesn't, scroll
 *
 * In case you're unfamiliar, the overscroll-behavior stops scrolling the actual
 * page when the overlay is visible. Unless you're on Safari.
 * -ms-scroll-chaining supposedly does the same for IE, but I haven't tested it
 * since IE is dead and should stay in its grave.
 */
.nlightbox-item > * {
	max-width: 100%;
	max-height: 100%;

	-ms-scroll-chaining: none;
	overscroll-behavior: contain;

	overflow: auto;

	scrollbar-width: thin;
}