.tour-layer { position: absolute; width: 100%; height: 100%; overflow: hidden; 
              -webkit-transform-style: preserve-3d; -webkit-transition: opacity 0.8s;
              transform-style: preserve-3d; transition: opacity 0.8s; }
.tour-camera { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%;
               -webkit-transform-style: preserve-3d; -webkit-transform-origin: 0 0; -webkit-transition: -webkit-transform 0.8s;
               transform-style: preserve-3d; transform-origin: 0 0; transition: transform 0.8s; }
.tour-stage { position: absolute; 
              -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d; transition: transform 0.8s, opacity 0.8s; -webkit-transition: -webkit-transform 0.8s, opacity 0.8s; }
#floorplan-container .tour-stage { left: 50%; top: 50%; opacity: 0; visibility: hidden; 
                                   transition: transform 0.6s, opacity 0.3s, visibility 0.3s; 
                                   -webkit-transition: -webkit-transform 0.6s, opacity 0.3s, visibility 0.3s; }
#floorplan-container .tour-stage.show { opacity: 1; visibility: visible; }
#floorplan-container.hidden .tour-stage.show { visibility: hidden; }
#floorplan-container .tour-layer.no-animate .tour-stage { transition: none; -webkit-transition: none; }
.tour-face { position: absolute; width: 1024px; height: 1024px; margin: -512px; 
             transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }

.no-animate:not(.always-animate) { -webkit-transition: none; transition: none; }

.arrow { position: absolute; width: 80px; height: 80px; margin: -40px; text-align: center; opacity: 0; transition: opacity 0.5s, visibility 0.5s; background: rgba(0,0,0,0.9); border-radius: 100px; opacity: 0.3; cursor: pointer; }
.arrow.active { opacity: 1; }
.arrow.inactive { opacity: 0; visibility: hidden; pointer-events: none; }
.arrow:before { content: "\f139"; font: normal normal normal 80px/1 FontAwesome; color: white; }

.ring { position: absolute; width: 100px; height: 100px; margin: -50px; border: solid white 18px; visibility: visible; opacity: 0.3; border-radius: 100px; transition: all 0.5s; -webkit-backface-visibility: visible; }
.ring:before { content: ' '; display: block; position: absolute; width: 100px; height: 100px; left: -18px; top: -18px; border: solid 4px rgba(0,0,0, 0.1); border-radius: 100px; box-sizing: border-box; transition: all 0.5s; }
.ring.inactive { opacity: 0; visibility: hidden; }
.ring.active { opacity: 1; }
.ring.active:before { border-color: rgba(0,0,0,0.9); }

.peg { position: absolute; width: 24px; height: 24px; margin: -12px; left: 50%; top: 50%;
       border-radius: 30px; border: 6px solid #F44336; pointer-events: none; visibility: visible; opacity: 1; transition: all 0.5s; z-index: 10; }
.peg.no-animate { transition: none; -webkit-transition: none; }
.peg .peg-tip { content: ' '; position: absolute; top: -6px; right: -6px; border-right: 12px solid #F44336; border-bottom: 12px solid transparent; 
              transform-origin: 0 12px; transition: transform 1s; -webkit-transform-origin: 0 12px; -webkit-transition: -webkit-transform 1s; }
.peg .peg-tip.no-animate { transition: none; -webkit-transition: none; }
.peg.hidden { visibility: hidden; opacity: 0; }

.peg-overflow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -8px -25px; transform-origin: 25px 8px; opacity: 0; visibility: hidden; z-index: 10;
                border-top: 8px solid transparent; border-left: 25px solid #F44336; border-bottom: 8px solid transparent; pointer-events: none; transition: all 0.5s; opacity: 0; }
.peg-overflow.show { opacity: 1; visibility: visible; }
.peg-overflow.hidden { visibility: hidden !important; opacity: 0 !important; }