.ost_mask {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);

  &_default_popup {
    position: fixed;
    z-index: 1000;
    top: 0;
  }

  &_show {
    .effect(@keyframes) {
      animation-duration: 0.2s; // animation-timing-function: cubic-bezier(.55, 0, .55, .2);
      animation: @keyframes .3s 1 linear;
      animation-name: @keyframes;
      animation-fill-mode: both;
    }
    &_fade_in {
      .effect(@keyframes: amFadeIn);
      animation-play-state: running;
    }
    &_fade_out {
      .effect(@keyframes: amFadeOut);
      animation-play-state: running;
    } // paused
  }
}


@keyframes amFadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes amFadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}