:root {
	--c: #285a08;
	--ch: #a85816;
	--maxwidth: 1440px;
	--fontmain: Roboto;
	--fonthead: Eurostile;
}

@font-face {
	font-family: 'Roboto';
	src: local('Roboto'),
		url('fonts/roboto.eot'),
		url('fonts/roboto.eot?#iefix') format('embedded-opentype'),
		url('fonts/roboto.woff') format('woff'),
		url('fonts/roboto.ttf') format('truetype'),
		url('fonts/roboto.svg#Roboto') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Eurostile';
	font-style: normal;
	font-weight: normal;
	src: local('Eurostile'), url('fonts/eurostile.woff') format('woff');
}
@font-face {
	font-family: 'Pipeburn';
	src: local('Pipeburn'),
		url('fonts/pipeburn.woff2') format('woff2'),
		url('fonts/pipeburn.woff') format('woff'),
		url('fonts/pipeburn.svg#pipeburnregular') format('svg');
	font-weight: normal;
	font-style: normal;
}


* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #eee;
	color: #000;
	font-family: var(--fontmain);
	font-size: 16px;
}

img { width: 100%; }
a {
	color: var(--c);
	font-weight: normal;
	text-decoration: none;
}
	a:hover { color: var(--ch); }
	a:hover, a:active, a:focus { outline: none; }
	a.anchor {
		margin-top: -3.4em;
		display: block;
		position: absolute;
	}

h1,h2,h3,h4,h5,h6 {
	font-family: var(--fonthead);
	font-weight: normal;
}

.box {
	display: flex;
}
	.box.half div {
		width: 50%;
	}

section, header nav {
	max-width: var(--maxwidth);
	margin: 0 auto;
}

#logo { display: inline-block; }
#logo-mobile { display: none; }

header {
	background-color: rgba(245,245,245,0.9);
	border-bottom: 4px solid var(--c);
	font-family: var(--fonthead);
	text-transform: uppercase;
	top: 0; left:0; right:0;
	position: fixed;
	text-align: right;
}

	header nav a {
		color: var(--c);
		display: inline-block;
		font-size: 1.4em;
		font-weight: bold;
		line-height: 1.8em;
		margin-bottom: -1px;
		padding: 0.4em 0.8em;
	}
		header nav a#logo, header nav a#logo-mobile { float: left; }
		header nav a.highlight {
			background-color: var(--c);
			color: #fff;
		}
		header nav a.sel,
		header nav a:hover {
		}
		header nav a img {
			height: 1.8em;
			vertical-align: middle;
		}

section {
	font-size: 1.4em;
	padding: 0.8em 1em;
}
	section h2 {
		color: var(--c);
		font-size: 2em;
		font-variant: all-small-caps;
		text-align: center;
	}
	section p, section div.text {
		line-height: 1.6em;
		margin: 0.6em;
	}

section.top {
	background-image: url("img/top.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	padding: 2.7em 2em 0 2em;
}
	section.top h1 {
		background-color: rgba(255, 255, 255, 0.9);
		color: var(--c);
		font-size: 3em;
		font-variant: all-small-caps;
		padding: 0.4em 0;
		text-align: center;
	}
		section.top h1 img {
			display: block;
			margin: 0 auto;
			width: 75%;
		}

section.about {
	background-color: #B7C6D5;
}

section.ops {
	background-image: url("img/ops.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
}
	section.ops h2 {
		background-color: rgba(255, 255, 255, 0.7);
	}
	section.ops h3 {
		font-weight: bold;
		margin: 0.5em 0 -0.15em 0;
		text-align: center;
		text-decoration: underline;
	}
	section.ops div.box div {
		background-color: rgba(0,0,0,0.7);
		margin: 1em;
		flex-basis: 0;  flex: 1 1 0px;
	}

section.donate {
	background-color: #B7C6D5;
	text-align: center;
}
	section.donate h2 { color: #000; }
	section.donate .box > div:first-child {
		text-align: right;
		width: 66%;
	}

section.contact {
	text-align: center
}
	section.contact h3 {
		font-weight: bold;
		margin: 0.5em 0 -0.15em 0;
	}

footer {
	background-color: #100a00;
	border-top: 4px solid var(--c);
	color: #aaa;
	padding: 1em 1em 3em 1em;
	text-align: center;
}
	footer small {
		display: block;
		line-height: 1.6em;
	}
	
@media only screen and (max-width: 600px) {
	#logo { display: none; }
	#logo-mobile { display: inline-block; }
}
@media only screen and (max-width: 900px) {
	.box {
		display: block;
	}
		.box.half > div { width: 100%; }
		.box > div {
			width: 100%;
		}
	section.donate .box > div:first-child {
		text-align: center;
		width: 100%;
	}
}