.carousel {
  margin-bottom: 40px;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;

  > .active,
  > .next,
  > .prev {
    width: 100%;
  }
}

.carousel-indicators {
  bottom: -45px;
  z-index: 1;

  li, > div {
    margin-right: 5px;
    transition: background $transition-time;
  }
  .active {
    width: 10px;
    height: 10px;
    margin: 1px 5px 1px 1px;
    background-color: $carousel-indicator-active-bg;
  }
}
.carousel-control {
  opacity: 1;
  filter: drop-shadow(2px 4px 2px rgba(0,0,0,.5));
  width: 10%;
}
@media (max-width: $grid-float-breakpoint-max) {
  .carousel-indicators {
    bottom: -45px;
  }
  .widgets_hotelgallerywidget {
    margin-bottom: 25px;
  }
}


// Scale up controls for tablets and up
@media screen and (min-width: $screen-sm-min) {

  // Scale up the controls a smidge
  .carousel-control {
    .glyphicon-chevron-left,
    .glyphicon-chevron-right,
    .icon-prev,
    .icon-next {
      width: 30px;
      height: 30px;
      margin-top: -15px;
      font-size: 30px;
    }
    .glyphicon-chevron-left,
    .icon-prev {
      margin-left: -15px;
    }
    .glyphicon-chevron-right,
    .icon-next {
      margin-right: -15px;
    }
  }

  // Move up the indicators
  .carousel-indicators {
    bottom: -35px;
  }
}

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

    .item,
    .active.left,
    .active.right {
      @include opacity(0);
    }

    .active,
    .next.left,
    .prev.right {
      @include opacity(1);
    }

    .next,
    .prev,
    .active.left,
    .active.right {
      left: 0;
      transform: translate3d(0, 0, 0);
    }
  }

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