/* *****************************************************************************
    gallery-carousel.css
    main image with grid carousel on home page
   *****************************************************************************
*/

.gallery .carousel-indicators {
  left: 0;
  top: auto;
  bottom: 0px;
}

.gallery .carousel-indicators li {
  background: #a3a3a3;
  width: 4%;
  height: 2px;
  margin: 4px;
  border-radius: 0;
  border: 0;
}

.gallery .carousel-indicators .active {
  background: #707070;
}

.gallery .carousel-caption {
  color: #ffffff;
  font-weight: normal;
  font-size: 1.3em;
  margin-bottom: -20px;
}

.gallery .overlay-title {
  font-size: .7em;
  line-height: 1.4em;
  margin-bottom: 2px;
  color: #ffffff;
  padding: 4px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 4px;
  /*transform: translate(-50%, -10px);*/
}

#galleryCarousel .carousel-control-prev {
  top: 45%;
  bottom: 55%;
}

#galleryCarousel .carousel-control-next {
  top: 45%;
  bottom: 55%;
}

#galleryCarousel .carousel-control-prev {}

@media (min-width: 0px) {
  #galleryCarousel .carousel-control-prev {
    margin-left: 10px;
    top: 50%;
    bottom: 50%;
  }
}

@media (min-width: 768px) {
  #galleryCarousel .carousel-control-prev {
    margin-left: -20px;
    top: 45%;
    bottom: 55%;
  }
}

#galleryCarousel .carousel-control-next {}

@media (min-width: 0px) {
  #galleryCarousel .carousel-control-next {
    margin-right: 10px;
    top: 50%;
    bottom: 50%;
  }
}

@media (min-width: 768px) {
  #galleryCarousel .carousel-control-next {
    margin-right: -20px;
    top: 45%;
    bottom: 55%;
  }
}

/* *****************************************************************************
    carousel.css
    main image with grid carousel on home page
   *****************************************************************************
*/

.hide-bullets {
  list-style:none;
  margin-left: -30px;
  margin-right: 10px;
  margin-top: 20px;
}

.hide-bullets li {
  padding: 6px;
}

.thumbnail {
  padding: 0;
  border-radius: 0px;
}

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
  width: 100%;
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_transparent_bottom */
.mainImage {
  position: relative;
  color: white;
  font-weight:bold;
}

/* Bottom left text on main image */
.bottom-left {
  position: absolute;
  bottom: 0px;
  background: rgba(33, 58, 94, 0.5); /* blue background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 100%; /* Full width */
  padding: 10px; /* Some padding */
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

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

.carousel-fade .carousel-control {
  z-index: 2;
}

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}