:root {
	--color__green: #A2C02F;
	--color__black: #231F20;
	--color__gray: #adb0ae;
	--color__silver: #EBEDEC;
	--color__text: #231F20;
	--color__red: #E23D28;
	
	--color__facebook: #40569a;
	--color__linkedin: #2277ab;
	
	--color__select: #343eb3;
	
	--wrapper__bodyPadding: 1.5rem;
	--wrapper__padding: 3em;
	--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;
	--subgrid: subgrid;
	--iconSize: 1.8em;
	--buttonFontSize: 0.9rem;
	
	--family1: "Source Sans 3", sans-serif;
	--family2: "Source Sans 3", sans-serif;
	/* --family2: "Lora", serif; */
	
	--size-2: 0.7em;
	--size-1: 0.8em;
	--size0: 1em;
	--size1: 2.5em;
	--size2: 2.2em;
	--size3: 1.4em;
	--size4: 1.2em;
}

/*
  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;
	/* Calc `em` based line height, bigger line height for smaller font size and smaller line height for bigger font size: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
	line-height: calc(0.3rem + 1em + 0.3rem);
}

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

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

:where(img, svg, video) {
	max-width: 100%;
	height: auto;
}

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

/* Fix h1 font size inside article, aside, nav, and section */
h1 {
	font-size: var(--size1);
}

/* 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: $color__turkiz;
	color: var(--color__text);
}

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

*['hidden'] {
	display: none;
}







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

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

.masterWrapper__body {
	flex: 1 1 auto;
}
	
	
	
	.masterWrapper__body.w {
		padding-top: 0;
	}
	
	.masterWrapper__body > *:first-child {
		padding-top: 6em;
	}

.wrapper__masterLayout {
	flex: 1 0 auto;
}

.w {
	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);
}

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

	.ws { 
		display: grid;
		grid-template-columns: subgrid;
	}
	
		:where(.ws > *), 
		.ws__inner, 
		.ws__A {
			grid-column: var(--wrapper__gridOffset);
		}
		
		.ws__B {
			grid-column: calc(var(--wrapper__gridOffsetLeft) + 1) / calc(var(--wrapper__gridOffsetRight) - 1);
		}
	
	.ws--pad {
		padding: var(--wrapper__padding) 0;
	}




@media (min-width: 23rem) {
	:root {
		--wrapper__bodyPaddingInner: var(--wrapper__bodyPadding);
	}
	
	.w {
		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: 37rem) {
	.masterWrapper__body > *:first-child {
		padding-top: 8em;
	}
} 

@media (min-width: 65rem) {
	:root {
		--wrapper__gridGap: 1em;
		--bodyOffset: 3rem;
		--wrapper__gridOffsetLeft: 3;
		--wrapper__gridOffsetRight: -3;
	}
	
	body {
		font-size: 1.1em;
		color: var(--color__text);
	}
	
	
	
	.ws__C {
		grid-column-end: -5; 
	}
	
	.ws--pad {
		padding: calc(var(--wrapper__padding) * 2) 0 calc(var(--wrapper__padding) * 2) 0;
	}
	
	.pageHeadline.theme--white {
		padding-bottom: var(--wrapper__padding);
		
	}
}

@media (min-width: 100rem) {
	body {
		font-size: 1.2em;
	}
	
	.w {
		grid-template-columns: 
			1fr
			calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap)) 
			repeat(12, minmax(1em, 94px)) 
			calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap)) 
			1fr;
	}
}

@media (min-width: 120rem) {
	.w {
		grid-template-columns: 
			1fr
			calc(var(--wrapper__bodyPadding) * 2)
			repeat(12, minmax(1em, 94px)) 
			calc(var(--wrapper__bodyPadding) * 2)
			1fr;
	}
}

.flow > * + * {
	margin-block-start: var(--flow-space, 1em);
}

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









body {
	font-family: var(--family1);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

p {
	margin: 0;
}

strong, b {
	font-weight: 600;
}

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

h2, h3 {
	font-weight: 450;
}

h2 {
	font-size: var(--size2);
}

h3 {
	font-size: var(--size3);
}









.header {
	--gap: 1rem;
	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: var(--wrapper__bodyPadding);
	
	font-family: "Source Sans 3", sans-serif;
}

	.header .nav ul {
		list-style: none;
	}

.nav--main {
	font-weight: 700;
	font-size: 1.7em;
}

.nav--sec {
	font-weight: 350;
	font-size: 1.5em;
}

#btnMenu {
	position: fixed;
	z-index: 110;
	top: calc(var(--wrapper__bodyPadding) * 3.5);
	right: var(--wrapper__bodyPadding);
	
	font-size: var(--iconSize);
	
	transition: top .5s;
}

	#btnMenu [hidden] {
		display: none;
	}
	
	.mobileMenu #btnMenu.b--green {
		--color1: var(--color__green);
		--color2: transparent;
	}
	
	.mobileMenu #btnMenu, 
	.scrolled #btnMenu {
		top: calc(var(--wrapper__bodyPadding) * 1);
	}
	

#nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100dvh;
	z-index: 100;
	
	display: flex;
	gap: 1em;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	padding: 0 15%;
	transform: translate(100%);
	
	background-color: var(--color__silver);
	transition: transform .5s ease-in-out;
}


	#nav[aria-hidden="false"] {
		transform: translate(0);
		transition: transform 1s;
	}
	
	.nav a {
		display: inline-block;
		padding: 0.3em 0.5rem 0.3em 0;
		
		text-decoration: none;
		color: inherit;
		transition: color .3s;
	}
	
		.nav .active a, 
		.nav a:hover {
			color: var(--color__green);
		}

	@media (max-height: 600px) {
		#nav {
			--flow-space: 0;
		}
		
		.nav a {
			padding: 0.1em 0.5rem 0.1em 0;
		}
	}
	

.header__logos {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--gap);
}

	.logo--om {
		position: relative;
		width: clamp(15rem, 100%, 28rem); 
	}

.language {
	font-size: var(--size-1);
}

	#nav .language a {
		color: var(--color__green);
		text-decoration: none;
	}
	
	#nav .language a:hover {
		color: var(--color__text);
	}

.b.siteSearch {
	position: relative;
	margin-left: calc(var(--gap) / 2);
}

	.siteSearch:after {
		position: absolute;
		left: calc(var(--gap) / 2 * -1);
		top: 50%;
		transform: translateY(-50%);
		
		width: 1px;
		height: 1em;
		
		background-color: var(--color__gray);
		content: "";
	}








.b {
	display: inline-block;
	margin: 0;
	
	border: 0;
	background-color: transparent;
	color: inherit;
}

	.b--regular {
		padding: 1.5em 2.3em;
		
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 500;
		font-size: var(--buttonFontSize);
		line-height: 1;
		border-radius: 1em;
		white-space: nowrap;
		transform: scale(1);
		transition: transform .3s; 
	}
	
	.b--ghost {
		padding: 1.2em 1.7em;
		
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 500;
		font-size: var(--buttonFontSize);
		line-height: 1;
		border-radius: 1em;
		border: 1px solid currentColor;
		white-space: nowrap;
	}

	.b--green {
		--color1: var(--color__text);
		--color2: var(--color__green);
		
		color: var(--color1);
		background-color: var(--color2);
		border: 1px solid transparent;
		
		transition: color .3s, background-color .3s;
	}
	
	.b--silver {
		--color1: var(--color__green);
		--color2: var(--color__silver);
		
		color: var(--color1);
		background-color: var(--color2);
		border: 1px solid transparent;
		
		transition: color .3s, background-color .3s;
	}
	
		.b--green:hover, 
		.b--silver:hover {
			--color1: var(--color__black);
			--color2: transparent;
			border-color: var(--color__black);
		}

	.b--icon {
		display: flex;
		justify-content: center;
		align-items: center;
		
		padding: 0.3em;
		
		border-radius: 45% / 30%;
	}
	
	.b--withIcon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 1em;
		line-height: 1.3;
	}
	
	.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: var(--size-1);
		background-color: var(--color__green);
		color: #fff;
		content: attr(data-tooltip);
	}

.linkVec {
	display: inline-block;
	position: relative;
	padding-bottom: 0.7em;
	
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 500;
	font-size: var(--buttonFontSize);
	color: var(--color__text);
	
	transition: color .3s;
}

	.linkVec:hover {
		color: var(--color__green);
	}
	
	.linkVec:after {
		position: absolute;
		left: 0;
		bottom: 0;
		
		width: 2em;
		height: 2px; 
		
		background-color: var(--color__green);
		content: "";
		transition: width .2s ease-out;
	}
	
	.linkVec:hover:after {
		width: 4em;
	}
	



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

	/*
	.theme h2 { 
		color: var(--colorH); 
	}
	*/


.theme--silver { 
	--colorBG: var(--color__silver);
	
	background-color: var(--colorBG);
}

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

	.theme--green .b--green {
		border: 1px solid var(--color__text);
	}
	
	.theme--green .b--green:hover {
		background-color: var(--color__text);
		color: #fff;
	}









.dataControls {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-bottom: 1em;
}

.selectDimension {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.selectDimension[hidden] {
	display: none;
}

.selectDimension label {
	color: var(--color__gray);
	font-size: var(--size-1);
}

.selectDimension__input {
	padding-right: 1em;
	border-radius: 2em;
	border: 2px solid var(--color__silver);
	background-color: var(--color__silver);
	
	overflow: clip;
	overflow-clip-margin: content-box;
	/** https://nerdy.dev/perfect-nested-radius-with-overflow-clip-margin 🤯 */
}

.selectDimension select {
	padding: 0.5em 1em;
	min-width: 8em;
	
	font-weight: 500;
	text-align: center;
	background-color: transparent;
}

	.selectDimension--year .selectDimension__input {
		border: 2px solid var(--color__green);
		background-color: #fff;
	}
	
	.selectDimension--year .select {
		border: 2px solid var(--color__green);
		background-color: #fff;
	}






.footer {
	margin-top: var(--wrapper__padding);
	margin-bottom: calc(var(--wrapper__bodyPadding) * 2);
}

.footer__info {
	--flow-space: 4em;
}

.footer__contact {
	display: flex;
	gap: 1em;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: column;
}

.footer__sm {
	display: flex;
	gap: 0.5em;
	
	color: var(--color__green);
	font-size: var(--iconSize);
}

.footer__contact > a {
	font-size: var(--size1);
	font-weight: 700;
	text-decoration: none;
	color: var(--color__text);
	transition: color .3s;
}

	.footer__contact > a:hover {
		color: var(--color__green); 
	}

.footer__projects {
	--flow-space: 2em;
}

.footer__projectLogos {
	display: flex;
	flex-direction: column;
	gap: 1em 3em;
	align-items: flex-start;
	justify-content: flex-start;
}

	.footer__projectLogos a {
		flex: 1 0 auto;
	}

	.footer__projectLogos img {
		height: 2.2em;
	}
	
	.footer__projects > p {
		font-size: var(--size-2);
		font-weight: 400;
	}

.footnotes {
	margin-top: calc(var(--wrapper__bodyPadding) * 2);
	font-size: var(--size-1);
}

	.footnotes:before {
		grid-column: var(--wrapper__gridOffsetLeft) / var(--wrapper__gridOffsetRight);
		border-top: 2px solid var(--color__black);
		margin-bottom: calc(var(--wrapper__bodyPadding) * 2);
		
		content: "";
	}

	.footer__nav {
		font-weight: 600;
	}

	.footer__nav ul {
		list-style: none;
	}

.copyright {
	margin-top: 2em;
	text-align: left;
}

.breadcrumbs {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 0.2em;
	
	font-size: var(--size-1);
	list-style: none;
	color: var(--color__gray);
}

@media (max-width: 65em) {
	.breadcrumbs {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px; 
	}
}

	.breadcrumbs li:not(:last-child):after {
		content: " –";
		color: var(--color__text);
	}

	.breadcrumbs a {
		color: var(--color__text);
		text-decoration: none;
		transition: color .3s;
	}
	
	.breadcrumbs a:hover {
		color: var(--color__green);
	}

.pageHeadline {
}

	.pageHeadline h1 {
		margin-top: 1em;
		color: var(--color__green);
	}

	.pageHeadline__intro {
		max-width: 80ch; 
		font-family: var(--family2);
	}
	
	
	.pageHeadline--case1 {
		padding-bottom: 10em;
	}
	
	.pageHeadline--case1 + .podatkiLinks {
		margin-top: -10em;
	}
	
	
	
.podatkiLinks .ws__inner {
	display: grid;
	gap: var(--wrapper__bodyPadding);
	--padding: var(--wrapper__bodyPadding);
}

.podatkiGroup {
	display: flex;
	flex-direction: column;
}

.podatkiGroup header {
	padding: var(--padding);
	background-color: var(--color__green);
}

.podatkiGroup h2 { 
	font-size: var(--size0);
	text-transform: uppercase;
	color: #fff;
}
	
.podatkiGroup__intro { 
	font-family: var(--family2);
}
	
.podatkiGroup__body {
	flex: 1 1 auto;
	padding: var(--padding);
	
	background-color: #fff;
	border-right: 1px solid var(--color__silver);
	border-bottom: 1px solid var(--color__silver);
	border-left: 1px solid var(--color__silver);
}

	.podatkiGroup__body ol {
		list-style: none;
		margin-top: 1.5em;
	}
	
	.podatkiGroup__body li {
		--flow-space: 0.8em;
	}
	
	.podatkiGroup__body a {
		text-decoration: underline;
		text-underline-offset: 0.3em;
		text-decoration-thickness: 1px;
  
		color: var(--color__text);
		font-weight: 600;
		transition: color .3s;
	}
	
		.podatkiGroup__body .active a, 
		.podatkiGroup__body a:hover {
			color: var(--color__green);
		}
	
	

	
	
.comments {
	--flow-space: 3em;
}

.comments time {
	font-size: var(--size-1);
}

.comments .ws__inner {
	--flow-space: 3em;
}

.comments__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3em;
}

.comments__list article {
	position: relative;
	display: flex;
	flex-direction: column;
}

.comments__list article a {
	
	text-decoration: none;
	color: var(--color__text);
}

.comments__list article h3 {
	margin-bottom: 0.2em;
	
	transition: color .3s;
}

.comments__list article time {
	display: block;
	margin-bottom: 1em;
}

	.comments__list article a:hover h3 {
		color: var(--color__green);
	}

	.comments__list article .linkVec {
		margin-top: 1.5em; 
	}
	
	.comments__list article a:hover .linkVec {
		color: var(--color__green);
	}

	.comments__list article a:hover .linkVec:after {
		width: 4em;
	} 



	
.hSection__intro {
	max-width: 80ch;
	font-family: var(--family2);
	--flow-space: 1em;
}

	.hSection h2 { 
		margin-top: 0;
	}	

	.hSection__intro + .linkVec {
		margin-top: 1.5em;
	}	

.hSection__subtitle {
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color__green);
}
	
	

.porocilo {
	--padding: var(--wrapper__bodyPadding);
	
	border: 1px solid var(--color__silver);
	box-shadow: rgba(99, 99, 99, 0) 0px 2px 8px 0px;
}

	.porocilo:hover {
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	}

	.porocilo:hover .linkVec {
		color: var(--color__green);
	}
	
	.porocilo:hover .linkVec:after {
		width: 4em;
	}

.porocilo footer {
	padding: var(--padding);
	border-top: 1px solid var(--color__silver);
}


.porocila__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3em;
}

.nav--footer a { 
	padding-left: 0;
}
	
.about .iframe__wrapper {
	margin-top: 2em;
}

.iframe__wrapper {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.iframe__wrapper iframe {
	width: 100%;
	height: 100%;
}
	
	

@media (min-width: 37rem) {
	.header {
		--gap: 2.6em;
	}
	
	.footer__projectLogos {
		flex-direction: row;
		align-items: center;
	}
	
	.footer__projectLogos img {
		height: 1.5em;
	}
	
	.footer__projectLogos {
		flex-wrap: nowrap;
	}
	
	.footer__projectLogos a {
		flex: unset;
	}
	
	.porocila__list {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.footer__contact {
		flex-direction: row;
		align-items: center;
	}
	
	.footer__projectLogos img {
		height: 2em;
	}
}

@media (min-width: 48rem) {
	
	.footer__stpn {
		grid-column-end: span 5;
		padding-right: var(--wrapper__padding);
	}
	
	.footer__info {
		margin-top: 0;
		grid-column-start: -9;
		grid-column-end: var(--wrapper__gridOffsetRight);
	}
	
	.about header {
		grid-column: var(--wrapper__gridOffsetLeft) / span 8;
		grid-row: 1;
	}
	
	.about .hSection__more {
		grid-column-end: var(--wrapper__gridOffsetRight);
		justify-self: end;
		grid-row: 1;
	}
	
		
	.podatkiLinks .ws__inner {
		grid-template-columns: repeat(3, 1fr);
	}
	
	
	.comments__list {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.dataControls {
		flex-direction: row;
		gap: 1em;
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 2em;
	}
	
	.porocila__list {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.podatkiGroup header {
		padding: var(--padding) calc(var(--padding) * 2);
	}
	
	.podatkiGroup__body {
		padding: var(--padding) calc(var(--padding) * 2);
	}
}

@media (min-width: 65rem) {
	:root {
		--buttonFontSize: 1rem;
	}
	
	.header {	
		--flow-space: 0;
		
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		
		margin-top: var(--wrapper__bodyPadding);
		padding-top: calc(var(--wrapper__bodyPadding) / 2);
		padding-bottom: calc(var(--wrapper__bodyPadding) / 2);
		
		box-shadow: rgba(0, 0, 0, 0) 0px 4px 12px;
		transition: 
			background-color .3s, 
			margin-top .3s, 
			box-shadow .6s;
		
	}
	
	
	
	.scrolled .header {
		margin-top: 0;
		
		box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
		background-color: #fff;
	}
	
	#nav {
		grid-column: -8 / calc(var(--wrapper__gridOffsetRight) + 1); 
		
		position: static;
		width: auto;
		height: auto;
		
		justify-content: flex-end;
		flex-direction: row;
		align-items: center;
		gap: var(--gap);
		padding: 0;
		transform: translate(0);
		transition: unset;
		
		background-color: transparent;
	}
		

		#nav[aria-hidden="false"] {
			transform: translate(0);
			transition: transform 1s; 
		}
		
		#nav .nav--footer {
			display: none;
		}
	
	.nav ul {
		display: flex;
		
		align-items: center;
		gap: 0.5em 1em;
	}
	
	.nav--main {
		font-weight: 700;
		font-size: var(--size4);
	} 
	
	.nav--main ul li:first-child {
		display: none;
	}

	.nav--sec {
		font-weight: 350;
		font-size: var(--size-1);
	}
	
	.header__logos {
		grid-column: 2 / 7; 
	}
	
	.scrolled .language {
		display: none;
	}
	
		.hSection--more > *:first-child {
		grid-row: 1;
		grid-column-end: calc(var(--wrapper__gridOffsetRight) - 4);
	}	
	
	.hSection--more .hSection__more {
		margin-top: 0;
		grid-row: 1;
		grid-column-start: calc(var(--wrapper__gridOffsetRight) - 2);
		grid-column-end: var(--wrapper__gridOffsetRight);
		text-align: right;
	}
	
	.pageHeadline h1 {
		margin-top: 2em;
	}
	
	.footer__info {
		grid-column-start: -8;
		grid-column-end: var(--wrapper__gridOffsetRight);
	}
	
	.podatkiLinks .ws__inner {
		gap: calc(var(--wrapper__bodyPadding) * 3);
	}
	
	.copyright {
		grid-column-end: span 6;
		margin-top: 0;
		
		text-align: left;
	}
	
	.footnotes {
		font-size: var(--size-2);
		align-items: center;
	}
	
	.footer__nav {
		display: block; 
		grid-column: 9 / var(--wrapper__gridOffsetRight);
		order: 2;
		
		font-weight: 600;
	}
	
	.footer__nav ul {
		justify-content: flex-end;
	}
	
	
	
	.porocila__list {
		grid-template-columns: repeat(4, 1fr);
	}
}


@media (min-width: 65rem) {
	
	#btnMenu {
		display: none;
	}
	
}
@media (min-width: 75rem) {
	.header__logos {
		grid-column: calc(var(--wrapper__gridOffsetLeft) - 1) / span 4; 
	}
	
}
	
@media (min-width: 90rem) { 
	.header__logos {
		grid-column: calc(var(--wrapper__gridOffsetLeft) - 1) / span 6;
	}
	
	.logo--om {
		position: relative;
		width: clamp(15rem, 100%, 38rem); 
		transition: width .3s;
	}
	
		.scrolled .logo--om {
			width: clamp(15rem, 100%, 30rem); 
		}
	
	#nav {
		grid-column: -8 / calc(var(--wrapper__gridOffsetRight) + 1); 
	}
	
	
}
	
@media (min-width: 100rem) {
	.header__logos {
		grid-column: calc(var(--wrapper__gridOffsetLeft) - 1) / span 6;
	}
	
	#nav {
		grid-column: -10 / calc(var(--wrapper__gridOffsetRight) + 1); 
	}
	
	.footer__info {
		grid-column-start: -9;
	}
}
	
	
	









.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: var(--color__text);
}

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

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