:root {
	--bpnb-dark-blue: #204285;
	--bpnb-light-blue: #5cbde5;
	--bpnb-red: #da2e36;
	--shadow-color: #00000059;
}

* {
	box-sizing: border-box;
}

#page-body {
	background-color: var(--bpnb-dark-blue);
}

#mobile-nav,
#header,
.content-section.light-green-bg.email-signup,
footer.site-footer,
.pum-container {
	display: none !important;
}

html,
body,
.bpnb-main {
	background-color: var(--bpnb-dark-blue);
	color: #ffffff;
}

body {
	/* padding: 6% 6% 3%; */
	margin: 0;
}

nav a {
	text-decoration: none;
}

nav a:hover,
nav a:focus {
	text-decoration: underline;
}

.background-light-blue {
	background-color: var(--bpnb-light-blue);
}

.background-red {
	background-color: var(--bpnb-red);
}

.banner {
	box-sizing: border-box;
	color: var(--bpnb-dark-blue);
}

.banner > p {
	color: var(--bpnb-dark-blue);
	max-width: 1680px;
	padding: 10px 7% 30px;
	margin: auto;
}

/* .bpnb-main {
				padding: 6% 6% 3%;
				max-width: 1680px;
				margin: auto;
				box-sizing: border-box;
			} */

.bpnb-main > section,
.bpnb-main > footer {
	padding: 80px 0;
}

.inner-wrap {
	padding: 40px;
	max-width: 1500px;
	margin: auto;
	box-sizing: border-box;
}

details {
	color: white;
	font-family: "neue-haas-grotesk-display", sans-serif !important;
	font-weight: 600;
	font-style: normal;
}

details summary {
	color: white;
	font-size: 2rem;
	cursor: pointer;
}

details p {
	color: white;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
ul {
	color: var(--bpnb-dark-blue);
	font-family: "neue-haas-grotesk-display", sans-serif !important;
	font-weight: 500;
	font-style: normal;
	border: none;
}

p {
	font-weight: 500;
}

ul {
	font-weight: 500;
}

li {
	margin-bottom: 0.5em;
}

li.white-color,
li span.white-color {
	font-weight: bold;
}

h1 {
	font-size: clamp(3.375rem, 2.5vw + 2.5rem, 5.625rem);
	line-height: 1.2;
	/* letter-spacing: 0.6px; */
	position: relative;
	z-index: 1;
	margin-bottom: 0px;
}

h1 span {
	font-weight: bold;
}

h1.red-arrow:before {
	content: "";
	xbackground-color: var(--bpnb-dark-blue);
	height: 100%;
	width: 50vw;
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-100%);
}

/* h1.red-arrow:after {
    content: "";
    width: 100vw;
    height: 110px;
    position: absolute;
    right: 0;
    bottom: 0;
    background-image: url(/images/red-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    z-index: -1;
    max-width: 95vw;
    transform: translateY(55px);
} */

span.red-arrow {
	position: relative;
}

span.red-arrow:after {
	content: "";
	width: 100vw;
	height: 100%;
	width: 1520px;
	height: 110px;
	position: absolute;
	right: -320%;
	bottom: -35px;
	background-image: url(/images/red-arrow.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom right;
	z-index: -1;
	max-width: 95vw;
}
@media (max-width: 767px) {
	span.red-arrow:after {
	}
}

.red-arrow-img {
	transform: translateY(-66%);
	z-index: 0;
}

h2 {
	font-size: clamp(3.5rem, 3vw + 2.5rem, 5.875rem);
	letter-spacing: 0.1px;
	line-height: 1.18;
}

h3 {
	font-size: clamp(2rem, 1.5vw + 1.5rem, 3.375rem);
	letter-spacing: 1px;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0.5em;
}

h4 {
	font-size: clamp(1.35rem, 1vw + 1rem, 2.25rem);
	font-weight: 400;
}

p,
a {
	font-size: clamp(1.2rem, 0.5vw + 1rem, 2rem);
	letter-spacing: 0.0064em;
	line-height: 1.56;
	margin-top: 0;
}

ul {
	font-size: clamp(1.2rem, 0.5vw + 1rem, 2rem);
}

a,
a:active,
a:hover,
a:visited {
	border-bottom: none;
}

a:hover {
	text-decoration: underline;
	text-decoration-color: #ffffff !important;
}

.text-xl {
	font-size: clamp(3.375rem, 2.5vw + 2.5rem, 5.625rem);
}

.text-large {
	font-size: clamp(1.95rem, 1.5vw + 1.5rem, 3.25rem);
}

.text-medium {
	font-size: clamp(1.2rem, 0.5vw + 1rem, 2rem);
}

.text-small {
	font-size: clamp(0.825rem, 0.5vw + 0.5rem, 1.375rem);
	line-height: 1.27;
}

.text-xsmall {
	font-size: clamp(0.6rem, 0.5vw + 0.35rem, 1rem);
	line-height: 1.25;
}

.white-color {
	color: #ffffff !important;
}

.bpnb-light-blue {
	color: var(--bpnb-light-blue) !important;
}

a.button {
	color: #ffffff;
	background-color: var(--bpnb-dark-blue);
	padding: 35px 70px;
	box-sizing: border-box;
	display: inline-block;
	line-height: 1;
	min-width: 300px;
	min-height: 100px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	letter-spacing: 1px;
	max-width: 100%;
}

.two-col-grid {
	display: grid;
	gap: 30px;
	position: relative;
}

.two-col-grid.blue-border {
	gap: max(30px, 5vw);
	width: 100%;
}

.two-col-grid.blue-border::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 5px;
	background-color: var(--bpnb-dark-blue);
	transform: translateX(-50%);
	visibility: hidden;
}

.two-col-grid.blue-border ul {
	width: auto;
	max-width: min(100%, 500px);
}

.d-flex {
	display: flex;
	flex-wrap: wrap;
}

.flex-col {
	flex-direction: column;
}

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

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

.align-center {
	align-items: center;
}

.align-start {
	align-items: start;
}

.content-center {
	align-content: center;
}

.underline {
	text-decoration: underline;
}

/* .col-12,
			.col-6 {
				padding: 2%;
			} */

.logo-col {
	flex-direction: column;
	justify-content: space-between;
	/* padding-bottom: 10% !important; */
	padding-right: 8% !important;
}

img {
	max-width: 100%;
	object-fit: contain;
}

.logo-col img {
	max-width: 100%;
}

.spacer {
	height: 80px;
	width: 100%;
}

.blue-hr {
	width: 100%;
	height: 6px;
	background-color: var(--bpnb-dark-blue);
	border: none;
}

.blue-divider {
	width: 80px;
	height: 12px;
	background-color: var(--bpnb-light-blue);
	margin-right: auto;
	margin-top: 5%;
	margin-bottom: 5%;
}

.blue-underline {
	text-decoration: underline !important;
	text-decoration-color: var(--bpnb-light-blue) !important;
	text-decoration-thickness: 10px !important;
	text-underline-offset: 8px;
}

.intro-section {
	padding-bottom: 7%;
}

.quote-bg {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	/* padding-bottom: 10%; */
}

.quote-bg:before {
	pointer-events: none;
}

.quote-bg.red-quote-1 {
	padding-right: 5%;
}

.red-quote-1 {
	padding-bottom: 5% !important;
}

.red-quote-1:before {
	/* content: '';
    			background-image: url(/wp-content/uploads/2023/03/red-quote-1.png);
    			position: absolute;
    			width: 110%;
    			height: 110%;
    			top: -5%;
    			right: 0;
    			background-size: contain;
    			background-repeat: no-repeat;
    			background-position: center; */
}

.red-quote-1-css-wrap {
	position: absolute;
	top: -30px;
	top: -4%;
	left: -50px;
	left: -6%;
	height: 100%;
	width: 100%;
	pointer-events: none;
}

.red-quote-1-css {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9;
	border: 10px solid var(--bpnb-red);
	border-radius: 60px;
}

.red-quote-1-css:before {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: 38%;
	right: auto;
	top: auto;
	bottom: 0;
	transform: translateY(calc(100% + 1px));
	border: 70px solid;
	border-width: min(70px, 4vw);
	border-color: var(--bpnb-red) transparent transparent var(--bpnb-red);
}

.red-quote-1-css:after {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: 39%;
	right: auto;
	top: auto;
	bottom: 0;
	transform: translateY(calc(100% - 1px));
	border: 60px solid;
	border-width: min(60px, 3.6vw);
	border-color: var(--bpnb-dark-blue) transparent transparent var(--bpnb-dark-blue);
}

.red-quote-1-shadow-css {
	position: absolute;
	top: 15px;
	left: 10px;
	height: 100%;
	width: 100%;
	z-index: 9;
	border: 10px solid var(--shadow-color);
	border-radius: 60px;
	z-index: 0;
	filter: blur(5px);
}

.red-quote-1-shadow-css:before {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: 38%;
	right: auto;
	top: auto;
	bottom: 0;
	transform: translateY(100%);
	border: 70px solid;
	border-width: min(70px, 4vw);
	border-color: var(--shadow-color) transparent transparent var(--shadow-color);
}

.red-quote-1-shadow-css:after {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: 39%;
	right: auto;
	top: auto;
	bottom: -20px;
	border: 12px solid;
	border-color: var(--bpnb-dark-blue) transparent transparent var(--bpnb-dark-blue);
}

/***Blue Quote 1***/

.blue-quote-1-css-wrap {
	position: absolute;
	top: -2%;
	left: calc(2% + 10px);
	height: 100%;
	width: 80%;
	pointer-events: none;
}

.blue-quote-1-css {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9;
	border: 10px solid var(--bpnb-light-blue);
	border-radius: 60px;
}

.blue-quote-1-css:before {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: auto;
	right: 0;
	transform: translateX(100%);
	top: 9%;
	bottom: auto;
	border: 70px solid;
	border-width: min(70px, 4vw);
	border-color: var(--bpnb-light-blue) transparent transparent var(--bpnb-light-blue);
}

.blue-quote-1-css:after {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: auto;
	right: 0;
	transform: translateX(calc(100% - 10px));
	/* top: calc(9% + 10px); */
	top: 9.7%;
	bottom: auto;
	border: 62px solid;
	border-width: min(62px, 3.6vw);
	border-color: var(--bpnb-dark-blue) transparent transparent var(--bpnb-dark-blue);
}

.blue-quote-1-shadow-css {
	position: absolute;
	top: 15px;
	left: 10px;
	height: 100%;
	width: 100%;
	z-index: 9;
	border: 10px solid var(--shadow-color);
	border-radius: 60px;
	z-index: 0;
	filter: blur(5px);
}

.blue-quote-1-shadow-css:before {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: auto;
	right: 0;
	transform: translateX(100%);
	top: 9%;
	bottom: auto;
	border: 70px solid;
	border-width: min(70px, 4vw);
	border-color: var(--shadow-color) transparent transparent var(--shadow-color);
}

.blue-quote-1-shadow-css:after {
	/* content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 39%;
    right: auto;
    top: auto;
    bottom: -20px;
    border: 12px solid;
    border-color: var(--bpnb-dark-blue) transparent transparent var(--bpnb-dark-blue); */
}

.blue-quote-1-css:before,
.blue-quote-1-css:after,
.blue-quote-1-shadow-css:before,
.blue-quote-1-shadow-css:after {
	content: none !important;
}

/***Red Quote 2***/

.red-quote-2-css-wrap {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	pointer-events: none;
	/* margin: 0 2%; */
}

.red-quote-2-css {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9;
	border: 10px solid var(--bpnb-red);
	border-radius: 60px;
}

.red-quote-2-css:before {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: 46%;
	right: auto;
	top: auto;
	bottom: 0;
	transform: translateY(calc(100% + 1px));
	border: 70px solid;
	border-width: min(70px, 4vw);
	border-color: var(--bpnb-red) transparent transparent var(--bpnb-red);
}

.red-quote-2-css:after {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: 46.4%;
	right: auto;
	top: auto;
	bottom: 0;
	transform: translateY(calc(100% - 1px));
	border: 62px solid;
	border-width: min(62px, 3.6vw);
	border-color: var(--bpnb-dark-blue) transparent transparent var(--bpnb-dark-blue);
}

.red-quote-2-shadow-css {
	position: absolute;
	top: 15px;
	left: 10px;
	height: 100%;
	width: 100%;
	z-index: 9;
	border: 10px solid var(--shadow-color);
	border-radius: 60px;
	z-index: 0;
	filter: blur(5px);
}

.red-quote-2-shadow-css:before {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: 46%;
	right: auto;
	top: auto;
	bottom: 0;
	transform: translateY(100%);
	border: 70px solid;
	border-width: min(70px, 4vw);
	border-color: var(--shadow-color) transparent transparent var(--shadow-color);
}

.red-quote-2-shadow-css:after {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: 46%;
	right: auto;
	top: auto;
	bottom: -20px;
	border: 12px solid;
	border-color: var(--bpnb-dark-blue) transparent transparent var(--bpnb-dark-blue);
}

.red-quote-2:before {
	/* content: '';
    background-image: url(/wp-content/uploads/2023/03/red-quote-2.png);
    position: absolute;
    width: 102%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; */
}

.blue-quote-1:before {
	/* content: '';
    background-image: url(/wp-content/uploads/2023/03/blue-quote-1.png);
    position: absolute;
    width: 100%;
    height: 102%;
    top: -2%;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top; */
}

.form-section {
	padding-bottom: 5%;
}

.advocacy-actionwidget {
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0% 25% 0 10%;
}

.advocacy-actionwidget > iframe {
	height: 100% !important;
	min-height: 1500px !important;
}

.find-links {
	padding: 6.5% 0;
}

.find-links > div {
	padding: 0 2%;
}

.find-links a,
.find-links span {
	color: #ffffff;
	text-align: center;
	line-height: 1.33;
	font-size: clamp(1.7rem, 1.25vw + 1.25rem, 2.8125rem);
}

.find-links p {
	margin-bottom: 0;
	text-align: center;
}

.find-links a {
	text-decoration: none;
	text-decoration-color: var(--bpnb-light-blue) !important;
}

.poll-section {
	/* margin-bottom: 10%; */
	margin: 0 2% 10%;
}

.poll-header {
	padding-top: 3%;
}

.poll-header h2 {
	margin-bottom: 2.5%;
}

.poll-info {
	/* padding-bottom: 10%; */
}

.poll-info > div {
	padding: 0 3% 4%;
}

.poll-number {
	font-size: clamp(4.5rem, 3.5vw + 3.5rem, 7.5rem);
	line-height: 0.96;
}

.poll-percent {
	color: var(--bpnb-light-blue);
	font-size: clamp(2.05rem, 1.5vw + 1.5rem, 3.4375rem);
	line-height: 1.18;
}

.poll-source {
	position: absolute;
	bottom: -10%;
	left: 0;
	width: 45%;
	text-align: left;
	/* padding-left: 2%; */
}

.bpnb-social-links a {
	transition: all 0.25s ease;
}

.bpnb-social-links a:hover {
	text-decoration: none;
	border: none;
	filter: brightness(0.5);
}

.bpnb-social-links img {
	height: 30px;
}

.bpnb-footer {
	padding: 0 2%;
}

.cta-button {
	background-color: rgb(225, 58, 70);
	color: rgb(255, 255, 255);
	border: none;
	border-radius: 4px;
	min-height: 50px;
	padding: 1rem 2rem;
	margin: 30px 0 50px;
	display: inline-block;
	width: auto;
	text-decoration: none;
}

.white-link-blue-underline {
	color: #ffffff;
	text-decoration-color: var(--bpnb-dark-blue);
	text-underline-offset: 7px;
}

.resources {
	padding-bottom: 5%;
}

.resources ul {
	column-count: 2;
}

.resources a {
	line-height: 2;
}

.red-heading {
	padding: 20px;
	line-height: 1;
	font-weight: bold;
	margin-bottom: 0.5em;
}

footer p,
footer a {
	color: #ffffff;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 15px 50px;
}

.footer-links a {
	color: var(--bpnb-light-blue);
	text-decoration: none;
}

.footer-links a:hover {
	text-decoration: underline;
}

@media (min-width: 992px) {
	.col-one-fifth {
		width: 20%;
	}

	.col-3 {
		width: 25%;
	}

	.col-4 {
		width: calc(100% / 3);
	}

	.col-6 {
		width: 50%;
	}
	.two-col-grid {
		grid-template-columns: 1fr 1fr;
	}

	.two-col-grid.blue-border::before {
		visibility: visible;
	}
}

@media (max-width: 991px) {
	/* .banner > p,
				.bpnb-main {
					padding: 10px 3% 3%;
				} */

	span.red-arrow:after {
		bottom: -35px;
	}

	section > div {
		width: 100%;
	}

	section.bpnb-footer {
		text-align: center;
		justify-content: center;
		padding-top: 20%;
	}

	.intro-section {
		padding-bottom: 20%;
	}

	.logo-col,
	.logo-wrap {
		padding-bottom: 30px;
	}

	.logo-col {
		padding-right: 0 !important;
	}

	.red-quote-1 {
		text-align: center;
		padding-top: 10%;
	}

	.red-quote-1-css-wrap {
		top: 0;
		left: 0;
	}

	.advocacy-actionwidget {
		padding: 5%;
	}

	.blue-quote-1-css-wrap {
		left: 0;
		width: 100%;
	}

	.poll-section {
		padding: 0 10%;
	}

	.find-links {
		flex-direction: column;
	}

	.nf-logo {
		margin: auto;
	}

	.bpnb-footer-links {
		margin: 50px 0;
	}

	.bpnb-social-links {
		justify-content: center;
	}

	.find-links > div:first-child {
		margin-bottom: 60px;
	}

	.blue-quote-1-css:before,
	.blue-quote-1-css:after,
	.blue-quote-1-shadow-css:before,
	.blue-quote-1-shadow-css:after {
		display: none;
	}

	.resources ul {
		column-count: 1;
	}

	.footer-disclaimer {
		margin-block-start: 1em;
	}
	.mobile-order-1 {
		order: 1;
	}
	.mobile-order-2 {
		order: 2;
		margin-top: 50px;
	}
}

@media (max-width: 600px) {
	.poll-source {
		bottom: -8%;
		width: 100%;
	}

	.resources ul {
		column-count: 1;
	}

	span.red-arrow:after {
		bottom: -10px;
	}
}

@media (max-width: 500px) {
	.red-arrow-img {
		transform: translateY(-90%);
	}
}

.resource-list li,
.list-spacing li {
	margin-bottom: 30px;
}
