.hotspot-title-floater {
  position: absolute;
  top: 72px;
  left: 0;
  width: 100vw;
  justify-content: center;
  align-items: stretch;
  pointer-events: none;
}
.hotspot-title-floater span {
  text-align: center;
  color: white;
  font-size: 1.25rem;
  font-weight: bold;
  max-width: calc(100vw - 180px);
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
}
.hotspot-title-floater .grad-start {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}
.hotspot-title-floater .grad-end {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.button-row {
  width: 100%;
  justify-content: space-around;
}

.tutorial-img {
  max-width: 90%;
  max-height: 240px;
  margin: 16px 0;
}

.tutorial-txt {
  margin: 24px 0;
}

fv-tutorial-slideshow {
  width: 100%;
}
fv-tutorial-slideshow .tutorial-slides {
  position: relative;
  min-height: 260px;
  width: 100%;
}
fv-tutorial-slideshow .tutorial-slide {
  position: absolute;
  top: 16px;
  left: 0;
  width: 100%;
  overflow: hidden;
  transition-property: left;
  transition-duration: 650ms;
}
fv-tutorial-slideshow .tutorial-slide img {
  max-width: 270px;
}
fv-tutorial-slideshow .tutorial-slide > div {
  text-align: center;
  margin: 16px;
}
fv-tutorial-slideshow .slide-hide-left {
  left: -100%;
}
fv-tutorial-slideshow .slide-hide-right {
  left: 100%;
}

.tutorial-content button {
  font-size: 16px;
}
.tutorial-content > button:first-of-type {
  margin: 12px 0;
}
.tutorial-content .btn-skip {
  color: #808080;
  background-color: white;
}
.tutorial-content h1 {
  font-size: 1.75rem;
  text-align: center;
}

.audio-row {
  width: 100%;
  justify-content: space-between;
  margin-bottom: 12px;
}
.audio-row .audio-switch {
  position: relative;
  width: 88px;
  height: 44px;
  background-color: #E0E0E0;
  border-radius: 22px;
}
.audio-row .audio-label {
  font-weight: bold;
}
.audio-row label {
  margin: 0 12px;
}
.audio-row .switch-handle {
  position: relative;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  transition-property: left;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
  cursor: pointer;
}
.audio-row input[type=checkbox] {
  display: none;
}
.audio-row input[type=checkbox]:checked ~ .switch-handle {
  left: 44px;
}

.splide {
  width: 100%;
  margin-bottom: 32px;
}

.splide__arrow {
  display: none;
}

.splide__pagination {
  bottom: -1.25em;
}

.splide__pagination__page {
  width: 10px;
  height: 10px;
  opacity: 1;
  background-color: #c4c4c4;
}
.splide__pagination__page.is-active {
  transform: none;
  background-color: #FB673E;
}

.hotspot_inner {
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
}

.btm-btns {
  display: none;
  position: absolute;
  left: 0;
  bottom: 16px;
  width: 100%;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.btn-direction {
  width: 44px;
  height: 44px;
  background-color: white;
  padding: 8px;
  border-radius: 6px;
  z-index: 2;
  margin: 0 16px;
}

canvas {
  cursor: grab;
}
canvas:active {
  cursor: grabbing;
}

.left, .right {
  display: none;
}

#preloader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0085BC;
}
#preloader video {
  height: 320px;
}

@media (hover: none) {
  .btm-btns {
    display: flex;
  }

  .left, .right {
    display: block;
    position: fixed;
    bottom: 44px;
    left: 16px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #00000040;
  }

  .right {
    left: unset;
    right: 16px;
  }

  #lStick, #rStick {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50px;
    left: 50px;
    width: 1px;
    height: 1px;
  }

  .thumbstick {
    min-width: 56px;
    min-height: 56px;
    border: 1px solid white;
    border-radius: 50%;
    background-color: #ffffff54;
  }
}
@media (min-width: 1025px) {
  .tutorial-img {
    max-height: 360px;
  }

  fv-tutorial-slideshow .tutorial-slides {
    min-height: 360px;
  }
  fv-tutorial-slideshow .tutorial-slide img {
    max-width: unset;
  }
}

/*# sourceMappingURL=vengeanceville.css.map */