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


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

#carousel-homepage {
    width:100%;
}
#carousel-homepage::before,
#carousel-homepage::after {
    content: "";
	position: absolute;
	left: 0;
	display: block;
	height: 6px;
    height: 0.5vw;
	width: 100%;
}
#carousel-homepage::before {
	top:0;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.05), transparent);
    z-index:10;
}
#carousel-homepage::after {
	bottom:0;
	background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.05));
}

#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 .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:#b71f19;
    color:#fff;
}
.carousel-caption .btn-light:hover {
	background-color:#fff;
    color:#b71f19;
    border-color: #b71f19;
}
.carousel-caption .btn-dark,
.carousel-caption .btn-dark:focus,
.carousel-caption .btn-dark:active {
	background-color:#002540;
	color:#fff;
}
.carousel-caption .btn-dark:hover {
	background-color: #fff;
    color:#002540;
    border-color: #002540;
}
.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;
}

/* --------------- 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-indicators {
        position:relative;
    }
    .carousel-caption {
        background-color: #fff;
        color:#444 !important;
        position: static;
        text-align: left;
        padding: 1.5rem 15px;
    }
    .carousel-caption h2 {
        color:#313131 !important;
        font-size: 1.75rem !important;
		font-weight:700;
    }
    .carousel-caption h3 {
        color:#313131 !important;
        font-size: 1.3125rem !important;
    }
    .carousel-caption .caption-details {
        color:#313131 !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%;
    }

}

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

@media (min-width: 768px) {

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

    .carousel-caption {
        font-size: 30px; /* Fallback */
        font-size:4vw;
        padding-top:3.5vw;
        padding-bottom:2.5vw;
        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;
    }
    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 {
        left:3%;
        right:53%;
        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: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,0,0,0.33);
    }
    .carousel-caption h2 {
        font-size: 100%;
        font-weight: 700;
        line-height: 1;
        margin-top:0;
        /*margin-bottom:.05em;*/
				margin-bottom:.4rem;
    }
    .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:36%;
        border-radius:1.0809em/50%;
        padding:.25em 1.25em .3125em 1.25em;
        margin-top:0;
    }
	
	.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;
		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:#b71f19;
        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 #b71f19;
    }
    .carousel-indicators button[data-bs-target].active {
        background-color:#b71f19;
    }
    .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;
    }
}