.i-grafic {
  position: relative;
  user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
/* TOP SIDE */

.reference_image_top {
  opacity: 0;
}
.main_header {
  position: absolute;
  left: 24.6%;
  top: 1.4%;
  width: 46.9%;
}
.logo_admin {
  position: absolute;
  right: 3.6%;
  top: 0.2%;
  width: 6.1%;
}
.top_right_map {
  position: absolute;
  top: -0.3%;
  left: 67%;
  width: 24.5%;
}
.second_header {
  position: absolute;
  left: 1.3%;
  top: 14%;
  width: 38%;
}
.third_header {
  position: absolute;
  left: 1.3%;
  top: 20.4%;
  width: 35.9%;
}
.veniks {
  position: absolute;
  width: 29.4%;
  height: 10%;
  left: 41.6%;
  top: 13%;
}
.main_map {
  position: absolute;
  top: 31.9%;
  left: 33%;
  width: 64.3%;
}
.krestyanka {
  position: absolute;
  top: 34.2%;
  left: -0.1%;
  width: 20.74%;
}

.krestyanka_text {
  position: absolute;
  width: 13.8%;
  left: 15.6%;
  top: 54%;
}

.top_f_bottom_left_p {
  position: absolute;
  top: 70.7%;
  left: 1%;
  width: 34.09%;
}
.top_f_bottom_left_p_text {
  position: absolute;
  top: 95.61%;
  left: 1.2%;
  width: 31.4%;
}
.top_f_bottom_center_p {
  position: absolute;
  width: 38.56%;
  left: 33.9%;
  top: 61.9%;
}
.main_map_descr {
  position: absolute;
  top: 61.8%;
  left: 70.14%;
  width: 20.86%;
}

/* MIDDLE SIDE */
.mid_area {
  overflow: hidden;
  transition: all 0.5s;
}
.reference_image_middle {
  opacity: 0;
}

.mid_f_header {
  position: absolute;
  left: 1.3%;
  top: 14%;
  width: 8.8%;
}
.mid_f_timeline {
  position: absolute;
  top: 23.1%;
  left: 1.2%;
  width: 86.61%;
}
.mid_f_most {
  position: absolute;
  top: 13.9%;
  left: 15%;
  width: 31.98%;
  transition: all 0.5s;
}

.most_init_pos {
  filter: saturate(0);
  transform: translateX(60%) scale(1.2);
}

.mid_f_timeline_descr {
  position: absolute;
  top: 43.4%;
  left: 1.2%;
  width: 82.11%;
}

.mid_f_most_descr {
  position: absolute;
  top: 15%;
  left: 17.4%;
  width: 27.25%;
}
.mid_f_right {
  position: absolute;
  top: 5.2%;
  left: 83.3%;
  width: 14.21%;
}

/* BOTTOM */

.reference_image_bottom {
  opacity: 0;
}
.bottom_main_image {
  position: absolute;
  top: 0%;
  left: 0;
  width: 97.56%;
}
.bottom_image_descr {
  position: absolute;
  top: 11.9%;
  left: 19.5%;
  width: 57.64%;
}
.bottom_image_descr_pins {
  position: absolute;
  top: 38.5%;
  left: 34.6%;
  width: 24.94%;
}
.bottom_bottom_image {
  position: absolute;
  top: 68%;
  left: 1.2%;
  width: 46.05%;
}
.bottom_bottom_descr {
  position: absolute;
  top: 75.1%;
  left: 50.1%;
  width: 19.25%;
}
.bottom_bottom_image_descr {
  position: absolute;
  top: 94.8%;
  left: 7.1%;
  width: 34.77%;
}

.bottom_ducks {
  position: absolute;
  top: 36%;
  right: 0;
  width: 35.89%;
}
.bottom_ducks_descr {
  position: absolute;
  top: 87%;
  right: 5.6%;
  width: 22.31%;
}
.bottom_logo {
  position: absolute;
  bottom: 2.1%;
  right: 3.6%;
  width: 8.15%;
}

/* EVENT-AREAS */

.top_event_area {
  width: 62%;
  height: 42%;
  top: 33%;
  left: 34%;
  background-color: red;
  opacity: 0.3;
}
.mid_event_area {
  width: 40%;
  height: 80%;
  top: 10%;
  left: 30%;

  background-color: red;
  opacity: 0.3;
}
/* SCALE TOGGLE */
.scale_toggle_1 {
  width: 17%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: pink;
  opacity: 0.3;
}
.scalable {
  overflow: hidden;
}

.scale_toggle_2 {
  width: 28%;
  height: 100%;
  top: 0;
  left: 17%;
  background-color: blue;
  opacity: 0.3;
}
.scale_toggle_3 {
  width: 25.2%;
  height: 100%;
  top: 0;
  left: 44.9%;
  background-color: red;
  opacity: 0.3;
}
.scale_toggle_4 {
  width: 27%;
  height: 100%;
  top: 0;
  left: 70%;
  background-color: blue;
  opacity: 0.3;
}

.bottom_event_area_1 {
  width: 68%;
  height: 67%;
  top: 2%;
  left: 2%;
  background-color: red;
  opacity: 0.3;
}
.bottom_event_area_2 {
  width: 28.1%;
  height: 42.6%;
  top: 2%;
  right: 2%;
  background-color: blue;
  opacity: 0.3;
}
.event_area {
  position: absolute;
  transition: all 0.5s;
  opacity: 0;
}

/* ANIMATIONS   */
.from_top {
  opacity: 0;
  transform: translateY(-1rem);
}
.from_left {
  opacity: 0;
  transform: translateX(-1rem);
}
.from_top_anim {
  opacity: 1;
  transform: translateY(0rem);
  transition: all 0.5s;
}
.from_left_anim {
  opacity: 1;
  transform: translateX(0rem);
  transition: all 0.5s;
}
.desaturate {
  filter: saturate(0);
  transition: all 0.5s;
}
.desaturate_anim {
  filter: saturate(1);
}