/* Color Usage */
/* Style Defaults */
/* Spacing */
/* Breakpoints */
/**
* X Height Offsets
* Used for aligning the top of side by side columns when one colum
* has an image and the other has text/header
*/
/* Easings*/
#carousel--split {
  height: 560px;
  background-color: #001;
  overflow: hidden; }
  @media (min-width: 64em) {
    #carousel--split {
      height: 655px; } }

.carousel--split-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  opacity: 0;
  transition: opacity 2s, transform 8s ease-in;
  transform: scale(1.05); }
  .carousel--split-bg.active {
    transform: scale(1);
    transition: opacity 2s, transform 4s ease-out;
    opacity: 1; }

.carousel--split-overlay {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(13, 49, 210, 0.75);
  background-image: linear-gradient(44deg, transparent, #0cabf9);
  width: 100%;
  left: 0; }
  @media (min-width: 40em) {
    .carousel--split-overlay {
      width: 66.66667%;
      left: 33.33333%; } }
  @media (min-width: 64em) {
    .carousel--split-overlay {
      width: 50%;
      left: 50%; } }

@media (min-width: 40em) {
  #carousel--split-text .slick-dots {
    text-align: left; } }