.fancybox__container {
	--fancybox-color: #334155;
	--fancybox-bg: #fff;
	--fancybox-content-color: #6B7280;
	--fancybox-content-bg: #fff;
	--fancybox-thumbs-width: 80px;
	--fancybox-thumbs-ratio: 1;
/*	--carousel-button-svg-stroke-width: 1.5; */
	--carousel-button-svg-filter: none;
	display: flex;
	flex-direction: row;
}
/**
* Thumbnails
*/

.fancybox__thumbs {
	padding: 0 100px 0 26px;
	border-bottom: 2px solid #f3f3f4;
}
.fancybox__thumb {
	border-radius: 4px;
	background-color: #e7e7e9;
}
.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
  border-color:var(--fancybox-accent-color, rgba(191, 191, 191, 1));
  border-width: 3px;
}

.is-nav-selected .fancybox__thumb {
	box-shadow: 0 0 0 1px rgba(108, 122, 137, 1), 0 0 0 3px rgba(108, 122, 137, 1);
}

.fancybox__nav {
	--carousel-button-bg: #E5E7EB;
}
/**
*  Toolbar
*/

.fancybox__toolbar {
	background: rgba(255, 255, 255, 0.8);
	text-shadow: none;
}

.fancybox__caption {
	text-align: center;
}

.fancybox__leftCol {
	width: 80vw;
	min-height: 1px;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.fancybox__rightCol {
	width: 20vw;
	max-width: 300px;
	height: 100%;
	padding: 2rem;
	overflow: auto;
	display: flex;
	flex-direction: column;
	border-left: 1px solid #edeef0;
	opacity: var(--fancybox-opacity, 1);
}

/* Opening */
.fancybox__container.is-animated[aria-hidden="false"] .fancybox__rightCol {
	animation: 0.15s ease backwards fancybox-fadeIn;
}

/* Closing */
.fancybox__container.is-animated.is-closing .fancybox__rightCol {
	animation: 0.15s ease both fancybox-fadeOut;
}

.fancybox__container.is-animated.is-closing .fancybox__leftCol {
	overflow: visible;
}

.fancybox__rightCol dt {
	font-weight: bold;
}

.fancybox__rightCol dl, .fancybox__rightCol dd {
	font-size: .9rem;
}

.fancybox__rightCol dt, .fancybox__rightCol dd {
    margin-bottom: 1em;
}

/* Responsive styling for screens smaller than 400px */
@media screen and (max-width: 400px) {

	.fancybox__leftCol {
		width: 100%;
		height: 70%;
	}
	
	.fancybox__container {
		flex-direction: column;
	}
	
	.fancybox__rightCol {
		max-width: 100%;
		width: 100%;
		height: 50%
	}
	
.fancybox__rightCol dt,
.fancybox__rightCol dd {
    margin-bottom: 0.2em;
}

	
	.carousel__button.is-next,
	.carousel__button.is-prev {
		top: 93%;
	}
	
	.carousel__viewport {
		overflow: visible;
	}

}