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

/* Carousel base class */
.carousel {
  /*margin-bottom: 4rem;*/
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 0rem;
  /*bottom: 10rem;*/
  z-index: 10;
  right: 0%;
  left: 0%;
}
.carousel-caption  h1 {
	color: #FAEEAF;
	font-family: TrashHand, Stories;
	text-shadow: 10px 10px #000;
	font-size: 9rem;
}
.carousel-caption h1, 
.carousel-caption p {
	padding-left: 6%;
	padding-right: 6%;
	text-align: left;
}
.carousel-caption h2{
	background: rgba(51,51,51,0.4);
	font-size: 2.8rem;
	font-weight: normal;
	padding: 0.5rem;
	color: #FAEEAF;
}

.carousel-caption .banner-label {
	width: 16vw; 
	min-width: 200px;
}
.carousel-caption .btn-joinnow {
	margin-left: 10vw;
	margin-right: 2vw;
}
@media (min-width: 1081px) and (max-width: 1378px) {
	.carousel-caption  h1 {
		font-size: 6.5rem;
	}
	.carousel-caption  h2 {
		font-size: 2.5rem;
	}
}
@media (max-width: 1080px) {
	.carousel-caption  h1 {
		font-size: 5rem;
	}
	.carousel-caption  h2 {
		font-size: 2.2rem;
	}
}
@media (max-width: 680px) {
	.carousel-caption  h1 {
		font-size: 4rem;
	}
	.carousel-caption  h2 {
		font-size: 2rem;
	}
}
@media (max-width: 550px) {
	.carousel-caption  h1 {
		font-size: 3.6rem;
	}
	.carousel-caption  h2 {
		font-size: 1.75rem;
	}
	.carousel-caption .banner-label {
		width: 12vw; 
		min-width: 150px;
	}
	.carousel-caption .btn-joinnow {
		margin-left: 5vw;
		margin-right: 2vw;
	}
}
@media (max-width: 450px) {
	.carousel-caption  h1 {
		font-size: 3.2rem;
	}
	.carousel-caption .banner-label {
		width: 10vw; 
		min-width: 120px;
	}
	.carousel-caption .btn-joinnow {
		margin-left: 0vw;
		margin-right: 2vw;
	}
}
/* Declare heights because of positioning of img element */
.carousel-item {
  /*height: 32rem;*/
  height: 40rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 32rem;*/
}

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

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
}