.carousel p {
  display: block;
  font-size: 0.8rem
}

.carousel p:last-child {
  margin-bottom: 3px !important
}

.carousel-inner .carousel-item a {
  @include flex;
  @include flex-column;
  text-decoration: none !important
}

.home .carousel,
.home .carousel .carousel-item.active {
  @include flex
}

.home .carousel .carousel-inner,
.home .carousel .carousel-item.active>a {
  @include flex;
  @include flex-1;
  transition: background .3s;
  background: transparent
}

.home .carousel .carousel-item.active>a:focus,
.home .carousel .carousel-item.active>a:hover {
  background: rgba(0, 0, 0, 0.3)
}

.carousel-caption {
  @include flex-1;
  text-align: left;
  padding: 1.25rem
}

.carousel-caption h3 {
  color: $white;
  text-transform: uppercase;
  padding-top: 0;
  @include flex;
  @include flex-justify-between;
  border-color: rgba(255, 255, 255, 0.25);
  font-family: $light
}

.h100>.carousel-inner:hover {
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.3)
}


.carousel-inner>.carousel-item {
  position: relative;
  @include flex;
  -webkit-transition: 0.6s ease-in-out left;
  -o-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}

.carousel-inner>.carousel-item>img,
.carousel-inner>.carousel-item>a>img {
  line-height: 1;
}

@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-inner>.carousel-item {
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    -o-transition: -o-transform 0.6s ease-in-out;
    transition: -webkit-transform 0.6s ease-in-out;
    -o-transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
  }
  .carousel-inner>.carousel-item.next,
  .carousel-inner>.carousel-item.active.right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    left: 0;
  }
  .carousel-inner>.carousel-item.prev,
  .carousel-inner>.carousel-item.active.left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: 0;
  }
  .carousel-inner>.carousel-item.next.left,
  .carousel-inner>.carousel-item.prev.right,
  .carousel-inner>.carousel-item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev {
  display: block;
}

.carousel-inner>.active {
  left: 0;
}

.carousel-inner>.next,
.carousel-inner>.prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner>.next {
  left: 100%;
}

.carousel-inner>.prev {
  left: -100%;
}

.carousel-inner>.next.left,
.carousel-inner>.prev.right {
  left: 0;
}

.carousel-inner>.active.left {
  left: -100%;
}

.carousel-inner>.active.right {
  left: 100%;
}

.center-carousel {
  left: 50%;
  top: 50%;
  position: relative;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.carousel-indicators {
  position: absolute;
  right: 0;
  top: 0;
  bottom: auto;
  left: 0;
  z-index: 15;
  @include flex;
  @include flex-justify-end;
  padding-left: 0;
  margin-right: 0.5rem;
  margin-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.carousel-indicators li {
  width: 20px;
}

.carousel-indicators {
  bottom: 0;
  top: auto;
  margin: 0 !important;
  @include flex;
  @include flex-row;
  @include flex-1;
  padding: 0.25rem
}

.home [data-module="carousel"] {
  @include flex;
  @include flex-1;
}

.carousel-indicators li {
  @include flex-1;
  margin: 0 !important;
  border: none !important;
  height: 2px !important;
  opacity: .2
}

.carousel-indicators li.active {
  opacity: 1
}
.carousel .carousel-inner p:last-child {
  margin-bottom: 30px !important;
}
@media (min-width: 768px) {
  .carousel .carousel-inner p:last-child {
    margin-bottom: 0px !important;
  }
}

/* GESTION GRID */



.no-flexbox [data-module="diaporama"] .carousel-inner>.carousel-item>a>img,
.no-flexbox [data-module="diaporama"] .carousel-inner>.carousel-item>img {
  max-width: 100% !important;
}

.container-home .is-flex .h100 [data-module="carousel"] .carousel-inner>.carousel-item {
  overflow: hidden
}

.container-home .is-flex .h100 [data-module="carousel"] .carousel-inner>.carousel-item>a {
  @include flex;
  @include flex-column;
}

.container-home .is-flex .h100 [data-module="carousel"] .carousel-inner>.carousel-item>a>img,
.container-home .is-flex .h100 [data-module="carousel"] .carousel-inner>.carousel-item>a>.carousel-caption {
  position: relative;
  width: auto;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  -webkit-transform: none;
  -ms-transform: none;
  @include flex-1;
}

.carousel-caption {
  @include flex-2;
}


.carousel-fade {
  margin-bottom: 0.5rem
}



.carousel {
  width: 100%
}

.carousel-home .carousel .carousel-inner .carousel-item {
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

.carousel-home .carousel .carousel-inner .carousel-item,
.carousel-home .carousel .carousel-inner .active.left,
.carousel-home .carousel .carousel-inner .active.right {
  opacity: 0;
}

.carousel-home .carousel .carousel-inner .active,
.carousel-home .carousel .carousel-inner .next.left,
.carousel-home .carousel .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-home .carousel .carousel-inner .next,
.carousel-home .carousel .carousel-inner .prev,
.carousel-home .carousel .carousel-inner .active.left,
.carousel-home .carousel .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}


.carousel-home .center-carousel {
  max-width: none !important;
}

.carousel-home .carousel .carousel-caption {
  padding: 20px 50px;
}

.carousel-home .carousel .carousel-caption h3 {
  font-size: 1.3em !important
}

.carousel-home .carousel-inner .carousel-item a:focus .carousel-caption,
.carousel-home .carousel-inner .carousel-item a:hover .carousel-caption {
  -webkit-box-shadow: inset 0 0 0 3px $primary;
  box-shadow: inset 0 0 0 3px $primary;
}

.carousel-home .carousel-inner {
  background: $color-bkg-body;
}


@media (min-width: 768px) and (max-width: 991px) {
  .is-flex [data-module="carousel"] .carousel .carousel-caption p,
  .is-flex [data-module="diaporama"] .carousel .carousel-caption p {
    overflow: hidden !important;
    -o-text-overflow: ellipsis !important;
    text-overflow: ellipsis !important;
    white-space: nowrap;
  }
  .container-home .is-flex .h100 [data-module="carousel"] .carousel-inner>.carousel-item>a {
    @include flex;
    @include flex-row;
    position: relative !important
  }
  .container-home .is-flex .h100 [data-module="carousel"] .carousel-inner>.carousel-item>a>img {
    flex: 0
  }
  .container-home .carousel .carousel-caption {
    position: relative !important;
    padding-right: 3.75rem !important
  }
  .is-flex [data-module="carousel"] .carousel .carousel-caption p {
    white-space: initial
  }
}
@media (max-width: 767px) {
    .carousel-home {
    margin-bottom: 0px !important
  }
  .carousel-home .carousel .carousel-caption {
    position: relative !important;
    padding: 20px 50px;
    width: auto;
    left: 0px;
    right: 0px;
  }
  .carousel-home .center-carousel {
    width: 100%
  }
}

/* carousel-fade */

.carousel:hover .carousel-caption {}


.carousel-caption {
  background-color: $dark
}

.carousel:hover .carousel-caption,
.carousel:focus .carousel-caption {
  background-color: $dark-dark !important;
}

.carousel-inner>.carousel-item {
  display: block;
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-duration: .6s;
  transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
  transform: translateX(0);
  transform: translate3d(0, 0, 0);
}