/**********VYBAVA**********/

:root{
	--heading-padding-left:64px;
	--ul-padding-left:20px;
}
@media (min-width:768px){
:root{
	--heading-padding-left:89px;
	--ul-padding-left:45px;
}
}
/****GRID****/
#vybava-container{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
	gap:20px;
	margin-top:36px;
}

/****DIVY A OBSAH****/
#vybava-container .vybava-kategorie{
	border:1px solid #FF205A33;
	border-radius: 10px;
}
#vybava-container .vybava-kategorie h4 {
	padding-left:var(--heading-padding-left);
	padding-top: 24px;
	padding-bottom: 20px;
	margin-bottom:0px;
	color:#FF205A;
	font-size:clamp(22px, 4.5vw, 28px);
	position: relative;
}

#vybava-container .vybava-kategorie h4::after{
	content:"";
	position: absolute;
	width:100px;
	height:2px;
	background-color: #FF205A;
	left:var(--ul-padding-left);
	bottom:6px;
}

@media (min-width:1099px){
	#vybava-container .vybava-kategorie h4::after{
		bottom:12px;
	}
}

#vybava-container .vybava-kategorie ul{
	padding-top:20px;
	padding-left:var(--ul-padding-left);
	margin-top:0px;
	font-size: clamp(15px, 2.2vw, 16px);
	color:#000;
	font-weight: 500;
	list-style-position: inside;
}
@media (min-width:600px){
	#vybava-container .vybava-kategorie ul:has(li:nth-child(5)){
		columns:2;
	}
}
/*MARKER*/
#vybava-container .vybava-kategorie ul{
    list-style:none;
}

#vybava-container .vybava-kategorie ul li{
    position:relative;
	padding-left:18px;
	padding-bottom:8px;
}

#vybava-container .vybava-kategorie ul li::before{
    content:"";
    position:absolute;
    left:0;
    top:0.35em;
    width:7px;
    height:13px;
    background-image:url("/user/documents/images/arrow_red.svg");
    background-repeat:no-repeat;
    background-size:contain;
}

/****AFTER H4 A IKONKY****/
.vybava-kategorie h4::before{
	content:"";
	position:absolute;
	left:var(--ul-padding-left);
	top:38px;
	translate: 0% -50%;
	background-repeat: no-repeat;
	background-size: contain;
	width:100%;
	height:100%;
}

/*(default width ::after bg: 32px)*/
/*asistencni-systemy*/
#vybava-container .asistencni-systemy h4::before{
	background-image: url("/user/documents/images/noun-system.svg");
	width:34px;
	height:34px;
}
#vybava-container .asistencni-systemy h4{
	padding-left: calc(var(--heading-padding-left) + 2px);
}

/*palubni-systemy-a-konektivita*/
#vybava-container .palubni-systemy-a-konektivita h4::before{
	background-image: url("/user/documents/images/noun-connect-to-bluetooth.svg");
	width:26px;
	height:18px;
}
#vybava-container .palubni-systemy-a-konektivita h4{
	padding-left: calc(var(--heading-padding-left) - 8px);
}

/*bezpecnostni-systemy*/
#vybava-container .bezpecnostni-systemy h4::before{
	background-image: url("/user/documents/images/noun-safety.svg");
	width:32px;
	height:38px;
}

/*vnitrni-vybava-a-komfort*/
#vybava-container .vnitrni-vybava-a-komfort h4::before{
	background-image: url("/user/documents/images/noun-eqquipment.svg");
	width:61px;
	height:32px;
}
#vybava-container .vnitrni-vybava-a-komfort h4{
	padding-left: calc(var(--heading-padding-left) + 29px);
}

/*pohon-a-podvozek*/
#vybava-container .pohon-a-podvozek h4::before{
	background-image: url("/user/documents/images/noun-axle.svg");
	width:20px;
	height:24px;
}
#vybava-container .pohon-a-podvozek h4{
	padding-left: calc(var(--heading-padding-left) - 12px);
}

/*vnejsi-vybava*/
#vybava-container .vnejsi-vybava h4::before{
	background-image: url("/user/documents/images/noun-side-mirror.svg");
	width:55px;
	height:30px;
}
#vybava-container .vnejsi-vybava h4{
	padding-left: calc(var(--heading-padding-left) + 23px);
}

/*sedadla*/
#vybava-container .sedadla h4::before{
	background-image: url("/user/documents/images/noun-car-seat.svg");
	width:30px;
	height:38px;
}
#vybava-container .sedadla h4{
	padding-left: calc(var(--heading-padding-left) - 2px);
}

/*zabezpeceni-vozidla*/
#vybava-container .zabezpeceni-vozidla h4::before{
	background-image: url("/user/documents/images/noun-seatbelt.svg");
	width:38px;
	height:38px;
}
#vybava-container .zabezpeceni-vozidla h4{
	padding-left: calc(var(--heading-padding-left) + 6px);
}

/*svetelna-technika*/
#vybava-container .svetelna-technika h4::before{
	background-image: url("/user/documents/images/noun-car-lights.svg");
	width:36px;
	height:28px;
}
#vybava-container .svetelna-technika h4{
	padding-left: calc(var(--heading-padding-left) + 4px);
}

/*ostatni*/
#vybava-container .ostatni h4::before{
	background-image: url("/user/documents/images/noun-other.svg");
	width:30px;
	height:29px;
}
#vybava-container .ostatni h4{
	padding-left: calc(var(--heading-padding-left) - 2px);
}

				/**********POZNAMKA**********/
/****WRAPPER****/
#poznamka-container{
	background-color: #f7f7f7;
	border-radius: 10px;
	padding:50px 25px 25px 25px;
	margin-top:50px;
	margin-bottom: 50px;
	box-shadow: 4px 8px 18px #cccccccc;
}

@media (min-width:768px){
	#poznamka-container{
		background-color: #f7f7f7;
		border-radius: 10px;
		padding:50px 50px 25px 50px;
	}
}

/****Wrapper Icony****/
#poznamka-container{
	position: relative;
}

#poznamka-container::before{
	position: absolute;
	content:"";
	top:0;
	left:25px;
	translate:0% -15%;
	width:42px;
	height:64px;
	background-image: url("/user/documents/images/uvozovky.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

@media (min-width:768px){
	#poznamka-container::before{
		left:50px;
	}
}

#poznamka-container::after{
	position: absolute;
	content:"";
	top:30px;
	right:30px;
	width:50px;
	height:50px;
	background-image: url("/user/documents/images/edit.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

@media (min-width:1080px){
	#poznamka-container::after{
		right:50px;
		width:75px;
		height:75px;
	}
}

/****ELEMENTY****/
#poznamka-container h1{
	color:#FF205A;
	font-size: 22px !important;
	margin-bottom: 25px;
	position: relative;
}

#poznamka-container h1::after{
	content:"";
	position: absolute;
	width:100px;
	height:2px;
	background-color: #FF205A;
	left:0;
	bottom:-6px;
}

#poznamka-container h2{
	color:#FF205A;
	font-size: 22px !important;
	margin-top: 40px;
	margin-bottom: 20px;
	font-weight: 600;
}

#poznamka-container ul{
	padding-left:0;
}

#poznamka-container p, #poznamka-container ul li{
	color:#101010;
	padding-bottom:8px;
	margin-bottom: 0px;
	font-size: clamp(15px, 2.2vw, 16px);
	font-weight: 500;
}

@media (min-width:1440px){
	#poznamka-container ul{
		column-gap: 100px;
	}

}

@media (min-width:900px){
	#poznamka-container ul{
		columns: 2;
	}
	#poznamka-container p{
		max-width: 90%;
	}
}

/*MARKER*/
#poznamka-container ul{
    list-style:none;
}

#poznamka-container ul li{
    position:relative;
	padding-left:18px;
}

#poznamka-container ul li::before{
    content:"";
    position:absolute;
    left:0;
    top:0.35em;
    width:7px;
    height:13px;
    background-image:url("/user/documents/images/arrow_red.svg");
    background-repeat:no-repeat;
    background-size:contain;
}

.content-wrapper{
	display: flex;
	flex-direction: column;
}

.ds{
	align-self: end;
}

				/**********Ojete vozy**********/

	/**Kontakt**/

.bazar-vozu .page-kontakt-top, .prodej-uzitkove-vozy .page-kontakt-top{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.bazar-vozu .page-kontakt-top span, .prodej-uzitkove-vozy .page-kontakt-top span{
	font-weight: 500;
}

.bazar-vozu .page-kontakt-bottom, .prodej-uzitkove-vozy .page-kontakt-bottom{
    display: grid;
	grid-template-columns: repeat(2, 1fr);
	place-self: center;
	text-align: left;
	gap: 10px;
	column-gap: 25px;
}


.bazar-vozu .page-panels:has(.page-kontakt) {
	margin:0 auto;
	min-width:600px;
		height:100%;
}

.prodej-uzitkove-vozy .page-panels:has(.page-kontakt){
	margin:0;

}

.prodej-uzitkove-vozy .contacts-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(250px,100%), 1fr));
	gap:10px;
}

@media(max-width:1100px){
.bazar-vozu .page-kontakt-bottom, .prodej-uzitkove-vozy .page-kontakt-bottom{
	grid-template-columns: repeat(1, 1fr);
}
}

			/**********podle mest**********/
main.kontakty-mesto .contacts-grid-accordeon{
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width:800px){
	main.kontakty-mesto .contacts-grid-accordeon{
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width:1200px){
	main.kontakty-mesto .contacts-grid-accordeon{
		grid-template-columns: 1fr 2fr;
	}
}
/*SWITCHER*/
main.kontakty-mesto .contacts-accordeon-switcher{
	display: flex;
	flex-direction: column;
	margin-bottom: 40px;
	user-select: none;
	position: relative;
}
main.kontakty-mesto .contacts-accordeon-switcher::before{
	content:"VYBERTE ZNAČKU";
	position: absolute;
	top:0px;
	left:50%;
	translate: -100% -150%;
	color:#8D99AE;
	font-size:13px;

}

main.kontakty-mesto .contacts-accordeon-switcher > div{
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 100%;
	padding: 15px 10px;
	box-shadow: 1px 2px 4px #8D99AE33;
	margin-bottom: 15px;
	border-radius: 10px;
	cursor: pointer;
}

@media (min-width:800px){
	main.kontakty-mesto .contacts-accordeon-switcher > div{
		max-width: 355px;
	}
	main.kontakty-mesto .contacts-accordeon-switcher{
		margin-bottom:unset;
	}
}	

main.kontakty-mesto .contacts-accordeon-switcher > div.active img, main.kontakty-mesto .contacts-accordeon-switcher > div:hover img{
	filter: invert(1);
}

main.kontakty-mesto .contacts-accordeon-switcher > div.active, main.kontakty-mesto .contacts-accordeon-switcher > div:hover{
	box-shadow: 4px 8px 8px #8D99AE33;
	background-color: #000;
	transition: all 0.1s linear;
	color:#fff;
}


main.kontakty-mesto .contacts-accordeon-switcher > div > div:nth-child(3){
	transform-origin: left;
	transition: all 0.1s ease-out;
}

main.kontakty-mesto .contacts-accordeon-switcher > div:not(.active):hover div:nth-child(3){
	transform:scaleX(1.01);
}
main.kontakty-mesto .contacts-accordeon-switcher > div.active div:nth-child(3){
	transform:scaleX(1.01);
}

main.kontakty-mesto .contacts-accordeon-switcher > div > div:nth-child(2){
	text-align: center;
}
main.kontakty-mesto .contacts-accordeon-switcher > div > div:nth-child(3){
	text-align: end;
}

main.kontakty-mesto .contacts-accordeon-switcher > div > div{
	flex-basis: 33%;
}
main.kontakty-mesto .contacts-accordeon-switcher > div.switcher-text > div:nth-child(1){
	flex-basis: 66%;
}
main.kontakty-mesto .contacts-accordeon-switcher > div.switcher-text > div:nth-child(2){
	flex-basis: 33%;
	text-align: end;
}
/*DEALERS*/
main.kontakty-mesto .contacts-car-dealers > div{
	display: none;
	grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
	place-items: center;
	gap:45px;
	border-radius: 10px;
}

main.kontakty-mesto .contacts-car-dealers > div > div {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	min-height: 200px;
	width:100%;
	/*box-shadow: 8px 15px 30px #8D99AE33;*/
	animation: animateShadow 0.4s linear forwards;

}

@keyframes animateShadow{
	from{ box-shadow:2px 4px 10px #8D99AE33;}
	to{box-shadow:8px 15px 30px #8D99AE33;}
}
main.kontakty-mesto .contacts-car-dealers > div > div > div{
	display: flex;
	flex-direction: column;
	align-items: center;
}

main.kontakty-mesto .contacts-car-dealers .prodejce-name{
	font-size:18px;
	color:#FF205A;
}
main.kontakty-mesto .contacts-car-dealers .prodejce-pos{
	font-weight: 600;
	color:#6D676E;
}

main.kontakty-mesto .kontakt-top-block{
	margin-bottom:80px;
}


/*******TESTING******/
main.kontakty-mesto .kontakt-top-block > *{
	border-radius: unset;
}

main.kontakty-mesto .kontakt-top-block {
  display: flex;
  column-gap: 0px;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 100px !important;
  border-radius: 10px;
  box-shadow: 8px 18px 30px #8D99AE33;
}

main.kontakty-mesto .kontakt-top-block h3{
	font-size: 22px;
	text-transform: uppercase;
}

main.kontakty-mesto .kontakt-top-block a.navigate{
	padding:5px 50px !important;
	margin-top: 15px;
}

.kontakt-top-block-panel {
  flex: 1;
}

main.kontakty-mesto .kontakt-top-block-panel.img {
  flex-basis: 50%;
  max-width: 50%;
  height:375px;
}


main.kontakty-mesto .kontakt-top-block-panel.obsah {
  flex-basis: 50%;
  max-width: 50%;
}

main.kontakty-mesto .kontakt-top-block-panel-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
	gap:20px;
}

main.kontakty-mesto .kontakt-top-block-panel-grid  p{
	font-weight: 500 ;
	font-size: 18px;
	margin:0px 0px 8px 0px !important;
}

main.kontakty-mesto .kontakt-top-block-panel-grid  strong{
	font-weight: 700 ;
	font-size: 18px;
}

main.kontakty-mesto .kontakt-top-block-panel-grid-flex{
	display: flex;
	flex-direction: row;
	gap:20px;
	align-items: center;
}

@media(max-width:990px) {
  main.kontakty-mesto .kontakt-top-block {
    display: flex;
    row-gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    flex-direction: column;
  }

  main.kontakty-mesto .kontakt-top-block-panel.img{
	border-radius: 10px 10px 0px 0px;
  }

  main.kontakty-mesto .kontakt-top-block-panel {
    flex: 1;
    margin-bottom: 20px;
  }

  main.kontakty-mesto .kontakt-top-block-panel.img {
    flex-basis: 100%;
    min-width: 100%;
    margin: 0 auto;
  }

  main.kontakty-mesto .kontakt-top-block-panel.obsah {
    flex-basis: 100%;
    max-width: 100%;
  }
}


/**POBOCKY - Kontakty**/

.kontakt .pobocky-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	justify-content: space-between;
	row-gap: 35px;
	column-gap: 35px;
}

.kontakt .pobocka-flex{
	display: flex;
	flex-direction: column;
	gap:40px;
	font-size: clamp(13px, 1.8vw, 18px);
	font-weight: medium;
	box-shadow: 8px 15px 30px #8D99AE33;
}

.pobocka-flex-img img{
	object-fit: cover;
	width: 100%;
}

.kontakt .pobocka-flex >div{
	flex: 1;
}

.kontakt .pobocka-flex h3{
	color:#FF205A;
	font-size:clamp(18px, 3vw, 30px);
	text-transform: uppercase;
	font-weight: bold;
	padding-inline:25px;
}

.kontakt .pobocka-flex a{
	font-size: clamp(11px, 2vw, 13px);
	background-color: #FF205A;
	color:#fff;
	border-radius: 10px 10px 10px 10px;
}

.kontakt .pobocka-flex-halves{
	display: flex;
	flex-direction: row;
	padding-inline:25px;
	gap:30px;
}

.kontakt .pobocka-flex-halves a{
	display: inline-block;
	margin-top:35px;
	padding: 15px 35px;
	border-radius: 24px;
}

.kontakt .pobocka-flex-halves >div{
	flex-basis: 50%;
}
.kontakt .pobocka-flex-halves-logos{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	padding-bottom: 25px;
	row-gap: 20px;
}

.kontakt .pobocka-flex-halves-logos:nth-child(3){
	justify-content: center;
}

.kontakt .pobocka-flex-halves-logos > img{
	max-height:33px;
	max-width: 87px;
	object-fit: contain;
}

.kontakt .pobocka-flex-link{
	border-radius: 0px 0px 10px 10px !important;
	text-align: center;
	padding-block:12px;
}

@media (max-width:1100px){
	.kontakt .pobocky-grid{
		column-gap: 5px;
	}
	.pobocka-flex-halves-logos img{
		zoom:0.8;
	}
	.kontakt .pobocka-flex-halves a{
		padding:15px 10px;
	}
}

@media (max-width:560px){

	.kontakt .pobocka-flex h3, .kontakt .pobocka-flex-halves{
		padding-inline: 8px;
	}
	.kontakt .pobocka-flex-halves{
		flex-direction: column;
	}
	.kontakt .pobocka-flex-halves:nth-child(1){
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}