/* GLOBAL STYLES ————————————————– */ /* Padding below the footer and lighter body text */
body {
padding-top: 3rem; padding-bottom: 3rem; color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL ————————————————– */
/* Carousel base class */ .carousel {
margin-bottom: 4rem;
} /* Since positioning the image, we need to help out the caption */ .carousel-caption {
bottom: 3rem; z-index: 10;
}
/* Declare heights because of positioning of img element */ .carousel-item {
height: 32rem; background-color: #777;
} .carousel-item > img {
position: absolute; top: 0; left: 0; min-width: 100%; height: 32rem;
}
/* MARKETING CONTENT ————————————————– */
/* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 {
margin-bottom: 1.5rem; text-align: center;
} .marketing h2 {
font-weight: 400;
} .marketing .col-lg-4 p {
margin-right: .75rem; margin-left: .75rem;
}
/* Featurettes ————————- */
.featurette-divider {
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */ .featurette-heading {
font-weight: 300; line-height: 1; letter-spacing: -.05rem;
}
/* RESPONSIVE CSS ————————————————– */
@media (min-width: 40em) {
/* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 1.25rem; font-size: 1.25rem; line-height: 1.4; } .featurette-heading { font-size: 50px; }
}
@media (min-width: 62em) {
.featurette-heading { margin-top: 7rem; }
}