/*------>>> TABLE OF CONTENTS <<<-------
	- CUSTOM PROPERTIES
    - CUSTOM RESETS
    - FOUNDATION RESETS
    - BASE STYLES
	- COMMON STYLES
*/

/************************************
/*----------------------------------
/* CUSTOM PROPERTIES
/*----------------------------------
/*************************************/


:root {
    /*----- Row Width -----*/
        --row-max-width-px:1170px;
        --row-max-width-rem:73.125rem;
    /*----- Colors -----*/
        --color-primary:#4F6EB1; /* rgb(221,108,13) */
        --color-primary-dark:#2E467B; /* rgb(186,91,10) */
        --color-secondary:#7692CE; /* rgb(28,54,92) */
        --color-secondary-dark:#7692CE; /* rgb(20,39,66) */
        --color-tertiary: linear-gradient(to right, #2E467B, #4F6EB1);
        --color-tertiary-dark: linear-gradient(to right, #4F6EB1, #2E467B);
        --color-quaternary: #C5CDDD;
        --color-base:#3c3c3c; /* rgb(29,34,46) */
        --color-gray-accent:#1d222e25; /* rgb(245,245,245) */
        --color-gray-accent-dark:#DEE1E8; /* rgb(208,213,221) */
        --color-white:#fefefe; /* rgb(254,254,254) */
        --color-black:#0a0a0a; /* rgb(10,10,10) */
        --color-nav-accent01:#f5f5f5; /* rgb(245,245,245) */
        --color-nav-accent02:#e8e8e8; /* rgb(232,232,232) */
        --color-transparent:29,34,46; /* Callouts & Lighbox, must be rgb */  
    /*----- Font Families -----*/
        --font-primary:'Roboto', sans-serif; /* 400 & 700 */
        --font-secondary:'Karla', sans-serif; /* 400 & 700 */
    /*----- Font Sizes -----*/
        --font-size-base:1rem; /* Paragraphs and such */
        --font-size-h6:1.125rem;
        --font-size-h5:1.25rem;
        --font-size-h4:1.375rem;
        --font-size-h3:1.875rem;
        --font-size-h2:2.25rem;
        --font-size-h1:2.75rem;
    /*----- Border Radius -----*/
        --button-radius:30px;
    }
    @media all and (min-width:64rem) { /*- 1024px and up -*/
        :root {
        /*----- Font Sizes -----*/
            --font-size-base:1rem;
            --font-size-h6:1.125rem;
            --font-size-h5:1.25rem;
            --font-size-h4:1.375rem;
            --font-size-h3:1.875rem;
            --font-size-h2:2.25rem;
            --font-size-h1:2.75rem;
        }
    }
    
    
    /************************************
    /*----------------------------------
    /* CUSTOM RESETS [Building on normalize.css being pulled with Foundation]
    /*----------------------------------
    /*************************************/
    
    
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        font-size:100%;
        font:inherit;
        vertical-align:baseline;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display:block;
    }
    html {
        -ms-text-size-adjust:100%;
        -webkit-text-size-adjust:100%;
        scroll-behavior: smooth; /* Smooth Scrolling for any Anchor Links */
    }
    html, html a, body  {
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
    }
    html, body {
        height:auto;
        min-height:100%;
    }
    body {
        line-height:1;
        box-sizing:border-box;
        margin:0;
        overflow-x:hidden;
    }
    blockquote, q {
        quotes:none;
    }
    blockquote::before, blockquote::after, q::before, q::after {
        content:'';
        content:none;
    }
    ::-moz-focus-inner {
        padding:0;
        border:0;
    }
    /*---> Box Model Reset <---*/
    *, *::before, *::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    /*---> Form Resets <---*/
    input, label, select, button, textarea {
        margin:0;
        display:inline-block;
        vertical-align:middle;
        white-space:normal;
        line-height:1;	
        /* Browsers have different default form fonts */
        font-size:13px;
        font-family:inherit;
    }
    /* These elements are usually rendered a certain way by the browser */
    button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    }
    input[type=search] {
        -webkit-appearance:textfield;
        -webkit-box-sizing:content-box;
        box-sizing: content-box;
    }
    ::-webkit-search-decoration {
        display:none;
    }
    button, input[type="reset"], input[type="button"], input[type="submit"] {
        /* Fix IE7 display bug */
        overflow:visible;
        width:auto;
    }
    ::-webkit-file-upload-button {	
        padding:0;
        border:0;
        background:none;
    }
    textarea  {
        vertical-align:top;
        overflow:auto;
    }
    select[multiple] {
        vertical-align:top;
    }
    
    
    /************************************
    /*----------------------------------
    /* FOUNDATION RESETS
    /*----------------------------------
    /*************************************/
    
    
    .row {
        max-width:var(--row-max-width-px);
        max-width:var(--row-max-width-rem);
    }
    .row.expanded .row {
        margin-left:-0.625rem;
        margin-right:-0.625rem;
    }
    /*---> Reset Card Styling <---*/
    .card {
        display:block;
        margin-bottom:0;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow: none;
        overflow: initial;
        color: inherit;
    }
    .card > :last-child {
        margin-bottom:inherit;
    }
    /*---> Reset Button Styling <---*/
    .button {
        display:initial;
        vertical-align:initial;
        margin:0;
        font-family:inherit;
        padding:0;
        -webkit-appearance: none;
        border:0;
        border-radius:0;
        transition:none;
        font-size:inherit;
        line-height:inherit;
        text-align:inherit;
        cursor:inherit;
        background-color:transparent;
        color: inherit;
    }
    /*---> Reset Callout Styling <---*/
    .callout {
        position: relative;
        margin:0;
        margin-bottom:0;
        padding:0;
        border:0;
        border-radius:0;
        background-color:transparent;
        color:inherit;
    }
    /*---> Reveal Modal Dialog <---*/
    .reveal-overlay {
        z-index:10005;
        background-color:rgba(var(--color-transparent), 0.85);
    }
    .reveal {
        margin-left:auto;
        margin-right:auto;
        padding:2.5rem 2.5rem 1.5rem; 
        border:0;
        border-radius:0;
        background-color:var(--color-white);
        box-shadow:none;
        width:90%;
        max-width:1100px;
    }
    @media screen and (max-width: 39.9375em) {
        .reveal {
            width:100%;
        }
    }
    .close-button {
        background-color:var(--color-primary);
        border-radius:0;
        padding:0;
        width:2.5rem;
        height:2.5rem;
        position:absolute;
        top:0;
        right:0;
        font-size:1.5rem;
        transition:all 200ms ease-in-out;
        -webkit-transition:all 200ms ease-in-out;
        cursor:pointer;
    }
    .close-button,
    .close-button:is(:hover, :active, :focus, :focus-visible) {
        color:var(--color-white);
    }
    .close-button:is(:hover, :active) {
        background-color:var(--color-primary-dark);
    }
    .close-button:active {
        background-color:var(--color-primary-dark);    -webkit-box-shadow:inset 0 0 0 2px var(--color-primary-dark), inset 0 0 0 4px var(--color-white);
        -moz-box-shadow:inset 0 0 0 2px var(--color-primary-dark), inset 0 0 0 4px var(--color-white);
        box-shadow:inset 0 0 0 2px var(--color-primary-dark), inset 0 0 0 4px var(--color-white);
    }
    .close-button:is(:focus, :focus-visible) {
        background-color:var(--color-primary);
        border:0;
        outline:0;
        -webkit-box-shadow:inset 0 0 0 2px var(--color-primary), inset 0 0 0 4px var(--color-white);
        -moz-box-shadow:inset 0 0 0 2px var(--color-primary), inset 0 0 0 4px var(--color-white);
        box-shadow:inset 0 0 0 2px var(--color-primary), inset 0 0 0 4px var(--color-white);
    }
    .close-button span {
        color:inherit;
        font-size:inherit;
        position:absolute;
        left:0;
        right:0;
        top:50%;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
    }
    /*- Reveal with Video -*/
    .reveal--video-modal {
        background:transparent;
    }
    .reveal--video-modal .close-button,
    .close-button--for-video-modal {
        border-radius:100%;
    }
    @media all and (min-width:40rem) { /* 640px and up */
        .medium-uncollapse>.columns { 
            padding-right:.625rem;
            padding-left:.625rem;
        }
        .medium-shrink {
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            max-width: 100%;
        }
        .medium-expand {
            max-width:100%;
        }
        .medium-align-right {
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
        }
        .medium-align-left {
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
        }
        .medium-align-center {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
        .medium-align-justify {
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }
        .medium-align-spaced {
            -ms-flex-pack: distribute;
            justify-content: space-around;
        }
        .medium-align-top {
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
        }
        .medium-align-self-top {
            -ms-flex-item-align: start;
            align-self: flex-start;
        }
        .medium-align-bottom {
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;
        }
        .medium-align-self-bottom {
            -ms-flex-item-align: end;
            align-self: flex-end;
        }
        .medium-align-middle {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
        .medium-align-self-middle {
            -ms-flex-item-align: center;
            align-self: center;
        }
        .medium-align-stretch {
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
        }
        .medium-align-self-stretch {
            -ms-flex-item-align: stretch;
            align-self: stretch;
        }
        .medium-align-center-middle {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-line-pack: center;
            align-content: center;
        }
    }
    @media all and (min-width:64rem) { /*- 1024px and up -*/
        .large-uncollapse>.columns { 
            padding-right:.625rem;
            padding-left:.625rem;
        }
        .large-shrink {
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            max-width: 100%;
        }
        .large-expand {
            max-width:100%;
        }
        .large-align-right {
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
        }
        .large-align-left {
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
        }
        .large-align-center {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
        .large-align-justify {
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }
        .large-align-spaced {
            -ms-flex-pack: distribute;
            justify-content: space-around;
        }
        .large-align-top {
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
        }
        .large-align-self-top {
            -ms-flex-item-align: start;
            align-self: flex-start;
        }
        .large-align-bottom {
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;
        }
        .large-align-self-bottom {
            -ms-flex-item-align: end;
            align-self: flex-end;
        }
        .large-align-middle {
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
        .large-align-self-middle {
            -ms-flex-item-align: center;
            align-self: center;
        }
        .large-align-stretch {
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
        }
        .large-align-self-stretch {
            -ms-flex-item-align: stretch;
            align-self: stretch;
        }
        .large-align-center-middle {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-line-pack: center;
            align-content: center;
        }
    }
    
    
    /************************************
    /*----------------------------------
    /* BASE STYLES
    /*----------------------------------
    /*************************************/
    
    
    body {
        font-family:var(--font-primary);
        font-weight:400;
        font-size:1rem;
        font-size:16px;
        color:var(--color-base);
        line-height:1;
    }
    /*- Set Vertical Spacing between Block Elements -*/
    blockquote, dl, figcaption, form, h1, .like-h1, h2, .like-h2, h3, .like-h3, h4, .like-h4, h5, .like-h5, h6, .like-h6, hr, ol, p, table, ul {
        margin-bottom:1rem;
    }
    a {
        color:var(--color-primary);
        font-weight:700;
        transition:all 200ms ease-in-out;
        -webkit-transition:all 200ms ease-in-out;
    }
    a:is(:hover, :active){
        color:var(--color-primary-dark);
    }
    a:is(:active, :focus, :focus-visible) {
        text-decoration:underline;
    }
    a:is(:focus, :focus-visible) {
        color:var(--color-primary);
        outline:0;
    }
    code {
        background-color:#feeaea;
        color:var(--color-base);
        padding-left:0.313rem;
        padding-right:0.313rem;
    }
    mark {
        background-color:#ffd700;
        color:var(--color-black);
    }
    hr {
        margin-top:0; /* Reset from Foundation */
        border-bottom:1px solid var(--color-base);
    }
    p, dl, ol, ul, table, blockquote, blockquote p,
    cite {
        font-size:var(--font-size-base);
        line-height: 1.625;
    }
    blockquote, blockquote p,
    cite {
        color:var(--color-base);
    }
    blockquote {
        padding:0.875rem 0 0.875rem 0.875rem;
        border-left:5px solid var(--color-gray-accent)
    }
    blockquote::before {
        display:block;
        width:30px;
        height:23px;
        margin-bottom:1.25rem;
        background:var(--color-primary);
        -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43.54 32.73' width='30' height='23'%3E%3Cpath d='M31.61,14.76c4.93-.49,9.32,3.11,9.81,8.04,.36,3.66-1.54,7.17-4.81,8.86-8.48,4.38-16.2-5.63-14.49-13.92C23.91,7.85,32.28,.5,42.32,0h.99c.13,0,.23,.1,.23,.23v1.84c0,.13-.11,.23-.23,.24-5.4,1.16-11.35,6.56-11.7,12.46' /%3E%3Cpath d='M9.72,14.76c4.93-.49,9.32,3.11,9.81,8.04,.36,3.66-1.54,7.17-4.81,8.86C6.24,36.04-1.48,26.03,.24,17.74,2.03,7.86,10.39,.5,20.43,0h.99c.13,0,.23,.1,.23,.23v1.84c0,.12-.11,.22-.23,.24-5.4,1.16-11.35,6.56-11.7,12.46' /%3E%3C/svg%3E");
        mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43.54 32.73' width='30' height='23'%3E%3Cpath d='M31.61,14.76c4.93-.49,9.32,3.11,9.81,8.04,.36,3.66-1.54,7.17-4.81,8.86-8.48,4.38-16.2-5.63-14.49-13.92C23.91,7.85,32.28,.5,42.32,0h.99c.13,0,.23,.1,.23,.23v1.84c0,.13-.11,.23-.23,.24-5.4,1.16-11.35,6.56-11.7,12.46' /%3E%3Cpath d='M9.72,14.76c4.93-.49,9.32,3.11,9.81,8.04,.36,3.66-1.54,7.17-4.81,8.86C6.24,36.04-1.48,26.03,.24,17.74,2.03,7.86,10.39,.5,20.43,0h.99c.13,0,.23,.1,.23,.23v1.84c0,.12-.11,.22-.23,.24-5.4,1.16-11.35,6.56-11.7,12.46' /%3E%3C/svg%3E");
        content:"";
    }
    i, /* Legacy */
    em { /* Replaces Legacy <i> */
        font-style:italic;
    }
    strong {
        font-weight:bold;
    }
    small {
        font-size:80%;
    }
    h1, h2, h3, h4, h5, h6 {
        line-height:1.3;
    }
    h1 {
        font-size:var(--font-size-h1);
        font-weight: 700;
        color: var(--color-primary-dark);
        font-family: var(--font-secondary);
    }
    h2 {
        font-size:var(--font-size-h2);  
        font-family: var(--font-secondary);
        font-weight: 700;
        color: var(--color-primary);
    }
    h3 {
        font-size:var(--font-size-h3); 
        font-family: var(--font-secondary);
        font-weight: 700;
        color: var(--color-secondary);
    }
    h4 {
        font-size:var(--font-size-h4);
        font-family: var(--font-secondary);
        font-weight: 700;
        color: var(--color-base);
    }
    h5 {
        font-size:var(--font-size-h5);
        font-family: var(--font-secondary);
        font-weight: 700;
        color: var(--color-base);
    }
    h6 {
        font-size:var(--font-size-h6);
        font-family: var(--font-secondary);
        font-weight: 700;
        color: var(--color-primary);
    }
    h1 small,
    h2 small,
    h3 small,
    h4 small,
    h5 small,
    h6 small {
        font-size:var(--font-size-h6);
        color:inherit;
        line-height:inherit;
        display:block;
    }
    ul li::marker, 
    ol li::marker {
        color:var(--color-primary); 
    }
    ol li::marker {
        font-weight:bold;
    }
    dl dt {
        margin-bottom:0; /* Reset from Foundation */
    }
    dl dd:not(:last-of-type) {
        margin-bottom:0.5rem;
    }
    label,
    fieldset legend {
        font-size:var(--font-size-base);
        font-weight:400;
        line-height:1;
        color:var(--color-base);
    }
    /* Should I remove the "form" before the selectors? */
    form input[type=text],
    form input[type=email],
    form input[type=tel],
    form textarea,
    form select,
    select {
        background-color:var(--color-white); 
        display:block;
        box-sizing:border-box;
        width:100%;
        height:46px;
        margin:0;
        padding:0.688rem 0.875rem;
        font-family:inherit;
        font-size:var(--font-size-base);
        font-weight:400;
        line-height:1;
        color:var(--color-base);
        border:2px solid var(--color-gray-accent-dark);
        border-radius:6px;
        box-shadow:none;
        transition:all 200ms ease-in-out;
        -webkit-transition:all 200ms ease-in-out;
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
    }
    form textarea {
        height:auto;
    }
    form select,
    select,
    form select:focus,
    select:focus,
    form select:focus-visible,
    select:focus-visible {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 998 582'%3E%3Cpath d='M998,83c0,8.67-3.33,16.33-10,23l-466,466c-6.67,6.67-14.33,10-23,10s-16.33-3.33-23-10L10,106C3.33,99.33,0,91.67,0,83s3.33-16.33,10-23L60,10C66.67,3.33,74.33,0,83,0s16.33,3.33,23,10L499,403,892,10c6.67-6.67,14.33-10,23-10s16.33,3.33,23,10l50,50c6.67,6.67,10,14.33,10,23Z'/%3E%3C/svg%3E");
        background-position:right center;
        background-repeat:no-repeat;
        background-size:12px 7px;
        -webkit-appearance:none !important;
        -moz-appearance:none !important;
    }
    form input[type=text]:focus,
    form input[type=email]:focus,
    form input[type=tel]:focus,
    form textarea:focus,
    form select:focus,
    select:focus,
    form input[type=text]:focus-visible,
    form input[type=email]:focus-visible,
    form input[type=tel]:focus-visible,
    form textarea:focus-visible,
    form select:focus-visible,
    select:focus-visible  {
        background-color:var(--color-white);
        border:2px solid var(--color-primary);
        outline:0;
        box-shadow:none;
    }
    form input[type=radio]:focus,
    form input[type=checkbox]:focus,
    form input[type=radio]:focus-visible,
    form input[type=checkbox]:focus-visible {
        outline:0;
        border:0;
        -webkit-box-shadow:0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        -moz-box-shadow:0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        box-shadow:0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
    }
    form input[type=text]:active,
    form input[type=email]:active,
    form input[type=tel]:active,
    form textarea:active,
    form select:active {
        background-color:var(--color-white);
        border:2px solid var(--color-primary-dark);
        box-shadow:none;
    }
    form input[type=radio]:active,
    form input[type=checkbox]:active {
        outline:0;
        border:0;
        -webkit-box-shadow:0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        -moz-box-shadow:0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        box-shadow:0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
    }
    form input[type=radio],
    form input[type=checkbox] {
        margin:0 0.313rem 0.250rem 0;
    }
    input[type="submit"],
    button,
    input[type="button"] {
        display:inline-block;
        width:auto;
        padding:1rem 1.813rem;	
        margin:0;		
        position:relative;
        background-color:var(--color-primary);
        font-size:var(--font-size-base);
        font-weight:700;
        color:var(--color-white);
        line-height:1;
        text-align:center;
        border:0;
        border-radius:var(--button-radius);
        box-shadow:none;
        cursor:pointer;
        transition:all 200ms ease-in-out;
        -webkit-transition:all 200ms ease-in-out;
    }  
    button,
    input[type="button"] {
        background-color:var(--color-secondary);
    }
    input[type="submit"]:hover {
        background-color:var(--color-primary-dark);
        color:var(--color-white);
    }
    input[type="submit"]:active {
        background-color:var(--color-primary-dark);
        color:var(--color-white);
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
    }
    input[type="submit"]:focus,
    input[type="submit"]:focus-visible {
        background-color:var(--color-primary);
        border:0;
        outline:0;
        color:var(--color-white);
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
    }
    button:hover,
    input[type="button"]:hover {
        background-color:var(--color-secondary-dark);
        color:var(--color-white);
    }
    button:active,
    input[type="button"]:active {
        background-color:var(--color-secondary-dark);
        color:var(--color-white);
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-secondary-dark);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-secondary-dark);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-secondary-dark);
    }
    button:focus,
    button:focus-visible,
    input[type="button"]:focus,
    input[type="button"]:focus-visible {
        border:0;
        outline:0;
        background-color:var(--color-secondary);
        color:var(--color-white);
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-secondary);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-secondary);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-secondary);
    }
    [type="button"]:focus,
    [type="button"]:focus-visible,
    [type="submit"]:focus,
    [type="submit"]:focus-visible {
        outline:0;
    }
    /*- Highlighting on Select [Click and Drag] -*/
    ::-moz-selection {
        background-color:var(--color-primary);
        color:var(--color-white);
    }
    ::selection {
        background-color:var(--color-primary);
        color:var(--color-white);
    }
    
    
    /************************************
    /*----------------------------------
    /* COMMON STYLES
    /*----------------------------------
    /*************************************/
    
    
    /*---> Branding <---*/
    .branding-link {
        display:block;
        width:100%;
    }
    .branding-link:hover {
    }
    .branding-link:active {
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
    }
    .branding-link:is(:focus, :focus-visible) {
        border:0;
        outline:0;
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
    }
    .branding-link svg {
        display:block;
        width:100%;
        height:auto;
        fill:var(--color-base);
        transition:all 200ms ease-in-out;
        -webkit-transition:all 200ms ease-in-out;
    }
    .branding-link:is(:hover, :active) svg {
        fill:var(--color-primary-dark);
    }
    .branding-link:is(:focus, :focus-visible) svg {
        fill:var(--color-primary);
    }
    /*---> Buttons <---*/
    .btn {
        display:inline-block;
        width:auto;
        padding:.9rem 1.125rem;	
        margin:0;	
        position:relative;
        background:var(--color-primary);
        font-family: var(--font-secondary);
        font-size:var(--font-size-base);
        font-weight:700;
        color:var(--color-white);
        line-height:1;
        text-align:center;
        border:1px solid transparent;
        border-radius:var(--button-radius);
        cursor:pointer;
        transition:all 200ms ease-in-out;
        -webkit-transition:all 200ms ease-in-out;
    }
    .btn:is(:active, :focus, :focus-visible) {
        text-decoration:none;
    }
    .btn:hover {
        background:var(--color-primary-dark);
        color:var(--color-white);
    }
    .btn:active {
        background:var(--color-primary-dark);
        color:var(--color-white);
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
    }
    .btn:is(:focus, :focus-visible) {
        background:var(--color-primary);
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        color:var(--color-white);
        outline:0;
    }
    .btn--large {
        padding-top:1.25rem;
        padding-bottom:1.25rem;
    }
    .btn--ghost {
        background:transparent;
    }
    .btn--ghost:not(:hover, :active, :focus, :focus-visible) {
        color:var(--color-primary);
        border-color:var(--color-primary);
    }
    .btn--alt:not(.btn--ghost) {
        background:var(--color-white);
        color: var(--color-primary-dark);
        font-family: var(--font-secondary);
        font-weight: 700;
        font-size: 1.375rem;
    }
    .btn--alt:hover {
        background:var(--color-primary-dark);
        color: var(--color-white);
    }
    .btn--alt:active {
        background:var(--color-primary-dark);
        color: var(--color-white);
    }
    .btn--alt:is(:focus, :focus-visible) {
        background:var(--color-quaternary);
        -webkit-box-shadow: 0 0 0 2px var(--color-primary-dark), 0 0 0 4px var(--color-quaternary);
        -moz-box-shadow: 0 0 0 2px var(--color-primary-dark), 0 0 0 4px var(--color-quaternary);
        box-shadow: 0 0 0 2px var(--color-primary-dark), 0 0 0 4px var(--color-quaternary);
        color: var(--color-primary-dark);
    }
    .btn--alt.btn--ghost:not(:hover, :active, :focus, :focus-visible) {
        background:transparent;
        color:var(--color-secondary);
        border-color:var(--color-secondary);
    }
    /*---> Video Play Button <---*/
    .has-play-btn {
        display:inline-block;
        line-height:0;
        position:relative;
        background:transparent !important;
        isolation:isolate;
    }
    .has-play-btn:is(:hover, :active, :focus, :focus-visible) {
        text-decoration:none;
    }
    .has-play-btn img {
        z-index:1;
    }
    .has-play-btn::before {
        display:block;
        width:80px;
        height:80px;
        background:var(--color-primary);
        content:"";
        position:absolute;
        left:50%;
        top:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        border-radius:100%;
        overflow:hidden;
        transition:all 200ms ease-in-out;
        -webkit-transition:all 200ms ease-in-out;
        z-index:2;
    }
    .has-play-btn::after {
        display:block;
        width:27.249px;
        height:30.878px;
        content:"";
        background:var(--color-white);
        -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.249' height='30.878' viewBox='0 0 27.249 30.878'%3E%3Cpath d='M192.695,186.973l23.422-13.523a1.914,1.914,0,0,0,0-3.315l-23.422-13.523a1.914,1.914,0,0,0-2.871,1.657v27.045a1.914,1.914,0,0,0,2.871,1.657' transform='translate(-189.824 -156.354)' /%3E%3C/svg%3E%0A");
        mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.249' height='30.878' viewBox='0 0 27.249 30.878'%3E%3Cpath d='M192.695,186.973l23.422-13.523a1.914,1.914,0,0,0,0-3.315l-23.422-13.523a1.914,1.914,0,0,0-2.871,1.657v27.045a1.914,1.914,0,0,0,2.871,1.657' transform='translate(-189.824 -156.354)' /%3E%3C/svg%3E%0A");
        position:absolute;
        left:calc(50% + 0.188rem);
        top:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        z-index:3;
    }
    .has-play-btn:hover::before {
        background:var(--color-primary-dark);
    }
    .has-play-btn:active::before {
        background:var(--color-primary-dark);
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
    }
    .has-play-btn:is(:focus, :focus-visible)::before {
        background:var(--color-primary);
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        outline:0;
    }
    /*---> Social List <---*/
    .social-list {
        margin-left:0;
        display:flex;
        flex-flow:row wrap;
        list-style:none;
    }
    .social-list__item {
        line-height:1;
    }
    .social-list__item:not(:last-of-type) {
        margin-right:2rem;
    }
    .social-list__item::before {
        display:none;
    }
    .social-link {
        display:inline-block;
    }
    .social-link:active {
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary-dark);
    }
    .social-link:is(:focus, :focus-visible) {
        border:0;
        outline:0;
        -webkit-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        -moz-box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
    }
    .social-link__icon {
        fill:var(--color-base);
        transition:all 200ms ease-in-out;
        -webkit-transition:all 200ms ease-in-out;
    }
    .social-link:is(:hover, :active) .social-link__icon {
        fill:var(--color-primary-dark);
    }
    .social-link:is(:focus, :focus-visible) .social-link__icon {
        fill:var(--color-primary);
    }
    /* Alternate Circle Social Links */
    .social-list__item--has-round:not(:last-of-type) {
        margin-right:0.625rem;
    }
    .social-link--is-round {
        width:50px;
        height:50px;
        border-radius:100%;
        background:var(--color-base);
        position:relative;	
    }
    .social-link--is-round:is(:hover, :active) {
        background:var(--color-primary-dark);
    }
    .social-link--is-round:is(:focus, :focus-visible) {
        background:var(--color-primary);
    }
    .social-link__icon--for-round {
        position:absolute;
        inset:0;
        margin:auto;
    }
    .social-link__icon--for-round,
    .social-link--is-round:is(:hover, :active, :focus, :focus-visible) .social-link__icon--for-round {
        fill:var(--color-white);
    }
    /*---> Style Guide Specific <---*/
    .anchor {
        font-weight:inherit;
        color:inherit;
        pointer-events:none;
    }
    .style-guide-header {
        position:relative;
        padding:1.5rem 0 0.5rem;
        margin-bottom:1rem;
    }
    .style-guide-header:before {
        display:block;
        margin:0 auto;
        width:100vw;
        height:100%;
        content:"";
        position:absolute;
        top:0;
        left:-50vw;
        right:-50vw;
        background:var(--color-gray-accent);
        z-index:-1;
    }
    .code-block {
        margin-bottom:1rem;
    }
    .code-block-live,
    .code-block-color {
        border:1px dotted var(--color-base);
        margin-bottom:1rem;
        -webkit-box-shadow:0px 10px 25px 0px rgba(0,0,0,0.15);
        -moz-box-shadow:0px 10px 25px 0px rgba(0,0,0,0.15);
        box-shadow:0px 10px 25px 0px rgba(0,0,0,0.15);  
    }
    .code-block-live {
        padding:1.5rem 1.5rem 0.5rem;
    }
    .code-block-color {
        padding:0 1.5rem 0.5rem;
    }
    .code-block-color div[class^="background"] {
        margin-left:-1.5rem;
        margin-right:-1.5rem;
        margin-bottom:1rem;
    }
    .code-block-color div.background-white {
        border-bottom:1px solid var(--color-gray-accent);
    } 
    pre[class*="language-"]::after, pre[class*="language-"]::before {
        display:none !important;
    }
    .dev-hint {
        background:#e8f5e1;
        border:1px solid #ADDB94;
        padding:1.5rem 1.5rem 0.5rem;
        margin-bottom:1rem;
    }
    .dev-hint h6,
    .dev-hint p {
        color:#244116;
    }
    .dev-hint code {
        background-color:rgba(36,65,22,0.15);
    }