*{
	box-sizing: border-box;
}

	#gallery {position: center;}
	#gallery ul{width: 300px; list-style-type: none;}
	#gallery li{display: inline; float: left; padding: 0px;}
	#gallery a{text-decoration: none; color: #333; font-style: italic;}
	#gallery span{ display: none;}


body {
	background-color: #95978A;
	color:#666666;
	font-family: Arial, Helvetica, sans-serif;
	}

#contact {
	font-size: 90%;
	}

dt { color:#002171; }

footer {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 75%;
	font-style: italic;
	text-align: center;
	padding: 2em;
	background-color: #FFFFFF;
	}
	
header {
	background-color:#FFFFFF; 
	color:#FFFFFF; 
	text-align: center;
	font-family: Georgia, "Times New Roman", serif;
	height: 173px;
	
	}



h1 { 
	margin-bottom: 0; 
	margin-top: 0;
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 0.25em;
	padding-bottom: 0.5em;
	padding-top: 0.5em;
	}
	
h2 { 
	color:#4f4842; 
	font-family: Georgia, "Times New Roman", serif;
	text-shadow: 1px 1px 0 #CCCCCC;
	}
	
h3 { 
	color:#000033; 
	font-family: Georgia, "Times New Roman", serif;
	}

.header img{
	float: left;
	width: 150px;
	height: 150px;
	background: #FFFFFF;
}	

header a:link{text-decoration: none; color: #FFFFFF;}

header a:visited{color: #FFFFFF;}

header a:hover{color: #90C7E3;}

#homehero {
	align: center;
	width: auto;
	height: auto;
}

#homehero img{
	width: 100%;
	height: auto;
}

#gifhero {
	float:center;
	width:465px;
	height:auto;
}

#projectpic img{
	align: center;
	width: 100%;
	height: auto;
}

main {
	padding: 10px;
	display: block;
	background-color: #FFFFFF;
	overflow: auto;
}

form { display: flex; flex-flow: column nowrap;}
	
input, textarea { margin-bottom: .5em; }



@media (min-width: 1200px){
	#gifhero {
		float:right;
		width:2400px;
		height:628px;}
	
	#gallery {position: relative;}
	#gallery ul{width: 2000px; list-style-type: none;}
	#gallery li{display: inline; float: left; padding: 10px;}
	#gallery a{text-decoration: none; color: #333; font-style: italic;}
	#gallery span{ display: none;}
	#gallery a:hover span{ display: block; position: absolute; top: 10px; left: 950px; text-align:center;}
	
	.header img{ float: left; width: 150px;	height: 150px;	background: #FFFFFF;}	
	
	nav ul {padding-top: 108px; display: flex; flex-flow: row nowrap; justify-content: space-around; }
	
	nav ul li {border-bottom: none; }
	
	section {padding-left: 2em; padding-right: 2em; }
	

	
	.content main {display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
	
	h2			{ grid-row: 1 / 2;	grid-column: 1 / 5; }
	
	section		{ grid-row: 2 / 3;	grid-column: auto;	}
	
	#special	{ grid-row: auto;	grid-column: 1 / 5; }
	
	footer		{ grid-row: auto;	grid-column: 1 / 5; }
	
	@supports ( display: grid) {
		
	}
	
	form { display: grid;
		grid-template-rows: auto;
		grid-template-columns: 6em 1fr;
		grid-gap: 1em;
		width: 60%; }
	input[type="submit"] { grid-column: 2 / 3;
	width: 9em; margin-left: 0; }
	
	#projectpic img{
		padding-left: 10px;
		width: 30%;
		height: auto;
	}
}

@media (min-width: 600px){
	#gifhero {
	float:right;
	width:600px;
	height:304px;}
	
	#gallery {position: relative;}
	#gallery ul{width: 1000px; list-style-type: none;}
	#gallery li{display: inline; float: left; padding: 10px;}
	#gallery a{text-decoration: none; color: #333; font-style: italic;}
	#gallery span{ display: none;}
	
	.header img{ float: left; width: 150px;	height: 150px;	background: #FFFFFF;}	
	
	nav { 
		font-weight: bold;
		font-size: 125%;
		text-align: center;
		border-bottom: 3px solid #000033;
		}

	nav a {
		text-decoration: none;
		}

	nav li {
		margin-left: 10px;
		padding: auto;
		}
		
	nav ul{
		list-style-type: none;
		font-size: 1.2em;
		background-color: #FFFFFF;
	}
	
	section {padding-left: 2em; padding-right: 2em; }
	

	
	.content main {display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; }
	
	h2			{ grid-row: 1 / 2;	grid-column: 1 / 5; }
	
	section		{ grid-row: 2 / 3;	grid-column: auto;	}
	
	#special	{ grid-row: auto;	grid-column: 1 / 5; }
	
	footer		{ grid-row: auto;	grid-column: 1 / 5; }
	
	@supports ( display: grid) {
		
	}
	
	form { display: grid;
		grid-template-rows: auto;
		grid-template-columns: 6em 1fr;
		grid-gap: 1em;
		width: 60%; }
	input[type="submit"] { grid-column: 2 / 3;
	width: 9em; margin-left: 0; }
	
	#projectpic img{
		padding-left: 10px;
		width: 30%;
		height: auto;
	}
}



nav { 
	font-weight: bold;
	font-size: 125%;
	text-align: center;
	border-bottom: 3px solid #000033;
	}

nav a {
	text-decoration: none;
	}

nav li {
	margin-left: 10px;
	padding: auto;
	}
	
nav ul{
	list-style-type: none;
	font-size: 1.2em;
	background-color: #FFFFFF;
}

nav a:link{
	color: #5C7FA3;
	background-color: #FFFFFF;
}

nav a:visited{color: #344873;}

nav a:hover{color: #d5c7b9; transition: 2s linear;}

.mark { 
	color:#1976D2; 
	font-weight: bold;
	}
	
table {
	margin: auto; 
	border: 2px solid #3399CC; 
	border-collapse: collapse;
	}	
th{background-color: #F5FAFC;}
td, th {
	padding: 0.5em;
	border: 2px solid #3399CC;
	}

td {
	text-align: center;
	}
	
td.text {
	text-align: left;
	}
	
tr:nth-of-type(even) {background-color: #F5FAFC;} 

#trailhero {
	height: 300px;
	background-image: url(trail.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

video, embed { float:right; padding-left: 20px; }

#wrapper {
	background-color: #90C7E3;
}

#yurthero {
	height: 300px;
	background-image: url(yurt.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}