#welcome .jumbotron {
    background: $primary;
    color: lighten($primary, 35%);
    margin-top: -20px;
}

#welcome .jumbotron__header,
.jumbotron h1 {
    font-weight: bold;
    color: white;
    margin-top: 0;
    margin-bottom: 25px;
}

#welcome .jumbotron__body {
    max-width: 80%;
    margin-bottom: 0;
    line-height: 1.6em;
}

#welcome .jumbotron__header, .jumbotron h1 {
    font-weight: lighter;
}

#welcome h2 {
    margin-bottom: 20px;
}

#welcome .steps {
    max-width: 80%;
    padding-left: 0;
    list-style: none;
    counter-reset: welcome-steps;
}

#welcome .steps > .steps__item {
    margin-bottom: 2.5em;
    padding: 19px;
    border: 1px solid $gray-lighter;
    border-radius: 4px;
    overflow: hidden;

    // The step number.
    &:before {
        content: counter(welcome-steps);
        counter-increment: welcome-steps;
        width: 50px;
        height: 50px;
        float: left;
        margin-right: 1em;
        background: $gray-lighter;
        border-radius: 50%;
        font: bold 2em monospace;
        text-align: center;
        line-height: 49px;
    }

    .body {
        float: left;
    }

    h2 {
        font-weight: bold;
        margin-top: 0;
    }

    p:last-child {
        margin-bottom: 0;
    }
}