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


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

#carousel-homepage {
    width:100%;
	margin: 0 0 5rem;
}

#carousel-homepage .carousel-inner .carousel-item,
#banner-ad-page .carousel-item {
    width:100%;
}

#carousel-homepage .carousel-inner .carousel-item > a,
#banner-ad-page .carousel-item > a {
    display: block;
    text-decoration: none;
}

/* 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-caption {
	border-radius:1rem;
	background:#003c71;
}
.carousel-caption-inner {
	padding: 1rem;
}
.carousel-caption .caption-details p {
    margin-bottom:.2em;
}
.carousel-caption .caption-details .row .btn {
    display: block;
	width:100%;
    white-space: normal;
    padding-left: 0;
    padding-right: 0.5em;
}
.carousel-caption ul {
	list-style-position:inside;
}
/*.caption-left .carousel-caption {
	text-align:left;
    }*/
/*.caption-left .btn {
    margin-right:1vw;
}*/
.caption-center .btn {
    margin-left:.5vw;
    margin-right:.5vw;
}
.caption-right .btn {
    margin-left:1vw;
}
.carousel-caption .btn-light,
.carousel-caption .btn-light:focus,
.carousel-caption .btn-light:active {
	background-color:#fff;
    color:#003c71;
	border-color: #003c71;
}
.carousel-caption .btn-light:hover {
	background-color:#003c71;
    color:#fff;
    border-color: #003c71;
}
.carousel-caption .btn-dark,
.carousel-caption .btn-dark:focus,
.carousel-caption .btn-dark:active {
	background-color:#003c71;
	color:#fff;
}
.carousel-caption .btn-dark:hover {
	background-color: #fff;
    color:#003c71;
    border-color: #003c71;
}
.carousel-caption ul:first-child,
.carousel-caption ol:first-child {
    margin-top:.5rem;
}
.carousel-caption ul li {
	list-style-type:none;
	margin:0 0 .15rem 0;
	padding-left:1.5rem;
	text-indent:-.5rem;
}
.carousel-caption ul li::before {
    content: '✓';
    display: inline-block;
	font-weight:900;
    position: relative;
    margin-right: 10px;
	margin-left: -14px;
	left:-.5rem;
}
.carousel-image-col img {
	border-radius:1rem;
	width:100%;
}

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

#banner-ad-page {
    margin-top:50vh;
    margin-bottom:50vh;
}
#banner-ad-page .carousel-item {
    position:relative;
    overflow:hidden;
    display: block;
    float:none;
    margin-right: 0;
    margin-bottom:50px;
}




/* XS and SM only */


@media (max-width: 767px) {

	#carousel-homepage {
		margin-top:2rem;
	}
    .carousel-indicators {
        position:relative;
    }
	.carousel-text-col {
		margin-top: -20%;
	}
    .carousel-caption {
        /*background-color: #fff;
        color:#444 !important;*/
        position: static;
        padding: 1.5rem 15px 1rem;
    }
    .carousel-caption h2 {
        /*color:#314568 !important;*/
        font-size: 1.75rem !important;
    }
    .carousel-caption h3 {
        /*color:#014065 !important;*/
        font-size: 1.3125rem !important;
    }
    .carousel-caption .caption-details {
        /*color:#444 !important;*/
        font-size: 1.125rem !important;
    }
		.carousel-caption .caption-details ul li,
		.carousel-caption .caption-details ol li {
				padding-left: 0;
				text-indent: 0;
				margin-bottom:0.4rem;
		}
    .carousel-caption .btn {
        margin-top: 1rem;
        margin-bottom: .5rem;
    }
    /*.carousel-caption .caption-details > table {
        margin:0 auto;
    }*/

    .parallax-js #carousel-homepage .caption-left .parallax > img,
    .parallax-js #banner-ad-page .caption-left .parallax > img {
        width:200% !important;
        min-width: 200%;
        left:0;
    }
    .parallax-js #carousel-homepage .caption-center .parallax > img,
    .parallax-js #banner-ad-page .caption-center .parallax > img {
        width:200% !important;
        min-width: 200%;
        left:50%;
    }
    .parallax-js #carousel-homepage .caption-right .parallax > img,
    .parallax-js #banner-ad-page .caption-right .parallax > img {
        width:200% !important;
        min-width: 200%;
        left:100%;
    }

}
@media (max-width: 991px) {
	
	#carousel-homepage {
		background:#f1f1f1;
		padding:2rem 0;
		margin-top:0;
		/*min-height:800px;*/
	}
	.carousel-image-col img {
		width:70%;
		margin:0 auto;
	}
	.carousel-text-col {
		width:65%;
		margin-top:-9rem;
	}
	.carousel-caption {
		text-align: center;
	}
	.carousel-caption-inner {
		padding:1rem 0;
	}
	
}

@media (max-width: 575px) {
	.carousel-image-col img {
		width:95%;
	}
	.carousel-text-col {
		width:90%;
		margin-top:-5rem;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	
	.carousel-image-col img {
		width:80%;
	}
	.carousel-text-col {
		width:75%;
		margin-top:-7rem;
	}
}

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

@media (min-width: 768px) {

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

    .carousel-caption {
        position:relative;
		font-size: 30px; /* Fallback */
		padding:30px;
		right:0;
		left:0;
		bottom:0;
        /*font-size:4vw;
        padding-top:3.5vw;
        padding-bottom:2.5vw;
		padding-left:2.5vw;
		padding-right:2.5vw;
        text-shadow:none;
        cursor:default;
        -webkit-user-select: none;  
        -moz-user-select: none;    
        -ms-user-select: none;     
        user-select: none;
        top:0;
        bottom:0;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;*/
    }
    a .carousel-caption {
        cursor: pointer;
    }
    .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 {
        /*text-align:left;*/
		/*left:3%;
        right:53%;
        -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:53%;
        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,60,113,0.33);
    }
    .carousel-caption h2 {
        font-size: 100%;
        font-weight: 700;
        line-height: 1;
        margin-top:0;
        /*margin-bottom:.05em;*/
		/*margin-bottom:.4rem;*/
		margin-bottom:1rem;
    }
    .carousel-caption h3 {
        font-size: 70%;
        font-weight:400;
        margin-top:0;
        /*margin-bottom:0.2em;*/
				margin-bottom:.4rem;
        line-height: 1.2;
    }
    .carousel-caption .caption-details {
        font-size: 50%;
        font-weight:400;
        margin-bottom: .2em;
        line-height: 1.3;
    }
    .carousel-caption h2,
    .carousel-caption h3,
    .carousel-caption .caption-details {
        width:100%;
    }
    .carousel-caption .caption-details a {
        color:inherit;
        text-decoration:underline;
    }
    .carousel-caption .caption-details a:hover {
        text-decoration:none;
    }

    .carousel-caption .btn,
    .carousel-caption .btn:focus,
    .carousel-caption .btn:active {
        font-size:30%;
		/*font-size:1.8vmax;*/
        border-radius:1.0809em/50%;
        padding:.25em 1.25em .3125em 1.25em;
        margin-top:0;
    }
	
	.carousel-caption {
		/*font-size: 30px;*/ /* Fallback */
        /*font-size:6vw;*/
		font-size:50px;
    }
    
    /* Carousel Indicators */

    .carousel-indicators {
		bottom:-2.2rem;
        margin:0 15px;
        /*-webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
		width: auto;
        left: auto;*/
    }
    .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:#003c71;
        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 #003c71;
    }
    .carousel-indicators button[data-bs-target].active {
        background-color:#003c71;
    }
    .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:6vw;
		text-align:left;
	}
}

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

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

@media (min-width: 1800px) {
	.carousel-caption {
		font-size: 90px; /* Fallback */
		/*font-size:4.5vmax;*/
		/*font-size:5vmax;*/
    }
	/*.carousel-caption .btn, 
	.carousel-caption .btn:focus,
	.carousel-caption .btn:active {
		 font-size:1.1vmax;
	}*/
}