.grid {
	display: grid;
	gap: var(--grid-gap, 1rem);
	grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
	align-items:flex-start;
}
.grid.grid--center{
	align-items:center;
}
.grid--clear-margin > * > * {
    margin-top: 0;
}
.grid > *{
    grid-column: span var(--grid-span, 1);
}
.grid picture,
.grid img {
    max-width: 100%;
}
.grid > .grid__row,
.grid > hr {
    grid-column: 1 / -1;
}

.grid.grid--images :is(figure,img, picture){
    /* aspect-ratio: 1; */
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position:center;
    max-width:var(--grid-image-size,35vw);
}
.grid:has(>.card) {
    margin-bottom: 2rem;
}

.grid--clear-margin > div > * {
    margin-top: 0;
}


.grid .row-label {
		grid-column: 1 / -1;
    background: #205998;
    color: #fff;
    font-weight: bold;
    padding-inline: 1rem;
    justify-self: flex-start;
}

@media (max-width:1000px){
	.grid:not(.grid--mobile) {
		grid-template-columns: 1fr;
	}
	.grid:not(.grid--mobile) > *{
	    grid-column: span 1;
	}

}

/* flex grid */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap,1rem);
    justify-content: center;
    align-content: stretch;
}

.flex-grid > * {
    width: calc(100% / var(--grid-cols,auto) - var(--grid-gap,1rem));
    height: auto;
}

@media (max-width:1000px){
	.flex-grid > * {
		width:100%;
	}
}


.flex-auto-column{
	display:flex;
	flex-wrap: wrap;
}

.grid-image img {
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    scale:1;
    transition:scale 300ms;
    z-index:-1;
    position:relative;
}

.grid-image--square :where(:hover, :focus-visible) img{
    scale:1.15;
    z-index:1;
}
.grid-image--square img{
    aspect-ratio: 1;
}
.grid-image--4x3 img{
    aspect-ratio:4/3;
}
.grid-image--16x9 img{
    aspect-ratio:16/9;
}


.flexbox {
    display: flex;
    gap: var(--grid-gap, 2rem);
    align-items: center;
}
.flexbox.align-top{
	align-items:flex-start;
}

.flexbox > * {
    flex: var(--flex , var(--grid-span , 1));
}
.flexbox.flexbox--reverse {
    flex-direction: row-reverse;
}
@media (max-width:1000px){
	.flexbox.flexbox{
		flex-direction:column;
		gap:0;
	}
}




/* Table stuff */
table.styled {
	border: solid 1px #ccc;
	table-layout: auto;
	margin-block: 1rem;
}
table.styled td {
	padding: 1rem;
	border: solid 1px hsl(0deg 0% 20% / 20%);
}
table.styled td > *{
    padding-block:0;
    margin-block:0;
}
table.styled td > p ~ p{
	margin-top:1rem;
}
table.styled tr:nth-child(2n+1) td {
	background: #e4ebf2;
}
table.styled tr:nth-child(2n) {
	background: #fff;
}
table.styled tr.head td {
	background: #205998;
	color: #fff;
	font-size: 1.8rem;
    font-weight:bold;
}
@media (max-width:1000px){
	table.styled,
	table.styled :is(td, tr, tbody) {
		display: block;
		border:none;
	}
	table.styled td[data-heading]{
		padding: .25rem .75rem;
		text-align: left !important;
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr 1fr;
	}
	table.styled .head{
		display:none;
	}
	table.styled td[data-heading]:before{
		content: attr(data-heading);
		font-weight: bold;
	}

	table.styled td:first-child{
		color: #205998;
		font-size: 2.4rem;
		font-weight: bold;
		grid-auto-flow: column;
		grid-template-columns: max-content;
	}
    table.styled tr:nth-child(2n+1) td{
        background: white;
    }
    table.styled tr td:nth-child(2n) {
        background: #e4ebf2;
    }
    table.styled tr {
        border: solid 1px #e4ebf2;
        margin-bottom: 1rem;
    }
}



/* Cards */
.card {
    background: #ebeff4;
    border: solid 1px #ccc;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.card > div:nth-child(1) {
    overflow: hidden;
    margin-bottom: .5em;
}

.card img {
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
    background: #fff;
}

.card > div:nth-child(2){
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 1rem 0;
	aspect-ratio:auto;
}

.card > div:nth-child(2) :last-child:has(.button) {
    margin-top: auto;
}
.card :last-child:has(.button){
    margin-block: auto 0;
}
.card :last-child:has(.button) .button{
	display:block;
	margin:0;
	padding: .25rem 1rem
}


/* Card 2 */
.card-2 {
	--_bs-blur: 10px;
	--_bs-position-y: 10px;
	--_bs-inset: 0px;
	display: grid;
	position: relative;
	box-shadow: 0px var(--_bs-position-y) var(--_bs-blur) var(--_bs-inset) rgb(0 0 0 / 0.2);
	scale: 1;
	transition: scale 300ms, box-shadow 300ms;
	background: #fff;
	border:solid 1px #eee;
}

.card-2:hover {
	--_bs-blur: 20px;
	--_bs-position-y: 15px;
	--_bs-inset: -10px;
	scale: 1.075;
	z-index: 1;
}

.card-2__date {
	--_border: 1rem;
	margin: calc(-1 * var(--_border));
	position: absolute;
	z-index: 1;
	inset: calc(-1 * var(--_border)) auto auto calc(-1 * var(--_border));
	display: flex;
	flex-wrap: wrap;
	gap: var(--_border);
	list-style: none;
	filter: drop-shadow(2px 4px 6px rgba(0 0 0 / .4));
}
.card-2__date li {
    margin-inline: calc(-1 * var(--_border));
    padding: calc(0.5 * var(--_border)) calc(2.5 * var(--_border));
    font-family: "Montserrat";
    font-size: 2rem;
    font-weight: 900;
    background: #205998;
    color: white;
    backface-visibility: hidden;
    clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
}
.card-2__date li:first-child {
    font-size: 2em;
}

.card-2__date li:nth-child(n+3) {
    background: #f9c10b;
    color: #205998;
}
.card-2__date sup {
    font-size: .6em;
}
.card-2__figure {
	aspect-ratio: 5 / 3;
	overflow: clip;
	margin: 0;
}

.card-2__figure *{
	width:100%;
	height:100%;
	object-fit:cover;
}

.card-2__heading {
	text-align: center;
	font-family: "Montserrat";
	font-weight: 900;
}

.card-2__content {
	padding: 0 1rem 1rem 1rem;
}





/* Elements */

.hatch-marks > * {
	padding: 0 calc(0.25rem * var(--_border));
	height: calc(0.2rem * var(--_border));
	margin-inline: calc(-0.05rem * var(--_border));
	background: currentColor;
	font-size: 0px;
	font-weight: bold;
	backface-visibility: hidden;
	clip-path: polygon(calc(0.2rem * var(--_border)) 0%, 100% 0%, calc(100% - calc(0.2rem * var(--_border))) 100%, 0% 100%);
}

.hatch-marks {
	--_border: 10;
	display: grid;
	grid-auto-flow: column;
	gap: 0;
	justify-content: center;
	margin-block: 1rem;
	color: #205998;
}








/* callout block */
.callout {
    background: #ebeff4;
    padding: 3rem;
    margin: 2rem;
}

.callout > :first-child{
    margin-top: 0;
}
.callout > :last-child {
    margin-bottom: 0;
}
.callout > :last-child:has(.button) {
    margin-block: 0 -1rem;
}




/* Bleed block to edge of page */

.bleed-to-edge {
	position: relative;
	left: 50%;
	transform: translateX(-50vw);
	width: 100vw;
}
.field__item.field__item:has(.bleed-to-edge) {
    margin-bottom: 0;
    padding-bottom: 0;
}





/* Parallax Code */

.parallax {
	position: relative;
	height: clamp(300px, 55vh, 850px);
	overflow: clip;
	display: grid;
	align-content: center;
}
.parallax__image {
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position:center;
	transform: translateY(calc(var(--_scroll-percent) - calc(var(--_height) * var(--_scroll-value) / 100)) );
}
.parallax .container {
    position: relative;
    z-index: 1;
}


.parallax .box-blue {
    width: min-content;
    padding: 2em;
    background: #205998;
}
.parallax .box-blue > *:first-child {
	margin-top: 0;
}

.parallax .box-blue > * {
    color: white;
    font-weight: bold;
}

.parallax .box-blue h2 {
    font-family: 'Montserrat';
    font-size: calc(4vw + 4vh + 2vmin);
    line-height: .8;
    text-transform: uppercase;
    text-align: center;
    font-weight: 900;
    color: #FFDA4A;
}

/*



Text fade In */

.fade-in-text {
	--_background: var(--background, url('/sites/default/files/styles/full_width_cta/public/2023-04/MicrosoftTeams-image.png?h=6a304bb6'));
	--_color: var(--color, #fff);
	background: var(--_background);
	padding-block: clamp(8rem, 10vh, 20rem);
	text-align: center;
	color: var(--_color);
	line-height: 1.3;
}
.fade-in-text .container {
	width: min(800px, 100%);
}
.fade-in-text  span {
	color: color-mix(in srgb, var(--_color) 10%, transparent);
	background-clip: text;
	-webkit-background-clip: text;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	background-image: linear-gradient(var(--_color), var(--_color));
	animation: fade-in-text linear forwards;
	animation-timeline: view(y);
	
	animation-range-start: cover calc(20vh + var(--fade-start, 0));
	animation-range-end: cover calc(30vh + var(--fade-start, 0));
	animation-range-end: cover max(30vh, calc(30vh + var(--fade-start, 0)));
}

@keyframes fade-in-text {
	to {
		background-size: 100% 100%;
	}
}

.fade-in-text:not(.fade-in-text--normal-text) :where(h2, .h2) {
	margin-block: 0;
	font-size: 4.2rem;
}

.fade-in-text:not(.fade-in-text--normal-text) p {
	font-size: 2.4rem;
}
.fade-in-text:not(.fade-in-text--normal-text){
	font-family: "Montserrat";
}
@media (prefers-reduced-motion){
	.fade-in-text  span{
		color:var(--_color);
	}
}













.list-filter {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1rem;
    align-items: flex-start;
    margin: 3rem auto;
    max-width: 70ch;
}

.list-filter :where(input, button) {
    width: 100%;
    height: 100%;
    padding-inline: .5em;
    line-height: 1;
}


.list-filter__content li{
    display: block;
    background: #ebeff4;
    padding: .2em .5em;
}
.list-filter__content li a {
    display: block;
    padding: .2em .5em;
    margin:-.2em -.5em;
    text-decoration: none;
}

.list-filter__content li a:hover {
    background: #f1f6fb;
}

.list-filter[data-toggle-heading] + .list-filter__content [data-filter-heading] + ul {
    display: none;
}

.list-filter[data-toggle-heading] + .list-filter__content [data-filter-heading][aria-expanded="true"] + ul {
    display: block;
}


.list-filter__content [data-filter-heading] {
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 700;
    padding: 0.75em;
    color: var(--color-blue-dk);
    background: #b6d3ec;
    display:flex;
    margin-block: 0 1.5rem;
    border-radius: 4px;
}

.list-filter__content [data-filter-heading]:after {
    content: "\f054";
    font-family: "FontAwesome";
    font-size: 1.8rem;
    color: var(--color-blue);
    background: 0 0;
    height: auto;
    flex-shrink:0;
    margin-left:auto;
    text-align:right;
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
}
.list-filter__content [data-filter-heading][aria-expanded="true"]:after{
    transform: rotate(90deg);
}



.list-filter__content [data-hidden] {
    display: none;
}