* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: black;
  overflow: hidden;
  width: 100vw;
  height: 100dvh;
}

.slides-container {
  position: relative;
  width: 100vw;
  height: 100dvh;
}

.slide {
  position: relative;
  position: absolute;

  width: 100%;
  height: 100%;

  top: 0;
  left: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  z-index: 1;

  transition: opacity 1.1s ease;
}

.slide.active {
  overflow: hidden;
  opacity: 1;
  z-index: 2;
}

.slide img {
  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  display: block;

  object-fit: contain;

  pointer-events: none;

  border-radius: 6px;
}

body {
  touch-action: none;
}

.menu-hotspot {
  position: fixed;

  top: 0;
  left: 50%;

  transform: translateX(-50%);

  width: 76%;
  height: 60px;

  z-index: 2000;
}

.menu-slide {
  opacity: 1 !important;

  transform: translateY(-100%);

  transition: transform 0.5s ease;

  z-index: 500;
}

.menu-slide.active {
  transform: translateY(0%);

  z-index: 500;
}

.close-hotspot {
  position: fixed;

  bottom: 0;
  left: 50%;

  transform: translateX(-50%);

  width: 76%;
  height: 90px;

  z-index: 3000;

  display: none;
}

.slide-hotspot-layer {
  position: absolute;

  inset: 0;

  z-index: 20;
}

.menu-hotspot-layer {
  position: absolute;

  inset: 0;

  z-index: 20;
}

.source-hotspot-layer {
  position: absolute;

  inset: 0;

  z-index: 20;
}

.amazon-hotspot {
  position: absolute;

  left: 25%;
  top: 40%;

  width: 50%;
  height: 8%;

  background: rgba(255,0,0,0.25);

  z-index: 9999;
}

.email-hotspot {
  position: absolute;

  left: 25%;
  top: 55%;

  width: 50%;
  height: 8%;

  background: rgba(0,255,255,0.25);

  z-index: 9999;
}

.optional-hotspot {
  position: absolute;
  pointer-events: auto;
z-index: 9999;

  left: 25%;
  top: 85%;

  width: 30%;
  height: 3%;

  background: rgba(255,0,0,0.25);
}

.optional-close-hotspot {
  position: absolute;

  top: 3%;
  right: 30%;

  width: 34%;
  height: 5%;

  background: rgba(255,0,0,0.25);

  z-index: 100;
}

.optional-continue-hotspot {
  position: absolute;

  bottom: 4%;
  left: 50%;

  transform: translateX(-50%);

  width: 40%;
  height: 6%;

  background: rgba(0,255,255,0.25);

  z-index: 100;
}


.optional-opening {
  animation: optionalRise 0.5s ease-in-out;
}

@keyframes optionalRise {

  0% {
    transform: translateY(14%);

  }

  100% {
    transform: translateY(0%);
  
  }

}

.layer2-hotspot {
  position: absolute;

  left: 25%;
  top: 85%;

  width: 30%;
  height: 3%;

  background: rgba(0,255,0,0.25);

  z-index: 9999;
}

.menu-layer1-hotspot {
  position: absolute;

  left: 25%;
  top: 30%;

  width: 50%;
  height: 8%;

  background: rgba(0,0,255,0.25);

  z-index: 9999;
}

.menu-layer2-hotspot {
  position: absolute;

  left: 25%;
  top: 45%;

  width: 50%;
  height: 8%;

  background: rgba(0,255,0,0.25);

  z-index: 9999;
}

.menu-source-hotspot {
  position: absolute;

  left: 25%;
  top: 60%;

  width: 50%;
  height: 8%;

  background: rgba(255,0,0,0.25);

  z-index: 9999;
}

.menu2-layer1-hotspot {
  position: absolute;

  left: 25%;
  top: 30%;

  width: 50%;
  height: 8%;

  background: rgba(0,0,255,0.25);

  z-index: 9999;
}

.menu2-layer2-hotspot {
  position: absolute;

  left: 25%;
  top: 45%;

  width: 50%;
  height: 8%;

  background: rgba(0,255,0,0.25);

  z-index: 9999;
}

.menu2-source-hotspot {
  position: absolute;

  left: 25%;
  top: 60%;

  width: 50%;
  height: 8%;

  background: rgba(255,0,0,0.25);

  z-index: 9999;
}

.menus-layer1-hotspot {
  position: absolute;

  left: 25%;
  top: 30%;

  width: 50%;
  height: 8%;

  background: rgba(0,0,255,0.25);

  z-index: 9999;
}

.menus-layer2-hotspot {
  position: absolute;

  left: 25%;
  top: 45%;

  width: 50%;
  height: 8%;

  background: rgba(0,255,0,0.25);

  z-index: 9999;
}

.menus-source-hotspot {
  position: absolute;

  left: 25%;
  top: 60%;

  width: 50%;
  height: 8%;

  background: rgba(255,0,0,0.25);

  z-index: 9999;
}


.menu-hotspot,
.close-hotspot,

.optional-hotspot,
.optional-close-hotspot,
.optional-continue-hotspot,

.layer2-hotspot,

.menu-layer1-hotspot,
.menu-layer2-hotspot,
.menu-source-hotspot,

.menu2-layer1-hotspot,
.menu2-layer2-hotspot,
.menu2-source-hotspot,

.menus-layer1-hotspot,
.menus-layer2-hotspot,
.menus-source-hotspot,

.amazon-hotspot,
.email-hotspot {

  cursor: pointer;

}