@font-face {
    font-family: 'Work Sans';
    src: url('./index.php?id=11') format('woff2'),
        url('./index.php?id=10') format('woff');
    font-display: swap;
    font-weight: 400; 
}

@font-face {
    font-family: 'Work Sans';
    src: url('index.php?id=13') format('woff2'),
        url('index.php?id=12') format('woff');
    font-display: swap;
    font-weight: 500;
}

@font-face {
    font-family: 'Work Sans';
    src: url('index.php?id=15') format('woff2'),
        url('index.php?id=14') format('woff');
    font-display: swap;
    font-weight: 600;
}

@font-face {
    font-family: 'Red Flowers';
    src: url('index.php?id=17') format('woff2'),
        url('index.php?id=16') format('woff');
    font-display: swap;
    font-weight: 400;
}

/* Define the "system" font family */
/*
@font-face {
    font-family: system;
    font-style: normal;
    font-weight: 300;
    src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
*/


:root {
    --System: -apple-system, BlinkMacSystemFont, "Avenir Next",
    "Helvetica Neue", Roboto, Noto, "Segoe UI", Ubuntu, sans-serif;
    --Red-Flowers: var(--System);
    --Work-Sans: var(--System);
    --yellow: #eab721;
    --yellow-bg: rgba(234, 183, 33, 0.102);
    --yellow-nav-bg: #fdf8eb;
    --red: #da1b51;
    --red-bg: rgba(218, 27, 81, 0.102);
    --red-opacity-half: rgba(218, 27, 81, 0.5);
    --black: #111;
    --black-bg: rgba(17, 17, 17, 0.25);
    --light-blue-on-dark: #a1c9f1; /* on dark backgrounds */
    --light-blue-on-light: #5483a4; /* on light backgrounds */
    --light-blue: var(--light-blue-on-light);
    --dark-blue: #050540;
    --dark-blue-bg: #050540;
    --dark-blue-opacity-half: rgba(5, 5, 64, 0.5);
    --light-gray: #ededf2;
    --heading-title: 3.75rem;
    --heading-1: 40px;
    --heading-2: 30px;
    --heading-5: 18px;
    --copyright: 10px;
    /*
    --heading-3:;
    --heading-4:;
    --heading-5: 18px;
    --heading-6:;
    --small: 14px;
    --tiny: 13px;
    */
}

@media (min-width: 768px) {
    :root {
        --heading-title: 94px;
    }
}

@media (min-width: 992px) {
    :root {
        --heading-title: 122px;
    }
}

/* 
   Once fonts are loaded or fallback,
   change the CSS Custom Properties to the proper 
   Font Family
*/
:root.no-font-face,
:root.fonts-loaded {
    --Red-Flowers: 'Red Flowers', var(--System);
    --Work-Sans: 'Work Sans', var(--System);
}

html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    text-rendering: geometricPrecision;
}

@media (prefers-reduced-motion) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0 !important;
        animation-delay: 0;
        transition-duration: 0 !important;
        transition-delay: 0;
    }
}

html {
    height: -webkit-fill-available;
}

html,
body {
    height: 100%;
    color: var(--black);
    max-width: 100vw;
}

body {
    font-family: var(--Work-Sans);
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 1.88;
    height: auto;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
    font-weight: 500;
}

body > nav {
    z-index: 10;
}

body > main {
    flex: 1;
}

h1 {
    font-size: var(--heading-1);
}

h2,
.h2 {
    font-size: var(--heading-2);
}

strong.strong-h5,
.strong-h5 strong,
h5,
.h5 {
    font-size: var(--heading-5);
}

strong.strong-h5,
.strong-h5 strong {
    color: var(--black);
    font-weight: 500;
}

hr.divider {
    margin-top:0;
    border-color: var(--yellow);
}

hr.vertical-divider {
    height: var(--vert-divider-height, 50px);
    border-top: unset;
    border-right: 1px solid var(--light-gray);
    width: auto;
}

a {
    transition: color 0.15s linear;
    text-underline-offset: 3px;
}

a:not([class]) {
    color: currentColor;
}

a:focus {
    outline: transparent;
    text-decoration: underline dashed;
}

a[href^="tel:"] {
    text-decoration: underline solid;
}

a[href^="tel:"]:hover {
    text-decoration: none;
}

a[href^="tel:"]:active {
    background-color: var(--black-bg);
}

a.bold-link {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--black);
    text-decoration: solid underline;
}

a.bold-link:hover {
    color: var(--black-bg);
}

a.bold-link:focus {
    text-decoration: underline dashed;
}

[data-fit-text] {
    /* Sized via the viewport, but the --width variable could be set by JS based on the element or parent's width. */
    --width: 100vw;
    
    /* Adjust scale depending on your exact font.  */
    --scale: 0.9;
    
    /* 
        --length is set using JS,
        --width is set using JS if [data-fit-text="width"]
        --scale must be manually set either here or on the
          element
    */
    --fit-font: var(--width) / (var(--length, 1) * 0.5) * var(--scale, 1);
    font-size: calc(var(--fit-font)) !important;
}

[hidden] {
    display: none !important;
}

[id] {
    /*
        Adds to x-heights to the top of an
        element when it is scrolled to
    */
    scroll-margin-top: 2ex;
}

@media (max-width: 992px) {
    input:not([type="submit"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* polyfill for Safari, no polyfill for Edge/IE */
@supports (scroll-snap-margin-top: 2ex) {
    [id] {
        scroll-margin-top: 0;
        scroll-snap-margin-top: 2ex;
    }
}
a[skiplink] {
    position: fixed !important;
    /* keep it on viewport */
    top: 0px !important;
    left: 0px !important;
    /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
     before allowing buttons to be activated. */
    width: 4px !important;
    height: 4px !important;
    /* visually hide it with overflow and opacity */
    opacity: 0 !important;
    overflow: hidden !important;
    /* remove any margin or padding */
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* ensure no other style sets display to none */
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
}

a[skiplink]:focus {
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    height: auto !important;
    width: auto !important;
    margin: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background-color: white;
    z-index: 1000; /* Given a ridiculous z-index so it is always above the content */
    padding: 0.5em !important;
    margin-left: 0.5em !important;
    border-bottom-right-radius: 0.25em;
    border-bottom-left-radius: 0.25em;
}

/** Utility classes */

.text-primary {
    color: var(--dark-blue) !important;
}

.text-tertiary {
    color: var(--yellow) !important;
}

.mt-flow-xs > * {
    margin: 0;
}

.mt-flow-xs > * + * {
    margin-top: 1.25em;
}

.mt-flow-md > * {
    margin: 0;
}
.mt-flow-md > * + * {
    margin-top: var(--md);
}

.overflow-hidden {
    overflow: hidden;
}

.z-index-2 {
    z-index: 2;
}

.z-index-1 {
    z-index: 1;
}

.z-index-0 {
    z-index: 0;
}

.z-index-n1 {
    z-index: -1;
}


.z-index-n2 {
    z-index: -2;
}


.fa-title,
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.yellow-container > main {
    background-color: var(--yellow-bg);
}

.yellow-container > main {
    background-color: var(--yellow-bg);
}

.yellow-container > main {
    background-color: var(--yellow-bg);
}

.yellow-container > main {
    background-color: var(--yellow-bg);
}

.yellow-container:not(body) {
    background-color: var(--yellow-bg) !important;
}

.dark-blue-container {
    --light-blue: var(--light-blue-on-dark);
    background-color: var(--dark-blue-bg) !important;
    color: white;
}

.yellow-text {
    color: var(--yellow) !important;
}

.red-text {
    color: var(--red) !important;
}

.img-rounded {
    border-radius: var(--copyright);
}

/*
    The extra margin on the bottom was messing with margin top on other
    sections. To fix this, this unsets the bottom padding, and moves
    that padding to the top of the next paragraph.
    This is a **rough** estimate, but the bottom margin of p is 1rem
*/
.section-content > * {
    margin: 0;
}

.section-content > * + * {
    margin-top: 1rem;
}
/** 
    Section Head Padding
    Reset to margin top to return it back to browser initial styles,
*/
.section-head-padding:-moz-any(h1,h2,h3,h4,h5,h6) {
    margin-top: 1em;
}

.section-head-padding:-webkit-any(h1,h2,h3,h4,h5,h6) {
    margin-top: 1em;
}

.section-head-padding:matches(h1,h2,h3,h4,h5,h6) {
    margin-top: 1em;
}

.section-head-padding:is(h1,h2,h3,h4,h5,h6) {
    margin-top: 1em;
}

.section-first-child-padding:-moz-any(h1,h2,h3,h4,h5,h6) + * {
    margin-top: 1.8em;
}

.section-first-child-padding:-webkit-any(h1,h2,h3,h4,h5,h6) + * {
    margin-top: 1.8em;
}

.section-first-child-padding:matches(h1,h2,h3,h4,h5,h6) + * {
    margin-top: 1.8em;
}

.section-first-child-padding:is(h1,h2,h3,h4,h5,h6) + * {
    margin-top: 1.8em;
}

.section-content-title + * {
    margin-top: 45px;
}



/** /Section Head Padding */


/** Line height crop: Fixes weird leading line-height issues
    Situational, so use as a utility class. This has been made to work with the
    Work Sans font-family. You can see it at work on elements like the .resource-card
    https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce
*/


.lh-crop-content > :-moz-any(h1,h2,h3,h4,h5,h6),
.lh-crop:-moz-any(h1,h2,h3,h4,h5,h6) {
    line-height: 1.2;
}

.lh-crop-content > :-webkit-any(h1,h2,h3,h4,h5,h6),
.lh-crop:-webkit-any(h1,h2,h3,h4,h5,h6) {
    line-height: 1.2;
}

.lh-crop-content > :matches(h1,h2,h3,h4,h5,h6),
.lh-crop:matches(h1,h2,h3,h4,h5,h6) {
    line-height: 1.2;
}

.lh-crop-content > :is(h1,h2,h3,h4,h5,h6),
.lh-crop:is(h1,h2,h3,h4,h5,h6) {
    line-height: 1.2;
}

.lh-crop-content > :-moz-any(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::before,
.lh-crop-content > :-moz-any(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::after,
.lh-crop:-moz-any(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::before,
.lh-crop:-moz-any(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::after {
    content: "";
    display: block;
    height: 0;
    width: 0;
}

.lh-crop-content > :-webkit-any(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::before,
.lh-crop-content > :-webkit-any(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::after,
.lh-crop:-webkit-any(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::before,
.lh-crop:-webkit-any(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::after {
    content: "";
    display: block;
    height: 0;
    width: 0;
}

.lh-crop-content > :matches(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::before,
.lh-crop-content > :matches(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::after,
.lh-crop:matches(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::before,
.lh-crop:matches(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::after {
    content: "";
    display: block;
    height: 0;
    width: 0;
}

.lh-crop-content > :is(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::before,
.lh-crop-content > :is(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::after,
.lh-crop:is(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::before,
.lh-crop:is(h1,h2,h3,h4,h5,h6,p,span,a,button,label,input[type="submit"])::after {
    content: "";
    display: block;
    height: 0;
    width: 0;
}

.lh-crop-content > h5,
h5.lh-crop {
    --top-adjustment: -4px;
    --bottom-adjustment: -3px;
}

.lh-crop-content > h2::before,
h2.lh-crop::before {
    margin-top: calc(-0.32em + var(--top-adjustment, 0px));
}

.lh-crop-content > h2::after,
h2.lh-crop::after {
    margin-top: calc(-0.32em + var(--bottom-adjustment, 0px));
}

.h2.broadway-title.lh-crop,
h2.broadway-title.lh-crop {
    --bottom-adjustment: -5px;
}

.lh-crop-content > :-moz-any(h1,h3,h4,h5,h6)::before,
.lh-crop:-moz-any(h1,h3,h4,h5,h6)::before {
    margin-top: calc(-0.2225em + var(--top-adjustment, 0px));
}

.lh-crop-content > :-webkit-any(h1,h3,h4,h5,h6)::before,
.lh-crop:-webkit-any(h1,h3,h4,h5,h6)::before {
    margin-top: calc(-0.2225em + var(--top-adjustment, 0px));
}
.lh-crop-content > :matches(h1,h3,h4,h5,h6)::before,
.lh-crop:matches(h1,h3,h4,h5,h6)::before {
    margin-top: calc(-0.2225em + var(--top-adjustment, 0px));
}

.lh-crop-content > :is(h1,h3,h4,h5,h6)::before,
.lh-crop:is(h1,h3,h4,h5,h6)::before {
    margin-top: calc(-0.2225em + var(--top-adjustment, 0px));
}

.lh-crop-content > :-moz-any(h1,h3,h4,h5,h6)::after,
.lh-crop:-moz-any(h1,h3,h4,h5,h6)::after {
    margin-top: calc(-0.2225em + var(--bottom-adjustment, 0px));
}

.lh-crop-content > :-webkit-any(h1,h3,h4,h5,h6)::after,
.lh-crop:-webkit-any(h1,h3,h4,h5,h6)::after {
    margin-top: calc(-0.2225em + var(--bottom-adjustment, 0px));
}
.lh-crop-content > :matches(h1,h3,h4,h5,h6)::after,
.lh-crop:matches(h1,h3,h4,h5,h6)::after {
    margin-top: calc(-0.2225em + var(--bottom-adjustment, 0px));
}

.lh-crop-content > :is(h1,h3,h4,h5,h6)::after,
.lh-crop:is(h1,h3,h4,h5,h6)::after {
    margin-top: calc(-0.2225em + var(--bottom-adjustment, 0px));
}

.lh-crop-content > p,
.lh-crop-content > span,
.lh-crop-content > a,
.lh-crop-content > button,
.lh-crop-content > label,
.lh-crop-content > input[type="submit"],
p.lh-crop,
span.lh-crop,
a.lh-crop,
button.lh-crop,
label.lh-crop,
input[type="submit"].lh-crop {
    line-height: 1.88;
}
.lh-crop-content > p::before ,
.lh-crop-content > span::before,
.lh-crop-content > a::before,
.lh-crop-content > label::before,
.lh-crop-content > button::before,
.lh-crop-content > input[type="submit"]::before,
label.lh-crop::before,
button.lh-crop::before,
p.lh-crop::before,
a.lh-crop::before,
span.lh-crop::before,
input[type="submit"].lh-crop::before {
    margin-bottom: calc(-0.5625em + var(--top-adjustment, 0px));
}

.lh-crop-content > p::after,
.lh-crop-content > a::after,
.lh-crop-content > span::after,
.lh-crop-content > button::after,
.lh-crop-content > label::after,
.lh-crop-content > input[type="submit"]::after,
button.lh-crop::after,
label.lh-crop::after,
p.lh-crop::after,
a.lh-crop::after,
span.lh-crop::after,
input[type="submit"].lh-crop::after {
    margin-top: calc(-0.5625em + var(--bottom-adjustment, 0px));
}



/** Broadway Style Title */
.broadway-title {
    font-family: var(--Red-Flowers);
    font-size: calc(var(--fit-font, var(--heading-title)));
    line-height: 1;
    letter-spacing: 0.04em;
}

.h2.broadway-title,
h2.broadway-title {
    font-size: 72px;
}

.h2.broadway-title.lh-half,
h2.broadway-title.lh-half {
    line-height: 0.7;
}

/**
  Since this font has no real web safe fallback,
  it makes more sense to load it in "dynamically".
  
  When all the fonts are loaded, the document
  gets the class .fonts-loaded.
  We'll use that to transition the title in.
  In the head is this rule:

  .font-transition {
      opacity: 0;
      transition: opacity 0.25s linear 0.25s;
  }
  
  which delays the opacity change by 0.25s.
*/

.fonts-loaded .font-transition {
    opacity: 1;
}

/** Login Form */
.login-form .login-item + .login-item {
    padding-top: 30px;
}

.login-intro {
    font-size: 13px;
    color: var(--light-blue);
    text-align:center;
}

/** Product Order Form */
.product-form label {
    font-size: 13px;
}

.product-form .form-group select {
    display: inline-block;
    width: auto;
}

/** Individual Product */
.product-info header > * {
    margin: 0;
}
.product-info header > small {
    display: inline-block;
    margin-top: 25px;
}
.product-info header + * {
    padding-top: 40px;
}
.product-info header ~ * {
    color: var(--light-blue);
}



/** Flourish that expands the left and right sides of title text */
.flourish {
    display: flex;
    text-align: center;
}
.flourish > span {
    max-width: 25ch;
}

.flourish:not(.flourish-left) > span {
    padding-right: 2vmax;
}


.flourish:not(.flourish-right) > span {
    padding-left: 2vmax;
}

.flourish::before,
.flourish::after {
    background-color: currentcolor;
}

.flourish-yellow::before,
.flourish-yellow::after {
    background-color: var(--yellow);
}

.flourish:not(.flourish-right)::before,
.flourish:not(.flourish-left)::after {
    content:'';
    display: block;
    flex:1;
    max-width: 100%;
    height: 2px;
    position: relative;
    top: 0.8ch;
}

@media (min-width: 992px) {
    .flourish > span {
        max-width: 40ch;
    }
}


.modal__container {
    width: 50%;
    max-height: 100vh;
    position: relative;
}

.modal__container > svg {
    position: absolute;
    top: 5px;
    right: 15px;
}

@media (max-width: 992px) {
    .modal__container {
        width: 75%;
    }
}

@media (max-width: 767px) {
    .modal__container {
        width: 100%;
    }
}

.card {
    border: unset;
    background-color: unset;
    position: relative;
}

.card p:not([class]) {
    margin: 0;
}

.card p > a {
    color: inherit;
}

.card a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.card-title {
    font-size: var(--heading-5);
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 0.5rem;
    margin-top: 0;
}

img {
    content-visibility: auto;
}

img[style*="--aspect-ratio"] {
    aspect-ratio: var(--aspect-ratio);
}

.card img[style*="--aspect-ratio"] {
    aspect-ratio: var(--aspect-ratio);
    width: 100%;
    height: auto;
}

/** Consultant Card */
.consultants-card-wrapper {
    padding-top: 2rem;
}

@media (min-width: 768px) {
    .consultants-card-wrapper + .consultant-card-description {
        padding-top: 2rem;
    }
}

.consultant-card {
    text-align: center;
}

.consultant-card a,
.consultant-card small {
    color: var(--light-blue);
}

/** Content Card */
.content-card {
    color: var(--light-blue);
}

.dark-blue-container .content-card .card-title {
    color: white;
}


/** Resource Card */
.resource-card {
    position: relative;
    will-change: transform;
}

.resource-card > * {
    margin: 0;
}

.resource-card > * + *,
.resource-card > * + p {
    margin-top: 1.65em;
}
/* .cd-demo__lh-crop-item:nth-of-type(1) h1::before */
/*
    Line Height Crop Utility: Removes leading line-height that
    can mess with margin-top
    
    (Ehhhhh, maybe its not really worth it https://medium.com/codyhouse/line-height-crop-a-simple-css-formula-to-remove-top-space-from-your-text-9c3de06d7c6f)
*/
/*
.resource-card p::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
    margin-top: calc(( 0.8 - 1.2 ) * 0.5em);
}
*/

.resource-card img {
    max-width: 100%;
    height: auto;
    flex: 1;
    object-fit: cover;
    transition: transform 0.15s ease-out;
}

.resource-card a {
    margin-top: 1.25em;
    line-height: 1.5;
    text-decoration: underline solid transparent;
    transition: all 0.15s ease-in;
    transition-property: color, text-decoration-color;
}

.resource-card a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.resource-card a:hover {
    text-decoration-color: currentcolor;
    transition-timing-function: ease-out;
}

.resource-card:focus-within a {
    outline: transparent;
    text-decoration: underline dashed;
}

.resource-card:focus-within a:hover {
    color: var(--dark-blue);
}

/** Offsets for lh-content-crop */
.resource-card .card-title {
    --top-adjustment: -4px;
    --bottom-adjustment: -3px;
}

.resource-card .card-introtext {
    color: var(--light-blue);
}

/** Post Card */
.post-card {
    font-size: 15px;
    color: var(--light-blue);
    margin-bottom: 50px;
}

.post-card > * {
    margin: 0;
}

.post-card > * + * {
    margin-top: 21px;
}

.post-card .card-title {
    color: var(--black);
}

.post-card .btn {
    max-width: fit-content;
    text-transform: uppercase;
    /** Since the line-height util is being reset, the padding bottom needs to be fixed */
    padding-bottom: 7px;
}

/** 
  Unsets the *card* aspect, where-in the entire card is clickable,
  since multiple parts of the card must be links
*/
.post-card .card-title a::after,
.post-card .btn::after {
    content: unset
}

.company-card {
    color: var(--light-blue);
    text-align: center;
    margin-bottom: 2.5rem;
}

.company-card .card-title {
    color: var(--black);
}

.company-card img {
    aspect-ratio: 1 / 1;
}

.company-card > * {
    margin: 0;
}

.company-card > * + * {
    margin-top: 28px;
}

.company-card .card-btn {
    text-transform: uppercase;
    width: max(138px, max-content);
    max-width: 100%;
}

.company-card .card-btn::after {
    position: static;
}

/** Services Card */

.service-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(10px, 1fr)) [end];
    grid-auto-rows: auto;
    grid-gap: 30px
}

.service-card + .service-card {
    padding-top: 50px;
}

.service-card a::after {
    position: static;
}

.service-card .card-content {
    grid-column: 1 / -1;
}

.service-card .card-btn-group {
    grid-column: 1;
    grid-row: 2;
}

.service-card .card-divider {
    grid-column: 2;
    grid-row: 1;
    place-self: center;
    align-self: flex-start;
    display:none;
}

.service-card .card-pricing {
    grid-row: 2;
    grid-column-end: end;
}

@media(min-width: 992px) {
    .service-card {
        grid-template-columns: 1fr 60px [end] 150px;
    }
    
    .service-card .card-content {
        grid-column: 1 / 2;
    }
    
    .service-card .card-divider {
        display: block;
    }
    
    .service-card .card-pricing {
        grid-row: 1;
        grid-column: end / span 1;
    }
}

.service-card .card-divider hr {
    margin-top: 0;
    margin-bottom: 0;
}

.service-card .card-text {
    color: var(--light-blue);
}

.service-card .card-pricing span {
    color: var(--light-blue);
    font-size: 14px;
}

.information-card {
    justify-content: center;
}


/** Topic Styles */
.topic-row {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--light-gray);
}

.topic-row:first-of-type {
    padding-top:0;
}

.topic-row .topic-name {
    font-size: 13px;
    color: inherit;
}

.topic-row .topic-name::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.topic-row .topic-thumbnail {
    margin-right: 10px;
}

.swiper-grid {
    grid-template-columns: minmax(1px, 1fr) minmax(190px, max-content) minmax(1px, 1fr);
    grid-auto-rows: 272px auto;
}

.swiper-large {
    max-width: 272px;
    place-self: center;
    grid-column: 1 / span 2;
}

.swiper-grid .swiper-control {
    grid-column: 3;
    display: grid;
    grid-auto-columns: 90px;
    grid-template-rows: repeat(3, auto);
    grid-row-gap: 10px;
    max-width: 100%;
    grid-row: 1 / span 2;
}

@media (min-width: 992px) {
    .swiper-grid {
        grid-column-gap: unset;
        grid-row-gap: var(--xs);
        grid-column-gap: var(--xs);
    }
    
    .swiper-grid .swiper-large {
        grid-column: 2;
    }
    
    .swiper-grid .swiper-control {
        grid-column: 1 / -1;
        place-content: center;
        grid-template-columns: repeat(4, 90px)
        grid-auto-columns: unset;
        grid-template-rows: unset;
        grid-auto-flow: column dense;
        grid-auto-rows: auto;
        grid-row: unset;
    }
    
    .swiper-grid .swiper-control .control-circle:not(.control-active):hover {
        filter: brightness(0.9);
        transition: filter 0.25s ease-out;
    }
}

.swiper-control .control-circle {
    border: 1px dashed transparent;
    transition: border-color 0.25s;
    border-radius: 86px;
    overflow: hidden;
    margin-right: 3px;
    margin-left: 3px;
    flex: 0 0 auto;
    padding: 2px;
}
.swiper-control .control-circle:first-child {
    margin-left: 0;
}
.swiper-control .control-circle:last-child {
    margin-right: 0;
}
.swiper-control .control-circle > img {
    border-radius: 80px;
}
.swiper-control .control-active {
    border: 1px dashed var(--light-blue);
}
.swiper-clipped {
    max-width: 100%;
    width: 100%;
    height: auto;
    padding: 5px;
    border: 1px dashed var(--light-blue);
    overflow: hidden;
    border-radius: 1000px;
    background-color: white;
    -webkit-backface-visibility: hidden;
    position: relative;
    z-index: 1;
}
.swiper-wrapper img {
    content-visibility: unset;
    width: 100%;
    height: auto;
    border-radius: 1000px;
    position: relative;
    z-index:-1;
}

/** Article */

.article-hero {
    background-color: var(--yellow-bg);
    padding-top: 100px;
    /**
    Magic number 
    */
    padding-bottom: 40vw;
    /* Clamp math function for moden browsers */
    padding-bottom: calc(180px + 10vmin);
}

@media (min-width: 768px) {
    .article-hero {
        padding-bottom: 260px;
    }
}

@media (min-width: 992px) {
    .article-hero {
        padding-bottom: 280px;
    }
}
@media (min-width: 1200px) {
    .article-hero {
        padding-bottom: 360px;
    }
}

.article-date,
.article-author,
.article-nav,
.article-content {
    color: var(--light-blue);
}

.article-date {
    font-size: 11px;
}

.article-nav {
    font-size: 13px;
    text-transform: uppercase;
}

.article-nav a:hover {
    color: var(--black);
}

.article-nav a:hover:focus {
    text-decoration-color:currentcolor;
}

.article-author {
    font-size: 14px;
}

.article-image {
    position: relative;
}

.article-image img {
    max-width: 100%;
    /** Fullscreen minus container margins */
    width: calc(100vw - 30px);
    height: auto;
    position: absolute;
    bottom: 0;
}

/** Announcement Banner */
announcement-banner {
    font-size: 13px;
    background-color: var(--dark-blue-bg);
    --light-blue: var(--light-blue-on-dark);
    color: var(--light-blue);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 10px;
    text-align: center;
}

@media (min-width: 768px) {
    announcement-banner {
        padding: 0;
    }
}

announcement-banner > * {
    margin: 0 0.5rem 0 0;
}

announcement-banner > :last-child {
    margin-right: 0;
}

announcement-banner > :first-child:last-child {
    margin-top: 2ch;
    margin-bottom: 2ch;
}

announcement-banner [data-banner-link] {
    color: white;
}

announcement-banner [data-banner-link]:hover {
    color: white;
}

announcement-banner [data-banner-link]:focus {
    text-decoration: underline dashed;
}

announcement-banner > [data-banner-close] {
    font-size: 1rem;
    --button-padding: calc(0.675em);
    padding: var(--button-padding);
    background: transparent;
    color: inherit;
    border: unset;
    transition: all 0.25s ease-out;
    transition-property: color, transform;
    display: none;
}

announcement-banner > [data-banner-close]:focus,
announcement-banner > [data-banner-close]:hover {
    color: white;
}

announcement-banner > [data-banner-close]:focus {
    outline: transparent;
    transform: scale(1.1);
}

@media (max-width: 812px) and (orientation: landscape) {
    announcement-banner {
        position: relative;
    }
}

@media (min-width: 768px) {
    announcement-banner > [data-banner-close] {
        display: block;
    }
    
    announcement-banner .banner-break {
        display: none;
    }
}


/** Form Inputs */
.form [type="submit"]:not([data-progress="100%"]) + label {
    opacity: 0.5;
    cursor: not-allowed;
}
.form-control {
    border: unset;
    border-radius: unset;
    border: 1px solid transparent;
    border-bottom-color: var(--black);
    background-color: transparent;
    font-size: 13px;
    font-weight: 500;
    height: auto;
    line-height: 1.2;
}

.form-control:focus {
    border-color: var(--black);
    background-color: white;
    box-shadow: 0 0 0 0.2rem rgba(5, 5, 64, 0.25);
}


.form-control.error:focus:invalid {
    box-shadow: 0 0 0 0.2rem rgba(218, 27, 81, 0.25);
    border-color: var(--red);
}

.form-control-quantity {
    max-width: calc(5ch + .75rem);
}

input[type="submit"].btn {
    line-height: 1;
}

form label {
    color: var(--light-blue);
    text-transform: uppercase;
    font-size: 11px;
}

.form-group .error-message {
    color: var(--red);
    font-weight: 600;
    display: none;
}
.form-group:not(:focus-within) .error-message {
    display: inline-block;
}

.form-group .label-error {
    position: relative;
}

.form-group .label-error .error-loc {
    position: absolute;
    width: max-content;
    margin-left: 8px;
}
textarea.form-control {
    padding: 20px;
}
textarea[data-autoresize] {
    max-height: var(--autoresize-max-height);
}

/** Buttons */

.btn {
    background-color: var(--dark-blue);
    color: white;
    border-color: currentColor;
    border-radius: 100px;
    padding: 15px 30px;
    font-size: 13px;
    font-weight: 500;
}

.btn:hover {
    color: var(--dark-blue);
    background-color: white;
}

.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(5, 5, 64, 0.25);
    text-decoration: none;
}

.btn-small {
    padding: 10px 15px;
}

.btn-outline {
    color: var(--dark-blue);
    background-color: white;
    border-color: currentColor;
}

.btn-outline:hover {
    color: white;
    background-color: var(--dark-blue);
    border-color: currentColor;
}

.btn-gray {
    background-color: var(--light-gray);
    color: var(--dark-blue);
    border-color: transparent;
}

.btn-gray:hover {
    background-color: var(--black);
    color: var(--white, #fff);
}

.btn-gray:focus {
    background-color: var(--light-gray);
    color: var(--black);
    box-shadow: 0 0 0 0.2rem var(--black-bg);
}

.nav-sticky + main > .hero {
    margin-top: calc(var(--nav-height) * -1);
}


/** <burger-menu> */
.wrapper {
  max-width: 65rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}


.site-head {
    background: transparent;
    background-image: linear-gradient(180deg, rgba(255,255,255,1),  rgba(255,255,255, 1) 30%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,0.55) 80%, rgba(255,255,255,0) 95%, rgba(255,255,255,0));
    position: sticky;
    top: var(--banner-height);
    right: 0;
    left: 0;
    z-index: 100;
    padding: 0.6rem 0;
    color: var(--dark-blue);
    line-height: 1.1;
    margin-bottom: calc(var(--nav-height) * -1);
}

@media (max-width: 812px) and (orientation: landscape)  {
    .site-head {
        top: 0;
    }
    
    .site-head__inner {
        align-items: center;
    }
    
    .site-head__inner img {
        max-height: 70px;
    }
    
}

.site-head-solid,
.site-head-yellow {
    background-image: unset;
}

.site-head-solid {
    background-color: white;
}

.site-head-yellow {
    background-color: var(--yellow-nav-bg);
    margin-bottom:0;
}

.site-head-no-offset {
    margin-bottom: 0;
}

.site-head-blue {
    background-color: var(--dark-blue);
    color: var(--light-blue-on-dark);
    margin-bottom: 0;
}

.burger-open .site-head {
    position: fixed;
    top: var(--banner-height, 0);
    right: 0;
    bottom: 0;
    left: 0;
}

@media (max-width: 812px) and (orientation: landscape) {
    .burger-open .site-head {
        top: 0;
    }
}

.site-head :focus {
    outline-color: var(--yellow);
}

.site-head__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0 1rem;
}

/** Magic number, totally arbitrary */
@media (min-width: 1034px) {
    .site-head__inner {
        align-items: flex-start;
    }
}

/* iPhone 12 width */
@media (max-width: 812px) and (orientation: landscape)  {
    .site-head__inner {
        align-items: center;
    }
}

.burger-open .site-head__inner img {
    position: relative;
    z-index: 11;
}

.site-head__brand {
    display: block;
    width: auto;
}

.burger-open .site-head__brand {
    position: relative;
    z-index: 11;
}

.navigation ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.8rem;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    margin-bottom: env(safe-area-inset-bottom);
}

/*
.navigation li {
    margin: 1rem;
}
*/

.navigation .cart-icon-wrapper a:focus {
    color: var(--yellow);
}

.navigation a {
    font-weight: 600;
    text-decoration: none;
    color: var(--dark-blue);
    font-size: 15px;
    display:inline-block;
    margin: 0.8rem;
}

.site-head-blue .navigation a {
    color: var(--light-blue-on-dark);
}

.navigation a:hover {
    text-decoration: underline solid;
}

.navigation a:not(.btn):focus {
    text-decoration: underline dashed;
}

.navigation .btn {
    font-size: 13px;
    color: white;
    line-height: 1;
    text-transform: uppercase;
    padding: 15px 33px;
}

.navigation .btn:hover {
    color: var(--red);
    text-decoration: none;
}

.site-head-blue .navigation .btn {
    color: var(--dark-blue);
    background-color: white;
}

.site-head-blue .navigation .btn:hover {
    background-color: var(--dark-blue);
    color: white;
}

.site-head-blue .navigation .btn:focus {
    background-color: var(--dark-blue);
    color: white;
    border-style: dashed;
}

.navigation a::before,
.navigation a::after {
    content: '';
    display: block;
}
.navigation a::before {
    margin-top: -4px;
}
.navigation a::after {
    margin-bottom: -3;
}
.navigation .btn::before {
    margin-top: -2px;
}

.navigation .btn::after {
    margin-bottom: -2px;
}
.burger-menu__trigger {
    display: none;
    margin-right: env(safe-area-inset-right);
}

.burger-menu__bar,
.burger-menu__bar::before,
.burger-menu__bar::after {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--yellow);
    border: 1px solid var(--yellow);
    position: absolute;
    border-radius: 3px;
    left: 50%;
    margin-left: -12px;
    transition: transform 350ms ease-in-out;
}

.burger-menu__bar {
    top: 50%;
    transform: translateY(-50%);
}

.burger-menu__bar::before,
.burger-menu__bar::after {
    content: '';
}

.burger-menu__bar::before {
    top: -8px;
}

.burger-menu__bar::after {
    bottom: -8px;
}
.burger-menu[enabled='true'] .burger-menu__trigger {
    display: block;
    width: 2rem;
    height: 2rem; /* Nice big tap target */
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 11;
}

.burger-menu[enabled='true'] .burger-menu__panel {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    padding: 5rem 1.5rem 2rem 1.5rem;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    background: white;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.site-head-blue .burger-menu[enabled='true'] .burger-menu__panel {
    background-color: var(--dark-blue);
}

@media (max-width: 812px) and (orientation: landscape) {
    .burger-menu[enabled='true'] .burger-menu__panel {
        padding-top: 0;
    }
}

.burger-menu[enabled='true'] .navigation {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
}
@media (min-width: 576px) {
    .burger-menu[enabled='true'] .navigation {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .burger-menu[enabled='true'] .navigation {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .burger-menu[enabled='true'] .navigation {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .burger-menu[enabled='true'] .navigation {
        max-width: 1140px;
    }
}
.burger-menu[enabled='true'] .navigation ul {
    display: block;
    list-style: none;
}

@media (max-width: 812px) and (orientation: landscape) {
    .burger-menu[enabled='true'] .navigation ul {
        margin-left: 195px; /* width of logo */
    }
}

/*
.burger-menu[enabled='true'] .navigation ul > * + * > a {
    margin-top: 2rem;
}
*/

.burger-menu[enabled='true'] .navigation li {
    font-size: 1.5rem;
}

.burger-menu[enabled='true'][status='open'] .burger-menu__panel {
    visibility: visible;
    opacity: 1;
    transition: opacity 400ms ease;
}

.burger-menu[enabled='true'][status='closed'] .burger-menu__panel > * {
    opacity: 0;
    transform: translateY(10rem);
}

.burger-menu[enabled='true'][status='open'] .burger-menu__panel > * {
    transform: translateY(7rem);
    opacity: 1;
    transition: transform 500ms cubic-bezier(0.17, 0.67, 0, 0.87) 700ms, opacity 500ms ease 800ms;
}

@media (max-width: 812px) and (orientation: landscape) {
    .burger-menu[enabled='true'][status='open'] .burger-menu__panel > * {
        transform: translateY(1rem);
    }
}

.burger-menu[enabled='true'][status='open'] .burger-menu__panel a {
    font-size: 1.5rem;
}

.burger-menu[enabled='true'][status='open'] .burger-menu__bar::before {
    top: 0;
    transform: rotate(45deg);
}

.burger-menu[enabled='true'][status='open'] .burger-menu__bar::after {
    top: 0;
    transform: rotate(-45deg);
}

.burger-menu[enabled='true'][status='open'] .burger-menu__bar {
    background: transparent;
    border-color: transparent;
    transform: rotate(180deg);
}

.services-container .services-list-item {
    padding-top: 50px;
}

/** Hero Element */
.hero,
.hero-slide {
    position: relative;
}

.hero .hero-image,
.hero-slide > .hero-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    max-height: inherit;
}

.hero .hero-image {
    height: 860px;
}

.hero video.hero-image {
    height: 75vh;
}

.hero .swiper-wrapper img {
    border-radius: 0;
}

.hero-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.hero[class*="overlay"]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hero-light-overlay::after {
    background-color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 576px) {
    .hero-no-overlay-sm::after {
        content: unset !important;
    }
}

@media (min-width: 768px) {
    .hero-no-overlay-md::after {
        content: unset !important;
    }
}

@media (min-width: 992px) {
    .hero-no-overlay-lg::after {
        content: unset !important;
    }
}
/** Floating Van Image */
/** Has the assumption it is inside of a .col-* class */
.floating-image {
    position: absolute;
}

.van-row {
    position: relative;
}
.van-column,
.floating-van-image {
    position: relative;
    max-width: 100%;
}
.floating-van-image {
    width: 100%;
    aspect-ratio: var(--aspect-ratio, 20 / 11);
}

@media (min-width: 1024px) {
    .van-column {
        position: absolute;
    }
    .floating-van-image {
        position: absolute;
        right: calc(-10vmax - 15vmin);
    }
}

@media (min-width: 1366px) {
    .floating-van-image {
        right: calc(-5vmax);
    }
}

/* @min-width */



/** Hero Floating Box */
.floating-box-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
    height: 100%;
}

.floating-box-grid[style*="--bottom-offset"] {
    padding-bottom: var(--bottom-offset);
}

.floating-box-grid > .floating-box {
    align-self: var(--align-self, flex-start);
    grid-column: var(--col-start, 1) / var(--col-end, 6); 
    grid-row: var(--row-start, 1) / var(--row-end, 2);
    position: relative;
}

@media (min-width: 576px) {
    .floating-box-grid > .floating-box {
        grid-column: var(--col-sm-start, var(--col-start, 1)) / var(--col-sm-end, var(--col-end, 6));
        grid-row: var(--row-sm-start, var(--row-start, 1)) / var(--row-sm-end, var(--row-end, 2));
    }
}

@media (min-width: 768px) {
    .floating-box-grid > .floating-box {
        grid-column: var(--col-md-start, var(--col-sm-start, var(--col-start, 1))) / var(--col-md-end, var(--col-sm-end, var(--col-end, 6)));
        grid-row: var(--row-md-start, var(--row-sm-start, var(--row-start, 1))) / var(--row-md-end, var(--row-sm-end, var(--row-end, 2)));
    }
}

@media (min-width: 992px) {
    .floating-box-grid > .floating-box {
        grid-column: var(--col-lg-start, var(--col-md-start, var(--col-sm-start, var(--col-start, 1)))) / var(--col-lg-end, var(--col-md-end, var(--col-sm-end, var(--col-end, 6))));
        grid-row: var(--row-lg-start, var(--row-md-start, var(--row-sm-start, var(--row-start, 1)))) / var(--row-lg-end, var(--row-md-end, var(--row-sm-end, var(--row-end, 2))));
    }
}

@media (min-width: 1200px) {
    .floating-box-grid > .floating-box {
        grid-column: var(--col-xl-start, var(--col-lg-start, var(--col-md-start, var(--col-sm-start, var(--col-start, 1))))) / var(--col-xl-end, var(--col-lg-end, var(--col-md-end, var(--col-sm-end, var(--col-end, 6)))));
        grid-row: var(--row-xl-start, var(--row-lg-start, var(--row-md-start, var(--row-sm-start, var(--row-start, 1))))) / var(--row-xl-end, var(--row-lg-end, var(--row-md-end, var(--row-sm-end, var(--row-end, 2)))));
    }
}

.floating-box > [class*="box-"] {
    max-width: 35ch;
    color: white;
    padding: 1.75rem 1.25rem 1.25rem;
}
.floating-box > .box-red {
    background-color: var(--red);
}
.floating-box > .box-blue {
    background-color: var(--dark-blue);
}

[class*="box-"]:focus-within :focus {
    text-decoration: underline white dashed;
    text-underline-offset: 3px;
}

.floating-box > .box-column {
    display: flex;
    flex-direction: column;
}

.floating-box > .box-full-width {
    max-width: 100%;
    width: 100%;
}

.floating-box > .hero-title {
    position: absolute;
    top: -0.85ch;
    left: 5px;
    line-height: 1;
    margin: 0;
    color: var(--yellow);
}

.share-links,
.social-links {
    list-style-type: none;
    flex: 0 0 100%;
    max-width: 100%;
    color: white;
    padding-left: 0;
}

.share-links {
    color: var(--dark-blue);
    display: inline-flex;
}

.share-links > li {
    margin: 0 0.45rem;
}

.share-links a,
.social-links a {
    transition-property: opacity, color;
}

.share-links:hover a,
.social-links:hover a {
    opacity: 0.5;
}

.share-links:focus-within a,
.social-links:focus-within a {
    opacity: 0.5;
}

.share-links:hover a:hover,
.share-links a:focus {
    color:var(--yellow);
    opacity: 1;
}

.social-links:hover a:hover,
.social-links a:focus {
    color: var(--yellow);
    opacity: 1;
}

.social-links-primary {
    color: var(--red);
}

.social-links-primary:hover a:hover {
    color: var(--black);
}

.social-links-row {
    display: flex;
}

.social-links-inline-row {
    display: inline-flex;
}
.social-links-inline-row > *,
.social-links-row > * {
    margin-right: 1em;
}
.social-links-inline-row > *:last-child,
.social-links-row > *:last-child {
    margin-right: 0;
}

.social-links .social-link {
    color: inherit;
}
@media (max-width: 767px) {
    .social-links {
        flex-wrap: wrap;
    }
    
    .social-links > li {
        font-size: 1.5rem;
        margin-right: 0;
    }
    
    .social-links .social-link {
        padding: 0.5em;
        display: inline-block;
        line-height: 0;
    }
}

.social-link-title {
    color: currentcolor;
    text-decoration: underline;
}

.social-link-title:hover {
    color: var(--red);
}

.social-link-title:focus {
    text-decoration: underline var(--red) dashed;
    outline-color: transparent;
}

/** Contact Header */

.contact-info-row {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
}

.contact-info-row > * {
    flex: 0 0 auto;
    margin-bottom: 0;
}

/** Footer Grid */
.footer {
    background-color: var(--dark-blue-bg);
    --light-blue: var(--light-blue-on-dark);
    color: white;
    font-size: 13px;
    padding-top: var(--sm);
    padding-bottom: var(--xs);
    padding: var(--sm) max(15px, env(safe-area-inset-right)) var(--xs) max(15px, env(safe-area-inset-left));
}

@media (min-width: 768px) {
    .footer {
        padding-top: var(--md);
    }
}

.footer a {
    color: var(--light-blue);
}

.footer a:focus {
    text-decoration: underline dashed;
}

.footer ul {
    padding-left: 0;
    list-style-type: none;
}

.footer ul > * {
    margin: 0;
    line-height: 1.3;
}

.footer ul > * + * {
    margin-top: 18px;
}

.footer ul ul {
    display: inline-flex;
}

.footer ul ul > * {
    margin-top: unset;
}

.footer ul ul > * + * {
    margin-left: 0.75rem;
}

.footer .copy {
    color: var(--light-blue);
    font-size: 10px;
    line-height: 1.5;
}

.footer .made-by {
    margin-top: 0.25em;
}

.footer-logo > svg {
    width: 100%;
    height: auto;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.footer-links > ul {
    width: 100%;
    position: relative;
    padding-right: max(15px, env(safe-area-inset-right))
    padding-left: 15px;
}

.footer-links ul,
.footer-links ul:not(.social-links):first-child {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.footer-links ul:not(.social-links):first-child {
    flex-basis: 100%;
    width: 100%;
}

.footer-grid {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 12.5vw 1fr 12.5vw;
}

.footer-grid .footer-logo {
    grid-column: 2;
}

.footer-grid .footer-links {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: minmax(auto, 165px) auto;
    }
    .footer-grid .footer-logo {
        grid-column: 1;
    }
    .footer-grid .footer-links {
        grid-column: 2;
        justify-content: space-evenly;
    }
    .footer-links ul:not(.social-links):first-child {
        flex-basis: auto;
        width: auto;
    }
}

@media (min-width: 992px) {
    .footer-grid {
        grid-template-columns: calc(100% / 12 - 15px) minmax(auto, 165px) auto calc(100% / 12 - 15px);
    }
    
    .footer-grid .footer-logo {
        grid-column: 2;
    }
    
    .footer-grid .footer-links {
        grid-column: 3;
    }
}

@media (min-width: 1140px) {
    .footer-grid {
        grid-template-columns: calc(100% / 12 - 15px) minmax(auto, 165px) 1fr minmax(auto, 2fr) calc(100% / 12 - 15px);
    }
    
    .footer-grid .footer-logo {
        grid-column: 2;
    }
    
    .footer-grid .footer-links {
        grid-column: 4;
    }
    
    .footer-links > ul,
    .footer-links > ul:first-child {
        flex: 0 0 33%;
        max-width: 33%;
    }
}

.floating-decoration-container {
    position: relative;
}


decoration-circle-collection,
decoration-triangle-collection {
    position: absolute;
}

decoration-circle-collection[class*="decoration-"],
decoration-triangle-collection[class*="decoration-"] {
    color: transparent;
}

decoration-circle-collection.decoration-gold,
decoration-triangle-collection.decoration-gold {
    color: var(--yellow);
}

decoration-circle-collection.decoration-red,
decoration-triangle-collection.decoration-red {
    color: var(--red);
}

decoration-circle-collection.decoration-blue,
decoration-triangle-collection.decoration-blue {
    color: var(--dark-blue);
}

decoration-circle-collection > svg,
decoration-triangle-collection > svg {
    max-width: 100%;
    display: block;
    color: inherit;
}

decoration-circle-collection {
    z-index: -1;
}

#yellowTriangleCollection {
    --offset-top: calc(292px / -2);
}

#yellowTriangleCollection > svg {
    max-width: 365px;
}

@media (min-width: 768px) {
    #yellowTriangleCollection {
        --offset-top: calc(314px / -2);
    }
    #yellowTriangleCollection > svg{
        max-width: 600px;
    }
}

decoration-triangle-collection[position="top"] {
    top: 0;
}

decoration-triangle-collection[position="right"] {
    right: 0;
    top: -3.4rem;
}

decoration-triangle-collection[center] {
    right: 0;
    left: 0;
}

decoration-triangle-collection[center] > svg {
    margin-right: auto;
    margin-left: auto;
}



decoration-triangle-collection[style*="--offset-top"] {
    top: var(--offset-top);
}

decoration-triangle-collection[style*="--offset-right"] {
    left: auto;
    right: var(--offset-right);
}

decoration-triangle-collection[style*="--offset-bottom"] {
    bottom: var(--offset-bottom);
}

decoration-triangle-collection[style*="--offset-left"] {
    left: var(--offset-left);
}

decoration-circle-collection[style*="--offset-top"] {
    top: var(--offset-top);
}

decoration-circle-collection[style*="--offset-left"] {
    left: var(--offset-left);
}

decoration-circle-collection[style*="--offset-top"] {
    top: var(--offset-top);
}

decoration-circle-collection[style*="--offset-right"] {
    right: var(--offset-right);
}

decoration-circle-collection[style*="--offset-bottom"] {
    bottom: var(--offset-bottom);
}

decoration-circle-collection[style*="--offset-left"] {
    left: var(--offset-left);
}

#redFooterDecoration > decoration-triangle-collection {}

#redFooterDecoration > decoration-triangle-collection[position="right"] {
    right: env(safe-area-inset-right);
}

/** Alternating Grid Row */
.grid {
    display: grid;
}

.content-row-grid {
    grid-auto-flow: dense;
    grid-template-columns: minmax(calc(20ch + 30px), 1fr);
    grid-template-rows: repeat(3, auto);
    grid-gap: calc(45px / 4) 30px;
    place-items: center;
    justify-content: space-between;
}

.shop-row-grid > .grid-image,
.content-row-grid > .grid-image {
    max-width: 100%;
    width: 257px;
    height: auto;
    border: 1px dashed var(--light-blue);
    border-radius: 1000px;
    padding: 5px;
    overflow: hidden;
}

.shop-row-grid > .grid-image img,
.content-row-grid > .grid-image img {
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.content-row-grid > .grid-divider {
    display: none;
}

.content-row-grid > .grid-content * {
    margin: unset;
}

.content-row-grid > .grid-content > h3 {
    --top-adjustment: -2px;
    --bottom-adjustment: -1px;
    margin-bottom: 1.75em;
}

.content-row-grid > .grid-content p {
    color: var(--light-blue);
}

.content-row-grid > .grid-content .grid-content-wrapper {
    max-width: 30ch;
}

.content-row-grid > .grid-content {
    grid-row: -2 / -1;
}

.product-row-grid .grid-content > p,
.service-row-grid .grid-content > p {
    color: var(--black);
}

.service-row-grid .grid-content-wrapper {
    color: var(--light-blue);
}

.product-row-grid .product-pricing,
.service-row-grid .service-price {
    color: var(--black);
    display: inline-block;
    margin-left: 0.5em;
    opacity: 0.8;
}

.content-row-grid + .content-row-grid {
    margin-top: 45px;
}

@media(min-width: 768px) {
    .content-row-grid {
        grid-auto-flow: dense;
        grid-template-columns: minmax(min-content, max-content) minmax(min-content, max-content);
        grid-template-rows: unset;
        place-items: center;
        grid-gap: 45px 30px;
    }
    
    .content-row-grid > .grid-image {
        max-width: 262px;
    }
    
    .content-row-grid > .grid-content {
        grid-row: unset;
    }
    
    .content-row-grid:nth-child(2n + 1) > .grid-content {
        grid-column: -2 / -1;
    }
    
    .content-row-grid > .grid-content > .grid-content-wrapper {
        max-width: 37.25ch; /* character height */
    }
}

@media (min-width: 992px) {
    .content-row-grid {
        grid-auto-flow: dense;
        grid-template-columns: minmax(min-content, max-content) minmax(auto, 262px) minmax(min-content, max-content);
        place-items: center;
        grid-gap: 45px 30px;
    }
    
    .service-row-grid {
        grid-template-columns: minmax(min-content, max-content) minmax(auto, 175px) minmax(min-content, max-content);
    }
    
    .content-row-grid > .grid-divider {
        display: initial;
    }

    .content-row-grid > .grid-divider {
        grid-column: 2 / 3;
        place-self: center stretch;
    }
    
    .content-row-grid > .grid-divider::after {
        content: '';
        display: block;
        width: 100%;
        border: 1px solid var(--yellow);
    }
}


.membership-description {
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--light-blue);
}

.shop-row-grid {
    grid-auto-flow: dense;
    grid-template-columns: minmax(max-content, 1fr);
    grid-template-rows: repeat(3, auto);
    grid-gap: calc(45px / 2) 15px;
    place-items: center;
}

/*
 .shop-row-grid > .grid-image and .shop-row-grid > .grid-image img
 are in the .content-row-grid component styles
*/

.shop-row-grid > .grid-content * {
    margin: unset;
}

.shop-row-grid > .grid-content > h3 {
    --top-adjustment: -2px;
    --bottom-adjustment: -1px;
    margin-bottom: 1.75em;
}

.shop-row-grid > .grid-content p {
    color: var(--light-blue);
}

.shop-row-grid > .grid-content .grid-content-wrapper {
    max-width: 30ch;
}

.shop-row-grid > .grid-content {
    grid-row: -2 / -1;
}

.shop-row-grid + .content-row-grid {
    margin-top: 45px;
}

@media(min-width: 768px) {
    .shop-row-grid {
        grid-auto-flow: dense;
        grid-template-columns: minmax(min-content, max-content) minmax(min-content, max-content);
        grid-template-rows: unset;
        place-items: center;
        grid-gap: 45px 15px;
    }
    
    .shop-row-grid > .grid-content {
        grid-row: unset;
    }
    
    .shop-row-grid:nth-child(2n + 1) > .grid-content {
        grid-column: -2 / -1;
    }
    
    .shop-row-grid > .grid-content > .grid-content-wrapper {
        max-width: 37.25ch; /* character height */
    }
}

@media (min-width: 992px) {
    .shop-row-grid {
        grid-template-columns: max-content minmax(min-content, max-content);
    }
}

.product-row-grid {
    position: relative;
}

.product-row-grid .product-pricing {
    font-size: 14px;
}

.product-row-grid > .grid-link-overlay {
    display: block;
    grid-column: 1 / span 1;
    grid-row: 1;
}

.product-row-grid > .grid-link-overlay::after {
    content: '';
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}

.product-row-grid > .grid-link-overlay ~ .grid-image img {
    transform: scale(1.05);
    padding: 5px;
    transition: transform 0.25s ease-out;
}

.product-row-grid > .grid-link-overlay:focus ~ .grid-image img,
.product-row-grid > .grid-link-overlay:hover ~ .grid-image img {
    transform: scale(1);
}

.product-row-grid > .grid-link-overlay ~ .grid-content .btn {
    position: relative;
    z-index: 11;
}

.product-row-grid:focus-within .grid-image {
    border-color: var(--dark-blue);
}

.product-row-grid > .grid-content {
    width: 100%;
}

.product-row-grid .grid-content-wrapper {
    margin: 0 auto;
}

.product-row-grid:focus-within .grid-content > p,
.product-row-grid:focus-within .grid-content .product-pricing {
    color: var(--dark-blue);
    text-decoration: underline dashed;
    text-underline-offset: 4px;
    opacity: 1;
}

@media (min-width: 768px) {
    .product-row-grid > [class*="grid-"],
    .product-row-grid > * {
        grid-row: 1;
    }
    .product-row-grid > .grid-content {
        grid-column: 1;
    }
    .product-row-grid:nth-child(2n + 1) > .grid-content {
        grid-column: 3;
    }
    .product-row-grid:nth-child(2n + 1) > .grid-image {
        grid-column: 1;
    }
    .product-row-grid > .grid-link-overlay {
        grid-column: 1 / span 2;
    }
    
    .product-row-grid > .grid-content { 
        width: unset;
        width: revert;
        margin: unset;
    }
}