/* === Import styles === */

	@import url(../css/normalize.min.css);
	@import url(../css/fontawesome-all.css);

	@import url(../css/csm-boxstyles.css);
	@import url(../css/csm-colors.css);
	@import url(../css/csm-columns.css);
	@import url(../css/csm-forms.css);
	@import url(../css/csm-others.css);
	@import url(../css/csm-tables.css);
	@import url(../css/csm-texts.css);
	@import url(../css/csm-tools.css);

	@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

/* === Custom styles === */

	.hlp label input[type='checkbox'] { margin-right: 0.5em; }

	:root {
		--ff1: sans-serif;
		--ff2: 'Atkinson Hyperlegible', sans-serif;
	}

	.ff1 { font-family: var(--ff1); }
	.ff2 { font-family: var(--ff2); }

	.marminus { margin-top: -10em; }

	html { scroll-behavior: smooth;	}

	#zoznam-vozidiel-anchor {
			display: block;
			position: relative;
			top: -60px;
			visibility: hidden;
	}
	#rozsirena-vybava {
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		background-color:rgba(0,0,0,0.5);
		z-index: 100;
	}
	#rozsirena-vybava .obsah {
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		padding: 48px 16px 16px 16px;
		background-color: #fff;
		color: #000;
		column-count: 5;
	}
	#rozsirena-vybava .check {
		display: block;
		margin-bottom: .5em;
		position: relative;
		cursor: pointer;
	}
	#rozsirena-vybava input {
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
	}
	#rozsirena-vybava label {
		display: block;
		padding-left: 1.5rem

	}
	#rozsirena-vybava-close {
		position: absolute;
		top: 16px;
		right: 16px;
		cursor: pointer;
	}


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


	/* == HEADER == */
		header { position: fixed; background-color: hsl( var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c0-l1); z-index: 10; }

		header.clear { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }

		header .mainlogo { width: 5.435em; display: block; }
		header a.mainlogo:focus { box-shadow: none; }
		header .container .fas { padding: .35em; }

		header nav a, header nav a:hover, header nav a:focus { text-decoration: none; color: var(--c1); }

		header nav ul li:before { display: none; }

		header nav ul li a { position: relative; padding: .75em; display: block; }
		header nav ul li a span { position: absolute; bottom: .25em; left: 50%; width: 0em; height: .15em; z-index: -1; border-radius: .5em; pointer-events: none; opacity: 0; }
		header nav ul li a:hover span,
		header nav ul li a.active span { width: 2em; margin-left: -1em; opacity: 1; }
		header nav ul li a:focus { box-shadow: none; }

	/* == HERO == */
		.hero video { transform-origin: center; width: 100%; height: 100%; object-fit: cover; }
		.hero .overlay.effect { mix-blend-mode: multiply; opacity: .7; }

		.hero .herocontent { position: absolute; bottom: 0; left: 0; right: 0; }
		.hero .herocontent .line:before { content:" "; display: block; width: 100%; height: 0px; top: 50%; position: relative; background: linear-gradient( 90deg, var(--c2) 0%, var(--c3) 50%, var(--c4) 100%); }

		.hero .more svg { height: 1em; display: block; }
		.hero .more a:hover svg .arrow,
		.hero .more a:focus svg .arrow { animation: bounce 1.5s infinite; transform-origin: center; }
		@keyframes bounce {
			0% { transform: translate(0, 0); }
			20% { transform: translate(0, 0) scale( 1, 1); }
			25% { transform: translate(0, 40px) scale( 1, .66); }
			40% { transform: translate(0, -30px) scale( 1, 1); }
			49% { transform: translate(0, 0); }
			50% { transform: translate(0, 0); }
			100% { transform: translate(0, 0); }
		}

		.hero .logos { justify-content: center; }
		.hero a:focus { outline: none; outline-color: transparent; box-shadow: none; }
		.hero .logos a img { height: 1em; display: block; }

		.hero .logos:not(.modellogo):hover a:not(:hover),
		.hero .logos:not(.modellogo):focus a:not(:hover) { opacity: .33; }

		.hero .logos a:first-child { padding-left: 0; }
		.hero .logos a:last-child { padding-right: 0; }

		.hero .logos:not(.modellogo) a:hover img,
		.hero .logos:not(.modellogo) a:focus img,
		.hero .more a:hover svg,
		.hero .more a:focus svg { transform: scale(1.25); }

		.heroimg { position: absolute; width: 100%; height: 100%; z-index: 0; object-fit: cover; }

	/* == SLIDERS == */
		.newslider-wrap:before, .newslider-wrap:after { content: ""; display: block; position: absolute; top: 0; width: 5em; height: 100%; z-index: 1;pointer-events: none; }
		.newslider-wrap:before { left: 0; background: linear-gradient( to right, hsl(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%))) 0%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.987) 8.1%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.951) 15.5%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.896) 22.5%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.825) 29%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.741) 35.3%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.648) 41.2%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.55) 47.1%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.45) 52.9%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.352) 58.8%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.259) 64.7%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.175) 71%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.104) 77.5%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.049) 84.5%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.013) 91.9%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0) 100%); }
		.newslider-wrap:after { right: 0; background: linear-gradient( to left, hsl(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%))) 0%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.987) 8.1%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.951) 15.5%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.896) 22.5%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.825) 29%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.741) 35.3%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.648) 41.2%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.55) 47.1%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.45) 52.9%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.352) 58.8%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.259) 64.7%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.175) 71%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.104) 77.5%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.049) 84.5%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0.013) 91.9%, hsla(var(--c0-h), var(--c0-s), calc(var(--c0-l) + (1 * 10%)), 0) 100%); }

		.tns-controls button { position: absolute; top: calc(50% - 1em) ; z-index: 2; border: none; border-radius: 0; background-color: transparent; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1.75em; background-color: var(--c0-l2); padding: .5em; box-shadow: var(--shad-4); }
		.tns-controls button[data-controls="prev"] { left: 0; border-radius: 0 .25em .25em 0; }
		.tns-controls button[data-controls="prev"]:before { content: "\f053"; display: block; color: var(--c1); }
		.tns-controls button[data-controls="next"] { right: 0; border-radius: .25em 0 0 .25em; }
		.tns-controls button[data-controls="next"]:before { content: "\f054"; display: block; color: var(--c1); }


		.cardetail-slide .tns-outer,
		.cardetail-slide .tns-ovh,
		.cardetail-slide .tns-inner,
		.cardetail-slide .tns-slider,
		.cardetail-slide .tns-item { height: 100%; }
		.cardetail-slide .tns-item { overflow: hidden; }
		.cardetail-slide .tns-item img, .cardetail-slide .tns-item  .videowrapper { max-width: calc(100% - 4em); max-height: calc(100% - 4em); }
		.cardetail-slide .tns-item .blurred { background-size: cover; background-position: center; filter: blur(2em); opacity: .2; }

		.cardetail-slide .tns-outer button[data-action="stop"],
		.cardetail-slide .tns-outer button[data-action="start"] { display: none; }
		.cardetail-slide .tns-nav { display: flex; justify-content: center; position: absolute; z-index: 1; width: 100%; bottom: 0; text-align: center; }
		.cardetail-slide .tns-nav > button { background: transparent; border: none; }
		.cardetail-slide .tns-nav > button:after { content: ""; display: block; background: white; margin: 1em .5em; height: 0; padding-top: .25em; width: 1.5em; border-radius: .5em; opacity: .25; }
		.cardetail-slide .tns-nav > button.tns-nav-active:after { opacity: 1; }

	/* == LIST == */

		.listitmphoto { position: relative; overflow: hidden; }
		.listitmphoto img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; z-index: 1; }
		.listitmphoto .bluredimg { z-index: 0; background-size: cover; background-position: center; filter: blur(1em); opacity: .5; }

		.tapes { position: absolute; z-index: 2; top: .5em; left: .5em; right: .5em; line-height: 1em; pointer-events: none; }
		.tapes span { font-family: var(--ff2); font-size: .85em; font-weight: bold; padding: .25em .75em; display: inline-block; margin-right: .5em; }

		.pagination li a,
		.pagination li label { display: block; padding: .5em; min-width: 2.5em; text-align: center; }
		.pagination select { cursor: pointer; opacity: 0; }
		.pagination a.act { color: var(--c0); }
		.pagination a.act ~ span { display: block; background: var(--c4); width: 1em; height: 1em; z-index: -1; font-size: 1.75em; }

		.brands img { height: 2.4em; padding-right: 2em; opacity: .5; }
		.brands a { position: relative; }
		.brands a.active img, .brands a.mixitup-control-active img { opacity: 1; }
		.brands a:focus { box-shadow: none; }

		.nodecor a:focus { box-shadow: none;}

		@media ( max-width: 767px ) {
			.brands > * { font-size: 3vw; }
			#cookies-form { width:100%; }
		}


	/* == CONTANCT == */
		.contactcard .photo { min-width: 6em; }
		.contactcard .photo img { width: 5em; }
		.contactcard ul.unstyllist li { line-height: 1.3em; margin-bottom: 0; }
		.contactcard ul.unstyllist li:last-child { margin-bottom: 0; }


	/* == CAR DETAIL == */
		@media ( max-width: 1023px ) {
			.cardetail .cardetail-slide { height: 100vw; }
		}

		@media ( min-width: 1024px ) {
			.cardetail .cardetail-slide { height: calc(100vh - 3.5em); min-height: 600px; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 3.5em; }
			/*.cardetail .cardetail-header { max-height: 50vw; height: calc(100vh - 3.5em); justify-content: space-between; }*/
		}


	/* == FOOTER == */
		footer .forms,
		footer .blocks { justify-content: center; }
		footer .forms a:focus { box-shadow: none; }

	/* == ICONS == */
	.icns { max-width: 100%; height: auto; }

	/* == under M == */
	@media ( max-width: 480px ) {
		footer .forms img { width: 3em; }
	}

	/* == under M == */
	@media ( max-width: 1023px ) {

		header nav { display: flex; align-items: center; justify-content: center; height: 0; overflow: hidden; width: 100%; clear: both; float: none; text-align: center; overflow: auto; opacity: 0; }
		header nav.mobilenavon { height: calc(100vh - 3.5em); opacity: 1; }
		header nav ul, header nav ul li { padding: 0 !important; margin: 0 !important; font-size: 4vh; }

		.hero { height: 100vh; max-height: calc(100vw * 1.7778); min-height: 430px; }
		.hero .herocontent > div, .hero .more { font-size: 8vw; margin: 0 0 3em 0; }
		.hero.shorthero .overlay.effect { opacity: .4;}
		.hero .logos a { padding: 0 .67em; }

		.hero .more { position: absolute; margin: 0 !important; bottom: 1em; left: calc(50% - .5em); }
		.hero .more svg { height: 1.25em; }
		.hero .more a svg .arrow { animation: bounce 1.5s infinite; transform-origin: center; }

		.newslider-wrap:before, .newslider-wrap:after { font-size: .5em; }
	}

	/* == above M == */
	@media ( min-width: 1024px ) {
		header nav { float: right; }
		header nav ul { display: flex; flex-direction: row; align-items: center; padding: 0; }
		header nav ul li { padding: 0 0 0 1em !important; margin: 0 !important; line-height: 1em !important; }

		.hero { height: 100vh; max-height: calc(100vw * .5625); min-height: 640px; }
		.hero.shorthero { max-height: calc(60vw * .5625); }
		.hero.shorthero .overlay.effect { opacity: .4;}
		.hero .herocontent > div, .hero .more { font-size: 3vw; margin: 1.5em .75em; }
		.hero .logos a { padding: 0 .75em; }
	}

/* ================= VOYAGE HERO SLIDER (banner slider) ================= */
	.voyage-hero {
		--vh-slide-width: min(24vw, 300px);
		--vh-aspect: 2 / 3;
		--vh-dur: 800ms;
		--vh-ease: ease;
		position: absolute;
		inset: 0;
		z-index: 1;
		overflow: hidden;
		display: grid;
		place-items: center;
		background: rgba(0,0,0,0.787);
	}
	.voyage-hero .vh-track {
		width: 100%;
		height: 100%;
		display: grid;
		place-items: center;
	}
	.voyage-hero .vh-track > .vh-slide { grid-area: 1 / -1; }

	.voyage-hero .vh-slide {
		position: relative;
		width: 100%;
		height: 100%;
		display: grid;
		place-items: center;
		pointer-events: none;
	}

	/* background (blurred full-bleed, only current visible) */
	.voyage-hero .vh-slide__bg {
		position: absolute;
		inset: -20%;
		background-size: cover;
		background-position: center center;
		z-index: 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--vh-dur) ease, transform var(--vh-dur) ease;
	}
	.voyage-hero .vh-slide__bg::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0,0,0,0.8);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	/* card (carousel transform) */
	.voyage-hero .vh-slide__card {
		position: relative;
		z-index: 1;
		width: var(--vh-slide-width);
		aspect-ratio: var(--vh-aspect);
		perspective: 800px;
		user-select: none;
		transform: perspective(1000px) translate3d(var(--vh-tx, 0px), 0, 0) rotateY(var(--vh-roty-c, 0deg)) scale(var(--vh-scale, 1));
		transition: transform var(--vh-dur) var(--vh-ease);
	}
	/* inner (mouse tilt) */
	.voyage-hero .vh-slide__inner {
		position: relative;
		width: 100%;
		height: 100%;
		transform-style: preserve-3d;
		transform: rotateX(var(--vh-rotx, 0deg)) rotateY(var(--vh-roty, 0deg));
	}
	.voyage-hero .vh-slide__imgwrap {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		box-shadow: 0 30px 60px rgba(0,0,0,.45);
	}
	.voyage-hero .vh-slide__link { display: block; width: 100%; height: 100%; }
	.voyage-hero .vh-slide__img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: translate(-50%, -50%) scale(1.25) translate3d(var(--vh-bgx, 0), var(--vh-bgy, 0), 0);
		filter: brightness(0.5);
		transition: filter var(--vh-dur) var(--vh-ease);
	}

	/* info (name + description), inside the card, over the image */
	.voyage-hero .vh-slide__info {
		position: absolute;
		left: 8%;
		right: 8%;
		bottom: 7%;
		z-index: 2;
		pointer-events: none;
		overflow: hidden;
	}
	.voyage-hero .vh-title,
	.voyage-hero .vh-desc {
		display: block;
		color: #fff;
		opacity: 0;
		transform: translate3d(0, 120%, 0);
		transition: opacity var(--vh-dur) var(--vh-ease), transform var(--vh-dur) var(--vh-ease);
		text-shadow: 0 2px 14px rgba(0,0,0,.6);
	}
	.voyage-hero .vh-title {
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: .02em;
		line-height: 1.05;
		font-size: clamp(1.2rem, 2.4vw, 2.1rem);
		margin-bottom: .3em;
	}
	.voyage-hero .vh-desc {
		font-weight: 400;
		line-height: 1.3;
		font-size: clamp(.78rem, 1.15vw, 1rem);
	}

	/* current */
	.voyage-hero .vh-slide[data-current] { pointer-events: auto; }
	.voyage-hero .vh-slide[data-current] .vh-slide__card { --vh-scale: 1.15; --vh-tx: 0px; --vh-roty-c: 0deg; z-index: 3; }
	.voyage-hero .vh-slide[data-current] .vh-slide__img { filter: brightness(0.85); }
	.voyage-hero .vh-slide[data-current] .vh-slide__bg { opacity: 1; }
	.voyage-hero .vh-slide[data-current] .vh-title,
	.voyage-hero .vh-slide[data-current] .vh-desc {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition-delay: 250ms;
	}

	/* next / previous */
	.voyage-hero .vh-slide[data-next] .vh-slide__card { --vh-scale: 1; --vh-tx: calc(var(--vh-slide-width) * 1.05); --vh-roty-c: -45deg; z-index: 2; }
	.voyage-hero .vh-slide[data-next] .vh-slide__bg { transform: translateX(10%); }

	.voyage-hero .vh-slide[data-previous] .vh-slide__card { --vh-scale: 1; --vh-tx: calc(var(--vh-slide-width) * -1.05); --vh-roty-c: 45deg; z-index: 2; }
	.voyage-hero .vh-slide[data-previous] .vh-slide__bg { transform: translateX(-10%); }

	/* hidden (for more than 3 banners) */
	.voyage-hero .vh-slide:not([data-current]):not([data-next]):not([data-previous]) {
		opacity: 0;
		pointer-events: none;
	}

	/* controls */
	.voyage-hero .vh-btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 40;
		width: 52px; height: 52px;
		display: inline-flex; align-items: center; justify-content: center;
		padding: 0;
		border: none; border-radius: 50%;
		background: rgba(0,0,0,.35);
		color: #fff; font-size: 2rem; line-height: 1;
		cursor: pointer; opacity: .7;
		transition: opacity .25s, background .25s;
	}
	.voyage-hero .vh-btn:hover { opacity: 1; background: rgba(0,0,0,.55); }
	.voyage-hero .vh-btn--prev { left: 3%; }
	.voyage-hero .vh-btn--next { right: 3%; }

	/* keep hero chrome (logos + scroll arrow) above the slider */
	.hero .herocontent { z-index: 60; }

	@media (max-width: 640px) {
		.voyage-hero { --vh-slide-width: min(56vw, 260px); }
		.voyage-hero .vh-btn { width: 42px; height: 42px; font-size: 1.5rem; }
	}
/* ================= /VOYAGE HERO SLIDER ================= */