*, *:before, *:after { box-sizing: border-box }
html, body { height: 100%; min-height: 100% }
body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; margin: 0; color: #fff }

a { text-decoration: none; }
a:hover { text-decoration: underline }
header nav a { color: #333; display: inline-block; padding: 10px; transition: all 0.5s ease }
header nav a:hover { background-color: #333; color: #2b8bcb; text-decoration: none }
.light a { color: #005b99 }

h1, h2, h3, h4, nav { font-family: ostrich-sansblack; font-weight: normal }
h1 { margin: 0 }
p { font-weight: 300; line-height: 1.6 }
li h4 { margin: 16px 0 5px }

p { font-size: 1.5rem }
h4 { font-size: 1.75rem }
h3 { font-size: 2rem }
h2 { font-size: 3rem }
h1 { font-size: 3.5rem }
aside { font-size: 2.5rem }


ul { margin: 0; padding: 0; list-style: none }

.left { float: left }
.right { float: right }
.light { background-color: #2b8bcb }
.dark { background-color: #005b99 }
.txt-light { color: #2b8bcb }
.txt-dark-blue { color: #005b99 }
.txt-dark { color: #333 }

.group { content: ""; display: table; clear: both }
.clear { clear: both }

.gutter { max-width: 1600px; margin: auto; padding: 20px 30px }

/* Font Classes */
.ost-med { font-family:ostrich-sansmedium }
.ost-bold { font-family:ostrich-sansbold }
.ost-black { font-family:ostrich-sansblack }

.container { position: relative }
header { position: fixed; background-color: #fff; padding: 20px 0 0; top: 0; width: 100%; z-index: 1 }
header .gutter { overflow: hidden; padding: 0 30px 10px }
nav { color: #333; font-size: 32px }
	nav ul li { display: inline-block }

.hero { background: url(../imgs/hero-img.png) center no-repeat; height: 319px; position: relative }
	aside { background-color: rgba(255,255,255,.8); line-height: 1; padding: 20px; text-align: right; position: absolute; right: 0; bottom: 0; width: auto }

.group-runs h3 { margin: 0 }
.group-runs li { margin-bottom: 50px }

.responsive-hide { display: block; }
.responsive-show { display: none }


/* ==========================================================================
========= SMALL DEVICES ( SMART PHONES, SMALL TABLETS) -- RESPONSIVE STYLES
========================================================================== */
@media only screen and (min-width : 320px) and (max-width: 700px) {

	p { font-size: 100% }
	h4 { font-size: 125% }
	h3 { font-size: 125% }
	h2 { font-size: 150% }

	header .gutter { padding: 0 10px 10px }
		header nav a { padding: 5px }
		
	h1 { font-size: 150%; margin-left: 5px }
	aside { display: none }
	nav.right { float: left; font-size: 120% }
	.hero { height: 150px; background-size: cover }
	.gutter { padding: 15px }

	.responsive-show { display: block }
	.responsive-hide { display: none }

}