*{box-sizing: border-box;}

header, main, nav, footer, figure, figcaption, aside, section, article {display: block; }
#contact {font-size: 90%;}
#mobile { display: none;}
#desktop {display: inline;}

body {
	color: #666666;
	font-family: Arial, Helevetica, sans-serif; 
	background-color: #FFFFFF;
}
	
header { background-color: #00B386;
	color: #FFFFFF;
	text-align: center;
	height: 175px;
	padding-top: 30px;
	padding-left: 3em;
}

h1 {font-size: 36px;
	margin-top: 0;
	letter-spacing: 0.25em;
	font-size: 3em;
}

nav { font-weight: bold;
	padding: 1.5em;
	font-size: 120%;
	float: left;
	width: 160px;
}

nav a { text-decoration: none; }

nav a:link {color: #003300; }
nav a:visited { color: #7A7A52; }
nav a:hover { color: #FFFFFF; }
nav ul { list-style-type: none;
		margin: 0;
		padding-left: 0;
		font-size: 1.2em;
}

#wrapper {margin: auto;
		    width:80%;
			background-color: #0C5442;
			min-width: 900px;
			max-width: 2050px;
			box-shadow: 4px 4px 4px #133926;
			background-image: linear-gradient(to bottom, #FFFFFF, #0C5442);
			border: 1.5px solid #003300; }

main { background-color: #FFFFFF;
		padding: 1px 20px 20px 20px;
		margin-left: 190px;
display: block;}

h1, h2, h3 {
font-family: Georgia, "Times New Roman", serif;}

main ul { list-style-image: url(marker.gif);}

footer { font-size: 75%;
	   font-style: italic;
	   font-family: Georgia,
	   "Times New Roman", serif;
	   text-align: center;
	   padding: 15px;
	   margin-left: 190px;
	   background-color: #FFFFFF;
}


h2 {color: #00664D;
	text-shadow: 1px 1px #CCCCCC;}
dt {color: #00664D;}
#barn {color: #70DBDB;
font-weight: bold; }

#heroHome { background-image: url(sunsetHorse.png) ;
			height: 300px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-left: 190px;
}

#heroTraining { background-image: url(BayBella.png) ;
			height: 300px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-left: 190px;
}

#heroBoard { background-image: url(fenceline.png) ;
			height: 300px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-left: 190px;
}

@media only screen and (max-width: 64em) {
	
	body {margin: 0;
	background-color: #FFFFFF; }
	#wrapper { min-width: 0;
			 width: auto;
			 box-shadow: none;
	border: none;}
	header { padding-top: 0.5em;
			 padding-bottom: 0.5em;
			 padding-left: 0;
			 height: auto;}
	h1 { letter-spacing: 0.1em; }
	main { margin-left: 0; }
	nav { float: none;
		 width: auto;
		 text-align: center;
	padding: 0.5em; }
	nav li { display: inline;
	padding: 0.25em 0.75em; }
	#heroHome, #heroBoard, #heroTraining { margin-left: 0;
	height: 200px; }
	footer { margin-left: 0; }
	}
	
	@media only screen and (max-width: 37.5em) {
		
		main { padding: 0.1em 1em;
		font-size: 90%; }
		h1 { font-size: 2em; }
		nav { padding: 0; }
		nav li { display: block;
				 margin: 0;
		border: solid 2px #330000; }
		nav a { display: block; }
		#heroHome, #heroBoard, #heroTraining { background-image: none;
		height: 0; }
		#mobile { display: inline; }
		#desktop { display: none; }
	}