/* ------------------------------------------------------
---------------------------------------------------------
		GALLERY STYLES
---------------------------------------------------------
--------------------------------------------------------- */

* {
  box-sizing: border-box;
}
.galleryStage {
	position: relative;
    border-radius: 8px;
    overflow: hidden;
}
/* Position the image container (needed to position the left and right arrows) */
.galleryStage .container {
    position: relative;
    margin: 0;
	align-items: center;
	aspect-ratio:5/3;
}
/* Hide the images by default */
.galleryStage .mySlides {
	opacity: 0;
	overflow: hidden;
	font-size: 0;
	width: 100%;
	position: absolute;
	transition: all .2s ease-in-out;
}
/* Add a pointer when hovering over the thumbnail images */
.galleryStage .cursor {
  cursor: pointer;
}
/* Next & previous buttons */
.galleryStage .galleryTools {
	position: absolute;
	right: 30px;
	top: 0;
	display: flex;
	transition: opacity 0.3s ease-in-out;
}
.galleryStage .galleryTools .prev,
.galleryStage .galleryTools .next {
	background:var(--wp--preset--color--charcoal);
	cursor: pointer;
	height: 53px;
	width: 42px;
	color:var(--wp--preset--color--white);
	font-size: 20px;
	user-select: none;
	-webkit-user-select: none;
	display: flex;
    align-items: center;
    justify-content: center;
}
/* On hover, add a black background color with a little bit see-through */
.galleryStage .galleryTools .prev:hover,
.galleryStage .galleryTools .next:hover {
	background: var(--wp--preset--color--blue);
}
.galleryStage .row {
	position: absolute;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	bottom: 0;
	left: 0;
	width: 100%;
}
.galleryStage:hover .row {
	opacity: 1!important;
}
.galleryStage .row:after {
	content: "";
	display: table;
	clear: both;
}
/* Columns side by side */
.galleryStage .column {
	float: left;
	width: calc(100% / 16);
	overflow: hidden;
	font-size: 0;
}
.galleryStage .column:nth-child(10n+10) {
    margin-right: 0;
}
/* Add a transparency effect for thumnbail images */
.galleryStage .demo {
	opacity: 0.35!important;
}
.galleryStage .active,
.galleryStage .demo:hover {
	opacity: 1!important;
	transition: all .2s ease-in-out!important;
}

@media only screen and (max-width : 1000px) {
    
.galleryStage .row {
	display: none;
}
.galleryStage .galleryTools .prev,
.galleryStage .galleryTools .next {
	height: 43px;
	width: 32px;
	font-size: 16px;
	opacity: 1;
}
    
}