@media only screen and (max-width: 1700px) {
  header .contact {
    width: 270px;
    flex-flow: column;
    justify-content: space-around;
    align-items: flex-end;
  }
  header .phone img {
    width: 100%;
  }
  header .social {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 25px;
  }
  header .social a img {
    height: 100%;
  }
  header[sticky] .contact {
    width: 180px;
  }
}
@media only screen and (max-width: 1500px) {
  header .logo {
    padding: 0 10px;
  }
  header .logo img {
    width: 100%;
  }
  nav ul a {
    padding: 5px 10px;
  }
}
@media only screen and (max-width: 1200px) {
  header .social {
    grid-template-rows: 18px;
  }
  nav ul {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 1100px) {
  header {
    height: 70px;
  }
  header .social {
    grid-template-rows: 15px;
  }
  nav ul {
    font-size: 0.9rem;
  }
}
@media only screen and (max-width: 1000px) {
  h1 {
    font-size: 2.2rem;
  }
  h2 {
    font-size: 1.7rem;
  }
  h3 {
    font-size: 1.3rem;
  }
  #pgStatic h1 {
    --icon-size:40px;
  }
  #pgStatic h2 {
    --icon-size:30px;
  }
  #pgStatic h3 {
    --icon-size:25px;
  }
  #pgStatic h4 {
    --icon-size:15px;
  }
  header {
    height: 50px;
  }
  header[sticky] {
    height: 50px;
  }
  header[sticky] .contact {
    width: 150px;
  }
  header .logo {
    width: 210px;
    padding-left: 60px;
  }
  header .contact {
    width: 150px;
  }
  header .social a img {
    height: 15px;
  }
  header #mobMenu {
    display: block;
  }
  header #mainMenu .noMobile {
    pointer-events: none;
  }
  footer {
    font-size: 1rem;
    padding: 20px 20px 70px 20px;
  }
  nav ul {
    position: absolute;
    top: 48px;
    left: 0px;
    width: auto;
    height: auto;
    flex-flow: column;
    font-size: 1.2rem;
    transform-origin: top left;
    transform: scaleY(0);
    transition: transform 0.5s ease;
  }
  nav ul li {
    background: var(--color-menu-background);
  }
  nav ul li::before {
    display: none;
  }
  nav ul li:hover {
    background: var(--color-menu-hover);
  }
  nav ul li .submenu {
    left: 100px;
  }
  nav ul li.last {
    margin-right: 0px;
  }
  nav ul li.special {
    background: var(--color-menu-special);
    margin-right: 0px;
  }
}
@media only screen and (max-width: 1700px) {
  #pgHP section[carlist] {
    --carlist-columns:5;
  }
  #pgHP section[carlist] a[caritem]:nth-child(6) {
    display: none;
  }
}
@media only screen and (max-width: 1600px) {
  #pgHP #slider .infoList {
    height: 150px;
  }
  #pgHP #slider .info .big {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 1400px) {
  #pgHP section[carlist] {
    --carlist-columns:3;
  }
  #pgHP section[carlist] a[caritem]:nth-child(6) {
    display: block;
  }
}
@media only screen and (max-width: 1300px) {
  #pgHP #formMain {
    --form-hp-offset:10px;
  }
  #pgHP #slider .infoList {
    height: auto;
    overflow: unset;
  }
  #pgHP #slider .info .big {
    font-size: 2rem;
  }
  #pgHP section[carlist] {
    padding: 20px;
  }
}
@media only screen and (max-width: 1200px) {
  #carTypes .carTypesList div[list=sign] {
    --columns:4;
  }
  #carTypes .carTypesList div[list=sign] a[item] img {
    width: 30px;
  }
  #carTypes .carTypesList div[list=price] {
    --columns:3;
  }
  #carTypes .carTypesList div[list=price] a[item] img {
    width: 30px;
  }
}
@media only screen and (max-width: 1100px) {
  #pgHP #carTypes .carTypesTabs {
    margin-top: 5px;
  }
}
@media only screen and (max-width: 1000px) {
  #pgHP #formMain {
    position: static;
    width: 100%;
  }
  #pgHP section[carlist] {
    --carlist-columns:2;
  }
  #pgHP #slider .infoImages [pages] {
    bottom: 0px;
  }
  section#content {
    position: relative;
  }
  section#content .article {
    margin-top: 3rem;
    align-items: stretch;
    overflow: unset;
  }
  section#content .article .article-text {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
    padding: 50px 30px;
    width: 90%;
  }
  section#content .article .article-info {
    width: 5%;
    overflow: unset;
  }
  section#content .article .article-info img {
    position: absolute;
    top: 50px;
    left: -200px;
    height: 400px;
  }
  section#content .article .article-info .floatLeft {
    float: none;
  }
  section#content .article.motto {
    flex-flow: row wrap;
  }
  section#content .article.motto .article-info {
    margin-top: 20px;
    margin-left: auto;
    background: #fff;
    width: 90%;
  }
}
@media only screen and (max-width: 900px) {
  h2.main {
    font-size: 1.5rem;
  }
  h2.main img {
    height: 40px;
    margin-right: 20px;
  }
  #carTypes .carTypesList div[list=type] {
    --columns:4;
  }
  #carTypes .carTypesList div[list=type] a[item] img {
    width: 100%;
  }
  #carTypes .carTypesList div[list=sign] {
    --columns:3;
  }
  #carTypes .carTypesList div[list=sign] a[item] {
    padding: 0 15px;
  }
  #carTypes .carTypesList div[list=sign] a[item] img {
    width: 20px;
  }
  #carTypes .carTypesList div[list=price] {
    --columns:2;
  }
  #carTypes .carTypesList div[list=price] a[item] {
    padding: 0 15px;
  }
  #carTypes .carTypesList div[list=price] a[item] img {
    width: 20px;
  }
}
@media only screen and (max-width: 800px) {
  section#content .article h3 {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 650px) {
  #pgHP section[carlist] {
    --carlist-columns:1;
  }
  #pgHP section[carlist] a[caritem]:nth-child(5), #pgHP section[carlist] a[caritem]:nth-child(6) {
    display: none;
  }
  section#content .article .article-text {
    width: 100%;
  }
  section#content .article .article-info {
    width: 0;
  }
  section#content .article.motto .article-info {
    width: 100%;
  }
}
@media only screen and (max-width: 500px) {
  #pgHP #formMain {
    position: static;
    grid-template-rows: 0fr 1fr;
    width: 100%;
  }
  #pgHP section[carlist] {
    padding: 10px 0px;
  }
  #pgHP #slider .info {
    --info-offset-x:20px;
    --info-offset-y:10px;
    --skew-SL:6;
    bottom: -30px;
  }
  #carTypes .carTypesList div[list=type] {
    --columns:2;
    font-size: 0.8rem;
  }
  #carTypes .carTypesList div[list=type] a[item] {
    padding: 0;
  }
  #carTypes .carTypesList div[list=type] a[item] img {
    max-width: 100px;
  }
  #carTypes .carTypesList div[list=type] a[item]:hover img {
    transform: scale(1.05) translateY(-10px);
  }
  #carTypes .carTypesList div[list=sign] {
    --columns:2;
  }
  #carTypes .carTypesList div[list=price] {
    --columns:1;
    justify-content: center;
  }
  #carTypes .carTypesList div[list=price] a[item] {
    flex: 0 1 250px;
  }
}
@media only screen and (max-width: 800px) {
  form [columns][columns="2"] > * {
    width: 100%;
    margin: 5px 0px;
  }
}
@media only screen and (max-width: 500px) {
  form [columns][columns="2"] fieldset {
    border-radius: 0;
  }
  form [columns][columns="2"] > * {
    width: 100%;
    margin: 5px 0px;
  }
  form[view~=section] {
    padding: 10px 0px;
  }
}
@media only screen and (max-width: 1500px) {
  #pgCarList section[carlist=GAL] {
    --carlist-columns:3;
  }
  #pgCarList #infoText {
    padding: 0 1rem;
  }
}
@media only screen and (max-width: 1300px) {
  #pgCarList #content {
    flex-flow: column;
  }
  #pgCarList #formMain {
    position: relative;
    top: unset;
    left: unset;
    padding: 0px 20px 0 20px;
    width: 100%;
  }
  #pgCarList #formMain .inputs .newLine {
    display: block;
    width: 100%;
  }
  #pgCarList #formMain .inputs form-input {
    width: calc(50% - 5px);
  }
  #pgCarList #formMain .inputs form-input[view=half] {
    width: calc(25% - 7.5px);
  }
  #pgCarList #formMain .inputs .formParamsOther form-input {
    width: calc(25% - 7.5px);
  }
  #pgCarList section[carlist] {
    width: 100%;
  }
  #pgCarList section[carlist=GAL] {
    --carlist-columns:4;
    padding: 20px 0;
  }
}
@media only screen and (max-width: 1100px) {
  #pgCarList #formMain {
    grid-template-rows: 0 0.1fr;
  }
  #pgCarList #formMain .title {
    pointer-events: all;
  }
  #pgCarList #formMain .title img {
    display: inline;
  }
  #pgCarList section[carlist=GAL] {
    --carlist-columns:3;
  }
}
@media only screen and (max-width: 900px) {
  #pgCarList section[carlist=GAL] {
    --carlist-columns:2;
    padding: 20px 0;
  }
}
@media only screen and (max-width: 600px) {
  html {
    font-size: 17px;
  }
  #pgCarList h2 {
    font-size: 1.5rem;
  }
  #pgCarList #formMain [closable] {
    grid-template-rows: 0fr;
  }
  #pgCarList #formMain [section=title] {
    pointer-events: all;
    cursor: pointer;
  }
  #pgCarList #formMain [section=title]::before {
    content: "";
  }
  #pgCarList #formMain form {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  #pgCarList #formMain .inputs form-input {
    width: 100%;
  }
  #pgCarList #formMain .inputs form-input[view=half] {
    width: calc(50% - 5px);
  }
  #pgCarList #formMain .inputs .formParamsOther form-input {
    width: calc(50% - 5px);
  }
  #pgCarList section[listpages] a {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.5rem 0;
  }
  #pgCarList section[carlist] .carListInfo {
    padding: 5px;
    font-size: 0.8rem;
  }
  #pgCarList section[carlist=GAL] {
    --carlist-columns:1;
  }
  #pgCarList section[carlist=TAB] {
    padding: 0;
  }
  #pgCarList section[carlist=TAB] a[caritem] .carImage {
    width: 30%;
  }
  #pgCarList section[carlist=TAB] a[caritem] .carPrice {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 500px) {
  html {
    font-size: 17px;
  }
  #pgCarList section[carlist] .carListInfo {
    align-items: flex-start;
  }
  #pgCarList section[carlist] .carListInfo > div, #pgCarList section[carlist] .carListInfo > label {
    justify-content: center;
  }
  #pgCarList section[carlist] .carListInfo span {
    width: 100%;
    text-align: center;
  }
  #pgCarList section[carlist=TAB] a[caritem] {
    height: 210px;
    align-items: flex-start;
  }
  #pgCarList section[carlist=TAB] a[caritem] .carImage {
    align-self: flex-start;
    padding: 5px;
    width: 120px;
  }
  #pgCarList section[carlist=TAB] a[caritem] .carText {
    width: calc(100% - 120px);
  }
  #pgCarList section[carlist=TAB] a[caritem] .carValues label {
    width: 90px;
  }
  #pgCarList section[carlist=TAB] a[caritem] .carValues span {
    width: calc(100% - 90px);
    padding: 0;
  }
  #pgCarList section[carlist=TAB] a[caritem] .carPrice {
    top: unset;
    bottom: 0px;
    left: 5px;
    right: auto;
    text-align: left;
  }
}
@media only screen and (max-width: 1500px) {
  #pgCarDetail div[price] span {
    font-size: 2.1rem;
  }
}
@media only screen and (max-width: 1300px) {
  #pgCarDetail #carTitle {
    flex-flow: row wrap;
  }
  #pgCarDetail #carTitle .pageAction {
    justify-content: center;
    width: 100%;
  }
  #pgCarDetail #carTitle .pageAction button {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  #pgCarDetail #carTitle .pageAction button img {
    height: 20px;
  }
}
@media only screen and (max-width: 1200px) {
  #pgCarDetail > section {
    margin: 15px;
  }
}
@media only screen and (max-width: 1100px) {
  #pgCarDetail #colLeft {
    flex: 1 1 auto;
  }
  #pgCarDetail #colRight {
    flex: 0 0 270px;
  }
  #pgCarDetail #photoPrice {
    grid-template-areas: "ph pn" "ph pz" "ph fs" "ph fp" "ph em";
    grid-template-columns: 1fr 270px;
    grid-template-rows: auto;
  }
  #pgCarDetail #formPopt, #pgCarDetail #formLease {
    min-height: unset;
  }
  #pgCarDetail #formPopt[closableWrapper=on], #pgCarDetail #formLease[closableWrapper=on] {
    min-height: 470px;
  }
  #pgCarDetail #formPopt [closable], #pgCarDetail #formLease [closable] {
    grid-template-rows: 0fr;
  }
  #pgCarDetail #formPopt [section=title], #pgCarDetail #formLease [section=title] {
    pointer-events: all;
    cursor: pointer;
  }
  #pgCarDetail #formPopt [section=title]::before, #pgCarDetail #formLease [section=title]::before {
    content: "";
  }
  #pgCarDetail #formPopt form, #pgCarDetail #formLease form {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  #pgCarDetail #accessories {
    column-count: 3;
  }
  #pgCarDetail #contacts {
    flex-flow: row wrap;
    align-items: stretch;
  }
  #pgCarDetail #contacts .contact-phone {
    flex: 0 0 calc(50% - 1rem);
  }
  #pgCarDetail #contacts .contact-form {
    flex: 0 0 calc(50% - 1rem);
  }
  #pgCarDetail #contacts .contact-map {
    width: 100%;
  }
}
@media only screen and (max-width: 1000px) {
  #pgCarDetail #accessories {
    column-count: 2;
  }
  #pgCarDetail h3.main {
    font-size: 2rem;
  }
  #photoWrapper [photo~=button] {
    padding: 5px;
  }
  #photoWrapper [photo~=button] img {
    width: 20px;
    height: 20px;
  }
}
@media only screen and (max-width: 850px) {
  #pgCarDetail #photoPrice {
    grid-template-areas: "ph ph" "pn pz" "fs fp";
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 700px) {
  #pgCarDetail h2.main {
    width: auto;
    max-width: calc(100% - 46px);
  }
  #pgCarDetail #contacts {
    flex-flow: row wrap;
    align-items: flex-start;
  }
  #pgCarDetail #contacts .contact-phone {
    flex: 0 0 100%;
  }
  #pgCarDetail #contacts .contact-phone div {
    height: auto;
    padding: 10px;
  }
  #pgCarDetail #contacts .contact-form {
    flex: 0 0 100%;
  }
  #pgCarDetail #contacts .contact-map {
    width: 100%;
  }
  #pgCarDetail #params {
    columns: 1;
  }
  #pgCarDetail #accessories {
    columns: 1;
  }
  #photoWrapper #photoWindow {
    width: 100%;
    border-radius: 0;
    border: 0;
  }
}
@media only screen and (max-width: 600px) {
  #pgCarDetail > section {
    margin: 5px 0;
  }
  #pgCarDetail #photoPrice .logo {
    right: unset;
    left: 5px;
  }
  #pgCarDetail #photoPrice div[price] {
    padding: 5px;
    text-align: right;
  }
}
@media only screen and (max-width: 500px) {
  #pgCarDetail #photoPrice {
    grid-template-areas: "ph" "pn" "pz" "fs" "fp";
    grid-template-columns: 1fr;
  }
  #pgCarDetail #photoPrice div[price] {
    padding: 5px;
    text-align: center;
  }
  #pgCarDetail #params .ev_c small {
    display: block;
  }
  #pgCarDetail #params .ev_c small::before {
    content: none;
  }
}
@media only screen and (max-width: 900px) {
  #pgStatic div[view] div[view~=columns] span {
    width: calc(50% - 10px);
  }
  #pgStatic .zarukyList[view=podminky] {
    --columns-count:2;
  }
  #pgStatic .zarukyList[view=soucastky] {
    grid-template-columns: 1fr 1fr;
  }
  #pgStatic .zarukyList[view=soucastky] .tblHdr .frstCol {
    display: none;
  }
  #pgStatic .zarukyList[view=soucastky] .tblRow .frstCol {
    grid-column: 1/-1;
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }
  #pgStatic .zarukyList[view=soucastky] .tblRow .frstCol img {
    width: 50px;
    margin: 0;
  }
}
@media only screen and (max-width: 600px) {
  #pgStatic div[view] div[view~=columns] span {
    width: 100%;
  }
  section[view~=flex_row] div[view~=half] {
    flex: 1 1 100%;
  }
}
@media only screen and (max-width: 500px) {
  #pgStatic section {
    padding: 8px;
  }
  #pgStatic .zarukyList[view=podminky] {
    --columns-count:1;
  }
  #pgStatic .zarukyList[view=soucastky] {
    font-size: 0.8rem;
  }
}