/* .image-gallery {
	
	
} */

.image-gallery-viewport {
	width: 100%;
	/* aspect-ratio: 16 / 9; */
	padding-top: 56.3%;
	/* max-height: 300px; */
	position: relative;
	background-color: #ddd;
	/* border-radius: 10px; */
	overflow:hidden;
	transform:translateZ(0);
}

.image-gallery-viewport img {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	object-fit: cover;
}

.image-gallery-viewport > img,
.image-gallery-viewport > .gallery-video-item,
.image-gallery-viewport > .gallery-image-item {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	object-fit: cover;
	opacity:0;
	transition: all 0.3s ease-in-out;
	transition-delay: all 0.3s;
	z-index:1;
}
.image-gallery-viewport > .gallery-video-item img,
.image-gallery-viewport > .gallery-image-item img {
	background-color:#e6e6e6;
	transition:all 600ms ease-in-out;
}
.image-gallery-viewport > .gallery-video-item,
.image-gallery-viewport > .gallery-image-item {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}


.gallery-item .image-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem var(--side-safe-area);
	color: white;
	isolation: isolate;
	font-size: 1rem;
	line-height: 1.3;
}
.gallery-item .image-caption::before {
	content: '';
	position: absolute;
	background-color:#000000cc;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;

}
.gallery-item .image-caption:empty {
	display:none !important;
}


.image-gallery-viewport .gallery-video-item::after {
	content: '\f04b';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #fff;
	font-size: 1.7rem;
	z-index: 5;
	background-color: var(--color-ssi-red);
	width: 6rem;
	height: 4rem;
	line-height: 4rem;
	border-radius: 12% / 50%;
	text-align: center;
	text-indent: 0.2em;
	transition: all 600ms ease-in-out;
}

.image-gallery-viewport .gallery-video-item:hover img {
	transform:scale(1.02);
}
/* .image-gallery-viewport .gallery-video-item:hover::after {	
	background-color: #ffffffdd;
} */


.image-gallery-viewport > .gallery-image-item[data-active],
.image-gallery-viewport > .gallery-video-item[data-active] {
	opacity:1;
	z-index:2;
	transition-delay: all 0s;
}



.image-gallery-button {
	outline: none;
	border: 0px;
	border-radius: 99px;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: #ffffffee;
	box-shadow: 0 1px 4px 0px rgba(0,0,0,0.25);
	color:#666;
	transition:all 0.3s;
	cursor:pointer;
	z-index:6;
	font-size: 0.875rem;
	line-height: 34px;
	text-align: center;
	padding: 0 0 0 2px;
}
.image-gallery-button:before {
	content:'\276F';
}

.image-gallery-next {
	right:-40px;

}
.image-gallery-prev {
	transform: translateY(-50%) scaleX(-1);
	left:-40px;
}

.navigation-arrows:hover .image-gallery-next,
.image-gallery-viewport:hover .image-gallery-next {
	right:10px;
}
.navigation-arrows:hover .image-gallery-prev,
.image-gallery-viewport:hover .image-gallery-prev {
	left:10px;
}

.image-gallery-navigation-outer .image-gallery-button {
	top:calc(calc(100% - 1rem) / 2);
}

.image-gallery-viewport iframe {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:5;
	border:0;
}

.image-gallery-navigation-outer {
	overflow: hidden;
	/* background-color: #ff9900; */
	width: 100%;
	height: 135px;
	position: relative;
}


.image-gallery-navigation {
	position: relative;
	width: 100%;
	height: 180px;
	overflow-x: auto;
	display: flex;
	padding: var(--side-safe-area) 0 0 0;
	scroll-behavior: smooth;
}
.image-gallery-preview-item {
	width: 145px;
	flex-shrink: 0;
	padding: 2px;
	/* border: 5px solid transparent; */
	cursor: pointer;
	color: #666;
}



.image-gallery-preview-item img {
	aspect-ratio: 16 / 9;
	background-color: #e6e6e6;
	border: 0px solid white;
	opacity: 0.6;
	filter: grayscale(70%);
	transition: all 300ms;
	object-fit: cover;
}

.image-gallery-preview-item p {
	font-size: 0.8rem;
	line-height: 1.2;
	margin-top: 0.35em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-indent: 2px;
}
.image-gallery-preview-item p:empty {
	display: none !important;
}


.image-gallery-preview-item.active {
	/* border: 2px solid var(--color-ssi-red); */
	color:var(--color-ssi-red)
}
.image-gallery-preview-item.active img {
	border-color: var(--color-ssi-red);
	opacity: 1;
	filter: grayscale(0%);
}

.grid-gallery {
	--_grid-height:450px;
	--_grid-active-element:  calc(var(--_grid-height) * (16 / 9));
	--animation-duration:350ms;

	display: flex;				
	height:var(--_grid-height);
	gap: 1em;
	position: relative;
	overflow: hidden;
	border-radius:8px;
}

.grid-gallery img {
	height:100%;
	object-fit: cover;
	transition:
		width var(--animation-duration) ease-out, 
		filter var(--animation-duration) ease-out, 
		opacity var(--animation-duration) ease-out;
	border-radius:8px;
	overflow: hidden;
	cursor: pointer;
}

.grid-gallery img.bg-img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(30px) saturate(1.5);
	opacity: 0.5;
	cursor: default;
}

.grid-gallery img {
	filter: grayscale(90%);
	opacity: 0.75;
}

.grid-gallery img:not(.bg-img):hover,
.grid-gallery img.active {
	filter: grayscale(0%);
	opacity:1;
}

.grid-gallery img.is-default {
	object-fit: contain;
	background-color: #ddd;
	object-position: 0% 0%;
}

.grid-gallery-1 img.active {
	margin:0 auto;
	position: relative;
	z-index: 2;
	cursor: default;
	box-shadow: 0 0 50px 10px rgba(0,0,0,.1);
}

.grid-gallery-2 img {
	width: calc(100% - 1em - var(--_grid-active-element));
}

.grid-gallery-3 img {
	width: calc((100% - 2em - var(--_grid-active-element)) / 2);
}
.grid-gallery img.active {
	width: var(--_grid-active-element);
}

@media (max-width: 1200px) {
	.grid-gallery {
		--_grid-height:350px;
	}
}

@media (max-width: 900px) {
	.grid-gallery {
		--_grid-height:300px;
	}
}

@media (max-width: 768px) {
	.grid-gallery {
		--_grid-height:200px;
	}
}

@media (max-width: 500px) {
	.grid-gallery {
		--_grid-height: calc(80vw * (9 / 16));
		overflow-x: auto;
		flex-wrap: nowrap;
	}
	.grid-gallery img {
		flex-shrink: 0;
		flex-grow: 0;
		width: var(--_grid-active-element);
		filter: grayscale(0%);
		opacity:1;
	}
}