:root {
	--hslColor--green: 188 56% 18%;
	--hslColor--green--light: 188 12% 58%;
	--hslColor--black: var(--hslColor--green);
	--hslColor--brown: 13 23% 49%;
	--hslColor--pastel: 16 22% 90%;
	
	--color__green: hsl(var(--hslColor--green));
	--color--green--light: hsl(var(--hslColor--green--light));
	--color__black: hsl(var(--hslColor--black));
	--color__brown: hsl(var(--hslColor--brown));
	--color__pastel: hsl(var(--hslColor--pastel));
	--color__red: #FF4136;
	
	--color__select: #343eb3;

	--family1: "Raleway", sans-serif;
	--family2: "Playfair Display", serif;
	--family3: "Cinzel", serif;
	
	
			--size-2: 0.8rem;
		--size-1: 0.9rem;
	--size0: 19px;
		--size1: 1rem;
		--size1l: 1.1rem;
			--size2: 1.3rem;
				--size3: 1.5rem;
					--size4: 2rem;
						--size5: 2.5rem;
	
	
		--fontLight: 400;
	--fontNormal: 400;
		--fontSemiBold: 550;
			--fontBold: 700;
			
	--lineHeight1: 1.3;
	--lineHeight2: 1.8;

	--flow-space: 1em;
	
	--spacer: 1rem;
	
				--spacing-2: calc(var(--spacer) * 0.25);
			--spacing-1: calc(var(--spacer) * 0.5);
		--spacing: var(--spacer);
			--spacing0: var(--spacer);
				--spacing1: calc(var(--spacer) * 1.5);
					--spacing2: calc(var(--spacer) * 3);
						--spacing3: calc(var(--spacer) * 4);
	  
	--theme--spacing: var(--spacing2);
	  
	--subgrid-toggle: subgrid; 
	/* --grid-toggle: grid; */
		--w__gridOffsetLeft: 2;
		--w__gridOffsetRight: -2;
		--w__gridGap: 0.5em;
	--w__gridColumn: 80px;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a77668+0,ccaf96+100 */
	--gradientBrown1: linear-gradient(to right, hsla(13,26%,53%,1) 0%,hsla(28,35%,69%,1) 100%); 
	
	--layout2divider: 9;
	--staggeredTiming: 200ms;
}









/*
  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;
	
	font-size: var(--size0);
}

/* 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 */
	color: var(--color__black);
	
	
	font-family: var(--family1);
	line-height: var(--lineHeight2);
}

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

:where(img, svg, 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;
}

/* SVG's without a fill attribute */
:where(svg):where(:not([fill])) {
	/* Remove fill and set stroke colour to the inherited font colour */
	stroke: currentColor;
	fill: none;
	/* Rounded stroke */
	stroke-linecap: round;
	stroke-linejoin: round;
}

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

/* 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;
}







.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: #fff;
}

.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;
	flex: 0 0 auto;
}


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

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

	.masterWrapper__body {
		flex: 1 1 auto;
	}


.wrapper__masterLayout {
	flex: 1 0 auto;
}

.w {
	--w-layout: var(--spacing-1) repeat(10, minmax(1em, 1fr)) var(--spacing-1);
	
	display: grid;
	grid-template-columns: var(--w-layout);
	
	align-content: start; 
	column-gap: var(--w__gridGap);
}

	:where(.w > *) {
		grid-column: var(--w__gridOffsetLeft, 1) / var(--w__gridOffsetRight, -1);
	}
 
.ws { 
	--ws-layout: repeat(10, minmax(1em, 1fr));
	
	display: grid;
    column-gap: var(--w__gridGap);
	grid-template-columns: var(--ws-layout);
}

	/*🤬 safari 🤮*/
	@supports (grid-template-columns: subgrid) {
		.ws {
			grid-template-columns: var(--subgrid-toggle, var(--ws-layout));
			column-gap: inherit;
		}
	}


	:where(.ws > *) {
		grid-column: 1 / -1;
	}

	.ws--F {
		--w__gridOffsetLeft: 1;
		--w__gridOffsetRight: -1;
		
		grid-template-columns: var(--w-layout);
	}
	
		:where(.ws--F > *) {
			grid-column: calc(var(--w__gridOffsetLeft, 1) + 1) / calc(var(--w__gridOffsetRight, -1) - 1);
		}
	
	
	.ws--D, 
	.ws--C, 
	.ws--B, 
	.ws--A {
		--w__gridOffsetLeft: 2;
		--w__gridOffsetRight: -2;
		--ws-layout: repeat(8, minmax(1em, 1fr));
		
		grid-template-columns: var(--ws-layout);
	}
	
	@supports (grid-template-columns: subgrid) {
		.ws--D, 
		.ws--C, 
		.ws--B, 
		.ws--A {
			grid-template-columns: var(--subgrid-toggle, var(--ws-layout));
		}
	}

	

[id] {
  scroll-margin-top: 3em; 
}


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


:where(.section.theme) {
	padding-top: var(--theme--spacing);
	padding-bottom: var(--theme--spacing);
}

	.theme--white + .theme--white {
		padding-top: 0;
	}

	/*
	.section.theme--white:last-child {
		padding-bottom: 0;
	}
	*/

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

.theme--brown {
	background-color: var(--color__brown);
	color: #fff;
}

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

.theme--pastel {
	background-color: var(--color__pastel);
}



.more {
	font-size: var(--size0);
	font-weight: var(--fontSemiBold);
	text-decoration: none;
}

.gimmick1 {
	position: relative;
	
	view-timeline-name: --self;
	view-timeline-axis: block;

	animation: scrollProgress 1s linear both;
	animation-timeline: --self;
	animation-range: entry 30% exit 60%;
}

.gimmick1::after {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 2px;
	height: 0%;
	
	background-color: var(--colorLine, currentColor);
	content: "";
}

	.gimmick1--animated::after {
		height: calc(var(--progress) * 1%);
	}

	.gimmick1--static::after {
		height: 100%;
	}
	
	
	

@property --progress {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}



@keyframes scrollProgress {
	from { --progress: 0;   }
	to   { --progress: 100; }
}















.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; 
}














a {
	color: inherit;
	transition: color .3s;
	text-underline-offset: .2em;
}

h1 {
	font-size: var(--size5);
	font-weight: var(--fontLight);	
	line-height: var(--lineHeight1);
}

h2 {
	font-size: var(--size3);
	font-weight: var(--fontNormal);
	line-height: var(--lineHeight1);
}

h3 {
	font-size: var(--size2);
	font-weight: var(--fontNormal); 
	line-height: var(--lineHeight1);
}



:where(.b) {
	display: inline-block;
	margin: 0;
	
	border: 0;
	background-color: transparent;
	text-decoration: none;
}

	.b {
		transition: color .3s, background-color .3s, border-color .3s;
	}
	
	.b:has(> .icon) {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-1);
	}


	.b--back .icon {
		transform: rotate(180deg);
	}

	.b--icon {
		aspect-ratio: 1 / 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.3em;
	}
	
		.b--icon .icon {
			width: 1.3em;
			height: 1.3em;
		}
	
	.b--primary {
		--primary: var(--color__brown);
		--secondary: #fff;
		
		padding: 0.6em 1em;
		
		color: var(--secondary);
		border: 1px solid var(--primary);
		background-color: var(--primary);
		text-transform: uppercase;
		white-space: nowrap;
	}
	
		.b--primary:hover {
			--primary: var(--color__green);
		}
	
	.b--circle {
		--primary: var(--color__turkiz);
		--secondary: #fff;
		
		width: 2em;
		
		color: var(--secondary);
		border: 1px solid var(--primary);
		border-radius: 50%;
		background-color: var(--primary);
	}
	
	.b--ghost {
		background-color: transparent;
		color: var(--primary);
	}
	
		.b--ghost:hover {
			background-color: var(--primary);
			color: var(--secondary);
		}
	
	.b--rounded {
		border-radius: 2em;
	}
	
	.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__turkiz);
		color: #fff;
		content: attr(data-tooltip);
	}


	


.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	
	align-items: center;
	padding-top: var(--spacing);
}

.header__logo {
	position: fixed;
	top: var(--spacing);
	left: var(--spacing);
	z-index: 100;
	
	width: clamp(5rem, 30vw, 9rem);
	transition: transform .5s, opacity .5s;
}


#btnMenu {
	position: fixed;
	top: var(--spacing);
	right: var(--spacing);
	
	grid-column: span 2 / -2;
	justify-self: end;
	
	width: 3em;
	aspect-ratio: 1;
	z-index: 110;
	
	background-color: var(--color__green);
	border-radius: 50%;
	transition: transform .3s ease-in-out, background-color .3s;
}

	#btnMenu:hover {
		background-color: var(--color__brown);
	}
	
	#btnMenu:hover::after {
		top: 38%;
	}

	#btnMenu:hover:before {
		top: 62%;
	}
	
	

#btnMenu:before, 
#btnMenu::after {
	position: absolute;
	
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	
	width: 60%;
	height: 3px;
	
	background-color: #fff;
	border-radius: 2px;
	content: "";
	
	transition: top .3s, transform .6s;
}

	#btnMenu::after {
		top: 42%;
	}

	#btnMenu:before {
		top: 58%;
	}

#btnMenu[aria-expanded="true"] {
	transform: rotate(180deg);
	transition: transform .6s ease-in-out, background-color .3s;
	background-color: var(--color__green);
}

	#btnMenu[aria-expanded="true"]:hover {
		background-color: var(--color__brown);
	}

	#btnMenu[aria-expanded="true"]::after {
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	#btnMenu[aria-expanded="true"]:before {
		top: 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

#nav {
	--staggeredTiming: 100ms;
	--staggeredOffset: 0.3s;
	
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	
	flex-direction: column;
	gap: var(--spacing1);
	width: 100vw;
	max-width: 36rem;
	height: 100dvh;
	padding: var(--spacing2);
	overflow: auto;
	
	-ms-overflow-style: none;
	scrollbar-width: none;
	
	transform: translateX(100%);
	
	background-color: var(--color__black);
	color: #fff;
	font-size: var(--size2);
	line-height: 1.3;
	
	transition: transform .5s;
	
}

	#nav::-webkit-scrollbar {
		display: none;
	}

#nav[hidden] {
	display: flex;
}

	.menu #nav {
		transform: translateX(0);
	}

	body.menu::after {
		position: fixed;
		inset: 0;
		z-index: 10;

		background-color: hsl(var(--hslColor--green) / 0.4);	
		mix-blend-mode: multiply;
		
		content: "";
	}
	
#nav a { 
	text-decoration: none;
	
}

	#nav > ul:first-child {
		font-size: var(--size3);
	}
	
	#nav > ul li {
		transform: translateX(-2em);
		opacity: 0;
		
		transition-property: transform, opacity;
		transition-duration: 0.5s, 0.5s;
		transition-timing-function: ease-out, ease-out;
		transition-delay: calc((var(--staggeredStep, 0) * var(--staggeredTiming)) + var(--staggeredOffset, 0));
	}
	
	#nav > ul > li + li {
		margin-top: 0.4em;
	}
	
	#nav > ul li ul li + li {
		margin-top: 0.7em;
	}
	
	#nav > ul li ul {
		margin-top: 0.5em;
	}
	
	.menu #nav > ul li { 
		transform: translateX(0);
		opacity: 1;
	}

	#nav > ul:first-child > li:first-child {
		margin-bottom: 1em;
		color: var(--color__green--light);
		font-size: 1rem;
	}

	#nav li.active > a, 
	#nav a:hover { 
		color: var(--color__brown);
	}
	
	#nav ul ul {
		overflow: hidden;
		max-height: 0;
		transition: max-height 0.5s ease;
		
		padding-left: 1em;
		font-size: 0.6em;
		border-left: 1px solid var(--color__brown);
	}
	
	#nav > ul a.opened + ul {
		max-height: 800px;
	} 

#nav > ul:last-child {
	color: var(--color__green--light);
}

.navSec {
	font-size: var(--size2);
}


.scrolled .header__logo {
	transform: translateY(-120%);
	opacity: 0;
}











.wNewsEntry {
	text-decoration: none;
}

.wNewsEntry h3 {
	transition: color .3s;
}

	.wNewsEntry:hover h3 {
		color: var(--color__brown);
	}

.wNewsEntry h3 {
	margin: var(--spacing-1) 0;
	font-weight: var(--fontSemiBold); 
}

.wNewsEntry__cover {
	overflow: hidden;
}

.wNewsEntry__cover img {
	transition: transform .3s;
}

.wNewsEntry__cover:hover img {
	transform: scale(1.05);
	transition: transform 0.9s ease-out;
}


.accordion {
	--flow-space: 0.7em;
}

.accordion h2 {
	font-size: 1em;
}

.accordion h3 {
	font-size: var(--size0);
	font-weight: var(--fontBold);
}

	.accordion * + h3 {
		margin-top: 2em;
	}

.accordion details + details {
	margin-top: var(--spacing1);
}

.accordion summary {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	
	font-size: var(--size2);
	font-weight: var(--fontSemiBold);
	color: var(--color__brown);
}

	.accordion summary:hover {
		color: #fff;
	}

.accordion summary .icon {
	margin-left: auto;
	transform: rotate(90deg);
	fleX: 0 0 auto;
	
	transition: transform .3s;
} 


details > summary {
	list-style: none;
	transition: color .3s;
}

details summary::-webkit-details-marker {
	display:none;
}


	


details > div {
	padding-right: 2rem;
	margin-top: 0.5em;
	font-size: var(--size1);
}

details[open] > summary {
	color: #fff;
}

details[open] > summary .icon {
	transform: rotate(-90deg);
} 








.layout4, 
.layout2 {
	--leftOffset: 2;
	--pageOffset: 10em;
	--staggeredTiming: 300ms;
	
	align-content: start;
	
	padding-top: var(--pageOffset);
}

	.layout4__content h2 {
		text-transform: uppercase;
	}

	.layout2.gimmick1::after {
		grid-column-start: var(--leftOffset);
		grid-row-start: 3;
		background-color: var(--color__brown);
	}
	
	.layout4.gimmick1::after {
		grid-column-start: var(--leftOffset);
		grid-row-start: 2;
		background-color: var(--color__brown);
	}
	
		.layout4.gimmick1.animate::after, 
		.layout2.gimmick1.animate::after {
			height: 0;
			
			transition-property: height;
			transition-duration: 1.5s;
			transition-timing-function: ease;
			transition-delay: calc(5 * var(--staggeredTiming));
		}
		
		.layout4.gimmick1.animated::after, 
		.layout2.gimmick1.animated::after {
			height: calc(var(--progress) * 1%);
		}
	
	.layout2:has(.layout2__pretitle) {
		padding-top: 0;
	}
	

.layout2__pretitle {
	padding-top: var(--pageOffset);
}

.layout4 h1, 
.layout2 h1 {
	grid-column-start: var(--leftOffset);
	margin: var(--spacing1) 0 var(--spacing2) 0;
	
	text-transform: uppercase;
	margin-left: -0.1em; 
}

.layout4 h1, 
.layout2 h1, 
.layout2__pretitle {
	color: var(--color__brown);
}

.layout2__pretitle a {
	position: relative;
	overflow: hidden;
	padding-left: 0;
	
	color: var(--color__black);
	
	transition: padding-left .5s;
}

	.layout2__pretitle a .icon {
		position: absolute;
		left: -2rem;
		transform: rotate(180deg);
		
		transition: left .5s;
	}
	
	.layout2__pretitle a:hover {
		padding-left: 2rem;
		color: var(--color__brown);
	}
	
	.layout2__pretitle a:hover .icon {
		left: 0rem;
	}

.layout2__cover {
	align-self: stretch;
	margin-bottom: var(--spacing2);
}

.storitev--l1 .layout2__cover {
	display: none;
}

	.layout2__cover img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}

.layout2__info {
	padding-bottom: var(--spacing2); 
}


.layout2__cover, 
.layout2__intro, 
.layout2__content {
	grid-column-start: var(--leftOffset);
	margin-left: var(--spacing1);
	
	font-size: var(--size1);
}



.layout4__content + .layout4__content {
	margin-top: var(--spacing3);
}

.layout4 > * {
	margin-left: var(--spacing1);
}

.layout2__intro {
	font-size: var(--size1l);
}

.layout2__intro + .layout2__content {
	margin-top: var(--spacing1);
}

.layout2 .bWrap {
	grid-column-start: var(--leftOffset);
	grid-column-end: -2;
	justify-self: start;
	margin-top: var(--spacing1);
	margin-bottom: var(--spacing1);
	margin-left: var(--spacing1);
	
	display: flex;
	flex-direction: column;
	gap: 1em;
	
	max-width: 18em;
}













/** 2 grid column staggered */
.layout3 {
	grid-column: 3 / -1;
	
	display: grid;
	gap: var(--spacing2);
	padding-bottom: var(--theme--spacing);
}





.layout1 {
	display: grid;
	gap: var(--spacing1); 
	--staggerDelay: 0.5s;
}

	.layout1 > * {
		position: relative;
		
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		overflow: hidden;
	}

	.layout1 > * > * {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	
	.layout4 h1, 
	.layout2 h1 {
		font-size: var(--size3);
	}
	
	.layout1 > * > img {
		transition: transform .3s;
		width: 100%;
		height: 100%;
		
		object-fit: cover;
		aspect-ratio: 2 / 3;
	}
	
	.layout1 > * > div {
		position: absolute;
		bottom: var(--spacing1);
		left: 50%;
		transform: translateX(-50%);
		
		display: flex;
		flex-direction: column;
		gap: 0.7em;
		
		width: calc(100% - var(--spacing1) * 2);
		padding: var(--spacing);
		
		background-color: hsla(var(--hslColor--brown) / 0.9); 
		transition: background-color .3s;
	}
	
	.layout1 h3 {
		font-size: var(--size2);
		font-weight: var(--fontNormal);
	}
	
	.layout1 p {
		font-size: var(--size1);
		line-height: var(--lineHeight1);
		opacity: 0.7;
	}
	
	.layout1 .b {		
		align-self: flex-end;
		color: var(--color__black);
	}
	
	.layout1 > *:hover > img {
		transform: scale(1.05);
		transition: transform 0.9s ease-out;
	}
	
	.layout1 > *:hover > div {
		background-color: hsla(var(--hslColor--green) / 0.9); 
	}
	
	.layout1 > *:hover .b {
		color: var(--color__brown);
	}







.wDarilniBon {
	padding-top: var(--theme--spacing);
	padding-bottom: var(--theme--spacing);
}

.wDarilniBon__inner {	
	position: relative;
	overflow: hidden;
	padding: var(--spacing2) var(--spacing1);
	
	background: var(--gradientBrown1);
	color: #fff;
	font-size: var(--size3);
	line-height: var(--lineHeight1);
	text-decoration: none;
}

.wDarilniBon__inner p .icon {
	display: inline;
	margin-left: 0.7em;
	
	vertical-align: middle;
	color: var(--color__brown);
}

.wDarilniBon .watermark {
	position: absolute;
	right: var(--spacing2);
	top: 50%;
	transform: translateY(-50%);
	
	height: 80%;
	
	opacity: 0.2;
}







.footer {
	padding-top: var(--theme--spacing);
	padding-bottom: var(--spacing1);
}

	.footer.gimmick1::after {
		grid-column-start: 2;
		top: calc(var(--spacing2) * -1);
		background-color: var(--color__brown);
	}
	
	.footer a:hover {
		color: var(--color__brown);
	}

.footer__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing2);
}

.footer__row + .footer__row {
	margin-top: var(--spacing2);
}

.footer__row--nav div {
	grid-column: 1 / -1;
}

.footer__column--left {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing1);
	order: 2;
}

.footer__logo { 
	width: 12em;
}

.footer__sm {
	display: flex;
	gap: var(--spacing);
	
	color: var(--color__brown);
	font-size: var(--size1);
}

	.footer__sm a {
		border: 1px solid var(--color__brown);
		border-radius: 50%;
	}

		.footer__sm a:hover {
			color: #fff;
		}

.footer nav {
	font-size: var(--size-2);
	text-decoration: none;
	text-align: center;
}

	.footer nav a {
		text-decoration: none;
	}
	
	.footer nav li.active {
		color: var(--color__brown);
	}

.copyright {
	font-size: var(--size-2);
	color: var(--color__green--light);
}

.footer__column--right {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.footer__column--right a {
	text-decoration: none;
}

.footer__column--right a[href^="mailto"] {
	font-weight: var(--fontBold);
	font-size: var(--size1l);
}

.footer__column--right p:last-child {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3em;
}

.footer__column--right p:last-child a {
	color: var(--color__brown);
	text-transform: uppercase;
	font-size: var(--size-2);
}



#wPosvet {
	position: fixed;
	right: var(--spacing);
	bottom: var(--spacing);
	z-index: 110;
	
	aspect-ratio: 1;
	width: 6em;
	padding: 0.5em;
	
	border: 2px solid var(--color__brown);
	border-radius: 50%;
	font-size: clamp(1em, 2.5vw, 1.3em);
	
	transition: background-color .3s;
	backdrop-filter: blur(5px);
}

	#wPosvet:hover {
		border-color: var(--color__brown);
		background-color: var(--color__brown);
	}
	
	#wPosvet:hover img {
		filter: brightness(0) invert(1);
	}

#wPosvet > div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3em;
	height: 3em;
	padding: 0.8em;
	
	border-radius: 50%;
	background-color: var(--color__brown);
	transition: background-color .3s;
}

#wPosvet > div .icon {
	font-size: 2em;
	color: #fff;
}

#wPosvet img {
	animation-name: rotate;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	transition: filter .3s;
}

@keyframes rotate {
	from { transform: rotate(0deg); } 
	to { transform: rotate(360deg); }
}








.animate {
	transition-delay: calc(var(--staggeredStep, 0) * var(--staggeredTiming));
}

.animate--slideDown {
	transform: translateY(calc(var(--spacing3) * -1));
	opacity: 0;
	
	
	transition-property: transform, opacity;
	transition-duration: 1.5s, 0.7s;
	transition-timing-function: ease-out, ease-out;
}

	.animated.animate--slideDown {
		transform: translateY(0);
		opacity: 1;
	}

.animate--slideUp {
	transform: translateY(var(--spacing3));
	opacity: 0;
	
	transition-property: transform, opacity;
	transition-duration: 1.5s, 0.7s;
	transition-timing-function: ease-out, ease-out;
}

	.animated.animate--slideUp {
		transform: translateY(0);
		opacity: 1;
	}

.animate--slideLeft {
	transform: translateX(calc(var(--spacing3) * -1));
	opacity: 0;
	
	transition-property: transform, opacity;
	transition-duration: 1.5s, 0.7s;
	transition-timing-function: ease-out, ease-out;
}

	.animated.animate--slideLeft {
		transform: translateX(0);
		opacity: 1;
	}

.animate--blur {
	filter: blur(30px);
	
	transition-property: filter;
	transition-duration: 1.5s;
	transition-timing-function: ease;
}

	.animated.animate--blur {
		filter: blur(0);
	}

.animate--opacity {
	opacity: 0;
	
	transition-property: opacity;
	transition-duration: 1.5s;
	transition-timing-function: ease;
}

	.animated.animate--opacity {
		opacity: 1;
	}
















.wZavarovalnice {
	padding-top: var(--theme--spacing);
	padding-bottom: var(--theme--spacing);
	--flow-space: var(--spacing2);
	
	grid-column-start: var(--w__gridOffsetLeft);
	margin-left: var(--spacing1);
}

.wZavarovalnice__partnerji {
	display: flex;
	gap: var(--spacing1);
	flex-wrap: wrap;
}

.wZavarovalnice__partnerji img {
	height: 2.5em;
} 

.wZavarovalnice p {
	max-width: 60ch;
	margin-top: var(--spacing1);
} 







@media (max-width: 40em) {	
	.footer::after {
		display: none;
	}
	
	#wPosvet {
		transform: translateX(200%);
		transition: transform .5s;
	}
	
	.menu #wPosvet, 
	.scrolled #wPosvet {
		transform: translateX(0);
	}
}

@media (min-width: 40em) {
	.b--primary {
		padding: 0.6em 2em;
	}
	
	.w {
		--w-layout: 1em 1em repeat(10, minmax(1em, 1fr)) 1em 1em;
		grid-template-columns: var(--w-layout);
	}
	
	.ws {
		--ws-layout: 1em 1em repeat(10, minmax(1em, 1fr)) 1em 1em;
		grid-template-columns: var(--ws-layout);
	}
	
	@supports (grid-template-columns: subgrid) {
		.ws {
			grid-template-columns: var(--subgrid-toggle, var(--ws-layout));
			column-gap: inherit;
		}
	}
	
	.ws--A {
		--w__gridOffsetLeft: 2;
		--w__gridOffsetRight: -2;
	}
	
	.ws--D, 
	.ws--C, 
	.ws--B {
		--w__gridOffsetLeft: 3;
		--w__gridOffsetRight: -3;
	}
	
	.ws--F {
		--w__gridOffsetLeft: 1;
		--w__gridOffsetRight: -1;
		
		grid-template-columns: var(--w-layout);
	}
	
	.layout1 {
		grid-template-columns: repeat(2, 1fr); 
		padding-top: var(--theme--spacing);
		padding-bottom: calc(var(--theme--spacing) + var(--spacing2));
	}
	
	.layout1 > *:nth-child(2n+1) {
		top: var(--spacing2);
	}
	
	.layout1 > *:nth-child(2n+2) {
		transition-delay: var(--staggerDelay);
	}
	
	.layout2__extra {
		padding-top: var(--spacing2);
	}
	
	.layout3 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.layout3 a {
		position: relative;
	}
	
	.layout3 a:nth-child(2n+1) {
		top: var(--spacing3);
	}
}

@media (max-width: 48em) {	
	

	.storitev--l2 .layout2__cover {
		grid-column-start: 1;
		grid-column-end: -1;
		margin-left: 0;
	}
	
	.storitev--l2 .layout2__cover {
		aspect-ratio: 5 / 4;
	}
	
	.storitev .wZavarovalnice {
		grid-column-start: 2;
		margin-left: 0;
	}
	
	
	
}

@media (min-width: 48em) {	
	.layout2 {
		--pageOffset: 12em;
		--leftOffset: 3;
		
		grid-template-rows: auto auto 1fr;
		/* min-height: 100vh; */
	}
	
	.layout2__info {
		grid-column-start: var(--leftOffset);
		grid-column-end: var(--layout2divider);
	}
	
	.layout2__pretitle, 
	.layout2 h1 {
		grid-column-start: var(--leftOffset);
		grid-column-end: calc(var(--layout2divider) - 1);
	}
	
	
	.layout2__intro {
		grid-column-start: var(--leftOffset);
		grid-column-end: var(--layout2divider);
		
		margin-left: var(--spacing1);
		max-width: 36ch;
	}
	
	.layout2__cover {
		display: block;
		grid-row: 1 / span 3;
		grid-column: var(--layout2divider) / -1;
		margin-top: 0;
		margin-left: 0;
		margin-bottom: 0;
	}
	
	.storitev--l1 .layout2__cover {
		display: block;
	}
	
	.layout2__content, 
	.layout2 .bWrap {
		grid-column-start: var(--leftOffset);
		margin-left: var(--spacing1);
	}
	
	.layout2 .bWrap {
		margin-top: var(--spacing1);
	}
	
	.layout2__intro + .layout2__content {
		margin-top: var(--spacing2);
	}
	
	
	.layout2__extra {
		margin-left: var(--spacing1);
	}
	
	.layout4 {
		--pageOffset: 12em;
		--leftOffset: 3;
	}
	
	.layout4 > * {
		grid-column-start: var(--leftOffset);
	}

}

@media (min-width: 55em) {
	.layout1 {
		grid-template-columns: repeat(3, 1fr); 
	}
	
	.layout1 > *:nth-child(2n+1) {
		top: unset;
	}
	
	.layout1 > *:nth-child(2n+2) {
		transition-delay: unset;
	}
	
	
	
	.layout1 > *:nth-child(3n+1) {
		top: calc(var(--spacing2) * 2);
	}
	
	.layout1 > *:nth-child(3n+2) {
		top: var(--spacing2);
	}
	
	
	
	
	
	
	.layout1 > *:nth-child(3n+2) {
		transition-delay: var(--staggerDelay);
	}
	
	.layout1 > *:nth-child(3n+3) {
		transition-delay: calc(var(--staggerDelay) * 2);
	}
	
	
	.footer__row {
		--ws-layout: repeat(10, minmax(1em, 1fr));
		
		grid-column: 3 / -2;
		display: grid;
		grid-template-columns: var(--ws-layout);
		align-items: end;
	}
	
	@supports (grid-template-columns: subgrid) {
		.footer__row {
			grid-template-columns: var(--subgrid-toggle, var(--ws-layout));
			column-gap: inherit;
		}
	}
	
	
	.footer__column--left {
		grid-column: 1 / 4;
		order: unset;
	}
	
	.footer__column--right {
		grid-column: 4 / -1;
		align-items: flex-start;
		padding-left: var(--spacing2);
		text-align: left;
	}
	
	.footer.gimmick1::after {
		grid-column-start: 6;
	}
	
	.footer__column--right p:last-child {
		flex-direction: row;
		align-items: baseline;
		gap: var(--spacing1);
	}
	
	.wZavarovalnice {
		margin-left: 0;
	}
	
	.wZavarovalnice__partnerji img {
		max-height: 3em;
		max-width: 12em;
		object-fit: contain;
		object-position: center;
		display: block;
	} 
	
	.footer nav ul {
		display: flex;
		gap: 1em;
		justify-content: center;
	}
	
	.copyright {
		text-align: center;
	}
}

@media (min-width: 65em) {
	:root {
		--w__gridGap: 1em;
		--theme--spacing: calc(var(--spacing2) * 2);
		--layout2divider: 9;
	}
	
	.w {
		--w-layout: 1em 2em repeat(10, minmax(1em, 1fr)) 2em 1em;
		grid-template-columns: var(--w-layout);
	}
	
	.ws { 
		--ws-layout: 1em 2em repeat(10, minmax(1em, 1fr)) 2em 1em;
		grid-template-columns: var(--ws-layout);
	}
	
	.ws--F {
		--w__gridOffsetLeft: 1;
		--w__gridOffsetRight: -1;
		
		grid-template-columns: var(--w-layout);
	}
	
	@supports (grid-template-columns: subgrid) {
		.ws {
			grid-template-columns: var(--subgrid-toggle, var(--ws-layout));
			column-gap: inherit;
		}
		
		.ws--F {
			--w__gridOffsetLeft: 1;
			--w__gridOffsetRight: -1;
			
			grid-template-columns: var(--w-layout);
		}
	}
	
	
	
	
	.ws--D, 
	.ws--C {
		--w__gridOffsetLeft: 4;
		--w__gridOffsetRight: -4;
	}
	
	.header__logo {
		left: var(--spacing2);
	}
	
	#btnMenu {
		top: var(--spacing2);
		right: var(--spacing2);
	}
	
	.layout4 h1, 
	.layout2 h1 {
		font-size: var(--size4);
	}
	
	.layout4, 
	.layout2 {
		--pageOffset: 15em;
		--leftOffset: 3;
	}
	
	.layout2__info {
		grid-column-start: calc(var(--leftOffset) + 1);
		grid-column-end: calc(var(--layout2divider) - 1);
	}
	
	.layout2__extra {
		margin-left: 0;
		grid-column-start: calc(var(--leftOffset) + 1);
		grid-column-end: -3;
	}
	
	.layout2 .bWrap {
		flex-direction: row;
	}
	
	
	.layout4__content, 
	.layout2__content {
		grid-column-start: calc(var(--leftOffset) + 1);
		grid-column-end: -5;
		margin-left: 0;
	}
	
	.layout2__intro {
		grid-column-start: calc(var(--leftOffset) + 1);
		margin-left: 0;
	}
	
	.layout2 .bWrap {
		margin-left: 0;
		grid-column-start: calc(var(--leftOffset) + 1);
	}
	
	.wDarilniBon__inner {
		display: grid;
		padding: calc(var(--spacing2) * 2);
		
		font-size: var(--size2);
	}
	
	
	
	.wDarilniBon__inner p {
		grid-column: 3 / -2;
	}
	
	.wDarilniBon .watermark {
		right: auto;
		left: 3%;
		top: 50%;
		
		height: 120%;
	}
	
	.wZavarovalnice {
		padding-top: var(--theme--spacing);
		padding-bottom: var(--theme--spacing);
		grid-column-start: var(--w__gridOffsetLeft);
	}
	
	
	
	.footer__row { 
		--ws-layout: 1em 2em repeat(10, minmax(1em, 1fr)) 2em 1em;
		grid-template-columns: var(--ws-layout);
		
		grid-column: 3 / -3;
	}
	
	@supports (grid-template-columns: subgrid) {
		.footer__row {
			grid-template-columns: var(--subgrid-toggle, var(--ws-layout));
			column-gap: inherit;
		}
	}
	
	.footer__column--left {
		grid-column: 2 / 5;
	}
	
	.footer__column--right {
		grid-column: 5 / -1;
	}
	
	.footer.gimmick1::after {
		grid-column-start: 7;
	}
}

@media (min-width: 75em) {
	:root {
		--layout2divider: 11;
	}
	
	.w {
		grid-template-columns: 
			1fr
				80px
					30px
						repeat(12, minmax(1em, var(--w__gridColumn))) 
					30px
				80px
			1fr;
	}
	
	.ws { 
		/* --ws-layout: 1fr 80px 30px repeat(12, minmax(1em, var(--w__gridColumn))) 30px 80px 1fr; */
		--ws-layout: 30px repeat(12, minmax(1em, var(--w__gridColumn))) 30px;
		grid-template-columns: var(--ws-layout);
	}
	
	.ws--F {
		--w__gridOffsetLeft: 1;
		--w__gridOffsetRight: -1;
		
		grid-template-columns: var(--w-layout);
	}

	@supports (grid-template-columns: subgrid) {
		.ws {
			grid-template-columns: var(--subgrid-toggle, var(--ws-layout));
			column-gap: inherit;
		}
		
		.ws--F {
			--w__gridOffsetLeft: 1;
			--w__gridOffsetRight: -1;
			
			grid-template-columns: var(--w-layout);
		}
	}
	
	.ws--A {
		--w__gridOffsetLeft: 3;
		--w__gridOffsetRight: -3;
	}
	
	.ws--B {
		--w__gridOffsetLeft: 4;
		--w__gridOffsetRight: -4;
	}
	
	.ws--C {
		--w__gridOffsetLeft: 4;
		--w__gridOffsetRight: -4;
	}
	
	.ws--D {
		--w__gridOffsetLeft: 5;
		--w__gridOffsetRight: -6;
	}
	
	
	
	
	#nav {
		max-width: 50vw;
		padding: calc(var(--spacing3) * 2);
		font-size: var(--size3);
	}
	
	.layout1 {
		grid-column-start: 3;
	}
	
	.layout4, 
	.layout2 {
		--leftOffset: 4;
	}
	
	.layout3 {
		grid-column-end: -2;
		
	}
	
	
	
	
	.footer__logo { 
		width: 15em;
	}
	
	.footer__column--left {
		grid-column: 3 / 7;
	}
	
	.footer__column--right {
		grid-column: 8 / -1;
	}
	
	.footer.gimmick1::after {
		grid-column-start: 9;
		left: 65px;
	}
	
	.footer__sm {
		font-size: var(--size1l);
	}
}

@media (min-width: 90em) {
	:root {
				--size-2: 0.8rem;
			--size-1: 0.9rem; 
		--size0: 22px;
			--size1: 1rem;
			--size1l: 1.3rem;
				--size2: 1.5rem;
					--size3: 2rem;
						--size4: 2.5rem;
							--size5: 3rem;
	}
	
	.layout1 {
		grid-column-end: -3;
	}
	
	
	
	.layout1 > * > div {
		bottom: var(--spacing2);
		width: calc(100% - var(--spacing1) * 2);
		padding: var(--spacing1);
	}
	
	
	
}

@media (min-width: 100em) {
	.w {
		--w-layout: 1fr 100px 30px repeat(12, minmax(1em, 97px)) 30px 100px 1fr;
		grid-template-columns: var(--w-layout);
	}
	
	.ws { 
		--ws-layout: 100px 30px repeat(12, minmax(1em, 97px)) 30px 100px;
		grid-template-columns: var(--ws-layout);
	}
	
	.ws--F {
		--w__gridOffsetLeft: 1;
		--w__gridOffsetRight: -1;
		
		grid-template-columns: var(--w-layout);
	}
	
	@supports (grid-template-columns: subgrid) {
		.ws {
			grid-template-columns: var(--subgrid-toggle, var(--ws-layout));
			column-gap: inherit;
		}
		
		.ws--F {
			--w__gridOffsetLeft: 1;
			--w__gridOffsetRight: -1;
			
			grid-template-columns: var(--w-layout);
		}
	}
	
	.layout1 h3 {
		font-size: var(--size2);
	}
	
	.layout2__extra {
		grid-column-end: -6;
	}
	
	.layout4__content, 
	.layout2__content {
		grid-column-end: -6;
	}
}