@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,WONK@9..144,300,1;9..144,400,1;9..144,500,1;9..144,600,1;9..144,700,1&family=Playfair+Display:ital,wght@1,500&display=swap');
@import url("https://use.typekit.net/hwz8haq.css");

:root {
	--color__black: #1E1E1E;
	--color__yellow: #FBC90E;
	--color__blue: #20C4F4;
	--color__red: #F1564E;
	--color__green: #127D43;
	--color__gray: #999;
	--color__silver: #eee;
		--color__silver--light: #f6f6f6;
	--color__select: #343eb3;
	
	--color__facebook: #1877f2;
	--color__twitter: #1d9bf0;

	--flow-space: 1em;
	
	--wrapper__bodyPadding: 1.5rem;
	--wrapper__padding: 3em 0;
	--wrapper__gridOffsetLeft: 2;
	--wrapper__gridOffsetRight: -2;
		--wrapper__gridOffset: var(--wrapper__gridOffsetLeft) / var(--wrapper__gridOffsetRight);
	--wrapper__gridGap: 0.5em;
	--wrapper__bodyPaddingInner: calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap));
	
	--grid: grid;
	
	--fontSize1: 2.1em;
	--fontSize2: 1.7em;
	--fontSize3: 1.3em;
	--fontSize4: 1.2em;
	
	--fontFamily1: 'halyard-display', serif;
	--fontFamily2: 'Fraunces', serif;
	--fontFamily3: 'Playfair Display', serif;
	
	--borderRadius1: 0.4em;
}



/*
  Made by Elly Loel - https://ellyloel.com/
  With inspiration from:
    - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
    - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
    - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

  Notes:
    - `:where()` is used to lower specificity for easy overriding.
*/

* {
	/* Remove default margin on everything */
	margin: 0;
	/* Remove default padding on everything */
	padding: 0;
}

/* Use a more-intuitive box-sizing model on everything */
*,
::before,
::after {
	box-sizing: border-box;
}

/* Remove border and set sensible defaults for backgrounds, on all elements except fieldset progress and meter */
*:where(:not(fieldset, progress, meter)) {
	border-width: 0;
	border-style: solid;
	background-origin: border-box;
	background-repeat: no-repeat;
}

html {
	/* Allow percentage-based heights in the application */
	block-size: 100%;
	/* Making sure text size is only controlled by font-size */
	-webkit-text-size-adjust: none;
}

/* Smooth scrolling for users that don't prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}
}

body {
	/* Improve text rendering */
	-webkit-font-smoothing: antialiased;
	/* https://marco.org/2012/11/15/text-rendering-optimize-legibility */
	text-rendering: optimizeSpeed;
	/* Allow percentage-based heights in the application */
	min-block-size: 100%;
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#example_2 */
	/* scrollbar-gutter: stable both-edges; Removed until this bug is fixed: https://bugs.chromium.org/p/chromium/issues/detail?id=1318404#c2 */
}

/* Improve media defaults */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
	display: block;
}

:where(img, video) {
	block-size: auto;
	max-inline-size: 100%;
}

/* Remove stroke and set fill colour to the inherited font colour */
:where(svg) {
	stroke: none;
	fill: currentColor;
}



/* Set a size for SVG's without a width attribute */
:where(svg):where(:not([width])) {
	inline-size: 1rem;
}

/* Remove built-in form typography styles */
:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
	color: inherit;
	font: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}

/* Change textarea resize to vertical only and block only if the browser supports that */
:where(textarea) {
	resize: vertical;
}

@supports (resize: block) {
	:where(textarea) {
		resize: block;
	}
}

/* Avoid text overflows */
:where(p, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
:where(ul, ol)[role="list"] {
	list-style: none;
}

/* More readable underline style for anchor tags without a class. This could be set on anchor tags globally, but it can cause conflicts. */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make it clear that interactive elements are interactive */
:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
	cursor: pointer;
	touch-action: manipulation;
}

:where(input[type="file"]) {
	cursor: auto;
}

:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
	cursor: pointer;
}

/* Animate focus outline */
@media (prefers-reduced-motion: no-preference) {
	:focus-visible {
		transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
	}

	:where(:not(:active)):focus-visible {
		transition-duration: 0.25s;
	}
}

:where(:not(:active)):focus-visible {
	outline-offset: 5px;
}

/* Make sure users can't select button text */
:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]),
:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	user-select: none;
	text-align: center;
}

/* Disabled cursor for disabled buttons */
:where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] {
	cursor: not-allowed;
}







body {
	font-family: var(--fontFamily1);
	font-weight: 300;
	line-height: 1.5;
}

h1, h2, h3 {
	line-height: 1.2;
	font-family: var(--fontFamily2);
	/* font-variation-settings: "opsz" 9; */
}

h1 {
	font-size: var(--fontSize1);
	font-weight: 600;
}

h2 {
	font-size: var(--fontSize2);
	font-weight: 700;
}

h3 {
	font-size: var(--fontSize3);
	font-weight: 700;
}

a {
	color: inherit;
}


.offscreen {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px; 
}

.skipLink {
	position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	z-index: 300;
	padding: 1em 2em;
	
	background-color: var(--color__select);
	color: #000;
}

.skipLink.offscreen:focus {
	clip: auto;
	height: auto;
	overflow: auto;
	position: absolute;
	width: auto;
}

.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	
	fill: currentColor;
	pointer-events: none;
}


.masterWrapper {
	min-height: 100vh;
	display: flex;
	
	flex-direction: column;
}

.masterWrapper > * {
	flex: 0 0 auto;
}

.masterWrapper__body {
	flex: 1 1 auto;
}

@supports (display: var(--grid)) { 
	.wrapper {
		display: grid;
		grid-template-columns: 
			calc(var(--wrapper__bodyPadding) - (var(--wrapper__gridGap) * 2)) 
			repeat(12, minmax(1em, 1fr)) 
			calc(var(--wrapper__bodyPadding) - (var(--wrapper__gridGap) * 2));
		
		align-content: start; 
		column-gap: var(--wrapper__gridGap);
		padding: var(--wrapper__padding);
	}
	
	.wrapper > * {
		grid-column: var(--wrapper__gridOffset);
	}
	
	.wrapper--columns2 {
		grid-template-areas: " . left left left left left left right right right right right right . ";
	}
	
	.wrapper--columns3 {
		grid-template-areas: " . left left left left center center center center right right right right . ";
	}
	
	.wrapper--columns4 {
		grid-template-areas: " . one one one two two two three three three four four four . ";
	}
	
	.wrapper--grid,
	.wrapper--grid3 {
		grid-column: var(--wrapper__gridOffsetLeft) / var(--wrapper__gridOffsetRight);
		row-gap: var(--wrapper__gridGap);
		column-gap: var(--wrapper__gridGap);
	}
	
	.wrapper--narrow {
		grid-column: var(--wrapper__gridOffsetLeft) / var(--wrapper__gridOffsetRight);
	}
	
	@media (min-width: 23em) {
		:root {
			--wrapper__bodyPaddingInner: var(--wrapper__bodyPadding);
		}
		
		.wrapper {
			grid-template-columns: 
				calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap)) 
				repeat(12, minmax(1em, 1fr)) 
				calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap));
		}
	}
	
	@media (min-width: 32em) {	
		.wrapper--grid > * {
			grid-column: span 6;
		}
		
		.wrapper--grid > *:nth-child(2n+1) {
			grid-column: var(--wrapper__gridOffsetLeft) / span 6;
		}
		
		.wrapper--grid3 > * {
			grid-column: span 6;
		}
		
		.wrapper--grid3 > *:nth-child(2n+1) {
			grid-column: var(--wrapper__gridOffsetLeft) / span 6;
		}
	}
	
	@media (min-width: 48em) {
		.wrapper--columns2 > *:nth-child(1) {
			grid-area: left;
		}
		
		.wrapper--columns2 > *:nth-child(2) {
			grid-area: right;
		}
		
		
		
		
		.wrapper--columns3 > *:nth-child(1) {
			grid-area: left;
		}
		
		.wrapper--columns3 > *:nth-child(2) {
			grid-area: center;
		}
		
		.wrapper--columns3 > *:nth-child(3) {
			grid-area: right;
		}
	
	
		
		
		.wrapper--columns4 > * {
			grid-column: span 6;
		}
		
		.wrapper--columns4 > *:nth-child(2n+1) {
			grid-column: var(--wrapper__gridOffsetLeft) / span 6;
		}
		
		
		
		
		.wrapper--grid > * {
			grid-column: span 4;
		}
		
		.wrapper--grid > *:nth-child(2n+1) {
			grid-column: span 4;
		}
		
		.wrapper--grid > *:nth-child(3n+1) {
			grid-column: var(--wrapper__gridOffsetLeft) / span 4;
		}
		
		
		
		.wrapper--grid3 > * {
			grid-column: span 4;
		}
		
		.wrapper--grid3 > *:nth-child(2n+1) {
			grid-column: span 4;
		}
		
		.wrapper--grid3 > *:nth-child(3n+1) {
			grid-column: var(--wrapper__gridOffsetLeft) / span 4;
		}
		
		
		
		
		.wrapper--narrow > * {
			grid-column: 3 / -3;
		}
	} 

	@media (min-width: 65em) {
		:root {
			--wrapper__gridGap: 1em;
		}
		
		body {
			font-size: 1.2em;
		}
		
		.wrapper--columns4 > * {
			grid-column: span 3;
		}
		
		.wrapper--columns4 > *:nth-child(2n+1) {
			grid-column: span 3;
		}
		
		.wrapper--columns4 > *:first-child {
			grid-column: var(--wrapper__gridOffsetLeft) / span 3;
		}
		
		.wrapper--narrow > * {
			grid-column: 4 / -4;
		}
		
		
		.wrapper--grid > * {
			grid-column: span 3;
		}
		
		.wrapper--grid > *:nth-child(2n+1) {
			grid-column: span 3;
		}
		
		.wrapper--grid > *:nth-child(3n+1) {
			grid-column: span 3;
		}
		
		.wrapper--grid > *:nth-child(4n+1) {
			grid-column: var(--wrapper__gridOffsetLeft) / span 3;
		}
	}
	
	@media (min-width: 100em) {
		:root {
			--wrapper__gridOffsetLeft: 3;
			--wrapper__gridOffsetRight: -3;
		}
		
		body {
			font-size: 1.3em;
		}
		
		.wrapper {
			grid-template-columns: 
				1fr
				calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap)) 
				repeat(12, minmax(1em, 100px)) 
				calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap)) 
				1fr;
		}
		
		.wrapper--columns2 {
			grid-template-areas: " . . left left left left left left right right right right right right . . ";
		}
		
		.wrapper--columns3 {
			grid-template-areas: " . . left left left left center center center center right right right right . . ";
		}
		
		.wrapper--columns4 {
			grid-template-areas: " . . one one one two two two three three three four four four . . ";
		}
		
		.wrapper--narrow > * {
			grid-column: 6 / -6;
		}
	}
	
	@media (min-width: 120em) {
		:root {
			--wrapper__gridOffsetLeft: 3;
			--wrapper__gridOffsetRight: -3;
			--wrapper__gridGap: 1.5em;
		}
		
		.wrapper {
			grid-template-columns: 
				1fr
				calc(var(--wrapper__bodyPadding) * 2)
				repeat(12, minmax(1em, 100px)) 
				calc(var(--wrapper__bodyPadding) * 2)
				1fr;
		}
	}
}











.chromeframe { 
    background: var(--color__select); 
    color: #fff; 
    padding: 2em 2em; 
	z-index: 9999; 
	position: fixed;  
	bottom: 0; 
	width: 100%; 
	font-size: 1.6em; 
}

.chromeframe a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: #fff;
}

.variables-debug {
	display: none;
}

.variables-debug--active {
	display: block;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 70%;
	padding: 1em;
	
	background-color: #39CCCC;
	color: #000;
}

.lockWarning {
	width: 4px; 
	height: 100%;
	position: fixed; 
	right: 0; 
	top: 0; 
	z-index: 500; 
	
	background-color: #f00;
	font-size: 10px;
	color: #000;	
}

.lockWarning:hover {
	padding: 1em;
	width: 200px; 
}





.theme {
	--color--text: var(--color__black);
	--color--headline: var(--color__red);
	
	color: var(--color--text);
}

	.theme h1,
	.theme h2, 
	.theme h3 {
		color: var(--color--headline);
	}
	
	.theme ul li::marker {
		color: var(--color__red);
	}
	
	.theme .b--primary {
		background-color: var(--color__red);
		color: #fff;
	}

.theme--red {
	--color--text: #fff;
	--color--headline: var(--color__yellow);
	
	background-color: var(--color__red);
}

	.theme--red .b--primary {
		background-color: var(--color__yellow);
		color: var(--color__black);
	}

.theme--yellow {
	--color--text: var(--color__black);
	--color--headline: var(--color__black);
	
	background-color: var(--color__yellow);
	accent-color: var(--color__blue);
}

	.theme--yellow .b--ghost {
		border: 2px solid var(--color__black);
		color: var(--color__black);
	}
	
	.theme--yellow .b--ghost:hover {
		background-color: var(--color__black);
		border-color: var(--color__black);
		color: #fff;
	}
	
	.theme--yellow a:hover {
		color: #fff;
	}
	
	.theme--yellow .b--primary:hover {
		background-color: var(--color__red);
		color: #fff;
	}
	
.theme--blue {
	--color--text: #fff;
	--color--headline: #fff;
	
	background-color: var(--color__blue);
}

	.theme--blue a:hover {
		color: var(--color__yellow);
	}


.theme--green {
	--color--text: #fff;
	--color--headline: var(--color__yellow);
	accent-color: var(--color__yellow);
	
	background-color: var(--color__green);
}

	.theme--green .b--primary {
		background-color: var(--color__yellow);
		color: var(--color__black);
	}

.theme--black {
	--color--text: #fff;
	--color--headline: var(--color__yellow);
	
	background-color: var(--color__black);
}

	.theme--black .b--primary {
		background-color: var(--color__yellow);
		color: var(--color__black);
	}
	





.b {
	display: inline-block;
	margin: 0; 
	padding: 0.6em 1.7em 0.5em 1.7em;
	
	border: none;
	border-radius: 1.5em;
	color: currentColor;
	font-family: var(--fontFamily2);
	font-weight: 500;
	
	transition: 
		color .3s, 
		border-color .3s, 
		background-color .3s;
}

	a.b {
		text-decoration: none;
	}
	
	.b.tooltipped {
		position: relative;
	}
		
	.b.tooltipped:after {
		position: absolute;
		left: 50%;
		top: 110%;
		transform: translateX(-50%);
		
		padding: 0.3em 0.6em;
		
		border-radius: 0.3em;
		white-space: nowrap;
		font-size: 0.8rem;
		background-color: var(--color__green);
		color: #fff;
		content: attr(data-tooltip);
	}

.b--plain {
	padding: 0;
	background-color: transparent;
}

.b--icon {
	width: 2.5em;
	height: 2.5em;
	padding: 0;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	border-radius: 50%;
	background-color: transparent;
}

.b--withIcon {
	display: flex;
	gap: 0.5em;
	align-items: baseline;
}

.b--ghost {
	border: 2px solid currentColor;
	color: currentColor;
	background-color: transparent;
}

	.b--ghost.b--active, 
	.b--ghost:hover {
		background-color: var(--color__black);
		color: #fff;
		border-color: var(--color__black); 
	}

.b--ghost2 {
	border: 2px solid currentColor;
	color: #000;
	background-color: #fff;
}

	.b--ghost2:hover {
		background-color: var(--color__black);
		color: #fff;
		border-color: var(--color__black); 
	}
	
	.b--ghost2.b--inactive {	
		background-color: #fff;
		color: var(--color__gray); 
		border-color: var(--color__gray); 
	}


.b--yellow {
	background-color: var(--color__yellow);
	color: var(--color__red);
}

	.b--yellow:hover {
		background-color: var(--color__red);
		color: #fff;
	}

.b--red {
	background-color: var(--color__red);
	color: #fff;
}

	.b--red:hover {
		background-color: var(--color__red);
		color: #fff;
	}

.b--white {
	background-color: #fff;
	color: var(--color__black);
}

.b--black {
	background-color: var(--color__black);
	color: #fff;
}


.header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1010;
	
	padding: 1em 0;
	
	color: #fff;
}

	.navMain--open .header {
		position: fixed;
	}

.header--black {
	position: relative;
	top: auto;
	left: auto;
	
	color: var(--color__black);
}

.header__left {
	grid-column: 2 / span 2;
}

.header__center {
	grid-column: var(--wrapper__gridOffset);
	text-align: center;
	justify-self: center;
}

.header__right {
	grid-column: -4 / span 2;
	text-align: right; 
}

.header__utility {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	gap: 1em;
}

.header__utility .icon {
	display: block;
	font-size: 1.7em;
}

.header__utility .favourite2 {
	font-size: 1.5em;
}

	.header__utility a:hover {
		color: var(--color__yellow);
	}
	

.header + * {
	padding-top: 4em;
}
	

.header__weather {
	display: none;
}


.header__navMain {
	display: none;
}

.header__logo {
	--transitionDuration: .4s;
	
	display: inline-block;
	width: 5em;
	margin-top: 2em;
	
	transition: 
		color var(--transitionDuration),
		margin var(--transitionDuration),
		width var(--transitionDuration);
}

	.header__logo svg {
		width: 100%;
	}
	
	.navMain--open .header__logo, 
	.scrolled .header__logo {
		margin-top: 0;
	}

	#header__logoNapis {
		transition: opacity var(--transitionDuration);
	}
	
	.navMain--open .header__logo {
		width: 3em;
		color: #fff;
	}
	
	.navMain--open #header__logoNapis {
		opacity: 0;
	}

#btnNavToggle {
	position: fixed;
	bottom: 1rem;
	right: var(--wrapper__bodyPadding);
	z-index: 2000;
	
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	padding: 0;
	width: 4em;
	height: 4em;
	
	font-size: 0.9em;
	border-radius: 50%;
}



	#btnNavToggle .hamburger {
		font-size: 0.7em;
	}

	.navMain--open #btnNavToggle {
		background-color: var(--color__black);
		color: #fff;
	}

.header__language {
	position: relative;
	margin-top: 0.2em;
}


#btnLangToggle {
	font-size: 0.8em;
}

#btnLangToggle .icon {
	font-size: 0.6em;
	transition: transform .4s;
}

#language {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	padding-top: 0.5em;
	
	display: none;
	flex-direction: column;
	align-items: flex-start;
	
	font-size: 0.8em;
}

	
	#language a {
		padding: 0.3em 0;
		text-decoration: none;
		font-family: var(--fontFamily2); 
	}
	
	.navMain--open #language a:hover {
		color: #fff;
	}

#btnLangToggle[aria-expanded="true"] + #language {
	display: flex;
}

#btnLangToggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}



#navMain {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;

	padding: 
		calc(var(--wrapper__bodyPadding) * 2) 
		var(--wrapper__bodyPaddingInner) 
		var(--wrapper__bodyPadding) 
		var(--wrapper__bodyPaddingInner);
		
	transition: opacity .5s;
	
	background-color: var(--color__yellow);
	color: var(--color__black);
}

	#navMain[hidden] {
		transform: translateY(-100%);
		opacity: 0;
	}

#scrollHint {
	position: absolute;
	left: var(--wrapper__bodyPaddingInner);
	bottom: 1rem;
	z-index: 3;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	
	color: #fff;
	text-decoration: none;
}

	#scrollHint .icon {
		font-size: 2.5em;
	}
	 
	#scrollHint[hidden] {
		display: none;
	}

.hamburger {
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}

.hamburger:hover {
	opacity: 0.7;
}

.navMain--open .hamburger:hover {
	opacity: 0.7;
}

.hamburger-box {
	width: 2.5em;
	height: 1.5em;
	display: block;
	position: relative;
}

.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	width: 2.5em;
	height: 3px;
	background-color: currentColor;
	border-radius: 3px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
	content: "";
	display: block;
}

.hamburger-inner::before {
	top: -0.7em;
}

.hamburger-inner::after {
	bottom: -0.7em;
}

.hamburger--squeeze .hamburger-inner {
	transition-duration: 0.075s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze .hamburger-inner::before {
	transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}

.hamburger--squeeze .hamburger-inner::after {
	transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.navMain--open .hamburger--squeeze .hamburger-inner {
	transform: rotate(45deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.navMain--open .hamburger--squeeze .hamburger-inner::before {
	top: 0;
	opacity: 0;
	transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}

.navMain--open .hamburger--squeeze .hamburger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}





.imgbg {
	position: relative;
}

.imgbg > * {
	position: relative;
	z-index: 3;
}

	.imgbg:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.7+0,0.7+16,0.7+16,0.3+50,0.3+100 */
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.2+78,0.4+100 */
		background: 
			linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 16%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.2) 100%),
			radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 78%,rgba(0,0,0,0.4) 100%);


		content: "";
	}
	
.imgbg__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	
	margin-top: 0 !important;
	
	grid-column: 1 / -1;
}

	.imgbg__image video,
	.imgbg__image img {
		width: 100%;
		height: 100%;
		
		object-fit: cover;
	}






.footer {
	--flow-space: 2rem;
	text-align: center;
}

.footer nav {
	font-weight: 300;
}

	.navSec {
		margin-bottom: 3em;
	}
	
	.navSec a {
		font-weight: 500;
		font-family: var(--fontFamily2);
	}
	
	.navSec ul {
		display: flex;
		flex-direction: column;
		gap: 1em;
	}
	
	
	.navFoot {
		
	}

	.footer nav ul {
		list-style: none;
	}
	
	.footer nav a {
		text-decoration: none;
		line-height: 2;
	}

.socialMedia {
	display: flex;
	justify-content: center;
	gap: 2em;
	
	list-style: none;
}

	.socialMedia .icon {
		display: block;
		font-size: 1.5em;
	}

	

	.socialMedia a {
		transition: color .3s;
	}

	.socialMedia .fb:hover {
		color: #3a559f;
	}
	
	.socialMedia .ig:hover {
		color: #d502b3;
	}
	
	.socialMedia .pi:hover {
		color: #c51e26;
	}
	
	.socialMedia .li:hover {
		color: #0077b5;
	}
	
	.socialMedia .yt:hover {
		color: #ff0000;
	}
	
	.socialMedia .tw:hover {
		color: #1d9bf0;
	}
	
	.socialMedia .fl:hover {
		color: #ff0084;
	}



.fundings {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	
	gap: 2em;
	--flow-space: 3rem;
}

	
	.fundings img {
		height: 3em;
	}

.copyright {
	--flow-space: 3rem;
	
	font-size: 0.8em;
	text-align: center;
}


.form fieldset {
	border: 0;
	padding: 0;
}

.form input {
	padding: 0.3em 1em;
	color: var(--color__black);
}
















.pList__entry {
	position: relative;
	overflow: hidden;
	
	border-radius: var(--borderRadius1);
	border: 1px solid var(--color__silver);
}

	
	.pList__entry img {
		transition: transform .3s ease-in-out;
	}
	
	.pList__entry:hover img:not(.pList__entryGreen) {
		transform: scale(1.3);
	}

.pList__entry > div:first-child {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	
	padding: 0.7em 1em 1em 1em;
	
	color: #fff;
}

.pList__entryGreen {
	width: 5em;
	position: absolute;
	top: 1em;
	right: 1em;
}

	.pList__price { 
		position: absolute;
		top: 1em;
		right: 0;
		
		padding: 0.4em 1em;
		
		background-color:var(--color__yellow);
		color: var(--color__black);
		font-weight: 500;
		border-top-left-radius: 2em;
		border-bottom-left-radius: 2em;
	}

	.pList__entry > div:first-child > h2, 
	.pList__entry > div:first-child > p {
		position: relative;
		z-index: 2;
	}
	
	
	
	.pList__entry .addToFavourites {
		position: absolute;
		right: 1em;
		bottom: 0.5em;
		z-index: 3;
	}

	
	.pList__entry > div:first-child:after {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		
		z-index: 1;
		
		content: "";
		background-color: rgba(30, 30, 30, 0.4);
		backdrop-filter: blur(2px);
	}

.pList__entry h2 {
	font-size: var(--fontSize4);
	font-weight: 600;
}

.pList__entry .pList__city {
	font-family: var(--fontFamily2);
	font-weight: 400;
}

.pList__unitName {
	margin-bottom: 0.4em;
	font-size: 0.8em;
	font-family: var(--fontFamily1);
	font-weight: 300;
}






.wProviders {
	width: 100%;
}

.wProviders .swiper-wrapper {
	align-items: stretch;
}

.wProviders .swiper-slide {
	width: clamp(12em, 70vw, 15em);
	height: auto;
}

.wProviders h3 {
	color: #fff;
	position: relative;
	z-index: 2;
}

.wProviders .pList {
	gap: 0;
}











.wPotepanja {
	width: 100%;
}

.wPotepanja .swiper-wrapper {
	align-items: stretch;
}

.wPotepanja .swiper-slide {
	width: clamp(12em, 70vw, 15em);
	height: auto;
}

.wPotepanja h3 {
	position: relative;
	z-index: 2;
	color: #fff;
	font-size: var(--fontSize4);
	font-weight: 600;
}













.wShare {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
}

	.wShare__link .icon {
		font-size: 1.5em;
	}

	.wShare__link:hover {
		color: #fff;
	}

	.wShare__link--fb:hover {
		color: var(--color__facebook);
	}

	.wShare__link--tw:hover {
		color: var(--color__twitter);
	}

	.wShare__link--copy:hover {
		color: var(--color__red);
	}
	
	.wShare__link--copy.copied {
		color: var(--color__green);
	}
	
	
	
	








.l2Headline {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	min-height: calc(var(--vh, 1vh) * 80);
	padding: 
		calc(var(--wrapper__bodyPadding) * 4) 
		var(--wrapper__bodyPadding)
		calc(var(--wrapper__bodyPadding) * 1) 
		var(--wrapper__bodyPadding);
	
	--flow-space: 1rem;
}

@media (max-width: 480px) {
	
	.l2Headline {
		padding-top: 11em;
	}
}

	.l2Headline h1 {
		max-width: 30ch;
		margin-bottom: 0.3em;
		
		color: #fff;
		font-family: var(--fontFamily2);
		font-size: clamp(1.8em, 18vw, 3.5em);
		text-align: center;
		font-weight: 600;
	}

	.l2Headline__intro {
		font-family: var(--fontFamily2);
		font-weight: 400;
		text-align: center;
		max-width: 50ch;
		--flow-space: 0;
	} 
	
	.l2Headline .l2Headline__intro {
		text-shadow: 1px 1px 2px #000; 
	} 







.footer__navSocial {
	grid-column: 1 / -1;
}

.footer .socialMedia {
	margin-top: var(--flow-space);
}

.navMain__bottom nav li.active {
	color: #fff;
}























.inlineImage {
	text-align: center;
	text-decoration: none;
}

.inlineImage__info {
	margin-top: 0.5em;
	font-family: var(--fontFamily2);
	font-size: 0.9em;
}

.inlineGallery {
	grid-column: 1 / -1;
	gap: var(--wrapper__gridGap);
}

	.inlineGallery > * {
		grid-column: span 6;
	}
	.inlineGallery > *:nth-child(2n+1) {
		grid-column: var(--wrapper__gridOffsetLeft) / span 6;
	}

.iframeWrapper iframe, 
.iframeWrapper .pfw {
	width: 100%;
	height: 100%;
}

.iframeWrapper--video {
	aspect-ratio: var(--aspect, 16 / 9);
}






.aSearch input {
	border-radius: 1em;
	font-size: 0.8em;
}

.aSearch input::placeholder {
	text-transform: uppercase;
}

.aSearch .form__group.error input {
	outline: 2px solid var(--color__red);
}









.addToFavourites {
	align-items: center;
	justify-content: flex-end;
	
	font-family: var(--fontFamily2);
	font-weight: 500;
	background-color: transparent;
}

	.addToFavourites--label {
		width: 18em;
	}

	.addToFavourites:hover {
		background-color: var(--color__green);
	}

	.addToFavourites .icon {
		font-size: 1.5em;
		fill: rgba(255, 255, 255, 0);
	}
	
	.addToFavourites .remove {
		display: none;
	}
	
		.addToFavourites .remove span:last-child {
			display: none;
		}
	
	.addToFavourites--active .icon {
		fill: rgba(255, 255, 255, 1);
	}
	
	.addToFavourites--active .remove {
		display: block;
	}
	
	.addToFavourites--active .add {
		display: none;
	}
		
		.addToFavourites--active:hover .remove span:first-child { 
			display: none;
		}
	
		.addToFavourites--active:hover .remove span:last-child { 
			display: block;
		}

.addToFavourites--simple {
	position: relative;
	justify-content: center;
}

	.addToFavourites--simple .added,
	.addToFavourites--simple .removed {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(0, -110%);
		
		display: none;
		padding: 0.3em 1em;
		
		border-radius: 1em;
		background-color: var(--color__yellow);
		color: #fff;
		white-space: nowrap;
		font-family: var(--fontFamily1);
		font-size: 0.9em;
		font-weight: 300;
		color: var(--color__black);
	}

.addToFavourites--added .added {
	display: block;
}

.addToFavourites--removed .removed {
	display: block;
}

.theme--white .addToFavourites {
	background-color: var(--color__green);
	color: #fff;
}

.addToFavourites--remove {
	
}


.wNewsletter {
	text-align: center;
}

.wNewsletter + .footer {
	padding-top: 0;
}

#newsletter {
	margin-top: 2em;
	accent-color: var(--color__yellow);
}

#newsletter fieldset {
	padding: 0;
	border: none;
}

#newsletter fieldset:first-child {
	display: flex;
	align-items: stretch;
	justify-content: center;
}

	#newsletter label[for="newsletter__email"] {
		display: none;
	}

	#newsletter__email {
		padding: 0 4em 0 2em;
		
		border-radius: 2em;
		line-height: 3;
		color: var(--color__black);
	}
	
	#newsletter button {
		margin-left: -3em;
		color: #fff;
	}

	#newsletter .form__status.error {
		color: red;
	}
	
	#newsletter .form__status.success {
		color: var(--color__yellow);
	}
	
	#newsletter__email.error {
		outline: 2px solid red;
	}



.machineTranslated {
	margin-bottom: 2em;
	margin-top: 1em !important;
	padding: 0;
}

.machineTranslated > div { 
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	padding: 0.5em 1em 0.7em 1em;
	
	background-color: var(--color__yellow);
}

.machineTranslated .icon { 
	font-size: 1.5em;
	flex: 0 0 auto;
}

.machineTranslated p {
	
	line-height: 1.3;
	font-size: 0.8em;
}

@media (min-width: 65em) {
	.machineTranslated .icon { 
		font-size: 2em;
	}
	
	.machineTranslated > div {
		padding: 0.5em 2em 0.7em 2em;
	}
}

@media (min-width: 100em) {
	.machineTranslated > div {
		grid-column: 5 / -5;
	}
}











.stack > * + * {
	margin-top: var(--flow-space, 1.5rem);
}








@media (max-width: 48em) {
	.sTeaser {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		
		min-height: calc(var(--vh, 1vh) * 100);
		padding: calc(var(--wrapper__bodyPadding) * 3) var(--wrapper__bodyPadding);
	}
	
		.sTeaser header {
			max-width: 45ch;
		}
}













@media (max-width: 65em) {
	.header {
		display: flex;
		justify-content: space-between;
		padding-right: var(--wrapper__bodyPadding);
		padding-left: var(--wrapper__bodyPadding);
	}
	
	.header__utility {
		/* position: absolute; */
		/* top: 2em; */
		/* right: var(--wrapper__bodyPadding); */
	}
	
	
	#navMain {
		display: flex;
		flex-direction: column;
		overflow: auto;
		padding-top: calc(var(--wrapper__bodyPadding) * 4);
	}
	
	.navMain__secondLevels {
		margin-bottom: 3em;
		flex: 1 1 auto;
		text-align: center;
	}
	
	.navMain__bottom {
		padding-top: 0;
		padding-bottom: calc(var(--wrapper__bodyPadding) * 4);
		
	}
	
	.navMain__bottom nav {
		margin-bottom: 2em;
	}
	
	.navMain__bottom nav a {
		text-decoration: none;
	}
	
	.navMain__bottom nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 1em;
		row-gap: 0.5em;
		
		list-style: none;
	}
	
	.navMain__level nav {
		display: none;
	}
	
		.navMain__level--active nav {
			display: block;
		}
	
	.navMain__level--active + .navMain__level {
		margin-top: 2em;
	}
	
	.navMain__level > a {  
		display: inline-block;
		margin-bottom: 0.3em;
		
		font-size: var(--fontSize2);
		font-family: var(--fontFamily2);
		text-decoration: none;
		font-weight: bold;
	}
	
	.navMain__level > nav ul {
		list-style: none;
	}
	
	.navMain__level > nav a {
		font-family: var(--fontFamily2);
		font-weight: 500;
		font-size: var(--fontSize3);
		text-decoration: none;
		line-height: 2;
	}
	
	
	
	
	
	
	
	
	
	
	.aSearch--widget {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1030;
		
		padding: calc(var(--wrapper__bodyPadding) * 3) var(--wrapper__bodyPadding);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		background-color: rgba(30, 30, 30, 0.6);
		backdrop-filter: blur(3px);
		text-align: center;
		
		transition: opacity .4s;
	}
	
		.aSearch--widget[data-active="true"] {
			opacity: 1;
			transform: translateY(0);
		}
		
		.aSearch--widget[data-active="false"] {
			transform: translateY(-110%);
			opacity: 0;
			
		}
	
	.aSearch h2 {
		color: #fff;
	}
	
	.aSearch > button {
		flex: 0 0 auto;
	}
	
	.aSearch--widget form {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.aSearch--widget fieldset {
		padding: 1em;
		display: inline-flex;
		flex-direction: column;
		
		background-color: #fff;
		border-radius: 1em;
	}

	.aSearch--widget .form__group + .form__group {
		padding-top: 0.5em;
		margin-top: 0.5em;
		border-top: 1px solid var(--color__silver);
	}
}



@media (min-width: 48em) {
	.l2Headline {
		min-height: calc(var(--vh, 1vh) * 70);
	}
	
	
	
	.header__utility {
		flex-direction: row;
	}
	
	
	
	
	.sTeaser {
		display: grid;
		grid-template-columns: 
			calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap)) 
			repeat(12, minmax(1em, 1fr)) 
			calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap));
		column-gap: var(--wrapper__gridGap);
		grid-gap: calc(var(--wrapper__gridGap) * 2);
		align-items: center;
		align-content: center;
		
		padding: 0;
		height: calc(var(--vh, 1vh) * 70);
		max-height: 40em;
	}
	
		.sTeaser header {
			grid-column: 10 / var(--wrapper__gridOffsetRight);
			text-align: left;
		}
		
		.sTeaser > a {
			grid-column: 10 / var(--wrapper__gridOffsetRight);
			justify-self: start;
		}
}

@media (min-width: 65em) {
	:root {
		--wrapper__bodyPadding: 3rem;
		
		--fontSize1: 2.5em;
		--fontSize2: 1.9em;
		--fontSize3: 1.5em;
	}
	
	#btnNavToggle {
		font-size: 1rem;
		top: 2em;
		bottom: auto;
		right: var(--wrapper__bodyPadding);
		
		transform: translateY(-10em);
		transition: transform .4s;
	}
	
		.navMain--open #btnNavToggle, 
		.scrolled #btnNavToggle {
			transform: translateY(0);
		}
	
	#scrollHint {
		right: var(--wrapper__bodyPaddingInner);
		left: auto;
	}
	
	.header {
		padding-right: var(--wrapper__bodyPadding);
		padding-left: var(--wrapper__bodyPadding);
		padding-top: var(--wrapper__bodyPaddingInner);
		max-width: calc(1200px + 11 * var(--wrapper__gridGap));
		left: 50%;
		transform: translateX(-50%);
		
		display: flex;
		justify-content: space-between;
	}
	
	.header__left {
		grid-column: var(--wrapper__gridOffsetLeft) / span 2;
		flex: 1;
	}
	
	.header__center {
		position: relative;
		justify-self: unset;
		display: flex;
		gap: 2em;
		flex: 7;
	}
	
	.header__right {
		flex: 1;
	}
	
	.navMain--open .header__right {
		right: 8em;
	}
	
	.header__logo {
		flex: 1;
		margin-top: 0;
		text-align: center;
	}
	
	.header__logo svg {
		display: inline-block;
		width: 4em;
	}
	
	
	
	#navMain {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		padding: 0;
		min-height: 42em;
	}
	
	.header__navMain {
		display: block;
		font-family: var(--fontFamily2);
		font-weight: 400;
	}
	
	.header__navMain--left {
		flex: 4;
	}
	
	.header__navMain--right {
		flex: 4;
	}
	
	/*
	.lang_en .header__navMain--left {
		flex: 3;
	}
	
	.lang_en .header__navMain--right {
		flex: 3;
	}
	*/
	
		.navMain--open .header {
			color: var(--color__black);
		}
		
		.header__navMain a {
			display: block;
			
			text-decoration: none;
			transition: color .3s;
			
		}
		
			.lang_si .header__navMain a {
				white-space: nowrap;
			}
			
			.lang_de .header__navMain a {
				width: min-content;
			}
		
			.header__navMain a:hover {
				color: var(--color__yellow);
			}
			
			.navMain--open .header__navMain a:hover {
				color: #fff;
			}
		
		.header__navMain ul {
			list-style: none;
			display: flex;
			justify-content: flex-end;
			gap: clamp(0.5em, 1.5vw, 6em);
			line-height: 1.2;
		}
		
		.header__navMain--right ul {
			justify-content: flex-start;
		}
		
		.header__navMain ul li.active {
			color: var(--color__yellow);
		}	
		
		.navMain--open .header__navMain {
			opacity: 0;
			pointer-events: none;
		}
		
		.navMain__parent {
			font-size: var(--fontSize1);
			font-family: var(--fontFamily2);
			text-decoration: none;
			font-weight: 600;
		}

	.navMain__secondLevels {
		row-gap: 1em;
		
		flex: 1 1 auto;
		padding-top: 15vh;
		
		line-height: 1.2;
	}
	
	
	.navMain__bottom > nav a, 
	.navMain__secondLevels a {
		transition: color .3s;
	}
	
		.navMain__bottom > nav a:hover, 
		.navMain__secondLevels a:hover {
			color: #fff;
		}
	
	
	
	
	
	
	.navMain__level {
		position: relative;
		grid-column: var(--wrapper__gridOffsetLeft) / span 5; 
		
	}
	
	.navMain__level > a { 
		display: inline-block;
		
		font-size: var(--fontSize1);
		font-family: var(--fontFamily2);
		text-decoration: none;
		font-weight: bold;
	}
	
	.navMain__level > nav {
		display: none;
		
		position: absolute;
		left: calc(100% + 5em);
		top: 0;
		
		width: max-content;
	}
	
		.navMain__level--active > nav {
			display: block; 
		}
	
	.navMain__level > nav ul {
		list-style: none;
	}
	
	.navMain__level > nav a {
		font-family: var(--fontFamily2);
		font-weight: 500;
		font-size: var(--fontSize3);
		text-decoration: none;
		line-height: 2;
	}
	
	.navMain__level--columns nav ul {
		column-count: 2;
		column-gap: 2em;
	}
	
	.navMain__level--active .navMain__parent {
		color: #fff;
	}
	
	
	
	
	
	
	
	.navMain__bottom {
		align-items: end;
		padding-bottom: 2em;
		
		font-family: var(--fontFamily2);
		font-weight: 500;
	} 
	
		.navMain__bottom nav {
			grid-column: var(--wrapper__gridOffsetLeft) / span 7;
		}
			
			.navMain__bottom nav ul {
				display: flex;
				gap: 2em;
				list-style: none;
			}

			.navMain__bottom nav a {
				text-decoration: none
			}
			
		
		.navMain__bottom .socialMedia {
			grid-column: 10 / -2;
			justify-content: flex-end;
		}
	
	.fundings {
		gap: 6em;
	}
	
	.imgbg--right:after {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+80,0.3+100,0.3+100 */
		background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 90%,rgba(0,0,0,0.7) 100%); 
	}
	
	.imgbg--left:after {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.3+0,0.3+0,0.3+20,0+100 */
		background: linear-gradient(to right,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 10%,rgba(0,0,0,0) 100%); 
	}
	
	.imgbg--left.sTeaser header {
		grid-column: var(--wrapper__gridOffsetLeft) / 6;
		text-align: left;
	}
	.imgbg--left.sTeaser > a {
		grid-column: var(--wrapper__gridOffsetLeft) / 6;
		text-align: left;
	}
	
	.navFoot {
		grid-column: var(--wrapper__gridOffsetLeft) / span 7;
		grid-row: 2;
	}
	
		.navFoot ul {
			display: flex;
			gap: 1em;
		}
	
	.footer .socialMedia {
		grid-column: span 5;
		grid-row: 2;
		
		margin-top: 0;
		justify-content: flex-end;
		align-items: flex-end;
	}
	
	.navSec ul {
		flex-direction: row;
	}
	
	
	
	
	
	
	
	.aSearch--widget {
		position: absolute;
		bottom: 4em;
		left: 50%;
		z-index: 6;
		
		transform: translateX(-50%);
	}
	
		.l2Headline .aSearch--widget {
			bottom: 1em;
		}
		
		
	
	.aSearch--widget > button {
		display: none;
	}
	
	.aSearch > p {
		text-align: center;
		/* max-width: 60ch; */
		margin-left: auto;
		margin-right: auto;
		font-size: 0.8em;
	}
	
	.aSearch--widget h2 {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px; 
	}
	
	.aSearch form {
		display: flex;
		justify-content: center;
		gap: 1em;
	}
	
	.aSearch button {
		margin-top: 0;
	}
	
	.aSearch fieldset {
		display: flex;
		justify-content: center;
		padding: 0.5em;
		
		background-color: #fff;
		border-radius: 2em;
	}
	
	.aSearch fieldset > * + * {
		margin-top: 0;
		margin-left: 1em;
		padding-left: 1em;
		
		border-left: 1px solid var(--color__red);
	}
	
	.aSearch input[type="number"] {
		width: 9em;
	}
	
	#btnToggleAccSearch {
		display: none;
	}
	
	
	
	
}


@media (min-width: 100em) {
	.header__right {
		right: 0;
	}
	
	.header__navMain ul {
		gap: clamp(1em, 2.5vw, 6em);
	}
	
	.inlineGallery > * {
		grid-column: span 5;
	}
	.inlineGallery > *:nth-child(2n+1) {
		grid-column: calc(var(--wrapper__gridOffsetLeft) + 1) / span 5;
	}
}