@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300;500;600&display=swap");
*, *::after, *::before {
  box-sizing: border-box;
  outline: none;
}

:root {
  --color-sys-succes:hsl(152, 69%, 31%);
  --color-sys-succes-back:hsl(152, 69%, 90%);
  --color-sys-error:hsl(354, 70%, 54%);
  --color-sys-error-back:hsl(354, 70%, 90%);
  --color-sys-warning:hsl(45, 100%, 51%);
  --color-sys-info:hsl(190, 90%, 50%);
  --color-sys-light:hsl(210, 17%, 98%);
  --color-sys-dark:hsl(210, 11%, 15%);
  --color-primary-090:hsl(53, 99%, 98%);
  --color-primary-100:hsl(53, 99%, 94%);
  --color-primary-200:hsl(53, 99%, 83%);
  --color-primary-300:hsl(53, 99%, 71%);
  --color-primary-400:hsl(53, 99%, 59%);
  --color-primary-500:hsl(53, 99%, 45%);
  --color-primary-600:hsl(53, 99%, 38%);
  --color-primary-700:hsl(53, 99%, 29%);
  --color-primary-800:hsl(53, 99%, 21%);
  --color-primary-900:hsl(53, 99%, 16%);
  --color-grey-000:hsl(0, 0%, 100%);
  --color-grey-100:hsl(210, 17%, 94%);
  --color-grey-200:hsl(210, 17%, 87%);
  --color-grey-300:hsl(210, 17%, 71%);
  --color-grey-400:hsl(210, 17%, 59%);
  --color-grey-500:hsl(210, 17%, 45%);
  --color-grey-600:hsl(210, 17%, 38%);
  --color-grey-700:hsl(210, 17%, 28%);
  --color-grey-800:hsl(210, 17%, 21%);
  --color-grey-900:hsl(210, 17%, 16%);
  --color-grey-999:hsl(210, 17%, 1%);
  --color-main:hsl(53, 99%, 45%);
  --color-main-hover:hsl(53, 99%, 50%);
  --color-grey1:hsl(0, 0%, 15%);
  --color-grey1L:hsl(0, 0%, 17%);
  --color-grey2:hsl(0, 0%, 5%);
  --color-grey3:hsl(210, 17%, 28%);
  --color-grey4:hsl(210, 17%, 80%);
  --color-rows:hsl(210, 17%, 95%);
  --color-menu-background:hsl(53, 99%, 45%);
  --color-menu-splitter:var(--color-primary-400);
  --color-menu-hover:var(--color-primary-300);
  --color-menuSub-background:var(--color-primary-300);
  --color-menuSub-background2:hsl(53, 99%, 60%);
  --color-menuSub-border:var(--color-primary-300);
  --color-menuSub-item-hover:hsl(0, 0%, 20%);
  --color-menu-text:hsl(0, 0%, 15%);
  --color-menu-special:hsl(0, 0%, 15%);
  --color-menu-special-hover:hsl(0, 0%, 45%);
  --background-page:hsl(210, 13%, 90%);
  --background-page:hsl(210, 13%, 97%);
  --carlist-GAL-hover:hsl(210, 17%, 80%);
  --carlist-GAL-name:hsl(0, 0%, 95%);
  --carlist-GAL-name:transparent;
  --carlist-pages-active:hsl(210, 17%, 70%);
  --carlist-pages-hover:hsl(210, 17%, 90%);
  --color-input-back:hsl(210, 17%, 80%);
  --color-input-color:#000;
  --color-input-value:hsl(210, 87%, 88%);
  --color-input-active-back:hsl(210, 17%, 95%);
  --color-input-required:hsl(6, 61%, 49%);
  --color-input-required:hsl(117, 39%, 34%);
  --color-input-required-fail:hsl(6, 100%, 92%);
  --color-input-required-fail-color: var(--color-grey-900);
  --input-background:var(--color-grey-200);
  --input-color:var(--color-grey-900);
  --input-border: var(--color-grey-900);
  --input-section: transparent;
  --input-section-border: none;
  --input-label-background:transparent;
  --input-label-color:var(--color-grey-900);
  --input-legend-background:transparent;
  --input-legend-color:var(--color-grey-900);
  --input-legend-border:none;
  --input-active-background:hsl(210, 17%, 95%);
  --input-active-color: var(--color-grey-900);
  --form-background: transparent;
  --form-color:inherit;
}

form {
  padding: 0;
  margin: 0;
}

ul {
  padding: 0 0 0 30px;
  margin: 0;
  font-size: inherit;
}
ul li {
  font-size: inherit;
}

html {
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 300;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--background-page);
}
body[state=photo] {
  overflow: hidden;
}

button {
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
button[view=transparent] {
  background: transparent;
  border: 0;
  color: inherit;
}
button[view=transparent]:hover {
  filter: invert(1);
  text-decoration: underline;
}
button[view~=main] {
  display: flex;
  align-items: center;
  border: 0;
  background-color: var(--color-main);
  padding: 10px 10px;
  font-weight: 400;
  border-radius: 5px;
}
button[view~=main] img {
  margin-right: 10px;
}
button[view~=main]:hover {
  background-color: var(--color-main-hover);
  box-shadow: 0 0 5px 0px var(--color-main-hover);
  color: #333;
}
button[view~=up] {
  text-transform: uppercase;
}
button[view~=inline] {
  display: inline-flex;
}
button[view~=big] {
  font-size: 1.1rem;
}
button[view~=small] {
  font-size: 0.7rem;
}
button[view~=grey] {
  background-color: var(--color-grey-200);
  border: 1px solid var(--color-grey-800);
}
button[view~=grey]:hover {
  background-color: var(--color-grey-300);
}
button[view~=img15] img {
  width: 15px;
  height: 15px;
}

.floatRight {
  float: right;
}

.floatLeft {
  float: left;
}

sup, sub {
  font-size: 0.4em;
}

.fileDownload {
  border: 4px dotted hsl(0, 63%, 52%);
  margin: 20px 0px;
  padding: 20px;
}

#infoWrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(51, 51, 51, 0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  opacity: 0;
  transform-origin: center center;
  transition: opacity 0.5s ease;
}
#infoWrapper[active] {
  opacity: 1;
}
#infoWrapper[active] #infoWindow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1, 1);
}
#infoWrapper[hidden] {
  display: none;
}
#infoWrapper #infoWindow {
  user-select: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 500px;
  min-height: 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  border: 1px solid #333;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 2px #000;
  background: #aaa;
  opacity: 0;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(0, 0);
  transition: opacity 1s, transform 1s;
}
#infoWrapper #infoWindow[state~=info] #infoText {
  font-size: 1rem;
}
#infoWrapper #infoWindow[state~=info] #infoText span {
  font-size: 0.9rem;
}
#infoWrapper #infoWindow[state~=content] {
  padding: 0px;
}
#infoWrapper #infoWindow[state~=frame] {
  justify-content: stretch;
}
#infoWrapper #infoWindow[state~=frame] #infoText {
  padding: 0;
  flex: 1 1 auto;
}
#infoWrapper #infoWindow[state~=frame] #infoText iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
#infoWrapper #infoWindow[state=success] {
  background: var(--color-sys-succes-back);
  color: var(--color-sys-succes);
}
#infoWrapper #infoWindow[state=error] {
  background: var(--color-sys-error-back);
  color: var(--color-sys-error);
}
#infoWrapper #infoWindow[state=error] #infoText {
  font-size: 1rem;
}
#infoWrapper #infoClose {
  position: absolute;
  display: block;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  z-index: 50;
  border-radius: 100%;
  background: var(--color-sys-error);
  cursor: pointer;
  transition: all 0.3s ease;
}
#infoWrapper #infoClose::before {
  content: "✖";
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
#infoWrapper #infoClose:hover {
  background: red;
  transform: scale(1.2);
}
#infoWrapper #infoText {
  padding: 20px;
  font-size: 1.5rem;
  text-align: center;
  min-height: 100px;
  height: 100%;
}
#infoWrapper #infoText strong {
  display: block;
}
#infoWrapper #infoBtns {
  width: 100%;
  align-self: flex-end;
  text-align: center;
  padding: 10px 5px;
  border-top: 1px solid #333;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background: var(--color-grey-400);
}
#infoWrapper #infoBtns button {
  border: 0;
  padding: 10px 15px;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
}
#infoWrapper #infoBtns button[state=main] {
  background: var(--color-main);
}
#infoWrapper #infoBtns button[state=main]:hover {
  background: var(--color-main-hover);
  box-shadow: 0 0 5px 0 var(--color-main-hover);
}
#infoWrapper #infoBtns button[state=ok] {
  background: var(--color-sys-succes);
}
#infoWrapper #infoBtns button[state=ok]:hover {
  background: hsl(124, 34%, 50%);
  box-shadow: 0 0 5px 0 hsl(124, 34%, 50%);
}
#infoWrapper #infoBtns button[state=err] {
  background: hsl(1, 51%, 56%);
}
#infoWrapper #infoBtns button[state=err]:hover {
  background: hsl(1, 51%, 65%);
  box-shadow: 0 0 5px 0 hsl(1, 51%, 65%);
}

[loading=progress] {
  position: relative;
}
[loading=progress]::before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(34, 34, 34, 0.5);
  backdrop-filter: blur(2px);
  border-radius: inherit;
}
[loading=progress]::after {
  content: "";
  z-index: 10;
  position: absolute;
  width: 50px;
  height: 50px;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  background: rgba(255, 255, 255, 0.6) url("/img/icon-marker.png") center center no-repeat;
  background-size: 60% 60%;
  border-radius: 8px;
  border: 2px solid var(--color-main);
  animation: infoWindowLoading 2s ease infinite;
}

@keyframes infoWindowLoading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
[animate] {
  transition: transform 1.5s ease, opacity 2s ease;
}
[animate][animate~=del1] {
  transition-delay: 0.1s;
}
[animate][animate~=del2] {
  transition-delay: 0.2s;
}
[animate][animate~=del3] {
  transition-delay: 0.3s;
}
[animate][animate~=del4] {
  transition-delay: 0.4s;
}
[animate][animate~=del5] {
  transition-delay: 0.5s;
}
[animate][animate~=del6] {
  transition-delay: 0.6s;
}
[animate][animate~=del7] {
  transition-delay: 0.7s;
}
[animate][animate~=del8] {
  transition-delay: 0.8s;
}
[animate][animate~=del9] {
  transition-delay: 0.9s;
}
[animate][animate~=opacity] {
  opacity: 0;
}
[animate][animate~=flow-left] {
  transform: translateX(-50%);
  opacity: 0;
}
[animate][animate~=flow-right] {
  opacity: 0;
  transform: translateX(50%);
}
[animate][animate~=flow-up] {
  opacity: 0;
  transform: translateY(30%);
}
[animate][animate~=flow-down] {
  opacity: 0;
  transform: translateY(-100%);
}
[animate][animate~=out-left] {
  transform: translateX(-100vw);
  opacity: 0;
}
[animate][animate~=out-right] {
  opacity: 0;
  transform: translateX(100vw);
}
[animate][animate~=rotate-left] {
  opacity: 0;
  transform: translateX(100%) rotate(90deg);
}
[animate][animate~=rotate-right] {
  opacity: 0;
  transform: translateX(-100%) rotate(-90deg);
}
[animate][animate~=rotate-Z] {
  opacity: 0;
  transform: translateY(100%) rotate3D(1, 0, 0, 270deg);
}
[animate][animate~=rotate] {
  opacity: 0;
  transform: rotate(var(--animate-rotate, 0deg));
}
[animate][animate~=rotate22] {
  opacity: 0;
  transform: rotate(22deg);
}
[animate][show] {
  transform: translate(0, 0) rotate(0);
  opacity: 1;
}

[animate-parent][animate-parent=active] [animate], [animate-parent][animate-parent=active][animate] {
  transform: translate(0, 0) rotate(0);
  opacity: 1;
}

[skew] {
  --skew-size:-20deg;
  --skew-SL:0;
  --skew-SR:0;
  --skew-BR:0;
  --skew-BL:0;
  position: relative;
}
[skew]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(var(--skew-SL) * -10px);
  right: calc(var(--skew-SR) * -10px);
  background: var(--background-color);
  border: 0px solid var(--border-color, red);
  border-right-width: calc(var(--skew-BR) * 2px);
  border-left-width: calc(var(--skew-BL) * 2px);
  transform: skewX(var(--skew-size));
}
[skew][skew~=L1] {
  --skew-SL:1;
}
[skew][skew~=L2] {
  --skew-SL:2;
}
[skew][skew~=L3] {
  --skew-SL:3;
}
[skew][skew~=L4] {
  --skew-SL:4;
}
[skew][skew~=L5] {
  --skew-SL:5;
}
[skew][skew~=R1] {
  --skew-SR:1;
}
[skew][skew~=R2] {
  --skew-SR:2;
}
[skew][skew~=R3] {
  --skew-SR:3;
}
[skew][skew~=R4] {
  --skew-SR:4;
}
[skew][skew~=R5] {
  --skew-SR:5;
}
[skew][skew~=BRM] {
  --skew-BR:0.5;
}
[skew][skew~=BRB] {
  --skew-BR:25;
}
[skew][skew~=BR1] {
  --skew-BR:1;
}
[skew][skew~=BR2] {
  --skew-BR:3;
}
[skew][skew~=BR3] {
  --skew-BR:6;
}
[skew][skew~=BR4] {
  --skew-BR:10;
}
[skew][skew~=BR5] {
  --skew-BR:15;
}
[skew][skew~=BLM] {
  --skew-BL:0.5;
}
[skew][skew~=BLB] {
  --skew-BL:25;
}
[skew][skew~=BL1] {
  --skew-BL:1;
}
[skew][skew~=BL2] {
  --skew-BL:3;
}
[skew][skew~=BL3] {
  --skew-BL:6;
}
[skew][skew~=BL4] {
  --skew-BL:10;
}
[skew][skew~=BL5] {
  --skew-BL:15;
}

header {
  position: relative;
  height: 100px;
  background: var(--color-menu-background);
  position: sticky;
  z-index: 1000;
  top: -1px;
  transition: all 0.5s ease;
}
header #mobMenu {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  display: none;
  height: 32px;
  width: 40px;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s ease;
}
header #mobMenu span, header #mobMenu::before, header #mobMenu::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 8px;
  background: currentColor;
  border-radius: 5px;
}
header #mobMenu::after {
  top: 24px;
}
header #mobMenu span {
  top: 12px;
}
header #mobMenu.menuMobOpen {
  color: #111;
}
header #mobMenuView {
  position: absolute;
  top: -30px;
  left: -30px;
  opacity: 0;
  z-index: -10;
}
header #mobMenuView:checked ~ ul#mainMenu {
  transform: scaleY(1);
}
header .logo {
  --background-color:var(--color-grey1);
  --border-color1:red;
  z-index: 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  padding: 20px;
  transition: all 0.3s ease;
}
header .logo img {
  width: 250px;
  transition: all 0.3s ease;
}
header .contact {
  align-self: center;
  margin-left: auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  transition: width 0.5s ease;
  padding: 0 5px 0 0;
}
header .phone {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease-in;
  font-size: 0px;
  text-align: right;
}
header .phone:hover {
  filter: drop-shadow(0 0 5px #fff) invert(1);
}
header .social {
  display: grid;
  gap: 5px;
}
header .social a {
  transition: all 0.2s ease-in;
  font-size: 0px;
}
header .social a img {
  height: 30px;
  transition: height 0.3s ease;
}
header .social a:hover {
  filter: drop-shadow(0 0 5px #fff) invert(1);
}
header .moveTOP {
  --icon-size:40px;
  position: fixed;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  bottom: 20px;
  left: 20px;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  background: var(--color-grey1L);
}
header .moveTOP:hover {
  background: var(--color-grey3);
}
header[sticky] {
  height: 60px;
  box-shadow: 0 0 5px 0px #000;
}
header[sticky] .social img {
  height: 15px;
}
header[sticky] .moveTOP {
  display: flex;
}

nav {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  height: 100%;
  user-select: none;
  border-bottom: 2px solid #fff;
}
nav ul {
  align-self: center;
  display: flex;
  flex-flow: row nowrap;
  list-style-type: none;
  font-size: 1.1rem;
  padding: 0px;
}
nav ul a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: inherit;
}
nav ul li {
  --background-color:var(--color-menu-background);
  --border-color:var(--color-menu-splitter);
  position: relative;
  color: var(--color-menu-text);
  white-space: nowrap;
  transition: all 0.3s ease;
}
nav ul li.last {
  margin-right: 5px;
}
nav ul li.special {
  --background-color: var(--color-menu-special);
  margin-right: 5px;
  color: #fff;
}
nav ul li.special > a {
  text-transform: uppercase;
  font-weight: 500;
}
nav ul li.special:hover {
  color: #000;
}
nav ul li .submenu {
  position: absolute;
  z-index: 1;
  left: -8px;
  white-space: nowrap;
  background: var(--color-menuSub-background);
  border: 2px solid var(--color-menuSub-border);
  box-shadow: 0 0 10px 0px rgba(17, 17, 17, 0.5);
  transform: scale(1, 0);
  transform-origin: top left;
  transition: transform 0.2s ease;
}
nav ul li .submenu a {
  padding: 0.2rem 1.5rem;
}
nav ul li .submenu a:hover {
  background: var(--color-menuSub-item-hover);
  color: #fff;
}
nav ul li:hover {
  --background-color: var(--color-menu-hover);
}
nav ul li:hover .submenu {
  transform: scale(1, 1);
}

footer {
  background: var(--color-grey1);
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 3rem 0;
  color: #fff;
  font-size: 1.5rem;
  width: 100%;
  overflow: hidden;
}
footer div {
  text-align: center;
}
footer div a {
  color: inherit;
  text-decoration: none;
}
footer div a:hover {
  color: var(--color-grey-400);
  text-decoration: underline;
}
footer fieldset {
  border: 1px solid var(--color-grey-500);
}
footer legend {
  color: var(--color-primary-400);
}
footer .firmName {
  font-size: 1.8rem;
  font-weight: 500;
  padding: 20px 0;
}
footer .footerMenu {
  margin-top: 50px;
  display: flex;
  flex-flow: row wrap;
}
footer .footerMenu a {
  --background-color:var(--color-grey1L);
  --border-color:var(--color-main);
  flex: 1 1 auto;
  text-align: center;
  color: inherit;
  text-decoration: none;
  padding: 0.5rem 1rem;
}
footer .footerMenu a:hover {
  --background-color:var(--color-grey2) ;
}

section[carlist] {
  flex: 1 1 auto;
}
section[carlist] .carListInfo {
  grid-column: 1/-1;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 0 10px 5px 10px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 5px;
  user-select: none;
  gap: 3px;
}
section[carlist] .carListInfo .order {
  margin-left: auto;
}
section[carlist] .carListInfo button {
  cursor: pointer;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-300);
  border-radius: 5px;
  padding: 3px;
  font-size: 0;
}
section[carlist] .carListInfo button img {
  height: 20px;
}
section[carlist] .carListInfo button:hover {
  background: var(--color-grey-300);
}
section[carlist] .carListInfo button[selected] {
  filter: invert(1);
  cursor: default;
}
section[carlist] .carListInfo select {
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-300);
  border-radius: 5px;
  height: 25px;
}
section[carlist] .carListInfo select:hover, section[carlist] .carListInfo select:focus {
  background: var(--color-grey-300);
}
section[carlist] .carListInfo > div {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 3px;
  margin-right: 5px;
}
section[carlist] .carListInfo label[typ=checkbox] {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  cursor: pointer;
}
section[carlist] .carListInfo label[typ=checkbox] input {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}
section[carlist] .carListInfo label[typ=checkbox] i {
  position: relative;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-300);
  border-radius: 1000px;
  height: 28px;
  width: 40px;
}
section[carlist] .carListInfo label[typ=checkbox] i::before {
  content: attr(off);
  position: absolute;
  top: 1px;
  left: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  height: calc(100% - 2px);
  aspect-ratio: 1/1;
  background: var(--color-grey-300);
  border-radius: 100%;
  transition: all 0.5s ease;
}
section[carlist] .carListInfo label[typ=checkbox] input:checked ~ i::before {
  content: attr(on);
  background: var(--color-grey-900);
  left: 13px;
}
section[carlist] .carParams {
  display: block;
}
section[carlist][view=VALUES] .carParams {
  display: none !important;
}
section[carlist][view=VALUES] a[caritem] .carValues {
  --carlist-values-columns:2;
  display: flex;
  flex-flow: row wrap;
  max-width: 500px;
}
section[carlist][view=VALUES] a[caritem] .carValues span {
  width: calc(100% - 100px);
  font-weight: 500;
}
section[carlist][view=VALUES] a[caritem] .carValues label {
  width: 100px;
}
section[carlist] .carName {
  overflow: hidden;
  line-height: 2.4rem;
  height: 2.4rem;
  background: var(--carlist-GAL-name);
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0 10px;
}
section[carlist] .carPrice {
  height: 4.8rem;
  text-align: center;
  font-size: 2.4rem;
}
section[carlist] .carPrice span {
  transition: all 0.3s ease;
  font-weight: 500;
  line-height: 1em;
  padding: 0;
}
section[carlist] .carPrice i {
  display: block;
  font-size: 1rem;
  font-style: normal;
  height: 1rem;
}
section[carlist] .carPrice b {
  display: block;
  font-size: 0.8rem;
  font-weight: normal;
  line-height: 0.8rem;
}
section[carlist] .carParams[view=flexRow] {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
section[carlist] .carParams[view=flexRow] i, section[carlist] .carParams[view=flexRow] b {
  background: url("/img/inp-marker.png") no-repeat left center;
  margin-left: 5px;
  padding-left: 16px;
  font-style: normal;
  font-weight: 300;
  text-align: left;
}
section[carlist] .carInfoList {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  overflow: hidden;
}
section[carlist] .carInfoList i {
  position: absolute;
  top: -17px;
  left: -13px;
  display: block;
  width: 74px;
  height: 18px;
  text-align: center;
  transform-origin: bottom left;
  transform: rotate(45deg);
  font-style: normal;
  font-size: 12px;
  padding: 0 10px;
  color: #fff;
  background: var(--color-primary-800);
  opacity: 0.9;
}
section[carlist] .carInfoList i::before {
  content: attr(text);
}
section[carlist] .carInfoList i:nth-child(1) {
  left: -10px;
}
section[carlist] .carInfoList i:nth-child(2) {
  left: 17px;
}
section[carlist] .carInfoList i:nth-child(3) {
  left: 44px;
}
section[carlist] .carInfoList i:nth-child(4) {
  left: 81px;
}
section[carlist] .carInfoList i:nth-child(5) {
  left: 98px;
}
section[carlist] .carInfo {
  position: absolute;
  color: #fff;
  width: 150px;
  line-height: 0;
  text-align: center;
}
section[carlist] .carInfo::after {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2rem;
  color: inherit;
  overflow: hidden;
}
section[carlist] .carInfo[view]::after {
  content: attr(text);
}
section[carlist] .carInfo[view=TIP] {
  background: hsl(0, 92%, 58%);
  --info-offset:-70px;
  transform-origin: top left;
  transform: rotate(45deg);
  top: calc(var(--info-offset) / 2);
  right: var(--info-offset);
}
section[carlist] .carInfo[view=NEW] {
  background: hsl(113, 73%, 32%);
  --info-offset:-45px;
  transform-origin: center;
  transform: rotate(-45deg);
  top: 12px;
  left: var(--info-offset);
}
section[carlist] .carInfo[view=SLEVA] {
  width: 170px;
  background: hsl(0, 92%, 58%);
  --info-offset:-50px;
  transform-origin: top left;
  transform: rotate(-45deg);
  bottom: calc(var(--info-offset) / 2);
  right: var(--info-offset);
}
section[carlist] a[carItem] {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  color: var(--color-grey3);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}
section[carlist] a[carItem] span {
  display: block;
  padding: 0px 10px;
}
section[carlist] a[carItem] .carValues {
  display: none;
}
section[carlist] a[carItem] .carEvNum {
  position: absolute;
  display: flex;
  bottom: 5px;
  font-size: 0.7rem;
}
section[carlist] a[carItem] .carEvNum span {
  padding: 0 3px;
}
section[carlist] a[carItem]:hover {
  background: var(--carlist-GAL-hover);
  box-shadow: 0 0 15px 0px rgba(51, 51, 51, 0.5);
}
section[carlist] a[carItem]:hover .carImage img {
  transform: rotate(1deg) scale(1.05, 1.05);
}
section[carlist] a[carItem]:hover .carPrice span {
  font-size: 1.1em;
}

/******************************** GALERIE **********************************************************************/
section[carlist=GAL] {
  --carlist-columns:5;
  display: grid;
  grid-template-columns: repeat(var(--carlist-columns), 1fr);
  gap: 1rem;
  padding: 0px 20px;
}
section[carlist=GAL] a[caritem] .carImage {
  position: relative;
  padding: 0px;
  overflow: hidden;
}
section[carlist=GAL] a[caritem] .carImage img {
  width: 100%;
  aspect-ratio: 4/3;
  transition: all 0.2s ease;
}
section[carlist=GAL] a[caritem] .carParams {
  text-align: center;
}
section[carlist=GAL] a[caritem] .carParams i, section[carlist=GAL] a[caritem] .carParams b {
  width: 45%;
}
section[carlist=GAL] a[caritem] .carInfo2 {
  --info-offset:-70px;
  transform-origin: top left;
  transform: rotate(45deg);
  top: calc(var(--info-offset) / 2);
  right: var(--info-offset);
}
section[carlist=GAL] a[caritem] .carPrice {
  margin: 20px 0 6px 0;
}

/****************************** TABLE ************************************************************************/
section[carlist=TAB] {
  --carlist-columns:2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0px 20px;
}
section[carlist=TAB] a[caritem] {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin: 0 var(--carlist-margin) calc(var(--carlist-margin) * 2) var(--carlist-margin);
}
section[carlist=TAB] a[caritem] .carText {
  width: 60%;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}
section[carlist=TAB] a[caritem] .carImage {
  position: relative;
  align-self: center;
  padding: 10px;
  overflow: hidden;
  flex: 0 0 auto;
  width: 40%;
  min-width: 100px;
  max-width: 300px;
}
section[carlist=TAB] a[caritem] .carImage img {
  width: 100%;
  aspect-ratio: 4/3;
  transition: all 0.2s ease;
}
section[carlist=TAB] a[caritem] .carParams {
  text-align: center;
}
section[carlist=TAB] a[caritem] .carParams b {
  width: 100%;
}
section[carlist=TAB] a[caritem] .carPrice {
  position: absolute;
  bottom: 5px;
  right: 10px;
  text-align: right;
}
section[carlist=TAB] a[caritem] .carInfo2 {
  --info-offset:-45px;
  transform-origin: center;
  transform: rotate(-45deg);
  top: 10px;
  left: var(--info-offset);
}
section[carlist=TAB] a[caritem] .carEvNum {
  bottom: unset;
  top: 5px;
  right: 5px;
}

/************************************ stránkování **************************************************************/
section[listpages] {
  grid-column: 1/-1;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  user-select: none;
  padding: 10px 0px;
  border-top: 1px solid #ccc;
}
section[listpages] a {
  text-decoration: none;
  padding: 0.7rem 0.8rem;
  border-radius: 5px;
  color: var(--color-grey1);
}
section[listpages] a:hover {
  background: var(--carlist-pages-hover);
}
section[listpages] a[active] {
  color: #fff;
  background: var(--carlist-pages-active);
}
section[listpages] a[disabled] {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
  color: var(--color-grey4);
  background: transparent;
}

[closableWrapper] [closable] {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s ease;
  overflow: hidden;
}
[closableWrapper] [section=title] {
  position: relative;
  padding: 0 0 0 30px;
}
[closableWrapper] [section=title]::before {
  position: absolute;
  background: transparent url("/img/inp-arrow-30.png") center no-repeat;
  background-size: 20px auto;
  left: 0px;
  width: 14px;
  height: 14px;
  top: calc(50% - 7px);
  transition: all 0.5s ease;
}
[closableWrapper] [section=title] [section=open] {
  transition: all 0.5s ease;
}
[closableWrapper] [section=title]:hover::before {
  filter: invert(0.5);
}
[closableWrapper] form {
  overflow: hidden;
}
[closableWrapper][closableWrapper=off] [closable] {
  grid-template-rows: 0fr;
}
[closableWrapper][closableWrapper=on] [section=title]::before {
  transform: rotate(180deg);
  filter: invert(1);
}
[closableWrapper][closableWrapper=on] [closable] {
  grid-template-rows: 1fr !important;
}
[closableWrapper][closableWrapper=on] [closable] form {
  padding-top: 10px;
  padding-bottom: 10px;
}

[formWrapper] {
  background: var(--form-background);
  color: var(--form-color);
  user-select: none;
  padding: 0 10px;
}
[formWrapper][view=flex] {
  display: flex;
  flex-flow: column;
}
[formWrapper][view=flex] [section=switch] {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
}
[formWrapper][view=flex] .buttons {
  margin-top: auto;
}
[formWrapper] [section=title] {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 10px 0px;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.3rem;
  transition: margin 0.5s ease;
  pointer-events: none;
}
[formWrapper] [section=title] img {
  height: 20px;
}
[formWrapper] [section=form] {
  flex: 1 1 auto;
}
[formWrapper] [section=open] {
  display: none;
}
[formWrapper] [section=text] {
  font-size: 0.8rem;
  margin-top: 20px;
}
[formWrapper] [section=info] {
  text-align: right;
  font-size: 0.8rem;
}
[formWrapper] [section=done] {
  margin: 10px;
  padding: 20px;
  font-weight: 400;
  color: var(--color-sys-succes);
  background: var(--formwrapper-done);
  text-align: center;
}
[formWrapper] [section=switch][state=hide] {
  display: none;
}
[formWrapper] [section=switch][state=show] {
  display: flex;
}
[formWrapper][state=done] form {
  opacity: 0;
}
[formWrapper][formWrapper~=main] [section=title] {
  color: var(--color-main);
}
[formWrapper][formWrapper~=light] {
  --form-background:var(--color-grey-100);
  --form-color:var(--color-grey-800);
  --formwrapper-done:var(--color-grey-200);
}
[formWrapper][formWrapper~=light] a:hover {
  color: var(--color-grey-700);
}
[formWrapper][formWrapper~=grey1] {
  --form-background:var(--color-grey-200);
  --form-color:var(--color-grey-800);
  --input-background: var(--color-grey-100);
  --formwrapper-done:var(--color-grey-100);
}
[formWrapper][formWrapper~=grey1] a:hover {
  color: var(--color-grey-700);
}
[formWrapper][formWrapper~=grey2] {
  --form-background:var(--color-grey-300);
  --form-color:var(--color-grey-800);
  --formwrapper-done:var(--color-grey-200);
}
[formWrapper][formWrapper~=grey2] a:hover {
  color: var(--color-grey-700);
}
[formWrapper][formWrapper~=dark] {
  --form-background:var(--color-grey-700);
  --formwrapper-done:var(--color-grey-500);
  --form-color:var(--color-grey-200);
  --color-input-required-fail-color: var(--color-grey-700);
}
[formWrapper][formWrapper~=dark] a:hover {
  color: var(--color-grey-000);
}
[formWrapper][formWrapper~=shadow] {
  box-shadow: 0 0 5px 2px rgba(17, 17, 17, 0.9);
}

section[form=wrapper] {
  display: grid;
  grid-template-rows: 0 1fr;
  transition: grid-template-rows 1s ease;
}
section[form=wrapper][state=info] {
  grid-template-rows: 60px 0fr;
}
section[form=wrapper][state=info] [form=form] {
  padding: 0;
}
section[form=wrapper] [form=info] {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 500;
  overflow: hidden;
  background: var(--color-sys-succes-back);
  color: var(--color-sys-succes);
}
section[form=wrapper] [form=form] {
  overflow: hidden;
}
section[form=wrapper][view~=closable] [form=form] {
  transition: padding-bottom 0.5s ease;
  padding: 0px 0px 50px 0px;
}
section[form=wrapper] form {
  padding: 10px 0 0 0;
  overflow: hidden;
}

form {
  user-select: none;
}
form fieldset {
  border: none;
  border-radius: 5px;
  margin-bottom: 10px;
}
form fieldset legend {
  user-select: none;
}
form a {
  color: inherit;
  font-weight: 400;
  text-decoration: underline;
}
form a:hover {
  color: #fff;
}
form[columns] {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
}
form[columns][columns="2"] > * {
  width: calc(50% - 10px);
  margin: 5px;
}
form[columns] .buttons {
  width: 100%;
}
form[columns] .inputs {
  padding: 10px;
}
form[view~=light] a:hover {
  color: var(--color-grey-800);
}
form[view~=dark] {
  --form-background:var(--color-grey-700);
  --form-color:var(--color-grey-200);
  --color-input-required-fail-color: var(--color-grey-700);
}
form[view~=dark] a:hover {
  color: var(--color-grey-000);
}
form[view=flex] {
  display: flex;
  flex-flow: column;
}

.inputs {
  display: flex;
  flex-flow: row wrap;
  gap: 12px 8px;
  background: var(--input-section, transparent);
  border: var(--input-section-border);
  padding: 10px 1px;
}
.inputs .newLine {
  display: none;
  font-size: 0;
  height: 0;
  overflow: hidden;
}
.inputs legend {
  border: 0;
  margin-top: 5px;
  padding: 0 10px;
  background: var(--input-legend-background);
  color: var(--input-legend-color);
  border: var(--input-legend-border);
  border-radius: inherit;
}
.inputs[view~=dark] {
  --input-section:var(--color-grey-500);
  --input-background:var(--color-grey-200);
  --input-legend-background:var(--color-grey-500);
  --input-legend-color:var(--color-grey-000);
}
.inputs[view~=border] {
  --input-section-border:1px solid var(--color-grey-200);
}
.inputs[view~=grey] {
  --input-section: var(--color-grey-100);
  --input-section-border:1px solid var(--color-grey-200);
  --input-background:#fff;
  --input-active-background:hsl(228, 100%, 99%);
  --input-border:var(--color-grey-200);
}
.inputs[view~=light] {
  --input-background:var(--color-grey-100);
  --input-border:var(--color-grey-200);
}
.inputs[view~=light] a:hover {
  color: var(--color-grey-800);
}
.inputs [view~=right] {
  margin-left: auto;
}
.inputs .formParamsOther {
  width: 100%;
}
.inputs .formParamsOther > label {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
}
.inputs .formParamsOther > label img {
  filter: invert(1);
  transform-origin: center center;
  transition: transform 0.5s ease;
}
.inputs .formParamsOther > label:hover {
  color: #000;
}
.inputs .formParamsOther [panel] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms;
}
.inputs .formParamsOther .wrapper {
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
  gap: 10px;
}
.inputs .formParamsOther form-input {
  width: calc(50% - 5px);
}
.inputs .formParamsOther[active] > label img {
  transform: rotate(180deg);
}
.inputs .formParamsOther[active] [panel] {
  grid-template-rows: 1fr;
}

.buttons {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  padding: 20px 1px;
}
.buttons[view~=dark] {
  background: var(--color-grey3) !important;
}
.buttons[view~=dark] legend {
  color: #fff;
}
.buttons [nonactive] {
  display: none;
}

form-input {
  position: relative;
  display: block;
  width: 100%;
  min-height: 30px;
  padding: 4px;
  background: var(--input-background);
  color: var(--input-color);
  border: 1px solid var(--input-border);
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
}
form-input select, form-input input[type=text], form-input input[type=mail], form-input input[type=password], form-input textarea {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 5px 10px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
form-input select:first-child, form-input input[type=text]:first-child, form-input input[type=mail]:first-child, form-input input[type=password]:first-child, form-input textarea:first-child {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
form-input select:last-child, form-input input[type=text]:last-child, form-input input[type=mail]:last-child, form-input input[type=password]:last-child, form-input textarea:last-child {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}
form-input input[type=checkbox] {
  cursor: pointer;
}
form-input textarea {
  resize: none;
  height: 4.2rem;
}
form-input span {
  display: block;
  padding: 5px 10px;
}
form-input label {
  user-select: none;
  cursor: pointer;
}
form-input select {
  background-position: center right;
  background-repeat: no-repeat;
  background-image: url("/img/inp-arrow.png");
}
form-input select option {
  padding: 0;
  font-size: 1rem;
  font-weight: normal;
}
form-input button {
  --_color-background:var(--color-grey-300);
  --_color-hover:var(--color-grey-400);
  border: 0;
  border-radius: inherit;
  background: var(--_color-background);
  cursor: pointer;
}
form-input button:hover {
  background: var(--_color-hover);
}
form-input button[view=delete] {
  --_color-hover:hsl(0, 66%, 74%);
}
form-input[checkbox] {
  font-size: 0.8rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
form-input[checkbox] label {
  flex: 1 1 auto;
  cursor: pointer;
}
form-input::before {
  content: attr(label);
  position: absolute;
  top: 0.7em;
  left: 10px;
  padding: 0 0.3rem;
  font-size: 0.9rem;
  pointer-events: none;
  background-color: transparent;
  color: var(--input-color);
  border-radius: 3px 3px 0 0;
  transition: all 0.3s ease;
}
form-input [view~=sub] {
  opacity: 0;
  transition: opacity 0.3s ease;
}
form-input [view~=subB] {
  border-right: 1px solid #ccc;
}
form-input [view~=sub60] {
  width: 60px;
}
form-input [view~=sub80] {
  width: 80px;
}
form-input [view~=sub100] {
  width: 100px;
}
form-input [view~=half] {
  width: calc(50% - 5px);
}
form-input[view~=transparent] {
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}
form-input[view~=half] {
  width: calc(50% - 5px);
}
form-input[view~=fix100] {
  width: 100px;
}
form-input[view~=fix150] {
  width: 150px;
}
form-input[view~=fix200] {
  width: 200px;
}
form-input[view~=multi] {
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight: normal;
}
form-input[view~=auto] {
  width: auto;
}
form-input[view~=img] img {
  margin-left: 10px;
}
form-input[view~=button] {
  cursor: default;
}
form-input[view~=button] button {
  margin-left: auto;
}
form-input[view~=flex] {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
form-input[view~=flex-wrap] {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
form-input[view~=grid] {
  display: grid;
}
form-input[required]::after {
  content: "";
  position: absolute;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 4px;
  background: var(--color-input-required);
}
form-input[check=fail] {
  background-color: var(--color-input-required-fail);
  color: var(--color-input-required-fail-color);
}
form-input:focus-within {
  --input-background: var(--input-active-background);
  --input-color: var(--input-active-color);
}
form-input:focus-within[view~=multi] label, form-input[state~=value][view~=multi] label, form-input[state~=label][view~=multi] label {
  font-weight: 300;
}
form-input:focus-within [view~=sub], form-input[state~=value] [view~=sub], form-input[state~=label] [view~=sub] {
  opacity: 1;
}
form-input:focus-within::before, form-input[state~=value]::before, form-input[state~=label]::before {
  top: -0.4rem;
  font-size: 0.7rem;
  background-color: var(--input-background);
}
form-input[state~=label] {
  padding: 8px 4px 4px 4px;
}
form-input[state~=value] {
  --input-background: var(--color-input-value);
  font-weight: 400;
}
form-input[state~=readonly] {
  --input-background: var(--color-grey-200);
  font-weight: 100;
  pointer-events: none;
}
form-input[state~=error] {
  --input-label-color:#ff0000;
  --input-border:#ff0000;
}

form#adminEdit > section {
  max-width: 1200px;
  margin: 10px auto;
}
form#adminEdit #cke_editPage {
  max-width: 1200px;
  margin: 0 auto;
}
form#adminEdit fieldset {
  border: 1px solid var(--color-grey-300);
  padding: 15px;
}
form#adminEdit fieldset legend {
  font-size: 0.8rem;
}

#photoWrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(51, 51, 51, 0.95);
  z-index: 1000;
  opacity: 0;
  transform-origin: center center;
  transition: opacity 0.4s ease;
  cursor: zoom-out;
}
#photoWrapper[active] {
  opacity: 1;
}
#photoWrapper[active] #photoWindow {
  opacity: 1;
}
#photoWrapper #photoWindow {
  user-select: none;
  position: fixed;
  z-index: 1001;
  top: 50%;
  left: 50%;
  width: 95%;
  max-width: 1000px;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: stretch;
  border: 1px solid #333;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 2px #000;
  background: #aaa;
  opacity: 0;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s;
}
#photoWrapper #photoMain {
  position: relative;
  border-radius: inherit;
  overflow: hidden;
  flex: 1 1 auto;
  width: 100%;
  aspect-ratio: 4/3;
  cursor: ew-resize;
}
#photoWrapper #photoMain > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: inherit;
  transition: left 1s ease;
}
#photoWrapper #photoMain > img[move=out-left] {
  left: -100%;
}
#photoWrapper #photoMain > img[move=out-right] {
  left: 100%;
}
#photoWrapper #photoMain > img[move=in-left] {
  left: 100%;
  z-index: 10;
}
#photoWrapper #photoMain > img[move=in-right] {
  left: -100%;
  z-index: 10;
}
#photoWrapper[zoom] #photoWindow {
  max-width: none;
  transform: translate(0, 0);
}
#photoWrapper[zoom] #photoScale {
  display: block;
}
#photoWrapper [photo=scale] {
  display: none;
  position: absolute;
  z-index: 1010;
  bottom: 0px;
  left: 0px;
  background: rgba(204, 204, 204, 0.7);
  padding: 5px 10px;
  width: 80px;
  text-align: center;
  border-radius: 10px 10px 0 0;
}
#photoWrapper [photo=info] {
  position: absolute;
  z-index: 1010;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(204, 204, 204, 0.7);
  padding: 5px 10px;
  width: 80px;
  text-align: center;
  border-radius: 10px 10px 0 0;
  user-select: none;
}
#photoWrapper [photo=swipe] {
  --swipe-width:130px;
  --swipe-height:15px;
  --swipe-btn:30px;
  position: absolute;
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(204, 204, 204, 0.7);
  padding: 5px 10px;
  width: var(--swipe-width);
  height: var(--swipe-height);
  text-align: center;
  border-radius: 10px;
  font-size: 14px;
  color: #fff;
}
#photoWrapper [photo=swipe] i {
  position: absolute;
  display: block;
  font-size: 0;
  width: var(--swipe-btn);
  height: var(--swipe-btn);
  top: -9px;
  left: 50px;
  background: #eee;
  border-radius: 100px;
  animation: swipe_info infinite 3s;
}
#photoWrapper [photo=swipe][show=no] {
  display: none;
}
@keyframes swipe_info {
  0% {
    opacity: 0;
    left: 50px;
  }
  10% {
    opacity: 1;
    left: 50px;
  }
  49% {
    left: -15px;
    opacity: 1;
  }
  50% {
    opacity: 0;
    left: 50px;
  }
  60% {
    opacity: 1;
    left: 50px;
  }
  99% {
    left: 115px;
    opacity: 1;
  }
  100% {
    left: 115px;
    opacity: 0;
  }
}
#photoWrapper [photo~=button] {
  position: absolute;
  z-index: 1010;
  background: rgba(204, 204, 204, 0.7);
  padding: 5px 5px;
  border-radius: 10px;
  opacity: 1;
  transition: opacity 0.5s ease;
  border: 0;
  text-align: center;
  cursor: pointer;
}
#photoWrapper [photo~=button]:hover {
  background: rgba(102, 102, 102, 0.7);
}
#photoWrapper [photo~=left] {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
#photoWrapper [photo~=right] {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
#photoWrapper [photo~=zoom] {
  display: flex;
  align-items: center;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
}
#photoWrapper [photo~=close] {
  display: flex;
  align-items: center;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
}

#photoAction {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  z-index: 20;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
#photoAction [print] {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 5px;
  border: 1px solid var(--color-grey-700);
}
#photoAction [print] img {
  width: 30px;
}
#photoAction [print]:hover {
  background: var(--color-grey-300);
}

#photos #photoWrapper {
  position: relative;
  z-index: 0;
  background: transparent;
}
#photos #photoWrapper [photo~=button] {
  opacity: 0;
}
#photos #photoWrapper:hover [photo~=button] {
  opacity: 1;
}

#pgHP #formMain {
  --form-hp-offset:60px;
  position: absolute;
  top: var(--form-hp-offset);
  left: var(--form-hp-offset);
  width: 320px;
}
#pgHP section[carlist] {
  --carlist-columns:6;
}

#slider {
  position: relative;
  width: 100%;
  aspect-ratio: 2.27/1;
  overflow: hidden;
}
#slider .infoList {
  position: absolute;
  right: 0;
  bottom: 70px;
  height: 200px;
}
#slider .infoImages {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}
#slider .infoImages img {
  height: 100%;
  border: 0;
}
#slider .infoImages a {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  border: 0;
  transform-origin: top left;
  transition: transform 1s ease-in-out;
}
#slider .infoImages a[info-state=active] {
  transform: translateX(0);
}
#slider .infoImages a[info-state=ready] {
  transform: translateX(101%);
}
#slider .infoImages a[info-state=off] {
  transform: translateX(-101%);
}
#slider .infoImages a[hide] {
  display: none;
  transition: unset;
}
#slider .infoImages [pages] {
  --_page-size:15px;
  user-select: none;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
#slider .infoImages [pages] > * {
  margin: 0 calc(var(--_page-size) / 2);
  color: #fff;
  cursor: pointer;
}
#slider .infoImages [pages] > *:hover {
  filter: invert(1);
}
#slider .infoImages [pages] > i {
  position: relative;
  font-style: normal;
  overflow: hidden;
  width: var(--_page-size);
  height: 30px;
}
#slider .infoImages [pages] > i::before {
  position: absolute;
  font-size: 60px;
  top: -28px;
}
#slider .infoImages [pages] > i[direction=left]::before {
  content: "‹";
}
#slider .infoImages [pages] > i[direction=right]::before {
  content: "›";
}
#slider .infoImages [pages] > b {
  border: 2px solid currentColor;
  font-weight: normal;
  width: var(--_page-size);
  height: var(--_page-size);
  border-radius: 100px;
  background-color: transparent;
  transition: background-color 1s ease, border-radius 0.5s ease;
}
#slider .infoImages [pages] > b[active=on] {
  border-radius: 0;
  background-color: currentColor;
}
#slider .info {
  position: absolute;
  right: 0;
  bottom: 0px;
  --background-color:var(--color-main);
  --border-color:var(--color-grey1);
  --info-offset-x:50px;
  --info-offset-y:20px;
  width: max-content;
  padding: var(--info-offset-y) var(--info-offset-x) var(--info-offset-y) calc(var(--info-offset-x) + 30px);
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 1s ease, transform 1.5s ease;
  user-select: none;
}
#slider .info span {
  display: block;
}
#slider .info .center {
  text-align: center;
}
#slider .info .big {
  font-size: 4rem;
  font-weight: 500;
  color: #fff;
}
#slider .info .medium {
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
}
#slider .info .close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  right: 5px;
  font-size: 12px;
  background: #ff0000 url("/img/icon-close-w.png") no-repeat center;
  background-size: 15px 15px;
  color: #fff;
  border-radius: 8px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
#slider .info .close:hover {
  background-color: #831616;
  font-weight: bold;
}
#slider .info[info-state=active] {
  opacity: 1;
  transform: translateX(0);
}

#carTypes .carTypesTabs {
  display: flex;
  flex-flow: row;
  align-items: stretch;
  justify-content: flex-start;
  padding-left: 30px;
  margin-top: calc(-1rem - 20px);
}
#carTypes .carTypesTabs div[list] {
  position: relative;
  padding: 0px 20px;
  margin-right: 10px;
  color: #fff;
  font-size: 1.2rem;
  line-height: 2.4rem;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  --background-color:var(--color-grey1);
}
#carTypes .carTypesTabs div[list]:hover {
  --background-color:var(--color-main-hover);
  color: var(--color-grey1);
}
#carTypes .carTypesTabs div[list][active] {
  cursor: default;
  --background-color:var(--color-main);
  color: var(--color-grey1);
}
#carTypes .carTypesList {
  background: var(--color-main);
}
#carTypes .carTypesList div[list] {
  display: none;
  grid-template-columns: repeat(var(--columns), 1fr);
}
#carTypes .carTypesList div[list=type] {
  --columns:8;
  gap: 10px;
  padding: 5px;
}
#carTypes .carTypesList div[list=type] a[item] {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
#carTypes .carTypesList div[list=type] a[item] img {
  display: block;
  width: 100%;
  max-width: 150px;
  opacity: 0.8;
  transform-origin: center center;
  transition: all 0.3s ease;
}
#carTypes .carTypesList div[list=type] a[item] span {
  text-transform: uppercase;
  text-align: center;
}
#carTypes .carTypesList div[list=type] a[item]:hover {
  background: var(--color-main-hover);
}
#carTypes .carTypesList div[list=type] a[item]:hover img {
  filter: drop-shadow(0 0 3px #000);
  transform: scale(1.05) translateY(-20px);
  opacity: 1;
}
#carTypes .carTypesList div[list=sign], #carTypes .carTypesList div[list=price] {
  --columns:6;
  padding: 10px;
}
#carTypes .carTypesList div[list=sign] a[item], #carTypes .carTypesList div[list=price] a[item] {
  padding: 5px;
  border-radius: 5px;
  display: flex;
  align-items: center;
}
#carTypes .carTypesList div[list=sign] a[item] img, #carTypes .carTypesList div[list=price] a[item] img {
  width: 40px;
  height: auto;
  margin-right: 15px;
}
#carTypes .carTypesList div[list=sign] a[item]:hover, #carTypes .carTypesList div[list=price] a[item]:hover {
  background: var(--color-main-hover);
  color: var(--color-grey1);
}
#carTypes .carTypesList div[list=sign] a[item]:hover img, #carTypes .carTypesList div[list=price] a[item]:hover img {
  filter: drop-shadow(0 0 3px #000);
  opacity: 1;
}
#carTypes .carTypesList div[list=sign] {
  --columns:12;
  gap: 5px;
  font-size: 0.8rem;
}
#carTypes .carTypesList div[list=sign] a[item] {
  position: relative;
  flex-flow: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
#carTypes .carTypesList div[list=sign] a[item] img {
  width: 30px;
  margin-right: 0;
}
#carTypes .carTypesList div[list=price] {
  --columns:5;
  gap: 5px;
}
#carTypes .carTypesList div[list][active] {
  display: grid;
}

#pgStatic {
  --page-max-width: 1100px;
}
#pgStatic.cke_editable [animate], #pgStatic #cke_editPage [animate] {
  opacity: 1;
  transform: none;
}
#pgStatic.cke_editable section[view~=closable][state=off] [state=content], #pgStatic #cke_editPage section[view~=closable][state=off] [state=content] {
  display: block;
}
#pgStatic.cke_editable div[view][view~=columns] span, #pgStatic #cke_editPage div[view][view~=columns] span {
  user-select: auto;
}
#pgStatic.cke_editable .cke_wysiwyg_div, #pgStatic #cke_editPage .cke_wysiwyg_div {
  background-color: #efefef;
}
#pgStatic a.anchor {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
}
#pgStatic main > h1 {
  max-width: var(--page-max-width);
  margin: 1rem auto;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  border-radius: 8px;
}
#pgStatic main > h2, #pgStatic main > h3, #pgStatic main > h4 {
  margin: 1em auto 0.3em auto;
  max-width: var(--page-max-width);
}
#pgStatic .pageError {
  font-size: 2rem;
  padding: 50px;
  text-align: center;
}
#pgStatic .mainImg {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  opacity: 0.6;
  width: 100%;
  min-width: 600px;
}
#pgStatic section {
  position: relative;
  margin: 1rem auto;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  width: 100%;
  max-width: var(--page-max-width);
}
#pgStatic h1 {
  --icon-size:50px;
  display: flex;
  align-items: center;
  color: red;
  color: var(--color-grey2);
  text-shadow: 3px 3px 2px #aaa;
}
#pgStatic h1 img {
  margin-right: 15px;
}
#pgStatic h11 {
  --icon-size:50px;
  background: transparent url("/img/icon-marker.png") no-repeat center left;
  background-size: var(--icon-size) var(--icon-size);
  padding-left: calc(var(--icon-size) + 15px);
  color: red;
  color: var(--color-grey2);
  text-shadow: 3px 3px 2px #aaa;
}
#pgStatic h2 {
  --icon-size:20px;
  background: transparent url("/img/icon-marker.png") no-repeat center left;
  background-size: var(--icon-size) var(--icon-size);
  padding-left: calc(var(--icon-size) + 10px);
  color: var(--color-grey3);
}
#pgStatic h3 {
  --icon-size:14px;
  background: transparent url("/img/icon-marker-y.png") no-repeat center left;
  background-size: var(--icon-size) calc(var(--icon-size) / 2);
  padding-left: calc(var(--icon-size) + 10px);
  color: blue;
  color: var(--color-grey3);
}
#pgStatic h4, #pgStatic h5, #pgStatic h6 {
  --icon-size:20px;
  background: transparent url("/img/icon-marker-g.png") no-repeat center left;
  background-size: var(--icon-size) calc(var(--icon-size) / 2);
  padding-left: calc(var(--icon-size) + 10px);
  color: orangered;
  color: var(--color-grey3);
}
#pgStatic .catroot {
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
  max-width: var(--page-max-width);
  margin: 0 auto;
}
#pgStatic .catroot a {
  display: block;
  width: calc(50% - 5px);
  border-radius: 8px;
  background: #fff;
  padding: 20px;
  text-decoration: none;
  color: inherit;
}
#pgStatic .catroot a:hover {
  background: var(--color-grey4);
}
#pgStatic .catroot a .title {
  display: block;
  width: 100%;
}
#pgStatic .catroot a[view=icon] h3 {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  background: none;
  padding-left: 0px;
}
#pgStatic .catroot a img {
  border-radius: 1000px;
  height: 100px;
  margin-right: 15px;
}
#pgStatic section h1, #pgStatic section h2, #pgStatic section h3, #pgStatic section h4, #pgStatic section h5, #pgStatic section h6 {
  margin: 1rem 0 0.4rem 0;
}
#pgStatic section > h1:first-child, #pgStatic section > h2:first-child, #pgStatic section > h3:first-child, #pgStatic section > h4:first-child, #pgStatic section > h5:first-child, #pgStatic section > h6:first-child {
  margin: 0 0 0.8rem 0;
}
#pgStatic div[view] {
  padding: 6px 20px;
}
#pgStatic div[view] h4 {
  margin: 0;
  padding: 0;
  background-image: none;
}
#pgStatic div[view][view~=grey] {
  background-color: var(--color-grey-200);
}
#pgStatic div[view][view~=grey2] {
  background-color: var(--color-grey-200);
  border-color: var(--color-grey-100);
}
#pgStatic div[view][view~=padding] {
  padding: 0 20px 20px 20px;
}
#pgStatic div[view][view~=center] {
  text-align: center;
}
#pgStatic div[view][view~=small] {
  font-size: 0.8rem;
}
#pgStatic div[view][view~=noimg] h3 {
  background-image: none;
  margin: 0px;
}
#pgStatic div[view][view~=flex] {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
#pgStatic div[view][view~=images] {
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}
#pgStatic div[view][view~=images] span {
  border: 1px solid var(--color-grey-200);
  width: 120px;
  height: 100px;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  user-select: none;
}
#pgStatic div[view][view~=images] span::before {
  content: attr(label);
  align-self: flex-start;
  display: block;
  width: 100%;
  font-size: 0.8rem;
  padding: 3px;
  background: var(--color-grey-200);
}
#pgStatic div[view][view~=images] img {
  width: 100%;
  max-width: 50px;
  max-height: 50px;
  pointer-events: none;
}
#pgStatic div[view][view~=columns] {
  --_fontsize:.9rem;
  display: flex;
  flex-flow: row wrap;
  gap: 15px;
  padding: 0px;
}
#pgStatic div[view][view~=columns] h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--color-grey-200);
  padding: 3px 5px;
}
#pgStatic div[view][view~=columns] h4 img {
  max-height: 2rem;
  pointer-events: none;
}
#pgStatic div[view][view~=columns] span {
  padding: 5px;
  border: 1px solid var(--color-grey-200);
  width: calc(33% - 10px);
  user-select: none;
}
#pgStatic div[view][view~=columns] i {
  display: block;
  font-style: normal;
  font-size: var(--_fontsize);
}
#pgStatic div[view][view~=columns] b {
  display: block;
  margin-top: 10px;
  font-size: var(--_fontsize);
}
#pgStatic div[view][view~=columns] ul li {
  padding: 0;
  font-size: var(--_fontsize);
  margin: 0;
  line-height: var(--_fontsize);
}
#pgStatic p {
  line-height: 1.8rem;
}
#pgStatic li {
  line-height: 1.5rem;
}
#pgStatic .imgDot {
  position: relative;
  float: left;
  border-radius: 100%;
  width: 100px;
  margin: 0 30px 0 0;
}
#pgStatic .logoList td {
  padding: 0 2%;
}
#pgStatic .logoList img {
  max-width: 100%;
}
#pgStatic .zarukyList {
  --columns-count:3;
  display: grid;
  grid-template-columns: repeat(var(--columns-count), 1fr);
  border: 0px solid #ccc;
  border-width: 0px 0px 1px 1px;
  margin: 0;
  padding: 0;
}
#pgStatic .zarukyList[view=podminky] > li {
  list-style-type: none;
  border: 0px solid #ccc;
  border-width: 1px 1px 0 0;
  padding: 10px;
}
#pgStatic .zarukyList[view=soucastky] {
  grid-template-columns: 200px 1fr 1fr;
}
#pgStatic .zarukyList[view=soucastky] h3 {
  background: none;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}
#pgStatic .zarukyList[view=soucastky] p {
  margin: 0;
}
#pgStatic .zarukyList[view=soucastky] .tblHdr {
  font-weight: 500;
}
#pgStatic .zarukyList[view=soucastky] .tblRow, #pgStatic .zarukyList[view=soucastky] .tblHdr {
  display: contents;
}
#pgStatic .zarukyList[view=soucastky] .tblRow div, #pgStatic .zarukyList[view=soucastky] .tblHdr div {
  border: 0px solid #ccc;
  border-width: 1px 1px 0 0;
  padding: 10px;
}
#pgStatic .zarukyList[view=soucastky] .tblRow .frstCol img, #pgStatic .zarukyList[view=soucastky] .tblHdr .frstCol img {
  display: block;
  margin: 20px auto;
  width: 80px;
}

section[view~=nopadding] {
  padding: 0px;
}
section[view~=closable] h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}
section[view~=closable] [state=content] {
  width: 100%;
}
section[view~=closable][state=off] [state=content] {
  display: none;
}
section[view~=flex_row] {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
section[view~=flex_row] div[view~=half] {
  flex: 1 1 48%;
}
section[view~=flex_row] div[view~=full] {
  flex: 1 1 100%;
}

.pgAdminEdit .pageInfo {
  font-size: 2rem;
  padding: 50px;
  text-align: center;
}
.pgAdminEdit #formLogin {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

#pgCarList #car-law {
  grid-column: 1/-1;
  padding: 10px 1rem;
  text-align: justify;
}
#pgCarList #content {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  gap: 20px;
}
#pgCarList section[carlist] {
  width: calc(100% - 350px);
}
#pgCarList section[carlist=TAB] {
  --carlist-columns:1;
}
#pgCarList section[carlist=TAB] .carPrice {
  height: 4.8rem;
  font-size: 3rem;
}
#pgCarList section[carlist=TAB] .carName {
  font-size: 1.5rem;
}
#pgCarList section[carlist=GAL] {
  --carlist-columns:4;
}
#pgCarList #formMain {
  width: 330px;
  left: 20px;
  position: sticky;
  top: 80px;
}
#pgCarList #formMain form {
  padding: 10px;
}
#pgCarList #infoText {
  grid-column: 1/-1;
  margin-top: -1rem;
}
#pgCarList #mobFormBtn {
  height: 20px;
}
#pgCarList #mobForm {
  width: 100%;
  height: 50px;
  padding: 0 40px;
  margin-bottom: 20px;
  text-align: center;
  overflow: hidden;
}
#pgCarList #mobForm button {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font: inherit;
  width: 100%;
  padding: 5px 30px;
  background: var(--color-grey3);
  color: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  cursor: pointer;
}
#pgCarList #mobForm button:hover {
  background: var(--color-grey4);
}
#pgCarList #mobForm img {
  height: 15px;
}

#pgCarDetail > section {
  margin: 20px 50px;
}
#pgCarDetail #carTitle {
  display: flex;
  flex-flow: row-reverse nowrap;
  align-items: center;
  margin: 0 15px 0 0;
}
#pgCarDetail #carTitle .pageAction {
  margin-left: auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 10px;
}
#pgCarDetail #carTitle .pageAction button {
  padding: 5px;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-300);
  border-radius: 5px;
  cursor: pointer;
}
#pgCarDetail #carTitle .pageAction button i {
  display: block;
  font-size: 0.7rem;
  font-style: normal;
}
#pgCarDetail #carTitle .pageAction button img {
  height: 30px;
}
#pgCarDetail #carTitle .pageAction button:hover {
  background: var(--color-grey-300);
  box-shadow: 0 0 5px 0 var(--color-grey-300);
}
#pgCarDetail #photoPrice {
  display: grid;
  grid-template-areas: "ph pn pz" "ph fs fp";
  grid-template-columns: 1fr 25% 25%;
  grid-template-rows: auto 1fr;
  align-items: flex-start;
  gap: 0.5rem;
}
#pgCarDetail #photos {
  grid-area: ph;
}
#pgCarDetail #priceHot {
  grid-area: pn;
  align-self: stretch;
}
#pgCarDetail #priceFin {
  grid-area: pz;
  align-self: stretch;
}
#pgCarDetail #formPopt {
  grid-area: fp;
}
#pgCarDetail #formLease {
  grid-area: fs;
}
#pgCarDetail #params {
  --label-width:20%;
  --columns-count:2;
  --background-color:#fff;
  columns: 2;
  column-gap: 1rem;
}
#pgCarDetail #accessories {
  column-count: 4;
}
#pgCarDetail #information {
  background: #fff;
}
#pgCarDetail #information div {
  padding: 10px;
}
#pgCarDetail #contacts {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 1.5rem;
}
#pgCarDetail #car-law {
  padding: 10px;
}
#pgCarDetail #cebiaReport img {
  height: 40px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
#pgCarDetail #cebiaReport img:hover {
  transform: scale(1.05);
}

#photoPrice .photoBig {
  user-select: none;
  position: relative;
  margin-bottom: 5px;
  overflow: hidden;
  width: 100%;
  padding-bottom: 75%;
  aspect-ratio: 4/3;
  border: 1px solid #ccc;
}
#photoPrice .photoBig:hover #photoAction [photo~=back] {
  opacity: 1;
}
#photoPrice .photoBig div.info {
  user-select: none;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  bottom: 0px;
  width: 80px;
  height: 28px;
  text-align: center;
  background: rgba(230, 220, 135, 0.5);
}
#photoPrice .photoBig[view=photo] {
  cursor: default;
}
#photoPrice .photoBig[view=photo] > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: center center;
  transition: all 1s ease;
}
#photoPrice .photoBig[view=photo] > img[move=out-left] {
  left: -100%;
}
#photoPrice .photoBig[view=photo] > img[move=out-right] {
  left: 100%;
}
#photoPrice .photoBig[view=photo] > img[move=in-left] {
  left: 100%;
  z-index: 10;
}
#photoPrice .photoBig[view=photo] > img[move=in-right] {
  left: -100%;
  z-index: 10;
}
#photoPrice .photoBig[view=photo]:hover {
  box-shadow: 0px 0px 5px 1px rgba(34, 34, 34, 0.6);
}
#photoPrice .photoBig[view=nophoto] {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default !important;
  padding-bottom: 0;
}
#photoPrice .photoBig[view=nophoto] img {
  position: relative !important;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1/1;
  opacity: 0.1;
}
#photoPrice .photoList {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 10px;
}
#photoPrice .photoList span[view=photo] {
  width: 25%;
  cursor: zoom-in;
  transform-origin: center center;
  overflow: hidden;
}
#photoPrice .photoList span[view=photo]:hover {
  box-shadow: 0px 0px 5px 1px rgba(34, 34, 34, 0.6);
}
#photoPrice .photoList span[view=photo]:hover img {
  opacity: 1;
  transform: rotate(2deg) scale(1.05, 1.05);
}
#photoPrice .photoList span[view=photo] img {
  width: 100%;
  aspect-ratio: 4/3;
  opacity: 0.7;
  transition: all 0.5s ease;
}
#photoPrice .photoList span[view=photos] {
  display: flex;
  justify-content: center;
  font-size: 0.8rem;
  width: 2rem;
  line-height: 2rem;
  background-color: var(--color-grey3);
  color: #eee;
  text-align: center;
  writing-mode: tb-rl;
  cursor: pointer;
}
#photoPrice .photoList span[view=photos]:hover {
  background-color: var(--color-grey4);
  color: var(--color-grey3);
}
#photoPrice div[price] i, #photoPrice div[price] b {
  display: block;
  font-style: normal;
  font-weight: normal;
}
#photoPrice div[price] i {
  font-weight: 500;
  font-size: 1rem;
}
#photoPrice div[price] span {
  font-weight: 500;
  font-size: 3rem;
}
#photoPrice div[price] b {
  font-size: 0.8rem;
}
#photoPrice div[price] .info {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 0.8rem;
}
#photoPrice div[price] .logo {
  position: absolute;
  top: 0px;
  right: 5px;
  width: 60px;
}
#photoPrice div[price] .logo img {
  width: 100%;
}
#photoPrice div[price][price=FIN] {
  position: relative;
  flex: 1 1 calc(50% - 0.5rem);
  background-color: var(--color-main);
  padding: 20px;
}
#photoPrice div[price][price=CASH] {
  flex: 1 1 calc(50% - 0.5rem);
  background-color: var(--color-grey3);
  color: #fff;
  padding: 20px;
}

#params div {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  padding: 10px 30px;
  background-color: var(--background-color);
}
#params div:nth-child(even) {
  --background-color:var(--color-rows);
}
#params img.cebia {
  height: 25px;
  width: auto;
  margin-right: 1rem;
}
#params label {
  width: var(--label-width);
  min-width: 110px;
  font-weight: 500;
}
#params span {
  flex: 1 1 auto;
}
#params .ev_c {
  background-color: var(--color-main);
}
#params .ev_c strong {
  font-size: 1.2em;
}
#params .ev_c small::before {
  content: " - ";
}

#accessories div {
  display: inline-block;
  background-color: #fff;
  margin-bottom: 15px;
  padding: 10px;
  vertical-align: top;
  width: 100%;
}
#accessories div:nth-of-type(1) {
  margin-top: 0;
}
#accessories label {
  display: block;
  background: var(--color-grey4);
  padding: 10px;
  font-weight: 500;
}
#accessories span {
  display: block;
  padding: 10px 15px;
  background-color: var(--background-color);
}
#accessories span:nth-child(odd) {
  --background-color:var(--color-rows);
}

#priceInfo {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: space-between;
}

#contacts h4 {
  text-align: center;
  text-decoration: underline;
  font-weight: 500;
  font-size: 2rem;
  padding: 0;
  margin: 10px 0;
  user-select: none;
}
#contacts .contact-phone {
  background: #fff;
  flex: 1 1 4000px;
  text-align: center;
}
#contacts .contact-phone div {
  height: 300px;
  padding: 10px 30px 30px 30px;
}
#contacts .contact-phone a.phone {
  display: flex;
  align-items: center;
  justify-content: center;
}
#contacts .contact-phone a.phone img {
  width: 100%;
  max-width: 300px;
}
#contacts .contact-phone a.phone:hover {
  color: var(--color-main);
}
#contacts .contact-phone .info {
  font-size: 1.5rem;
}
#contacts span.open {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
}
#contacts span.open.flex {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
#contacts span.open small {
  display: block;
  font-size: 1rem;
}
#contacts .contact-print {
  flex: 1 1 4000px;
  text-align: center;
  background: #fff;
  padding: 0 30px 30px 30px;
  display: none;
}
#contacts .contact-form {
  flex: 1 1 4000px;
  background: #fff;
  padding: 0 30px 30px 30px;
}
#contacts .contact-map {
  background: #fff;
  text-align: center;
  flex: 1 1 4000px;
}
#contacts .contact-map div {
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  height: 300px;
  padding: 0 30px 30px 30px;
}
#contacts .contact-map div iframe {
  flex: 1 1 auto;
}

#infoWindow.cebiaPopup #infoText {
  font-size: 1rem;
}
#infoWindow.cebiaPopup .header img {
  width: 300px;
}
#infoWindow.cebiaPopup .header h3 {
  margin: 0;
  padding: 0;
}
#infoWindow.cebiaPopup .header p {
  font-size: 1rem;
  margin: 10px auto;
  width: 80%;
}
#infoWindow.cebiaPopup .content {
  text-align: center;
  margin-top: 20px;
}
#infoWindow.cebiaPopup .content #cebiaReportShow {
  display: block;
  margin: 0 auto;
  padding: 10px 30px;
  background: var(--color-main);
  color: #222;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 5px;
}
#infoWindow.cebiaPopup .content #cebiaReportShow:hover {
  background: var(--color-main-hover);
  box-shadow: 0 0 5px 0px var(--color-main-hover);
  color: #333;
}

#formPopt {
  min-height: 470px;
}
#formPopt [closable=panel] {
  grid-template-rows: 1fr;
}

#formLease {
  min-height: 470px;
}
#formLease [closable=panel] {
  grid-template-rows: 1fr;
}
#formLease [section=akontace], #formLease [section=pocet] {
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
#formLease [section=splatka] {
  font-size: 1.2rem;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#formLease span {
  position: relative;
  text-align: center;
  background: var(--color-grey-200);
  height: 30px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
#formLease span::after {
  content: attr(label);
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
}
#formLease span:hover {
  background: var(--color-grey-300);
}
#formLease span[active] {
  pointer-events: none;
  background: var(--color-main);
  font-weight: 500;
}

#formVIN {
  display: none;
}

main {
  position: relative;
  border-top: 8px solid #fff;
  width: 100%;
  overflow: hidden;
}

h1 {
  font-size: 2.5rem;
  font-weight: 500;
}

h2 {
  font-size: 2rem;
  font-weight: 500;
}

h3 {
  font-size: 1.5rem;
  font-weight: 500;
}

h1.main, h2.main, h3.main {
  --background-color:var(--color-main);
  position: relative;
  width: max-content;
  max-width: calc(100% - 30px);
  margin: 10px 0 5px 0;
  padding: 10px;
  font-size: 2.1rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  color: var(--color-grey3);
}
h1.main img, h2.main img, h3.main img {
  margin-right: 30px;
}

section#content {
  color: var(--color-grey3);
}
section#content .article {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 4rem;
  overflow: hidden;
}
section#content .article-info {
  width: 35%;
  overflow: hidden;
}
section#content .article-info::after {
  content: "";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  overflow: hidden;
}
section#content .article-info.aRight {
  text-align: right;
}
section#content .article-info[view=INFO] {
  font-size: 3rem;
  font-weight: 500;
  padding: 50px;
  align-self: flex-end;
}
section#content .article-text {
  background: #fff;
  padding: 80px;
  width: 60%;
  font-size: 1.2rem;
  line-height: 2.2rem;
}
section#content .article-text h3 {
  display: flex;
  align-items: center;
  font-size: 3rem;
  line-height: 3rem;
  margin: 0 0 20px 0px;
}
section#content .article-text h3 img {
  margin-right: 30px;
}
section#content .article-text h3 span {
  flex: 1 1 auto;
}
#infoText {
  border-top: 1px solid #ccc;
  padding: 10px 1rem;
}
#infoText p {
  font-size: 0.8rem;
  text-align: justify;
}

#infoConsole {
  position: fixed;
  z-index: 99999;
  bottom: 0;
  right: 0;
  border: 1px solid red;
  min-width: 50px;
  min-height: 1.2rem;
  background: #fff;
}

@media print {
  html {
    font-size: 15px;
  }
  body {
    margin: 0;
    padding: 0;
  }
  header {
    display: none;
  }
  footer {
    display: none;
  }
  #formMain {
    display: none;
  }
  form {
    display: none;
  }
  #car-law {
    display: none;
  }
  #photoAction {
    display: none;
  }
  #pgCarDetail [animate] {
    transition: none;
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  #pgCarDetail h2 {
    font-size: 1.5rem;
    margin: 0 0 5px 0;
    padding: 0;
  }
  #pgCarDetail h3, #pgCarDetail h4 {
    font-size: 1.2rem;
    margin: 5px 0 0 0;
    padding: 0;
  }
  #pgCarDetail > section {
    margin: 0;
  }
  #pgCarDetail #carTitle h2 {
    width: 100%;
  }
  #pgCarDetail #carTitle .pageAction {
    display: none;
  }
  #pgCarDetail #photoPrice {
    grid-template-columns: repeat(3, 33.3%);
  }
  #pgCarDetail #photoPrice #colLeft {
    flex: 0 0 30%;
  }
  #pgCarDetail #photoPrice #colLeft .photoList {
    display: none;
  }
  #pgCarDetail #photoPrice #formLease, #pgCarDetail #photoPrice #formPopt {
    display: none;
  }
  #pgCarDetail #photoPrice #photos .photoList {
    display: none;
  }
  #pgCarDetail #photoPrice div[price] span {
    font-size: 1.5rem;
  }
  #pgCarDetail #contacts .contact-print {
    display: block;
  }
  #pgCarDetail #contacts .contact-form {
    display: none;
  }
  #pgCarDetail #contacts .contact-map {
    display: none;
  }
  #pgCarDetail #contacts .contact-phone div {
    height: auto;
    padding: 0;
  }
  #pgCarDetail #params {
    columns: 3;
  }
  #pgCarDetail #params div {
    padding: 0 0px;
  }
  #pgCarDetail #params img {
    display: none;
  }
  #pgCarDetail #params label {
    width: unset;
    min-width: 90px;
  }
  #pgCarDetail #accessories {
    column-count: 3;
  }
  #pgCarDetail #accessories div {
    margin: 0 0 5px 0;
    padding: 0px;
  }
  #pgCarDetail #accessories label, #pgCarDetail #accessories span {
    padding: 0;
  }
}