/* Since positioning the image, we need to help out the caption */

.carousel-caption {
     background-color: rgba(255, 255, 255, 0.8);
     padding: 2rem;
     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;
}



/* 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;
     }
     .carousel-caption>h1 {font-size: 4em;}
}