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


body {
	background: #FFF;
}

body.slideNav {
	overflow: hidden;
}

.anchor {
	top: -1.5em;
}



/* 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: 100%;
	width: 16em;
	padding: 1em 0.5em;
}

body>header a[href^="tel:"] {
    background: var(--lightest-blue);
    border-radius: 10em;
    color: var(--ws-dk-blue);
    content: "";
    font-weight: 700;
    line-height: 1em;
    padding: 0.5em 1em;
    position: absolute;
    right: 0.5em;
    top: 2em;
}

body>header #mainnav a[href^="tel:"] {
    display: none;
}

body>header #navContainer {
	background: #D4E3EA;;
	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 rgba(0,0,0,0.15);
	display: block;
	position: relative;
	width: 100%;
}

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

body>header #navContainer li.open {
	background: #fff;
}

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

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

#navContainer .menu::before {
  background: #000;
  content: '';
  line-height: 1;
  margin: 0 .25em 0 0;
  mask: url('/images/icons/close.svg') no-repeat left center / contain;
  padding-right: .75em;
}

#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;
	height: 2.75em;
	margin: 0;
	min-width: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0em;
	width: 2.75em;
	z-index: 1;
}

body>header #navContainer li li>span {
	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 > span::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) {
	color: #FFF;
	cursor: pointer;
	flex: 1 1 auto;
	font-size: clamp(0.938em, 0.764em + 0.77vw, 1.125em);
	line-height: 2.25;
}

#mobilenav button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	display: flex;
	font-weight: 400;
	justify-content: center;
	margin: 0;
	min-width: 0;
	padding: 0;
	text-transform: none;
}

#mobilenav button::after {
  aspect-ratio: 1;
  background: #FFF;
  content: '';
  display: inline-block;
  margin: 0 0 0 .25em;
  mask:  url('/images/icons/bars.svg') no-repeat center / contain;
  height: 1em;
}



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

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

.twoCol, .threeCol, .resCol {
	columns: auto;
	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;
}

.content :is(.photoright, .photoleft) {
    margin: 0 0 1em;
}

.content :is(.photoright, .photoleft, .photoleft img, .photright img) {
    width: 100%;
}


.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');
}

.stats.one p, .stats.two p, .stats.three p, .stats.four p{font-size: 1.5em;padding: 0 5%;margin-bottom: 2em;}


.image-rows figure {
	width: 100%;
}

.content details summary h2 {
	font-size: 1em;
}

.form-flex .half {
    width: 100%;
}


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

/* COLORED BORDERS ----- */

.border-top::before,
.border-bottom::before {
	background: var(--light-blue);
}



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

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

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

.footer-middle .wrap {
	align-items: center;
	display: flex;
	flex-direction: column;
}

.footer-middle .contact {
	order: 1;
}

.footer-middle .social {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	order: 2;
	margin-bottom: 3em;
}

.footer-middle .column {
	order: 3;
}

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

.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;
}

#exposure {
	order: 3;
}



/* PAGEHEADER ------------------------------ */



/* 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.overlap li:nth-child(odd) a::before { background: var(--ws-blue); }
.cta.overlap li:nth-child(even) a::before { background: var(--ws-aqua); }



/* CTA RIBBON (Map Variation) ------------------------------ /
- Homepage ribbon 2
*/

.map {
	background: var(--blue);
	margin: 0;
}


.map.border-top::before {
	display: none;
}

.map .textbox {
	margin: 0 0 2em;
}

.map svg,
.map img {
	display: block;
	margin-inline: auto;
}



/* 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;
}

.cta.overlap ul.ws-flex li:first-child {
	display: none;
}


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

#hero::before {
	background: var(--light-blue);
	bottom: 100%;
	content: '';
	height: 0.25em;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 1;
}

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

#hero .pause-toggle {
	bottom: .5rem;
	left: .5em;
}

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

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

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

#hero .wrap::after {
	background: var(--lightest-blue);
	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%;
}
#hero blockquote{text-align: left;font-size: .9rem;line-height: 1.2em;padding-left: 1.5em;}
#hero blockquote cite {margin-top: .25em;}



/* Impact / Media pages */
#hero:is(.impact-page, .media-page) {
	background: var(--lightest-blue-40);
}

#hero:is(.impact-page, .media-page, .get-involved-page) .wrap {
	background: var(--blue);
}

#hero.get-involved-page {	background: var(--lightest-blue); }
#hero.get-involved-page .wrap::after { background: #FFF; }


#hero:is(.impact-page, .media-page, .get-involved-page) .wrap::after {
	bottom: .5em;
	clip-path: circle(250vw at 50% calc(100% - 250vw));
}



/* EVENT (Homepage ribbon 2, About page ribbon 3) ------------------------------ */

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

#event.home .image {
	padding-block: 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;
}



/* CALLOUTS (Homepage ribbon 3) ------------------------------ */
#our-services ul.ws-flex {
	--ws-column-count: 2;
	row-gap: 2em;
}



/* 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>a {
	display: block;
	margin-inline: auto;
	max-width: 30em;

}

#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 #hero {
	margin: 0;
}

.careers-intro {
	margin: 0;
	padding: 3em 1em 2em;
}

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


.blog-intro .ws-grid .textbox {
	padding: 2em 1em;
}




/* RESOURCES ------------------------------ */
#resources {
	padding-bottom: 3em;
}

#resources ul.ws-flex li {
	padding: 1.5em 1em;
}

#resources ul.ws-flex .resource-links {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
}

#additional-resources {
	padding-block: 3em;
}


/* /media/ page overrides */
#resources.media-page ul.ws-flex {
	--ws-column-count: 2;
}

#resources.media-page ul.ws-flex li>a {
	padding: 1.5em 1.25em;
}

/* Background image tiles */
#resources.media-page ul.ws-flex li>a::before {
	background-size: 300% 600%;
}

#resources.media-page ul.ws-flex li:nth-child(1)>a::before { background-position: 0 0; }
#resources.media-page ul.ws-flex li:nth-child(2)>a::before { background-position: 50% 0; }
#resources.media-page ul.ws-flex li:nth-child(3)>a::before { background-position: 0% 20%; }
#resources.media-page ul.ws-flex li:nth-child(4)>a::before { background-position: 50% 20%; }
#resources.media-page ul.ws-flex li:nth-child(5)>a::before { background-position: 0% 40%; }
#resources.media-page ul.ws-flex li:nth-child(6)>a::before { background-position: 50% 40%; }
#resources.media-page ul.ws-flex li:nth-child(7)>a::before { background-position: 0 60%; }
#resources.media-page ul.ws-flex li:nth-child(8)>a::before { background-position: 50% 60%; }
#resources.media-page ul.ws-flex li:nth-child(9)>a::before { background-position: 0 80%; }




/* OUR-SERVICES RIBBON ------------------------------ /
*  - Careers page ribbon 3
*/
.our-services ul.ws-flex {
	--ws-column-count: 2;
}

#services-list {
	background: var(--blue);
	margin: 0;
}

#services-list:before {
	display: none;
}

#services-list li:not(:last-child) {
	margin-bottom: 2em;
}

#services-list .image {
	margin:0 auto -4em;
	max-width: 12.5em;
	width: 100%;
}

#services-list .textbox {
	padding: 3em 1em 1.5em;
}


/* CIRCLE-TEXT ------------------------------ /
- Careers page ribbon 4
*/
.circle-text .image {
	max-width: 30em;
	margin: 3em auto 0;
}


/* TESTIMONIALS ROTATOR ------------------------------ /
- Careers page ribbon 5
*/
.testimonials-rotator .wrap {
	padding-block: 3rem;
}
.testimonials-rotator blockquote p {
	font-size: 1.25rem;
}
.testimonials-rotator cite {
	font-size: 1rem;
}


/* WORKPLACE AWARDS ------------------------------ /
- Careers page ribbon 5
*/
.workplace-awards ul.ws-flex {
	--ws-column-count: 3;
	justify-content: center;
}




/* COLORED CIRCLES RIBBON ------------------------------ /
* - /impact/ page
*/

.colored-circles ul.ws-flex {
	--ws-column-count: 1;
	justify-content: center;
}

.colored-circles strong {
	font-size: 1.125em;
}



/* CIRCLE PHOTO RIBBON ------------------------------ /
* - /impact/ page
*/

.circle-photo .textbox {
	margin-bottom: 3em;
}





/* (STAR) ICON BOXES RIBBON ------------------------------ /
* - /impact/ page
*/

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




/* YPI VIDEOS RIBBON ------------------------------ /
* - /media/ page
*/

.ypi-videos .ws-flex {
	max-width: 30em;
	margin: 0 auto;
	justify-content: center;
	row-gap: 2.5em;
	--ws-column-count: 1;
}

.ypi-videos figure::after {
	height: clamp(3em, 1.884em + 5.58vw, 4.5em);
}




/* MAX-WIDTH MEDIA QUERIES ------------------------------ */

/* 500px */
@media (max-width: 31.25em) {

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

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

	#donation label.third {
		width: calc(50% - 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;
	}

	.our-services ul.ws-flex {
		--ws-column-count: 1;
	}

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

	.icon-boxes ul.ws-flex {
		--ws-column-count: 1;
	}


	#resources.media-page ul.ws-flex {
		--ws-column-count: 1;
	}

	/* Background image tiles */
	#resources.media-page ul.ws-flex li>a::before {
		background-size: 200% 1000%;
	}

	#resources.media-page ul.ws-flex li:nth-child(1)>a::before { background-position: 0% 0; }
	#resources.media-page ul.ws-flex li:nth-child(2)>a::before { background-position: 0% 12%; }
	#resources.media-page ul.ws-flex li:nth-child(3)>a::before { background-position: 0% 24%; }
	#resources.media-page ul.ws-flex li:nth-child(4)>a::before { background-position: 0% 36%; }
	#resources.media-page ul.ws-flex li:nth-child(5)>a::before { background-position: 0% 48%; }
	#resources.media-page ul.ws-flex li:nth-child(6)>a::before { background-position: 0% 60%; }
	#resources.media-page ul.ws-flex li:nth-child(7)>a::before { background-position: 0% 72%; }
	#resources.media-page ul.ws-flex li:nth-child(8)>a::before { background-position: 0% 84%; }
	#resources.media-page ul.ws-flex li:nth-child(9)>a::before { background-position: 0% 96%; }


}


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