* {
    -webkit-tap-highlight-color: transparent;
}
/*
html{
	min-height: -webkit-fill-available;
	height: 100vh;
}
*/
#left_menu{
	position:absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 300px;
	background: rgba(0, 50, 85, 0.9);
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 2;
}


#left_menu .header{
	height: 50px;
	text-align: right;
}

.header .menu_close{
	cursor: pointer;
}

.header svg * {
    transform-origin: center;
    transition: transform 0.5s, fill 0.5s, stroke-width 0.5s, opacity 0.5s;
}



#left_menu_minimized{
	position:absolute;
	margin-top: -30px;
	left: 5px;
	top: 50%;
	height: 100%;
	height: 60px;
	width: 60px;
	background: rgba(0, 50, 85, 0.9);
	transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
	transform: translateX(-100%);
	cursor: pointer;
	border-radius: 60px;
}


.menu_closed #left_menu{
	transform: translateX(-100%);
}

.menu_closed #left_menu_minimized{
	transform: translateX(0%);
}

.scenes{
	height: calc(100vh - 90px);
	height: calc( (var(--vh, 1vh) * 100) - 90px);
}

.scene{
	height: 120px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	left: -300px;
	opacity: 0;
	transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);	
}





.scene.active .scene_title{
	background: rgba(0,0,0,0);
	border-left: 5px solid rgba(253, 192, 45,1);
}

.scene_thumb{

	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 120px;
	background-position:center;
	background-size:cover;
	transition: all .2s;
}

.scene_title{
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 120px;	
	line-height: 120px;
	background: rgba(0,0,0,0.6);
	padding: 0 20px;
	transition: all .2s ease-out;
	text-shadow: 1px 1px 3px rgb(0 0 0 / 90%);
	border-left: 5px solid rgba(253, 192, 45,0);
	user-select: none;
}

.list{
	overflow: auto;
}

.scene_visited_icon{
	position: absolute;
	right: 0;
	width: 30px;
	height: 30px;
	top: 45px;
    right: 15px;	
}

/*
.scene.visited .scene_visited_icon svg .check{
	fill: #b58b00;
}
*/

.scene_visited_icon svg * {
    transform-origin: center;
    transition: transform 0.5s, fill 0.5s, stroke-width 0.5s, opacity 0.5s;
}

.scene_visited_icon svg .checkbg,
.scene_visited_icon svg .check {
    transition: transform 0.5s, fill 0.5s, opacity 0.5s;
    transform: scale(0); opacity: 0;
}



.scene.active .scene_visited_icon svg .border{
    opacity: 1;
    transform: scale(1.1);
    stroke-width: 3px;
}

.scene.visited .scene_visited_icon svg .bg {
    transform: scale(0); opacity: 0;
}

.scene.visited .scene_visited_icon svg .checkbg {
    fill: rgba(253, 192, 45,1);
    transform: scale(1); opacity: 1;
}

.scene.visited .scene_visited_icon svg .check {
    fill: rgba(45,45,45,1);
    transform: scale(1); opacity: 1;
}

.navigation{
	position: absolute;
	width: 115px;
	height: 48px;
	left: 0;
	right: 0;
	bottom: 10px;
	background: none;
  	margin-left: auto; 
  	margin-right: auto; 	

  	transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
  	z-index: 1;
}

.navigation .btn{
	position: absolute;
	cursor: pointer;
}

.navigation .btn svg *{
    transition: transform 0.5s, fill 0.5s, stroke-width 0.5s, opacity 0.5s;	
}

.navigation .btn.prev{
	left: 0;
	top: 0;
}
.navigation .btn.next{
	right: 0;
	top: 0;
}

.navigation .btn:hover svg .bg{
	fill: rgba(255,255,255,0);
}

.navigation .btn:hover svg .arrow{
	fill: rgba(255,255,255,1);
}

.progress{
	user-select: none;
	position: absolute;
	width: 100%px;
	height: 40px;
	left: 0;
	right: 0;
	bottom: 0px;
	background: rgba(0, 50, 85, 0.9);
  	margin-left: auto; 
  	margin-right: auto; 	
}

.column{
	margin-top:7px;
	width: 50%;
	height: 30px;	
}

.column_visited{
	float: left;
}

.column_not_visited{
	float: right;
}

.icon{
	left: 12px;
	top: 2px;
	width: 25px;
	height: 25px;
	position: relative;

}

.text{
	line-height: 30px;
	margin-left: 20px;
	position: absolute;
	font-size: 14px;
}

.title_bar{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100px;
	text-align: center;
	pointer-events: none;
	text-shadow: 0px 1px 5px rgb(0 0 0 / 50%);

	transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}


.ui_hidden .title_bar{
	top: -150px;
}

.ui_hidden .navigation{
	bottom: -100px;
}

.ui_hidden .scene{
	left: -300px;
}


.ui_hidden #left_menu_minimized{
	transform: translateX(-150%);
}

#logo_top{
	width: 280px;
}

#sceneTitleTop{
	margin: 0;
}

#loading_screen{
	background: #003255;
	width: 100%;
	height: 100%;
	z-index:9999;
	position: absolute;

	display: flex;
	justify-content: center;
	align-items: center;

	opacity:0;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
	pointer-events: none;
}


.loading_spinner {
    border: 0;
}

.loading_text{
	margin-left: 13px;
}

.is_loading #loading_screen{
	opacity: 1;
}

.scrollbar-thumb{
	background: rgba(253, 192, 45,0.9) !important;
	border-radius: 0 !important;
}

#pano .hotspot {
    transition: filter 0.5s;
}

#pano .hotspot > div {
    transition: filter 0.5s, opacity 0.7s, transform 0.3s;
}

#pano.hs_small .hotspot .icon_svg {
    transform: scale(0.6)!important;
}

@media (hover: hover) and (pointer: fine) {
	.scene:hover .scene_thumb{
		transform: scale(1.2);
	}

	.header:hover svg .border{
		fill: rgba(255,255,255,0.3);
	}
	.scene:hover .scene_visited_icon svg .bg {
	    fill: rgba(255,255,255,1);
	}
	.scene.visited:hover .scene_visited_icon svg .border {
	    opacity: 1;
	    transform: scale(1.1);
	    stroke-width: 3px;
	}	

	#left_menu_minimized:hover{
		background: rgba(0, 50, 85, 0.7);
	}

}

/*
#pano {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
}

#pano.animate {
    animation: show_pano 7s linear;
    animation-fill-mode: forwards;
}

@keyframes show_pano {
    0% {
        clip-path: circle(0 at center);
        opacity: 0;
    }

    50% { opacity: 0; }

    60% {
        clip-path: circle(0 at center);
        opacity: 1;
    }

    85% {
        clip-path: circle(100% at center);
        opacity: 1;
    }
    100% {
        clip-path: none;
        opacity: 1;
    }
}
*/


@media (max-width:480px)  {  
	#left_menu_minimized{
		bottom: 5px;
    	top: auto;
		height: 45px;
    	width: 120px;
    	border-radius: 5px;
		left: 50%;
		margin-left: -60px;
		transform: translateY(100%);
		background: rgba(0, 50, 85, 0.9);
	}

	#left_menu_minimized svg{
		position: relative;
		top: -8px;
		left: -9px;		
	}

	#left_menu{
		width: 100%;
		background: rgba(0, 50, 85, 1);
	}

	/*
	.menu_closed #left_menu {
	    transform: translateY(100%);
	}	

	.menu_closed #left_menu_minimized{
		transform: translateY(0%);
	}	
	*/
	#sceneTitleTop{
		font-size: 1rem;
	}


	.navigation{
		bottom: 60px;
	}

	.menu_text{
	    position: absolute;
	    top: 14px;
	    left: 40px;		
	}

	
	.ui_hidden.menu_closed #left_menu_minimized{
		transform: translateY(110%);
	}

}