/** Stylesheet for Story Template (2024) **/
	/** Variables **/
	:root {
		--blue: #005496;
		--orange: #f37736;
		--white: #fff;
		--textgrey: #333;
		--linkblue: #006dcc;
		--iceblue: #ebf2f7;
		--greybkg: #f2f2f2;
		--darkgrey: #999;
		--warmgrey: #f4f6f6;
		--vlightgrey: #f8f8f8;
		--blue75: rgba(0, 84, 150, 0.75);
		--white85: rgba(255, 255, 255, 0.85);
		--textgrey60: rgba(51, 51, 51, 0.6);
	}


	/** Overarching Styles **/
	body {
		color: var(--textgrey);
		font-size: 18px;
	}
	
	a[name] {
		display: block;
		position: relative;
		top: -107px;
	}
	
	h3 {
		color: var(--blue);
		font-size: 2.074rem;
		line-height: 2.5rem;
		margin-top: 2rem;
		margin-bottom: 1rem;
	}
	
	h4 {
		color: var(--blue);
		font-size: 1.728rem;
		line-height: 2rem;
		margin-bottom: 1rem;
	}
	
	a {
		color: var(--linkblue);
	}

	/** Page and DIV Set-Up **/

	#sheet {
		display: grid;
			grid-template-columns: 1fr 1fr 50vw 3fr 1fr;
		margin-bottom: 40px;
	}
	
	/** STORY TEMPLATE **/
	#sheet-head {
		display: grid;
			grid-template-columns: 1fr 50vw 3fr;
		grid-column: 2 / span 3;
		max-height: calc(100vh - 150px);
		padding: 40px 0;
	}
	
	#head-image {
		grid-column: 1 / span 2;
		margin-right: 20px;
		overflow: hidden;
		position: relative;
	}
	
	#head-setup {
		display: grid;
			align-items: center;
		grid-column-start: 3;
		margin-left: 20px;
	}
	
	#col-prim {
		display: grid;
			grid-template-columns: 1fr 50vw;
		grid-column: 2 / span 2;
		margin-right: 20px;
		/* margin-bottom: 2rem; */
	}
	
	#col-side {
		display: grid;
			row-gap: 40px;
		margin-left: 20px;
		/* margin-bottom: 2rem; */
		padding-left: 20px;
	}
	
	#sb_setup, #adss_setup {
		margin-bottom: 40px;
		width: 100%;
	}
	
	#adss_setup {
		display: none;
	}
	
	
	/** ARCHIVE PAGES **/
	#headblock {
		background-position: 0 50%;
		background-size: cover;
		display: grid;
			grid-template-columns: 1fr 40vw 5fr 1fr;
		min-height: 40vh;
		padding: 10vh 0;
	}
	
	#titleblock {
		background-color: var(--blue75);
		display: grid;
			align-items: center;
		grid-column-start: 2;
		padding: 1rem;
	}
	
	#ajax-load-more {
		grid-column: 1 / span 4;
	}
	
	.item_container, .infinite-scroll-container, .alm-listing {
		display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-column-gap: 2rem;
			grid-row-gap: 2rem;
		grid-column: 2 / span 3;
	}
	
	.archive-content {
		grid-column: 2 / span 3;
		margin-top: 2rem;
	}
	
	#titleblock h1 {
		color: var(--white);
		font-size: 2.986rem;
		font-weight: 800;
		letter-spacing: 2px;
		line-height: 3rem;
		text-shadow: -1px -1px 0 var(--blue), 1px -1px 0 var(--blue), -1px 1px 0 var(--blue), 1px 1px 0 var(--blue);
	}
	
	#titleblock h2 {
		color: var(--white);
		font-size: 1.728rem;
		font-weight: 300;
		margin-top: 1rem;
		text-shadow: -1px -1px 0 var(--blue), 1px -1px 0 var(--blue), -1px 1px 0 var(--blue), 1px 1px 0 var(--blue);
	}
	
	/** Individual Item Styles **/

	a.page-link {
		background-color: #fff;
		box-shadow: 0 0 7px var(--iceblue);
		display: grid;
		width: 100%:
	}
	
	.page-block {
		display: grid;
		/* height: 30vh; */
		min-width: 0;
		overflow: hidden;
		position: relative;
		width: 100%;
	}
	
	.page-image {
		max-height: 1px;
		padding-top: 75%;
		position: relative;
		width: 100%;
		z-index: 1;
	}
	
	.page-image img {
		height: 100%;
		object-fit: cover;
		position: absolute;
			top: 0;
		text-align: center;
		width: 100%;
			max-width: 100%;
	}
	
	.page-image-overlay {
		background-color: var(--blue);
		opacity: 0;
		padding-top: 75%;
		position: absolute;
			top: 0;
		transition: 0.5s all;
		width: 100%;
		z-index: 2;
	}
	
	.page-lead {
		align-self: stretch;
		background-color: #fff;
		border-bottom: 1px solid var(--iceblue);
		color: #333;
		font-size: 0.95rem;
		grid-row-start: 2;
		/* line-height: 1rem; */
		padding: 0.5rem 0.5rem 2rem;
		position: relative;
		transition: 0.5s all;
		z-index: 2;
	}
	
	ptitle {
		color: var(--blue);
		display: block;
		font-size: 1.44rem;
		/* font-size: 1.25rem; */
		font-weight: 600;
		letter-spacing: 0.5px;
		margin-bottom: 0.5rem;
		transition: 0.5s all;
	}
	
	.page-type {
		background-color: var(--iceblue);
		font-size: 0.8rem;
		margin-left: -0.5rem;
		padding: 0.25rem 0;
		position: absolute;
			bottom: 0;
		text-align: center;
		text-transform: uppercase;
		width: 100%;
	}
	
	.page-cta {
		grid-row-start: 2;
		margin-bottom: 0.5rem;
		padding: 0.5rem;
		position: absolute;
			bottom: 0;
		text-align: center;
		width: calc(100% - 1rem);
		z-index: 1;
	}
	
	.page-cta-button {
		border: 2px solid var(--blue);
		color: var(--blue);
		font-weight: bold;
		letter-spacing: 1px;
		padding: 5px 10px;
		transition: 0.5s all;
	}
	
	.page-cta-button:hover {
		background-color: var(--orange);
		border: none;
		color: var(--white);
	}
	
	.page-cta-button-arrow {
		font-size: 0.6rem;
		position: relative;
		top: -2px;
	}
	
	a.page-link:hover {
		text-decoration: none;
	}
	
	.page-block:hover .page-lead {
		text-decoration: none;
		transform: translateY(-60px);
	}
	
	.page-block:hover .page-image-overlay, .page-block-horizontal:hover .page-image-overlay {
		opacity: 0.5;
	}
	
	.page-block:hover ptitle {
		color: var(--orange);
	}
	
	/** Filters CSS **/
	.alm-filter--title {
		color: var(--blue);
		float: left;
		margin-right: 1rem;
	}

	.facet_container {
		grid-column: 2 / span 3;
		margin-top: 2rem;
		width: 100%;
	}
	
	.alm-filters-container .alm-filter ul {
		float: left;
	}
	
	.alm-filters-container .alm-filter li {
		clear: revert !important;
		display: inline-block !important;
		margin-right: 1rem !important;
	}
	
	/** INDIVIDUAL PAGES **/
	#headblock-page {
		background-color: var(--warmgrey);
		display: grid;
			align-items: center;
			grid-template-columns: 1fr 10vw 10vw 10vw 10vw 10vw 5fr 1fr;
		margin-bottom: 1rem;
		min-height: 40vh;
		padding: 3vh 0;
	}
	
	#titleblock-page {
		background-color: var(--blue75);
		display: grid;
			align-items: center;
		grid-column: 2 / span 5;
		grid-row: 1;
		height: 30vh;
		padding: 1rem;
	}
	
	#primaryimage {
		grid-column: 6 / span 2;
		grid-row: 1;
	}
	
	/** UNIVERSAL **/
	
	.content-in {
		grid-column: 2;
	}
	
	.content-breaker {
		grid-column: 1 / span 2;
	}
	
	/** Header Styles **/
	#head-image img {
		max-height: 100%;
		min-width: 100%;
		width: 100%;
	}
	
	.head-icapt {
		background-color: var(--textgrey60);
		color: var(--white85);
		font-size: 80%;
		font-weight: 300;
		padding: 7px;
		position: absolute;
			bottom: 4px;
	}
	
	/** Story Breadcrumbs **/
	
	.breadcrumb {
		background-color: var(--darkgrey);
		color: var(--white);
		display: inline-block;
		/* margin-left: -5px; */
		margin-bottom: 25px;
		padding: 5px 20px;
		text-decoration: none;
	}
	
	.breadcrumb:hover {
		background-color: #f37736;
		color: #fff;
	}
	
	/** Page Breadcrumbs **/
	
	breadcrumb {
		color: var(--white);
		display: block;
		font-size: 0.75rem;
		font-weight: 300;
		margin-bottom: 1rem;
	}
	
	breadcrumb a {
		border-radius: 5px;
		color: var(--white);
		padding: 3px 10px;
		text-decoration: underline;
		transition: 0.5s all;
	}
	
	breadcrumb a:hover {
		background-color: var(--white);
		color: var(--blue);
		text-decoration: none;
	}
	
	/** Page Style Overrides **/
	
	#head-setup h1 {
		color: var(--blue);
		font-size: 2.488rem;
		font-weight: 800;
		line-height: 100%;
		margin-bottom: 20px;
	}
	
	#head-setup h2 {
		color: var(--blue);
		font-size: 150%;
		font-weight: 300;
	}
	
	#titleblock-page h1 {
		color: var(--white);
		font-size: 2.986rem;
		font-weight: 800;
		letter-spacing: 2px;
		line-height: 3rem;
		text-shadow: -1px -1px 0 var(--blue), 1px -1px 0 var(--blue), -1px 1px 0 var(--blue), 1px 1px 0 var(--blue);
	}
	
	#titleblock-page h2 {
		color: var(--white);
		font-size: 1.728rem;
		font-weight: 300;
		margin-top: 1rem;
		text-shadow: -1px -1px 0 var(--blue), 1px -1px 0 var(--blue), -1px 1px 0 var(--blue), 1px 1px 0 var(--blue);
	}
	
	h3.impact-story-header {
		grid-column: 2 / span 3;
		margin-top: 3rem;
		margin-bottom: 2rem;
		text-align: center;
	}

	/** CALLOUT COMPONENT **/
	.ls_callout {
		border-right: 2px solid var(--blue);
		margin-right: 1rem;
	}
	
	.callout-heading h3 {
		margin-top: 0;
	}

	
	/** Content Styles **/
	.content {
		color: var(--textgrey);
		font-size: 18px;
		line-height: 24px;
	}
	
	.content p, .content ul, .tab-content p {
		margin-bottom: 1rem;
	}
	
	.content li, .tab-content li {
		margin-bottom: 0.5rem;
	}
	
	.endnote {
		margin-left: -40px;
		margin-right: unset;
		margin-bottom: 1rem;
		width: calc(100% + 40px);
	}
	
	.endnote h3 {
		color: var(--blue);
		line-height: 2rem;
		margin-bottom: 20px;
	}
	
	.summary {
		background-color: var(--vlightgrey);
		border-radius: 0.5rem;
		margin-bottom: 2rem;
		padding: 0.75rem;
	}
	
	.summary_heading {
		border-bottom: 1px solid var(--blue);
		color: var(--blue);
		font-size: 0.9rem;
		font-weight: bold;
		letter-spacing: 0.5px;
		padding-bottom: 0.25rem;
		text-transform: uppercase;
	}
	
	.instoryimage {
		line-height: 1rem;
	}
	
	/** Sidebar Styles **/
	.h-author, .h-org, .h-pubdate {
		color: var(--blue);
		display: block;
		text-align: center;
	}
	
	.h-author {
	}
	
	.h-org {
		font-size: 16px;
		text-transform: uppercase;
	}
	
	.h-pubdate {
		font-size: 13px;
		margin-top: 13px;
		text-transform: uppercase;
	}

	/** CTA Sidebar Styles **/
	.sb_cta .cta_content {
		background-color: var(--blue);
		color: var(--white);
		font-size: 16px;
		padding: 20px;
	}

	.lastthing {
		align-self: end;
	}

	.sb_cta .cta_content h4 {
		color: var(--white);
		font-size: 1.22rem;
		letter-spacing: 1px;
		line-height: 1.4rem;
		margin-bottom: 10px;
	}

	.sb_cta .cta_content a {
		color: var(--white);
		text-decoration: underline;
	}

	a.cta_btn, a.button {
		border: 3px solid var(--orange);
		color: var(--white);
		display: inline-block;
		font-weight: 600;
		letter-spacing: .5px;
		margin: 20px 0 0;
		padding: 12px;
		text-align: center;
		text-decoration: none !important;
		/* text-transform: uppercase; */
		transition: 0.5s all;
	}
	
	a.button {
		color: var(--orange);
	}

	a.cta_btn:hover, a.button:hover {
		background-color: var(--orange);
	}
	
	a.button:hover {
		color: var(--white);
	}

	/** WYSIWYG Sidebar Component Styles **/
	.sb_content_callout h4 {
		background-color: var(--blue);
		color: var(--white);
		font-size: 20px;
		font-weight: 300;
		margin-bottom: 0;
		padding: 10px;
	}

	.sb_content_callout .title {
		background: url('/wp/wp-content/uploads/2024/03/ui-right-005496.png') no-repeat;
		background-color: var(--greybkg);
		background-position: bottom right;
	}

	.callout_content {
		background-color: var(--greybkg);
		color: var(--textgrey);
		font-size: 16px;
		padding: 0 10px 10px 10px;
	}
	
	.callout_content p {
		margin-bottom: 0.5rem;
	}
	
	.callout_content ul {
		margin-top: 0;
		padding-left: 20px;
	}
	
	.callout_content ul li {
		padding-bottom: 0.5rem;
	}
	
	.callout_content img {
		max-width: 100%;
	}

	.sb_content, .sb_bc_content {
		color: var(--textgrey);
		font-size: 16px;
	}
	
	.sb_bc_content p {
		margin-bottom: 0.5rem;
	}

	.sb_content h4, .sb_bc_content h4 {
		color: var(--blue);
		font-size: 20px;
		margin-bottom: 10px;
	}

	/** Quote Sidebar Component **/
	
	.qb {
		display: flex;
			column-gap: 5px;
	}
	
	.q1, .q3 {
		color: var(--orange);
	}
	
	.q2 h4 {
		color: var(--blue);
		font-size: 22px;
	}
	
	.q3 {
		align-self: flex-end;
		margin-bottom: 10px;
	}
	
	.q_a {
		color: var(--textgrey);
		display: block;
		margin-top: 5px;
		text-align: right;
	}
	
	/** Bottom Content Sidebar Component **/
	
	.sb_bc_content {
		align-self: end;
		border-left: 3px solid var(--orange);
		padding-left: 10px;
	}
	
	/** Accordion Component **/

	input.accordion {
		position: absolute;
		opacity: 0;
		z-index: -1;
	}
	
	.a-tab_container {
		grid-column-start: 2;
	}

	/* Accordion styles */
	.a-tabs {
		overflow: hidden;
		width: 100%;
	}

	.a-tab {
		overflow: hidden;
		width: 100%;
	}
	
	.a-tab-label {
		border-bottom: 1px solid #005496;
		color: #005496;
		cursor: pointer;
		display: flex;
		font-weight: bold;
		justify-content: space-between;
		padding: 1em;
		transition: .5s all;
		/* Icon */
	}
	
	.a-tab:first-of-type .a-tab-label {
		border-top: 1px solid var(--blue);
	}
	
	.a-tab-label:hover {
		background: var(--blue);
		color: var(--white);
	}
	
	.a-tab-label::after {
		content: "\f078";
		font-family: 'Font Awesome 5 Pro';
		height: 1em;
		text-align: center;
		transition: all 0.35s;
		width: 1em;
	}
	
	.a-tab-content {
		max-height: 0;
		padding: 0 1em;
		color: var(--white);
		background: var(--white);
		transition: all 0.35s;
	}
	
	.a-tab-close {
		background: var(--blue);
		color: var(--white);
		cursor: pointer;
		display: flex;
		font-size: 0.75em;
		justify-content: flex-end;
		padding: 1em;
		transform: 0.5s all;
	}
	
	.a-tab-close:hover {
		background: var(--blue);
	}

	input.accordion:checked + .a-tab-label {
		background: var(--blue);
		color: var(--white);
	}
	
	input.accordion:checked + .a-tab-label::after {
		transform: rotate(180deg);
	}
	
	input.accordion:checked ~ .a-tab-content {
		background-color: var(--warmgrey);
		border-bottom: 1px solid var(--blue);
		color: var(--textgrey);
		max-height: 100vh;
		padding: 1em;
	}
	
	/** Social Share Component **/

	.h-social {
		margin-top: 13px;
		text-align: center;
	}

	.circle {
		border: 1px solid var(--blue);
		border-radius: 50%;
		color: var(--blue);
		font-size: 15px;
		height: 16px;
		margin-left: 4px;
		padding: 7px;
		text-align: center;
		transition: all 0.5s;
		vertical-align: middle;
		width: 16px;
	}

	.solidcircle, .circle:hover {
		background-color: var(--blue);
		border: 1px solid var(--blue);
		border-radius: 50%;
		color: #fff;
		/* margin-left: 6px; */
		padding: 7px;
		text-align: center;
		vertical-align: middle;
		width: 16px;
	}

	/** Main Variations **/
	a[href$=".pdf"] {
		background: url(/wp/wp-content/uploads/2018/06/icon-pdf-16x16.png) no-repeat left center;
		padding-left: 20px;
	}

	/** Mobile Styles **/
	
	#adss_setup, .mobl-only {
		display: none;
	}
	
	@media only screen and (max-width: 768px) {
		#sheet {
			display: block;
		}
		
		#sheet-head {
			grid-template-columns: 1fr;
		}
		
		#head-image {
			margin-top: 1rem;
			margin-right: unset;
			order: 2;
		}
		
		#head-setup {
			grid-column-start: unset;
			margin: 0 1rem;
			order: 1;
		}
		
		#col-prim {
			display: block;
			margin: 0 1rem;
		}
		
		#sb_setup {
			display: none;
		}
		
		#col-side {
			margin: 1rem;
		}
		
		.endnote {
			margin-left: -1rem;
			padding: 2rem 1rem;
			width: 100%;
		}
		
		#adss_setup, .mobl-only {
			display: inherit;
		}

		#titleblock-page {
			grid-column: 2 / span 6;
		}
		
		#titleblock-page h1 {
			font-size: 2rem;
			line-height: 2.25rem;
		}
		
		#primaryimage {
			grid-column: 1 / span 8;
		}
		
		#primaryimage img {
			width: 100%;
		}

		#headblock {
			grid-template-columns: 1fr;
		}
		
		.item_container {
			grid-template-columns: 1fr;
		}
	}