.onboarding-popup {
  position: fixed;
  top:    0;
  left:   0;
  right:  0;
  bottom: 0;
  background: rgba($dark-color, 0.5);

  z-index: $minimum-z-index;

  > .content {
    position: absolute;

    width: $popup-width;
    left: 50%;
    margin-left: -$popup-width / 2;
    top: 2.5rem;

    padding: 0;

    background: white;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.1);
  }
}

.onboarding-welcome {

  .welcome {
    background: url('../images/preston-clouds.png') top no-repeat;
    background-size: 35rem 10.25rem;
    padding-top: 10.25rem;
    height: 3.25rem;
    color: black;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0;
  }

  > .content {
    padding-bottom: 5.625rem;
    min-height: 12.5rem;
    font-size: 0.875rem;
    background: url('../images/balloons.png') bottom no-repeat;
    background-size: 15rem 5.0625rem;
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;

    p {
      display: flex;
      text-align: center;
      align-self: center;
      width: 25rem;
    }
  }

  .started {
    display: flex;
    font-weight: 600;
    font-size: 1.0625rem;
    justify-content: center;
  }

  > .content {
    margin-bottom: 1.25rem;
  }

  > .material-icons {
    color: $background-tertiary-color;
    position: absolute;
    top: 0.625rem;
    right: 0.9375rem;
    cursor: pointer;
    font-size: 1.875rem;
  }

  .buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5625rem;
  }

  .btn-primary.blue-balloon {
    background-color: $blue-balloon;
  }

  .btn-tertiary-outline {
    background: none;
    color: $blue-balloon;
    border: 2px solid $blue-balloon;
    text-transform: uppercase;
    box-sizing: border-box;
    padding: 9px 16px;
    margin-right: 20px;
  }

}

.onboarding-popup {
  h2 {
    font-size: 1.5rem;
  }

  #onboarding-welcome {
    &.modal-header {
      padding: 1.5rem;

      .close {
        color: #000;
        font-size: 2.5rem;
        margin-top: -14px;
        margin-right: -5px;
        opacity: 0.4;
      }
    }

    .btn {
      background-color: $blue-balloon;
      font-size: 0.9375rem;
      font-weight: normal;
      letter-spacing: normal;
    }

    .link-container {

      .close {
        color: #000;
        font-size: 40px;
        margin-top: -15px;
      }

      .starter-guide,
      .video-tutorial,
      .forum,
      .training {
        width: 9.375rem;
        height: 8.125rem;
      }

      .starter-guide {
        background: url('../images/starter-guide.png') no-repeat;
      }

      .video-tutorial {
        background: url('../images/video-tutorial.png') no-repeat;
      }

      .forum {
        background: url('../images/forum.png') no-repeat;
      }

      .training {
        background: url('../images/training.png') no-repeat;
      }

      .final-link {
        border-width: 0;
        color: #363a41;
        display: block;
        font-weight: 600;
        justify-content: center;
        padding: 0;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 9.375rem;

        &:hover {
          box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.25);
        }

        .link {
          bottom: 0;
          line-height: 16px;
          position: absolute;
          padding: 10px;
          display: block;
          text-align: center;
          width: 100%;
        }
      }
    }
  }
}