@charset "utf-8";
/* CSS Document */
.section {
    padding: 3rem 0;
}
.home-banner{
	background-color: var(--siteColor);
	color:#fff;
	position:relative;
	overflow:hidden;
}
.carousel-item > img{
	object-fit:cover;
}
/* Full-bleed background slider layer (markup: .banner-slider wraps the carousel).
   Content (.banner-search) is in normal flow and defines the banner height, so
   the hero can never clip; the slider stretches to match. */
.banner-slider{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
}
.banner-slider .carousel,
.banner-slider .carousel-inner,
.banner-slider .carousel-item,
.banner-slider .carousel-item > img{
	width:100%;
	height:100%;
}
.banner-search{
	position:relative;
	width:100%;
	z-index:9;
	padding:3.5rem 0;
	display:flex;
	align-items:center;
}
/* Dark tint between the image and the content — same treatment at every width. */
.banner-search:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	height: 100%;
	width: 100%;
	background-color:#000;
	opacity:0.5;
}
.banner-search > .container{
	position:relative; /* above the :before tint */
	width:100%;
}
.banner-search .form-control{
	border-color:#fff;
	height:40px;
}
.banner-search .btn-white{
	height:40px;
}
.home-banner .carousel-indicators{
    margin: 0;
    width: auto;
    bottom: 20px;
    transform: rotate(90deg) translate(-20px, 0px);
}
.home-banner .carousel-indicators > li{
	background-color:#000;
	border-radius: 50%;
	width: 15px;
    height: 15px;
}
.home-banner .carousel-indicators .active{
	background-color:var(--siteColor);
}

/* Media Screen */
@media only screen and (min-width: 992px) {
	.banner-search{
		min-height:475px;
	}
	.banner-search .form-control{
		height: 50px;
	}
	.banner-search .btn-white{
		font-size: 1.25rem;
		height: 50px;
	}
}

@media only screen and (min-width: 1200px) {
	.banner-search{
		min-height:575px;
	}
}

/* Hero CTA buttons: teal (site color) at all widths, not just mobile. */
.home-banner .banner-headline .btn-outline-white {
	background-color: var(--siteColor);
	border-color: var(--siteColor);
	color: #fff;
}
@media only screen and (max-width: 767.98px) {
	.banner-search{
		padding:2rem 0;
	}
	.home-banner .banner-headline .btn-outline-black {
		background-color:#000;
		border-color: #000;
		color: #fff;
	}

}




















/* END CSS */