@charset "utf-8";
/*@import "cg_var_narrow.css" only screen and (max-width: 639px);
@import "cg_var_wide.css" only screen and (min-width: 640px);*/

/* Responsive size calculations:

    Calculate lengths, widths, and font-sizes using BVolt_CssTools.clampBuilder()

    Use the following argument values, unless there are special circumstances,
    such as the special font sizing over a small range on media titles.

    minRemFontSize = (depends on item being sized)
    maxRemFontSize = (depends on item being sized)
    minPxViewportWidth = 320
    maxPxViewportWidth = 1920
    numMaxDecimals = 4
*/


/* Pseudo-classes:

                style       color       ring    decoration

    Normal:     normal      dull        no      none
    Text Link:  .           .           .       1px underline
    Focus:      .           bright      yes     .
    Hover:      .           bright      .       .
    Active:     .           bright      .       2px dotted underline

    . = don't set or change property
*/

:root {
    /*
        Development Mode
    */
    /* --bv-font-family-not-found: cursive, serif; */

    /*
        Production Mode
    */
    --bv-font-family-not-found: Verdana, Helvetica, Arial, sans-serif;
}

:root {
    /* --bv-theme-color-black: black; */
    /* --bv-theme-color-black-soft: var(--bvolt-color-dolphinish-shadow, hsl(240, 8%, 16%)); */
    /* --bv-theme-color-white: #f9f9f9; */
    /* --bv-theme-color-white-soft: var(--bvolt-color-dolphinish-halo, hsl(240, 8%, 88%)); */

    --bv-theme-color-1-black: var(--bvolt-color-cerulean-black, hsl(196, 30%, 10%));
    --bv-theme-color-1-shadow: var(--bvolt-color-cerulean-shadow, hsl(196, 40%, 18%));
    --bv-theme-color-1-darker: var(--bvolt-color-cerulean-darker, hsl(196, 80%, 25%));
    --bv-theme-color-1-dark: var(--bvolt-color-cerulean-dark, hsl(196, 100%, 33%));
    --bv-theme-color-1-darkish: var(--bvolt-color-cerulean-darkish, hsl(196, 100%, 39%));
    --bv-theme-color-1: var(--bvolt-color-cerulean, hsl(196, 100%, 43%));
    --bv-theme-color-1-lightish: var(--bvolt-color-cerulean-lightish, hsl(196, 100%, 50%));
    --bv-theme-color-1-light: var(--bvolt-color-cerulean-light, hsl(196, 100%, 58%));
    --bv-theme-color-1-lighter: var(--bvolt-color-cerulean-lighter, hsl(196, 100%, 72%));
    --bv-theme-color-1-halo: var(--bvolt-color-cerulean-halo, hsl(196, 80%, 84%));
    --bv-theme-color-1-white: var(--bvolt-color-cerulean-white, hsl(196, 30%, 98%));

    --bv-theme-color-1-text-on-black: var(--bvolt-color-cerulean-text-on-black, hsl(196, 100%, 50%));
    --bv-theme-color-1-text-on-white: var(--bvolt-color-cerulean-text-on-white, hsl(196, 30%, 10%));

    --bv-theme-color-2-black: var(--bvolt-color-dolphinish-black, hsl(240, 8%, 8%));
    --bv-theme-color-2-shadow: var(--bvolt-color-dolphinish-shadow, hsl(240, 8%, 16%));
    --bv-theme-color-2-darker: var(--bvolt-color-dolphinish-darker, hsl(240, 8%, 25%));
    --bv-theme-color-2-dark: var(--bvolt-color-dolphinish-dark, hsl(240, 8%, 32%));
    --bv-theme-color-2-darkish: var(--bvolt-color-dolphinish-darkish, hsl(240, 8%, 43%));
    --bv-theme-color-2: var(--bvolt-color-dolphinish, hsl(240, 8%, 50%));
    --bv-theme-color-2-lightish: var(--bvolt-color-dolphinish-lightish, hsl(240, 8%, 58%));
    --bv-theme-color-2-light: var(--bvolt-color-dolphinish-light, hsl(240, 8%, 64%));
    --bv-theme-color-2-lighter: var(--bvolt-color-dolphinish-lighter, hsl(240, 8%, 75%));
    --bv-theme-color-2-halo: var(--bvolt-color-dolphinish-halo, hsl(240, 8%, 88%));
    --bv-theme-color-2-white: var(--bvolt-color-dolphinish-white, hsl(240, 8%, 98%));

    --bv-theme-color-2-text-on-black: var(--bvolt-color-dolphinish-text-on-black, hsl(240, 8%, 98%));
    --bv-theme-color-2-text-on-white: var(--bvolt-color-dolphinish-text-on-white, hsl(240, 8%, 8%));

    --bv-theme-color-monochrome-icon: var(--bv-theme-color-1-dark, hsl(196, 100%, 33%));
    --bv-theme-color-monochrome-icon-white: var(--bv-theme-color-1-white, hsl(196, 30%, 98%));
}

:root {
    /* Accessibility */
    --bv-accessible-ui-control-min-width: 44px;
    --bv-accessible-ui-control-min-height: 44px;

    /* Border Shapes */
    --bv-circle-border-radius: 50%;
    --bv-rect-border-radius: 0.5px;
    --bv-round-corners-border-radius: 1rem;

    --bv-line-height-normal: 1.5;

    --bv-font-family-headline: 'Novecento Sans Wide', var(--bv-font-family-not-found, sans-serif);
    --bv-font-family-normal: 'Open Sans', var(--bv-font-family-not-found, sans-serif);
    --bv-font-size-normal: 1rem;
    --bv-font-size-compact: 1rem;
    --bv-font-size-nav: 0.9rem;
    --bv-font-weight-nav: 350;
    --bv-font-size-nav-circle: 1.3rem;
    --bv-font-weight-nav-circle: 350;
    --bv-font-size-h3: 1.5rem;
    --bv-font-size-hero-h3: 1.75rem;
    /* --bv-font-size-hero-h3: 1.875rem; */
    --bv-font-size-hero: 1.125rem;
    --bv-font-style-normal: normal;
    --bv-font-style-focus: normal;
    --bv-font-variant-normal: normal;
    --bv-text-color-dark: var(--bv-theme-color-2-text-on-white, hsl(240, 8%, 8%));
    /* --bv-text-color-dark-normal: var(--bvolt-color-dolphinish-shadow, hsl(240, 8%, 16%)); */
    /* --bv-text-color-dark-active: black; */
    --bv-text-color-light: var(--bv-theme-color-2-text-on-black, hsl(240, 8%, 98%));
    /* --bv-text-color-light-normal: var(--bvolt-color-dolphinish-halo, hsl(240, 8%, 88%)); */
    /* --bv-text-color-light-active: white; */
    --bv-color-dark: 240 8% 8%;
    --bv-color-light: 240 8% 98%;
    --bv-color-white: 240 8% 98%;

    /*
        Font Weights
    */
    --bv-font-weight-thin: 100;
    --bv-font-weight-extra-light: 200;
    --bv-font-weight-light: 300;
    --bv-font-weight-normal: 400;
    --bv-font-weight-medium: 500;
    --bv-font-weight-semi-bold: 600;
    --bv-font-weight-bold: 700;
    --bv-font-weight-extra-bold: 800;
    --bv-font-weight-black: 900;
    --bv-font-weight-extra-black: 950;

    /* root */
    --bv-root-font-size-rem: initial;

    /* body */
    --bv-body-back-color: var(--bv-theme-color-2-white, hsl(240, 8%, 98%));
    /* --bv-body-back-color: var(--bv-theme-color-white, #f9f9f9); */
    --bv-body-font-size: 62.5%;

    /* a: Anchor / Link element */
    --bv-link-outline: none;
    --bv-link-box-shadow: none;
    --bv-link-border: 0;
    --bv-link-border-radius: 0.5px;
    --bv-link-color: var(--bv-theme-color-1-dark);
    --bv-link-link-color: var(--bv-theme-color-1-dark);
    --bv-link-visited-color: var(--bv-theme-color-1-dark);
    --bv-link-hover-color: var(--bv-theme-color-1);
    --bv-link-active-color: var(--bv-theme-color-1);

    /* button */
    --bv-button-width: initial;
    --bv-button-min-width: var(--bv-accessible-ui-control-min-width, 44px);
    --bv-button-height: initial;
    --bv-button-min-height: var(--bv-accessible-ui-control-min-height, 44px);
    --bv-button-box-shadow: inset 2px 2px 3px 1px var(--bv-theme-color-1-halo, hsl(196, 100%, 84%)), inset -2px -2px 3px 1px var(--bv-theme-color-1-shadow, hsl(196, 100%, 18%));
    --bv-button-outline: none;
    --bv-button-border: 0;
    --bv-button-border-radius: 0.5px;
    --bv-button-back-color: var(--bv-theme-color-1-dark, #007ba8);
    --bv-button-cta-back-color: hsl(16, 100%, 50%);
    --bv-button-font-family: var(--bv-font-family-headline, sans-serif);
    --bv-button-font-size: var(--bv-font-size-normal, 1rem);
    --bv-button-font-weight: 350;
    --bv-button-focus-font-weight: 600;
    --bv-button-font-style: var(--bv-font-style-normal, normal);
    --bv-button-focus-font-style: var(--bv-font-style-focus, normal);

    /*  button's label */
    --bv-button-label-normal-color: var(--bv-text-color-light, hsl(240, 8%, 98%));
    --bv-button-label-active-color: var(--bv-text-color-light, hsl(240, 8%, 98%));
    --bv-button-label-letter-spacing: 1px;
    --bv-button-label-opacity: 1;
    --bv-button-label-active-opacity: 1;

    /* form element */
    --bv-form-response-success-back-color: var(--bv-body-back-color, hsl(240, 8%, 98%));
    --bv-form-response-success-color: var(--bv-text-color-dark, hsl(240, 8%, 8%));

    --bv-form-response-fail-back-color: #ff0000;
    --bv-form-response-fail-color: var(--bv-text-color-light, hsl(240, 8%, 98%));

    /* heading element */
    --bv-sub-heading-letter-spacing: 1px;

    /* img element */
    --bv-img-width: initial;
    --bv-img-height: initial;
    --bv-img-outline: none;
    --bv-img-border: 0;
    --bv-img-border-radius: 0.5px;

    /* li: List Item element */
    --bv-list-item-width: initial;
    --bv-list-item-height: initial;
    --bv-list-item-border-radius: 0.5px;

    /* media player elemenet */
    --bv-media-width: initial;
    --bv-media-height: initial;
    --bv-media-outline: none;
    --bv-media-border: 0;
    --bv-media-border-radius: 0.5px;
    --bv-media-outline-color: var(--bv-theme-color-2-halo);

    /* textarea element */
    --bv-textarea-box-shadow: inset 0 0 0 3px var(--bv-blur-color, hsl(240, 8%, 64%));
    --bv-textarea-focus-box-shadow: inset 0 0 0 3px var(--bv-focus-color, hsl(196, 100%, 33%));
    --bv-textarea-invalid-box-shadow: inset 0 0 0 3px var(--bv-invalid-color, red);
}

:root {
    /*
        Font
    */
    --bv-font-data-label: normal normal 600 1.3rem/2.25rem var(--bv-font-family-normal, sans-serif);
    --bv-font-data-value: normal normal 500 1.3rem/2.25rem var(--bv-font-family-normal, sans-serif);
    /* --bv-font-input: normal normal 600 2.3rem/2.5 var(--bv-font-family-normal, sans-serif); */
    /* --bv-font-input-label: normal normal 600 var(--bv-input-label-font-size)/1.4em var(--bv-font-family-normal, sans-serif); */
    /* --bv-font-input-label-focus: normal normal 600 var(--bv-input-label-font-size)/2.5 var(--bv-font-family-normal, sans-serif); */


    /*
        Moved to narrow/wide stylesheets
    */
    /* --bv-stylesheet-variant: 'Normal'; */
    /* --bv-page-wrapper-pad-x: 2vw; */
    /* --bv-page-wrapper-pad-y: 1vh; */
    /* --bv-page-wrapper-width: calc(100% - (var(--bv-page-wrapper-pad-x) * 2)); */
    /* --bv-page-wrapper-max-width: var(--bv-info-container-max-width); */
    /* --bv-page-wrapper-min-width: var(--bv-info-container-min-width); */
    /* --bv-page-wrapper-wide-pad-x: var(--bv-spacer); */
    /* --bv-page-wrapper-wide-pad-y: var(--bv-spacer); */
    /* --bv-page-wrapper-wide-width: calc(100% - (var(--bv-page-wrapper-wide-pad-x) * 2)); */
    /* --bv-page-wrapper-wide-max-width: 100%; */
    /* --bv-page-wrapper-wide-min-width: calc(var(--bv-section-fixed-width) + (var(--bv-page-wrapper-wide-pad-x) * 2)); */
    /* --bv-section-width: 85vw; */
    /* --bv-section-width: calc(2.4rem + 83vw);
    --bv-section-min-width: 19rem;
    --bv-section-max-width: 102rem;
    --bv-section-margin-top: 4rem;
    --bv-section-margin-bottom: 12rem; */

    /*
        Spacers
    */
    --bv-spacer: .5rem;
    --bv-spacer-double: 1rem;
    --bv-spacer-triple: 2rem;
    --bv-spacer-half: .25rem;

    --bv-info-container-min-width: calc(var(--bv-info-column-min-width) + (var(--bv-spacer) * 2));
    --bv-info-container-max-width: calc((var(--bv-info-column-min-width) * 3) + (var(--bv-info-column-gap) * 2) + (var(--bv-spacer) * 2) - 1px);
    --bv-info-column-min-width: 380px;
    --bv-info-column-max-width: 100%;
    --bv-info-column-gap: 1rem;
    --bv-info-grid-row-gap: 1.5rem;
    --bv-invalid-color: red;
    /* --bv-color-disabled: hsl(0deg, 0%, 70%); */
    /* --bv-color-disabled-back: hsl(0deg, 0%, 50%); */

    /* filter property */
    /* --bv-page-drop-shadow: drop-shadow(2px 3px 4px hsla(240,8%, 38%, .5)); */
    /* --bv-page-drop-shadow-small: drop-shadow(1px 2px 3px hsla(240,8%, 38%, .5)); */
    /* Header Area */

    --bv-header-height: 4.2rem;
    --bv-header-logo-height: 30px;
    --bv-header-back-color: var(--bv-theme-color-2-black, hsl(240, 8%, 8%));
    --bv-header-color: var(--bv-text-color-light, hsl(240, 8%, 98%));

    /* Text: Basic, paragraph text and the like. */
    --bv-text-selected-back-color: var(--bv-theme-color-1-black, hsl(196, 30%, 10%));
    --bv-text-selected-color: var(--bv-theme-color-1-text-on-black, hsl(196, 100%, 50%));
    --bv-text-max-width: 75ch;

    /* Footer */
    --bv-footer-color: var(--bv-text-color-light, hsl(240, 8%, 98%));
    --bv-footer-back-color: var(--bv-theme-color-2-black, hsl(240, 8%, 8%));

    /* Panel */
    /* --bv-panel-width: initial; */
    /* --bv-panel-height: initial; */
    --bv-panel-outline: none;
    --bv-panel-border: 0;
    --bv-panel-border-radius: 0.5px;
    --bv-panel-back-color: var(--bv-theme-color-2-halo, hsl(240, 8%, 88%));
    --bv-panel-color: var(--bv-text-color-dark, hsl(240, 8%, 8%));

    /*
        Focus Indicators
    */
    --bv-focus-color: var(--bv-theme-color-1-dark);
    --bv-blur-color: var(--bv-theme-color-2-light);
    --bv-focus-inset: -6px;
    --bv-focus-margin: 6px;
    --bv-focus-box-shadow: 0 0 1px 3px var(--bv-focus-color);
    --bv-blur-box-shadow: 0 0 1px 3px var(--bv-blur-color);
    --bv-focus-ring-pad: .5rem;
    --bv-focus-ring-pad-text: 0 .4em;

    /*
        Data Display
    */
    --bv-data-font-size: 1.3rem;
    --bv-data-label-color: var(--bv-theme-color-2-black, hsl(240, 8%, 8%));
    --bv-data-label-font-weight: 600;
    --bv-data-value-color: var(--bv-theme-color-1-darker, hsl(196, 80%, 25%));
    --bv-data-value-font-weight: 500;

    /* input element */
    --bv-input-border-radius: 0.5px;

    /* --bv-input-line-height: 2.5; */
    /* --bv-input-height: 1.4em; */
    /* --bv-input-height: 1.5625em; */

    /* Input Color */
    --bv-input-color: var(--bv-text-color-dark, hsl(240, 8%, 8%));
    --bv-input-focus-color: var(--bv-text-color-dark, hsl(240, 8%, 8%));
    --bv-input-back-color: transparent;
    --bv-input-focus-back-color: transparent;

    /* Input Font */
    --bv-input-font-family: var(--bv-font-family-normal, sans-serif);
    --bv-input-font-size: 1.5rem;
    --bv-input-focus-font-size: 1.5rem;
    --bv-input-font-weight: 600;
    --bv-input-focus-font-weight: 600;
    --bv-input-font-style: normal;
    --bv-input-focus-font-style: normal;
    --bv-input-font-variant: normal;
    --bv-input-focus-font-variant: normal;

    /*
        Input Label
    */

    /* --bv-input-label-width: calc(var(--bv-this-num-label-width-units) * 1em); */
    /* --bv-input-label-width: calc(var(--bv-this-num-label-width-units) * var(--bv-input-unit-width)); */
    /* --bv-input-label-transform: translate(0, calc(var(--bv-input-height) * -1)); */
    /* --bv-input-label-line-height: 1.4em; */

    /* Input Label Color */
    --bv-input-label-back-color: transparent;
    --bv-input-label-focus-back-color: transparent;
    --bv-input-label-color: var(--bvolt-color-cerulean-darker, hsl(196, 80%, 25%));
    --bv-input-label-focus-color: var(--bv-focus-color, hsl(196, 100%, 33%));

    /* Input Label Font */
    --bv-input-label-font-family: var(--bv-font-family-normal, sans-serif);
    --bv-input-label-font-size: calc(var(--bv-input-font-size) * var(--bv-input-label-font-size-ratio));
    --bv-input-label-font-size-ratio: 0.65;
    --bv-input-label-focus-font-size-ratio: 0.85;
    --bv-input-label-font-weight: 600;
    --bv-input-label-focus-font-weight: 700;
    --bv-input-label-font-style: var(--bv-font-style-normal, normal);
    --bv-input-label-focus-font-style: var(--bv-font-style-focus, normal);
    --bv-input-label-font-variant: normal;
    --bv-input-label-focus-font-variant: normal;
    --bv-input-label-letter-spacing: 1px;

    /*
        Input Sizing Math Variables
    */
    /* --bv-input-unit-width: 1em; */
    /* --bv-this-num-width-units: 1; */
    /* --bv-this-num-label-width-units: 5.5; */

    /* Transitions */
    --bv-transition-header-hidden: top var(--bv-duration-header-hidden-transition, 0ms) ease-in-out;
    --bv-duration-header-hidden-transition: 300ms;

    --bv-transition-nav-spin: transform var(--bv-duration-nav-spin-transition) 96ms;
    --bv-duration-nav-spin-transition: 1000ms;

    --bv-transition-active-text: opacity var(--bv-duration-active-text-transition, 0ms) ease-out;
    --bv-duration-active-text-transition: 200ms;

    --bv-transition-focus-colors: background-color var(--bv-duration-focus-transition, 0ms) ease-out, color var(--bv-duration-focus-transition, 0ms) ease-out;
    --bv-transition-focus-ring: box-shadow var(--bv-duration-focus-transition, 0ms) ease-out;
    --bv-transition-focus-scale: transform var(--bv-duration-focus-transition, 0ms) ease-out;
    --bv-duration-focus-transition: 200ms;

    --bv-transition-client-motion: transform var(--bv-duration-client-transition, 0ms) ease-in-out;
    --bv-transition-client-opacity: opacity var(--bv-duration-client-transition, 0ms) ease-in-out;
    --bv-duration-client-transition: 1500ms;

    --bv-transition-client-list-height: height 2000ms ease-out 0ms;

    --bv-transition-faq-switch: transform var(--bv-duration-faq-transition, 0ms) ease-out;
    --bv-transition-faq-answer: max-height var(--bv-duration-faq-transition, 0ms) ease-out;
    --bv-duration-faq-transition: 300ms;

    --bv-transition-active-svg: fill-opacity var(--bv-duration-active-svg-transition, 0ms), stroke-opacity var(--bv-duration-active-svg-transition, 0ms);
    --bv-duration-active-svg-transition: 200ms;
}

.font-min-max-demo {

    /* --font-min-max: calc( 16px * (24 - 16) * (100vw - 400px) / ( 800 - 400)); */
    font-family: 'Courier Dark';
    font-size: var(--font-min-max, 1rem);
}

section {
    --bv-section-width: calc(2.4rem + 83vw);
    --bv-section-min-width: 19rem;
    --bv-section-max-width: 66rem;
    --bv-section-margin-top: 4rem;
    --bv-section-margin-bottom: 0;
}

/* font-size:calc(16px + (28 - 16) * ((100vw - 360px) / 1560)); */
/* font-size: clamp(16px, calc(16px + (28 - 16) * ((100vw - 360px) / 1560)), 28px); */
/* clamp(MIN, VAL, MAX) is resolved as max(MIN, min(VAL, MAX)) */

/* The font scaling works in Safari, if you set min-height: 0vh */
/* for all the elements with the dynamic font-size. */

/* CSS Clamp Builder? */
/* :root {

  --min-fs: 1;
  --max-fs: 1.5;
  --min-vw: 20;
  --max-vw: 45;

  --min-fs-rem: var(--min-fs) * 1rem;
  --max-fs-rem: var(--max-fs) * 1rem;
  --min-vw-rem: var(--min-vw) * 1rem;

  --slope: (var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw));

  font-size: clamp(var(--min-fs-rem), var(--min-fs-rem) + var(--slope), var(--max-fs-rem));
} */

/******************************
    Dialect Page
******************************/

:root {
--bv-transition-project-motion: transform var(--bv-duration-project-transition, 0ms) ease-in-out;
--bv-transition-project-opacity: opacity var(--bv-duration-project-transition, 0ms) ease-in-out;
--bv-duration-project-transition: 1500ms;

--bv-transition-project-list-height: height 2000ms ease-out 0ms;
}