/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/*
.slider{
  background: #777777;
}
*/

/* 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;
  max-height: 25em;
  */
  height: 25em;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
  /* max-height: 25em;*/
  height: 26rem;
}


/* MEDIA QUERIES RESPONSIVE CSS ------------------------------------------------ */

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .carousel-item {
      height: 10rem;
    }
    .carousel-item > img {
      height: 10rem;
    }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { 
    .carousel-item {
      height: 15rem;
    }
    .carousel-item > img {
      height: 15rem;
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .carousel-item {
      height: 20em;
    }
    .carousel-item > img {
      height: 20rem;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .carousel-item {
      height: 25em;
    }
    .carousel-item > img {
      height: 25rem;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
    .carousel-item {
      height: 25em;
    }
    .carousel-item > img {
      height: 25rem;
    }
}