/*---------------------------------------------------------------------------
Positioning Helpers FRAMEWORK 2024-06-18
---------------------------------------------------------------------------*/

/* Floats
-----------------------------------------------*/
/* Clearfix */
.clearfix:after {  content: " "; display: block;  height: 0;  clear: both; }

/* Positioning
-----------------------------------------------*/
/* Relative */
.relative, .relative-child > :first-child { position: relative; }
/* Absolute Overlay overlay relative parent. Forcess Full Height */
.box-over { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; }
/* Set to Sticky */
:root {
    --sticky_child-top-distance: 4rem; 
}
.sticky_child { height: 100%; display: flex; flex-flow: row wrap; }
.sticky_child > * { width: 100%; top: var(--sticky_child-top-distance); position: sticky; align-self: flex-start; }
.stickychild_child > * { height: 100%; display: flex; flex-flow: row wrap; }
.stickychild_child > * > * { width: 100%; top: var(--sticky_child-top-distance); position: sticky; align-self: flex-start; }

/* Z-Index
-----------------------------------------------*/
.z-0   { position:relative; z-index: -0; }
.z-1   { position:relative; z-index: -1; }
.z-2   { position:relative; z-index: -2; }
.z-3   { position:relative; z-index: -3; }
.z-4   { position:relative; z-index: -4; }
.z-5   { position:relative; z-index: -5; }
.z-6   { position:relative; z-index: -6; }
.z-7   { position:relative; z-index: -7; }
.z-8   { position:relative; z-index: -8; }
.z-9   { position:relative; z-index: -9; }
.z-10  { position:relative; z-index: -10; }
.z0    { position:relative; z-index: 0; }
.z1    { position:relative; z-index: 1; }
.z2    { position:relative; z-index: 2; }
.z3    { position:relative; z-index: 3; }
.z4    { position:relative; z-index: 4; }
.z5    { position:relative; z-index: 5; }
.z6    { position:relative; z-index: 6; }
.z7    { position:relative; z-index: 7; }
.z8    { position:relative; z-index: 8; }
.z9    { position:relative; z-index: 9; }
.z10   { position:relative; z-index: 10; }
.z15   { position:relative; z-index: 15; }
.z20   { position:relative; z-index: 20; }
.z25   { position:relative; z-index: 25; }
.z30   { position:relative; z-index: 30; }
.z35   { position:relative; z-index: 35; }
.z40   { position:relative; z-index: 40; }
.z45   { position:relative; z-index: 45; }
.z50   { position:relative; z-index: 50; }
.z55   { position:relative; z-index: 55; }
.z60   { position:relative; z-index: 60; }
.z65   { position:relative; z-index: 65; }
.z70   { position:relative; z-index: 70; }
.z75   { position:relative; z-index: 75; }
.z80   { position:relative; z-index: 80; }
.z85   { position:relative; z-index: 85; }
.z90   { position:relative; z-index: 90; }
.z95   { position:relative; z-index: 95; }
.z100   { position:relative; z-index: 100; }
.z150   { position:relative; z-index: 150; }
.z200   { position:relative; z-index: 200; }
.z250   { position:relative; z-index: 250; }
.z300   { position:relative; z-index: 300; }
.z350   { position:relative; z-index: 350; }

/* Flex Centering
-----------------------------------------------*/
.flex-center-vertically, .flex-vert, .flex-vert-child > :first-child { display: flex; justify-content: center; flex-direction: column; height: 100%; }
.flex-hor, .flex-hor-child > :first-child { display: flex; justify-content: center;  }

/*---------------------------------------------------------------------------
Common Visibility Helpers FRAMEWORK 2024-05-25
---------------------------------------------------------------------------*/

/* Overflow */
.overhid, .over-hidden { overflow: hidden; }

/*---------------------------------------------------------------------------
Common Image Helpers FRAMEWORK 2024-05-25
---------------------------------------------------------------------------*/

/* Background Image */
.bkg-img { background-repeat: no-repeat; background-size: cover; }

/* Make Img Cover Using <div.img-cover><picture><img>...*/
.img-cover { position: relative; overflow: hidden; }
.img-cover picture { width: 100%; height: 100%; display: flex; }
.img-cover picture img { object-fit: cover; object-position: center center; }

/* Make Img Cover Using Picture Tag <div.img-cover.picture-cover><img>... */
.img-cover.picture-cover { /*width: 100%; height: 100%; */display: flex; z-index: 0; }
.img-cover.picture-cover  img { object-fit: cover; object-position: center center; }

/* Make Image Absolute and Cover with no specific height */
.img-cover.picture-absolute picture, .img-cover.img-absolute picture, .img-cover.img-absolute  img 
{ position: absolute; top: 0; width: 100%; height: 100%; z-index: -1; }

Image Helpers

Image Cover

Quickly set PICTURE tag as cover. Container has set height

.img-cover -> picture -> img

Quickly set IMG tag as cover. Container has set height

.img-cover.picture-cover -> img

Image Overlay Set Container Height

Paded Absolute Overlay over IMG container. Container has set height

This is a quick overylay centered vertically with transparent color

.button

.img-cover.picture-cover.relavite -> .box-over.spv.sph -> .flex-center-vertically

Paded Absolute Overlay over PICTURE container. Container has set height

This is a quick overylay centered vertically with transparent color

.button

.img-cover.picture-cover.relavite -> .box-over.spv.sph -> .flex-center-vertically

Image Overlay Child Sets Height

Overlay made with setting IMG as absolute. Height is defined Child’s Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Overlay made with setting PICTURE as absolute. Height is defined Child’s Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

/*---------------------------------------------------------------------------
Common Text Helpers FRAMEWORK 2024-05-25
---------------------------------------------------------------------------*/

/* Text Alignment Helpers */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }

/* lists */
ol.no-bullet, ul.no-bullet { margin-left:0; list-style:none; }

/*---------------------------------------------------------------------------
Link Helpers FRAMEWORK 2024-05-28
---------------------------------------------------------------------------*/

/* ID link Gives Adds Space Above */
:root { --idlink-top: 4rem;  }

.idlink:before {  display: block;  content: " ";  margin-top: calc( var(--idlink-top) * -1 );  height: var(--idlink-top);  visibility: hidden;  pointer-events: none; }

/*---------------------------------------------------------------------------
Common Effect Helpers FRAMEWORK 2024-05-25
---------------------------------------------------------------------------*/

/* Text Shadow
-----------------------------------------------*/
.tshad { text-shadow: var(--shadow-text); }
.tshad-light { text-shadow: var(--shadow-text-light); }

/* Box Shaddows
-----------------------------------------------*/
.shad, .box-shad { box-shadow: var(--shadowbox); }
.shad-btn { box-shadow: var(--shadowbox); }

/* Border Radius
-----------------------------------------------*/
.brnd, .brdr, .brnd-child > * { border-radius: var(--borderradius); overflow: hidden; }

/* Backdrop Blur
-----------------------------------------------*/
.bblur { backdrop-filter: var(--backdropblur); }

/*---------------------------------------------------------------------------
Accessibility Helpers FRAMEWORK 2024-05-25
---------------------------------------------------------------------------*/

/* Text meant only for screen readers. */
.screen-reader-text, .srt, .hidden_visually { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
/* Hider */
.screen-reader-text:focus, .srt:focus,  .hidden_visually:focus 
    { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; 
    display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000;}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus { outline: 0; }

/*---------------------------------------------------------------------------
Menu Helpers FRAMEWORK 2024-07-26
---------------------------------------------------------------------------*/

.menu { padding: 0; margin: 0; list-style: none; position: relative; display: flex; flex-wrap: wrap; }
.menu, .menu.horizontal { flex-wrap: wrap; flex-direction: row; }
 *[class*="align-left"] { justify-content: flex-start; }
.align-left-flush > li:first-child a { padding-left: 0 !important; }
 *[class*="align-right"] { justify-content: flex-end; }
.align-right-flush > li:last-child a { padding-right: 0 !important; }
.align-center { justify-content: center; }
.menu.expanded li { flex: 1 1 0px; }
.menu a, .menu button { line-height: 1; text-decoration: none; display: block; padding: 0.7rem 1rem; }
.menu.vertical { flex-wrap: nowrap; flex-direction: column; }

    @media screen and (max-width: 760px) {
        *[class*="menu-small-"] { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: normal !important; -webkit-flex-flow: row wrap !important; -ms-flex-flow: row wrap !important; flex-flow: row wrap !important; }
        *[class*="menu-small-"] > li { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; min-height: 0; min-width: 0; width: 100%; }
        .menu-small-4 > li {  width: 25% !important; }
        .menu-small-3 > li {  width: 33.3333% !important; }
        .menu-small-2 > li {  width: 50% !important; }
        .menu-small-1 > li {  width: 100% !important; }
    }

/*---------------------------------------------------------------------------
Grid Container Helpers - Container Variables Based in theme - FRAMEWORK 2024-05-25
---------------------------------------------------------------------------*/

/* Grid Container Classes
-----------------------------------------------*/  
.gcw-xl, .gcw-xl-child > :first-child                       { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: var(--gcw-max-xl); }
.gcw, .gcw-child > :first-child                             { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: var(--gcw-max); }
.gcw-m, .gcw-m-child > :first-child                         { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: var(--gcw-max-m); }
.gcw-s, .gcw-s-child > :first-child                         { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: var(--gcw-max-s); }
.gcw.fluid { width: 100%; max-width: 100% !important; }

.gcw-plus, .gcw-child-plus > :first-child                   { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max) + var(--sp-base) + var(--sp-base) ); }
.gcw-plus-rim, .gcw-child-plus-rim > :first-child           { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max) + var(--sp-rim) + var(--sp-rim) ); }
.gcw-plus-feat, .gcw-child-plus-feat > :first-child         { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max) + var(--sp-feat) + var(--sp-feat) ); }

.gcw-m-plus, .gcw-m-child-plus > :first-child               { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-m) + var(--sp-base) + var(--sp-base) ); }
.gcw-m-plus-rim, .gcw-m-child-plus-rim > :first-child       { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-m) + var(--sp-rim) + var(--sp-rim) ); }
.gcw-m-plus-feat, .gcw-m-child-plus-feat > :first-child     { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-m) + var(--sp-feat) + var(--sp-feat) ); }

.gcw-s-plus, .gcw-s-child-plus > :first-child               { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-s) + var(--sp-base) + var(--sp-base) ); }
.gcw-s-plus-rim, .gcw-s-child-plus-rim > :first-child       { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-s) + var(--sp-rim) + var(--sp-rim) ); }
.gcw-s-plus-feat, .gcw-s-child-plus-feat > :first-child     { margin-left: auto !important; margin-right: auto !important; width: 100%; max-width: calc( var(--gcw-max-s) + var(--sp-feat) + var(--sp-feat) ); }

/* Grid Container Half Variables
-----------------------------------------------*/  
:root {
    --gcw-max-xl-half: calc( var(--gcw-max-xl) * .5 ); 
    --gcw-max-half: calc( var(--gcw-max) * .5 ); 
    --gcw-max-m-half: calc( var(--gcw-max-m) * .5 ); 
    --gcw-max-s-half: calc( var(--gcw-max-s) * .5 ); 
}

.gcw

.gcw-child

.gcw-m

.gcw-m-child

.gcw-s

.gcw-s-child

.gcw-xl

.gcw-xl-child

Space Types

These are scaled via variables.

var(--sp-rim)

var(--sp-base)

var(--sp-feat)

/*---------------------------------------------------------------------------
Padding & Margin Helpers FRAMEWORK 2024-05-25
---------------------------------------------------------------------------*/

/* Margin 0
-----------------------------------------------*/
.mb-0 { margin-bottom: 0px !important; }
.mb0, .mb-0, .smb0 :last-child, .smb0-child > :first-child { margin-bottom: 0px !important; }

/* Padding, Margin Base
-----------------------------------------------*/
.spv, .spv-child > :first-child { padding-top: var(--sp-base) !important; ; padding-bottom: var(--sp-base) !important; ; }
.spb, .spb-child > :first-child { padding-bottom: var(--sp-base) !important; ; }
.spt, .spt-child > :first-child { padding-top: var(--sp-base) !important; ; }
.sph, .sph-child > :first-child { padding-left: var(--sp-base); padding-right: var(--sp-base) !important; ; }

.smv, .smv-child > :first-child { margin-top: var(--sp-base) !important; ; margin-bottom: var(--sp-base) !important; ; }
.smb, .smb-child > :first-child { margin-bottom: var(--sp-base) !important; ; }
.smt, .smt-child > :first-child { margin-top: var(--sp-base) !important; ; }
.smh, .smh-child > :first-child { margin-left: var(--sp-base); margin-right: var(--sp-base) !important; ; }

/* Padding, Margin Rim
-----------------------------------------------*/
.spv-rim, .spv-rim-child > :first-child { padding-top: var(--sp-rim) !important; ; padding-bottom: var(--sp-rim) !important; ; }
.spb-rim, .spb-rim-child > :first-child { padding-bottom: var(--sp-rim) !important; ; }
.spt-rim, .spt-rim-child > :first-child { padding-top: var(--sp-rim) !important; ; }
.sph-rim, .sph-rim-child > :first-child { padding-left: var(--sp-rim); padding-right: var(--sp-rim) !important; ; }

.smv-rim, .smv-rim-child > :first-child { margin-top: var(--sp-rim) !important; ; margin-bottom: var(--sp-rim) !important; ; }
.smb-rim, .smb-rim-child > :first-child { margin-bottom: var(--sp-rim) !important; ; }
.smt-rim, .smt-rim-child > :first-child { margin-top: var(--sp-rim) !important; ; }
.smh-rim, .smh-rim-child > :first-child { margin-left: var(--sp-rim); margin-right: var(--sp-rim) !important; ; }

/* Padding, Margin Feature
-----------------------------------------------*/
.spv-feat, .spv-feat-child      > :first-child { padding-top: var(--sp-feat) !important; ; padding-bottom: var(--sp-feat) !important; ; }
.spb-feat, .spb-feat-child      > :first-child { padding-bottom: var(--sp-feat) !important; ; }
.spb-feat15, .spb-feat15-child  > :first-child { padding-bottom: calc(var(--sp-feat) * 1.5); !important; ; }
.spb-feat2, .spb-feat2-child    > :first-child { padding-bottom: calc(var(--sp-feat) * 2); !important; ; }
.spt-feat, .spt-feat-child      > :first-child { padding-top: var(--sp-feat) !important; ; }
.sph-feat, .sph-feat-child      > :first-child { padding-left: var(--sp-feat); padding-right: var(--sp-feat) !important; ; }

.smv-feat, .smv-feat-child      > :first-child { margin-top: var(--sp-feat) !important; ; margin-bottom: var(--sp-feat) !important; ; }
.smb-feat, .smb-feat-child      > :first-child { margin-bottom: var(--sp-feat) !important; ; }
.smt-feat, .smt-feat-child      > :first-child { margin-top: var(--sp-feat) !important; ; }
.smh-feat, .smh-feat-child      > :first-child { margin-left: var(--sp-feat); margin-right: var(--sp-feat) !important; ; }

/* Pull top */
.pull-top-feat { position: relative; margin-top: calc(var(--sp-feat) * -1); z-index: 1; }
.pull-top-feat15 { position: relative; margin-top: calc(var(--sp-feat) * -1.5); z-index: 1; }
.pull-top-feat2 { position: relative; margin-top: calc(var(--sp-feat) * -2); z-index: 1; }

/*---------------------------------------------------------------------------
Padding & Margin Helpers FRAMEWORK 2024-07-26
---------------------------------------------------------------------------*/

/* HVC Base CSS */
:root {
    --hvc--gap_column: 0rem;
    --hvc--gap_row: 0rem;
}

*[class*="hvc--"],
*[class*="hvcchild--"] > *  {
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: auto 1fr;
    grid-template-areas:
    'hvc--header'
    'hvc--visual '
    'hvc--content';
    column-gap: var(--hvc--gap_column);
    row-gap: var(--hvc--gap_row);
}

/* HVC Grid Areas & last element margin removal */
*[class*="hvc--"] > :first-child,    
*[class*="hvcchild--"] > * > :first-child    
{ grid-area: hvc--header;   margin-bottom: 0px !important; }
    *[class*="hvc--"] > :first-child  > :last-child, 
    *[class*="hvc--"] > :first-child  > :last-child > :last-child { margin-bottom: 0px !important; }

*[class*="hvc--"] > :nth-child(2),
*[class*="hvcchild--"] > * > :nth-child(2)
{ grid-area: hvc--visual;   margin-bottom: 0px !important; }
    *[class*="hvc--"] > :nth-child(2)  > :last-child,
    *[class*="hvc--"] > :nth-child(2)  > :last-child > :last-child { margin-bottom: 0px !important; }

*[class*="hvc--"] > :nth-child(3),
*[class*="hvcchild--"] > * > :nth-child(3)
{ grid-area: hvc--content;  margin-bottom: 0px !important;}
    *[class*="hvc--"] > :nth-child(3)  > :last-child,
    *[class*="hvc--"] > :nth-child(3)  > :last-child > :last-child { margin-bottom: 0px !important; }

/* HVC Grid Areas & last element margin removal */
*[class*="hvc--"] > :first-child,    
*[class*="hvcchild--"] > * > :first-child    
{ background-color: var(--docsclr-1); }

*[class*="hvc--"] > :nth-child(2),
*[class*="hvcchild--"] > * > :nth-child(2)
{ background-color: var(--docsclr-2); }


*[class*="hvc--"] > :nth-child(3),
*[class*="hvcchild--"] > * > :nth-child(3)
{ background-color: var(--docsclr-3); }


    /* HVC Standard Layouts */
    @media screen and (min-width: 760px) {

        /* Header Visual  */
        /* Content Visual */
        *[class*="hvc--hv_cv"],
        *[class*="hvcchild--hv_cv"] > * {    
            grid-template-columns: 1fr 1fr !important; 
            grid-template-areas:
            'hvc--header  hvc--visual'
            'hvc--content hvc--visual';
        }

            .hvc--hv_cv-2-3, .hvcchild--hv_cv-2-3 > * { grid-template-columns: 2fr 3fr !important; }
            .hvc--hv_cv-3-2, .hvcchild--hv_cv-3-2 > * { grid-template-columns: 3fr 2fr !important; }

        /* Header Header  */
        /* Visual Content */
        *[class*="hvc--hh_vc"],
        *[class*="hvc--hh_vc"].hvcstagger:nth-child(odd), 
        *[class*="hvc--hh_cv"].hvcstagger:nth-child(even) {    
            grid-template-columns: 1fr 1fr !important; 
            grid-template-areas:
            'hvc--header hvc--header'
            'hvc--visual hvc--content';
        }

            /* Fifths */
            .hvc--hh_cv-2-3
            .hvc--hh_cv-2-3.hvcstagger:nth-child(odd),
            .hvc--hh_vc-2-3.hvcstagger:nth-child(even)
            { grid-template-columns: 2fr 3fr !important; }
            .hvc--hh_cv-3-2
            .hvc--hh_cv-3-2.hvcstagger:nth-child(odd),
            .hvc--hh_vc-3-2.hvcstagger:nth-child(even)
            { grid-template-columns: 3fr 2fr !important; }

        /* Header  Header */
        /* Content Visual */
        *[class*="hvc--hh_cv"],
        *[class*="hvc--hh_cv"].hvcstagger:nth-child(odd),
        *[class*="hvc--hh_vc"].hvcstagger:nth-child(even) {    
            grid-template-columns: 1fr 1fr !important; 
            grid-template-areas:
            'hvc--header  hvc--header'
            'hvc--content hvc--visual';
        }
            /* Fifths */
            .hvc--hh_vc-2-3
            .hvc--hh_vc-2-3.hvcstagger:nth-child(odd),
            .hvc--hh_cv-2-3.hvcstagger:nth-child(even)
            { grid-template-columns: 2fr 3fr !important; }
            .hvc--hh_vc-3-2
            .hvc--hh_vc-3-2.hvcstagger:nth-child(odd),
            .hvc--hh_cv-3-2.hvcstagger:nth-child(even)
            { grid-template-columns: 3fr 2fr !important; }

    }

    /* HVC SIDEBAR */
    @media screen and (min-width: 1000px) {
 
        /* Visual  Header  */
        /* Visual  Content */
        *[class*="hvc--sidebar--vh-vc"],
        *[class*="hvcchild--sidebar--vh-vc"] > * {    
            grid-template-columns: 450px auto !important; 
            grid-template-areas:
            'hvc--visual hvc--header '
            'hvc--visual hvc--content';
        }

        *[class*="hvc--sidebar--hv-cv"],
        *[class*="hvcchild--sidebar--hv-cv"] > * {    
            grid-template-columns: auto 450px !important; 
            grid-template-areas:
            'hvc--header  hvc--visual'
            'hvc--content hvc--visual';
        }

    }

Header Visual – Content Visual

Some Header Lead Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in aliquam orci. Donec scelerisque urna in elit dapibus venenatis eget vitae sem. Vestibulum interdum hendrerit rhoncus.

• This is a check-list item with a check
• This is a check-list item with a check
• This is a check-list item with a check

Header Visual – Content Visual – 3-2

Some Header Lead Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in aliquam orci. Donec scelerisque urna in elit dapibus venenatis eget vitae sem. Vestibulum interdum hendrerit rhoncus.

• This is a check-list item with a check
• This is a check-list item with a check
• This is a check-list item with a check