﻿body
{
	font-family: Open Sans;
	font-size: 100%;
	background-color: #E6EDD3;
}

h1
{
	font-size:3em;
	font-weight: bolder;	

}

h2
{
	line-height: 1.2em;
	font-size: 2em;
	
}

p
{
	font-size: 1em;
	line-height: 1.5em;
	
}

/* layout structure */

#top
{
	width:100%;
	height:5px;
	background:#A3A790;
}

.wrapper
{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2.5%;
	overflow:hidden;
}

header[role="banner"]
{
	max-width:1800px;
	margin:0 auto;
	padding: 0 0 20px 0;
	overflow: hidden;

}

/* logo */

#logo 
{
	float:left;
	width:13em;
	margin:0;
	overflow:auto;
}

#logo img
{
	width:100%;
}

/* navigation */

nav[role="navigation"]
{
	float: right;
	width: 60%;
}

nav[role="navigation"] ul li
{
	float: left;
	width: 25%;
	height: 40px;
	margin: 50px 0 0 0;
}

nav[role="navigation"] ul li a:link, nav[role="navigation"] ul li a:visited, nav[role="navigation"] ul li a:active
{
	float:left;
	width: 100%;
	color: #80913B;
	font-size:1em;
	font-weight: bold;
	transition: all 0.3s ease;
}

nav[role="navigation"] ul li a:hover
{
	float:left;
	width: 100%;
	color: #A3A790;
	font-size:1em;
	transform: translate(0px, -5px);
	-webkit-transform: translate(0px, -5px);
	-moz-transform: translate(0px, -5px);
	-o-transform: translate(0px, -5px);
	-ms-transform: translate(0px, -5px);
}

nav[role="navigation"] ul li a em
{
	font-size: .7em;
	color:#A3A790;
}

/* introduction */

#introduction
{
	max-width:1800px;
	margin:0 auto;
	overflow:hidden;
	background: #636D3C;
}

#introPic
{
	float:left;
	width:100%;
}

#introPic img
{
	width:100%;
}

#body
{
	width: 100%;
	margin: 0 0 30px 0;
	padding 0 50px 0 0;
}

/* slogan */

#slogan
{
	padding:35px 25px;
	text-align:center;
	border-bottom:1px #80913B solid;
}

#slogan h1
{
	color: #394028;
	font-weight:bold;
	font-style: italic;
	font-size:x-large;
}

/* main */

#main
{
	float:left;
	width: 57.5%;
	padding: 0 2.5% 0 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#main h1
{

	padding: 35px 0;
	color: #394028;
}

#main h2
{
	border-top:1px solid #80913B;
	padding-top:20px;
}

#main p
{
	
	padding:20px 0;
	color: #161F02;
}
#main figure img
{
	width:100%;
	padding: 20px 0;
}

.mf-logo {
	width:150px;
	margin-top:1em;
}

.mf-logo img {
	width:100%;
}


/* sidebar */

#sidebar[role="complementary"]
{	
	float:right;
	width:40%;
	color:#505E13;
}

.bodyNavLink
{
	padding:25px;
	clear:both;
	border-bottom:1px #80913B solid;
	overflow:auto;
}

.bodyNavLink img
{
	width: 35%;
	float: left;
	margin-right: 25px;
}

.bodyNavLink h1
{
	font-weight: normal;
	font-size:x-large;
	color: #394028;
}

.bodyNavLink p
{
	padding:20px 0;
	color: #161F02;
}

#sidebar figure img
{
	width:100%;
	padding: 20px 0;
}

/* footer */

footer[role="contentinfo"]
{
	clear: both;
	background: #23272A;
	overflow:auto;
	padding:50px 0;
}

.footerCon
{
	float:left;
	width:25%;
	min-width:170px;
	padding-bottom: 10px;
}

.footerCon h3
{
	color:#CFD5BD;
	font-size:x-large;
}

.footerCon p
{
	color:#A3A790;
	font-size:x-small;
}

/* email */

#email
{
	color:#80913B;
}

#email:hover
{
	color:#A3A790;
}

#footerEmail
{
	color:#80913B;
}

#footerEmail:hover
{
	color:#394028;
}


#links img
{
	width:150px;
}

#links a:link, #links a:visited, #links a:active
{
	color:#A3A790;
}

#links a:hover
{
	color:#394028;
}

#facebook img
{
	width: 40px;
}

.bx-wrapper {
	background:none;
	border:5px solid transparent;
	box-shadow:none;
}

.bx-wrapper img {
	margin:0 auto;
}

/* responsive */

@media screen and (max-width:900px)
{
	#logo
	{
		width:11em;
	}	
	nav[role="navigation"]
	{
		width:65%;
	}
	
	nav[role="navigation"] ul li
	{
		margin:40px 0 0 0;
	}
	
	nav[role="navigation"] ul li a:link
	{
		font-size: .9em;
	}
	
	nav[role="navigation"] ul li a em
	{
		display:none;
	}
	
	#main, #sidebar[role="complementary"]
	{
		float:none;
		width: auto;
		padding: 0;
		font-size: .9em;
		line-height: 1.5;
	}
}

@media screen and (max-width: 550px)
{
	#wrap
	{
		padding: 0 15px;
	}
	
	#logo
	{
		float:none;
		margin: 25px auto;
		width:15em;
	}
	
	nav[role="navigation"]
	{
		width:100%;
	}
	
	nav[role="navigation"] ul
	{
		text-align: center;
	}
	
	nav[role="navigation"] ul li
	{
		display:inline;
		width:23%;
		margin: 0 5%;
	}
	
	nav[role="navigation"] ul li a
	{
		float:none;
		display:inline;
		width:33%;
	}
	
	
}

