@charset "UTF-8";

.slideshow-container {
  position: absolute;
    width: 55%;
  height: 100%;
    right: 3%;
  transform: translate(150%, 0);
  transition: transform .5s;
  transition-delay: 1s;
  z-index: 2;

  display: flex;
  justify-content: center;
  align-items: center;
}
.show21:not(.showProduct) #pg-story01 .slideshow-container { transition-delay: 0s; }
.show22:not(.showProduct) #pg-story02 .slideshow-container { transition-delay: 0s; }
.show23:not(.showProduct) #pg-story03 .slideshow-container { transition-delay: 0s; }
.show24:not(.showProduct) #pg-story04 .slideshow-container { transition-delay: 0s; }
.show25:not(.showProduct) #pg-story05 .slideshow-container { transition-delay: 0s; }
.show26:not(.showProduct) #pg-story06 .slideshow-container { transition-delay: 0s; }
.show27:not(.showProduct) #pg-story07 .slideshow-container { transition-delay: 0s; }
.show28:not(.showProduct) #pg-story08 .slideshow-container { transition-delay: 0s; }
.showProduct .slideshow-container {
  transform: translate(0, 0);
  transition-delay: 1s;
}

.img-slide {
  width: fit-content;
    max-width: 54vw;
  height: fit-content;
  position: absolute;
  z-index: 3;

  overflow: hidden;
  
  border-radius: 1rem;
  outline: thin solid #212121;
  outline-offset: 0.0px;
  background: rgba(255,255,255,0.00);
  animation-name: fade-out-bg;
  animation-duration: .25s;
  animation-fill-mode: forwards;
}
.img-slide.pointer {
  cursor: pointer;
}
.img-forwards .img-slide {
  background: rgba(255,255,255,1.00);
  animation: none;
}
.img-forwards .img-slide.current {
  background: rgba(255,255,255,0.00);
  animation-name: fade-in-bg;
  animation-duration: .25s;
  animation-fill-mode: forwards;
}
.img-backwards .img-slide.current {
  background: rgba(255,255,255,1.00);
  animation: none;
}

.img-slide img {
    max-height: 90vh;
  max-width: 100%;
  
  display: none;
  
  top: 0%;
  left: 50%;
  
  object-fit: contain;
}
.showProduct .img-slide img {
  display: block;
}

.img-forwards .img-slide.current img {

  position: absolute;
  
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, 100%);
  animation-name: slide-in-btt-img;
  animation-duration: .25s;
  animation-fill-mode: forwards;
  transition: opacity .25s;
}
.img-backwards .img-slide.current img {

  position: absolute;
  
  z-index: 2;
  opacity: 1;
  transform: translate(-50%, 0);
}
.img-backwards .img-slide.current img.hide {

  position: absolute;
  
  z-index: 2;
  opacity: 1;
  transform: translate(-50%, 0%);
  animation-name: slide-out-ttb-img;
  animation-duration: .25s;
  animation-fill-mode: forwards;
}
.img-forwards .img-slide.current img.hide {

  position: absolute;
  
  z-index: 1;
  opacity: 1;
  transform: translate(-50%, 0%);
  animation-name: fade-out-img;
  animation-duration: .25s;
  animation-fill-mode: forwards;
}

.img-forwards .img-slide.current img.show {
  
  position: relative;
  
  opacity: 1;
  z-index: 2;
  transform: translate(0, 0);
}
.img-backwards .img-slide.current img.show {
  
  position: relative;
  
  opacity: 0;
  z-index: 1;
  transform: translate(-50%, 0);
  
  animation-name: fade-in-img;
  animation-duration: .25s;
  animation-fill-mode: forwards;
}
.img-backwards .img-slide img.hide {

  position: relative;
  
  z-index: 2;
  opacity: 1;
  transform: translate(-50%, 0%);
  animation-name: slide-out-ttb-img;
  animation-duration: .25s;
  animation-fill-mode: forwards;
}
.img-forwards .img-slide img.hide {

  position: relative;
  
  z-index: 1;
  opacity: 1;
  transform: translate(-50%, 0%);
  animation-name: fade-out-img;
  animation-duration: .25s;
  animation-fill-mode: forwards;
}

@media (max-aspect-ratio: 1.3) {
  .img-slide img {
      max-height: calc(75vw * .9);
  }
}

@keyframes fade-in-img {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fade-out-img {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes slide-in-btt-img {
  from { transform: translate(-50%, 100%); }
  to { transform: translate(-50%, 0); }
}
@keyframes slide-out-ttb-img {
  from { transform: translate(-50%, 0); }
  to { transform: translate(-50%, 100%); }
}
@keyframes fade-in-bg {
  from { background: rgba(255,255,255,0.00); }
  to { background: rgba(255,255,255,1.00); }
}
@keyframes fade-out-bg {
  from { background: rgba(255,255,255,1.00); }
  to { background: rgba(255,255,255,0.00); }
}