body {
	font-family: 'Nunito Sans', sans-serif;
	margin: 0;
	padding: 0;
	background: #fff;
}

h1, h2, h3 {
	font-family: 'Merriweather', serif;
}

a, a:hover, a:visited {
	color: #5e9262;
}

form * {
	font-size: .9em;
}

quote {
	font-style: italic;
	font-family: serif;
	font-size: 1.2em;
}

.quoteblock {
	color: #999;
	padding: 1em;

}
#main {
	position: relative;
	width: 80%;
	max-width: 850px;
	margin: 50px auto;
	background: #fff;
}
#header {
	text-align: center;
	background: url('/images/foundoutdoors-hollow.jpg') #f2fff3 center center no-repeat;
	background-size: cover;
	padding: 150px 0;
	color: #fff;
}
#footer {
	clear: both;
	text-align: center;
	margin: 100px;
	padding-top: 100px;
	color: #88b18a;
}
#logo {
	max-width: 250px;
}
.socials {
	max-width: 50px;
}
.leadpara {
	font-size: 1.1em;
}
#columnOne {
	float: left;
	max-width: 65%;
}
#columnTwo {
	max-width: 25%;
	float: right;
	background: #f2fff3;
	color: #444;
	padding: 1em;
	border: 1px solid #e1f3e2;
}
#columnTwo p {
	font-size: .9em;
}
#columnTwo ul {
	font-size: .9em;
	margin: 0;
	padding: 0;
}
#columnTwo li {
	padding-left: 0;
	margin-left: 1em;
}

input, textarea, select {
	margin: .5em 0;
	padding: .5em;
	border-radius: 3px;
	border: 1px #999 solid;
}

select {
	color: #444;
}
#contact input, #contact textarea {
	width: 90%;
}

#submit {
	background: #5e9262;
	color: white;
	text-transform: uppercase;
	font-size: .8em;
	margin: 0;
	padding: 5px;
	width: 100%;
}

.contact_success {
	color: #5e9262;
}
.contact_fail {
	color: #bd1616;
	font-size: .8em;
	text-transform: uppercase;
}



/* media scaling responsive stuff */

@viewport {
	zoom: 1.0;
	width: extend-to-zoom;
}

/* @media all and (orientation: portrait) { */

/* https://stackoverflow.com/questions/42025632/how-to-detect-only-with-css-mobile-screens */
@media only screen and (hover: none) and (pointer: coarse) {
	h1, h2, h3, h4 {
	font-size: 150%;
	}
	#columnOne {
		float: none;
		max-width: 85%;
		margin: 0 auto;
	}
	#columnTwo {
		float: none;
		max-width: 85%;
		margin: 0 auto;
	}
	form * {
		font-size: .7em;
	}
}

@media all and (max-width: 600px) {	
	#columnOne {
		float: none;
		max-width: 85%;
		margin: 0 auto;
	}
	#columnTwo {
		float: none;
		max-width: 85%;
		margin: 0 auto;
	}

}