#forrester {
	position: absolute;
	bottom: 15px;
	right: 10px;
}

#forrester a {font-size:11px; font-family:arial; color:rgba(0,0,0,.3); text-decoration:none;}
#forrester a:visited {font-size:11px; font-family:arial; color:rgba(0,0,0,.3); text-decoration:none;}
#forrester a:hover {font-size:11px; font-family:arial; color:rgba(0,0,0,.5); text-decoration:underline;}

.no-click {
	pointer-events:none !important;
	}

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	}
p {
	text-indent:1em;
	font-family:arial;
	font-size:1.09em;
	}
img {
	max-width:100%;
	}
#popup-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position:fixed;
	width:100%;
	height:100%;
	background: rgba(0,0,0,.3);
	z-index: 2;
	display:none;
}
.popup {
	background:rgba(255,255,255,.9);
	border:2px solid #369;
	border-radius:20px;
	box-shadow:5px 5px 8px rgba(0,0,0,.5);
	display:none;
	padding:0 30px 26px;
	color:#284E74;
	z-index:3;
	position:relative;
	overflow:auto;
	max-height:100%;
	width:100%;
	max-width:840px;
}
.camerapopup {
	background:rgba(255,255,255,.9);
	border:2px solid #369;
	border-radius:20px;
	box-shadow:5px 5px 8px rgba(0,0,0,.5);
	display:none;
	padding:0 30px 26px;
	color:#284E74;
	z-index:3;
	position:relative;
	overflow:auto;
	max-height:100%;
	width:100%;
	max-width:90%;
	max-height:99%;
}
.camerapopup img {
	width:100%;
	}
.popup h1 {
	color:#284E74;
	padding-left:.3em;
	}
.images{
	position:relative;
	float:left;
	margin:0 30px 20px -16px;
	max-width:100%;
	}
.image {
	border:1px solid #369;
	border-radius:8px;
	}
.imageLG {
	padding:20px 0 0 0;
	}
.imagenumber {
	position:absolute; 
	bottom:10px; 
	cursor:pointer;
	}
.closepopup {
	position:absolute;
	top:8px;
	right:10px;
	cursor:pointer;
	}
.chart {
	display:none;
	position: absolute;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	}
.closechart {
	position:relative;
	}
.closechart img {cursor:pointer;}
.viewchart {
	color:#369;
	text-decoration:underline;
	cursor:pointer;
	}
.point {
	position: absolute;
	/*border: 1px solid rgb(249, 255, 0);*/
	cursor: pointer;
	}
.tooltip {
	position:absolute;
	background:rgba(0,0,0,0.8);
	color:#fff;
	padding:2px 8px;
	border-radius:6px;
	border:1px solid #fff;
	white-space:nowrap;
	display:none;
	}
.camera {
	position: absolute;
	width: 54px;
	height: 43px;
	border: 1px solid rgb(249, 255, 0);
	cursor: pointer;
	}
#zoomable {
	margin:auto;
	width:100%;
	height:100%;
	transition: transform 1s;
	display:inline-block;
	overflow:visible;
	}
#draggable {
	background:rgb(216, 236, 239) url('graphics/background.jpg');
	background-repeat:no-repeat;
	text-align:center;
	margin:auto;
	width:1002px;
	height:705px;
	min-height:97vh;
	/*height:2000px;       chrome hiding overflow fix    */
	transition:transform 1s;
	cursor:move;
	overflow:visible;
	}
body {
	margin:0;
	padding:0;
	background:rgb(216, 236, 239);
	overflow:hidden;
	}	
.zoomlevel-1{
	-ms-transform:scale(0.6,0.6);
	-webkit-transform:scale(0.6,0.6);
	transform:scale(0.6,0.6);
	}
.zoomlevel-2{
	-ms-transform:scale(0.7,0.7);
	-webkit-transform:scale(0.7,0.7);
	transform:scale(0.7,0.7);
	}
.zoomlevel-3{
	-ms-transform:scale(0.85,0.85);
	-webkit-transform:scale(0.85,0.85);
	transform:scale(0.85,0.85);}
.zoomlevel-4{
	-ms-transform:scale(1,1);
	-webkit-transform:scale(1,1);
	transform:scale(1,1);
	}
.zoomlevel-5{
	-ms-transform:scale(1.2,1.2);
	-webkit-transform:scale(1.2,1.2);
	transform:scale(1.2,1.2);
	}
.zoomlevel-6{
	-ms-transform:scale(1.4,1.4);
	-webkit-transform:scale(1.4,1.4)
	;transform:scale(1.6,1.6);
	}
.zoomlevel-7{
	--ms-transform:scale(2,2);
	-webkit-transform:scale(2,2);
	transform:scale(2,2);
	}
#bar {
	position:fixed;
	bottom:0px;
	width:100%;
	height:44px;
	background:#fff;
	box-shadow: 0px 2px 12px rgba(0,0,0,0.5);
	}
#logo {
	position:fixed;
	left:70px;
	bottom:7px;
	background:url('graphics/mapLOGO.png') 0px -68px;
	width:366px;
	height:59px;
	}
#out {
	width: 35px;
	height: 35px;
	background: transparent url('graphics/mapNAVsprite2.png') repeat scroll -18px 38px;
	position: fixed;
	bottom: 5px;
	right: 228px;
	cursor:pointer;
	}
#zoom {
	width: 35px;
	height: 35px;
	background: transparent url('graphics/mapNAVsprite2.png') repeat scroll -52px 38px;
	position: fixed;
	bottom: 5px;
	right: 264px;
	cursor:pointer;
	}
#scale {
	position:fixed;
	bottom:12px;
	right:160px;
	color:#369;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
#compass {
	width:156px;
	height:89px;
	background:url('graphics/mapNAVsprite2.png');
	background-position:-85px 0;
	position:fixed;
	bottom:2px;
	right:60px;
	}
@media only screen and (max-width : 850px) {
	#logo {left:30px;}
	#out {right:188px;}
	#zoom {right:224px}
	#scale {right:120px;}
	#compass {right:20px;}
}
@media only screen and (max-width : 690px) {
	#logo {background-position:0 -10px;}
}
@media only screen and (max-width : 450px) {
	#logo {left:10px;}
	#out {right:174px;}
	#zoom {right:210px}
	#scale {right:106px;}
	#compass {right:6px;}
}
@media only screen and (max-width : 390px) {
	#logo {width:70px;}
}
@media only screen and (max-width : 328px) {
	#logo {display:none;}
}