/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  /*height: 600px;*/
  margin-bottom: 60px;
  margin-top: 30px;
}
/* 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: 600px;
  /*background-color: #777;*/
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 600px;*/
}

.carousel .item {
    left: 0 !important;
      -webkit-transition: opacity .9s; /*adjust timing here */
         -moz-transition: opacity .9s;
           -o-transition: opacity .9s;
              transition: opacity .9s;
}
.carousel-control {
    background-image: none !important; /* remove background gradients on controls */
}
/* Fade controls with items */
.next.left,
.prev.right {
    opacity: 1;
    z-index: 1;
}
.active.left,
.active.right {
    opacity: 0;
    z-index: 2;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 300px) {

    .carousel .item {
  height: 172px;
  /*background-color: #777;*/
}
    .carousel {
  /*height: 600px;*/
  margin-bottom: 0px;
  margin-top: 30px;
}

}

@media (min-width: 320px) {

    .carousel .item {
  height: 172px;
  /*background-color: #777;*/
}
    .carousel {
  /*height: 600px;*/
  margin-bottom: 0px;
  margin-top: 30px;
}

}

@media (min-width: 400px) {

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }

  .carousel .item {
  height: 217px;
  /*background-color: #777;*/
}
    .carousel {
  /*height: 600px;*/
  margin-bottom: 0px;
  margin-top: 30px;
}

}

@media (min-width: 500px) {

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }

  .carousel .item {
  height: 273px;
  /*background-color: #777;*/
}
    .carousel {
  /*height: 600px;*/
  margin-bottom: 0px;
  margin-top: 30px;
}

}


@media (min-width: 768px) {

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }

  .carousel .item {
  height: 394px;
  /*background-color: #777;*/
}
    .carousel {
  /*height: 600px;*/
  margin-bottom: 0px;
  margin-top: 30px;
}

}

@media (min-width:980px) {

    .carousel .item {
  height: 394px;
  /*background-color: #777;*/
}
    .carousel {
  /*height: 600px;*/
  margin-bottom: 0px;
  margin-top: 30px;
}

}


@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 220px;
  }


}

@media (min-width:1000px) {

    .carousel .item {
  height: 540px;
  /*background-color: #777;*/
}
    .carousel {
  /*height: 600px;*/
  margin-bottom: 0px;
  margin-top: 30px;
}

}

@media (min-width:1280px) {

    .carousel .item {
  height: 648px;
  /*background-color: #777;*/
}
    .carousel {
  /*height: 600px;*/
  margin-bottom: 0px;
  margin-top: 30px;
}

}

@media (min-width:1920px) {

    .carousel .item {
  height: 648px;
  /*background-color: #777;*/
}
    .carousel {
  /*height: 600px;*/
  margin-bottom: 0px;
  margin-top: 30px;
}

}

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

        .active,
        .next.left,
        .prev.right {
            opacity: 1;
        }

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

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