@charset "UTF-8";
/* CSS Document */

/*colors
blue: #127fba
dark blue: #3378af
green: #158f9a
brown:  #9e5624
putty: #CC9
light tan: #e8e8cc
*/


@font-face {
    font-family: 'League Gothic';
    src: url('../fonts/leaguegothic-regular-webfont.eot');
    src: url('../fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguegothic-regular-webfont.woff') format('woff'),
         url('../fonts/leaguegothic-regular-webfont.ttf') format('truetype'),
         url('../fonts/leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*@font-face {
    font-family: 'League Gothic';
    src: url('../fonts/leaguegothic-italic-webfont.eot');
    src: url('../fonts/leaguegothic-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguegothic-italic-webfont.woff') format('woff'),
         url('../fonts/leaguegothic-italic-webfont.ttf') format('truetype'),
         url('../fonts/leaguegothic-italic-webfont.svg#league_gothic_italicregular') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'League Gothic Condensed';
    src: url('../fonts/leaguegothic-condensed-regular-webfont.eot');
    src: url('../fonts/leaguegothic-condensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguegothic-condensed-regular-webfont.woff') format('woff'),
         url('../fonts/leaguegothic-condensed-regular-webfont.ttf') format('truetype'),
         url('../fonts/leaguegothic-condensed-regular-webfont.svg#league_gothic_condensed-Rg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'League Gothic Condensed';
    src: url('../fonts/leaguegothic-condensed-italic-webfont.eot');
    src: url('../fonts/leaguegothic-condensed-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguegothic-condensed-italic-webfont.woff') format('woff'),
         url('../fonts/leaguegothic-condensed-italic-webfont.ttf') format('truetype'),
         url('../fonts/leaguegothic-condensed-italic-webfont.svg#league_gothic_condensed_itaRg') format('svg');
    font-weight: normal;
    font-style: italic;
}
*/
/*Museo Sans regular*/
@font-face {
    font-family: 'MuseoSans500Regular';
    src: url('../fonts/MuseoSans_500-webfont.eot');
    src: url('../fonts/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MuseoSans_500-webfont.woff') format('woff'),
         url('../fonts/MuseoSans_500-webfont.ttf') format('truetype'),
         url('../fonts/MuseoSans_500-webfont.svg#MuseoSans500Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Museo Sans Italic*/
@font-face {
    font-family: 'MuseoSans500Italic';
    src: url('../fonts/MuseoSans_500_Italic-webfont.eot');
    src: url('../fonts/MuseoSans_500_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MuseoSans_500_Italic-webfont.woff') format('woff'),
         url('../fonts/MuseoSans_500_Italic-webfont.ttf') format('truetype'),
         url('../fonts/MuseoSans_500_Italic-webfont.svg#MuseoSans500Italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*My Underwood (typewriter)*/
@font-face {
    font-family: 'MyUnderwoodRegular';
    src: url('../fonts/MyUnderwood-webfont.eot');
    src: url('../fonts/MyUnderwood-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MyUnderwood-webfont.woff') format('woff'),
         url('../fonts/MyUnderwood-webfont.ttf') format('truetype'),
         url('../fonts/MyUnderwood-webfont.svg#MyUnderwoodRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
html{
	width: 100%;
	height: 100%;
}
body{
	width: 100%;
	height: 100%;
	background:#fff;
	font-family: 'MuseoSans500Regular', arial, helvetica, sans-serif;
	font-size: 1em;
	font-weight:normal;
	color:#666;
}
#top_bar{
	width:100%;
	height:40px;
	margin-bottom:10px;
	background:linear-gradient(#127fba, #158f9a);	
	box-shadow: 0 8px 6px -6px #333;
}

/*Toggle for the responsive menu*/
.toggle,
[id^=drop] {
	display: none;
}

/*Main menu*/
nav.main{
	height:40px;
	margin:0 auto;
}
nav.main ul{
	width:75%;
	margin:0 auto;
	text-align:center;
}
nav.main li{
	display:inline-block;
}
nav.main a{
	display:block;
	float:left;	
	height:24px;
	font-family: 'MuseoSans500Regular', arial, helvetica, sans-serif;
	font-size:1em;
	text-decoration:none;
	color:#fff;
	text-align:center;
	padding:1em 2em 0 2em;
}
nav.main a:hover{
	background: #3378af;
}
nav.main a:active{
	background: #37946a;
}

header{
	width: 100%;
	height:200px;
	margin:0 auto;
}
.headline{
	width: 65%;
	height: 200px;
	float:left;
	margin-left:3%;
	background:url(../images/Trout_stream800px.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
}

.logo{
	width:300px;
	height:auto;
	float:left;
	margin-left:2%;
}

#banner, 
#banner.about, 
#banner.about-mobile{
	width: 100%;
	float: left;
	object-fit: contain;
	box-shadow: 0 8px 6px -6px #666;
}

/*alternate div with banner image for mobile, hidden at greater than 589px*/
#banner img, 
#banner.about img, 
#banner.about-mobile img{
	width: 100%;
	object-fit: contain;
	vertical-align:top;
}
#banner.about-mobile{
	display:none;
}

section.content{
	max-width:1200px;
	width: 95%;
	height:auto;
	clear:both;
	margin:0 auto;
	overflow: auto;
}
	
aside.home_sidebar, 
aside.sidebar,
aside.sidebar_about,
aside.sidebar_contact{
	width:30%;
	height:auto;
	float:left;
	margin-left: 5%;
	margin-right:2%;
	padding-bottom: 1em;
}

article, 
article.home_content,
article.contact{
	width:60%;
	height:auto;
	float:left;
}

.headline h1{
	display:block;
	width:100%;
	font-family:'League Gothic';
	font-size: 3.5em;
	color:#86A749;
	float:left;
	margin: 1em 0 .5em 0;
}
.headline h2{
	display:block;
	width:100%;
	font-family:'MuseoSans500Italic', arial, helvetica, sans-serif;
	font-size: 1.25em;
	line-height: 1.625;
	color:#666;
	clear:both;
	float:left;
	margin-bottom: .5em;
}
h3{
	display:block;
	float:left;
	width:80%;
	font-family:'MuseoSans500Regular', arial, helvetica, sans-serif;
	font-size: 1.25em;
	font-weight:bold;
	line-height:1.25em;
	color:#9e5624;
	margin-top:1em;
	padding:0 0 .5em 1.5em;
}
aside.sidebar h3,
aside.sidebar_about h3,
aside.sidebar_contact h3{
	padding:.5em;
}

ul.rates{
	margin-left: 1.5em;
}

li.services, li.rates{
	display:block;
	float:left;
	width:80%;
	font-family:'MuseoSans500Regular', arial, helvetica, sans-serif;
	font-size:1.125em;
	line-height:1.5em;
	color:#666;
	padding:.5em;
	border-top:solid 1px #993;
}
li.services_last, li.rates_last{
	display:block;
	float:left;
	width:80%;
	font-family:'MuseoSans500Regular', arial, helvetica, sans-serif;
	font-size:1.125em;
	line-height:1.5em;
	color:#666;
	padding:.5em;
	border-top:solid 1px #993;
	border-bottom:solid 1px #993;
	margin-bottom: 1em;
}
.services a{
	color: #127fba;
	text-decoration: underline;
}
.services a:hover{
	color: #158f9a;
	font-weight: bold;
}

aside.home_sidebar blockquote{
	display:block;
	float: left;
	width:90%;
	margin: 10px 0 0 2%;
	background:#e8e8cc;
	border-radius:.125em;
	box-shadow:1px 1px 55px 12px #baba88 inset;
	font-family: 'MyUnderwoodRegular', Georgia;
	font-size:1.25em;
	color:#888;
	line-height: 1.5em;
	padding: 1em;
	-webkit-transform:rotate(-2deg);
	-moz-transform:rotate(-2deg);
	-o-transform:rotate(-2deg);
	-ms-transform:rotate(-2deg);
	transform: rotate (-2deg);
}

p{
	display:block;
	width: 100%;
	clear:both;
	float:left;
	font-family: 'MuseoSans500Regular', Georgia;
	font-size:1em;
	color:#666;
	line-height: 1.75em;
	padding: 1.5em .5em .5em 1.5em;
}
.ital{
	font-style:italic;
}

article a{
	color:#666;
}
article a:hover{
	color:#9e5624;
}
article a:active{
	color:#000;
}

/*Contact form*/

form{
	width:90%;
	margin-left:25px;
	border-top:solid 1px #ccc;
}

form div{
	width:400px;
	margin:1em 0 2em 0;
}

label{
	display:inline-block;
	width:90px;
	text-align:right;
}
input, textarea {
    /* To make sure that all text fields have the same font settings
       By default, textareas have a monospace font */
    font: 1em sans-serif;

    /* To give the same size to all text field */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* To harmonize the look & feel of text field border */
    border: 1px solid #CC9;
	border-radius:5px;
}
input:hover, textarea:hover{
	border:solid 1px #158f9a;
}
input:focus, textarea:focus {
    /* To give a little highlight on active elements */
    border-color:#9e5624;
}
textarea{
	vertical-align:top;
	height:5em;
	resize:vertical;
}
.button{
	margin-left:90px;
}
button{
	margin-left:.5em;
	background: #CC9;
}
footer{
	width: 90%;	
	height:auto;
	clear:both;
	margin:0 auto;
	border-top:solid 1px #996;
}

footer p{
	width:100%;
	text-align:center;
	margin:0 auto;
}
footer p a{
	text-decoration: underline;
	color:#666;
}
footer p a:hover{
	color: #9e5624
}
footer p a:active{
	#000;
}

	
@media only screen and (max-width: 1068px){
/*900px to 1068px
- headline width and font size decreases slightly
- smaller text on home page blockquote*/

nav.main ul{
	width:90%;
	margin:0 auto;
	text-align:center;
}
.headline {
	width: 60%;
}

.headline h1{
	display:block;
	width:100%;
	font-family:'League Gothic';
	font-size: 3em;
	color:#86A749;
	float:left;
	margin: .5em 0 .25em 0;
}
aside.home_sidebar blockquote{
	font-size: 1em;
}
}

@media only screen and (max-width: 899px){
/*700px to 899px
- header logo and headline smaller, header height changes
- blockquote text smaller
- less left margin*/

nav.main ul{
	width: 100%;
	height: 40px;
	margin: 0 auto;
	text-align: center;
}
nav.main a{
	padding:1em .875em 0 .875em;
}
header{
	width: 100%;
	height: 170px;
}
.headline{
	width: 50%;
	height: 170px;
}
.logo img{
	display: block;
	width: 250px;
	object-fit: contain;
	margin: 0 auto;
}
.headline h1{
	font-size: 2.5em;
	margin: .5em 0 .25em 0;
}
.headline h2{
		font-size: 1em;
		line-height: 1.375em;
}
article, 
article.home_content
article.contact{
	width:65%;
}
aside.home_sidebar, 
aside.sidebar,
aside.sidebar_about,
aside.sidebar_contact{
	margin-left: 0;
}
aside.home_sidebar blockquote{
	font-size: .875em;
}
li.services, 
li.rates,
li.services_last, 
li.rates_last{
	font-size: 1em;
}
}

@media only screen and (max-width: 699px){
/*590px to 699px
- logo and headline smaller, centered and stacked
- adjustments to contact form*/

nav.main a{
	padding:1em 1em 0 1em;
}

.headline{
	width: 95%;
	height: 125px;
	text-align: center;
	margin: 0 auto;
}
.headline h1{
	font-size: 2.5em;
	margin: .375em 0 .25em 0;
}
.headline h2{
	font-size: .875em;
}
h3{
	font-size: 1em;
}
.logo{
	width:100%;
	height:130px;
	text-align: center;
}
.logo img{
	display: block;
	width: 200px;
	object-fit: contain;
	margin: 0 auto;
}
li.services, 
li.services_last{ 
	font-size: .875em;
}
form{
	width:100%;
	margin-left:none;
}

form div{
	width:350px;
}

input, textarea {
	min-height: 30px;
    width: 350px;
}
.button{
	margin-left:20px;
}
button{
	height: 50px;
	margin-left:.5em;
	background: #CC9;
}
footer p{
	font-size: .875em;
}

}
@media only screen and (max-width: 589px){
/*- Goes to hamburger menu icon
- About page banner image changes
- Lose services sidebar on Contact page
- text and form go to 100% width on Contact page
*/

.headline{
	width: 100%;
	height: 110px;
	text-align: center;
	margin: 0 auto;
}
.headline h1{
	font-size: 2em;
	margin: .25em 0 .25em 0;
}
.headline h2{
	width: 100%;
	font-size: .875em;
	padding-left: 15px;
	padding-right: 15px;
}	


.logo{
	width:100%;
	height:130px;
}
.logo img{
	display: block;
	width: 200px;
	object-fit: contain;
	margin: 0 auto;
}

nav.main ul,
nav.main ul li{
	width: 100%;
	}

.toggle + a, .menu{
	display: none;
}
.toggle{
	display: block;
	width: 100%;
	color: #fff;
	text-align: center;
	padding: 10px;
	cursor: pointer;
}
.toggle:hover{
	background-color: #158f9a;
}
[id^=drop]:checked + ul{
	display: block;
}
nav.main ul li{
	display: block;
	width: 100%;
	background-color: #127fba;
	float: none; 
}
nav.main a{
	display: block;
	width: 100%;
	background-color: #127fba;
	border-bottom: solid 1px #9C9;
	padding: 10px 0 5px 0;
}

nav a:hover{
		background-color: #3378af;
}

#banner.about{
	display: none;
}
#banner.about-mobile{
	display: block;
}
aside.sidebar_contact{
	display: none;
}
article.contact{
	width: 90%;
}
.rates,
.rates_last{
	font-size: .875em;
}

footer p{
	font-size: .875em;
}
}
@media only screen and (max-width: 550px){
/*550px to 589px
- blockquote sidebar changes to 100%, lose background
- Contact form gets smaller
*/

.headline h2{
	width: 100%;
	padding: 0 10px;
	text-align: center;
}
aside.home_sidebar{
	width: 90%;
}
	
aside.home_sidebar blockquote{
	display:block;
	float: left;
	width:100%;
	margin-top: 10px;
	font-family: 'MyUnderwoodRegular', Georgia;
	font-size: 1em;
	color:#888;
	line-height: 1.5em;
	background: none;
	box-shadow: none;
	transform: none;
	border-bottom: solid 2px #CC9;
}
article.home_content{
	width: 90%;
	float: left;
}
form{
	margin-left: 0;
}
form div{
	width:300px;
}

input, textarea {
	min-height: 30px;
    font: 1em sans-serif;
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #CC9;
	border-radius:5px;
}
.button{
	margin-left:20px;
}
button{
	height: 50px;
	margin-left:.5em;
	background: #CC9;
}
}

@media only screen and (max-width: 475px){
/*- services sidebar goes to 100% width
- lose services sidebar on About and Contact pages
*/
.headline h2{
	width: 100%;
	padding: 0 10px;
	text-align: center;
}
aside.sidebar,
article{
	width: 90%;
	padding: 10px;
	margin: 0;
}
aside.sidebar_about{
	display: none;
}

p{
	padding: .5em 0 .5em 0em;
}

li.rates_last{
	margin-bottom: 1.5em;
}
footer p{
	padding: .5em 0;
}
}

@media only screen and (max-width: 350px){
	
.headline h1{
	font-size: 1.5em;
	letter-spacing: .025em;	
}
}