@charset "UTF-8";
/*
Theme Name: Web Solutions
Theme URI: https://www.websolutions.com/
Author: Web Solutions
Author URI: https://www.websolutions.com/
Description: WordPress wpCode
Version: 2.0
Text Domain: wpcodev2

Web Solutions is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
*/



html {
	scroll-padding-top: 2.5em; /* Scroll offset for sticky mobilenav */
}





/* TYPOGRAPHY ------------------------------ */
/* h1 { font-size: 1.75em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4, th { font-size: 1.125em; }
h5 { font-size: 1.0625em; }
h6 { font-size: 1.0em; } */

.intro { font-size: 1.125em; }

body, body.page-template-template-splash-page {
	background: #FFF;
}

/* TRANSITIONS ------------------------------ */
#mobilenav span, #navContainer ul ul {
	transition: all .3s ease;
}



/* HEADER ------------------------------ */
#wpadminbar {
	position: fixed;
}

body>header {
	background: #FFF;
	display: contents;
}

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

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

body>header .wrap {
	display: contents;
}

#brand {
	display: block;
	padding: 1em;
	max-width: 22em;
	margin: 0 auto;
}

#brand img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}

#navContainer {
	background-color: #333;
	bottom: 0;
	left: 100%;
	max-height: 100vh;
	overflow: auto;
	position: fixed;
	right: 0;
	top: 0;
	transition: left 200ms ease;
	z-index: 5;
	-webkit-overflow-scrolling: touch;
}

.admin-bar #navContainer {
	top: 46px;
}

body.slideNav {
	overflow: hidden;
}

.slideNav #navContainer {
	left: 25%;
}

#navContainer nav {
	display: block;
}

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

#navContainer li {
	display: block;
	position: relative;
	width: 100%;
}

#navContainer :where(a, aside.toggleNav) {
	color: #fff;
	cursor: pointer;
	display: block;
	line-height: 3em;
	padding: 0 1em;
	width: 100%;
}

#navContainer li.on a {
	background-color: var(--red);
	color: #fff
}

#navContainer li.expand {
	background-color: var(--red);
}

#navContainer #mainnav>ul>li>button {
	opacity: 0.5;
	display: block;
	position: absolute;
	right: 0.1875rem;
	top: 0;
	width: 3em;
	height: 3em;
}

#navContainer #mainnav>ul>li.expand>button {
	opacity: 1
}

#navContainer #mainnav>ul>li>button::after,
#navContainer #mainnav>ul>li>button::before {
	background-color: #fff;
	content: '';
	display: block;
	height: 0.125rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform-origin: center center;
	transition: transform .2s ease;
	width: 50%;
}

#navContainer #mainnav>ul>li>button::before {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform .2s ease;
}

#navContainer #mainnav>ul>li>button::after,
#navContainer #mainnav>ul>li.expand>button::before {
	transform: translate(-50%, -50%) rotate(0deg);
}

#navContainer ul ul {
	font-size: .8em;
	height: 0;
	overflow: hidden;
}

#navContainer ul ul a {
	padding: 0.5em 1em 0.5em 2em;
	line-height: 1.5em
}

#navContainer ul ul li.current-menu-item {
	background-color: rgba(255,255,255,.1)
}

#navContainer :is(.current_page_parent, .current_page_item, .current_page_ancestor)>ul {
	height: auto;
}

#navContainer ul ul ul a {
	padding: 0.5em 1em 0.5em 2.5em;
}

#navContainer form {
	display: flex;
	overflow: auto;
	padding: 1em;
	width: 100%;
}

#navContainer form .search-submit {
	width: 6em;
}

#mobilenav {
	align-items: center;
	background-color: var(--dark-green);
	display: flex;
	justify-content: center;
	position: sticky;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 4;
}

body.admin-bar #mobilenav {
	top: 46px
}

#mobilenav :is(a, span) {
	align-self: auto;
	color: #fff;
	cursor: pointer;
	flex: 1 1 auto;
	line-height: 2.5em;
	order: 0;
}

#mobilenav *+* {
	border-left: 1px solid rgba(255,255,255,0.74)
}

#mobilenav span {
	display: flex;
	justify-content: center;
}

#mobilenav span svg {
	margin-left: .375em;
	pointer-events: none;
	width: 1.125em;
}

#mobilenav span path {
	fill: #FFF;
}

.search-form input[type="search"] {
	background-color: #FFF;
	border: 0;
	font-size: 1em;
	height: 2em;
	line-height: 2em;
	padding: 0 0 0 .5em;
	width: calc(100% - 2em);
}

.search-form .search-submit {
	background-color: #ccc;
	border: 0;
	color: #000;
	float: left;
	font-size: 1em;
	height: 2em;
	line-height: 2em;
	padding: 0;
	width: 2em;
	-webkit-appearance: none;
}

.search-form .screen-reader-text {
	display: none;
}

.slideNav>nav {
	right: 0;
}

.page-template-template-splash-page header #mobilenav {
	display: none;
}
body.page-template-template-splash-page header #brand {
	padding: 1.5rem;
	max-width: 22rem;
}
body.page-template-template-splash-page .splash-hero {
	min-height: calc(100vh - 6.1875rem);
}
.logged-in.admin-bar .splash-hero {
    min-height: calc(100vh - 9.0625rem);
}
body.page-template-template-splash-page .splash-hero .wrap {
	padding-block: 4.5rem;
}
body.page-template-template-splash-page .splash-hero h1 {
	font-size: 1.875rem;
}
body.page-template-template-splash-page .splash-hero p {
	font-size: 1.25rem;
}
/* MAIN ------------------------------ */
#content {
	padding: 2em 0;
}

.twoCol, .threeCol, .resCol {
	columns: auto;
}

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

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


.why-become ul li {
	width: calc(50% - 1.25rem);
}


.home-hero .wrap {
	flex-direction: column-reverse;
	gap: 3rem;
}
.home-hero .home-hero-content, .home-hero .hero-video {
	width: 100%;
}
.home-hero .videoContainer {
	padding-top: 56.25%;
}

.pageHeader {
	clip-path: polygon(0 0, 100% 0, 100% 70%, 0% 100%);
}

.why-become ul {
	gap: 1.5rem 1rem;
}
.why-become ul li {
	width: calc(50% - .5rem);
}
.icon-list-back {
	padding-top: 1rem;
}

figure.wp-block-pullquote {
	width: 100%;
	padding: 0px;
	margin: 3rem 0 2rem;
}

.testimonials .slick-dots {
	flex-wrap: wrap;
}

/* BLOCKS */
.gift-cta {margin: 3em 0;}
.lists-container .gift-cta {margin: 2em 0 0;}
.ppc-main .wrap {
	overflow: visible;
}
.ppc-main .gift-cta.gift-cta-solo {
	position: sticky;
	bottom: 0;
	width: 100%;
	left: 0;
	background: #FFF;
	z-index: 2;
	padding-bottom: 1rem;
	padding-top: 1rem;
	margin: 1.5em 0 2em;
}
.ppc-main .gift-cta.gift-cta-solo:before {
	content: "";
	position: absolute;
	width: calc(100% + 10vw);
	top: 0;
	left: -5vw;
	bottom: 0;
	background: var(--light-blue);
}
.ppc-main .gift-cta.gift-cta-solo * {
	position: relative;
	z-index: 1;
}
.ppc-main .gift-cta.gift-cta-solo .button {
	border: 0;
}


/* BLOG FOOTER CTA --------------------- */
.blog-footer-cta {
	clip-path: polygon(0 3.5%, 100% 0, 100% 102%, 0% 102%);
}
.blog-footer-cta .wrap {
	padding-top: 5rem;
	padding-bottom: 3.625rem;
}
.blog-footer-cta .icon-circle {
	font-size: 0.875rem;
}
.blog-footer-cta p {
	font-size: 1.25rem;
}
.blog-footer-cta .blog-cta-slide {
	padding-bottom:5%;
}

/* FOOTER ------------------------------ */
body>footer {
	background: #000;
}
body>footer .search-form {
	display: block;
	width: 100%;
}

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

body>footer .wrap nav {
	display: block;
}

body>footer .wrap nav a+span:before {
	content: "|";
	margin: 0 0.5em;
}
body>footer .wrap {display: -ms-flexbox;display: -webkit-box;display: flex;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-ms-flex-pack: start;-webkit-box-pack: start;justify-content: flex-start;-ms-flex-line-pack: stretch;align-content: stretch;-ms-flex-align: stretch;-webkit-box-align: stretch;align-items: stretch; text-align: center;}
body>footer .wrap nav {display: block}

#exposure {
	order: 1;
}

/* FAMILY BAR */
#nkr-familybar {
	padding:1em .5em;
}
#nkr-familybar span {
	margin-bottom: .5rem;
}
#nkr-familybar a {
	line-height: 1.7em;
}
#nkr-familybar li {
	display: block;
	line-height: 1em;
}

/* /family bar */



/* 600 */
@media (max-width: 37.5rem) {
	.why-become ul {
		max-width: 16.5625rem;
		margin-inline: auto;
	}
	.why-become ul li {
		width: 100%;
	}

	.photogrid ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: clamp(4.375rem, 2.9797rem + 6.9767vw, 6.25rem);
		gap: .5rem;
	}
	.photogrid ul li:nth-child(1),
	.photogrid ul li:nth-child(2) {
		grid-row: 1 / 4;
	}
	.photogrid ul li:nth-child(3),
	.photogrid ul li:nth-child(4) {
		grid-row: 4 / 7;
	}
	.photogrid ul li:nth-child(5),
	.photogrid ul li:nth-child(6) {
		grid-row: 7 / 10;
	}
	.photogrid ul li:nth-child(7),
	.photogrid ul li:nth-child(8) {
		grid-row: 10 / 13;
	}
	.photogrid ul li:nth-child(9),
	.photogrid ul li:nth-child(10) {
		grid-row: 13 / 16;
	}
	.photogrid ul li:nth-child(11),
	.photogrid ul li:nth-child(12) {
		grid-row: 16 / 19;
	}
	.photogrid ul li:nth-child(13),
	.photogrid ul li:nth-child(14) {
		grid-row: 19 / 22;
	}
	.photogrid ul li:nth-child(15),
	.photogrid ul li:nth-child(16) {
		grid-row: 22 / 25;
	}

	.photogrid + * {
		margin-top: -95px;
	}

	.blog-footer-cta p {font-size: 1.125rem;}
	.highlight.donors-blog-highlight .alignright {max-width: 100%; float: none; margin: 0 auto 1.5rem;}
	.lists-container li {font-size: 1rem;}

	.highlight.donors-blog-highlight figure.alignright figcaption {
		text-align: left;
	}

	fieldset.filters .filters-inner {
		flex-direction: column;
	}
}
