Background: Light 1

.background {
  background-color: $color-background1;
}

.background-light1 {
  background-color: $color-light1;
}

.background-light2 {
  background-color: $color-light2;
}

.background-detail {
  background-color: $color-light1;
  padding-bottom: $gridspacing * 5;

  @media (min-width: $media-hd) {
    padding-bottom: $gridspacing * 8;
  }
}

.background-bubbles {
  @include background-bubbles;
  background-color: $color-dark1;
}

.background-bubbleslarge {
  position: relative;
  overflow-x: hidden;
  // Needed for overflow-x: hidden causes overflow-y: auto issue.
  margin-top: -$header-height;

  [class*="background-x-bubble"] {
    display: none;
  }

  // Use the x and y values from the HD view, the header height is subtracted from the y,
  // and 64px is subtracted from the x in the mixin.
  .background-x-bubble1 { @include bubble(121px, 64px, 422px); }

  .background-x-bubble2 { @include bubble(23px, 162px, 706px); }

  .background-x-bubble3 { @include bubble(153px, 19px, 802px); }

  .background-x-bubble4 { @include bubble(245px, 312px, 543px); }

  .background-x-bubble5 { @include bubble(73px, 590px, 446px); }

  .background-x-bubble6 { @include bubble(37px, 645px, 802px); }

  .background-x-bubble7 { @include bubble(187px, 789px, 567px); }

  .background-x-bubble8 { @include bubble(23px, 1125px, 737px); }

  .background-x-bubble9 { @include bubble(120px, 1269px, 821px); }

  @media (min-width: $media-tablet) {

    padding-bottom: 340px;

    [class*="background-x-bubble"] {
      display: block;
    }
  }
}