/*------------------------------------------------------------------
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: var(--theme-color-light);
  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 .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;
  }
}