:root {
    --min-width-sbs-tiles-med-rectangle: 300;
    --max-width-sbs-tiles-med-rectangle: 1440;
}

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

.custom-category-text-container.custom-category.top {
    position: absolute;
    top: 0%;
    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);
}

.custom-category-text-container.custom-category.middle {
    position: absolute;
    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);
}

.custom-category-text-container.custom-category.top.right {
    right: calc(var(--text_box_absolute_right, 0%));
}

.custom-category-text-container.custom-category.top.left {
    left: calc(var(--text_box_absolute_left, 0%));
}

.custom-category-text-container.custom-category.top.center,
.custom-category-text-container.custom-category.bottom.center {
    left: 50%;
    transform: translateX(-50%);
}

.custom-category-text-container.custom-category.middle.right {
    right: calc(var(--text_box_absolute_right, 0%));
    top: 50%;
    transform: translateY(-50%);
}

.custom-category-text-container.custom-category.middle.left {
    left: calc(var(--text_box_absolute_left, 0%));
    top: 50%;
    transform: translateY(-50%);
}

.custom-category-text-container.custom-category.middle.center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.custom-category-text-container.custom-category.bottom {
    position: absolute;
    bottom: 0%;
    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);
}

.custom-category-text-container.custom-category.bottom.right {
    right: calc(var(--text_box_absolute_right, 0%));
}

.custom-category-text-container.custom-category.bottom.left {
    left: calc(var(--text_box_absolute_left, 0%));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.category-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);
}
.category-wrap-button:hover,
.category-wrap-button:focus {
    outline: none !important;
    border-color: var(--button_hover_border_color, #fff);
    background: var(--button_hover_background_color, #fff);
}

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

.category-wrap-button:hover span {
    color: var(--button_hover_text_color, #5f6061);
    text-decoration: none;
}

.custom-category span:hover {
    text-decoration: none;
}

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

/* SCALE FONT SIZES */
@media screen and (min-width: 300px) {
    .category-wrap.category-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-sbs-tiles-med-rectangle) * 1px) / (var(--max-width-sbs-tiles-med-rectangle) - var(--min-width-sbs-tiles-med-rectangle)))
        );
        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-sbs-tiles-med-rectangle) * 1px) / (var(--max-width-sbs-tiles-med-rectangle) - var(--min-width-sbs-tiles-med-rectangle)))
        );
    }

    .category-wrap.category-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-sbs-tiles-med-rectangle) * 1px) / (var(--max-width-sbs-tiles-med-rectangle) - var(--min-width-sbs-tiles-med-rectangle)))
        );
        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-sbs-tiles-med-rectangle) * 1px) / (var(--max-width-sbs-tiles-med-rectangle) - var(--min-width-sbs-tiles-med-rectangle)))
        );
    }

    .category-wrap.category-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-sbs-tiles-med-rectangle) * 1px) / (var(--max-width-sbs-tiles-med-rectangle) - var(--min-width-sbs-tiles-med-rectangle)))
        );
        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-sbs-tiles-med-rectangle) * 1px) / (var(--max-width-sbs-tiles-med-rectangle) - var(--min-width-sbs-tiles-med-rectangle)))
        );
    }
}

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

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

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

/* Padding on text box for mobile */
@media screen and (max-width: 767px) {
    .custom-category-text-container {
        padding: 2%;
    }
}