.zoomDiv {
    height: 100%;
    width: 100%;
}

.zoomImage {
	position: absolute;
    max-width: 40vw;
    max-height: 90vh;
    top: 50%;
    left: 50%;
	-ms-transform:translate(-50%, -50%); transform:translate(-50%,-50%);
	border: 3px solid white; border-radius:3px;
}

*{border:0px;margin:0px;padding:0px}

.HalfHeightText{font-family:"Arial","sans serif"; font-size:0.5vw; color:black; text-align:justify; font-weight:normal; }

a:link    {  color: #000088 ; font-weight:bold ; text-decoration:none} 
a:visited {  color: #000088 ; font-weight:bold ; text-decoration:none} 
a:active  {  color: #000088 ; font-weight:bold ; text-decoration:none} 

P{font-family:"Arial","sans serif"; font-size:80%; color:black;}

body {margin:0px; border:0px; padding:0px;}

.OuterWrapper {position:absolute; top:0%; left:0%; width:100%; height:99.9%;	margin:0px; border:0px; padding:0px;}

.MainContents{background:white; position:absolute; top:0px; bottom:0px; left:0px; right:0px; margin:0px; border:0px; padding:0px; z-index:10;}	
	
.PannellumSection {background:white; position:absolute; top:0%; left:0%; width:100%; height:100%; margin:0px; border:0px; padding:0px; z-index:10;}

#LeftPanoHi{visibility:hidden; border-style:none; width:50%; height:100%; left:0%; top:0%; position:absolute; z-index:1;}

#LeftPanoIntermediary{visibility:hidden; border-style:none; width:50%; height:100%; left:0%; top:0%; position:absolute; z-index:2;}

#LeftPanoLow{visibility:hidden; border-style:none; width:50%; height:100%; left:0%; top:0%; position:absolute; z-index:3;}

#RightPanoHi{visibility:visible; border-style:none; width:100%; height:100%; left:0%; top:0%; position:absolute; z-index:1;}

#RightPanoIntermediary{visibility:visible; border-style:none; width:100%; height:100%; left:0%; top:0%; position:absolute; z-index:2;}

#RightPanoLow{visibility:visible; border-style:none; width:100%; height:100%; left:0%; top:0%; position:absolute; z-index:3;}

.MapSection {background:white; position:absolute; top:0%; left:0%; width:100%; height:100%; margin:0px; border:0px; padding:0px; visibility:hidden; z-index:5;}

.Map2Section {background:white; position:absolute; top:0%; left:0%; width:100%; height:100%; margin:0px; border:0px; padding:0px; visibility:hidden; z-index:0;}
	
.MessengerSection {position:absolute; background:white; font-family:"Arial","sans serif"; font-size:90%; color:black; text-align:justify; margin:0px; border:0px; padding:4px; border-radius:3px; top:3px; right:3px; visibility:hidden; z-index:12;}
	
.CommentarySection{position:absolute; background:white; font-family:"Arial","sans serif"; font-size:70%; color:black; text-align:justify; font-weight:normal; margin:0px; border:0px; padding:4px; border-radius:3px; visibility:visible; z-index:10; opacity:0.7;}

#DescriptionBox{bottom:3px; left:3px;}
	
.ControlPanelSection{position:absolute; background:#E0E0E0; bottom:3px; left:3px; right:3px; height:45px; margin:0px; border:0px; padding:4px; border-radius:4px; visibility:visible; z-index:20; opacity:1;}

#VMLogo{position:absolute; left:-0px; top:0px; width:32px; height:53px; border-radius:4px 0px 0px 4px;} 

.map-canvas {width:100%; height:100%; margin:0; padding:0;}
	
.VRSight{visibility:hidden; border: none 0px black; width:50%; height:100%; left:0%; top:0%; position: absolute;z-index:5;}

.VRSight p {background-color: #DCFFFF; color: #006633; opacity:0.0; border: solid 6px #DCFFFF; border-radius:5px;	font-family:"Arial","sans serif"; font-size:70%; text-align:center; margin:2px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}

.TouchStop{visibility:hidden; border: none 0px black; width:100%; background-color:pink; height:100%; left:0%; top:0%; position: absolute;z-index:0; opacity:0;}
	
.HotSpotArrowUp {height:20px; width:20px; background-image:url('ArrowUp.svg'); background-size:20px 20px; opacity:0.6;}

.HotSpotArrowLeft {height:20px; width:20px; background-image:url('ArrowLeft.svg'); background-size:20px 20px; opacity:0.6;}
	
.HotSpotArrowRight{height:20px; width:20px; background-image: url('ArrowRight.svg'); background-size:20px 20px; opacity:0.6;}

.HotSpotArrowDown {height:20px; width:20px; background-image: url('ArrowDown.svg');	background-size:20px 20px;	opacity:0.6; }
	
.HotSpotMountain {height:20px; width:20px; background-image: url('Mountain.svg'); background-size:20px 20px; opacity:0.6;}
	
.HotSpotMagnifier {height:20px; width:20px; background: url('Magnifier.svg'); background-size:20px 20px; opacity:0.6;}
.HotSpotMagnifier:hover {opacity:1;}
	
.HotSpotInfo {height:20px; width:20px; background: url('Info.svg'); background-size:20px 20px;	opacity:0.6; }

.HotSpotNoEntry {height:20px; width:20px; background: url('NoEntry.svg'); background-size:20px 20px;	opacity:0.6; }

.HotSpotUTurn {height:20px; width:20px; background: url('UTurn180.svg'); background-size:20px 20px;	opacity:0.6; }

.HotSpotTime {height:20px; width:20px; background: url('Time.svg'); background-size:20px 20px;	opacity:0.6; }

div.custom-tooltip span {visibility:hidden; position:absolute; top:0px; border-radius:3px; background-color:#DCFFFF; color:#006633; text-align:center; max-width:400px; padding:5px 10px; margin-left:-400px; cursor:default;}
	
div.custom-tooltip:hover span{visibility: visible;}

div.SpaceBar{position:absolute; background-image:url('SpacerBar.jpg'); width:3px; height:38px;}

#ControlPanelToggle{position:absolute; top:1px; left:104px; right:152px; bottom:1px; cursor:pointer; opacity:.5; z-index:5;}

#ButtonVROn{position:absolute; top:0px; right:100px; background-image:url('ButtonVROn.jpg'); cursor:pointer; width:42px; height:42px; z-index:0;}
#ButtonVROn:hover{background-image:url('ButtonVROnOver.jpg');}

#ButtonVROff{position:absolute; top:0px; right:100px; background-image:url('ButtonVROff.jpg'); cursor:pointer; width:42px; height:42px; z-index:1;}
#ButtonVROff:hover{background-image:url('ButtonVROffOver.jpg');}

#FullScreenControl{position:absolute; top:0px; right:50px; background-image:url('FullScreen.gif'); cursor:pointer; width:42px; height:42px;}
#FullScreenControl:hover{background-image:url('FullScreenOver.gif');}

#ButtonDownload{position:absolute; top:0px; right:0px; background-image:url('Download.gif'); cursor:pointer; width:42px; height:42px; z-index:1;}
#ButtonDownload:hover{background-image:url('DownloadOver.gif');}

#Download{position:absolute; top:0px; right:0px; background-image:url('Downloading.gif'); cursor:pointer; width:42px; height:42px; z-index:0; text-align:center; line-height:40px; font-size:70%}

	/* ----------- Generic Small Portrait ----------- */  

	@media screen and (max-width:640px) and (orientation: portrait) 		  
{
  	html{-webkit-text-size-adjust:100%; /* Prevent font from scaling in landscape while allowing user to zoom.*/}
	
	P{font-family:"Arial","sans serif"; font-size:70%; color:black;}
	#DistanceBox{bottom:85px; right:3px; width:45px; text-align:right;}
	#HeightBox{bottom:60px; right:3px; width:45px;text-align:right;}
	#DescriptionBox{right:60px; min-height:96px;}
}

	/* ----------- Generic Small landscape ----------- */  

	@media screen and (max-width:640px) and (orientation: landscape) 		  
{
  	html{-webkit-text-size-adjust:100%; /* Prevent font from scaling in landscape while allowing user to zoom.*/}
	
	P{font-family:"Arial","sans serif"; font-size:70%; color:black;}
	#DistanceBox{bottom:28px; right:60px; width:45px; text-align:right;}
	#HeightBox{bottom:3px; right:60px; width:45px;text-align:right;}
	#DescriptionBox{right:118px; min-height:39px;}
}

	/* ----------- Medium Smart Phone / Tablet in Landscape ----------- */ 

	@media screen and (min-width:640px) and (max-width:1280px) and (orientation: landscape) 		  
{
  	html{-webkit-text-size-adjust:100%; /* Prevent font from scaling in landscape while allowing user to zoom.*/}
	
	P{font-family:"Arial","sans serif"; font-size:70%; color:black;}
	#DistanceBox{bottom:28px; right:60px; width:45px; text-align:right;}
	#HeightBox{bottom:3px; right:60px; width:45px;text-align:right;}
	#DescriptionBox{right:118px; min-height:39px;}
}

	/* ----------- Generic Medium / Tablet ----------- */ 

	@media screen and (min-width:640px) and (max-width:1280px), screen (min-height:320px) and (max-height:820px)	  
{
  	html{-webkit-text-size-adjust:100%; /* Prevent font from scaling in landscape while allowing user to zoom.*/}
	
	P{font-family:"Arial","sans serif"; font-size:70%; color:black;}
	#DistanceBox{bottom:28px; right:60px; width:45px; text-align:right;}
	#HeightBox{bottom:3px; right:60px; width:45px;text-align:right;}
	#DescriptionBox{right:118px; min-height:39px;}
}
	
	/* ----------- Generic Large----------- */  
	
	@media screen and (min-width:1280px) and (max-width:6000px)
{	
	#DistanceBox{bottom:28px; right:60px; width:45px; text-align:right;}
	#HeightBox{bottom:3px; right:60px; width:45px;text-align:right;}
	#DescriptionBox{right:118px; min-height:39px;}	
}