:root {
	--color-teal: #177E89;
	--color-navy: #08415C;
	--color-gray: #4F4F4F;
	--color-off-white: #E1E1E1;
	--color-white: #FFFFFF;
	
	--text-color: var(--color-gray);
	--heading-color-standard: var(--color-navy);
	--heading-color-hero: white;
	--accent-color: var(--color-navy);

	--button-text-color: white;
	--button-border-color: var(--color-teal);
	--button-background-color: var(--color-teal);
	
	--button-hover-text-color: var(--color-teal);
	--button-hover-background-color: white;

	--adl-row-gap-sm: 0.75em;
	--adl-row-gap-lg: 1em;
}

.term--surface-water {
	--color-green: #6D9D2A;
	--color-teal: #177E89;
	--color-navy: #08415C;
	--color-leaf-green: #4C934C;
	--color-gradient-green-to-blue: linear-gradient(to right, rgba(8, 65, 92, 0.8) 0%, rgba(76, 147, 76, 0.2) 100%);

	--primary-color: var(--color-teal);
	--secondary-color: var(--color-navy);
	--accent-color: var(--color-navy);

	--page-header-bg: linear-gradient(to right, rgba(8, 65, 92, 0.8) 0%, rgba(76, 147, 76, 0.2) 100%), url("/themes/custom/pathways/img/algae_bg.jpg");
	--homepage-header-bg: linear-gradient(rgba(8, 65, 92, 0.9) 0%, rgba(10, 79, 72, 0.7408) 43.58%, rgba(76, 147, 76, 0.75) 100%), url('/themes/custom/pathways/img/algae_bg.jpg');
	--gradient-overlay: var(--color-gradient-green-to-blue);

	--twitter-feed-block-bg-color: var(--color-navy);
	--twitter-feed-container-bg-color: var(--color-teal);
	--twitter-feed-container-border-color: var(--color-teal);

	--button-text-color: white;
	--button-border-color: var(--color-teal);
	--button-background-color: var(--color-teal);
	
	--button-hover-text-color: var(--color-teal);
	--button-hover-background-color: white;

	--link-list-arrow-color: var(--color-green);
	--link-list-border-color: var(--color-navy);

	--carousel-caption-bg-color: rgba(19, 79, 89, 0.8);

	--offset-border: var(--color-teal);

	--adl-ask-border-color: var(--color-navy);
	--adl-discover-border-color: var(--color-teal);
	--adl-learn-border-color: var(--color-green);
	--adl-arrow-color: var(--color-teal);
}

.term--food-waste {
	--color-red: #842727;
	--color-yellow: #AE9437;
	--color-brown: #54422E;
	
	--primary-color: var(--color-red);
	--secondary-color: var(--color-yellow);
	--accent-color: var(--color-brown);

	--page-header-bg: linear-gradient(214.15deg, rgba(115, 94, 70, 0.8) 25.56%, rgba(115, 94, 70, 0.5) 98.22%), url("/themes/custom/pathways/img/foodwaste_bg.png");
	--homepage-header-bg: linear-gradient(233.49deg, rgba(115, 94, 70, 0.8) 25.56%, rgba(115, 94, 70, 0.5) 98.22%), url('/themes/custom/pathways/img/foodwaste_bg.png');
	--gradient-overlay: linear-gradient(214.15deg, rgba(115, 94, 70, 0.8) 25.56%, rgba(115, 94, 70, 0.5) 98.22%);

	--twitter-feed-block-bg-color: var(--color-yellow);
	--twitter-feed-container-bg-color: var(--color-brown);
	--twitter-feed-container-border: 0 solid var(--color-brown);

	--button-text-color: white;
	--button-border-color: var(--color-red);
	--button-background-color: var(--color-red);
	
	--button-hover-text-color: var(--color-red);
	--button-hover-background-color: white;

	--link-list-arrow-color: var(--color-yellow);
	--link-list-border-color: var(--color-brown);

	--carousel-caption-bg-color: rgba(84, 66, 46, 0.8);

	--offset-border: var(--color-red);

	--adl-ask-border-color: var(--color-brown);
	--adl-discover-border-color: var(--color-red);
	--adl-learn-border-color: var(--color-yellow);
	--adl-arrow-color: var(--color-red);
}

.term--energy {
	--color-electric-blue: #2C68D8;
	--color-mauve: #9A577F;
	--color-ultramarine: #1C2256; /* https://hexcolorpedia.com/color/1c2256/ */
	
	--primary-color: var(--color-mauve);
	--secondary-color: var(--color-ultramarine);
	--accent-color: var(--color-mauve);

	--page-header-bg: linear-gradient(215.68deg, rgba(44, 104, 216, 0.75) 36.51%, rgba(154, 87, 127, 0.65) 113.63%), url("/themes/custom/pathways/img/energy_pathway_header.png");
	--homepage-header-bg: linear-gradient(215.68deg, rgba(44, 104, 216, 0.75) 36.51%, rgba(154, 87, 127, 0.65) 113.63%), url('/themes/custom/pathways/img/energy_bg.png');
	--gradient-overlay: linear-gradient(215.68deg, rgba(44, 104, 216, 0.75) 36.51%, rgba(154, 87, 127, 0.65) 113.63%);

	--twitter-feed-block-bg-color: var(--color-ultramarine);
	--twitter-feed-container-bg-color: var(--color-ultramarine);
	--twitter-feed-container-border: 2px solid var(--color-electric-blue);

	--button-text-color: white;
	--button-border-color: var(--color-electric-blue);
	--button-background-color: var(--color-electric-blue);
	
	--button-hover-text-color: var(--color-electric-blue);
	--button-hover-background-color: white;

	--link-list-arrow-color: var(--color-ultramarine);
	--link-list-border-color: var(--color-mauve);

	--carousel-caption-bg-color: rgba(44, 104, 216, 0.8);

	--offset-border: var(--color-electric-blue);

	--adl-ask-border-color: var(--color-mauve);
	--adl-discover-border-color: var(--color-electric-blue);
	--adl-learn-border-color: var(--color-ultramarine);
	--adl-arrow-color: var(--color-electric-blue);
}

.term--waste-management {
	--color-emerald-green: #005108;
	--color-olive: #7C8240;
	--color-dark-brownish-green: #2A2D0A;

	--heading-color-standard: var(--color-dark-brownish-green);
	--primary-color: var(--color-olive);
	--secondary-color: var(--color-dark-brownish-green);
	--accent-color: var(--color-olive);

	--page-header-bg: linear-gradient(227.35deg, rgba(42, 45, 10, 0.9) 25.56%, rgba(42, 45, 10, 0.4) 98.22%), url("/sites/dev.pathways.mste.illinois.edu/files/2023-04/wastemanagement_pathway_header.png");
	--homepage-header-bg: linear-gradient(227.35deg, rgba(48, 51, 13, 0.9) 25.56%, rgba(48, 51, 13, 0.4) 98.22%), url('/themes/custom/pathways/img/wastemanagement_bg.png');
	--gradient-overlay: linear-gradient(227.35deg, rgba(42, 45, 10, 0.9) 25.56%, rgba(42, 45, 10, 0.4) 98.22%);

	--twitter-feed-block-bg-color: var(--color-emerald-green);
	--twitter-feed-container-bg-color: var(--color-dark-brownish-green);
	--twitter-feed-container-border: 0 solid var(--color-dark-brownish-green);

	--button-text-color: white;
	--button-border-color: var(--color-emerald-green);
	--button-background-color: var(--color-emerald-green);
	
	--button-hover-text-color: var(--color-emerald-green);
	--button-hover-background-color: white;

	--link-list-arrow-color: var(--color-dark-brownish-green);
	--link-list-border-color: var(--color-olive);

	--carousel-caption-bg-color: rgba(42, 45, 10, 0.8);

	--offset-border: var(--color-olive);

	--adl-ask-border-color: var(--color-olive);
	--adl-discover-border-color: var(--color-emerald-green);
	--adl-learn-border-color: var(--color-dark-brownish-green);
	--adl-arrow-color: var(--color-emerald-green);
}

.term--environmental-justice {
	--color-purple: #512B6F;
	--color-orange: #CB5B4C;
	--color-lavender: #806F8E;

	--heading-color-standard: var(--color-purple);
	--primary-color: var(--color-orange);
	--secondary-color: var(--color-lavender);
	--accent-color: var(--color-orange);

	--page-header-bg: linear-gradient(227.35deg, rgba(81, 43, 111, 0.9) 37.79%, rgba(157, 71, 93, 0.628365) 87.39%), url("/themes/custom/pathways/img/environmentaljustice_pathway_header_plain.jpg");
	--homepage-header-bg: linear-gradient(227.35deg, rgba(81, 43, 111, 0.9) 37.79%, rgba(157, 71, 93, 0.628365) 87.39%), url('/themes/custom/pathways/img/environmentaljustice_bg.png');
	--gradient-overlay: linear-gradient(227.35deg, rgba(81, 43, 111, 0.9) 37.79%, rgba(157, 71, 93, 0.628365) 87.39%);

	--twitter-feed-block-bg-color: var(--color-purple);
	--twitter-feed-container-bg-color: var(--color-lavender);
	--twitter-feed-container-border: 0 solid var(--color-lavender);

	--button-text-color: white;
	--button-border-color: var(--color-purple);
	--button-background-color: var(--color-purple);
	
	--button-hover-text-color: var(--color-purple);
	--button-hover-background-color: white;

	--link-list-arrow-color: var(--color-lavender);
	--link-list-border-color: var(--color-orange);

	--carousel-caption-bg-color: rgba(81, 43, 111, 0.8);

	--offset-border: var(--color-orange);

	--adl-ask-border-color: var(--color-orange);
	--adl-discover-border-color: var(--color-purple);
	--adl-learn-border-color: var(--color-lavender);
	--adl-arrow-color: var(--color-purple);
}

.term--sitewide-default {
	--color-emerald-green: #005108;
	--color-olive: #7C8240;
	--color-dark-brownish-green: #2A2D0A;

	--heading-color-standard: var(--color-dark-brownish-green);
	--primary-color: var(--color-olive);
	/* --secondary-color: var(--color-dark-brownish-green); */
	--secondary-color: var(--color-navy);
	--accent-color: var(--color-olive);

	/* --page-header-bg: linear-gradient(227.35deg, rgba(42, 45, 10, 0.9) 25.56%, rgba(42, 45, 10, 0.4) 98.22%), url("/sites/dev.pathways.mste.illinois.edu/files/2023-04/wastemanagement_pathway_header.png"); */
	--page-header-bg: linear-gradient(227.35deg, rgba(8, 65, 92, 0.9) 25.56%, rgba(10, 79, 72, 0.740765) 57.22%, rgba(76, 147, 76, 0.75) 98.22%), url("/themes/custom/pathways/img/pathways_forest.png");
	/* --homepage-header-bg: linear-gradient(227.35deg, rgba(8, 65, 92, 0.9) 25.56%, rgba(10, 79, 72, 0.740765) 57.22%, rgba(76, 147, 76, 0.75) 98.22%, var(--color-teal) 100%), linear-gradient(0deg, #000000 60.5%, rgba(0, 0, 0, 0) 100%), url("/themes/custom/pathways/img/pathways_forest.png"); */
	/* --homepage-header-bg: linear-gradient(180deg, rgba(8, 65, 92, 0.9) 5.56%, rgba(10, 79, 72, 0.740765) 49.22%, rgba(76, 147, 76, 0.75) 73.22%, var(--color-teal) 100%), url("/themes/custom/pathways/img/pathways_forest.png"); */
	--homepage-header-bg: linear-gradient(180deg, transparent 85%, var(--color-teal) 100%), linear-gradient(227.35deg, rgba(8, 65, 92, 0.9) 25.56%, rgba(10, 79, 72, 0.740765) 57.22%, rgba(76, 147, 76, 0.75) 98.22%, var(--color-teal) 100%), url("/themes/custom/pathways/img/pathways_forest.png");
	--gradient-overlay: linear-gradient(227.35deg, rgba(8, 65, 92, 0.9) 25.56%, rgba(10, 79, 72, 0.740765) 57.22%, rgba(76, 147, 76, 0.75) 98.22%, var(--color-teal) 100%);

	--twitter-feed-block-bg-color: var(--color-emerald-green);
	--twitter-feed-container-bg-color: var(--color-dark-brownish-green);
	--twitter-feed-container-border: 0 solid var(--color-dark-brownish-green);

	--button-text-color: white;
	--button-border-color: var(--color-navy);
	--button-background-color: var(--color-navy);
	
	--button-hover-text-color: var(--color-navy);
	--button-hover-background-color: white;

	--link-list-arrow-color: var(--color-dark-brownish-green);
	--link-list-border-color: var(--color-olive);

	--carousel-caption-bg-color: rgba(42, 45, 10, 0.8);

	--offset-border: var(--color-olive);

	--adl-ask-border-color: var(--color-olive);
	--adl-discover-border-color: var(--color-emerald-green);
	--adl-learn-border-color: var(--color-dark-brownish-green);
	--adl-arrow-color: var(--color-emerald-green);
}

.paragraph_blue {
	--link-list-arrow-color: white;
	--link-list-border-color: white;
}


h1, h2, h3, h4, h5, h6 {
	color: var(--heading-color);
}

h2, h3, h4, h5, h6 {
	font-family: "Roboto Slab", serif;
	font-weight: normal;
}

h1 {
	font-size: 3em;
	margin-block: 1.5em;
}

h2 {
	font-size: 2.25em;
	margin-block-start: 2em;
	text-align: center;
}

h2.visually-hidden {
	margin: 0;
}

h3 {
	font-size: 1.5em;
}

p {
	margin-block-start: 1em;
	margin-block-end: 1em;
}

.paragraph_white {
	--heading-color: var(--heading-color-standard);
}

.paragraph_white .aod_container {
	color: var(--accent-color);
}

.max_width_wide {
    max-width: 900px;
    margin: auto;
    padding: 0 1em;
}

.max_width_narrow {
	max-width: 800px;
	margin: auto;
	padding: 0 1em;
}

a,
a:visited {
    color: var(--color-teal);
    text-decoration: none;
    font-weight: bold;
}
	a:hover,
	a:focus {
		text-decoration: underline;
	}
	.blue_container a:not(.button-link),
	.blue_container a:not(.button-link):visited,
	.paragraph_blue a:not(.button-link),
	.paragraph_blue a:not(.button-link):visited {
		color: white;
	}

/* Fix for IE11 min height/flex issues. */
.ie-minheight-container { display: flex; }
.ie-minheight-container > * { width: 100%; }

/* Surface Water curriculum page, Curriculum page, Resources page, About page, Connect page */
.blue_container, .paragraph_blue {background-color: var(--color-teal); color: white;}
.navy_container, .paragraph_navy {background-color: var(--color-navy); color: white;}

/* Homepage "Tools for Teachers" section, Curriculum Resources page */
.primary_container,
.paragraph_primary {
	color: white;
	background-color: var(--primary-color);
}

/* Homepage "Tools for Teachers" section (Surface Water) */
.term--surface-water .primary_container,
.term--surface-water .paragraph_primary,
.term--surface-water .blue_container,
.term--surface-water .paragraph_blue {
	--button-text-color: white;
	/* --button-border-color: var(--color-teal);
	--button-background-color: var(--color-teal); */
	--button-border-color: var(--color-green);
	--button-background-color: var(--color-green);
	
	--button-hover-text-color: var(--color-green);
	/* --button-hover-text-color: var(--color-teal); */
	--button-hover-border-color: white;
	--button-hover-background-color: white;
}

/* Homepage "Tools for Teachers" section (Food Waste) */
.term--food-waste .primary_container,
.term--food-waste .paragraph_primary {
	--button-text-color: white;
	--button-border-color: var(--color-yellow);
	--button-background-color: var(--color-yellow);
	
	--button-hover-text-color: var(--color-yellow);
	--button-hover-background-color: white;
}

/* Blue background section (not tagged with Surface Water term) */
.blue_container,
.paragraph_blue {
	--button-text-color: var(--color-teal);
	--button-border-color: white;
	--button-background-color: white;
	
	--button-hover-text-color: white;
	--button-hover-background-color: var(--color-teal);
}

.blue_container .button-outlined,
.paragraph_blue .button-outlined {
	--button-text-color: white;
	--button-border-color: white;
	--button-background-color: transparent;
	
	--button-hover-text-color: var(--color-teal);
	--button-hover-background-color: white;
}

.secondary_container,
.paragraph_secondary {
	color: white;
	background-color: var(--secondary-color);
}

.button-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 1em 1.5em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

/* button-link on white background */
/* .white_container a.button-link,
.paragraph_white a.button-link:not(.callToAction),
.white_container a.button-link:not(.callToAction),
.paragraph_white a.button-link:not(.callToAction) */
.button-link,
a.button-link,
button.button-link,
.white_container .button-link,
.paragraph_white .button-link {
	color: var(--button-text-color);
	border: .15em solid var(--button-border-color);
	background: var(--button-background-color);
}
/* button-link hover/focus on white background */

/* a.button-link:hover,
a.button-link:focus,
.white_container a.button-link:not(.callToAction):hover,
.white_container a.button-link :not(.callToAction):focus,
.paragraph_white a.button-link:not(.callToAction):hover,
.paragraph_white a.button-link:not(.callToAction):focus */
.button-link:hover,
.button-link:focus,
.white_container .button-link:hover,
.white_container .button-link:focus,
.paragraph_white .button-link:hover,
.paragraph_white .button-link:focus {
	background-color: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
	text-decoration: none;
}

.button-link.button-lg {
    font-size: 1.3em;
    margin-top: 1em;
}

.button-link.button-outlined {
	--button-border-color: var(--button-text-color);
	--button-background-color: transparent;
}

.button-link.button-inverted {
	color: var(--button-background-color);
	background-color: var(--button-text-color);
	border: var(--button-background-color);
}

.button-link.button-inverted:hover,
.button-link.button-inverted:focus {
	color: var(--button-text-color);
	background-color: var(--button-background-color);
	border: var(--button-border-color);
}

a.pdf {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    a.pdf:after {
        content: ' (pdf)';
        text-indent: -20em;
        width: 1.5em;
        height: 1.5em;
        display: inline-block;
        background: url('/themes/custom/pathways/img/pdf_custom.svg');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        /* position: relative; */
        /* top: 0; */
        /* left: 0; */
        overflow: hidden;
        margin-left: .25em;
    }

    .link-list a.pdf {
        margin-top: -.2em;
    }

.transparentButton, input.transparentButton {
    border: .15em solid white;
    background: transparent;
    color: white;
    text-transform: uppercase;
    padding: .75em 1.25em;
}

	.transparentButton:hover, .transparentButton:focus,
	input.transparentButton:hover, input.transparentButton:focus {
		color: var(--color-teal);
		background-color: white;
	}

ul.arrow-list li, ul.link-list li {
    list-style: none;
}
	
	ul.arrow-list li:before, ul.link-list li:before {
		content: "";
		border-color: transparent var(--link-list-arrow-color, var(--color-teal));
		border-style: solid;
		border-width: 0.45em 0 0.45em 0.65em;
		display: block;
		height: 0;
		width: 0;
		left: -1.4em;
		top: 1em;
		position: relative;
	}

	ul.arrow-list p:first-child {
		font-family: "Roboto Slab", serif;
		margin-top: 0;
	}

/* List of Links with border */
ul.link-list {
    border: .2em solid var(--link-list-border-color, var(--color-navy));
    padding: 1em 1em 1.75em 4em;
    margin-left: 2em;
}


/** PARAGRAPH STYLES **/

.paragraph_container, .webform-submission-contact-form {
    overflow: auto;
}

.paragraph_container {
	padding-bottom: 3em;
}

.paragraph--type--carousel-content {
    margin-top: 2em;
}

.carousel .carousel-caption {
	background-color: var(--carousel-caption-bg-color);
}

.paragraph--type--white-container {
    padding-top: 3em;
}

	div:last-child > .paragraph--type--white-container	{
		padding-bottom: 3em;
	}

/**
 * Image Header
 */

/* Show image header content items in 2 columns when feasible */
@media screen and (min-width: 950px) {
	.paragraph--type--image-header-container > * {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.paragraph--type--image-header-container > * > * {
		max-width: 44%;
	}

	/* Shorter image header for non-featured pathways */
	.paragraph--type--image-header-container .imageHeaderContainer {
		height: 7.5em;
	}
}


/* Fallback for IE/Edge */
.paragraph--type--image-header-content, .paragraph--type--image-header-link-content {
	margin: 1em 0 2em 0;
}
	.imageHeaderContent {
		border: .2em solid var(--offset-border, white);
		padding: 1em;
	}

	.imageHeaderContainer img {
		display: none;
	}

/* Behavior for modern browsers */
@supports (object-fit: cover) {
.paragraph--type--image-header-content, .paragraph--type--image-header-link-content {
    margin: 1.5em 0px 2em 0em;
    box-sizing: inherit;
}
	.paragraph_grid .paragraph--type--image-header-content { margin-top: 0; }
	@media screen and (max-width: 950px) and (min-width: 850px) {
		.paragraph--type--image-header-content, .paragraph--type--image-header-link-content {
			margin-left: calc(475px - 50vw);
		}
	}
	@media screen and (max-width: 849px) {
		.paragraph--type--image-header-content, .paragraph--type--image-header-link-content {
			margin-left: 50px;
		}
	}
	.imageHeaderContainer {
		height: 11.5em;
		overflow: hidden;
		position: relative;
		left: -3em;
		top: -1em;
		margin-bottom: -4em;
	}
		.imageHeaderContainer img {
			display: block;
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	.imageHeaderContent {
		border: .2em solid white;
		position: relative;
		padding: 3.5em 2.5em 2em 2.5em;
	}

	.paragraph_white .imageHeaderContent {
		border-color: var(--offset-border, var(--color-teal));
	}
}

.imageHeaderContent h2.featured {
	text-transform: uppercase;
	font-family: Roboto Slab, serif;
	font-size: 1.1em;
}
.imageHeaderContent h3 {
	margin: .7em 0;
	text-align: left;
}

.imageHeaderContent .descWithCallToAction .callToActionContainer {
	text-align: right;
	/* display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end; */
}
/* @media screen and (min-width: 700px) {
	.imageHeaderContent .descWithCallToAction {
		display: flex;
	}
	.imageHeaderContent .descWithCallToAction .desc {
		width: 60%;
	}
	.imageHeaderContent .descWithCallToAction .callToActionContainer {
		width: 40%;
	}
}
@media screen and (min-width: 900px) {
	.imageHeaderContent .descWithCallToAction .desc {
		width: 70%;
	}
	.imageHeaderContent .descWithCallToAction .callToActionContainer {
		width: 30%;
	}
} */

/* callToAction button-link on Resources page */
.paragraph_white .imageHeaderContent a.callToAction.button-link {
	color: var(--button-background-color);
	background-color: white;
	border-color: white;
}

.paragraph_white .imageHeaderContent a.callToAction.button-link:hover,
.paragraph_white .imageHeaderContent a.callToAction.button-link:focus {
	color: white;
	background-color: var(--button-background-color);
	border-color: var(--button-border-color);
}

.paragraph--type--image-header-link-content {
    max-width: 23em;
}
	/**
	 * 2023-05-04: CANNOT FIND WHERE THIS IS USED ON THE SITE.
	 * Referenced in paragraph--image-header-link-content.html.twig, but don't see that we're actually using that anywhere
	 **/
	/* .imageHeaderLinkContent {
		border: none;
		background-color: #177E89;
		color: white;
		padding: 2em 1em;
		display: flex;
		justify-content: center;
		align-items: center;
	}

		.imageHeaderLinkContent a {
			color: white;
			text-decoration: none;
		}
		.imageHeaderLinkContent a:hover, .imageHeaderLinkContent a:focus { text-decoration: underline; }

		.imageHeaderLinkContent img {
			width: 4em;
			height: auto;
			margin-right: 2em;
		} */

/**
 * Diptych Container
 */

.paragraph--type--diptych-container > * {
	display: flex;
	flex-direction: column;
	gap: 2em;
}

/* Show diptych items in 2 columns when feasible */
@media screen and (min-width: 950px) {
	.paragraph--type--diptych-container > * {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.paragraph--type--diptych-container > * > * {
		max-width: 48%;
	}
}

.paragraph--type--diptych-container .max_width_narrow {
	padding: 2em 0;
}

.paragraph--type--diptych-container .paragraph--type--basic-content {
	padding-inline: 3em;
}


/**
 * Image Block
 */

.paragraph--type--image-block-container > * {
	display: flex;
	flex-direction: column;
	gap: 2em;
}

/* Show image block content items in 2 columns when feasible */
@media screen and (min-width: 950px) {
	.paragraph--type--image-block-container > * {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.paragraph--type--image-block-container > * > * {
		max-width: 48%;
	}
}

.paragraph--type--image-block-container .max_width_narrow {
	padding: 2em 0;
}

.paragraph--type--image-block-content {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.imageBlockContainer,
.imageBlockContainer .imageBG {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.imageBlockContainer::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: inline-block;
	background: var(--gradient-overlay);
}

.imageBlockContent {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 3em;
	text-align: center;
	/* height: calc(100% - 6em); */
}

.imageBlockContent > * {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	height: 100%;
}

.imageBlockContent h3 {
	font-size: 2em;
}

.imageBlockContent .callToActionContainer {
	margin-top: auto;
}

/**
 * Resource Link
 */
.paragraph--type--resource-link-container {margin-top: 2em;}
		
.paragraph--type--resource-link-container .max_width_narrow {
	display: flex;
	flex-direction: column;
	align-items: center;
}

	@media screen and (min-width: 580px) {
		.paragraph--type--resource-link-container .max_width_narrow {
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: stretch;
		}
	}
	@media screen and (min-width: 950px) {
			.paragraph--type--resource-link-container .max_width_narrow .paragraph--type--resource-link-content {
				/* max-width: calc(45% - 1em); */
				/* margin-top: 5em; */
				/* display: flex; */
				/* align-self: stretch; */
			}
	}

	.paragraph--type--resource-link-container .max_width_narrow > div {
		margin-bottom: 2em;
		margin-left: .5em;
		margin-right: .5em;
		display: flex;
	}

	.paragraph--type--resource-link-content {
		width: 14em;
		border: .25em solid var(--color-teal);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.paragraph_primary .paragraph--type--resource-link-content,
	.paragraph_secondary .paragraph--type--resource-link-content {
		border: .25em solid white;
	}

		.resourceImageContainer {width: 100%;height: 8em;}

		.resourceImageContainer img {
			object-fit: cover;
			width: 100%;
			height: 100%;
		}

		.resourceLinkContent {
			flex: 1 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
		}

		.resourceLinkContent > div {
			display: flex;
			padding: 1em;
			justify-content: center;
		}

		.resourceLinkContent a {
			color: var(--color-teal);
			font-family: Roboto Slab, serif;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
			flex-basis: 100%;
		}

		.paragraph_primary .resourceLinkContent a,
		.paragraph_secondary .resourceLinkContent a {
			color: white;
		}

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

.aod_container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    margin: 3em;
}
	
	.aod_container svg {
		width: 5em;
		height: auto;
		fill: currentColor;
	}

	.aod_container .connector {
		height: .2em;
		background: currentColor;
		width: 3.5em;
		margin-top: -2.5em;
	}

	.aod_container .ask, .aod_container .observe, .aod_container .discover {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.aod_container .ask span, .aod_container .observe span, .aod_container .discover span {
		margin-top: 1.5em;
	}
	
.paragraph--type--svg-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3em;
}

	.paragraph--type--svg-header .svgContainer {
		margin-right: 1em;
		fill: currentColor;
	}
	
.paragraph--type--svg-link-grid-content > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

	.paragraph--type--svg-link-grid-content > div > div {
		width: calc(50% - 1em);
		margin-bottom: 2em;
	}	

	.paragraph--type--svg-link-content a {
		display: block;
		background: var(--button-background-color);
		color: white;
		text-transform: uppercase;
		text-decoration: none;
		padding: 2em 1em 1em 2em;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		border: .2em solid transparent;
		font-weight: normal;
	}

	.paragraph--type--svg-link-content a > * {
		margin-right: 1em;
		margin-bottom: 1em;
	}

	.primary_container .paragraph--type--svg-link-content a:hover,
	.primary_container .paragraph--type--svg-link-content a:focus,
	.paragraph_primary .paragraph--type--svg-link-content a:hover,
	.paragraph_primary .paragraph--type--svg-link-content a:focus,
	.paragraph--type--svg-link-content a:hover,
	.paragraph--type--svg-link-content a:focus {
		background: transparent;
		border-color: white;
	}

	.paragraph--type--svg-link-content svg {
		height: 4em;
		width: auto;
	}

	.paragraph--type--svg-link-content .svgContainer {
		min-width: 4em;
		flex: 0 0;
	}
	
	.paragraph--type--svg-link-content a .linkTitle {
		flex: 1 0 auto;
		text-align: center;
		max-width: 100%;
	}

	@media screen and (max-width: 400px) {
		.paragraph--type--svg-link-grid-content > div > div { width: 100%; }
	}
	
.paragraph--type--hero-image-container {
    overflow: auto;
    background-size: cover;
    background-position: center center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
	.paragraph--type--hero-image-container.offset { min-height: 85vh; }
	.paragraph--type--hero-image-container.offset .heroImageContent .max_width_narrow > div {
		max-width: 24em;
		text-align: center;
	}

	.paragraph--type--hero-image-container.centered {
		padding: 5em 0;
		box-sizing: content-box;
	}

		.paragraph--type--hero-image-container h2:first-child,
		.paragraph--type--hero-image-container h3:first-child,
		.paragraph--type--hero-image-container h4:first-child,
		.paragraph--type--hero-image-container h5:first-child,
		.paragraph--type--hero-image-container h6:first-child {
			margin-top: 0;
		}

		.paragraph--type--hero-image-container a {
			color: white;
		}
	
.paragraph--type--gradient-image {
    margin-bottom: 4em;
}

    .gradientImageContainer {
        position: relative;
        margin-bottom: 1em;
    }

        .gradientImageContainer:after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: inline-block;
            background: linear-gradient(to right, rgba(8, 65, 92, 0.8) 0%, rgba(76, 147, 76, 0.2) 100%);
        }

        img.gradientImage {
            display: block;
            max-width: 100%;
        }
		
		.paragraph--type--gradient-image h2:first-child,
		.paragraph--type--gradient-image h3:first-child,
		.paragraph--type--gradient-image h4:first-child,
		.paragraph--type--gradient-image h5:first-child,
		.paragraph--type--gradient-image h6:first-child {
			margin-top: 0;
		}
	@supports (object-fit: cover) {
    @media screen and (min-width: 900px) {
        .paragraph--type--gradient-image {
            display: flex;
        }
        .gradientImageContainer {
            overflow: hidden;
            max-width: calc(50% - 1em);
            max-height: 35em;
            margin-right: 1em;
            margin-bottom: 0;
        }

        img.gradientImage {
            object-fit: cover;
            object-position: 60%;
            width: 100%;
            height: 100%;
        }
    }
}

.paragraph--type--flow-chart-container {
	margin: 2rem 0;
}

/* Heading with lines extending to either side */
.flow-chart-heading-wrapper {
	position:relative;
	margin-bottom: 1rem;
}

.flow-chart-heading-wrapper h3 {
	display: block;
	padding: 0.75rem;
	margin: 0 auto;
	width: max-content;
	background-color: white;
}

.flow-chart-heading-wrapper:after {
	content: ' ';
	position: absolute;
	width: 100%;
	height: 3px;
	background-color: #a7a7a7;
	top: 49%;
	left: 0;
	z-index: -1;
}

.paragraph--type--ask-discover-learn-flow-chart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
	gap: var(--adl-row-gap-sm);
    margin: auto;
    text-align: center;
	width: 20em;
    max-width: 100%;
}

	/* ADL section visual layout */
	.paragraph--type--ask-discover-learn-flow-chart .ask,
	.paragraph--type--ask-discover-learn-flow-chart .discover,
	.paragraph--type--ask-discover-learn-flow-chart .learn {
		border: .2em solid;
		width: 20em;
		box-sizing: border-box;
		max-width: 100%;
	}

	.paragraph--type--ask-discover-learn-flow-chart .ask, 
	.paragraph--type--ask-discover-learn-flow-chart .learn {
		padding: 1em;
	}

	/* ADL: Ask */
	.paragraph--type--ask-discover-learn-flow-chart .ask {
		border-color: var(--adl-ask-border-color);
	}

	/* ADL: Discover */
	.paragraph--type--ask-discover-learn-flow-chart .discover {
		border-color: var(--adl-discover-border-color);
		align-self: center;
	}

		.paragraph--type--ask-discover-learn-flow-chart .discover img {
			object-fit: cover;
			width: 100%;
			height: 100%;
			display: block;
		}

	/* ADL: Learn */
	.paragraph--type--ask-discover-learn-flow-chart .learn {
		border-color: var(--adl-learn-border-color);
	}

	.paragraph--type--flow-chart-container > div:not(.aod_container) > div {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--adl-row-gap-sm);
		margin-bottom: var(--adl-row-gap-sm);
	}

	/* ADL Arrows (inner and outer) */
	.paragraph--type--flow-chart-container .arrow {
		align-self: center;
		color: var(--adl-arrow-color);
	}

	.paragraph--type--flow-chart-container .arrow svg {
		width: 48px;
		height: 48px;
		transform: rotate(90deg);
		max-width: unset;
	}

	/* Outer arrow - last one always hidden */
	.paragraph--type--flow-chart-container > div > div:last-child .arrow.outside svg {
		display: none;
	}

	@media screen and (min-width: 700px) {
		.paragraph--type--flow-chart-container > div:not(.aod_container) > div {
			gap: 0;
			margin-bottom: 0;
		}

		.paragraph--type--flow-chart-container .aod_container {
			margin: 2em 4em;
		}

		.paragraph--type--flow-chart-container .aod_container .connector {
			flex: 1 0 auto;
		}

		.paragraph--type--ask-discover-learn-flow-chart {
			flex-direction: row;
			width: 100%;
			gap: var(--adl-row-gap-lg);
		}

		.paragraph--type--ask-discover-learn-flow-chart .ask,
		.paragraph--type--ask-discover-learn-flow-chart .learn {
			display: flex;
			justify-content: center;
			flex-direction: column;
			flex-wrap: wrap;
		}

		.paragraph--type--ask-discover-learn-flow-chart .arrow svg {
			width: 30px;
			height: 30px;
			transform: rotate(0deg);
		}

		/* Outer arrow only visible in single-column view */
		.paragraph--type--flow-chart-container .arrow.outside svg {
			display: none;
		}

		.paragraph--type--flow-chart-container > div > div:not(:last-child) .arrow.outside:before,
		.paragraph--type--flow-chart-container > div > div:not(:last-child) .arrow.outside:after, 
		.paragraph--type--flow-chart-container > div > div:not(:last-child) .arrow.outside {
			background-color: var(--adl-arrow-color);
		}

		.paragraph--type--flow-chart-container > div > div:not(:last-child) .arrow.outside {
			width: 74%;
			background-image: none;
			height: 3px;
			margin: 1.75em 0;
			position: relative;
			z-index: -1;
		}
		.paragraph--type--flow-chart-container > div > div:not(:last-child) .arrow.outside:before,
		.paragraph--type--flow-chart-container > div > div:not(:last-child) .arrow.outside:after {
			content: '';
			height: 2em;
			width: 3px;
			position: absolute;
		}
		.paragraph--type--flow-chart-container > div > div:not(:last-child) .arrow.outside:before {}
		.paragraph--type--flow-chart-container > div > div:not(:last-child) .arrow.outside:after {
			right: 0;
			bottom: 0;
		}
	}
	

/** HOME PAGE BLOCK STYLES **/

.r-header-third > div > div > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1em;
}

h1.homepageHeader.splitTitle {
    font-size: 4em;
    font-weight: normal;
    text-shadow: 2px 2px 1px rgba(0,0,0,.3);
    /* display: flex;
    flex-direction: column;
    align-items: center; */
	text-align: center;
    margin: 1em 0 .5em 0;
}

.homepageTagline {
    font-family: Roboto Slab, serif;
    font-size: 2.25em;
    font-weight: normal;
    letter-spacing: .03em;
    text-align: center;
	max-width: 40ch;
}

.homepageSeparator {
    margin: 4em 0 2em 0;
}

	.homepageSeparator img {
		width: 1.5em;
		height: auto;
	}

.homepageSplit {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4em;
    flex-wrap: wrap;
    box-sizing: border-box;
}

	.homepageSplit > * {
		margin-left: auto;
		margin-right: auto;
	}

	.homepageSplit .featuredStoryline {
		max-width: 18em;
		text-align: center;
	}

		.featuredStoryline h2 {
			text-transform: uppercase;
			font-size: 1.1em;
		}

		.featuredStoryline .storyTitle {
			font-family: Roboto Slab, serif;
			font-size: 2em;
			margin: .7em 0;
		}

@media screen and (max-width: 500px) {
	h1.homepageHeader.splitTitle {
		font-size: 13vw;
	}

	.homepageTagline {
		font-size: 4.5vw;
	}

	.aod_container {
		font-size: 3.5vw;
	}
}
	
@media screen and (max-width: 400px) {
	.homepageTagline {
		font-size: 1em;
	}

	.homepageSeparator {
		display: none;
	}
}
	
/** CONTACT FORM STYLES **/

.webform-submission-contact-form {
    padding-bottom: 3em;
}

.webform-submission-contact-form #edit-form {
    margin-bottom: 3em;
}

.webform-submission-contact-form .form-item {
	margin-top: 1em;
}

	.webform-submission-contact-form label {
		display: block;
		font-family: 'Roboto Slab', serif;
		margin-bottom: .25em;
	}

	.webform-submission-contact-form input:not([type='submit']), .webform-submission-contact-form textarea {
		border: none;
		padding: .5em;
		width: 100%;
		box-sizing: border-box;
	}

	.webform-submission-contact-form #edit-actions {
		display: flex;
		justify-content: center;
	}

		.webform-submission-contact-form input[type='submit'] {
			width: auto;
			margin-top: 1.5em;
			cursor: pointer;
		}

.webform-submission-contact-form fieldset {
    border: none;
    padding: 0 0 0 1em;
    margin: 1em 0 0 0;
}
	.webform-submission-contact-form legend {margin-left: -1em;font-family: 'Roboto Slab', serif;}

.webform-submission-contact-form .contactInfo {
    padding-left: 4.5em;
    background: url('/themes/custom/pathways/img/person.svg') top left / 3em no-repeat;
    margin-bottom: 2em;
}
	.webform-submission-contact-form .contactInfo p {
		margin: 0;
	}
	.webform-submission-contact-form .contactInfo .breaker {
		height: 1em;
	}

.webform-submission-contact-form .social a {
    display: inline-block;
    margin-right: 1em;
    padding: .25em;
    border: .1em dashed transparent;
    border-radius: .2em;
    display: inline-flex;
}
	.webform-submission-contact-form .social a:hover, .webform-submission-contact-form .social a:focus {
		border-color: white;
	}

@media screen and (min-width: 750px) {

	#edit-form-contact-container {
		display: flex;
		justify-content: space-between;
	}

	.webform-submission-contact-form input:not([type='submit']), .webform-submission-contact-form textarea {
		width: 23em;
	}

	.webform-submission-contact-form fieldset input:not([type='submit']) {
		width: 22em;
	}

	.webform-submission-contact-form #edit-form {
		max-width: 50%;
		margin-bottom: 0;
	}

	.webform-submission-contact-form #edit-extra-info {
		margin: 0 0 0 2em;
	}
}


/** Twitter feed **/
#block-twitterfeed {
	background-color: var(--twitter-feed-block-bg-color);
	color: white;
}

.twitter-feed {
    max-width: 30em;
    margin: auto;
    padding: 3em 1em;
}

	.twitter-feed h2 {
		margin-top: 0;
		margin-bottom: 1.25em;
	}

	.twitter-feed .feed-container {
		max-height: 80vh;
		overflow: auto;
		background-color: var(--twitter-feed-container-bg-color);
		border: var(--twitter-feed-container-border);
		color: white;
	}
	
/** Curriculum copyright **/
.curriculum_copyright {
    display: flex;
    font-size: .8em;
    font-style: italic;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2em auto;
}

	.curriculum_copyright img {
		height: 6em;
		width: auto;
	}

	.curriculum_copyright .eere,
	.curriculum_copyright .iepa {
		margin-right: 3em;
	}

	@media screen and (min-width: 700px) {
		.curriculum_copyright { flex-wrap: nowrap; }
		.curriculum_copyright .imark {order: 4;}
		.curriculum_copyright p, .curriculum_copyright .eere, .curriculum_copyright .iepa {
			margin-right: 1.5em;
			text-align: center;
		}
	}