/* ----------------------------------------------- */
/* CAROUSEL */
/* ----------------------------------------------- */

/* --------------- Homepage Banner Ad Carousel --------------- */

#carousel-homepage {
    width:100%;
    height:0;
	margin-bottom: 3rem;
    padding-bottom:27.380952%; /* 460/1680 */
    background-color:#eee;
}

#carousel-homepage:before,
#carousel-homepage:after {
    content: "";
	position: absolute;
	left: 0;
	display: block;
	height: 6px;
    height: 0.5vw;
	width: 100%;
	z-index:10;
}
#carousel-homepage .carousel-inner .carousel-item,
#banner-ad-page .carousel-item {
    width:100%;
    height:0;
    padding-bottom:27.380952%; /* 460/1680 */
    background-color:#eee;
	background-repeat:no-repeat;
	background-position:left top;
	background-size:cover;
}
#carousel-homepage .carousel-inner > .active,
#carousel-homepage .carousel-inner > .carousel-item-next,
#carousel-homepage .carousel-inner > .carousel-item-prev {
	padding-bottom:27.380952%; /* 460/1680 */
}

/* Clickable transparent overlay to make the entire
banner clickable in the absence of a button */
#carousel-homepage .pass-through,
#banner-ad-page .pass-through {
    position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:0;
	padding-bottom:27.380952%; /* 460/1680 */
	z-index:11;
	background-color:transparent;
}

/* Trick to restart CSS Animation */
.carousel-item-left.active .animated,
.carousel-item-right.active .animated,
.carousel-item-next .animated,
.carousel-item-prev .animated {
	-webkit-animation: nonexistent;
	animation: nonexistent;
}

/* --------------- Carousel Captions --------------- */

.carousel-caption {
	font-size:12px;
    font-size:4vw;
    padding-top:2vw;
	padding-bottom:2vw;
	text-shadow:none;
	cursor:default;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;
    top:0;
    bottom:0;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.caption-top .carousel-caption {
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}
.caption-vertical-center .carousel-caption {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
.caption-bottom .carousel-caption {
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
}
.carousel-caption :last-child {
    margin-bottom:0;
}
.caption-left .carousel-caption {
	left:3%;
	right:47%;
    text-align:left;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.caption-center .carousel-caption {
	left:3%;
    right:3%;
    -ms-flex-pack: center;
    justify-content: center;
}
.caption-right .carousel-caption {
	left:47%;
	right:3%;
    text-align:right;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.text-shadow {
	text-shadow: 0.025em 0.025em 0.05em rgba(0,0,0,0.33);
}
.carousel-caption h2 {
    font-size: 100%;
    font-weight: 700;
	margin-top:0;
	margin-bottom:.2em;
}
.carousel-caption h3 {
	font-size: 70%;
	font-weight:400;
	margin-top:0;
	margin-bottom:0.2em;
    line-height: 1.2;
}
.carousel-caption .details-text {
	font-size: 50%;
	font-weight:400;
    margin-bottom: .2em;
    line-height: 1.3;
}
.carousel-caption h2,
.carousel-caption h3,
.carousel-caption .details-text {
    width:100%;
}
.carousel-caption .details-text p {
    margin-bottom:.2em;
}
.carousel-caption .details-text a {
    color:inherit;
	text-decoration:underline;
}
.carousel-caption .details-text a:hover {
	text-decoration:none;
}
.carousel-caption .details-text .row .btn {
    display: block;
	width:100%;
    white-space: normal;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
.carousel-caption ul {
	list-style-position:inside;
}
.carousel-caption .btn-primary,
.carousel-caption .btn-primary:focus,
.carousel-caption .btn-primary:active {
    font-size:36%;
    border: 2px solid transparent;
    border-radius: 2rem;
    padding:.25em 1.25em .3125em 1.25em;
    margin-top:.8em;
}
.caption-left .btn-primary {
    margin-right:1vw;
}
.caption-center .btn-primary {
    margin-left:.5vw;
    margin-right:.5vw;
}
.caption-right .btn-primary {
    margin-left:1vw;
}
.carousel-caption .btn-light,
.carousel-caption .btn-light:focus,
.carousel-caption .btn-light:active {
	background-color:#2c8352;
    color:#fff;
}
.carousel-caption .btn-light:hover {
	background-color:#fff;
    color:#2c8352;
    border-color: #2c8352;
}
.carousel-caption .btn-dark,
.carousel-caption .btn-dark:focus,
.carousel-caption .btn-dark:active {
	background-color:#3b6183;
	color:#fff;
}
.carousel-caption .btn-dark:hover {
	background-color: #fff;
    color:#3b6183;
    border-color: #3b6183;
}

/* --------------- Banner Ad Page --------------- */

#banner-ad-page .carousel-item {
    position:relative;
    overflow:hidden;
    display: block;
    margin-right: 0;
}

/* ----------------------------------------------- */
/* SM and wider */
/* ----------------------------------------------- */

@media (min-width: 576px) {
	.carousel-caption {
		font-size: 23px; /* Fallback if vw unit is not supported */
        font-size:4vw;
	}
}

/* ----------------------------------------------- */
/* MD and wider */
/* ----------------------------------------------- */

@media (min-width: 768px) {

	.carousel-caption {
		font-size: 30px; /* Fallback */
        font-size:4vw;
    }
    
    /* Carousel Indicators */

    .carousel-indicators {
		bottom:.5rem;
        margin:0 15px;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    .carousel-indicators button[data-bs-target].active {
        background-color:transparent;
    }
    .carousel-indicators button[data-bs-target]::before,
    .carousel-indicators button[data-bs-target]::after {
        display: none;
    }
	
    .carousel-indicators button,
	.carousel-indicators button[data-bs-target] {
        width:14px;
        height:14px;
        padding:0;
        margin:4px;
        background-color:#fff;
		background-clip:border-box;
        color:#2c8352;
        border: 3px solid #fff;
        border-radius: 10px;
        box-shadow:0 0 3px rgba(0,0,0,0.3);
        cursor: pointer;
        position: relative;
		opacity:1;
    }

    .carousel-indicators button[data-bs-target]:focus {
        outline:0 none;
        box-shadow: 0 0 0 3px #2c8352;
    }
    .carousel-indicators button[data-bs-target].active {
        background-color:#2c8352;
    }
    .carousel-indicators button.togglePausePlay {
        width:calc(2.5rem + 6px);
		height:20px;
    }
    .carousel-indicators button.togglePausePlay {
        width:2.5rem;
    }
    .carousel-indicators button.togglePausePlay::after,
    .carousel-indicators button.togglePausePlay[aria-label="Pause"]::after {
        content:'';
        display:block;
        width:12px;
        height: 12px;
        background: url(../images/play-pause-sprite.png) no-repeat 0 0 transparent;
        background-size: 12px 24px;
        position: absolute;
        top:1px;
        left:.675rem;
    }
    .carousel-indicators button.togglePausePlay[aria-label="Play"]::after {
        background-position: 0 -12px;
    }

}

/* ----------------------------------------------- */
/* LG and wider */
/* ----------------------------------------------- */

@media (min-width: 992px) {
	.carousel-caption {
		font-size: 39px; /* Fallback */
		font-size:4vw;
	}
}

/* ----------------------------------------------- */
/* XL and wider */
/* ----------------------------------------------- */

@media (min-width: 1200px) {
	.carousel-caption {
		font-size: 48px; /* Fallback */
		font-size:4vw;
    }
}