@charset "UTF-8";
/* Web Solutions 4.0 Compatible */


body {
	background: #FFF;
}

body.slideNav {
	overflow: hidden;
}


/* HEADER ------------------------------ */
body>header {
	background: #FFF;
	display: contents;
	position: relative;
	z-index: 1;
}

body>header:before {
	background-color: #000;
	content: '';
	display: block;
	height: 100vh;
	left: 100vw;
	opacity: 0;
	position: fixed;
	top: 0;
	transition: left 0ms ease 200ms, opacity 200ms ease;
	width: 100vw;
	z-index: 3;
}

body.slideNav>header:before {
	left: 0;
	opacity: .5;
	transition: left 0ms ease 0ms, opacity 200ms ease;
}

body>header .wrap {
	display: contents;
	padding-inline: 0;
}

#brand {
	display: block;
	line-height: 0;
	margin: 0 auto;
	max-width: 12em;
	padding: 1em 0;
	width: 100%;
}

body>header #navContainer {
	background-color: var(--ws-lt-blue-4);
	border-left: 1px solid var(--ws-lt-blue-5);
	bottom: 0;
	left: 100%;
	max-height: 100vh;
	overflow: auto;
	position: fixed;
	text-align: left;
	top: 0;
	transition: left .3s ease;
	width: 75%;
	-webkit-overflow-scrolling: touch;
	z-index: 3;
}

body.slideNav #navContainer {
	left: 25%;
}

body>header #navContainer nav {
	display: inline;
}

body>header #navContainer ul {
	display: block;
	margin: 0;
	padding-left: 0;
	width: 100%;
}

body>header #navContainer li {
	border-top: 1px solid var(--ws-lt-blue-5);
	display: block;
	position: relative;
	width: 100%;
}

body>header #navContainer li li {
	border: 0
}

body>header #navContainer li.open {
	background: var(--ws-lt-blue);
}

body>header #navContainer li li.open {
	background: var(--ws-lt-blue-4)
}

body>header #navContainer a,
#navContainer .menu {
	background: transparent;
	border: 0;
	color: #000;
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 1.125em;
	font-weight: 400;
	line-height: 1.65;
	margin: 0;
	min-width: 0;
	padding: .5em 1rem;
	text-align: left;
	text-transform: none;
	width: 100%;
}

#navContainer .menu span {
	font-size: 1.75rem;
	line-height: 1;
	margin: 0 .125em 0 0;
	position: relative;
	top: .0625em;
}

#mainnav>ul>li.on>a {
	background-color: var(--ws-dk-blue);
	color: #fff;
}

#mainnav ul>li.on>a {
	background-color: var(--ws-dk-blue);
	color: #fff;
}

#mainnav ul>li>ul>li.on>a {
	background-color: var(--ws-blue);
	color: #FFF;
}

#mainnav .megamenu>div>ul>li>ul>li.on>a {
	color: #000;
}

body>header #navContainer li>button {
	background: transparent;
	border: 0;
	display: block;
	font-size: 1em;
	height: 2.75em;
	margin: 0;
	min-width: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: .125em;
	width: 2.75em;
	z-index: 1;
}

body>header #navContainer li li>button {
	top: -.25em;
}

body>header #navContainer li>button:before,
body>header #navContainer li>button:after  {
	background-color: var(--ws-dk-blue);
	content: '';
	display: block;
	height: 0.125rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform-origin: center center;
	width: 55%;
}

body>header #navContainer li.on>button:before,
body>header #navContainer li.on>button:after {
	background-color: var(--ws-lt-blue);
}

body>header #navContainer li>button:before {
	transform: translate(-50%, -50%) rotate(90deg);
}

body>header #navContainer li>button:after {
	transform: translate(-50%, -50%);
}

body>header #navContainer li.open > button:before {
	transform: translate(-50%, -50%) rotate(0deg);
}

body>header #navContainer li > button::before {
	transition: transform .2s ease;
}

body>header #navContainer ul :where(ul, .megamenu) {
	font-size: 1em;
	height: 0;
	overflow: hidden;
	transition: height .3s ease;
}

body>header #navContainer ul ul a {
	font-size: 1em;
	padding-block: .25em;
	padding-left: 2rem;
}


/* MEGEMENU */
#mainnav .megamenu>div>ul {
	display: block;
	height: auto;
}

#mainnav .megamenu h2 {
	font-size: 1.25em;
	margin-block: .5em;
	padding-left: 2rem;
}

#mainnav .megamenu>div>ul>li>a {
	padding-left: 2rem;
}

#mainnav .megamenu>div>ul>li>ul>li>a {
	padding-left: 3.5rem;
}

#mainnav .megamenu>div>ul>li a::before {
	background:none;
}


/* MOBILE NAV ------------------------------ */
#mobilenav {
	align-items: center;
	background-color: var(--ws-dk-blue);
	display: flex;
	justify-content: center;
	position: sticky;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 2;
}

#mobilenav :is(a, button) {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: #FFF;
	cursor: pointer;
	flex: 1 1 auto;
	font-family: 'Roboto', sans-serif;
	font-size: clamp(0.938em, 0.764em + 0.77vw, 1.125em);
	font-weight: 400;
	line-height: 2.25;
	padding: 0;
	text-transform: none;
	margin: 0;
	min-width: 0;
}

#mobilenav button svg {
	fill: #FFF;
	pointer-events: none;
	position: relative;
	top: .25em;
	width: 1em;
}



/* MAIN / TEXT ELEMENTS ------------------------------ */

main.interior .content {
	padding-top: .5em;
}

.twoCol, .threeCol, .resCol {
	columns: auto;
	column-rule: 1px outset rgba(0,0,0,.15);
	column-width: 13em;
}

.formTable, .formTable table {
	display: block;
	width: 100%;
}

.formTable tbody {
	display: block;
}

.formTable tr {
	display: block;
}

.formTable td {
	display: block;
	padding: 0;
	width: 100%;
}

.formTable :is(input:is([type="text"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"]), textarea) {
	margin-bottom: 1em
}

.formTable table td + td {
	padding-left: 0 !important;
}


/* Contact Form - table removed ----- */
.form-flex :where(.half, .third) {
	width: 100%;
}

.form-flex .quarter {
	width: calc(50% - .5em);
}


.photoright {
	margin: 0 0 .75em 1em;
}

.photoleft {
	margin: 0 1em .75em 0;
}


.highlight-content::after {
	background-image: url('/images/stripes-mobile.svg'), url('/images/stripes-mobile.svg');
}


/* SHARED ELEMENTS ------------------------------ */

/* COLORED BORDERS ----- */

.border-top::before,
.border-bottom::before {
	background: url('/images/stripes-mobile.svg') repeat-x center;
}



/* FOOTER ------------------------------ */
body>footer nav a+span:before {
	content: "|";
	margin: 0 0.5em;
}

.footer-top {
	text-align: center;
}

.footer-middle {
	text-align: center;
}

.footer-middle .social {
	justify-content: center;
	display: flex;
}

.footer-middle li {
	text-align: left;
}

.footer-middle .wrap>div:not(:last-of-type) {
	margin: 0 0 2.5em;
}

.footer-bottom {
	text-align: center;
}

.footer-bottom .wrap {
	display: flex;
	flex-direction: column;
}

.footer-bottom nav {
	margin-block: .5em;
}

.footer-bottom nav a {
	display: inline-block;
	padding-block: .125em;
}

#exposure {
	order: 3;
}



/* PAGEHEADER ------------------------------ */
.pageheader {
	background-image: linear-gradient(90deg, rgba(228,234,242,0) 0%, #E4EAF2 50%, rgba(228, 234, 242, 0) 100%), url('/images/pageheader-mobile.svg');
	margin-top: .375em;
}


.pageheader::after {
	background: url('/images/stripes-mobile.svg') repeat-x center;
	bottom: 100%;
	content: '';
	height: 0.25em;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 1;
}


/* CTA RIBBON  ------------------------------ /
- Homepage ribbon 4 + 6
- Standard interior ribbon 3
- Programs & Services ribbon 3
- Get Involved ribbon 3
- About ribbon 5 + 6
*/
.cta {
	display: flex;
	flex-direction: column;
}

.cta .ws-grid {
	--ws-column-count: 2;
}

.cta .wrap {
	background: #FFF;
	clip-path: circle(250vw at 50% calc(100% - 250vw));
	margin: 0 0 -3em;
}

.cta .image {
	grid-column: 1 / -1;
	aspect-ratio: 1.35;
}

.cta .textbox {
	padding-block: 2.5em 4em;
}



/* CTA RIBBON (Image Overlap Variation) ------------------------------ /
- About ribbon 5
*/
.cta.overlap .ws-grid {
	background: var(--ws-dk-blue);
	padding: 5em var(--ws-gap) 3em;
}

.cta.overlap img {
	grid-column: 1 / -1;
	margin-inline: auto;
	width: 26em;
}

/* CTA RIBBON (Callouts Overlap Variation) ------------------------------ /
- Homepage ribbon 3,
- Programs & Services ribbon 3
*/

.cta.overlap ul.ws-flex {
	grid-column: 1 / -1;
	margin: 2em 0 0;
	--ws-column-count: 1;
}

.cta.overlap ul.ws-flex li {
	margin: 0 0 2em;
}



/* HERO ------------------------------ */
#hero {
	display: flex;
	flex-direction: column-reverse;
	margin-top: 0.375em;
	position: relative;
}

#hero::before {
	background: url('/images/stripes-mobile.svg') repeat-x center;
	bottom: 100%;
	content: '';
	height: 0.25em;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 1;
}

#hero .ws-grid {
	position: relative;
	--ws-column-count: 2;
}

#hero .image,
#hero .slick-slider {
	grid-column: 1 / -1;
}

#hero .image,
#hero .slick-slide .slide {
	aspect-ratio: 1.75;
}

#hero .wrap {
	background: #FFF;
}

#hero.curve-mobile {
	clip-path: circle(250vw at 50% calc(100% - 250vw));
}

#hero .wrap::after {
	background: rgb(var(--ws-lt-blue-rgb), .4);
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

#hero .textbox {
	padding-block: 2.5em 4em;
}

#hero a.scroll {
	background-size: 2em auto;
	bottom: 2em;
	left: 50%;
}



/* EVENT (Homepage ribbon 2, About page ribbon 3) ------------------------------ */
#event.home {
	margin-top: -3em;
}

#event .image {
	text-align: center;
}

#event.home .image {
	padding-block: 5em 2em;
}

#event:not(.home) .image {
	padding-block: 2em;
}

#event::before {
	display: none;
}

#event .image::before {
	left: calc(-1 * var(--ws-gap));
	right: calc(-1 * var(--ws-gap));
}

#event .ws-grid-inner {
	display: block;
}

#event .details {
	padding-block: 2em;
	padding-top: 5em;
}



/* CALLOUTS (Homepage ribbon 3) ------------------------------ */
#callouts ul {
	--ws-column-count: 2;
}



/* TEXT ------------------------------ /
- Homepage ribbon 5
- About page ribbon 2
*/
#text::before {
	display: none;
}



/* LEADERSHIP (About page ribbon 4) ------------------------------ */
#leadership ul.ws-flex {
	--ws-column-count: 1;
}

#leadership li:nth-child(-n+2) {
	margin: 1.5em 0 0;
}

#leadership li:nth-child(3) {
	margin: 2.25em 0 0;
}



/* LOGOS ( About page ribbon 7) ------------------------------ */
#logos ul.ws-flex {
	--ws-column-count: 2;
}



/* CALLOUTS-2 (Programs & Services ribbon 2) ------------------------------ */
#callouts-2::before {
	display: none;
}

#callouts-2 ul.ws-flex {
	row-gap: 3.5em;
	text-align: center;
}

#callouts-2 li {
	margin-inline: auto;
	max-width: 30em;
}

#callouts-2 li>a {
	display: block;
}

#callouts-2 .image {
	margin-inline: auto;
	max-width: 15em;
}




/* DONATION (Get Involved ribbon 2) ------------------------------ */
#donation::before {
	display: none;
}

#donation form {
	padding-block: 1em 1.5em;
}

#donation .other-amount span {
	width: calc(70% - clamp(1rem, -1.977rem + 14.88vw, 5rem))
}

#donation .other-amount input {
	padding-left: calc(70% - clamp(1rem, -1.977rem + 14.88vw, 5rem));
}

#donation  .button-wrap {
	padding: 1em;
}





/* CAREERS INTO RIBBON ------------------------------ /
*  - Careers page ribbon 2
*/

.careers-intro {
  background: url('/images/circles/text-left.svg') no-repeat calc(50% - 4em) calc(100% + 25em);
}

.careers-intro .image {
	display: none;
}

.careers-intro .images {
	margin: 2.5em auto 0;
	max-width: 24.25em;
}



/* OFFERS RIBBON ------------------------------ /
*  - Careers page ribbon 3
*/

.offers ul.ws-flex {
	--ws-column-count: 2;
}





/* MAX-WIDTH MEDIA QUERIES ------------------------------ */
@media (max-width: 500px) {

	.photoright.staff-photo {
		float: none;
		margin: 0 auto 2em;
		max-width: 100%;
		text-align: center;
		width: 100%;
	}

	blockquote {
		margin: 2em 0;
		float: none;
		max-width: 100%;
		width: 100%;
	}

	#donation label.half {
		width: calc( 100% - var(--ws-form-gap));
	}

	#donation label.fourth {
		width: calc( 50% - var(--ws-form-gap));
	}

	#donation .other-amount span {
		text-align: left;
		width: 100%;
	}

	#donation .other-amount input {
		padding-left: 9rem;
	}

}



/* --------------~~~~~ STYLE-M.CSS ~~~~~-------------- */