* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #000;
  color: #fff;
}

a, a:hover, a:active, a:visited {
  text-decoration: none;
  color: inherit;
}

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#titleBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  height: 40px;
  text-align: center;
}

.mobile #titleBar {
  height: 50px;
  right: 50px;
}

/* If there is a fullscreen button the title bar must make space for it */
body.fullscreen-enabled #titleBar {
  right: 80px;
}

body.fullscreen-enabled.mobile #titleBar {
  right: 100px;
}

/* If there are multiple scenes the title bar must make space for the scene list toggle */
body.multiple-scenes #titleBar {
  left: 40px;
}

body.multiple-scenes.mobile #titleBar {
  left: 50px;
}

#titleBar .sceneName {
  width: 100%;
  height: 100%;
  line-height: 30px;
  padding: 5px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.mobile #titleBar .sceneName {
  line-height: 40px;
}

#fullscreenToggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #fullscreenToggle {
  width: 50px;
  height: 50px;
}

body.fullscreen-enabled #fullscreenToggle {
  display: block;
}

#fullscreenToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #fullscreenToggle .icon {
  top: 10px;
  right: 10px;
}

#fullscreenToggle .icon.on {
  display: none;
}

#fullscreenToggle .icon.off {
  display: block;
}

#fullscreenToggle.enabled .icon.on {
  display: block;
}

#fullscreenToggle.enabled .icon.off {
  display: none;
}

#autorotateToggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #autorotateToggle {
  width: 50px;
  height: 50px;
}

/* If there is a fullscreen button, autorotate must placed a bit to the left */
body.fullscreen-enabled #autorotateToggle {
  right: 40px;
}

body.fullscreen-enabled.mobile #autorotateToggle {
  right: 50px;
}

#autorotateToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #autorotateToggle .icon {
  top: 10px;
  right: 10px;
}

#autorotateToggle .icon.on {
  display: none;
}

#autorotateToggle .icon.off {
  display: block;
}

#autorotateToggle.enabled .icon.on {
  display: block;
}

#autorotateToggle.enabled .icon.off {
  display: none;
}

#sceneListToggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #sceneListToggle {
  width: 50px;
  height: 50px;
}

#sceneListToggle .text {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 100%;
  line-height: 30px;
}

#sceneListToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #sceneListToggle .icon {
  top: 10px;
  right: 10px;
}

#sceneListToggle .icon.on {
  display: none;
}

#sceneListToggle .icon.off {
  display: block;
}

#sceneListToggle.enabled .icon.on {
  display: block;
}

#sceneListToggle.enabled .icon.off {
  display: none;
}

#sceneList {
  position: absolute;
  top: 0;
  left: -220px;
  padding-top: 40px;
  width: 220px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 0;
  -webkit-transition: margin-left 0.5s ease-in-out;
  transition: margin-left 0.5s ease-in-out;
}

.mobile #sceneList {
  padding-top: 50px;
}

#sceneList .scenes {
  width: 100%;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
}

.mobile #sceneList {
  width: 100%;
  height: 100%;
  left: -100%;
}

.mobile #sceneList.enabled {
  margin-left: 100%;
}

.mobile #sceneList .scenes {
  height: 100%;
}

#sceneList.enabled {
  margin-left: 220px;
}

#sceneList .scene {
  display: block;
  width: 100%;
  height: 30px;
}

.mobile #sceneList .scene {
  height: 40px;
}

#sceneList .scene .text {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile #sceneList .scene .text {
  line-height: 40px;
}

.no-touch #sceneList .scene:hover {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

#sceneList .scene.current {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

/* Hide scene list when only a single scene exists */
body.single-scene #sceneList, body.single-scene #sceneListToggle {
  display: none;
}

/* Link hotspot */

.link-hotspot {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.no-touch .link-hotspot:hover {
  opacity: 1;
}

.mobile .link-hotspot {
  width: 70px;
  height: 70px;
}

.link-hotspot-icon {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.link-hotspot-tooltip {
  position: absolute;
  left: 100%;
  top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */

  margin-left: 3px;

  font-size: 16px;

  max-width: 300px;

  padding: 8px 10px;

  border-radius: 5px;

  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);

  color: #fff;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  cursor: pointer;

  opacity: 0;

  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);

  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      opacity 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              opacity 0.3s;
}

.mobile .link-hotspot {
  top: 19px; /* ( 70 - (16 + 2*8) ) / 2 */
}

.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  opacity: 1;
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Prevent tooltip from triggering */
.link-hotspot-tooltip {
  pointer-events: none;
}
.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  pointer-events: all;
}

/* Fallback mode without pointer-events (IE8-10) */
.tooltip-fallback .link-hotspot-tooltip {
  display: none;
}
.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip {
  display: block;
}

/* Info hotspot */

.info-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s 0.2s;
  transition: opacity 0.2s 0.2s;
}

.no-touch .info-hotspot:hover {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.info-hotspot.visible {
  opacity: 1;
}

.info-hotspot .info-hotspot-header {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: rgb(103,115,131);
  cursor: pointer;
  -webkit-transition: width 0.3s ease-in-out 0.5s,
                      border-radius 0.3s ease-in-out 0.5s;
  transition: width 0.3s ease-in-out 0.5s,
              border-radius 0.3s ease-in-out 0.5s;
}

.mobile .info-hotspot .info-hotspot-header {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.desktop.no-touch .info-hotspot .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.desktop .info-hotspot.visible .info-hotspot-header,
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.info-hotspot .info-hotspot-icon-wrapper {
  width: 40px;
  height: 40px;
}

.mobile .info-hotspot .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot .info-hotspot-title-wrapper {
  position: absolute;
  left: 40px;
  top: 0;
  width: 0;
  height: 40px;
  padding: 0;
  overflow: hidden;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.desktop .info-hotspot.visible .info-hotspot-title-wrapper,
.desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
  width: 220px;
  padding: 0 5px;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.info-hotspot .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot .info-hotspot-close-wrapper {
  position: absolute;
  left: 260px;
  top: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 5px;
  background-color: rgb(78,88,104);
  visibility: hidden;
  -ms-transform: perspective(200px) rotateY(90deg);
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -ms-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0.6s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0.6s;
}

.desktop .info-hotspot.visible .info-hotspot-close-wrapper {
  visibility: visible;
  -ms-transform: perspective(200px) rotateY(0deg);
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0s;
}

.info-hotspot .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot .info-hotspot-text {
  position: absolute;
  width: 300px;
  height: auto;
  max-height: 200px;
  top: 40px;
  left: 0;
  padding: 10px;
  background-color: rgb(58,68,84);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  visibility: hidden;
  /* rotate(90deg) causes transition flicker on Firefox 58 */
  -ms-transform: perspective(200px) rotateX(-89.999deg);
  -webkit-transform: perspective(200px) rotateX(-89.999deg);
  transform: perspective(200px) rotateX(-89.999deg);
  -ms-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0.3s;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.desktop .info-hotspot.visible .info-hotspot-text {
  visibility: visible;
  -ms-transform: perspective(200px) rotateX(0deg);
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0s;
}

/* Info hotspot modal */

.desktop .info-hotspot-modal {
  display: none;
}

.info-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11000 !important;
  background-color: rgba(0,0,0,.5);
  line-height: 1.2em;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s,
                      visibility 0s 0.7s;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-in-out,
                      visibility 0s 0s;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
}

.info-hotspot-modal .info-hotspot-header {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 50px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal.visible .info-hotspot-header {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot-modal .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot-modal .info-hotspot-title-wrapper {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  width: auto;
  height: 50px;
  padding: 0 10px;
}

.info-hotspot-modal .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot-modal .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal .info-hotspot-close-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: rgb(78,88,104);
  background-color: rgba(78,88,104,0.8);
  cursor: pointer;
}

.info-hotspot-modal .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot-modal .info-hotspot-text {
  position: absolute;
  top: 110px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow-y: auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal.visible .info-hotspot-text {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.4s;
  transition: opacity 0.3s ease-in-out 0.4s;
}

/* View control buttons */

.viewControlButton {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

body.view-control-buttons .viewControlButton {
  display: block;
}

/* Hide controls when width is too small */
@media (max-width: 600px) {
  body.view-control-buttons .viewControlButton {
    display: none;
  }
}

.viewControlButton .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

/* Center is at margin-left: -20px */
.viewControlButton-1 {
  margin-left: -145px;
}
.viewControlButton-2 {
  margin-left: -95px;
}
.viewControlButton-3 {
  margin-left: -45px;
}
.viewControlButton-4 {
  margin-left: 5px;
}
.viewControlButton-5 {
  margin-left: 55px;
}
.viewControlButton-6 {
  margin-left: 105px;
}


/* SKY_SURFER_TOOLS_BUILD_V8_4 */
/* ================================================================
   SKY_SURFER_PREVIEW_ENHANCER_V33
   Isolated Sky Surfer destination preview.
   It intentionally avoids Marzipano's .link-hotspot-tooltip selectors
   so customized legacy CSS cannot crop or resize the generated 16:9 image.
   ================================================================ */
.ss-scene-preview-anchor {
  position: absolute !important;
  display: block !important;
  left: 100% !important;
  top: 50% !important;
  bottom: auto !important;
  width: 270px !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  z-index: 20 !important;
  -ms-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  transform: translateY(-50%) !important;
}

/* Transparent pointer bridge between the navigation hotspot and the preview.
   This keeps the visual gap while making it easier to reach the card. */
.ss-scene-preview-anchor::before {
  content: '' !important;
  position: absolute !important;
  right: 100% !important;
  top: 0 !important;
  width: 12px !important;
  height: 100% !important;
  background: transparent !important;
  pointer-events: auto !important;
}

.ss-scene-preview-card {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(20,20,20,.94) !important;
  color: #fff !important;
  white-space: normal !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.45) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);
  -webkit-transition:
    opacity .65s ease,
    visibility 0s linear .65s,
    -webkit-transform .42s ease !important;
  transition:
    opacity .65s ease,
    visibility 0s linear .65s,
    transform .42s ease !important;
}

.ss-scene-preview-media {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #111 !important;
  box-sizing: border-box !important;
}

.ss-scene-preview-image {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.ss-scene-preview-title {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 7px 8px 5px !important;
  color: #fff !important;
  background: transparent !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  unicode-bidi: plaintext;
  box-sizing: border-box !important;
}

.link-hotspot {
  touch-action: manipulation;
}

.touch .link-hotspot.preview-visible .ss-scene-preview-card,
.mobile .link-hotspot.preview-visible .ss-scene-preview-card {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (hover: none), (pointer: coarse) {
  .ss-scene-preview-anchor {
    left: 50% !important;
    top: auto !important;
    bottom: calc(100% + 12px) !important;
    width: min(230px, calc(100vw - 24px)) !important;
    margin: 0 !important;
    -ms-transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
  }

  .ss-scene-preview-card {
    opacity: 0 !important;
    visibility: hidden !important;
    -ms-transform: translateY(8px);
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  .link-hotspot.preview-visible .ss-scene-preview-card {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    -webkit-transition:
      opacity .18s ease,
      visibility 0s linear 0s,
      -webkit-transform .18s ease !important;
    transition:
      opacity .18s ease,
      visibility 0s linear 0s,
      transform .18s ease !important;
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@media (max-width: 430px) {
  .ss-scene-preview-anchor {
    width: min(230px, calc(100vw - 20px)) !important;
  }
  .ss-scene-preview-card {
    padding: 5px !important;
  }
  .ss-scene-preview-title {
    font-size: 13px !important;
    padding: 6px 6px 4px !important;
  }
}


/* Corrected v8.2 desktop behavior: physical mouse movement only. */
@media (hover: hover) and (pointer: fine) {
  .link-hotspot.ss-standard-preview-visible .ss-scene-preview-card {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-transition:
      opacity .18s ease,
      visibility 0s linear 0s,
      -webkit-transform .18s ease !important;
    transition:
      opacity .18s ease,
      visibility 0s linear 0s,
      transform .18s ease !important;
    -ms-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
  }
}

/* Navigation arrow style: Classic Marzipano */
/* Information icon style: Original Marzipano */
/* Fullscreen button style: Classic Marzipano */

/* Keep Marzipano's normal title-bar look, but let its own bar background
   continue behind the left and right controls across the full viewer width. */
#titleBar {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
}
.mobile #titleBar {
  left:0 !important;
  right:0 !important;
  width:auto !important;
  height:50px !important;
  background:rgba(58,68,84,.80) !important;
  background-color:rgba(58,68,84,.80) !important;
  background-image:none !important;
  box-sizing:border-box !important;
}
.mobile #titleBar .sceneName {
  display:block !important;
  position:absolute !important;
  top:0 !important;
  left:60px !important;
  right:108px !important;
  width:auto !important;
  max-width:none !important;
  height:50px !important;
  min-height:50px !important;
  line-height:50px !important;
  margin:0 !important;
  padding:0 6px !important;
  text-indent:0 !important;
  transform:none !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-align:center !important;
  direction:ltr !important;
  box-sizing:border-box !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}



/* SKY SURFER: reliable long scene-list scrolling on phones.
   This is intentionally applied whether or not the optional modern
   scene-list button is enabled. Marzipano keeps #sceneList fixed to the
   viewer and scrolls the inner .scenes element. */
.mobile #sceneList {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  left: -100% !important;
  padding-top: 50px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}
.mobile #sceneList.enabled {
  margin-left: 100% !important;
}
.mobile #sceneList .scenes {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: rgba(58,68,84,.80) !important;
  background-color: rgba(58,68,84,.80) !important;
  background-image: none !important;
}


/* Sky Surfer v8.2 robust idle interface.
   Runtime JS marks standard and recognized legacy/custom controls with
   .ss-idle-ui. Only opacity is animated; hotspot transforms remain untouched. */
.ss-idle-ui {
  -webkit-transition: opacity .24s ease !important;
  transition: opacity .24s ease !important;
}

body.ss-nav-hotspots-idle .ss-idle-ui,
body.ss-nav-hotspots-idle .link-hotspot,
body.ss-nav-hotspots-idle #titleBar,
body.ss-nav-hotspots-idle #sceneList,
body.ss-nav-hotspots-idle #sceneListToggle,
body.ss-nav-hotspots-idle #autorotateToggle,
body.ss-nav-hotspots-idle #fullscreenToggle,
body.ss-nav-hotspots-idle .viewControlButton,
body.ss-nav-hotspots-idle #viewUp,
body.ss-nav-hotspots-idle #viewDown,
body.ss-nav-hotspots-idle #viewLeft,
body.ss-nav-hotspots-idle #viewRight,
body.ss-nav-hotspots-idle #viewIn,
body.ss-nav-hotspots-idle #viewOut,
body.ss-nav-hotspots-idle .ss-audio-player,
body.ss-nav-hotspots-idle #player.player {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Desktop pointer also disappears during the idle presentation state.
   A genuine pointer move immediately removes the idle class and restores it. */
body.ss-nav-hotspots-idle,
body.ss-nav-hotspots-idle * {
  cursor: none !important;
}

/* An opened information panel remains readable while ordinary navigation UI,
   including an opened scene list, fades away. */
body.ss-nav-hotspots-idle .info-hotspot,
body.ss-nav-hotspots-idle .info-hotspot-modal {
  opacity: 1 !important;
}


/* SKY SURFER CONTENT EDITING v1 — multilingual-friendly sizing */
#titleBar .sceneName {
  font-size: clamp(14px, 2.2vw, 22px) !important;
  unicode-bidi: plaintext;
}
/* Put the selected phone title-bar height on body.mobile so the title bar and
   all three top controls can inherit the exact same vertical dimension. */
body.mobile {
  --ss-phone-title-height: 50px;
}
.mobile #titleBar {
  height: var(--ss-phone-title-height) !important;
}
.mobile #titleBar .sceneName {
  height: var(--ss-phone-title-height) !important;
  min-height: var(--ss-phone-title-height) !important;
  max-height: var(--ss-phone-title-height) !important;
}

/* Sky Surfer: Joyful Mysteries-style PHONE title wrapping.
   Desktop stays unchanged. Phone titles use the same readable behavior as the
   Joyful Mysteries project: one centered line when it fits, otherwise a centered
   second line instead of an ellipsis. */
@media (max-width: 768px) {
  .mobile #titleBar {
    height: var(--ss-phone-title-height, 50px) !important;
  }

  .mobile #titleBar .sceneName {
    /* Override Marzipano's normal nowrap/ellipsis title treatment. */
    display: flex !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;

    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    /* Keep the existing left/right control clearance from the generated theme. */
    width: auto !important;
    height: var(--ss-phone-title-height, 50px) !important;
    min-height: var(--ss-phone-title-height, 50px) !important;
    max-height: var(--ss-phone-title-height, 50px) !important;
    margin: 0 !important;
    padding: 4px 8px !important;

    /* Allow up to two readable lines; never replace the title with "...". */
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    overflow: hidden !important;
    line-height: 1.35 !important;

    box-sizing: border-box !important;
    unicode-bidi: plaintext;
  }
}
/* PHONE TOP-BAR SYNC: when Phone Title Bar Height is changed, keep the scene
   list, autorotate, and fullscreen control areas exactly the same height and
   vertically center their symbols. Widths remain the normal 50px so the title
   keeps the same horizontal room. */
@media (max-width: 768px) {
  body.mobile #sceneListToggle,
  body.mobile #autorotateToggle,
  body.mobile #fullscreenToggle {
    top: 0 !important;
    width: 50px !important;
    height: var(--ss-phone-title-height, 50px) !important;
    min-height: var(--ss-phone-title-height, 50px) !important;
    max-height: var(--ss-phone-title-height, 50px) !important;
    box-sizing: border-box !important;
  }

  body.mobile #sceneListToggle { left: 0 !important; }
  body.mobile #autorotateToggle { right: 50px !important; }
  body.mobile #fullscreenToggle { right: 0 !important; }

  /* Standard Marzipano image icons stay their normal size and move to the
     vertical center of the taller control area. */
  body.mobile #sceneListToggle .icon,
  body.mobile #autorotateToggle .icon,
  body.mobile #fullscreenToggle .icon {
    top: calc((var(--ss-phone-title-height, 50px) - 30px) / 2) !important;
  }

  body.mobile #sceneListToggle .icon,
  body.mobile #autorotateToggle .icon {
    right: 10px !important;
  }

  body.mobile #fullscreenToggle .icon {
    right: 10px !important;
  }

  /* Custom/modern scene-list and fullscreen styles use ::before artwork.
     Give that artwork a fixed 30px box so increasing the bar height centers
     the symbol instead of stretching it vertically. */
  body.mobile #sceneListToggle::before,
  body.mobile #fullscreenToggle::before {
    inset: auto 10px !important;
    top: 50% !important;
    height: 30px !important;
    transform: translateY(-50%) !important;
    background-position: center !important;
    background-size: contain !important;
  }

  /* An open scene list must begin below the newly sized header as well. */
  body.mobile #sceneList {
    padding-top: var(--ss-phone-title-height, 50px) !important;
  }
}

/* SKY SURFER CONTENT EDITING v1 — multilingual-friendly sizing */
#titleBar .sceneName {
  font-size: clamp(14px, 2.2vw, 22px) !important;
  unicode-bidi: plaintext;
}
/* Put the selected phone title-bar height on body.mobile so the title bar and
   all three top controls can inherit the exact same vertical dimension. */
body.mobile {
  --ss-phone-title-height: 50px;
}
.mobile #titleBar {
  height: var(--ss-phone-title-height) !important;
}
.mobile #titleBar .sceneName {
  height: var(--ss-phone-title-height) !important;
  min-height: var(--ss-phone-title-height) !important;
  max-height: var(--ss-phone-title-height) !important;
}

/* Sky Surfer: Joyful Mysteries-style PHONE title wrapping.
   Desktop stays unchanged. Phone titles use the same readable behavior as the
   Joyful Mysteries project: one centered line when it fits, otherwise a centered
   second line instead of an ellipsis. */
@media (max-width: 768px) {
  .mobile #titleBar {
    height: var(--ss-phone-title-height, 50px) !important;
  }

  .mobile #titleBar .sceneName {
    /* Override Marzipano's normal nowrap/ellipsis title treatment. */
    display: flex !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;

    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    /* Keep the existing left/right control clearance from the generated theme. */
    width: auto !important;
    height: var(--ss-phone-title-height, 50px) !important;
    min-height: var(--ss-phone-title-height, 50px) !important;
    max-height: var(--ss-phone-title-height, 50px) !important;
    margin: 0 !important;
    padding: 4px 8px !important;

    /* Allow up to two readable lines; never replace the title with "...". */
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    overflow: hidden !important;
    line-height: 1.35 !important;

    box-sizing: border-box !important;
    unicode-bidi: plaintext;
  }
}
/* PHONE TOP-BAR SYNC: when Phone Title Bar Height is changed, keep the scene
   list, autorotate, and fullscreen control areas exactly the same height and
   vertically center their symbols. Widths remain the normal 50px so the title
   keeps the same horizontal room. */
@media (max-width: 768px) {
  body.mobile #sceneListToggle,
  body.mobile #autorotateToggle,
  body.mobile #fullscreenToggle {
    top: 0 !important;
    width: 50px !important;
    height: var(--ss-phone-title-height, 50px) !important;
    min-height: var(--ss-phone-title-height, 50px) !important;
    max-height: var(--ss-phone-title-height, 50px) !important;
    box-sizing: border-box !important;
  }

  body.mobile #sceneListToggle { left: 0 !important; }
  body.mobile #autorotateToggle { right: 50px !important; }
  body.mobile #fullscreenToggle { right: 0 !important; }

  /* Standard Marzipano image icons stay their normal size and move to the
     vertical center of the taller control area. */
  body.mobile #sceneListToggle .icon,
  body.mobile #autorotateToggle .icon,
  body.mobile #fullscreenToggle .icon {
    top: calc((var(--ss-phone-title-height, 50px) - 30px) / 2) !important;
  }

  body.mobile #sceneListToggle .icon,
  body.mobile #autorotateToggle .icon {
    right: 10px !important;
  }

  body.mobile #fullscreenToggle .icon {
    right: 10px !important;
  }

  /* Custom/modern scene-list and fullscreen styles use ::before artwork.
     Give that artwork a fixed 30px box so increasing the bar height centers
     the symbol instead of stretching it vertically. */
  body.mobile #sceneListToggle::before,
  body.mobile #fullscreenToggle::before {
    inset: auto 10px !important;
    top: 50% !important;
    height: 30px !important;
    transform: translateY(-50%) !important;
    background-position: center !important;
    background-size: contain !important;
  }

  /* An open scene list must begin below the newly sized header as well. */
  body.mobile #sceneList {
    padding-top: var(--ss-phone-title-height, 50px) !important;
  }
}

/* SKY SURFER CONTENT EDITING v1 — multilingual-friendly sizing */
#titleBar .sceneName {
  font-size: clamp(14px, 2.2vw, 22px) !important;
  unicode-bidi: plaintext;
}
/* Put the selected phone title-bar height on body.mobile so the title bar and
   all three top controls can inherit the exact same vertical dimension. */
body.mobile {
  --ss-phone-title-height: 50px;
}
.mobile #titleBar {
  height: var(--ss-phone-title-height) !important;
}
.mobile #titleBar .sceneName {
  height: var(--ss-phone-title-height) !important;
  min-height: var(--ss-phone-title-height) !important;
  max-height: var(--ss-phone-title-height) !important;
}

/* Sky Surfer: Joyful Mysteries-style PHONE title wrapping.
   Desktop stays unchanged. Phone titles use the same readable behavior as the
   Joyful Mysteries project: one centered line when it fits, otherwise a centered
   second line instead of an ellipsis. */
@media (max-width: 768px) {
  .mobile #titleBar {
    height: var(--ss-phone-title-height, 50px) !important;
  }

  .mobile #titleBar .sceneName {
    /* Override Marzipano's normal nowrap/ellipsis title treatment. */
    display: flex !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;

    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    /* Keep the existing left/right control clearance from the generated theme. */
    width: auto !important;
    height: var(--ss-phone-title-height, 50px) !important;
    min-height: var(--ss-phone-title-height, 50px) !important;
    max-height: var(--ss-phone-title-height, 50px) !important;
    margin: 0 !important;
    padding: 4px 8px !important;

    /* Allow up to two readable lines; never replace the title with "...". */
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    overflow: hidden !important;
    line-height: 1.35 !important;

    box-sizing: border-box !important;
    unicode-bidi: plaintext;
  }
}
/* PHONE TOP-BAR SYNC: when Phone Title Bar Height is changed, keep the scene
   list, autorotate, and fullscreen control areas exactly the same height and
   vertically center their symbols. Widths remain the normal 50px so the title
   keeps the same horizontal room. */
@media (max-width: 768px) {
  body.mobile #sceneListToggle,
  body.mobile #autorotateToggle,
  body.mobile #fullscreenToggle {
    top: 0 !important;
    width: 50px !important;
    height: var(--ss-phone-title-height, 50px) !important;
    min-height: var(--ss-phone-title-height, 50px) !important;
    max-height: var(--ss-phone-title-height, 50px) !important;
    box-sizing: border-box !important;
  }

  body.mobile #sceneListToggle { left: 0 !important; }
  body.mobile #autorotateToggle { right: 50px !important; }
  body.mobile #fullscreenToggle { right: 0 !important; }

  /* Standard Marzipano image icons stay their normal size and move to the
     vertical center of the taller control area. */
  body.mobile #sceneListToggle .icon,
  body.mobile #autorotateToggle .icon,
  body.mobile #fullscreenToggle .icon {
    top: calc((var(--ss-phone-title-height, 50px) - 30px) / 2) !important;
  }

  body.mobile #sceneListToggle .icon,
  body.mobile #autorotateToggle .icon {
    right: 10px !important;
  }

  body.mobile #fullscreenToggle .icon {
    right: 10px !important;
  }

  /* Custom/modern scene-list and fullscreen styles use ::before artwork.
     Give that artwork a fixed 30px box so increasing the bar height centers
     the symbol instead of stretching it vertically. */
  body.mobile #sceneListToggle::before,
  body.mobile #fullscreenToggle::before {
    inset: auto 10px !important;
    top: 50% !important;
    height: 30px !important;
    transform: translateY(-50%) !important;
    background-position: center !important;
    background-size: contain !important;
  }

  /* An open scene list must begin below the newly sized header as well. */
  body.mobile #sceneList {
    padding-top: var(--ss-phone-title-height, 50px) !important;
  }
}

/* Sky Surfer: Joyful Mysteries-style PHONE title wrapping.
   Desktop stays unchanged. Phone titles use the same readable behavior as the
   Joyful Mysteries project: one centered line when it fits, otherwise a centered
   second line instead of an ellipsis. */
@media (max-width: 768px) {
  .mobile #titleBar {
    height: var(--ss-phone-title-height, 50px) !important;
  }

  .mobile #titleBar .sceneName {
    /* Override Marzipano's normal nowrap/ellipsis title treatment. */
    display: flex !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;

    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    /* Keep the existing left/right control clearance from the generated theme. */
    width: auto !important;
    height: var(--ss-phone-title-height, 50px) !important;
    min-height: var(--ss-phone-title-height, 50px) !important;
    max-height: var(--ss-phone-title-height, 50px) !important;
    margin: 0 !important;
    padding: 4px 8px !important;

    /* Allow up to two readable lines; never replace the title with "...". */
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    overflow: hidden !important;
    line-height: 1.35 !important;

    box-sizing: border-box !important;
    unicode-bidi: plaintext;
  }
}
/* PHONE TOP-BAR SYNC: when Phone Title Bar Height is changed, keep the scene
   list, autorotate, and fullscreen control areas exactly the same height and
   vertically center their symbols. Widths remain the normal 50px so the title
   keeps the same horizontal room. */
@media (max-width: 768px) {
  body.mobile #sceneListToggle,
  body.mobile #autorotateToggle,
  body.mobile #fullscreenToggle {
    top: 0 !important;
    width: 50px !important;
    height: var(--ss-phone-title-height, 50px) !important;
    min-height: var(--ss-phone-title-height, 50px) !important;
    max-height: var(--ss-phone-title-height, 50px) !important;
    box-sizing: border-box !important;
  }

  body.mobile #sceneListToggle { left: 0 !important; }
  body.mobile #autorotateToggle { right: 50px !important; }
  body.mobile #fullscreenToggle { right: 0 !important; }

  /* Standard Marzipano image icons stay their normal size and move to the
     vertical center of the taller control area. */
  body.mobile #sceneListToggle .icon,
  body.mobile #autorotateToggle .icon,
  body.mobile #fullscreenToggle .icon {
    top: calc((var(--ss-phone-title-height, 50px) - 30px) / 2) !important;
  }

  body.mobile #sceneListToggle .icon,
  body.mobile #autorotateToggle .icon {
    right: 10px !important;
  }

  body.mobile #fullscreenToggle .icon {
    right: 10px !important;
  }

  /* Custom/modern scene-list and fullscreen styles use ::before artwork.
     Give that artwork a fixed 30px box so increasing the bar height centers
     the symbol instead of stretching it vertically. */
  body.mobile #sceneListToggle::before,
  body.mobile #fullscreenToggle::before {
    inset: auto 10px !important;
    top: 50% !important;
    height: 30px !important;
    transform: translateY(-50%) !important;
    background-position: center !important;
    background-size: contain !important;
  }

  /* An open scene list must begin below the newly sized header as well. */
  body.mobile #sceneList {
    padding-top: var(--ss-phone-title-height, 50px) !important;
  }
}
/* Clean transparent autorotate control. Keep Marzipano's original white video-style play/pause artwork. */
#autorotateToggle { background:transparent !important; background-color:transparent !important; border:0 !important; box-shadow:none !important; top:0 !important; right:40px !important; width:40px !important; height:40px !important; padding:0 !important; box-sizing:border-box !important; }
#fullscreenToggle { top:0 !important; right:0 !important; width:40px !important; height:40px !important; box-sizing:border-box !important; }
.mobile #autorotateToggle { top:0 !important; right:50px !important; width:50px !important; height:var(--ss-phone-title-height, 50px) !important; }
.mobile #fullscreenToggle { top:0 !important; right:0 !important; width:50px !important; height:var(--ss-phone-title-height, 50px) !important; }
#autorotateToggle .icon { opacity:1 !important; visibility:visible !important; filter:drop-shadow(0 1px 2px rgba(0,0,0,.32)); }
#autorotateToggle .icon.off { display:block; }
#autorotateToggle .icon.on { display:none; }
#autorotateToggle.enabled .icon.off { display:none; }
#autorotateToggle.enabled .icon.on { display:block; }
.no-touch #autorotateToggle:hover { background:rgba(20,28,38,.06) !important; border-radius:8px; }

/* Sky Surfer casual image-copy protection */
#pano, #pano canvas, #pano img, .ss-scene-preview-image {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
#pano img, .ss-scene-preview-image { -webkit-user-drag: none !important; user-drag: none !important; }


/* SKY_SURFER_PHONE_LANDSCAPE_FULL_BLEED_V1
   Keep phone landscape/fullscreen tours centered edge-to-edge. The panorama is
   allowed to extend beneath display cutout/safe-area regions; only UI controls
   are inset when the browser reports safe-area values. */
html,
body {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#pano {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}

@media (orientation: landscape) and (pointer: coarse),
       (orientation: landscape) and (max-height: 500px) {
  html,
  body {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
  }

  #pano {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
  }
}

@supports (height: 100dvh) {
  @media (orientation: landscape) and (pointer: coarse),
         (orientation: landscape) and (max-height: 500px) {
    html,
    body,
    #pano {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
}

/* With viewport-fit=cover the panorama fills the physical landscape screen.
   Move only the interactive UI inward when a phone reports a cutout/safe area. */
@supports (left: env(safe-area-inset-left)) {
  @media (orientation: landscape) and (pointer: coarse),
         (orientation: landscape) and (max-height: 500px) {
    .mobile #sceneListToggle {
      left: env(safe-area-inset-left) !important;
    }

    .mobile #fullscreenToggle {
      right: env(safe-area-inset-right) !important;
    }

    .mobile #autorotateToggle {
      right: calc(50px + env(safe-area-inset-right)) !important;
    }

    .mobile #titleBar .sceneName {
      left: calc(60px + env(safe-area-inset-left)) !important;
      right: calc(108px + env(safe-area-inset-right)) !important;
    }
  }
}