/*----------------------------------------------
	Reset default browser CSS.
	http://meyerweb.com/eric/tools/css/reset/
	v2.0 | 20110126
-----------------------------------------------*/
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-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

body 				{line-height: 1;}

ol, ul 				{list-style: none;}

blockquote, q 		{quotes: none;}

blockquote:before,
blockquote:after,
q:before, q:after 	{content: ''; content: none;}

table 				{border-collapse: collapse;	border-spacing: 0;}
/* END Reset */


/*----------------------------------------------
	General Layout & Structure + Header
-----------------------------------------------*/

body 			{font-size: 16px; font-size: 62.5%;
				font-family: Georgia, Times, "Times New Roman", serif;
				color: #3b3b3b;}

#header-wrap	{background-color: #80a336;
				height: 185px;
				border-bottom: 4px solid #FFFFFF;}

#header			{width: 980px;
				position: relative;
				margin: 0 auto;
				width: 95%;
				max-width: 1100px;
				height: 185px;
				z-index: 100;}
				
#logo			{height: 67px;
				width: 237px;
				position: absolute;
				top: 55px;
				left: 55px;}
				

#content-wrap	{padding: 30px;
				max-width: 960px;
				margin: 0 auto;}

#footer			{text-align: center;
				background-color: #80A336; 
				color: #DCEDBA; 
				padding: 25px 0;
				font-size: 9px;
				font-family: "trajan-pro-3";
				letter-spacing: 2px;
				text-transform: uppercase;
				line-height: 13px;
				font-weight: 600;}
#footer a		{color: #DCEDBA; text-decoration: none;}
#footer a:hover	{color: #FFFFFF;}

				
/*----------------------------------------------
	  Content Area + Typography
-----------------------------------------------*/
a				{color: #80A336;}

p				{font-size: 17px;
				line-height: 24px;
				margin: 15px 0;}

ol, ul		{font-size: 17px;
    		line-height: 24px;
    		margin: 15px 15px 15px 25px;}

ol			{list-style: decimal outside none;}

ul			{list-style: square outside none;}

li			{margin: 3px 0;}

h1, h2, h3	{font-family: "trajan-pro-3"; letter-spacing: 1px;}

h1			{font-size: 32px;
			line-height: 35px;
			font-weight: 600;
			letter-spacing: -1px;}

h2			{font-size: 22px;
			font-weight: 600;
			line-height: 24px;}

h3			{font-size: 18px;
    		font-weight: 600;
    		line-height: 22px;}

h3 span		{font-size: 0.8em;}


strong			{font-weight: 600;}

em				{font-style: italic;}

hr					{border:0; height:0; border-bottom:1px solid #E3E3E3; margin: 25px 0;}

img					{max-width: 100%;}

.clear				{clear: both;}


.contact			{position: absolute;
					top: 40px;
					right: 50px;
					color: #FFFFFF;
					font-size: 15px;
					line-height: 20px;
					font-family: "trajan-pro-3";}
					
.contact span		{display: block; font-size: 27px;
					line-height: 29px;
					margin-bottom: -2px;
					font-weight: 600;
    				letter-spacing: 2px;}

#header .contact span a	{color:#FFFFFF; text-decoration: none;}

.contact span a		{color:#3B3B3B; text-decoration: none;}
					
.contact a			{color: #DCEDBA;}

.contact b			{border: 2px solid;
				    display: inline-block;
				    font-family: arial;
				    font-size: 10px;
				    font-style: normal;
				    font-weight: bold;
				    letter-spacing: 2px;
				    margin-top: 10px;
				    padding: 2px 10px;
				    text-transform: uppercase;
				    color: #D1E2B2;}

.hero-banner		{width: 100%;
					position: relative; 
					overflow: hidden;}

.hero-title			{width: 100%; 
					position: absolute; 
					top: 0; 
					text-align: center; 
					background-color: #000000;
					background-color: rgba(0,0,0,0.7); 
					color: #FFFFFF;  
					padding: 25px 0 18px 0;
					font-size: 23px;
					font-family: "trajan-pro-3";
					font-weight: 400;
					line-height: 23px;}

.hero-title span	{font-size: 14px; 
					letter-spacing: 4px; 
					display: block;
					text-transform: uppercase;}
					
.hero-footer		{width: 100%; 
					position: absolute; 
					bottom: 0px; 
					text-align: center; 
					background-color: #000000; 
					color: #FFFFFF; 
					padding: 15px 0 15px 0;
					font-size: 14px;
					font-family: "trajan-pro-3";
					letter-spacing: 2px;
					text-transform: uppercase;
					line-height: 16px;}
					
.hero-banner img	{margin-top: -50px;}


.description		{width: 55%; 
					float: left;
					margin-bottom: 30px;}

.details			{width: 40%; float: right;}

.demographics,
.miles-to			{}

.map				{margin-top: 10px;
    				width: 63%; 
    				float: right;}



a.button			{display: inline-block; 
					padding: 14px 25px;
					font-size: 15px; 
					line-height: 14px;
					text-decoration: none;
					border-radius: 6px; 
					background: #80A336; 
					color: #FFFFFF;
					margin: 6px 10px 6px 0;}

a.button:hover		{background-color: #97C041;}


@media only screen and (min-width: 1201px) {

.hero-banner img	{margin-top: -120px;}

}


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

.hero-banner img	{margin-top: -70px;}

}


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

.hero-banner img	{margin-top: -50px;}

}


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

.hero-banner img	{margin-top: 0px;}

.hero-footer		{font-size: 12px;
					padding: 11px 0px;}
					
.map				{float: none;
					margin-left: 5%;
					width: 80%;
					margin-bottom: 20px;}

}



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

#content-wrap		{padding: 20px;}

#header-wrap,
#header		 		{height: 240px;}

#logo				{width: 180px;
					height: 51px;
					left: 63px;
					top: 25px;}

.hero-title 		{font-size: 16px; 
					line-height: 18px;
					padding: 13px 0 11px;
					background-color: #000000;}
					
.hero-title span	{font-size: 12px;
    				letter-spacing: 3px;}

.hero-footer		{font-size: 9px;
					letter-spacing: 1px;
					padding: 6px 0px;}
					
.hero-banner img 	{margin-bottom: 15px;
    				margin-top: 30px;}
    				
.description,
.details,
.map			{width: 100%; float: none;}

.map			{margin-left: 0; margin-top: 30px;}		

.details		{margin-top: 25px;}

h2				{font-size: 17px; 
				line-height: 19px;}
				
h3				{font-size: 14px; 
				line-height: 16px;}
				
p,
ol,
ul				{font-size: 15px;
    			line-height: 21px;}

.demographics ul,
.miles-to ul    {font-size: 14px;
    			line-height: 19px;}			
    			

.contact		{left: 0px;
				top: 93px;
				font-size: 16px;
				line-height: 20px;
				width: 310px;
				text-align: center;
				font-weight: 600;}
				
.contact span   {border: 2px solid;
			    border-radius: 7px;
			    display: inline-block;
			    font-size: 25px;
			    line-height: 27px;
			    margin: 5px 0;
			    padding: 7px 15px;}
			    
#header .contact span a	{font-size: 25px; color: #FFFFFF; text-decoration: none; letter-spacing: 2px;}

.contact span a	{font-size: 25px; color: #3B3B3B; text-decoration: none; letter-spacing: 2px;}

.contact b 		{font-size: 9px;}

.contact a		{font-size: 14px;
    			letter-spacing: 1px;}

a.button		{display: block; text-align: center;}

}