/**
 * style.css
 * National Cities Fund styles
 * 
 * @version 1.0
 * @since 1.0
 */


/* HTML Rest, including HTML5 Resets: http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain) | Add { position: relative } to set most everything with a relative position | Ed Nailor via Chris Coyer: http://css-tricks.com/things-it-might-be-funuseful-to-try-the-universal-selector-on/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; position: relative; } ol, ul { list-style: none; position: relative; } blockquote, q { quotes: none; position: relative; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; position: relative; }
/* Micro Clearfix: http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; }


:root {

	--site-width: 85vw;
	--site-width-max: 1600px;
	--site-width-full: 100%;

	--font-size-1rem: 1rem;
	--font-size-smaller: 0.75em;
	--font-size-larger-1: 1.125em;
	--font-size-larger-2: 1.25em;
	--font-size-larger-3: 1.5em;
	--font-size-larger-4: 2em;

	--color-1: #f5f6f7; /* gray 1 */
	--color-6: #5b6670; /* gray 2 */
	--color-2: #49525b; /* gray 3 */
	--color-3: #006bb6; /* blue 1 */
	--color-7: #021d41; /* blue 2 */
	--color-4: #FFFFFF; /* white */
	--color-5: #212529; /* black */

	--gradient-1: linear-gradient(0,#e6ecf6 0,rgba(255,255,255,0) 100%); /* white to off-white */
}


.ir { visibility: hidden; height: 0; color: transparent; line-height: 0; overflow: hidden; }

.row { display: flex; align-items: center; flex-wrap: nowrap; margin: 0 auto; width: var(--site-width); max-width: var(--site-width-max); }
.row-full { width: 100%; max-width: none; }
.row-wrap { flex-wrap: wrap; }

.column {  }
.column-ns { width: auto; } /* ns: no size */
.column-1-1 { width: 100%; }
.column-1-2 { width: 50%; }
.column-1-3 { width: 33.3%; }
.column-1-4 { width: 25%; }
.column-1-5 { width: 20%; }
.column-2-3 { width: 66.67%; }
.column-2-5 { width: 40%; }
.column-3-4 { width: 75%; }
.column-3-5 { width: 60%; }
.column-4-5 { width: 80%; }

.align-left { justify-content: flex-start; }
.align-center { justify-content: center; }
.align-right { justify-content: flex-end; }
.alignself-left { justify-self: flex-start; }
.alignself-center { justify-self: center; }
.alignself-right { justify-self: flex-end; }

.align-top { align-items: flex-start; }
.align-bottom { align-items: flex-end; }
.align-middle { align-items: center; }

.textalign-left { text-align: left; }
.textalign-center { text-align: center; }
.textalign-right { text-align: right; }

*, .boxsizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.screen-reader-text { display: none; }
.hidden { visibility: hidden; }
.ir { height: 0; line-height: 0; color: transparent; }

html, body { min-height: 100%; }
body { font-family: 'Open Sans'; font-weight: 400; font-size: 1.125rem; line-height: 1.5em; color: var( --color-2 ); }

h1, h2, h3, h4 { text-transform: uppercase; font-weight: 700; margin-bottom: 1.25em; line-height: 1.25em; }
h2 { font-size: 2em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.125em; }
p, li { line-height: 1.5em; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
strong, b { font-weight: 700; }
i, em { font-style: italic; }

/** Buttons **/
.button { display: inline-block; vertical-align: middle; padding: 0 2em; font-weight: 600; color: var(--color-4); background-color: var(--color-3); border-radius: 2em; border: 1px solid var(--color-4); transition: .3s all; }
.button:hover { text-decoration: none; color: var(--color-3); background-color: var(--color-4); border-color: var(--color-3); }
.button-normal { font-size: 0.875em; line-height: 2.14285714em; }
.button-large { font-size: 1.125em; line-height: 2.778em; filter: drop-shadow(0 6px 6px rgba(0, 61, 166, 0.3)); border-color: transparent; }

.row-contact-button .button { margin-top: 2em; }


/** Containers **/
.container { padding: 3.75em 0; }
.content-area :is(p,li,div) { text-align: justify; }
.content-area :is(h1,h2,h3,h4,h5,h6) { text-align: center; }


/** Header **/
.header-pre { background: var(--gradient-1); padding: 0.75em 0; }
.header-main { box-shadow: 0 7px 14px rgba(0,61,166,0.1); position: relative; z-index: 100; background: var(--color-4); padding: 0; }
.sticky-nav .header-main { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }


/** Footer **/
.footer-pre { padding: 0.625em 0; background: var(--gradient-1); }
.footer-main {  padding: 3.75em 0; }


/** Utility menu **/
#nav-utility li { display: inline-block; vertical-align: middle; }
#nav-utility a { display: block; font-size: 0.75em; line-height: 1.666; padding: 0 24px; border-right: 1px solid #bac0c4; }


/** Search **/
#searchform > * { display: inline-block; vertical-align: middle; }
.search-input { display: inline-block; }
#searchform.active .search-input input { border: 2px solid transparent; border-bottom: 1px solid; width: 100%; }
.search-toggle:hover { cursor: pointer; }

.header-pre #searchform { margin-left: 1.5em; }
.header-pre #searchform .search-toggle { position: relative; z-index: 10; }
.header-pre #searchform .search-input { width: 0; overflow: hidden; opacity: 0; transition: width 0.3s ease, opacity 0.2s ease; white-space: nowrap; }
.header-pre #searchform.active .search-input { width: 190px; /* adjust as needed */ opacity: 1; }
.header-pre #searchform.active .search-input input { cursor: pointer; border: 2px solid transparent; border-bottom: 1px solid; width: 100%; font-family: 'Open sans'; padding: .25em .5em; color: #49525b; }
.header-pre #searchform.active .search-input input::placeholder { font-style: italic; }

.search-result .block-headline a { text-decoration: none; }
.search-result .block-headline h2 { padding: 1.75em; margin: 0; transition: .2s all; }
.search-result .block-headline a:hover > h2 { background: #ebf0f8; }

.search-results-header { padding-bottom: 0; }
.search-no-results .searchform .search-input { width: calc( 100% - 25px ); }
.search-no-results .searchform input { width: 100%; padding: .5em 1em; color: #1e6bb6; }


/** Primary menu **/
#nav-mobile { display: none; }
#nav-primary ul { display: flex; justify-content: center; }
#nav-primary li { position: relative; font-weight: 700; }
#nav-primary a { display: block; text-transform: uppercase; padding: 20px 25px 21px; color: var(--color-2); background-color: transparent; transition: all .3s; 	text-transform: uppercase; }
#nav-primary li:hover > a { text-decoration: none; color: var(--color-4); background-color: var(--color-3); }
#nav-primary li.placeholder-menu-item > a { display: none; }
#nav-primary .sub-menu { position: absolute; top: 100%; left: -9999px; min-width: 300px; width: fit-content; background-color: var(--color-4); box-shadow: 0 0 11px rgba(0,61,166,0.14); padding: 60px 30px; opacity: 0; transition: opacity .3s; }
#nav-primary li:hover > .sub-menu { left: 50%; transform: translateX(-50%); opacity: 1; }
#nav-primary .sub-menu li { flex-grow: 1; width: 25%; border-left: 1px solid #bac0c4; }
#nav-primary .sub-menu li:first-child { border-left: none; }
#nav-primary .sub-menu li > a { font-weight: 900; font-size: 0.875em; padding: 0 30px; margin-bottom: 10px; background-color: transparent; color: var(--color-2); }
#nav-primary .sub-menu .sub-menu { position: static; box-shadow: none; display: block; min-width: auto; width: auto; padding: 0; opacity: 1; transform: translateX(0) !important; }
#nav-primary .sub-menu .sub-menu li { display: block; border: none; width: auto; }
#nav-primary .sub-menu .sub-menu li > a { font-weight: 400; line-height: 1.25em; }
#nav-primary .sub-menu .sub-menu li:hover > a /*, #nav-primary .sub-menu .sub-menu li.current-menu-item > a*/ { color: var(--color-3); }


/** Container - Hero **/
.container-hero { padding: 0; background-repeat: no-repeat; background-position: center; background-size: cover; }
.container-hero .block-caption { padding: 4.0625em 1.5em; margin: 8vw 0; background-color: var(--color-2); color: var(--color-4); }
.container-hero .block-caption h1 { font-size: 2em; line-height: 1.25em; font-weight: 700; margin-bottom: 0; }

.container-hero .block-caption h2 { font-size: 1.5em; font-weight: 700; margin-bottom: 0; }


/** Container - intro **/
.container-intro { padding: 3.75em 0; }


/** Container - intro2 **/
.container-intro2 { background-color: var(--color-1); padding: 3.75em 0; margin-bottom: 1.25em; }


/** Block - Logo **/ 
.block-logo a { display: block; width: 170px; height: 60px; background-position: center; background-size: contain; background-repeat: no-repeat; }
.block-logo a:hover { text-decoration: none; }

.footer-pre .block-logo a { margin: 0 auto; }


/** Block - paragraph **/
.block-paragraph :is(p,ul) { margin-bottom: 2em; }
.block-paragraph li { position: relative; padding-left: 1.5em; }
.block-paragraph li:before { position: absolute; content: " "; top: 0.875em; left: 0; transform: translateY(-50%); width: 7px; height: 7px; background-color: var( --color-3); }


/** Block - breadcrumbs */
.block-breadcrumbs { padding: .625em 0; font-size: .875em; }
.breadcrumbs li:not(:first-child):before { content: "›"; position: absolute; left: 0; top: 0; }
.breadcrumbs li { display: inline-block; position: relative; }
.breadcrumbs li:not(:first-child) { padding-left: 0.875em; margin-left: 0.375em; }


/** Block - email **/ 
.block-email a { font-weight: 700; }
.block-email a:hover { text-decoration: none; }
.block-email i { transition: .3s all; }
.block-email a:hover i { transform: translateY(-50%); }


/** Block - map **/ 
.block-map a { font-weight: 700; }
.block-map a:hover { text-decoration: none; }
.block-map i { transition: .3s all; }
.block-map a:hover i { transform: translateY(-50%); }


/** Block - social **/
.block-social { margin: 3.75em 0 1.5em; }
.block-social a { font-size: 1.5625em; }
.block-social li { display: inline-block; vertical-align: middle; padding: 0 0.625em; }


/** Block - credits **/
.block-credits { margin-top: 2em; }
.block-credits ul { list-style: none; }
.block-credits li { position: relative; display: block; }
.block-credits a { border-bottom: 2px solid var(--color-3); font-size: 0.875em; }
.block-credits a:hover { text-decoration: none; }


/** Projects **/
.container-project-hero { padding: 0 0 3.75em; }
.container-project-intro { background-color: var(--color-1); padding: 3.75em 0; }
.container-project-content { padding: 3.75em 0; }
/*body:not(.button-alt-1) .container-project-content .button { background-color: var(--color-7); }
.container-project-content .button:hover { color: var(--color-7); background-color: color: var(--color-1);; border-color: var(--color-7); }*/

.column-project-highlights { padding-left: 3.75em; padding-right: 3.75em; }
.column-project-highlights p { font-size: 0.875em; }


/** Responsive **/
@media all and (max-width: 1359px){
	.container-hero .block-caption { padding-top: calc( 2.778em + 1px ); padding-bottom: calc( 2.778em + 1px ); }
	.column-project-highlights:first-child { padding-left: 0; padding-right: 1.875em; }
	.column-project-highlights:last-child { padding-right: 0; padding-left: 1.875em; }
}

@media all and (max-width: 960px){
	.align-center-q960 { justify-content: center; }
	.content-area .text-align-center-q960 :is(p,li,div) { text-align: center; }

	.row:not(.flex-tablet) { flex-wrap: wrap; justify-content: center; }
	.column:not(:has(.flex-tablet)):not(.column-ns) { width: 600px; max-width: 90%; }
	.column.column-project-highlights {  padding-left: 0;  padding-right: 0; }
	.container-hero .block-caption { padding-top: 1.25em; padding-bottom: 1.25em; margin: 14vw 0 2vw; }

	#nav-primary a { margin-top: 20px; padding-top: 10px; padding-bottom: 10px; }

	.block-logo { padding-top: 1em;  }
	.block-logo a { margin: auto;  }

	.footer-pre .column:not(:last-child) { margin-bottom: 1em; }
}

@media all and (max-width: 600px){
	.row-full-q960 { width: 100%; max-width: none; }

	#nav-utility, #nav-primary { display: none; }
	#nav-mobile { display: block; }

	#menu-mobile-menu { display: none; background-color: #e4e9f5; padding-top: 1px; margin-bottom: 2em; }
	.nav-mobile-active #menu-mobile-menu { display: block; }
	#menu-mobile-menu a { display: block; padding: .5em 1em; border: 1px dashed #FFF; margin: 3px; font-size: 0.875em; text-transform: uppercase; }
	#menu-mobile-menu ul { background-color: #d0d9ed; padding: .5em 1em; }
	#menu-mobile-menu ul a { font-size: 0.75em; margin-left: 0; margin-right: 0; }
	#menu-mobile-menu li.current-menu-item > a { color: #6178ab; background-color: #FFF; border-bottom: 0; }
	#menu-mobile-menu ul ul { background-color: #bbc6df; }

	.nav-mobile-icon { display: block; width: 0; height: 12px; margin: 1em auto; position: relative; }
	.nav-mobile-icon:before, .nav-mobile-icon:after { content: " "; position: absolute; z-index: 100; left: -20px; width: 40px; height: 3px; background-color: #d0d9ed; translate: .2s all; }
	.nav-mobile-icon:before { top: 0; }
	.nav-mobile-icon:after { bottom: 0; }
	.nav-mobile-active .nav-mobile-icon:before, .nav-mobile-active .nav-mobile-icon:after { left: -15px; width: 30px; }
	.nav-mobile-active .nav-mobile-icon:before { top: 50%; transform: rotate(45deg); }
	.nav-mobile-active .nav-mobile-icon:after { top: 50%; bottom: auto; transform: rotate(-45deg); }
}