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

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;

  white-space: nowrap;

  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(100%);
}

/* PAGE */

.page {
  height: 100%;
}

.page__body {
  overflow-wrap: break-word;

  display: flex;
  align-items: center;
  min-width: 1280px;
  min-height: 100%;
  margin: 0;
}

/* BUTTON */

.button {
  font-family: "Arial", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: rgb(255, 255, 255);

  position: relative;

  display: inline-block;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;

  background-color: rgba(56, 119, 238, 0.7);
  transition-property: background-color;
  transition-duration: 0.15s;
  cursor: pointer;
}

.button:hover {
  background-color: rgba(56, 119, 238, 0.8);
}

.button:active {
  background-color: rgba(56, 119, 238, 0.9);
}

.button::before,
.button::after {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  background-color: rgb(255, 255, 255);

  pointer-events: none;
}

.button::before {
  width: 10px;
  height: 2px;
}

.button::after {
  width: 2px;
  height: 10px;
}

.button--opened {
  width: auto;
  min-width: 55px;
  max-width: 210px;
  height: auto;
  min-height: 40px;
  padding: 12px;
  padding-left: 40px;
  padding-right: 15px;
  border-radius: 40px;

  background-color: rgb(56, 119, 238);
}

.button--opened:hover {
  background-color: rgba(56, 119, 238, 0.9);
}

.button--opened:active {
  background-color: rgba(56, 119, 238, 0.8);
}

.button--opened::before {
  left: 15px;

  transform: translate(0, -50%);
}

.button--opened::after {
  display: none;
}

.button > span {
  pointer-events: none;
}

.button--green {
  background-color: rgba(106, 191, 75, 0.7);
}

.button--green:hover {
  background-color: rgba(106, 191, 75, 0.8);
}

.button--green:active {
  background-color: rgba(106, 191, 75, 0.9);
}

.button--green.button--opened {
  background-color: rgb(106, 191, 75);
}

.button--green.button--opened:hover {
  background-color: rgba(106, 191, 75, 0.9);
}

.button--green.button--opened:active {
  background-color: rgba(106, 191, 75, 0.8);
}

/* INTERACTIVE-PHOTO */

.interactive-photo {
  position: relative;

  display: flex;
  width: 100%;
  height: 100%;
}

.interactive-photo::before {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  background-color: rgb(2, 15, 32, 0.4);

  pointer-events: none;
}

.interactive-photo__image {
  width: 100%;
  height: 100%;
}

.interactive-photo__button {
  position: absolute;
}

.interactive-photo__button--1 {
  left: 30.2%;
  top: 26.15%;
}

.interactive-photo__button--2 {
  left: 23.25%;
  top: 66.1%;
}

.interactive-photo__button--3 {
  left: 71.5%;
  top: 21%;
}

.interactive-photo__button--4 {
  left: 73.6%;
  top: 44%;
}

.interactive-photo__button--5 {
  left: 56.3%;
  top: 58.2%;
}

.interactive-photo__button--6 {
  left: 83%;
  top: 66%;
}

.interactive-photo__button--7 {
  left: 59.8%;
  top: 37.45%;
}

.interactive-photo__button--8 {
  left: 68%;
  top: 62%;
}

.interactive-photo__button--9 {
  left: 57.65%;
  top: 73.2%;
}

.interactive-photo__button--10 {
  left: 35.8%;
  top: 44.6%;
}