/* always have font declarations at the top */
@font-face {
    font-display: swap;
    font-family: "flowtext";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/poppins-western.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "flowtext";
    font-style: normal;
    font-weight: bold;
    src: url("fonts/poppins-western-bold.woff2") format("woff2");
}

@font-face {
    font-family: "icons";
    font-weight: normal;
    font-style: normal;
    src: url("fonts/RRA_Icons-Regular.woff2") format("woff2"),
    url("fonts/RRA_Icons-Regular.woff") format("woff");
    font-display: swap;
}

/* @import url("ed_colors.css"); */
:root {
    --dark: 30%;
    --light: 86%;
    --neutral: 50%;
    --color-background: #FFFFFF;
    --primary-link-hsl: 240, 80%;
    --color-bg-light: hsl(180, 3%, 100%);
    --color-bg-lighter: hsl(210, 4%, 100%);

    /* --color-link: hsl(var(--primary-link-hsl), var(--neutral)); */
    --color-link: #115C88;

    /* #1987c7; */
    /* #468FB6; */
    --link-color-hover: #3c3c3c;
    --color-link-lighter: #6199B7;
    --color-link-light: #e3fbff;
    --color-light-blue: rgb(227, 251, 255);

    /* --color-link-dark: hsl(var(--primary-link-hsl), var(--dark)); */
    --color-link-translucent: hsla(var(--primary-link-hsl), var(--neutral), .35);
    --color-gradient-1: to right, #bdc3c7, #2c3e50;
    --color-neutral: hsl(0, 1%, var(--neutral));
    --color-neutral-dark: hsl(0, 1%, var(--dark));
    --color-neutral-light: hsl(0, 1%, var(--light));
    --color-modal-fader: hsla(0, 1%, var(--neutral), 0.8);
    --primary-action: #009ef7;
    --error: #d9214e;
    --warning: #f1bc00;
    --success: #50cd89;
    --light-grey: #f0f2f5;
    --color-grey: #a1a5b7;
    --dark-grey: #666666;
    --youtube-red: #FE0900;
    --action-text-color: var(--color-background);
    --button-bg-color: var(--primary-action);
    --light-brown: #fefcf8;

    /* from logo */
    --color-text: #6b6b84;
    --color-text-dark: hsl(18, 100%, 3%);
    --color-accent-1: hsl(355, 78%, 31%);
    --red-or-white: var(--color-accent-1);
    --color-accent-2: hsl(56, 96%, 48%);
    --color-accent-2-muted: hsl(39, 73%, 32%);
    --color-accent-2-dark: hsl(39, 88%, 56%);
    --color-accent-3: hsl(39, 73%, 32%);
    --color-accent-3-bright: hsl(39, 71%, 44%);
    --color-accent-3-muted: hsl(39, 88%, 56%);
    --color-accent-3-dark: hsl(33, 78%, 25%);
    --color-accent-4: hsl(39, 88%, 56%);
    --color-accent-4-muted: hsl(33, 78%, 25%);
    --color-accent-4-dark: hsl(16, 95%, 8%);
    --hero-glass: rgba(17,32,59,0.80);

    /* base measurements */
    --pad: clamp(0.5em, min(2vw, 4vh), 4em);
    --maxWidth-constrain: 80rem;
    --maxWidth-modal: 32rem;
    --maxWidth-modalForm: 24rem;
    --borderRadius-outer: 0.5em;
    --borderRadius-inner: 0.25em;
    --category-image: url('../img/butler-with-placard.jpg');
    --star: url('../img/star-icon.webp');

    /* shadows and borders */
    --shadow-chrome: 0 0.25em 1em 0.25em var(--color-neutral);
    --shadow-button: 0 0.25em 0.25em 0.125em var(--color-neutral);
    --shadow-formElement-focus: 0 0 0.25em 0.125em var(--color-neutral);
    --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
    --shadow-sm: 0 0.3px 0.4px rgba(0, 0, 0, 0.025),0 0.9px 1.5px rgba(0, 0, 0, 0.05),0 3.5px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
    --card-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);

    /* keep shadow opacity between 5-25% */
    --shadow-rgb: 0 0 0;
    --shadow-low-elevation: 0 1px 3px rgb(var(--shadow-rgb) / 40%);
    --shadow-medium-elevation: 0 1px 3px rgb(var(--shadow-rgb) / 40%), 0 6px 12px rgb(var(--shadow-rgb) / 40%);
    --shadow-high-elevation: 0 1px 3px rgb(var(--shadow-rgb) / 40%), 0 18px 36px rgb(var(--shadow-rgb) / 40%);
    --shadow-low-layered: 0 1px 1px rgb(var(--shadow-rgb) / 12%), 0 2px 2px rgb(var(--shadow-rgb) / 12%), 0 4px 4px rgb(var(--shadow-rgb) / 12%), 0 8px 8px rgb(var(--shadow-rgb) / 12%), 0 16px 16px rgb(var(--shadow-rgb) / 12%);
    --shadow-high-layered: 0 1px 1px rgb(var(--shadow-rgb) / 11%), 0 2px 2px rgb(var(--shadow-rgb) / 11%), 0 4px 4px rgb(var(--shadow-rgb) / 11%), 0 8px 8px rgb(var(--shadow-rgb) / 11%), 0 16px 16px rgb(var(--shadow-rgb) / 11%), 0 32px 32px rgb(var(--shadow-rgb) / 11%);
    --border-hairline: 1px solid var(--color-neutral);
    --base-scale: calc(100vw / 75);
    --text-font-size: clamp(1rem, 2.08vw, 1.5rem);
    --h1-font-size: max(1.25em, min(4em, calc(var(--base-scale) * 2.25)));
    --h2-font-size: max(1em, min(4em, calc(var(--base-scale) * 2)));
    --h3-font-size: max(0.75em, min(3em, calc(var(--base-scale) * 1.5)));
    --padding-size: max(1em, min(2em, calc(var(--base-scale))));
    --margin-size: max(0.5em, min(2em, calc(var(--base-scale))));

    /* scrollToTop */
    --borderColor: #246A;
    --traceBorderWidth: 0.0625rem;

    /* light/dark switch */
    --lightDarkColor: #FFA31A;

    /* --border-radius:max(1em, min(3em, calc(var(--base-scale) * 1.5))); */
    --radius: 0.25em;
    --radius-sm: calc(var(--radius, 0.25em)/2);
    --radius-md: var(--radius, 0.25em);
    --radius-lg: calc(var(--radius, 0.25em)*2);
    --toolbar-shadow: 0 10px 30px 0 rgba(82, 63, 105, 0.05);
    --toolbar-divider: #eff2f5;
    --switch-size: 1em;
    --switch-border-size: 0.2em;
    --switch-inner-radius: calc(var(--switch-size) / 2);
    --switch-outer-radius: calc(
            var(--switch-inner-radius) +
            var(--switch-border-size)
    );

    /* column baseline */
    --unit: 1rem;
    --padding: calc(var(--unit) * 2);
    --hero-glass-max-width: 50%;
    --sectionFocusBg: #DDD;
    --featuredImgWidth: 10rem;
}

.darkMode {
    --color-background: #0D0D0D;
    --color-text: #FFFFFF;
    --shadow-rgb: 255 255 255;
    --lightDarkColor: #F0F1F4;
    --red-or-white: #FFFFFF;
}

/* keep in case javascript turned off */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #0D0D0D;
        --color-text: #FFFFFF;
        --shadow-rgb: 255 255 255;
        --lightDarkColor: #F0F1F4;
        --red-or-white: #FFFFFF;
    }
}

body,
button,
input,
table,
textarea,
select {
    font-family: flowtext,sans-serif;
    font-size: var(--text-font-size);

    /* font: normal 1em/1.5 flowtext,sans-serif; */
}

button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: var(--shadow-formElement-focus);
}

/* defaults */
h1 {
    font-size: var(--h1-font-size);
}

h2 {
    font-size: var(--h2-font-size);
}

h3 {
    font-size: var(--h3-font-size);
}

a {
    color: var(--color-link);
}

a:hover {
    color: var(--link-color-hover);
}

/* modal */
#scrollFix,
.modal,
.modal > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    scroll-behavior: smooth;
}

.modalClose_outer span,
.modalClose_inner span {
    position: absolute;
    left: -100vw;
}

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em;
    left: -100vw;
    opacity: 0;
    background: var(--color-modal-fader);
    transition: opacity 0.5s, left 0s 0.5s;
}

.modal:target {
    left: 0;
    opacity: 1;
    transition: opacity 0.5s;
    z-index: 1000;
}

.modal:target > a {
    display: block;

    /* undo "hidden" */
}

.modal > div {
    position: relative;
    overflow: hidden;
    max-width: 40rem;
    margin: auto;
    background: var(--color-background);
    border: var(--border-hairline);
    border-radius: var(--borderRadius-outer);
    scale: 0;
    transition: scale 0.5s;
}

.modal:target > div {
    scale: 1;
}

.modal > div > :is(header, footer) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background);
}

.modal > div > header {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid lightgray;
}

.modalClose_inner {
    display: block;
    flex-grow: 0;
}

header a {
    text-decoration: none;
}

.modalClose_inner:before {
    content: "\E035";
    font-family: 'icons';
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text);
}

.modal h2 {
    flex-grow: 1;
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0;
}

.modal header ~ * {
    margin: 1rem .5rem;
}

form.modal > div {
    max-width: var(--maxWidth-modalForm);
}

.modal h2,
#mainMenu ul:before {
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-background);
    border-bottom: 1px solid var(--shadow-chrome);
    color: var(--color-link);
}

.modal > div > fieldset {
    padding: var(--pad);
}

.modal input:not([type="checkbox"],[type="radio"],[type="button"],[type="submit"]),
.modal textarea {
    width: 97%;
    padding: 0.25em 0.5em;
    margin: 0.5em;
    border: var(--border-hairline);
    border-radius: var(--borderRadius-inner);
}

.modal label {
    display: block;
    text-indent: 0.5em;
}

/* for youtube pop-ups */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-iframe {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    height: 360px;
    border: none;
    z-index: 1001;
}

fieldset label {
    color: var(--color-text);
}

#fauxBody {
    /* display: flex;
    flex-direction: column; */
    min-height: 100%;

    /* overflow: auto; */
    background: var(--color-background);
    color: var(--color-text);
}

#wrapper,
#fauxBody main {
    background-color: #F5F6FA;
}

/* #fauxBody main {
    background-color: var(--color-background);
} */
/* actions */
.actions {
    display: flex;
    justify-content: space-between;
    column-gap: 1em;
}

.modal footer button,
.actions a,
a.featured,
.actions a,
.search-submit {
    background-color: var(--color-link);
    color: var(--color-bg-lighter);
    border: var(--color-bg-lighter) 3px solid;
    text-align: center;
    padding: 1rem;
    transition: all 0.1s;
    flex: 0 0 auto;
    text-transform: uppercase;
    text-decoration: none;
}

.actions a {
    text-decoration: none;
    padding-left: 2rem;
    padding-right: 1rem;
    font-weight: bold;
    font-size: 1rem;
}

:is(.actions, modal footer) :is(a:hover, a:focus, button:hover, button:focus),
a.featured:hover,
.search-submit:hover {
    background-color: var(--color-link-lighter);
    transform: translateY(-3px);
    box-shadow: 0 10px 4px rgba(0, 0, 0, 0.2);
}

.actions a:active,
a.featured:active {
    transform: translateY(1px);
    box-shadow: 0 10px 2px rgba(0, 0, 0, 0.2);
}

.featured span {
    font-size: 1.3em;
    text-shadow: 1px 1px var(--text-color);
}

#fauxBody > footer {
    background-color: var(--light-brown);
    padding: .5em 1em;
}

.grid-container,
#fauxBody > footer > div {
    /* * * User input values. */
    --grid-layout-gap: 1em;
    --grid-column-count: 3;
    --grid-item--min-width: 10em;

    /* * * Calculated values. */
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    grid-gap: var(--grid-layout-gap);
    margin: 1rem;
}

.grid-container {
    max-width: var(--maxWidth-constrain);
    padding: 1rem;
}

#fauxBody > footer > div {
    --grid-column-count: 4;
}

#fauxBody > footer h2 {
    text-align: left;
    padding-top: 0;
}

main,
.columns {
    padding: 0 var(--pad);
    display: flex;
    flex-wrap: wrap;
}

main {
    max-width: var(--maxWidth-constrain);
    margin: 0 auto;
    padding: 0;
}

.columns {
    justify-content: center;
    align-items: center;
}

#fauxBody > footer > div {
    /* --columns: 4; */
    background-image: url('../img/footer-map.webp');
    background-repeat: no-repeat;
    background-position: center;
    animation-name: MOVE-BG;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    min-height: 362px;
    padding-top: 2rem;
}

#fauxBody > footer li {
    list-style: none;
    padding: 0.25em 0;
}

#fauxBody > footer section:first-of-type li {
    display: inline;
}

#fauxBody > footer a {
    color: var(--dark-grey);
    text-decoration: none;
    font-weight: bold;
}

#fauxBody > footer a:hover {
    color: var(--color-link);
}

#fauxBody > header {
    padding: 0 1rem;
    flex-grow: 0;
}

#fauxBody > header {
    display: flex;
    border-bottom: var(--border-hairline);
    justify-content: space-between;
}

/* h1 {
  font-size:1.5em;
} */
/* header h1 {
    position: absolute;
    left: -999px;
}

h1 ~ * {
    flex-grow: 0;
} */
#top {
    place-items: center;
}

/* #top nav {
    background-color: var(--color-background);
} */
nav a {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
}

nav ul li:last-child {
    padding-right: 1rem;
}

nav ul li:last-child a {
    color: var(--text-color);
}

#address,
#address h2,
#address a,
#copyright {
    text-decoration: none;
}

#address address {
    color: var(--color-accent-2);
}

#top nav {
    padding: 0.75rem 0;
    align-self: center;
    margin-left: 1rem;
}

#top li {
    display: inline;
    list-style: none;
    margin-left: 1.5rem;
}

#top li a {
    transition: transform 0.5s;
    font-size: 1rem;
}

.searchIcon:hover {
    transform: scale(1.4);
}

nav li :is(a:focus, a:hover) {
    color: var(--link-color-hover);
}

h1,
h1 a,
h2,
h2 a,
h3,
h4 {
    text-align: center;
    padding-top: var(--padding-size);
}

main h3 {
    font-size: 1.5em;
    padding-top: 1em;
}

main h4 {
    font-size: 1.4em;
}

main article {
    width: 100%;

    /* margin-left: var(--padding);
    margin-right: var(--padding); */
}

#content {
    width: 1%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: var(--color-background);
}

/* for 404 page */
img {
    flex: none;
    max-width: 100%;
    height: auto;
}

#extras-left,
#extras-right,
#post-extras {
    flex: 0 0 auto;
    max-width: 30%;

    /* min-width: 12em; */
    background-color: var(--color-background);
    padding-top: var(--padding-size);
    font-size: .875em;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#extras-left > * {
    padding-right: 2em;
    padding-left: 1em;
}

:is(#post-extras, #extras-right) > * {
    padding-left: 2em;
    padding-right: 1em;
}

:is(#post-extras, #extras-left, #extras-right) h2 {
    font-size: var(--h3-font-size);
}

ul.sibling_pages {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-accent-1);
    margin-bottom: 1em;
}

ul.sibling_pages li > a {
    display: block;
    padding: 1rem 1.25rem;
    color: var(--color-accent-1);
    text-decoration: none;
    font-weight: 600;

    /* line-height: 3.75rem; */
}

ul.sibling_pages li > a:hover {
    background-color: var(--color-accent-1);
    color: var(--color-background);
}

ul.sibling_pages li:not(:last-child) > a {
    border-bottom: 1px solid var(--color-accent-1);
}

.sibling_posts li {
    list-style: none;
    margin-bottom: 1rem;
}

.sibling_posts a {
    text-decoration: none;
}

.sibling_posts br + a {
    display: block;
    min-height: 4rem;
    margin-top: 0.5rem;
    padding-right: 5rem;
    font-size: 1.25rem;
    font-weight: bold;
    background: var(--articleImg) top right no-repeat;
    background-size: 4rem;
}

:is(article) :is(ul, ol, .wp-block-table) {
    padding-left: 1em;
}

:is(article) :is(p, li),
.wp-block-column article p {
    padding: 0.5em 0;
    font-size: 1.3rem;
}

article p {
    padding: 0.5em 1em;
}

article li {
    margin: 0 1em;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem var(--pad);
    gap: clamp(1rem, var(--pad), 2rem);
}

.breadcrumbs {
    margin-bottom: var(--pad);
    margin-left: var(--pad);
}

.breadcrumbs > ul {
    border-radius: 0;
    border: 3px solid var(--red-or-white);
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    letter-spacing: .04em;
    font-size: .7em;
    display: inline-block;
    list-style: none;
    margin-top: 3em;
}

.breadcrumbs > ul > li {
    padding: 0 .8125em;
    position: relative;
    display: inline-block;
    font-size: 1em;
    margin: 0;
}

.breadcrumbs > ul > li > a {
    text-decoration: none;
    color: var(--red-or-white);
}

.breadcrumbs > ul > li:last-child > a {
    color: var(--color-neutral);
}

.breadcrumbs > ul > li+li:before {
    content: ' ';
    padding: 0;
    border-right: 3px solid var(--red-or-white);
    transform: skew(-7deg);
    position: absolute;
    left: -2px;
    height: 100%;
}

.pagination {
    display: flex;
    margin-top: 2em;
    margin-bottom: 2em;
    justify-content: space-around;
}

.pagination > * {
    flex: none;
}

.articleSummaries {
    margin-top: 2rem;
    max-width: var(--maxWidth-constrain);
}

.articleSummaries article {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: var(--featuredImgWidth) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "time title"
    "image description";
}

.articleSummaries > a {
    text-decoration: none;
    color: inherit;
}

.articleSummaries > a * {
    transition: background 0.3s;
}

.articleSummaries article img {
    max-width: var(--featuredImgWidth);
    grid-area: image;
}

.articleSummaries article h2 {
    font-size: 1.2rem;
    line-height: 1.25;
    padding: 1rem;
    grid-area: title;
}

.articleSummaries article time {
    padding-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    padding: 1rem;
    grid-area: time;
}

.articleSummaries > a:focus h2,
.articleSummaries > a:hover h2,
.articleSummaries > a:focus p,
.articleSummaries > a:hover p {
    background: var(--sectionFocusBg);
}

.articleSummaries p {
    margin: 0;
    padding: 0 1rem 1rem;
    grid-area: description;
}

/* .album {
    display: flex;
    flex-wrap: wrap;
    max-width: 80em;
    gap: clamp(1rem, 1.5vw, 2rem);
    padding: 0;
}

.album article {
    overflow: hidden;
    flex-grow: 0;
    width: 100%;
    max-width: 24em;
    background-color: var(--color-background-light);
    background-clip: border-box;
    border-radius: var(--radius-md);
    margin: 0.5em;
    box-shadow: var(--inner-glow),var(--shadow-sm);
    transition: all .3s;
}

.album article:hover {
    background-color: var(--color-background-lighter);
    box-shadow: var(--inner-glow),var(--shadow-md);
}

.album article img {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 15.625em;
}

.album article > h2 {
    font-size: 1.5em;
    font-style: normal;
    border: none;
    text-align: center;
    text-decoration: none;
}

.album a {
    text-decoration: none;
}

.album p {
    margin: 0 1em;
} */
.readMore {
    display: block;
    text-decoration: none;
    color: var(--color-link);
    transition: color 0.3s, background 0.3s, box-shadow 0.3s;
    margin-top: 0.9em;
    text-align: right;
    margin-right: 1em;
    margin-bottom: 1em;
    font-weight: 700;
}

.readMore:hover {
    color: var(--color-accent-4);
}

/* https://codepen.io/willpower/pen/pJKdej */
.wsp-container li {
    font-size: 1em;
    list-style-type: none;
    margin: .625em 0 .625em .625em;
    position: relative;
}

.wsp-container li:before {
    content: "";
    position: absolute;
    top: 1em;
    left: -1.25em;
    border-left: 1px solid var(--color-neutral);
    border-bottom: 1px solid var(--color-neutral);
    width: 1.25em;
    height: 1em;
}

.wsp-container li:after {
    content: "";
    position: absolute;
    top: 2.5em;
    left: -1.25em;
    border-left: 1px solid var(--color-neutral);
    border-bottom: 1px solid var(--color-neutral);
    width: 1.25em;
    height: 100%;
}

.wsp-container li:last-child:after {
    display: none;
}

.wsp-container li a {
    display: block;
    border: 1px solid var(--color-neutral);
    padding: .625em;
}

.resources h3 a {
    text-decoration: none;
}

/* video */
video {
    width: 100%;
}

.video-popup,
.hero {
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: 0.5em;

    /* margin-top: 1em;
    margin-bottom: 1em; */
}

.video-popup {
    --video-image: url(https://pinegrow.com/placeholders/img15.jpg);
    display: flex;
}

.video-popup a {
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.play-button-container {
    position: absolute;
    left: 50%;
    top: 50%;
    align-items: center;
    background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, .2));
    border-radius: 50%;
    border-width: 0;
    box-shadow: rgba(0, 0, 0, .5) 0 24px 72px 0;
    display: flex;
    justify-content: center;
    transform: translateX(-50%) translateY(-50%);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    height: 10.25rem;
    width: 10.25rem;
}

.play-button-container:hover {
    cursor: pointer;
    transform: translateX(-50%) translateY(-50%) scale(.96);
}

.play-button {
    width: 7.5rem;
    max-width: 7.5rem;
    height: 7.5rem;
    background-color: var(--color-bg-lighter);
    border-radius: 100%;
    box-shadow: rgba(0, 0, 0, .3) 0 8px 16px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);

    /* z-index: 2; */
}

.play-button-container:hover .play-button {
    transform: scale(1.16);
}

.play-button svg {
    max-height: 34px;
    max-width: 34px;
}

.pageHeader {
    background-color: var(--color-neutral);
    color: var(--color-background);
    padding: 1px 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-width: 67.5rem;
    min-height: 27.5rem;
    opacity: 0.99;
    margin-bottom: 2em;
    max-width: var(--maxWidth-constrain);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
}

.hero {
    --hero-image: url(https://pinegrow.com/placeholders/img17.jpg);
    display: inline-block;
}

.hero div {
    background-color: var(--hero-glass);
    max-width: var(--hero-glass-max-width);
    padding-left: var(--padding-size);
    padding-right: var(--padding-size);
    margin: 5%;
    position: inherit;
    text-align: center;
}

.hero h2 {
    color: var(--color-bg-lighter);
    font-size: var(--h3-font-size);
    text-align: left;
    margin: 0;
    text-transform: uppercase;
    padding-top: 1em;
    padding-bottom: 1em;
    font-weight: normal;
}

.hero h3 {
    font-size: var(--h2-font-size);
    color: var(--color-bg-lighter);
    line-height: 1.2;
    padding-top: 0;
}

.hero a.featured {
    display: inline-block;
    margin: 1em auto;
}

.pageHeader::before,
.video-popup::before,
.hero::before,
.wp-block-rra-featured > div::after {
    opacity: 1;
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.video-popup::before {
    background-size: contain;
}

.pageHeader::before {
    background-image: var(--category-image);
}

.video-popup::before {
    background-image: var(--video-image);
}

.hero::before {
    background-image: var(--hero-image);
}

.pageHeader h1 {
    animation: fadeIn .5s ease-out;
    box-shadow: 0.5rem 0 0 var(--light-grey), -0.5rem 0 0 var(--light-grey);
    color: var(--color-background);
    font-size: 3.5em;
    line-height: .9em;
}

.pageHeader :is(h1, p) {
    background-color: var(--color-neutral);
    z-index: 2;
    max-width: 90%;
    padding: 0.2em;
    text-shadow: 2px 2px var(--color-text);
    flex-grow: initial;
}

article > footer {
    background-color: var(--color-neutral-light);
    color: var(--color-text-dark);
    padding: 1em;
    margin: 1em 0;
    font-size: 1em;
}

article footer img {
    border: 1px solid var(--color-neutral);
    border-radius: 50%;
    float: left;
    margin: 0 .625em .625em 0;
}

article footer h2 {
    text-decoration: none;
    color: var(--color-text-dark);
}

/* Wordpress */
body .is-layout-flex {
    display: flex;
    gap: 1.5rem;
}

.wp-block-columns {
    display: flex;
    margin: 1.25em 0;
    flex-wrap: wrap !important;
    padding-left: 1em;
    padding-right: 1em;
}

.wp-block-column {
    flex: 1;
}

.wp-block-rra-cta,
.aligncenter,
.has-text-align-center {
    text-align: center;
}

.alignleft,
.wp-block-file,
.wp-block-file__button {
    text-align: left;
    margin-left: 1em;
}

.wp-block-video,
figure.wp-block-embed {
    --wp--style--global--content-size: 850px;
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
}

figure {
    margin: 0 0 1em;
}

.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;

    /* element ratio is 4:3 (3/4 * 100) */
    padding-top: 75%;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.wp-block-image img {
    vertical-align: bottom;
}

.columns.featured > section {
    /* --span: 4; */
    border: var(--border-hairline);
    border-radius: var(--borderRadius-outer);
    box-shadow: var(--shadow-low-elevation);
}

.featured section:hover {
    box-shadow: var(--shadow-high-layered);
}

/* .featured section:first-child {
    --span: 6;
    padding: min(2em, calc(4vw + 0.5em)) min(2em, 3vw);
    font-size: 1.25em;
    background: var(--color-accent-1);
    color: var(--color-bg-light);
    border: none;
}

.featured section:first-child header {
    display: block;
}

.featured section:first-child img {
    max-width: 16em;
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}

.featured section:first-child h2 {
    color: var(--color-bg-light);
}

.featured section:first-child .readMore {
    color: var(--color-accent-2);
}

.featured section:first-child .readMore:hover {
    color: var(--color-accent-4);
} */
.featured header {
    margin-bottom: 0.5em;
    display: flex;
    flex-direction: column;
}

.featured h2 {
    font-size: 1.75em;
    order: 2;
    text-decoration: none;
}

.featured .feature {
    color: var(--color-accent-1);
}

.featured header img {
    aspect-ratio: 16 / 9;
}

.featured header span {
    order: 1;
    font-weight: bold;
    color: var(--color-accent-2);
}

header time {
    order: 3;
    text-align: center;
    display: block;
}

.featured picture {
    margin: 0 auto;
}

.featured:before {
    background: var(--color-link);
    color: var(--color-background);
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2;
    margin-bottom: 0.5rem;
    font-size: 2em;
    text-align: center;
    border-radius: 50%;
}

.featured p {
    margin: 0 .5rem;
}

/* related */
/* .related {
    display: flex;
    margin-bottom: 1em;
    overflow: hidden;
    max-width: 30ch;
}

.related img {
    width: 80px;
    height: 80px;
    padding-right: var(--pad);
} */
.related li {
    list-style: none;
    margin-bottom: 2rem;
}

.related br + a {
    display: block;
    min-height: 4rem;
    margin-top: .5rem;
    padding-right: 5rem;
    font-size: 1.25rem;
    font-weight: bold;
    background: var(--articleImg) top right no-repeat;
    background-size: 4rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;

    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* testimonials */
/* https://codepen.io/baahubali92/pen/BvdmLo */
#testimonials {
    columns: 32em;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    background-color: var(--color-background);
}

#testimonials article {
    break-inside: avoid;
}

#testimonials article blockquote {
    position: relative;
    width: 70%;
    text-align: center;
    margin: 2.5em auto;
    background-color: var(--color-background);
    border: .5em solid var(--color-neutral);
    border-radius: 1.875em;
    padding: 1.25em;
    flex: 0 0 100%;
    line-height: 1.4;
}

#testimonials article :is(blockquote:before, blockquote:after) {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
}

#testimonials article blockquote:before {
    left: 1.875em;
    bottom: -3.125em;
    border: 1.5625em solid;
    border-color: var(--color-neutral) transparent transparent var(--color-neutral);
}

/* #testimonials article blockquote:after {
    left: 2.5em;
    bottom: -1.875em;
    border: 1em solid;
    border-color: var(--color-background) transparent transparent var(--color-background);
} */
#testimonials article img {
    top: 0;
    left: 0;
    right: 0;
    width: 8.5em;
    height: 8.5em;
    margin: auto;
    display: block;
    color: var(--color-neutral);
    font-size: 1.5em;
    line-height: 2.875;
    text-align: center;
    position: relative;
    border-radius: 50%;
    box-shadow: -0.375em 0.375em 0.375em var(--color-neutral);
    -moz-box-shadow: -0.375em 0.375em 0.375em var(--color-neutral);
    -o-box-shadow: -0.375em 0.375em 0.375em var(--color-neutral);
    -webkit-box-shadow: -0.375em 0.375em 0.375em var(--color-neutral);
}

:is(#testimonials article, .carousel article) footer {
    background-color: inherit;
    color: inherit;
    border: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0 1em;
}

.carousel blockquote > footer img {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 4em;
    width: auto;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 0 0 0.125em var(--color-neutral-dark);
}

.carousel-container {
    background-color: var(--light-brown);

    /* color-light-blue */
    max-width: var(--maxWidth-constrain);

    /* box-shadow: var(--shadow-high-elevation);
        border-radius: 1.25em; */
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    overflow: hidden;
    margin: 1em auto;
    max-height: 40em;
    min-height: 10em;

    /* scroll-snap-type: x mandatory; */
    scroll-behavior: smooth;
    --slide-count: 6;
    --slides-per-page: 3;
    --slide-margin: 1.25em;
    --slide-padding: .625em;
    --slide-width: calc( (100% / (var(--slide-count) * var(--slides-per-page)) - calc(2 * var(--slide-margin))));
    position: relative;
}

.carousel-container h2 {
    text-decoration: none;
}

.carousel-container a {
    text-align: center;
    text-decoration: none;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin-bottom: 1rem;
}

.carousel {
    width: calc(100% * var(--slide-count));
    transition: 0.75s ease-in-out;
}

.carousel article {
    width: var(--slide-width);
    float: left;
    background-color: var(--color-background);
    box-shadow: 0 .5em 1.875em -0.5em var(--color-neutral);
    margin: 0 var(--slide-margin);
    padding: 0 var(--slide-padding);
    border-radius: 1.25em;
    border: 0;
    text-align: center;
    scroll-snap-align: start;
    opacity: 0.5;
}

.carousel cite {
    color: var(--color-accent-4);
    font-size: 1.4em;
    line-height: 1.3;
}

.carousel p {
    font-size: 1.1em;
    color: var(--color-text);
    padding-bottom: .9em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;

    /* max-height: 25em; */
    /* text-overflow: ellipsis; */
}

.carousel p::before {
    content: '" ';
}

.carousel p::after {
    content: ' "';
}

.carousel-container #slider-buttons {
    text-align: center;
}

.carousel-container [type="radio"] {
    position: absolute;
    left: -999em;
}

#r1:checked ~ #slider-buttons label:nth-of-type(1),
#r2:checked ~ #slider-buttons label:nth-of-type(2),
#r3:checked ~ #slider-buttons label:nth-of-type(3),
#r4:checked ~ #slider-buttons label:nth-of-type(4),
#r5:checked ~ #slider-buttons label:nth-of-type(5),
#r6:checked ~ #slider-buttons label:nth-of-type(6) {
    background-color: var(--color-link);
}

#r1:checked ~ .carousel > article:nth-of-type(1),
#r2:checked ~ .carousel > article:nth-of-type(2),
#r3:checked ~ .carousel > article:nth-of-type(3),
#r4:checked ~ .carousel > article:nth-of-type(4),
#r5:checked ~ .carousel > article:nth-of-type(5),
#r6:checked ~ .carousel > article:nth-of-type(6) {
    opacity: 1;
}

#r1:checked ~ .carousel {
    margin-left: 0;
}

#r2:checked ~ .carousel {
    margin-left: calc(0 - var(--slide-margin));
}

#r3:checked ~ .carousel {
    margin-left: -33.5%;
}

#r4:checked ~ .carousel {
    margin-left: -67%;
}

#r5:checked ~ .carousel {
    margin-left: -100.5%;
}

#r6:checked ~ .carousel {
    margin-left: -134%;
}

#slider-buttons label {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    border: 2px solid  var(--color-link);
    border-radius: 50%;
    margin-top: 1em;
}

#slider-buttons label span {
    opacity: 0;
}

/* Navigation control styles */
.carousel-actions {
    display: flex;
    width: 100%;
    justify-content: space-between;

    /* put space between the navigation buttons */
    /* position: absolute; /* position navigation buttons on top */
    /* top: 50%; /* center navigation buttons on the slide */
    transform: translateY(-600%);

    /* align navigation buttons */
}

.carousel-actions button {
    border-radius: 50%;
    background-color: white;
    border: 0;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    width: 2.5em;
    height: 2.5em;
    flex-grow: 0;
    box-shadow: var(--shadow-low-elevation);
    transition: scale 0.5s;
}

.carousel-actions button:hover {
    box-shadow: var(--shadow-high-elevation);
    scale: 1.2;
}

#carousel-button-prev {
    margin-left: 1.25em;

    /* prevent previous button from touching the side */
}

#carousel-button-next {
    margin-right: 1.25em;

    /* prevent next button from touching the side */
}

#jurisdictions {
    margin: 0;
}

/* States map */
.map-container {
    background-color: var(--light-brown);
    color: var(--color-text);
    line-height: 1em;
    font-weight: 600;
    width: 100%;
    padding: 0.5rem;
}

.map-container h3,
.map-container p {
    padding-bottom: 0.5em;
    text-align: center;
}

.map-container > ul {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(11,1fr);
    grid-template-rows: repeat(9,1fr);
}

.map-container ul li {
    display: inline;
}

.map-container a {
    text-decoration: none;
    width: 90%;
    padding: 0.75rem 0.25rem;
    color: var(--color-link);
    background-color: var(--color-background);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.625em;
}

/* .map-container a:hover {
    color: var(--color-background);
    background: var(--color-link);
} */
.map-container a:before {
    content: attr(data-state);
    position: absolute;
    padding: 1rem;
    color: var(--color-background);
    background: var(--color-link);
    text-align: center;
    display: none;

    /* hide by default */
}

.map-container a:hover:before {
    display: block;
}

#AK,
#CA,
#OR,
#WA {
    grid-column-start: 1;
}

#AZ,
#ID,
#NV,
#UT {
    grid-column-start: 2;
}

#CO,
#MT,
#NM,
#WY {
    grid-column-start: 3;
}

#KS,
#ND,
#NE,
#OK,
#SD,
#TX {
    grid-column-start: 4;
}

#AR,
#IA,
#LA,
#MN,
#MO {
    grid-column-start: 5;
}

#IL,
#IN,
#KY,
#MS,
#TN,
#WI {
    grid-column-start: 6;
}

#AL,
#MI,
#NC,
#OH,
#WV {
    grid-column-start: 7;
}

#GA,
#PA,
#SC,
#VA {
    grid-column-start: 8;
}

#DC,
#FL,
#MD,
#NJ,
#NY {
    grid-column-start: 9;
}

#CT,
#DE,
#MA,
#VT {
    grid-column-start: 10;
}

#ME,
#NH,
#RI {
    grid-column-start: 11;
}

#AK,
#ME {
    grid-row-start: 1;
}

#NH,
#VT,
#WI {
    grid-row-start: 2;
}

#ID,
#IL,
#MA,
#MI,
#MN,
#MT,
#ND,
#NY,
#WA {
    grid-row-start: 3;
}

#CT,
#IA,
#IN,
#NJ,
#NV,
#OH,
#OR,
#PA,
#RI,
#SD,
#WY {
    grid-row-start: 4;
}

#CA,
#CO,
#DE,
#KY,
#MD,
#MO,
#NE,
#UT,
#VA,
#WV {
    grid-row-start: 5;
}

#AR,
#AZ,
#DC,
#KS,
#NC,
#NM,
#SC,
#TN {
    grid-row-start: 6;
}

#AL,
#GA,
#LA,
#MS,
#OK {
    grid-row-start: 7;
}

#FL,
#TX {
    grid-row-start: 8;
}

#PR {
    grid-row-start: 10;
    grid-column-start: 11;
}

#HI {
    grid-row-start: 8;
    grid-column-start: 2;
}

/* Back to top */
#backToTop {
    flex-grow: 0;
    position: sticky;
    bottom: 5rem;
    display: block;
    width: 2.125rem;
    z-index: 999;
    margin: 0 1rem 0 auto;
    opacity: 0.5;
    transition: opacity 0.3s;
}

#backToTop:hover,
#backToTop:focus {
    opacity: 1;
}

#backToTop span {
    position: absolute;
    right: 50%;
    top: 1.75rem;
    padding: 0.25rem 2rem 0.25rem 1rem;
    white-space: nowrap;
    background: var(--color-background);
    color: var(--color-link);
    border-radius: 1rem 0 0 1rem;
    scale: 0 1;
    transform-origin: center right;
    transition: scale 0.5s;

    /* border: var(--traceBorderWidth) solid var(--borderColor); */
}

:is(#backToTop:hover, #backToTop:focus) span {
    scale: 1;
}

#backToTop:after {
    font-family: 'icons';
    content: "\E05B";
    position: absolute;
    top: 1.75rem;
    bottom: 0;
    display: block;
    width: 2.125rem;
    height: 2.125rem;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.5;
    border-radius: 1.0625rem;
    background: var(--color-link);
    color: var(--color-background);
    transition: scale 0.3s;
}

#backToTop:hover:after,
#backToTop:focus:after {
    scale: 1.2;
}

#backToTop.hideScroll {
    opacity: 0;
}

/* Profile */
.profile {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 1em;
}

.profile > div {
    display: flex;
    flex-direction: column;
    max-width: calc(50% - 1em);
}

.profile div * {
    flex-grow: 0;
}

/* .profile div:first-child a {
    text-align: center;
    text-decoration: none;
} */
.profile h3 {
    color: var(--color-accent-4);
    font-size: var(--h2-font-size);
    padding-top: 0;
}

.profile h4 {
    font-size: var(--h3-font-size);
}

#staff section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 2rem 0.6rem;
}

#staff a {
    text-decoration: none;
}

#staff a:hover img {
    border-radius: 50%;
}

#staff :is(h3, h4) {
    text-align: center;
    color: var(--color-grey);
}

#staff h3 {
    font-size: 1.5em;
    line-height: 2em;
}

#staff h4 {
    font-size: .9em;
    text-transform: uppercase;
}

#staff img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    transition: all 0.2s ease;
    box-shadow: 0 0 .625rem 0 rgba(0, 0, 0, 0.3);
    border: 1px solid #fff;
    filter: grayscale(0%);
}

/* dark light switch */
#toggle_holder {
    position: relative;
    flex: 1;
}

#toggle_lightDark {
    /* position: absolute;
    right: 1em;
    top: 1em; */
    position: relative;
    overflow: hidden;
    display: block;
    width: 3rem;
    height: 3rem;
    background: var(--lightDarkColor);
    border-radius: 50%;
    box-shadow: 0 0 0.3125rem var(--color-link);
    border: 0.5rem solid var(--color-background);
}

#toggle_lightDark:before {
    content: "";
    position: absolute;
    top: -30%;
    left: 100%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-background);
    transition: top 0.3s, left 0.3s;
}

.darkMode #toggle_lightDark:before {
    top: -15%;
    left: 35%;
}

/* identified */
/* jurisdiction home page */
#rra,
#lead,
#rra ~ div {
    max-width: 100%;
    background: var(--color-background);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#lead {
    text-align: center;
}

#lead p,
#features footer {
    margin-top: var(--pad);
}

#rra h3,
#features header {
    font-size: var(--h2-font-size);
    text-align: center;

    /* padding-top: 0; */
    padding-bottom: var(--pad);
}

#lead header {
    margin-top: var(--padding);
    text-align: left;
}

#rra > ul {
    list-style: none;
}

#rra > :is(p, ul) {
    margin: var(--padding);
}

#rra > p::first-letter {
    text-transform: capitalize;
}

.starred {
    display: inline-block;
    position: relative;
}

.starred h2 {
    font-size: 1em;
}

.starred:before {
    content: '';
    display: block;
    position: absolute;
    width: 32px;
    height: 34px;
    top: 50%;
    left: -36px;
    transform: translateY(-50%);

    /* To vertically center the image */
    background-image: var(--star);
    background-size: 32px 34px;
    background-repeat: no-repeat;
    animation-name: rotateme;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* .columns > section,
#how-does section > *,
#features.columns img {
    --span: 2;
    --shift: 0;
    width: calc(
        (var(--columnWidth) * var(--span)) +
        (var(--gutterWidth) * (var(--span) - 1))
    );
    margin-left: calc((var(--columnWidth) + var(--gutterWidth)) * var(--shift));
    margin-bottom: var(--gutterWidth);
    max-width: calc( (100% / var(--columns)) - var(--pad));
    /* margin-right: var(--gutterWidth); 
} */
.card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: .3125rem;
    border: 1px solid var(--light-grey);
}

.card > * {
    flex-grow: 0;
    position: relative;

    /* Needed for z-index to work */
    z-index: 1;

    /* Higher than the ::after pseudo-element */
}

:is(.card, .columns section) {
    text-align: left;
}

.columns section ul {
    padding-left: 1rem;
}

.card header {
    font-size: 1.5em;
    line-height: 1.2;
    margin-bottom: .75em;
    font-weight: bold;
    padding-top: .5em;
    text-align: center;
}

.grid-container > .card header {
    padding-top: 0;
}

.actions a[class*=icon]::before {
    padding-right: 1rem;
}

.card[class*=icon]::before,
.card > div[class*=icon]:before {
    display: block;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 3em;
    text-align: center;
}

.wp-block-rra-featured > div::after {
    background-image: var(--featured_image);
    background-size: contain;
    z-index: -1;
    min-height: 250px;
}

.card ul {
    padding-left: 2rem;
}

.card footer {
    font-weight: 700;
    text-align: center;
    padding: 1rem;
}

.card footer a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.card a {
    text-decoration: none;
    transition: .5s;
}

.card p {
    font-weight: 600;
    line-height: 1.8;
    padding: 0 1rem;
}

:is(.card, .grid-container) img {
    margin: 0 auto;
    width: 100%;
    height: 250px;

    /* object-fit: contain; */
    border-top-right-radius: .3125rem;
    border-top-left-radius: .3125rem;
}

/* #how-does p {
    text-align: left;
} */
#why-us section:hover {
    border-color: var(--primary-action);
}

#why-us section:hover img {
    animation: bounce 2s;
}

#our-services {
    background-color: var(--color-link-light);
    padding-bottom: 1rem;
}

#our-services p {
    font-size: .8em;
    margin: 0;
}

#our-service h3 {
    text-align: center;
}

#our-services section {
    background: url('../img/service-shape1.png') var(--color-background);
    transition: .5s;
}

.wp-block-rra-featuredposts {
    background-color: var(--color-background);
}

:is(#pricing, .wp-block-rra-pricing-table) section:hover {
    transform: translateY(-10px);
}

#our-services section:hover {
    transform: translateY(-10px);
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

#process :is(div, img),
#features section {
    text-align: left;
}

#features > * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

#how-does section {
    padding-top: .5em;
    padding-bottom: .5em;
}

#process div,
#how-does .columns p,
:is(#why-need, #how-will, #can-i, #how-search) section {
    flex-grow: 2;
    flex-basis: 25rem;
    padding-left: 1rem;
}

/* .columns img {
    flex-grow: 1;
    flex-basis: 15rem;
} */
/* #features.columns img {
    --span: 4;
}

.span-4,
#features section,
#why-need section {
    --span: 8;
}

.four section {
    --span: 3;
} */
.grid-container section header {
    font-size: 1.5rem;
    font-weight: 600;
}

/* #how-does section p,
#can-i section,
#how-will section,
#how-search section {
    --span: 10;
} */
/* #why-need section {
    text-align: left;
} */
/* #who-needs > section,
#get-started > section {
    --span: 4;
} */
#process ol {
    counter-reset: item;
    padding-top: 3em;
}

#process li {
    display: block;
    margin-bottom: 2rem;
    margin-left: 1rem;
}

#process li h4 {
    display: inline-block;
    padding-left: 1rem;
    margin-top: -.7rem;
    padding-top: 0;
    vertical-align: top;
}

#process li p {
    padding-left: 5rem;
    margin-top: -1.7rem;
}

#process li::before {
    display: inline-block;
    content: counter(item);
    counter-increment: item;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    color: var(--color-link-lighter);
    border-radius: 50%;
    background-color: var(--color-background);
    box-shadow: 0 0 0 7px #edf1fe;
    font-size: 2rem;
    font-weight: 800;
    font-style: italic;
    transition: .5s;
}

#process li:hover::before {
    border-radius: 0;
}

#pricing .grid-container,
.wp-block-rra-pricing-table,
#lead > .grid-container {
    --grid-column-count: 2;
}

#lead > .grid-container {
    text-align: left;
}

#lead > .grid-container footer,
#lead > p {
    margin-bottom: 2rem;
}

#pricing > .grid-container,
.wp-block-rra-pricing-table {
    /* background-color: #f4f7fe; */
    box-shadow: var(--shadow-high-elevation);
    border-radius: 1.25em;
    padding-bottom: 1rem;
}

#pricing > p {
    margin: var(--padding);
}

:is(#pricing .grid-container, .wp-block-rra-pricing-table) section {
    background-color: var(--color-background);
    transition: .5s;
}

:is(#pricing .grid-container, #lead, .wp-block-rra-pricing-table) ul {
    list-style: none;
    padding-left: 1em;
    text-align: left;
}

:is(#pricing .grid-container, .wp-block-rra-pricing-table) li {
    font-size: 1rem;
}

:is(#pricing .grid-container, .wp-block-rra-pricing-table) li:first-of-type {
    border-top: 2px dashed var(--dark-grey);
    border-bottom: 2px dashed var(--dark-grey);
    text-align: center;
    margin-bottom: 1em;
}

:is(#pricing .grid-container, .wp-block-rra-pricing-table) li:first-of-type span {
    font-size: 2.5em;
    font-weight: 900;
}

:is(#pricing .grid-container, .wp-block-rra-pricing-table) li::before {
    font-family: "icons";
    content: "\E021";
    color: var(--success);
    padding-right: 0.5em;
}

:is(#pricing .grid-container, .wp-block-rra-pricing-table) li:first-of-type::before {
    content: none;
}

:is(#pricing .grid-container, .wp-block-rra-pricing-table) section:first-of-type li:nth-last-of-type(-n+3)::before {
    color: var(--youtube-red);
    content: "\E035";
}

:is(#pricing .grid-container, .wp-block-rra-pricing-table) header {
    text-align: center;
}

:is(#pricing .grid-container, .wp-block-rra-pricing-table) footer {
    padding: var(--padding);
    text-align: center;
}

/* icons */
[class*=icon]:before {
    font-family: "icons";
}

.actions[class*=icon]:before {
    position: relative;
    left: -1.4rem;
}

.icon_phone:before {
    content: "\E000";
}

/* .actions .icon_phone:before {
    font-size: 2em;
    position: relative;
    top: 0.3em;
} */
.icon_fax:before {
    content: "\E001";
}

.icon_faq:before {
    content: "\E002";
}

.icon_document:before {
    content: "\E003";
}

.icon_handshake:before {
    content: "\E004";
}

.icon_person:before {
    content: "\E005";
}

.icon_award:before {
    content: "\E009";
}

.icon_directions:before {
    content: "\E00A";
}

.icon_email:before {
    content: "\E00B";
}

.icon_hours:before {
    content: "\E00C";

    /* position: relative;
    top: 0.2em; */
}

/* .icon_hours {
    font-size: 2rem;
} */
.icon_facebook:before {
    content: "\E00D";
    font-size: 2rem;

    /* position: relative;
    top: 0.3em; */
}

.icon_twitter:before {
    content: "\E00E";
    font-size: 2rem;

    /* position: relative;
    top: 0.3em; */
}

.icon_linked-in:before {
    content: "\E00F";
    font-size: 2rem;

    /* position: relative;
    top: 0.3em; */
}

.icon_pinterest:before {
    content: "\E010";
    font-size: 2rem;

    /* position: relative;
    top: 0.3em; */
}

.icon_home:before {
    content: "\E011";

    /* font-size: 2rem;
    position: relative;
    top: 0.3em; */
}

.icon_filled_star:before {
    content: "\E012";
}

.icon_empty_star:before {
    content: "\E013";
}

.icon_visa:before {
    content: "\E014";
}

.icon_mastercard:before {
    content: "\E015";
}

.icon_american_express:before {
    content: "\E016";
}

.icon_eye_open:before,
.passwordShowHide + button:after {
    content: "\E017";
}

.icon_eye_closed:before,
.passwordShowHide[type="text"] + button:after {
    content: "\E018";
}

.icon_trash:before,
[data-type="delete"]:before {
    content: "\E019";
}

.icon_unlink:before {
    content: "\E01A";
}

.icon_edit:before {
    content: "\E01B";
}

.icon_recycle:before {
    content: "\E01C";
}

.icon_warning:before {
    content: "\E01D";
}

.icon_crossbones:before {
    content: "\E01E";
}

.icon_credit_card:before {
    content: "\E01F";
}

.icon_lock:before {
    content: "\E020";
}

.icon_checkmark:before {
    content: "\E021";
}

.icon_printer:before {
    content: "\E022";
}

.icon_tumblr:before {
    content: "\E023";
}

.icon_reddit:before {
    content: "\E024";
}

.icon_list:before {
    content: "\E025";
}

.icon_page:before {
    content: "\E026";
}

.icon_inbox:before {
    content: "\E027";
}

.icon_add:before {
    content: "\E028";
}

.icon_user:before {
    content: "\E029";
}

.icon_user_add:before {
    content: "\E02A";
}

.icon_users:before {
    content: "\E02B";
}

.icon_unlock:before {
    content: "\E02C";
}

.icon_exit:before {
    content: "\E02D";
}

.icon_user_leaving:before {
    content: "\E02E";
}

.icon_subtract:before {
    content: "\E02F";
}

.icon_agent:before {
    content: "\E030";
}

.icon_rocket:before {
    content: "\E031";
}

.icon_wallet:before {
    content: "\E032";
}

.icon_usps:before {
    content: "\E033";
}

.icon_building:before {
    content: "\E034";
}

.icon_x:before {
    content: "\E035";
}

.icon_buildings:before {
    content: "\E036";
}

.icon_documents:before {
    content: "\E037";
}

.icon_dashboard:before {
    content: "\E038";
}

.icon_support:before {
    content: "\E039";
}

.icon_graph:before {
    content: "\E03A";
}

.icon_chart:before {
    content: "\E03B";
}

.icon_receipt:before {
    content: "\E03C";
}

.icon_money-check:before {
    content: "\E03D";
}

.icon_cloud-download:before {
    content: "\E03E";
}

.icon_cloud-upload:before {
    content: "\E03F";
}

.icon_video:before {
    content: "\E040";
}

.icon_banner:before {
    content: "\E041";
}

.icon_upsell:before {
    content: "\E042";
}

.icon_testing:before {
    content: "\E043";
}

.icon_gears:before {
    content: "\E044";
}

.icon_map-pin:before {
    content: "\E045";
}

.icon_book-open:before {
    content: "\E046";
}

.icon_calendar-days:before {
    content: "\E047";
}

.icon_paperclip:before {
    content: "\E048";
}

.icon_route:before {
    content: "\E049";
}

.icon_paper-plane:before {
    content: "\E04A";
}

.icon_clock-rotate-left:before {
    content: "\E04B";
}

.icon_monitor:before {
    content: "\E04C";
}

.icon_dollar-sign:before {
    content: "\E04D";
}

.icon_gear:before {
    content: "\E04E";
}

.icon_bomb:before {
    content: "\E04F";
}

.icon_share:before {
    content: "\E050";
}

.icon_bullhorn:before {
    content: "\E051";
}

.icon_flag-usa:before {
    content: "\E052";
}

.icon_hdd:before {
    content: "\E053";
}

.icon_server:before {
    content: "\E054";
}

.icon_columns:before {
    content: "\E055";
}

.icon_transfer:before {
    content: "\E056";
}

.icon_money-check:before {
    content: "\E057";
}

.icon_money-wave:before {
    content: "\E058";
}

.icon_bug:before {
    content: "\E059";
}

.icon_circle-exclamation:before {
    content: "\E05A";
}

.icon_arrow-up:before {
    content: "\E05B";
}

.icon_angle-up:before {
    content: "\E05C";
}

.icon_angle-down:before {
    content: "\E05D";
}

/* .rating_5:after {
    content: "\E012\E012\E012\E012\E012";
} */
.rating {
    margin: 0 auto;
    /*
    display: block;
    position: relative;
    width: 144px;
    height: 24px;
    background-size: 30px 24px;
    background-repeat: repeat-x;
    background-position: -3px 0;
    border-radius: 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path fill='%23DDD' stroke-linejoin='round' stroke='%23DDD' d='M 525.333 570.775 L 528.39 578.125 L 536.325 578.761 L 530.28 583.94 L 532.127 591.684 L 525.333 587.534 L 518.539 591.684 L 520.386 583.94 L 514.341 578.761 L 522.276 578.125 Z' transform='matrix(-0.809017, 0.587785, -0.587785, -0.809017, 779.285368, 175.34678)'></path></svg>");
     */

    /* The bar in Firefox */
    /* The gray background in Webkit browsers */
    /* The bar in Webkit browsers */
}

.rating:-moz-meter-optimum::-moz-meter-bar {
    background-size: 30px 24px;
    background-repeat: repeat-x;
    background-position: -3px 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path fill='orange' stroke-linejoin='round' stroke='orange' d='M 525.333 570.775 L 528.39 578.125 L 536.325 578.761 L 530.28 583.94 L 532.127 591.684 L 525.333 587.534 L 518.539 591.684 L 520.386 583.94 L 514.341 578.761 L 522.276 578.125 Z' transform='matrix(-0.809017, 0.587785, -0.587785, -0.809017, 779.285368, 175.34678)'></path></svg>");
}

.rating::-webkit-meter-bar {
    background: transparent;
    border-radius: 0;
    border: 0;
    height: 24px;
}

.rating::-webkit-meter-optimum-value {
    background-color: transparent;
    height: 100%;
    background-size: 30px 24px;
    background-repeat: repeat-x;
    background-position: -3px 0;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path fill='orange' stroke-linejoin='round' stroke='orange' d='M 525.333 570.775 L 528.39 578.125 L 536.325 578.761 L 530.28 583.94 L 532.127 591.684 L 525.333 587.534 L 518.539 591.684 L 520.386 583.94 L 514.341 578.761 L 522.276 578.125 Z' transform='matrix(-0.809017, 0.587785, -0.587785, -0.809017, 779.285368, 175.34678)'></path></svg>");
}

/* size variants */
/* header */
@media (max-width: 89rem) {
    #top li:nth-child(3):after {
        content: "\A";
        white-space: pre;
    }
}

@media (max-width: 73rem) {
    #top li {
        display: block;
    }

    nav ul li:last-child {
        padding: 0;
    }
}

@media (max-width: 65rem) {
    #fauxBody > header {
        flex-direction: column-reverse;
    }

    #top li {
        display: inline;
    }

    #top li:nth-child(3):after {
        content: "";
    }

    .actions {
        margin-top: .5rem;
    }

    .actions a {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
}

/* other */
@media (max-width: 80rem) {
    #top li {
        margin-left: 0.5em;
    }

    .video-popup {
        min-height: 520px;
    }
}

@media (min-width: 80em) {
    .video-popup {
        min-height: 540px;
    }
}

@media (max-width: 64rem) {
    .full figure img {
        width: 100%;
        height: 100%;
    }

    .video-popup {
        min-height: 335px;
    }
}

@media (max-width: 49rem) {
    .wp-block-column {
        min-width: 100%;
    }

    figure {
        margin: revert;
    }

    .carousel-container {
        --slides-per-page: 1;
    }

    #r2:checked ~ .carousel {
        margin-left: -100%;
    }

    #r3:checked ~ .carousel {
        margin-left: -200%;
    }

    #r4:checked ~ .carousel {
        margin-left: -300%;
    }

    #r5:checked ~ .carousel {
        margin-left: -400%;
    }

    #r6:checked ~ .carousel {
        margin-left: -500%;
    }

    .video-popup {
        min-height: 250px;
    }

    .grid-container,
    .wp-block-rra-pricing-table,
    #pricing .grid-container {
        --grid-column-count: 1;
    }

    .card p {
        padding: 1rem;
    }
}

@media (min-width: 39rem) {
    #mainMenu .modalClose_inner {
        display: none;
    }
}

@media (max-width: 39rem) {
    #address section,
    #copyright p {
        max-width: 100%;
    }

    #mainMenuOpen {
        flex: 0 0 auto;
        display: block;
        padding: 0.25em;
        text-decoration: none;
        border-radius: 0.5em;
        transition: transform 0.3s;
    }

    #mainMenuOpen span {
        display: none;
    }

    #mainMenuOpen:focus,
    #mainMenuOpen:hover {
        transform: scale(1.2);
    }

    #mainMenuOpen:before,
    #mainMenuOpen:after {
        content: "";
        display: block;
        width: 1.75em;
        height: 0.325em;
        border: solid var(--color-text);
        border-width: 0.325em 0;
        box-sizing: content-box;
    }

    #mainMenuOpen:after {
        border-top: none;
    }

    #mainMenu [class^="modal"] {
        display: inline;

        /* undo hidden */
        text-decoration: none;
    }

    #mainMenu,
    #mainMenu > .modalClose_outer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    #mainMenu {
        left: -100vw;
        opacity: 0;
        padding: 1em;
        transition: opacity 0.3s, left 0s 0.3s;
        background: var(--color-modal-fader);
    }

    #mainMenu:target {
        left: 0;
        opacity: 1;
        transition: opacity 0.3s, left 0s;
    }

    #mainMenu div {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
    }

    #mainMenu nav {
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 24em;
        background: var(--color-background);
        border: var(--border-hairline);
        border-radius: 0.5em;
        box-shadow: var(--shadow-chrome);
        transition: transform 0.3s;
        z-index: 999;
    }

    #mainMenu nav:before {
        content: "Main Menu";
        display: block;
        padding: 0.4em 2.8em 0.4em 0.8em;
        font-size: 1.25em;
        font-weight: bold;
        border-bottom: 1px solid var(--color-neutral);
    }

    #mainMenu > div > nav {
        flex: 0 0 auto;
        width: auto;
    }

    #mainMenu ul {
        display: block;

        /* disable flex */
        list-style: none;
        padding: 0.25em;
    }

    #mainMenu li {
        display: inline;
        margin: 0;
    }

    #mainMenu ul a {
        display: block;
        padding: 0.25em 1em;
        margin-bottom: 0.25em;
        text-decoration: none;
        transition: background 0.3s;
    }

    #mainMenu li:last-child a {
        text-align: center;
    }

    #mainMenu ul a:focus,
    #mainMenu ul a:hover {
        background: #0483;
    }

    #top li:nth-child(3):after {
        content: none;
    }

    .icon_search:hover {
        transform: scale(1);
    }

    #mainMenu .modalClose_inner {
        position: absolute;
        top: 1em;
        right: 0.325em;
    }

    #mainMenu .modalClose_inner:hover {
        background-color: inherit;
    }

    .carousel-container {
        --slides-per-page: 1;
    }

    #not-found img {
        display: none;
    }

    #toggle_lightDark {
        width: 2rem;
        height: 2rem;
        top: .5em;
    }

    .video-popup {
        min-height: 200px;
    }

    .actions {
        margin-top: 1rem;
        margin-bottom: 1rem;
        flex-direction: column;
    }

    .hero div {
        max-width: 100%;
    }
}

.footer-bottom-area {
    display: flex;
    justify-content: space-between;
    border-top: var(--border-hairline);
    margin: 1em auto;
    padding-top: 1em;
    flex-wrap: wrap;
}

.footer-bottom-area li {
    display: inline;
}

.footer-bottom-area li:first-of-type:after {
    content: '|';
}

/* animations */
@media screen and (prefers-reduced-motion: reduce) {
    .vibrate-2,
    .focus-in-expand,
    .focus-in-expand-fwd {
        animation: none !important;
    }
}

/* animation */
/* ----------------------------------------------
 * w: http://animista.net
 * ---------------------------------------------- */
/* *
 * ----------------------------------------
 * animation focus-in-expand
 * ---------------------------------------- */
.vibrate-2 {
    animation: vibrate-2 0.3s linear infinite both;
}

.focus-in-expand {
    animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.focus-in-expand-fwd {
    animation: focus-in-expand-fwd 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes focus-in-expand-fwd {
    0% {
        letter-spacing: -0.5em;
        transform: translateZ(-800px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        transform: translateZ(0);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes vibrate-2 {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(2px, -2px);
    }

    40% {
        transform: translate(2px, 2px);
    }

    60% {
        transform: translate(-2px, 2px);
    }

    80% {
        transform: translate(-2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes MOVE-BG {
    0% {
        background-position: 40%;
    }

    50% {
        background-position: 60%;
    }

    100% {
        background-position: 40%;
    }
}

@keyframes bounce {
    0%,
    20%,
    53%,
    80%,
    to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        transform: translateZ(0);
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        transform: translate3d(0,-30px,0);
    }

    70% {
        animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        transform: translate3d(0,-15px,0);
    }

    90% {
        transform: translate3d(0,-4px,0);
    }
}

.bounce {
    animation-name: bounce;
    transform-origin: center bottom;
}

@keyframes rotateme {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(1turn);
    }
}

.animated-button {
    position: relative;

    /* padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer; */
    overflow: hidden;
}

.animated-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 5px;

    /* Adjust the height to make the line thinner */
    background-color: rgba(255, 255, 255, 0.5);

    /* Use a solid color instead of a gradient */
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    animation: moveLines 1.5s linear 3;
}

@keyframes moveLines {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}