#background {
  height: 98%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  img {
    position: absolute;
    pointer-events: none;
  }
  > div {
    position: relative;
    height: 80vh;
  }
  #bg-top {
    /* #bg-1 {
      top: 5vh;
      left: 0;
    } */
    #bg-3 {
      top: 13vh;
      left: -10vw;
      width: 20vw;
      z-index: 1;
      @media screen and (min-width: $breakpoint_desktop) {
        width: auto;
        z-index: -1;
      }
    }
    #bg-2 {
      top: 8vh;
      left: -28vw;
    }
    #bg-5 {
      width: 20vw;
      top: 5vh;
      right: -10vw;
      z-index: 1;
      @media screen and (min-width: $breakpoint_desktop) {
        z-index: -1;
      }
    }
    /* #bg-4 {
      top: 18vh;
      right: -45vw;
    } */

  }
  #bg-middle {
    #bg-6 {
      top: 5vh;
      right: -5vw;
    }
    #bg-7 {
      width: 85vw;
      top: 10vh;
      right: 0vw;
    }
    /* #bg-8 {
      width: 80vw;
      top: 45vh;
      left: -40vw;
    } */
    #bg-12 {
      width: 105vw;
      left: -5vw;
      top: 30vh;
    }
  }
  #bg-bottom {
    bottom: 0;
    position: absolute;
    #bg-11 {
      left: 0;
      @media screen and (min-width: $breakpoint_desktop) {
        left: 50vw;
        bottom: 70vh;
      }
    }
    #bg-10 {
      width: 110vw;
      left: 5vw;
      bottom: 0;
      @media screen and (min-width: $breakpoint_desktop) {
        left: 0;
        bottom: 20vh;
      }
    }
    #bg-4 {
      transform: scaleX(-1);
      left: -45vw;
      bottom: 5vh;
      @media screen and (min-width: $breakpoint_tablet) {
        bottom: 150vhvh;

      }
      @media screen and (min-width: $breakpoint_desktop) {
        bottom: -8vh;
      }
    }
  }
}