@charset "UTF-8";
/* CSS Document */
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {
	margin: 0;
	padding: 0;
	background-color: #eae0d3;
	}
#site-container {
    width:100%;
    background-color: #f0ede3;
    background-image: url(../../img/gf/paper-tile.jpg);
	background-repeat: repeat;
}
h1 {
	font-family: 'Crimson Text', serif;
	font-size: 166%;
	line-height: 156%;
	color: #10587B; /* GF branding blue */
	font-weight: normal;
}
h1.headline {
	font-family: FilmotypeLucky;
	font-weight: normal;
	font-style: normal;
	padding: 31px 0 18px;
	color: #10587B;
	font-size: 240%;
	line-height: 107%;
	text-align: center;
}
h2 {
	font-family: FilmotypeLucky, serif;
	font-weight: normal;
	font-style: normal;
	font-size: 220%;
	margin-top: -15px;
	padding: 0;
	line-height: 175%;
	color: #10587B; /* GF branding blue */
	text-align: center;
}
h3.homepage { /*sidebar main title */
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 135%;
	color: #194f6a;
	line-height: 150%;
	letter-spacing: 0.02em;
	text-align: left;
	padding: 0;
	margin: 0;
}
h3.formtitles { /*sidebar main title */
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-style: normal;
	font-size: 128%;
	color: #b6391e; /* DK darker orange for text */
	line-height: 142%;
	padding: 10px 0 5px; /* top, right/left, bottom */
}
h3 { 
	font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 120%;
    line-height: 175%;
	color: #10587B; /* GF branding blue for text */
	text-align: left;
	padding-top: 20px;
	}
h4 { /* faq page questions, sub-headers */
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 113%;
	text-align: left;
	font-weight: normal;
	line-height: 137%;
	padding: 10px 0 5px 0;
	margin: 0;
	color: #b6391e; /* DK darker orange for text */
	clear: both;
}
h4.faq-list { /* faq page questions top section */
	font-family: 'Lato', sans-serif;
	font-size: 100%;
	text-align: left;
	line-height: 130%;
	font-weight: 400;
	padding: 8px 0 8px;
	margin: 0;
	color: #512714; /* DK branding brown */
	border-bottom: 1px solid #DFD5CA;
}
h4.faq-list-last { /* faq page questions top section, last question not underlined */
	font-family: 'Lato', sans-serif;
	font-size: 100%;
	text-align: left;
	line-height: 130%;
	font-weight: 400;
	padding: 8px 0 8px;
	margin: 0;
	color: #512714; /* DK branding brown */
}
h4 a:link, h4 a:visited {
	color: #512714; /* DK branding brown */
	text-decoration: none;
	}
h4 a:hover, h4 a:active {
	color: #4D6977; /* DK branding teal */
    text-decoration: underline;
	}
h5 { /*side bar sub-sub header*/
	font-family: 'Lato', sans-serif;
	font-size: 106%;
	text-align: left;
	line-height: 110%;
	font-weight: 700;
	padding: 12px 0 0;
	margin: 0;
	color: #512714; /* DK branding brown */
}
h6 { /* tel/email main */
    font-family: 'Lato', sans-serif;
	font-weight:600;
	font-size: 100%;
	line-height: 120%;
	padding-top: 10px;
	letter-spacing: 0.2em;
	color: #507d93;
	}
h6.small { /* tel/email for individual contact persons */
    font-family: 'Lato', sans-serif;
	font-weight:600;
	font-size: 90%;
	line-height: 90%;
	padding: 10px 0 0;
	letter-spacing: 0.2em;
	color: #063f46; /* DK branding dark teal*/
	}
em { 
    font-style: italic;
}
p {
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 103%;
	line-height: 155%;
	padding: 8px 0 8px; /* top, right/left, bottom */
	color: #10587B; /* GF branding blue for text */
	}
p.covid-notice {
	font-family: 'Lato', sans-serif;
	font-size: 108%;
	line-height: 165%;
	padding: 8px 0 4px; /* top, right/left, bottom */
    font-weight: bold;
    color: #ec1c24;	
	}
p a:link, p a:visited {
	color: #10587B; /* GF branding blue for text */
	}
p a:hover, p a:active {
	color: #507d93; /* GF branding blue lighter*/
	text-decoration: none;
	}
p.app-pg {
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 103%;
	line-height: 150%;
	padding: 6px 0 ; 
	color: #10587B; /* GF branding blue for text */
	}
a.phone:link, a.phone:visited {	color: #10587B; /* GF branding blue for text */	text-decoration: none;}
a.phone:hover, a.phone:active { color: #507d93; /* GF branding blue lighter*/ text-decoration: underline; }
	
#page ul {
	margin:0; 
	padding: 3px 0 5px 17px;
		}
#page ul li {
    list-style: disc outside none; /* type position image */
	font-family: 'Lato', sans-serif;
    font-weight: normal;
	font-size: 103%;
    line-height: 150%;
	color: #10587B; /* GF branding blue for text */
	padding: 4px 6px;
	}
#page ul ul li {
	font-size: 97%;
	color: #10587B; /* GF branding blue for text */
    list-style: circle outside none; /* type position image */
		}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #DFD5CA; margin: 1em 0; padding: 0;}

/* HEADER AND MAIN NAVIGATION FOR DESKTOP/LAPTOP -------------------------- */
#header-wrap {
	background-color: #ffd36e; /* GF branding yellow */
	}
#header {
	max-width: 1200px;
	margin: 0 auto;
		}
#logo {
	float: left;
	width: 40%;
	padding: 12px 0 0 1.5%;
		}
#nav-container {
	width: 425px; /*wide enough for 4 menu items, fits IE also--*/
	float: right;
		}
nav {
	width: 100%;
	font-family: 'Lato', sans-serif;
	font-style: normal;
	font-size: 95%;
	text-align: left;
	margin: 0;
	height: 62px;
	line-height: 62px;
	margin-left: 15px; /* comepensates for the increase from 410px to 420px wide to allow for IE--*/
}
#nav span {font-weight: 700;} /* keeps the li with the <span> for dropdown arrow at 700 font weight */
#nav > a {
	display: none; /* hidden for desktop, this is for the mobile nav, for link directly (ie. >) inside #nav (Menu and Hide Menu) */
}
nav > ul {
	height: 43px;
	padding: 0;
	margin: 0 auto;
}
nav > ul > li {
	display: inline;
	list-style-type: none;
	padding: 0 6% 0 0; 
	font-weight: 700;
	margin: 0;
	letter-spacing: .07em;
	position: relative;
	text-align: left; 
	}
nav a:link, nav a:visited {
	color: #194f6a;
	display: inline-block;
	text-decoration: none;
}
nav ul li:hover > a {
	color: #507d93;  /* GF Branding blue lighter --*/
}
nav a:active, nav a#current {
	color: #507d93;
	font-style: normal;
}
nav a#pull {
    display: none;
} 
.clearfix:before,
.clearfix:after { /* http://www.hongkiat.com/blog/responsive-web-nav/ ---- */
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {  /* this is for nave but it doubles to clear things in the rest of the site also ---*/
    *zoom: 1;
}
/* MAIN NAVIGATION FOR DESKTOP/LAPTOP second level -------------------------- */
#nav li ul {
    font-family: 'Lato', sans-serif;
	display: none; /* keeps the sub-nav hidden until rollover */
	line-height: 40px;
	position: absolute;
	top: 100%;
	width: 265px;
	text-align: left;
	list-style-type: none;
}
#nav li:hover ul {
	display: block;
	z-index: 40;
	margin-top: 21px; /* keeps the dropdown right at the bottom of the yellow header bar ------*/
}
#nav li:not( :first-child ):hover ul {
	left: 0;
}
#nav li ul a {
	font-size: 100%;
	font-weight: 400;
	letter-spacing: 0.03em;
	width: 150px;
	background-color: #ffffff; 
	color: #194F6A; /* GF branding blue */
	border-bottom: thin solid #ffd36e; /* GF branding yellow */
	padding: 0 8%; /* adds padding to left of text, pushes text to right */
	margin-left: -8%; /* brings sub nav text back left-aligned with the left-aligned parent item.--- */
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
	background-color: #F2FBFB; /* GF light warm sky blue */
	color: #194F6A; /* GF branding blue */
}
#nav li ul a#subcurrent {
	background-color: #ffffff;
	color: #194F6A; /* GF branding blue */
	}
	
/* HERO IMAGE HOME FOR DESKTOP/LAPTOP (https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/) --- */
#hero-img { 
  display: inline-block;
  position: relative;
  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/gf/glaser-header-1675x480.jpg);
}
#hero-img .inner {
  padding-bottom: 28.65671%; /* height(480px)/width(1675w) x 100 */ 
  display: block;
  height: 0;
}

/* BODY Content area ------------------------------------- */ 
#page {
	max-width: 1200px;
	margin: 15px auto 30px;
	padding: 0 1.5%;
	}
#page-home {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5%;
		}
.pagetop { /* up arrow div for whole page*/
	width: 30px;
	height: 30px;
	background-image: url(../../img/gf/gf-up-arrow.png);
	background-repeat: no-repeat;
	margin-top: 20px;
	box-shadow: 4px 2px 2px #D8D1C8;
	-webkit-box-shadow: 3px 1px 3px #D8D1C8;
	}
.pagetop:hover {
    background-image: url(../../img/gf/gf-up-arrow-hover.png);
	background-repeat: no-repeat;
	-webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
	box-shadow: 4px 2px 2px #D8D1C8;
	-webkit-box-shadow: 3px 1px 3px #D8D1C8;	
	}
/* HOMEPAGE LAYOUT------------- */
#headline-wrap {
	height: 100%;
	width: 100%;
	border-top: 5px solid #ffd36e; /* GF branding yellow */
    background: #f9edd2; /* Old browsers */
    background: -moz-linear-gradient(top,  #f9edd2 0%, #ffffff 37%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #f9edd2 0%,#ffffff 37%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #f9edd2 0%,#ffffff 37%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9edd2', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	}
#headline {
	max-width: 1200px;
	margin: 0 auto;
	}
#headline-shad {
	background-image: url(../../img/gf/headline-shadow.png);
	background-repeat: repeat-x;
	height: 36px;
	width: 100%;
	}
.intro {
	width: 88%;
	margin: 0 auto;
	padding: 28px 0px 20px;
	}
#intro-left {
	width: 20%;
	height: auto;
	margin-right: 0 5% 0 0;
	float: left;
	border: 7px solid #fff;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	 box-shadow: 0 5px 20px #B4A192;
	}
#intro-left img {
	max-width: 100%;
	display: block;
	margin: 0;
		}
#intro-right {
	width: 75%;
	height: auto;
	float: right;
	}
.home-feature {
	width: 100%;
	margin: 50px 0 60px;
	background: #ffffff; 
	box-shadow: 0 4px 15px #DBD3CB;
	-webkit-box-shadow: 0 4px 15px #DBD3CB;
		}
.feature {
	width: 100%;
	margin: 10px 0;
	background: #ffffff; 
	box-shadow: 0 4px 15px #DBD3CB;
	-webkit-box-shadow: 0 4px 15px #DBD3CB;
		}
.home-feature-header {
	width: 92.05%;
	padding: 2.5% 4%;
	background-color: #ECF3F5;
	background-image: url(../../img/gf/bottom-texture.png), url(../../img/gf/grain-texture.png) ;
	background-repeat: repeat-x;
	background-position: bottom;
	}
.home-feature-body { width: 94%; padding: 2% 3%; }
.feature-body { width: 94%; padding: 1.5% 3%; }

.home-feature ul {
	margin:0; 
	padding: 3px 0 5px 30px;
		}
.home-feature ul li {
	list-style: disc outside none; /* type position image */
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-size: 118%;
	line-height: 163%;
	color: #10587B; /* GF branding blue */
	padding: 4px 5px;
	}

/* INTERIOR PAGES LAYOUT------------- */
#maincol {
	width: 70%;
	float: left;
	padding-bottom: 10px;
	text-align: justify;
	}
#maincol-full {
	width: 85%;
	margin: 0 auto;
	padding-bottom: 10px;
	}
#sidecol {
	width: 23%;
	margin: 0 0 10px 1%; /* top, right, bottom, left */
	padding: 10px 2%; /* top/bottom, right/left */
	float: right;
	background-color: #F1ECE7;
	border: 1px solid #DFD5CA;
		/* box-shadow: 5px 3px 6px #CEC8BA; */
	text-align: left;
	}
.callout-box {
	width: 96%;
	height: auto;
	background-color: #F1ECE7;
	border: 1px solid #DFD5CA;
	padding: 5px 2% 15px;
	margin: 5px 0;
	}
.app-instructs {
	width: 75%;
	height: auto;
	float: left;
	}
#about-pics { 
width:88%; padding: 0 6%; margin-top: 20px; margin-bottom: 20px; font-family: FilmotypeLucky, serif; font-size: 145%; color: #507d93; text-align: center;
 }
#aboutpic-left { float: left; width: 56%; height: auto; padding: 1% 4% 0; }
#aboutpic-left img {
	box-shadow: 2px 2px 8px 5px #E2DDD8;
	-webkit-box-shadow: 2px 2px 8px 5px #E2DDD8;
}
#aboutpic-right { float: right; width: 28%; height: auto; padding: 3% 4% 0; }
.caption { text-align: center; }
	
/* Button link for downloadable documents  */
.button-space {
	margin: 25px 0 25px 0;
	}
	.button-link {
	font-family: 'Lato', sans-serif;
	font-size: 95%;
	line-height: 100%;
	padding: 7px 14px;
	background-color: #10587B; /* GF branding blue */
	color: #ffffff;
	text-decoration: none;
	box-sizing: border-box;
	border: 1px solid #10587B;
	box-shadow: 3px 1px 2px #D8D1C8;
	-webkit-box-shadow: 3px 1px 3px #D8D1C8;
	-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;
	border: 1px solid #10587B;
	color: #10587b;
	background-color: #cfe1e2; /* rs branding light blue*/
}
.button-link:active {
    box-shadow: 3px 1px 2px #D8D1C8;
	-webkit-box-shadow: 3px 1px 3px #D8D1C8;
	background-color: #cfe1e2; /* rs branding light blue*/
	color: #2b505f;
}
/* Contact Page ----*/
#gf-contact {
    width: 50%;
    margin: 20px auto 100px;
	padding: 3% 3.5%;
	background: #ffffff; 
	box-shadow: 0 4px 15px #DBD3CB;
	-webkit-box-shadow: 0 4px 15px #DBD3CB;
	}
#gf-contactleft{ width: 100%; float: none;} /* might use these later */
#gf-contactright { width: 100%; float: none;} 
#contact-rightcol {
	width: 55%;
	float: left;
	}
#contact-leftcol {
	width: 45%;
	float: left;
	margin-bottom: 15px;
	}
.contact-set {
	margin-bottom: 20px;
	}
.contact-text {
	width: 72%;
	float:left;
	margin-left: 6%;
	}
.contact-pic {
	float: left;
	width: 22%;
	border: 5px solid #fff;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	box-shadow: 0 5px 8px #B4A192;
	margin-top: 10px;
	}
.contact-pic img {
	max-width: 100%;
	display: block;
	margin: 0;
	}
/* PAGE FOOTER ------------------------------------- */ 
#footer-container {
	max-width: 100%;
	height: 100%;
	background-color: #194f6a; /* GF branding blue */
	position: relative;
}
#footer {
	max-width: 1200px;
	margin: 0 auto;
	clear: both;
}
#footerinner {
	width: 97%;
	padding: 25px 1.5% 0;
			}
p.footertitle {
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 95%;
	line-height: 165%;
	color: #ffffff;
	margin: 0;
	padding: 0 0 10px;
	letter-spacing: 0.2em;
		}
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: 92%;
    line-height: 165%;
	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; /* DK branding brown */
	text-decoration: none;
	font-weight: 400;

	}
p.footer a:hover, p.footer a:active{ 
	color: #ffcb6c; /* Glaser branding yellow */
	text-decoration: none;
	}
#footerleft {
	width: 40%;
	float: left;
}
#contact-menu { /* mid col and right col are in their own div for media query re-positioning  */
    float: right;
    width: 60%;
	}
#footermid { /* address semantic tag */
width: 70%; 
float: left;
font-style: normal; 
}
#footerright { 
width: 30%; 
float: left;	 
}
#footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: left;
}
#footer ul li {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  letter-spacing: .05em;
  font-size: 92%;
  line-height: 165%;
  height: 100%;
}
#footer ul li a {
  text-decoration: none;
  color: #ffffff; 
  display: inline;
}
#footer ul li a:hover {
  color: #ffcb6c; /* GF branding yellow */
}
#footer ul li a#footercurrent {
  color: #f9e1a5; /* GF branding yellow */
}
#bottombar-container { /* full width across bottom of site */
	width: 100%;
	clear: both;
	padding: 12px 0; /* top bottom, right left */
	margin-top: 35px;
	background-color: #13465f; /* GF branding blue darker */
}
#bottombar { /* centered beneath footer columns*/
	max-width: 1200px;
	margin:0 auto;
	}
#bottombar-inner { /* copyright and login */
	padding: 0 1.5%;
	font-family: 'Lato', sans-serif;
	font-size: 73%;
	letter-spacing: 0.03em;
	color: #89AEBF; /* GF branding light blue */
}
#login {
	width: 20%;
	float: right;
	text-align: right;
	}
#login a {
	text-decoration: none;
	color: #507d93; /* GF branding light blue */
}
#login a:hover { text-decoration: none; color: #fff;  }

.deadline-center {text-align: center; font-size: 105%; margin-top: 0; padding-top: 3px;} /* focus area page text--*/
	
@media screen and (min-width:1366px)  {
h1.headline {font-size: 260%;}
.intro { width: 95%; }
#intro-left { width: 19%; margin-right: 4%; }
#intro-right { width: 76%; }	
		}
@media screen and (max-width:1250px)  {
#nav-container { width: 440px;}
nav { margin-left: 0;}
		}
@media screen and (max-width:1024px)  {
#nav span:after { /* drop-down arrow appears */
	width: 0;
	height: 0;
	border: 4px solid transparent; /* 5 */
	border-bottom: none;
	border-top-color: #194f6a;
	content: '';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -4px; /* 5 */
}
#nav-container {
	width: 460px;
		}
		nav {margin-left: 0;}
#hero-img { 
  background-image: url(../../img/gf/glaser-header-1506x480.jpg);
}
#hero-img .inner {
  padding-bottom: 31.8725%; /* height(480px)/width(1506w) x 100 */ 
}
	
h1.headline {font-size: 225%;}
.intro { padding: 10px 0 20px; }
.app-instructs {
	width: 100%;
	float: none;
	}
#formlinks {
	width: 100%;
	padding: 0;
	}
#maincol-forms {
	width: 85%;
    float: left;
	}
#page {
	margin: 22px auto 30px;
	}
/* Contact Page ----*/
#contact-rightcol { width: 60%; }
#contact-leftcol { width: 40%; }
}

@media screen and (max-width:1000px) { 
h1.headline {font-size: 245%; padding: 25px 15% 15px;}
.intro {
	width: 88%;
	margin: 0 auto;
	padding: 5px 0 20px;
	}
#contact-rightcol { width: 62%; }
#contact-leftcol { width: 38%; }
 .contact-text { width: 70%; }
.contact-pic { width: 24%; }
 #footerleft img { max-width: 80%; }
}
@media screen and (max-width:920px),  screen and (max-width:920px) and (-webkit-device-pixel-ratio: 2)
 { 
#maincol-full { width: 100%; }
#about-pics { width: 80%; margin: 1.5% auto; }
#aboutpic-left { width: 58%; height: auto; padding: 1% 5% 0 0; }
#aboutpic-right { width: 31%; height: auto; padding: 3% 0 0 5%; } /* top right bottom left */
 }
 @media screen and (max-width:860px),  screen and (max-width:860px) and (-webkit-device-pixel-ratio: 2)
 {
 /* LOGO AND NAV STACKED IN HEADER ----------------------------*/
	 #header {text-align: center;} /* centers the #logo img  */
#logo { float: none; width: 100%; padding: 18px 0 15px 0%; }
#nav-container {
	width: 100%; float: none; background-color: #194f6a;
	/* overrides desktop of 410px wide and float:right --*/
		}
nav { height: 42px; /*overrides 62px on desktop  --*/ 
     line-height: 43px; /*overrides 62px on desktop  --*/
	 font-size: 90%;  /*overrides size of  95% on desktop  --*/
     text-align: center; /*overrides align:left on desktop, in order to center the whole div  --*/
	 padding-left: 0; /*overrides dtop padding-left 10px --*/
}
#nav span { font-weight: 400; }
#nav span:after { /* drop-down arrow */
	border-top-color: #DFF5F5; /* GF light warm sky blue, a bit darker */
}
nav > ul {
	margin: 0 auto;
	padding-left: 6.5%;
	} /* because the desktop nav (line 228) nav ul li has right padding of 6%. Here it's compensated to move the whole ul back to the right. In the desktop it doesn't matter that the ul isn't centered.
 ----*/
 
nav > ul > li { 
font-weight: 400; /*overrides weight of 700 on desktop main nav --*/
/* the lis are already aligned left on the desktop version--*/
}
nav a:link, nav a:visited {
	color: #ffffff;
}
nav ul li:hover > a {
	color: #DFF5F5; /* GF light warm sky blue, a bit darker */
}
nav a:active, nav a#current {
	color: #f9e1a5;
} 
/* MAIN NAVIGATION FOR STACKED LOGO/NAV — second level -------------------------- */
#nav li ul {
	line-height: 40px;
	position: absolute;
	width: 200px;
	text-align: left;
	font-size: 100%;
	margin-left: -4%;/* don't get why the 4% works, but it does on all browser window sizes ----*/
}
#nav li:hover ul { margin-top: 11px; color: #F2FBFB; /* GF light warm sky blue */ }
#nav li ul a {
	font-size: 103%;
	padding: 0 8%; /* adds padding to left of text, pushes text to right */
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
	background-color: #F2FBFB; /* GF light warm sky blue */
	color: #194F6A; /* GF branding blue */
}

 }
@media screen and (max-width:820px),  screen and (max-width:820px) and (-webkit-device-pixel-ratio: 2)
 {  
h1.headline {font-size: 225%; padding: 22px 10% 13px;}
h1 { font-size: 148%; line-height: 153%; }
h3.homepage { font-size: 120%; line-height: 150%;}

#maincol {
	width: 100%;
	float: none;
	}
.intro { width: 93%; }
#intro-left { width: 23%; margin-right: 5%; }
#intro-right { width: 72%; }

#contact-leftcol { width: 100%; float: none; }
#contact-rightcol { width: 100%; float: none; }
.contact-text { width: 75%; }
.contact-pic { width: 19%; }
#contact-menu { /* mid col and right col are in their own div for mobile re-positioning  */
    width: 97%;
	margin: 0 auto; 
	padding-bottom: 22px;
	border-bottom: thin solid #13465f; /* GF darker blue */
	float: none;
	}
#footerleft {
    width: 85%;
	margin: 0 auto; 
	float: none;
	padding-top: 22px;
	clear: both;
}
#footerleft img {
	display: block;
	margin: 0 auto;
}
#bottombar-container { /* full width across bottom of site */
	padding: 13px 0; 
	margin-top: 20px;
}
}
@media screen and (max-width:768px), screen and (max-width:768px) and (-webkit-device-pixel-ratio: 2) 
{ 
h3 { padding: 0 0 5px; }
ul.page { padding: 3px 0 5px 25px;}
#logo { float: none; width: 55%; margin: 0 auto; padding: 15px 0 12px; }

}
@media screen and (max-width:640px), screen and (max-width:640px) and (-webkit-device-pixel-ratio: 2), screen and (max-width:640px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)
{
/* MOBILE DROP-DOWN MENU BEGINS –––––––––––––––––––––––––––––––––––––––––––––--- */	
#header {text-align: center;} /* centers the #logo img  */

/* MOBILE NAV STARTS  */
nav a#pull { /* menu bar before it gets expanded, style for 'Menu' text--- */
	display: block;
	color: #ffffff;
    background-color: #194f6a; 
	width: 100%;
	position: relative;
	border: 0;
	height: 43px;
	letter-spacing: .07em;

    }
 nav a#pull:after { /* 'hamburger' icon--- */
    content:"";
    background: url(../../img/gf/glaser-nav-icon.png) no-repeat;
    width: 28px;
    height: 20px;
    display: inline-block;
    position: absolute;
    right: 22px;
    top: 10px;
    }
nav { /* shows when expanded*/
    background-color: #F2FBFB; /* GF light warm sky blue */ 
	height: auto;
	margin: 0;
    line-height: 44px;
	position: relative;
}
nav ul {
	height: auto;
	display: none;	
	padding-left: 0; /* this overrides the media query of 'padding-left: 6%;', which was added to override line 228, padding-rignt: 6% on the desktop lis.  Now all the navs are happy at last. that is all.
	
	border-bottom: 2px solid #194f6a; /* GF blue shows along bottom of drop-down menu*/
}
nav ul li {
	display: block;
	list-style-type: none;
	text-align: left;
	float: left;
	width: 100%;
	position: relative;
	font-weight: 600;
	margin: 0;
	padding: 0;
	}
nav a:link, nav a:visited {
	color: #194f6a; 
	background-color: #F2FBFB; /* GF light warm sky blue */
	/* for some crazy reason, when there's no background-color, the sub nav gets screwed up. THIS is the issue I've been looking for for three + hours?????---------*/ 
	display: inline-block;
	text-align: left;
	line-height: 45px;
	height: 45px;
	text-decoration: none;
	border-bottom: 1px solid #CEC8BA; /* branding beige */
	box-sizing: border-box;
	text-indent: 22px;
	width: 100%;
}
nav ul li:hover a, nav a:active {
	background-image: none;
	background-color: #F2FBFB; /* GF light warm sky blue */ 
	color: #194f6a; /* GF branding blue*/
	}
nav a#current {
	background-image: none;
	background-color: #ffffff; /* light sky blue */ 
	color: #194f6a; /* GF branding blue*/
	}
/* second level MOBILE NAV------------------------------- */
#nav span {font-weight: 600;}
#nav span:after { /* drop-down arrow darker for mobile menu */
	border-top-color: #2b505f;
			}
#nav li ul {
	 padding-left: 0; 
	 width: 100%;
	 display: none;
	 border-bottom: 1px solid #8C8C8C;
	 
}
#nav li:hover ul {
	display: block;
	margin-left: 0;
	margin-top: 0; /* This corrects the desktop, which is set at 21px top margin due to the yellow header*/
	position: static; /* makes the subnav within the flow, so it bumps down page elements to make room*/
}
#nav li ul a {
	padding: 0 3% 0; /*  centers sub-nav links top to bottom and indents --*/
	margin-left: 0; 
	border-bottom: 1px solid #CEC8BA;
	width: 100%;
	font-weight: 400;
	background-color: #F2FBFB; /* GF light warm sky blue */
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
	background-color: #FFFFFF; /* GF light warm sky blue */
	color: #194F6A; /* GF branding blue */
}
#nav li ul a#subcurrent {
	background-color: #ffffff;
	color: #194F6A; /* GF branding blue */
	}

h1.headline {font-size: 230%; padding: 25px 7% 15px;}

/* at this size and smaller Glaser's portrait sits on top of dscriptive paragraph ---*/  
#page { margin: 18px auto 30px; }
#intro-left { border: 6px solid #fff }
#maincol {
	text-align: left;
	}
#about-pics { width: 88%; margin: 1.5% auto; } /* any wider doesn't work due to width (vs. max-width) on child divs */
#gf-contact {width: 85%; margin-bottom: 35px;}
#footerleft {
    width: 60%;
	padding-top: 15px;
}
#bottombar-inner {text-align: center;}
}
@media screen and (max-width:560px) {
h1.headline {font-size: 210%; padding: 20px 2% 15px;}
#page-home {margin-top: 5px;}
.intro { width: 93%; padding-top: 0; padding-bottom: 12px; }
#intro-left { width: 33%; margin: 0 auto 30px; float: none; }
#intro-right { width: 95%; margin: 0 auto; float: none; }
h1 { font-size: 145%; line-height: 154%; }
h3.homepage { font-size: 112%; line-height: 165%; }
.home-feature ul li {font-size: 110%; line-height: 155%;}
}
@media screen and (max-width:480px) {
#logo { width: 65%; }

#page { margin-top: 10px; }
h1 {
	font-size: 140%;
	line-height: 156%;
}
#about-pics { width: 78%; margin: 3% auto 0; }
#aboutpic-left { float: none; width: 100%; padding: 0; margin: 0 auto; }
#aboutpic-right { float: none; width: 50%; padding: 5.5% 0 0; margin: 0 auto; }

p.footer, p.footertitle, p.footer-org-name, #footerright ul li {text-align: center;}
#footermid, #footerright {
	width: 100%;
	float: none;
	}
#footermid {
	padding-bottom: 20px;
	}
}
@media screen and (max-width:320px) {
nav ul li {
	width: 100%; /* mobile nav switches from two li's wide to vertical list */
	}
#footerright {
  text-align: center;
}
}