/* 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;
}

.diapo {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.carousel-img{
  min-width: 100%;
  min-height: 100%;
  height:100%;
  
  object-fit: cover;
  margin:auto;
}

.carousel-item {
  background-color:var(--bs-secondary-bg-subtle);
  height: 16rem;
}

.carousel-illus{
  height: 11rem;
  margin: 0rem -30px;
}
.carousel-slogan{
  font-size: 6rem;
  padding-top:1rem;
}

@media (min-width: 576px) { /*sm*/
  .carousel-slogan{
    padding-right:40%;
  }
}

@media (min-width: 992px) { /*lg*/
  
  .carousel-item {
    height: 25rem;
  }
  
  .carousel-illus{
    height: 19rem;
    margin: 0rem -50px;
  }
  
  .carousel-slogan{
    font-size: 8rem;
  }
}


.carousel-control-prev, .carousel-control-next {
  background-color: #ffffff00;
  opacity:.3;
  -webkit-text-stroke: 1px black;
  transition: opacity .15s ease, background-color .15s ease ;
}
.carousel:hover .carousel-control-prev,.carousel:hover .carousel-control-next {
  background-color: #ffffff33
}
.carousel-control-prev:hover, .carousel-control-next:hover {
  opacity:.9;
}