/* _______________ HORIZON _______________ */

/* Frame */
.frame_clear {
  border: 1px solid;
  border-radius: 0.5vh;
  color: #fff;
}

.frame_hover {
  background-color: #00000000;
  transition: 0.2s;
}
.frame_hover:hover {
  background-color: #00000080;
  outline: 1px solid #fff;
  border-radius: 0.5vh;
}

.frame_on {
  background-color: #00000080;
  outline: 1px solid #fff;
  border-radius: 0.5vh;
}
.frame_on:hover {
  outline: 1px solid #fff;
}

.frame_tb {
  background-color: #00000080;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-radius: 0.5vh;
  color: #fff;
}

/* site frame */
.horizon {
  width: 100%;
  height: 100vh;
  display: block;
  opacity: 1;
  z-index: 1;
}

.vertical {
  width: 0;
  height: 0;
  display: none;
  opacity: 0; /* непрозрачность: 0% */
  overflow: hidden; /* переполнение: скрыто */
  z-index: 0;
}

/* _______________ VERTICAL _______________ */
@media all and (max-aspect-ratio: 7/5) {
  /* site frame */
  .horizon {
    width: 0;
    height: 0;
    display: none;
    opacity: 0;
    overflow: hidden;
    z-index: 0;
  }

  .menu_is_closed {
    width: 5vw;
    height: 2vw;
    border-top: 1px solid;
    border-bottom: 1px solid;
    color: #fff;
  }

  .vertical {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 1;
    z-index: 1;
  }
}