/* Custom CSS Styles */

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

.logo { width: 140px; height: 40px; top: 10px; left: 10px; position: absolute; z-index: 5000; }
.logo img { width: 100%; height: auto; display: block; }

font-face {
    font-family: AWConqueror;
    src: url(../fonts/AWConquerorSans-Light.otf);
}

#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 p { 
	font-family: "helvetica nenu", helvetica, arial, sans-serif !important;
	font-style: normal;
	font-weight: 400 !important;
}

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

/* Pano Title */

.pano-info { position: fixed; 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.25em; font-weight: 200; clear: both; margin: 0 0 3px 0; text-transform: uppercase; }
.panorama-desc { display: block; color: #EEE; font-size: 1em; font-weight: 200; clear: both; margin: 0; }



/* Kolor Box - Custom Close Button */

div.kolorBox { margin-top: 15% !important; }

.kolorBoxTopUIBar a.closeBtn {
    background: url(../img/close.png) no-repeat !important;
    background-size: 100% !important;
    background-position: center !important;
    background-position: center;
    width: 40px !important;
    height: 40px !important;
}

div.rightUIPlaceHolder {
    overflow: hidden;
    height: 40px !important;
    width: 40px !important;
}

div.kolorBoxTopUIBar, div.kolorBoxBottomUIBar {
	float: right;
    height: 40px !important;
    margin-bottom: -18px !important;
    z-index: 1000;
    width: 50px !important;
    min-width: 50px !important;
    margin-right: 10px !important;
}

/* Mobile Header */

.container-fluid { padding: 0 10px; margin: 0; }
.container-fluid > .navbar-header { margin: 0; }

.navbar-default { background-color: #00ADA1; background-size: 100%;border: none;padding: 0; height: 50px; }

.navbar-brand { 
	display: block; padding: 0; 
	background: url(../img/greenbank-logo-web-mobile.png) no-repeat left center; background-size: 100%; 
	width: 35px; height: 35px; 
	margin: 7px 0 0 0px;
}

.fixed-top .navbar-collapse { max-height: none; }
.navbar-fixed-bottom, .navbar-fixed-top { z-index: 9999; }
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { max-height: 800px !important; }

.navbar-default .navbar-collapse, .navbar-default .navbar-form { border: none; }

/* Toogle Mobile Menu Button */

.navbar-default .navbar-toggle .icon-bar { background-color: #FFF; }
.navbar-toggle:hover { background-color: none !important; }

button.navbar-toggle { 
	background-color: #00ADA1 !important;
	background: url(../img/arrow-down.png) no-repeat right center; background-size: 15px;
	padding: 15px 25px 15px 15px;
	border: none; text-transform: uppercase; font-weight: 200; letter-spacing: 0.2em;
	margin: 0 10px 0 0;
	border-radius: 0; -webkit-border-radius: 0;
	content: "views";
	font-family: "proxima-nova", "helvetica nenu", helvetica, arial, sans-serif;
}
button.navbar-toggle span:before { content: "views"; }

button.navbar-toggle.down { 
	background: url(../img/arrow-up2.png) no-repeat right center; background-size: 15px;
	padding: 15px 25px 15px 15px;
	border: none; text-transform: uppercase; font-weight: 200; letter-spacing: 0.2em;
	margin: 0 10px 0 0;

}
button.navbar-toggle.down span:before { content: "hide"; }

button.navbar-toggle span { font-size: 12px; color: #FFF; }

/* Navigation */

.navbar-nav { float: right; margin: 0; }
.navbar-nav li { width: 170px; }
.navbar-nav li a { 
	background: #FFF; color: #666;
	height: 40px; line-height: 40px; padding: 0 20px; 
	text-transform: uppercase; letter-spacing: 0.05em; 
	font-family: "proxima-nova", 'helvetica neue', 'helvetica', arial, sans-serif; font-weight: 600;
	vertical-align: middle; font-size: 12px; text-align: right;
}

.navbar-nav > li > a:hover { background-color: #F6F6F6 !important; }

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color: #333;
    background-color: #EEE !important;
}



/* Dropdown Mobile */

.dropdown-menu { padding: 0; }

.navbar-nav .open .dropdown-menu > li > a { padding: 0px 20px; height: 40px; line-height: 40px; }
.navbar-nav li.dropdown.open .dropdown-menu > li > a:hover { background-color: #00ADA1 !important; }

.navbar-nav li .dropdown-menu.open { background: #FFF; }
.navbar-nav li .dropdown-menu li a { background-color: #333 !important; color: #FFF !important; }
.navbar-nav li .dropdown-menu li a:hover { background: #00ADA1 !important; color: #FFF !important; }



/* Book Button */

a.book { 
	width: 70px; height: 70px; display: block; position: absolute; z-index: 1000; 
	bottom: 10px; right: 10px; 
	background: #00ADA1; 
	border-radius: 400px; -webkit-border-radius: 400px;
	font-family: "proxima-nova", "helvetica nenu", helvetica, arial, sans-serif;
	font-weight: 400;
}
a.book span { font-size: 12px; font-weight: 200; color: #FFF; width: 100%; text-align: center; display: block; text-transform: uppercase; margin-top: 18px; letter-spacing: 0;  }

a.book:hover, a.book:focus { text-decoration: none; }




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

#commands { display: none !important; }

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

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

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

#commands-optional.bottom-right { bottom: 10px; right: 15px; }
#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%; }

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

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

#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%; }

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; 
}



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

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

	.logo { width: 200px; height: 70px; top: 15px; left: 15px; }

	/* Book Button */
	a.book { width: 90px; height: 90px; bottom: 15px; right: 15px; }
	a.book span { font-size: 13px; margin-top: 18px; letter-spacing: 0.2em; padding: 0 10px; }

	/* Kolor Box */

	div.kolorBox { margin-top: 0 !important; }
	div.kolorBoxTopUIBar, div.kolorBoxBottomUIBar { margin-right: -18px !important; }
	.kolorBoxTopUIBar { margin-top: 20% !important; }

	.container-fluid { padding: 0 10px; }

	.navbar * { -webkit-transition: all 0.3s ; transition: all 0.3s; }

	.navbar-default { height: 60px; }

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


	.navbar-brand { 
		display: block; padding: 0; 
		background: url(../img/greenbank-logo-web-mobile.png) no-repeat left center; background-size: 100%; 
		width: 35px; height: 35px; 
		margin: 12px 0 0 0 !important;
	}

	.navbar-nav { margin: 0; height: 100% !important; height: 60px; }
	.navbar-nav li { width: auto; height: 60px; }
	.navbar-nav li a { 
		height: 60px; line-height: 60px; padding: 0 10px; color: #FFF !important;
		vertical-align: middle; font-size: 0.9em; font-weight: 600; background: none !important; width: auto;
		-webkit-transition: all 0.3s ; transition: all 0.3s;
	}
	
	.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
	    background-color: #0c8f86 !important;
	    color: #FFF !important;
	}

	.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
	    background-color: #0c8f86 !important;
	    color: #FFF !important;
	}

	.navbar-nav li a:hover { background: #0c8f86 !important; }
	
	.dropdown-menu { 
		padding: 20px 10px 10px 10px; 
		border-radius: 5px; border: 0 !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; 
		margin: 0 50% 0 0 !important;
		background: url(../img/arrow-up.png) no-repeat right 20px top 0px; background-width: 25px; background-height: 15px;
		-webkit-box-shadow: 0 !important;
		box-shadow: none !important;
	}
	
	.dropdown-menu li { width: auto; height: auto; background: #FFF; }
	.dropdown-menu li:first-child { border-radius: 5px 5px 0 0; padding-top: 10px; }
	.dropdown-menu li:last-child { border-radius: 0 0 5px 5px; padding-bottom: 10px; }
	
	.navbar-nav .dropdown-menu li a { 
		height: 40px; line-height: 40px !important; 
		padding: 10px 20px; 
		color: #333 !important; 
		background-color: #FFF !important;
		text-align: center; 
		font-weight: normal;
		width: 200px;
	}

	.navbar-nav li .dropdown-menu li a {
    	background-color: #FFF !important;
    	color: #666 !important;
	}

	.navbar-nav li.dropdown.open .dropdown-menu > li > a:hover {
    	    color: #333 !important;
	    background-color: #EEE !important;
	}

	.dropdown-menu { margin-left: -140px !important; }



	/* 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: 15px; }
	#commands-optional.top-left { top: 15px; left: 15px; }
	
	#commands-optional a { width: 40px; height: 40px; }
	
	#commands-optional a.autorotation { display: inline-block; }
	
	/* Toogle Map */
	#commands-right { right:15px; top:45%; width:40px; height:40px; }
	#commands-optional a.toggleMap { display: inline-block !important; }

	a.toggleMap.close { right: 28.5%; width: 40px; height: 40px; }
	
	/* Floorplan*/
	div.kolorArea { width: 180px !important; height: 180px !important; bottom: 0px !important; left: 15px !important; }
	div.kolorAreaContent { width: 180px !important; height: 180px !important; }
	



}

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

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

	.logo { width: 220px; height: 80px; top: 15px; left: 15px; }

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

	.navbar-brand { margin: 12px 0 0 10px !important; }

	.navbar-nav li a { font-size: 0.9em; padding: 0 15px; }

	.dropdown-menu { margin-left: -130px !important; }

	/* Book Button */
	a.book { width: 100px; height: 100px; bottom: 15px; right: 15px; }
	a.book span { font-size: 14px; margin-top: 20px; letter-spacing: 0.2em; padding: 0 10px; }

	/* 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; }
	
	/* Floorplan*/
	div.kolorArea { width: 200px !important; height: 200px !important; bottom: 0px !important; left: 30px !important; }
	div.kolorAreaContent { width: 200px !important; height: 200px !important; }
	
	/* Inline Popups */
	.kolorBoxTopUIBar { margin-top: 8% !important; }

}


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

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

	.navbar-default { height: 60px; }

	.navbar-brand { 
		background: url(../img/greenbank-logo-web.png) no-repeat left center; background-size: 100%; 
		width: 220px; height: 40px; 
		margin: 10px 0 0 10px !important;
	}

	.navbar-nav li a { font-size: 0.9em; padding: 0 20px; }

	/* Custom Buttons */
	#commands { bottom: 30px; 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; }

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

  	#commands-right { right:30px; top:45%; width:45px; height:45px; }
	
  	/* Floorplan*/
  	div.kolorArea { width: 300px !important; height: 300px !important; bottom: 0px !important; left: 40px !important; }
  	div.kolorAreaContent { width: 300px !important; height: 300px !important; }
	
  	/* Inline Popups*/
  	.kolorBoxTopUIBar { margin-top: 20% !important; }

}