.lottery {
  .lottery-popup-button {
    position: fixed;
    z-index: 12;
    cursor: pointer;
    background-position: center;
    background-size: 100% 100%;
    @extend %defaultTransition;

    &:hover {
      @include transform(scale(1.1));
    }
  }

  .lottery-popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 13;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    visibility: hidden;
    opacity: 1;

    .relativePos {
      width: 100%;
      height: 100%;
    }

    .bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 13;
      background: rgba(#000, 0.5);
    }

    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 14;
      max-width: calc(100% - 30px);
      @include transform(translate(-50%, -50%) scale(0));
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      @include borderRadius(10px);
      @include boxShadow(0 4px 8px rgba(#000, 0.5));

      .closeBtn {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 22px;
        padding: 10px;
        cursor: pointer;
        color: rgba(#000, 0.4);
        @extend %defaultTransition;

        &:hover {
          color: rgba(red, 0.4);
        }
      }

      .btnBox {
        position: absolute;
        bottom: 20px;
        left: 50%;
        @include transform(translateX(-50%));
      }
    }
  }
}