body#contact-page section#contact {
  max-width: var(--mw);
  padding: var(--g-mt) var(--px);
  background: var(--cont-bg);
  min-height: 100vh;
  min-height: 100dvh;
}
body#contact-page section#contact form {
  flex-direction: var(--form-fd);
  justify-content: var(--form-jc);
  align-items: var(--form-ai);
  margin-top: var(--g-mt);
}
body#contact-page section#contact form > div {
  width: var(--block-w);
}
body#contact-page section#contact form > div.first-block {
  margin-right: var(--fb-me);
}
body#contact-page section#contact form > div.second-block {
  margin-top: var(--sb-mt);
  margin-left: var(--sb-ms);
}
body#contact-page section#contact form > div .label-input-holder:not(:first-child) {
  margin-top: var(--lab-inp-hold-mt);
}
body#contact-page section#contact form > div .label-input-holder label {
  width: var(--lab-w);
  font-size: var(--p);
}
body#contact-page section#contact form > div .label-input-holder label.checkbox-label {
  width: var(--cb-label-w);
}
body#contact-page section#contact form > div .label-input-holder input[type=text], body#contact-page section#contact form > div .label-input-holder input[type=email], body#contact-page section#contact form > div .label-input-holder input[type=tel] {
  width: var(--t-inp-w);
  font-size: var(--p);
  padding: var(--t-inp-py) var(--t-inp-px);
  background-color: var(--sec-col);
  border-radius: min(1vmin, 15px);
  border: min(2vmin, 2px) solid var(--tert-col-l-10);
}
body#contact-page section#contact form > div .label-input-holder label .charcounter.too-much,
body#contact-page section#contact form > div .label-input-holder label .charcounter.too-much .counter {
  color: var(--red-col-d-5);
}
body#contact-page section#contact form > div .label-input-holder textarea {
  margin-top: var(--ta-mt);
  height: var(--ta-h);
  font-size: var(--p);
  padding: var(--t-inp-py) var(--t-inp-px);
  background-color: var(--sec-col);
  border-radius: min(1vmin, 15px);
  border: min(2vmin, 2px) solid var(--tert-col-l-10);
  resize: none;
}
body#contact-page section#contact form > div .label-input-holder .cb-holder {
  width: var(--cb-hold-w);
}
body#contact-page section#contact form > div .error-con {
  margin-top: var(--g-mt);
  min-height: var(--err-con-mh);
  border-top-right-radius: min(2vmin, 7px);
  border-bottom-right-radius: min(2vmin, 7px);
}
body#contact-page section#contact form > div .error-con .error-badge {
  background-color: hsla(0, 57%, 26%, 0.6);
  border-top-right-radius: min(2vmin, 7px);
  border-bottom-right-radius: min(2vmin, 7px);
  transition: all .4s ease;
  transform: translate(-150%, 0);
}
body#contact-page section#contact form > div .error-con .error-badge.active {
  transform: translate(0, 0);
}
body#contact-page section#contact form > div .error-con .error-badge .bar {
  min-height: 100%;
  background-color: var(--red-col);
}
body#contact-page section#contact form > div .error-con .error-badge .bar.first-bar {
  width: min(1vmin, 15px);
}
body#contact-page section#contact form > div .error-con .error-badge .bar.second-bar {
  width: min(0.5vmin, 10px);
  margin-left: 5px;
}
body#contact-page section#contact form > div .error-con .error-badge p {
  font-size: var(--err-p);
  color: var(--red-col-l-20);
}
body#contact-page section#contact form > div .button-holder {
  margin-top: var(--g-mt);
  gap: 30px;
}
body#contact-page section#contact form > div .button-holder button a {
  text-decoration: none;
}

@media screen and (min-width: 0px) {
  body {
    --g-mt: calc(1 * var(--marg));
    --cont-bg: url("/img/background_pictures/mobile-header-bg-800.png") no-repeat center / cover;
    --form-fd: column;
    --form-jc: start;
    --form-ai: start;
    --block-w: 100%;
    --fb-me: 0;
    --sb-ms: 0;
    --sb-mt: var(--lab-inp-hold-mt);
    --lab-inp-hold-mt: calc(1 * var(--marg));
    --lab-w: 30%;
    --t-inp-w: 70%;
    --t-inp-py: min(1vmin, 10px);
    --t-inp-px: min(2vmin, 15px);
    --ta-h: min(40vmin, 250px);
    --ta-mt: calc(.5 * var(--lab-inp-hold-mt));
    --cb-hold-w: 15%;
    --cb-label-w: 85%;
    --err-con-mh: min(5vmin, 30px);
    --err-p: calc(.8 * var(--p));
  }
}
@media screen and (min-width: 576px) {
  body {
    --g-mt: calc(2 * var(--marg));
  }
}
@media screen and (min-width: 576px) and (min-aspect-ratio: 1) {
  body {
    --g-mt: calc(4 * var(--marg));
  }
}
@media screen and (min-width: 576px) and (min-aspect-ratio: 1.5) {
  body {
    --cb-hold-w: 10%;
    --cb-label-w: 90%;
  }
}
@media screen and (min-width: 768px) {
  body {
    --g-mt: calc(3 * var(--marg));
    --cont-bg: url("/img/background_pictures/mobile-header-bg-1300.png") no-repeat center / cover;
  }
}
@media screen and (min-width: 768px) and (min-aspect-ratio: 1) {
  body {
    --lab-inp-hold-mt: calc(2 * var(--marg));
  }
}
@media screen and (min-width: 768px) and (min-aspect-ratio: 2) {
  body {
    --g-mt: calc(2 * var(--marg));
  }
}
@media screen and (min-width: 992px) and (min-aspect-ratio: 1) {
  body {
    --g-mt: calc(2 * var(--marg));
  }
}
@media screen and (min-width: 1200px) {
  body {
    --cont-bg: url("/img/background_pictures/tgroups-bg-1800-ar.png") no-repeat center / 100%;
  }
}
@media screen and (min-width: 1600px) {
  body {
    --g-mt: calc(8 * var(--marg));
    --form-fd: row;
    --form-jc: space-around;
    --form-ai: start;
    --fb-me: min(5vmin, 100px);
    --sb-ms: min(5vmin, 100px);
    --sb-mt: 0;
    --lab-w: 20%;
    --t-inp-w: 80%;
  }
}
@media screen and (min-width: 1800px) {
  body {
    --cont-bg: url("/img/background_pictures/tgroups-bg-2300-ar.png") no-repeat center / 100%;
  }
}