body{
	background:#00a650; color:white; margin:0; padding:0;
	font-family:Helvetica;
	font-weight:bold;
	position:relative;
}
a{color:white;}
div.container{
	position:absolute;
	top:50vh;
	width:100%;
	transform:translateY(-50%);
}
.home .circle{
	background:#00a650!important;
}
.gallery .circle{
	background:#e796b8!important;
}
.author .circle{
	background:#00acec!important;
}
.news .circle{
	background:#ffff00!important;
	color:black;
}
.contact .circle{
	background:#d5652c!important;
}
.archives .circle{
	background:#b4a540!important;
}

body.gallery #viewer1 .zoomIn,
body.gallery #viewer1 .zoomOut,
body.gallery #viewer1 .zoom11,
body.gallery .maximize,
body .info{
	display:none;
}
.viewer .thumbnail{
	width:35%!important;
	height:auto;
}
.overlayercontainer{ height:512px; padding:20px; margin-top:7vh;}
#viewer2 .thumbnail{
	width:20%!important;
}

#mainnav ul{
	margin:0;
	padding:0;
}
#mainnav li{
	background:black;
	list-style:none;
	margin:0 0 10px;
	border-top:5px solid black;
	border-bottom:5px solid black;
	width:100%;
}
#mainnav a{
	text-decoration:none;
	display:block;
	border-top:5px solid white;
	padding:3px 20px;
}
#mainnav a>*{
	display:inline-block;
}
body.map{
	background:black;
}
body.map #mapcontainer{
	width:100%;
	min-height:400px;
	height:calc(100vh - 70px);
}
body.map.gallery #mapcontainer{
/*	width:100%;
	height:482px;
	margin-top:7vh;
*/}
body.map #mainnav{
	position:fixed;
	bottom:0;
	left:0;
	height:70px;
	z-index:10000;
	background:black;
	width:100%;
}
body.map #mainnav li{
	list-style:none;
	display:inline-block;
	border:none;
	margin-right:20px;
	width:auto;
}
body.map #mainnav li a{
	border:none;
	padding:0px 15px 3px 10px;
	border-top:5px solid black;
}
body.map #mainnav li a:hover, body.map #mainnav li.active a{
	border-color:white;
}
body.map .small.circle{
	margin: 0 10px 0 0;
}
body.map span.label{
	font-size:24px;
	width:auto;
	margin:0;
}
#hotspots{
	position:relative;
	height:512px;
	width:9000px;
}
#hotspots>a, .surface a{
	position:absolute;
/*	background:rgba(0,0,255,0.5);*/
	z-index:80;
}
#hotspots>a, .surface a{
	cursor:pointer;
}
.small.circle{			
	width:30px;
	height:30px;
	background:#ccc;
	border-radius:15px;
	line-height:30px;
	vertical-align:middle;
	text-align:center;
	margin:0 15%;
}
.large.circle{
	width:56px;
	height:56px;
	background:#ccc;
	border-radius:28px;
	line-height:56px;
	vertical-align:middle;
	text-align:center;
	font-size:30px;
}
span.label{
	margin-left:10px;
	font-size:48px;
	height:56px;
	line-height:56px;
	vertical-align:middle;
	width:400px;
}
span.arrow{
	height:56px;
	line-height:56px;
	vertical-align:middle;
}
span.arrow img{
	height:40px; width:auto;
	vertical-align:middle;
	border-left:1px solid white;
	padding:14.5px 10px;
	position:relative;
	top:-5px;
}
.sitename p,.signature p{
	display:inline-block;
	transform-origin : top left;
	transform:rotate(-90deg);
	text-align:right;
	margin:0;
}
.signature p{
	transform-origin : top right;
}
.sitename{
	position:relative;
	left:calc(15% + 20px);
	top:0;
}
.signature{
	position:relative;
	left:calc(15% + 20px);
	top:0;	
}
.signature p{
	transform:rotate(-90deg) translateY(-117px);
}
#overlayer{
	display:none;
	position:fixed;
	top:0;left:0;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,0.8);
	z-index:100;
}
#overlayer .close{
	position:absolute;
	top:10px; right:10px;
	font-size:30px;
	z-index:120;
	font-weight:normal;
	text-decoration:none;
}
.viewer{background:transparent!important;}

@media (max-width: 900px) {
	body{
/*		background:red;*/
	}
	.small.circle{			
		display:none!important;
	}
	.large.circle{
		margin-left:10%;
	}
	.sitename,.signature{
		left:0;
		margin:40px 20px;
		text-align:center;
		width:calc(20% + 56px);
	}
	.sitename p,.signature p{
		transform:none;
	}
}
@media (max-width: 768px) {
	body{
/*		background:blue;
*/	}
	.large.circle{
		margin-left:5%;
	}
	.sitename,.signature{
		left:0;
		margin:40px 20px;
		text-align:center;
		width:calc(10% + 56px);
	}
	
}
@media (max-width: 640px) {
	div.container{
		top:45vh;
	}
	.large.circle{
		margin-left:0;
	}
	span.label{
		font-size:32px;
		width:220px;
	}
	span.arrow img{
		height:30px;
		padding:19.5px 10px;
		top:-5px;
	}
	.sitename,.signature{
		text-align:left;
		margin:40px 20px;
		width:calc(100% - 100px);
	}
	.sitename p,.signature p{
		transform:none;
	
	}
}
@media (max-width: 400px) {
	span.label{
		font-size:24px;
		line-height:40px;
		width:160px;
	}
	span.arrow img{
		height:24px; width:auto;
		padding:14.5px 10px;
		top:-5px;
	}
	.large.circle{
		width:36px;
		height:36px;
		background:#ccc;
		border-radius:18px;
		line-height:36px;
		vertical-align:middle;
		text-align:center;
		font-size:20px;
	}
	.sitename,	.signature{
		margin:20px 20px;
	}
	span.label, span.arrow{
		height:40px;
	}
	
}
/*
@media (max-height: 640px) {
	.sitename,.signature{
		left:48px;
		margin:40px 0;
		width:calc(100% - 100px);
	}
	.sitename p,.signature p{
		transform:none;
	
	}
}*/