/*------------------------------------------------------------------
carousel_split_screen.css
Last edited: 7/19/24
[Table of contents]

100. MEDIA QUERIES
    100a. EXTRA SMALL DEVICES (phones 576px and up)
    100b. SMALL DEVICES (tablets, 768px and up)
    100c. MEDIUM DEVICES (desktops, 992px and up)
    100d. LARGE DEVICES (large desktops, 1200px and up)
    100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)

[Notes]

PHP file: inc/banded_content/carousel_split_screen/carousel_split_screen.php

-------------------------------------------------------------------*/

/* add mobile CSS here */
.band-carousel-split-screen .container {
    padding: 0;
    width: 100%;
}
.band-carousel-split-screen .carousel-inner,
.band-carousel-split-screen .carousel-inner .item {
    height: 700px;
}
.band-carousel-split-screen .carousel-inner .item {
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}
.band-carousel-split-screen .carousel-caption {
    align-items: flex-start;
    color: inherit;
    display: flex;
    padding: 10px 15px 0;
    position: inherit;
}
.band-carousel-split-screen .slide-content {
    text-align: left;
    width: 100%;
}
.band-carousel-split-screen .slider-overtitle {
    font-size: 1.25px;
}
.band-carousel-split-screen .slide-content h1,
.band-carousel-split-screen .slide-content h2.h1 {
    color: #00467f;
    font-size: 36px;
    margin: 0 0 0.4em;
    text-align: left;
}
.band-carousel-split-screen .slide-intro {
    font-size: 1.25rem;
    line-height: 1.4;
}
.band-carousel-split-screen .slide-content .btn {
    margin-top: 0;
}
/* Carousel Indicators */
.band-carousel-split-screen .carousel-indicators {
    left: 0;
    margin-bottom: 0;
}
.band-carousel-split-screen .carousel-indicators button {
    background-color: #d6d6d8;
    border: none;
    border-radius: 50%;
    height: 20px;
    margin: 0 17px 30px 0;
    width: 20px;
}
.band-carousel-split-screen .carousel-indicators button:last-child {
    margin-right: 0;
}
.band-carousel-split-screen .carousel-indicators .active {
    background-color: #eb7a25;
    height: 20px;
    width: 20px;
}
/* Carousel Arrows */
.band-carousel-split-screen .carousel-control {
    z-index: 11;
}
.band-carousel-split-screen .carousel-control.left,
.band-carousel-split-screen .carousel-control.right {
    background-image: none;
}
.band-carousel-split-screen .carousel-control [class^="icon-"] {
    align-items: center;
    background: none;
    color: #ffffff;
    display: flex;
    font-weight: 700;
    height: 100%;
    position: absolute;
    right: 5%;
    top: 0;
}
.band-carousel-split-screen .left.carousel-control [class^="icon-"] {
    left: 5%;
}
.band-carousel-split-screen .carousel-control [class^="icon-"]:before {
    background: rgba(0, 0, 0, 0.75);
    border-radius: 50%;
    padding: 10px;
}
.band-carousel-split-screen.image_right_column .content-col,
.band-carousel-split-screen.image_left_column .img-col {
    order: 1;
}
.band-carousel-split-screen.image_right_column .img-col,
.band-carousel-split-screen.image_left_column .content-col {
    order: 2;
}
.band-carousel-split-screen .img-box {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 255px;
}

/*------------------------------------------------------------------
100. MEDIA QUERIES
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
100a. EXTRA SMALL DEVICES (phones 576px and up)
-------------------------------------------------------------------*/
@media (min-width: 576px) {
    .band-carousel-split-screen .carousel-inner,
    .band-carousel-split-screen .carousel-inner .item {
        height: 775px;
    }
    .band-carousel-split-screen .container {
        max-width: 100%;
    }
    .band-carousel-split-screen .carousel-caption {
        margin: 0 auto;
        max-width: 510px;
        padding: 25px 0 0;
    }
    .band-carousel-split-screen .img-box {
        height: 350px;
    }
}
/*------------------------------------------------------------------
100b. SMALL DEVICES (tablets, 768px and up)
-------------------------------------------------------------------*/
@media (min-width: 768px) {
    .band-carousel-split-screen .carousel-caption {
        max-width: 690px;
    }
    .band-carousel-split-screen .img-box {
        height: 425px;
    }
}

/*------------------------------------------------------------------
100c. MEDIUM DEVICES (desktops, 992px and up)
-------------------------------------------------------------------*/
@media (min-width: 992px) {
    .band-carousel-split-screen .carousel-inner,
    .band-carousel-split-screen .carousel-inner .item,
    .band-carousel-split-screen .carousel-caption,
    .band-carousel-split-screen .img-box {
        height: 800px;
    }
    .band-carousel-split-screen .container {
        max-width: 960px;
        padding: 0 15px;
    }
    .band-carousel-split-screen .carousel-inner .item {
        background-repeat: no-repeat;
        /*background-size: cover;*/
    }
    .band-carousel-split-screen .carousel-caption {
        align-items: center;
        height: 700px;
        padding: 0;
    }
    .band-carousel-split-screen .slider-overtitle {
        font-size: 1.5rem;
    }
    .band-carousel-split-screen .slide-content h1,
    .band-carousel-split-screen .slide-content h2.h1 {
        font-size: 50px;
    }
    .band-carousel-split-screen .slide-intro {
        font-size: 1.5rem;
    }
    .band-carousel-split-screen .slide-content .btn {
        margin-top: 10px;
    }
    .band-carousel-split-screen .content-box {
        position: relative;
    }

    .band-carousel-split-screen .img-col .content-box {
        display: block;
    }
    .band-carousel-split-screen.image-right .content-col .content-box {
        padding-right: 15px;
    }
    .band-carousel-split-screen .img-box {
        bottom: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: calc(50vw - 7.5px);
    }
    .band-carousel-split-screen.image-right .img-box {
        left: 35px;
    }
    .band-carousel-split-screen.image-left .img-box {
        right: 35px;
    }
    /* Carousel Indicators */
    .band-carousel-split-screen .carousel-indicators {
        justify-content: flex-start;
        margin: 0 auto 25px;
        max-width: 930px;
    }
    .band-carousel-split-screen.image-left .carousel-indicators {
        left: calc(50vw + 28px);
    }
}
/*------------------------------------------------------------------
100d. LARGE DEVICES (large desktops, 1200px and up)
-------------------------------------------------------------------*/
@media (min-width: 1200px) {
    .band-carousel-split-screen .container {
        max-width: 1140px;
    }
    /* Carousel Indicators */
    .band-carousel-split-screen .carousel-indicators {
        max-width: 1110px;
    }
}
/*------------------------------------------------------------------
100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)
-------------------------------------------------------------------*/
@media screen and (min-width: 1450px) {
    /* Carousel Indicators */
    .band-carousel-split-screen .container {
        max-width: 1390px;
    }
    .band-carousel-split-screen .carousel-indicators {
        max-width: 1360px;
    }
}