* { font-family: 'Raleway', Arial, sans-serif; box-sizing: border-box; box-shadow: none !important; }

html, body { overflow: hidden; padding: 0; margin: 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #1A1A1A; touch-action: none; }

#content { position: absolute; top: 60px; left: 0; right: 0; bottom: 0; overflow: hidden; }
#tour { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: white; z-index: 0; 
        -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#tour > div { position: absolute; }
#tour-container { position: relative; width: 100%; height: 100%; overflow: hidden; }

.loading { display: inline-block; height: 32px; line-height: 32px; width: 128px; margin: -16px -64px; position: absolute; left: 50%; bottom: 50%; z-index: 300;
            border-radius: 2px; font-size: 14px; background: #323232; color: white; padding: 0 15px; 
            transition: all 0.3s; -webkit-transition: all 0.3s; pointer-events: none; text-align: center; }
.loading.hidden { opacity: 0; transform: translate3d(0, 15px, 0); -webkit-transform: translate3d(0, 15px, 0); }
.loading .spinner { width: 32px; height: 32px; }
body.Firefox .loading { transform: none; transition: none; }


#tutorial { background: white; width: 260px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; top: 77px; left: 12px; pointer-events: none; border: 2px solid #666;
            transform: translate3d(0, -15px, 0); -webkit-transform: translate3d(0,-15px,0); font-size: 13px; font-weight: 500; position: absolute; z-index:300; opacity: 0; visibility: hidden;;
            transition: transform 0.3s, opacity 0.3s, visibility 0.3s; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, visibility 0.3s; }
#tutorial .footer { text-align: right; }
#tutorial .footer i { position: absolute; left: 0; bottom: 0; font-size: 22px; line-height: 36px; color: #4CAF50; padding: 0 12px; opacity: 0; visibility: hidden; transform: scale(2.5); transition: all 0.5s; }
#tutorial .footer button { pointer-events: all; background: none; border: none; outline: none; line-height: 36px; padding: 0 12px; color: #2196F3; font-size: 12px; cursor: pointer; transition: all 0.3s; }
#tutorial .footer button:hover { text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
#tutorial .footer button:before { content: "DISMISS"; }
#tutorial.show { visibility: visible; opacity: 1; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0,0,0); }
#tutorial.complete { color: #4CAF50; }
#tutorial.complete .footer i { transform: scale(1); opacity: 1; visibility: visible; }
#tutorial .body { display: block; padding: 8px 12px 0 12px; }
#tutorial:after { bottom:-10px; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-color: transparent; border-top-color: white; border-width: 10px; margin: -10px;}
#tutorial:before { bottom:-13px; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-color: transparent; border-top-color: #666; border-width: 13px; margin: -13px;}

#tutorial.show.shake { -webkit-animation: shake 0.5s forwards; }

#tutorial[topic=tourRotate] { margin-left: -130px; left: 50%; top: 20%; }
#tutorial[topic=tourRotate] .body:before { content: 'Drag to look around.'; }

#tutorial[topic=tourMove1] { margin-left: -130px; left: 50%; top: 40%; }
#tutorial[topic=tourMove1] .body:before { content: 'Click to move forward.'; }

#tutorial[topic=tourMove2] { margin-left: -130px; left: 50%; top: 30%; }
#tutorial[topic=tourMove2] .body:before { content: 'Try also using the scroll wheel or keyboard arrows to move around.'; }

#tutorial[topic="360Rotate1"] { margin-left: -130px; left: 50%; top: 20%; }
#tutorial[topic="360Rotate1"] .body:before { content: 'Drag in a circular motion or use the slider to rotate.'; }

#tutorial[topic="360Rotate2"] { left: auto; right: 60px; top: 50%; }
#tutorial[topic="360Rotate2"]:before { bottom: 50%; right: -13px; left: auto; border-top-color: transparent; border-left-color: #666; }
#tutorial[topic="360Rotate2"]:after { bottom: 50%; right: -10px; left: auto; border-top-color: transparent; border-left-color: white; }
#tutorial[topic="360Rotate2"] .body:before { content: 'Try also using this slider bar to rotate the image.'; }

#tutorial[topic=floors] { margin-left: -130px; left: 50%; bottom: 95px; top: auto; }
#tutorial[topic=floors] .body:before { content: 'Click to view another floor.'; }

#tutorial[topic=settings] { margin-left: -130px; left: 50%; top: 155px; }
#tutorial[topic=settings]:before { bottom: auto; top: -13px; border-top-color: transparent; border-bottom-color: #666; }
#tutorial[topic=settings]:after { bottom: auto; top: -10px; border-top-color: transparent; border-bottom-color: white; }
#tutorial[topic=settings] .body:before { content: 'Click options to change the style.'; }

#tutorial[topic=tour1] { margin-left: -130px; left: 50%; top: 20%; }
#tutorial[topic=tour1] .body:before { content: 'Click a room to fly into the walking tour.'; }

#tutorial[topic=tour2] { top: auto; bottom: 95px; left: 30px; }
#tutorial[topic=tour2]:before { left: 25px; }
#tutorial[topic=tour2]:after { left: 25px; }
#tutorial[topic=tour2] .body:before { content: 'Try also clicking here to jump to the walking tour.'; }

#tutorial[topic="360"] { top: auto; bottom: 95px; left: 30px; }
#tutorial[topic="360"]:before { left: 90px; }
#tutorial[topic="360"]:after { left: 90px; }
#tutorial[topic="360"] .body:before { content: 'Click here to jump to the birds-eye view.'; }

#tutorial[topic="2D"] { top: auto; bottom: 95px; left: 55px; }
#tutorial[topic="2D"] .body:before { content: 'Click here for the floor plan view.'; }

#tutorial[topic=end] { left: auto; right: 20px; top: auto; bottom: 95px; }
#tutorial[topic=end]:before { left: auto; right: 35px; }
#tutorial[topic=end]:after { left: auto; right: 35px; }
#tutorial[topic=end] .footer button:before { content: "CLOSE"; }
#tutorial[topic=end] .body:before { content: 'Click here any time to bring back the contextual help.'; }

#full-map { width: 100%; height: 300px; position: relative; }
#full-map-container { width: 100%; height: 100%; }
#full-map .address { width: 200px; position: absolute; top: 6px; left: 10px; padding: 10px; background: white; color: #333; border-radius: 2px; }
#full-map .address span { display: block; font-size: 12px }
#full-map .address span:first-child { font-weight: bold; font-size: 14px; }

@keyframes shake { 
    0% { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } 
    20% { transform: translate3d(0,15px,0); -webkit-transform: translate3d(0,15px,0); } 
    40% { transform: translate3d(0,-15px,0); -webkit-transform: translate3d(0,-15px,0); }
    60% { transform: translate3d(0,15px,0); -webkit-transform: translate3d(0,15px,0); } 
    80% { transform: translate3d(0,-15px,0); -webkit-transform: translate3d(0,-15px,0); }
    100% { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }
}
@-webkit-keyframes shake { 
    0% { -webkit-transform: translate3d(0,0,0); } 
    20% { -webkit-transform: translate3d(0,15px,0); } 
    40% { -webkit-transform: translate3d(0,-15px,0); }
    60% { -webkit-transform: translate3d(0,15px,0); } 
    80% { -webkit-transform: translate3d(0,-15px,0); }
    100% { -webkit-transform: translate3d(0,0,0); }
}




.spinner {
  width: 48px;
  height: 48px;
  background-color: #fff;
  display: inline-block;
  vertical-align: top; 
  margin-left: -15px;

  border-radius: 100%;  
  -webkit-animation: scaleout 1.0s infinite ease-in-out;
  animation: scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
  0% { -webkit-transform: scale(0.0) }
  100% {
    -webkit-transform: scale(0.5);
    opacity: 0;
  }
}

@keyframes scaleout {
  0% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 100% {
    transform: scale(0.7);
    -webkit-transform: scale(0.5);
    opacity: 0;
  }
}



body.dragging * { cursor: -webkit-grabbing !important; }

.square-button { float: left; width: 50px; height: 50px; margin-right: 15px; border-radius: 5px; cursor: pointer; transition: all 0.3s; background-size: contain; 
                        text-align: center; line-height: 50px; color: white; visibility: visible; background-color: rgba(0,0,0,1); opacity: 0.4; position: relative; }
.square-button:hover { background-color: rgba(0,0,0,0.8);  opacity: 0.8; }
.square-button.active { background-color: rgba(0,0,0,0.8); opacity: 1; }
.square-button:last-child { margin-right: 0; }

.square-button[data-title]:before { content: attr(data-title); position: absolute; left: 50%; padding: 4px; background-color: rgba(0,0,0,1); color: white; top: -34px;
                                    font-size: 12px; line-height: 14px; height: 22px; opacity: 0; visibility: hidden; width: 88px; border-radius: 2px; 
                                    margin-left: -44px; box-sizing: border-box; transition: all 0.3s; z-index: 200; }
.square-button[data-title]:after { content: ' '; position: absolute; left: 50%; width: 0; height: 0; top: -4px; border: 8px solid transparent; border-top-color: black; margin: -8px; 
                                   opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 200; }
.square-button[data-title].hover:before { visibility: visible; opacity: 1; }
.square-button[data-title].hover:after { visibility: visible; opacity: 1; }

#bottom-toolbar { position: absolute; left: 30px; right: 30px; bottom: 30px; z-index: 100; }

#share-panel { position: absolute; bottom: 65px; background-color: rgba(0,0,0,0.4); line-height: 50px; height: 150px; color: white; width: 50px; border-radius: 5px; right: 65px; 
               visibility: hidden; opacity: 0; transition: all 0.5s; }
#share-panel.active { visibility: visible; opacity: 1; transition: all 0.5s; }
#share-panel a { width: 50px; height: 50px; display: block; float: left; text-align: center; color: white; font-size: 22px; transition: all 0.5s; }
#share-panel a:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; }
#share-panel a:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
#share-panel a:hover { background-color: rgba(0,0,0,0.5); }
#share-panel:after { content: ' '; position: absolute; width: 0; height: 0; margin: -10px; border: 10px solid transparent; border-top-color: rgba(0,0,0,0.4); bottom: -10px; right: 25px; }

#mode-selection { position: absolute; left: 0; bottom: 0; font-size: 16px; }
#mode-selection > div[data-mode]:not(.show) { visibility: hidden; opacity: 0; }
#mode-selection > div[data-mode=tour] { background-image: url('../img/tour_active.png') }
#mode-selection > div[data-mode="360"] { background-image: url('../img/360_active.png') }
#mode-selection > div[data-mode="2D"] { background-image: url('../img/2D_active.png') }

#terms-link { position: absolute; right: 0; bottom: -20px; height: 20px; line-height: 20px; font-size: 12px; width: 50px; text-align: center; cursor: pointer; }
#terms-link:hover { text-decoration: underline; }

#terms-popup { position: absolute; top: 0; bottom:0; left: 0; right: 0; background: rgba(0,0,0,0.9); padding: 100px 20%; color: #ddd; z-index: 300; font-size: 90%; 
               line-height: 150%; overflow-y: auto; visibility: hidden; opacity: 0; transition: all 0.5s; }
#terms-popup a { color: #ddd !important; }
#terms-popup.active { visibility: visible; opacity: 1; }
#terms-popup .close { position: fixed; right: 20%; margin-right: -100px; width: 100px; cursor: pointer; }
#terms-popup .close:hover { text-decoration: underline; }


#floor-selection { position: absolute; bottom: 50px; height: 0; margin: 0 auto; left: 0; right: 0; font-size: 0; text-align: center; }
#floor-selection:empty { display: none; }
#floor-selection:before { content: 'LEVEL'; font-size: 16px; display: inline-block; line-height: 50px; height: 50px; width: 100px; text-align: center; color: white; 
                          background: rgba(0,0,0,0.4); border-top-left-radius: 5px; border-bottom-left-radius: 5px; vertical-align: middle; }
#floor-selection > div { display: inline-block; width: 50px; height: 50px; background: black;  background-color: rgba(0,0,0,1); opacity: 0.4;
                        cursor: pointer; transition: all 0.3s; font-size: 16px; vertical-align: middle; color: white; text-align: center; line-height: 50px; border-left: 1px solid rgba(100, 100, 100, 0.4); }
#floor-selection > div:hover { background-color: rgba(0,0,0,0.8);  opacity: 0.8; }
#floor-selection > div.active { background-color: rgba(0,0,0,0.8); opacity: 1; }
#floor-selection > div:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

#info-buttons { position: absolute; right: 0; bottom: 0; font-size: 30px; }
#info-icon { background-image: url('../img/info_active.png'); }
#share-icon { background-image: url('../img/share_active.png'); }



#title-bar { position: absolute; top: 0; left: 0; right: 0; height: 60px; background: #444; color: white; font-size: 16px; box-shadow: 0px 2px 5px rgba(0,0,0,0.5); text-align: center; }
#model { position: absolute; left: 0; top: 0; height: 60px; background: #111; padding: 0 28px; line-height: 60px; text-transform: uppercase; font-weight: 500; cursor: pointer; }
#model:after { content: "\f063"; margin-left: 14px; color: #666; font-family: FontAwesome; transition: all 0.3s; }
#model:hover:after { color: white; }
#title { width: 100%; z-index: -1; text-align: center; height: 60px; line-height: 60px; font-size: 20px; font-weight: 500; padding: 0 30px; color: white; text-decoration: none; }
#title:hover { color: white; text-decoration: underline; }
#stats { height: 60px; line-height: 60px; margin: 0; position: absolute; right: 10px; top: 0; font-size: 16px; font-weight: 500; }
#stats > dt { display: inline-block; color: #AAA; }
#stats > dd { display: inline-block; color: white; margin-left: 10px; margin-right: 25px; }

#menu { position: absolute; top: 70px; left: 30px; color: #bbb; z-index: 400; font-size: 15px; visibility: hidden; opacity: 0; transition: all 0.5s; bottom: 60px; }
#menu.active { visibility:visible; opacity: 1; top: 90px; }
#menu:before { content: ' '; position: absolute; width: 0; height: 0; border: 12px solid transparent; border-bottom-color: rgba(0,0,0,0.8); margin: -12px; left: 40px; top: -12px; }
#menu .inner { overflow-y: auto; overflow-x: hidden; background: rgba(0,0,0,0.8); border-radius: 10px; max-height: 100%; }
#menu .inner > div { padding: 25px 0; } 
#menu .inner > div:nth-last-of-type(odd) { background-color: rgba(0,0,0,0.4); }
#menu .inner > div[title]:before { content: attr(title); display: block; color: white; font-size: 18px; padding: 0 30px 15px 30px; }
#menu .inner > div > a { display: block; padding: 8px 40px; width: 240px; color: #bbb; text-decoration: none !important; }
#menu .inner > div > a:hover { background: black; }
#menu .inner > div > a.active { color: white; font-weight: 500; }

#rotation-slider { position: absolute; right: -40px; bottom: 160px; top: 220px; width: 16px; background-color: rgba(0,0,0,0.5); border-radius: 8px; padding: 20px 0; transition: all 0.8s; cursor: pointer; }
#rotation-slider.show { right: 30px; }
#rotation-slider .inner { position: absolute; top: 0; bottom: 0; margin: 20px 0; width: 100%; }
#rotation-slider .knob { position: absolute; width: 16px; height: 40px; margin: -20px -8px; background-color: rgba(0,0,0,0.8); left: 50%; border-radius: 8px; top: 50%; cursor: -webkit-grab; }

#top-toolbar { position: absolute; top: 90px; left: 30px; right: 30px; }

#setting-selection { visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; right: 0; text-align: center; transition: all 0.3s; }
#setting-selection.active { visibility: visible; opacity: 1; }
#setting-selection span { padding: 0 18px; display: inline-block; vertical-align: top; }
#setting-selection ul { display: inline-block; list-style: none; font-size: 0; padding: 0; vertical-align: top; }
#setting-selection ul li { display: inline-block; font-size: 16px; line-height: 50px; padding: 0 18px; color: white; cursor: pointer; transition: all 0.3s; 
                            background-color: rgba(0,0,0,1); opacity: 0.4; }
#setting-selection ul li:hover { background-color: rgba(0,0,0,0.8);  opacity: 0.8; }
#setting-selection ul li.active { background-color: rgba(0,0,0,0.8);  opacity: 1; }
#setting-selection ul li:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
#setting-selection ul li:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

#full-screen-button { position: absolute; top: 0; right: 0; margin-right: 0; background-image: url('../img/expand.png'); }
#full-screen-button.compress { background-image: url('../img/compress.png'); }


@media (max-width: 740px) {
    .square-button { border-radius: 0; margin-right: 0; width: 50px; height: 50px; line-height: 50px; background-color: transparent; z-index: 300; }
    .square-button[data-title]:before { top: -26px; }
    .square-button[data-title]:after { top: 0px; }
    .square-button[data-title]:first-child:before { margin-left: -18px; }

    #model { float: left; position: relative; }
    #title { width: auto; float: right; position: relative; z-index:10; }

    #bottom-toolbar { left: 0; right: 0; bottom: 0; height: 50px; background: rgba(0,0,0,0.75); }
    #floor-selection { bottom: 50px; width: 100%; height: 50px; background: rgba(0,0,0,0.65); }
    #floor-selection:before { height: 50px; line-height: 50px; border-radius: 0 !important; background-color: transparent; }
    #floor-selection > div { height: 50px; width: 50px; line-height: 50px; border-radius: 0 !important; background-color: transparent; }

    #rotation-slider { top: 160px; bottom: 120px; }
    #rotation-slider.show { right: 10px; }

    #full-screen-button { display: none; }

    #top-toolbar { top: 60px; left: 0; right: 0; }
    #setting-selection { width: 100%; background: rgba(0,0,0,0.65); height: 50px; }
    #setting-selection ul { height: 50px; }
    #setting-selection ul li {  border-radius: 0 !important; height: 50px; line-height: 50px; background-color: transparent; }

    
    #tutorial[topic=settings] { top: 125px; }
    #tutorial[topic=floors] { bottom: 115px }
    #tutorial[topic="360Rotate2"] { right: 50px; }

    #tutorial[topic=tour2] { top: auto; bottom: 65px; left: 5px; }
    #tutorial[topic=tour2]:before { left: 20px; }
    #tutorial[topic=tour2]:after { left: 20px; }

    #tutorial[topic="360"] { top: auto; bottom: 65px; left: 5px; }
    #tutorial[topic="360"]:before { left: 70px; }
    #tutorial[topic="360"]:after { left: 70px; }

    #tutorial[topic="2D"] { top: auto; bottom: 65px; left: 5px; }
    #tutorial[topic="2D"]:before { left: 120px; }
    #tutorial[topic="2D"]:after { left: 120px; }
    
    #tutorial[topic=end] { right: 5px; top: auto; bottom: 65px; }
    #tutorial[topic=end]:before { left: auto; right: 20px; }
    #tutorial[topic=end]:after { left: auto; right: 20px; }

    #title-bar { text-align: right; }
    #stats { display: none; }
    
    #share-panel { line-height: 40px; height: 120px; width: 40px; bottom: 65px; right: 55px; }
    #share-panel a { width: 40px; height: 40px; font-size: 18px; }
    #share-panel:after { content: ' '; position: absolute; width: 0; height: 0; margin: -10px; border: 10px solid transparent; border-top-color: rgba(0,0,0,0.4); bottom: -10px; right: 20px; }

    #terms-link { position: static; float: left; margin-top: 23px; color: #aaa; text-shadow: none; font-size: 10px; }
    #terms-popup { padding: 100px 70px 100px 40px; }
    #terms-popup .close { margin-right: 0; right: 10px; top: 10px; width: auto; }
}