body, html{
	background-color: #3f3b38;
	font-family:"Open Sans";
}


body.mobile{
	font-size:75% !important;
}
body.mobile .icon{
	font-size:140%;
}
body.desktop{
	font-size:85%;
}
body.desktop .icon{
	font-size:140%;
}
#titleBar,
.icon .text{ 
	display:none !important
}

#pano > div > div:first-child{
	background-color:transparent !important;
	opacity:1 !important;
	background-image:radial-gradient(closest-side,transparent 50%,rgba(39,35,32,0.3) 80%, rgba(39,35,32,0.8) 130%), linear-gradient(transparent 0%,transparent 80%,rgba(39,35,32,.4) 100%), linear-gradient(transparent 100%,transparent 20%,rgba(39,35,32,.4) 0%);

	}


@keyframes hint_animation {
    0% {
			opacity:1;
			top:50%;
		}
   50% {
			opacity:1;
			top:50%;
		}
	90% {
			opacity:0;
			top:50%;
		}
	100%{
			opacity:0;
			top:-100%;
		}
}

.hint{
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	font-size:320%;
	color:rgba(255,255,255,.4);
	opacity:1;
	text-align:center;
	/*transition: 10s opacity 1s, 1s top .1s; */
	//text-shadow: #222 1px 1px 2px;
	
	animation-name: hint_animation;               
    animation-duration: 1.2s;
	animation-delay: 2s;
    animation-iteration-count: 8;
	animation-timing-function: linear;
	animation-fill-mode: forwards;	
	
}
.hint .icon{
	top:1em;
}

a{
	outline:0;
	img{background:transparent;
	-webkit-tap-highlight-color: rgba(0,0,0,0);}
	
	transition-property: color;
	transition-duration: 0.3s;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.link-hotspot{
	top: 0;
	width:50px;
	height:50px;
	margin-left:-25px;
	margin-top:-25px;
	opacity:1;
}
.mobile .link-hotspot{
	top: 0;
	width:40px;
	height:40px;
	margin-left:-20px;
	margin-top:-20px;
	opacity:1;
}
.link-hotspot-tooltip{
	top:9px;
}

.icon,
.info-hotspot-icon,
.link-hotspot-icon,
.info-hotspot-close-icon{ 
	font-size:1em;
	z-index:10;	
	border-radius:100px;
	
	}
.info-hotspot-icon,
.link-hotspot-icon
{
	border:2px solid rgba(255,255,255,.9);
	z-index:10;
}

.link-hotspot-icon
{
	border:0px solid rgba(59,55,52,.9);
	position:relative;
}

.info-hotspot-modal .info-hotspot-icon{
	margin:0;	
}
.info-hotspot-close-icon{
	font-size:1.3em;
	font-family:arial !important; 
}
.info-hotspot-close-icon::before{
	font-family:"ElegantIcons";
	content:"\4d" !important;
	font-size:100%; 
}
.info-hotspot-modal .info-hotspot-close-icon::before{
	font-size:150%;
}

.icon::before,
.info-hotspot-icon::before,
.link-hotspot-icon::before,

.info-hotspot-close-icon::before{
	position:absolute;
	top:calc(50% - .5em);
	left:calc(50% - .5em);
}


.info-hotspot .info-hotspot-icon-wrapper{
	width:50px !important;
	height:50px !important;
	position:relative;
	border-radius:50px;
	background-color:rgba(59,55,52,1);
}
.mobile .info-hotspot .info-hotspot-icon-wrapper{
	width:40px !important;
	height:40px !important;	
	position:relative;
	border-radius:50px;
	background-color:rgba(59,55,52,1);
}
.info-hotspot-modal .info-hotspot-icon-wrapper{
	border-top-left-radius:30px;
}
@keyframes hotspot_pulse {
    0% {
			width:100%;
			height:100%;
			border:1px solid rgba(255,255,255,.9);
		}
	25% {
			width:125%;
			height:125%;
			border:20px solid rgba(255,255,255,.9);
		}
	50% {
			width:150%;
			height:150%;
			border:20px solid rgba(255,255,255,.0);
		}
	51% {
			width:100%;
			height:100%;
			border:1px solid rgba(255,255,255,.0);
		}
}

@keyframes link_pulse {
    0% {
			width:110%;
			height:110%;
			border:4px solid rgba(0,0,0,.9);
		}
	10% {
			width:130%;
			height:130%;
			border:20px solid rgba(0,0,0,1);
		}
	50% {
			width:110%;
			height:110%;
			border:4px solid rgba(0,0,0,.9);
		}
	100% {
			width:110%;
			height:110%;
			border:4px solid rgba(0,0,0,.9);
		}
}

.info-hotspot-modal .info-hotspot-icon::after,
.info-hotspot.visible .info-hotspot-icon::after
{
	animation-name:none;	
}

.info-hotspot-icon::after{
	
	content: '';
	position:absolute;
	box-sizing: border-box;
	width:100%; 
	height:100%;
	position: absolute;
	top: 50%;  
    left: 50%; 
    transform: translate(-50%, -50%);
	border-radius:100px;
	z-index:-1;
	
	animation-name: hotspot_pulse;               
    animation-duration: 2s;
	animation-delay: 1s;
    animation-iteration-count: infinite;
	animation-timing-function: linear;	
	
}


.info-hotspot .info-hotspot-icon,
.link-hotspot .link-hotspot-icon {
    width: 100%;
    height: 100%;
    margin: 0;
}

.info-hotspot-header{
	border-top-left-radius:25px !important;
	border-bottom-left-radius:25px !important;		
}

.info-hotspot .info-hotspot-header{
	width:50px;
	height:50px;
}
.mobile .info-hotspot .info-hotspot-header{
	width:40px !important;
	height:40px !important;	
}
.visible .info-hotspot-header{
	border-bottom-left-radius:0px !important;
}
#titleBar{
	position:relative;
	left: 0 !important;
	right: 0 !important;
	display:inline-block;
	line-height:20px;
	display:none;
}
#titleBar .sceneName{
	overflow:visible;
	width:auto;
	padding:0 !important;
	line-height:40px;
	height:auto !important;
	display:none;
}
.mobile #autorotateToggle{
	right:0 !important;
	float:right;
	padding:0;
}
.desktop #autorotateToggle{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
}
#autorotateToggle .icon{
	position:relative;
	float:left;
	top:auto !important;
	right:auto !important;
}
.mobile #autorotateToggle{
	right:0 !important;
	top:5px !important;
	right:5px !important;
}
#controlBar{
	text-align:center;
	position:fixed;
	bottom:calc(2.5em + 6vh);
	width:100%;
	text-shadow: #222 1px 1px 2px;
	height:0;
}
#controlBar > a{
	position:relative !important;	
	display:block;
	left:auto;
	
}
#fullscreenToggle{
	margin-right:calc(.5em + 2.5vw);
	float:right;
}
#viewUp,
#viewDown,
#viewLeft,
#viewRight,
#viewIn,
#viewOut{
	display:none !important;
}

#viewOut{
	margin-left:0em;
}

.icon-eye{
	font-size:1.2em;
}
#sceneList{
	
	top:auto;
	bottom:calc(0em + 6vh);
	width:auto;
	left:calc(.5em + 2.2vw);
	max-height:300px !important;
	opacity:1 !important;
	/*
	max-height:0%;
	opacity:0;
	*/
	overflow:hidden;
	padding-bottom:0 !important;
	transition: 2s max-height 0s, opacity .5s;
	padding-top:0 !important;
}
#sceneList.enabled,
.mobile #sceneList.enabled{
	margin-left:0;
	max-height:200px;
	opacity:1;
	transition: max-height 0s, opacity .5s;
}

.mobile #sceneList {
    bottom:calc(0em + 5vh);
	width:auto;
	height:auto;
	left:calc(.5em + 2.2vw);
}
.mobile #sceneList .scene{
	height:30px;
}
.mobile #sceneList .scene .text{
	line-height:30px;
}
#sceneList .scene.current{
	border:1px solid #fff;
}

#titleBar .sceneName,
.no-touch #sceneList .scene:hover,
#sceneList .scenes,
#sceneList .scene.current{
	background-color:transparent;
}


.viewControlButton,
.link-hotspot-tooltip{
	background-color:rgba(59,55,52,0.8);
}
#sceneListToggle,
#fullscreenToggle,
#autorotateToggle{
	background-color:transparent;	
}
.mobile #sceneListToggle,
.mobile #fullscreenToggle,
.mobile #autorotateToggle{
	width:40px;
	height:40px;	
}
.mobile #sceneListToggle .icon,
.mobile #fullscreenToggle .icon,
.mobile #autorotateToggle .icon{
	top:5px;
	right:5px;
}


#sceneListToggle{margin-left:calc(.5em + 2.2vw);float:left;display:none !important;}

.info-hotspot-modal{
	background-color:rgba(59,55,52,0.8);
}
.info-hotspot-modal .info-hotspot-header {
    background-color:transparent;
	position: absolute;
    top: 70px;
    left: 20px;
    right: 10px;
    width: auto;
    height: 50px;
}
.info-hotspot-modal .info-hotspot-text{
	top:120px;
	left:30px;
	right:10px;
	bottom:50px;
}
.info-hotspot-modal .info-hotspot-icon{
	width:100%;
	height:100%;
}
.info-hotspot-modal .info-hotspot-icon-wrapper{
	position:relative;
}

.info-hotspot .info-hotspot-title-wrapper{
	height:50px;
	left:60px;
}
.info-hotspot .info-hotspot-close-wrapper{
	height:50px;
	
}
.info-hotspot .info-hotspot-text{
	top:50px;
}


.info-hotspot-modal .info-hotspot-title-wrapper,
.info-hotspot-modal .info-hotspot-close-wrapper,
.info-hotspot-modal .info-hotspot-text,
.info-hotspot-modal .info-hotspot-icon-wrapper
{
	background-color:transparent;
	
}

.link-hotspot .link-hotspot-icon
{
	background-color:rgba(59,55,52,1);
	
}
.info-hotspot .info-hotspot-header,
.info-hotspot .info-hotspot-text,
.info-hotspot .info-hotspot-close-wrapper
{
	background-color:rgba(59,55,52,.6);
	
}
.info-hotspot .info-hotspot-text{
	border-top:1px solid rgba(59,55,52,.1);
	margin-top:-.01px;
	padding-left:20px;
}
.info-hotspot .info-hotspot-header,
.info-hotspot .info-hotspot-close-wrapper{
	

}

.link-hotspot .link-hotspot-icon
{
	background-color:transparent;
	z-index:10;
}

@keyframes anim_bounce_icon{
	0%  {transform:translateY(0);}
	/*
	10% {transform:translateY(0);}
	20% {transform: translateY(-1vh);}
	25% {transform:translateY(0);}
	30% {transform: translateY(-.5vh);}
	*/
	40% {transform:translateY(0);}
}
@keyframes anim_bounce_shadow_icon{
	0%  {transform: translateX(-50%) translateY(-50%) scale(1);color:rgba(255,255,255,1);}
	/*
	10% {transform:translateY(0);}
	20% {transform: translateY(-1vh);}
	25% {transform:translateY(0);}
	30% {transform: translateY(-.5vh);}
	*/
	25% {transform: translateX(-50%) translateY(-47%) scale(1.3);color:rgba(255,255,255,.8);}
	50% {transform: translateX(-50%) translateY(-44%) scale(1.6);color:rgba(255,255,255,0);}
	51% {transform: translateX(-50%) translateY(-50%) scale(1);color:rgba(255,255,255,0);}
}

.link-hotspot .link-hotspot-icon::before{
	font-family:"ElegantIcons";
	content:"\e081";
	color:rgba(59,55,52,1);
	font-size:300%;
	
	text-shadow: #fff  1px  1px 1px,
				 #fff -1px  1px 1px,
				 #fff  1px -1px 1px,
				 #fff -1px -1px 1px,
				 rgb(255,255,255,1)  0px  0px 0px;
	
	animation-name: anim_bounce_icon;		
	animation-duration:2s;		
	animation-iteration-count: infinite;
	animation-timing-function: linear;	

}
.link-hotspot .link-hotspot-icon::after{
	font-family:"ElegantIcons";
	content:"\e081";
	color:rgba(255,255,255,1);
	font-size:300%;
	z-index:-1;

	position:absolute;
	top:50%;
	left:50%;
	transform: translateX(-50%) translateY(-50%);
	
	animation-name: anim_bounce_shadow_icon;		
	animation-duration:2s;		
	animation-iteration-count: infinite;
	animation-timing-function: linear;		

}