/*

Default Style

• Contains Absolute CSS Variables
• Visually hides HTML Structure headings
• Sets basic element visual styles

*/





/* ------------------ CSS Variables ------------------ */
.html
{
    --color--panda-blue: hsl(215, 100%, 45%);
    --color--chikka-orange: hsl(30, 100%, 50%);
    --color--record-red: hsl(0, 91%, 50%);
    --color--uhog-green: hsl(120, 82%, 38%);
    
    
    
    
    
    /* Foreground Color */
    --fg-color: hsl(0, 0%, 15%);
    
    /* Image Placeholder Color */
    --image-placeholder--bg-color: hsla(0, 0%, 0%, .85);
    
    
    /* Foreground Color - Reverse (use with a dark background) */
    --fg-color--reverse: hsl(0, 100%, 100%);
    
    /* Faint Color */
    --faint-color--pri: hsla(0, 0%, 0%, .5);
    
    /* Border Color */
    --border-color: hsla( 0, 0%, 0%, .5 );
    
    /* Gutter */
    --gutter-x--base: 1rem;
    --gutter-x--xsm--multiplier: .25;
    --gutter-x--sm--multiplier: .5;
    --gutter-x--md--multiplier: 1;
    --gutter-x--lg--multiplier: 1.5;
    
    --gutter-x--xsm: calc( var(--gutter-x--base) * var(--gutter-x--xsm--multiplier) );
    --gutter-x--sm: calc( var(--gutter-x--base) * var(--gutter-x--sm--multiplier) );
    --gutter-x--md: calc( var(--gutter-x--base) * var(--gutter-x--md--multiplier) );
    --gutter-x--lg: calc( var(--gutter-x--base) * var(--gutter-x--lg--multiplier) );
    
    /* Spacing */
    --spacing-y--base: 1rem;
    --spacing-y--xsm--multiplier: .25;
    --spacing-y--sm--multiplier: .5;
    --spacing-y--md--multiplier: 1;
    --spacing-y--lg--multiplier: 1.5;
    
    --spacing-y--xsm: calc( var(--spacing-y--base) * var(--spacing-y--xsm--multiplier) );
    --spacing-y--sm: calc( var(--spacing-y--base) * var(--spacing-y--sm--multiplier) );
    --spacing-y--md: calc( var(--spacing-y--base) * var(--spacing-y--md--multiplier) );
    --spacing-y--lg: calc( var(--spacing-y--base) * var(--spacing-y--lg--multiplier) );
    
    --spacing-relative-y--base: 1em;
    
    --spacing-relative-y--sm: calc( var(--spacing-relative-y--base) * var(--spacing-y--sm--multiplier) );
    --spacing-relative-y--md: calc( var(--spacing-relative-y--base) * var(--spacing-y--md--multiplier) );
    --spacing-relative-y--lg: calc( var(--spacing-relative-y--base) * var(--spacing-y--lg--multiplier) );
    
    /* Font Size */
    
    --font-size--sm: .875em;
    --font-size--md: 1.125em;
    --font-size--lg: 1.5em;
    
    /* Element Dimensions */
    --elem-dimension--md: 3rem;
    
    /* Transition */
    --transition--generic: all .125s ease-in-out;
    
    /* Aspect Ratio */
    --aspect-ratio--hd: calc( (9/16) * 100 );
    
    /* Buttons */
    --button--pri--bg-color: #005fe6;
    --button--pri--fg-color: var(--fg-color--reverse);
    
    --button--padding: .5em 1em;
    
    
    --button--bg-color: #005fe6;
    --button--fg-color: var(--fg-color--reverse);
    
    /* Selection - Colors */
    --selection--bg-color: hsl(120, 82%, 38%);
    --selection--fg-color: var(--fg-color--reverse);
    
    /* Section - Spacing */
    --section--spacing: var(--spacing-y--md) var(--gutter-x--md);
    --section--spacing-x: var(--gutter-x--md);
    --section--spacing-y: var(--spacing-y--md);
    
    /* Content - Spacing */
    --content--spacing: .75em var(--gutter-x--md);
    --content--spacing-x: var(--gutter-x--md);
    --content--spacing-y: var(--spacing-relative-y--sm);
    
    /* Object - Spacing */
    --object--spacing-x: var(--gutter-x--md);
    --object--spacing-y: var(--spacing-y--md);
    --object--spacing-y--sm: var(--spacing-y--sm);
    --object--spacing--md: var(--spacing-y--md) var(--gutter-x--md);
    
    /* Component - Spacing */
    --component--spacing-x: var(--gutter-x--md);
    --component--spacing-y: var(--spacing-y--md);
    --component--spacing--md: var(--spacing-y--md) var(--gutter-x--md);
    
    /* Content - Font Size */
    --content--font-size: var(--font-size--md);
    
    /* Caption - Font Size */
    --caption--font-size: var(--font-size--sm);
    
    /* Copyright Info - Colors */
    --copyright-info--fg-color: var(--faint-color--pri);
    
    /* Generic Text - Colors */
    --generic-text--fg-color: hsl(120, 82%, 38%);
    
    /* List - Spacing */
    --list--spacing--xsm: var(--spacing-y--xsm) var(--gutter-x--xsm);
    --list--spacing-y--xsm: var(--spacing-y--xsm);
    
    /* Table - Spacing */
    --table--spacing: var(--spacing-y--md) var(--gutter-x--md);
    
    /* Web Product - Colors */
    --wbp--bg-color: var(--bg-color);
    --wbp--fg-color: var(--fg-color);
    
    /* Links - Colors */
    --links--fg-color: #005fe6;
    
    /* Main Nav */
    --main-nav--bg-color: hsl(0, 100%, 100%);
    
    /* Sub Nav - Toggle Button - Colors */
    --sub-nav-func-root--toggle-button--fg-color: var(--fg-color);
    --sub-nav-func-branches--toggle-button--fg-color: var(--fg-color);
    
    /* Main Header Aside - Colors */
    --main-header-aside--bg-color: var(--wbp--bg-color);
    
    /* Main Menu - Colors */
    --main-menu-func--fg-color: var(--wbp--fg-color);
    
    /* Go to Start Nav - Colors */
    --go-start-nav-func--fg-color: var(--wbp--fg-color);
    
    /* Input Text - Border Color */
    --input-text--border-color: var(--border-color);
    
    /* Image - Color */
    --image--bg-color: var(--image-placeholder--bg-color);
    
    /* Element Dimensions */
    --elem--width--md: var(--elem-dimension--md);
    --elem--height--md: var(--elem-dimension--md);
    --elem--dimension: var(--elem-dimension--md);
    
    /* Active Area Dimensions */
    --active-area--dimension--md: var(--elem-dimension--md);
    --active-area--width--md: var(--elem-dimension--md);
    --active-area--height--md: var(--elem-dimension--md);
    
    /* Main Logo - Dimensions */
    --main-logo--height: 2.25rem;
    
    /* Label - Spacing */
    --glabel--spacing: var(--gutter-x--md);
    
    /* Author Avatar - Dimensions */
    --author-avatar--width: var(--elem-dimension--md);
    --author-avatar--height: var(--elem-dimension--md);
    
    /* Commenter Avatar - Dimensions */
    --commenter-avatar--width: calc( var(--elem-dimension--md) - 1rem );
    --commenter-avatar--height: calc( var(--elem-dimension--md) - 1rem );
    
    /* Dismiss Icon - Dimensions */
    --dismiss-icon--width: .75rem;
    --dismiss-icon--height: .75rem;
    
    /* Text Spacing */
    --glabel--between--spacing: .3em;
    
    /* Overlays */
    --overlay--light: hsl(0, 100%, 100%);
    --overlay--dark: hsl(0, 0%, 0%);
    
    /* Note */
    --note--font-size: var(--font-size--sm);
    --note--fg-color: var(--font-size--sm);
    
    /* Go to Content Nav */
    --go-content-nav--bg-color: var(--button--pri--bg-color);
    --go-content-nav--fg-color: var(--button--pri--fg-color);
    
    /* Easy Access Nav - Main Nav - Colors */
    --easy-access-nav-func--main-nav--fg-color: hsl(0, 0%, 0%);
    
    /* Sub Nav - Colors */
    --easy-access-nav-func--sub-nav--bg-color: hsl(0, 100%, 100%);
    --easy-access-nav-func--sub-nav--fg-color: hsl(0, 0%, 0%);
    
    /* Easy Access Nav - Sub Nav - Indicator - Colors */
    --easy-access-nav-func--navi--root--indicator: hsla( 0, 0%, 0%, .125 );
    
    --easy-access-nav-func--navi--current-ancestor--indicator: hsla( 0, 0%, 0%, .25 );
    --easy-access-nav-func--navi--branch--indicator: hsla( 0, 0%, 0%, .125 );
    
    /* Easy Access Nav - Sub Nav - Border Color */
    --easy-access-nav-func--sub-nav--border-color: hsla( 0, 0%, 0%, .125 );
    
    /* Easy Access Nav - Indicator - Dimensions */
    --easy-access-nav-func--indicator--height: .125rem;
    --easy-access-nav-func--indicator--width: .125rem;
}





/* ------------------ Visually Hidden ------------------ */
.visually-hidden,
.go-ct-nav---h,
.main-info---h,
.main-actions-aside---h,
.search-term-crt---h,
.search-term-crt-search-flabel,
.search-form-axns---h,
.main-hr-aside---h,
.main-ct-hr-aside---h,
.main-ct-aside---h,
.main-fr-aside---h,
.entry-md---h,
.entries---h,
.entry---h,
.post-hr-aside---h,
.post-meta---h,
.post-pub-mod---h,
.post-pub---h,
.post-pub-d-t-stamp---h,
.post-mod---h,
.post-mod-d-t-stamp---h,
.published-post-author---h,
.post-author---h,
.post-categories---h,
.categories---h,
.post-tags---h,
.tags---h,
.comments-axns-snip---h,
.comments-population---h,
.comment-crt---h,
.post-content---h,
.go-start-nav---h,
.comment-md---h,
.comment-hr-aside---h,
.comment-meta---h,
.comment-pub---h,
.comment-pub-d-t-stamp---h,
.published-com-commenter---h,
.commenter---h,
.comment-crt-hd---h,
.signed-in-acct---h,
.post-excerpt---h,
.sub-post-content---h,
.search---h,
.widget---h,
.widget-content---h,
.multisite---h,
.site-preview---h,
.site-main-info---h,
.comment-content---h,
.comments---h,
.main-banner---h,
.main-banner-aside---h,
.main-post-title---h,
.reserved-rights---line,
.copyright---line .delimiter---txt
{
    position:absolute;margin:-1px;padding:0;width:1px;min-width:auto;height:1px;min-height:auto;overflow:hidden;clip:rect(0,0,0,0);border:0;word-wrap:normal;
}





/* ------------------ Stuff ------------------ */
*,
:after,
:before
{
    box-sizing: border-box;
}

.html
{
    height: 100%;
}

.body
{
    min-height: 100%;
}





/* ------------------ Clearfix ------------------ */
.clearfix:before,
.clearfix:after,
.post-content---ct_cr:before,
.post-content---ct_cr:after
{
    content: " ";
    display: table;
}

.clearfix:after,
.post-content---ct_cr:after
{
    clear: both;
}





/* ------------------ Resets ------------------ */
abbr[title]
{
    text-decoration: none;
}

abbr[title]:hover
{
    border-bottom: 0;
}

label[for]:hover
{
    cursor: pointer;
}





/* ------------------ WordPress Required CSS Selectors ------------------ */
.wp-caption-text,
.sticky,
.screen-reader-text,
.gallery-caption,
.bypostauthor,
.aligncenter
{}





/* ------------------ Image ------------------ */
img
{
    max-width: 100%;
    height: auto;
}





/* ------------------ Video ------------------ */
video
{
    max-width: 100% !important;
    height: auto !important;
}





/* ------------------ Icons ------------------ */
.icon--vector,
.icon--raster
{
    display: inline-block;
    
    position: relative;
    
    width: 1rem;
    height: 1rem;
    
    vertical-align: middle;
    
    fill: currentColor;
}

.support--inlinesvg .icon--raster,
.support--no-inlinesvg .icon--vector
{
    display: none;
}





/* ------------------ Viewport Width: 768 ------------------ */
@media only screen and ( min-width: 48em )
{

    /* ------------------ Alignments ------------------ */
    .post-content---ct_cr > .alignleft
    {
        float: left;
    }

    .post-content---ct_cr > .alignright
    {
        float: right;
    }

    .post-content---ct_cr > .aligncenter
    {
        clear: both;
        margin-left: auto;
        margin-right: auto;
    }

}