.realbody {
	overflow:visible;
}

.carousel {
	z-index:0;
}

.carousel-item {
	height: max(30em, calc(100vh - 400px));
	max-height:70vh;
	background-position:center center;
	background-size:cover;
}

.carousel-inner .carousel-item {
	transition: -webkit-transform 2s ease, opacity 2s ease-out;
	transition: transform 2s ease, opacity 2s ease-out;
	transition: transform 2s ease, -webkit-transform 2s ease, opacity 2s ease-out;
}

.carousel-item > .carousel-caption {
	background: linear-gradient(to right, transparent, var(--main-blue-trans));
	width: 60%;
/*	padding-left:20vw;*/
	padding-top:0.25em;
	height: 100%;
	right: 0;
	bottom: 0;
	left: auto;
	text-align: right;
}

.carousel-indicators {
	bottom:calc(5vw - 10px - 1em);
	left:unset;
	right:0;
	margin-right:calc(10vw + 15px);
}

.carousel-indicators li {
	height:10px;
	width:10px;
	margin-left:10px;
	border-radius:100%;
}

@media screen and (min-width: 84em) {
	.carousel-item > .carousel-caption {
		padding-right: 10vw !important;
		padding-left: 20vw;
	}

	.carousel-caption h2 {
		font-weight:500;
		font-size: 27px;
		padding-top: 20px;
	}
	.carousel-caption h1 {
	    font-size: calc(30px + 2em);
	}
}

@media screen and (max-width: 83.99em) {
	.carousel-item {
		max-height:80vh;
	}

	.carousel-item > .carousel-caption {
		padding-right:10vw;
		width:50%;
	}

	.carousel-caption > h1 {
		font-size: calc(20px + 2em);
	}

	.carousel-caption h2 {
		font-size: calc(10px + 0.75em);
	}

	.carouselSubHead {
		font-size: x-large;
	}

	.carousel-indicators {
		bottom: calc(6vw - 1em);
		left: unset;
		right: 0;
		margin-right: calc(10vw + 15px);
	}
}

@media screen and (max-width: 52em) {
	.carousel-item {
		height: calc(100vh - 185px);
		max-height: 50vh;
	}

	.carousel-item > .carousel-caption {
		width:100%;
		padding-top:2em;
		padding-right:5px;
		padding-left:10vw;
	}

	.carousel-caption h1 {
		font-size: 2.5em;
		margin-bottom: 10px;
	}

	.carousel-caption h2 {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 38.4em) {
	.carousel-item {
		height: calc(100vh - 340px);
		max-height: 80vh;
	}

	.carousel-item > .carousel-caption {		
		padding-top: 1.5em;
	}

	.carousel-caption h1 {
		font-size: 2.25em;
		margin-bottom: 10px;
	}

	.carousel-caption h2 {
		font-size: 1.25em;
	}
}

@media screen and (max-width: 22em) {
	.carousel-caption {
		width: 100% !important;
		padding: 2px !important;
	}

	.carousel-caption h1 {
		font-size: x-large!important;
	}

	.carousel-caption .carouselSubHead {
		font-size: small;
	}
}