/* @layer content-first { */

html {
	text-size-adjust: none;
	scrollbar-color: #1C232D #777;
}
@media screen and (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

html, body {
	min-height:100%;
}

/* deathshadow reset */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img,figure,figcaption{
	margin:0;
	padding:0;
}
img, fieldset {
	 border:none;
}
*, *:after, *:before {
	box-sizing:border-box;
}

img {
	background-color: #f8f8f8;
}

/* mtness content-first */
body {
	display: flex;
	flex-flow: column;
	min-height: 100vh;
}

body > h1     { order: 25; background-color: var(--h1---bgc); }
body > aside  { order: 10; background-color: var(--side-bgc); }
body > header { order: 20; background-color: var(--head-bgc); }
body > main	  { order: 30; background-color: var(--main-bgc); z-index: 1; display: flex; flex-flow: column; flex: 1; }
body > footer { order: 40; background-color: var(--foot-bgc); }

/* } */






/* @layer sticky { */

/* mtness sticky header */
#header {
	position:sticky;
	top:0;
	height: 0;
	z-index: 2;
	/*transition: .1s padding ease-in-out;*/
}

/* second sticky */
/*
main > section.second-sticky {
	position:sticky;
	top:5rem;
	padding:1rem 0;
	background:#AEC;
}
 */

body > aside {
	padding: 1rem;
	text-align: center;
	background-color: var(--color-bg);
}

main {
	padding-block-start: var(--header-height);
}

main > section {
	/*position: sticky;*/
	/*top: 6rem;*/
	/* padding:1rem 0; */
	/* background:#AEC; */
}

main > *:first-child:not(.bg,.hero,#start) {
	margin-block-start: var(--space-l);
}

main > *:not(details) + *:not([class*="bg"]) {
	margin-block-start: var(--space-l);
}
main > *:not(details,[class*="bg"]):has( + *[class*="bg"] ) {
	margin-block-end: var(--space-xl);
}

.section > section + section:not([class*="slider"]) {
	margin-block-start: var(--space-l);
}


/* disabled until further notice, lets see if this is needed at all

main > section:not(.layout-row) > *:not(details) + * {
	margin-block-start: var(--space-l);
}
*/

#footer {
	/* position:sticky; */
	position:static;
	bottom:0;
	padding:1rem;
	z-index: 0;
}

/* prefers-color-scheme: light */
/* #header { background:#fff; }
#content{ background:#fff; }
#footer { background:#eee; }
 */
#aside	{ background-color: var(--aside-bgc); }

/*
@media (prefers-color-scheme: dark) {
	html[data-theme="dark"] #header {background:#333;}
	html[data-theme="dark"] #footer {background:#000;}
	html[data-theme="dark"] #aside	{background:#444;}
}
 */
/* } */


body,
.page-row-navigation {
	grid-template-rows: [page-top] max-content [contents-top] max-content [contents-bottom] max-content [page-bottom];
}

body {
	--screen-margin       :   1.5rem;
	--screen-inset-width  :   5fr;
	--page-margin         :   3rem;
	--page-inset-left-min :   3rem;
	--page-inset-left-max :  10rem;
	--page-inset-right-min:   3rem;
	--page-inset-right-max:  10rem;
	--body-outset         :   3rem;
	--body-margin         :   1.5rem;
	--body-content-min    :  30rem;
	--body-content-max    :  46rem;
	--body-max-width      : 2560px;
	margin: 0 auto;
	/*max-width: var(--body-max-width);*/
}

body .sidebar.sidebar-navigation {
	grid-column: page-start/body-start;
	grid-row   : content-top/page-bottom;
}

body .grid {
	display: grid;
	gap: 0;
	grid-template-columns:
		[screen-start]
			var(--screen-margin)
			[screen-inset-start]
				var(--screen-inset-width)
				[page-start page-inset-start body-outset-start body-start body-content-start]
					var(--page-margin)
						minmax( var(--page-inset-left-min), var(--page-inset-left-max) )
							var(--body-outset)
								var(--body-margin)
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
									[center-line]
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
								[body-content-end]
							var(--body-margin)
							[body-end]
						var(--body-outset)
						[body-outset-end]

						minmax( var(--page-inset-right-min), var(--page-inset-right-max) )
					[page-inset-end]
					var(--page-margin)
				[page-end]
				var(--screen-inset-width)
			[screen-inset-end]
			var(--screen-margin)
		[screen-end];
}





@media (max-width: 78rem) {
	body .grid {
		grid-template-columns:
			[screen-start] var(--screen-margin)
				[screen-inset-start page-start page-inset-start]
						minmax( var(--page-inset-left-min), var(--page-inset-left-max) )

						[body-outset-start]
							var(--body-outset)
							[body-start]
								var(--body-margin)
								[body-content-start]
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
									[center-line]
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
								[body-content-end]
							var(--body-margin)
							[body-end]
						var(--body-outset)
						[body-outset-end]

						minmax( var(--page-inset-right-min), var(--page-inset-right-max) )
					[page-inset-end page-end screen-inset-end]
			var(--screen-margin) [screen-end];
	}
}

@media (max-width: 46rem) {
	body {
		--screen-margin: .75rem;
	}
	body .grid {
		grid-template-columns:
			[screen-start] var(--screen-margin)
				[screen-inset-start page-start page-inset-start body-outset-start body-start body-content-start] minmax(0px, 1fr) [center-line] minmax(0px, 1fr) [body-content-end body-end body-outset-end page-inset-end page-end screen-inset-end]
			var(--screen-margin) [screen-end];
	}
}

.page-full {
	grid-column: screen-start/screen-end !important;
}

.grid > * {
	grid-column: body-content-start/body-content-end;
}

.grid .content {
	grid-column  : body-content-start/body-content-end;
	grid-row     : content-top/content-bottom;
	align-content: flex-start;
}

.grid .column-body {
	grid-column: body-content-start/body-content-end;
}

.grid .column-body-outset {
	grid-column: body-outset-start/body-outset-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}

.grid .column-page {
	grid-column: page-start/page-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}

.grid .column-page-inset {
	grid-column: page-inset-start/page-inset-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}

.grid .column-screen {
	grid-column: screen-start/screen-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}

.grid .column-screen-inset {
	grid-column: screen-inset-start/screen-inset-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}

.grid .column-screen-inset.shaded {
	grid-column: screen-start/screen-end;
	padding: 1em;
	background: #009de4;
	z-index: 998;
	transform: translate3d(0, 0, 0);
	margin-bottom: 1em;
	overflow: hidden;
}
.grid .column-screen-inset.shaded {

}

@media (min-width: 992px) {
	.column-before {
		grid-column: page-start/body-start;
		z-index: 998;
	}

	.margin-caption,
	.aside,
	aside:not(.footnotes):not(.sidebar),
	.column-margin {
		grid-column: body-end/page-end;
		z-index: 998;
	}
}

.grid .column-body-outset-right,
.grid .column-body-right {
	grid-column: body-content-start/body-outset-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}
.grid .column-page-inset-right {
	grid-column: body-content-start/page-inset-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}
.grid .column-page-right {
	grid-column: body-content-start/page-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}
.grid .column-screen-inset-right {
	grid-column: body-content-start/screen-inset-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}
.grid .column-screen-right {
	grid-column: body-content-start/screen-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}
.left {
	text-align: left;
	padding-left: 1em;
}




.grid .column-body-outset-left,
.grid .column-body-left {
	grid-column: body-outset-start/body-content-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}
.grid .column-page-inset-left {
	grid-column: page-inset-start/body-content-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}
.grid .column-page-left {
	grid-column: page-start/body-content-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}
.grid .column-screen-inset-left {
	grid-column: screen-inset-start/body-content-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}
.grid .column-screen-left {
	grid-column: screen-start/body-content-end;
	z-index: 998;
	transform: translate3d(0, 0, 0);
}
.right {
	text-align: right;
	padding-right: 1em;
}






.sidebar.margin-sidebar {
	grid-column: body-end/page-end;
	grid-row: content-top/page-bottom;
}
.sidebar {
	will-change: top;
	transition: top 200ms linear;
	position: sticky;
	overflow-y: auto;
	padding-top: 0;
	max-height: 100vh;
}

@media (max-width: 767.98px) {
	.sidebar.margin-sidebar {
		margin: 0 var(--screen-margin);
	}
}





.layout-row:not(.grid),
.layout-row.grid > div {
	--min: 10ch;
	--gap: 0;

	display: grid;
	gap: var(--gap);

	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

.layout-row.g-75-25 { grid-template-columns: calc(75% - var(--gap) / 2 )          calc(25% - var(--gap) / 2); }
.layout-row.g-66-33 { grid-template-columns: calc(100% / 3 * 2 - var(--gap) / 2 ) calc(100% / 3 - var(--gap) / 2 ); }
.layout-row.g-33-66 { grid-template-columns: calc(100% / 3 - var(--gap) / 2)      calc(100% / 3 * 2 - var(--gap) / 2); }
.layout-row.g-25-75 { grid-template-columns: calc(25% - var(--gap) / 2 )          calc(75% - var(--gap) / 2); }

.layout-row > * img {
	display: block;
	width: 100%;
	height: auto;
}

.layout-row.txt-img,
.layout-row.img-txt {
	gap: 0;
}

/* three elements necessary for the t3 translation anchor */

.txt-img:not(.container).grid > div > :nth-child(1),
.txt-img:not(.container):not(.grid) > :nth-child(1) {
	order: 2;
}
.txt-img:not(.container).grid > div > :nth-child(2),
.txt-img:not(.container):not(.grid) > :nth-child(2) {
	order: 1;
}
.txt-img:not(.container).grid > div > :nth-child(3),
.txt-img:not(.container):not(.grid) > :nth-child(3) {
	order: 0;
}


@media (max-width: 104rem) {

	.layout-row:not(.grid),
	.layout-row.grid > div {
		grid-auto-flow: row;
	}
	.txt-img > :nth-child(1) {
		order: 0;
	}
	.txt-img > :nth-child(2) {
		order: 1;
	}
}





.bg-img.fixed {
	background-attachment: fixed;
}
.bg-img {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

[class*="height-"] {
	display: grid;
	align-content: center;
}

.height-full    { min-height: 100vh; }
.height-half    { min-height:  50vh; }
.height-phi     { min-height:  40vh; }
.height-third   { min-height:  33vh; }
.height-quarter { min-height:  25vh; }
header nav {
	--menu-bgc              : var(--head-bgc);
	--menu-a-col            : #000;
	--menu-a-bgc            : ;
	--menu-a-col-hover      : #888;
	--menu-a-bgc-hover      : ;
	--menu-a-col-focus      : ;
	--menu-a-bgc-focus      : ;
	--menu-a-em-col         : ;
	--menu-a-em-col-hover   : ;
	--menu-a-em-col-focus   : ;

	--menu-dd-bgc           : var(--menu-bgc);
	--menu-dd-a-col         : var(--main-col);
	--menu-dd-a-bgc         : ;
	--menu-dd-a-col-hover   : var(--menu-a-col-hover);
	--menu-dd-a-bgc-hover   : ;
	--menu-dd-a-col-focus   : ;
	--menu-dd-a-bgc-focus   : ;
	--menu-dd-a-em-col      : #ff00ff;
	--menu-dd-a-em-col-hover: ;
	--menu-dd-a-em-col-focus: ;

	--menu-dd-ul-bgc        : var(--menu-bgc);
}

menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
menu.dd {
	background-color: var(--menu-bgc);
}

menu li {
	display: block;
	position: relative;
	text-decoration: none;
	transition-duration: .25s;
}

/* Styling links */
menu a {
	text-decoration: none;
	color: var(--menu-a-col);
	font-size: 1.2rem;
	display: block;
	padding: .25rem .5rem;
}

menu li:hover > a,
menu a:hover,
menu a:focus {
	color: var(--menu-a-col-hover);
}

/* navigation title */
menu li > a span {
	display: inline-block;
	line-height: 1.1;
}

/* Declarative Sentence */
menu li > a em {
	font-size: 0.8rem;
	color: var(--menu-a-em-col);
	margin: 0;
	display: block;
	opacity: 0.8;
}


menu.dd li > [aria-haspopup="true"] {
	padding-right: 1.5rem;
	position: relative;
}

menu.dd li > [aria-haspopup="true"] + button {
	text-indent: 4rem;
	border: 0;
	background-color: unset;
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>'); /* found here: https://iconmonstr.com/arrow-25-svg/ or https://www.svgrepo.com/svg/348084/chevron-right/ */
	background-repeat: no-repeat;
	background-position: center;
	background-size: .8rem;
	position: absolute;
	right : .25rem;
	top   : 1rem;
	width :  1rem;
	height: 1rem;
	font-size: 1rem;
	transform: rotate(90deg);
	overflow: hidden;
	display: block;
	cursor: pointer;
	/* filter: invert(1); */
}

menu.dd li > [aria-haspopup="true"]:hover + button,
menu.dd li:hover > [aria-haspopup="true"] + button {
	transform: rotate(270deg);
	filter: invert(39%) sepia(38%) saturate(554%) hue-rotate(355deg) brightness(90%) contrast(85%); /* https://codepen.io/sosuke/pen/Pjoqqp */
}

menu.dd li li > [aria-haspopup="true"] + button,
menu.dd li li > [aria-haspopup="true"] + button {
	filter: invert(1);
	transform: rotate(0deg);
	opacity: 0.8;
}

menu.dd li li > [aria-haspopup="true"]:hover + button,
menu.dd li li:hover > [aria-haspopup="true"] + button {
	transform: rotate(180deg);
}






/* Dropdown Styles */
menu .dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	list-style: none;
	min-width: 34rem;
	/* z-index: 10; */
}

menu ul {
	background-color: var(--menu-dd-bgc);
}

menu ul ul {
	background-color: var(--menu-dd-ul-bgc);
}



menu .dropdown li {
	width: 100%;
}

menu .dropdown a {
	padding: 1rem;
	color: var(--menu-dd-a-col);
	text-align: left;
}

menu .dropdown a:hover,
menu .dropdown a:focus {
	background-color: var(--menu-dd-a-bgc-hover);
	color: var(--menu-dd-a-col-hover);
}


/* Media Query for Accessibility (Make dropdowns keyboard accessible) */
@media (hover: none) {
	menu li > a:focus + .dropdown, li > a:focus-within + .dropdown {
		display: block;
	}
}

/* Hover state for better user feedback */
menu li:hover > button {
	background-color: #00ffcc;
	color: #111;
}

/* Ensure submenu links aren't focusable unless expanded */
menu .dropdown a {
	display: block;
	padding: .5rem 2.5rem;
}

menu button[aria-expanded="false"] + .dropdown a {
	tabindex: -1; /* Prevents focus when submenu is closed */
}

menu button[aria-expanded="true"] + .dropdown a {
	tabindex: 0; /* Allows focus when submenu is open */
}




@media (min-width: 78rem) {
	#mainMenuOpen {
		display:none;
	}

	menu.dd li ul ul,
	menu.dd li:hover ul ul {
		/* display: none; /* we just want 1 level dropdowns here */
		top: -1px; /* .dropdown border width */
		left: 100%;
	}

	/* Show dropdown on hover/focus */
	menu li:hover > .dropdown,
	menu li:focus-within > .dropdown {
		display: block;
	}

	/* Ensure submenus are initially hidden and not focusable */
	.dropdown {
		display: none;
		visibility: hidden; /* Makes it invisible but not focusable */
		pointer-events: none; /* Prevents interaction when hidden */
	}

	/* Hover on li to show dropdown */
	menu li:hover > .dropdown,
	menu button[aria-expanded="true"] + .dropdown {
		display: block;
		visibility: visible;
		pointer-events: auto;
	}
}



/* mobile menu magic */
@media (max-width: 104rem) {
	:root {
		overscroll-behavior: none;
	}
	body {
		scrollbar-gutter: stable;
	}
	/* menu overflow magic */
	html.menu-open {
		overflow: hidden;
	}
	body.menu-open {
		/*overflow: scroll;*/
		height: 100%;
	}

	body > aside {
		order: 20;
	}

	body > header {
		overflow: hidden;
	}

	header #logo,
	.sticky header #logo,
	.menu-open header #logo {
		position: fixed;
		top: 0;
		z-index: 12345;
	}
	.menu-open #header {
		height: 100vh; /* fallback for IEos < 15.4 */
		height: 100dvh;
		overflow: auto;
	}
	body #menu {
		height: unset;
	}

	#mainMenuOpen {
		position: fixed;
		top: -1px;
		left: calc(100vw - 5.125rem);
		display:block;
		flex-grow:0;
		font-family: initial;
		font-size:2em;
		line-height:1.75rem;
		border:0;
		background:inherit;
		color: inherit;
		padding: 1rem;
		width: 4rem;
		height: 4rem;
		cursor: pointer;
		z-index: 123456;
		translate: -.25rem;
		transition:  top .2s ease-in;
	}

	#mainMenuOpen:after {
		content:"\2261";
		display: block;
		width: 2rem;
		height: 2rem;
	}
	.menu-open #mainMenuOpen:after {
		content:"\2715";
		font-size: .66em;
		line-height: 1.8rem;
	}


	#mainMenuOpen + #nav {
		position:absolute;
		top:-100%;
		left:0;
		width:100%;
		min-height:100%;
		min-height: fill-available;
		overflow:auto;
		display:flex;
		align-items:center;
		justify-content:flex-start;
		opacity:0;
		/* background:#000; */
		transition: opacity 0s;
		z-index: 234;

		padding: 4rem 0;
	}

	#mainMenuOpen:focus + #nav {
		transition: opacity 0.3s ease-in;
	}
	#mainMenuOpen:focus + #nav,
	#mainMenuOpen + #nav.active,
	#mainMenuOpen + #nav:focus-within {
		top:0;
		opacity:1;
	}
/*
	.menu-open #mainMenuOpen + #nav:after {
		content:"\1F5D9";
		display:block;
		position:fixed;
		top: 0;
		right: 0;
		font-size: 1.9rem;
		padding: 1rem;
		line-height:1;
		cursor: pointer;
		pointer-events:auto;
		filter: invert(1);
	}
 */






	#nav {
		flex-flow: column;
	}

	#nav menu.dd {
	}
	#nav menu li {
		float: unset;
		position: relative;
	}
	#nav menu.utilities li {
		display: block;
	}

	menu.dd {
		--hover-bg: #fff;
		--hover-fg: inherit;
		flex-flow: column;
	}

	menu.dd li > [aria-haspopup="true"] + button {
		right: 1.05rem;
		padding: 1rem;
	}

	menu.dd li > [aria-haspopup="true"] + button[aria-expanded="false"] {
	}
	menu.dd li > [aria-haspopup="true"]:hover + button,
	menu.dd li:hover > [aria-haspopup="true"] + button {
		transform: rotate(270deg);
	}
	menu.dd li li > [aria-haspopup="true"] + button {
		transform: rotate(90deg) translateX(-0.5rem);
	}
	menu.dd li > [aria-haspopup="true"] + button[aria-expanded="true"] {
		transform: rotate(270deg);
	}
	menu.dd li li:hover > [aria-haspopup="true"] + button {
		transform: rotate(270deg)  translateX(0.5rem);
	}
	menu.dd li li > [aria-haspopup="true"] + button[aria-expanded="true"] {
		transform: rotate(270deg) translateX(0.5rem);
	}

	menu .dropdown {
		min-width: 100%;
	}

	menu button[aria-expanded="false"] + .dropdown {
		display: none;
		visibility: hidden;
		pointer-events: auto;
	}
	menu button[aria-expanded="true"] + .dropdown {
		display: block;
		visibility: visible;
		pointer-events: auto;
	}
	menu li button + .dropdown,
	menu li li button + .dropdown {
		position: relative;
		top: 0;
		left: 0;
	}

}

@media (max-width: 46rem) {
	#mainMenuOpen {
		left: calc(100vw - 3.75rem);
	}
}



nav.breadcrumbs {
}

/* ---------------------------------------------------------------------------- */ /* txtimg positioning */


.above-center .img {
}
.above-center .img img {
	width: 100%;
	height: auto;
}
.above-left .img img {
	margin-inline: 0 auto;
}
.above-right .img img {
	margin-inline: auto 0;
}

.below-center .img {
	margin-inline: auto;
}
.below-center .img img {
	width: 100%;
	height: auto;
}
.below-left .img img {
	margin-inline: 0 auto;
}
.below-right .img img {
	margin-inline: auto 0;
}



.align-left {
	width: 50%;
	margin-top: 0;
	margin-right: 1rem;
	float: left;
}

.align-right {
	margin-top: 0;
	margin-left: 1rem;
	float: right;
}

 .align-left img,
.align-right img {
	width: 100%;
	height: auto;
	display: block;
}


 .align-left.half,
.align-right.half {
	width: 50%;
}
 .align-left.phi,
.align-right.phi {
	width: 40%;
}
 .align-left.quarter,
.align-right.quarter {
	width: 25%;
}

.align-left.outset.column-body {
	margin-right: 2rem;
	margin-left: calc( -1 * var(--body-outset) - var(--body-margin) );
}
.align-right.outset.column-body {
	margin-right: calc( -1 * var(--body-outset) - var(--body-margin) );
	margin-left: 2rem;
}

.align-left.outset.column-page {
	margin-left: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) );
}
.align-right.outset.column-page {
	margin-right: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) );
}

.align-left.outset.column-screen-inset {
	margin-left: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) );
}
.align-right.outset.column-screen-inset {
	margin-right: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) ) );
}

.align-left.outset.column-screen {
	margin-left: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) - var(--screen-margin) );
}
.align-right.outset.column-screen {
	margin-right: calc( -1 * var(--body-outset) - var(--body-margin) - max( var(--page-inset-left-min), var(--page-inset-left-max) ) - var(--page-margin) - var(--screen-inset-width) - var(--screen-margin) );
}



.column-before img,
.column-margin img,
.beside-left .column-body img,
.beside-right  .column-body img {
	width: 100%;
	height: auto;
	display: block;
}

div[class*="col-"] {
	display: grid;
	gap: .5rem;
	align-items: center;
	text-align: center;
}
.imgs.col-2 { grid-template-columns: repeat(2, 1fr); }
.imgs.col-3 { grid-template-columns: repeat(3, 1fr); }
.imgs.col-4 { grid-template-columns: repeat(4, 1fr); }
.imgs.col-5 { grid-template-columns: repeat(5, 1fr); }
.imgs.col-6 { grid-template-columns: repeat(6, 1fr); }
.imgs.col-7 { grid-template-columns: repeat(7, 1fr); }
.imgs.col-8 { grid-template-columns: repeat(8, 1fr); }








@media screen and (min-width: 1024px + 1px) {

	.align-left.half-bleed {
		width: 75%;
		margin-left: -25%;
		float: left;
	}
	.align-left.half-bleed .caption {
		text-align: right;
	}

	.align-right.half-bleed {
		width: 75%;
		margin-right: -25%;
		float: right;
	}
	.align-right.half-bleed .caption {
		text-align: left;
	}


	.align-half,
	.align-full,
	.align-full-left,
	.align-full-right,
	.align-half-left,
	.align-half-right {
		margin-left: calc(((100vw - (2* var(--colsize)) + 3rem) / 2) * -1);
		width: 100vw;
		display: grid;
		grid-template-columns:
	  [full-start] minmax(1rem, 1fr)
	  [wide-start] minmax(0, 1fr)
	  [content-start] minmax(0, calc( (2* var(--colsize)) + 3rem)) [content-end]
	  minmax(0, 1fr) [wide-end]
	  minmax(1rem, 1fr) [full-end];
	}

	.align-half > * {
		grid-column: wide;
	}

	.align-full > * {
		grid-column: full;
	}

	.align-full-left {
		width: calc(100vw - 6rem);
	}

	.align-full-left a {
		grid-column: full-start/content-end;
	}

	.align-full-left .caption {
		grid-column: content-start/content-end;
		text-align: right;
	}

	.align-full-right {
		padding-left: 4.5rem;
		width: calc(100vw - 3rem);
	}

	.align-full-right a {
		grid-column: content-start/full-end;
		grid-row: 1;
	}

	.align-full-right .caption {
		grid-column: content-start/full-end;
		align-self: end;
		text-align: left;
		padding-right: 1rem;
	}

	.align-half-left a {
		grid-column: full-start/wide-end;
	}

	.align-half-left .caption {
		grid-column: full-start/wide-end;
		grid-row: 2;
		text-align: right;
	}
	.align-half-right a {
		grid-column: wide-start/full-end;
	}

	.align-half-right .caption {
		grid-column: wide-start/full-end;
		grid-row: 2;
		text-align: left;
	}
}

@media screen and (max-width: 1024px) {

	.align-left.half-bleed {
		width: 100%;
	}

	.align-right.half-bleed {
		width: 100%;
	}

	.align-half,
	.align-full,
	.align-full-left,
	.align-full-right,
	.align-half-left,
	.align-half-right {
		margin-left: -1.5rem;
		width: 100vw;
	}
}

@media screen and (min-width: 1680px + 1px) {
	.align-full-left {
		width: calc(100vw - 6rem);
	}

	.align-full-left a {
		grid-column: full-start/content-end;
		margin-bottom: 1.25rem;
	}

	.align-full-left .caption {
		grid-column: content-end/full-end;
		align-self: end;
		text-align: left;
		padding-left: 1rem;
		padding-bottom: 1.25rem;
	}

	.align-full-right {
		padding-left: 4.5rem;
		width: calc(100vw - 3rem);
	}

	.align-full-right a {
		grid-column: content-start/full-end;
		grid-row: 1;
		margin-bottom: 1.25rem;
	}

	.align-full-right .caption {
		grid-column: full-start/content-start;
		grid-row: 1;
		align-self: end;
		text-align: right;
		padding-right: 1rem;
		padding-bottom: 1.25rem;
	}

}

.imgs {
	margin: 1rem 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(
		var(--grid-type, auto-fit),
		minmax(min(var(--imgwidth, 10rem), 100%), 1fr)
 	);
	grid-auto-rows: auto;
	container-type: inline-size;
}


.layout-row .txt {
	max-width: 100%;
	display:grid;
	justify-items: center;
	align-content: center;
	padding: max(1rem, 3vw);
}



/* ---------------------------------------------------------------------------- */ /* copyright hover */

figure {
	position: relative;
}

.img {
	position: relative;
	top: 0;
	display: block;
	align-items: center;
	object-fit: contain;
	margin: 0;
}


.img > a,
.img > div,
.img img {
	display: block;
	position: relative;
}

.beside-right .img img,
.beside-left .img img,
.txt-beside-right .img img,
.txt-beside-left .img img {
	width: 100%;
	height: auto;
}



.img .copy {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 12px;
	width: 100%;
	text-align: right;
	z-index: 1;
	mix-blend-mode: difference;
	color: #fff;
}

.copy .trigger {
	display : inline-block;
	padding: 2px 6px 2px 4px;
	opacity: 1;
}
.copy .data {
	position: absolute;
	width: auto;
	max-width: 85%;
	bottom: 0;
	right: 0;
	padding: 2px 6px 2px 4px;
	opacity: 0;
	background-color : #8888;
}
@media only screen and (max-width: 991px) {
	.copy .data {
		max-width: 96%;
	}
}

.copy:hover {
	mix-blend-mode: unset;
	transition: .2s mix-blend-mode ease-in-out;
}
.copy:hover .trigger,
.copy:hover .trigger {
	opacity: 0;
	transition: .2s opacity ease-in-out;
}

.copy:hover .data,
.copy:hover .data {
	opacity: 1;
	transition: .2s opacity ease-in-out;
}

figure.img > figcaption {
	position: relative;
	bottom: 0;
}



/* ---------------------------------------------------------------------------- */ /* video facades */

.videoEmbed {
	position:relative;
	overflow:hidden;
	aspect-ratio:var(--aspect-ratio);
	max-height:90vh;
	margin:1rem auto;
	font-family:arial,helvetica,sans-serif;
	background-color:#000;
	background-image:var(--video-poster);
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
}

.videoEmbed > * {
	box-sizing:border-box;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:0;
}

.videoEmbed header {
	display: none;
}

.videoEmbed a span {
	display: none;
	position:absolute;
	left:0;
	bottom:1rem;
	z-index:99;
	padding:1rem;
	line-height:1.5rem;
	text-decoration:none;
	background:#222;
	color:#EEE;
	transition:background 0.3s;
}

.videoEmbed a:focus span,
.videoEmbed a:hover span {
	background:#444;
}

.videoEmbed a b,
.videoEmbed button {
	background-color:transparent;
	color:transparent;
	cursor:pointer;
}

.videoEmbed button {
	background: left 2rem bottom 2rem no-repeat;
	transition: all 0.3s;
	box-shadow: inset 0 0 32px 2px #0003;
	filter: drop-shadow(0 0 1px #0008 );
}

.videoEmbed button:focus,
.videoEmbed button:hover {
	/*scale:1.1;*/
	background-color: #fff0;
	filter: drop-shadow(0 0 1px #fff3 );
}

.videoEmbed header {
	padding:0.5rem;
	color:#FFF;
	text-shadow:
		-0.0625em -0.0625em 0.125em #000,
		0.0625em -0.0625em 0.125em #000,
		0.0625em 0.0625em 0.125em #000,
		-0.0625em 0.0625em 0.125em #000,
		0 0 0.25em #000;
}

.videoEmbed a b {
	display:inline-block;
	font-size:1.25em;
	vertical-align:top;
	background:center no-repeat;
	background-size:contain;
}

.videoEmbed.vimeo span {
	background:#025;
}

.videoEmbed.vimeo a:focus span,
.videoEmbed.vimeo a:hover span {
	background:#008;
}

.videoEmbed.vimeo button {
	background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%0A%0A%3Cpath fill='%23fff' d='M19 12a1 1 0 0 1-.496.864l-12 7A1 1 0 0 1 5 19V5a1 1 0 0 1 1.504-.864l12 7A1 1 0 0 1 19 12' /%3E%0A%0A%3C/svg%3E%0A");
	background-size:1.5rem;
}

.videoEmbed.vimeo a b {
	background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 24' fill='%230BF' %3E%3Cpath d='m 15.72,9.431 c -0.069,1.514 -1.127,3.588 -3.172,6.22 -2.114,2.749 -3.903,4.124 -5.367,4.124 -0.906,0 -1.673,-0.837 -2.3,-2.512 C 4.463,15.728 4.044,14.194 3.626,12.659 3.161,10.985 2.662,10.147 2.128,10.147 c -0.116,0 -0.524,0.245 -1.221,0.733 L 0.176,9.937 C 0.943,9.263 1.7,8.588 2.445,7.912 3.469,7.028 4.237,6.562 4.75,6.515 5.96,6.399 6.705,7.227 6.985,8.998 c 0.302,1.912 0.511,3.101 0.628,3.566 0.349,1.586 0.733,2.378 1.152,2.378 0.326,0 0.815,-0.515 1.467,-1.543 0.651,-1.029 1,-1.812 1.047,-2.349 0.093,-0.888 -0.256,-1.333 -1.047,-1.333 -0.373,0 -0.757,0.085 -1.151,0.255 0.764,-2.504 2.224,-3.721 4.38,-3.652 1.598,0.047 2.351,1.084 2.259,3.111' id='path4' /%3E%3Cpath d='m 22.281,1.918 c -0.023,0.58 -0.314,1.136 -0.874,1.669 -0.628,0.602 -1.373,0.903 -2.234,0.903 -1.327,0 -1.968,-0.579 -1.921,-1.737 0.022,-0.602 0.378,-1.182 1.064,-1.738 0.687,-0.555 1.449,-0.834 2.288,-0.834 0.489,0 0.896,0.192 1.223,0.574 0.325,0.382 0.477,0.77 0.454,1.163 z m 3.038,12.419 c -0.652,1.232 -1.548,2.349 -2.689,3.349 -1.56,1.349 -3.119,2.024 -4.679,2.024 -0.723,0 -1.275,-0.233 -1.659,-0.699 -0.384,-0.465 -0.565,-1.069 -0.541,-1.814 0.022,-0.767 0.261,-1.954 0.715,-3.56 0.454,-1.605 0.682,-2.466 0.682,-2.582 0,-0.605 -0.21,-0.908 -0.629,-0.908 -0.139,0 -0.536,0.245 -1.188,0.733 L 14.528,9.937 c 0.745,-0.674 1.49,-1.349 2.235,-2.025 1.001,-0.884 1.746,-1.35 2.236,-1.397 0.768,-0.069 1.332,0.157 1.693,0.679 0.36,0.523 0.494,1.2 0.402,2.035 -0.303,1.415 -0.629,3.212 -0.978,5.392 -0.024,0.998 0.337,1.496 1.082,1.496 0.326,0 0.908,-0.344 1.746,-1.033 0.699,-0.574 1.269,-1.114 1.712,-1.62 l 0.663,0.873' id='path6' /%3E%3Cpath d='m 47.127,14.336 c -0.652,1.233 -1.548,2.349 -2.689,3.349 -1.56,1.349 -3.12,2.024 -4.679,2.024 -1.514,0 -2.247,-0.837 -2.2,-2.513 0.022,-0.745 0.168,-1.639 0.436,-2.686 0.267,-1.048 0.413,-1.862 0.436,-2.444 0.024,-0.883 -0.245,-1.326 -0.806,-1.326 -0.607,0 -1.331,0.722 -2.172,2.165 -0.887,1.514 -1.367,2.98 -1.436,4.4 -0.05,1.002 0.05,1.77 0.293,2.305 -1.624,0.047 -2.762,-0.221 -3.411,-0.803 -0.582,-0.512 -0.848,-1.361 -0.801,-2.549 0.02,-0.745 0.136,-1.49 0.343,-2.235 0.205,-0.745 0.319,-1.408 0.342,-1.991 0.05,-0.861 -0.268,-1.292 -0.944,-1.292 -0.583,0 -1.213,0.664 -1.888,1.991 -0.676,1.326 -1.049,2.712 -1.119,4.155 -0.05,1.305 0.04,2.212 0.25,2.724 -1.598,0.047 -2.733,-0.29 -3.404,-1.01 -0.558,-0.603 -0.812,-1.52 -0.765,-2.751 0.02,-0.603 0.129,-1.445 0.321,-2.524 0.192,-1.08 0.299,-1.921 0.321,-2.525 0.05,-0.417 -0.06,-0.627 -0.314,-0.627 -0.14,0 -0.536,0.236 -1.188,0.707 L 21.215,9.937 c 0.117,-0.092 0.849,-0.768 2.2,-2.025 0.978,-0.907 1.641,-1.373 1.99,-1.396 0.606,-0.047 1.094,0.203 1.467,0.75 0.372,0.547 0.559,1.182 0.559,1.903 0,0.233 -0.02,0.454 -0.07,0.664 0.349,-0.535 0.756,-1.002 1.222,-1.398 1.071,-0.93 2.27,-1.455 3.597,-1.571 1.141,-0.093 1.955,0.174 2.445,0.803 0.395,0.512 0.581,1.246 0.558,2.2 0.163,-0.139 0.338,-0.291 0.525,-0.454 0.534,-0.628 1.058,-1.128 1.57,-1.501 0.861,-0.629 1.759,-0.978 2.689,-1.048 1.118,-0.093 1.921,0.173 2.41,0.8 0.418,0.51 0.605,1.241 0.559,2.191 -0.024,0.65 -0.181,1.595 -0.472,2.836 -0.292,1.241 -0.436,1.953 -0.436,2.139 -0.024,0.488 0.023,0.824 0.139,1.009 0.117,0.186 0.395,0.278 0.838,0.278 0.326,0 0.907,-0.344 1.746,-1.034 0.698,-0.573 1.269,-1.113 1.712,-1.619 l 0.664,0.872' id='path8' /%3E%3Cpath d='m 52.295,10.654 c 0.022,-0.625 -0.233,-0.938 -0.767,-0.938 -0.698,0 -1.407,0.481 -2.127,1.442 -0.721,0.961 -1.093,1.882 -1.116,2.762 -0.013,0 -0.013,0.151 0,0.452 1.139,-0.417 2.127,-1.053 2.964,-1.911 0.674,-0.741 1.022,-1.344 1.046,-1.807 z m 7.927,3.646 c -0.675,1.117 -2.002,2.232 -3.981,3.348 -2.467,1.418 -4.971,2.126 -7.508,2.126 -1.885,0 -3.237,-0.628 -4.051,-1.885 -0.582,-0.861 -0.861,-1.885 -0.838,-3.072 0.023,-1.885 0.862,-3.677 2.515,-5.377 1.815,-1.862 3.957,-2.794 6.425,-2.794 2.282,0 3.492,0.93 3.632,2.787 0.093,1.184 -0.559,2.404 -1.956,3.658 -1.49,1.371 -3.365,2.241 -5.622,2.612 0.418,0.581 1.046,0.871 1.885,0.871 1.676,0 3.504,-0.426 5.483,-1.279 1.42,-0.599 2.538,-1.221 3.353,-1.866 l 0.663,0.871' id='path10' /%3E%3Cpath d='m 65.755,11.828 c 0.023,-0.63 -0.064,-1.207 -0.262,-1.732 -0.198,-0.524 -0.484,-0.788 -0.855,-0.788 -1.188,0 -2.166,0.642 -2.933,1.925 -0.653,1.05 -1.003,2.17 -1.048,3.358 -0.024,0.584 0.081,1.098 0.314,1.54 0.255,0.514 0.616,0.77 1.083,0.77 1.047,0 1.944,-0.617 2.689,-1.854 0.628,-1.027 0.965,-2.1 1.012,-3.219 z m 3.946,0.132 c -0.093,2.139 -0.884,3.987 -2.374,5.544 -1.49,1.557 -3.342,2.336 -5.553,2.336 -1.839,0 -3.236,-0.593 -4.19,-1.779 -0.698,-0.883 -1.083,-1.987 -1.152,-3.311 -0.118,-2 0.604,-3.836 2.165,-5.51 1.676,-1.859 3.782,-2.789 6.32,-2.789 1.629,0 2.863,0.547 3.702,1.639 0.792,1 1.152,2.29 1.082,3.87' id='path12' /%3E%3C/svg%3E%0A");
}

.videoEmbed.youtube button {
	background-image:url("data:image/svg+xml,%3Csvg width='159' height='110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m154 17.5c-1.82-6.73-7.07-12-13.8-13.8-9.04-3.49-96.6-5.2-122 0.1-6.73 1.82-12 7.07-13.8 13.8-4.08 17.9-4.39 56.6 0.1 74.9 1.82 6.73 7.07 12 13.8 13.8 17.9 4.12 103 4.7 122 0 6.73-1.82 12-7.07 13.8-13.8 4.35-19.5 4.66-55.8-0.1-75z' fill='%23f00'/%3E%3Cpath d='m105 55-40.8-23.4v46.8z' fill='%23fff'/%3E%3C/svg%3E%0A");
	background-size: 4rem 3rem;
}

.videoEmbed.youtube a b {
	margin-left:0.25rem;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.9 113.39'%3E%3Cg fill='%23fff'%3E%3Cpath d='M64.792 80.99V32.396l42.082 24.297zm93.803-63.285a20.285 20.285 0 00-14.32-14.32C131.642 0 80.99 0 80.99 0S30.337 0 17.705 3.385a20.286 20.286 0 00-14.32 14.32C0 30.338 0 56.693 0 56.693S0 83.049 3.385 95.68A20.285 20.285 0 0017.705 110c12.632 3.386 63.285 3.386 63.285 3.386s50.652 0 63.285-3.386a20.284 20.284 0 0014.32-14.32c3.385-12.632 3.385-38.988 3.385-38.988s0-26.355-3.385-38.988m94.473 74.326c.887-2.314 1.332-6.098 1.332-11.35V58.556c0-5.097-.445-8.822-1.332-11.178-.888-2.355-2.452-3.533-4.69-3.533-2.163 0-3.69 1.178-4.577 3.533-.888 2.356-1.332 6.081-1.332 11.178V80.68c0 5.25.424 9.035 1.275 11.35.848 2.318 2.392 3.475 4.633 3.475 2.239 0 3.803-1.157 4.691-3.475zm-17.953 11.122c-3.207-2.16-5.486-5.52-6.835-10.079-1.352-4.554-2.027-10.617-2.027-18.185v-10.31c0-7.644.771-13.784 2.316-18.417 1.544-4.633 3.956-8.011 7.24-10.135 3.282-2.123 7.587-3.186 12.916-3.186 5.251 0 9.459 1.082 12.626 3.243 3.165 2.162 5.482 5.542 6.95 10.136 1.466 4.595 2.2 10.715 2.2 18.36v10.31c0 7.567-.714 13.65-2.142 18.243-1.43 4.595-3.747 7.955-6.951 10.077-3.205 2.124-7.548 3.186-13.03 3.186-5.64 0-10.06-1.082-13.263-3.243m248.053-57.981c-.81 1.005-1.352 2.646-1.621 4.923-.272 2.278-.404 5.734-.404 10.367v5.097h11.697V60.46c0-4.555-.155-8.011-.463-10.367-.309-2.355-.868-4.014-1.678-4.98-.812-.966-2.067-1.449-3.766-1.449-1.7 0-2.954.503-3.765 1.506zm-2.025 29.886v3.591c0 4.557.132 7.974.404 10.251.269 2.279.828 3.94 1.68 4.982.849 1.041 2.16 1.564 3.938 1.564 2.392 0 4.035-.927 4.923-2.781.887-1.853 1.37-4.942 1.447-9.268l13.785.812c.077.62.116 1.469.116 2.548 0 6.565-1.795 11.47-5.387 14.712-3.589 3.242-8.669 4.865-15.232 4.865-7.876 0-13.398-2.47-16.564-7.414-3.168-4.94-4.75-12.586-4.75-22.935V63.589c0-10.657 1.641-18.436 4.924-23.342 3.281-4.903 8.9-7.355 16.854-7.355 5.482 0 9.691 1.004 12.626 3.012 2.933 2.01 5 5.137 6.197 9.383 1.197 4.247 1.796 10.117 1.796 17.607v12.163h-26.757m-284.953-1.33l-18.187-65.68h15.869l6.37 29.77c1.623 7.339 2.82 13.594 3.591 18.766h.464c.54-3.706 1.738-9.922 3.591-18.65l6.603-29.886h15.869l-18.417 65.68v31.51h-15.754v-31.51M322.115 34.23v71.007h-12.511l-1.39-8.688h-.347c-3.399 6.564-8.496 9.845-15.291 9.845-4.71 0-8.185-1.543-10.425-4.633-2.24-3.087-3.359-7.915-3.359-14.48V34.23h15.985v52.126c0 3.168.348 5.426 1.043 6.776.695 1.353 1.853 2.027 3.475 2.027 1.39 0 2.722-.423 3.996-1.275 1.274-.849 2.22-1.928 2.838-3.241V34.229h15.986m81.995.001v71.007h-12.511l-1.391-8.688h-.345c-3.402 6.564-8.498 9.845-15.292 9.845-4.711 0-8.186-1.543-10.426-4.633-2.24-3.087-3.358-7.915-3.358-14.48V34.23h15.985v52.126c0 3.168.347 5.426 1.041 6.776.696 1.353 1.855 2.027 3.476 2.027 1.391 0 2.723-.423 3.996-1.275 1.275-.849 2.22-1.928 2.839-3.241V34.229h15.985'%3E%3C/path%3E%3Cpath d='M365.552 20.908h-15.87v84.329h-15.637v-84.33h-15.869V8.05h47.376v12.858m76.811 53.636c0 5.174-.215 9.229-.639 12.162-.424 2.937-1.139 5.021-2.143 6.255-1.004 1.236-2.357 1.854-4.053 1.854a7.404 7.404 0 01-3.65-.927c-1.12-.618-2.026-1.544-2.722-2.78V50.796c.54-1.93 1.467-3.513 2.78-4.749 1.313-1.234 2.74-1.853 4.285-1.853 1.623 0 2.876.637 3.766 1.91.886 1.275 1.505 3.418 1.853 6.43.348 3.011.523 7.297.523 12.857zm14.652-28.964c-.967-4.478-2.531-7.721-4.692-9.73-2.163-2.007-5.136-3.011-8.919-3.011-2.935 0-5.676.83-8.224 2.49a16.926 16.926 0 00-5.908 6.545h-.117l.001-37.416h-15.405v100.777h13.204l1.622-6.717h.347c1.235 2.393 3.088 4.285 5.56 5.675 2.47 1.39 5.213 2.085 8.225 2.085 5.404 0 9.382-2.491 11.931-7.471 2.548-4.982 3.823-12.76 3.823-23.341V64.23c0-7.953-.484-14.17-1.448-18.65'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------- */ /* splide slider */

.slider {
	margin: 0 auto;
	background: #888;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	grid-column: screen-start/screen-end;

}

.slider .splide {
	height: 100%;
}

.slider .splide__track {
	width: 100%;
}

.splide__slide img {
	width: 100%;
	height: auto;
}

.splide .imgs {
	margin: 0;
}
/* main heading styling */

body > h1 { 
	position: relative;
	top: -3.1rem;
	text-align: center;
	font-size: .8rem;
	line-height: 2.5rem;
	/* background-color: #fff; */
	/* border-top: 1px solid #ddd; */
	letter-spacing: -0.025rem;
		display: none;
}
@media screen and (max-width: 70rem) {
	body > h1 {
		display: none;
	}
}


/* accessible skip link */
.skiplink {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0;
}
.skiplink:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}









/* --- */

#header {
	background-color: rgba(0,0,0,0.8);
	border-bottom: 1px solid #F1CB0B22;
	padding: 0;
	z-index: 123;
}

#header .center {
	grid-column: screen-start/screen-end;
	display: grid;
	grid-template-columns:  24rem   1fr;
	grid-template-rows:     1fr;
	height: 5rem;
	/* width: 100%; */
}

@media screen and (max-width: 70rem) {
	#header .center {
		grid-column: screen-start/screen-end;
		grid-template-columns: 1fr 6rem;
		grid-template-rows:     1fr;
		height: 4.5rem;
	}
}

.sticky #header {
	box-shadow: 0 0 32px rgba(0,0,0,.067);
}


/* logo */

#logo {
	grid-area: 1 / 1 / 1 / 1;
	z-index: 123;
	display: flex;
	flex-flow: row;
	gap: 1.5rem;
	align-items: center;
	translate: 1rem;
}

#logo > a {
	display: inline-block;
	background: transparent url('../../../_assets/a5e19e6e0581559309142352e47dcfd9/img/reichspostbitter-logo.png') center center / 100% auto no-repeat;
	border: none;
	width: 6rem;
	height: 4rem;
	text-indent: -1000%;
	overflow: hidden;
	/* transition: all .2s ease-in-out; */
}

#logo a + span {
	display: none;
}


@media screen and (max-width: 70rem) {
	#logo {
		width: 100%;
		height: 4.5rem;
	}
	#logo a {
		top: .75rem;
		width: 4rem;
		height: 3rem;
		translate: 0;
	}
	#logo a + span {
		font-size: 1rem;
	}
}

#menu {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 2;
  grid-column-end: 2;
  height: 5rem;
}
@media screen and (max-width: 70rem) {
	#menu {
		height: 4.5rem;
		max-width: 10rem;
	}
	#mainMenuOpen + nav {
		background-color: #000;
	}
	#mainMenuOpen +nav ul:not(.dl-submenu) {
		border-top: 1px solid #F1CB0B44;
	}
}



/* hero */
.hero {
	order: 22;
	display: block;
	margin: 0 auto;
	aspect-ratio: 16/10;
	width: 100%;
	max-width: 100%;
	min-height: 120px;
	background: var(--bgimg) center center / cover no-repeat;
	position: relative;
}

#date {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	background-color: #fff8;
}
#date p {
	margin: 0;
	padding: 0.25rem;
	font-size: .8rem;
}




/* header nav layout */

#nav {
	display: flex;
	justify-content: end;
	align-items: end;
	padding: 0;
	height: 4rem;
}
@media screen and (max-width: 70rem) {
	#nav {
		display: none;
		justify-content: start;
		align-items: unset;
	}
}

#nav ul {
	--menu-font: 'Contrail One';
	margin: 0;
	padding: 0;
	width: auto;
	text-transform: uppercase;
}

#nav .primary {
	/* margin-left: 2.5rem; */
	/* background: linear-gradient(to bottom,#88C7D4 0%,#88C7D4 2px,#fff 2px,#fff 100%) */
	display: flex;
	align-items: center;
	padding-inline-end: 2rem;
}
@media screen and (max-width: 70rem) {
	#nav .primary {
		display: block;
		padding-inline-end: 0;
	}
}


#nav .secondary {
	border-inline-start: 1px solid rgb(211, 113, 25);
	padding-inline: 2rem;
}


#langswitch {
	border-left: 1px solid #F1CB0B44;
    transition: all .2s ease-in-out;
}
#langswitch a {
	display: flex;
	font-size: .8rem;
	letter-spacing: 0;
	text-decoration: none;
}





/* above header message area */
@media (min-width:60rem) {
	body > aside {
		z-index: 23;
	}
}




#topics *:focus-visible,
ul.dd *:focus-visible {
	outline: calc(var(--border-width) * 2) solid var(--color-primary, var(--color-text));
	outline-offset: calc(var(--border-width) * -2);
}






#footer {
	bottom:0;
	padding: 0;
}

#footer .center {
	grid-column: screen-start/screen-end;
	width: 100%;
	/* max-width: 1600px; */
	margin: 0 auto;
	padding: 0 .5rem;
}

/* footer menus */

#footer .menus {
	padding: 3rem 1rem 0;
	font-size: 0.95rem;
}

#footer .menus .center {
}

#footer .menus h4 {
	/* margin-block-end: .5rem; */
	font-family: var(--font);
	font-weight: 300;
	letter-spacing: 0.025rem;
	color: inherit;
}

#footer .menus ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer .menus li {
	margin: 0;
}

#footer .menus a {
	text-decoration: none;
	color: inherit;
}
#footer .menus a:hover {
	color: #fff;
}

@media screen and (max-width: 40rem) {
	#footer .menus .center {
		flex-flow: column;
		gap: 2rem;
		text-align: center;
	}
}



/* footer bottom */

#footer .bottom {
	font-family: var(--font);
	font-size: 0.8rem;
	font-weight: var(--font-weight-regular);
	padding: 1rem;
	background-color: #000;
	color: #D37119;
}
#footer .bottom a {
	text-decoration: none;
	color: inherit;
}
#footer .bottom a:hover {
	color: #fff;
}

#footer .bottom .center {
	display: grid;
	grid-template-columns: 4fr 1fr 4fr;
	grid-template-areas:
		"copy social legal";
}

#footer .legal {
	grid-area: legal;
	justify-self: end;
}
#footer .social {
	grid-area: social;
} 
#footer .copy {
	grid-area: copy;
}

@media screen and (max-width: 70rem) {
	#footer .bottom {
		padding: 1.5rem 1rem;
		font-size: .95rem;
		font-weight: 500;
	}
	#footer .bottom .center {
		grid-template-columns: 1fr;
		grid-template-areas:
			"legal"
			"social"
			"copy";
	}
	#footer .legal,
	#footer .copy {
		justify-self: center;
	}
	#footer .social {
		margin-block: 2rem;
	}
	#footer .bottom {
		font-size: 1rem;
		color: var(--color-text-invert);
	}
}



#footer .bottom ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .8rem;
}
#footer .bottom li {
	margin: 0;
}
#footer .bottom li a {
	display: inline-block;
	transition: color .1s ease-in-out;
}


/* social icons */

#social {
	display: flex;
	justify-content: center;
	/*padding: 2em 0;*/
}

#social.logolist ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
#social.logolist li {
	display: inline-block;
	padding: 0 .01rem;
	margin: 0;
}
#social.logolist li a {
	display: block;
	width: 20px;
	height:20px;
	opacity: 0.66;
	transition: all 0.1s ease-out;
	overflow: hidden;
	text-indent: 30px;
	background-repeat: no-repeat;
	background-position: center center;
}
#social.logolist li a:hover {
	opacity: 1;
}

/* icons from here: https://simpleicons.org/ */
#social a[href*="facebook"]  { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook icon</title><path style="fill:%23D37119;" d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg>'); }
#social a[href*="instagram"] { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram    </title><path style="fill:%23D37119;" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>'); }
#social a[href*="linkedin"]  { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn icon</title><path style="fill:%23D37119;" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>'); }
#social a[href*="twitter"]   { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon </title><path style="fill:%23D37119;" d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>'); }
#social a[href*="youtube"]   { height: 20px; background-size: 20px auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>YouTube icon </title><path style="fill:%23D37119;" d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/></svg>'); }



@media screen and (max-width: 70rem) {
	footer .logos li a {
		margin: 0 auto !important;
		transform: scale(1.2);
	}
}










.images {
	display: flex;
	gap: .5rem;
}
.images .image {
	width: 100%;
	height: auto;
}
.images img {
	width: 100%;
	height: auto;
}

body {
	font-size: 1.5rem;
	color: #222;
	line-height: 1.7;
}




#logo > a {
	background: transparent url('../../../_assets/681dcb38a3190dd315a7d1a31e38fded/img/brandmeisterin-logo.png') center center / 100% auto no-repeat;
	width: 16rem;
	height: 8rem;
}

#footer .bottom {
	padding: 2rem 0 8rem;
	color: #fff;
	font-size: 1.5rem;
}
#footer .bottom .center {
	grid-template-columns: unset;
	grid-template-rows: unset;
	grid-template-areas: unset;
	display: flex;
	flex-flow: column;
	justify-content: center;
	text-align: center;
}

#footer .copy {
	padding: 1rem;
}

#social.logolist li a {
	filter: grayscale(100%);
}



main a {
	color: inherit;
}


section h2 {
	font-family: 'PT Sans Narrow', sans-serif;
	text-transform: uppercase;
}

section h3 {
	font-family: 'PT Sans Narrow', sans-serif;
	text-transform: uppercase;
}



.news .article + .article {
	margin-block-start: var(--space-l);
}