#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: 1px solid darken($gray-lighter, 10%); 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; } }