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


:root {

	--blue: #1E376A;
	--ws-blue: #09589d;
	--ws-aqua: #509cc0;
	--light-blue: #509cc0;
	--lightest-blue: #D4E3EA;
	--ws-red: #b6332d;
	--ws-purple: #8C4799;
	--ws-orange: #fccc62;
	--ws-yellow: #FACA64;

	--light-blue-40: color-mix(in srgb, var(--light-blue) 40%, transparent);
	--lightest-blue-40: color-mix(in srgb, var(--lightest-blue) 40%, transparent);

	--ws-blue-2: #5178AA;
	--ws-dk-blue: #1D4F91;
	--ws-teal: #00A3AD;
	--ws-green: #509E2F;

	--ws-dk-grey: #333333;

	--ws-lt-blue: #D2DCE9;
	--ws-lt-blue-rgb: 210,220,233;

	--ws-lt-blue-2: #BAC9DD;
	--ws-lt-blue-3: #A5B9D3;
	--ws-lt-blue-4: #E4EAF2;
	--ws-lt-blue-5: #D5DEEA;

	--ws-gap: clamp(1.5em, 0.923em + 1.23vw, 2em); /* 750 - 1400 */
	--ws-max-content-width: calc(74em + 2 * var(--ws-gap));

	--ws-text-40: clamp(1.75em, 1.477em + 1.36vw, 2.5em);  /* 28 - 40px */
	--ws-text-24: clamp(1.25em, 1.159em + 0.45vw, 1.5em);  /* 20 - 24px */
	--ws-text-20: clamp(1.125em, 1.08em + 0.23vw, 1.25em); /* 18 - 20px */

}



/* TYPEFACES ------------------------------ */
@font-face {
	font-family: 'Montserrat';
    src: url('/fonts/Montserrat-VariableFont_wght.woff2') format('woff2 supports variations'),
         url('/fonts/Montserrat-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}

@font-face {
	font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Italic-VariableFont_wght.woff2') format('woff2 supports variations'),
         url('/fonts/Montserrat-Italic-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 300 900;
    font-display: swap;
    font-style: italic;
}


/* RESET ------------------------------ */
html {
	box-sizing: border-box;
}

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

body {
	background: #FFF;
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
}

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

ul {
	padding-left: 0;
}

ul li {
	list-style: none;
}

html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr {
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
}

table {
	border-collapse: collapse;
}

td, th {
	empty-cells: show;
	text-align: left;
	vertical-align: middle;
}

#skipNavigation {
	background: #FFF;
	color: #000;
	left: 0;
	padding: .5em;
	position: absolute;
	top: -1000px;
	z-index: 10;
}

#skipNavigation:focus {
	top: 0;
}



/* FONTS ------------------------------ */
body, .text, input, button, select, textarea {
	color: #000;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Roboto Regular */
blockquote cite, blockquote footer, .icon-boxes li blockquote p {
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-weight: 400;
}

/* Roboto Regular Italic */
figcaption, .icon-boxes li blockquote cite {
	font-style: italic;
	font-weight: 400;
}

/* Roboto Medium */
.intro, .intro p, .content p>a:not(.button) {
	font-style: normal;
	font-weight: 500;
}

/* Roboto Medium Italic */
#event time {
	font-style: italic;
	font-weight: 500;
}

/* Roboto Bold */
h3, h4, h5, h6, b, strong, #donation :is(label.radio, .other-amount input), #sidenav>ul>li>a {
	font-style: normal;
	font-weight: 700;
}

/* Montserrat Regular */
:is(#callouts, #callouts-2, #text, #leadership, #donation, .cta, .megamenu, .circle-text) h2>span,
#callouts strong, #leadership strong, .cta li strong, #text.centered h3:first-of-type, #logos h2,
#callouts-2 div>strong:first-child, .footer-top p, .offers ul li p, .services ul li p, #callouts strong {
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-weight: 600;
}

/* Montserrat Bold */
h1, h2,
button, .button, input:is([type="button"], [type="submit"], [type="reset"]),
.footer-top p>strong, .footer-middle strong, .stats {
	font-family: 'Montserrat', sans-serif;
	font-style: normal;
	font-weight: 700;
}

/* Montserrat Bold Italic */
blockquote, blockquote p, h2 span, .blockquote {
	font-family: 'Montserrat', sans-serif;
	font-style: italic;
	font-weight: 700;
}


/* COLORS ------------------------------ */
.dk-blue, h1, h5, .highlight h2, p>:is(b, strong) { color: var(--blue); }
.blue, h2, h6 { color: var(--ws-blue); }
h3 { color: var(--ws-aqua); }
h4 { color: var(--ws-blue-2); }
.purple { color: var(--ws-purple); }
.red { color: var(--ws-red); }
.green {color: var(--ws-green);}
.aqua  { color: var(--ws-aqua); }


/* TEXT ELEMENTS ------------------------------ */
h1, .h1-size { font-size: clamp(1.625em, 1.322em + 1.35vw, 2.5em); } /* 360 - 1400 */
h2, .h2-size { font-size: clamp(1.5em, 1.327em + .77vw, 2em); } /* 360 - 1400 */
h3, .h3-size { font-size: clamp(1.375em, 1.288em + .38vw, 1.625em); } /* 360 - 1400 */
h4, th, .h4-size { font-size: clamp(1.25em, 1.207em + .19vw, 1.375em); } /* 360 - 1400 */
h5, .h5-size { font-size: 1.1875em; }
h6, .h6-size { font-size: 1.125em; }

.highlight h2 { font-size: clamp(1.5em, 1.24em + 1.15vw, 2.25em); } /* 360 - 1400 */


#ContactForm h2>em.text {
	display: block;
	font-weight: 500;
	font-size: 1rem;
}


/* stylized first word of h2 */
:where(#callouts, #callouts-2, #text, #leadership, #donation, .cta, .megamenu, .circle-text, #joinOurTeam ) h2 {
	color: var(--ws-dk-blue);
	margin: 0 0 1em;
	text-transform: uppercase;
}

:is(#callouts, #callouts-2, #text, #leadership, #donation, .cta, .megamenu, .circle-text, #joinOurTeam ) h2 {
	line-height: 1.25;
}

:where(#callouts, #callouts-2, #text, #leadership, #donation, .cta, .megamenu, .circle-text) h2>span {
	color: var(--ws-blue);
	text-decoration: underline;
	text-decoration-color: var(--light-blue);
	text-decoration-thickness: .25rem;
	text-transform: lowercase;
	text-underline-offset: .2em;
}


@supports (-moz-appearance:none) {
  /* FIREFOX ONLY */
	:where(#callouts, #callouts-2, #text, #leadership, #donation, .cta, .megamenu) h2>span {
		text-underline-offset: .25em
	}
}


.megamenu h2>span {
	text-decoration: none;
    display: inline-block;
    font-style: normal;
    color: var(--ws-blue);
    font-size: 1em;
    font-weight: 400;
}

.intro { font-size: clamp(1.125em, 1.082em + .19vw, 1.25em); margin: 0 0 1.75em; } /* 360 - 1400 */
p {font-size: clamp(1em, .957em + .19vw, 1.125em); /* 260 - 1400 */}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1em; }
.mb-2 { margin-bottom: 2em; }
.mb-3 { margin-bottom: 3em; }

.uppercase, h1 {
	text-transform: uppercase;
}

.text {
	font-size: 1em;
}

a, a * {
	color: var(--ws-blue);
	text-decoration: none;
}

p, h1, h2, h3, h4, h5, h6, hr, .content ul, .contentEditor ul, blockquote, dd, ol {
	margin-block: 0 1.25rem;
}
.content ul {
	margin-bottom: 2rem;
}

h1, h2, h3, h4, h5, h6, th {
	line-height: 1.125;
}

:is(p, ul, ol, blockquote, .highlight) + :is(h2, h3, h4, h5, h6) {
	margin-top: 2.5rem;
}

em, i, q, cite, .italic {
	font-style: italic;
}

b, strong {
	font-weight: 700;
}

u {
	text-decoration: none;
}

hr {
	border: 0;
	border-top: 1px solid rgba(0,0,0,.15);
	margin: 2em 0;
	padding-top: 1px;
}

sup, sub {
	font-size: .6em;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

.clearFloats {
	clear: both;
}

.nobr {
	white-space: nowrap;
}

.twoCol, .threeCol, .resCol {
	column-gap: 2em;
}

:is(.twoCol, .threeCol, .resCol) li {
	break-inside: avoid;
}

.req {
	color: #C00;
}

.content p {
	line-height: 1.75;
}

.content :is(.photoright, .photoleft) img {
	float: none;
	height: auto;
	margin: 0;
	max-width: 100%;
	border-radius: 8px;
}


.anchor {
	position: relative;
}

figure {
	line-height: 0;
	margin: 0;
}

.content figcaption {
	font-size: 0.875em;
	display: block;
	line-height: 1.2;
	margin: .75em 0 0;
}

.content figure.photo-fullwidth {
	text-align: center;
	width: 100%;
}

.content figure.photo-fullwidth img {
	width: auto;
}

.photoright {
	clear: right;
	float: right;
}

.paypal {
	background: var(--ws-lt-blue-4);
	border: 1px solid var(--ws-lt-blue-3);
	padding: 2.5em 2em;
	text-align: center;
	border-radius: 10px;
	width: min(50%,15em);
}

.paypal.center {
	margin: 2em auto 0;
	max-width: 100%;
	padding: 1.5em 2em 1.25em;
	width: 16em;
}

.photoright figcaption {
	text-align: right;
}

.photoleft {
	clear: left;
	float: left;
}

.muted {
	opacity: .5;
}

small, .textSm {
	font-size: .8em;
}

.content table {
	width: 100%;
}
.content blockquote:nth-child(odd) {background: var(--lightest-blue-40);color: var(--blue);}
.content blockquote:nth-child(even){border: solid 2px var(--lightest-blue-40);background:#fff;}
.content blockquote:nth-child(even) p {color: var(--ws-aqua);}
blockquote {
  border-radius: 10px;
  line-height: 1.33;
  margin: 2em 0;
  max-width: 100%;
  padding: 1.5em 3em;
  text-align: center;
  width: 100%;
  clear: both;
}

.blockquote{
	line-height: 1.33;
	padding:2em 2em 1em 2em;
	border-radius: 5px;
}

.blockquote p {font-size: 1.25rem;line-height: 1.2;}

.content blockquote p {
	color: var(--ws-dk-blue);
	font-size: 1.25em;
	line-height: inherit;
	quotes: '\201c' '\201d';
}

.content blockquote p:last-of-type {
	margin-bottom: 0;
}

blockquote :is(cite, footer) {
	margin-top: .5em;
	color: #4A4A4A;
	font-size: .9em;
	display: block;
}

blockquote cite::before,
blockquote footer::before {
	content: '- ';
}

blockquote p:first-of-type::before {
	content: open-quote;
}

blockquote p:last-of-type::after {
	content: close-quote;
}

.highlight,
.content .highlight {
	clear: both;
	margin: 2.5em 0;
	padding: 1em;
	position: relative;
}

.highlight-content {
	background: var(--lightest-blue-40);
	border-top: 1px solid var(--light-blue-40);
	border-bottom: 1px solid var(--light-blue-40);
	padding: 1.75em clamp(1.5rem, 1.154rem + 1.54vw, 2.5rem) 2.5em; /* 360 - 1400 */
	position: relative;
	z-index: 0;
}

.highlight-content * {
	position: relative;
	z-index: 2;
}

.highlight .highlight-content :first-child {
	margin-top: 0;
}

.highlight .highlight-content :last-child,
.highlight .highlight-content ul:last-child li:last-child {
	margin-bottom: 0;
}

.no-flow {
	overflow: hidden;
}

.stats {width: 100%;display: block;margin: 2em 0;}
.stats.one, .stats.two, .stats.three, .stats.four {text-align: center;}
.stats.one p, .stats.two p, .stats.three p, .stats.four p{display: inline-block;text-align: center;vertical-align: top;line-height: 1;font-size: 1.25em;}
.stats.one p img, .stats.two p img, .stats.three p img, .stats.four p img {display: block;margin: 0 auto 1em auto;text-align: center;}

h2 span {display: block;font-size: 1.2rem; color: var(--ws-dk-blue);margin-top: .25em;}
:is(.home #callouts, #who-we-help, .home #success_stories, #callouts-2, #donation, .circle-text, #hero + #text, #leadership) h2 span {
	display: inline-block;
	font-size: 1em;
	font-style: normal;
	font-weight: 400;
	color: var(--ws-blue);
	margin-top: 0;
}
#ContactForm h2 em span {
	display: inline-block;
	font-size: 1em;
	color: #000;
	margin-top: 0;
}
/* WRAP ------------------------------ */
.wrap {
	margin-inline: auto;
	max-width: var(--ws-max-content-width);
	padding-inline: var(--ws-gap);
	position: relative;
}


/* GRID COLUMNS ------------------------------ */
.ws-grid,
.ws-grid-inner {
	display: grid;
	gap: var(--ws-gap);
}

.ws-grid {
	grid-template-columns:
	minmax( 0, 1fr )
	[wrap-start]
	repeat( var(--ws-column-count), minmax( 0, calc( ( ( var(--ws-max-content-width) - ( ( var(--ws-column-count) - 1 ) * var(--ws-gap) ) ) / var(--ws-column-count) ) ) ) )
	[wrap-end]
	minmax( 0, 1fr );
}

.ws-grid-inner {
	grid-template-columns: [wrap-start] repeat( var(--ws-column-count), minmax(0,1fr) ) [wrap-end];
}


/* FLEXBOX COLUMNS ------------------------------ */
.ws-flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-gap);
}

.ws-flex>:is(li, article, div, figure) {
	width: calc( 100% / var(--ws-column-count) - ( var(--ws-gap) * ( var(--ws-column-count) - 1 ) / var(--ws-column-count) ) );
}


/* MAIN ------------------------------ */
main {
	background: #FFF;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.contentEditor {
	background: #FFF;
	min-width: 100%;
}

body[class*='-admin'] main>div>#content:has(.wsReturnToButton) {
	padding-top: 4em;
}


/* sidenav */
#sidenav {
	width: 100%;
	overflow: hidden;
	margin: 0 0 3em;
}

#sidenav ul {
	border-radius: .25em;
	overflow: hidden;
	padding: 0
}

#sidenav ul ul {
	border-radius: 0;
}

#sidenav li a {
	color: var(--ws-dk-blue);
	font-size: 1.125em;
	padding: .5em .75em;
	line-height: 1.1em;
	display: block;
	margin-bottom: 1px;
}

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

#sidenav>ul>li:not(.on) {
	border-bottom: 1px solid var(--ws-lt-blue);
}

#sidenav li.on>a {
	background: var(--ws-dk-blue) url('/images/icons/circle-down-white.svg') no-repeat right 1em top .5625em / .875em auto;
	color: #FFF;
	padding: .5625em 2.5em .5625em .75em;
}

/* t2 */
#sidenav>ul>li.on>a {
	border-radius: .25rem .25rem 0 0;
	margin-top: 1px
}

#sidenav li.on ul {
	background: var(--lightest-blue-40);
	overflow: hidden;
}

#sidenav li.on ul li a {
	color: #000;
	font-size: 1.0625em;
	padding: .333em .75em;
}

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

#sidenav li ul li:not(.on) a:is(:hover, :focus) {
	background-color: var(--ws-dk-blue);
	color: #FFF;
}

/* t3 */
#sidenav li ul li.on ul {
	display: none;
	padding-bottom: .5em;
	border: 0;
}

#sidenav li ul li.on ul li {
	border: 0
}

#sidenav li ul li.on ul li a {
	padding-left: 1rem;
	font-size: .8em;
	color: #666
}

#sidenav li ul li ul li a:is(:hover, :focus),
#sidenav li ul li ul li.on>a {
	color: #000;
	background: #e5e5e5;
}

/* t4 */
#sidenav li ul li ul li.on ul li a {
	padding-left: 1.5rem;
	font-size: .7em;
	color: #666
}

#sidenav li ul li ul li ul li a:is(:hover, :focus),
#sidenav li ul li ul li ul li.on>a {
	color: #000;
	background: #f5f5f5;
}



/* breadcrumbs */
.breadcrumb {
	margin-bottom: 1em;
}

.breadcrumb a::after {
	content: "\00A0\00A0\203A\00A0";
}

/* content */
.content {
	word-wrap: break-word;
}


.shareIcons {
	display: inline-block;
	overflow: auto;
	position: relative;
}

.shareIcons a {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border-radius: .2em;
	display: block;
	float: left;
	height: 20px;
	margin: 0 .5em 1em 0;
	width: 20px;
}

.shareFacebook {
	background-color: #1877F2;
	background-image: url('/images/icons/social/facebook.svg');
}

.shareIcons .shareTwitter {
	background-color: #1DA1F2;
	background-image: url('/images/icons/social/twitter.svg');
    background-size: 0.75em auto;
}

.shareLinkedin {
	background-color: #0A66C2;
	background-image: url('/images/icons/social/linkedin.svg');
}

/* do people still use google+ ? */
.shareGoogle {
	background-color: #DD4B39;
	background-image: url('/images/icons/social/google-plus.svg');
}

/* list */
.content ol ol li {
	list-style: lower-alpha;
	margin: 0 0 1em;
}

.bullets li,
.content ul li {
	margin: 0 0 1em;
	padding-left: clamp(1.75em, 1.663em + 0.38vw, 2em);
	position: relative;
}

.content :where(.bullets, ul) li {
	font-size: clamp(1em, .957em + .19vw, 1.125em); /* 360 - 1400 */
}

.content ol li {
	font-size: clamp(1em, .957em + .19vw, 1.125em); /* 360 - 1400 */
}

.bullets li::before,
.content ul li::before,
.megamenu>div>ul>li a::before {
	background: url('/images/icons/circle-right-blue.svg') no-repeat center / .75em auto; /* 360 - 1400 */
	content: '';
	display: inline-block;
	height: 1em;
	left: .5em;
	position: absolute;
	text-align: center;
	top: .225em;
	width: 1em;
}

.content ul li ul li:before {
	opacity: .5;
}

.content :is(ol, ul) li li {
	font-size: 1em;
}

.content :is(ol, ul) :is(ol, ul) {
	margin-top: 1em;
}


/* addon classes */
.clearfix::after {
	clear: both;
	content: '';
	display: table;
}

.videoContainer {
	aspect-ratio: 16 / 9;
	line-height: 0;
	position: relative;
	width: 100%;
}

.videoContainer.ratio-4-3 {
	aspect-ratio: 4 / 3; /* 4:3 full-frame */
}

/* Build out the space for videos when editing a CMS page */
#tinymce .videoContainer { aspect-ratio: 16 / 9 !important; }
#tinymce .videoContainer.ratio-4-3 { aspect-ratio: 4 / 3 !important; }


.videoContainer iframe,
#tinymce .mce-preview-object {
	border: 0;
	bottom: 0;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

#wysiwygBody {
	background: #FFF;
}

.wsNew {
	background-color: #FFC700;
	color: #222;
	display: inline-block;
	font-size: .7em;
	font-style: italic;
	height: 1.5em;
	line-height: 1.5em;
	margin: .3em 0;
	overflow: visible;
	padding: 0 .3em;
	vertical-align: top;
}

td.right, th.right {
	text-align: right;
}

.content details {
	margin: 0 0 0.5em;
	padding: 0;
}

.content details > summary {
	list-style: none;
}

.content details > summary::-webkit-details-marker {
	display: none;
}

.content details summary h2 {
	background:#dae8f3;
	border-radius: 0.5rem;
	color: var(--ws-dk-blue);
	margin: 0;
	padding: 1rem 2.5em 1rem 1rem;
	position: relative;
}

.content details[open] summary h2 {
	color:#fff;
	border-radius: 0.5rem 0.5rem 0 0;
	background: var(--ws-dk-blue);
}

.content details summary h2::before,
.content details summary h2::after {
	background: var(--ws-dk-blue);
	content: '';
	display: block;
	height:2px;
	right: 0.5em;
	position: absolute;
	top: 50%;
	transform-origin: center center;
	width: 1em;
}

.content details summary h2::before {
	transform: translate(-50%, -50%) rotate(90deg);
}

.content details summary h2::after,
.content details[open] summary h2:before {
	transform: translate(-50%, -50%) rotate(0deg);
}

.content details[open] summary h2::before,
.content details[open] summary h2::after {
	background: #fff;
}


.content details > div {
	background: #fff;
	border-radius: 0 0 0.5rem 0.5rem;
	box-shadow: inset 0px -2px 0 0 #dae8f3, inset 2px 0px 0 0 #dae8f3, inset -2px 0px 0 0 #dae8f3;
	padding: 1rem;
}


/* FORMS AND INPUTS ------------------------------ */
input, button, select, textarea {
	font-size: 1em;
	line-height: 1.1;
}

input:is([type="button"], [type="date"], [type="submit"], [type="text"], [type="reset"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), textarea, select {
	border-radius: 0;
	outline: none;
}

input:is([type="text"], [type="date"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), textarea, select {
	background-color: #FFF;
	border: 1px solid var(--ws-lt-blue);
	font-size: 1.125em;
	padding: .5625em .75em .4375em;
	width: 100%;
}

:is(input:is([type="text"], [type="date"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), textarea, select):focus {
	border-color: var(--ws-lt-blue-3);
}

:is(button, .button, input:is([type="button"], [type="submit"], [type="reset"])):focus {
	background-color: #b6332d;
;
	color: #FFF;
}

textarea {
	display: block;
}


textarea {
	display: block;
	resize: vertical;
}

select::-ms-expand {
	display: none;
}

select {
	background-image: url('/images/icons/select-arrows.svg');
	background-repeat: no-repeat;
	background-position: calc(100% - .875em) calc(50% + .125rem);
	padding-right: 2.15rem;
	width: auto;
	-webkit-appearance: none;
	-moz-appearance: none;
}

select option {
	padding: 0 .2em;
}

.form-error {
	color: #EE0000;
}

.paypal-button-container {
	display: inline-block;
	position: relative;
}

.paypal-button-container input {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.paypal-button-container button {
	margin: 0 !important;
}

.paypal-button-container input:is(:hover, :focus-visible) + .button {
	background: #fff;
	border-color: var(--ws-blue);
  	color: var(--ws-blue);
}


/* BUTTONS ------------------------------- */
button, .button, input:is([type="button"], [type="submit"], [type="reset"]) {
	background-color: var(--ws-dk-blue);
	border: 1px solid transparent;
	border-radius: .3125em;
	color: #FFF;
	cursor: pointer;
	display: inline-block;
	font-size: clamp(1rem, 0.957rem + 0.19vw, 1.125rem); /* 360 - 1400 */
	line-height: 1rem;
	margin-block: .25em;
	min-width: 8.75rem;
	padding: 1rem 1.1rem;
	text-align: center;
	text-transform: uppercase;
}

:is(.button, button).outlined:not(.white) {
	background-color: #fff;
	border-color: var(--ws-dk-blue);
	color: var(--ws-dk-blue);
}

:is(.button, button).outlined.white {
	background-color: transparent;
	border-color: #FFF;
	color: #FFF;
}

#tinymce :is(.button, button).outlined.white {
	background-color: transparent;
	border-color: #666;
	color: #666;
}

:is(.button, button).blue {
	background-color: var(--ws-blue);
}

:is(.button, button).red {
	background-color: var(--ws-red);
}

:is(.button, button).purple {
	background-color: var(--ws-purple);
}

:is(.button, button).green {
	background-color: var(--ws-green);
}


.buttons .button {
	margin-right: .25em;
}



/* FORM ------------------------------ */
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

button img {
	height: 1em;
	vertical-align: top;
	width: auto;
}

input.bulky, .bulky {
	font-size: 1.2em;
	padding: .4em .6em;
}

.formTable,
.formTable :is(input:is([type="text"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), table, textarea, select) {
	width: 100%;
}

.formTable table td {
	padding-bottom: 0;
}

.formTable.right td:first-child {
	text-align: right;
	width: 1%;
}

.formTable.right td {
	width: auto;
}

.subjClass {
	display: none !important;
}

#Captcha label {
	padding-left: 0;
}

:is(.formEdit, .formBuilder) select {
	width: 40%;
}


/* MANAGEMENT ------------------------------ */
hr + .manage {
	margin-top: -1em;
}

.manage {
	border-bottom: 1px solid rgba(0,0,0,.2);
	line-height: 1.3;
	width: 100%;
}

.manage th {
	border-bottom: 1px solid rgba(0,0,0,.2);
	text-align: left;
}

.manage th.right {
	text-align: right;
}

.manage th.sort {
	cursor: pointer;
}

.manage th.sort img {
	margin-left: 5px;
}

.manage th img {
	bottom: -2px;
	position: relative;
}

.manage td,.manage th {
	padding: 5px 5px 5px 0;
}

.manage td:first-child {
	padding-left: .8em;
}

.manage img.preload {
	border: solid 1px #fff;
	display: none;
	position: absolute;
	top: 0;
	z-index: 10;
}

.manage td.icons img {
	bottom: -2px;
	margin-left: 5px;
	position: relative;
}

.manage td:first-child.icons img {
	margin-left: 0;
}

.manage td:first-child.icons {
	padding-inline: 3px;
}

.manage td:nth-child(2) {
	hyphens: auto;
	overflow-wrap: break-word;
	word-break: break-word;
	word-wrap: break-word;
}

.manage td.icons a:first-child img {
	margin-left: 0;
}

.manage td.icons input {
	bottom: 2px;
	margin-left: 5px;
	position: relative;
}

.manage .hidden {
	color: #900;
	font-style: italic;
}

.manageButton {
	padding: 10px 0;
	text-align: right;
}

.alternate tbody tr:nth-child(even), .even {
	background: #FFF;
}

.alternate tbody tr:nth-child(odd), .odd {
	background: rgba(0,0,0,.06);
}

.manage + hr, .manage + .manageLinks + hr {
	margin-top: 50px;
}

.manageLinks {
	margin-top: 10px;
}

.manageLinks select {
	max-width: 20em;
}

.manageLinks a {
	white-space: nowrap;
}

.manageLinks a img {
	bottom: -2px;
	position: relative;
}

.manageLinks button {
	margin-left: 5px;
}

.manageButtons {
	padding: 10px 0;
	text-align: right;
}

.wsReturnToButton {
	float: right;
    margin-left: 1em;
}

.manage.rightFirstChild td:first-child {
	text-align: right;
}

.sortRow th {
	cursor: pointer;
}

.manageEllipsis {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 200px;
}

.manage colgroup col {
	width: auto !important;
}


/* pagination */
.pagination {
	font-size: .95em;
	text-align: right;
}


/* See: /news/nafi-cts-lela-zureiqi-connor-presents-mst-ea-model-in-france/ */
.image-rows {
	--ws-gap: 1.5em;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-gap);
}

.image-rows figure {
	margin: 1em auto;
}

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



/* FORM ERROR ------------------------------ */
.formError {
	background-color: #000;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 2px 2px #333;
	color: #FFF;
	display: none;
	margin: 0 0 2px;
	padding: .3125em .625em;
	z-index: 5;
}

.formError p {
	font-size: .9em;
	margin: 0;
}

.formError em {
	border: 10px solid;
	border-color: #000 transparent transparent;
	bottom: -1.0625em;
	display: block;
	height: 0;
	left: 2.5em;
	position: absolute;
	width: 0;
}


/* TRANSITIONS ------------------------------ */
a, a *, button, .button, input:is([type="button"], [type="submit"], [type="reset"]),
:is(input, select, textarea):focus, #navContainer li, .circle a::before,
#donation label.radio>:is(span, div) {
	transition: all .3s ease;
}

.stop-transitions * {
	transition: none !important;
}



/* ANIMATIONS ------------------------------ */

.translate-left, .translate-right, .translate-up, .translate-down {
	opacity: 0;
	position: relative;
	transition: all 1s ease;
	z-index: 0;
}

.translate-left {
	transform: translate(4em,0);
}

.translate-right {
	transform: translate(-4em,0);
}

.translate-up {
	transform: translate(0,4em);
}

.translate-down {
	transform: translate(0,-4em);
}

.translate-left.animated,
.translate-right.animated,
.translate-up.animated,
.translate-down.animated,
#tinymce :is(.translate-up, .translate-down, .translate-left, .translate-right) {
	opacity: 1;
	transform: translate(0,0);
}


/* FOOTER ------------------------------ */
body>footer.border-top {
	background: var(--blue);
	margin-top: 0;
	position: relative;
	z-index: 0;
}

.footer-top {
	background: #FFF;
	padding-block: .875em;
}

.footer-top img {
	width: 12.6875em;
}

.footer-middle {
	padding-block: clamp(2.5em, 2.219em + 1.25vw, 3.313em) clamp(3em, 2.589em + 1.83vw, 4.188em); /* 360- 1400 */
}

.footer-middle strong {
	color: #FFF;
	display: block;
	margin: 0 0 .625em;
}

.footer-middle .wrap > .contact {
	text-align: center;
}

.footer-middle .wrap form {
	display: flex;
	flex-direction: column;
	font-size: .9375em;
}

body>footer :is(address>div,.col-1>div) {
	margin: 0 0 1.25em;
}

body>footer address :is(a, span),
body>footer ul.bullets a {
	color: #FFF;
}

body>footer :where(address, p, ul.bullets li) {
	font-size: .9375em;
}

body>footer .button {
	font-size: .9375em;
}

body>footer .social ul {
	display: flex;
	justify-content: center;
}

body>footer .social li {
	margin: 0 .75em 0 0;
}

body>footer .social li a {
	align-items: center;
	border: 1px solid #FFF;
	border-radius: 50%;
	display: flex;
	height: 2.5em;
	justify-content: center;
	width: 2.5em;
}

body>footer .social img {
	height: 1.125em;
}

body>footer ul.bullets li {
	color: #FFF;
	margin: 0 0 .25em;
}

body>footer ul.bullets li::before {
	top: .25em;
}

.footer-middle {
	color: var(--ws-lt-blue-2);
}


.footer-middle .button {
	padding-block: .75em;
}

.footer-bottom {
	background: #FFF;
	margin-top: 0;
	padding-block: 1.0625em .625em;
}

.footer-bottom::before {
	top: 0;
}

.copyright :is(p, nav) {
	font-size: .9375em;
}

.footer-bottom a {
	color: var(--ws-dk-blue);
}

#exposure a {
	font-size: .9375em;
}

.footer-bottom a.on {
	color: var(--ws-red);
}


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

/* COLORED BORDERS ----- */
.border-top,
.border-bottom {
	position: relative;
}

.border-top {margin-top: 0.375em;}

.border-bottom {
	margin-bottom: .4375em;
}

.border-top::before,
.border-bottom::before {
	content: '';
	height: .25em;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 1;
}

.border-top::before {
	bottom: 100%;
}

.border-bottom::before {
	bottom: -.375em;
}



/* COLORED CIRCLES ------ *
- Homepage ribbon 4 (.cta ribbon)
- Programs & Services ribbon 3 (.cta ribbon)
- About Us ribbon 4 (#leadership ribbon)
*/
.circle a {
	align-items: center;
	aspect-ratio: 1;
	background: no-repeat center / cover;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	max-width: 17.75em;
	padding-inline: 1.5em;
	position: relative;
	width: 100%;
	z-index: 0;
}

.circle  a::before {
	border-radius: 50%;
	bottom: 0;
	content: '';
	left: 0;
	opacity: .9;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

.circle a::after {
	border: 1px solid var(--ws-yellow);
	border-radius: 50%;
	content: '';
	opacity: .9;
	position: absolute;
	z-index: -1;
}

.circle strong {
	color: #FFF;
	line-height: 1.1;
	max-width: 8em;
	position: relative;
	text-transform: uppercase;
}

.circle strong::after {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 285 285"><path fill="%23FFF" d="M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z"/></svg>') no-repeat center  / cover;
	content: '';
	height: 1rem;
	left: 50%;
	opacity: .5;
	position: absolute;
	top: calc(100% + .25em);
	transform: translateX(-50%);
	width: 1rem;
}

.circle .h3-size {font-size: 1.2em;}

/* PAGEHEADER ------------------------------ */
.pageheader {
	background: var(--lightest-blue-40) ;
	height: auto;
	margin-block: .18755em 2em;
	text-align: center;
	width: 100%;
	border-bottom: var(--lightest-blue-40);
}

.pageheader h1 {
	padding-block: 1.125em;
}


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

.map {
	background-color: var(--blue);
	color:#fff;
	padding-block: 3em;
}

.map :is(h2, p, b, strong) {
	color:#fff;
}

.map svg,
.map img {
	height: auto;
	width: 100%;
	max-width: 50em;
}

.map .textbox {
	margin-inline: auto;
	max-width: 61.5em;
}

.map .textbox ~ .textbox {
	margin-top: 1em;
}

.circle-graphic {
	height: auto;
	width: 100%;
	max-width: 40em;
}

/* CTA RIBBON  ------------------------------ /
- Homepage ribbon 4 + 6
- Standard interior ribbon 3
- Programs & Services ribbon 3
- Get Involved ribbon 3
- About ribbon 5 + 6
*/
.cta {
	background: #FFF;
	clear: both;
	margin-block: .125em 0;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.cta::before {
	top: -1px;
	z-index: 2;
}

.cta .wrap {
	z-index: 1;
}

.cta .textbox p {
	font-size: clamp(1em, 0.712em + 0.62vw, 1.25em); /* 750 - 1400 */
}

.cta .textbox .button {
	margin-top: .75em;
}

.cta .image {
	background: no-repeat center left / cover;
}



/* CTA RIBBON (Image Overlap Variation) ------------------------------ /
- About ribbon 5
*/
.cta.overlap::after {
	display: none;
}



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

.cta.overlap ul.ws-flex {
	text-align: center;
}

.cta.overlap .circle a {
	max-width: 16.6875em;
	pointer-events: all;
}

.cta.overlap li:is(:nth-child(2), :nth-child(5)) a::after { bottom: -1em; left: -1em; right: -1em; top: -1em; }
.cta.overlap li:is(:nth-child(3), :nth-child(6)) a::after { bottom: -1em; left: 1em; right: -1em; top: .75em;  }
.cta.overlap li:nth-child(4) a::after { bottom: -.375em; left: -1em; right: 1em; top: 1em; }



/* HERO ------------------------------ */
#hero {
	position: relative;
	z-index: 3;
}

#hero .image {
	background: no-repeat center / cover;
}

#hero .wrap {
	z-index: 1;
}

#hero .textbox {
	position: relative;
}

#hero h1 span {
    color: var(--ws-blue);
    margin-top: 0;
    text-transform: none;
}

#hero .textbox p {
	font-size: clamp(1em, 0.712em + 0.62vw, 1.25em); /* 750 - 1400 */
}

#hero .textbox p>:is(b, strong) {
	text-transform: uppercase;
}

#hero a.scroll {
	background: url('/images/icons/scroll.svg') no-repeat center;
	border: 0;
	margin: 0;
	padding: .625em;
	position: absolute;
	transform: translateX(-50%);
}

#hero .pause-toggle {
	background: var(--ws-dk-blue);
	border-radius: 50%;
	padding: 0;
	min-width: auto;
	font-size: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	position: absolute;
	right: 0.625rem;
	z-index: 2;
}

#hero .pause-toggle:before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(/images/icons/rotator-pause.svg) no-repeat center / contain;
}
#hero .pause-toggle.on:before {
	background-image: url(/images/icons/rotator-play.svg);
}
#hero .pause-toggle:is(:hover,:focus) {
	background: var(--ws-aqua);
	border:var(--ws-aqua) ;
}
#hero blockquote{
	font-size: 1rem;
	position: absolute;
	left:0;
	bottom: 0;
	z-index: 5;
	border-radius: 0;
	background:rgba(255,255,255,.9);
	padding:.5em 1em;
	margin:0}

#hero blockquote cite {display: block;	font-size: .8rem;}
/* EVENT (Homepage ribbon 2, About page ribbon 3) ------------------------------ */
#event {
	background: var(--ws-dk-blue);
}

#event::before {
	bottom: calc(100% + .125rem);
}

#event :is(time, h2, p) {
	color: #FFF;
}

#event .image {
	position: relative;
	z-index: 0;
}

#event .image::before {
	bottom: 0;
	content: '';
	position: absolute;
	top: 0;
	z-index: -1;
}

#event .image::before,
#event .image::after {
	background: var(--ws-lt-blue);
}

#event .image.aqua::before,
#event .image.aqua::after {
	background: var(--ws-aqua);
}

#event .image.green::before,
#event .image.green::after {
	background: var(--ws-green);
}

#event .image.red::before,
#event .image.red::after {
	background: var(--ws-red);
}

#event .image.orange::before,
#event .image.orange::after {
	background: var(--ws-orange);
}

#event .image.purple::before,
#event .image.purple::after {
	background: var(--ws-purple);
}

#event .image.white::before,
#event .image.white::after {
	background: #FFF;;
}


#event .image img {
	width: 15.9375em;
}

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

#event h2 {
	font-size: clamp(1.5em, 1.37em + 0.58vw, 1.875em); /* 360 - 1400 */
	margin: 0 0 .25rem;
	text-transform: uppercase;
}

#event :is(time, p) {
	color: rgba(255,255,255,.8);
}
.interior time {font-size: clamp(1em,.957em + .19vw,1.125em);}






/* SERVICES  ------------------------------ */

/* Homepage - Ribbon 3 */
#our-services {
	background-color: var(--lightest-blue-40);
	padding-block: clamp(3em, 2.308em + 3.08vw, 5em); /* 360 - 1400 */
	position: relative;
	text-align: center;
}


#our-services .wrap {
	max-width: calc(61.5em + 2 * var(--ws-gap));
}

#our-services h2 {
	color: var(--blue);
	margin: 0 0 .25em;
	text-transform: uppercase;
}

#our-services ul.ws-flex {
	justify-content: space-between;
	margin-top: 5em;
}

#our-services li {
	max-width: 17.875em;
}

#our-services .image {
	aspect-ratio: 1;
	background: no-repeat center / cover;
	border-radius: 50%;
	margin: 0 0 1.25em;
	position: relative;
	width: 100%;
}

#our-services .image::after {
	border: 1px solid var(--ws-yellow);
	border-radius: 50%;
	content: '';
	height: 100%;
	opacity: .5;
	position: absolute;
	z-index: -1;
	width: 100%;
}

#our-services li:is(:nth-child(1), :nth-child(4)) .image::after { left: .6875em; top: -.6875em; }
#our-services li:is(:nth-child(2), :nth-child(5)) .image::after { left: .6875em; top: .6875em; }
#our-services li:is(:nth-child(3), :nth-child(6)) .image::after { left: 0; top: -.6875em; }

#our-services strong {
	line-height: 1;
}

#our-services .textbox p {
	font-size: clamp(1em, 0.712em + 0.62vw, 1.25em); /* 360 - 1400 */
}

/*  About Page - Ribbon 3 */
#services {
	background: var(--lightest-blue);
	padding-block: 4em;
	text-align: center;
}

#services h2 {
	color:var(--blue);
	margin: 0 auto .25em auto;
	max-width: 30em;
	text-align: center;
}

#services h3 {
	color:var(--blue);
}

#services .wrap > p {
	color: var(--ws-dk-grey);
	font-size: 1.125rem;
	max-width: 49.0625rem;
	margin: 0 auto 2rem;
	line-height: 1.778;
}

#services .wrap ul.twoCol li {
	color: #FFF;
	text-align: left;
}

#services ul.ws-flex {
	justify-content: center;
	margin: 5em 0 3.625em;
	row-gap: clamp(2.5em, 1.955em + 2.73vw, 4em);
	--ws-gap: 1em;
}
#services ul.ws-flex:last-child {
	margin-bottom: 0;
}

#services ul.ws-flex li {
	max-width: 21.875em;
	position: relative;
}

#services ul.ws-flex li>a {
	align-items: center;
	background: #FFF;
	border-radius: 0.625em;
	color: var(--ws-dk-grey);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 4em clamp(1em, 0.455em + 2.73vw, 1.25em) 1.875em;
}

#services ul.ws-flex li>a::before {
	aspect-ratio: 1;
	background: no-repeat center;
	background-size: 2.375em 1.875em;
	border-radius: 50%;
	content: '';
	left: 50%;
	position: absolute;
	top: 0;
	transform: translate(-50%,-50%);
	transition: all .3s ease;
	width: 4.375em;
	box-shadow: 0 0 0 7px #fff;
}

#services ul.ws-flex li:nth-child(even)>a::before { background-color: var(--light-blue);}
#services ul.ws-flex li:nth-child(odd)>a::before { background-color: var(--blue);}

#services ul.ws-flex li.hand-heart>a::before {background-image: url(/images/icons/white-icon-hand-heart.svg)}
#services ul.ws-flex li.bed>a::before {background-image: url(/images/icons/white-icon-bed.svg)}
#services ul.ws-flex li.head-gear>a::before {background-image: url(/images/icons/white-icon-head-gear.svg)}
#services ul.ws-flex li.house-person>a::before {background-image: url(/images/icons/white-icon-house-person.svg)}
#services ul.ws-flex li.house-heart>a::before {background-image: url(/images/icons/white-icon-house-heart.svg)}
#services ul.ws-flex li.hand-sparkle>a::before {background-image: url(/images/icons/white-icon-hand-sparkle.svg)}

#services ul.ws-flex li.experience>a::before {background-image: url(/images/icons/police.svg)}
#services ul.ws-flex li.trust>a::before {background-image: url(/images/icons/icon-trust.svg)}
#services ul.ws-flex li.quality>a::before {background-image: url(/images/icons/chart.svg)}
#services ul.ws-flex li.flexibility>a::before {background-image: url(/images/icons/users.svg)}
#services ul.ws-flex li.advocacy>a::before {background-image: url(/images/icons/icon-advocacy.svg)}
#services ul.ws-flex li.value>a::before {background-image: url(/images/icons/icon-value.svg)}
#services ul.ws-flex li.convenience>a::before {background-image: url(/images/icons/icon-convenience.svg)}
#services ul.ws-flex li.availability>a::before {background-image: url(/images/icons/icon-availability.svg)}

#services ul.ws-flex li p {
	color: var(--ws-dk-grey);
	font-size: 1.125em;
	line-height: 1.4;
}

#services ul.ws-flex li>a>span.button {
	color: #FFF;
	font-size: 1em;
	margin-top: auto;
}

#services ul.ws-flex li>a>p strong {
	font-size: 1.5rem;
	line-height: 1;
}

#services ul.ws-flex li>a>span>small {
	display: block;
	font-size: .75em;
	line-height: 1.33;
}

#services ul.twoCol li::before {
	background-image: url('/images/icons/circle-right-orange.svg');
}




/*  Services Landing Page - Ribbon 2 */
#services-list {
	background-color: #FFF9EC;
	padding-block: clamp(3em, 2.481em + 2.31vw, 4.5em); /* 360 - 1400 */
}

#services-list li .anchor {
	grid-row: 1 / 2;
}

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

#services-list .image {
	aspect-ratio: 1;
	background: no-repeat center / cover;
	border: 5px solid #FFF;
	border-radius: 50%;
	max-width: 21.5625em;
	position: relative;
	z-index: 2;
}

#services-list .image::after {
	border: 1px solid var(--light-blue-40);
	border-radius: 50%;
	bottom: clamp(0.75em, 0.707em + 0.19vw, 0.875em);
	content: '';
	height: 100%;
	left: clamp(0.75em, 0.707em + 0.19vw, 0.875em);
	position: absolute;
	width: 100%;
}

#services-list .icon {
	align-items: center;
	aspect-ratio: 1;
	bottom: 0;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	position: absolute;
	right: 0;
	width: clamp(6em, 5.308em + 3.08vw, 8em); /* 360 - 1400 */
	z-index: 1;
}

#services-list .icon.orange {
	background: var(--ws-orange);
}

#services-list .icon.blue {
	background: var(--ws-blue);
}

#services-list .icon img {
	object-fit: contain;
	max-height: calc(100% - 2.5em);
	max-width: calc(100% - 2.5em);
}

#services-list .icon img[src*='shield.svg'] {
	width: 3.125em;
}

#services-list .textbox {
	background: #fff;
}

#services-list strong.heading-2 {
	display: block;
	line-height: .8;
	margin: 0 0 0.4em;
}

#services-list p {
	line-height: 1.77;
}



/*  Impact Page - Ribbon 2 */
#services.impact-page {
	background-color: #FFF9EC;
	padding-block: clamp(3em, 1.909em + 5.45vw, 6em);
	text-align: left;
}

#services.impact-page .wrap > p {
	font-size: clamp(1em, 0.712em + 0.62vw, 1.25em); /* 360 - 1400 */
}

#services.impact-page .wrap > p:last-child {
	margin-bottom: 0;
}




/* TEXT ------------------------------ /
- Homepage ribbon 5
- About page ribbon 2
*/

#text {
	padding-block: clamp(3rem, 1.788rem + 5.38vw, 6.5rem); /* 360 - 1400 */
	position: relative;
}

#text.centered {
	text-align: center;
}

#text.centered h2 {
	margin: .25em 0 .5em;
}

#text.centered h2>span {
	text-decoration: none;
}

#text.centered h2::after {
	background: var(--ws-orange);
	display: block;
	content: '';
	height: .25rem;
	margin: 0 auto;
	width: 4.125rem;
}

#text.centered h3:first-of-type {
	color: var(--ws-blue);
	font-size: clamp(1.375em, 1.159em + 0.96vw, 2em); /* 360 - 1400 */
}

#text .button {
	margin-top: 1em;
}



/* LEADERSHIP ( About page ribbon 4) ------------------------------ */
#leadership {
	padding-block: clamp(3em, 2.308em + 3.08vw, 5em); /* 360 - 1400 */
	text-align: center;
}

#leadership .textbox {
	margin: 0 auto clamp(2em, 1.636em + 1.82vw, 3em);
	max-width: 49.0625rem;
}

#leadership h2 {
	margin: 0 0 .25em;
}


#leadership .circle a::after {
	height: 100%;
	width: 100%;
}

#leadership li:nth-child(odd) a::before { background: var(--ws-blue); }
#leadership li:nth-child(even) a::before { background: var(--ws-aqua); }

#leadership li:nth-child(odd) a::after { left: .6875em; top: -.6875em; }
#leadership li:nth-child(even) a::after { left: .6875em; top: .6875em; }



/* JOIN OUR TEAM ( Careers page ribbon 4) ------------------------------ */
#joinOurTeam {
    background-color: var(--lightest-blue-40);
	padding-block: clamp(3em, 2.308em + 3.08vw, 5em); /* 360 - 1400 */
}

#joinOurTeam h2 {
	text-align: center;
}

#joinOurTeam form {
    background: #fff;
    border: 1px solid var(--light-blue-40);
    border-radius: 0.5em;
    margin: 0 auto;
    max-width: 800px;
    padding: 1.5em;
}



/* LOGOS ( About page ribbon 7) ------------------------------ */
#logos {
	padding-block: clamp(3em, 2.308em + 3.08vw, 5em); /* 360 - 1400 */
	text-align: center;
}

#logos h2 {
	color: var(--ws-dk-blue);
	font-size: clamp(1.5em, 1.37em + 0.58vw, 1.875em); /* 360 - 1400 */
	margin: 0 0 1em;
}

#logos ul {
	align-items: center;
	justify-content: center;
}

#logos ul + h2 {
	margin-top: clamp(3em, 2.308em + 3.08vw, 5em); /* 360 - 1400 */
}

#logos a {
	display: block;
}

#logos img {
	max-height: 4em;
	max-width: min(10em, 100%);
}

#logos .white img {
	background: var(--ws-blue-2);
	padding: .5em;
}



/* CALLOUTS-2 (Programs & Services ribbon 2) ------------------------------ */
#callouts-2 {
	padding-block: clamp(3em, 2.308em + 3.08vw, 5em); /* 360 - 1400 */
}

#callouts-2 ul.ws-flex {
	row-gap: 5em;
}

#callouts-2 h2 {
	margin: 0 0 1.5em;
	text-align: center;
}

#callouts-2 .button {
	margin: .5em 0 0;
	padding-block: .6875rem;
}

#callouts-2 div>strong:first-child {
	color: var(--ws-dk-blue);
	display: block;
	font-size: clamp(1.5em, 1.37em + 0.58vw, 1.875em); /* 360 - 1400 */
	line-height: 1;
	margin: 0 0 .5em;
}

#callouts-2 .button:not(:hover, :focus) {
	background: rgba(var(--ws-lt-blue-rgb), .4);
	border-color: var(--ws-lt-blue-3);
}

#callouts-2 li>a {
	align-items: start;
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(6, 1fr);
}

#callouts-2 .image {
	aspect-ratio: 1;
	align-items: center;
	display: grid;
	grid-column: 1 / 3;
	justify-content: center;
	padding: 1em;
	position: relative;
	text-align: center;
}

#callouts-2 .image::before,
#callouts-2 .image::after {
	aspect-ratio: 1;
	border-radius: 50%;
	content: '';
	left: 50%;
	position: absolute;
	top: 50%;
	width: 100%;
	z-index: -1;
}

#callouts-2 .image::before {
	opacity: .04;
	transform: translate(-50%,-50%);
}

#callouts-2 .image::after {
	border-style: solid;
	border-width: 1px;
	opacity: .16;
	transform: translate(-50%, calc(-50% + .75em));
}

#callouts-2 li:is(:nth-child(8n+1), :nth-child(8n+5)) .image::before { 	background: var(--ws-orange); }
#callouts-2 li:is(:nth-child(8n+1), :nth-child(8n+5)) .image::after { border-color: var(--ws-orange); }

#callouts-2 li:is(:nth-child(8n+2)) .image::before { background: var(--ws-green); }
#callouts-2 li:is(:nth-child(8n+2)) .image::after { border-color: var(--ws-green); }

#callouts-2 li:is(:nth-child(8n+3), :nth-child(8n+6)) .image::before { background: var(--ws-blue); }
#callouts-2 li:is(:nth-child(8n+3), :nth-child(8n+6)) .image::after { border-color: var(--ws-blue); }

#callouts-2 li:is(:nth-child(8n+4), :nth-child(8n+7)) .image::before { background: var(--ws-purple); }
#callouts-2 li:is(:nth-child(8n+4), :nth-child(8n+7)) .image::after { border-color: var(--ws-purple); }

#callouts-2 li:is(:nth-child(8n+8)) .image::before { background: var(--ws-red); }
#callouts-2 li:is(:nth-child(8n+8)) .image::after { border-color: var(--ws-red); }

#callouts-2 li:is(:nth-child(8n+1), :nth-child(8n+4), :nth-child(8n+5)) .image::after { transform: translate(-50%, calc(-50% - .75em)); }

#callouts-2 .textbox {
	grid-column: 3 / 7;
	margin-top: 2em;
}

#callouts-2 p {
	color: #000;
}




/* DONATION (Get Involved ribbon 2) ------------------------------ */
#donation {
	padding-block: clamp(3em, 2.308em + 3.08vw, 5em); /* 360 - 1400 */
}

#donation h2 {
	font-size: clamp(1.625em, 1.322em + 1.35vw, 2.5em); /* 360 - 1400 */
}

#donation h2:nth-of-type(2)>span {
	display: block;
	margin: 0 0 .125em;
	text-underline-offset: .25em;
}

#donation h3 {
	color: var(--ws-blue);
	margin: 1em 0;
}

#donation ul {
	margin: 2em 0;
}

#donation li {
	margin: 0 0 .5em;
}


/* FORM ----- */

/* Forms - without tables ----- */
form.narrow .form-flex,
.narrow.form-flex {
    max-width: 18.75em;
}

.form-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.form-flex fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

.form-flex fieldset legend {
    float: left;
    width: 100%;
}

.form-flex>div {
    margin: 0 0 .75em;
}

.form-flex>div.g-recaptcha {
	max-width: 100%;
	overflow: hidden;
}


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

.form-flex>div>label:first-of-type {
    display: block;
}

/* Checkboxes, radios */
.form-flex>div>fieldset>label {
    display: inline-block;
}

#donation form {
	background: var(--ws-lt-blue-4);
	border: 1px solid var(--ws-lt-blue);
	border-radius: .5rem;
}

#donation form>div:not(.button-wrap) {
	--ws-form-gap: clamp(0.5em, 0.348em + 0.67vw, 0.938em); /* 360 - 1400 */
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-form-gap);
	margin: 0 0 1em;
	padding: 1.5em 1em;
}

#donation form>div:nth-of-type(even) {
	background: rgba(255,255,255,.7);
}

#donation form .donate-or{
    justify-content: center;
}

#donation form strong {
	color: var(--ws-dk-blue);
	display: block;
	font-size: clamp(1.063em, 0.97em + 0.46vw, 1.375em); /* 360 - 1400 */
	line-height: 1.2;
	width: 100%;
}

#donation label>span {
	font-size: 0.9375em; /* 360 - 1400 */
}

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

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

#donation label.third {
	flex-direction: column;
	display: flex;
	width: calc( 33.33% - var(--ws-form-gap));
}

#donation label.third>span {
	margin-top: auto;
}

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

#donation label.required>span:after {
	content: '*';
	color: #FF0000;
}

#donation label.radio {
	cursor: pointer;
	padding-block: 1.125em;
	position: relative;
	text-align: center;
	z-index: 0;
}

#donation label.radio span {
	color: var(--ws-dk-blue);
	font-size: clamp(1.125em, 1.082em + 0.19vw, 1.25em);
}

#donation label.radio input {
	border: 0;
	clip: rect(0,0,0,0);
	height: 1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

#donation label.radio>div {
	background: #FFF;
	border: 1px solid var(--ws-lt-blue);
	border-radius: .5rem;
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

#donation label.radio input:checked ~ div {
	background: var(--ws-red);
}

#donation label.radio input:checked ~ span {
	color: #FFF;
}

#donation .other-amount div {
	position: relative;
}

#donation .other-amount span {
	color: #5B5B5B;
	font-size: 1rem;
	padding-left: 1.25em;
	position: absolute;
	text-align: right;
	top: calc(50% - 1px);
	transform: translate(0, -50%);
	width: calc(70% - clamp(1rem, -3.615rem + 9.85vw, 5rem))
}

#donation .other-amount span>b {
	color: var(--ws-dk-blue);
	font-size: 1.25rem;
	padding-left: .25em;
	position: relative;
	top: 1px;
}

#donation .other-amount {
	display: none;
}

#donation .other-amount input {
	color: var(--ws-dk-blue);
	font-size: 1.25rem;
	padding-block: .5625em;
	padding-left: calc(70% - clamp(1rem, -3.615rem + 9.85vw, 5rem));
}

#donation form button {
	width: 100%;
}

#donation form ::placeholder {
	color: #FFF;
}

#donation form input:focus::placeholder {
	color: #DDD;
}


/* CAREERS INTO RIBBON ------------------------------ /
*  - Careers page ribbon 2
*/
.careers-intro.border-bottom:before {
	bottom: -0.3125rem;
}
.careers-intro {
	background-color: var(--ws-blue);
	padding-block: clamp(5.3125em, 2.136em + 1.82vw, 6.375em);
	position: relative;
	text-align: center;
}

.careers-intro h2 {
	color:#fff;
}

.careers-intro .wrap > p {
	color:#fff;
    font-size: clamp(1em, 0.712em + 0.62vw, 1.25em);
}

.careers-intro form {
    background: #fff;
    border-radius: 0.5em;
    padding: 1.5em;
	text-align: left;
}

.careers-intro form :is(input, select, textarea) {
    background-color: #efefef;
}

.careers-intro .textbox {
	padding-inline: var(--ws-gap);
}

.careers-intro p {
	font-size: var(--ws-text-size);
}

.careers-intro .ws-grid img {
	aspect-ratio: 1;
	border-radius: 50%;
}

.careers-intro .images {
	aspect-ratio: 380 / 438;
	position: relative;
}

.careers-intro .images img.big {
	margin-left: auto;
	width: 90%;
}

.careers-intro .images img.small {
	border: 6px solid #FFF;
	bottom: 0;
	left: 0;
	outline: 1px solid #D2DCE9;
	position: absolute;
	width: 45.5%;
}




/* RESOURCES ------------------------------ */
.blog-intro .ws-grid .textbox h2 {
	color: var(--blue);
}

.blog-intro .ws-grid .textbox {
	background:#fff;
	margin-bottom: 2em;
}

.blog-intro .ws-grid .textbox article time {
	font-size: 0.875rem;
	font-style: italic;
	color: #666;
	display: block;
	margin-bottom: 0.875em;
}



#resources {
	background-color: #FFF9EC;
	padding-block: clamp(3em, 1.773em + 6.14vw, 6.375em);
}

#resources .textbox {
	max-width: 750px;
	text-align: center;
	margin: 0 auto clamp(1.375rem, 0.784rem + 2.95vw, 3rem);
}

#resources ul.ws-flex li {
	background:#fff;
	border: 2px solid var(--light-blue-40);
}

#resources h2 {
	color: var(--blue);
	text-transform: uppercase;
}

#resources ul.ws-flex li:nth-child(odd) {
	border-color: var(--light-blue);
}

#resources ul.ws-flex li strong {
	color: var(--blue);
	display: block;
	line-height: 1.25em;
	margin-bottom: 0.625em;
}

#resources ul.ws-flex li a:not(.button) {
    color:#000;
}

#resources ul.ws-flex li a:not(.button):is(:hover, :focus-visible) {
    color: var(--ws-dk-blue);
}

#resources p {
	color: #000;
}


/* /media/ page overrides */

#resources.media-page ul.ws-flex li {
	background: transparent;
	border: 0;
	padding: 0;
}

#resources.media-page ul.ws-flex li>a {
	border: 2px solid var(--light-blue-40);
	border-radius: .625em;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

#resources.media-page ul.ws-flex li>a::before {
	background: url('/images/news-bg.jpg');
	background-repeat: no-repeat;
	content: '';
	opacity: .075;
	position: absolute;
	inset: 0;
	z-index: -1;
}

#resources.media-page ul.ws-flex li:nth-child(odd)>a {
	border-color: var(--light-blue);
}

#resources.media-page .button {
	font-size: 1.125em;
	padding: .875em 1em;
}

#resources.media-page span.button {
	align-self: start;
	margin-top: auto;
}

#resources.media-page p::before {
	content: open-quote;
}

#resources.media-page p::after {
	content: close-quote;
}

#resources.media-page a.button {
	display: table;
	margin: 3em auto 0;
}




/* ADDITIONAL RESOURCES ------------------------------ */
#additional-resources {
    background-color: var(--ws-blue);
    padding-block: clamp(5.3125em, 2.136em + 1.82vw, 6.375em);
}

#additional-resources ul.ws-flex {
    justify-content: center;
}

#additional-resources li {
    max-width: 30em;
    padding-top: 5em;
}

#additional-resources li a {
    align-items: center;
    background: #fff;
    color:#fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 1em 2em;
    text-align: center;
}

#additional-resources li .image-container {
    aspect-ratio: 1/1;
    border-radius: 50%;
    box-shadow: 0 0 0 7px #fff;
    margin: -5em auto 1em;
    max-width: 10em;
    overflow: hidden;
    position: relative;
    width: 50%;
}

#additional-resources li .image-container img {
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    width: 100%;
}

#additional-resources li strong {
	color: var(--blue);
}

#additional-resources li :is(strong, p) {
    display: block;
    max-width: 75%;
}

#additional-resources li p {
    color: var(--ws-dk-grey);
    margin-top: 0.875em;
}







/* CIRCLE-TEXT ------------------------------ /
- Careers page ribbon 4
*/

.circle-text {
	padding-block: clamp(3em, 1.832em + 5.19vw, 6.375em) 4em; /* 360 - 1400 */
}

.circle-text h2.h1-size > span {
	text-decoration: none;
	position: relative;
}
.circle-text h2.h1-size > span:before {
	content: "";
	bottom: 0;
	left: -2px;
	right: -2px;
	background: var(--ws-orange);
	position: absolute;
	height: 4px;
}

.circle-text .image {
	padding: .625em;
	position: relative;
}

.circle-text .image>div {
	aspect-ratio: 1;
	background: no-repeat center / cover;
	border-radius: 50%;
}

.circle-text .image>div::after {
	border-radius: 50%;
	border: 1px dashed var(--ws-lt-blue-3);
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.circle-text p {
	font-size: clamp(1.125em, 1.082em + 0.19vw, 1.25em); /* 360 - 1400 */
}

.careers .cta::before {
	top: 0;
	box-shadow: 0 2px 0 #FFF;
}

/* TESTIMONIALS ROTATOR ------------------------------ /
- Careers page ribbon 5
*/
.testimonials-rotator {
	background: var(--ws-purple);
}
.testimonials-rotator .wrap {
	text-align: center;
}
.testimonials-rotator h2 {
	color: #FFF;
	font-size: 1.875rem;
	font-weight: 400;
	margin-bottom: 2.5rem;
}
.testimonials-rotator blockquote {
	color: #FFF;
	width: 100%;
	max-width: 49.0625rem;
	text-align: center;
	float: none;
	margin-inline: auto;
}
.testimonials-rotator blockquote p {
	line-height: 1.07;
}
.testimonials-rotator blockquote p:before, .testimonials-rotator blockquote p:after {
	color: #FFF;
}
.testimonials-rotator cite {
	color: #FFF;
	font-weight: 300;
	font-style: normal;
}
.testimonials-rotator .slick-slider {
	padding-inline: 2.5rem;
	margin-bottom: 2.5rem;
}
.testimonials-rotator .ts-button,
.testimonials-rotator .pause-toggle {
	background-color: transparent;
	border: 0;
	font-size: 1rem;
	min-width: auto;
	margin: 0;
	padding: 0;
	width: 1.5625rem;
	height: 1.5625rem;
}
.testimonials-rotator .ts-button:before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: .6;
	transition: all .2s ease;
}
.testimonials-rotator .slick-prev:before {background-image: url(/images/icons/circle-chevron-left.svg);}
.testimonials-rotator .slick-next:before {background-image: url(/images/icons/circle-chevron-right.svg);}
.testimonials-rotator .pause-toggle {
	position: relative;
}
.testimonials-rotator .pause-toggle:before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(/images/icons/circle-pause.svg) no-repeat center / contain;
	opacity: .6;
	transition: all .2s ease;
}
.testimonials-rotator .pause-toggle.on:before {
	background-image: url(/images/icons/circle-play.svg);
}
.testimonials-rotator button:is(:hover,:focus):before {opacity: 1;}


/* WORKPLACE AWARDS ------------------------------ /
- Careers page ribbon 5
*/
.workplace-awards .wrap {
	padding-block: 4.5rem 5.625rem;
	text-align: center;
}
.workplace-awards h2 {
	font-size: 1.875rem;
	font-weight: 400;
	margin-bottom: 2.5rem;
}
.workplace-awards ul.ws-flex {
	text-align: center;
}
.workplace-awards ul.ws-flex img {
	height: 9.375rem;
	width: auto;
	object-fit: contain;
}





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

.colored-circles {
	background: var(--blue);
	padding-block: clamp(3em, 1.818em + 5.91vw, 6.25em);
	position: relative;
	text-align: center;
	z-index: 0;
}

.colored-circles h2 {
	color: #FFF;
	font-size: var(--ws-text-40);
	margin: 0 0 1.5em;
	text-transform: uppercase;
}

.colored-circles ul.ws-flex {
	--ws-gap: 1em;
}

.colored-circles li {
	align-items: end;
	display: flex;
	justify-content: center;
	max-width: 24.125em;
	position: relative;
	z-index: 0;
}

.colored-circles li>div {
	align-items: center;
	aspect-ratio: 1;
	border-radius: 50%;
	display: flex;
	inset: auto auto auto 0;
	justify-content: center;
	padding: 1.5em;
}

.colored-circles li:nth-child(1)>div { background: var(--ws-aqua); }
.colored-circles li:nth-child(2)>div { background: var(--ws-yellow); }
.colored-circles li:nth-child(3)>div { background: var(--ws-red); }

.colored-circles strong {
	color: #FFF;
	line-height: 1.2;
	max-width: 90%;
}

.colored-circles li:nth-child(even) strong {
	color: var(--blue);
}

.colored-circles .textbox {
	margin-top: 3em;
	margin-inline: auto;
	max-width: 49.625em;
}

.colored-circles .textbox p {
	color: #FFF;
}



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

.circle-photo {
	overflow: hidden;
	padding-block: clamp(2.5em, 2.045em + 2.27vw, 3.75em) clamp(3em, 2.273em + 3.64vw, 5em);
	position: relative;
}

.circle-photo figure {
	border: 1px dashed var(--ws-lt-blue-3);
	border-radius: 50%;
	line-height: 0;
	margin: 0;
	padding: .625em;
}

.circle-photo figure img {
	border-radius: 50%;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.circle-photo h2 {
	font-size: var(--ws-text-40);
	text-transform: uppercase;
}

.circle-photo p {
	font-size: var(--ws-text-20);
}




/* DIAGRAM RIBBON ------------------------------ /
* - /impact/ page
*/

.diagram {
	border-top: 5px solid #BDDAE8;
	padding-block: clamp(3em, 2.091em + 4.55vw, 5.5em) clamp(3.5em, 2.591em + 4.55vw, 6em);
	position: relative;
}

.diagram::before {
	background: linear-gradient(180deg, rgba(80, 156, 192, 0.1) 0%, rgba(136, 203, 225, 0) 100%);
	content: '';
	height: 40%;
	inset: 0 0 auto;
	position: absolute;
}

.diagram .textbox {
	margin: 0 auto clamp(2em, 1.455em + 2.73vw, 3.5em);
	max-width: 49.625em;
}

.diagram h2 {
	font-size: var(--ws-text-40);
	text-transform: uppercase;
}

.diagram figure img {
	display: block;
	margin-inline: auto;
}





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

.icon-boxes {
	background: var(--ws-aqua);
	padding-block: clamp(3em, 2.091em + 4.55vw, 5.5em) clamp(3.5em, 2.591em + 4.55vw, 6em);
	position: relative;
	text-align: center;
	z-index: 0;
}

.icon-boxes h2 {
	color: #FFF;
	font-size: var(--ws-text-40);
	text-transform: uppercase;
	margin: 0 0 clamp(1.5em, 0.773em + 3.64vw, 3.5em);
}

.icon-boxes ul.ws-flex {
	justify-content: center;
	row-gap: 3.6875em;
	--ws-gap: 1.125em;
}

.icon-boxes li {
	background: #FFF;
	border-radius: 0.625em;
	position: relative;
	padding: clamp(3.5em, 3.182em + 1.59vw, 4.375em) clamp(1em, 0.682em + 1.59vw, 1.875em) clamp(3em, 2.864em + 0.68vw, 3.375em);
}

.icon-boxes li.testimonial {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.icon-boxes li::before {
	aspect-ratio: 1;
	border: 5px solid #FFF;
	border-radius: 50%;
	content: '';
	height: 5.625em;
	inset: 0 auto auto 50%;
	position: absolute;
	transform: translate(-50%,-50%);
}

.icon-boxes li:nth-child(odd)::before { background: var(--blue); }
.icon-boxes li:nth-child(even)::before { background: var(--light-blue); }

.icon-boxes li::after {
	aspect-ratio: 1;
	background: #FFF;
	content: '';
	height: 2.5em;
	inset: 0 auto auto 50%;
	mask: url('/images/icons/star.svg') no-repeat center / contain;
	position: absolute;
	transform: translate(-50%,-50%);
}

.icon-boxes li>span {
	font-size: var(--ws-text-20);
}

.icon-boxes li blockquote {
	margin: 0;
	padding: 0;
}



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

.ypi-videos {
	background: #FFF;
	padding-block: clamp(3em, 2.273em + 3.64vw, 5em);
	position: relative;
}

.ypi-videos h2 {
	color: var(--ws-blue);
	font-size: var(--ws-text-40);
	margin: 0 0 1em;
	text-align: center;
	text-transform: uppercase;
}

.ypi-videos .ws-flex {
	align-items: start;
	--ws-gap: 1em;
}

.ypi-videos article>button {
	background: transparent !important;
	border: 0;
	font-size: 1em;
	font-weight: 400;
	height: 100%;
	line-height: 1.2;
	margin: 0;
	outline-offset: .5em;
	padding: 0;
	text-align: left;
	width: 100%;
}

.ypi-videos figure {
	line-height: 0;
	margin: 0 0 1em;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.ypi-videos figure::after {
	aspect-ratio: 1;
	background: url('/images/icons/circle-play-solid.svg') no-repeat center / contain;
	border-radius: 50%;
	box-shadow: 0 0 10px 5px rgba(0,0,0,.2);
	content: '';
	inset: 50% auto auto 50%;
	position: absolute;
	transform: translate(-50%,-50%);
}

.ypi-videos img {
	aspect-ratio: 389 / 218;
	height: 100%;
	object-fit: cover;
	position: relative;
	transition: all .5s ease;
	width: 100%;
	z-index: -1;
}

.ypi-videos h3 {
	color: var(--blue);
	font-size: var(--ws-text-24);
}

.ypi-videos h3>span {
	color: var(--ws-dk-blue);
	display: block;
	font-size: 1rem;
	font-weight: 400;
	margin: .125em 0 0;
	text-transform: none;
}

.ypi-videos p {
	color: #000;
	font-size: var(--ws-text-20);
	text-transform: none;
}

.ypi-videos .button {
	display: table;
	margin: 2em auto 0;
}




/* DIALOG / POPUP ------------------------------ /
* - .ypi-videos ribbon video popups
*/

dialog {
  background-color: rgba(0,0,0,0.8);
  border: 0;
  height: 100%;
  left: 0;
  max-height: 100%;
  max-width: 100%;
  padding: 3.5em 1em 2.5em;
  position: fixed;
  top: 0;
  width: 100%;
}

.dialog-body {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

dialog .dialog-content {
  background-color: #FFF;
  max-width: 45em;
  position: relative;
  width: 100%;
}

dialog .dialog-content>div {
  background: #FFF;
  max-height: calc(100vh - 5em);
  overflow: auto;
  padding: 1em;
}

dialog button.close {
  background: #FFF !important;
  inset: -2.25em 0 auto auto;
  margin: 0;
  mask: url('/images/icons/xmark.svg') no-repeat center / contain;
  min-width: 0;
	padding: 1em;
  position: absolute;
}



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