@import url("https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@300;400;500;700;800&display=swap");
@import './normalize.css';
body {
  position: relative;
  height: 100%;
}

html {
  font-size: 18px;
  height: 100%;
}
@media screen and (max-width: 768px) {
  html {
    font-size: 17px;
  }
}
@media screen and (max-width: 480px) {
  html {
    font-size: 16px;
  }
}

* {
  padding: 0;
  margin: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrapper__content {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  -webkit-transition: -webkit-transform 0.7s;
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
  will-change: transform;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.container {
  width: 95%;
  max-width: 940px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
}
.container--header {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .container--hello {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 665px;
  }
}
.container--footer {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 480px) {
  .container--footer {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

body {
  font-family: "Alegreya Sans";
}

.logo__icon {
  width: 3.0555555556rem;
  height: 2.2222222222rem;
}

.title {
  text-align: center;
  font-style: normal;
  font-weight: 700;
  font-size: 2.6666666667rem;
  line-height: 3.2222222222rem;
  text-transform: uppercase;
}
.title--light {
  color: white;
}
.title--first {
  text-align: start;
  padding-right: 48%;
}
@media screen and (max-width: 768px) {
  .title--first {
    text-align: center;
    padding: 0;
  }
}
@media screen and (max-width: 480px) {
  .title--first {
    text-align: center;
    padding: 0;
  }
}

h4 {
  font-style: normal;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.7777777778rem;
}

.button {
  font-style: normal;
  font-weight: 800;
  font-size: 0.8888888889rem;
  line-height: 1rem;
  text-transform: uppercase;
  color: black;
  padding: 1.1666666667rem 2.2777777778rem;
  background-color: #FEDB3F;
  border-radius: 5.5555555556rem;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}
.button:hover {
  background-color: rgb(69, 62, 62);
  color: white;
}
.button--reset {
  background: transparent;
  text-transform: capitalize;
  color: white;
  padding: 0;
  border-radius: 0;
}
.button--reset:hover {
  background: transparent;
  color: white;
}

input[type=submit], input[type=reset] {
  border: none;
}

.hello {
  background-image: url("../img/hello/backgr.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
@media screen and (max-width: 768px) {
  .hello {
    background-image: none;
  }
}
.hello__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100vh;
}
@media screen and (max-width: 768px) {
  .hello__content {
    text-align: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    background-image: url("../img/hello/backgr__tablets.jpg");
    background-repeat: no-repeat;
    background-position: center center;
  }
}
.hello__title {
  color: white;
}
.hello__subtitle {
  font-style: normal;
  font-weight: 400;
  font-size: 1.1666666667rem;
  line-height: 1.3888888889rem;
  color: white;
  margin-top: 0.9444444444rem;
  margin-bottom: 3.3333333333rem;
}
.hello .features {
  margin-top: 4.7222222222rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.8333333333rem;
}
@media screen and (max-width: 768px) {
  .hello .features--hello {
    display: none;
  }
}
.hello .feature {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.7777777778rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.hello .feature__about {
  width: 5rem;
  font-style: normal;
  font-weight: 700;
  font-size: 0.8888888889rem;
  line-height: 1rem;
  color: white;
}

.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.menu__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.2222222222rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.menu__link {
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1111111111rem;
  color: white;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .menu {
    display: none;
  }
}

.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 1.5555555556rem;
}
@media screen and (max-width: 768px) {
  .header {
    background-color: #1968B1;
    padding-bottom: 1.5555555556rem;
  }
}

.phone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .phone--header {
    display: none;
  }
}

.phone__number {
  font-style: normal;
  font-weight: 700;
  font-size: 1.2222222222rem;
  line-height: 1rem;
  color: white;
  position: relative;
  white-space: nowrap;
}
.phone__number--footer {
  color: black;
  font-style: normal;
  font-weight: 400;
  font-size: 21px;
  line-height: 21px;
}

.why {
  height: 100vh;
}
.why__circle {
  background: #F2F5F4;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1.1111111111rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.why__block-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 480px) {
  .why__block-text {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-left: 12px;
  }
}
.why__bottom {
  background-color: #F8FAF9;
}
.why__title {
  margin-top: 5.7222222222rem;
  color: black;
  text-align: center;
}
.why__subtitle {
  padding-top: 0.9444444444rem;
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2222222222rem;
  color: #666666;
  width: 24.2222222222rem;
  margin: 0 auto;
}
.why__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 2.7777777778rem;
}
@media screen and (max-width: 480px) {
  .why__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.why__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
@media screen and (max-width: 480px) {
  .why__item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.why__item--between {
  margin-top: 3.1111111111rem;
}
@media screen and (max-width: 480px) {
  .why__item--between {
    display: none;
  }
}
.why__img {
  width: 7.1111111111rem;
  margin-bottom: 1.1111111111rem;
}
.why__text {
  margin-top: 1.1111111111rem;
  text-align: center;
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.2222222222rem;
  color: #666666;
}
@media screen and (max-width: 480px) {
  .why__text {
    text-align: start;
  }
}

.parameters {
  background-color: #F8FAF9;
}

.reviews {
  height: 100vh;
}
.reviews__title {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .reviews__avatar {
    width: 130px;
  }
}
.reviews__content {
  background-color: #F8FAF9;
  padding: 2.3333333333rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 1.7777777778rem;
}
@media screen and (max-width: 768px) {
  .reviews__content {
    padding-top: 3.1111111111rem;
    padding-bottom: 2.5555555556rem;
    padding-left: 1.3333333333rem;
    padding-right: 1.3333333333rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  }
}
.reviews__about {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 2.1111111111rem;
}
@media screen and (max-width: 768px) {
  .reviews__about {
    margin-left: 0;
  }
}
.reviews__heading {
  margin-top: 1.5555555556rem;
  margin-bottom: 0.7777777778rem;
  color: #292929;
}
.reviews__text {
  margin-bottom: 1.3888888889rem;
  width: 25.7222222222rem;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2222222222rem;
  color: #666666;
}
@media screen and (max-width: 768px) {
  .reviews__text {
    max-width: 37.6111111111rem;
    padding-right: 25%;
  }
}
@media screen and (max-width: 480px) {
  .reviews__text {
    max-width: 22.5rem;
    padding-right: 10%;
  }
}
.reviews__name {
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3333333333rem;
  color: #292929;
}
.reviews__icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.3333333333rem;
  margin-top: 0.8333333333rem;
}
.reviews__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.reviews__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 25.7222222222rem;
  position: absolute;
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  min-height: 252px;
}
@media screen and (max-width: 768px) {
  .reviews__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 677px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (max-width: 480px) {
  .reviews__item {
    max-width: 405px;
  }
}
.reviews__item--active {
  position: static;
  opacity: 1;
}
.reviews__icon {
  border: 6px solid transparent;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 74px;
  height: 74px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.reviews__icon:hover {
  border: 6px solid #FEDB3F;
}
.reviews__icon--active {
  border: 6px solid #FEDB3F;
}
.reviews__link {
  width: 74px;
  height: 74px;
}

.book {
  height: 100vh;
  background-image: url("../img/book/backgr.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .book {
    background-image: url("../img/book/backgr__tablets.jpg");
  }
}
.book__title {
  text-align: center;
  color: white;
}

.form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3.2777777778rem;
}
@media screen and (max-width: 768px) {
  .form {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-right: 4%;
  }
}
.form__col {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 3rem;
}
@media screen and (max-width: 768px) {
  .form__col {
    margin-right: 0;
  }
}
.form__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 0.6666666667rem;
}
.form__row--right {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.form__block {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 1.8888888889rem;
}
.form__block:last-child {
  margin-right: 0;
}
@media screen and (max-width: 768px) {
  .form__block--textarea {
    margin-right: 0;
  }
}
.form__input {
  border-radius: 0.2222222222rem;
  width: 100%;
  outline: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.6666666667rem;
  font-style: normal;
  font-weight: 400;
  font-size: 0.7777777778rem;
  line-height: 1.1111111111rem;
  border: 0.1666666667rem solid transparent;
}
.form__input:focus {
  border: 0.1666666667rem solid #FEDB3F;
}
.form__input--textarea {
  height: 5.7222222222rem;
  resize: none;
  width: 100%;
}
.form__title {
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2222222222rem;
  color: white;
}
.form__controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 480px) {
  .form__controls {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.form__controls:nth-child(2) {
  margin-top: 1.4444444444rem;
}
.form__controls:nth-child(3) {
  margin-top: 1.0555555556rem;
}
.form__btns {
  margin-top: 2.5555555556rem;
}
@media screen and (max-width: 768px) {
  .form__btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.form__btns .button:last-child {
  margin-left: 1.2222222222rem;
}

.input-error {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border: 0.1666666667rem solid #ce0000;
}

.radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 0.5rem;
}
.radio__title {
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2222222222rem;
  color: white;
}
.radio--checkbox .radio__visible {
  border-radius: 0.2222222222rem;
}
.radio--checkbox .radio__visible::before {
  background: url("../img/book/check.png") center center no-repeat;
}
.radio__elem {
  display: none;
}
.radio__elem:checked ~ .radio__visible::before {
  display: block;
}
.radio__visible {
  margin-right: 0.5555555556rem;
  width: 1.3888888889rem;
  height: 1.3888888889rem;
  position: relative;
  border-radius: 50%;
  background: rgb(255, 255, 255);
}
.radio__visible::before {
  content: "";
  width: 0.7222222222rem;
  height: 0.7222222222rem;
  background: #FEDB3F;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  display: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.fixed-menu {
  position: fixed;
  top: 35%;
  right: 4%;
}
.fixed-menu--black {
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.fixed-menu--black .fixed-menu__link::after {
  background: black;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.fixed-menu--black .fixed-menu__item:hover {
  border-color: black;
}
.fixed-menu--black .fixed-menu__item--active {
  border: 0.0555555556rem solid black;
  border-radius: 50%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .fixed-menu {
    display: none;
  }
}
.fixed-menu__item {
  margin-bottom: 0.2777777778rem;
}
.fixed-menu__item:hover .fixed-menu__link {
  border-color: white;
}
.fixed-menu__item--active .fixed-menu__link {
  border-color: white;
}
.fixed-menu__link {
  position: relative;
  width: 0.8888888889rem;
  height: 0.8888888889rem;
  border-radius: 50%;
  border: 0.0555555556rem solid transparent;
  display: block;
}
.fixed-menu__link::after {
  content: "";
  position: absolute;
  width: 0.4444444444rem;
  height: 0.4444444444rem;
  background: white;
  border-radius: 50%;
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.section {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  min-height: 100%;
  width: 100%;
}
.contacts {
  background-image: url("../img/contacts/map.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.1111111111rem;
  height: 1.1111111111rem;
}
.icon--phone {
  width: 0.7222222222rem;
  margin-right: 0.3333333333rem;
  height: 0.7777777778rem;
}
.icon--why {
  width: 64px;
  height: 64px;
}
.icon--feature {
  width: 41px;
  height: 41px;
}

.footer {
  padding-top: 17px;
  width: 100%;
  height: 8.3888888889rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.footer .phone {
  margin-top: 0.3333333333rem;
}
@media screen and (max-width: 480px) {
  .footer .phone {
    margin-top: 0.6666666667rem;
  }
}
@media screen and (max-width: 480px) {
  .footer .address {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.footer .address__text {
  font-style: normal;
  font-weight: 400;
  font-size: 1.1666666667rem;
  line-height: 1.3333333333rem;
}

.socials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.7777777778rem;
}
@media screen and (max-width: 480px) {
  .socials {
    margin-top: 1.3333333333rem;
  }
}

.container--footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 480px) {
  .container--footer {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.burger {
  width: 26px;
  height: 20px;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.burger__plank {
  height: 4px;
  background: white;
  display: block;
  border-radius: 8px;
}
@media screen and (max-width: 768px) {
  .burger {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}

.slider {
  background: #F8FAF9;
}
.slider .bx-wrapper {
  background: none;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.slider__image-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.slider__image {
  width: 23.3333333333rem;
  height: 29.8888888889rem;
}
@media screen and (max-width: 768px) {
  .slider__image {
    width: 17.6666666667rem;
    height: 23.1666666667rem;
  }
}
@media screen and (max-width: 480px) {
  .slider__image {
    width: 14rem;
    height: 18.3888888889rem;
  }
}
.slider__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
}
.slider__arrow {
  position: absolute;
}
.slider__arrow:hover {
  cursor: pointer;
}
.slider__arrow--left {
  left: 0;
}
.slider__arrow--right {
  right: 0;
  rotate: 180deg;
}
.slider__image-block {
  width: 45%;
}
.slider__about {
  width: 40%;
}
@media screen and (max-width: 768px) {
  .slider__about {
    width: 70%;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.slider__parameters {
  margin-bottom: 2.8888888889rem;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 97%;
}
.slider__parameters:hover .parameters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.slider__parameters--visible {
  background: #3A587E;
  width: 5.0555555556rem;
  height: 5.0555555556rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 0.2222222222rem;
}
@media screen and (max-width: 768px) {
  .slider__parameters {
    display: none;
  }
}
.slider__subtitle {
  margin-bottom: 1.3333333333rem;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2222222222rem;
  color: #666666;
}
.slider__features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3.0555555556rem;
}
.slider__bottom {
  margin-top: 1.3333333333rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .slider__bottom {
    gap: 2.2222222222rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.slider__parameters-name {
  font-weight: 700;
  font-size: 0.7777777778rem;
  line-height: 0.9444444444rem;
  color: white;
  text-transform: uppercase;
  margin-top: 0.3888888889rem;
}
.slider__parameter {
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2222222222rem;
  color: #666666;
  white-space: nowrap;
}
.slider__parameter-info {
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2222222222rem;
  white-space: nowrap;
}
.slider__cost {
  font-style: normal;
  font-weight: 300;
  font-size: 3.3333333333rem;
  line-height: 3.3333333333rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.parameters {
  background: rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.06);
          box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  position: absolute;
  right: 0;
  border-radius: 0.2222222222rem;
  width: 15.1666666667rem;
  height: 16.1666666667rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  display: none;
  opacity: 0.97;
}
.parameters__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 1.6666666667rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.parameters__name {
  margin-left: 0.8888888889rem;
  font-style: normal;
  font-weight: 500;
  font-size: 0.8888888889rem;
  line-height: 1.3333333333rem;
  color: black;
}
.parameters__value {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: right;
  margin-right: 1.3888888889rem;
  font-style: normal;
  font-weight: 400;
  font-size: 0.8888888889rem;
  line-height: 1.3333333333rem;
  color: black;
}

.sliders {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 768px) {
  .sliders {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.sliders__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 768px) {
  .sliders__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.title--slider {
  text-align: start;
  margin-bottom: 1.3333333333rem;
}
@media screen and (max-width: 768px) {
  .title--slider {
    text-align: center;
  }
}

.icon--parameters {
  width: 2.1111111111rem;
  height: 2.1111111111rem;
}

.icon--parameter {
  width: 1.7777777778rem;
  height: 1.7777777778rem;
}

.icon--arrow {
  width: 1.3333333333rem;
  height: 2.2222222222rem;
}

.overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #313131;
  z-index: 1000;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100vh;
  position: fixed;
  justify-content: center;
}
.overlay__close-link {
  position: absolute;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.overlay__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 480px) {
  .overlay__container {
    padding: 0 10%;
  }
}
.overlay .open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.overlay .menu--overlay {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.overlay .menu--overlay .menu__list--overlay {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.2222222222rem;
}
.overlay .menu__link {
  font-size: 2rem;
  font-weight: 400;
}
.overlay__close-link {
  margin-top: 2.3333333333rem;
  margin-right: 2.3333333333rem;
}

.icon--close {
  width: 20px;
  height: 20px;
}

.team__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 2.9444444444rem;
}
@media screen and (max-width: 768px) {
  .team__list {
    display: none;
  }
}
.team__list--mobile {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 768px) {
  .team__list--mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.team__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.team__content-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: 0.2222222222rem;
}
.team__title {
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  font-style: normal;
  font-weight: 700;
  font-size: 1.1666666667rem;
  line-height: 1.3888888889rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 1.1666666667rem;
  color: #292929;
}
.team__content {
  margin-top: 0.4444444444rem;
  overflow: hidden;
  height: 0;
  position: absolute;
  top: 100%;
  max-width: 12.2777777778rem;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
@media screen and (max-width: 768px) {
  .team__content {
    position: static;
  }
}
.team__profession {
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2222222222rem;
}
.team__text {
  font-style: normal;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.2222222222rem;
  color: #666666;
}

.icon--team {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  left: 100%;
  top: 0.5555555556rem;
  margin-left: 0.2222222222rem;
  -webkit-transition: 0.6s cubic-bezier(0.17, -0.2, 0.47, 1.27);
  transition: 0.6s cubic-bezier(0.17, -0.2, 0.47, 1.27);
}

.icon--active {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  z-index: 600;
}
.modal--open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.modal__container {
  background: white;
  padding: 35px 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 15px;
  max-width: 600px;
}
.modal__content {
  margin-bottom: 40px;
}
.modal__content--error {
  color: red;
}

.work {
  background: #F8FAF9;
}

.video {
  width: 100%;
  height: 100%;
}

.player {
  position: relative;
  height: 100%;
  margin-top: 30px;
  width: 662px;
  height: 392px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .player {
    width: 590px;
    height: 351px;
  }
}
@media screen and (max-width: 480px) {
  .player {
    width: 394px;
    height: 240px;
  }
}
.player__splash {
  display: block;
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-image: url("../img/work/backgr.jpg");
  background-position: center;
  background-repeat: no-repeat;
}
.player__splash--active {
  display: none;
}
.player__controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  background: #404040;
  height: 35px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.player__playback {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 55%;
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 480px) {
  .player__playback {
    width: 35%;
  }
}
.player__playback::before {
  content: "";
  position: absolute;
  height: 7px;
  background: #626262;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 5px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.player__playback-yellow {
  position: absolute;
  height: 7px;
  background: Yellow;
  width: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 5px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  z-index: 2;
}
.player__playback-button {
  cursor: pointer;
  z-index: 100;
  border: none;
  background: Yellow;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  position: absolute;
  bottom: 50%;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.player__duration {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 14%;
  gap: 5px;
  margin-right: 5px;
}
@media screen and (max-width: 480px) {
  .player__duration {
    width: 15%;
  }
}
.player__mute-btn {
  background: none;
  border: none;
  cursor: pointer;
}
.player__volume-lvl {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 9%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 2%;
}
@media screen and (max-width: 480px) {
  .player__volume-lvl {
    width: 13%;
  }
}
.player__volume-lvl::before {
  content: "";
  position: absolute;
  height: 7px;
  background: #626262;
  width: 120%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 5px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.player__volume-button {
  cursor: pointer;
  z-index: 100;
  border: none;
  background: Yellow;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  position: absolute;
  bottom: 50%;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.player__volume-yellow {
  position: absolute;
  height: 7px;
  background: Yellow;
  width: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 5px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  z-index: 2;
}

.container--work {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.button-play {
  cursor: pointer;
  background: none;
  border: none;
}

.icon--none {
  display: none;
}

#map {
  width: 100%;
  height: 100%;
}

.menu-section {
  background-image: url("../img/menu-section/backgr.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: block;
  position: relative;
}

.title--left-top {
  position: absolute;
  left: 0;
  top: 6.0555555556rem;
}

.boards {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  bottom: 0;
  top: 0;
  right: 0;
}
.board {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  height: 100%;
  right: 0;
}
.board--active {
  z-index: 1000;
}
.board--unactive {
  position: absolute;
}
.board__link {
  text-orientation: sideways-right;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  color: white;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  width: 102px;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.board__content {
  width: 0;
  overflow: hidden;
  background: rgba(51, 53, 55, 0.9);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: white;
  position: relative;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.board__text {
  padding: 31px 80px 0 38px;
}
@media screen and (max-width: 480px) {
  .board__text {
    padding: 31px 35px 0 25px;
  }
}
.board__img {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  z-index: -5;
}
.board__name {
  margin-top: 39px;
}
.board__close {
  cursor: pointer;
  border: none;
  background: none;
  position: absolute;
  right: 6%;
  top: 2%;
}
.board__close:hover {
  -webkit-transform: translate(2);
          transform: translate(2);
}