/*=================================
//                                 
//    ###     ####   ###    ###  
//   ## ##   #   ##  ## #  # ##  
//  ##   ##    ###   ##  ##  ##  
//  #######  #   ##  ##      ##  
//  ##   ##   ####   ##      ##  
//
//=================================*/

body.container > header {
	padding-left: 1.225rem;
	padding-right: 1.225rem;
}

body.respo #toggle {
	display: block;
}

/* ------------------ header ------------------ */
header {
	position: absolute;
	top: 0;
	margin-top: 0;
	width: 100%;
	font-size: clamp(0.825rem, 2.5vw, .925rem);
	z-index: 2;
}

header.posit {background-color: var(--bkg9);}

header {background-image: linear-gradient(180deg, rgba(13, 13, 13, 1), rgba(255, 255, 255, 0));}

header.fix {
	position: fixed;
	/*
	background: var(--header);
	box-shadow: 0 5px 15px rgba(50, 50, 50, .1);
	opacity: .85;
	*/
}

header #top {
	transition: 0.2s ease-out;
}

header .h-breath {height: 4vw;}

header #scroll {
	background-image: url(gfx/template/topmenu.svg);
	background-repeat: no-repeat;
	background-size: contain;
	display: none;
	position: absolute;
	top: 83px;
	right: 0;
	height: 20px;
	width: 40px;
}

#top {
	padding: 0 .75rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#top .brands svg, .logo svg {
	max-width: 100%;
	color: var(--color2);
}

#navigation {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin-left: .75rem;
}

#navigation .modal-backdrop {z-index: 1;}

#navigation .segment-r {
	margin-left: .75rem;
	margin-right: .75rem;
	min-width: 12rem;
}
#navigation svg.bi {margin: 0;}
#toggle:hover svg.bi {
	color: var(--hover7);
}

.brands {
	background-color: transparent;
	padding: 18px 0;
	min-width: 10rem;
	width: auto;
}
.brands .d-line {
	display: inline-block;
	width: auto;
	margin-top: .5rem;
	margin-right: 1rem;
}

#slideshow brand {padding: .75rem 0; color: var(--link5);}

button#toggle {
	background-color: var(--bkg1);
	width: 3rem;
	height: 3rem;
	display: none;
	justify-content: center;
	align-items: center;
	border: none;
	z-index: 3;
}
button#toggle i {
	font-size: 1.625rem;
}


@media (max-width: 1200px) {
	#navigation .segment-r {
		margin-right: .75rem;
	}
}

@media (max-width: 992px) {
	body.respo .brands {
		display: block;
	}

	body.navi #toggle {
		display: block;
	}

	header {
		/* background-image: none; */
		align-items: initial;
		height: auto;
	}

	#navigation .segment-r {
		margin-right: 3.5rem;
	}
}


/*
#subnavigation {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	font-weight: 500;
	background: white;
	font-size: .925rem;
}

#subnavigation ul {
	display: flex;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

#subnavigation ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#subnavigation ul li:after {
	content: " ";
	margin-right: .5rem;
}

#subnavigation ul li + li:before {
	content: "|";
	padding-right: .5rem;
}

#subnavigation .nav-close {
	display: none;
}

@media (max-width: 992px) {
	.menu-top:not(.show) #subnavigation {
		display: none;
	}
	body #subnavigation .nav-close {
		display: block;
	}
	.menu-top #subnavigation {
		background: white;
		padding: 1rem 1rem .725rem;
		justify-content: center;
		width: 100%;
		border-radius: .5rem .5rem 0 0;
	}
	.menu-top #subnavigation > nav {
		padding-bottom: .725rem;
		border-bottom: 1px solid var(--border4);
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
}
*/


/* dodatki */
a.search-link {
	display: inline-block;
	background-color: var(--bkg3);
	width: 3rem;
	height: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

a.search-link i {
	font-size: 1.625rem;
}

button#wcag-link {
	position: fixed; right:0; top: 1px;
	background-color: var(--bkg5);
	color: white;
	width: 3rem;
	min-width: 2.5rem;
	height: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
}

button#wcag-link i {
	font-size: 1.625rem;
}


/* pokrywka menu */
#toggle-menu-input {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}