:root {
  --my-img-border: #dbd9d9;
}

.mySwiper-thumbs {
	height: 72px;
	margin-bottom: 29px;
	max-width: 830px;
	margin-left: 0 !important;
	opacity: 0;
	transition: opacity .5s;
}

.mySwiper-thumbs .swiper-slide {
	transition: opacity .5s;
	height: 100% !important;
	border: 1px solid var(--my-img-border);
	box-sizing: border-box;
	background: #fff;
}

.mySwiper-thumbs .swiper-slide img {
	transition: opacity .5s;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.mySwiper-thumbs .swiper-wrapper {
	height: 100% !important;
}

.mySwiper-main img {
	max-height: 700px;
	object-fit: contain;
	width: 100%;
}

.mySwiper-main .swiper-slide {
	display: flex;
	justify-content: center;
}


.mySwiper-thumbs .swiper-slide img:hover {
	opacity: .7;
	cursor: pointer;
}

.swiper-slide-thumb-active img {
	cursor: default !important;
	opacity: 1;
	animation-name: myAnimation;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}

@keyframes myAnimation {
  from {opacity: 1;}
  to {opacity: .7;}
}


.mySwiper-main .swiper-button-next,
.mySwiper-main .swiper-button-prev {
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.swiper-button-disabled {
  display: none !important;
}

.swiper-button-lock {
  display: none !important;
}

.single-image {
		/* max-height: 750px; */
		height: clamp(350px, 80vh, 750px);
		width: 100%;
		/* height: 100%; */
		object-fit: contain;
		object-position: center;
		background: #0000000f;
}


@media screen and (max-width: 1000px) {
	
	.mySwiper-main {
			margin-block-start: 0rem;
	}
	
	.mySwiper-main img {
		max-height: 500px;
	}

	.mySwiper-thumbs {
		/* height: 45px; */
		/* max-width: 600px; */
		margin-bottom: 0px;
		padding-bottom: 2vh;
	}
	
	.mySwiper-main .swiper-slide img {
		background: #0000000f;
	}
	
	.single-image {
		/* max-height: 400px !important; */
	}
	
}

@media screen and (max-width: 782px) {
	.mySwiper-main img {
		max-height: 270px;
	}
	
	.mySwiper-thumbs {
		height: 45px;
	}

	.single-image {
		height: clamp(250px, 60svh, 350px) !important;
	}

	.my-title-top {
			padding-top: 2vh !important;
	}

}