/* Custom CSS Styles */

#wrapper { width: 100%; height: 100%; overflow: hidden; position: relative; float: left; }

/* Complete */

@font-face {
    font-family: "Circular-Pro-Black";
    src:url("../fonts/lineto-circular-pro-black.eot");
    src:url("../fonts/lineto-circular-pro-black.eot?#iefix") format("embedded-opentype"),
        url("../fonts/lineto-circular-pro-black.woff2") format("woff2"),
        url("../fonts/lineto-circular-pro-black.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Circular-Pro-Book";
    src:url("../fonts/lineto-circular-pro-book.eot");
    src:url("../fonts/lineto-circular-pro-book.eot?#iefix") format("embedded-opentype"),
        url("../fonts/lineto-circular-pro-book.woff2") format("woff2"),
        url("../fonts/lineto-circular-pro-book.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}


#scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100
}

#scene.layered-visible {
    z-index: 8
}

#bs-example-navbar-collapse-1 { height: 100%; }
#bs-example-navbar-collapse-1.closed { height: 0; }

/* Custom Fonts */

body { 
	font-family: "Circular-Pro-Book", "helvetica nenu", helvetica, arial, sans-serif !important;
	font-style: normal;
	font-weight: 400;
}

body p { 
	font-family: "Circular-Pro-Book", "helvetica nenu", helvetica, arial, sans-serif !important;
	font-style: normal;
	font-weight: 400 !important;
}

h1, h2, h3, h4, h5 { 
	font-family: "Circular-Pro-Black", "helvetica nenu", helvetica, arial, sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
}

img.wide { width: 100%; height: auto; }

/* Pano Title */

.pano-info { position: absolute; overflow: hidden; z-index: 1000; margin: 0; padding: 0; bottom: 20px; left: 20px; max-width: 270px; }

.panorama-title { display: block; color: #FFF; font-size: 1.10em; font-weight: 200; clear: both; margin: 0 0 3px 0; text-transform: uppercase; text-shadow: 0px 0px 2px rgba(0,0,0, 0.7); }
.panorama-desc { display: block; color: #EEE; font-size: 1em; font-weight: 200; clear: both; margin: 0; }


/* Logos */
img.threedeep {display: block; width: 60px; position: absolute; z-index: 8000; top: 10px; left: 10px; border: 0; }

.logos { position: absolute; right: 15px; bottom: 10px; z-index: 1000; display: block; overflow: hidden; }
.logos a { float: left; width: 100px; margin-left: 10px; display: block; cursor: pointer !important; }
.logos a img { width: 100%; height: auto; cursor: pointer !important; border: 0; }



/* /////////////////////////// CUSTOM UI BUTTONS ///////////////////////////////// */

#commands { display: none !important; }

#nav-bubbles { display: none !important; }

#commands { top: 8px; right: 8px; }

#commands-optional { z-index: 5000 !important; position: fixed; }

#commands-optional.bottom-right { bottom: 5px; right: 5px; }
#commands-optional.bottom-left { bottom: 10px; left: 15px; }
#commands-optional.top-right { top: 15px; right: 15px; }
#commands-optional.top-left { top: 15px; left: 15px; }

#commands-optional a.autorotation { display: none; }
#commands-optional a.fullscreen { display: none; margin-left: 5px; }

#commands-optional a.fullscreen.enter { background: url(../img/fullscreen.png) no-repeat center; background-size: 70%; }
#commands-optional a.fullscreen.exit { background: url(../img/fullscreen-exit.png) no-repeat center; background-size: 70%; }

#commands-optional a.autorotation { background: url(../img/pause.png) no-repeat center; background-size: 80%; }
#commands-optional a.autorotation.on { background: url(../img/pause.png) no-repeat center; background-size: 80%; }
#commands-optional a.autorotation.off { background: url(../img/play.png) no-repeat center; background-size: 80%; }

#commands-optional a.vr { background: url(../img/icon-vr.png) no-repeat center; background-size: 100%; margin: 0; }

#commands-optional a.muteAudio { background: url(../img/icon-mute.png) no-repeat center; background-size: 100%;  }

/* Toggle Hotspots */
#commands-optional a.toggleHotspots.off { background: url(../img/btn-marker-on.png) no-repeat center; background-size: 100%; display: none; }
#commands-optional a.toggleHotspots.on { background: url(../img/btn-marker-off.png) no-repeat center; background-size: 100%; display: none; }
#commands-optional a.toggleHotspots.active { display: none; }
#commands-optional a.toggleHotspots.hidden { display: none; }

#commands-optional a.toggleLegend { background: url(../img/icon-key-colors.png) no-repeat center; background-size: 100%; }
#commands-optional a.toggleLegend.active { opacity: 1; }

#commands-optional a {
    background-position: center;
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    opacity: 1;
    -webkit-opacity: 1;
}

#commands-optional a:hover { opacity: 1; -webkit-opacity: 1; }


/* Toogle Map */

#mapcontainer { width: 30% !important; }

#commands-optional a.toggleMap { display: none; margin-left: 3px; }

#commands-optional a.toggleMap.open { background: url(../img/icon-map.png) no-repeat center; background-size: 95%; }
#commands-optional a.toggleMap.close2 { background: url(../img/icon-map.png) no-repeat center; background-size: 95%; display: none; }

a.toggleMap.close { 
	top: 47.5%; right: 28.5%; display: none; 
	background: url(../img/close.png) no-repeat center; background-size: 100%; 
	position: absolute; z-index: 9999; 
	opacity: 1; -webkit-opacity: 1; 
}

/* Back button */

a.back-button { 
	position: absolute; z-index: 1000; display: block; 
	top: 50%; left: 0px; padding: 20px; 
	background: url(../img/arrow-left3.png) no-repeat left 10px center; background-size: 15px; 
	background-color: rgba(0, 0, 0, 0.7); text-decoration: none;
	-webkit-transition: all .3s ease-in; transition: all .3s ease-in;
}
a.back-button span { font-size: 16px; color: #FFF; text-transform: uppercase; display: none; }
a.back-button:hover { background-color: #666; }

/* Calls to Action  */

.cta { display: block; overflow: hidden; position: absolute; z-index: 1000; margin: 0; bottom: 15px; right: 15px; }
.cta a { padding: 20px; margin: 0 0 0 10px; color: #FFF; display: inline-block; float: left; border-radius: 100px; text-decoration: none; font-size: 12px; }
.cta a span { display: none; }
.cta a.share { background: url(../img/icon-share.png) no-repeat center; background-size: 14px; }
.cta a { background-color: rgba(0,0,0,0.6) !important; }
.cta a:hover, .cta a:focus { background-color: rgba(0,0,0,1) !important; }






/* //////////////////////////////// large mobiles //////////////////////////////// */

@media screen and (min-width: 500px) {

	.dropdown-menu { max-height: 328px; /* set max height for scrolling */ }

	/* Sidebar Thumbnails */

	#sidebar ul.thumbnails-container { display: table; overflow: hidden; border-collapse: separate; margin-top: 20px; }
	#sidebar ul.thumbnails-container li { display: table-cell; background: none; }
	#sidebar ul.thumbnails-container .thumbnail { margin-right: 10px; }

	.department-box table td a { font-size: 14px; }

	.logos a { width: 100px; margin-left: 5px; }

}

/* //////////////////////////////// ipad portrait //////////////////////////////// */

@media screen and (min-width: 768px) {

	img.threedeep { width: 80px; top: 15px; left: 18px; }
	.logos { position: absolute; right: 20px; bottom: 10px; }
	.logos a { width: 150px; margin-left: 20px; }


	/* Pano Title */
	.pano-info { bottom: 20px; left: 20px; max-width: 500px; }
	.panorama-title { font-size: 1.5em; font-weight: 200; margin: 0; }
	.panorama-desc { display: block; font-size: 1.2em; font-weight: 200; }

	/* Custom Buttons */

	#commands { bottom: 15px; left: 50%; margin-left: -60px; }
	#commands a { width: 40px; height: 40px; }

	#commands-optional.bottom-right { bottom: 15px; right: 15px; }
	#commands-optional.bottom-left { bottom: 15px; left: 15px; }
	#commands-optional.top-right { top: 15px; right: 10px; }
	#commands-optional.top-left { top: 15px; left: 15px; }
	
	#commands-optional a { width: 40px; height: 40px; }
	#commands-optional a.autorotation { display: inline-block; }

	#commands-optional a.vr { margin: 5px 5px 0 0; }
	
	/* Toogle Map */

	#commands-right { right:15px; top:45%; width:40px; height:40px; }
	#commands-optional a.toggleMap.open { display: inline-block; }
	#commands-optional a.toggleMap.close2 { display: inline-block; }

	a.toggleMap.close { right: 28.5%; width: 40px; height: 40px; }

	/* Toggle Hotspots */

	#commands-optional a.toggleHotspots.off { display: inline-block; }
	#commands-optional a.toggleHotspots.on { display: inline-block; }
	#commands-optional a.toggleHotspots.active { display: inline-block; }

}

/* //////////////////////////////// full wide version //////////////////////////////// */

@media screen and (min-width: 960px) {

	/* Pano Title */
	.pano-info { bottom: 25px; left: 30px; max-width: 700px; }
	.panorama-title { font-size: 1.5em; font-weight: 200; margin: 0; }
	.panorama-desc { font-size: 1.2em; font-weight: 200; }

	/* Custom Ui Buttons */
	#commands { bottom: 15px; margin-left: -90px; }
	#commands a { width: 55px; height: 55px; }
	
	#commands-optional.bottom-right { bottom: 20px; right: 20px; }
	#commands-optional.bottom-left { bottom: 20px; left: 20px; }
	#commands-optional.top-right { top: 20px; right: 20px; }
	#commands-optional.top-left { top: 20px; left: 20px; }

	#commands-optional a { width: 40px; height: 40px; }

	#commands-optional a.fullscreen { display: inline-block; }
	
	/* Toogle Map */
	#commands-right { right:20px; top:45%; width:45px; height:45px; }

	a.toggleMap.close { right: 28.5%; width: 45px; height: 45px; }

	/* Calls to Action  */

	.cta { bottom: 20px; right: 20px; }
	.cta a { padding: 10px 15px 10px 40px; margin: 0 0 0 10px; font-size: 14px; }
	.cta a span { display: block; }
	.cta a.share { background: url(../img/icon-share.png) no-repeat left 15px center; background-size: 16px; padding-left: 45px; }
	.cta a { background-color: rgba(0,0,0,0.6) !important; }
	.cta a:hover, .cta a:focus { background-color: rgba(0,0,0,1) !important; }

}


/* //////////////////////////////// very wide version //////////////////////////////// */

@media screen and (min-width: 1200px) {

	img.threedeep { width: 100px; top: 30px; left: 30px; }
	.logos { position: absolute; right: 30px; bottom: 20px; }
	.logos a { width: 200px; }

	/* Pano Title */
	.pano-info { bottom: 35px; left: 40px; max-width: 700px; }
	.panorama-title { font-size: 1.8em; font-weight: 200; margin: 0 0 10px 0; }
	.panorama-desc { font-size: 1.4em; font-weight: 200; }
	
  	#commands-optional.bottom-right { bottom: 30px; right: 30px; }
	#commands-optional.bottom-left { bottom: 30px; left: 30px; }
	#commands-optional.top-right { top: 30px; right: 30px; }
	#commands-optional.top-left { top: 30px; left: 30px; }

  	#commands-optional a { width: 40px; height: 40px; }

	a.toggleMap.close { right: 28.7%; }

  	#commands-right { right:30px; top:45%; width:45px; height:45px; }

  	/* Calls to Action  */
	.cta { bottom: 30px; right: 30px; }
	.cta a { padding: 12px 17px 12px 40px; margin: 0 0 0 10px; font-size: 14px; }

}

/* //////////////////////////////// very very wide version //////////////////////////////// */

@media screen and (min-width: 1200px) {

  	#commands-optional a { width: 40px; height: 40px; }

}