/*! SBD Motion 0.2.63 | Storybuilt Design
 * Every rule here waits for a class the script adds, so without the script the page is plain Divi.
 */

/* ---------- 1. page colour shift ---------- */
html.sbd-fx-shift body {
	background-color: var(--sbd-fx-page, #fff) !important;
	color: var(--sbd-fx-ink, inherit);
	transition: background-color .7s ease, color .7s ease;
}
/* Divi paints these white; let the page colour through. */
html.sbd-fx-shift body #page-container,
html.sbd-fx-shift body #et-boc,
html.sbd-fx-shift body #main-content,
html.sbd-fx-shift body #main-content .container,
html.sbd-fx-shift body .et-l--post,
html.sbd-fx-shift body .et_builder_inner_content {
	background-color: transparent !important;
}
/* Anything that should follow the ink (the header later): give it the class sbd-fx-ink. */
html.sbd-fx-shift .sbd-fx-ink,
html.sbd-fx-shift .sbd-fx-ink a {
	color: var(--sbd-fx-ink) !important;
	transition: color .7s ease;
}

/* ---------- 2. expanding panels ---------- */
html body .sbd-fx-expand > .sbd-fx-panel {
	cursor: pointer;
}
html body .sbd-fx-expand > .sbd-fx-panel.is-open {
	cursor: auto;
}
/* Side by side: equal panels, the open one wider. */
html body .et_pb_row.sbd-fx-side {
	display: flex !important;
	flex-wrap: nowrap !important;
}
html body .et_pb_row.sbd-fx-side > .sbd-fx-panel {
	flex: 1 1 0% !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	transition: flex-grow .6s cubic-bezier(.7, 0, .2, 1);
}
html body .et_pb_row.sbd-fx-side > .sbd-fx-panel.is-open {
	flex-grow: 2.6 !important;
}
/* What only an open panel shows.
   Side by side: the content keeps its space and only fades, so the row never changes height
   (the script also locks every panel to the tallest height any state needs). */
html body .sbd-fx-side > .sbd-fx-panel .sbd-fx-more {
	max-height: none !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
html body .sbd-fx-side > .sbd-fx-panel.is-open .sbd-fx-more {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease .15s, visibility 0s;
}
/* Stacked (phones): every panel starts closed; a tap folds the content open below. */
html body .sbd-fx-expand:not(.sbd-fx-side) > .sbd-fx-panel .sbd-fx-more {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transition: max-height .5s ease, opacity .3s ease, visibility 0s linear .5s;
}
html body .sbd-fx-expand:not(.sbd-fx-side) > .sbd-fx-panel.is-open .sbd-fx-more {
	opacity: 1;
	visibility: visible;
	transition: max-height .5s ease, opacity .4s ease .1s, visibility 0s;
}
/* While the script measures (load, width change) nothing animates. */
html body .sbd-fx-expand.sbd-fx-measuring > .sbd-fx-panel,
html body .sbd-fx-expand.sbd-fx-measuring > .sbd-fx-panel .sbd-fx-more {
	transition: none !important;
}
html body .sbd-fx-panel:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

/* ---------- 3. edge drawer ---------- */
.sbd-fx-drawer-left {
	display: none !important;
}
.sbd-fx-drawer-tab {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9990;
	box-sizing: border-box;
	width: 53px;
	min-height: 171px;
	height: var(--sbd-fx-drawer-h, auto);
	max-height: calc(100vh - 32px);
	margin: 0;
	padding: 16px 0 18px;
	border: 0;
	border-radius: 0;
	background: var(--sbd-fx-drawer-bg);
	color: var(--sbd-fx-drawer-ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .3);
	transition: opacity .3s ease, transform .3s ease;
}
.sbd-fx-drawer-tab:focus-visible {
	outline: 2px solid var(--sbd-fx-drawer-ink);
	outline-offset: -6px;
}
.sbd-fx-drawer-mark {
	font-weight: 300;
	font-size: 26px;
	line-height: 1;
	letter-spacing: 0;
}
.sbd-fx-drawer-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}
.sbd-fx-drawer-tab.is-open {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) translateX(12px);
}
.sbd-fx-drawer {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9991;
	box-sizing: border-box;
	width: min(380px, calc(100vw - 24px));
	max-height: calc(100vh - 32px);
	overflow: auto;
	visibility: hidden;
	clip-path: inset(0 0 0 100%);
	transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .55s;
}
.sbd-fx-drawer.is-open {
	visibility: visible;
	clip-path: inset(0 0 0 0);
	transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s;
}
html body .sbd-fx-drawer > .sbd-fx-drawer-section {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
html body .sbd-fx-drawer .sbd-fx-drawer-block {
	position: relative !important;
	z-index: 1 !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	flex: none !important;
}
.sbd-fx-drawer-close {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 3;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sbd-fx-drawer-ink);
	font-family: inherit;
	font-weight: 300;
	font-size: 32px;
	line-height: 44px;
	cursor: pointer;
}
.sbd-fx-drawer-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}
@media (max-width: 599px) {
	.sbd-fx-drawer-tab {
		width: 44px;
		min-height: 150px;
	}
}

/* ---------- 4. header ---------- */
/* Fixed to the top of the window, over the page; below the admin bar when signed in. */
html body .sbd-fx-header-host {
	position: fixed !important;
	top: var(--sbd-fx-header-top, 0px) !important;
	left: 0;
	right: 0;
	z-index: 9980;
}
html body .et_pb_section.sbd-fx-header {
	--sbd-fx-hd-pad-y: 14px;
	--sbd-fx-hd-pad-x: 18px;
	--sbd-fx-hd-logo: 40px;
	padding: var(--sbd-fx-hd-pad-y) var(--sbd-fx-hd-pad-x) !important;
	color: var(--sbd-fx-header-ink, inherit);
	transition: padding .3s ease, background-color .3s ease, box-shadow .3s ease;
}
/* "solid": white at the top (the scrolled rule below then makes it translucent). */
html body .et_pb_section.sbd-fx-header.is-solid {
	--sbd-fx-header-bg: #fff;
}
html body .et_pb_section.sbd-fx-header.is-scrolled {
	--sbd-fx-hd-pad-y: 8px;
	--sbd-fx-hd-logo: 28px;
	/* the section's Divi background colour, read by the script; none set = 82% white */
	--sbd-fx-header-bg: var(--sbd-fx-header-glass, rgba(255, 255, 255, .82));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 20px -16px rgba(0, 0, 0, .5);
}
html body .et_pb_section.sbd-fx-header.is-scrolled.is-dark {
	--sbd-fx-header-bg: rgba(0, 0, 0, .25);
}
/* From 900px the header has a set height: 90px, 64px once scrolled; logo 70px, 50px once
   scrolled; 48px side margin (Michael, 19 October). */
@media (min-width: 900px) {
	html body .et_pb_section.sbd-fx-header {
		--sbd-fx-hd-pad-y: 0px;
		--sbd-fx-hd-pad-x: 48px;
		--sbd-fx-hd-logo: 70px;
		--sbd-fx-hd-height: 90px;
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		min-height: var(--sbd-fx-hd-height) !important;
		transition: min-height .3s ease, padding .3s ease, background-color .3s ease, box-shadow .3s ease;
	}
	html body .et_pb_section.sbd-fx-header.is-scrolled {
		--sbd-fx-hd-pad-y: 0px;
		--sbd-fx-hd-logo: 50px;
		--sbd-fx-hd-height: 64px;
	}
}
/* One line at every width: menu left, logo centred, search right. */
html body .sbd-fx-header .et_pb_row {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
html body .sbd-fx-header .et_pb_row > .et_pb_column {
	flex: 1 1 0% !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}
html body .sbd-fx-header .et_pb_row > .et_pb_column:nth-child(1) { justify-content: flex-start !important; }
html body .sbd-fx-header .et_pb_row > .et_pb_column:nth-child(2) { justify-content: center !important; }
html body .sbd-fx-header .et_pb_row > .et_pb_column:nth-child(3) { justify-content: flex-end !important; }
html body .sbd-fx-header .et_pb_row > .et_pb_column:nth-child(2) {
	flex: 0 0 auto !important;
}
html body .sbd-fx-header .et_pb_module {
	margin: 0 !important;
}
/* Text follows the section underneath ("auto" only; "solid" keeps Divi's colours). */
html body .sbd-fx-header:not(.is-solid) :is(h1, h2, h3, h4, h5, h6, p, a, span, li, .et_pb_text_inner) {
	color: var(--sbd-fx-header-ink, inherit) !important;
	transition: color .3s ease;
}
/* The logo shrinks once scrolled, and turns white over a dark ground. */
html body .sbd-fx-header .et_pb_image img {
	display: block;
	height: var(--sbd-fx-hd-logo) !important;
	width: auto !important;
	max-width: none !important;
	transition: height .3s ease, filter .7s ease;
}
html body .sbd-fx-header.is-dark .et_pb_image img {
	filter: brightness(0) invert(1);
}
html body .sbd-fx-header .et_pb_image,
html body .sbd-fx-header .et_pb_image_wrap {
	width: auto !important;
	max-width: none !important;
}
/* Menu and search marks. The label shows from 900px; on a phone only the mark. */
html body .sbd-fx-header :is(.sbd-fx-hd-menu, .sbd-fx-hd-search) {
	display: flex !important;
	flex-direction: row !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 14px;
	min-height: 44px;
	width: auto !important;
	max-width: none !important;
	cursor: pointer;
}
html body .sbd-fx-header:not(.is-solid) :is(.sbd-fx-hd-menu, .sbd-fx-hd-search) {
	color: var(--sbd-fx-header-ink, inherit);
}
/* In "solid" the marks take the label's own Divi colour. */
html body .sbd-fx-header.is-solid :is(.sbd-fx-hd-menu, .sbd-fx-hd-search) {
	color: var(--sbd-fx-hd-mark, inherit);
}
html body .sbd-fx-header .sbd-fx-hd-search {
	flex-direction: row-reverse !important;
}
html body .sbd-fx-header :is(.sbd-fx-hd-menu, .sbd-fx-hd-search) .et_pb_text_inner {
	flex: 0 0 auto;
	width: auto !important;
}
html body .sbd-fx-header :is(.sbd-fx-hd-menu, .sbd-fx-hd-search) .et_pb_text_inner,
html body .sbd-fx-header :is(.sbd-fx-hd-menu, .sbd-fx-hd-search) .et_pb_text_inner * {
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	padding: 0 !important;
}
@media (max-width: 899px) {
	html body .sbd-fx-header :is(.sbd-fx-hd-menu, .sbd-fx-hd-search) .et_pb_text_inner {
		position: absolute !important;
		width: 1px !important;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}
/* The menu mark: two lines that turn into an X while the menu is open. */
html body .sbd-fx-header .sbd-fx-hd-menu {
	position: relative !important;
	padding-left: 44px !important;
}
html body .sbd-fx-header .sbd-fx-hd-menu::before,
html body .sbd-fx-header .sbd-fx-hd-menu::after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 30px;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	transition: transform .4s cubic-bezier(.7, 0, .2, 1);
}
html body .sbd-fx-header .sbd-fx-hd-menu::before { transform: translateY(-4px); }
html body .sbd-fx-header .sbd-fx-hd-menu::after { transform: translateY(4px); }
html body .sbd-fx-header .sbd-fx-hd-menu.is-open::before { transform: rotate(45deg); }
html body .sbd-fx-header .sbd-fx-hd-menu.is-open::after { transform: rotate(-45deg); }
html body .sbd-fx-header .sbd-fx-hd-menu .et_pb_text_inner {
	transition: opacity .15s ease;
}
html body .sbd-fx-header .sbd-fx-hd-menu.is-swapping .et_pb_text_inner {
	opacity: 0;
}
@media (max-width: 899px) {
	html body .sbd-fx-header .sbd-fx-hd-menu {
		padding-left: 30px !important;
		min-width: 44px;
	}
}
html body .sbd-fx-header .sbd-fx-hd-search::before {
	content: '';
	flex: none;
	width: 26px;
	height: 26px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
}
html body .sbd-fx-header .sbd-fx-hd-search::before {
	transition: background-color .3s ease;
}
html body .sbd-fx-header .sbd-fx-hd-search.is-open::before {
	background-color: currentColor;
}
/* 0.2.49: on phones the search mark is a magnifying glass (a circle and a handle), because a circle
   alone was not understood once the word "Søg" is hidden. */
@media (max-width: 899px) {
	html body .sbd-fx-header .sbd-fx-hd-search {
		position: relative !important;
	}
	html body .sbd-fx-header .sbd-fx-hd-search::before {
		width: 18px;
		height: 18px;
		border-width: 2px;
		margin: 0 7px 7px 0;
	}
	html body .sbd-fx-header .sbd-fx-hd-search::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		width: 9px;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
		transform: translate(0, 6px) rotate(45deg);
		transform-origin: center;
	}
}
html body .sbd-fx-header :is(.sbd-fx-hd-menu, .sbd-fx-hd-search):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ---------- 5. full-screen menu ---------- */
/* While it is open the page holds still and the header lies over the menu: transparent, in the
   menu's colours, the logo in colour. */
html.sbd-fx-overlay-open,
html.sbd-fx-overlay-open body {
	overflow: hidden !important;
}
html.sbd-fx-overlay-open body {
	padding-right: var(--sbd-fx-scrollbar, 0px);
}
html.sbd-fx-overlay-open .sbd-fx-header-host {
	right: var(--sbd-fx-scrollbar, 0px);
}
html.sbd-fx-overlay-open .sbd-fx-drawer-tab {
	visibility: hidden;
}
html body .et_pb_section.sbd-fx-header:is(.is-menu-open, .is-search-open):is(.is-scrolled, .is-dark, .is-solid, .sbd-fx-header) {
	--sbd-fx-header-bg: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}
html body .sbd-fx-header:is(.is-menu-open, .is-search-open) :is(h1, h2, h3, h4, h5, h6, p, a, span, li, .et_pb_text_inner),
html body .sbd-fx-header:is(.is-menu-open, .is-search-open) :is(.sbd-fx-hd-menu, .sbd-fx-hd-search) {
	color: var(--sbd-fx-menu-ink, #222) !important;
}
html body .sbd-fx-header:is(.is-menu-open, .is-search-open) .et_pb_image img {
	filter: none;
}

.sbd-fx-menu[hidden] {
	display: none !important;
}
.sbd-fx-menu {
	position: fixed;
	top: var(--sbd-fx-header-top-root, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9970;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--sbd-fx-menu-bg, #fff);
	color: var(--sbd-fx-menu-ink, #222);
	/* It fades in and out in place (0.2.54 dropped it down and slid it up; taken back in 0.2.57). */
	opacity: 0;
	transition: opacity .35s ease;
}
html.sbd-fx-menu-open .sbd-fx-menu {
	opacity: 1;
}
html.sbd-fx-menu-instant .sbd-fx-menu,
html.sbd-fx-menu-instant .sbd-fx-menu * {
	transition: none !important;
}
.sbd-fx-menu:focus {
	outline: none;
}
.sbd-fx-menu-in {
	box-sizing: border-box;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	padding: 92px 20px 28px;
}
.sbd-fx-menu-nav {
	position: relative;
	flex: 1 0 auto;
}
html body .sbd-fx-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
html body .sbd-fx-menu li {
	margin: 0;
	padding: 0;
}
html body .sbd-fx-menu li::before {
	content: none;
}
html body .sbd-fx-menu p {
	margin: 0;
	padding: 0;
}
html body .sbd-fx-menu a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}
html body .sbd-fx-menu a:hover {
	color: var(--sbd-fx-menu-accent, inherit);
}
/* 0.2.54: a link to another page keeps the menu open until that page appears; the chosen link
   shows it was taken. */
html body .sbd-fx-menu a.is-going {
	color: var(--sbd-fx-menu-accent, inherit);
}
html body .sbd-fx-menu :is(a, button):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
/* The big items rise in one after another. */
.sbd-fx-menu-list > li {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
html.sbd-fx-menu-open .sbd-fx-menu-list > li {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 28ms + 60ms);
}
html body .sbd-fx-menu .sbd-fx-menu-top {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	cursor: pointer;
	font-family: inherit;
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: inherit;
	padding: 6px 0;
	transition: color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
html body .sbd-fx-menu .sbd-fx-menu-top:hover,
html body .sbd-fx-menu .is-open > .sbd-fx-menu-top {
	color: var(--sbd-fx-menu-accent, inherit);
}
html body .sbd-fx-menu .sbd-fx-menu-top:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}
.sbd-fx-menu-subtitle {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--sbd-fx-menu-accent, inherit);
	margin-bottom: 18px !important;
}
.sbd-fx-menu-gh {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .11em;
	text-transform: uppercase;
	opacity: .6;
	margin-bottom: 8px !important;
}
html body .sbd-fx-menu .sbd-fx-menu-group a {
	display: block;
	padding: 3px 0;
	font-size: 17px;
	line-height: 1.4;
}
html body .sbd-fx-menu .sbd-fx-menu-gh a {
	display: inline;
	padding: 0;
	font-size: inherit;
}
.sbd-fx-menu-groups {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}
/* 0.2.50: "Gå til …" heads the item's pages, in the place of the item's repeated name. */
html body .sbd-fx-menu .sbd-fx-menu-go {
	display: inline-block;
	margin: 0 0 22px;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.3;
	color: var(--sbd-fx-menu-accent, inherit);
	border-bottom: 1.5px solid currentColor;
}
/* 0.2.51: a column heading with a page of its own is a link, marked with a small arrow
   It keeps the heading's look; pointing at it brings it to full strength. */
html body .sbd-fx-menu .sbd-fx-menu-gh.has-link {
	transition: opacity .2s ease;
}
html body .sbd-fx-menu .sbd-fx-menu-gh.has-link:hover,
html body .sbd-fx-menu .sbd-fx-menu-gh.has-link:focus-within {
	opacity: 1;
}
html body .sbd-fx-menu .sbd-fx-menu-gh .sbd-fx-menu-ghl {
	text-decoration: none;
}
html body .sbd-fx-menu .sbd-fx-menu-arrow {
	display: inline-block;
	margin-left: .45em;
	font-size: 1.15em;
	line-height: 1;
	letter-spacing: 0;
	transition: transform .2s ease;
}
html body .sbd-fx-menu .sbd-fx-menu-ghl:hover .sbd-fx-menu-arrow,
html body .sbd-fx-menu .sbd-fx-menu-ghl:focus-visible .sbd-fx-menu-arrow {
	transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
	html body .sbd-fx-menu .sbd-fx-menu-arrow {
		transition: none;
	}
}
html body .sbd-fx-menu .sbd-fx-menu-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 32px;
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	font-size: 15px;
	line-height: 1.6;
}

/* Narrow: an item's pages fold open below it. */
@media (max-width: 899px) {
	.sbd-fx-menu-sub {
		overflow: hidden;
		max-height: 0;
		visibility: hidden;
		transition: max-height .4s ease, visibility 0s linear .4s;
	}
	.is-open > .sbd-fx-menu-sub {
		visibility: visible;
		transition: max-height .4s ease, visibility 0s;
	}
	.sbd-fx-menu-subtitle {
		display: none;
	}
	.sbd-fx-menu-sub > .sbd-fx-menu-groups {
		padding: 10px 0 22px;
	}
	html body .sbd-fx-menu .sbd-fx-menu-go {
		margin: 10px 0 0;
	}
}
@media (min-width: 600px) and (max-width: 899px) {
	.sbd-fx-menu-in {
		padding-left: 48px;
		padding-right: 48px;
	}
	html body .sbd-fx-menu .sbd-fx-menu-top {
		font-size: 34px;
	}
	.sbd-fx-menu-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Side by side (from 900px): the big items left, the chosen item's pages right. */
@media (min-width: 900px) {
	.sbd-fx-menu-in {
		padding: 128px 48px 36px max(48px, 8vw);
	}
	.sbd-fx-menu-nav {
		display: flex;
		align-items: center;
		min-height: 440px;
	}
	/* 0.2.51: the line beside an item's pages stands at the middle of the window (Michael). The
	   nav starts max(48px, 8vw) from the left edge, so the middle is 50vw less that. */
	.sbd-fx-menu-list {
		width: calc(50vw - max(48px, 8vw) - 32px);
	}
	html body .sbd-fx-menu .sbd-fx-menu-top {
		width: auto;
		display: inline-block;
		font-size: clamp(26px, min(3.6vw, 4.9vh), 60px);
		line-height: 1.08;
		padding: .05em 0;
	}
	.sbd-fx-menu-sub {
		position: absolute;
		top: 50%;
		left: calc(50vw - max(48px, 8vw));
		right: 0;
		box-sizing: border-box;
		max-height: 100%;
		overflow-y: auto;
		padding-left: 48px;
		border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
		transform: translateY(-50%);
	}
	.sbd-fx-menu-sub {
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility 0s linear .25s;
	}
	.is-open > .sbd-fx-menu-sub {
		opacity: 1;
		visibility: visible;
		transition: opacity .3s ease, visibility 0s;
	}
	.sbd-fx-menu-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 32px;
	}
}

/* ---------- 6. full-screen search ---------- */
/* A big search line across the middle of the screen, results under it, suggested searches at
   the bottom. Same colours as the menu. */
.sbd-fx-search[hidden] {
	display: none !important;
}
.sbd-fx-search {
	position: fixed;
	top: var(--sbd-fx-header-top-root, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9970;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--sbd-fx-menu-bg, #fff);
	color: var(--sbd-fx-menu-ink, #222);
	opacity: 0;
	transition: opacity .35s ease;
}
.sbd-fx-search:focus {
	outline: none;
}
html.sbd-fx-search-open .sbd-fx-search {
	opacity: 1;
}
html body .sbd-fx-search .sbd-fx-search-in {
	box-sizing: border-box;
	min-height: 100%;
	margin: 0;
	padding: 112px 20px 28px;
	display: grid;
	grid-template-rows: 8px auto auto minmax(32px, 1fr) auto;
}
.sbd-fx-search-row {
	grid-row: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding-bottom: 14px;
	border-bottom: 1px solid currentColor;
}
html body .sbd-fx-search input.sbd-fx-search-field {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	color: inherit;
	font-family: inherit;
	font-weight: 300;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: -.01em;
}
html body .sbd-fx-search input.sbd-fx-search-field::placeholder {
	color: currentColor;
	opacity: .35;
}
html body .sbd-fx-search input.sbd-fx-search-field::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
html body .sbd-fx-search .sbd-fx-search-question {
	display: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	font-size: clamp(18px, 1.8vw, 26px);
	line-height: 1.2;
	opacity: .75;
}
.sbd-fx-search-results {
	grid-row: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 40px;
	align-content: start;
	padding-top: 18px;
}
html body .sbd-fx-search a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}
html body .sbd-fx-search a:hover {
	color: var(--sbd-fx-menu-accent, inherit);
}
html body .sbd-fx-search :is(a, button):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
/* The line under the field is its focus mark: it thickens. */
html body .sbd-fx-search input.sbd-fx-search-field:focus,
html body .sbd-fx-search input.sbd-fx-search-field:focus-visible {
	outline: none !important;
}
.sbd-fx-search-row:focus-within {
	box-shadow: 0 1px 0 0 currentColor;
}
html body .sbd-fx-search a.sbd-fx-search-hit {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	font-size: 17px;
	line-height: 1.35;
}
html body .sbd-fx-search a.sbd-fx-search-hit small {
	flex: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .6;
}
html body .sbd-fx-search .sbd-fx-search-note {
	grid-column: 1 / -1;
	margin: 10px 0 0;
	padding: 0;
	font-size: 17px;
	opacity: .6;
}
html body .sbd-fx-search a.sbd-fx-search-all {
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: 18px;
	font-size: 17px;
	font-weight: 600;
	border-bottom: 1.5px solid currentColor;
}
.sbd-fx-search-suggest {
	grid-row: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 28px;
}
html body .sbd-fx-search .sbd-fx-search-suggest-title {
	flex: 0 0 100%;
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--sbd-fx-menu-accent, inherit);
}
html body .sbd-fx-search .sbd-fx-search-suggest ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
html body .sbd-fx-search .sbd-fx-search-suggest li {
	margin: 0;
	padding: 0;
}
html body .sbd-fx-search .sbd-fx-search-suggest li::before {
	content: none;
}
html body .sbd-fx-search button.sbd-fx-search-sug {
	all: unset;
	cursor: pointer;
	font-family: inherit;
	font-size: 17px;
	line-height: 1.4;
	opacity: .7;
	transition: color .15s ease, opacity .15s ease;
}
html body .sbd-fx-search button.sbd-fx-search-sug:hover {
	opacity: 1;
	color: var(--sbd-fx-menu-accent, inherit);
}
html body .sbd-fx-search button.sbd-fx-search-sug:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
@media (min-width: 600px) {
	html body .sbd-fx-search .sbd-fx-search-in {
		padding-left: 48px;
		padding-right: 48px;
	}
	html body .sbd-fx-search input.sbd-fx-search-field {
		font-size: 44px;
	}
	.sbd-fx-search-results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* From 900px: the question beside the line, three columns of results, side margins as the menu. */
@media (min-width: 900px) {
	html body .sbd-fx-search .sbd-fx-search-in {
		padding: 128px max(48px, 8vw) 40px;
		grid-template-rows: minmax(24px, 1fr) auto auto minmax(32px, 1fr) auto;
	}
	html body .sbd-fx-search input.sbd-fx-search-field {
		font-size: clamp(40px, 4.6vw, 72px);
	}
	html body .sbd-fx-search .sbd-fx-search-question {
		display: block;
	}
	.sbd-fx-search-results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-height: 40vh;
		overflow-y: auto;
	}
	.sbd-fx-search-suggest {
		flex-wrap: nowrap;
	}
	html body .sbd-fx-search .sbd-fx-search-suggest-title {
		flex: none;
		font-size: 15px;
		letter-spacing: .08em;
	}
}

/* ---------- 7. post feed filter ---------- */
/* The links of a data-fx-filter module become pills on one wrapping line; the chosen one is
   filled with the module's own text colour (--sbd-fx-filter-fill) and its text takes
   --sbd-fx-filter-on-ink (the attribute's colour, else the section's ground). */
.sbd-fx-filter p,
.sbd-fx-share p {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--sbd-fx-filter-justify, flex-start);
	gap: 8px;
	margin: 0;
	padding: 0;
}
.sbd-fx-filter a,
.sbd-fx-share a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	color: inherit !important;
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}
.sbd-fx-filter a[hidden] { display: none; }
.sbd-fx-filter a:hover,
.sbd-fx-filter a:focus-visible,
.sbd-fx-share a:hover,
.sbd-fx-share a:focus-visible {
	background-color: rgba(255, 255, 255, .16);
}
.sbd-fx-filter a.is-active,
.sbd-fx-share a.is-active {
	background-color: var(--sbd-fx-filter-fill, #fff);
	border-color: var(--sbd-fx-filter-fill, #fff);
	color: var(--sbd-fx-filter-on-ink, #000) !important;
}
.sbd-fx-filter a:focus-visible,
.sbd-fx-share a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
@media (pointer: coarse) {
	.sbd-fx-filter a,
	.sbd-fx-share a { min-height: 44px; }
}
/* Share links as icons (data-fx-share="icons"): 30 px square tiles in a see-through dark tint with
   a white icon, after the Extra theme's share buttons (Michael, 20 October). 44 px on touch. */
.sbd-fx-share.sbd-fx-share-icons p { gap: 6px; align-items: center; }
.sbd-fx-share.sbd-fx-share-icons a {
	justify-content: center;
	width: 30px;
	min-height: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, .2);
}
.sbd-fx-share.sbd-fx-share-icons a:hover,
.sbd-fx-share.sbd-fx-share-icons a:focus-visible { background-color: rgba(0, 0, 0, .38); }
.sbd-fx-share.sbd-fx-share-icons a.is-active { background-color: var(--sbd-fx-filter-fill, #fff); }
.sbd-fx-share.sbd-fx-share-icons svg { width: 16px; height: 16px; display: block; }
.sbd-fx-share-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
@media (pointer: coarse) {
	.sbd-fx-share.sbd-fx-share-icons a { width: 44px; height: 44px; min-height: 44px; }
	.sbd-fx-share.sbd-fx-share-icons svg { width: 18px; height: 18px; }
}
/* Read by screen readers only: "Viser Musik". */
.sbd-fx-filter-status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	margin: 0 !important;
	padding: 0 !important;
}
.sbd-fx-feed.is-loading { opacity: .55; transition: opacity .2s ease; }
.sbd-fx-feed.is-arriving > * { animation: sbd-fx-feed-in .35s ease both; }
@keyframes sbd-fx-feed-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sbd-fx-feed .sbd-fx-feed-none {
	grid-column: 1 / -1;
	margin: 0;
	padding: 24px 0;
	color: inherit;
}

/* ---------- 10. stage ---------- */
/* The cards: a mark in the corner (Divi's primary colour), text at the foot of the card.
   Their look (ground, padding, height) is set in Divi on each column. */
html body .et_pb_section .sbd-fx-card {
	position: relative;
	justify-content: flex-end !important;
	transform-origin: 50% 60%;
}
html body .et_pb_section .sbd-fx-card::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 16px;
	width: 11px;
	height: 11px;
	background: var(--sbd-fx-card-mark, var(--gcid-primary-color, currentColor));
}
/* The drawing in the title row (an inline <svg>, e.g. a logo mark in a Code module): centred below
   the title in the title's colour - what shows in the still version; while the stage runs the title
   row is hidden and the drawing is cut out of the section's colour instead. */
html body .et_pb_section.sbd-fx-stage .sbd-fx-stage-title svg.sbd-fx-stage-shape {
	display: block;
	width: min(40vw, 320px);
	height: auto;
	margin: 24px auto;
	fill: currentColor;
}
/* The module holding the drawing has no box of its own (a Code module brings a grey one). */
html body .et_pb_section.sbd-fx-stage .sbd-fx-stage-shape-box {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
/* Phones while it runs: the cards as notes, placed by the script over the photo. */
html body .et_pb_section.sbd-fx-stage-on.sbd-fx-stage-scatter > .sbd-fx-stage-row .sbd-fx-card {
	position: absolute !important;
	margin: 0 !important;
	max-width: none !important;
	flex: none !important;
}
/* With a drawing in the title row: that drawing, 22 px tall, instead of the square. */
html body .et_pb_section .sbd-fx-card.sbd-fx-card-has-mark::before {
	content: none;
}
html body .et_pb_section .sbd-fx-card > .sbd-fx-card-mark {
	position: absolute;
	top: 14px;
	left: 14px;
	width: auto;
	height: 22px;
	margin: 0;
	fill: var(--sbd-fx-card-mark, var(--gcid-primary-color, currentColor));
	pointer-events: none;
}
/* Still version (reduced motion, a small window, the cards too tall to hold still): the title
   above the photo, the cards resting at their angles. */
html body .et_pb_section.sbd-fx-stage-still .sbd-fx-card {
	transform: translateY(var(--sbd-fx-drop, 0%)) rotate(var(--sbd-fx-tilt, 0deg));
}
html body .et_pb_section.sbd-fx-stage-still > .sbd-fx-stage-row {
	flex-wrap: wrap !important;
	justify-content: center !important;
}

/* Pinned: the section is the track; the card row fills the window and holds still in it. */
html body .et_pb_section.sbd-fx-stage-on {
	height: var(--sbd-fx-stage-track) !important;
	min-height: 0 !important;
	max-height: none !important;
	padding: 0 !important;
	overflow: visible !important;
	display: block !important;
}
/* The title row leaves the screen; its heading stays in the page for screen readers. */
html body .et_pb_section.sbd-fx-stage-on > .sbd-fx-stage-title {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
html body .et_pb_section.sbd-fx-stage-on > .sbd-fx-stage-row {
	position: sticky !important;
	top: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	height: var(--sbd-fx-stage-h, 100vh) !important;
	margin: 0 !important;
	/* room for the fixed header at the top */
	padding: 112px clamp(16px, 4vw, 64px) 40px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-content: center !important;
	align-items: flex-start !important;
	justify-content: center !important;
	overflow: hidden !important;
	z-index: 1;
}
@media (max-width: 899px) {
	html body .et_pb_section.sbd-fx-stage-on > .sbd-fx-stage-row {
		padding: 84px 16px 20px !important;
	}
}
html body .et_pb_section.sbd-fx-stage-on .sbd-fx-card {
	opacity: 0;
	transition: none !important;
}
html body .et_pb_section.sbd-fx-stage-measuring .sbd-fx-card {
	transform: none !important;
}
/* The title, cut out of the section's colour; it lies over the photo and the cards until the
   zoom has gone through it. */
.sbd-fx-stage-veil {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}
.sbd-fx-stage-veil svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- 11. stack ---------- */
/* The section: rows are blocks; between them sit still markers and, after the last, the hold. The
   blocks turn as they arrive, so the section clips sideways (a clip, not a scroll box, so blocks
   can still hold still in it). */
html body .et_pb_section.sbd-fx-stack {
	overflow-x: clip !important;
	overflow-y: visible !important;
	row-gap: 0 !important;
}
.sbd-fx-stack-mark,
.sbd-fx-stack-hold {
	display: block;
	height: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
}
html body .et_pb_section.sbd-fx-stack-on > .sbd-fx-stack-hold {
	height: var(--sbd-fx-stack-hold, 0px);
}
/* The title across the section in one line (its size measured by the script); the first block
   lies over its lower part. */
html body .et_pb_section.sbd-fx-stack > .sbd-fx-stack-title {
	position: relative;
	z-index: 0;
}
html body .et_pb_section.sbd-fx-stack.sbd-fx-stack-fitted > .sbd-fx-stack-title {
	margin-bottom: calc(var(--sbd-fx-stack-fs) * -0.3) !important;
}
html body .et_pb_section.sbd-fx-stack.sbd-fx-stack-fitted > .sbd-fx-stack-title :is(h1, h2, h3, h4, h5, h6) {
	font-size: var(--sbd-fx-stack-fs) !important;
	line-height: 0.8 !important;
	white-space: nowrap !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* A block: two halves side by side, all blocks one height. Their colours, padding and words are
   set in Divi on each column. */
html body .et_pb_section.sbd-fx-stack > .sbd-fx-stack-block {
	position: relative;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 0 !important;
	box-sizing: border-box !important;
	height: var(--sbd-fx-stack-h, auto) !important;
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	overflow: visible !important;
	transform-origin: 50% 100%;
}
html body .et_pb_section.sbd-fx-stack > .sbd-fx-stack-block > .et_pb_column {
	flex: 1 1 0% !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
}
html body .et_pb_section.sbd-fx-stack .sbd-fx-stack-text {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}
html body .et_pb_section.sbd-fx-stack .sbd-fx-stack-photo {
	position: relative !important;
	overflow: visible !important;
}
/* Divi gives every column its own layer at z-index 2, so the column later in the page is drawn on top:
   with the photo first (blocks 2 and 4) the words column covered the person. The photo column is
   now always above the words column, so the person stands in front of the words (0.2.36). */
html body .et_pb_section.sbd-fx-stack > .sbd-fx-stack-block > .sbd-fx-stack-photo {
	z-index: 3 !important;
}
/* The cut-out picture: standing on the block's foot, a fifth taller than the block, so it stands out
   above it; it shrinks about its own middle (the script sets the scale). Its size and how far it
   reaches below the foot can be set on the section (data-fx-stack-size / data-fx-stack-below, 0.2.28). */
html body .et_pb_section.sbd-fx-stack .sbd-fx-stack-cut {
	position: absolute !important;
	left: 50% !important;
	bottom: var(--sbd-fx-stack-cut-b, 0px) !important;
	top: auto !important;
	height: var(--sbd-fx-stack-cut-h, 120%) !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	z-index: 2;
	/* moved back by half its width in pixels, measured by the script, not by a -50% move: Safari
	   kept a percentage move worked out before the picture had loaded, which left the people off
	   centre (0.2.30) */
	transform: translate3d(var(--sbd-fx-stack-cut-x, -50%), 0, 0) scale(var(--sbd-fx-stack-s, 1));
	transform-origin: 50% 50%;
	pointer-events: none;
}
/* Its own steady drawing layer while the stack is near the screen, so Safari does not redraw it out of
   place as its block turns (0.2.29; only near the screen since 0.2.30). */
html body .et_pb_section.sbd-fx-stack-near .sbd-fx-stack-cut {
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
html body .et_pb_section.sbd-fx-stack .sbd-fx-stack-cut .et_pb_image_wrap {
	display: block !important;
	height: 100% !important;
	border-radius: 0 !important;
	overflow: visible !important;
	box-shadow: none !important;
}
html body .et_pb_section.sbd-fx-stack .sbd-fx-stack-cut img {
	display: block !important;
	height: 100% !important;
	width: auto !important;
	max-width: none !important;
	border-radius: 0 !important;
}
/* Phones: the words above, the photo below it with the picture standing up into the words. */
html body .et_pb_section.sbd-fx-stack-narrow > .sbd-fx-stack-block {
	flex-direction: column !important;
}
html body .et_pb_section.sbd-fx-stack-narrow > .sbd-fx-stack-block > .sbd-fx-stack-text {
	order: 0;
	flex: 1 1 auto !important;
	justify-content: flex-start !important;
}
html body .et_pb_section.sbd-fx-stack-narrow > .sbd-fx-stack-block > .sbd-fx-stack-photo {
	order: 1;
	flex: 0 0 var(--sbd-fx-stack-photo, 46%) !important;
}
html body .et_pb_section.sbd-fx-stack-narrow .sbd-fx-stack-cut {
	height: var(--sbd-fx-stack-cut-h, 112%) !important;
}
/* Phones with a set picture size (0.2.35): the person shrinks towards the feet, which rise to the
   block's foot as it lands. */
html body .et_pb_section.sbd-fx-stack-phone > .sbd-fx-stack-block > .sbd-fx-stack-text {
	justify-content: center !important;
}
html body .et_pb_section.sbd-fx-stack-phone .sbd-fx-stack-cut {
	transform: translate3d(var(--sbd-fx-stack-cut-x, -50%), var(--sbd-fx-stack-ty, 0px), 0) scale(var(--sbd-fx-stack-s, 1));
	transform-origin: 50% 100%;
}
/* Running: each block holds still at one line (centred under the header by the script), over the one before. */
html body .et_pb_section.sbd-fx-stack-on > .sbd-fx-stack-block {
	position: sticky !important;
	top: var(--sbd-fx-stack-top, 80px) !important;
	margin-top: var(--sbd-fx-stack-gap, 0px) !important;
	margin-bottom: 0 !important;
	will-change: transform;
}
html body .et_pb_section.sbd-fx-stack-on > .sbd-fx-stack-block.sbd-fx-stack-first {
	margin-top: 0 !important;
}
/* 0.2.62: a block fully covered by the next one is not drawn and keeps no drawing layers (it keeps its
   place, so nothing moves). Eleven drawn blocks with their photos and people ran an iPhone out of memory. */
html body .et_pb_section.sbd-fx-stack-on > .sbd-fx-stack-block.sbd-fx-stack-covered,
html body .et_pb_section.sbd-fx-stack-on > .sbd-fx-stack-block.sbd-fx-stack-covered .sbd-fx-stack-cut {
	visibility: hidden !important;
	will-change: auto !important;
}
/* Still (reduced motion, a short window, too many words for the window): one under the other, with
   room above each for its picture. */
html body .et_pb_section.sbd-fx-stack-still > .sbd-fx-stack-block {
	transform: none !important;
	margin-bottom: 0 !important;
	margin-top: var(--sbd-fx-stack-room, calc(var(--sbd-fx-stack-h, 400px) * 0.22 + 24px)) !important;
}
html body .et_pb_section.sbd-fx-stack-still > .sbd-fx-stack-block.sbd-fx-stack-first {
	margin-top: 0 !important;
}
html body .et_pb_section.sbd-fx-stack-still.sbd-fx-stack-narrow > .sbd-fx-stack-block {
	margin-top: 40px !important;
}
html body .et_pb_section.sbd-fx-stack-still.sbd-fx-stack-narrow > .sbd-fx-stack-block.sbd-fx-stack-first {
	margin-top: 0 !important;
}
/* Measuring the header's settled size for the stack: no transition caught halfway. */
html.sbd-fx-hd-settle .sbd-fx-header,
html.sbd-fx-hd-settle .sbd-fx-header *,
html.sbd-fx-hd-settle .sbd-fx-header-host {
	transition: none !important;
}
/* Measuring: the blocks at their natural size, nothing turned or held. */
html body .et_pb_section.sbd-fx-stack-measuring > .sbd-fx-stack-block {
	position: relative !important;
	transform: none !important;
	height: auto !important;
	align-items: flex-start !important;
	transition: none !important;
}

/* ---------- 12. card carousel ---------- */
html body .et_pb_section.sbd-fx-carousel-host { overflow-x: clip !important; }
/* The row becomes a stage one card high; the cards lie on top of each other in its middle and the
   script places them. Their look (ground, corners, padding, shadow) is set in Divi on each column. */
html body .et_pb_row.sbd-fx-carousel {
	position: relative !important;
	display: block !important;
	height: var(--sbd-fx-car-h, auto) !important;
	perspective: 1200px;
	perspective-origin: 50% 50%;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	overflow: visible !important;
}
html body .et_pb_row.sbd-fx-carousel > .sbd-fx-carousel-card {
	position: absolute !important;
	top: 0 !important;
	left: 50% !important;
	width: var(--sbd-fx-car-w) !important;
	max-width: none !important;
	height: var(--sbd-fx-car-h) !important;
	margin: 0 0 0 calc(var(--sbd-fx-car-w) / -2) !important;
	box-sizing: border-box !important;
	overflow: hidden;
	isolation: isolate;
	transform-origin: 50% 50%;
	will-change: transform;
	cursor: grab;
}
html body .et_pb_row.sbd-fx-carousel.is-dragging > .sbd-fx-carousel-card { cursor: grabbing; }
html body .et_pb_row.sbd-fx-carousel > .sbd-fx-carousel-card:focus-visible { outline: 3px solid var(--sbd-fx-carousel-ink, currentColor); outline-offset: 4px; }
html body .et_pb_row.sbd-fx-carousel > .sbd-fx-carousel-card:not(.is-active) { cursor: pointer; }
html body .et_pb_row.sbd-fx-carousel img { -webkit-user-drag: none; pointer-events: none; }
/* The lighter slant across the foot of each card, after the sample site's cards. */
html body .et_pb_row.sbd-fx-carousel > .sbd-fx-carousel-card::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 58%;
	background: linear-gradient(to top left, var(--sbd-fx-carousel-shine, rgba(255, 255, 255, .16)) 50%, transparent calc(50% + 1px));
	pointer-events: none;
	z-index: -1;
}
/* Measuring: the cards at their own height, nothing placed. */
html body .et_pb_row.sbd-fx-carousel.sbd-fx-carousel-measuring > .sbd-fx-carousel-card {
	height: auto !important;
	transform: none !important;
}
html body .et_pb_row.sbd-fx-carousel.sbd-fx-carousel-measuring { height: auto !important; }
/* The arrows: round, a thin ring in the section's text colour; from 768 px at the row's edges,
   level with the middle of the cards. */
.sbd-fx-carousel-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: var(--sbd-fx-carousel-ink, currentColor);
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s;
	-webkit-tap-highlight-color: transparent;
}
.sbd-fx-carousel-arrow svg { width: 18px; height: 18px; display: block; }
.sbd-fx-carousel-arrow:hover,
.sbd-fx-carousel-arrow:focus-visible {
	background-color: var(--sbd-fx-carousel-ink, currentColor);
}
.sbd-fx-carousel-arrow:hover svg,
.sbd-fx-carousel-arrow:focus-visible svg { color: var(--sbd-fx-carousel-ground, #fff); }
.sbd-fx-carousel-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
html body .et_pb_row.sbd-fx-carousel > .sbd-fx-carousel-arrow {
	position: absolute;
	top: 50%;
	margin-top: -24px;
	z-index: 200;
}
/* Just outside the side cards (they show at about 0.85 of a card width from the middle), never closer
   than 20 px to the window's edge, so a fixed edge tab (Besøg skolen) does not cover them. */
html body .et_pb_row.sbd-fx-carousel > .sbd-fx-carousel-prev { left: max(20px, calc(50% - var(--sbd-fx-car-w) * .85 - 80px)); }
html body .et_pb_row.sbd-fx-carousel > .sbd-fx-carousel-next { right: max(20px, calc(50% - var(--sbd-fx-car-w) * .85 - 80px)); }
/* Pictures take the card's width even before a lazy picture has loaded, so the measured height holds. */
html body .et_pb_row.sbd-fx-carousel > .sbd-fx-carousel-card .et_pb_image_wrap,
html body .et_pb_row.sbd-fx-carousel > .sbd-fx-carousel-card .et_pb_image_wrap img { width: 100%; }
/* Dots under the cards (and on phones the arrows under the dots). */
.sbd-fx-carousel-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
	color: var(--sbd-fx-carousel-ink, currentColor);
}
.sbd-fx-carousel-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; }
.sbd-fx-carousel-dot {
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
}
.sbd-fx-carousel-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: .3;
	transition: opacity .3s, transform .3s;
}
.sbd-fx-carousel-dot.is-active::before { opacity: 1; transform: scale(1.3); }
.sbd-fx-carousel-dot:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 50%; }
.sbd-fx-carousel-arrows { display: flex; gap: 16px; }
.sbd-fx-carousel-arrows:empty { display: none; }
@media (pointer: coarse) {
	.sbd-fx-carousel-dot { width: 26px; height: 26px; }
}
html.sbd-fx-still .sbd-fx-carousel-arrow,
html.sbd-fx-still .sbd-fx-carousel-dot::before { transition: none !important; }

/* ---------- reduced motion: the same page, nothing moves ---------- */
html.sbd-fx-still body,
html.sbd-fx-still .sbd-fx-ink,
html.sbd-fx-still .sbd-fx-ink a,
html.sbd-fx-still .sbd-fx-panel,
html.sbd-fx-still .sbd-fx-panel .sbd-fx-more,
html.sbd-fx-still .sbd-fx-drawer,
html.sbd-fx-still .sbd-fx-drawer-tab,
html.sbd-fx-still .sbd-fx-header,
html.sbd-fx-still .sbd-fx-header *,
html.sbd-fx-still .sbd-fx-header .et_pb_image img,
html.sbd-fx-still .sbd-fx-header .sbd-fx-hd-menu::before,
html.sbd-fx-still .sbd-fx-header .sbd-fx-hd-menu::after,
html.sbd-fx-still .sbd-fx-menu,
html.sbd-fx-still .sbd-fx-menu *,
html.sbd-fx-still .sbd-fx-search,
html.sbd-fx-still .sbd-fx-search *,
html.sbd-fx-still .sbd-fx-header .sbd-fx-hd-search::before,
html.sbd-fx-still .sbd-fx-filter a,
html.sbd-fx-still .sbd-fx-share a,
html.sbd-fx-still .sbd-fx-feed,
html.sbd-fx-still .sbd-fx-feed > * {
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
	html.sbd-fx-shift body,
	.sbd-fx-panel,
	.sbd-fx-panel .sbd-fx-more,
	.sbd-fx-drawer,
	.sbd-fx-drawer-tab,
	.sbd-fx-header,
	.sbd-fx-header *,
	.sbd-fx-header .et_pb_image img,
	.sbd-fx-header .sbd-fx-hd-menu::before,
	.sbd-fx-header .sbd-fx-hd-menu::after,
	.sbd-fx-menu,
	.sbd-fx-menu *,
	.sbd-fx-search,
	.sbd-fx-search *,
	.sbd-fx-header .sbd-fx-hd-search::before,
	.sbd-fx-filter a,
	.sbd-fx-share a,
	.sbd-fx-feed {
		transition: none !important;
	}
	.sbd-fx-feed.is-arriving > * { animation: none !important; }
}

/* 13. Slide in (0.2.37): the section clips sideways so an element waiting off to the side never
   makes the page slide; the element itself is moved by the script. */
.sbd-fx-slide-host { overflow-x: clip !important; }
.sbd-fx-slide { will-change: transform; }
html.sbd-fx-still .sbd-fx-slide { transform: none !important; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .sbd-fx-slide { transform: none !important; } }

/* ---------- loading screen (0.2.39, 0.2.40) ---------- */
/* data-fx-loader on a section: a cover over the whole window (header, admin bar, edge tab
   included) from the first paint, on every page load. 100 px taller than the window and lifted by
   as much, as on the sample, so the turn never shows an edge.
   0.2.40 (Michael): the photo first in its own colours; at 0.8 s the section's own Divi background
   colour (set with its opacity in Divi) fades in over the photo as an overlay (::after inherits
   it), and the words fade in with it (no pulse since 0.2.43). The script sends it away from 4.5 s, once the
   page has loaded; the stylesheet sends it by itself at 5.5 s (sbd-fx-loader-go is a second copy of
   the keyframes, so the exit starts fresh). */
[data-fx-loader] {
	position: fixed !important;
	top: -100px !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: none !important;
	height: calc(100vh + 100px) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding-top: 100px !important;
	padding-bottom: 0 !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	overflow: hidden !important;
	z-index: 2147483000 !important;
	transform-origin: 50% 50%;
	animation: sbd-fx-loader-away 1.2s ease-in 5.5s forwards;
	will-change: transform;
}
/* The overlay is ::after (0.2.42; ::before until 0.2.41): the section's own Divi colour laid over
   the photo. It paints after ::before, so it also lies over the blurred copy below. */
[data-fx-loader]::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: inherit;
	pointer-events: none;
	animation: sbd-fx-loader-in 1.2s ease .8s backwards;
}
[data-fx-loader] > .et_pb_row { position: relative; z-index: 1; }
/* 0.2.41 (Michael): data-fx-loader="multiply" blends the colour into the photo (darker, the photo's
   own light and shade kept) instead of laying it over it. */
[data-fx-loader="multiply"]::after { mix-blend-mode: multiply; }
/* 0.2.42 (Michael: "what if it blurs as the overlay fades in?"): data-fx-loader-blur="12" lays a
   blurred copy of the section's photo (background-image inherited, no colour) over the sharp one and
   fades it in with the overlay. Scaled up a little so the soft edges stay outside the window. The
   value is in px; the script passes it on as --sbd-fx-loader-blur (12 px until it has run). */
[data-fx-loader-blur]::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: transparent;
	background-image: inherit;
	background-size: inherit;
	background-position: inherit;
	background-repeat: inherit;
	filter: blur(var(--sbd-fx-loader-blur, 12px));
	transform: scale(1.08);
	pointer-events: none;
	animation: sbd-fx-loader-in 1.2s ease .8s backwards;
}
[data-fx-loader].sbd-fx-loader-go { animation: sbd-fx-loader-away-now 1.2s ease-in 0s forwards; }
/* The words fade in with the overlay and then hold still (0.2.43, Michael: the pulse "looks strange
   while the color overlay fades in"). */
[data-fx-loader] .et_pb_module {
	animation: sbd-fx-loader-in 1s ease 1s backwards;
}
/* Divi's content wrapper (.et_builder_inner_content: relative, z-index 1) is its own layer under
   the fixed header (9980) and the edge tab, so the cover alone cannot rise above them. Lift the
   wrapper while the cover shows; the lift drops back to Divi's 1 by itself after the latest exit
   (6.8 s), and the script drops it as soon as the cover has gone (sbd-fx-loader-done). */
html:not(.sbd-fx-loader-done):not(.sbd-fx-loader-seen) .et_builder_inner_content:has(> [data-fx-loader]) {
	animation: sbd-fx-loader-lift 6.8s step-end forwards;
}
@keyframes sbd-fx-loader-lift { from { z-index: 2147483000; } to { z-index: 1; } }
[data-fx-loader].is-gone,
html.sbd-fx-loader-seen [data-fx-loader] { display: none !important; }
@keyframes sbd-fx-loader-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sbd-fx-loader-away { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-132vh) rotate(-15deg); } }
@keyframes sbd-fx-loader-away-now { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-132vh) rotate(-15deg); } }
@keyframes sbd-fx-loader-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes sbd-fx-loader-fade-now { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	[data-fx-loader] { animation: sbd-fx-loader-fade .4s ease 5.5s forwards; will-change: auto; }
	[data-fx-loader].sbd-fx-loader-go { animation: sbd-fx-loader-fade-now .4s ease 0s forwards; }
	[data-fx-loader]::before, [data-fx-loader]::after, [data-fx-loader] .et_pb_module { animation: none; }
}

/* ---------- grow (0.2.45) ---------- */
/* The script sets the section's clip-path every frame; the section clips its own overflow so nothing
   inside reaches past the window. */
.sbd-fx-grow { will-change: clip-path; }
html.sbd-fx-still .sbd-fx-grow { clip-path: none !important; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .sbd-fx-grow { clip-path: none !important; } }

/* 22. A soft opening (0.2.57): data-fx-hero-fade on the site header's section fades in the first section of
   every page and post (and of a Theme Builder body template), instead of the hard cut. Done in CSS alone, so
   it starts with the first paint (a script arrives too late). A loading screen keeps its own opening. */
@keyframes sbd-fx-hero-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
body:has([data-fx-hero-fade]) :is(.et-l--post, .et-l--body) > .et_builder_inner_content > .et_pb_section:first-child:not([data-fx-loader]) {
	animation: sbd-fx-hero-in .9s cubic-bezier(.25, .1, .25, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
	body:has([data-fx-hero-fade]) :is(.et-l--post, .et-l--body) > .et_builder_inner_content > .et_pb_section:first-child {
		animation: none !important;
	}
}