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

body {
	margin: 0;
	padding: 0;
	}
#site-container {
    width:100%;
	margin: 0;
	padding: 0;
	background-color: #E4E8E0; /* CF light green */

}
/* H TAGS -------------------------------------------------------- */
.FuturaPT-Book { 
	font-family: FuturaPT-Book;
	font-weight: normal;
	font-style: normal;
}
h1 { 
    font-family: 'Cagliostro', sans-serif;
	font-style: normal;
	font-size: 160%;
	color: #ffffff;
	line-height: 165%;
	letter-spacing: 0.03em;
	text-align: center;
	padding: 1% 0;
	background-color: #2e526d;
	margin-bottom: .75%;
}
h2 { 
    font-family: 'Cagliostro', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 150%;
	color: #6a7f52; /* CF branding green */
	line-height: 125%;
	letter-spacing: 0.02em;
	text-align: center;
	padding: 1.4% 0;
	margin: 0;
}
h3 { 
    font-family: 'Cagliostro', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 125%;
	color: #2e526d; /* CF branding peacock */
	line-height: 125%;
	letter-spacing: 0.02em;
	text-align: left;
	padding: 2% 0 .8%;
	margin: 0;
}
strong {
    font-weight: 600; /* Crimson semi-bold  */
}

/* HERO IMAGE --------------------------- */
#hero-img { 
  display: block;
  max-width: 100%;
  height: auto;
  font-size: 0;
  line-height: 0;
  vertical-align: top;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url(../img/slc-main-1920px-top.jpg);
  background-repeat: no-repeat;
}
#hero-img .inner {
  padding-bottom: 33.54166%; /* height(644px)/width(1920w) x 100 */ 
  display: block;
  margin: 0;
}
#logo { 
  position: absolute; /* allows logo to float over the hero, parent div position must be set as relative */
  width: 100%;
  height: 100px;
	}
#logo .inner {
  position: relative;
  width: 440px;
  height: 70px;
  background-image: url(../img/cf-logo.png);
  background-repeat: no-repeat;
  margin: 4.5% auto 0;
  padding: 0;
	}
/* MAIN SECTIONS ------------------------- */

p.intro {
  font-family: 'Crimson Text', serif;
  font-weight: normal;
  font-size: 128%;
  line-height: 138%;
  color: #4b4c36; /* CF brown for text */
	}
#page-body {
	width: 100%;
    background-image: url(../img/slc-main-1920px-bottom.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding: 0;
 }
.panel {
  max-width: 1000px;
  background-color: #ffffff;
  margin: 0 auto 2%;
	}
.panel-inner { 
  margin: 0 auto 3%;
  padding: 2.5% 7% 4.5%;
	}
p {
  font-family: 'Crimson Text', serif;
  font-weight: normal;
  font-size: 114%;
  line-height: 146%;    
  padding: 1% 0;
  color: #4b4c36; /* CF brown for text */
	}
p a:link, p a:visited {
  color: #6a7f52; /* CF branding green */
  text-decoration: none;
	}
p a:hover, p a:active {
  color: #4b4c36; /* MF branding olive */
	}
/* APPLICATION LINK SECTION ------------------------------------- */ 
#app-bar { 
  display: block;
  width: 100%;
  height: auto;
  padding: 6% 0 1%;
}
#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: 18px 32px;
	margin: 25px 0;
	background-color: #6a7f52; /* MF branding green */
	color: #ffffff; 
	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: #23526d; /* CF branding peacock */
}
.button-link:active {
	background-color: #ffffff; 
	color: #23526d; /* MF branding peacock */
	border: 2px solid #23526d;
}
/* UP ARROW  -------------------------- */
.pagetop { 
	width: 40px;
	height: 40px;
	background-image: url(../img/cf-up-arrow.png);
	background-repeat: no-repeat;
	margin: 2.25% auto;
	}
.pagetop:hover {
    background-image: url(../img/cf-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: auto;
	background-color: #2e526d; /* CF branding peacock */
	position: relative;
	margin: 0;
	padding: 0;
}
#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: #2e526d; /* CF branding peacock */
}
#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:1024px),  screen and (max-width:1024px) and (-webkit-device-pixel-ratio: 2)
 { 
#logo .inner {
  width: 390px;
  height: 64px;
  background-image: url(../img/cf-logo-mobile.png);
  margin: 4% auto 0;
	}
.panel {
  max-width: 90%;
  margin: 0 auto 2%;
	}
.panel-inner { 
  margin: 0 auto 3%;
  padding: 3% 7% 6%;
	}
p.intro {
  font-size: 128%;
  line-height: 138%;
	} 
.pagetop { margin: 2.25% auto 3%;}
/* 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%
}
}

/* APPLICATION LINK SECTION ---------------------- */ 
.button-link {
	font-size: 94%;
	line-height: 94%;
	padding: 17px 31px;
	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) 
{
/* HERO IMAGE 768px--------------------------- */
#hero-img { 
  background-image: url(../img/slc-main-768px-top.jpg);
}
#hero-img .inner {
  padding-bottom: 33.46354%; /* height(257px)/width(768w) x 100 */ 
}
#page-body {
	width: 100%;
    background-image: url(../img/slc-main-768px-bottom.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding: 0;
 }
.panel { margin: 0 auto 4%; }
p { padding: 1.6% 0; }
#app-bar { padding: 7% 0 5%; }
.pagetop { margin: 1.5% auto 3.5%;}

#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) 
{ 
h1 {  padding: 1.5% 0; }
h2 {  padding: 5% 0 2%; }
h3 { padding: 2% 0 .8%; }
p { padding: 1.75% 0; }

#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; 
}

}
@media screen and (max-width:640px), screen and (max-width:640px) and (-webkit-device-pixel-ratio: 2) 
{ 
#logo .inner {
  width: 336px;
  height: 53px;
  background-image: url(../img/cf-logo-phone.png);
  margin: 5% auto 0;
	}
	#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: 1.5% 0; }
h2 {  padding: 5% 0 2%; }
h3 { padding: 2% 0 .8%; }

#page-body { padding: 1% 0 3%; }
p { padding: 1.75% 0; }
#app-bar { padding: 9% 0; }
}

@media screen and (max-width:320px), screen and (max-width:320px) and (-webkit-device-pixel-ratio: 2) 
{
#logo .inner {
  width: 292px;
  height: 53px;
  background-image: url(../img/cf-logo-phone320.png);
  margin: 5% auto 0;
	}
/* APPLICATION LINK SECTION ---------------------- */ 
.button-link {
	font-size: 94%;
	line-height: 94%;
	padding: 17px 10px;
	margin: 25px 0;
}

}