:root {
	--black: #000000;
	--white: #ffffff;
	--copy-color: #1d1d1d;
	--grey: #cbccc4;
	--grey-dark: #65665c;
	--grey-lite: #f4f4f4;
	--red: #c8102e;
	--red-dark: #a82230;
}
.red { color: var(--red-dark); }

main.campaign {
	padding: 0;
}
main.campaign section {
	display: block;
	position: relative;
	width: 100%;
}

div.inverted-left {
	clip-path: url("#clip-left");
	width: 90%;
	height: auto;
	margin: -8.95% auto 0 0;
	background-color: var(--white);
	aspect-ratio: 10 / 1;
	transform: scaleX(-1);
}
section#vision-banner {
	display: flex;
	position: relative;
	justify-content: flex-end;
	align-items: flex-start;
	flex-wrap: wrap;
}
section#vision-banner > h1 {
	display: block;
	position: absolute;
	justify-self: flex-start;
	z-index: 1;
	top: 0;
	left: 0;
	width: auto;
	padding: 3rem 5rem 3rem 10%;
	border: none;
	border-bottom-right-radius: 5rem;
	box-shadow: -300px 0px 0px 0px var(--red);
	font-weight: 700;
	text-transform: uppercase;
	transform: skewX(-10deg);
	background-color: var(--red);
	color: var(--white);
}
section#vision-banner > h1 > span {
	display: inline-block;
	transform: skewX(10deg);
}
section#vision-banner div.image-box {
	display: block;
	position: relative;
	flex: 0 0 90%;
	max-width: 90%;
}
section#vision-banner div.image-box > img {
	display: block;
	width: 100%;
	line-height: 1;
}
section#vision-banner div.image-box > img.sticker {
    position: absolute;
    top: 30%;
    left: -200px;
    width: 400px;
}
section#vision {
	padding: 3rem 0;
}
section#vision .container {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
    row-gap: 1.5rem;
	padding: 0;
	margin-top: -3rem;
}
section#vision .container > h2 {
	display: block;
	position: relative;
	flex: 0 0 40%;
	max-width: 40%;
	padding: 0 3rem 0 0;
	border-right: 1px solid var(--grey);
	margin: 0;
	font-size: 4rem;
	font-weight: 600;
	color: var(--red);
}
section#vision .container > div.cke {
	display: block;
	position: relative;
	flex: 0 0 56%;
	max-width: 56%;
}
section#vision .container p {
	font-size: 1.5rem;
}
div.inverted-right {
	clip-path: url("#clip-right");
	width: 90%;
	height: auto;
	margin: -8.95% 0 0 auto;
	background-color: var(--white);
	aspect-ratio: 10 / 1;
}
section#impact {
	padding: 3rem 0;
	background-color: var(--grey-lite);
}
section#momentum {
	padding: 3rem 0;
}
section#impact > h2,
section#momentum > h2 {
	display: inline-block;
	position: absolute;
	z-index: 1;
	top: 3rem;
	left: 0;
	width: auto;
	padding: 3rem 5rem 3rem 7rem;
	border-top-right-radius: 5rem;
	border-bottom-right-radius: 5rem;
	margin: 0;
	font-size: 4rem;
	background-color: var(--red);
	color: var(--white);
}
section#impact .container,
section#momentum .container {
    max-width: 1200px;
	padding: 0 0 0 30%;
}
section#impact .container p,
section#momentum .container p {
	font-size: 1.5rem;
}
section#momentum .container .c2 p strong {
	font-weight: 900;
}
section#possibilities-banner,
section#momentum-banner {
	display: flex;
	position: relative;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
section#possibilities-banner > h2 {
	display: block;
	position: absolute;
	justify-self: flex-ent;
	z-index: 1;
	top: 0;
	right: 0;
	width: auto;
	padding: 3rem 10% 3rem 5rem;
	border: none;
	margin: 0;
	border-bottom-left-radius: 5rem;
	box-shadow: 300px 0px 0px 0px var(--red);
	font-weight: 700;
	text-transform: uppercase;
	transform: skewX(10deg);
	background-color: var(--red);
	color: var(--white);
}
section#possibilities-banner > h2 > span {
	display: inline-block;
	transform: skewX(-10deg);
}
section#possibilities-banner div.image-box,
section#momentum-banner div.image-box {
	display: block;
	position: relative;
	flex: 0 0 90%;
	max-width: 90%;
}
section#possibilities-banner div.image-box > img,
section#momentum-banner div.image-box > img {
	display: block;
	width: 100%;
	line-height: 1;
}
section#momentum-banner div.image-box > img.sticker {
    position: absolute;
    top: 15%;
    right: -150px;
    width: 400px;
}
section#possibilities-banner div.image-box > p.concept-label,
section#momentum-banner div.image-box > p.concept-label {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 6rem;
    width: auto;
    padding: 0.5rem 2rem;
    border-radius: 2rem;
    margin: 0 0 0 7.55%;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.125rem;
    background-color: var(--grey-dark);
    color: var(--white);
}
section#possibilities .container table {
	font-size: 1.25rem;
}
section#possibilities .container table > thead {
	border-bottom: 2px solid var(--grey);
}
section#possibilities .container table tr > th {
	width: 50%;
	padding: 1rem 0.5rem;
	border: none;
	font-size: 1.875rem;
	color: var(--grey-dark);
}
section#possibilities .container table tbody tr {
	border-top: 1px solid var(--grey);
}
section#possibilities .container table tbody tr > td {
	padding: 1rem 0.5rem;
	border: none;
}
section#possibilities .container table tbody tr > td:first-child {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	row-gap: 1rem;
}
section#possibilities .container table div.dimension {
	display: block;
	flex: 1 0 60%;
	max-width: 70%;
}
section#possibilities .container table h3 {
	margin-top: 0;
	font-weight: 900;
	color: var(--red-dark);
}
section#possibilities .container table div.dimension > p {
	font-size: 1.5rem;
	color: var(--red);
}
section#donation {
	padding: 3rem 0;
    border-top-right-radius: 5rem;
	background-color: var(--red);
	color: var(--white);
}
section#donation .container {
	align-items: center;
    row-gap: 1.5rem;
    max-width: 1100px;
}
section#donation .container div.matching-gift {
	display: block;
	flex: 0 0 64%;
	max-width: 64%;
	padding-right: 2%;
	border-right: 2px solid var(--red-dark);
}
section#donation .container div.donate {
	display: block;
	flex: 0 0 34%;
	max-width: 34%;
	padding-left: 2%;
}
section#donation h2 {
	margin-bottom: 1.5rem;
	font-weight: 900;
	color: var(--white);
}
section#donation .cke h3 {
    padding: 0 1rem;
	border-left: 3px solid var(--white);
    border-right: 3px solid var(--white);
    margin: 1.5rem 0;
    font-weight: 800;
    text-align: center;
    color: var(--white);
}
div.donate > aside {
	display: block;
	width: 100%;
	padding: 1.5rem;
	border-radius: 2rem;
	margin: 0 0 1rem 0;
	background-color: var(--red-dark);
}
div.donate > aside h3 {
	margin-top: 0;
	font-weight: 700;
	color: var(--white);
}
div.donate > aside a.cta-white {
	display: inline-block;
	position: relative;
	clear: both;
	width: auto;
	min-width: 130px;
	padding: 12px 50px 10px 30px;
	margin: 0;
	border: none;
	border-radius: 30px;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	background: var(--white) url("../img/campaign/icon-donate-arrow.svg") no-repeat 85% 55%;
	color: var(--red);
	transition: all 0.2s ease;
}
section#contact {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: nowrap;
	padding: 0;
}
section#contact div.contact-block {
	display: block;
	width: 50%;
	padding: 3rem 0;
	margin: 0;
}
section#contact div.contact-block.contact-image {
	position: relative;
	padding: 0;
	max-height: 500px;
	overflow: hidden;
}
section#contact div.contact-block.contact-image::before {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	border: none;
	border-top: 500px solid var(--white);
	border-right: 100px solid transparent;
}
section#contact div.contact-block.contact-image img {
	display: block;
	width: 100%;
	line-height: 1;
	object-fit: cover;
}
section#contact div.contact-block .container {
	display: block;
	width: 100%;
	max-width: 550px;
	margin: 0 0 0 auto;
}
section#contact h2 {
	margin-top: 0;
	font-weight: 900;
	color: var(--red-dark);
}
section#contact .container p.red strong {
	font-weight: 900;
}
section#contact .container p.red a {
	font-weight: 700;
}
footer.site-footer {
	margin-top: 0;
}

/* !Media Queries ============================== */

@media only screen and (min-width: 320px) and (max-width: 800px) {
    section#vision-banner > h1 { padding: 1rem 3rem 1rem 5%; box-shadow: -100px 0px 0px 0px var(--red); font-size: 2.5rem; }
    div.inverted-right,
    div.inverted-left { width: 100%; }
    section#vision .container { padding: 0 1rem; }
    section#vision-banner div.image-box { flex: 0 0 100%; max-width: 100%; }
    section#vision .container > h2 { flex: 0 0 100%; max-width: 100%; padding: 0; border: none; font-size: 2.25rem; }
    section#vision .container > div.cke { flex: 0 0 100%; max-width: 100%; }
    section#vision .container p { font-size: 1rem; }
    section#impact > h2,
    section#momentum > h2 { position: relative; top: auto; padding: 1rem 3rem 1rem 5%; margin-bottom: 1.5rem; font-size: 2.5rem; }
    section#impact .container { padding: 0 1rem; }
    section#impact .container p,
    section#momentum .container p { font-size: 1rem; }
    section#possibilities-banner div.image-box > p.concept-label, section#momentum-banner div.image-box > p.concept-label { bottom: 1.5rem; font-size: 0.75rem; }
    section#vision-banner div.image-box > img.sticker,
    section#momentum-banner div.image-box > img.sticker { display: none; }
    section#possibilities-banner > h2 { padding: 1rem 5% 1rem 3rem; box-shadow: 100px 0px 0px 0px var(--red); font-size: 2rem; }
    section#possibilities-banner div.image-box { flex: 0 0 100%; max-width: 100%; }
    section#possibilities .container table { font-size: 0.875rem; }
    section#possibilities .container table tr > th { font-size: 1.125rem; }
    section#possibilities .container table td img { order: 1; flex: 0 0 25%; max-width: 25% !important; }
    section#possibilities .container table div.dimension { order: 0; flex: 0 0 90%; max-width: 90%; }
    section#possibilities .container table div.dimension > p { font-size: 1.125rem; }
    section#momentum-banner div.image-box { flex: 0 0 100%; max-width: 100%; }
    section#momentum { padding: 0 0 3rem 0; }
    section#momentum .container { padding: 0 1rem; }
    section#donation .container { padding: 0 1rem; }
    section#donation .container div.matching-gift { flex: 0 0 100%; max-width: 100%; padding: 0; border: none; }
    section#donation .container div.donate { flex: 0 0 100%; max-width: 100%; padding: 0; }
    section#contact { flex-wrap: wrap; }
    section#contact div.contact-block.contact-image { flex: 0 0 100%; max-width: 100%; }
    section#contact div.contact-block { flex: 0 0 100%; max-width: 100%; padding: 1.5rem 0; }
    section#contact div.contact-block.contact-image::before { display: none; }
}
@media only screen and (min-width: 800px) {
    section#impact > h2,
    section#momentum > h2 { position: relative; top: auto; margin-bottom: 1.5rem; }
    section#impact .container,
    section#momentum .container,
    section#vision .container { max-width: 800px; padding: 0 1rem; }
    section#vision-banner div.image-box > img.sticker { left: -140px; }
    section#vision .container > h2 { flex: 0 0 100%; max-width: 100%; padding: 0; border: none; }
    section#vision .container > div.cke { flex: 0 0 100%; max-width: 100%; }
}
@media only screen and (min-width: 1200px) {
    section#impact .container,
    section#momentum .container,
    section#vision .container { max-width: 1000px; padding: 0 1rem; }
    section#vision-banner div.image-box > img.sticker { left: -200px; }
    section#vision .container > h2 { flex: 0 0 40%; max-width: 40%; padding: 0 3rem 0 0; border-right: 1px solid var(--grey); }
    section#vision .container > div.cke { flex: 0 0 56%; max-width: 56%; }
}
@media only screen and (min-width: 1400px) {
    section#impact > h2,
    section#momentum > h2 { position: absolute; margin-bottom: 0 }
    section#impact .container,
    section#momentum .container { max-width: 1200px; padding: 0 0 0 40%; }
    section#vision .container { max-width: 1200px; }
}
@media only screen and (min-width: 1600px) {
    section#impact .container,
    section#momentum .container { padding: 0 0 0 28%; }
}
@media only screen and (min-width: 1800px) {
    section#impact .container,
    section#momentum .container { padding: 0 0 0 20%; }
}
@media only screen and (min-width: 2000px) {
    section#impact .container,
    section#momentum .container { padding: 0 0 0 15%; }
}
@media only screen and (min-width: 2400px) {
    section#impact .container,
    section#momentum .container { max-width: 1400px; padding: 0 0 0 10%; }
}