.random-wrapper {
  .hot-air-balloon {
    position: absolute;
    bottom: 20px;
    width: 100px;
    height: 100px;
    display: block;
    background: url('~@/assets/images/hot-air-balloon.png') center center no-repeat;
    background-size: contain;
    z-index: 90;
    animation: hot-air-balloon 15s linear;
    transform: translate3d(-100px, 0, 0);
    animation-iteration-count: 1;
  	backface-visibility: hidden;
		will-change: transform;

    &.night {
      background: url('~@/assets/images/hot-air-balloon-night.png') center center no-repeat;
      background-size: contain;
    }
  }
}

@keyframes hot-air-balloon {
  from { transform: translate3d(-100px, 0, 0); }
  to { transform: translate3d(300px, -100px, 0); }
}