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

/* Carousel base class */
.carousel {
  height:300px; 	 
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10; 
  margin-right:7%;
  text-align:left;
}

.carousel-caption{
	top:0px;
	bottom:auto;
}


.carousel .carousel-caption h1
{
	 font-size:1.6em;
	 display:inline-block;
 	 color:#fff; 
	 line-height:normal;
	 font-weight:600;
}

/* Declare heights because of positioning of img element */
.carousel .item {
   height:300px;	
   overflow:hidden;
  background-color: #777;
  background-size:cover;
  background-position:center center;
}
.carousel-inner > .item > img {
  position:absolute;
  top: 0;
  left: 0;
  width:auto;
  height:100%;
}

.carousel-control.right, .carousel-control.left{
	background:none;
}

 

/* RESPONSIVE CSS
-------------------------------------------------- */
 
@media (min-width: 768px) {
 
	/* Bump up size of carousel content */
	.carousel-caption p {
		margin-bottom: 20px;
		font-size: 21px;
		line-height: 1.4; 
	}
	.carousel { 
		height:450px;
		margin-bottom: 60px;
	}
	.carousel .item {
		height:450px;
	}
	.carousel .carousel-caption h1{
		font-size:3em; 
	}
	
	.carousel-caption{
		top:40px; 
	 	margin-right:10%;
		bottom:auto;
	}
}
@media (min-width: 800px) {
	.carousel-inner > .item > img {
	   
	  height:auto;
	}


}

@media (min-width: 980px) {

	.carousel { 
		height:550px;
		margin-bottom: 60px;
	}
	.carousel .item {
		height:550px;
	}
	.carousel-inner > .item > img {  
		min-width:100%;
		height:auto;
	}
	.carousel-caption{
		top:80px;
		bottom:auto;
		  margin-right:20%;
	}
}