.cu-banner {
  position: relative; }

/*=============================================
=            Panel banner            =
=============================================*/
.cu-banner--panel {
  padding: 1em 33% 1em 2em; }
  @media (min-width: 61rem) {
    .cu-banner--panel {
      display: grid;
      grid-template-columns: 66% 34%;
      padding: 0; } }
  @media (min-width: 61rem) {
    .cu-banner--panel .cu-banner__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: var(--cu-vr1) var(--cu-ps2); } }
  .cu-banner--panel .cu-button {
    align-self: flex-start; }
  .cu-banner--panel .cu-banner__media {
    position: relative;
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    max-width: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .cu-banner--panel .cu-banner__media::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      background: rgba(0, 0, 0, var(--cu-overlay-opacity, 0.5));
      z-index: 2; }
    .cu-banner--panel .cu-banner__media img, .cu-banner--panel .cu-banner__media video {
      object-fit: cover;
      width: 100%;
      height: 100%; }
    .cu-banner--panel .cu-banner__media :not(img):not(video) {
      display: contents; }
    @media (min-width: 61rem) {
      .cu-banner--panel .cu-banner__media {
        position: relative;
        grid-column: 1;
        grid-row: 1; } }

@media (min-width: 61rem) {
  .cu-banner--panel-left {
    grid-template-columns: 34% 66%; } }

@media (min-width: 61rem) {
  .cu-banner--panel-left .cu-banner__media {
    grid-column: 2; } }

/*=============================================
=            Page banner                      =
=============================================*/
.cu-banner--page {
  padding: var(--cu-vr1); }
  .cu-banner--page.cu-banner--with-media {
    --cu-text-color: #fff; }
  .cu-banner--page.cu-banner--with-media.cu-colorscheme--light .cu-button {
    --cu-text-color: #222; }
  @media (min-width: 37.5rem) {
    .cu-banner--page {
      padding: var(--cu-vr1) var(--cu-vr2); } }
  @media (min-width: 61rem) {
    .cu-banner--page {
      padding: var(--cu-vr1) var(--cu-vr4); } }
  .cu-banner--page .cu-breadcrumb {
    margin-bottom: var(--cu-vr1); }
  .cu-banner--page .cu-banner__content {
    max-width: var(--cu-max-width-section, 1060px);
    margin: 0 auto;
    z-index: 2;
    position: relative; }
  .cu-banner--page .cu-banner__summary {
    margin-bottom: var(--cu-vr2); }
  .cu-banner--page .cu-banner__list-heading {
    --cu-font-size: var(--cu-ms0);
    --cu-font-weight: bold !important; }
  .cu-banner--page .cu-banner__list {
    --cu-font-size: var(--cu-ms-1);
    padding: 0;
    list-style-type: none; }
  .cu-banner--page .cu-banner__list-item {
    padding-bottom: var(--cu-vr-1);
    margin-bottom: var(--cu-vr-1);
    max-width: 75%;
    position: relative; }
    .cu-banner--page .cu-banner__list-item::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 10%;
      max-width: 100%;
      padding: .25em 0 0 0;
      border-bottom: 4px solid var(--cu-color-brand, #b31b1b); }
  .cu-banner--page .cu-banner__media {
    position: relative;
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    max-width: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; }
    .cu-banner--page .cu-banner__media::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      background: rgba(0, 0, 0, var(--cu-overlay-opacity, 0.5));
      z-index: 2; }
    .cu-banner--page .cu-banner__media img, .cu-banner--page .cu-banner__media video {
      object-fit: cover;
      width: 100%;
      height: 100%; }
    .cu-banner--page .cu-banner__media :not(img):not(video) {
      display: contents; }

/*=====  End of Page banner  ======*/
/*=============================================
=            Video banner                     =
=============================================*/
.cu-banner--video .cu-banner__content {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--cu-vr1) var(--cu-ps1);
  z-index: 1; }
  .cu-banner--video .cu-banner__content > * {
    pointer-events: auto; }
  @media (min-width: 80rem) {
    .cu-banner--video .cu-banner__content {
      padding: var(--cu-vr1) var(--cu-ps3); } }
  .cu-banner--video .cu-banner__content--align-bottom {
    justify-content: flex-end; }

.cu-banner--video .cu-banner__media {
  overflow: hidden;
  max-width: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  .cu-banner--video .cu-banner__media img, .cu-banner--video .cu-banner__media video {
    object-fit: cover;
    width: 100%;
    height: 100%; }
  .cu-banner--video .cu-banner__media :not(img):not(video) {
    display: contents; }

.cu-banner--video .video-pause {
  position: absolute;
  right: 0;
  top: 1rem; }

/*=====  End of Video banner  ======*/
/*# sourceMappingURL=banner.css.map */