/* Parallax animation effects */
.hero-carousel .carousel-item .carousel-image{
  transform: scale(1) translateX(0);
  transition: all 0.5s;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateX(-10deg);

}

.hero-carousel .carousel-item.carousel-item-next .carousel-image,
.hero-carousel .carousel-item.active.carousel-item-right .carousel-image{
  transform: scale(1.3) translateX(-50%);
}

.hero-carousel .carousel-item.carousel-item-prev .carousel-image,
.hero-carousel .carousel-item.active.carousel-item-left .carousel-image{
  transform: scale(-0.5) translateX(50%);
}

.hero-carousel .carousel-item.carousel-item-next.carousel-item-left .carousel-image,
.hero-carousel .carousel-item.carousel-item-prev.carousel-item-right .carousel-image{
  transform: scale(1) translateY(-0.5%) translateX(-1%);
  transform: rotateX(10deg) rotateX(-10deg);
  perspective: 100px;
}


/* Makes carousel full screen */
.hero-carousel .carousel-item{
  height: 40em;
  overflow: hidden;

}
.hero-carousel .carousel-item .carousel-image{
  height: 100%;
  background-position:  0 75px;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width:800px) {
        .hero-carousel .carousel-item{
          height: 45vh;
        }

          .hero-carousel .carousel-item .carousel-image{
            background-size: contain;
          background-position:  4 10px;
          background-repeat: no-repeat;

        }
  }


/* Ignore this CSS */
#carouselExampleIndicators{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}