/* Carousel base class */

.carousel {
  margin-bottom: 0rem;
}

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

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 30px;
  left: 15%;
  z-index: 10;
  padding-bottom: 93px;
  color: #fff;
  text-align: center;
}

/* Carousel title */

.carousel-title {
  font-weight: 600;
  font-size: 2.6rem;
  color: #ffffff !important;
}

/* Carousel inner */

.carousel-inner {
  height: 28.88rem;
  background-color: rgba(0, 0, 0, 0.25);
}

/* Declare heights because of positioning of img element */

.carousel-item {
  height: 28.88rem;
  min-height: 28.88rem;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Carousel image */

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 28.88rem;
}

/* Carousel transition */

.carousel-item {
  transition: transform 8s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  transition: opacity 0s 8s;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.6rem;
    line-height: 1.4;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .carousel-caption p {
    height: auto;
  }
}

/* Handy */
@media (max-width: 480px) {
  .carousel-caption {
    right: 5%;
    left: 5%;
    bottom: 20px;
    padding-bottom: 20px;
  }

  .carousel-caption p {
    height: auto;
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 30px;
    margin-top: 10px;
  }

  .carousel-title {
    font-size: 2rem;
    line-height: 1.2;
  }
}

/* Größere Handys / kleine Tablets */
@media (min-width: 481px) and (max-width: 768px) {
  .carousel-caption {
    right: 10%;
    left: 10%;
    bottom: 20px;
    padding-bottom: 20px;
  }

  .carousel-caption p {
    height: auto;
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 30px;
    margin-top: 10px;
  }

  .carousel-title {
    font-size: 2.2rem;
    line-height: 1.2;
  }
}