* { box-sizing: border-box; }
body { margin: 0;
	background-color: #FFFFFF;
	color: #003865;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	font-family: Tahoma, Arial, sanserif; }
.wrapper { background-color: #FFFFFF;
	padding: 0;
	display: grid;
	grid-template:
                "header header"
                "nav nav"
		"main main"
                "footer footer" / 200px 1fr; }
.onethird { float: left;
	width: 100%; }
header { padding-top: 5px;
	padding-bottom: 5px;
	background-image: url(photos/logos.jpeg);
	background-repeat: no-repeat;
	padding-left: 105px;
	text-align: center;
	height: 128px;
	background-color: #FFFFFF;
	color: #FFFFFF;
	grid-area: header; }
header a { text-decoration: none; } 
header a:link { color: #003865; }
header a:visited { color: #003865; }
header a:hover { color: #B5A642; }
h1 { font-size: 2em; }
h2 { color: #003865; }
h3, dt { color: #003865; }
h4 { clear: left;
	background-color: #C3B091;
	font-size: 1.2em;
	text-transform: uppercase;
	text-align: center;
	border-bottom: 2px solid #003865;
	padding-bottom: 0em; }
nav { text-align: center;
	font-size: 90%;
	background-color: #003865;
	grid-area: nav; }
nav a { text-decoration: none; }
nav a:link { color: #C3B091; }
nav a:visited { color: #C3B091; }
nav a:hover { color: #B5A642; }
nav ul { list-style-type: none;
	display: flex;
	flex-direction: column;
	margin: 0px;
	padding: 0px;
	font-size: 1.25em; }
nav li { padding-top: .5em;
	padding-bottom: .5em;
	padding-right: 1em;
	padding-left: 1em;
	width: 100%;
	border-bottom: 1px solid #C3B091; }
main { padding-left: 0em;
	padding-right: 0em;
	padding-bottom: 2em;
	padding-top: 0em;
	background-color: #FFFFFF;
	display: block;
	grid-area: main; }
h2, h3, h4, p, div, dl { padding-left: 1em;
	padding-right: 1em; }
ul { padding-left: 2em;
	padding-right: 2em; }
.details { padding-left: 5%;
	padding-right: 5%;
	overflow: auto; }
img { display: block;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px; }
#banner { height: 300px;
	background-image: url(photos/banner.jpeg);
	background-size: 100% 100%;
	background-repeat: no-repeat; }
#volunteer { height: 300px;
	background-image: url(photos/volun.jpeg);
	background-size: 100% 100%;
	background-repeat: no-repeat; }
#about { height: 300px;
	background-image: url(photos/foldedflag.jpeg);
	background-size: 100% 100%;
	background-repeat: no-repeat; }
#mobile { display: inline; }
#desktop { display: none; }
table { width: 90%;
	margin: auto;
	border-spacing: 0; }
td, th { padding: 10px; }
tr:nth-of-type(odd) { background-color: #D2B48E; }
#contact { height: 300px;
	background-image: url(photos/contact.jpeg);
	background-repeat: no-repeat;
	background-size: 100% 100%; }
form { display: flex;
        flex-direction: column;
        padding-left: 1em;
	width: 80%; }
input, textarea { margin-bottom: .5em; }
#mySubmit[type="submit"] { grid-column: 2;
	width: 9em; }
footer { background-color: #C3B091;
	font-size: .60em;
	padding: 1em;
	border-top: 2px solid #003865;
	font-style: italic;
	text-align: center;
	grid-area: footer; }
@media (min-width: 600px) {
	header {  grid-area: header;
		text-align: center;
		padding-left: 0; }
	h1 { font-size: 3em; }
	nav ul { display: flex;
		flex-direction: row;
		flex-wrap: nowrap; 
		justify-content: space-around; }
	nav li { border-bottom: none; }
	#banner { height: 500px;
		background-image: url(photos/lgbanner.jpeg); }
	#volunteer { background-image: url(photos/volunteer.jpeg); }
	#about { height: 400px;
		background-image: url(photos/largeflag.jpeg); }
	#flow { display: flex;
		flex-direction: row; }
	#mobile { display: none; }
	#desktop { display: inline; }
	#contact { height: 600px;
		background-image: url(photos/contact.jpeg); }
	.details { display: flex;
		flex-direction: row; }
	.onethird { float: left;
		width: 33%; }
	h4 { margin-left: 5%;
		margin-right: 5%; }
	form { width: 40%;
		display: grid;
		grid-gap: 1em;
		grid-template-columns: 6em 1fr; }
	nav { grid-area: nav; }
	main { grid-area: main; }
	footer { grid-area: footer; }
	.wrapper { display: grid;
		grid-template:
                "header header"
                "nav nav"
		"main main"
                "footer footer" / 200px 1fr; }
}
@media (min-width: 1024px) {
	header { grid-area: header;
		text-align: center;
		background-image: url(photos/logos.jpeg); }
	nav { grid-area: nav; }
	main { grid-area: main; }
	footer { grid-area: footer; }
	nav ul { flex-direction: column; }
	.onethird { float: left;
		width: 33%; }
	.wrapper { display: grid;
		grid-template:
                "header header"
                "nav main"
                "footer footer" / 200px 1fr; }
}