body {
  background: url("/pics/img/contacts/bg.webp") repeat center center;
}

.contacts-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contacts-page__submit {
  max-width: 500px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.contacts-page__top {
  padding: 20px;
  position: relative;
  text-align: center;
}

.contacts-page__top h1 {
  letter-spacing: 0.1em;
  margin-bottom: 30px;
  font-weight: 400;
}

.contacts-page__top h1,
.contacts-page__top .bold {
  font-size: 21px;
}

.contacts-page__top h1,
.contacts-page__top h2,
.contacts-page__top span {
  color: #706C6C;
}

.contacts-page__top h2,
.contacts-page__top span {
  font-family: Helvetica, helvetica-w01-roman, helvetica-w02-roman, helvetica-lt-w10-roman, sans-serif;
  font-size: 15px;
}

.contacts-page__top h2 {
  margin-bottom: 5px;
}

.contacts-page__top .bold {
  color: #404041;
  font-weight: 600;
}

.contacts-page__how-to-contact {
  margin-bottom: 20px;
}

.contacts-page__email {
  display: block;
  margin-bottom: 30px;
}

.contacts-page__social {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contacts-page__social a {
  margin-right: 10px;
}

.contacts-page__social a:last-of-type {
  margin-right: 0;
}

.contacts-page__social a img {
  width: 19px;
  height: 19px;
}

.contacts-page__google-maps {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-100%, -50%);
  padding-right: 40px;
}

.contacts-page__google-maps iframe {
  width: 240px;
  height: 160px;
}

.contacts-page__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 20px;
  width: 100%;
}

.contacts-page__bottom form {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.contacts-page__bottom input,
.contacts-page__bottom textarea {
  width: 100%;
  max-width: 500px;
  display: block;
  margin-bottom: 5px;
  font-size: 15px;
  background-color: #eff0e1;
  border: 1px solid #404041;
  outline: none;
  padding: 5px;
  color: #404041;
  font-family: helvetica-w01-roman, helvetica-w02-roman, helvetica-lt-w10-roman, sans-serif;
}

.contacts-page__bottom textarea {
  resize: none;
  height: 130px;
}

.contacts-page__bottom button {
  border: none;
  color: #404041;
  background-color: #a2aa9c;
  cursor: pointer;
  font-size: 15px;
  padding: 5px;
  font-family: georgia, palatino, "book antiqua", "palatino linotype", serif;
}

.contacts-page__bottom button:focus {
  outline: none;
}

@media (max-width: 960px) {
  .contacts-page h1 {
    margin-bottom: 0;
  }

  .contacts-page__google-maps {
    position: relative;
    transform: none;
    padding: 20px 0;
  }

  .contacts-page__bottom {
    padding: 0 20px;
  }
}