/* FONTS 
---------------------------------------------------------------------------*/

@font-face {
    font-family: 'marketing_scriptregular';
    src: url('fonts/marketing-script.regular-webfont.woff2') format('woff2'),
         url('fonts/marketing-script.regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}





/* TAG STYLES 
---------------------------------------------------------------------------*/

*	{ margin: 0; padding: 0; }

html	{ min-height: 100%; position: relative; height: 100%; background-color: #d1d3d4; }

body	{ position: relative; min-height: 100%; height:100%; font-size: 15px; color: #003310;  font-family: 'Montserrat', sans-serif; line-height: 150%; }

p { margin: 0 0 35px; padding: 0; }

a { color: #003310; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }



/* COMMON STYLES 
---------------------------------------------------------------------------*/

.clear	{ clear: both; }

.right	{ float: right; }
.left	{ float: left; }

.clear		{ clear: both; }
.clearRight	{ clear: right; }
.clearLeft	{ clear: left; }

.aligncenter{ 	display: block; margin-left: auto; margin-right: auto; }

img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }

img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }

.alignright { float: right; }

.alignleft { float: left; }

.textCenter { text-align: center; }
.textRight { text-align: right; }



/* HEADER STYLES 
---------------------------------------------------------------------------*/

#headerWrapper { background-color: #8bc53f; color: #003310; width: 100%;  }
#headerContent { margin: 0 auto; width: 98%; max-width: 980px; position: relative;}
#headerLeft { float: left; color: #cbe5a8; width: 410px; max-width: calc(48% - 40px); font-family: 'marketing_scriptregular'; font-size: 30px; line-height: 120%; padding-top: 90px; padding-left: 40px; }

#headerLeft p { margin-bottom: 0; }


#headerRight { float: right; max-width: 48%; }
#headerBottomContent { padding-bottom: 10px; position: absolute; bottom: 0; left: 0; width: 100%; }
#logo {}

#headerBottomContent ul { list-style: none; margin: 0; padding: 0; text-align: center; width: 100%; max-width: 850px; margin: 0 auto; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; }
#headerBottomContent li { display: inline-block;text-transform: uppercase; font-weight: bold; padding: 0 0px;}
#headerBottomContent li:last-child { border-right: none; }
#headerBottomContent a { color: #003310; text-decoration: none; }
#headerBottomContent a:hover { text-decoration: underline; }



/* CONTENT STYLES 
---------------------------------------------------------------------------*/

#contentWrapper { width: 100%; background-color: #231f20;  }
#content { color: #ffffff; font-family: 'marketing_scriptregular'; width: 98%; max-width: 980px; margin: 0 auto; background: transparent url('images/cottage.jpg') right 50% no-repeat; background-size: cover; }

.wrapper {  font-size: 25px; width: 280px; float: right;  line-height: 120%; padding: 60px 75px 0 0; text-align: right; }



/* FOOTER STYLES 
---------------------------------------------------------------------------*/

#footerWrapper { background-color: #d1d3d4; width: 100%; padding: 30px 0 40px; }
#footerContent { width: 98%; max-width: 980px; margin: 0 auto; text-align: right; }


#footerContent a { width: 98%; max-width: 980px; text-align: right; }

#footerContent p { margin-bottom: 10px; }


/* CLEAR STYLES 
---------------------------------------------------------------------------*/

.clearfix:after,
#headerWrapper:after,
#headerContent:after,
#headerLeft:after,
#headerRight:after,
#logo:after,
#headerBottomContent:after,
#contentWrapper:after,
#content:after,
#footerWrapper:after,
#footerContent:after { content: ""; display: table; clear: both; }







/* RESPONSIVE STYLES 
---------------------------------------------------------------------------*/

@media screen and (max-width: 755px) {
	#headerRight { float: none; width: 98%; max-width: 100%; padding: 0; margin: 0 auto; text-align: center;}
	#headerLeft { float: none; width: 98%; max-width: 100%; padding: 10px 0 0; margin: 0 auto; }

	#headerLeft p { text-align: center !important; }

	#headerBottomContent li { padding: 0 15px; }
	#headerBottomContent li.hide { display: none; }

	#headerBottomContent { position: relative; top: auto; left: auto;margin-top: 15px;  }
}