/* Carousel base class */
.carousel {
  height: 300px;
  margin-top:30px;
  margin-bottom:30px;
  background:#f9f9f9;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
  left:2%;
  top:10%;
  width:60%;
}
.carousel-caption h3{ font-size:22px; font-weight:bold; color:#4ca1f4;}
.carousel-caption p{ line-height:24px; margin-top:20px;}
.carousel-indicators{ bottom:20px !important;}
.carousel-indicators li{ background:#e8e8e8;}
.carousel-indicators .active{ background:#333;}
/* Declare heights because of positioning of img element */
.carousel .item {
  height: 300px;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 20%;
  right: 3%;
}
.carousel-inner > .item.sdd > img {
  position: absolute;
  top:0; left:0;
}
/*  #Mobile (Portrait) 320px
----------------------------------------------------------------------*/
@media only screen and (min-width: 100px) and (max-width: 320px) {
	  .carousel{height: 430px;}
	  .carousel-inner{ text-align:center;}
	  .carousel .item{ text-align:center; height: 440px;}
	  .carousel-inner > .item > img{ text-align:center; display:inline-block; top:0;left:0; position:relative;}
	  .carousel-caption{ width:100%; text-align:center; top:30%; font-size:13px;}
	  .carousel-inner > .item.sdd > img {
  position: absolute;
  top:0; left:0;
  height:100%;
}
}
/*  #Mobile (Portrait) 478px
----------------------------------------------------------------------*/
@media only screen and (min-width: 321px) and (max-width: 478px) {
	  .carousel{height: 430px;}
	  .carousel-inner{ text-align:center;height: 440px;}
	  .carousel .item{ text-align:center;}
	  .carousel-inner > .item > img{ text-align:center; display:inline-block; top:0;left:0; position:relative;}
	  .carousel-caption{ width:100%; text-align:center; top:30%; font-size:13px;}
}

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

@media (min-width: 768px) {

  /* Bump up size of carousel content */

  .carousel-caption p {
    margin-bottom: 20px;
  }

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

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