/*
Theme Name: David Bohnett Foundation bizwrap
Theme URI: 
Description: A simple responsive theme based on the Bootstrap framework. Includes multiple page templates, two different sidebars and a theme options panel.
Version: 1.0
Author: Webschool
Author URI: 
Template: bizwrap
Tags: black, green, white, light, dark,one-column, two-columns, full-width-template,left-sidebar, right-sidebar, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
License: GNU General Public License v2.0 & Apache License 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html http://www.apache.org/licenses/LICENSE-2.0
*/
/* slider style overrides */
/* Table of Contents
1) Master Typography
2) Layout
*/

/* 1) Master Typography ======================================================================================= */
/* 
This set is broken, use Google Font.

*/

/* var settings
================================================== */
:root {
	--color-primary: #ee3241; /* Bohnett Red */
	--color-primary-rgb: 238, 50, 65;
	--color-primary-light: #e0614b; /* Bohnett Hover */

	--color-cardianl-red: #b71312;

	--color-brown: #a28e7d; /* Background lighter Brown  */
	--color-light-brown: #cba33e; /* Hyperlinked Headlines */

	--color-dark: #100504; /* Off Black */
	--color-gray: #ccccca; /* Border Gray */
	--color-gray2: #b3b3b3;
	--color-deep-gray: #6a6b6c; /* Grey Body Type */
	--color-near-white: #f3efef; /* Almost White */
	--color-beige: #e8d59c; /* Beige Buttons */
	--color-white: #fff;
	--font-stack: Raleway, 'Helvetica Neue', Helvetica, sans-serif;
}

/* Basic Styles
================================================== */
body {
	font-family: var(--font-stack);
	font-size: 18px;
	font-variant-numeric: lining-nums;
	line-height: 1.8;
	font-weight: 400;
	color: var(--color-deep-gray);
	background: var(--color-white, #fff);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	cursor: default;
}

a {
	text-decoration: none;
	color: var(--color-primary);
}
a:hover {
	text-decoration: none;
	color: var(--color-primary-light);
}
a.hover-color {
	-webkit-transition: all 200ms ease-in;
	-o-transition: all 200ms ease-in;
	-moz-transition: all 200ms ease-in;
	transition: all 200ms ease-in;
}
a.hover-color:hover {
	color: var(--color-primary-light) !important;
}

/* Enable custom submit button styling in Safari mobile */
input[type='submit'] {
	-webkit-appearance: none;
}

::-moz-selection {
	text-shadow: none;
	background-color: var(--color-primary-light);
}

::selection {
	text-shadow: none;
	background-color: var(--color-primary-light);
}

/* Typography
Use unitless line height, see:
https://css-tricks.com/almanac/properties/l/line-height/ 
================================================== */

p {
	font-size: 1em;
	line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-stack);
	margin-top: 0;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	font-weight: inherit;
}
h1 {
	font-size: 46px;
	line-height: 1.38;
	margin-bottom: 20px;
}
h2 {
	font-size: 1.3em;
	line-height: 1.4;
	margin-bottom: 0.75em;
}
h3 {
	font-size: 28px;
	line-height: 1.2143;
	margin-bottom: 8px;
}
h4 {
	font-size: 21px;
	line-height: 1.43;
	margin-bottom: 4px;
}
h5 {
	font-size: 17px;
	line-height: 1.41;
}
h6 {
	font-size: 14px;
	line-height: 1.5;
}

em {
	font-style: italic;
}
strong {
	font-weight: 700;
}
small {
	font-size: 80%;
}

h3.subtitle {
	font-weight: 700;
	font-size: 1em;
	color: var(--color-gray2);
	font-style: italic;
}
h4.heading-mini {
	font-weight: 700;
	font-size: 1.5em;
	color: var(--color-dark);
	margin-bottom: 30px;
	text-transform: uppercase;
}
h3.heading-sec {
	font-weight: 700;
	display: block;
	margin-bottom: 25px;
	color: var(--color-dark);
	font-size: 23px;
}
h3.heading-sec:first-letter {
	border-bottom: 0px;
}

.header-main {
	width: 100%;
}

.section-header {
	padding: 13px 21px;
	text-align: left;
}
.section-header > * {
	margin: 0;
	padding: 0;
}

/* color uilitiy*/

.text-dark {
	color: var(--color-dark);
}

.bg-dark-red {
	background-color: var(--color-cardianl-red);
	color: var(--color-white);
}
.bg-near-white {
	background-color: var(--color-near-white);
	color: var(--color-dark);
}

/* some of the Bootstraps 4.0 Helper classes
================================================== */
.text-align-center {
	text-align: center;
}
.text-align-left {
	text-align: left;
}
.text-align-right {
	text-align: right;
}
.d-block {
	display: block;
}
.d-inline-block {
	display: inline-block;
}
.d-none {
	display: none;
}
.d-grid {
	display: grid;
	grid-template-columns: repeat(var(--g-columns, 2), 1fr);
	gap: var(--g-gap, 2rem);
}
@media (max-width: 767px) {
	.d-grid {
		grid-template-columns: 1fr;
	}
}
.align-items-center {
	align-items: center !important;
}
.p-4 {
	padding: 2rem !important;
}
.p-5 {
	padding: 3rem !important;
}
.m-5 {
	margin: 2rem !important;
}
.m-5 {
	margin: 3rem !important;
}

/* Buttons
================================================== */

.btn {
	display: inline-block;
	font-weight: 700;
	text-transform: none;
	padding: 1.2rem 2rem;
	color: var(--btn-txt-color);
	background-color: var(--btn-bg-color);
	border: none;
	font-size: 1.389rem;
	letter-spacing: 0.05em;
}
.btn:hover,
.btn:active,
.btn:focus {
	color: var(--btn-hover-text-color, var(--btn-txt-color));
	background-color: var(--btn-hover-bg-color, var(--btn-bg-color));
}
.btn.btn-primary {
	--btn-txt-color: var(--color-white);
	--btn-bg-color: var(--color-primary);
	--btn-hover-bg-color: var(--color-primary-light);
}
.btn.btn-secondary {
	--btn-txt-color: var(--color-white);
	--btn-bg-color: var(--color-beige);
	--btn-hover-bg-color: var(--color-cardianl-red);
}

/* legecy */
a.tan-link-box,
a.tan-link-box-right,
a.tan-link-box-left,
.tan-submit {
	border: 1px solid transparent;
	font-size: 1.389rem;
	font-weight: 700;
	text-align: center;
	text-transform: none;
	padding: 1.2rem 2rem;
	background-color: var(--color-primary);
	color: var(--color-white);
}
a.tan-link-box-right,
a.tan-link-box-left {
	min-width: 260px;
	float: right;
	clear: both;
}
a.tan-link-box-left {
	float: left;
}
a.tan-link-box-right:hover,
a.tan-link-box-left:hover,
a.tan-link-box:hover,
.tan-submit:hover {
	border: 1px solid transparent;
	text-decoration: none;
	background-color: var(--color-primary-light);
}
a.tan-link-box {
	padding: 10px 16px;
}

/* containers */
.container--md {
	margin: 0 auto;
	max-width: 790px;
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
}
.container--960 {
	margin: 0 auto;
	max-width: 960px;
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
}
.container--lg {
	margin: 0 auto;
	max-width: 1340px;
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
}

.container--xl {
	margin: 0 auto;
	max-width: 1920px;
	width: auto;
}

/* header navbar */
.navbar-header {
	margin: 0;
}
.navbar-update {
	border-radius: 0;
	margin-bottom: 0px;
	background-color: var(--color-white, #fff);
	border: none;
	border-bottom: var(--color-gray) solid 1px;
	box-shadow: 0 5px 6px -6px #ccc;
}
.navbar-update .navbar-brand {
	height: auto;
	padding: 0;
	margin: 0 !important;
}
.navbar-update .site-logo {
	width: clamp(204px, 22vw, 328px);
	height: auto;
	padding: 21px 0;
	transition: none;
}
@media (max-width: 767px) {
	.navbar-update .navbar-collapse {
		border-top: var(--color-gray) solid 1px;
	}
}

.navbar-update .navbar-toggle {
	/* background-color: var(--color-near-white); */
	margin: 20px;
}
.navbar-update .navbar-toggle .icon-bar {
	background-color: var(--color-primary);
}

.navbar-update .dropdown-menu {
	transform: translateY(-1.5rem);
}

.navbar-update .navbar-nav > .active > a,
.navbar-update .navbar-nav > .active > a:hover,
.navbar-update .navbar-nav > .active > a:focus {
	color: var(--color-primary);
	background-color: var(--color-white, #fff);
}
.navbar-update .navbar-nav > .open > a,
.navbar-update .navbar-nav > .open > a:hover,
.navbar-update .navbar-nav > .open > a:focus {
	background-color: var(--color-white, #fff);
	color: var(--color-primary);
}

.navbar-update .navbar-nav > li > a {
	--padding-clamp: clamp(3rem, 3.5vw, 40px);
	padding: var(--padding-clamp) 12px;
	line-height: 1;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--color-dark);
	font-size: 13px;
	letter-spacing: 0.05em;
}
.navbar-update .navbar-nav > li > a:hover,
.navbar-update .navbar-nav > li > a:focus {
	color: var(--color-primary);
	background-color: transparent;
}
.navbar-update .navbar-nav .caret {
	margin-left: 0.5em;
	transform: translateY(-1px);
}

/*======dropdowm menu=========*/
.navbar .dropdown-menu {
	padding: 0;
	margin: 0;
	min-width: 190px;
	background-color: var(--color-white, #fff);
	border: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;

	border-top: 2px solid var(--color-primary) !important;
}
.navbar .dropdown-menu li a {
	color: #444;
	padding: 9px 20px;
	border-bottom: 1px solid #e7e7e7;
	font-weight: 400;
	font-size: 14px;
	-webkit-transition: all 200ms ease-in;
	-o-transition: all 200ms ease-in;
	-moz-transition: all 200ms ease-in;
	transition: all 200ms ease-in;
}
.navbar .dropdown-menu li:last-child a {
	border-bottom: none;
}
.navbar .dropdown-menu li a:hover {
	background: var(--color-primary);
	color: var(--color-white, #fff);
}

/****************breadcrumbs override*********************************************/
h3.page-tree-text {
	text-align: center;
	font-family: Raleway, 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: 300;
	font-style: normal;
	color: var(--color-white, #fff);
	margin: 0px;
}

/***********************bootstrap pagination override***************************/
.pagination li a {
	color: #999;
}
.pagination li a:hover {
	color: var(--color-white, #fff);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	z-index: 2;
	color: var(--color-white, #fff);
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	cursor: default;
}

/* Flickity / Hero Image slider */
.hero-image {
	position: relative;
}

.hero-image .static-message,
.flickity-block .static-message {
	display: flex;
	pointer-events: none;
	align-items: center;
	position: absolute;
	z-index: 1;
	inset: 0;
	padding-top: 9.11%; /* 175/1920 */
	padding-left: 5.94%; /* 114 / 1920 */
	padding-right: 5.94%;
}
.hero-image .msg-container,
.flickity-block .msg-container {
	padding: 19px 26px;
	padding-right: calc(19px + 5%);
	min-width: fit-content;
	max-width: 100%;
	min-height: 180px;
	color: var(--color-white);
	background-color: rgba(var(--color-primary-rgb), 0.9);

	display: flex;
	flex-direction: column;
	justify-content: center;
	pointer-events: all;
}
.hero-image .msg-container h1,
.flickity-block .msg-container h1 {
	font-size: clamp(23px, 3.3vw, 47.8px);
	margin-bottom: 0;
}
.hero-image .msg-container .subtitle,
.flickity-block .msg-container .subtitle {
	font-size: clamp(17.5px, 3.3vw, 29px);
	line-height: 1.3;
}

.hero-image .msg-container > *:first-child,
.flickity-block .msg-container > *:first-child {
	margin-top: 0;
}
.hero-image .msg-container > *:last-child,
.flickity-block .msg-container > *:last-child {
	margin-bottom: 0;
}
.hero-image figure {
	position: relative;
}
.hero-image figure,
.flickity-block .carousel-cell {
	width: 100%;
	padding-bottom: 41.65%;
	height: 0;
	overflow: hidden;
}
.hero-image figure img,
.flickity-block .carousel-cell img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 2.4/1;
	object-fit: cover;
	user-select: none;
	pointer-events: none;
}
@media (max-width: 960px) {
	.hero-image .static-message,
	.flickity-block .static-message {
		padding-top: 20%;
	}
	.hero-image figure,
	.flickity-block .carousel-cell {
		padding-bottom: 70%;
	}
}
@media (max-width: 960px) {
	.hero-image .msg-container,
	.flickity-block .msg-container {
		min-height: auto;
	}
	.hero-image .static-message,
	.flickity-block .static-message {
		padding-top: 30%;
	}
	.hero-image figure,
	.flickity-block .carousel-cell {
		padding-bottom: 80%;
	}
	.hero-image .msg-container br {
		display: none;
	}
}
@media (max-width: 430px) {
	.hero-image .static-message,
	.flickity-block .static-message {
		padding-top: 45%;
	}
	.hero-image figure,
	.flickity-block .carousel-cell {
		padding-bottom: 130%;
	}
}

.flickity-block .flickity-page-dots {
	bottom: 2rem;
}
.flickity-block .flickity-page-dots .dot {
	background-color: var(--color-primary);
}

/*flex slider (Old version)*/
.slider-overlay {
	background: rgba(99, 0, 0, 0.4);
	height: 400px;
	background-repeat: repeat;
	position: absolute;
	top: 20%;
	left: 0;
	bottom: 20%;
	right: 70%;
}

.slider-reg {
	width: 100%;
}

.main-flex-slider {
	position: relative;
}

.main-flex-slider .flex-control-nav {
	bottom: 30px;
	margin: 0;
	height: 14px;
	z-index: 10;
}
.main-flex-slider .flex-control-paging li a {
	background-color: var(--color-white, #fff) !important;
}
.main-flex-slider .flex-control-paging li a.flex-active {
	background-color: var(--color-primary) !important;
}

.slider-overlay {
	background: rgba(99, 0, 0, 0);
}

.slider-text {
	text-align: left;
}

.slider-text h1 {
	color: var(--color-white, #fff);
	margin-top: 50px;
	font-size: 30px;
	font-weight: 400;
	margin-bottom: 5px;
	margin-left: 100px;
	text-transform: none;
	text-align: left;
}

.slider-text p {
	color: var(--color-white, #fff);
	font-style: italic;
	font-size: 20px;
}

/* LGBT grand */
.recent-grants {
	margin-bottom: 20px;
	margin-top: 40px;
}
.recent-grants .two-column {
	column-count: 2;
	gap: 3rem;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-cardianl-red);
	padding: 2rem;
}
@media (max-width: 747px) {
	.recent-grants .two-column {
		column-count: 1;
	}
}
.recent-grants .two-column li {
	margin-bottom: 1.5rem;
	break-inside: avoid;
}
.recent-grants .two-column h4 {
	color: #000;
	margin-bottom: 0;
}
.recent-grants a {
	border: 1px solid #cccccc;
	padding: 1px 4px;
	background-color: #dfdfdf;
}

/**
* For modern browsers  
* 1. The space content is one way to avoid an Opera bug when the
*    contenteditable attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
	content: ' '; /* 1 */
	display: table; /* 2 */
}

.cf:after {
	clear: both;
}

.page-tree-bg {
	/* background: url('/wp-content/uploads/2015/02/tree_header_02.jpg') top center scroll; */
	background-image: none !important;
	background-color: var(--color-cardianl-red);
}

h3.page-tree-text {
	font-style: normal;
	font-family: Raleway, sans-serif;
}

/* homepage */
.section-title {
	text-align: center;
	margin-bottom: 3rem;
	color: var(--color-dark);
}
.section-title h2 {
	font-weight: 600;
	text-transform: none;
}

.homepage-stats .stats-row {
	display: grid;
	grid-template-columns: 1fr 162px;
	gap: 2rem;
	align-items: center;
}
@media (max-width: 991px) {
	.homepage-stats .stats-row {
		grid-template-columns: 1fr;
	}
	.homepage-stats p {
		text-align: center;
	}
	.homepage-stats .cta-block {
		grid-column: 1 / -1;
		text-align: center;
	}
}

.homepage-intro p,
.homepage-stats p {
	margin-bottom: 0;
	font-size: 14px;
}
.stats-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem 6rem;
	font-size: 4.1rem;
	line-height: 1.2;
}
.stats-list li {
	position: relative;
}
.stats-list li:not(:last-child)::after {
	content: '';
	display: block;
	position: absolute;
	width: 1px;
	height: 100%;
	background-color: var(--color-deep-gray);
	top: 0;
	right: calc(-50% + 3rem);
}
.stats-list span {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 600;
}
.stats-list i {
	font-style: normal;
	font-size: 0.75em;
}
@media (max-width: 747px) {
	.stats-list {
		flex-wrap: wrap;
	}
	.stats-list li:not(:last-child)::after {
		display: none;
	}
}

@media (max-width: 747px) {
	.homepage-25-year-banner .container {
		padding: 0 !important;
	}
}

.overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.overlay.is-open {
	display: flex;
}

.overlay .popup {
	background: #f2efef;
	padding: 0;
	max-width: 944px;
	width: 90%;
	text-align: left;
	position: relative;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	animation: fadeIn 0.25s ease;
}

.overlay .closeBtn {
	position: absolute;
	top: 10px;
	right: 10px;
	border: 0;
	padding: 0.8rem;
	margin: 0;
	outline: 0;

	display: flex;
	width: 2.7rem;
	height: 2.7rem;
	justify-content: center;
	align-items: center;
	border-radius: 1.45rem;
	background: none;
	color: white;
	background-color: var(--color-primary);
	font-size: 2.75rem;
	cursor: pointer;
	line-height: 1;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(0.98);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.program-grid .portfolio {
	position: static;
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--color-gray);
	color: var(--color-dark);
	background-color: var(--color-white);
	position: relative;
	text-decoration: none;
}
.program-grid .portfolio-thumnail img {
	aspect-ratio: 1.8 / 1;
	object-fit: cover;
}
.program-grid .portfolio-post-title {
	color: var(--color-primary);
	font-size: 1.1em;
	letter-spacing: normal;
}
.program-grid .portfolio-desc {
	padding: 1.5rem 2rem;
	min-height: 115px;
}
.program-grid .portfolio-desc p {
	font-size: 0.8em;
	line-height: 1.5;
	letter-spacing: normal;
	color: var(--color-deep-gray);
	margin-bottom: 0;
}

.heading-sec {
	text-transform: uppercase;
}

.news-sec {
	background: #f8edd6;
}

h3.widgettitle {
	font-size: 1em;
	font-weight: 700;
	color: #8c8777;
}
h3.widgettitle:first-letter {
	border-bottom: 0px;
}

/* News */
.blog-post-section {
	border-bottom: 1px solid #eeeeee;
}
.blog-post-info {
	margin-bottom: 0;
}
.blog-post-header {
	margin-bottom: 0;
	text-transform: none;
}

/* 25 Years Report */
.heading-large {
	color: var(--color-dark);
	font-size: clamp(22px, 3.3vw, 44.8px);
	text-transform: uppercase;
	font-weight: 500;
}
.media-text {
	display: grid;
	grid-template-columns: 0.45fr 0.55fr;
	gap: 2rem 6rem;
	align-content: center;
	align-items: center;
	padding: 2rem 5rem;
	box-shadow: 1px 6px 12px 0px #00000026;
	border-radius: 3px;
}
.media-text__image {
	margin: 0;
	text-align: center;
}
.media-text__image a {
	display: inline-block;
	width: 100%;
	max-width: 350px;
}
.media-text__image image {
	display: inline-block;
}
.media-text__content {
	color: var(--color-dark);
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
}
.media-text__content p {
	margin-bottom: 0;
}
@media (max-width: 590px) {
	.media-text {
		grid-template-columns: 1fr;
		padding: 1rem 2rem;
	}
	.media-text__image image {
		max-width: 440px;
	}
}
.df-3dcanvas {
	cursor: grab;
}
.timeline-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, 228px);
}

.timeline-row .cell {
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 228px;
	height: 228px;
	aspect-ratio: 1/1;
	color: white;
	padding: 18px 18px 4px 18px;
	background-color: var(--cell-color, #ef3742);
}
.timeline-row .cell > * {
	margin: 0;
	padding: 0;
}
.timeline-row img.cell {
	padding: 0;
	object-fit: fill;
	pointer-events: none;
	user-select: none;
}
.timeline-row img.span-two {
	width: 456px;
	aspect-ratio: 2 / 1;
	grid-column: span 2;
}

.timeline-row .cell .year {
	margin-top: auto;
	order: 100;
	font-family: var(--font-stack);
	font-size: 70px;
	letter-spacing: -0.01em;
	font-weight: 700;
	font-variant-numeric: lining-nums;
	line-height: 1;
}

.timeline-row .cell p {
	font-size: 18px;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.timeline-grid .bg-red {
	--cell-color: var(--color-primary);
}
.timeline-grid .bg-orange {
	--cell-color: #f1583e;
}
.timeline-grid .bg-teal {
	--cell-color: #518e86;
}
.timeline-grid .bg-green {
	--cell-color: #3f7d89;
}
.timeline-grid .bg-coffee {
	--cell-color: #ae774e;
}
.timeline-grid .bg-gold {
	--cell-color: #e58b24;
}

/* desktop branch */
@media (min-width: 1160px) {
	.timeline-row {
		grid-template-columns: repeat(5, 228px);
		justify-content: center;
	}

	/* First cell (year/context) goes in the center spine */
	.timeline-row .cell:first-child {
		order: 3;
		grid-column: 3;
	}

	.timeline-row .cell-left {
		order: 2;
		grid-column: 2;
	}

	.timeline-row .cell-left-plus {
		order: 1;
		grid-column: 1;
	}

	.timeline-row .cell-right {
		order: 4;
		grid-column: 4;
	}

	.timeline-row .cell-right-plus {
		order: 5;
		grid-column: 5;
	}
}

/* mobile single file */
@media (max-width: 640px) {
	.timeline-grid {
		display: flex;
		flex-direction: column;
		align-items: center;

		max-width: 340px;
		margin: 0 auto;
	}
	.timeline-row {
		grid-template-columns: 1fr;
	}
	.timeline-row img.span-two {
		width: 228px;
		grid-column: auto;
		height: auto;
	}
}
.years-of-giving .heading-large {
	color: white;
	background-color: var(--color-primary);
	padding: 1.5rem 1rem;
	margin: 0;
	line-height: 1;
}
.years-of-giving .heading-stats {
	color: white;
	background-color: #d3393a;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 2rem 5%;
	padding: 1.5rem 1rem;
}
.years-of-giving .heading-stats__stat {
	font-weight: 500;
	font-size: clamp(20px, 3.1vw, 40px);
	line-height: 1;
	margin: 0 0 0.75rem 0;
}
.years-of-giving .heading-stats__desc {
	font-weight: 600;
	font-size: clamp(14px, 3.1vw, 16px);
	line-height: 1;
	margin: 0;
}
@media (max-width: 640px) {
	.years-of-giving .heading-stats {
		flex-direction: column;
	}
}

.stats-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background-color: var(--color-primary);
	container-type: inline-size;
}

.stats-grid > *:nth-child(even) {
	background-color: #d3393a;
}

.stats-grid .span-all {
	grid-column: -1 / 1;
}
.stats-grid .cell {
	position: relative;
	aspect-ratio: 1/1;
	color: var(--color-dark);
	padding: 3cqw;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
}

.stats-grid .cell:first-child,
.stats-grid .cell:last-child {
	color: white;
}

.stats-grid .cell > div {
	position: relative;
	z-index: 5;
	max-width: 200px;
	margin: 0 auto;
	font-weight: bold;
}
.stats-grid .cell p {
	margin: 0;
	padding: 0;
	line-height: 1.4;
	font-size: clamp(14px, 1.6cqw, 18px);
}
.stats-grid .cell svg {
	width: clamp(60px, 18cqw, 100px);
	height: auto;
	margin-bottom: -1rem;
	aspect-ratio: 1/1;
	display: inline-block !important; /*prevent flash of extra large svgs*/
}

.stats-grid .cell .given {
	font-weight: 500;
	font-size: clamp(28px, 3.6cqw, 40px);
	color: #262425;
}
.stats-grid .cell .given::before {
	content: '$';
	font-size: 0.7em;
}
.stats-grid .cell:last-child p {
	font-size: clamp(20px, 2.5cqw, 28px);
}

.stats-grid .cell:last-child .given {
	font-size: clamp(36px, 5cqw, 54px);
	color: white;
}
.stats-grid .cell:last-child svg {
	width: clamp(120px, 18cqw, 200px);
}

.stats-grid .cell::after {
	display: block;
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50rem;
	z-index: 1;
	background-color: #e1753d;
}
.stats-grid .null-l::after {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.stats-grid .null-r::after {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.stats-grid .null-tr::after {
	border-top-right-radius: 0;
}
.stats-grid .null-tl::after {
	border-top-left-radius: 0;
}
.stats-grid .null-br::after {
	border-bottom-right-radius: 0;
}
.stats-grid .null-bl::after {
	border-bottom-left-radius: 0;
}

@media (min-width: 641px) {
	.stats-grid .cell:nth-child(even) {
		background-color: #d3393a;
	}
	.stats-grid .cell:nth-child(even)::after {
		background-color: #f0583d;
	}
}

.stats-grid .cell:first-child::after,
.stats-grid .cell:last-child::after {
	background-color: #e58b24;
}
/* 2x */
.stats-grid .cell:last-child {
	background-color: #d3393a;
	grid-column: span 2;
	grid-row: span 2;
}
.stats-grid .cell:nth-last-child(2) {
	order: 99;
}

@media (max-width: 640px) and (min-width: 335px) {
	/* pattern shift */
	.stats-grid .cell:not(:first-child):not(:last-child):nth-child(4n),
	.stats-grid .cell:not(:first-child):not(:last-child):nth-child(4n + 1) {
		background-color: #d3393a;
	}
	.stats-grid .cell:not(:first-child):not(:last-child):nth-child(4n)::after,
	.stats-grid .cell:not(:first-child):not(:last-child):nth-child(4n + 1)::after {
		background-color: #f0583d;
	}
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.stats-grid .cell:nth-last-child(2) {
		order: unset;
	}
}
@media (max-width: 334px) {
	.stats-grid .cell:nth-child(even) {
		background-color: #d3393a;
	}
	.stats-grid .cell:nth-child(even)::after {
		background-color: #f0583d;
	}
	.stats-grid {
		grid-template-columns: 1fr;
	}
	.stats-grid .cell:nth-last-child(2) {
		order: unset;
	}
	.stats-grid .cell:last-child {
		grid-column: unset;
		grid-row: unset;
	}
}

.credit-list {
	list-style: none;
	margin: 0;
	padding: 0;

	display: grid;
	justify-content: center;
	grid-template-columns: repeat(auto-fill, 245px);
	gap: 2rem;
	color: var(--color-dark);

	font-size: 15px;
}
.credit-list li {
	text-align: left;
}
.credit-list .sr_only {
	visibility: hidden;
}
.credit-list strong {
	display: block;
	min-height: 25px;
	margin-bottom: 1.5rem;
}
.credit-list p {
	margin: 0;
	padding: 0;
}
@media (max-width: 529px) {
	.credit-list .sr_only {
		display: none;
	}
}
#footer {
	color: var(--color-dark);
	background-color: var(--color-near-white);
}
#footer .grid-row {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	align-items: center;
}

#footer .site-logo {
	max-width: 320px;
	transition: none;
}
#footer .footer-address {
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
#footer .footer-address address {
	margin: 0;
}
#footer .footer-address p {
	margin-bottom: 0;
	line-height: 1.6;
	font-size: 15px;
}
#footer .col-footer-links {
	display: flex;
	justify-content: space-around;
}
/* footer menu */
#footer .footer-menu {
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	gap: 1.5rem;
}
#footer .footer-menu li {
	text-transform: uppercase;
	font-size: 0.85em;
	font-weight: 500;
}
#footer .footer-menu a,
#footer .footer-menu a:visited {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-dark);
	line-height: 1;
	letter-spacing: 0.05em;
}
#footer .footer-menu a:hover,
#footer .footer-menu a:active {
	color: var(--color-primary);
}

#footer .social-btn {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 1.5rem;
}

#footer .social-btn i {
	color: var(--color-white);
	border-color: transparent;
	background-color: var(--color-dark);
	margin-bottom: 0;
}
#footer .social-btn i:hover {
	background-color: var(--color-primary);
}

#footer .footer-copyright {
	text-align: right;
	font-size: 0.63em;
}
#footer .footer-copyright a:hover {
	text-decoration: underline;
}

@media (max-width: 991px) {
	#footer .grid-row {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	#footer .col-footer-links {
		order: 1;
		gap: 2rem;
	}
	#footer .col-footer-info {
		order: 2;
	}
	#footer .site-logo {
		display: block;
		margin: 0 auto;
		/* visually centering */
		transform: translateX(6%);
	}
}
@media (max-width: 747px) {
	#footer .col-footer-links {
		flex-direction: column;
	}
	#footer .footer-menu {
		max-width: 310px;
		margin: 0 auto;
		padding: 0;
	}
	#footer .footer-address {
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}
	#footer .footer-copyright {
		margin-top: 1rem;
		text-align: center;
	}
}