/* Carousel base class */
#uctCarousel {
	color: white;
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1.5rem;
	line-height: 1.8;
}

/* Declare heights because of positioning of img element */
#uctCarousel .carousel-inner, #uctCarousel .carousel-item {
	height: 37rem;
}

#uctCarousel .carousel-item>img {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
}

/*
 Carousel fade effects 
 */
.carousel-fade .carousel-item {
	display: block;
	position: absolute;
	opacity: 0;
	transition: opacity 1.25s ease-in-out;
}
/* allow to select the items in the active caption (buttons, text, etc.) */
.carousel-fade .carousel-item img {
	z-index: -1;
}

.carousel-fade .carousel-item .carousel-caption, .carousel-fade .carousel-item .carousel-caption {
	z-index: -1;
}

.carousel-fade .carousel-item.active, .carousel-fade .carousel-item.active .carousel-caption {
	z-index: 1;
	opacity: 1;
}
/* controls should come over the rest */
.carousel-control-prev, .carousel-control-next {
	z-index: 10;
}

/* captions */
.carousel-caption, .carousel-caption p {
	font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1.5rem;
}

.headline-text-sm {
	font-size: 0.7rem;
	background-color: rgba(255, 255, 255, 0.76);
}

.headline-text-md {
	font-size: 1.3rem;
	background-color: rgba(0, 57, 119, 0.55);
}

.headline-text-lg {
	font-size: 1.7rem;
	background-color: rgba(0, 57, 119, 0.55);
}

/* Small devices (landscape phones, 576px and up) */
@media ( min-width : 576px) {
	#uctCarousel p {
		font-size: 1.8rem;
	}
	.headline-text-md {
		font-size: 1.8rem;
	}
	.headline-text-lg {
		font-size: 2.5rem;
	}
}

/* Medium devices (tablets, 768px and up) */
@media ( min-width : 768px) {
	#uctCarousel p {
		font-size: 2.3rem;
	}
	.headline-text-sm {
		font-size: 0.8rem;
	}
	.headline-text-md {
		font-size: 2.3rem;
	}
	.headline-text-lg {
		font-size: 2.8rem;
	}
}

/* Large devices (desktops, 992px and up) */
@media ( min-width : 992px) {
	#uctCarousel p {
		font-size: 2.5rem;
	}
	.headline-text-md {
		font-size: 2.3rem;
	}
	.headline-text-lg {
		font-size: 3rem;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media ( min-width : 1200px) {
}

.carousel-item.showcase {
	background: linear-gradient(279deg, #8098b3, #113E74);
}

.carousel-item .span {
	color: white;
}