:root {
    --min-width-banner: 300;
    --max-width-banner: 1440;
}

.experience-layouts-1columnbanner {
    max-width: 1440px;
    margin: 0 auto 50px auto;
}

.headlinebanner-text-container {
    background-color: var(--text_box_background_color, transparent);
    padding: 2%;
    width: calc(var(--text_box_width, 50) * 1%);
}
.headlinebanner-text-container-width {
    width: 100%;
}

/* Scale text box width on smaller devices */
@media screen and (max-width: 1440px) {
    .headlinebanner-text-container {
        width: calc(var(--text_box_width, 50) * 1.08%);
        margin: 0 auto;
    }
}
@media screen and (max-width: 1024px) {
    .headlinebanner-text-container {
        width: calc(var(--text_box_width, 50) * 1%);
        margin: 0 auto;
    }
}
@media screen and (max-width: 768px) {
    .headlinebanner-text-container {
        width: calc(var(--text_box_width, 50) * 1.35%);
        margin: 0 auto;
    }
}

/* Ensure line height works properly by setting text span's to display block */
.headlinebanner-wrap {
    display: block;
}

.headlinebanner-text-container-width.custom-headlinebanner-width.center {
    margin: 0 auto;
}

figure .headlinebanner-text-container.custom-headlinebanner.left {
    left: calc(var(--text_box_absolute_left, 3%) + 0.5vw);
}

figure .headlinebanner-text-container.custom-headlinebanner.center {
    left: 50%;
    left: var(--text_box_absolute_left, 50%);
}

figure .headlinebanner-text-container.custom-headlinebanner.right {
    right: calc(var(--text_box_absolute_right, 3%) + 0.5vw);
}

.headlinebanner-text-container.custom-headlinebanner.left {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: calc(var(--text_box_absolute_left, 0%) + 0.5vw);
    text-shadow: var(--text_box_shadow_position, 0) var(--text_box_shadow_position, 0) var(--text_box_shadow_intensity, 0) var(--text_box_shadow_color, unset);
    text-align: var(--text_box_text_alignment, center);
}

.headlinebanner-text-container.custom-headlinebanner.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-shadow: var(--text_box_shadow_position, 0) var(--text_box_shadow_position, 0) var(--text_box_shadow_intensity, 0) var(--text_box_shadow_color, unset);
    text-align: var(--text_box_text_alignment, center);
}

.headlinebanner-text-container.custom-headlinebanner.right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(var(--text_box_absolute_right, 0%) + 0.5vw);
    text-shadow: var(--text_box_shadow_position, 0) var(--text_box_shadow_position, 0) var(--text_box_shadow_intensity, 0) var(--text_box_shadow_color, unset);
    text-align: var(--text_box_text_alignment, center);
}

.headlinebanner-text-callout {
    margin-bottom: var(--callout_margin_bottom, 0px);
}

.headlinebanner-wrap.headlinebanner-wrap-callout {
    color: var(--callout_color, #ffffff);
    font-weight: var(--callout_font_weight, 400);
    font-family: var(--callout_font_family), sans-serif;
}

.headlinebanner-wrap.headlinebanner-wrap-callout.italic {
    font-style: italic;
}

.headlinebanner-text-heading {
    margin-bottom: var(--heading_margin_bottom, 0px);
}

.headlinebanner-wrap.headlinebanner-wrap-heading {
    color: var(--heading_color, #ffffff);
    font-weight: var(--heading_font_weight, 400);
    font-family: var(--heading_font_family), sans-serif;
}

.headlinebanner-wrap.headlinebanner-wrap-heading.italic {
    font-style: italic;
}

.headlinebanner-text-subheading {
    margin-bottom: var(--subheading_margin_bottom, 0px);
}

@media screen and (max-width: 375px) {
    .headlinebanner-text-subheading {
        margin-bottom: var(--subheading_margin_bottom_mobile, 0px);
    }
}

.headlinebanner-wrap.headlinebanner-wrap-subheading {
    color: var(--subheading_color, #ffffff);
    font-weight: var(--subheading_font_weight, 400);
    font-family: var(--subheading_font_family), sans-serif;
}

.headlinebanner-wrap.headlinebanner-wrap-subheading.italic {
    font-style: italic;
}

.headlinebanner-text-under-button {
    margin-bottom: var(--text_under_button_margin_bottom, 0px);
}

.headlinebanner-wrap.headlinebanner-wrap-text-under-button {
    color: var(--text_under_button_color, #ffffff);
    font-weight: var(--text_under_button_font_weight, 400);
    font-family: var(--text_under_button_font_family), sans-serif;
}

.headlinebanner-wrap.headlinebanner-wrap-text-under-button.italic {
    font-style: italic;
}

.headlinebanner-text-button {
    margin-top: var(--button_margin_top, 15px);
    margin-bottom: var(--button_margin_bottom, 15px);
}

.headlinebanner-wrap-button {
    display: inline-block;
    float: none;
    background: var(--button_background_color, transparent);
    border: 1px solid var(--button_border_color, white);
    border-radius: 20px !important;
    height: 40px;
    line-height: 40px !important;
    padding: 0 20px;
    font-family: var(--button_font), sans-serif !important;
    font-size: 14px !important;
    font-weight: 900;
}

.headlinebanner-wrap-button span {
    transition: all 0.2s ease;
    color: var(--button_text_color, white);
}

@media screen and (max-width: 480px) {
    .headlinebanner-wrap-button {
        border-radius: 15px !important;
        height: 30px;
        line-height: 30px !important;
        padding: 0 10px;
        font-size: 12px !important;
    }
}

@media screen and (max-width: 400px) {
    .headlinebanner-wrap-button {
        border-radius: 12px !important;
        height: 24px;
        line-height: 24px !important;
        font-size: 11px !important;
    }
}

.headlinebanner-wrap-button.apply-text-shadow {
    box-shadow: var(--text_box_shadow_position, 0) var(--text_box_shadow_position, 0) var(--text_box_shadow_intensity, 0) var(--text_box_shadow_color, unset);
}

.headlinebanner-wrap-button:hover,
.headlinebanner-wrap-button:focus {
    outline: none !important;
    border-color: var(--button_hover_border_color, transparent);
    background: var(--button_hover_background_color);
    box-shadow: none;
}

.headlinebanner-wrap-button:hover span {
    color: var(--button_hover_text_color);
    text-decoration: none;
}

.custom-headlinebanner a:hover {
    text-decoration: none;
}

.headlinebanner-text-button {
    margin-top: calc(var(--button_margin_top, 1px) + 0.5vw);
    margin-bottom: calc(var(--button_margin_bottom, 1px) + 0.5vw);
}

.headlinebanner-text-container-width.custom-headlinebanner-width.center {
    margin: 0 auto;
}

.headlinebanner-text-button {
    margin-top: calc(var(--button_margin_top, 1px) + 0.005 * 1440 * 1px);
    margin-bottom: calc(var(--button_margin_bottom, 1px) + 0.005 * 1440 * 1px);
}

.headlinebanner-text-container-width.custom-headlinebanner-width.center {
    margin: 0 auto;
}

/*
* FONT AND LINE HEIGHT SIZING
*/

/* SET MIN FONT SIZES */
.headlinebanner-wrap.headlinebanner-wrap-callout {
    font-size: calc(var(--callout_min_font_size, 12) * 1px);
    line-height: calc(var(--callout_min-font-line-height, 12) * 1px);
}
.headlinebanner-wrap.headlinebanner-wrap-heading {
    font-size: calc(var(--heading_min_font_size, 16) * 1px);
    line-height: calc(var(--heading_min-font-line-height, 14) * 1px);
}
.headlinebanner-wrap.headlinebanner-wrap-subheading {
    font-size: calc(var(--subheading_min_font_size, 12) * 1px);
    line-height: calc(var(--subheading_min-font-line-height, 12) * 1px);
}
.headlinebanner-wrap.headlinebanner-wrap-text-under-button {
    font-size: calc(var(--text_under_button_min_font_size, 10) * 1px);
    line-height: calc(var(--text_under_button_min-font-line-height, 8) * 1px);
}

/* SCALE FONT SIZES */
@media screen and (min-width: 300px) {
    .headlinebanner-wrap.headlinebanner-wrap-callout {
        font-size: calc(
            var(--callout_min_font_size, 12) * 1px + (var(--callout_max_font_size, 19) - var(--callout_min_font_size, 12)) * ((100vw - var(--min-width-banner) * 1px) / (var(--max-width-banner) - var(--min-width-banner)))
        );
        line-height: calc(
            var(--callout_min_font_line_height, 2) * 1px + (var(--callout_max_font_line_height, 6) - var(--callout_min_font_line_height, 2)) *
                ((100vw - var(--min-width-banner) * 1px) / (var(--max-width-banner) - var(--min-width-banner)))
        );
    }

    .headlinebanner-wrap.headlinebanner-wrap-heading {
        font-size: calc(
            var(--heading_min_font_size, 16) * 1px + (var(--heading_max_font_size, 45) - var(--heading_min_font_size, 16)) * ((100vw - var(--min-width-banner) * 1px) / (var(--max-width-banner) - var(--min-width-banner)))
        );
        line-height: calc(
            var(--heading_min_font_line_height, 14) * 1px + (var(--heading_max_font_line_height, 43) - var(--heading_min_font_line_height, 14)) *
                ((100vw - var(--min-width-banner) * 1px) / (var(--max-width-banner) - var(--min-width-banner)))
        );
    }

    .headlinebanner-wrap.headlinebanner-wrap-subheading {
        font-size: calc(
            var(--subheading_min_font_size, 12) * 1px + (var(--subheading_max_font_size, 19) - var(--subheading_min_font_size, 12)) *
                ((100vw - var(--min-width-banner) * 1px) / (var(--max-width-banner) - var(--min-width-banner)))
        );
        line-height: calc(
            var(--subheading_min_font_line_height, 2) * 1px + (var(--subheading_max_font_line_height, 6) - var(--subheading_min_font_line_height, 2)) *
                ((100vw - var(--min-width-banner) * 1px) / (var(--max-width-banner) - var(--min-width-banner)))
        );
    }

    .headlinebanner-wrap.headlinebanner-wrap-text-under-button {
        font-size: calc(
            var(--text_under_button_min_font_size, 12) * 1px + (var(--text_under_button_max_font_size, 19) - var(--text_under_button_min_font_size, 12)) *
                ((100vw - var(--min-width-banner) * 1px) / (var(--max-width-banner) - var(--min-width-banner)))
        );
        line-height: calc(
            var(--text_under_button_min_font_line_height, 2) * 1px + (var(--text_under_button_max_font_line_height, 6) - var(--text_under_button_min_font_line_height, 2)) *
                ((100vw - var(--min-width-banner) * 1px) / (var(--max-width-banner) - var(--min-width-banner)))
        );
    }
}

/* SET MAX FONT SIZES */
@media screen and (min-width: 1440px) {
    .headlinebanner-wrap.headlinebanner-wrap-callout {
        font-size: calc(var(--callout_max_font_size, 19) * 1px);
        line-height: calc(var(--callout_max_font_line_height, 6) * 1px);
    }

    .headlinebanner-wrap.headlinebanner-wrap-heading {
        font-size: calc(var(--heading_max_font_size, 45) * 1px);
        line-height: calc(var(--heading_max_font_line_height, 43) * 1px);
    }

    .headlinebanner-wrap.headlinebanner-wrap-subheading {
        font-size: calc(var(--subheading_max_font_size, 19) * 1px);
        line-height: calc(var(--subheading_max_font_line_height, 6) * 1px);
    }

    .headlinebanner-wrap.headlinebanner-wrap-text-under-button {
        font-size: calc(var(--text_under_button_max_font_size, 19) * 1px);
        line-height: calc(var(--text_under_button_max_font_line_height, 6) * 1px);
    }
}

.experience-assets-banner figure {
    margin: 0 0 1rem;
    width: auto;
    height: 100%;
}

.experience-assets-banner img {
    vertical-align: middle;
    border-style: none;
}

.experience-assets-banner .component-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focal-point-x) var(--focal-point-y);
}

.experience-assets-banner button {
    margin: 0;
}