/* Style authoring tags

cmp-banner--top
cmp-banner--middle
cmp-banner--bottom
cmp-banner--left
cmp-banner--center
cmp-banner--right
cmp-banner--dark-tint-on
cmp-banner--dark-tint-off
cmp-banner--dark-text
cmp-banner--light-text
cmp-banner--size-large
cmp-banner--size-small
cmp-banner--size-medium

*/

/* Full width - edge to edge, breaks out of the layout container */
.util-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.banner .util-caption {
    position: absolute;
    padding: 2px 6px 0;
    bottom: 15px;
    right: 10px;
    color: #fff;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    font-size: 10px;
}

.cmp-banner__image {
    position: relative;
    background-color: #000;
}

.cmp-banner__mobile {
    background-size: cover;
    background-color: #000;
}

/* use light background for accessibility test pass when using dark text */
.cmp-banner--dark-tint-off.cmp-banner--dark-text .cmp-banner__image,
.cmp-banner--dark-tint-off.cmp-banner--dark-text .cmp-banner__mobile {
    background-color: #fff;
}

/* Image element styles - replaces background-image with object-fit */
.cmp-banner__image-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.image-center .cmp-banner__image-element {
    object-position: center;
}

.image-center-top .cmp-banner__image-element {
    object-position: center top;
}

.image-center-bottom .cmp-banner__image-element {
    object-position: center bottom;
}

/* reversed button */
.cmp-banner--dark-tint-on .b-button.m-white,
.cmp-banner--light-text .b-button.m-white {
    background:
        no-repeat linear-gradient(#6bbcb9, #6bbcb9),
        linear-gradient(#ffffff, #ffffff);
    background-size:
        0 100%,
        100%;
    color: #222;
}

.cmp-banner--dark-tint-on .b-button.m-white:hover,
.cmp-banner--light-text .b-button.m-white:hover {
    background-size:
        100% 100%,
        0;
}

/* general banner layout */

.cmp-banner {
    position: relative;
}

.cmp-banner__content-wrap {
    display: flex;
    position: relative;
    z-index: 1;
    width: 75%;
    margin: 0 auto;
    min-height: 400px;
}

/* General banner style */

h3.cmp-banner__eyebrow,
h4.cmp-banner__eyebrow {
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

h1.cmp-banner__title,
h2.cmp-banner__title {
    font-size: 50px;
    font-weight: 500;
    line-height: 110%;
    padding-bottom: 24px;
    margin: 3px 0 0 0;
}
@media (max-width: 550px) {
    h1.cmp-banner__title,
    h2.cmp-banner__title {
        font-size: 9vw;
    }
}
h1.cmp-banner__title p,
h2.cmp-banner__title p {
    margin: 0;
}

.cmp-banner__image--simple h1 {
    margin: 0 0 24px 0;
    line-height: 16px;
    padding-bottom: 0;
}

p.cmp-banner__text,
.cmp-banner__text p {
    font-size: 24px;
    line-height: 31px;
    padding-bottom: 1em;
    margin: 0;
    max-width: 840px;
}
/* .cmp-banner__text.italic p {
	font-style: italic;
} */

/* style options */

.cmp-banner--top .cmp-banner__content-wrap {
    align-items: flex-start;
    padding-top: 6.6vw;
}

.cmp-banner--middle .cmp-banner__content-wrap {
    align-items: center;
}

.cmp-banner--bottom .cmp-banner__content-wrap {
    align-items: flex-end;
    padding-bottom: 6.6vw;
}

.cmp-banner--left .cmp-banner__content-wrap {
    justify-content: flex-start;
}

.cmp-banner--center .cmp-banner__content-wrap {
    justify-content: center;
    text-align: center;
}

.cmp-banner--center p.cmp-banner__text,
.cmp-banner--center .cmp-banner__text.v2 p {
    margin: 0 auto;
}

.cmp-banner--right .cmp-banner__content-wrap {
    justify-content: flex-end;
}

.cmp-banner--left .cmp-banner__content-item,
.cmp-banner--right .cmp-banner__content-item {
    width: 50%;
}
.cmp-banner--center .cmp-banner__buttons-container {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 16px;
}

.cmp-banner--left .cmp-banner__buttons-container,
.cmp-banner--right .cmp-banner__buttons-container {
    justify-content: flex-start;
}

@media (max-width: 760px) {
    .cmp-banner--left .cmp-banner__content-item,
    .cmp-banner--right .cmp-banner__content-item {
        width: auto;
    }
}

.cmp-banner--dark-tint-on,
.cmp-banner--light-text {
    color: #fff;
}

.cmp-banner--dark-tint-on .cmp-banner__image:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    opacity: 0.2;
}

.cmp-banner--size-large .cmp-banner__content-wrap {
    min-height: 900px;
}
.cmp-banner--size-medium .cmp-banner__content-wrap {
    min-height: 600px;
}

.cmp-banner__video_wrapper {
    height: 600px;
    width: 100%;
    overflow: hidden;
}
.cmp-banner__video_wrapper video {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    left: 0;
}
.assetVideo .cmp-banner__content-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

@media (max-width: 760px) {
    .cmp-banner__video_wrapper {
        position: absolute;
        height: 100%;
        display: flex;
        max-width: 100%;
    }
    .cmp-banner__video_wrapper img {
        height: 100%;
    }
    .assetVideo .cmp-banner__content-wrap {
        position: relative;
    }
}

.cmp-banner__buttons-container {
    display: flex;
    width: 100%;
}

.cmp-banner__buttons:first-child:not(:only-child) {
    /* margin-right: 16px; */
}

.cmp-banner__icon img {
    max-width: 100%;
    height: auto;
}

.cmp-banner__icon h1 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 16px;
}

.cmp-banner__image.cmp-banner__image--medium {
    max-height: 700px;
}

/*V2 Adjustments*/

.cmp-banner--top .v2 .cmp-banner__content-wrap {
    align-items: flex-start;
    padding-top: 0;
}

.cmp-banner--bottom .v2 .cmp-banner__content-wrap {
    align-items: flex-end;
    padding-bottom: 0;
}

.cmp-banner__buttons-container a:nth-child(2) {
    margin-left: 16px;
    @media (max-width: 375px) {
        margin-left: 10px;
    }
}
.cmp-banner__title.cmp-banner-first__heading h1,
.cmp-banner__title.cmp-banner-first__heading h2,
.cmp-banner__title.cmp-banner-first__heading h3,
.cmp-banner__title.cmp-banner-first__heading h4 {
    font-size: clamp(25px, 5vw, 50px);
    font-weight: 500;
    line-height: 1;
    /* padding-bottom: 24px; */
    margin: 3px 0 0 0;
    @media (min-width: 375px) {
        font-size: 11vw;
        letter-spacing: 0.0025em;
    }
    @media (min-width: 768px) {
        font-size: clamp(50px, 5.208333333vw, 75px);
        letter-spacing: 0.0025em;
    }
    @media (min-width: 1440px) {
        font-size: 100px;
    }
}

.cmp-banner__eyebrow.headline-two p,
.cmp-banner__eyebrow.headline-two h1,
.cmp-banner__eyebrow.headline-two h2,
.cmp-banner__eyebrow.headline-two h3,
.cmp-banner__eyebrow.headline-two h4 {
    font-size: clamp(16px, 3.255208333vw, 25px);
    line-height: 31px;
    letter-spacing: 0.0025em;
    margin: 0;
    /* Desktop styles */
    @media (min-width: 768px) {
        font-size: clamp(25px, 3.472222222vw, 40px);
        line-height: 1.2;
        letter-spacing: 0.0025em;
    }
}