﻿/*Updated 4rd March 2021*/

*{border:0px;margin:0px;padding:0px}

.HalfHeightText{font-family:"Helvetica Neue",Helvetica, 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:100%; color:black;}

body {margin:0px; border:0px; padding:0px; 
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);}

.pnlm-compass{height:50px; width:50px; background-image:url('Compass.svg'); background-size:50px 50px;}

#OuterWrapper {position:absolute; top:0%; left:0%; width:100%; height:99.9%; margin:0px; border:0px; padding:0px;}

#MainContents{background:#a2c3cb; position:absolute; top:0px; bottom:0px; left:0px; right:0px; margin:0px; border:0px; padding:0px; z-index:10;}	

#DistanceBox{position:absolute; left:3px; bottom:3px; background:#a2c3cb; border:3px solid white; padding:2px; border-radius:3px; height:18px; width:70px; z-index:20; text-align:right; font-family:"Helvetica Neue",Helvetica, Arial,"sans serif"; font-size:10pt; color:#674A32;}

#HeightBox{position:absolute; left:88px; bottom:3px; background:#a2c3cb; border:3px solid white; padding:2px; border-radius:3px; height:18px; width:70px; z-index:20; text-align:right; font-family:"Helvetica Neue",Helvetica, Arial,"sans serif"; font-size:10pt; color:#674A32;}
	
#PannellumSection{background:white; position:absolute; top:0%; left:0%; width:100%; height:100%; margin:0px; border:0px; padding:0px; z-index:10; transition: 1s ease;}

#HiResLayer{visibility:visible; border-style:none; width:100%; height:100%; left:0; top:0; position:absolute; z-index:4; opacity:1}

#TransLayer{visibility:visible; border-style:none; width:100%; height:100%; left:0; top:0; position:absolute; z-index:3; opacity:1;}

#Pano_A_Hi{border-style:none; width:100%; height:100%; left:0%; top:0; position:absolute; z-index:3;}

#Pano_A_Trans{border-style:none; width:100%; height:100%; left:0; top:0; position:absolute; z-index:3;}

#Pano_B_Hi{border-style:none; width:100%; height:100%; left:0; top:0; position:absolute; z-index:4;}

#Pano_B_Trans{border-style:none; width:100%; height:100%; left:0; top:0; position:absolute; z-index:4;}

#Pano_C_Hi{border-style:none; width:100%; height:100%; left:0; top:0; position:absolute; z-index:1;}

#Pano_C_Trans{border-style:none; width:100%; height:100%; left:0; top:0; position:absolute; z-index:1;}

#Pano_D_Hi{border-style:none; width:100%; height:100%; left:0; top:0; position:absolute; z-index:2;}

#Pano_D_Trans{border-style:none; width:100%; height:100%; left:0; top:0; position:absolute; z-index:2;}

#MessengerSection {position:absolute; background:white; font-family:"Helvetica Neue",Helvetica, 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;}
	
#DescriptionBox{position:absolute; left:5px; top:5px; width:274px; max-height:calc(100%-20px); background:#a2c3cb; font-family:"Arial","sans serif"; font-size:90%; color:white; text-align:justify; font-weight:normal; margin:0px; border:3px solid white; padding:4px; border-radius:3px; visibility:visible; z-index:30; opacity:0.95; transform-origin: left top; transition:all 1s;}

#DescriptionBoxHeader{position:relative; top:0; left:0; width:100%; background-image:url('FullLogo.png'); width:100%; height:115px; transition:width 1s, height 1s; z-index:10;}

#DescriptionBoxTitle{position:relative; top:5px; left:0; width:100%; font-family:"Lato", Arial,"sans serif"; font-size:14pt; color:#F7F7F7; text-align:left; z-index:10; min-height:30px;}

#DescriptionBoxLong{position:relative; top:5px; left:0; width:100%; font-family:"Helvetica Neue",Helvetica, Arial,"sans serif"; font-size:10pt; color:#674A32; transition:width 1s, height 1s, transform 1s;}

#DescriptionBoxLong a:link, a:visited, a:active { color: #674A32 ; font-weight:bold ; text-decoration:uderline} 

#DescriptionBoxMap{position:relative; top:10px; left:2px; width:calc(100% - 4px); height:0px; transition:width 1s, height 1s, transform 1s;}

#SatMapDiv{position:absolute; top:1px; left:0px; width:100%; height:100%; z-index:10;}

#TopoMapDiv{position:absolute; top:1px; left:0px; width:100%; height:100%; z-index:5;}

#MessageDisplay{font-family:"Arial","sans serif"; font-size:10pt; color:black; }

#LeftHand{position:absolute; top:0; left:0; width:50%; height:100%; margin:0; padding:0; border:0; }

#RightHand{position:absolute; top:0; left:50%; width:50%; height:100%; margin:0; padding:0; border:0;}

.VRSight{visibility:hidden; border: 2px solid white; border-radius:5px; width:auto; z-index:90; background-color: #a2c3cb; color: #674A32; opacity:1; font-family:"Arial","sans serif"; font-size:70%; text-align:center; padding:5px 5px;}

#VRSightLeft{position:absolute; top:50%; left:50%; max-width:calc(100% - 60px); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}

#VRSightRight{position:absolute; top:50%; left:50%; max-width:calc(100% - 60px); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}

.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;
}

.showImage {
	position: absolute;
    max-width: 90vw;
    max-height: 90vh;
    top: 50%;
    left: 50%;
	-ms-transform:translate(-50%, -50%); transform:translate(-50%,-50%);
	border: 3px solid white; border-radius:3px;
}

.TouchStop{visibility:visible; border: none 0px black; width:100%; background-color:#a2c3cb; height:100%; left:0; top:0; position: absolute; z-index:100; opacity:1; transition-property: background-color, opacity;
  transition-duration:0.5s; }

.TouchStop p {font-family:"Helvetica Neue",Helvetica, Arial,"sans serif"; font-size:20pt; font-weight:bold; text-align: center; color:white; margin:2px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.TouchStopButton {position:absolute; width:300px; left:50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family:"Helvetica Neue",Helvetica, Arial,"sans serif"; font-size:20pt; font-weight:bold; text-align: center; color:white; margin:2px; border: 2px solid white; border-radius:3px; background-color:#a2c3cb; padding:5px; height:50px; cursor:pointer;}

.TouchStopButton:hover {transform:scale(1.1); background-color:white; color:#a2c3cb; border: 2px solid white; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.TouchStopButton:active {border: 2px solid white;}

#ButtonResume{top:50%;}

#ButtonRestart{top:68%;}

.Hotspot {}

.HotSpotArrowUp {height:100px; width:100px; background-image:url('ArrowUp.svg'); background-size:100px 100px; opacity:0.9;}

.HotSpotArrowUpPulse {height:100px; width:100px; background-image:url('ArrowUpPulse.svg'); background-size:100px 100px; opacity:0.9;}

.HotSpotArrowLeft {height:100px; width:100px; background-image:url('ArrowLeft.svg'); background-size:100px 100px; opacity:0.9;}

.HotSpotArrowLeftPulse {height:100px; width:100px; background-image:url('ArrowLeftPulse.svg'); background-size:100px 100px; opacity:0.9;}
	
.HotSpotArrowRight{height:100px; width:100px; background-image: url('ArrowRight.svg'); background-size:100px 100px; opacity:0.9;}

.HotSpotArrowRightPulse {height:100px; width:100px; background-image:url('ArrowRightPulse.svg'); background-size:100px 100px; opacity:0.9;}

.HotSpotArrowDown {height:100px; width:100px; background-image: url('ArrowDown.svg');background-size:100px 100px; opacity:0.9; }
	
.HotSpotMountain {height:40px; width:40px; background-image: url('Mountain.svg'); background-size:40px 40px; opacity:0.9; z-index:1!important;}

.HotSpotMountain:hover ~ .HotSpotMountain {z-index: 0!important;}

.HotSpotMountainPin {height:80px; width:40px; top:-40px; background-image: url('MountainPin.svg'); background-size:40px 80px; opacity:0.9; z-index:1!important;}

.HotSpotMountainPin:hover ~ .HotSpotMountainPin {z-index: 0!important;}

.HotSpotMountainPinTall {height:120px; width:40px; top:-60px; background-image: url('MountainPinTall.svg'); background-size:40px 120px; opacity:0.9; z-index:1!important;}

.HotSpotMountainPinTall:hover ~ .HotSpotMountainPinTall {z-index: 0!important;}
	
.HotSpotMagnifier {height:40px; width:40px; background: url('Magnifier.svg'); background-size:40px 40px; opacity:0.9; z-index:1!important;}

.HotSpotMagnifier:hover ~ .HotSpotMagnifier {z-index: 0!important;}
	
.HotSpotInfo {height:40px; width:40px; background: url('Info.svg'); background-size:40px 40px; opacity:0.9;  z-index:1!important;}

.HotSpotInfo:hover ~ .HotSpotInfo {z-index: 0!important;}

.HotSpotInfoPin {height:80px; width:40px; top:-40px; background: url('InfoPin.svg'); background-size:40px 80px; opacity:0.9; z-index:1!important;}

.HotSpotInfoPin:hover ~ .HotSpotInfoPin {z-index: 0!important;}
		
.HotSpotInfoPinTall {height:120px; width:40px; top:-60px; background: url('InfoPinTall.svg'); background-size:40px 120px; opacity:0.9; z-index:1!important;}

.HotSpotInfoPinTall:hover ~ .HotSpotInfoPinTall {z-index: 0!important;}

.HotSpotNoEntry {height:40px; width:40px; background: url('NoEntry.svg'); background-size:40px 40px; opacity:0.9; z-index:1!important;}

.HotSpotNoEntry:hover ~ .HotSpotNoEntry {z-index: 0!important;}

.HotSpotTime {height:40px; width:40px; background: url('Time.svg'); background-size:40px 40px; opacity:0.9; z-index:1!important;}

.HotSpotTime:hover ~ .HotSpotTime {z-index: 0!important;}

.HotSpotHistoricPhoto {height:40px; width:40px; background: url('HistoricPhoto.svg'); background-size:40px 40px; opacity:0.9; z-index:1!important;}

.HotSpotHistoricPhoto:hover ~ .HotSpotHistoricPhoto {z-index: 0!important;}

div.custom-tooltip span {font-family:Arial,"sans serif"; font-size:12pt; visibility:hidden; position:absolute; top:0px; max-width:800px ; margin-left:-400px; cursor:default; z-index:10;}
	
div.custom-tooltip:hover span{visibility: visible;}

.Tooltip-Direction {position:absolute; border-radius:3px; border:3px solid white; background-color: #a2c3cb; color:white; text-align:center; padding:5px 10px;}

.Tooltip-Info {position:absolute; border-radius:3px; border:3px solid white; background-color: #674A32; color:white; text-align:center; padding:5px 10px;}

#ControlPanelToggle{position:absolute; top:1px; left:104px; right:252px; bottom:1px; cursor:pointer; opacity:.5; z-index:5; font-family:"Arial","sans serif"; font-size:7pt; color:black; text-align:justify; font-weight:normal;}

#ButtonBar{position:relative; top:5px; height:50px; transition:width 1s, height 1s, transform 1s;}

#ButtonMenuClose{position:absolute; top:4px; right:1px; background:url('MenuCloseIcon.svg') no-repeat top left; background-size:20px 33px; cursor:pointer; width:20px; height:33px; z-index:50;}
#ButtonMenuClose:hover{transform:scale(1.2);}

#ButtonMenuOpen{position:absolute; top:9px; left:1px; background:url('MenuOpenIcon.svg') no-repeat top left; background-size:20px 33px; cursor:pointer; width:20px; height:33px; z-index:50; visibility:hidden; opacity:0.4;}
#ButtonMenuOpen:hover{transform:scale(1.2);}

#ButtonMap{position:absolute; top:5px; left:0px; background:url('SatMapIcon.svg') no-repeat top left; background-size:42px 42px; cursor:pointer; width:42px; height:42px; z-index:1;}
#ButtonMap:hover{transform:scale(1.3);}

#ButtonVROn{position:absolute; top:5px; left:50px; background:url('VRHeadsetIcon.svg') no-repeat top left; background-size:42px 42px; cursor:pointer; width:42px; height:42px; z-index:1;}
#ButtonVROn:hover{transform:scale(1.3);}

#ButtonCROn{position:absolute; top:5px; left:100px; background: url('CRGlassesIcon.svg') no-repeat top left; background-size:42px 42px; cursor:pointer; width:42px; height:42px; z-index:1;}
#ButtonCROn:hover{transform:scale(1.3);}

#ButtonVROff{position:absolute; top:5px; left:100px; background: url('CRGlassesOffIcon.svg') no-repeat top left; background-size:42px 42px; cursor:pointer; width:42px; height:42px; z-index:0;}
#ButtonVROff:hover{transform:scale(1.3);}

#FullScreenControl{position:absolute; top:5px; right:0px; background:url('FullScreen.svg') no-repeat top left; background-size:42px 42px; cursor:pointer; width:42px; height:42px;}
#FullScreenControl:hover{transform:scale(1.3);}

#ButtonExitVR{position:absolute; bottom:10px; right:10px; background: url('VRHeadsetOffIcon.svg') no-repeat bottom right; background-size:42px 42px; cursor:pointer; width:42px; height:42px; z-index:-10;}
#ButtonExitVR:hover{transform:scale(1.3);}


.pnlm-load-box {z-index:-999; opacity: 0;}	
.cyan {blend-mode:lighten; mix-blend-mode:lighten; opacity:1;}
.cyan {-webkit-filter:url(#cyan); filter:url(#cyan);}
.red {blend-mode:lighten; mix-blend-mode:lighten; opacity:1;}
.red {-webkit-filter:url(#red); filter:url(#red);}

#WelcomeBox{position:absolute; width:calc(100% - 10px); top:10px; left:5px; height:calc(65% - 120px)}

#CarouselWrapper{position:absolute; width:calc(100% - 10px); height:97px; bottom:35%; left:5px; z-index:45; margin:auto; transition-property: margin, height, transform; transition-duration: 1s; transition-timing-function: ease-in;}
#SceneCarousel{position:relative; width:calc(100% - 10px); height:100%; margin:auto;}
#SpinLeft{position:absolute; width:40px; height:100%; top:0px; left:0px; background:url('ScrollLeft.svg') no-repeat top left; background-size:40px 96px; cursor:pointer;}
#SpinLeft:hover{transform: scale(1.05);}
#SpinRight{position:absolute; width:40px; height:100%; top:0px; right:0px; background:url('ScrollRight.svg') no-repeat top left; background-size:40px 94px; cursor:pointer;}
#SpinRight:hover{transform: scale(1.05);}
#CarouselOuter{position:absolute; width:calc(100% - 80px); height:100%; top:0px; left:0px; background-color:lightgrey; overflow: hidden; padding:0; margin:0; border:0;}
#CarouselInner{position:relative; width:100%; height:100%; top:0px; left:0px; background-color:lightgrey; transition: transform .4s ease-in; padding:0; margin:0; border:0;}

#SwitchTour{position:absolute; width:200px; height:100px; left:calc(50% - 100px); bottom:8%; z-index:45; margin:auto; Background-color:#0F824B;}

.Scene{width:180px; height:86px; cursor:pointer; transition: transform 1s ease-in;text-align:center; font-family: Arial; font-size: 10pt; color:black; line-height: 20px; overflow: hidden;}
.Scene:hover{transform: scale(1.05);}
.Scene:hover .SceneTitle{ background-image:url('Menu_Green.jpg');;}
.SceneThumbnail{position:absolute; left:0px; width:180px; height:80px; top:0px; background-repeat: no-repeat; background-size: contain ; font-family: Arial, Helvetica, sans-serif; font-size:12pt; color:white; text-align: center;}
.SceneTitle{position:absolute; left:0px; width:180px; height:20px; top:66px; background-image:url('Menu_Silver.jpg'); background-size:180px 20px; text-align:center; font-family: Arial; font-size: 10pt; color:black; line-height: 20px; overflow: hidden;}

.DirectionMountain{display:inline-block; color: white; margin:3px; border: 2px solid white; border-radius: 2px; background-color:#674A32; background-image:url("MountainSq.svg"); background-repeat: no-repeat; background-size:20px; background-position: 3px 6px;padding: 5px 5px 3px 23px;}

.DirectionMountainHut{display:inline-block; color: white; margin:3px; border: 2px solid white; border-radius: 2px; background-color:#674A32; background-image:url("Mountain_Hut_Sq.svg"); background-repeat: no-repeat; background-size:20px; background-position: 3px 6px;padding: 5px 5px 3px 23px;}

.SwitchTourOuter {
	position:absolute;
	transition: transform 1s ease-in;
	height: 86px;
	width:180px;
	Background-color:#0F824B; 
	margin:0; 
}

.SwitchTourOuter:hover{background-color:#9EBF8D;transform: scale(1.05);}

.SwitchTourText {
	position:absolute;
	width:100%;	
	color:white;
	margin:0; 
	font-family:"Arial","sans serif"; font-size:10pt; font-weight:normal; 
	text-align:center; 
	line-height:20px;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

	/* ----------- 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;}
	#DescriptionBoxHeader{height:0px;}
	
	.HotSpotArrowUp {height:60px; width:60px; background-image:url('ArrowUp.svg'); background-size:60px 60px; opacity:0.9;}
	
	.HotSpotArrowUpPulse {height:60px; width:60px; background-image:url('ArrowUpPulse.svg'); background-size:60px 60px; opacity:0.9;}

	.HotSpotArrowLeft {height:60px; width:60px; background-image:url('ArrowLeft.svg'); background-size:60px 60px; opacity:0.9;}
		
	.HotSpotArrowRight{height:60px; width:60px; background-image: url('ArrowRight.svg'); background-size:60px 60px; opacity:0.9;}

	.HotSpotArrowDown {height:60px; width:60px; background-image: url('ArrowDown.svg');background-size:60px 60px; opacity:0.9; }
		
	.HotSpotMountain {height:25px; width:25px; background-image: url('Mountain.svg'); background-size:25px 25px; opacity:0.9;}
	
	.HotSpotMountainPin {height:50px; width:25px; top:-25px; background-image: url('MountainPin.svg'); background-size:25px 50px; opacity:0.9;}

	.HotSpotMountainPinTall {height:75px; width:25px; top:-50px; background-image: url('MountainPinTall.svg'); background-size:25px 75px; opacity:0.9;}
		
	.HotSpotMagnifier {height:25px; width:25px; background: url('Magnifier.svg'); background-size:25px 25px; opacity:0.9;}
		
	.HotSpotInfo {height:25px; width:25px; background: url('Info.svg'); background-size:25px 25px; opacity:0.9; }
	
	.HotSpotInfoPin {height:50px; width:25px; top:-25px; background: url('InfoPin.svg'); background-size:25px 50px; opacity:0.9; }
		
	.HotSpotInfoPinTall {height:75px; width:25px; top:-50px; background: url('InfoPinTall.svg'); background-size:25px 75px; opacity:0.9; }		
		
	.HotSpotNoEntry {height:25px; width:25px; background: url('NoEntry.svg'); background-size:25px 25px; opacity:0.9; }

	.HotSpotTime {height:25px; width:25px; background: url('Time.svg'); background-size:25px 25px; opacity:0.9; }
	
	.HotSpotHistoricPhoto {height:25px; width:25px; background: url('HistoricPhoto.svg'); background-size:25px 25px; opacity:0.9; }
	
	.DirectionMountain{background-position: 2px 2px;}
	
	.DirectionMountainHut{background-position: 2px 2px;}
}

	/* ----------- Generic Small landscape ----------- */  

	@media screen and (max-width:840px) 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;}
	
	#DescriptionBoxHeader{height:0px;}
	/*
	#DescriptionBoxMap{height:0px;}
	#BingMapDiv{height:0px;}
	#map-canvas{height:0px;}
	#ButtonMap{pointer-events:none; filter:grayscale(100%); opacity:0.3;}
	*/

	
	.HotSpotArrowUp {height:60px; width:60px; background-image:url('ArrowUp.svg'); background-size:60px 60px; opacity:0.9;}
	
	.HotSpotArrowUpPulse {height:60px; width:60px; background-image:url('ArrowUpPulse.svg'); background-size:60px 60px; opacity:0.9;}

	.HotSpotArrowLeft {height:60px; width:60px; background-image:url('ArrowLeft.svg'); background-size:60px 60px; opacity:0.9;}
		
	.HotSpotArrowRight{height:60px; width:60px; background-image: url('ArrowRight.svg'); background-size:60px 60px; opacity:0.9;}

	.HotSpotArrowDown {height:60px; width:60px; background-image: url('ArrowDown.svg');background-size:60px 60px; opacity:0.9; }
		
	.HotSpotMountain {height:25px; width:25px; background-image: url('Mountain.svg'); background-size:25px 25px; opacity:0.9;}
	
	.HotSpotMountainPin {height:50px; width:25px; top:-25px; background-image: url('MountainPin.svg'); background-size:25px 50px; opacity:0.9;}

	.HotSpotMountainPinTall {height:75px; width:25px; top:-50px; background-image: url('MountainPinTall.svg'); background-size:25px 75px; opacity:0.9;}
		
	.HotSpotMagnifier {height:25px; width:25px; background: url('Magnifier.svg'); background-size:25px 25px; opacity:0.9;}
		
	.HotSpotInfo {height:25px; width:25px; background: url('Info.svg'); background-size:25px 25px; opacity:0.9; }

	.HotSpotInfoPin {height:50px; width:25px; top:-25px; background: url('InfoPin.svg'); background-size:25px 50px; opacity:0.9; }
		
	.HotSpotInfoPinTall {height:75px; width:25px; top:-50px; background: url('InfoPinTall.svg'); background-size:25px 75px; opacity:0.9; }	
	
	.HotSpotNoEntry {height:25px; width:25px; background: url('NoEntry.svg'); background-size:25px 25px; opacity:0.9; }

	.HotSpotTime {height:25px; width:25px; background: url('Time.svg'); background-size:25px 25px; opacity:0.9; }
	
	.HotSpotHistoricPhoto {height:25px; width:25px; background: url('HistoricPhoto.svg'); background-size:25px 25px; opacity:0.9; }
	
	.DirectionMountain{background-position: 2px 2px;}
	
	.DirectionMountainHut{background-position: 2px 2px;}
}

	/* ----------- height check for map ----------- */  

	@media screen and (max-height:700px)		  
{
	#DescriptionBoxHeader{height:30px; background-image:url('NameOnlyLogo.png'); background-repeat: no-repeat; background-size:100%;}
}

	/* ----------- height check for map ----------- */  

	@media screen and (max-height:660px)		  
{
	#DescriptionBoxHeader{height:0px;}
}

	/* ----------- Medium Smart Phone / Tablet in Landscape ----------- */ 

	@media screen and (min-width:840px) 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;}
}

	/* ----------- Generic Medium / Tablet ----------- */ 

	@media screen and (min-width:640px) and (max-width:1280px) 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;}
}
	
	/* ----------- Generic Large----------- */  
	
	@media screen and (min-width:1280px) and (max-width:6000px)
{	
}