/* Carousel base class */
.carousel {
  height: 100%;
  margin-bottom: 0px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
    height: 100%;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}




.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  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;
}

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 750px !important;
  min-height: 100% !important;
  z-index: 0;   
}





/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
    #myCarousel {
        height: 650px;   
        
    }
    .carousel-inner {
        height: 650px;   
    }
}

@media (min-width: 1200px) {
    #myCarousel {
        height: 850px;   
    }
    .carousel-inner {
        height: 850px;   
    }
}