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

/* Carousel base class */
.carousel {
  height: 400px;
  margin-bottom: 40px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
	width:100%
	height:100%
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 400px;
  background-color: #777;
 }

.carousel-inner > .item > img {
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 100%;
  height: 400px;
}

.carousel-inner {
 	overflow: visible;
 	top: 0px;
 	left:0px;
}

.carousel-caption {
  top: 75px;
  left: 10%;
  right: 10%;
  bottom: 0px;
  
  z-index: 10;
  padding-top: 0px;
  padding-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
}

.carousel-indicators {
  top: 375px;
}

.carousel-control {
  width: 50px;
}

.carousel li {
	list-style-image : url('../image/grosse-pastille-rouge.svg');
	list-style-position:outside;
	font-size: 18px;
	font-weight: bold;
	padding-left:0px;
	padding-bottom:0px;
}

.my-img-responsive {
  width:50%;
  height: auto;
	position:absolute;
	top:0px;
	left:0px;
	max-width: 350px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
/* Large desktop */
@media (min-width: 1200px) {
	.carousel {
  	height: 500px;
	}

	.carousel .item {
	  height: 500px;
	}

	.carousel-inner > .item > img {
	  height: 500px;
	}

	.carousel-indicators {
	  top: 470px;
	}

	.carousel-caption {
		max-width: 990px;
	}

	.my-img-responsive {
		top : 0px;
		max-width: 450px;
	}

	.carousel-caption h2 {
		font-size: 30px;
	}

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

}

/* Normal desktop */
@media (min-width: 980px) and (max-width: 1199px) {
	.carousel {
  	height: 400px;
	}

	.carousel .item {
	  height: 400px;
	}

	.carousel-inner > .item > img {
	  height: 400px;
	}

	.carousel-indicators {
	  top: 375px;
	}

	.carousel-caption {
		max-width: 800px;
	}

	.my-img-responsive {
		top : 0px;
		max-width: 350px;
	}

	.carousel-caption h2 {
		font-size: 25px;
	}
	
	.carousel-caption p {
		font-size: 20px;
		margin-bottom:15px;
	}

}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	.carousel {
  	height: 400px;
	}

	.carousel .item {
	  height: 400px;
	}

	.carousel-inner > .item > img {
	  height: 400px;
	}

	.carousel-indicators {
	  top: 375px;
	}

	.carousel-caption {
		max-width: 650px;
	}

	.my-img-responsive {
		top : 8%;
		left : -5%;
		max-width: 320px;
	}

	.carousel-caption h2 {
		font-size: 25px;
	}
	
	.carousel-caption p {
		font-size: 16px;
		margin-bottom:15px;
	}

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 480px) and (max-width: 767px) {
	.carousel {
  	height: 350px;
	}

	.carousel .item {
	  height: 350px;
	}

	.carousel-inner > .item > img {
	  height: 350px;
	}

	.carousel-indicators {
	  top: 325px;
	}

	.carousel-caption {
		max-width: 500px;
	}

	.my-img-responsive {
		width:53%;
		top : 7%;
		left:-5%;
		max-width: 280px;
	}

	.carousel-caption h2 {
		font-size: 20px;
		margin:0px;
	}
	
	.carousel-caption p {
		font-size: 13px;
		margin-bottom:10px;
	}

}

/* Landscape phones and down */
@media (max-width: 480px) {

	.carousel-control {
	  width: 20px;
	}

	.carousel {
  	height: 400px;
	}

	.carousel .item {
	  height: 400px;
	}

	.carousel-inner > .item > img {
	  height: 400px;
	}

	.carousel-indicators {
	  top: 375px;
	}

	.my-img-responsive {
		top : 10%;
		left: -5%;
		max-width: 210px;
		#min-width: 210px;
	}

	.carousel-caption h2 {
		font-size: 18px;
		margin:0px;
	}
	
	.carousel-caption p {
		font-size: 12px;
		margin-bottom:10px;
	}

}