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

* {
  box-sizing: border-box;
}
.galleryStage {
	position: relative;
    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: 1/1;
    overflow: hidden; 
    touch-action: pan-y; /* NEW: Tells the browser to only handle vertical scrolling automatically */
}
.galleryStage .slides-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}
/* Hide the images by default */
.galleryStage .mySlides {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}
.galleryStage .mySlides img {
	object-fit: cover;
    width: 100%;
    height: 100%;
}
/* 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--oatmeal);
	cursor: pointer;
	height: 53px;
	width: 42px;
	color:var(--wp--preset--color--putty);
	font-size: 20px;
	user-select: none;
	-webkit-user-select: none;
	display: flex;
    align-items: center;
    justify-content: center;
}
.galleryStage .row {
	position: absolute;
	transition: opacity 0.3s ease-in-out;
	bottom: 10px;
	left: 0;
	right: 0;
	margin-inline: auto; 
	width: fit-content;
	display: flex;
	gap:4px;
}
/* Columns side by side */
.galleryStage .column {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: solid 2px #fff;
}
/* Add a transparency effect for thumnbail images */
.galleryStage .active,
.galleryStage .demo:hover {
	background-color: #fff;
	transition: all .2s ease-in-out!important;
}

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

@media only screen and (max-width : 768px) {
    
.galleryStage {
    width: 100vw;
    margin-left: -7.5vw;
}
    
}