body{
	font-family:"myriad-pro", "myriad",  "Helvetica",sans-serif;
	line-height:1.35;
	padding:0;
	margin:0;
	line-height:1.5;
}

header{
	position:fixed;
	width:50vw;
	padding:1rem;
	left:0;
	top:0;
	background-color:#fff;
	z-index:101;
	margin:0;
}

header h1{
	margin:0;
	display:inline;
}

a{
color:#0072cf;
text-underline-position: under;
}

.view-nav{
	position:fixed;
	left:0;
	bottom:0;
	background-color:white;
	width:50vw;
	padding:1rem;
	z-index:99;
	text-align:center;
}

.lead{
	font-size:120%;
	padding:1rem;
	margin-left:0;
	
	background-color:#FFF;
}

.credits{
	margin-top:1rem;
	padding-top:1rem;
	border-top:1px solid #304220;
}

.credits .caption{
	font-weight:normal;
}

.lead b{
	display:block;
	font-size:90%;
	text-align:right;
}

blockquote{
	font-style:italic;
	font-size:120%;
}

blockquote cite{
	font-style:normal;
	font-size:0.9rem;
	display:block;
	text-align:right;
}

article{
	
}

.centre{
	text-align:center;
}

.help-hint{
	font-size:1.2rem;
}

q{
font-style:italic;
}

.half.right{
	width:25%;
	margin-left:5%;
	float:right;
	margin-right:0;
}

.half.left{
	width:25%;
	margin-right:5%;
	float:left;
	margin-left:0;
}

.third{
	width:30%;
	float:left;
	margin-right:2.5%;
}

figure{
	margin-left:0;
	margin-right:0;
}

figure img{
	max-width:100%;
}

.caption{
	font-size:80%;
	font-weight:bold;
}

.close{
	position:fixed;
	top:3px;
	right:3px;
	background-color:#FFF;
	font-size:1.5rem;
	z-index:999;
	width:2rem;
	height:2rem;
	line-height:2rem;
	text-align:center;
	background-color:#304220;
	color:#FFF;
	border-radius:50%;
	
}
.close a{
	text-decoration:none;
	color:#FFF;
}
.close b{
	font-weight:normal;
	line-height:2rem;
	padding:0;
	margin:0;
	position:relative;
	top:-0.1rem;
}



.close span{
	position:absolute;
	right:-3000px;
	display:block;
}

.find-out-more{
	clear:both;
	border:4px solid #DDD;
	padding:0.3rem 1rem;
	background-color:#FFF;
}

article h2{
	cursor:pointer;
		padding-top:1.3rem;
	margin-top:1rem;
	border-top:1px solid #304220;
}

article h2 i{

	font-style:normal;
	background-color:#304220;
	color:#FFF;
	display:inline-block;
	width:2.5rem;
	height:2.5rem;
	border-radius:50%;
	text-align:center;
	line-height:2.5rem;
	margin-right:1.2rem;
}
.caption i:before{
	content:'i';
	display:inline-block;
	margin-left:10px;
	width:1.2rem;
	height:1.2rem;
	line-height:1.2rem;
	background-color:#555;
	color:#FFF;
	text-align:center;
	border-radius:50%;
	font-style:normal;
	font-family:monospace;
	cursor:pointer;
}
.caption i.closing:before{
	content:'x';
}
.caption i span{
	position:absolute;
	right:1rem;
	width:40%;
	background-color:#FFF;
	padding:0.5rem;
	box-shadow:-5px 5px 10px #CCC;
	font-style:normal;
	margin-top:2rem;
	font-weight:normal;
	display:none;
}

.left .caption i span{
	right:auto;
	left:1rem;
}

.caption i span em{
	font-style:italic;
}

.grid{
	
  	margin:0;
}

#model{
	position:fixed;
	left:0;
	top:0;
	width:50vw;
	height:99vh;
}

iframe{
border:none;
}

#panel{
	top:0;
	right:0;
	position:fixed;
	height:100vh;
	width:50vw;
	overflow-y:auto;
	background-color:#f7f5f0;
	z-index:150;
}

#panel .pad{
	padding:1rem 2rem 2rem 2rem;
}

#api-frame{
	width:100%;
	height:100%;
}


button{
	border-radius:0;
	background-color:#304220;
	color:#FFF;
	padding:0.5rem;
	font-size:1.1rem;
	border-color:transparent;
	margin-right:0.5rem;
	margin-left:0.5rem;
	cursor:pointer;
}

#easter{
display:none;
padding-bottom:20px;
}

@media screen and (max-width:769px){

	#panel{
		top:45vh;
		left:0;
		width:100vw;
		height:55vh;
	}
	
	#model{
		top:5vh;
		width:100vw;
		height:40vh;
	}
	
	header{
		height:5vh;
		top:0;
		width:100vw;
		right:0;
	}
	
	header h1 span{
		display:none;
	}
	
	body{
		font-size:85%;
	}
	
	#panel .pad{
		padding:0.2rem 1rem 1rem 1rem;
	}
	
	.half.left,.half.right{
		width:33%;
	}
	
	header h1{
		font-size:5.5vw;
	}
	
	article h2{
		font-size:4.5vw !important;
	}

	article h2 i{
		width:2rem;
		height:2rem;
		line-height:2rem;
	}

}