/* =================
    Table of contents
    1. General
        1.1. Shared
        1.2. First form
        1.3. Second form
        1.4.  Confirmation
        1.5.  About & footer
    2. Layout
        2.1. Large desktop
            2.1.1. Shared
            2.1.2. First form
            2.1.3. Second form
            2.1.4. Confirmation
            2.1.5. About & footer
        2.2. Small desktop
            2.2.1. Shared
            2.2.2. First form
            2.2.3. Second form
            2.2.4. Confirmation
            2.2.5. About & footer
        2.3. Mobile
            2.3.1. Shared
            2.3.2. First form
            2.3.3. Second form
            2.3.4. Confirmation
            2.3.5. About & footer
        2.4. Tablet
            2.4.1. Shared
            2.4.2. First form
            2.4.3. Second form
            2.4.4. Confirmation
            2.4.5. About & footer
        2.5. Mobile landscape
            2.5.1. Shared
            2.5.2. First form
            2.5.3. Second form
            2.5.4. Confirmation
            2.5.5. About & footer
    ================ */

/* 1. General */

/* 1.1. Shared */

html,
body {
  margin: 0;
  padding: 0;

  --maincolor: #faf9f9;
  --secondcolor: #2e3334;
  --thirdcolor: #ff4343;
  --fourthcolor: #ffffff;
  --fifthcolor: #cacaca;
  --sixthcolor: #a1a0a0;
  --seventhcolor: #e9ecef;
  --eightcolor: #f4f4f4;

  background: var(--maincolor);
  font-family: "Kanit", sans-serif;
  overflow-x: hidden;
  width: 100vw;
}

/* .gm-bundled-control {
  display: none;
}

.gm-fullscreen-control {
  display: none;
} */

.gm-style-cc {
  display: none !important;
}

.gm-style-iw-d {
  overflow: visible !important;
}

.gm-style-iw-d > div {
  color: var(--fourthcolor) !important;
  text-align: center;
}

.gm-style-iw {
  background: var(--thirdcolor) !important;
  background-color: var(--thirdcolor) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 8px !important;
  padding-bottom: 6px !important;
  padding-top: 5px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}


.gm-style-iw-t::after {
  background: var(--thirdcolor) !important;
  background-color: var(--thirdcolor) !important;
  box-shadow: none !important;
  height: 8px !important;
  width: 8px !important;
}

.hdpi.pac-logo:after {
  background-image: none !important;
}

.google-logo {
  height: 2vh;
  position: absolute;
  top: 5vh;
  right: 5vh;
  width: auto;
  z-index: 1;
  float: right;
  display: none;
}

.pac-container:after {
  display: none !important;
}

.pac-container {
  box-shadow: none !important;
  border: 1px solid var(--fifthcolor) !important;
  border-radius: 0 !important;
}

.pac-item-selected {
  background: var(--maincolor) !important;
}

button.gm-ui-hover-effect {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}

h3 {
  color: var(--maincolor);
}

h2,
h4,
h5 {
  color: var(--secondcolor);
}

h3,
h2,
h1 {
  font-weight: 600;
}

h1 {
  color: var(--thirdcolor);
}

h4 {
  font-weight: 500;
}

h5 {
  font-weight: 400;
}

*,
:after,
:before {
  box-sizing: inherit;
}

button {
  box-sizing: border-box;
}

button:hover {
  opacity: 0.9;
}

.home {
  display: grid;
  position: relative;
  top: 0%;
  left: 0%;
  width: 100vw;
}

input {
  background: var(--fourthcolor);
  border-radius: 0px;
  border: 1px solid var(--fifthcolor);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

textarea:focus,
input:focus,
div:focus,
.checkmark:focus {
  outline: none;
  border: 1px solid var(--sixthcolor) !important;
}

.form-2__confirmation-container__button:focus,
.form-2__progress-container__back:focus,
.send:focus,
.next:focus,
label:focus,
a:focus {
  outline: none;
}

label:focus-visible,
.form-2__confirmation-container__button:focus-visible,
.form-2__progress-container__back:focus-visible,
.send:focus-visible,
.next:focus-visible,
a:focus-visible {
  outline: none;
  border: 1px solid var(--sixthcolor) !important;
}

.error {
  background: #fff6f6 !important;
}

button.next {
  background: var(--thirdcolor);
  margin: auto 0;
  border: none;
  border-radius: 0px;
  cursor: pointer;
}

button:focus {
  outline: none;
}

.warning {
  position: absolute;
  display: none;
  color: var(--thirdcolor);
}

.warning.active {
  display: block;
}

a {
  color: var(--secondcolor);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: var(--thirdcolor);
}

/* 1.2. First form */

.main-container {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100vw;
}

.home__title {
  z-index: 2;
  align-items: start;
  justify-items: start;
  display: grid;
}

.donkey-img {
  z-index: 4;
}

.form {
  z-index: 2;
  display: grid;
}

.form__area {
  display: grid;
}

.form__area__load-loc {
  z-index: 2000;
  padding-top: 0;
  padding-bottom: 0;
}

.form__area__unload-loc {
  padding-top: 0;
  padding-bottom: 0;
}

#map {
  opacity: 1;
}

.form-background,
.form-background-2 {
  z-index: 1;
}

.form__area__load-date {
  color: var(--secondcolor);
  padding: 0;
  text-align: center;
  width: 100%;
}

.form__area__unload-date {
  color: var(--secondcolor);
  padding: 0;
  text-align: center;
  width: 100%;
}

.form__area__date-warning {
  width: 5vw;
}

.datepicker {
  border: 1px solid var(--fifthcolor) !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.active.day,
.active.month,
.active.year,
.active.decade,
.active.century {
  background: var(--thirdcolor) !important;
  border-radius: 0 !important;
  background-image: none !important;
}

.day {
  color: var(--secondcolor);
  background: var(--maincolor);
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: var(--maincolor);
  color: var(--fifthcolor);
}

.datepicker-switch {
  font-weight: 400;
  color: var(--secondcolor);
  border-radius: 0;
}

.form__area__load-time,
.form__area__unload-time {
  display: grid;
  align-items: start;
  justify-items: center;
}

.dash {
  align-self: center;
}

.form__area__dropdown-select {
  padding: 0;
}

.form__area__dropdown-select__default h5 {
  align-self: center;
}

.circle-load {
  background: var(--thirdcolor);
  display: grid;
  border-radius: 50%;
  margin: auto;
  border: 2px solid var(--thirdcolor);
}

.line-dashed {
  margin: auto;
  border-left: 3px dotted var(--thirdcolor);
  color: var(--thirdcolor);
}

.circle-unload {
  display: grid;
  margin: auto;
  background: transparent;
  border-radius: 50%;
  border: 2px solid var(--thirdcolor);
}

.circle-unload:after {
  content: "";
  background: var(--thirdcolor);
  display: block;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  position: relative;
  margin: 0;
  transform: translate(-50%, -50%);
}

/* 1.3. Second form */

.form-2 {
  display: grid;
  z-index: 1;
}

.form-2__load-type {
  display: grid;
}

.form-2__load-type__list,
.form-2__load-type__list__item {
  display: grid;
}

.form-2__load-type__list__item__desc {
  background: var(--fourthcolor);
  border-radius: 0px;
  border: 1px solid var(--fifthcolor);
  display: grid;
  align-items: center;
  justify-items: start;
}

.form-2__load-type__list__item__desc input {
  cursor: pointer;
}

.form-2__load-type__list__item__desc__checkbox {
  display: grid;
  place-items: center;
  width: 100%;
}

.form-2__load-type__list__item__desc__checkbox input {
  margin: 0;
  opacity: 0;
  z-index: 2;
}

.checkmark {
  background-color: var(--fourthcolor);
  border-radius: 0px;
  border: 0.5px solid var(--fifthcolor);
  grid-area: 1 / 1 / span 1 / span 1;
}

.form-2__load-type__list__item__desc__checkbox:hover input ~ .checkmark {
  background-color: var(--maincolor);
}

.checkmark:after {
  content: "";
  display: none;
  margin: auto;
}

.form-2__load-type__list__item__times {
  display: grid;
  place-items: center;
}

.form-2__load-type__list__item-q {
  background: var(--fourthcolor);
  border-radius: 0px;
  border: 1px solid var(--fifthcolor);
  display: grid;
  align-items: center;
  justify-items: start;
  width: 50%;
  font-weight: 400;
  color: var(--secondcolor);
  text-align: center;
}

.load-type-info {
  opacity: 0.5;
}

.form-2__load-type-other-desc {
  font-weight: 400;
  color: var(--secondcolor);
  text-align: left;
  display: grid;
}

.form-2__load-weight {
  display: grid;
}

.form-2__load-weight__select.collapse {
  display: block !important;
}

.form__area__dropdown-select__default {
  width: 100%;
  border: 1px solid var(--fifthcolor);
  border-radius: 0px;
  background: var(--fourthcolor);
  display: grid;
  align-items: center;
  cursor: pointer;
}

.form-2__load-weight__select__default {
  width: 100%;
  border: 1px solid var(--fifthcolor);
  border-radius: 0px;
  background: var(--fourthcolor);
  display: grid;
  align-items: center;
  cursor: pointer;
}

.form__area__dropdown-select {
  display: grid;
}

.form-2__load-weight__select {
  display: grid;
  width: 80%;
  z-index: 1;
}

.weight-select li,
.dropdown-select li {
  display: grid;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--maincolor);
}

.weight-select li:hover,
.dropdown-select li:hover {
  background: var(--maincolor);
}

.weight-select,
.dropdown-select {
  border: 1px solid var(--fifthcolor);
  border-radius: 0px;
  background: var(--fourthcolor);
  display: grid;
  overflow-y: auto;
  width: 100%;
}

.weight-warning {
  z-index: -1;
}

.arrow {
  display: inline-block;
  border: solid var(--sixthcolor);
  margin: auto;
  background: transparent;
  cursor: pointer;
  transition: 0.5s;
  transform-origin: 65%;
}

.collapse .arrow {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.expand .arrow {
  transform: translateY(-0.1vw) rotate(45deg);
  -webkit-transform: translateY(-0.1vw) rotate(45deg);
}

.expand ul {
  height: 0vh;
  border: none;
}

.form-2__load-car__select,
.form-2__load-height__select {
  justify-items: start;
  align-items: center;
  display: grid;
  grid-template: 1fr 1fr/ 1fr 4fr;
}

.form-2__load-car {
  display: grid;
}

.form-2__load-height {
  display: grid;
}

.form-2__load-car input,
.form-2__load-height input {
  opacity: 0;
  z-index: 5;
  margin: 0;
}

.form-2__load-car__select__input-item-1,
.form-2__load-car__select__input-item-2,
.form-2__load-height__select__input-item-1,
.form-2__load-height__select__input-item-2 {
  background: var(--fourthcolor);
  border-radius: 50%;
  content: "";
  display: block;
  border: 1px solid var(--fifthcolor);
  display: grid;
  place-items: center;
}

.form-2__load-car__select__input-item-1,
.form-2__load-height__select__input-item-1 {
  grid-area: 1 / 1 / span 1 / span 1;
}

.form-2__load-car__select__input-item-2,
.form-2__load-height__select__input-item-2 {
  grid-area: 2 / 1 / span 1 / span 1;
}

.form-2__load-weight__info__symbol.hide,
.form-2__load-weight__info.hide {
  visibility: hidden;
}

.form-2__progress-container__route {
  color: var(--fourthcolor);
  justify-self: end;
  display: grid;
  place-items: center;
}

h5:focus {
  border-radius: 0;
  border: 1px solid var(--sixthcolor);
  outline: 0;
  overflow: hidden;
  white-space: nowrap;
}

.height-pop {
  display: grid;
  place-items: center;
  position: absolute;
  visibility: hidden;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.height-pop h5 {
  color: var(--thirdcolor);
}

.circle-radio {
  background: var(--thirdcolor);
  border-radius: 50%;
  content: "";
  display: block;
  grid-area: 1 / 1 / span 1 / span 1;
  visibility: hidden;
}

#without-lift:checked ~ .circle-radio-1:after,
#with-lift:checked ~ .circle-radio-2:after,
#short:checked ~ .circle-radio-3:after,
#high:checked ~ .circle-radio-4:after {
  background: var(--thirdcolor);
  border-radius: 50%;
  content: "";
  display: block;
  grid-area: 1 / 1 / span 1 / span 1;
  visibility: visible;
  transform: scale(0);
  -webkit-animation: scaleRadio 0.05s linear forwards;
  animation: scaleRadio 0.05s linear forwards;
}

@-webkit-keyframes scaleRadio {
  to {
    transform: scale(1);
  }
}

@keyframes scaleRadio {
  to {
    transform: scale(1);
  }
}

.circle-radio-1,
.circle-radio-2,
.circle-radio-3,
.circle-radio-4,
#with-lift,
#without-lift,
#short,
#high {
  grid-area: 1 / 1 / span 1 / span 1;
  cursor: pointer;
}

#with-lift,
#without-lift,
#short,
#high {
  position: relative;
}

label {
  cursor: pointer;
  margin: 0;
}

.form-2__comments {
  display: grid;
}

.form-2__comments textarea {
  background: var(--fourthcolor);
  border-radius: 0px;
  border: 1px solid var(--fifthcolor);
  font-weight: 500;
  color: var(--secondcolor);
  resize: none;
}

.form-2__contact-info {
  display: grid;
  align-items: center;
}

.send {
  background: var(--thirdcolor);
  justify-self: end;
  margin: auto 0;
  border: none;
  border-radius: 0 0px 0px 0;
  cursor: pointer;
}

.form-2__contact-info__title {
  display: grid;
  align-items: center;
  grid-area: 1 / 1 / span 1 / span 1;
}

.form-2__confirmation-container__icon {
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.form-2__confirmation-container {
  height: 100vh;
  width: 100vw;
  position: absolute;
  z-index: -1;
  background: var(--maincolor);
  visibility: hidden;
}

.form-2__confirmation-container__info {
  left: 50%;
  top: 50vh;
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--sixthcolor);
}

.form-2__confirmation-container__info b {
  color: var(--secondcolor) !important;
}

.form-2__confirmation-container__icon svg path,
.form-2__confirmation-container__icon svg polyline {
  stroke: #55ce73 !important;
}

.form-2__confirmation-container__button {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--secondcolor);
  border: none;
}

.form-2__confirmation-container__button h5 {
  color: var(--fourthcolor);
}

.circ {
  opacity: 0;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  transition: all 1s 0.5s;
}
.tick {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  transition: stroke-dashoffset 1s 1s ease-out;
}

.drawn + svg .path {
  opacity: 1;
  stroke-dashoffset: 0;
}

/* 1.1.4. About & footer */

.about__process {
  place-items: center;
  background: var(--secondcolor);
  display: grid;
  top: 0vh;
  position: absolute;
  z-index: 1;
}

.about__process-background {
  width: 100vw;
  grid-area: 2 / 1 / span 1 / span 3;
  background: var(--maincolor);
  height: 80%;
  align-self: end;
  position: relative;
  top: 25%;
  left: -6vw;
}

.about__check-list li {
  display: grid;
  align-items: center;
}

.about__check-list li b {
  justify-self: start;
  transform:scale(1.8);
  font-weight: 300;
}

.about__process-title,
.about__check-title {
  grid-area: 1 / 1 / span 1 / span 3;
  display: grid;
  align-items: center;
  justify-self: start;
}

.about__process-title-line,
.about__check-title-line {
  grid-area: 1 / 1 / span 1 / span 1;
  background: var(--thirdcolor);
}

.about__company-description__company-desc-title {
  grid-area: 1 / 1 / span 1 / span 3;
  display: grid;
  align-items: center;
  justify-self: start;
  width: 100%;
  display: grid;
}

.about__process-title h2,
.contact__title h2,
.about__check-title h2 {
  grid-area: 2 / 2 / span 1 / span 1;
  color: var(--sixthcolor);
  font-weight: 400;
  line-height: normal;
}


.about__check-list-item-title {
  grid-template: 1fr / 1fr !important;
  font-weight: 500;
}

.about__company-description__company-desc-title h3,
.contact__title h3,
.about__check-title h3 {
  color: var(--secondcolor);
}

.about__process-list {
  display: grid;
  place-items: center;
  z-index: 1;
}

.about__process-list__item {
  height: 86%;
  display: grid;
  background: var(--maincolor);
}

.about__process-list__item__img {
  display: grid;
  place-items: center;
}

.about__process-list__item__img svg {
  grid-area: 1 / 1 / span 1 / span 1;
  width: 50%;
}

.about__process-list__item__process-no {
  background: var(--thirdcolor);
  display: grid;
  text-align: center;
  color: var(--fourthcolor);
  align-self: start;
  grid-area: 1 / 1 / span 1 / span 1;
  position: relative;
}

.about__process-list__item__process-desc {
  grid-area: 2 / 1 / span 1 / span 1;
}
.about__process-list__item__process-desc h4 {
  text-align: center;
  line-height: normal;
}

.about__process-list__item__img__circle {
  grid-area: 1 / 1 / span 1 / span 1;
  border-radius: 50%;
}

.about__company-description {
  position: absolute;
  display: grid;
}

.about__company-description__company-desc-short {
  display: grid;
  align-items: start;
}

.about__company-description__company-desc-short-text-emphasized h3 {
  color: var(--thirdcolor);
}

.about__company-description__company-desc-short-text h3 {
  font-weight: 400;
  line-height: normal;
  color: var(--secondcolor);
}

.about__company-description__company-desc-long {
  display: grid;
  place-items: center;
}

.about__company-description__company-desc-long__item h4 {
  font-weight: 400;
  line-height: normal;
}

.contact {
  position: absolute;
  background: var(--seventhcolor);
}

.contact__title {
  display: grid;
  align-items: center;
  justify-self: start;
  display: grid;
}

.contact__details {
  position: absolute;
  display: grid;
}

.contact__details__mail {
  cursor: pointer;
}

footer h3 {
  font-weight: 400;
}

.come-in {
  transform: translateY(80%);
  -webkit-animation: come-in 0.8s ease forwards;
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

@-webkit-keyframes come-in {
  to {
    transform: translateY(0);
  }
}

@keyframes come-in {
  to {
    transform: translateY(0);
  }
}

footer {
  position: absolute;
  display: grid;
  place-items: center;
  background: var(--secondcolor);
  width: 100vw;
}

/* 2. Layout */

/* 2.1. Large desktop */

@media only screen and (min-width: 1200px) {
  /* 2.1.1. Shared */

  h3,
  h4 {
    font-size: 1vw;
  }

  h2 {
    font-size: 1.5vw;
  }

  h1 {
    font-size: 2.5vw;
  }

  h5 {
    font-size: 0.9vw;
  }

  .home {
    grid-template: repeat(24, 1fr) / repeat(23, 1fr) 0.5fr;
    height: 100vh;
    background: var(--secondcolor);
  }

  /* 2.1.2. First form */

  .main-container {
    height: 100%;
  }

  .home__title {
    grid-area: 4 / 2 / span 3 / span 12;
    grid-template: 1fr 2fr / 1fr;
    row-gap: 0.5vw;
  }

  .home__title h1 {
    color: var(--thirdcolor);
  }

  .home__title h2 {
    color: var(--secondcolor);
  }

  .donkey-img {
    position: absolute;
    width: 25vw;
    height: auto;
    right: 5vw;
    bottom: 5vh;
  }

  .form {
    grid-area: 8 / 2 / span 12 / span 9;
    grid-template: repeat(11, 1fr) / repeat(5, 1fr);
  }

  input {
    height: 5vh;
    font-size: 0.8vw;
  }

  .form__area {
    grid-area: 1 / 1 / span 8 / span 5;
    grid-template: 2fr 1.5fr 2fr 2fr 2fr 1.5fr 2fr / repeat(3, 1fr) 6vw 1fr 1fr 0.5fr;
    -moz-column-gap: 1vw;
    column-gap: 1vw;
  }

  .form__area__title {
    grid-area: 1 / 1 / span 1 / span 6;
  }

  .form__area__unload-title {
    grid-area: 5 / 1 / span 1 / span 6;
  }

  .form__area__title.place {
    grid-area: 2 / 1 / span 1 / span 3;
  }

  .form__area__unload-title.place {
    grid-area: 6 / 1 / span 1 / span 3;
  }

  .form__area__title.date {
    grid-area: 2 / 4 / span 1 / span 1;
  }

  .form__area__unload-title.date {
    grid-area: 6 / 4 / span 1 / span 1;
  }

  .form__area__title.time {
    grid-area: 2 / 5 / span 1 / span 2;
  }

  .form__area__unload-title.time {
    grid-area: 6 / 5 / span 1 / span 2;
  }

  .form__area__load-loc {
    grid-area: 3 / 1 / span 1 / span 3;
    padding-left: 1vw;
  }

  .form__area__load-loc,
  .form__area__unload-loc,
  .pac-matched,
  .pac-item-query,
  .pac-item > span {
    font-size: 0.8vw !important;
    color: var(--secondcolor) !important;
    font-family: "Kanit" !important;
    font-weight: 400;
  }

  .form__area__unload-loc {
    grid-area: 7 / 1 / span 1 / span 3;
    padding-left: 1vw;
  }

  .datepicker {
    border-radius: 0;
    padding: 0 0 1vw 0;
  }

  .day {
    font-size: 0.9vw;
    height: 4.3vh !important;
    width: 1.7vw;
  }

  .prev,
  .next,
  .datepicker-switch {
    height: 5vh !important;
  }

  .datepicker-switch:hover {
    border-radius: 0;
  }

  .day:hover,
  .month:hover,
  .year:hover,
  .decade:hover,
  .century:hover,
  .day.focused,
  .month.focused,
  .year.focused,
  .decade.focused,
  .century.focused {
    border-radius: 0;
    background: var(--fifthcolor);
  }

  .dow {
    color: var(--secondcolor);
    font-weight: 400;
    background: var(--maincolor);
    border-top: 1px solid var(--seventhcolor) !important;
  }

  .datepicker-days {
    border-bottom: 1px solid var(--fifthcolor);
  }

  .datepicker td,
  .datepicker th {
    border-radius: 0;
  }

  #map {
    grid-area: 1 / 12 / span 22 / span 13;
  }


  .gm-style-iw { 
    font-size: 12px !important;
  }

  .form-background {
    grid-area: 1 / 12 / span 22 / span 13;
    background: transparent;
    display: none;
  }

  .form-background-2 {
    grid-area: 1 / 1 / span 22 / span 11;
    background: var(--maincolor);
  }

  .suggestions {
    font-size: 0.7vw !important;
  }

  .datepicker .table-condensed {
    width: 100%;
  }

  .form__area__load-date {
    grid-area: 3 / 4 / span 1 / span 1;
    font-size: 0.8vw;
  }

  .form__area__unload-date {
    grid-area: 7 / 4 / span 1 / span 1;
    font-size: 0.8vw;
  }

  .form__area__load-time {
    grid-area: 3 / 5 / span 1 / span 2;
    grid-template: 1fr / 1fr 0.3fr 1fr;
  }

  .form__area__unload-time {
    grid-area: 7 / 5 / span 1 / span 2;
    grid-template: 1fr / 1fr 0.3fr 1fr;
  }

  .dash {
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .form__area__dropdown-select {
    grid-template: 5vh auto/ 1fr;
    row-gap: 0.1vw;
    width: 100%;
    height: 5vh;
  }

  .form__area__load-time-end,
  .form__area__unload-time-end {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .form__area__load-time-start,
  .form__area__unload-time-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form__area__dropdown-select__default {
    height: 5vh;
    grid-template: 1fr / 3fr 1fr;
    padding-right: 5%;
    width: 95%;
  }

  .form__area__dropdown-select__default h5 {
    padding: 0 0 0 0.8vw;
    grid-area: 1 / 1 / span 1 / span 1;
    font-size: 0.8vw;
  }

  .form__area__dropdown-select .arrow {
    padding: 2px;
  }

  .dropdown-select li {
    padding: 0 0 0 0.8vw;
    height: 5vh;
  }

  .dropdown-select li h5 {
    font-size: 0.8vw;
  }

  .dropdown-select {
    grid-template: repeat(48, 1fr);
    width: 100%;
    z-index: 1;
  }

  .collapse .dropdown-select {
    height: 30vh;
  }

  .collapse {
    display: grid !important;
  }

  .circle-unload {
    grid-area: 7 / 7 / span 1 / span 1;
    height: 1.2vh;
    width: 1.2vh;
    transform: translate(0.6vw, 0);
  }

  .circle-unload:after {
    width: 0.8vh;
    height: 0.8vh;
  }

  .line-dashed {
    grid-area: 3 / 7 / span 5 / span 1;
    width: 3px;
    height: 10vh;
    transform: translateX(calc(1.5px + 0.6vw));
  }

  .circle-load {
    grid-area: 3 / 7 / span 1 / span 1;
    height: 1.2vh;
    width: 1.2vh;
    transform: translate(0.6vw, 0);
  }

  button.next {
    grid-area: 11 / 1 / span 1 / span 5;
    height: 3.5vw !important;
  }

  .form__area__unload-time-start,
  .form__area__load-time-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form__area__unload-time-end,
  .form__area__load-time-end {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  /* 2.1.3. Second form */

  .form-2 {
    grid-area: 7 / 2 / span 13 / span 22;
    grid-template: repeat(12, 1fr) / repeat(6, 1fr) 1fr repeat(5, 1fr);
    height: 600px;
  }

  .form-2__load-type {
    grid-area: 1 / 1 / span 9 / span 6;
    grid-template: 3vw 5fr / 1fr;
  }

  .type-warning {
    transform: translateY(0.5vw);
  }

  .form-2__load-type__title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-type__list {
    grid-template: repeat(5, 5vh) / 1fr;
    row-gap: 1.2vw;
  }

  .form-2__load-type__list__item {
    grid-template: 1fr / repeat(5, 1fr) 0.5fr 0.8fr 0.5fr;
    -moz-column-gap: 0.5vw;
    column-gap: 0.5vw;
  }

  .form-2__load-type__list__item__desc {
    grid-area: 1 / 1 / span 1 / span 5;
    grid-template: 1fr / 3vw 10fr;
    height: 5vh;
  }

  .form-2__load-type__list__item__times {
    grid-area: 1 / 6 / span 1 / span 1;
  }

  .form-2__load-type__list__item__desc__checkbox {
    height: 5vh;
  }

  .form-2__load-type__list__item__desc__checkbox
    input:checked
    ~ .checkmark:after {
    display: block;
    -webkit-animation: scaleCheckbox 0.05s linear forwards;
    animation: scaleCheckbox 0.05s linear forwards;
  }

  @-webkit-keyframes scaleCheckbox {
    to {
      transform: rotate(45deg) translate(35%, 20%) scale(1);
    }
  }

  @keyframes scaleCheckbox {
    to {
      transform: rotate(45deg) translate(35%, 20%) scale(1);
    }
  }

  .form-2__load-type__list__item__desc__checkbox input {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-type__list__item__desc h5 {
    grid-area: 1 / 2 / span 1 / span 2;
  }

  .checkmark {
    height: 1.1vw;
    width: 1.1vw;
  }

  .form-2__load-type__list__item__desc__checkbox .checkmark:after {
    width: 0.15vw;
    height: 0.5vw;
    border: solid var(--thirdcolor);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(0.4vw, -0.2vw) scale(0);
  }

  .form-2__load-type__list__item-q {
    grid-area: 1 / 7 / span 1 / span 2;
    grid-template: 1fr / 1fr 10fr;
    height: 5vh;
    font-size: 0.8vw;
  }

  .form-2__load-type-other-desc {
    font-size: 0.8vw;
    grid-area: 1 / 3 / span 1 / span 5;
    height: 5vh;
    padding: 0 0 0 1vw;
    width: 95%;
  }

  .other .form-2__load-type__list__item__desc {
    grid-area: 1 / 1 / span 1 / span 2;
  }

  .form-2__load-weight {
    grid-template: 3vw 1fr / 1fr;
    grid-area: 1 / 7 / span 2 / span 2;
    padding: 0 0 0 0.5vw;
  }

  .weight-warning {
    transform: translateY(0.2vw);
  }

  .form-2__load-weight {
    grid-template: 3vw 1fr / 1fr;
    grid-area: 1 / 7 / span 2 / span 2;
    padding: 0 0 0 0.5vw;
  }

  .form-2__load-weight__title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-weight__info {
    font-size: 0.6vw;
    grid-area: 3 / 1 / span 1 / span 1;
    padding-left: 1.5vw;
    align-self: center;
  }

  .form-2__load-weight__info__symbol {
    grid-area: 3 / 1 / span 1 / span 1;
    border-radius: 50%;
    background: var(--thirdcolor);
    width: 1vw;
    height: 1vw;
    align-self: center;
    color: var(--fourthcolor);
    text-align: center;
    line-height: 1vw;
    font-size: 0.8vw;
  }

  .form-2__load-weight__title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-weight__select__default {
    height: 5vh;
    grid-template: 1fr / 3fr 1fr;
  }

  .form-2__load-weight__select__default h5 {
    padding: 0 0 0 1vw;
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-weight__select {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: 5vh auto/ 1fr;
    row-gap: 0.5vw;
  }

  .weight-select li {
    padding: 0 0 0 1vw;
    height: 5vh;
  }

  .weight-select {
    grid-template: repeat(10, 1fr);
  }

  .arrow {
    height: 0.1vw;
    width: 0.1vw;
    border-width: 0 1.5px 1.5px 0;
    padding: 3px;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .collapse .weight-select {
    height: 30vh;
  }

  .form-2__load-car__select,
  .form-2__load-height__select {
    grid-area: 2 / 1 / span 1 / span 1;
    height: 5vh;
    row-gap: 1vw;
  }

  .form-2__load-height {
    padding: 0 0 0 2vw;
    grid-template: 3vw 1fr / 1fr;
    grid-area: 1 /9 / span 2 / span 3;
  }

  .form-2__load-car {
    padding: 0 0 0 2vw;
    grid-template: 3vw 1fr / 1fr;
    grid-area: 1 /11 / span 2 / span 3;
  }

  .form-2__load-car__title,
  .form-2__load-height-title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-car input,
  .form-2__load-height input {
    height: 1vw;
    width: 1vw;
  }

  .form-2__load-car__select__input-item-1,
  .form-2__load-car__select__input-item-2,
  .form-2__load-height__select__input-item-1,
  .form-2__load-height__select__input-item-2 {
    grid-template: 1vw / 1vw;
    width: 1vw;
    height: 1vw;
    margin: 0.2vw 0;
  }

  .circle-radio {
    width: 0.7vw;
    height: 0.7vw;
  }

  #without-lift:checked ~ .circle-radio-1:after,
  #with-lift:checked ~ .circle-radio-2:after,
  #short:checked ~ .circle-radio-3:after,
  #high:checked ~ .circle-radio-4:after {
    width: 0.7vw;
    height: 0.7vw;
  }

  .with-lift-label {
    height: 2vw;
    align-self: center;
    text-align: center;
    line-height: 2vw;
  }

  .with-lift-label h5 {
    line-height: 2vw;
  }

  .input-group-addon span {
    padding: 0 0.5vw 0 0;
  }

  .input-group-addon svg {
    width: 0.8vw;
    height: 0.8vw;
    transform: translateY(-0vw);
  }

  .form-2__comments {
    grid-template: 3vw 1fr / 1fr;
    grid-area: 5 / 7 / span 5 / span 6;
    padding: 0 0 0 0.5vw;
  }

  .form-2__comments textarea {
    height: calc(11vh + 1.2vw);
    font-size: 0.9vw;
    padding: 1vw 0 0 1vw;
  }

  .form-2__contact-info {
    grid-template: 1fr / 0.5fr 1fr 1fr 1fr 1fr;
    grid-area: 12 / 1 / span 1 / span 12;
    -moz-column-gap: 1vw;
    column-gap: 1vw;
    height: 7vh;
  }

  .send h4,
  .form-2__contact-info__title h4 {
    color: var(--maincolor);
  }

  .send {
    grid-area: 1/ 5 / span 1 / span 1;
    height: 100%;
    width: 98%;
  }

  .form-2__contact-info__title {
    padding: 0 0 0 1vw;
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__contact-info input {
    padding: 0 0 0 1vw;
  }

  .form-2__contact-info__background {
    grid-area: 1 / 1 / span 1 / span 4;
    background: var(--secondcolor);
    height: 100%;
    width: 72vw;
  }

  .email {
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .email2 {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .phone {
    grid-area: 1 / 4 / span 1 / span 1;
    margin-right: 1vh;
  }

  .warning {
    font-size: 0.7vw;
  }

  .phone-warning,
  .email-warning {
    transform: translateY(0.8vw);
  }

  .pop {
    display: grid !important;
  }

  .form-2__progress-container__back-arrow {
    border: solid var(--thirdcolor);
    display: inline-block;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    cursor: pointer;
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: center;
    justify-self: start;
  }

  .form-2__progress-container__back {
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: center;
    color: var(--secondcolor);
    justify-self: start;
    text-align: end;
    cursor: pointer;
    width: auto;
  }

  .form-2__progress-container {
    align-self: start;
    justify-self: center;
    display: grid;
    place-items: center;
    background: var(--eightcolor);
  }

  .progress-line-1,
  .progress-line-2 {
    width: 100%;
    border-bottom: 2px solid var(--thirdcolor);
  }

  .circle-start,
  .circle-end {
    background: var(--thirdcolor);
    border-radius: 50%;
    border: 2px solid var(--thirdcolor);
  }

  .circle-end {
    background: transparent;
  }

  .circle-end:after {
    content: "";
    background: var(--thirdcolor);
    display: block;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    position: relative;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .form-2__progress-container__route__start {
    color: var(--secondcolor);
    justify-self: end;
    display: grid;
    text-align: end;
  }

  .form-2__progress-container__route__end {
    color: var(--secondcolor);
    justify-self: start;
    display: grid;
  }

  .dow {
    font-size: 0.9vw;
  }

  .datepicker-dropdown,
  .datepicker-days {
    height: 37vh;
    width: 30vh;
    padding: 0;
  }

  .datepicker tbody tr {
    height: 3.77vh;
  }

  .form-2__progress-container__back-arrow {
    border-width: 0 3px 3px 0;
    padding: 3px;
    height: 0.5vh;
    width: 0.5vh;
  }

  .form-2__progress-container__back {
    padding: 0 0 0 3vw;
  }

  .form-2__progress-container {
    grid-area: 1 / 1 / span 2 / span 24;
    width: 92vw;
    grid-template: 1fr / 1fr 4fr 5vw;
    height: 12vh;
    padding: 0 4vw;
  }

  .donkey-img-2 {
    grid-area: 1 / 3 / span 1 / span 1;
    height: 7vh;
    z-index: 1;
  }

  .donkey-img-2-circle {
    width: 5vh;
    height: 5vh;
    background: var(--thirdcolor);
    border-radius: 50%;
    grid-area: 1 / 3 / span 1 / span 1;
    transform: translateX(-10px);
  }

  .progress-line-1 {
    height: 0.1px;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .progress-line-2 {
    height: 0.1px;
    grid-area: 1 / 4 / span 1 / span 1;
  }

  .circle-start,
  .circle-end {
    height: 1.2vh;
    width: 1.2vh;
  }

  .circle-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .circle-end {
    grid-area: 1 / 4 / span 1 / span 1;
  }

  .circle-end:after {
    width: 0.8vh;
    height: 0.8vh;
  }

  .page-container {
    height: auto;
  }

  .form-2-container {
    grid-template: 0.3fr repeat(23, 1fr) / repeat(24, 1fr);
    background: var(--maincolor);
    position: relative;
  }

  .form-2__progress-container__route__start {
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .form-2__progress-container__route__start-loc,
  .form-2__progress-container__route__end-loc {
    font-size: 1vw;
  }

  .form-2__progress-container__route__start__date,
  .form-2__progress-container__route__end__date {
    font-size: 0.9vw;
  }

  .form-2__progress-container__route__end {
    grid-area: 1 / 5 / span 1 / span 1;
  }

  .form-2__progress-container__route {
    color: var(--fourthcolor);
    justify-self: end;
    display: grid;
    place-items: center;
    grid-template: 1fr / 4vw auto 2vw 4vw auto;
    width: auto;
    grid-area: 1 / 2 / span 1 / span 1;
    padding-right: 2vw;
  }

  .progress-container__load-title {
    grid-area: 1 / 1 / span 1 / span 1l;
  }

  .progress-container__unload-title {
    grid-area: 1 / 5 / span 1 / span 1l;
  }

  .bottom-shape {
    align-self: end;
    width: 100vw;
    background: var(--eightcolor);
  }

  .high-label.editable {
    background: var(--fourthcolor);
    display: grid;
    align-items: center;
    border-radius: 0px;
    border: 1px solid var(--fifthcolor);
    cursor: text;
  }

  .height-pop h5 {
    color: var(--thirdcolor);
  }

  h5:focus {
    border-radius: 0;
    border: 1px solid var(--sixthcolor);
    outline: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .height-pop {
    display: grid;
    place-items: center;
    position: absolute;
    visibility: hidden;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .bottom-shape {
    grid-area: 23 / 1 / span 2 / span 24;
    height: 12vh;
  }

  .high-label.editable {
    height: 2vw;
    width: 8vw;
  }

  .editable h5 {
    padding: 0 0 0 5px;
  }

  .high-label h5 {
    height: 2vw;
    line-height: 2vw;
  }

  .height-pop {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    top: 23vh;
    left: 78vw;
    visibility: hidden;
  }

  /* 2.1.4. Confirmation */

  .form-2__confirmation-container__info {
    font-size: 1.2vw;
  }

  .form-2__confirmation-container__info b {
    font-size: 2vw;
    line-height: 5vw;
    color: var(--secondcolor);
  }

  .form-2__confirmation-container__button {
    top: 68vh;
    width: 20vw;
    height: 3.5vw;
  }

  .form-2__confirmation-container__icon {
    width: 8vw;
    top: 30vh;
  }

  /* 2.1.5. About & footer */

  .about {
    position: absolute;
    left: 0;
    width: 100vw;
    top: 100vh;
    height: 290vh;
  }

  .about__check {
    top: calc(80vh + 60vw);
    padding: 25vw 6vw 10vh 6vw;
    height: 80vh;
    position: absolute;
    grid-template: auto auto / 1fr 1fr;
    display: grid;
    row-gap: 10vh;
    width: 88vw;
  }

  .about__check-list {
    grid-area: 2 / 2 / span 1 / span 1;
    width: 35vw;
    background: var(--seventhcolor);
    padding: 3vw;
    height: 50vh;
    display: grid;
    border-top: 10px solid var(--thirdcolor);
    justify-self: end;
  }

  .about__check-list li {
    grid-template: 1fr / 2vw auto;    
  }

  .about__check-list-item-title {
    font-size: 1.5vw !important;
    }

  .about__check-description {
    grid-area: 2 / 1 / span 1 / span 1;
    width: 34vw;
    padding-left: 7vw;
    padding-top: 10vh;
  }

  .about__check-title {
    grid-template: 5vw auto / 5vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .about__process {
    height: 70vh;
    width: 88vw;
    padding: 20vh 6vw 10vh 6vw;
    grid-template: 1fr 5fr / 1fr 1fr 1fr;
    row-gap: 15vh;
    z-index: 1;
  }

  .about__process-title {
    grid-template: 5vw auto / 5vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .about__process-title-line,
  .about__check-title-line {
    height: 5px;
    width: 5vw;
  }

  .about__process-title h2,
  .contact__title h2,
  .about__check-title h2 {
    font-size: 1.3vw;
  }

  .about__company-description__company-desc-title {
    grid-template: 1fr / 5vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .about__company-description__company-desc-title__line,
  .contact__title__line {
    grid-area: 1 / 1 / span 1 / span 1;
    height: 5px;
    width: 5vw;
    background: var(--thirdcolor);
  }

  .about__process-title h3,
  .about__company-description__company-desc-title h3,
  .contact__title h3,
  .about__check-title h3 {
    font-size: 2vw;
    line-height: 5vw;
  }

  .about__process-list {
    grid-area: 2 / 1 / span 1 / span 3;
    grid-template: 1fr / repeat(3, 1fr);
    width: 70%;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .about__process-list__item {
    width: 17vw;
    grid-template: 2fr 1fr / 1fr;
    box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
    border-bottom: 10px solid var(--thirdcolor);
  }

  .about__process-list__item__img {
    grid-area: 1 / 1 / span 1 / span 1;
    padding: 3vw;
  }

  .about__process-list__item__process-no {
    width: 3vw;
    height: 4vw;
    line-height: 4vw;
    font-size: 1.5vw;
    margin-left: 1vw;
    top: -5%;
  }

  .about__process-list__item__process-desc {
    padding: 0 1vw 4vw 1vw;
  }

  .about__process-list__item__process-desc h4 {
    font-size: 1vw;
  }

  .about__process-list__item__img__circle {
    width: 9vw;
    height: 9vw;
    border: 3px solid var(--thirdcolor);
  }

  .about__company-description {
    top: 80vh;
    grid-template: 0.5fr 1fr 1fr / 1fr;
    padding: 40vh 6vw 10vh 6vw;
    height: 60vw;
  }

  .about__company-description__company-desc-short {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: 1fr / 1fr 3fr;
    padding: 0vw 5vw 0vw 0vw;
    row-gap: 7vh;
  }

  .about__company-description__company-desc-short__img {
    grid-area: 2 / 1 / span 1 / span 1;
    position: absolute;
    top: 18vw;
    left: 5vw;
  }

  .about__company-description__company-desc-short__img img {
    width: 30vw;
    border-top: 10px solid var(--thirdcolor);
  }

  .about__company-description__company-desc-short-text {
    display: grid;
    padding: 5vw 5vw 0vw 0vw;
    grid-template: auto auto / 1fr;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .about__company-description__company-desc-short-text-emphasized {
    grid-area: 2 / 2 / span 1 / span 1;
    width: 60%;
    justify-self: end;
    padding-bottom: 10vh;
  }

  .about__company-description__company-desc-short-text-emphasized h3 {
    font-size: 1.6vw;
  }

  .about__company-description__company-desc-short-text h3 {
    font-size: 1.2vw;
  }

  .about__company-description__company-desc-long {
    grid-template: auto auto/ 1fr;
    grid-area: 3 / 1 / span 1 / span 1;
    -moz-column-gap: 3vw;
    column-gap: 3vw;
    width: 50%;
    justify-self: end;
    padding: 0vw 5vw 10vw 0vw;
    align-items: start;
    row-gap: 5vh;
  }

  .about__company-description__company-desc-long__item h4, .about__check-description, .about__check-list li, .contact__details__mail a, .contact__details__phone {
    font-size: 1.2vw;
  }

  .contact {
    top: calc(340vh + 60vw);
    width: 100vw;
    height: 25vh;
    padding: 10vh 6vw;
  }

  .contact__title {
    grid-area: 1 / 1 / span 1 / span 3;
    grid-template: 5vw auto / 5vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    width: 100%;
  }

  .contact__details {
    left: 60vw;
    height: 20vh;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
  }

  .contact__details > * {
    display: grid;
    grid-template: 1fr / 4vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    align-items: center;
  }

  footer {
    top: calc(385vh + 60vw);
    height: 8vh;
  }

  #mail, #phone {
    max-width: 100px;
  }

}

/* 2.2. Small desktop */

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  /* 2.2.1. Shared */

  h3,
  h4 {
    font-size: 1vw;
  }

  h2 {
    font-size: 1.5vw;
  }

  h1 {
    font-size: 2.5vw;
  }

  h5 {
    font-size: 0.9vw;
  }

  .home {
    grid-template: repeat(24, 1fr) / repeat(23, 1fr) 0.5fr;
    height: 100vh;
    background: var(--secondcolor);
  }

  /* 2.2.2. First form */

  .main-container {
    height: 100%;
  }

  .home__title {
    grid-area: 4 / 2 / span 3 / span 12;
    grid-template: 1fr 2fr / 1fr;
    row-gap: 0.5vw;
  }

  .home__title h1 {
    color: var(--thirdcolor);
  }

  .home__title h2 {
    color: var(--secondcolor);
  }

  .donkey-img {
    position: absolute;
    width: 25vw;
    height: auto;
    right: 5vw;
    bottom: 5vh;
  }

  .form {
    grid-area: 8 / 2 / span 12 / span 12;
    grid-template: repeat(11, 1fr) / repeat(5, 1fr);
  }

  input {
    height: 5vh;
    font-size: 0.9vw;
  }

  .form__area {
    grid-area: 1 / 1 / span 8 / span 5;
    grid-template: 2fr 1.5fr 2fr 2fr 2fr 1.5fr 2fr / repeat(3, 1fr) 6vw 1fr 0.5fr 0.5fr;
    -moz-column-gap: 1vw;
    column-gap: 1vw;
  }

  .form__area__title {
    grid-area: 1 / 1 / span 1 / span 6;
  }

  .form__area__unload-title {
    grid-area: 5 / 1 / span 1 / span 6;
  }

  .form__area__title.place {
    grid-area: 2 / 1 / span 1 / span 3;
  }

  .form__area__unload-title.place {
    grid-area: 6 / 1 / span 1 / span 3;
  }

  .form__area__title.date {
    grid-area: 2 / 4 / span 1 / span 1;
  }

  .form__area__unload-title.date {
    grid-area: 6 / 4 / span 1 / span 1;
  }

  .form__area__title.time {
    grid-area: 2 / 5 / span 1 / span 2;
  }

  .form__area__unload-title.time {
    grid-area: 6 / 5 / span 1 / span 2;
  }

  .form__area__load-loc {
    grid-area: 3 / 1 / span 1 / span 3;
    padding-left: 1vw;
  }

  .form__area__unload-loc {
    grid-area: 7 / 1 / span 1 / span 3;
    padding-left: 1vw;
  }

  .form__area__load-loc,
  .form__area__unload-loc,
  .pac-matched,
  .pac-item-query,
  .pac-item > span {
    font-size: 0.9vw !important;
    color: var(--secondcolor) !important;
    font-family: "Kanit" !important;
    font-weight: 400;
  }

  #map {
    grid-area: 1 / 15 / span 22 / span 10;
  }

  .gm-style-iw { 
    font-size: 12px !important;
  }

  .form-background {
    grid-area: 1 / 15 / span 22 / span 10;
    background: transparent;
    display: none;
  }

  .form-background-2 {
    grid-area: 1 / 1 / span 22 / span 14;
    background: var(--maincolor);
  }

  .dow {
    font-size: 0.9vw;
  }

  .form__area__load-date {
    grid-area: 3 / 4 / span 1 / span 1;
    font-size: 0.9vw;
  }

  .form__area__unload-date {
    grid-area: 7 / 4 / span 1 / span 1;
    font-size: 0.9vw;
  }

  .datepicker {
    border-radius: 0;
    padding: 0 0 1vw 0;
  }

  .day {
    font-size: 1.2vw;
    height: 4.3vh !important;
    width: 1.7vw;
  }

  .prev,
  .next,
  .datepicker-switch {
    height: 5vh !important;
  }

  .datepicker-switch:hover {
    border-radius: 0;
  }

  .day:hover,
  .month:hover,
  .year:hover,
  .decade:hover,
  .century:hover,
  .day.focused,
  .month.focused,
  .year.focused,
  .decade.focused,
  .century.focused {
    border-radius: 0;
    background: var(--fifthcolor);
  }

  .dow {
    color: var(--secondcolor);
    font-weight: 400;
    background: var(--maincolor);
    border-top: 1px solid var(--seventhcolor) !important;
  }

  .datepicker-days {
    border-bottom: 1px solid var(--fifthcolor);
  }

  .datepicker td,
  .datepicker th {
    border-radius: 0;
  }

  .datepicker .table-condensed {
    width: 100%;
  }

  .datepicker-dropdown,
  .datepicker-days {
    height: 37vh;
    width: 30vh;
    padding: 0;
  }

  .datepicker tbody tr {
    height: 3.77vh;
  }

  .form__area__load-time {
    grid-area: 3 / 5 / span 1 / span 2;
    grid-template: 1fr / 1fr 0.3fr 1fr;
  }

  .form__area__unload-time {
    grid-area: 7 / 5 / span 1 / span 2;
    grid-template: 1fr / 1fr 0.3fr 1fr;
  }

  .form__area__load-time input,
  .form__area__unload-time input {
    font-size: 0.9vw;
  }

  .form__area__unload-time-start,
  .form__area__load-time-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form__area__unload-time-end,
  .form__area__load-time-end {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .dash {
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .form__area__dropdown-select__default {
    height: 5vh;
    grid-template: 1fr / 3fr 1fr;
    padding-right: 5%;
    width: 95%;
  }

  .form__area__dropdown-select__default h5 {
    padding: 0 0 0 1.2vw;
    grid-area: 1 / 1 / span 1 / span 1;
    font-size: 0.9vw;
  }

  .form__area__dropdown-select {
    grid-template: 5vh auto/ 1fr;
    row-gap: 0.1vw;
    width: 100%;
    height: 5vh;
  }

  .form__area__load-time-end,
  .form__area__unload-time-end {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .form__area__load-time-start,
  .form__area__unload-time-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form__area__dropdown-select .arrow {
    padding: 2px;
  }

  .dropdown-select li {
    padding: 0 0 0 1.2vw;
    height: 5vh;
  }

  .dropdown-select li h5 {
    font-size: 0.9vw;
  }

  .dropdown-select {
    grid-template: repeat(48, 1fr);
    width: 100%;
    z-index: 1;
  }

  .collapse .dropdown-select {
    height: 30vh;
  }

  .collapse {
    display: grid !important;
  }

  .circle-unload {
    grid-area: 7 / 7 / span 1 / span 1;
    height: 1.2vh;
    width: 1.2vh;
    transform: translate(0.6vw, 0);
  }

  .circle-unload:after {
    width: 0.8vh;
    height: 0.8vh;
  }

  .line-dashed {
    grid-area: 3 / 7 / span 5 / span 1;
    width: 3px;
    height: 10vh;
    transform: translateX(calc(1.5px + 0.6vw));
  }

  .circle-load {
    grid-area: 3 / 7 / span 1 / span 1;
    height: 1.2vh;
    width: 1.2vh;
    transform: translate(0.6vw, 0);
  }

  button.next {
    grid-area: 11 / 1 / span 1 / span 5;
    height: 3.5vw !important;
  }

  /* 2.2.3. Second form */

  .form-2 {
    grid-area: 7 / 2 / span 13 / span 22;
    grid-template: repeat(12, 1fr) / repeat(6, 1fr) 1fr repeat(5, 1fr);
  }

  .form-2__load-type {
    grid-area: 1 / 1 / span 9 / span 6;
    grid-template: 3vw 5fr / 1fr;
  }

  .form-2__load-type__title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-type__list {
    grid-template: repeat(5, 5vh) / 1fr;
    row-gap: 1.2vw;
  }

  .form-2__load-type__list__item {
    grid-template: 1fr / repeat(5, 1fr) 0.5fr 0.8fr 0.5fr;
    -moz-column-gap: 0.5vw;
    column-gap: 0.5vw;
  }

  .form-2__load-type__list__item__desc {
    grid-area: 1 / 1 / span 1 / span 5;
    grid-template: 1fr / 3vw 10fr;
    height: 5vh;
  }

  .form-2__load-type__list__item__desc__checkbox {
    height: 5vh;
  }

  .checkmark {
    height: 1.1vw;
    width: 1.1vw;
  }

  .form-2__load-type__list__item__desc__checkbox
    input:checked
    ~ .checkmark:after {
    display: block;
    -webkit-animation: scaleCheckbox 0.05s linear forwards;
    animation: scaleCheckbox 0.05s linear forwards;
  }

  .form-2__load-type__list__item__desc__checkbox .checkmark:after {
    width: 0.15vw;
    height: 0.5vw;
    border: solid var(--thirdcolor);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(0.4vw, -0.2vw) scale(0);
  }

  @-webkit-keyframes scaleCheckbox {
    to {
      transform: rotate(45deg) translate(25%, 15%) scale(1);
    }
  }

  @keyframes scaleCheckbox {
    to {
      transform: rotate(45deg) translate(25%, 15%) scale(1);
    }
  }

  .form-2__load-type__list__item__desc__checkbox input {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-type__list__item__desc h5 {
    grid-area: 1 / 2 / span 1 / span 2;
  }

  .form-2__load-type__list__item__times {
    grid-area: 1 / 6 / span 1 / span 1;
  }

  .form-2__load-type__list__item-q {
    grid-area: 1 / 7 / span 1 / span 2;
    grid-template: 1fr / 1fr 10fr;
    height: 5vh;
    font-size: 0.8vw;
  }

  .form-2__load-type-other-desc {
    font-size: 0.8vw;
    grid-area: 1 / 3 / span 1 / span 5;
    height: 5vh;
    padding: 0 0 0 1vw;
  }

  .other .form-2__load-type__list__item__desc {
    grid-area: 1 / 1 / span 1 / span 2;
  }

  .type-warning {
    transform: translateY(0.5vw);
  }

  .form-2__load-weight {
    grid-template: 3vw 1fr / 1fr;
    grid-area: 1 / 7 / span 2 / span 2;
    padding: 0 0 0 0.5vw;
  }

  .weight-warning {
    transform: translateY(0.2vw);
  }

  .form-2__load-weight__info {
    font-size: 0.7vw;
    grid-area: 3 / 1 / span 1 / span 1;
    padding-left: 1.5vw;
    align-self: center;
  }

  .form-2__load-weight__info__symbol {
    grid-area: 3 / 1 / span 1 / span 1;
    border-radius: 50%;
    background: var(--thirdcolor);
    width: 1vw;
    height: 1vw;
    align-self: center;
    color: var(--fourthcolor);
    text-align: center;
    line-height: 1vw;
    font-size: 0.8vw;
  }

  .form-2__load-weight__title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-weight__select__default {
    height: 5vh;
    grid-template: 1fr / 3fr 1fr;
  }

  .form-2__load-weight__select__default h5 {
    padding: 0 0 0 1vw;
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-weight__select {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: 5vh auto/ 1fr;
    row-gap: 0.5vw;
  }

  .weight-select li {
    padding: 0 0 0 1vw;
    height: 5vh;
  }

  .weight-select {
    grid-template: repeat(10, 1fr);
  }

  .arrow {
    height: 0.1vw;
    width: 0.1vw;
    border-width: 0 1.5px 1.5px 0;
    padding: 3px;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .collapse .weight-select {
    height: 30vh;
  }

  .form-2__load-car__select,
  .form-2__load-height__select {
    grid-area: 2 / 1 / span 1 / span 1;
    height: 5vh;
    row-gap: 1vw;
  }

  .form-2__load-height {
    padding: 0 0 0 2vw;
    grid-template: 3vw 1fr / 1fr;
    grid-area: 1 /9 / span 2 / span 3;
  }

  .form-2__load-car {
    padding: 0 0 0 2vw;
    grid-template: 3vw 1fr / 1fr;
    grid-area: 1 /11 / span 2 / span 3;
  }

  .form-2__load-car__title,
  .form-2__load-height-title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-car input,
  .form-2__load-height input {
    height: 1vw;
    width: 1vw;
  }

  .form-2__load-car__select__input-item-1,
  .form-2__load-car__select__input-item-2,
  .form-2__load-height__select__input-item-1,
  .form-2__load-height__select__input-item-2 {
    grid-template: 1vw / 1vw;
    width: 1vw;
    height: 1vw;
    margin: 0.2vw 0;
  }

  .circle-radio {
    width: 0.7vw;
    height: 0.7vw;
  }

  #without-lift:checked ~ .circle-radio-1:after,
  #with-lift:checked ~ .circle-radio-2:after,
  #short:checked ~ .circle-radio-3:after,
  #high:checked ~ .circle-radio-4:after {
    width: 0.7vw;
    height: 0.7vw;
  }

  .with-lift-label {
    height: 2vw;
    align-self: center;
    text-align: center;
    line-height: 2vw;
  }

  .with-lift-label h5 {
    line-height: 2vw;
  }

  .form-2__comments {
    grid-template: 3vw 1fr / 1fr;
    grid-area: 5 / 7 / span 5 / span 6;
    padding: 0 0 0 0.5vw;
  }

  .form-2__comments textarea {
    height: calc(11vh + 1.2vw);
    font-size: 0.9vw;
    padding: 1vw 0 0 1vw;
  }

  .form-2__contact-info {
    grid-template: 1fr / 0.5fr 1fr 1fr 1fr 1fr;
    grid-area: 12 / 1 / span 1 / span 12;
    -moz-column-gap: 1vw;
    column-gap: 1vw;
    height: 7vh;
  }

  .send h4,
  .form-2__contact-info__title h4 {
    color: var(--maincolor);
  }

  .send {
    grid-area: 1/ 5 / span 1 / span 1;
    height: 100%;
    width: 98%;
  }

  .form-2__contact-info__title {
    padding: 0 0 0 1vw;
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__contact-info input {
    padding: 0 0 0 1vw;
  }

  .form-2__contact-info__background {
    grid-area: 1 / 1 / span 1 / span 4;
    background: var(--secondcolor);
    height: 100%;
    width: 72vw;
  }

  .email {
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .email2 {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .phone {
    grid-area: 1 / 4 / span 1 / span 1;
  }

  .warning {
    font-size: 0.7vw;
  }

  .phone-warning,
  .email-warning {
    transform: translateY(0.8vw);
  }

  .pop {
    display: grid !important;
  }

  .form-2__progress-container__back-arrow {
    border: solid var(--thirdcolor);
    display: inline-block;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    cursor: pointer;
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: center;
    justify-self: start;
  }

  .form-2__progress-container__back {
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: center;
    color: var(--secondcolor);
    justify-self: start;
    text-align: end;
    cursor: pointer;
    padding: 0 0 0 3vw;
  }

  .form-2__progress-container {
    align-self: start;
    justify-self: center;
    display: grid;
    place-items: center;
    background: var(--eightcolor);
  }

  .progress-line-1,
  .progress-line-2 {
    width: 100%;
    border-bottom: 2px solid var(--thirdcolor);
  }

  .circle-start,
  .circle-end {
    background: var(--thirdcolor);
    border-radius: 50%;
    border: 2px solid var(--thirdcolor);
  }

  .circle-end {
    background: transparent;
  }

  .circle-end:after {
    content: "";
    background: var(--thirdcolor);
    display: block;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    position: relative;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .form-2__progress-container__route__start {
    color: var(--secondcolor);
    justify-self: end;
    display: grid;
    text-align: end;
  }

  .form-2__progress-container__route__end {
    color: var(--secondcolor);
    justify-self: start;
    display: grid;
  }

  .form-2__progress-container__back-arrow {
    border-width: 0 3px 3px 0;
    padding: 3px;
    height: 0.5vh;
    width: 0.5vh;
  }

  .form-2__progress-container {
    grid-area: 1 / 1 / span 2 / span 24;
    width: 92vw;
    grid-template: 1fr / 1fr 4fr 5vw;
    height: 12vh;
    padding: 0 4vw;
  }

  .donkey-img-2 {
    grid-area: 1 / 3 / span 1 / span 1;
    height: 7vh;
    z-index: 1;
  }

  .donkey-img-2-circle {
    width: 5vh;
    height: 5vh;
    background: var(--thirdcolor);
    border-radius: 50%;
    grid-area: 1 / 3 / span 1 / span 1;
    transform: translateX(-10px);
  }

  .progress-line-1 {
    height: 0.1px;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .progress-line-2 {
    height: 0.1px;
    grid-area: 1 / 4 / span 1 / span 1;
  }

  .circle-start,
  .circle-end {
    height: 1.2vh;
    width: 1.2vh;
  }

  .circle-start {
    grid-area: 1 /2 / span 1 / span 1;
  }

  .circle-end {
    grid-area: 1 / 6 / span 1 / span 1;
  }

  .circle-end:after {
    width: 0.8vh;
    height: 0.8vh;
  }

  .page-container {
    height: auto;
  }

  .form-2-container {
    grid-template: 0.3fr repeat(23, 1fr) / repeat(24, 1fr);
    background: var(--maincolor);
  }

  .form-2__progress-container__route__start {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .form-2__progress-container__route__start-loc,
  .form-2__progress-container__route__end-loc {
    font-size: 1vw;
  }

  .form-2__progress-container__route__start__date,
  .form-2__progress-container__route__end__date {
    font-size: 0.9vw;
  }

  .form-2__progress-container__route__end {
    grid-area: 1 / 7 / span 1 / span 1;
  }

  .form-2__progress-container__route {
    color: var(--fourthcolor);
    justify-self: end;
    display: grid;
    place-items: center;
    grid-template: 1fr / auto 4vw auto 2vw auto 4vw auto;
    width: auto;
    padding-right: 2vw;
  }

  .progress-container__load-title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .progress-container__unload-title {
    grid-area: 1 / 5 / span 1 / span 1;
  }

  .bottom-shape {
    align-self: end;
    width: 100vw;
    background: var(--eightcolor);
  }

  .high-label.editable {
    background: var(--fourthcolor);
    display: grid;
    align-items: center;
    border-radius: 0px;
    border: 1px solid var(--fifthcolor);
    cursor: text;
  }

  .height-pop h5 {
    color: var(--thirdcolor);
  }

  h5:focus {
    border-radius: 0;
    border: 1px solid var(--sixthcolor);
    outline: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .height-pop {
    display: grid;
    place-items: center;
    position: absolute;
    visibility: hidden;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .form-2__progress-container__route {
    grid-area: 1 / 2 / span 1 / span 1;
    grid-template: 1fr / 1fr auto 0.1fr 1fr auto;
    width: 70%;
  }

  .bottom-shape {
    grid-area: 23 / 1 / span 2 / span 24;
    height: 12vh;
  }

  .high-label.editable {
    height: 2vw;
    width: 8vw;
  }

  .editable h5 {
    padding: 0 0 0 5px;
  }

  .high-label h5 {
    height: 2vw;
    line-height: 2vw;
  }

  .height-pop {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    top: 23vh;
    left: 78vw;
    visibility: hidden;
  }

  /* 2.2.4. Confirmation */

  .form-2__confirmation-container__info {
    font-size: 1.2vw;
  }

  .form-2__confirmation-container__info b {
    font-size: 2vw;
    line-height: 5vw;
    color: var(--secondcolor);
  }

  .form-2__confirmation-container__button {
    top: 68vh;
    width: 20vw;
    height: 3.5vw;
  }

  .form-2__confirmation-container__icon {
    width: 8vw;
    top: 30vh;
  }

  /* 2.2.5. About */

  .about {
    position: absolute;
    left: 0;
    width: 100vw;
    top: 100vh;
    height: 290vh;
  }

  .about__check {
    top: calc(80vh + 60vw);
    padding: 25vw 6vw 10vh 6vw;
    height: 80vh;
    position: absolute;
    grid-template: auto auto / 1fr 1fr;
    display: grid;
    row-gap: 10vh;
    width: 88vw;
  }

  .about__check-list {
    grid-area: 2 / 2 / span 1 / span 1;
    width: 30vw;
    background: var(--seventhcolor);
    padding: 3vw;
    height: 50vh;
    display: grid;
    border-top: 10px solid var(--thirdcolor);
    justify-self: end;
  }

  .about__check-list-item-title {
    font-size: 1.5vw !important;
    }

  .about__check-list li {
    display: grid;
    grid-template: 1fr / 2vw auto;
  }
  .about__check-description {
    grid-area: 2 / 1 / span 1 / span 1;
    width: 34vw;
    padding-left: 8vw;
    padding-top: 10vh;
  }

  .about__process {
    height: 70vh;
    width: 88vw;
    padding: 20vh 6vw 10vh 6vw;
    grid-template: 1fr 5fr / 1fr 1fr 1fr;
    row-gap: 15vh;
    z-index: 1;
  }

  .about__process-title,
  .about__check-title {
    grid-template: 5vw auto / 5vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .about__process-title-line,
  .about__check-title-line {
    height: 5px;
    width: 5vw;
  }

  .about__process-title h2,
  .contact__title h2,
  .about__check-title h2 {
    font-size: 1.3vw;
  }

  .about__company-description__company-desc-title {
    grid-template: 1fr / 5vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .about__company-description__company-desc-title__line,
  .contact__title__line {
    grid-area: 1 / 1 / span 1 / span 1;
    height: 5px;
    width: 5vw;
    background: var(--thirdcolor);
  }

  .about__process-title h3,
  .about__company-description__company-desc-title h3,
  .contact__title h3,
  .about__check-title h3 {
    font-size: 2vw;
    line-height: 5vw;
  }

  .about__process-list {
    grid-area: 2 / 1 / span 1 / span 3;
    grid-template: 1fr / repeat(3, 1fr);
    width: 70%;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .about__process-list__item {
    width: 17vw;
    grid-template: 2fr 1fr / 1fr;
    box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
    border-bottom: 10px solid var(--thirdcolor);
  }

  .about__process-list__item__img {
    grid-area: 1 / 1 / span 1 / span 1;
    padding: 3vw;
  }

  .about__process-list__item__process-no {
    width: 3vw;
    height: 4vw;
    line-height: 4vw;
    font-size: 1.5vw;
    margin-left: 1vw;
    top: -5%;
  }

  .about__process-list__item__process-desc {
    padding: 0 1vw 4vw 1vw;
  }

  .about__process-list__item__process-desc h4 {
    font-size: 1vw;
  }

  .about__process-list__item__img__circle {
    width: 9vw;
    height: 9vw;
    border: 3px solid var(--thirdcolor);
  }

  .about__company-description {
    top: 70vh;
    grid-template: 0.5fr 1fr 1fr / 1fr;
    padding: 25vw 6vw 10vh 6vw;
    height: 60vw;
  }

  .about__company-description__company-desc-short {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: 1fr / 1fr 3fr;
    padding: 0vw 5vw 0vw 0vw;
    row-gap: 7vh;
  }

  .about__company-description__company-desc-short__img {
    grid-area: 2 / 1 / span 1 / span 1;
    position: absolute;
    top: 18vw;
    left: 5vw;
  }

  .about__company-description__company-desc-short__img img {
    width: 25vw;
    border-top: 10px solid var(--thirdcolor);
  }

  .about__company-description__company-desc-short-text {
    display: grid;
    padding: 5vw 5vw 0vw 0vw;
    grid-template: auto auto / 1fr;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .about__company-description__company-desc-short-text-emphasized {
    grid-area: 2 / 2 / span 1 / span 1;
    width: 60%;
    justify-self: end;
    padding-bottom: 10vh;
  }

  .about__company-description__company-desc-short-text-emphasized h3 {
    font-size: 1.6vw;
  }

  .about__company-description__company-desc-short-text h3 {
    font-size: 1.2vw;
  }

  .about__company-description__company-desc-long {
    grid-template: auto auto/ 1fr;
    grid-area: 3 / 1 / span 1 / span 1;
    -moz-column-gap: 3vw;
    column-gap: 3vw;
    width: 50%;
    justify-self: end;
    padding: 0vw 5vw 10vw 0vw;
    align-items: start;
    row-gap: 5vh;
  }

  .about__company-description__company-desc-long__item h4 {
    font-size: 1.2vw;
  }

  .contact {
    top: calc(320vh + 60vw);
    width: 100vw;
    height: 25vh;
    padding: 10vh 6vw;
  }

  .contact__title {
    grid-area: 1 / 1 / span 1 / span 3;
    grid-template: 5vw auto / 5vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    width: 100%;
  }

  .contact__details {
    left: 60vw;
    height: 20vh;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
  }

  .contact__details > * {
    display: grid;
    grid-template: 1fr / 4vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    align-items: center;
  }

  footer {
    top: calc(365vh + 60vw);
    height: 8vh;
  }

  #mail, #phone {
    max-width: 100px;
  }
}

/* 2.3. Mobile */

@media only screen and (max-width: 600px) {
  /* 2.3.1. Shared */

  h3,
  h5 {
    font-size: 3vw;
  }

  h2,
  h4 {
    font-size: 4vw;
  }

  h1 {
    font-size: 6vw;
  }

  .home {
    grid-template: repeat(30, 1fr) / repeat(24, 1fr);
    grid-area: 1 / 1 / span 1 / span 1;
  }

  /* 2.3.2. First form */

  .main-container {
    display: grid;
    grid-template: repeat(3, auto) 3vh / 1fr;
    row-gap: 5vh;
  }

  .home__title {
    grid-area: 6 / 2 / span 3 / span 22;
    grid-template: 1fr 2fr / 1fr;
    row-gap: 0.5vw;
    z-index: 4;
  }

  .home__title-1 h2 {
    color: var(--secondcolor);
  }

  .home__title-2 h1 {
    color: var(--thirdcolor);
  }

  .donkey-img {
    position: absolute;
    width: 25vw;
    height: auto;
    right: 0vw;
    top: 31vh;
    transform: translate(0, -100%);
  }

  .form {
    grid-area: 9 / 1 / span 22 / span 24;
    grid-template: repeat(22, 1fr) / repeat(6, 1fr);
    background: var(--maincolor);
    padding: 7vw 5vw 0vw 5vw;
    border-top: 10px solid var(--secondcolor);
  }

  input {
    height: 6vh;
    font-size: 3vw;
  }

  .form__area {
    grid-area: 1 / 1 / span 18 / span 6;
    grid-template:
      1fr 0.7fr 1.5fr 0.7fr 1.5fr 0.5fr 1fr 0.7fr 1.5fr 0.7fr 1.5fr / repeat(
        3,
        1fr
      )
      6vw 1fr 0.5fr 0.5fr;
    -moz-column-gap: 4vw;
    column-gap: 4vw;
  }

  .form__area__title {
    grid-area: 1 / 1 / span 1 / span 6;
  }

  .form__area__unload-title {
    grid-area: 7 / 1 / span 1 / span 6;
  }

  .form__area__title.place {
    grid-area: 2 / 1 / span 1 / span 3;
  }

  .form__area__unload-title.place {
    grid-area: 8 / 1 / span 1 / span 3;
  }

  .form__area__title.date {
    grid-area: 4 / 1 / span 1 / span 1;
  }

  .form__area__unload-title.date {
    grid-area: 10 / 1 / span 1 / span 1;
  }

  div.form__area__date-warning {
    width: fit-content;
  }

  .form__area__title.time {
    grid-area: 4 / 4 / span 1 / span 3;
  }

  .form__area__unload-title.time {
    grid-area: 10 / 4 / span 1 / span 3;
  }

  .form__area__load-time-warning {
    transform: translateY(.5vh);
  }

  .form__area__load-loc {
    grid-area: 3 / 1 / span 1 / span 7;
    height: 6vh;
    padding-left: 3vw;
  }

  .form__area__unload-loc {
    grid-area: 9 / 1 / span 1 / span 7;
    height: 6vh;
    padding-left: 3vw;
  }

  .form__area__load-loc,
  .form__area__unload-loc,
  .pac-matched,
  .pac-item-query,
  .pac-item > span {
    font-size: 3vw !important;
    color: var(--secondcolor) !important;
    font-family: "Kanit" !important;
    font-weight: 400;
  }

  .form-background-2 {
    display: none;
  }

  #map {
    left: 50%;
    transform: translate(-50%, 0);
    width: 100vw;
    grid-area: 1 / 1 / span 8 / span 24;
    z-index: 1;
    opacity: 0.5;
  }

  #mail, #phone {
    max-width: 50px;
  }

  .form-background {
    background: radial-gradient(
      circle,
      rgba(250, 249, 249, 0.1) 0%,
      rgba(250, 249, 249, 0.9) 100%
    );
    z-index: 3;
    width: 180%;
    grid-area: 1 / 1 / span 8 / span 24;
    display: none;
  }

  .form__area__load-date {
    grid-area: 5 / 1 / span 1 / span 3;
    font-size: 3vw;
  }

  .form__area__unload-date {
    grid-area: 11 / 1 / span 1 / span 3;
    font-size: 3vw;
  }

  .datepicker {
    border-radius: 0;
    padding: 0 0 1vw 0;
  }

  .datepicker .table-condensed {
    width: 100%;
  }

  .day {
    font-size: 3vw;
    height: 4.2vh !important;
    width: 1.7vw;
  }

  .prev,
  .next,
  .datepicker-switch {
    height: 5vh !important;
  }

  .datepicker-switch:hover {
    border-radius: 0;
  }

  .day:hover,
  .month:hover,
  .year:hover,
  .decade:hover,
  .century:hover,
  .day.focused,
  .month.focused,
  .year.focused,
  .decade.focused,
  .century.focused {
    border-radius: 0;
    background: var(--fifthcolor);
  }

  .dow {
    color: var(--secondcolor);
    font-weight: 400;
    background: var(--maincolor);
    border-top: 1px solid var(--seventhcolor) !important;
    font-size: 2.7vw;
  }

  .datepicker-days {
    border-bottom: 1px solid var(--fifthcolor);
  }

  .datepicker td,
  .datepicker th {
    border-radius: 0;
  }

  .datepicker-dropdown,
  .datepicker-days {
    height: 37vh;
    width: 30vh;
    padding: 0;
  }

  .datepicker tbody tr {
    height: 3.6vh;
  }

  .form__area__load-time {
    grid-area: 5 / 4 / span 1 / span 4;
    height: 6vh;
    grid-template: 1fr / 1fr 0.3fr 1fr;
  }

  .form__area__unload-time {
    grid-area: 11 / 4 / span 1 / span 4;
    grid-template: 1fr / 1fr 0.3fr 1fr;
    height: 6vh;
    z-index: 0;
  }

  .form__area__load-time input,
  .form__area__unload-time input {
    font-size: 3vw;
  }

  .form__area__dropdown-select__default {
    height: 6vh;
    grid-template: 1fr / 3fr 1fr;
    padding-right: 5%;
    width: 95%;
  }

  .form__area__dropdown-select__default h5 {
    padding: 0 0 0 3.5vw;
    grid-area: 1 / 1 / span 1 / span 1;
    font-size: 3vw;
  }

  .form__area__dropdown-select {
    grid-template: 6vh auto/ 1fr;
    row-gap: 0.1vw;
    width: 100%;
    height: 6vh;
    z-index: 2;
  }

  .form__area__load-time-end,
  .form__area__unload-time-end {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .form__area__load-time-start,
  .form__area__unload-time-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form__area__dropdown-select .arrow {
    padding: 2px;
  }

  .dropdown-select li {
    padding: 0 0 0 3.5vw;
    height: 6vh;
  }

  .dropdown-select li h5 {
    font-size: 3vw;
  }

  .dropdown-select {
    grid-template: repeat(48, 1fr);
    width: 100%;
    z-index: 1;
  }

  .collapse .dropdown-select {
    height: 30vh;
  }

  .collapse {
    display: grid !important;
  }

  .form__area__unload-time-start,
  .form__area__load-time-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form__area__unload-time-end,
  .form__area__load-time-end {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .circle-unload {
    grid-area: 7 / 7 / span 1 / span 1;
    height: 1.2vh;
    width: 1.2vh;
    transform: translate(0.6vw, 0);
    display: none;
  }

  .circle-unload:after {
    width: 0.8vh;
    height: 0.8vh;
  }

  .line-dashed {
    grid-area: 3 / 7 / span 5 / span 1;
    width: 3px;
    height: 10vh;
    transform: translateX(calc(1.5px + 0.6vw));
    display: none;
  }

  .circle-load {
    grid-area: 3 / 7 / span 1 / span 1;
    height: 1.2vh;
    width: 1.2vh;
    transform: translate(0.6vw, 0);
    display: none;
  }

  button.next {
    height: 7vh !important;
    grid-area: 20 / 1 / span 2 / span 6;
  }

  /* 2.3.3. Second form */

  .form-2 {
    grid-area: 5 / 2 / span 34 / span 22;
    grid-template: 46vh 12vh 1fr 1fr 1fr auto / repeat(6, 1fr) 1fr repeat(
        5,
        1fr
      );
    row-gap: 4vh;
  }

  .page-container {
    height: auto;
  }

  .form-2-container {
    grid-template: 0.3fr repeat(46, 1fr) / repeat(24, 1fr);
    height: 180vh;
    background: var(--maincolor);
    overflow-y: hidden;
    overflow-x: hidden;
  }

  .form-2__load-type {
    grid-area: 1 / 1 / span 7 / span 12;
    grid-template: 5vh 41vh / 1fr;
  }

  .form-2__load-type__title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-type__list {
    grid-template: repeat(5, 7vh) / 1fr;
    row-gap: 1.5vh;
  }

  .form-2__load-type__list__item {
    grid-template: 1fr / repeat(5, 1fr) 0.5fr 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .form-2__load-type__list__item__desc {
    grid-area: 1 / 1 / span 1 / span 5;
    grid-template: 1fr / 5vh 10fr;
    height: 7vh;
  }

  .form-2__load-type__list__item__desc__checkbox {
    height: 7vh;
  }

  .form-2__load-type__list__item__desc__checkbox
    input:checked
    ~ .checkmark:after {
    display: block;
    -webkit-animation: scaleCheckbox-mobile 0.05s linear forwards;
    animation: scaleCheckbox-mobile 0.05s linear forwards;
  }

  @-webkit-keyframes scaleCheckbox-mobile {
    to {
      transform: rotate(45deg) translate(4%, 1%) scale(1);
    }
  }

  @keyframes scaleCheckbox-mobile {
    to {
      transform: rotate(45deg) translate(4%, 1%) scale(1);
    }
  }

  .form-2__load-type__list__item__desc__checkbox input {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-type__list__item__desc h5 {
    grid-area: 1 / 2 / span 1 / span 2;
  }

  .checkmark {
    height: 3vw;
    width: 3vw;
  }

  .form-2__load-type__list__item__desc__checkbox .checkmark:after {
    width: 0.6vw;
    height: 1.7vw;
    border: solid var(--thirdcolor);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(0, 10%) scale(0);
  }

  .form-2__load-type__list__item__times {
    grid-area: 1 / 6 / span 1 / span 1;
  }

  .form-2__load-type__list__item-q {
    grid-area: 1 / 7 / span 1 / span 2;
    grid-template: 1fr / 1fr 10fr;
    height: 7vh;
    font-size: 3vw;
    width: 100%;
  }

  .form-2__load-type-other-desc {
    font-size: 3vw;
    grid-area: 1 / 3 / span 1 / span 5;
    height: 7vh;
    padding: 0 0 0 5vw;
  }

  .other .form-2__load-type__list__item__desc {
    grid-area: 1 / 1 / span 1 / span 2;
  }

  .warning {
    transform: translateY(0);
  }

  .type-warning {
    transform: translateY(0.5vw);
  }

  .form-2__load-weight {
    grid-template: 5vh 7vh / 1fr;
    grid-area: 2/ 1 / span 1 / span 12;
    padding: 0 0 0 0.5vw;
  }

  .weight-warning {
    transform: translateY(0.2vw);
  }

  .form-2__load-weight__info {
    font-size: 2.5vw;
    grid-area: 1 / 1 / span 1 / span 1;
    padding-left: 52vw;
  }

  .form-2__load-weight__info__symbol {
    grid-area: 1 / 1 / span 1 / span 1;
    border-radius: 50%;
    background: var(--thirdcolor);
    width: 4vw;
    height: 4vw;
    align-self: center;
    color: var(--fourthcolor);
    text-align: center;
    line-height: 4vw;
    font-size: 3vw;
    transform: translateY(-40%);
    margin-left: 45vw;
  }

  .form-2__load-weight__info__symbol.hide,
  .form-2__load-weight__info.hide {
    visibility: visible !important;
  }

  .form-2__load-weight__title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-weight__select__default {
    height: 7vh;
    grid-template: 1fr / 3fr 1fr;
  }

  .form-2__load-weight__select__default h5 {
    padding: 0 0 0 5vw;
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-weight__select {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: 7vh auto/ 1fr;
    row-gap: 0.5vw;
    width: 100%;
    z-index: 1;
  }

  .weight-select li {
    padding: 0 0 0 5vw;
    height: 7vh;
  }

  .weight-select {
    grid-template: repeat(10, 1fr);
  }

  .arrow {
    height: 0.1vw;
    width: 0.1vw;
    border-width: 0 1.5px 1.5px 0;
    padding: 3px;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .collapse .weight-select {
    height: 30vh;
  }

  .form-2__load-car__select__input-item-2,
  .form-2__load-height__select__input-item-2 {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .form-2__load-car__select,
  .form-2__load-height__select {
    grid-template: 1fr / 2fr 4fr 2fr 4fr;
    grid-area: 2 / 1 / span 1 / span 1;
    height: 4vh;
    row-gap: 1vw;
  }

  .form-2__load-height {
    grid-template: 5vh 4vh / 1fr;
    grid-area: 3 / 1 / span 1 / span 12;
  }

  .form-2__load-car {
    grid-template: 5vh 4vh / 1fr;
    grid-area: 4 / 1 / span 1 / span 12;
  }

  .form-2__load-car__title,
  .form-2__load-height-title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-car input,
  .form-2__load-height input {
    height: 3vw;
    width: 3vw;
  }

  .form-2__load-car__select__input-item-1,
  .form-2__load-car__select__input-item-2,
  .form-2__load-height__select__input-item-1,
  .form-2__load-height__select__input-item-2 {
    grid-template: 3vw / 3vw;
    width: 3vw;
    height: 3vw;
    margin: 0.2vw 0;
  }

  .high-label.editable {
    background: var(--fourthcolor);
    display: grid;
    align-items: center;
    border-radius: 0px;
    border: 1px solid var(--fifthcolor);
    cursor: text;
    height: 5vw;
    width: 30vw;
  }

  .height-pop h5 {
    color: var(--thirdcolor);
  }

  h5:focus {
    border-radius: 0;
    border: 1px solid var(--sixthcolor);
    outline: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .editable h5 {
    padding: 0 0 0 5px;
  }

  .high-label h5 {
    height: 5vw;
    line-height: 5vw;
  }

  .height-pop {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    top: 77vh;
    left: 65vw;
    z-index: 1;
    visibility: hidden;
    display: grid;
    place-items: center;
    position: absolute;
  }

  .circle-radio {
    width: 2.3vw;
    height: 2.3vw;
  }

  #without-lift:checked ~ .circle-radio-1:after,
  #with-lift:checked ~ .circle-radio-2:after,
  #short:checked ~ .circle-radio-3:after,
  #high:checked ~ .circle-radio-4:after {
    width: 2.3vw;
    height: 2.3vw;
  }

  .with-lift-label {
    height: 5vw;
    align-self: center;
    text-align: center;
    line-height: 5vw;
  }

  .with-lift-label h5 {
    line-height: 5vw;
  }

  .form-2__comments {
    grid-template: 5vh 13vh / 1fr;
    grid-area: 5 / 1 / span 1 / span 12;
    padding: 0 0 0 0.5vw;
  }

  .form-2__comments textarea {
    height: calc(13vh - 3vw);
    font-size: 3vw;
    padding: 3vw 0 0 3vw;
  }

  .form-2__contact-info {
    grid-template: 3.5vh 1.5vh 7vh auto 7vh auto 7vh auto 13vh/ 1fr;
    grid-area: 6 / 1 / span 1 / span 12;
    height: auto;
  }

  .send {
    grid-area: 9 / 1 / span 3 / span 15;
    height: 8vh !important;
    justify-self: stretch;
  }

  .contact__title {
    padding: 0;
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: start;
  }

  .send h4 {
    color: var(--maincolor);
  }

  .contact__title h4 {
    color: var(--secondcolor);
  }

  .form-2__contact-info input {
    padding: 0 0 0 5vw;
  }

  .form-2__contact-info__background {
    background: transparent;
  }

  .email {
    grid-area: 3 / 1 / span 1 / span 1;
  }

  .email2 {
    grid-area: 5 / 1 / span 1 / span 1;
  }

  .phone {
    grid-area: 7 / 1 / span 1 / span 1;
  }

  .warning {
    font-size: 2.5vw;
    transform: translateY(0.5vh);
  }

  .phone-warning,
  .email-warning {
    transform: translateY(0);
    position: static;
  }

  .email-warning {
    grid-area: 4 / 1 / span 1 / span 1;
  }

  .phone-warning {
    grid-area: 8 / 1 / span 1 / span 1;
  }

  .pop {
    display: grid !important;
  }

  .form-2__progress-container__back-arrow {
    border: solid var(--thirdcolor);
    display: inline-block;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    cursor: pointer;
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: center;
    justify-self: start;
  }

  .form-2__progress-container__back {
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: center;
    color: var(--secondcolor);
    justify-self: start;
    text-align: end;
    cursor: pointer;
  }

  .form-2__progress-container {
    align-self: start;
    justify-self: center;
    display: grid;
    place-items: center;
    background: var(--eightcolor);
    width: 91.4vw;
    padding: 0 4.7vw;
    grid-area: 1 / 1 / span 2 / span 24;
    grid-template: 9vh 5vh/ 1fr 4fr 13vw;
    height: 18vh;
  }

  .donkey-img-2 {
    grid-area: 1 / 3 / span 1 / span 1;
    height: 6vh;
    z-index: 1;
  }

  .donkey-img-2-circle {
    width: 4vh;
    height: 4vh;
    background: var(--thirdcolor);
    border-radius: 50%;
    grid-area: 1 / 3 / span 1 / span 1;
    transform: translateX(-10px);
  }

  .progress-line-1,
  .progress-line-2 {
    width: 100%;
    border-bottom: 2px solid var(--thirdcolor);
  }

  .circle-start,
  .circle-end {
    background: var(--thirdcolor);
    border-radius: 50%;
    border: 2px solid var(--thirdcolor);
  }

  .circle-end {
    background: transparent;
  }

  .circle-end:after {
    content: "";
    background: var(--thirdcolor);
    display: block;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    position: relative;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .form-2__progress-container__route__start {
    color: var(--secondcolor);
    justify-self: start;
    display: grid;
    text-align: end;
  }

  .form-2__progress-container__route__end {
    color: var(--secondcolor);
    justify-self: start;
    display: grid;
  }

  .form-2__progress-container__back-arrow {
    border-width: 0 3px 3px 0;
    padding: 3px;
    height: 0.5vh;
    width: 0.5vh;
  }

  .form-2__progress-container__back {
    padding: 0 0 0 6vw;
  }

  .progress-line-1 {
    height: 0.1px;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .progress-line-2 {
    height: 0.1px;
    grid-area: 1 / 4 / span 1 / span 1;
  }

  .circle-start,
  .circle-end {
    height: 1.2vh;
    width: 1.2vh;
  }

  .circle-start {
    grid-area: 1 / 1 / span 1 / span 1;
    justify-self: start;
  }

  .circle-end {
    grid-area: 2 / 1 / span 1 / span 1;
    justify-self: start;
  }

  .circle-end:after {
    width: 0.8vh;
    height: 0.8vh;
  }

  .form-2__progress-container__route__start {
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .form-2__progress-container__route__start-loc,
  .form-2__progress-container__route__end-loc {
    font-size: 2.5vw;
  }

  .form-2__progress-container__route__start__date,
  .form-2__progress-container__route__end__date {
    font-size: 2.5vw;
  }

  .form-2__progress-container__route__end {
    grid-area: 2 / 2 / span 1 / span 1;
  }

  .form-2__progress-container__route {
    color: var(--fourthcolor);
    justify-self: start;
    display: grid;
    grid-area: 2 / 1 / span 1 / span 3;
    grid-template: 1fr 1fr / 5vw auto;
    width: 90%;
    -moz-column-gap: 1vw;
    column-gap: 1vw;
    row-gap: 2vh;
  }

  .bottom-shape {
    display: none;
  }

  .bottom-shape {
    grid-area: 23 / 1 / span 2 / span 24;
    height: 12vh;
  }

  /* 2.3.4. Confirmation */

  .form-2__confirmation-container__info {
    font-size: 3vw;
    width: 70vw;
    line-height: 5vw;
    top: 55vh;
  }

  .form-2__confirmation-container__info b {
    font-size: 4vw;
    line-height: 10vw;
    color: var(--secondcolor);
  }

  .form-2__confirmation-container__button {
    position: absolute;
    top: 85vh;
    left: 50%;
    width: 91vw;
    height: 8vh !important;
    transform: translate(-50%, 0%);
  }

  .form-2__confirmation-container__icon {
    width: 30vw;
    top: 35vh;
  }

  /* 2.3.5. About */

  .about {
    grid-area: 2 / 1 / span 1 / span 1;
    width: 100vw;
    display: grid;
    grid-template: auto auto / 1fr;
    height: auto;
    align-items: start;
    row-gap: 10vh;
    padding: 0vh 0 0 0;
  }

  .about__process {
    width: 88vw;
    padding: 0 6vw 0vh 6vw;
    grid-template: auto 5fr / 1fr 1fr 1fr;
    row-gap: 5vh;
    grid-area: 1 / 1 / span 1 / span 1;
    position: static;
    place-items: center;
    display: grid;
    background: transparent;
    z-index: 1;
  }

  .about__check {
    padding: 0vw 6vw 10vh 6vw;
    height: 91vh;
    grid-template: auto auto auto/ 1fr;
    display: grid;
    row-gap: 5vh;
    width: 88vw;
  }

  .about__check-list {
    grid-area: 3 / 1 / span 1 / span 1;
    width: 94%;
    background: var(--seventhcolor);
    padding: 3vw;
    height: 40vh;
    display: grid;
    border-top: 10px solid var(--thirdcolor);
    justify-self: center;
    align-items: center;
  }

  .about__check-list-item-title {
    font-size: 3.3vw !important;
    }

  .about__check-list li {
    display: grid;
    grid-template: 1fr / 4vw auto;
  }

  .about__check-description {
    grid-area: 2 / 1 / span 1 / span 1;
    width: 88vw;
    padding-left: 0vw;
    padding-top: 1vh;
  }

  .about__check-title {
    grid-template: 8vw auto / 10vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 5vw;
    padding-top: 0;
    grid-area: 1 / 1 / span 1 / span 3;
    z-index: 2;
    width: 100%;
  }

  .about__process-title {
    grid-template: 8vw auto / 10vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 5vw;
  }

  .about__process-background {
    width: 100vw;
    grid-area: 1 / 1 / span 1 / span 3;
    background: var(--secondcolor);
    height: 225%;
    align-self: start;
    position: relative;
    top: 0%;
  }

  .about__process-title {
    grid-area: 1 / 1 / span 1 / span 3;
    z-index: 2;
    width: 100%;
    padding-top: 5vh;
  }

  .about__process-title-line,
  .about__check-title-line {
    height: 5px;
    width: 10vw;
  }

  .about__process-title h2 {
    font-size: 3vw;
    width: 60%;
  }

  .about__check-title h2 {
    font-size: 3vw;
    width: 95%;
  }

  .contact__title h2 {
    font-size: 3vw;
    width: 100%;
  }

  .about__company-description__company-desc-title {
    grid-template: 1fr / 10vw 1fr;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
  }

  .about__company-description__company-desc-title__line,
  .contact__title__line {
    grid-area: 1 / 1 / span 1 / span 1;
    height: 5px;
    width: 10vw;
    background: var(--thirdcolor);
  }

  .about__process-title h3,
  .about__company-description__company-desc-title h3,
  .contact__title h3,
  .about__check-title h3 {
    font-size: 4vw;
    line-height: 5vw;
  }

  .about__process-list {
    grid-area: 2 / 1 / span 1 / span 3;
    grid-template: 1fr / repeat(3, 1fr);
    width: fit-content;
    justify-self: flex-start;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .about__process-list__item {
    width: 27vw;
    grid-template: 1fr 1fr / 1fr;
    box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
    border-bottom: 10px solid var(--thirdcolor);
    height: 90%;
  }

  .about__process-list__item__img {
    grid-area: 1 / 1 / span 1 / span 1;
    padding: 4vw;
  }

  .about__process-list__item__process-no {
    width: 4vw;
    height: 5vw;
    line-height: 5vw;
    font-size: 3vw;
    margin-left: 1vw;
    top: -5%;
  }

  .about__process-list__item__process-desc {
    padding: 0 1vw 3vh 2vw;
  }

  .about__process-list__item__process-desc h4 {
    font-size: 2vw;
  }

  .about__process-list__item__img__circle {
    width: 9vw;
    height: 9vw;
    border: 3px solid var(--thirdcolor);
  }

  .about__company-description {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: auto auto auto / 1fr;
    padding: 0vw 6vw 0vh 6vw;
    row-gap: 3vh;
    position: static;
  }

  .about__company-description__company-desc-short {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: auto auto / 1fr 10fr;
    padding: 0vw 5vw 0vw 0vw;
    row-gap: 5vh;
  }

  .about__company-description__company-desc-short__img {
    grid-area: 2 / 1 / span 1 / span 1;
    top: 43vw;
    left: 0vw;
    height: 230px;
  }

  .about__company-description__company-desc-short__img img {
    width: 38vw;
    border-top: 10px solid var(--thirdcolor);
  }

  .about__company-description__company-desc-short-text {
    display: grid;
    padding: 2vh 5vw 0vw 0vw;
    grid-template: auto auto / 1fr;
    grid-area: 1 / 1 / span 1 / span 2;
    position: relative;
    left: 10vw;
  }

  .about__company-description__company-desc-short-text-emphasized {
    grid-area: 2 / 2 / span 1 / span 1;
    width: 81%;
    justify-self: end;
    top: 7vh;
    position: relative;
  }

  .about__company-description__company-desc-short-text-emphasized h3 {
    font-size: 3.5vw;
  }

  .about__company-description__company-desc-short-text h3 {
    font-size: 3vw;
  }

  .about__company-description__company-desc-long {
    grid-template: auto auto/ 1fr;
    grid-area: 3 / 1 / span 1 / span 1;
    padding-top: 2vh;
    align-items: start;
    row-gap: 3vh;
  }

  .about__company-description__company-desc-long__item h4,
  .about__check-description,
  .about__check-list li {
    font-size: 3vw;
  }

  .contact {
    width: 88vw;
    padding: 10vh 6vw;
    display: grid;
    grid-template: auto auto / 1fr;
    row-gap: 5vh;
    grid-area: 3 / 1 / span 1 / span 1;
    position: static;
  }

  .contact__title {
    grid-area: 1 / 1 / span 1 / span 3;
    grid-template: 8vw auto / 10vw 1fr;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
    width: 100%;
  }

  .contact__details {
    left: 20vw;
    height: 10vh;
    align-items: center;
    grid-area: 2 / 1 / span 1 / span 1;
    padding-left: 15vw;
    position: static;
  }

  .contact__details > * {
    display: grid;
    grid-template: 1fr / 9vw 1fr;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
    align-items: center;
  }

  footer {
    height: 8vh;
    position: absolute;
    bottom: 0vh;
    width: 100vw;
    background: var(--secondcolor);
  }

  .contact__details__mail,
  .contact__details__phone {
    font-size: 3vw;
  }
}

/* 2.4. Tablet */

@media only screen and (min-width: 600px) and (max-width: 992px) {
  /* 2.4.1. Shared */

  h3,
  h2,
  h4 {
    font-size: 2vw;
  }

  h1 {
    font-size: 3vw;
  }

  h5 {
    font-size: 1.5vw;
  }

  .home {
    grid-template: repeat(24, 1fr) / repeat(24, 1fr);
    grid-area: 1 / 1 / span 1 / span 1;
    position: static;
  }

  /* 2.4.2. First form */

  .main-container {
    display: grid;
    grid-template: repeat(3, auto) 3vh / 1fr;
    row-gap: 5vh;
  }

  .home__title {
    grid-area: 4 / 2 / span 3 / span 10;
    grid-template: auto 2fr / 1fr;
    row-gap: 0.5vw;
    z-index: 3;
  }

  .donkey-img {
    position: absolute;
    width: 14vw;
    height: auto;
    right: 11vw;
    top: 20.5vh;
    transform: translate(0, -100%);
  }

  .form {
    grid-area: 10 / 2 / span 22 / span 22;
    grid-template: repeat(13, 1fr) 1fr / repeat(6, 1fr);
  }

  input {
    height: 4vh;
    font-size: 1.5vw;
  }

  .form__area {
    grid-area: 1 / 1 / span 13 / span 6;
    grid-template: 4vh 3vh 5vh 3vh 4vh 3vh 5vh / repeat(3, 1fr) 14vw 1fr 0.5fr 0.5fr;
    -moz-column-gap: 1vw;
    column-gap: 1vw;
  }

  .form__area__title {
    grid-area: 1 / 1 / span 1 / span 6;
  }

  .form__area__unload-title {
    grid-area: 5 / 1 / span 1 / span 6;
  }

  .form__area__title.place {
    grid-area: 2 / 1 / span 1 / span 3;
  }

  .form__area__unload-title.place {
    grid-area: 6 / 1 / span 1 / span 3;
  }

  .form__area__title.date {
    grid-area: 2 / 4 / span 1 / span 1;
  }

  .form__area__unload-title.date {
    grid-area: 6 / 4 / span 1 / span 1;
  }

  .form__area__title.time {
    grid-area: 2 / 5 / span 1 / span 3;
  }

  .form__area__unload-title.time {
    grid-area: 6 / 5 / span 1 / span 3;
  }

  .form__area__load-loc {
    grid-area: 3 / 1 / span 1 / span 3;
    height: 4vh;
    padding-left: 2vw;
  }

  .form__area__unload-loc {
    grid-area: 7 / 1 / span 1 / span 3;
    height: 4vh;
    padding-left: 2vw;
  }

  .form__area__load-loc,
  .form__area__unload-loc,
  .pac-matched,
  .pac-item-query,
  .pac-item > span {
    font-size: 1.5vw !important;
    color: var(--secondcolor) !important;
    font-family: "Kanit" !important;
    font-weight: 400;
  }

  #map {
    left: 50%;
    transform: translate(-50%, 0);
    width: 100vw;
    grid-area: 1 / 1 / span 7 / span 24;
    z-index: 1;
    opacity: 0.5;
  }

  .form-background {
    background: transparent;
    z-index: 2;
    width: 180%;
    grid-area: 8 / 1 / span 1 / span 24;
    border-top: 10px solid var(--secondcolor);
  }

  .form-background-2 {
    display: none;
  }

  .datepicker-dropdown,
  .datepicker-days {
    height: 30vh;
    width: 25vh;
    padding: 0;
  }

  .form__area__load-date {
    grid-area: 3 / 4 / span 1 / span 1;
    font-size: 1.5vw;
  }

  .form__area__unload-date {
    grid-area: 7 / 4 / span 1 / span 1;
    font-size: 1.5vw;
  }

  .datepicker {
    border-radius: 0;
    padding: 0 0 1vw 0;
  }

  .datepicker tbody tr {
    height: 3.6vh;
  }

  .datepicker .table-condensed {
    width: 100%;
  }

  .day {
    font-size: 2vw;
    height: 3.2vh !important;
    width: 1.7vw;
  }

  .prev,
  .next,
  .datepicker-switch {
    height: 4vh !important;
  }

  .datepicker-switch:hover {
    border-radius: 0;
  }

  .day:hover,
  .month:hover,
  .year:hover,
  .decade:hover,
  .century:hover,
  .day.focused,
  .month.focused,
  .year.focused,
  .decade.focused,
  .century.focused {
    border-radius: 0;
    background: var(--fifthcolor);
  }

  .dow {
    color: var(--secondcolor);
    font-weight: 400;
    background: var(--maincolor);
    border-top: 1px solid var(--seventhcolor) !important;
    font-size: 1.7vw;
  }

  .datepicker-days {
    border-bottom: 1px solid var(--fifthcolor);
  }

  .datepicker td,
  .datepicker th {
    border-radius: 0;
  }

  .form__area__load-time {
    grid-area: 3 / 5 / span 1 / span 3;
    height: 4vh;
    grid-template: 1fr / 1fr 0.3fr 1fr;
  }

  .form__area__unload-time {
    grid-area: 7 / 5 / span 1 / span 3;
    font-size: 1.5vw;
    height: 4vh;
    z-index: 0;
    grid-template: 1fr / 1fr 0.3fr 1fr;
  }

  .form__area__load-time input,
  .form__area__unload-time input {
    font-size: 1.5vw;
  }

  .form__area__unload-time-start,
  .form__area__load-time-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form__area__unload-time-end,
  .form__area__load-time-end {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .form__area__load-time-warning {
    transform: translateY(.5vh);
  }

  .dash {
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .form__area__dropdown-select__default {
    height: 4vh;
    grid-template: 1fr / 3fr 1fr;
    padding-right: 5%;
    width: 95%;
  }

  .form__area__dropdown-select__default h5 {
    padding: 0 0 0 4vw;
    grid-area: 1 / 1 / span 1 / span 1;
    font-size: 1.5vw;
  }

  .form__area__dropdown-select {
    grid-template: 4vh auto/ 1fr;
    row-gap: 0.1vw;
    width: 100%;
    height: 4vh;
  }

  .form__area__load-time-end,
  .form__area__unload-time-end {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .form__area__load-time-start,
  .form__area__unload-time-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form__area__dropdown-select .arrow {
    padding: 2px;
  }

  .dropdown-select li {
    padding: 0 0 0 4vw;
    height: 4vh;
  }

  .dropdown-select li h5 {
    font-size: 1.5vw;
  }

  .dropdown-select {
    grid-template: repeat(48, 1fr);
    width: 100%;
    z-index: 1;
  }

  .collapse .dropdown-select {
    height: 30vh;
  }

  .collapse {
    display: grid !important;
  }

  .circle-unload {
    grid-area: 7 / 7 / span 1 / span 1;
    height: 1.2vh;
    width: 1.2vh;
    transform: translate(0.6vw, 0);
    display: none;
  }

  .circle-unload:after {
    width: 0.8vh;
    height: 0.8vh;
  }

  .line-dashed {
    grid-area: 3 / 7 / span 5 / span 1;
    width: 3px;
    height: 10vh;
    transform: translateX(calc(1.5px + 0.6vw));
    display: none;
  }

  .circle-load {
    grid-area: 3 / 7 / span 1 / span 1;
    height: 1.2vh;
    width: 1.2vh;
    transform: translate(0.6vw, 0);
    display: none;
  }

  button.next {
    grid-area: 12 / 1 / span 2 / span 6;
    margin: 0;
    height: 6vh !important;
  }

  /* 2.4.3. Second form */

  .form-2 {
    grid-area: 7 / 2 / span 34 / span 22;
    grid-template: 30vh 12vh auto auto / repeat(6, 1fr) 1fr repeat(5, 1fr);
    row-gap: 4vh;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
  }

  .page-container {
    height: auto;
    overflow: hidden;
  }

  .form-2-container {
    grid-template: 0.3fr repeat(40, 1fr) / repeat(24, 1fr);
    height: 120vh;
    background: var(--maincolor);
  }

  .form-2__load-type {
    grid-area: 1 / 1 / span 7 / span 12;
    grid-template: 4vh 26vh / 1fr;
  }

  .form-2__load-type__title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-type__list {
    grid-template: repeat(5, 4vh) / 1fr;
    row-gap: 1.5vh;
  }

  .form-2__load-type__list__item {
    grid-template: 1fr / repeat(5, 1fr) 0.5fr 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .form-2__load-type__list__item__desc {
    grid-area: 1 / 1 / span 1 / span 5;
    grid-template: 1fr / 5vh 10fr;
    height: 4vh;
  }

  .form-2__load-type__list__item__desc__checkbox {
    height: 4vh;
  }

  .form-2__load-type__list__item__desc__checkbox
    input:checked
    ~ .checkmark:after {
    display: block;
    -webkit-animation: scaleCheckbox-mobile 0.05s linear forwards;
    animation: scaleCheckbox-mobile 0.05s linear forwards;
  }

  @-webkit-keyframes scaleCheckbox-mobile {
    to {
      transform: rotate(45deg) translate(18%, 8%) scale(1);
    }
  }

  @keyframes scaleCheckbox-mobile {
    to {
      transform: rotate(45deg) translate(18%, 8%) scale(1);
    }
  }

  .form-2__load-type__list__item__desc__checkbox input {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-type__list__item__desc h5 {
    grid-area: 1 / 2 / span 1 / span 2;
  }

  .checkmark {
    height: 2vw;
    width: 2vw;
  }

  .form-2__load-type__list__item__desc__checkbox .checkmark:after {
    width: 0.5vw;
    height: 1vw;
    border: solid var(--thirdcolor);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-6%, -6%) scale(0);
  }

  .form-2__load-type__list__item__times {
    grid-area: 1 / 6 / span 1 / span 1;
  }

  .form-2__load-type__list__item-q {
    grid-area: 1 / 7 / span 1 / span 2;
    grid-template: 1fr / 1fr 10fr;
    height: 4vh;
    font-size: 1.5vw;
    width: 100%;
  }

  .form-2__load-type-other-desc {
    font-size: 1.5vw;
    grid-area: 1 / 3 / span 1 / span 5;
    height: 4vh;
    padding: 0 0 0 3vw;
  }

  .other .form-2__load-type__list__item__desc {
    grid-area: 1 / 1 / span 1 / span 2;
  }

  .type-warning {
    transform: translateY(0.5vw);
  }

  .form-2__load-weight {
    grid-template: 4vh 5vh / 1fr;
    grid-area: 2/ 1 / span 1 / span 4;
    padding: 0 0 0 0vw;
    z-index: 1;
  }

  .weight-warning {
    transform: translateY(0.2vw);
  }

  .form-2__load-weight__info {
    font-size: 1.2vw;
    grid-area: 3 / 1 / span 1 / span 1;
    padding-left: 3vw;
    align-self: center;
  }

  .form-2__load-weight__info__symbol {
    grid-area: 3 / 1 / span 1 / span 1;
    border-radius: 50%;
    background: var(--thirdcolor);
    width: 2vw;
    height: 2vw;
    align-self: center;
    color: var(--fourthcolor);
    text-align: center;
    line-height: 2vw;
    font-size: 1.8vw;
  }

  .form-2__load-weight__title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-weight__select__default {
    height: 4vh;
    grid-template: 1fr / 3fr 1fr;
  }

  .form-2__load-weight__select__default h5 {
    padding: 0 0 0 3vw;
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-weight__select {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: 7vh auto/ 1fr;
    row-gap: 0.5vw;
    width: 100%;
    z-index: 1;
  }

  .weight-select li {
    padding: 0 0 0 3vw;
    height: 4vh;
  }

  .weight-select {
    grid-template: repeat(10, 1fr);
  }

  .arrow {
    height: 0.1vw;
    width: 0.1vw;
    border-width: 0 1.5px 1.5px 0;
    padding: 3px;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .collapse .weight-select {
    height: 30vh;
  }

  .form-2__load-car__select__input-item-2,
  .form-2__load-height__select__input-item-2 {
    grid-area: 2 / 1 / span 1 / span 1;
  }

  .form-2__load-car__select,
  .form-2__load-height__select {
    grid-template: 1fr 1fr / 2fr 4fr;
    grid-area: 2 / 1 / span 1 / span 1;
    height: 8vh;
    row-gap: 1vw;
  }

  .form-2__load-height {
    grid-template: 4vh 8vh / 1fr;
    grid-area: 2 / 5 / span 2 / span 4;
  }

  .form-2__load-car {
    grid-template: 4vh 8vh / 1fr;
    grid-area: 2 / 9 / span 2 / span 4;
  }

  .form-2__load-car__title,
  .form-2__load-height-title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-car input,
  .form-2__load-height input {
    height: 2.3vw;
    width: 2.3vw;
  }

  .editable h5 {
    padding: 0 0 0 5px;
  }

  .high-label.editable {
    background: var(--fourthcolor);
    display: grid;
    align-items: center;
    border-radius: 0px;
    border: 1px solid var(--fifthcolor);
    cursor: text;
    height: 5vw;
    width: 15vw;
  }

  .high-label h5 {
    height: 5vw;
    line-height: 5vw;
  }

  .height-pop {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    top: 60vh;
    left: 65vw;
    visibility: hidden;
    width: fit-content;
  }

  .form-2__load-car__select__input-item-1,
  .form-2__load-car__select__input-item-2,
  .form-2__load-height__select__input-item-1,
  .form-2__load-height__select__input-item-2 {
    grid-template: 2.3vw / 2.3vw;
    width: 2.3vw;
    height: 2.3vw;
    margin: 0.2vw 0;
  }

  .circle-radio {
    width: 1.7vw;
    height: 1.7vw;
  }

  #without-lift:checked ~ .circle-radio-1:after,
  #with-lift:checked ~ .circle-radio-2:after,
  #short:checked ~ .circle-radio-3:after,
  #high:checked ~ .circle-radio-4:after {
    width: 1.7vw;
    height: 1.7vw;
  }

  .with-lift-label {
    height: 5vw;
    align-self: center;
    text-align: center;
    line-height: 5vw;
  }

  .with-lift-label h5 {
    line-height: 5vw;
  }

  .form-2__comments {
    grid-template: 4vh 11vh / 1fr;
    grid-area: 3 / 1 / span 1 / span 12;
  }

  .form-2__comments textarea {
    height: 11vh;
    font-size: 1.5vw;
    padding: 3vh 0 0 3vw;
  }

  .form-2__contact-info {
    grid-template: 2.5vh 1.5vh 5vh auto 5vh auto 13vh/ 1fr 1fr;
    grid-area: 4 / 1 / span 1 / span 12;
    height: auto;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .send {
    grid-area: 6 / 1 / span 3 / span 15;
    height: 6vh !important;
    justify-self: stretch;
  }

  .contact__title {
    padding: 0;
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: start;
  }

  .send h4 {
    color: var(--maincolor);
  }

  .contact__title h4 {
    color: var(--secondcolor);
  }

  .form-2__contact-info input {
    padding: 0 0 0 3vw;
  }

  .form-2__contact-info__background {
    background: transparent;
  }

  .email {
    grid-area: 3 / 1 / span 1 / span 1;
  }

  .email2 {
    grid-area: 3 / 2 / span 1 / span 1;
  }

  .phone {
    grid-area: 5 / 1 / span 1 / span 1;
  }

  .warning {
    font-size: 1.5vw;
    transform: translateY(0.4vw);
  }

  .email-warning {
    grid-area: 4 / 1 / span 1 / span 1;
    position: static;
    transform: translate(0);
  }

  .phone-warning {
    grid-area: 6 / 1 / span 1 / span 1;
    position: static;
    transform: translate(0);
  }

  .pop {
    display: grid !important;
  }

  .form-2__progress-container__back-arrow {
    border: solid var(--thirdcolor);
    display: inline-block;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    cursor: pointer;
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: center;
    justify-self: start;
  }

  .form-2__progress-container__back {
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: center;
    color: var(--secondcolor);
    justify-self: start;
    text-align: end;
    cursor: pointer;
  }

  .form-2__progress-container {
    align-self: start;
    justify-self: center;
    display: grid;
    place-items: center;
    background: var(--eightcolor);
    width: 91.4vw;
    padding: 0 4.7vw;
    grid-area: 1 / 1 / span 2 / span 24;
    grid-template: 1fr / 1fr 4fr 10vw;
    height: 12vh;
  }

  .donkey-img-2 {
    grid-area: 1 / 3 / span 1 / span 1;
    height: 6vh;
    z-index: 1;
  }

  .donkey-img-2-circle {
    width: 4vh;
    height: 4vh;
    background: var(--thirdcolor);
    border-radius: 50%;
    grid-area: 1 / 3 / span 1 / span 1;
    transform: translateX(-10px);
  }

  .progress-line-1,
  .progress-line-2 {
    width: 100%;
    border-bottom: 2px solid var(--thirdcolor);
  }

  .circle-start,
  .circle-end {
    background: var(--thirdcolor);
    border-radius: 50%;
    border: 2px solid var(--thirdcolor);
  }

  .circle-end {
    background: transparent;
  }

  .circle-end:after {
    content: "";
    background: var(--thirdcolor);
    display: block;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    position: relative;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .form-2__progress-container__route__start {
    color: var(--secondcolor);
    justify-self: end;
    display: grid;
    text-align: end;
  }

  .form-2__progress-container__route__end {
    color: var(--secondcolor);
    justify-self: start;
    display: grid;
  }

  .form-2__progress-container__back-arrow {
    border-width: 0 3px 3px 0;
    padding: 3px;
    height: 0.5vh;
    width: 0.5vh;
  }

  .form-2__progress-container__back {
    padding: 0 0 0 6vw;
  }

  .progress-line-1 {
    height: 0.1px;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .progress-line-2 {
    height: 0.1px;
    grid-area: 1 / 4 / span 1 / span 1;
  }

  .circle-start,
  .circle-end {
    height: 1.2vh;
    width: 1.2vh;
  }

  .circle-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .circle-end {
    grid-area: 2 / 1 / span 1 / span 1;
  }

  .circle-end:after {
    width: 0.8vh;
    height: 0.8vh;
  }

  .form-2__progress-container__route__start {
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .form-2__progress-container__route__start-loc,
  .form-2__progress-container__route__end-loc {
    font-size: 2.5vw;
  }

  .form-2__progress-container__route__start__date,
  .form-2__progress-container__route__end__date {
    font-size: 2vw;
  }

  .form-2__progress-container__route__end {
    grid-area: 2 / 2 / span 1 / span 1;
  }

  .bottom-shape {
    display: none;
  }

  .form-2__progress-container__route {
    grid-area: 1 / 2 / span 1 / span 1;
    grid-template: 1fr 1fr / 1fr auto;
    width: auto;
    -moz-column-gap: 1vw;
    column-gap: 1vw;
    row-gap: 2vh;
    padding-right: 5vw;
  }

  .bottom-shape {
    grid-area: 23 / 1 / span 2 / span 24;
    height: 12vh;
  }

  /* 2.4.4. Confirmation */

  .form-2__confirmation-container__info {
    font-size: 2vw;
    width: 70vw;
    line-height: 5vw;
    top: 50vh;
  }

  .form-2__confirmation-container__info b {
    font-size: 3vw;
    line-height: 10vw;
    color: var(--secondcolor);
  }

  .form-2__confirmation-container__button {
    position: absolute;
    top: 83vh;
    left: 50%;
    width: 91.4vw;
    height: 6vh !important;
    transform: translate(-50%, 0%);
  }

  .form-2__confirmation-container__icon {
    width: 20vw;
    top: 30vh;
  }

  /* 2.4.5. About */

  .about {
    grid-area: 2 / 1 / span 1 / span 1;
    width: 100vw;
    display: grid;
    grid-template: auto auto / 1fr;
    height: auto;
    align-items: start;
    row-gap: 10vh;
    padding: 0vh 0 0 0;
  }

  .about__process {
    width: 88vw;
    padding: 5vh 6vw 0vh 6vw;
    grid-template: auto 5fr / 1fr 1fr 1fr;
    row-gap: 5vh;
    grid-area: 1 / 1 / span 1 / span 1;
    position: static;
    place-items: center;
    display: grid;
    background: transparent;
    z-index: 1;
  }

  .about__process-background {
    width: 100vw;
    grid-area: 1 / 1 / span 1 / span 3;
    background: var(--secondcolor);
    height: 450%;
    align-self: start;
    position: relative;
    top: -80%;
  }

  .about__check {
    padding: 0vw 6vw 10vh 6vw;
    height: 80vh;
    grid-template: auto auto / 1fr 1fr;
    display: grid;
    row-gap: 10vh;
    width: 88vw;
  }

  .about__check-list {
    grid-area: 2 / 2 / span 1 / span 1;
    width: 40vw;
    background: var(--seventhcolor);
    padding: 3vw;
    height: 50vh;
    display: grid;
    border-top: 10px solid var(--thirdcolor);
    justify-self: end;
  }

  .about__check-list-item-title {
    font-size: 2.2vw !important;
    }

  .about__check-list li {
    display: grid;
    grid-template: 1fr / 4vw auto;
    font-size: 2vw;
  }

  .about__check-description {
    grid-area: 2 / 1 / span 1 / span 1;
    width: 35vw;
    padding-left: 0vw;
    padding-top: 1vh;
    font-size: 2vw;
  }

  .about__check-title {
    grid-template: 5vw auto / 10vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .about__process-title {
    grid-template: 5vw auto / 10vw 1fr;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
    z-index: 2;
    width: 100%;
  }

  .about__process-title-line,
  .about__check-title-line {
    height: 5px;
    width: 10vw;
  }

  .about__process-title h2,
  .about__check-title h2 {
    font-size: 2vw;
    width: 100%;
  }

  .contact__title h2 {
    font-size: 2vw;
    width: 100%;
  }

  .about__company-description__company-desc-title {
    grid-template: 1fr / 10vw 1fr;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
  }

  .about__company-description__company-desc-title__line,
  .contact__title__line {
    grid-area: 1 / 1 / span 1 / span 1;
    height: 5px;
    width: 10vw;
    background: var(--thirdcolor);
  }

  .about__process-title h3,
  .about__company-description__company-desc-title h3,
  .contact__title h3,
  .about__check-title h3 {
    font-size: 3vw;
    line-height: 5vw;
  }

  .about__process-list {
    grid-area: 2 / 1 / span 1 / span 3;
    grid-template: 1fr / repeat(3, 1fr);
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    justify-self: flex-start;
  }

  .about__process-list__item {
    width: 27vw;
    grid-template: 1fr 1fr / 1fr;
    box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
    border-bottom: 10px solid var(--thirdcolor);
    height: 90%;
  }

  .about__process-list__item__img {
    grid-area: 1 / 1 / span 1 / span 1;
    padding: 4vw;
  }

  .about__process-list__item__process-no {
    width: 4vw;
    height: 5vw;
    line-height: 5vw;
    font-size: 2vw;
    margin-left: 1vw;
    top: -5%;
  }

  .about__process-list__item__process-desc {
    padding: 0 1vw 3vh 2vw;
  }

  .about__process-list__item__process-desc h4 {
    font-size: 2vw;
  }

  .about__process-list__item__img__circle {
    width: 9vw;
    height: 9vw;
    border: 3px solid var(--thirdcolor);
  }

  .about__company-description {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: auto auto auto / 1fr;
    padding: 0vw 6vw 0vh 6vw;
    row-gap: 3vh;
    position: static;
  }

  .about__company-description__company-desc-short {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: auto auto / 1fr 10fr;
    padding: 0vw 5vw 0vw 0vw;
    row-gap: 5vh;
  }

  .about__company-description__company-desc-short__img {
    grid-area: 2 / 1 / span 1 / span 1;
    top: 43vw;
    left: 0vw;
  }

  .about__company-description__company-desc-short__img img {
    width: 23vw;
    border-top: 10px solid var(--thirdcolor);
  }

  .about__company-description__company-desc-short-text {
    display: grid;
    padding: 2vh 5vw 0vw 0vw;
    grid-template: auto auto / 1fr;
    grid-area: 1 / 1 / span 1 / span 2;
    position: relative;
    left: 10vw;
  }

  .about__company-description__company-desc-short-text-emphasized {
    grid-area: 2 / 2 / span 1 / span 1;
    width: 84%;
    justify-self: end;
    padding-top: 8vh;
  }

  .about__company-description__company-desc-short-text-emphasized h3 {
    font-size: 2.5vw;
  }

  .about__company-description__company-desc-short-text h3 {
    font-size: 2vw;
  }

  .about__company-description__company-desc-long {
    grid-template: auto auto/ 1fr;
    grid-area: 3 / 1 / span 1 / span 1;
    padding-top: 2vh;
    align-items: start;
    row-gap: 3vh;
  }

  .about__company-description__company-desc-long__item h4 {
    font-size: 2vw;
  }

  .contact {
    width: 88vw;
    padding: 10vh 6vw;
    display: grid;
    grid-template: auto auto / 1fr;
    row-gap: 5vh;
    grid-area: 3 / 1 / span 1 / span 1;
    position: static;
  }

  .contact__title {
    grid-area: 1 / 1 / span 1 / span 3;
    grid-template: 5vw auto / 10vw 1fr;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
    width: 100%;
  }

  .contact__details {
    left: 20vw;
    height: 10vh;
    align-items: center;
    grid-area: 2 / 1 / span 1 / span 1;
    padding-left: 15vw;
    position: static;
  }

  .contact__details > * {
    display: grid;
    grid-template: 1fr / 6vw 1fr;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
    align-items: center;
  }

  .contact__details__mail,
  .contact__details__phone {
    font-size: 2vw;
  }

  #mail, #phone {
    max-width: 50px;
  }

  footer {
    height: 8vh;
    position: absolute;
    bottom: 0vh;
    width: 100vw;
    background: var(--secondcolor);
  }
}

/* 2.5. Mobile landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 992px) and (orientation: landscape) {
  /* 2.5.1. Shared */

  h3,
  h4,
  h2 {
    font-size: 2vw;
  }

  h1 {
    font-size: 3vw;
  }

  h5 {
    font-size: 1.5vw;
  }

  .home {
    grid-template: repeat(24, 1fr) / repeat(24, 1fr);
    grid-area: 1 / 1 / span 1 / span 1;
    position: static;
  }

  /* 2.5.2. First form */

  .main-container {
    display: grid;
    grid-template: repeat(3, auto) 3vh / 1fr;
    row-gap: 5vh;
  }

  .home__title {
    grid-area: 4 / 2 / span 3 / span 22;
    grid-template: auto 2fr / 1fr;
    row-gap: 0.5vw;
    z-index: 3;
  }

  .donkey-img {
    position: absolute;
    width: 20vh;
    height: auto;
    right: 11vw;
    top: 34vh;
    transform: translate(0, -100%);
  }

  .form {
    grid-area: 10 / 2 / span 22 / span 22;
    grid-template: repeat(13, 1fr) 1fr / repeat(6, 1fr);
    border: none;
  }

  input {
    height: 10vh;
    font-size: 1.5vw;
  }

  .form__area {
    grid-area: 1 / 1 / span 13 / span 6;
    grid-template: 7vh 6vh 10vh 3vh 7vh 6vh 10vh / repeat(3, 1fr) 14vw 1fr 0.5fr 0.5fr;
    -moz-column-gap: 1vw;
    column-gap: 1vw;
  }

  .form__area__title {
    grid-area: 1 / 1 / span 1 / span 6;
  }

  .form__area__unload-title {
    grid-area: 5 / 1 / span 1 / span 6;
  }

  .form__area__title.place {
    grid-area: 2 / 1 / span 1 / span 3;
  }

  .form__area__unload-title.place {
    grid-area: 6 / 1 / span 1 / span 3;
  }

  .form__area__title.date {
    grid-area: 2 / 4 / span 1 / span 1;
  }

  .form__area__unload-title.date {
    grid-area: 6 / 4 / span 1 / span 1;
  }

  .form__area__title.time {
    grid-area: 2 / 5 / span 1 / span 3;
  }

  .form__area__unload-title.time {
    grid-area: 6 / 5 / span 1 / span 3;
  }

  .form__area__load-loc {
    grid-area: 3 / 1 / span 1 / span 3;
    height: 10vh;
  }

  .form__area__unload-loc {
    grid-area: 7 / 1 / span 1 / span 3;
    height: 10vh;
  }

  #map {
    left: 50%;
    transform: translate(-50%, 0);
    width: 100vw;
    grid-area: 1 / 1 / span 7 / span 24;
    z-index: 1;
    opacity: 0.5;
  }

  .form-background {
    background: transparent;
    z-index: 2;
    width: 180%;
    grid-area: 8 / 1 / span 1 / span 24;
    border-top: 5px solid var(--secondcolor);
  }

  .form-background-2 {
    display: none;
  }

  .suggestions {
    font-size: 1.2vw !important;
  }

  .form__area__load-date {
    grid-area: 3 / 4 / span 1 / span 1;
    font-size: 1.5vw;
  }

  .form__area__unload-date {
    grid-area: 7 / 4 / span 1 / span 1;
    font-size: 1.5vw;
  }

  .datepicker {
    border-radius: 0;
    padding: 0 0 1vw 0;
  }

  .datepicker .table-condensed {
    width: 100%;
  }

  .datepicker-dropdown,
  .datepicker-days {
    height: 30vh;
    width: 25vh;
    padding: 0;
  }

  .datepicker tbody tr {
    height: 3.6vh;
  }

  .day {
    font-size: 2vw;
    height: 3.2vh !important;
    width: 1.7vw;
  }

  .prev,
  .next,
  .datepicker-switch {
    height: 4vh !important;
  }

  .datepicker-switch:hover {
    border-radius: 0;
  }

  .day:hover,
  .month:hover,
  .year:hover,
  .decade:hover,
  .century:hover,
  .day.focused,
  .month.focused,
  .year.focused,
  .decade.focused,
  .century.focused {
    border-radius: 0;
    background: var(--fifthcolor);
  }

  .dow {
    color: var(--secondcolor);
    font-weight: 400;
    background: var(--maincolor);
    border-top: 1px solid var(--seventhcolor) !important;
    font-size: 1.7vw;
  }

  .datepicker-days {
    border-bottom: 1px solid var(--fifthcolor);
  }

  .datepicker td,
  .datepicker th {
    border-radius: 0;
  }

  .form__area__load-time {
    grid-area: 3 / 5 / span 1 / span 3;
    height: 10vh;
    grid-template: 1fr / 1fr 0.3fr 1fr;
  }

  .form__area__unload-time {
    grid-area: 7 / 5 / span 1 / span 3;
    font-size: 1.5vw;
    height: 10vh;
    z-index: 0;
    grid-template: 1fr / 1fr 0.3fr 1fr;
  }

  .form__area__unload-time-start,
  .form__area__load-time-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form__area__unload-time-end,
  .form__area__load-time-end {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .form__area__load-time input,
  .form__area__unload-time input {
    font-size: 1.5vw;
  }

  .dash {
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .form__area__dropdown-select__default {
    height: 10vh;
    grid-template: 1fr / 3fr 1fr;
    padding-right: 5%;
    width: 95%;
  }

  .form__area__dropdown-select__default h5 {
    padding: 0 0 0 4vw;
    grid-area: 1 / 1 / span 1 / span 1;
    font-size: 1.5vw;
  }

  .form__area__dropdown-select {
    grid-template: 10vh auto/ 1fr;
    row-gap: 0.1vw;
    width: 100%;
    height: 10vh;
  }

  .form__area__load-time-end,
  .form__area__unload-time-end {
    grid-area: 1 / 3 / span 1 / span 1;
  }

  .form__area__load-time-start,
  .form__area__unload-time-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form__area__dropdown-select .arrow {
    padding: 2px;
  }

  .dropdown-select li {
    padding: 0 0 0 4vw;
    height: 10vh;
  }

  .dropdown-select li h5 {
    font-size: 1.5vw;
  }

  .dropdown-select {
    grid-template: repeat(48, 1fr);
    width: 100%;
    z-index: 1;
  }

  .collapse .dropdown-select {
    height: 40vh;
  }

  .collapse {
    display: grid !important;
  }

  .circle-unload {
    grid-area: 7 / 7 / span 1 / span 1;
    height: 1.2vh;
    width: 1.2vh;
    transform: translate(0.6vw, 0);
    display: none;
  }

  .circle-unload:after {
    width: 0.8vh;
    height: 0.8vh;
  }

  .line-dashed {
    grid-area: 3 / 7 / span 5 / span 1;
    width: 3px;
    height: 10vh;
    transform: translateX(calc(1.5px + 0.6vw));
    display: none;
  }

  .circle-load {
    grid-area: 3 / 7 / span 1 / span 1;
    height: 1.2vh;
    width: 1.2vh;
    transform: translate(0.6vw, 0);
    display: none;
  }

  button.next {
    grid-area: 12 / 1 / span 2 / span 6;
    margin: 0;
    height: 10vh !important;
  }

  /* 2.5.3. Second form */

  .form-2 {
    grid-area: 6 / 2 / span 34 / span 22;
    grid-template: 74vh 30vh 1fr 1fr auto / repeat(6, 1fr) 1fr repeat(5, 1fr);
    row-gap: 5vh;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
  }

  .page-container {
    height: auto;
  }

  .form-2-container {
    grid-template: 0.3fr repeat(40, 1fr) / repeat(24, 1fr);
    height: 240vh;
    background: var(--maincolor);
  }

  .form-2__load-type {
    grid-area: 1 / 1 / span 7 / span 12;
    grid-template: 10vh 50vh / 1fr;
  }

  .form-2__load-type__title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-type__list {
    grid-template: repeat(5, 10vh) / 1fr;
    row-gap: 2.5vh;
  }

  .form-2__load-type__list__item {
    grid-template: 1fr / repeat(5, 1fr) 0.5fr 1fr;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .form-2__load-type__list__item__desc {
    grid-area: 1 / 1 / span 1 / span 5;
    grid-template: 1fr / 10vh 10fr;
    height: 10vh;
  }

  .form-2__load-type__list__item__desc__checkbox {
    height: 10vh;
  }

  .form-2__load-type__list__item__desc__checkbox
    input:checked
    ~ .checkmark:after {
    display: block;
    -webkit-animation: scaleCheckbox-mobile 0.05s linear forwards;
    animation: scaleCheckbox-mobile 0.05s linear forwards;
  }

  @-webkit-keyframes scaleCheckbox-mobile {
    to {
      transform: rotate(45deg) translate(0, 0) scale(1);
    }
  }

  @keyframes scaleCheckbox-mobile {
    to {
      transform: rotate(45deg) translate(0, 0) scale(1);
    }
  }

  .type-warning {
    transform: translateY(0.5vw);
  }

  .weight-warning {
    transform: translateY(0.2vw);
  }

  .form-2__load-type__list__item__desc__checkbox input {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-type__list__item__desc h5 {
    grid-area: 1 / 2 / span 1 / span 2;
  }

  .checkmark {
    height: 2vw;
    width: 2vw;
  }

  .form-2__load-type__list__item__desc__checkbox .checkmark:after {
    width: 0.4vw;
    height: 1.2vw;
    border: solid var(--thirdcolor);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(0, 0) scale(0);
  }

  .form-2__load-type__list__item__times {
    grid-area: 1 / 6 / span 1 / span 1;
  }

  .form-2__load-type__list__item-q {
    grid-area: 1 / 7 / span 1 / span 2;
    grid-template: 1fr / 1fr 10fr;
    height: 10vh;
    font-size: 1.5vw;
    width: 100%;
  }

  .form-2__load-type-other-desc {
    font-size: 1.5vw;
    grid-area: 1 / 3 / span 1 / span 5;
    height: 10vh;
    padding: 0 0 0 3vw;
  }

  .other .form-2__load-type__list__item__desc {
    grid-area: 1 / 1 / span 1 / span 2;
  }

  .form-2__load-weight {
    grid-template: 10vh 9vh / 1fr;
    grid-area: 2/ 1 / span 1 / span 4;
    padding: 0 0 0 0vw;
    z-index: 1;
  }

  .form-2__load-weight__info {
    font-size: 1.2vw;
    grid-area: 3 / 1 / span 1 / span 1;
    padding-left: 3vw;
  }

  .form-2__load-weight__info__symbol {
    grid-area: 3 / 1 / span 1 / span 1;
    border-radius: 50%;
    background: var(--thirdcolor);
    width: 2vw;
    height: 2vw;
    align-self: center;
    color: var(--fourthcolor);
    text-align: center;
    line-height: 2vw;
    font-size: 1.8vw;
  }

  .form-2__load-weight__title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-weight__select__default {
    height: 10vh;
    grid-template: 1fr / 3fr 1fr;
  }

  .form-2__load-weight__select__default h5 {
    padding: 0 0 0 3vw;
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-weight__select {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: 7vh auto/ 1fr;
    row-gap: 0.5vw;
    width: 100%;
    z-index: 1;
  }

  .weight-select li {
    padding: 0 0 0 3vw;
    height: 10vh;
  }

  .weight-select {
    grid-template: repeat(10, 1fr);
  }

  .arrow {
    height: 0.1vw;
    width: 0.1vw;
    border-width: 0 1.5px 1.5px 0;
    padding: 3px;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .collapse .weight-select {
    height: 30vh;
  }

  .form-2__load-car__select,
  .form-2__load-height__select {
    grid-template: 1fr 1fr / 2fr 4fr;
    grid-area: 2 / 1 / span 1 / span 1;
    height: 18vh;
    row-gap: 1vw;
  }

  .form-2__load-car__select__input-item-2,
  .form-2__load-height__select__input-item-2 {
    grid-area: 2 / 1 / span 1 / span 1;
  }

  .form-2__load-height {
    grid-template: 10vh 10vh / 1fr;
    grid-area: 2 / 5 / span 2 / span 4;
  }

  .form-2__load-car {
    grid-template: 10vh 10vh / 1fr;
    grid-area: 2 / 9 / span 2 / span 4;
  }

  .form-2__load-car__title,
  .form-2__load-height-title {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .form-2__load-car input,
  .form-2__load-height input {
    height: 2.3vw;
    width: 2.3vw;
  }

  .form-2__load-car__select__input-item-1,
  .form-2__load-car__select__input-item-2,
  .form-2__load-height__select__input-item-1,
  .form-2__load-height__select__input-item-2 {
    grid-template: 2.3vw / 2.3vw;
    width: 2.3vw;
    height: 2.3vw;
    margin: 0.2vw 0;
  }

  .high-label.editable {
    background: var(--fourthcolor);
    display: grid;
    align-items: center;
    border-radius: 0px;
    border: 1px solid var(--fifthcolor);
    cursor: text;
    height: 5vw;
    width: 15vw;
  }

  .editable h5 {
    padding: 0 0 0 5px;
  }

  .high-label h5 {
    height: 5vw;
    line-height: 5vw;
  }

  .height-pop {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    top: 60vh;
    left: 65vw;
    visibility: hidden;
    width: fit-content;
  }

  .circle-radio {
    width: 1.7vw;
    height: 1.7vw;
  }

  #without-lift:checked ~ .circle-radio-1:after,
  #with-lift:checked ~ .circle-radio-2:after,
  #short:checked ~ .circle-radio-3:after,
  #high:checked ~ .circle-radio-4:after {
    width: 1.7vw;
    height: 1.7vw;
  }

  .with-lift-label {
    height: 5vw;
    align-self: center;
    text-align: center;
    line-height: 5vw;
  }

  .with-lift-label h5 {
    line-height: 5vw;
  }

  .form-2__comments {
    grid-template: 10vh 13vh / 1fr;
    grid-area: 3 / 1 / span 1 / span 12;
  }

  .form-2__comments textarea {
    height: calc(13vh - 3vw);
    font-size: 1.5vw;
    padding: 3vw 0 0 3vw;
  }

  .form-2__contact-info {
    grid-template: 2.5vh 6.5vh 13vh auto 13vh auto 21vh / 1fr 1fr;
    grid-area: 4 / 1 / span 1 / span 12;
    height: auto;
    -moz-column-gap: 2vw;
    column-gap: 2vw;
  }

  .email-warning,
  .phone-warning {
    position: static;
    transform: translate(0) !important;
  }

  .email-warning {
    grid-area: 4 / 1 / span 1 / span 1;
  }

  .phone-warning {
    grid-area: 6 / 1 / span 1 / span 1;
  }

  .send {
    grid-area: 7 / 1 / span 3 / span 15;
    height: 10vh !important;
    justify-self: stretch;
  }

  .contact__title {
    padding: 0;
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: start;
  }

  .send h4 {
    color: var(--maincolor);
  }

  .contact__title h4 {
    color: var(--secondcolor);
  }

  .form-2__contact-info input {
    padding: 0 0 0 3vw;
  }

  .form-2__contact-info__background {
    background: transparent;
  }

  .email {
    grid-area: 3 / 1 / span 1 / span 1;
  }

  .email2 {
    grid-area: 3 / 2 / span 1 / span 1;
  }

  .phone {
    grid-area: 5 / 1 / span 1 / span 1;
  }

  .warning {
    font-size: 1.5vw;
    transform: translateY(0.4vw);
  }

  .pop {
    display: grid !important;
  }

  .form-2__progress-container__back-arrow {
    border: solid var(--thirdcolor);
    display: inline-block;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    cursor: pointer;
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: center;
    justify-self: start;
  }

  .form-2__progress-container__back {
    grid-area: 1 / 1 / span 1 / span 1;
    align-self: center;
    color: var(--secondcolor);
    justify-self: start;
    text-align: end;
    cursor: pointer;
  }

  .form-2__progress-container {
    align-self: start;
    justify-self: center;
    display: grid;
    place-items: center;
    background: var(--eightcolor);
    width: 91.4vw;
    padding: 0 4.7vw;
    grid-area: 1 / 1 / span 2 / span 24;
    grid-template: 1fr / 1fr 4fr 5vw;
    height: 16vh;
  }

  .donkey-img-2 {
    grid-area: 1 / 3 / span 1 / span 1;
    height: 6vh;
    z-index: 1;
  }

  .donkey-img-2-circle {
    width: 4vh;
    height: 4vh;
    background: var(--thirdcolor);
    border-radius: 50%;
    grid-area: 1 / 3 / span 1 / span 1;
    transform: translateX(-10px);
  }

  .progress-line-1,
  .progress-line-2 {
    width: 100%;
    border-bottom: 2px solid var(--thirdcolor);
  }

  .circle-start,
  .circle-end {
    background: var(--thirdcolor);
    border-radius: 50%;
    border: 2px solid var(--thirdcolor);
  }

  .circle-end {
    background: transparent;
  }

  .circle-end:after {
    content: "";
    background: var(--thirdcolor);
    display: block;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    position: relative;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .form-2__progress-container__route__start {
    color: var(--secondcolor);
    justify-self: end;
    display: grid;
    text-align: end;
  }

  .form-2__progress-container__route__end {
    color: var(--secondcolor);
    justify-self: start;
    display: grid;
  }

  .form-2__progress-container__back-arrow {
    border-width: 0 3px 3px 0;
    padding: 3px;
    height: 0.5vh;
    width: 0.5vh;
  }

  .form-2__progress-container__back {
    padding: 0 0 0 6vw;
  }

  .progress-line-1 {
    height: 0.1px;
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .progress-line-2 {
    height: 0.1px;
    grid-area: 1 / 4 / span 1 / span 1;
  }

  .circle-start,
  .circle-end {
    height: 1.2vh;
    width: 1.2vh;
  }

  .circle-start {
    grid-area: 1 / 1 / span 1 / span 1;
  }

  .circle-end {
    grid-area: 2 / 1 / span 1 / span 1;
  }

  .circle-end:after {
    width: 0.8vh;
    height: 0.8vh;
  }

  .form-2__progress-container__route__start {
    grid-area: 1 / 2 / span 1 / span 1;
  }

  .form-2__progress-container__route__start-loc,
  .form-2__progress-container__route__end-loc {
    font-size: 2.5vw;
  }

  .form-2__progress-container__route__start__date,
  .form-2__progress-container__route__end__date {
    font-size: 2vw;
  }

  .form-2__progress-container__route__end {
    grid-area: 2 / 2 / span 1 / span 1;
  }

  .bottom-shape {
    display: none;
  }

  .form-2__progress-container__route {
    grid-area: 1 / 2 / span 1 / span 1;
    grid-template: 1fr 1fr / 1fr auto;
    width: 70%;
    -moz-column-gap: 1vw;
    column-gap: 1vw;
    row-gap: 3vh;
  }

  .bottom-shape {
    grid-area: 23 / 1 / span 2 / span 24;
    height: 12vh;
  }

  /* 2.5.4. Confirmation */

  .form-2__confirmation-container__info {
    font-size: 2vw;
    width: 70vw;
    line-height: 5vw;
    top: 55vh;
  }

  .form-2__confirmation-container__info b {
    font-size: 3vw;
    line-height: 10vw;
    color: var(--secondcolor);
  }

  .form-2__confirmation-container__button {
    position: absolute;
    top: 83vh;
    left: 50%;
    width: 91.4vw;
    height: 10vh !important;
    transform: translate(-50%, 0%);
  }

  .form-2__confirmation-container__icon {
    width: 20vw;
    top: 30vh;
  }

  /* 2.5.5. About */

  .about__process {
    width: 88vw;
    padding: 0 6vw 0vh 6vw;
    grid-template: auto 5fr / 1fr 1fr 1fr;
    row-gap: 5vh;
    grid-area: 1 / 1 / span 1 / span 1;
    position: static;
    place-items: center;
    display: grid;
    background: transparent;
    z-index: 1;
  }

  .about__process-background {
    width: 100vw;
    grid-area: 1 / 1 / span 1 / span 3;
    background: var(--secondcolor);
    height: 225%;
    align-self: start;
    position: relative;
    top: 0%;
  }

  .about__process-title {
    grid-template: 1fr 0.5fr / 10vw 1fr;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
    z-index: 2;
    width: 100%;
    padding-top: 5vh;
  }

  .about__process-title-line {
    height: 5px;
    width: 10vw;
  }

  .about__process-title h2 {
    font-size: 2vw;
    width: 100%;
  }

  .contact__title h2 {
    font-size: 2vw;
    width: 100%;
  }

  .about__company-description__company-desc-title {
    grid-template: 1fr / 10vw 1fr;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
  }

  .about__company-description__company-desc-title__line,
  .contact__title__line {
    grid-area: 1 / 1 / span 1 / span 1;
    height: 5px;
    width: 10vw;
    background: var(--thirdcolor);
  }

  .about__process-title h3,
  .about__company-description__company-desc-title h3,
  .contact__title h3 {
    font-size: 3vw;
    line-height: 5vw;
  }

  .about__process-list {
    grid-area: 2 / 1 / span 1 / span 3;
    grid-template: 1fr / repeat(3, 1fr);
    -moz-column-gap: 2vw;
    column-gap: 2vw;
    justify-self: flex-start;
    width: fit-content;
  }

  .about__process-list__item {
    width: 27vw;
    grid-template: 1fr 1fr / 1fr;
    box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
    border-bottom: 10px solid var(--thirdcolor);
    height: 90%;
  }

  .about__process-list__item__img {
    grid-area: 1 / 1 / span 1 / span 1;
    padding: 4vw;
  }

  .about__process-list__item__process-no {
    width: 4vw;
    height: 5vw;
    line-height: 5vw;
    font-size: 2vw;
    margin-left: 1vw;
    top: -5%;
  }

  .about__process-list__item__process-desc {
    padding: 0 1vw 3vh 2vw;
  }

  .about__process-list__item__process-desc h4 {
    font-size: 2vw;
  }

  .about__process-list__item__img__circle {
    width: 9vw;
    height: 9vw;
    border: 3px solid var(--thirdcolor);
  }

  .about {
    grid-area: 2 / 1 / span 1 / span 1;
    width: 100vw;
    display: grid;
    grid-template: auto auto / 1fr;
    height: auto;
    align-items: start;
    row-gap: 10vh;
    padding: 0vh 0 0 0;
  }

  .about__check {
    padding: 0vw 6vw 10vh 6vw;
    height: 150vh;
    grid-template: auto auto auto/ 1fr;
    display: grid;
    row-gap: 5vh;
    width: 88vw;
  }

  .about__check-list {
    grid-area: 3 / 1 / span 1 / span 1;
    width: 94%;
    background: var(--seventhcolor);
    padding: 3vw;
    height: 50vh;
    display: grid;
    border-top: 10px solid var(--thirdcolor);
    justify-self: center;
  }

  .about__check-list-item-title {
    font-size: 2.2vw !important;
    }

  .about__check-list li {
    display: grid;
    grid-template: 1fr / 4vw auto;
  }

  .about__check-description {
    grid-area: 2 / 1 / span 1 / span 1;
    width: 88vw;
    padding-left: 0vw;
    padding-top: 1vh;
  }

  .about__check-title {
    grid-template: 1fr 3fr / 10vw 1fr;
    -moz-column-gap: 2vw;
    column-gap: 5vw;
  }

  .about__company-description {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: auto auto auto / 1fr;
    padding: 0vw 6vw 0vh 6vw;
    row-gap: 3vh;
    position: static;
  }

  .about__company-description__company-desc-short {
    grid-area: 2 / 1 / span 1 / span 1;
    grid-template: auto auto / 1fr 10fr;
    padding: 0vw 5vw 0vw 0vw;
    row-gap: 5vh;
  }

  .about__company-description__company-desc-short__img {
    grid-area: 2 / 1 / span 1 / span 1;
    top: 43vw;
    left: 0vw;
  }

  .about__company-description__company-desc-short__img img {
    width: 23vw;
    border-top: 10px solid var(--thirdcolor);
  }

  .about__company-description__company-desc-short-text {
    display: grid;
    padding: 2vh 5vw 0vw 0vw;
    grid-template: auto auto / 1fr;
    grid-area: 1 / 1 / span 1 / span 2;
    position: relative;
    left: 10vw;
  }

  .about__company-description__company-desc-short-text-emphasized {
    grid-area: 2 / 2 / span 1 / span 1;
    width: 84%;
    justify-self: end;
    padding-top: 8vh;
  }

  .about__company-description__company-desc-short-text-emphasized h3 {
    font-size: 2.5vw;
  }

  .about__company-description__company-desc-short-text h3 {
    font-size: 2vw;
  }

  .about__company-description__company-desc-long {
    grid-template: auto auto/ 1fr;
    grid-area: 3 / 1 / span 1 / span 1;
    padding-top: 2vh;
    align-items: start;
    row-gap: 3vh;
  }

  .about__company-description__company-desc-long__item h4,
  .about__check-description,
  .about__check-list li {
    font-size: 2vw;
  }

  .contact {
    width: 88vw;
    padding: 13vh 6vw;
    display: grid;
    grid-template: auto auto / 1fr;
    row-gap: 5vh;
    grid-area: 3 / 1 / span 1 / span 1;
    position: static;
  }

  .contact__title {
    grid-area: 1 / 1 / span 1 / span 3;
    grid-template: 1fr 0.5fr / 10vw 1fr;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
    width: 100%;
  }

  .contact__details {
    left: 20vw;
    height: 20vh;
    align-items: center;
    grid-area: 2 / 1 / span 1 / span 1;
    padding-left: 15vw;
    position: static;
  }

  .contact__details > * {
    display: grid;
    grid-template: 1fr / 6vw 1fr;
    -moz-column-gap: 5vw;
    column-gap: 5vw;
    align-items: center;
  }

  .contact__details__mail,
  .contact__details__phone {
    font-size: 2vw;
  }

  footer {
    height: 8vh;
    position: absolute;
    bottom: 0vh;
    width: 100vw;
    background: var(--secondcolor);
  }


  #mail, #phone {
    max-width: 50px;
  }

}