/* font webkit */
@font-face {
    font-family: 'FranklinGothicMediumRegular';
    src: url('framd-webfont.eot');
    src: url('framd-webfont.eot?#iefix') format('embedded-opentype'),
         url('framd-webfont.woff') format('woff'),
         url('framd-webfont.ttf') format('truetype'),
         url('framd-webfont.svg#FranklinGothicMediumRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* default */
* { box-sizing: border-box }
html { width: 100%; height: 100%; border: none; margin: 0; padding: 0; background-color: #FFF }
body { width: 100%; margin: 0; padding: 0; background-color: #E9E9E9; font-family: Arial, Helvetica, sans-serif }
img { border: none; outline: none }
a, a:visited { color: #AC3520; text-decoration: none; outline: none; border: none; margin: 0 }
a:hover, a:visited:hover { color: #DB543C; text-decoration: none; outline: none; border: none; margin: 0 }
.italics { font-style: italic }


/* layouts, titles, text */
.mainwrapper { width: 100%; height: 100%; background-color: #FFF }
.contentouterwrapper { width: 100%; height: auto; padding-bottom: 50px }
.contentinnerwrapper { width: 88%; height: auto; margin: 0 auto 0 auto }
.content-body { width: 74%; height: 100%; margin-top: 50px; float: left }
.bodytext { font-size: 22px; font-family: Arial; line-height: 170%; text-align: justify }
.bodytextsmall { font-size: 16px; font-family: Arial; line-height: 24px; text-align: justify }
.welcometitle {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	color: #397DBB;
	line-height: 28px;
	font-size: 24px;
	text-transform: uppercase;
	width: 90%;
	padding: 15px 0 15px 0; 
	}
.contentstripouterwrapper { width: 84%; height: auto; margin: 0 auto 0 auto }
.contentstripinnerwrapper { height: auto; margin: 40px 0 40px 0; padding-bottom: 20px; float: left }
.contentstriptext {
	font-size: 25px; font-family: Arial, Helvetica, sans-serif;
	line-height: 40px;
	letter-spacing: 1px;
	text-align: justify
	}


/* flex wrappers */
.flex-outer-wrapper { width: 100%; min-height: 350px; height: auto }
.flex-inner-wrapper { width: 86%; height: 100%; margin: 0 auto 0 auto; padding: 50px 0 }
.flex-grid-3, .flex-grid-4 {
	width: 100%;
	margin: 0 auto 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row;
	}
.flex-grid-3 .col { width: 32%; min-width: 340px; height: 353px }
.flex-grid-4 .col { width: 24%; min-width: 270px; height: 353px }
.col { height: 300px; flex: 1; margin: 50px 0 }
@media (max-width: 400px) {
  .flex-grid-3, .flex-grid-4 { display: block; }
  .flex-outer-wrapper, .flex-inner-wrapper { width: 100% }
  .flex-grid-3 .col, .flex-grid-4 .col { min-width: 100% }
}
@media (min-width: 1920px) {
  .flex-inner-wrapper { width: 75% }
}



/* top header */
.topheaderwrapper { width: 100%; min-height: 160px; padding: 50px 0 20px 0; background-color: #FFF }
.topheadercontent { margin: 20px auto 0 auto; width: 84%; height: auto }
.headersmalltext { width: 80%; margin: 0 auto 0 auto; padding-top: 2px; text-align: right }
.headersmalltext a, .headersmalltext a:visited {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
	color: #F4F4F4;
	position: relative; top: 7px
	}
.small-menu { display: none; float: left }
.small-menu i { font-size: 26px; color: #FFF; position: relative; top: 4px }

/* images */
.bannerimage { width: 100%; height: 500px; background-size: cover; background-position: center; overflow: hidden }

/* bullet links */
.bulletlinkswrapper {
	width: 20%; height: 100%;
	margin: 135px 0 0 5%; padding-left: 30px;
	float: left;
	border-left: dotted 1px #999999
	}
.bulletlinks {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	text-transform: uppercase;
	color: #AC3520;
	line-height: 16px;
	}

/* more resources */
.more-resources-wrapper { width: 100%; height: auto; background-color: #49688D }
.more-resources { width: 86%; height: auto; margin: 0 auto 0 auto; padding: 20px 0 60px 0 }
.more-resources-img { margin: 40px 0 0 40px; min-width: 340px; width: 25%; height: 353px; float: left }

/* awards */
.awards-wrapper { width: 100%; height: auto; background-color: #49688D }
.awards { width: 80%; height: auto; margin: 0 auto 0 auto; padding: 20px 0 40px 0 }
.awards-img { margin: 40px 0 0 70px; width: 200px; height: 264px; border: solid 6px; border-color: #7E9ABC; float: left; }
.awards-img-left { margin: 40px 0 0 0; width: 200px; height: 264px; border: solid 6px; border-color: #7E9ABC; float: left; }

/* affiliations */
.affiliations-wrapper { width: 100%; padding: 20px 0 80px 0; height: auto; background-color: #FFF }
.affiliations-inner-wrapper { width: 86%; height: auto; margin: 0 auto 0 auto; padding: 50px 0 20px 0 }
.affiliations-item { float: left }

/* register form --------------------------------------------------------------------------------------------------------*/
.registerforminput {
	width: 60%; height: 51px; max-width: 500px;
	margin-top: 3px; padding: 10px;
	background-color: #fff;
	border: solid 1px #cfcfcf;
    font-size: 18px;
	letter-spacing: 1px;
    font-family: Arial, Helvetica, sans-serif;
    color: #44494b;
	float: left
	}
.registerforminput:focus, .contactformtextbox:focus { border: 1px solid #0097cf }
.registerformbuttonbox {
	width: 20%; height: auto;
	padding: 0;
	float: left
	}
.registerformbutton {
	width: 140px; height: auto;
	margin: 3px 0 0 5px; padding: 17px 5px 18px 5px;
	background-color: #4f7eb0;
    font-size: 14px; letter-spacing: 1px;
	text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
	color: #FFF;
	text-align: center;
	-webkit-transition: all 0.3 ease;
	transition: all 0.3 ease;
	cursor: pointer;
	border: 0; outline: 0;
	}
.registerformbutton:hover, .registerformbutton:active, .registerformbutton:focus {
  background-color: #26598c;
}


/* contact form */
.contactform {
	height: auto;
	float: left;
	position: relative; left: 40px;
	width: 50%
	}
.contactformlabel {
	font-family: Verdana;
	font-variant: small-caps;
	margin: 5px 0px 0px 0px;
	font-size: 16px;
	color: #647C03;
	line-height: 24px;
	padding: 5px 0 5px 0;
	width: 45%;
	float: left
	}
.contactformlabel2 {
	font-family: Verdana;
	font-variant: small-caps;
	margin: 5px 0px 0px 0px;
	font-size: 16px;
	color: #647C03;
	line-height: 24px;
	padding: 5px 0 5px 0;
	width: 45%;
	float: left;
	margin-left: 6%
	}
.contactformlabel3 {
	font-family: Verdana;
	font-variant: small-caps;
	margin: 5px 0px 0px 0px;
	font-size: 16px;
	color: #647C03;
	line-height: 24px;
	padding: 5px 0 5px 0;
	float: left;
	width: 96.2%;
	}
.contactforminput {
	width: 100%;
	height: 42px;
	padding: 5px 4px 2px 5px;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: -1px;
	color: #7D7D7D;
	border: solid 2px;
	border-color: #4691FF/*#E1E1E1*/;
	background-color: #FBFBFB;
	font-size-adjust: none;
	font-family: Arial
	}
.contactformbuttonlabel {
	width: auto;
	float: right;
	margin: 10px 4% 0 0;
	}
.contactformbutton, .contactformbutton:visited	{
	margin: 0px;
	width: 120px;
	border: solid 1px;
	border-color: #BEBEBE;
	padding: 12px 10px 12px 10px;
	font-variant: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	background-color: #F1F1F1
	}
.contactformbutton:hover, .contactformbutton:visited:hover {
	text-decoration: none;
	text-transform: none;
	border: solid 1px #1C33D5;
	background-color: #1C33D5;
	color: #FFF;
	background: url(/images/bg-button-blue.png) top center
	}

/* executives */
.executivecontentwrapper {
	width: 84%; height: auto; min-height: 360px;
	margin: 0 auto 0 auto;
	overflow: hidden
	}
.executivecontent { width: 65%; margin-right: 20px; float: left }
.executivename {
	font-family: Helvetica, sans-serif; font-size: 30px; font-weight: bold; letter-spacing: -1px; color: #333;
	height: auto; margin: 30px 0 0 20px; padding-bottom: 10px
	}
.executivetitle { font-family: 'Open Sans', sans-serif; font-size: 16px; color: #397DBB;
	margin-left: 20px; padding-bottom: 20px
	}
.executivetext {
	font-family: Helvetica, sans-serif; font-size: 18px; color: #777; line-height: 24px;
	height: auto; margin-left: 20px; padding-bottom: 20px
	}
.executiveimage {
	width: 30%; min-height: 360px; height: 100%; float: left;
	background-size: contain
	}


/* community */
.communitylink {
	width: 140px; height: 120px; float: left; margin: 20px;
	background-position: center; background-repeat: no-repeat
	}

/* jobs */
.job-name {
	font-family: Helvetica, sans-serif; font-size: 30px; font-weight: bold; letter-spacing: -1px; color: #333;
	height: auto; margin: 30px 0 0 0; padding-bottom: 10px
	}
.job-title { font-family: 'Open Sans', sans-serif; font-size: 16px; color: #397DBB;
	margin-left: 0; padding-bottom: 10px
	}
.job-text {
	font-family: Helvetica, sans-serif; font-size: 18px; color: #777; line-height: 24px;
	height: auto; margin-left: 0; padding-bottom: 20px
	}

/* image gallery */
.gallery { width: 100%; height: 380px; padding-top: 66px; }
.gallery > div { position: relative; float: left; padding-left: 50px }
.gallery > div > img { display: block; width: 300px; height: 250px; border: solid 6px; border-color: #7E9ABC; transition: .3s transform; transform: translateZ(0); /* hack */ }
.gallery > div:hover { z-index: 1; }
.gallery > div:hover > img { transform: scale(1.5,1.5); transition: .3s transform; }
.cf:before, .cf:after { display: table; content: ""; line-height: 0; }
.cf:after { clear: both; }
.gallery-img { }
.gallery-img-left { padding-left: 0 }


/* footer */
.footerouterwrapper {
	overflow: hidden;
	margin: 0; padding: 0 0 40px 0;
	width: 100%; height: auto;
	background-color: #E9E9E9;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	color: #F0F0F0;
	text-decoration: none;
	border-top: #789ab8 solid 2px;
	/*border-top: solid 3px #3D5574*/
	}
.footerinnerwrapper {
	width: 85%; height: auto;
	margin: 0 auto 0 auto;
	padding: 40px 0 20px 0
	}
.footernavcolumnwrapper { width: 60%; /*min-width: 640px;*/ height: auto; float: left }
.footernavcolumn { width: auto; float: left; max-width: 100%; overflow: hidden }
.mleft-40 { margin-left: 40px }
.mleft-60 { margin-left: 60px }
.ptop-40 { padding-top: 40px }
.footernavwrapper {
	width: auto; min-height: 25px;
	margin: 0 0 16px 0;
	font-size: 15px;
	line-height: 25px;
	}
.footernavwrapper a, .footernavwrapper a:visited {
	font-family: Arial, Helvetica, sans-serif;
	color: #5B5B5B;
	font-size: 11px;
	font-weight: normal;
	line-height: 15px
	}
.footernavwrapper a:hover { color: #DB543C }
.footertitle, .footertitle a, .footertitle a:visited { font-family: 'Open Sans', sans-serif; font-size: 15px; color: #5B5B5B }
a.footeractive, a.footeractive:visited, a.footeractive:hover, .footeractive {
	border-bottom: 1px dashed;
	cursor: default;
	line-height: 15px;
	color: #CC3F26;
	font-weight: bold
	}
.footertext {
	margin: 4px 0 0 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-transform: uppercase;
	color: #5B5B5B;
	}
.footercontactwrapper { width: auto; min-width: 300px; float: right; margin-left: 0px }
.footercontactimage { margin: 0px 0 0 0 }
.footercontactimage img {  }
.footercontactlogo { margin: 40px 0 0 0 }
.footercontactlogo img {  }

/* contact info */
.contactinfowrapper { width: 100%; height: auto; padding: 50px 0 50px 0 }
.contactinfosection {
	width: 45%; height: auto;
	border-bottom: solid 1px #ccc; border-right: solid 1px #ccc;
	padding: 0 5px 5px 0;
	float: left
	}
.contactinfobg {
	width: 100%; height: auto;
	float: left;
	background: white url(/images/bg/bg-wave-pattern-white.png) repeat;
	padding: 15px 15px 15px 25px
	}


/* ---------------------------------------------------- effects ---------------------------------------------------------- */
.fade-in-effect { -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s }
.transition-effect { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@-moz-keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@-webkit-keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
@-ms-keyframes fadein { from { opacity: 0 } to { opacity: 1 } }​
@-o-keyframes fadein { from { opacity: 0 } to { opacity: 1 } }​


/* projects */
.projectcard {
	width: 100%; min-height: 234px; height: auto;
	padding: 12px;
	background-color: #f8f7f9;
	border-bottom: solid 3px;
	border-color: #9EC2E2;
	overflow: hidden
	}
.projectcardcontent { float: left; width: 55%; height: auto; overflow: hidden }
.projectcardtitle {
	font-family: Helvetica, sans-serif; font-size: 27px; font-weight: bold; letter-spacing: -1px; color: #333;
	height: auto; margin-left: 10px; padding-bottom: 20px
	}
.projectcardlabel {
	font-family: Helvetica, sans-serif; font-size: 18px; font-weight: bold; letter-spacing: -1px; color: #777;
	height: auto; margin-left: 10px
	}
.projectcardtext {
	width: 100%; height: auto;
	font-family: Helvetica, sans-serif; font-size: 18px; color: #777;
	margin-left: 10px; margin-right:  25px;
	overflow: hidden	
	}
.project-detail-title {
	font-family: 'Open Sans', sans-serif; font-size: 16px; color: #397DBB;
	margin-left: 20px; padding-bottom: 20px;
	margin: 0;
	text-transform: uppercase;
	}
.project-detail-bg {  }

.testimage {
	display: block; position: relative; right: 0px; width: 45%; height: 100%; min-height: 300px; overflow: hidden; }
.testimage img { width: 100%; max-width: 100% /*370px*/ }

/* ---------------------------------------------------- media queries ---------------------------------------------------- */
@media only screen and (min-width: 779px) { }
@media only screen and (min-width: 50em) { }
@media only screen and (max-width: 1800px) { }
@media only screen and (max-width: 1400px) { }
@media only screen and (max-width: 1200px) {
#header-logo { margin: 0 auto 0 auto; float: left }
#header-tagline { display: none }
}
@media only screen and (max-width: 1075px) {
#header-logo a img { width: 96% }
#floating_bar { display: none }
#top-header-icon { display: none }
.bannerimage { height: 300px }
.contentouterwrapper { padding-bottom: 0px }
.contentinnerwrapper, .contentstripouterwrapper { width: 100%; margin: 0; text-align: start }
.content-body, .contactinfowrapper, .contentstripinnerwrapper { display: block; width: 100%; margin: 10px auto 10px auto; padding: 0 }
.bodytext, .contentstriptext {
	display: block;
	width: 90%;
	margin: 10px auto 10px auto; padding: 0;
	font-size: 18px;
	line-height: 150%;
	text-align: start
	}
.project-detail-title { display: block; width: 90%; margin: 10px auto 10px auto; padding: 0; text-align: start }
.project-detail-bg { display: none }
.welcometitle { font-size: 20px; margin: 0 auto 0 auto }
.topheaderwrapper { padding-top: 70px;  }
.bulletlinkswrapper {
	display: block;
	width: 100%; height: auto;
	margin: 20px 0 0 0; padding: 40px 0 20px 0;
	border-left: none; /*border-top: solid 10px #ccc;*/
	background-color: #f2f2f2
	}
.bullet-links-inner-wrapper {  margin: 0 auto 0 auto; width: 90% }
.bulletlinks { font-size: 18px; line-height: 120% }
.gallery-img-left, .gallery-img { display: block; float: none; padding: 20px 0 20px 0}

.footernavwrapper { width: 95%; display: block }
.footernavcolumnwrapper { width: 95%; display:block; float: none; overflow: hidden }
.footernavcolumn { width: 95%; display:block; float: none; overflow: hidden; padding: 0; margin: 0 }
.footercontactwrapper { width: 98%; overflow: hidden }
.contactinfosection, .contactform { display: block; width: 100% }
.contactform { width: 80%; padding: 20px 0 20px 0 }
.contactformlabel, .contactformlabel2, .contactformlabel3 { width: 90%; margin: 20px 0 0 0 }
.contactforminput { width: 100%; margin: 0 }
.contactformbuttonlabel { width: 90%; float: none; margin-top: 20px; }
.contactformbutton { width: 100% }
}
@media only screen and (max-width: 768px) {
.more-resources-img { margin-left: 0 }
.awards-img, .awards-img-left { margin-left: 0; display: block; float: none }
.affiliations-inner-wrapper { width: 95%; padding: 20px 10px 20px 10px }
.footercontactimage, .footercontactlogo { width: 100%; margin-top: 40px }
.footercontactimage img, .footercontactlogo img { width: 90% }
.small-menu { display: inline-block }
.executiveimage { display: none }
.testimage { display: block; width: 100%; position: relative; top: 0px; left: 10px; right: 0px; margin: 0; padding: 0 }
.testimage img { max-width: 100% }
.projectcardcontent, .executivecontentwrapper { width: 100% }
.executivecontent { width: 90% }
a.footeractive, a.footeractive:visited, a.footeractive:hover, .footeractive { line-height: 10px }
.footernavwrapper a, .footernavwrapper a:visited { line-height: 10px }
.footernavwrapper .footertitle a { line-height: 10px }
.footernavwrapper a, .footernavwrapper a:visited { line-height: 10px }

.mleft-40, .mleft-60 { margin-left: 0px }
.ptop-40 { padding-top: 40px }
}
@media only screen and (max-width: 480px) { }