/*! site styles */
/*
	Breakpoints
	s-tab:   25em / 400px 
	l-tab:   43.75em / 700px
	desk:    56.25em / 900px
	m-desk:  71.875em / 1150px
	l-desk:  81.25em / 1300px

MQ Block:

@media only screen and (min-width: 25em) {
    
}

@media only screen and (min-width: 43.75em) {
    
}

@media only screen and (min-width: 56.25em) {
    
}

@media only screen and (min-width: 81.25em) {
    
}

Colors:

Orange: #DC5705;
Lightest Blue: #B7D0E8;
Light Blue: #8BB1DD;
Blue: #4A90E2;
Dark Blue: #35475B;

Gray: #494949;

Fonts: 

Serif: Georgia, "New Times Roman", serif;
Sans-serif: "Roboto", Helvetica, Arial, sans-serif;


*/

/* ==========================================================================
   HTML Elements
   ========================================================================== */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body, 
p, 
th, 
td, 
ul, 
li {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}

h1 {
	color: #35475B;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-size: 3em;
	font-weight: 900;
}

h2 {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}

h3 {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}

h4 {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}

h5 {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}

h6 {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}

p {
	margin: 0 0 1em 0;
}

img {
	height: auto;
	margin: 0;
	max-width: 100%;
	padding: 0;
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   Responsive Typography
   ========================================================================== */

p, h1, h2, h3, h4, h5, h6 {
	margin-left: auto;
	margin-right: auto;
	-webkit-transition: font-size linear 0.15s;
	-moz-transition: font-size linear 0.15s;
	transition: font-size linear 0.15s; 	
}

p {
	font-size: 1em;
	line-height: 1.4375;
	max-width: 43em;

/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
 -ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
}
.wf-inactive p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.975em;
	letter-spacing: -0.4px;
	line-height: 1.5;
}
	@media only screen and (min-width: 81.25em) {
	    p {
		    font-size: 1.125em;
		    line-height: 1.5;
		}
	    .wf-inactive p {
		    font-size: 1.095em;
		    letter-spacing: -0.4px;
		    line-height: 1.55;
		}
	}

h1 {
	font-size: 2em;
	line-height: 1.25;
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}
.wf-inactive h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: bold;
	line-height: 1.25
}
	@media only screen and (min-width: 25em) {
    h1 {
	    font-size: 2.25em;
	    line-height: 1.25;
		}
		.wf-inactive h1 {
			font-size: 2em;
			line-height: 1.25; 
			letter-spacing: -1px;
			margin-top: 0.65em;
		}
	}
	
	@media only screen and (min-width: 43.75em) {
    h1 { 
	    font-size: 2.5em;
	    line-height: 1.125;
		}
		.wf-inactive h1 {
			font-size: 2.4em;
			margin-top: 0.5em;
		}
	}
	
	@media only screen and (min-width: 56.25em) {
    h1 { 
    	font-size: 3em;
	    line-height: 1.125;
    }
		.wf-inactive h1 {
			font-size: 2.9em;
			margin-top: 0.45em;
		}
	}
	
	@media only screen and (min-width: 81.25em) {
    h1 { 
    	font-size: 4em;
	    line-height: 1.125;
    }
		.wf-inactive h1 {
			font-size: 3.9em;
			letter-spacing: 0;
			line-height: 1.15;
			margin-top: 0.45em;
		}
	}

h2 {
	font-size: 1.625em;
	line-height: 1.125;
	margin-top: 0.5em;
	margin-bottom: 0.125em;
}
.wf-inactive h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.625em;
	line-height: 1.125; 
	letter-spacing: -1px;
	margin-top: 0.5em;
}
	@media only screen and (min-width: 25em) {
	    h2 {
		    font-size: 1.75em;
		    line-height: 1.125;
			}
			.wf-inactive h2 {
				font-size: 1.75em;
				line-height: 1.125; 
			}
	}
	
	@media only screen and (min-width: 43.75em) {
	    h2 { 
		    font-size: 2em;
		    line-height: 1.125;
		    max-width: 21.5em; /* 43/2 */
			}
			.wf-inactive h2 {
				font-size: 2em;
				line-height: 1.125; 
			}
	}
	
	@media only screen and (min-width: 56.25em) {
	    h2 { 
	    	font-size: 2.25em;
		    line-height: 1.125;
		    max-width: 19.11111111111111em; /* 43/2.25 */
	    }
			.wf-inactive h2 {
				font-size: 2.25em;
				line-height: 1.125; 
			}
	}
	
	@media only screen and (min-width: 81.25em) {
	    h2 { 
	    	font-size: 2.5em;
		    line-height: 1.125;
		    max-width: 19.35em; /* 43/2.5*1.125 */
	    }
			.wf-inactive h2 {
				font-size: 2.5em;
				line-height: 1.125; 
			}
	}

h3 {
	font-size: 1.3125em;
	line-height: 1.25;
	margin-top: 0.5em;
	margin-bottom: 0.125em;
}
	@media only screen and (min-width: 25em) {
	    h3 {
		    font-size: 1.5em;
		    line-height: 1.25;
		}
	}
	
	@media only screen and (min-width: 43.75em) {
	    h3 { 
		    font-size: 1.75em;
		    line-height: 1.125;
		    max-width: 24.57142857142857em; /* 43/1.75 */
		}
	}
	
	@media only screen and (min-width: 56.25em) {
	    h3 { 
	    	font-size: 1.875em;
		    line-height: 1.125;
		    max-width: 22.93333333333333em; /* 43/1.875 */
	    }
	}
	
	@media only screen and (min-width: 81.25em) {
	    h3 { 
	    	font-size: 2em;
		    line-height: 1.125;
		    max-width: 24.1875em; /* 43/2*1.125 */
	    }
	}

h4 {
	font-size: 1.25em;
	line-height: 1.25;
	margin-top: 0.5em;
	margin-bottom: 0.125em;
}
	@media only screen and (min-width: 25em) {
	    h4 {
		    font-size: 1.25em;
		    line-height: 1.25;
		}
	}
	
	@media only screen and (min-width: 43.75em) {
	    h4 { 
		    font-size: 1.375em;
		    line-height: 1.125;
		    max-width: 31.27272727272727em; /* 43/1.375 */
		}
	}
	
	@media only screen and (min-width: 56.25em) {
	    h4 { 
	    	font-size: 1.375em;
		    line-height: 1.125;
		    max-width: 31.27272727272727em; /* 43/1.375 */
	    }
	}
	
	@media only screen and (min-width: 81.25em) {
	    h4 { 
	    	font-size: 1.5em;
		    line-height: 1.125;
		    max-width: 32.25em; /* 43/1.5*1.125 */
	    }
	}

h5 {
	font-size: 1.125em;
	line-height: 1.25;
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}
	@media only screen and (min-width: 25em) {
	    h5 {
		    font-size: 1.125em;
		    line-height: 1.25;
		}
	}
	
	@media only screen and (min-width: 43.75em) {
	    h5 { 
		    font-size: 1.25em;
		    line-height: 1.125;
		    max-width: 34.4em; /* 43/1.25 */
		}
	}
	
	@media only screen and (min-width: 56.25em) {
	    h5 { 
	    	font-size: 1.25em;
		    line-height: 1.125;
		    max-width: 34.4em; /* 43/1.25 */
	    }
	}
	
	@media only screen and (min-width: 81.25em) {
	    h5 { 
	    	font-size: 1.25em;
		    line-height: 1.125;
		    max-width: 38.7em; /* 43/1.25*1.125 */
	    }
	}

h6 {
	font-size: 1em;
	line-height: 1.25;
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}
	@media only screen and (min-width: 25em) {
	    h6 {
		    font-size: 1em;
		    line-height: 1.25;
		}
	}
	
	@media only screen and (min-width: 43.75em) {
	    h6 { 
		    font-size: 1.125em;
		    line-height: 1.125;
		    max-width: 38.22222222222222em; /* 43/1.125 */
		}
	}
	
	@media only screen and (min-width: 56.25em) {
	    h6 { 
	    	font-size: 1.125em;
		    line-height: 1.125;
		    max-width: 38.22222222222222em; /* 43/1.125 */
	    }
	}
	
	@media only screen and (min-width: 81.25em) {
	    h6 { 
	    	font-size: 1.125em;
		    line-height: 1.125;
		    max-width: 43em; /* 43/1.5*1.125 */
	    }
	}



/* ==========================================================================
   Layout
   ========================================================================== */

.section-content {
	margin: 0 auto;
	padding: 0 0.5em;
}
	@media only screen and (min-width: 25em) {
	    .section-content {
		    max-width: 98%;
	    }
	}
	
	@media only screen and (min-width: 43.75em) {
	    .section-content {
		    max-width: 75%;
	    }
	}
	
	@media only screen and (min-width: 56.25em) {
	    .section-content {
		    max-width: 72%;
	    }
	}
	
	@media only screen and (min-width: 71.875em) {
	    .section-content {
		    max-width: 54em;
	    }
	}
	
	@media only screen and (min-width: 81.25em) {
	    .section-content {
		    max-width: 60em;
	    }
	}

.section-content.border-top {
	border-top: double 3px #a1a1a1;
}
.content-area {
	clear: both;
}

.columns {
}
	@media only screen and (min-width: 43.75em) {
		.columns {
			-webkit-columns: 2;
			-moz-columns: 2;
			columns: 2;
			-webkit-column-gap: 2em;
			-moz-column-gap: 2em;
			column-gap: 2em;
		}
	}
	@media only screen and (min-width: 56.25em) {
		.columns {
			column-gap: 2em;
			max-width: none;
		}
	}

/* ==========================================================================
   Modules
   ========================================================================== */

/* form styles */
form {
	max-width: 43em;
	margin: 0 auto;
}
	@media only screen and (min-width: 81.25em) {
	    form {
		    max-width: 48.375em;
	    }
	}

.field-wrapper {
	margin-bottom: 1em;
	padding-right: 1em;
}

fieldset {
	display: block;
	margin-bottom: 1em;
	width: 100%;
}

.field-wrapper.inline {
	float: left;
}

.field-wrapper.third {
	width: 100%;
}
	@media screen and (min-width: 43.75em) {
		.field-wrapper.third {
			width: 33.3333%; 
		} 
	}

.field-wrapper.third.larger-only {
	width: 100%;
}
	@media screen and (min-width: 43.75em) {
		.field-wrapper.third.larger-only {
			width: 100%; 
		} 
	}

	@media screen and (min-width: 56.25em) {
		.field-wrapper.third.larger-only {
			width: 33.33333%; 
		} 
	}

label, 
legend {
	display: block;
	font-weight: bold;
}

input[type="text"], 
input[type="search"], 
input[type="email"], 
input[type="tel"], 
input[type="password"], 
textarea {
	border: solid 1px #a1a1a1;
	border-radius: 0.15em;
	font-family: "Fira Sans", Helvetica, Arial, sans-serif;
	font-size: 1.125em;
	padding: 0.35em;
	width: 100%;
}

/* web fonts don't work nicely in password fields in Safari */
input[type="password"] {
	font-family: Helvetica, Arial, sans-serif;
}

input[type="radio"]+label {
	display: inline-block;
	font-weight: normal;
	max-width: 85%;
	padding-left: 0.5em;
	vertical-align: top;
}

input[type="submit"] {
	background-color: #35475B;
	background-image: -moz-linear-gradient(#55677B, #35475B);
	background-image: -webkit-linear-gradient(#55677B, #35475B);
	background-image: linear-gradient(#55677B, #35475B);
	border-color: #55677B #55677B #35475B;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	-moz-border-radius: 0.25em / 0.25em;
	-webkit-border-radius: 0.25em 0.25em;
	border-radius: 0.15em / 0.15em;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
	color: #ffffff;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-size: 1.25em;
	padding: 0.35em 0.75em;
}


/* end form styles */

/* header styles */
#banner {
	background-size: 1em 1em;
	background-color: #26435e;
	background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, .05) 25%, transparent 25%,
	                  transparent 50%, rgba(0, 0, 0, .05) 50%, rgba(0, 0, 0, .05) 75%,
	                  transparent 75%, transparent);
	background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, .05) 25%, transparent 25%,
	                  transparent 50%, rgba(0, 0, 0, .05) 50%, rgba(0, 0, 0, .05) 75%,
	                  transparent 75%, transparent);
	background-image: linear-gradient(90deg, rgba(0, 0, 0, .05) 25%, transparent 25%,
	                  transparent 50%, rgba(0, 0, 0, .05) 50%, rgba(0, 0, 0, .05) 75%,
	                  transparent 75%, transparent);
	color: #ffffff;
	padding-bottom: 2em;
	position: relative;
	z-index: 10;
}

.branding {
	margin: 0;
	padding: 0.25em 0;
}

.branding h1 {
	color: #ffffff;
	font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
	font-weight: 200;
	font-size: 3em;
	margin: 0.5em 0 0 0;
}
.wf-inactive .branding h1 {
	font-family: Georgia, serif;
	font-size: 2.25em;
	margin: 0.95em 0 0 0;
}
	@media only screen and (min-width: 43.75em) {
	    .branding h1 {
   			font-size: 4em;
   			margin-top: 0;
	    }
			.wf-inactive .branding h1 {
				font-size: 3em;
				margin: 0.35em 0 0 0;
			}
	}
.branding h1 a:link, 
.branding h1 a:visited {
	color: #ffffff; 
	text-decoration: none;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.75);
}

.branding h1 a:hover, 
.branding h1 a:focus {
	color: #ffffff; 
	text-decoration: none;
	text-shadow: 0px 1px 1px rgba(90,205,81,1);
}

/* /header styles */

/* navigation styles */

body:before {
	content: "widescreen";
	position: absolute;
	top: -999em;
	left: -999em;
	speak: none; 
}

.main-nav {
	margin: 0 auto;
	padding: 0 0.5em;
}
	@media only screen and (min-width: 25em) {
	    .main-nav {
		    max-width: 98%;
	    }
	}
	
	@media only screen and (min-width: 43.75em) {
	    .main-nav {
   			margin-top: -1em;
		    max-width: 75%;
		    padding: 0;
	    }
	}
	
	@media only screen and (min-width: 56.25em) {
	    .main-nav {
		    max-width: 72%;
	    }
	}
	
	@media only screen and (min-width: 71.875em) {
	    .main-nav {
		    max-width: 54em;
	    }
	}
	
	@media only screen and (min-width: 81.25em) {
	    .main-nav {
		    max-width: 60em;
	    }
	}

.nav-menu-toggle {
	background-color: #8BB1DD;
	background: -moz-linear-gradient(top, #A7C0D8 0%, #8BB1DD 100%);
	background: -webkit-linear-gradient(top, #A7C0D8 0%,#8BB1DD 100%);
	background: linear-gradient(to bottom, #A7C0D8 0%,#8BB1DD 100%);
	border-radius: 0.2em;
	display: block;
	float: right;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-weight: normal;
	margin-top: -2.25em;
	padding: 0.2em 0.35em;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	right: 0.25em;
	width: 5em; 
	z-index: 15;
}
	@media screen and (min-width: 43.75em) {
		.nav-menu-toggle {
			display: none; 
		} 
	}

.fontface .nav-menu-toggle:before {
	content: "\f0c9";
	font-family: FontAwesome;
	padding-right: 0.25em;
}

.fontface .nav-is-active .nav-menu-toggle:before {
	content: "\f057";
}

.nav-menu-toggle:link, 
.nav-menu-toggle:visited {
	color: #35475B; 
}
.nav-menu-toggle:hover {
	border-color: #35475B;
	color: #35475B; 
	outline: inherit;
}

.main-nav-inner {
	background-color: #35475B;
	-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
	display: block;
	height: 100%;
	left: -95%;
	padding: 0; 
	position: absolute;
	transition: left linear 0.15s; 	
	width: 95%;
	z-index: 15;
} 
.nav-is-active .main-nav-inner {
	left: 0;
}
	@media screen and (min-width: 43.75em) {
		.main-nav-inner {
			background-color: #B7D0E8;
			background: -moz-linear-gradient(top, #8d969e 0%, #66727d 100%);
			background: -webkit-linear-gradient(top, #8d969e 0%,#66727d 100%);
			background: linear-gradient(to bottom, #8d969e 0%,#66727d 100%);
			-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
			-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
			box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
			display: block;
			left: 0;
			margin: -0.5em auto 0.5em auto;
			float: none;
			padding: 0; 
			position: relative;
			top: 0;
			width: 100%;
			z-index: 15;
		} 
		.nav-is-active .main-nav-inner {
			left: 0;
		}
}
.nav-menu {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1.4; 
}
.flexbox .nav-menu {
			
}
	@media screen and (min-width: 43.75em) {
		.flexbox .nav-menu {
			display: -webkit-flex;
			display: flex;
			-webkit-flex-direction: row;
			flex-direction: row;
			justify-content: space-around;		
		}
	}

.nav-menu > ul {
	margin: 0;
	padding: 0; 
}

.menu-item {
	margin: 0;
	border-top: 1px solid #8BB1DD;
	overflow: hidden;
	padding: 1em 0; 
	position: relative;
}
	
.nav-menu .menu-item:first-child {
	border-top: none; 
}

.menu-item {
	display: block; 
	padding: 0;
	position: relative;
	text-align: left;
}
	@media screen and (min-width: 43.75em) {
		.menu-item {
			border-top: 0;
			display: block; 
			float: left;
			overflow: visible; 
			padding: 0;
			position: relative;
			text-align: center;
			vertical-align: baseline;
			width: 25%;
			zoom: 1;
			*display: inline;
			*vertical-align: auto;
		}
		.flexbox .menu-item {
			display: inline-block;
			flex-grow: 1;
			float: none;
			text-align: center;
			width: auto;
		}
	}

.sub-menu .menu-item {
	float: none;
	width: 100%;
}

.menu-item > a {
	color: #ffffff;
	display: block;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: 500;
	padding: 0.75em 1em 0.65em 1em; 
	text-align: left;
	text-decoration: none; 
	text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
	text-transform: uppercase;
	-webkit-transition: background linear 0.15s;
	-moz-transition: background linear 0.15s;
	transition: background linear 0.15s; 
	vertical-align: baseline;
	zoom: 1;
	*display: inline;
	*vertical-align: auto;
}
.wf-inactive .menu-item > a { 
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.97em;
}

	@media only screen and (min-width: 43.75em) {
	  .menu-item > a {
			border-bottom: 0;
			border-left: solid 1px #8d969e;
			border-right: solid 1px #66727d;
		  font-size: 1.25em;
			padding: 0.25em 1em 0.15em 1em; 
			text-align: center;
	  }
		.wf-inactive .menu-item > a { 
			font-size: 1.21em;
		}
	}


.menu-item:first-child a {
	border-left: none;
}
.menu-item:last-child a {
	border-right: none;
}

.menu-item.active-trail {
	
}
	@media only screen and (min-width: 43.75em) {
		.menu-item.active-trail {
			-webkit-box-shadow: 0 3px 0 0 #35475B;
			-moz-box-shadow: 0 3px 0 0 #35475B;
			box-shadow: 0 3px 0 0 #35475B;
		}
}

.menu-item.active-trail > a {
	background-color: #8BB1DD;
}
	@media only screen and (min-width: 43.75em) {
		.menu-item.active-trail > a {
			background-color: transparent;
		}
	}

.menu-item:focus > a, 
.menu-item > a:focus,
.menu-item.child-has-focus > a, 
.menu-item.active-trail:focus {
	background-color: #7BA1CD;
}
	@media only screen and (min-width: 43.75em) {
		.menu-item:hover > a, 
		.menu-item:focus > a, 
		.menu-item.child-has-focus > a, 
		.menu-item.active-trail:hover > a, 
		.menu-item.active-trail:focus {
			background: #35475B;
			background-image: none;
			-webkit-box-shadow: 0 3px 0 0 #35475B;
			-moz-box-shadow: 0 3px 0 0 #35475B;
			box-shadow: 0 3px 0 0 #35475B;
			color: #ffffff; 
			font-weight: 900;
			text-shadow: none;
		}
	}

.menu-item:hover .sub-menu, 
.menu-item:focus .sub-menu, 
.menu-item.child-has-focus .sub-menu {
	 
}
	@media only screen and (min-width: 43.75em) {
		.menu-item:hover .sub-menu, 
		.menu-item a:focus + .sub-menu, 
		.menu-item .sub-menu:focus,
		.menu-item.child-has-focus .sub-menu, 
		.sub-menu.has-focus {
			top: 100%;
			left: 0;
			margin-right: -1px; 
		}
	}
  
.menu-item .sub-menu a, 
.menu-item .sub-menu a, 
.menu-item.child-has-focus .sub-menu a {
	font-weight: normal;
	color: #35475B;
	text-align: left;
	text-shadow: none;
	text-transform: none;
}

.menu-item:hover .sub-menu a, 
.menu-item:focus .sub-menu a, 
.menu-item.child-has-focus .sub-menu a {
	font-weight: normal;
	color: #35475B;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none; 
	text-shadow: none;
}

.menu-item.active-trail .menu-item.active a {
	font-weight: 900; 
}
	@media only screen and (min-width: 43.75em) {
		.menu-item .sub-menu a:hover,
		.menu-item.active-trail .menu-item.active a {
			font-weight: 900; 
			background-color: transparent;
		}

	}

.ui-toggle-button {
	background-color: #35475B;
	background-color: #8BB1DD;
	border: 0;
	box-shadow: none;
	color: #ffffff;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-weight: normal; 
	margin: 0.25em;
	padding: 0.1em;
	position: absolute;
	right: 0.5em;
	top: 0.65em;
	z-index: 99;
}
	@media only screen and (min-width: 43.75em) {
		.ui-toggle-button {
			display: none;
			left: -999em;
			position: absolute; 
			visibility: hidden;
		}
	}

.active-trail > .ui-toggle-button {
	background-color: #35475B;
}

.fontface .ui-toggle-button:before {
	color: #ffffff;
	content: "\f055";
	font-family: FontAwesome;
	font-size: 1.25em;
	line-height: 1;
	position: absolute;
	right: 0.2em;
	text-indent: 0;
	top: 0.1em;
}
.fontface .active-trail > .ui-toggle-button:before {
	color: #ffffff;
}

.fontface .ui-toggle-button {
	background-color: transparent;
	height: 1.5em;
	text-indent: -999em;
	width: 1.5em;
}

.fontface .ui-toggle-button[data-text="open"]:before {
	content: "\f057";
}
.fontface .ui-toggle-button:hover,
.fontface .ui-toggle-button:focus,
.fontface .ui-toggle-button:active {
	background-color: transparent;
}


.footer .sub-menu {
	display: none; 
}

.sub-menu {
	clear: both;
	left: -999em;
	list-style: none;
	margin: 0;
	min-width: 12.5em;
	padding: 0.25em 0; 
	position: absolute;
	top: -999em;
	width: 100%;
	background: rgba(183,208,232,0.95);
	border: 1px solid #8BB1DD; 
}

.sub-menu > .menu-item {
	border: 0;
	padding: 0;
	display: block; 
	text-align: left;
}

.sub-menu > .menu-item a {
	background: none; 
	border: none;
	font-size: 1em;
	display: block;
	padding: 0.25em 1em; 
}

.sub-menu > .menu-item a:focus {
	background-color: #7BA1CD;
}

.sub-menu[aria-expanded="true"] {
	left: 0;
	position: relative;
	top: inherit;
}
	@media only screen and (min-width: 43.75em) {
		.sub-menu[aria-expanded="true"] {
			left: inherit;
			position: absolute;
			top: inherit;
		}
	}

.sub-menu[aria-expanded="false"] {
	display: none; 
}
	@media only screen and (min-width: 43.75em) {
		.sub-menu[aria-expanded="false"] {
			display: block;
		}
	}


/* /navigation styles */


/* footer styles */

#footer {
	background-color: #26435e;
	color: #ffffff;
	padding-top: 3em;
	padding-bottom: 5em;
}

#footer a:link, 
#footer a:visited {
	color: #ffffff;
	text-decoration: none;
}
#footer a:hover {
	color: #B7D0E8;
	text-decoration: none;
}

.footer-contact {
	padding-bottom: 1em;
	width: 100%;
}
	@media only screen and (min-width: 43.75em) {
	    .footer-contact {
		    float: left;
		    width: 50%;
	    }
	}

.footer-contact p {
	font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
}

.footer-contact .name {
	font-weight: bold;
}

.top-link {
	font-style: italic;
	font-weight: 300;
}

.footer-contact .name {
	font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: 900;
}

.nav-footer {
	float: left;
	width: 50%;
}
	@media only screen and (min-width: 43.75em) {
	    .nav-footer {
		    width: 30%;
	    }
	}

.nav-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-footer a {
	font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
	font-size: 1.25em;
	line-height: 1.5; 
}

.footer-social-links {
	float: left;
	width: 50%;
}
	@media only screen and (min-width: 43.75em) {
	    .footer-social-links {
		    width: 20%;
	    }
	}

.footer-social-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-social-links a {
	font-size: 1.25em;
	font-weight: 300;
	line-height: 1.5;
}

/* /footer styles */

/* content area styles */
.content-area {
    padding-bottom: 5em;
}
.home .content-area h1 {
	margin: 0.25em auto 0.5em auto;
	max-width: none;
	text-align: center;
}

.site-section-name {
	color: #494949;
	font-size: 1em;
	margin: 0.75em 0 -1.75em 0;
	max-width: none;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}

.section-header {
	border-bottom: solid 1px #8BB1DD;
	font-size: 1.125em;
	font-variant: small-caps;
	max-width: 38.22222222222222em;
}
	@media only screen and (min-width: 81.25em) {
	    .section-header {
		    max-width: 43em;
	    }
	}

.intro {
	font-size: 1.25em;
	max-width: 38.2562em;
}

.byline {
	color: #919191;
	font-size: 0.875em;
	font-weight: 300;
	margin: 0 auto 1em auto;
	max-width: 34.4em;
}
	@media only screen and (min-width: 43.75em) {
	    .byline {
		    font-size: 1em;
		    max-width: 36em;
	    }
	}
	@media only screen and (min-width: 81.25em) {
	    .byline {
		    font-size: 1.25em;
		    max-width: 38.75em;
	    }
	}
.byline:before {
	content: 'by ';
	font-style: italic;
}

blockquote {
	width: 85%;
	margin: 0 auto 1em auto; 
	font-size: 2em; 
	line-height: 1.4em; 
	font-family: "Roboto", Helvetica, Arial, sans-serif; 
	font-style: normal; 
	font-weight: 100;
	position: relative;
}

blockquote:before {
	content: "\201C";
	font-size: 2em;
	font-style: italic;
	font-weight: 900;
	color: #9f9f9f;
	position: absolute;
	top: 0;
	left: -0.5em;
    
}

blockquote:after {
	content: "\201D";
	font-size: 2em;
	font-style: italic;
	font-weight: 900;
	color: #9f9f9f;
	position: relative;
	bottom: -0.2em;
	right: -0.2em; 
	display: inline;
    line-height: .2em;
}
	@media screen and (min-width: 43.75em) { 
		
		blockquote {
			font-size: 3em; 
			font-weight: 100;
			margin: 0 -15% 1em -10%; 
			position: relative;
			width: 125%;
		}
		blockquote:before {
			left: -0.5em;
		    
		}	
		
		blockquote.left, 
		blockquote.right {
			font-weight: bold;		
			width: 50%;
		}
		blockquote.left {
			float: left; 
			margin-right: 3.5%;
			margin-left: -2em;
			padding-left: 1em;
		}
		
		blockquote.right {
			float: right; 
			margin-left: 3.5%; 
			margin-right: -2em;
			padding-right: 1em;
		}
		
		blockquote.left:before, 
		blockquote.right:before {
			left: -0.1em;
		    
		}	
	}

/* END BLOCKQUOTE styles */

/* Initial Cap styles */
.article-detail.initial p:first-of-type:first-letter {
	font-size: 4em; 
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-weight: 900;
	line-height: 0.9em; 
	float: left; 
	padding-right: 0.15em; 
	
}

.lt-ie9 .article-detail.initial footer + p:first-letter {
  font-size: 4em; 
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 900;
	line-height: 0.9em; 
	float: left; 
	padding-right: 0.15em; 	
}
	@media screen and (min-width: 43.75em) { 
		.article-detail.initial p:first-of-type:first-letter { 
			font-size: 5em;
		}
		.lt-ie9 .article-detail.initial footer + p:first-letter { 
			font-size: 5em;
		}
	}
	
/* First-line styles */
p.first-line:first-line {
	font-size: 1.1em;
	font-weight: bold;
}

.font-notes {
	float: right;
	padding-bottom: 2em;
	width: 34vw;
	padding-left: 2vw;
}

.font-notes .download-amount {
	font-weight: 100;
	font-size: 16vw;
	line-height: 1;
}

.font-notes .little-k {
	font-size: 10vw;
}

.font-notes em {
	font-weight: 300;
	font-size: 1em;
}
	@media only screen and (min-width: 43.75em) {
	    .font-notes em {
		    font-size: 1.5em;
	    }
	}

/* /content area styles */




/* figure styles */
figure {
	position: relative;
	margin-bottom: 1em;
}

figure.small {
	width: 50%;
	-webkit-transition: width linear 0.2s;
	-moz-transition: width linear 0.2s;
    transition: width linear 0.2s;

}
	@media only screen and (min-width: 25em) {
	    figure.small {
		    width: 33%;
	    }
	}
	@media only screen and (min-width: 43.75em) {
	    figure.small {
		    width: 25%;
	    }
	}
	@media only screen and (min-width: 56.25em) {
	    figure.small {
		    width: 25%;
	    }
	}
	@media only screen and (min-width: 71.875em) {
	    figure.small {
		    width: 30%;
	    }
	}
	@media only screen and (min-width: 81.25em) {
	    figure.small {
		    width: 33%;
	    }
	}

figure.circle {
	-webkit-shape-outside: circle();
    shape-outside: circle();
    /* shape-box is not supported yet, but this is the syntax that should work when it is */
    -webkit-shape-box: content-box;
    shape-box: content-box;
}
figure.circle img {
	border-radius: 50%;
}
figure.left {
	float: left;
	margin-right: 1em;
}
figure.right {
	float: right;
	margin-left: 1em;
}
figure.left.hang-50 {
	margin-left: 0;
}
figure.right.hang-50 {
	margin-right: 0;
}
	@media only screen and (min-width: 43.75em) {
	    figure.left.hang-50 {
		    margin-left: -12.5%;
		    /* below compensates for lack of support for 'shape-box: content-box' */
		    -webkit-shape-outside: polygon(35% 0, 75% 15%, 95% 35%, 100% 50%,95% 65%,75% 85%, 35% 100%);
		    shape-outside: polygon(35% 0, 75% 15%, 95% 35%, 100% 50%,95% 65%,75% 85%, 35% 100%);
	    }
	    figure.right.hang-50 {
		    margin-right: -12.5%;
		    /* below compensates for lack of support for 'shape-box: content-box' */
		    -webkit-shape-outside: polygon(50% 0, 15% 15%, 5% 35%, 0 50%,5% 65%,15% 85%, 50% 100%);
		    shape-outside: polygon(50% 0, 15% 15%, 5% 35%, 0 50%,5% 65%,15% 85%, 50% 100%);
	    }
	}

figcaption {
	color: #a1a1a1;
}
  @media (min-width: 43.75em) {
    figcaption.right-side {
      position: absolute;
      left: 100%;
      top: 100%;
      width: 55%;
      -moz-transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
      transform-origin: 0 0; 
    } 
  }

/* /figure styles */