:root {
    --min-width-tallbanner: 1;
    --max-width-tallbanner: 1440;
}

.experience-layouts-banners-tallbanner {
    margin-bottom: 0 !important;
}

.tall-banner {
    max-width: 1440px;
    margin: 0 auto var(--margin_bottom_desktop) auto;
    position: relative;
}

@media screen and (max-width: 767px) {
    .tall-banner {
        margin-bottom: var(--margin_bottom_mobile);
    }
}

.tall-banner-link {
    display: block;
    text-decoration: none !important;
}

.tall-banner-link:hover {
    text-decoration: none !important;
}

.tall-banner-desktop-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 48.6%;
}

.tall-banner-mobile-image-container {
    display: none;
}

@media screen and (max-width: 767px) {
    .tall-banner-desktop-image-container {
        display: none;
    }

    .tall-banner-mobile-image-container {
        display: block;
    }
}

.tall-banner-desktop-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: var(--focal-point-x) var(--focal-point-y);
    width: 100%;
    height: 100%;
}

.tall-banner-mobile-image {
    width: 100%;
}

.tall-banner-text-container-inner {
    width: 66%;
    height: 100%;
    margin: 0 auto;
    text-align: var(--text_box_text_alignment_desktop);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media screen and (min-width: 768px) {
    .tall-banner-text-container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
    }

    .tall-banner-text-container.desktop-left {
        left: 0;
    }

    .tall-banner-text-container.desktop-left .tall-banner-text-container-inner {
        margin: 0 auto 0 8%;
    }

    .tall-banner-text-container.desktop-center {
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .tall-banner-text-container.desktop-right {
        right: 0;
    }

    .tall-banner-text-container.desktop-right .tall-banner-text-container-inner {
        margin: 0 8% 0 auto;
    }
}

@media screen and (max-width: 767px) {
    .tall-banner-text-container-inner {
        width: 100%;
        padding: 20px 3%;
        text-align: var(--text_box_text_alignment_mobile);
        background-color: var(--text_box_background_color);
    }
}

/* Callout Text */
.tall-banner-callout {
    color: var(--callout_color_desktop);
    font-weight: var(--callout_font_weight);
    font-family: var(--callout_font_family), sans-serif;
    margin-bottom: var(--callout_margin_bottom_desktop);
}

@media screen and (max-width: 767px) {
    .tall-banner-callout {
        color: var(--callout_color_mobile);
        margin-bottom: var(--callout_margin_bottom_mobile);
    }
}

/* Heading Text */
.tall-banner-heading {
    color: var(--heading_color_desktop);
    font-weight: var(--heading_font_weight);
    font-family: var(--heading_font_family), sans-serif;
    margin-bottom: var(--heading_margin_bottom_desktop);
}

@media screen and (max-width: 767px) {
    .tall-banner-heading {
        color: var(--heading_color_mobile);
        margin-bottom: var(--heading_margin_bottom_mobile);
    }
}

/* Subheading Text */
.tall-banner-subheading {
    color: var(--subheading_color_desktop);
    font-weight: var(--subheading_font_weight);
    font-family: var(--subheading_font_family), sans-serif;
    margin-bottom: var(--subheading_margin_bottom_desktop);
}

@media screen and (max-width: 767px) {
    .tall-banner-subheading {
        color: var(--subheading_color_mobile);
        margin-bottom: var(--subheading_margin_bottom_mobile);
    }
}

/* Button */
.tall-banner-button-outer {
    margin-bottom: var(--button_margin_bottom_desktop);
}

.tall-banner-button {
    display: inline-block;
    float: none;
    background: var(--button_background_color_desktop, transparent);
    border: 1px solid var(--button_border_color_desktop);
    color: var(--button_text_color_desktop);
    height: 40px;
    line-height: normal;
    border-radius: 20px !important;
    padding: 0 20px;
    margin: 0;
    font-family: var(--button_font);
    font-weight: 900;
    transition: all 0.2s ease;
}

.tall-banner-button:hover {
    border: 1px solid var(--button_hover_border_color_desktop);
    background: var(--button_hover_background_color_desktop, transparent);
    color: var(--button_hover_text_color_desktop);
}

.tall-banner-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--button_hover_border_color_desktop) !important;
}

@media screen and (max-width: 767px) {
    .tall-banner-button-outer {
        margin-bottom: var(--button_margin_bottom_mobile);
    }

    .tall-banner-button {
        border: 1px solid var(--button_border_color_mobile);
        background: var(--button_background_color_mobile, transparent);
        color: var(--button_text_color_mobile);
    }

    .tall-banner-button:hover {
        border: 1px solid var(--button_hover_border_color_mobile);
        background: var(--button_hover_background_color_mobile, transparent);
        color: var(--button_hover_text_color_mobile);
    }
}

/* Text Under Button */
.tall-banner-text-under-button {
    color: var(--text_under_button_color_desktop);
    font-weight: var(--text_under_button_font_weight);
    font-family: var(--text_under_button_font_family), sans-serif;
    margin-bottom: var(--text_under_button_margin_bottom_desktop);
}

@media screen and (max-width: 767px) {
    .tall-banner-text-under-button {
        color: var(--text_under_button_color_mobile);
        margin-bottom: var(--text_under_button_margin_bottom_mobile);
    }
}

/*
* FONT AND LINE HEIGHT SIZING
*/

/* SET MIN FONT SIZES */
.tall-banner-callout {
    font-size: calc(var(--callout_min_font_size, 12) * 1px);
    line-height: calc(var(--callout_min-font-line-height, 12) * 1px);
}

.tall-banner-heading {
    font-size: calc(var(--heading_min_font_size, 12) * 1px);
    line-height: calc(var(--heading_min-font-line-height, 12) * 1px);
}

.tall-banner-subheading {
    font-size: calc(var(--subheading_min_font_size, 12) * 1px);
    line-height: calc(var(--subheading_min-font-line-height, 12) * 1px);
}

.tall-banner-text-under-button {
    font-size: calc(var(--text_under_button_min_font_size, 12) * 1px);
    line-height: calc(var(--text_under_button_min-font-line-height, 12) * 1px);
}

/* SCALE FONT SIZES */
@media screen and (min-width: 300px) {
    .tall-banner-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-tallbanner) * 1px) / (var(--max-width-tallbanner) - var(--min-width-tallbanner)))
        );
        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-tallbanner) * 1px) / (var(--max-width-tallbanner) - var(--min-width-tallbanner)))
        );
    }

    .tall-banner-heading {
        font-size: calc(
            var(--heading_min_font_size, 12) * 1px + (var(--heading_max_font_size, 19) - var(--heading_min_font_size, 12)) * ((100vw - var(--min-width-tallbanner) * 1px) / (var(--max-width-tallbanner) - var(--min-width-tallbanner)))
        );
        line-height: calc(
            var(--heading_min_font_line_height, 2) * 1px + (var(--heading_max_font_line_height, 6) - var(--heading_min_font_line_height, 2)) *
                ((100vw - var(--min-width-tallbanner) * 1px) / (var(--max-width-tallbanner) - var(--min-width-tallbanner)))
        );
    }

    .tall-banner-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-tallbanner) * 1px) / (var(--max-width-tallbanner) - var(--min-width-tallbanner)))
        );
        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-tallbanner) * 1px) / (var(--max-width-tallbanner) - var(--min-width-tallbanner)))
        );
    }

    .tall-banner-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-tallbanner) * 1px) / (var(--max-width-tallbanner) - var(--min-width-tallbanner)))
        );
        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-tallbanner) * 1px) / (var(--max-width-tallbanner) - var(--min-width-tallbanner)))
        );
    }
}

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

    .tall-banner-heading {
        font-size: calc(var(--heading_max_font_size, 19) * 1px);
        line-height: calc(var(--heading_max_font_line_height, 6) * 1px);
    }

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

    .tall-banner-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);
    }
}