#pano {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
#sceneList {position: absolute;top: 0;left: 0px;width: 220px;max-height: 100%;overflow-x: hidden;overflow-y: auto;margin-left: 0;-webkit-transition: margin-left 0.25s ease-in-out;transition: margin-left 0.25s ease-in-out;}
#sceneList .scenes {width: 100%;padding-left:0}
#sceneList .scene {display: block;width: 100%;height: 30px;}
#sceneList .scene .text {width: 100%;height: 100%;padding: 0 15px;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.no-touch #sceneList .scene:hover, #sceneList .scene.current {background-color: #606060;color:#ffffff;}

/* Link hotspot */
.link-hotspot {width:50px;height:50px;margin-left:-25px;margin-top:-25px;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 {text-align:center;width:50px;height:50px;cursor: pointer;color:#606060;background-color:#FFED00;border-radius:100%;line-height:50px; font-size:42px;}
.link-hotspot-tooltip {position: absolute;left: 100%;top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */margin-left: 3px;max-width: 300px;padding:5px 10px;border-radius: 4px;background-color:#000000;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.25s, -webkit-transform 0.25s, transform 0.25s, opacity 0.25s;transition: -ms-transform 0.25s, -webkit-transform 0.25s, transform 0.25s, opacity 0.25s;}
.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;}

/* 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: #FFED00;cursor: pointer;-webkit-transition: width 0.25s ease-in-out 0.25s, border-radius 0.25s ease-in-out 0.25s;transition: width 0.25s ease-in-out 0.25s, border-radius 0.25s ease-in-out 0.25s;}
.desktop.no-touch .info-hotspot .info-hotspot-header:hover,
.desktop .info-hotspot.visible .info-hotspot-header,
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {width: 260px;border-radius: 0px;-webkit-transition: width 0.25s ease-in-out;transition: width 0.25s ease-in-out}
.info-hotspot .info-hotspot-icon-wrapper {width: 40px;height: 40px;text-align:center}
.info-hotspot .info-hotspot-icon {font-size:24px;line-height:40px;color:#606060;}
.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.25s, padding 0s 0.25s;transition: width 0s 0.25s, padding 0s 0.25s;}
.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 0 10px;-webkit-transition: width 0s 0.25s, padding 0s 0.25s;transition: width 0s 0.25s, padding 0s 0.25s;}
.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-title h4 {margin:0}
.info-hotspot .info-hotspot-close-wrapper {position: absolute;left: 260px;top: 0;height: 40px;width: 40px;background-color: rgba(0,0,0,0.8);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.25s 0.25s,-webkit-transform 0.25s 0.25s,transform 0.25s 0.25s,visibility 0s 0.6s;transition: -ms-transform 0.25s 0.25s,-webkit-transform 0.25s 0.25s,transform 0.25s 0.25s,visibility 0s 0.6s;text-align:center;}
.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.25s, -webkit-transform 0.25s, transform 0.25s, visibility 0s 0s;transition: -ms-transform 0.25s, -webkit-transform 0.25s, transform 0.25s, visibility 0s 0s;}
.info-hotspot .info-hotspot-close-icon {font-size:40px;line-height:40px;}
.info-hotspot .info-hotspot-text {color:#ffffff;position: absolute;width: 300px;height: auto;max-height: 400px;top: 40px;left: 0;padding: 10px;background-color: rgba(0,0,0,0.8);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.25s, -webkit-transform 0.25s, transform 0.25s, visibility 0s 0.25s;transition: -ms-transform 0.25s, -webkit-transform 0.25s, transform 0.25s, visibility 0s 0.25s;-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.25s 0.25s, -webkit-transform 0.25s 0.25s, transform 0.25s 0.25s, visibility 0s 0s;transition: -ms-transform 0.25s 0.25s, -webkit-transform 0.25s 0.25s, transform 0.25s 0.25s, visibility 0s 0s;}
.info-hotspot-text a {color:#ffffff;background-color:transparent;display:inline-block;margin-left:5px;}
.info-hotspot-text a img {width:100%;}

/* Info hotspot modal */
.desktop .info-hotspot-modal {display: none;}
.info-hotspot-modal {color:#ffffff;top: 0;left: 0;position: fixed;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.25s, visibility 0s 0.7s;transition: opacity 0.2s ease-in-out 0.25s, 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: 10px;left: 10px;right: 10px;width: auto;height: 50px;background-color: rgba(0,0,0,0.8);opacity: 0;-webkit-transition: opacity 0.25s ease-in-out 0.2s;transition: opacity 0.25s ease-in-out 0.2s;}
.info-hotspot-modal.visible .info-hotspot-header {opacity: 1;-webkit-transition: opacity 0.25s ease-in-out 0.2s;transition: opacity 0.25s ease-in-out 0.2s;}
.info-hotspot-modal .info-hotspot-icon-wrapper {display:none;}
.info-hotspot-modal .info-hotspot-title-wrapper {position: absolute;top: 0;left: 0px;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;line-height:50px;text-align:center;background-color: rgba(0,0,0,0.8);cursor: pointer;}
.info-hotspot-modal .info-hotspot-close-icon {width:40px;height:40px;line-height:50px;font-size:40px;}
.info-hotspot-modal .info-hotspot-text {position: absolute;top: 60px;bottom: 10px;left: 10px;right: 10px;padding: 10px;background-color: rgba(0,0,0,0.8);overflow-y: auto;opacity: 0;-webkit-transition: opacity 0.25s ease-in-out;transition: opacity 0.25s ease-in-out;-moz-user-select: text;-webkit-user-select: text;-ms-user-select: text;user-select: text;line-height:1.5em}
.info-hotspot-modal.visible .info-hotspot-text {opacity: 1;-webkit-transition: opacity 0.25s ease-in-out 0.25s;transition: opacity 0.25s ease-in-out 0.25s;}
.viewControlButton {display:block;position:absolute;width:100%;bottom:0;text-align:center}
.viewControlButton a {width:40px;height:40px;display:inline-block;}
.viewControlButton a i {font-size:24px;line-height:40px;}