@charset "utf-8";

.slideshow-container { position: relative; display: block; max-width: 1000px; margin: 0px auto 60px; }

.slideshow-container img { max-height: 500px; margin: 0px auto; display: block; width: auto; max-width: 100%; object-fit: contain; }

.mySlides { position: relative; display: none; overflow: hidden; background-color: rgba(98, 98, 98, 0.216); touch-action: pan-y; user-select: none; }

.prev, .next { cursor: pointer; position: absolute; top: 50%; z-index: 5; width: auto; margin-top: -22px; padding: 16px; color: rgb(254, 0, 61); font-weight: bold; font-size: 18px; transition: color 0.3s, background-color 0.3s; border: none; border-radius: 0px 3px 3px 0px; background-color: transparent; }

.next { right: 0px; border-radius: 3px 0px 0px 3px; }

.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); color: rgb(0, 127, 255); }

.slide-number { color: rgb(242, 242, 242); font-weight: 700; font-size: 12px; padding: 8px 12px; position: absolute; top: 0px; z-index: 5; }

.dots-container { position: absolute; top: calc(100% + 15px); left: 0px; right: 0px; z-index: 5; text-align: center; }

.dot { cursor: pointer; height: 15px; width: 15px; margin: 0px 2px; background-color: rgb(187, 187, 187); border-radius: 50%; display: inline-block; transition: background-color 0.6s; }

.dot.active { background-color: rgb(254, 0, 61); }

.dot:hover { background-color: rgb(113, 113, 113); }

.zoom-overlay { display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1000; justify-content: center; align-items: center; cursor: zoom-out; isolation: isolate; transform: translateZ(0px); backface-visibility: hidden; will-change: opacity; -webkit-tap-highlight-color: transparent; user-select: none; }

.zoom-image { max-width: 95%; max-height: 95%; object-fit: contain; cursor: default; transform: translateZ(0px); backface-visibility: hidden; will-change: opacity, transform; transform-style: preserve-3d; transition: opacity 0.2s; }

.zoom-close { position: absolute; top: 10px; right: 10px; color: white; font-size: 40px; line-height: 1; font-weight: bold; cursor: pointer; z-index: 100; transition: color 0.3s; transform: translateZ(0px); -webkit-tap-highlight-color: transparent; }

.zoom-close:hover { color: rgb(225, 18, 41); }

[data-zoomable] { position: relative; display: block; transform: translateZ(0px); }

[data-zoomable] img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; transform: translateZ(0px); image-rendering: -webkit-optimize-contrast; }

@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance:none) {
  .zoom-overlay { isolation: isolate; }
  .zoom-image { image-rendering: auto; }
}
}

.fade__img { text-align: center; animation-name: fade; animation-duration: 1.5s; }

@-webkit-keyframes fade { 
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

@keyframes fade { 
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}