@font-face {
    font-family: 'ebgaramond';
    src: url('/ebgaramond-webkit/ebgaramond12-regular-webfont.woff2') format('woff2'),
         url('/ebgaramond-webkit/ebgaramond12-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ebgaramondsc';
    src: url('/ebgaramond-webkit/ebgaramondsc-webfont.woff2') format('woff2'),
         url('/ebgaramond-webkit/ebgaramondsc-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html {
	width: 100%;
	height: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
	font-size: 1rem;
	line-height: 1.5rem;
	color: #000;
	font-family: 'ebgaramond';
}
body {
	width: 100%;
	min-width: 300px;
	height: 100%;
    margin: 0;
	background-color: #d4e3c5;
	color: #40140a;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
#nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #40830c; 				/* dark green */
	font-size: 1.5rem;
	line-height: 3rem;
	height: 3rem;
	font-family: 'ebgaramondsc';
}
#nav > a {
	display: none;
	color: #f2e96d;
}
#nav li {
	position: relative;
}
.navlvl1 {
	height: 3rem;
	max-width: 48rem;
	margin: 0 auto;
}
.navlvl1 > li {
	width: 25%;
	height: 100%;
	float: left;
	text-align: center;
	background-color: #40830c;			 	/* dark green */
	box-sizing: border-box;
}
.navlvl1 a, .navlvl2 a {
	color: #f2e96d;							 /* yellow */
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}
.navlvl1 > li > a {
	height: 100%;
}
.navlvl1 > li > a:hover {
	color: white;
	background-color: #40140a;				/* burgandy */
}
.navlvl2 {
	display: none;
	position: absolute;
	top: 100%;
	width: 100%;
}
.navlvl2 a {
	background-color: #d4e3c5;
	color: #40140a;
}
#nav li:hover ul {
	display: block;
}
@media only screen and (min-width: 1024px) {
	.navlvl1 > li > a {
		height: 100%;
	}
	.navlvl1 > li > a:hover {
		color: white;
		background-color: #40140a;		/* burgandy */
	}
}
@media only screen and (max-width: 640px) {
	#nav > a > img {
		width: auto;
		height: 1.5rem;
		display: inline-block;
		vertical-align: -0.375rem;
		padding: 0 0.75rem;
	}
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type {
		display: block;
	}
	.navlvl1 {
		height: auto;
		display: none;
		position: absolute;
		left: 0;
		right: 0;
	}
	.navlvl1 > li > a {
		border-bottom: none;
		border-radius: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.navlvl1 > li > a:hover {
		height: 100%;
		padding-top: 0;
		background-image: none;
		border-radius: none;
		border-bottom: none;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	#nav:target > ul {
		display: block;
		border-bottom: 0.375rem solid #40140a;
	}
	#nav > ul > li {
		width: 100%;
		float: none;
	}
	#nav li ul {
		position: static;
		border-radius: 0;
		border: 0;
	}
}
.content-wrapper {
	position:relative;
	min-height: 100%;
	margin-bottom: -3rem;
}
.content-wrapper:after {
	content: "";
	display: block;
	height: 3rem;
}
header {
	position: relative;
	width: 100%;
	margin: 0 auto 0 auto;
	box-sizing: border-box;
	padding-top: 3rem;
	background-color: #40140a;
}
#bgbox {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background-image: url('/img/thegreentemple.png'), url('/img/gradient.png'), url('/img/lovelywindow-pattern.png');
	background-repeat: no-repeat;
	background-size: auto 70%, auto 100%, auto 100%;
	background-position: right center, left center, left center;
}
#bgbox img {
	width: 100%;
	height: auto;
	max-height: 18rem;
}
@media only screen and (min-width: 600px) {
	#bgbox {
		background-position: 60% center, left center, left center;
	}
}
@media only screen and (min-width: 680px) {
	#bgbox img {
		max-height: 24rem;
	}
}
@media only screen and (min-width: 1200px) {
	#bgbox {
		background-size: auto 70%, 50% auto, 50% auto;
		background-position: 55% center, 10% bottom, left bottom;
	}
}
@media only screen and (min-width: 1600px) {
	#bgbox img {
		min-height: 30rem;
	}
}
header h1 {
	width: 100%;
	text-align: center;
	font-family: 'ebgaramondsc';
	font-size: 1.5rem;
	line-height: 3rem;
	background-color: #40830c;
	color: #f2e96d;
	font-weight: normal;
}
header p {
	width: 100%;
	text-align: center;
	line-height: 1.2rem;
	background-color: #40830c;
	font-size: 0.85 rem;
	font-family: 'ebgaramondsc';
}
footer {
	line-height: 3rem;
	height: 3rem;
	margin: 0;
	text-align: center;
	background-color: #40140a;
	color: #f2e96d;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
h1,
h2,
h3,
h4,
p,
blockquote,
figure,
ol,
ul {
    margin: 0;
    padding: 0;
}
main,
li {
    display: block;
}
h1,
h2,
h3,
h4 {
    font-size: inherit;
}
strong {
    font-weight: bold;
}
a,
button {
    color: inherit;
    transition: .3s;
}
a {
	background-color:transparent;
    text-decoration: none;
}
a:active,
a:hover {
	outline:0;
}
button {
    overflow: visible;
    border: 0;
    font: inherit;
    -webkit-font-smoothing: inherit;
    letter-spacing: inherit;
    background: none;
    cursor: pointer;
}
::-moz-focus-inner {
    padding: 0;
    border: 0;
}
:focus {
    outline: 0;
}
svg:not(:root) {
  overflow: hidden;
}
img {
    max-width: 100%;
    height: auto;
    border: 0;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}