* { 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 {
    background-color: #FFFFFF;
    color: #666666;
    font-family: Arial, Helvetica, sans-serif;
}

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

header {
    height: 175px;
    padding-top: 30px;
    padding-left: 3em;
    background-color: #00B386;
    color: #FFFFFF;
    margin-bottom: 0;
}

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

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

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

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

h2 {
    color: #00664D;
    text-shadow: 1px 1px #CCCCCC;
}

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

dt {
    color: #00664D;
}

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;
}

.barn {
    color: #70DBDB;
    font-weight: bold;
}

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

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

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

nav ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    font-size: 1.2em;
}

nav a:link {
    color: #00664D;
    text-decoration: none;
}

nav a:visited {
    color: #7A7A52;
}

nav a:hover {
    color: #FFFFFF;
}

@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; }
	#heroHome, #heroBoard, #heroTraining { margin-left: 0;
	height: 200px; }
	
	footer { margin-left: 0; }
	
} /* end of max-width: 64em */

@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; }
	
} /* End of max-width: 37.5em */