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

body {
	margin: 0;
	padding: 0;
	}
#site-container {
    width:100%;
	margin: 0;
	padding: 0;
    background-color: #faf9f6;
}
/* H TAGS -------------------------------------------------------- */
.FuturaPT-Book { 
	font-family: FuturaPT-Book;
	font-weight: normal;
	font-style: normal;
}
h1 { 
	font-family: FuturaPT-Book; 	font-weight: 400;
	font-style: normal;
	font-size: 175%;
	color: #bf6b3b;
	line-height: 165%;
	letter-spacing: 0.04em;
	text-align: center;
	padding: 3.7% 0 1.4%;
	margin: 0;
}
h2 { 
	font-family: FuturaPT-Book; 	font-weight: 400;
	font-weight: 400;
	font-style: normal;
	font-size: 167%;
	color: #bf6b3b;
	line-height: 157%;
	letter-spacing: 0.04em;
	text-align: center;
	padding: 3.5% 0 1.6%;
	margin: 0;
}
h3 { 
	font-family: FuturaPT-Book; 	font-weight: 400;
	font-weight: 400;
	font-style: normal;
	font-size: 135%;
	color: #bf6b3b;
	line-height: 135%;
	letter-spacing: 0.04em;
	text-align: left;
	padding: 2% 0 .8%;
	margin: 0;
}
strong {
    font-weight: 600; /* Crimson semi-bold  */
}
/* HEADER AND MAIN NAVIGATION FOR DESKTOP/LAPTOP -------------------- */
#header-wrap {
	width: 100%;
	height: auto;
	border-top: 5px solid #a4b7aa; 
	background-color: #ffffff;
	}
#header {
	margin: 0 auto;
	max-width: 1200px;
	height: auto;
	background-color: #ffffff;
	display: block;
		}
#logo { 
  display: block;
  width: 369px;
  height: 39px;
  margin: 3% auto 0;
  padding: 0 0 2.5%;
  background-image: url(../img/mf-logo.png);
  background-repeat: no-repeat;
}
/*
#logo { 
  display: block;
  width: 369px;
  height: 39px;
  margin: 3% auto 2.5%;
  background-image: url(../img/mf-logo.png);
  background-repeat: no-repeat;
}
-------*/

/* HERO IMAGE --------------------------- */
#hero-img { 
  display: block;
  width: 100%;
  height: auto;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../img/eaglegate-2835px.jpg);
  background-repeat: no-repeat;
}
#hero-img .inner {
  padding-bottom: 34.46208%; /* height(977px)/width(2835w) x 100 */ 
  display: block;
}

/* INTRO PARAGRAPHS ------------------------- */
#intro { 
  display: block;
  width: 100%;
  height: auto;
  background-image: url(../img/pattern-566px.jpg);
  background-repeat: repeat;
  padding-bottom: 5%;
}
#intro-inner {
  max-width: 1100px;
  background-color: #ffffff;
  margin: 0 auto;
  padding-bottom: 5%;
	}
p.intro {
  font-family: 'Crimson Text', serif;
  font-weight: normal;
  font-size: 128%;
  line-height: 138%;
  color: #4b4c36; /* MF branding olive */
  padding: 1% 9%;
	}
#page-body { 
  max-width: 1100px;
  background-color: #faf9f6;
  margin: 0 auto;
}
#page-body-inner {  padding: 1% 9% 3%; }
p {
  font-family: 'Crimson Text', serif;
  font-weight: normal;
  font-size: 114%;
  line-height: 146%;    
  padding: 1% 0;
  color: #4b4c36; /* MF branding olive */
	}
p.ul-intro {
  font-family: 'Crimson Text', serif;
  font-weight: normal;
  font-size: 114%;
  line-height: 146%;    
  padding: 1% 0 .6%;
  color: #4b4c36; /* MF branding olive */
	}
p a:link, p a:visited {
  color: #914a2c; /* MF branding tomato for text */
  text-decoration: none;
	}
p a:hover, p a:active {
  color: #4b4c36; /* MF branding olive */
	}
#page-body ul {
	margin:0; 
    padding: 0;
		}
#page-body ul li {
	list-style: disc outside none; /* type position image */
	font-family: 'Crimson Text', serif;
    font-weight: normal;
    font-size: 114%;
    line-height: 146%;    
    color: #4b4c36; /* MF branding olive */
	padding: .8% 0;
	margin-left: 1em;
	}
/* APPLICATION LINK SECTION ------------------------------------- */ 
#app-bar { 
  display: block;
  width: 100%;
  height: auto;
  background-image: url(../img/pattern-566px.jpg);
  background-repeat: repeat;
  padding: 7% 0;
}
#app-bar-inner {
	margin: 0 auto;
	text-align: center;
	max-width: 1200px;
}
.button-link {
	font-family: FuturaPT-Book; 	font-weight: 400;
	font-size: 105%;
	line-height: 105%;
	letter-spacing: .11em;
	padding: 20px 32px 17px;
	margin: 25px 0;
	background-color: #ffffff; 
	color: #bf6b3b; /* MF branding tomato */
	text-decoration: none;
	box-sizing: border-box;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.button-link:hover {
    text-decoration: none;
	color: #ffffff;
    background-color: #4b4c36; /* MF branding olive */
}
.button-link:active {
	background-color: #f6af5f; /* MF flower color gold */
	color: #ffffff;
	border: 3px solid #ffffff;
}
/* UP ARROW  -------------------------- */
.pagetop { 
	width: 40px;
	height: 40px;
	background-image: url(../img/mf-up-arrow.png);
	background-repeat: no-repeat;
	margin: 3% auto;
	}
.pagetop:hover {
    background-image: url(../img/mf-up-arrow-hover.png);
	background-repeat: no-repeat;
	-webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
	}
/* PAGE FOOTER ------------------------------------- */ 
#footer-container {
	max-width: 100%;
	height: 100%;
	background-color: #4b4c36; /* MF branding olive */
	position: relative;
}
#footer {
	max-width: 1200px;
	margin: 0 auto;
	clear: both;
}
#footerinner {
	width: 94%;
	padding: 3% 3% 0;
			}
p.footer-org-name {
	font-family: 'Lato', sans-serif;
	font-size: 100%;
    line-height: 145%;
	color: #ffffff; 
	padding: 0;
	padding-bottom: 8px;
	margin: 0;
		}
p.footer {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	letter-spacing: .05em;
	font-size: 85%;
    line-height: 170%;
	color: #ffffff; 
	padding: 0;
	margin: 0;
		}
p.footer a:link, p.footer a:visited { /* tel number link (seen in mobile) with no special styling */
	color: #ffffff; 
	text-decoration: none;
	font-weight: 400;
	}
p.footer a:hover, p.footer a:active{ 
	color: #f6af5f; /* MF flower color gold */
	text-decoration: none;
	}
#footerleft {
	width: 38%;
	float: left;
	padding-top: 5px;
}
#contact-menu { /* mid col and right col are in their own div for media query re-positioning  */
    float: right;
    width: 62%;
	}
#footermid { /* address semantic tag */
width: 60%; 
float: left;
font-style: normal; 
}
#footerright { 
width: 40%; 
float: left;	 
}
#bottombar-container { /* full width across bottom of site */
	width: 100%;
	height: auto;
	clear: both;
	padding: 1.7% 0 2%; 
	margin: 2% 0 0;
	background-color: #4b4c36; /* MF branding olive */
}
#bottombar { /* centered beneath footer columns*/
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
	}
#copyright { /* copyright and login */
	padding: 0 3%;
	font-family: 'Crimson Text', serif;
	font-size: 76%;
	letter-spacing: 0.03em;
	color: #ffffff; 
	float: left;
	width: 44%;
	height: auto;
}
#credit {
    padding: 0 3%;
	font-family: 'Crimson Text', serif;
	font-size: 76%;
	letter-spacing: 0.03em;
	color: #ffffff; 
	float: right;
	text-align: right;
	width: 44%
}
@media screen and (max-width:1280px),  screen and (max-width:1280px) and (-webkit-device-pixel-ratio: 2)
 { 
#intro-inner {
  max-width: 86%;
	}
 }
@media screen and (max-width:1024px),  screen and (max-width:1024px) and (-webkit-device-pixel-ratio: 2)
 { 
 h1 { 
	font-size: 160%;
	line-height: 150%;
	padding: 3.7% 0 1.4%;
	margin: 0;
}
h2 { 
	font-size: 152%;
	line-height: 142%;
	padding: 4% 0 1.8%;
	margin: 0;
}
h3 { 
	font-size: 120;
	line-height: 120%;
	padding: 2% 0 .8% 0;
	margin: 0;
}
#intro { padding-bottom: 6%; }
p.intro {
  font-size: 128%;
  line-height: 138%;
  padding: 1% 9%;
	} 
#page-body-inner {  padding: 1% 8% 3%; }

 /* HERO IMAGEE at 1024pxw and below ------ */
#hero-img { 
  background-image: url(../img/eaglegate-1024px.jpg);
}
#hero-img .inner {
  padding-bottom: 41.5039%; /* height(425px)/width(1024w) x 100 */ 
}
/* FOOTER at 1024pxw and below ------ */
#contact-menu { /* footer mid and right col   */
    width: 48%;
	margin: 0 auto; 
	padding: 0 0 .8% 4% ;
	float: right;
	}
#footerleft {
    width: 40%;
	margin: 0 auto; 
	float: left;
}
#footerleft img {
	display: block;
	margin: 0 auto;
	padding-left: 5%;
}
#footermid { /* address semantic tag */
width: 100%; 
float: left;
}
#footerright { 
width: 100%; 
float: left;	
padding-top: 15px; 
}
#bottombar-container { /* full width across bottom of site */
	margin-top: 20px;
}
#copyright { /* copyright and login */
	padding: 0 1% 0 0;
	float: left;
	width: 41%;
	text-align: right;
}
#credit {
	padding: 0 1% 0 0;
	float: right;
	text-align: left;
	width: 55%
}
}
@media screen and (max-width:900px), screen and (max-width:900px) and (-webkit-device-pixel-ratio: 2) 
{ 
#logo { 
  width: 329px;
  height: 35px;
  margin: 3.5% auto 0;
  padding: 0 0 4%;
  background-image: url(../img/mf-logo-mobile.png);
  background-color: #ffffff;
}


/* APPLICATION LINK SECTION ---------------------- */ 
.button-link {
	font-size: 97%;
	line-height: 97%;
	padding: 17px 29px 14px;
	margin: 25px 0;
}
.button-link:active {
	border: 2px solid #ffffff;
}
}
@media screen and (max-width:768px), screen and (max-width:768px) and (-webkit-device-pixel-ratio: 2) 
{
h1 { 
	font-size: 150%;
	line-height: 140%;
	padding: 4.5% 0 2%;
}
h2 { 
	font-size: 142%;
	line-height: 132%;
	padding: 5% 0 1%;
}
h3 { padding: 2% 0 .8%; }
#copyright { 
    padding: 0 3% 1%;
	float: none;
	width: 94%;
	text-align: center;
}
#credit {
	padding: 0 3% .7%;
	float: none;
	text-align: center;
	width: 94%
}

}
@media screen and (max-width:700px), screen and (max-width:700px) and (-webkit-device-pixel-ratio: 2) 
{ 
#intro { padding-bottom: 8%; }
#app-bar { padding: 9% 0; margin: 1% 0 4%}
.pagetop { margin: 1.5% auto 4.25%;}

#contact-menu { /* mid col and right col are in their own div for mobile re-positioning  */
    width: 100%;
	margin: 0 auto; 
	padding: 2% 0 5% 0 ;
	float: none;
	text-align: center;
	}
#footerleft {
    width: 100%;
	margin: 0 auto; 
	float: none;
	clear: both;
}
#footerleft img {
	display: block;
	margin: 0 auto;
	padding-left: 0;
}
#footermid { /* address semantic tag */
width: 100%; 
float: left;
font-style: normal; 
}
#footerright { 
width: 100%; 
float: left;	
padding-top: 15px; 
}
h1 {  padding: 7% 0 3%; }
h2 {  padding: 5% 0 2%; }
h3 { padding: 2% 0 .8%; }
p { padding: 1.75% 0; }
}
@media screen and (max-width:640px), screen and (max-width:640px) and (-webkit-device-pixel-ratio: 2) 
{ 
#logo { 
  width: 276px;
  height: 28px;
  margin: 4% auto 0;
  padding: 0 0 4%;
  background-image: url(../img/mf-logo-phone.png);
  background-color: #ffffff;
}
}
@media screen and (max-width:640px), screen and (max-width:640px) and (-webkit-device-pixel-ratio: 2) 
{ 
	#copyright { 
    padding: 0 3% 2.7%;
}
}
@media screen and (max-width:480px), screen and (max-width:480px) and (-webkit-device-pixel-ratio: 2) 
{ 
h1 {  padding: 7% 0 3%; }
h2 {  padding: 5% 0 2%; }
h3 { padding: 2% 0 .8%; }
#intro { padding-bottom: 9%; }
#intro-inner { max-width: 92%; }
p.intro { padding: 1% 7%; }
#page-body-inner {  padding: 1% 5% 3%; }

p { padding: 1.75% 0; }
#app-bar { 
  padding: 11% 0;
}

}