/* Based on Bootstrap 5 carousel */

.carousel {position: relative;}

.carousel-item IMG {
    width:100% !important;
    max-width: initial;
    position:relative;
    bottom:0;
}

.carousel-item .videoWrapper {
    position: relative;
    padding-bottom: 47%;
    /* 16:9 */
    height:0;
    width: 80%;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-left:auto;
    margin-right:auto;
    margin-top:3%;
}

::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-inner::after {
    display: block;
    clear: both;
    content: "";
}

.carousel-item {
    position: relative;
    display: none;
    float: left;
    width:100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out;
}

.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {transform: translateX(100%);}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {transform: translateX(-100%);}

.carousel-item-next, 
.carousel-item-prev, 
.carousel-item.active {display: block;}


/* INDICATORS */

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: -40px;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-bottom: 1rem;
    border-radius:8px;
}

.carousel-indicators .active {opacity: 1 !important;}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 24px;
    height: 8px;
    padding: 0;
    margin-right: 4px;
    margin-left: 4px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: 0px;
    opacity: .5;
    transition: opacity .6s ease;
    border-radius:4px !important;
}

.d-block {display: block !important;}


/* LEFT & RIGHT CONTROLS */

.carousel-control-next span,
.carousel-control-prev span {background-color: #FF9B8D; border-radius: 4px;}

.carousel-control-next span:hover,
.carousel-control-prev span:hover {background-color: #ffffff;}

.carousel-control-next span:focus,
.carousel-control-prev span:focus {background-color: #ffffff;}

.carousel-control-prev {left: 0;}

.carousel-control-next {right: 0;}

.carousel-control-next, 
.carousel-control-prev {
    position: absolute;
    bottom: 50%;
    margin-left:-16px;
    margin-right:-16px;
    display: flex;
    padding: 0;
    text-align: center;
    background: 0 0;
    border: 0;
    z-index: 99;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon, 
.carousel-control-prev-icon {
    width: 32px;
    height:32px;
}

[type="button"]:not(:disabled), 
[type="reset"]:not(:disabled), 
[type="submit"]:not(:disabled), 
button:not(:disabled) {cursor: pointer;}