/*----------------------------------------------------------------------------------
	CSS Reset
----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: 300;
	vertical-align: baseline;
	font-family: 'Roboto', sans-serif;
  text-align: left;
  color: #fff;  
	}
	
a { text-decoration: none; }	


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
	}
	
img { width: 100%; float: left; }	
	
	
/*
Bacon Green #C0D730
*/
	


/* ==================================================================================================================== */
/* Type Scaling */
/* ==================================================================================================================== */

body { font-size: large; }
@media (max-width: 1200px) { body { font-size: medium; } }
@media (max-width: 500px) { body { font-size: small; } }



/*----------------------------------------------------------------------------------
	Site Construction
----------------------------------------------------------------------------------*/

body { 
	width: 100%;
	background: #4D4D4E;
	height: 100%;
}

.container {
	width: 90%;
	margin: 5% auto 0;
	max-width: 1300px;
	height: 100%;	
}

.header, .copy, .graphic {
	float: left;
	margin: 0 1% 0 1%;
	height: 100%;			
}

@media screen and (min-width: 1200px) { .header, .copy, .graphic {	min-height: 700px; } }

.header {
	width: 15%;
	margin-right: 0;
}

.copy {
	width: 51%;
	margin-top: -0.75%;
	border-left: solid 1px #C0D730;	
}

.graphic {
	width: 28%;	
	float: right;
	margin-top: -27.5%;
}

.logo {
	width: 70%;
	padding-bottom: 10%;
}

.clear { 
	float: left;
	clear: left;
	width: 100%;
	min-height: 1px;
}

.footer {
	float: left;
	clear: left;
	margin: -6.5% 1% 0 1%;
	width: 18%;
}

.footer img {
	width: 65%;
	margin-bottom: 3%;
}


/* Navigation */

#nav {
	clear: left;
	list-style-type: none;
}

#nav li {
	width: 80%;
	padding: 5% 0 5% 0;
	border-bottom: dotted 1px #A5A5A5;
}

.active { color: #C0D730; }

li a:hover { color: #C0D730; }



/*----------------------------------------------------------------------------------
	Typography
----------------------------------------------------------------------------------*/

#nav li a { font-size: 0.8em; }

.intro { 
	font-size: 1.5em;
	line-height: 1.5em;
	padding-bottom: 1.1em;
	color: #C0D730; 
}

.copy .desktop-tweak { width: 85%; }

p { 
	font-size: 1em; 
	line-height: 1.4em;
	padding-bottom: 0.75em;
}

p span, .subhead { font-weight: 500; }


.copy p, .copy ul {
	padding-left: 7.5%;
	width: 90%;
}

.copy p a:hover { color: #C0D730; }

.copy ul li {
	padding-bottom: 0.75em;
	line-height: 1.4em;
	margin-left: 4%;
}

.registered {
	color: #A6A6A6;
	font-size: 0.6em;
	line-height: 1.6em;
	padding-top: 1em;
}

.registered span { color: #A6A6A6; }

.first { padding-top: 2.5em; }


/* Footer */

.footer p {
	color: #A6A6A6;
	font-size: 0.6em;
	line-height: 1.4em;
	clear: left;
}

.footer p a { color: #A6A6A6; }
.footer p a:hover { color: #C0D730; }



@media screen and (max-width: 1200px) {
	
	.header { width: 18%; }
	.copy { width: 53%; }
	.graphic { width: 20%; margin-top: -20%; }

	.intro { font-size: 1.4em; }
	
	.copy .desktop-tweak { width: 90%; }

	.footer { margin-top: -7.5%; }
	.footer img { width: 70%; margin-bottom: 5%; }

}


@media screen and (min-width: 851px) { 	
	
	#menu { display: none; }
	
	.header, .copy, .graphic {	min-height: 550px; }
	
}
	

/*----------------------------------------------------------------------- */
/*----------------------------------------------------------------------- */
/*----------------------------------------------------------------------- */
/*---------------  Point where Navigation changes ----------------------- */
/*----------------------------------------------------------------------- */
/*----------------------------------------------------------------------- */
/*----------------------------------------------------------------------- */


@media screen and (max-width: 850px) { 

	#nav.js { display: none; }
	
	.header, .copy, .graphic, .footer { width: 98%; }
	
	.graphic { margin-top: 3%; }
	.graphic img { width: 90%; }
	
	.footer { margin-top: 2.5%; padding-top: 0; }
	
	.header { 
		border-right: none;
		border-bottom: dotted 1px #A5A5A5;
		padding-bottom: 3%;
		margin-top: 2%;
	}
	
	.logo { width: 22.5%; padding: 1% 0 0% 0; }
	
	.graphic {
		padding-top: 1%;	
		margin-top: 0; 	
	}
	
	.contact-graphic { margin-top: -15%; }
	
	.graphic img { width: 50%; float: right; }
	
	.copy { 
		padding-top: 3%;
		border-left: none; 
	}
	
	.copy p, .copy ul { 
		width: 80%; 
		padding-left: 0;
		line-height: 1.4em; 
		}
	
	.intro { padding-top: 5%; }
	
	.copy .ipad-tweak { width: 75%; }
	
	
		#menu {
			float: right;
			display: block;
			color: #fff;
			text-align: right;
			font-size: 1.8em;
			font-weight: 300;
			padding-top: 1%;					
		}
		
		#menu:hover { color: #C0D730; }	
		
		#nav li { 
			width: 100%;
			display: block;
			list-style: none;			
			float: left; clear: both;
			padding: 2.5% 0 2.5% 0;
		}
		
		#nav li:last-child { border-bottom: 0; padding-bottom: 0; }	
		
		.footer img { width: 25%; margin-bottom: 2%; }
		.footer p br { display: none; }
		
		.footer p { margin-bottom: 10%; clear: left; }	 

}

@media screen and (max-width: 675px) { 

	#menu { padding-top: 0; }
	
	.copy .ipad-tweak { width: 95%; }	

	.copy .intro {
		font-size: 1.4em;
		line-height: 1.4em;
		width: 85%;
	}
	
	#nav li a { font-size: 1em; }
	
	#nav li:first-child { padding-top: 10%; }
	
	.copy p, .copy ul, .copy .subhead {  
		width: 85%;
		font-size: 0.65em;
		line-height: 1.4em;
		}	
		
	.copy p { padding-bottom: 1.5em; }		
		
	.copy p span { font-size: 1em; }	
		
	.copy ul li {  width: 100%; }		
		
	.footer img { width: 40%; }
	
	.footer p { width: 70%; }	
	
	.graphic img { width: 50%; margin-top: 2%; }

}

@media screen and (max-width: 400px) { 

	.header { padding-bottom: 5%; }

	.logo { width: 33%; }
	
	#menu { margin-top: -2.5%; }
	
	#nav li {
		padding: 6% 0 6% 0;
	}	

	.copy p, .copy ul {
		width: 90%;
	}
	
	.copy p { line-height: 1.35em; }
	
	.copy ul li { padding-bottom: 1.1em; } 	
	
	.footer p { width: 95%; }
			
	.copy .ipad-tweak { width: 85%; }
	
	.copy .approach-tweak { width: 70%; }
	
	.registered {
		font-size: 0.45em;
		line-height: 1.35em;
	}	


}