/* GLOBAL VARIABLES FOR COLORS */
:root,
:host,
.sl-theme-light {

    /* Variables used by Shoelace, so we apply our high` color to it. */
    --sl-color-primary-50: #f9f9fc;
    --sl-color-primary-100: #e4e4ed;
    --sl-color-primary-200: #cdcddd;
    --sl-color-primary-300: #b3b3cc;
    --sl-color-primary-400: #9595ba;
    --sl-color-primary-500: #6e6fa5;
    --sl-color-primary-600: #2f318d;
    --sl-color-primary-700: #2b2d82;
    --sl-color-primary-800: #272976;
    --sl-color-primary-900: #232469;
    --sl-color-primary-950: #1e1f5a;

    --sl-color-success-50: #f7fbf2;
    --sl-color-success-100: #ebf3e0;
    --sl-color-success-200: #deebcb;
    --sl-color-success-300: #d0e2b5;
    --sl-color-success-400: #c1da9c;
    --sl-color-success-500: #b1d17d;
    --sl-color-success-600: #9fc754;
    --sl-color-success-700: #8bae49;
    --sl-color-success-800: #73903d;
    --sl-color-success-900: #546a2d;
    --sl-color-success-950: #212a12;
                
    --sl-shadow-small: -2px 2px 4px rgba(0, 0, 0, 0.2);
    --sl-shadow-medium: -2px 2px 8px rgba(0, 0, 0, 0.4);

    --sl-focus-ring: solid 3px rgba(110, 111, 165, 0.6);
    --sl-input-focus-ring-color: rgba(110, 111, 165, 0.6);
}

:host,
.sl-theme-dark {
    /* Variables used by Shoelace, so we apply our highlight color to it. */
    --sl-color-primary-50:  #1e1f5a;
    --sl-color-primary-100: #232469;
    --sl-color-primary-200: #272976;
    --sl-color-primary-300: #2b2d82;
    --sl-color-primary-400: #2f318d; 
    --sl-color-primary-600: #6e6fa5;
    --sl-color-primary-500: #9595ba;
    --sl-color-primary-700: #b3b3cc;
    --sl-color-primary-800: #cdcddd;
    --sl-color-primary-900: #e4e4ed;
    --sl-color-primary-950:#f9f9fc;
    
    --sl-color-success-50: #212a12;
    --sl-color-success-100: #546a2d;
    --sl-color-success-200: #73903d;
    --sl-color-success-300: #8bae49;
    --sl-color-success-400: #9fc754;
    --sl-color-success-500: #b1d17d;
    --sl-color-success-600: #c1da9c;
    --sl-color-success-700: #d0e2b5;
    --sl-color-success-800: #deebcb;
    --sl-color-success-900: #ebf3e0;
    --sl-color-success-950: #f7fbf2;

    --sl-shadow-small: -2px 2px 4px rgba(0, 0, 0, 0.6);
    --sl-shadow-medium: -2px 2px 8px rgba(0, 0, 0, 0.8);
}

/* Typography */
@font-face {
    font-family: 'Source Sans';
    font-style: normal;
    src: url("../webfonts/SourceSans3-VariableFont_wght.ttf") format("truetype");
    font-display:swap;
}
@font-face {
    font-family: 'Source Sans';
    font-style: italic;
    src: url("../webfonts/SourceSans3-Italic-VariableFont_wght.ttf") format("truetype");
    font-display:swap;
}

:root,
:host,
.sl-theme-light,
.sl-theme-dark {
    --sl-font-sans: "Source Sans", sans-serif;
    --sl-button-font-size-medium: var(--sl-font-size-medium);
}
/* Global Styles */
html, body {
	font-family:var(--sl-font-sans);
    line-height:1.3;
	font-size: 18px;
	color: var(--sl-color-neutral-700);
	background-color: var(--sl-color-neutral-0);
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	overflow-x:hidden;
    overflow-y:hidden;
    opacity:1;
    transition: opacity 0.5s linear;
}
body.loading {
    opacity:0;
}

h1, h2, h3, h4 {
    text-transform:uppercase;
    color:var(--sl-color-primary-600);
    font-weight:var(--sl-font-weight-semibold);
}
a, a:visited {
    color:var(--sl-color-neutral-700);
}
a:hover, a:active {
    color:var(--sl-color-primary-400);
}
:focus-visible {
    outline: var(--sl-focus-ring);
    outline-offset: var(--sl-focus-ring-offset);
}
sl-menu-item:focus-visible {
    outline:none ! important;
}
.accessible-skip-header {
    position:fixed; 
    top:5px; 
    left:calc(50% - 15rem); 
    height:1.5rem; 
    line-height:1.5rem;
    width: 15rem;
    z-index:var(--sl-z-index-tooltip);
    padding:4px;
    color:var(--sl-color-primary-600);
    text-align:center;
}
.accessible-skip-header:not(:focus-visible) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    clip: rect(0px, 0px, 0px, 0px) !important;
    clip-path: inset(50%) !important;
    border: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding:0px ! important;
}

div.md-pagehead {
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    height:90px;
    padding:20px;
    z-index:var(--sl-z-index-drawer);

    & div.head-line {
        position:relative;
        display:flex;
        align-items:center;
        justify-items:left;
        justify-content:space-between;
        flex-flow:row nowrap;
        margin-bottom:0.5rem;
    }
}

img.md-logo {
    max-height:45px;
    vertical-align:top;
}

.rightsection {
    position:absolute;
    top:0px;
    right:0px;
    z-index:var(--sl-z-index-dropdown);
    border:none ! important;
}

.desktop-franchisee-button {
    position:absolute;
    top:0px;
    right:0px;
    z-index:var(--sl-z-index-dropdown);
    border:none ! important;
}
.mobile-franchisee-button {
    display:none;
}

.md-contactbox {
    margin:-20px 0px 0px 0px;
    padding:20px;
    line-height:25px;
    text-align:left;
    height:25px;
    width:auto;
    background-color: var(--sl-color-primary-600);
    color: var(--sl-color-success-500);

    & a,
    & a:visited {
        color:var(--sl-color-success-500);
        display:inline-block;
        margin:0px 0.75rem;
    }
    & a:focus-visible {
        outline: solid 3px var(--sl-color-success-500);
        outline-offset: var(--sl-focus-ring-offset);
    }
    & sl-icon {
        font-size:1.25rem;
        margin-right:0.25rem;
        vertical-align:middle;
    }
}

.navmenu-hamburger,
.navmenu-hamburger .navmenu-closed-thumb,
.navmenu-hamburger .navmenu-open-thumb {
    display:none;
}
.navmenu-popup {
    display:flex;
    flex-flow:row nowrap;
    align-items:start;
    justify-content:start;

    & sl-menu-label::part(base) {
        color:var(--sl-color-primary-600);
    }
    & sl-button {
        border-bottom:3px solid transparent;
    }
    & sl-dropdown[open] sl-button::part(base):hover,
    & sl-button::part(base):hover {
        color:var(--sl-color-success-600);
    }
    & sl-button.active {
        border-bottom: 3px solid var(--sl-color-success-500);
    }
    & sl-button-group sl-button {
        border-bottom:3px solid transparent;
    }
    & sl-button-group sl-button.active,
    & sl-button-group sl-button:hover {
        border-bottom:3px solid transparent;
        background-color:inherit;
    }
    & sl-button-group sl-button.active::part(base) {
        background-color:var(--sl-color-success-300);
    }
    & sl-button-group sl-button:not(.active):hover::part(base) {
        background-color:var(--sl-color-success-100);
    }
    & sl-button-group {
        margin-left:8px;
    }
}

.widemenu {
    white-space:nowrap;
    padding:0px;
}
.widemenu.dualcolumn {
    columns:2;
}
.widesubmenu {
    display:inline-block;
    vertical-align:top;
}

div.md-page {
    position:absolute;
    top:130px;
    bottom:0px;
    left:0px;
    right:0px;
    /* min-width:750px; */
    overflow-x:hidden;
    overflow-y:auto;
    scroll-behavior: smooth;
    padding:20px 20px 20px 20px;
}

/* Button with a green angle at the end of it ... a "granglebutton" */
sl-button.granglebutton {
    --sl-input-border-width:0px;
    border-color:transparent;
    transition:none;
    
    &:hover, &:active {
        border:none ! important;
    }
    &::part(label) {
        color: var(--sl-color-neutral-0);
        border:none !important;
    }
    &:active::part(label) {
        color: var(--sl-color-neutral-0);
        border:none ! important;
    }
    &::part(base) {
        background-image:linear-gradient(135deg, var(--sl-color-primary-600) 0%, var(--sl-color-primary-600) 80%, var(--sl-color-success-600) 80%, var(--sl-color-success-600) 100%);
        padding-left:30px;
        padding-right:30px;
        border-radius:var(--sl-border-radius-medium);
        border:none ! important;
    }
    &:hover::part(base) {
        filter:saturate(2);
        border:none ! important;
    }
    &:active::part(base) {
        filter:saturate(5);
        border:none ! important;
    }
    
}

@media screen and (max-width:1000px) {
    div.md-pagehead {
        height:40px;
    
        & div.head-line {
            position:absolute;
            top:20px;
            left:20px;
            right:20px;
            height:auto;
        }
    }

    .md-contactbox {
        margin:0px;
        padding:0px;
        line-height:0px;
        height:auto;
        width:auto;
        text-align:right;
        background-color: transparent;
        color: var(--sl-color-primary-600);
        position:absolute;
        right:50px;
        top:0px;

        & a,
        & a:visited {
            color: var(--sl-color-primary-600);
            display:inline-block;
            position:relative;
            height:24px;
            width:24px;
            font-size:24px;
            line-height:24px;
            padding:8px;
            border:1px solid var(--sl-color-neutral-200);
            background-color:var(--sl-color-neutral-50);
            border-radius:4px;
            color:var(--sl-color-primary-600);
            cursor:pointer;
            user-select:none;
            box-shadow:var(--sl-shadow-small);
            margin:0px;
        }
        & span.titletext {
            display:none;
        }
        & a sl-icon {
            display:block;
            position:absolute;
            top:8px;
            left:8px;
            width:24px;
            height:24px;
            font-size:24px;
        }
    }
    
    img.md-logo {
        max-height:32px;
    }

    .navmenu-hamburger {
        display:block;
        position:absolute;
        top:0px;
        right:0px;
        height:24px;
        width:24px;
        font-size:24px;
        line-height:24px;
        padding:8px;
        border:1px solid var(--sl-color-neutral-200);
        background-color:var(--sl-color-neutral-50);
        border-radius:4px;
        color:var(--sl-color-primary-600);
        cursor:pointer;
        user-select:none;
        box-shadow:var(--sl-shadow-small);
    }
    .navmenu-hamburger .navmenu-closed-thumb {
        display:block;
        position:absolute;
        top:8px;
        left:8px;
        width:24px;
        height:24px;
        opacity:1.0;
        transform: rotate(0deg);
        pointer-events:all;
        transition: opacity 0.25s 0.25s, transform 0.5s;
        z-index:9001;
    }
    .navmenu-hamburger.open .navmenu-closed-thumb {
        opacity:0.0;
        transform:rotate(180deg);
        pointer-events:none;
    }
    .navmenu-hamburger .navmenu-open-thumb {
        display:block;
        position:absolute;
        top:8px;
        left:8px;
        width:24px;
        height:24px;
        opacity:0.0;
        pointer-events:none;
        transform: rotate(180deg);
        transition: opacity 0.25s 0.25s, transform 0.5s;
    }
    .navmenu-hamburger.open .navmenu-open-thumb {
        opacity:1.0;
        transform: rotate(360deg);
        pointer-events:all;
        transition: opacity 0.25s 0.25s, transform 0.5s;
    }

    .navmenu-popup {
        display:none;

        &.open {
            position:fixed;
            display:flex;
            flex-flow:column nowrap;
            align-items:end;
            top:62px;
            right:20px;
            width:auto;
            height:auto;
            padding:4px;
            margin-left: 0px;
            margin-right:0px;
            background-color:var(--sl-color-neutral-50);
            border: 1px solid var(--sl-color-neutral-200);
            color:var(--sl-color-primary-600);
            border-radius: 4px;
            box-shadow:var(--sl-shadow-small);
            z-index:var(--sl-z-index-dropdown);
        }

        & sl-button,
        & sl-dropdown {
            border-bottom:none;
            transition:background-color 0.25s ease-in-out;
            width:100%;
        }
        & sl-button::part(base) {
            justify-content:start;
        }
        & sl-dropdown[open] sl-button,
        & sl-button:hover,
        & sl-button.active {
            border-bottom:none;
            background-color:var(--sl-color-success-200);
        }
    }

    .widemenu {
        white-space:normal;
    }
    .widemenu.dualcolumn {
        columns:1;
    }
    .widesubmenu {
        display:block;
        border-top:1px solid var(--sl-color-neutral-200);
    }

    div.md-page {
        top:80px;
    }

    .rightsection {
        position:static;
        top:auto;
        right:auto;
    }
    .desktop-franchisee-button {
        display:none;
    }
    .mobile-franchisee-button {
        display:block;
        margin-bottom:0.5rem;
    }
}


.home-main-pic {
    position:absolute; 
    top:0px; 
    right:0px; 
    transform:translateX(50%);
    border:3px solid var(--sl-color-success-600);
    z-index:300;
}

.main-social {
    position:absolute;
    bottom:0.5rem; 
    right:0px; 
    left:auto;
    height:auto; 
    text-align:left; 
    z-index:500;
}

.home-main-frame {
    box-sizing:border-box;
    position:relative;
    width:75%;
    height:auto;
    min-height:575px;
    padding:0px 0px 3rem 0px;
    z-index:400;
    background-color:var(--sl-color-neutral-0);
    border-top:3rem solid var(--sl-color-primary-600);
    border-bottom:1px solid var(--sl-color-primary-600);
}
.home-main-frame-overlay {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:transparent;
    z-index:400;
}
.md-pagetitleblock {
    box-sizing:border-box;
    position:relative; 
    top:0px; 
    left:20%; 
    width:350px; 
    height:auto;
    z-index:500;
}
svg.socials {
    transition:transform 0.25s linear;
}
svg.socials:hover {
    transform:scale(1.2);
}
.home-main-frame svg.socials {
    height:3rem;
    width:3rem;
    fill:var(--sl-color-primary-600);
}

@media screen and (max-width:1140px) {
    .home-main-pic {
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        opacity:0.25;
        min-width:100%;
        min-height:100%;
    }
    .main-social {
        bottom: 0.5rem;
        right:0.5rem; 
    }
    
    .home-main-frame {
        overflow:hidden;
        width:100%;
    }
    .home-main-frame svg.socials {
        height:2rem;
        width:2rem;
    }
    .home-main-frame-overlay {
        backdrop-filter:blur(4px);
    }
    .md-pagetitleblock {
        left:0px;
        margin-left:auto;
        margin-right:auto;
    }
}
@media screen and (max-width:500px) {
    .md-pagetitleblock {
        width:100%;
        max-width:350px;
        left:0px;
        padding:10px;
    }
}

.md-pagetitleblock .md-pagetitle {
    text-transform:uppercase;
    text-align:center;
    margin:3rem auto 1rem auto;
    color:var(--sl-color-primary-600);
}
.md-pagetitleblock .md-pagetitle .line1 {
    display:inline-block;
    font-size:var(--sl-font-size-4x-large);
    font-weight:700;
    letter-spacing:1px;
    line-height:1;
    opacity:0.0;    /* initially */
    transition:opacity 0.5s ease-in-out;
}
.md-pagetitleblock .md-pagetitle .line2 {
    display:inline-block;
    font-size:2.25rem;
    font-weight:600;
    white-space:nowrap;
    letter-spacing:1px;
    opacity:0.0;  /* initially */
    transition:opacity 0.5s ease-in-out;
}
.md-pagetitleblock .md-subtitle {
    font-size:var(--sl-font-size-large);
    font-weight:var(--sl-font-weight-light);
    text-align:center;
    text-transform:uppercase;
    margin-bottom:2rem;
    color:var(--sl-color-primary-600);
}
.md-pagetitleblock sl-button {
    width:75%;
    display:block;
    margin:1rem auto;
}


.narrow {
    width:75%;
    margin-left:auto ! important;
    margin-right:auto ! important;
    position:relative;
    padding:0px;
}

/* Section Break */
.sectionbreak {
    height:120px;
    width:calc(100% + 40px);
    position:relative;
    margin:40px -20px;
}
.sectionbreak.left::after {
    content:"";
    position:absolute;
    top:calc(50% - 15px);
    left:0px;
    width:60%;
    height:30px;
    background-color:var(--sl-color-success-600);
    box-shadow:-10px 10px 0px var(--sl-color-primary-600);
    transform-origin:bottom left;
    transform:skew(45deg);
}
.sectionbreak.right::after {
    content:"";
    position:absolute;
    top:calc(50% - 15px);
    right:0px;
    width:60%;
    height:30px;
    background-color:var(--sl-color-primary-600);
    box-shadow:-10px 10px 0px var(--sl-color-success-600);
    transform-origin:top right;
    transform:skew(45deg);
}

.commercial-section {
    height:500px;
}
.commercial-svc-back {
    position:absolute;
    top:0px;
    right:0px;
    left:40%;
    height:calc(500px - 6rem);
    background-color:var(--sl-color-primary-600);
    color:var(--sl-color-neutral-0);
    padding:2rem 2rem 2rem 25%;
    z-index:auto;
}
.commercial-svc-surround {
    position:relative;
    height:100%;
    width:100%;
    padding:0px;
    margin:0px;
}
.commercial-svc-back h3 {
    color:var(--sl-color-neutral-0);
    margin-bottom:2rem;
}
sl-carousel.commercial-svc-carousel {
    position:absolute;
    top:30px;
    left:0px;
    width:60%;
    height:440px;
    z-index: 100;
}
sl-carousel.commercial-svc-carousel::part(navigation-button) {
    border:1px solid var(--sl-color-neutral-0);
    border-radius:var(--sl-border-radius-circle);
    color:var(--sl-color-neutral-0);
    background-color:var(--sl-color-neutral-1000);
}
sl-carousel.commercial-svc-carousel::part(pagination) {
    justify-content:start;
}
sl-carousel.commercial-svc-carousel::part(pagination-item) {
    background-color:var(--sl-color-primary-400);
}
sl-carousel.commercial-svc-carousel::part(pagination-item--active) {
    background-color:var(--sl-color-success-600);
}
sl-carousel.commercial-svc-carousel::part(scroll-container) {
    border:3px solid var(--sl-color-success-600);
    background-color:var(--sl-color-neutral-0);
}

@media screen and (max-width:720px) {
    sl-carousel.commercial-svc-carousel {
        position:relative;
        top:auto;
        left:0px;
        width:100%;
        height:auto;
        z-index: 100;
    }
    sl-carousel.commercial-svc-carousel::part(pagination) {
        justify-content:center;
    }
    .commercial-svc-back {
        position:relative;
        top:0px;
        right:0px;
        left:0px;
        height:320px;
        background-color:var(--sl-color-primary-600);
        color:var(--sl-color-neutral-0);
        margin-top:-3rem;   /* slide it up under the bottom of the carousel */
        padding:4rem 2rem 2rem 2rem;
        z-index:auto;
    }
    .commercial-section {
        height:auto;
    }
}

.residential-section {
    height:500px;
}
.residential-svc-back {
    position:absolute;
    top:0px;
    left:0px;
    right:40%;
    height:calc(500px - 20px - 6rem);
    background-color:var(--sl-color-neutral-0);
    border:10px solid var(--sl-color-success-600);
    color:var(--sl-color-primary-700);
    padding:2rem 25% 2rem 2rem;
    z-index:auto;
}
.residential-svc-surround {
    position:relative;
    height:100%;
    width:100%;
    padding:0px;
    margin:0px;
}
.residential-svc-back h3 {
    color:var(--sl-color-primary-700);
    margin-bottom:2rem;
}
sl-carousel.residential-svc-carousel {
    position:absolute;
    top:30px;
    right:0px;
    width:60%;
    height:440px;
    z-index:100;
}
sl-carousel.residential-svc-carousel::part(navigation-button) {
    border:1px solid var(--sl-color-neutral-0);
    border-radius:var(--sl-border-radius-circle);
    color:var(--sl-color-neutral-0);
    background-color:var(--sl-color-neutral-1000);
}
sl-carousel.residential-svc-carousel::part(pagination) {
    justify-content:end;
}
sl-carousel.residential-svc-carousel::part(pagination-item) {
    background-color:var(--sl-color-primary-400);
}
sl-carousel.residential-svc-carousel::part(pagination-item--active) {
    background-color:var(--sl-color-success-600);
}
sl-carousel.residential-svc-carousel::part(scroll-container) {
    border:3px solid var(--sl-color-success-600);
    background-color:var(--sl-color-neutral-0);
}

@media screen and (max-width:720px) {
    sl-carousel.residential-svc-carousel {
        position:relative;
        top:auto;
        left:0px;
        width:100%;
        height:auto;
        z-index: 100;
    }
    sl-carousel.residential-svc-carousel::part(pagination) {
        justify-content:center;
    }
    .residential-svc-back {
        position:relative;
        top:0px;
        right:0px;
        left:0px;
        height:360px;
        background-color:var(--sl-color-neutral-0);
        border:10px solid var(--sl-color-success-600);
        color:var(--sl-color-primary-700);
        margin-top:-3rem;   /* slide it up under the bottom of the carousel */
        padding:4rem 2rem 2rem 2rem;
        z-index:auto;
    }
    .residential-section {
        height:auto;
    }
}

.svc-card {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-align:left;
    padding:0;
    margin:0;
}
.card-message {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:50px;
    overflow-y:auto;
}
.nav-control-group {
    position:absolute;
    left:0px;
    bottom:0px;
    right:0px;
    height:auto;
    text-align:center;
}

#md_map sl-spinner {
    position: absolute;
    font-size:40px;
    top:calc(50% - 20px);
    left:calc(50% - 20px);
}

#loc_results table {
    width:100%;
}
#loc_results table th {
    text-align:left;
    font-weight:bold;
    padding:4px;
    background-color:var(--sl-color-neutral-200);
    border-bottom:1px solid var(--sl-color-neutral-300);
}
#loc_results table td {
    text-align:left;
    padding:4px;
}
#loc_results table tbody tr:hover td,
#loc_results table tbody tr.selected td {
    background-color:var(--sl-color-primary-200);
}
/* See through button - used on dark or patterned backgrounds */
sl-button.seethrough::part(label) {
    color: var(--sl-color-neutral-50);
}
sl-button.seethrough:active::part(label) {
    color: var(--sl-color-neutral-0);
}
sl-button.seethrough::part(base) {
    background-color:rgba(0, 0, 0, 0.4);
    --sl-focus-ring: solid 3px rgba(255, 255, 255, 0.6);
}
sl-button.seethrough:hover::part(base) {
    background-color:rgba(255, 255, 255, 0.3);
}
sl-button.seethrough:active::part(base) {
    background-color:rgba(169, 169, 222, 0.3);
}
sl-button.wide,
sl-button-group.wide {
    width:calc(100% - 2rem);
}

.md-testimonials-wrapper {
    margin:3rem -20px;
    height:auto;
    position:relative;
}
.md-testimonials-wrapper::before {
    content:"";
    position:absolute;
    top:0px;
    right:0px;
    width:100%;
    height:calc(100% - 10px);
    background-color:var(--sl-color-primary-600);
    box-shadow:-10px 10px 0px var(--sl-color-success-600);
    transform-origin:top;
    transform:skew(45deg);
}

.md-testimonials {
    text-align:center;
}
.md-test-placard {
    display:inline-block;
    vertical-align:middle;
    position:relative;
    width:250px;
    margin:2rem;
    background-color:var(--sl-color-neutral-0);
    border:1px solid var(--sl-color-neutral-200);
    box-shadow:var(--sl-shadow-medium);
    color:var(--sl-color-neutral-700);
    padding:2rem;
    z-index:20;
}
.md-test-text {
    text-align:left;
    font-size:var(--sl-font-size-medium);
    font-weight:var(--sl-font-weight-light);
    margin-bottom:1rem;
}
.md-test-rating {
    text-align:center;
    margin-bottom:1rem;
}
.md-test-reviewer {
    text-align:center;
    font-size:var(--sl-font-size-small);
    font-weight:var(--sl-font-weight-semibold);
}


sl-button.faq-return {
    position:fixed;
    right:1rem;
    bottom:1rem;
}
div.faq-wrapper {
    display:flex;
    align-items:center;
    margin-bottom:4rem;
}
div.faq-label {
    flex:0 0 auto;
    margin-right:1rem;
}

div.faq-nav {
    flex:1 1 auto;
    background-color:var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
    border-radius: var(--sl-border-radius-medium);
    padding:1rem;


    & sl-breadcrumb::part(base) {
        display:inline-flex;
    }

    & sl-breadcrumb::part(base), & sl-breadcrumb-item::part(base), & sl-breadcrumb-item::part(label) {
        background-color: var(--sl-color-primary-600);
        color: var(--sl-color-neutral-0);
    }
    & sl-breadcrumb-item::part(label):hover {
        color:var(--sl-color-primary-200);
    }
}
.md-faq-wrapper {
    margin:3rem -20px;
    height:auto;
    position:relative;
    padding:1rem 0px 2rem 0px;
}
.md-faq-wrapper::before {
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:calc(100% - 10px);
    background-color:var(--sl-color-primary-600);
    box-shadow:-10px 10px 0px var(--sl-color-success-600);
    transform-origin:bottom left;
    transform:skew(45deg);
}
.requesttype {
    margin-top:1rem;
    font-size:var(--sl-font-size-small);
    text-align:right;
}
/*.greenery {
    background-image:linear-gradient(to bottom right, var(--sl-color-neutral-0) 0%, var(--sl-color-primary-50) 50%, var(--sl-color-primary-200) 70%, var(--sl-color-primary-500) 100%);
    background-attachment:local;
}*/



.grid-section {
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(auto-fill, minmax(300px, calc(50% - 1rem)));
    grid-auto-flow:row;
    justify-content:center;
}
@media screen and (max-width:720px) {
    .grid-section {
        grid-template-columns: 1fr;
    }
}
.greyborder {
    border:1rem solid var(--sl-color-neutral-100);
    padding:1rem;
    position:relative;
}

.check-icon {
    float:right;
    margin:-1rem 1rem 1rem 1rem;
    font-size:48px;
    color:var(--sl-color-success-600);
}

/* Column Views */
.md-columns {
    display:flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-items: stretch;
    justify-content: space-between;
    gap:1rem;
    margin:0;
    padding:0;
}
.md-narrowcol {
    flex:0 0 0;
    position:relative;
}
.md-widecol {
    flex:1;
    position:relative;
}
.md-1col {
    flex:1 1 100%;
    position:relative;
}
.md-2col {
    flex:1 1 calc((100% / 2) - 1rem);
    position:relative;
}
.md-13col {
    flex:1 1 calc((100% / 3) - 1rem);
    position:relative;
}
.md-23col {
    flex:1 1 calc((100% * (2 / 3)) - 1rem);
    position:relative;
}
.md-3col {
    flex:1 1 calc((100% / 3) - (1rem * 2));
    position:relative;
}

/* About Us Page */
.blueheader {
    background-color:var(--sl-color-primary-600);
    color:var(--sl-color-neutral-0);
    text-align:center;
    padding:3rem;
    margin:0px -20px 3rem -20px;
}
.blueheader h1 {
    color:var(sl-color-neutral-0);
}

.md-team-member {
    display:flex;
    gap:1rem;
    align-items:start;
    justify-items:stretch;
    margin:1rem 0px;
    flex-flow:row;
}

.about-photo {
    flex:0 0 266px;
    text-align:center;
}
.about-photo img {
    max-width:256px;
    max-height:256px;
    padding:4px;
    background-color:var(--sl-color-neutral-0);
    border:1px solid var(--sl-color-neutral-200);
    box-shadow:var(--sl-shadow-small);
}
.about-bio {
    flex:1 1 auto;
    text-align:justify;
}

/* Services Template Pages */
.image-header {
    margin:0px -20px 2rem -20px;
    box-sizing:border-box;
    height:auto;
    min-height:300px;
    padding:3rem;
    position:relative;
    background-color:var(--sl-color-primary-600);
    color:var(--sl-color-neutral-0);
    overflow:hidden;
    --md-bkimg-src:none;
    --md-bkimg-position:top center;
}
.image-header::before {
    content:" ";
    position:absolute;
    right:0px;
    top:0px;
    width:50%;
    height:100%;
    background-image:var(--md-bkimg-src);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:var(--md-bkimg-position);
}
.image-header-title {
    width:calc(50% - 3rem);
    font-weight:var(--sl-font-weight-semibold);
    text-shadow:var(--sl-shadow-small);
    color:var(--sl-color-neutral-0);
    font-size:2.5rem;
    margin-bottom:2rem;

    & .subtitle {
        font-size:1.3rem;
    }
}

.bluegreenanglebackground {
    color:var(--sl-color-neutral-0);
    background-image:linear-gradient(45deg, var(--sl-color-primary-600) 0 80%, var(--sl-color-success-600) 80% 100%);
    margin: 2rem -20px;
    padding:3rem 5rem;

    & h1,
    & h2 {
        color:var(--sl-color-neutral-0) ! important;
    }
}

.image-header-title h1 {
    color:var(--sl-color-neutral-0);
}
.inset-image {
    max-width:300px;
    margin:0px 0px 1rem 1rem;
    float:right;
}
div.md-servicemenu {
    width:400px;    
}
div.md-servicemenu a.side-menu {
    display:block;
    padding:0.5rem 1.5rem;
    margin:0.5rem 0px;
    background-color:var(--sl-color-primary-600);
    color:var(--sl-color-neutral-0);
    text-align:right;
    font-weight:var(--sl-font-weight-semibold);
    white-space:nowrap;
}
div.md-servicemenu a.side-menu:visited {
    color:var(--sl-color-neutral-0);
}
div.md-servicemenu a.side-menu.side-menu-selected {
    color:var(--sl-color-success-400);
    pointer-events:none;
}
span.scrwide {
    display:inline;
}
span.scrnarrow {
    display:none;
}


@media screen and (max-width:875px) {
    .image-header {
        padding:3rem 1rem;
    }
    .image-header::before {
        width:calc(100% - 10px);
        opacity:0.7;
    }
    .image-header-title {
        position:relative;
        width:calc(100%);
        z-index:200;
    }
    .inset-image {
        max-width:100%;
        margin:1rem auto 1rem auto;
        float:none;
    }
    div.md-servicemenu {
        width:calc(100vw - 3rem);    
    }
    span.scrwide {
        display:none;
    }
    span.scrnarrow {
        display:inline;
    }
    .md-team-member {
        flex-flow:row wrap;
    }
}


/* Page Footer */
.md-page-foot {
    margin: 2rem -20px -20px -20px;
    padding: 2rem;
    background-color:var(--sl-color-neutral-100);
}
.md-page-foot ul {
    list-style:none;
    padding-left:0px;
}
.md-page-foot ul li {
    padding-bottom:var(--sl-spacing-x-small);
    white-space:nowrap;
    font-size:var(--sl-font-size-medium);
}
.md-page-foot svg.socials {
    width:2rem;
    height:2rem;
    fill:#222222;
}

@media screen and (max-width:830px) {
    .md-page-foot .md-narrowcol {
        max-width: calc((100% / 2) - 1rem);
    }
    .md-page-foot .md-logo {
        max-width:100%;
    }
    .detailed-services {
        display:none;
    }
}


/* SHOELACE CONTROLS */
sl-details::part(header) {
    background-color:var(--sl-color-primary-100);
    box-shadow:var(--sl-shadow-small);
}
sl-details::part(content) {
    background-color:var(--sl-color-neutral-50);
}

/* sl-button::part(label) {
    text-transform:uppercase;
}*/

/* Utility classes */
.space-all, .space-right, .space-horizontal {
    margin-right:var(--sl-spacing-medium);
}
.space-all, .space-top, .space-vertical {
    margin-top:var(--sl-spacing-medium);
}
.space-all, .space-left, .space-horizontal {
    margin-left:var(--sl-spacing-medium);
}
.space-all, .space-bottom, .space-vertical {
    margin-bottom:var(--sl-spacing-medium);
}

.nospace-all, .nospace-right, .nospace-horizontal {
    margin-right:0px;
}
.nospace-all, .nospace-top, .nospace-vertical {
    margin-top:0px;
}
.nospace-all, .nospace-left, .nospace-horizontal {
    margin-left:0px;
}
.nospace-all, .nospace-bottom, .nospace-vertical {
    margin-bottom:0px;
}

.font-thin, .font-thin::part(label) {
    font-weight:100;
}
.font-light, .font-light::part(label) {
    font-weight:var(--sl-font-weight-light);
}
.font-normal, .font-normal::part(label) {
    font-weight:var(--sl-font-weight-normal);
}
.font-semibold, .font-semibold::part(label) {
    font-weight:var(--sl-font-weight-semibold);
}
.font-bold, .font-bold::part(label) {
    font-weight:var(--sl-font-weight-bold);
}
.font-black, .font-black::part(label) {
    font-weight:900;
}

.font-small, .font-small::part(label) {
    font-size:var(--sl-font-size-small);
}
.font-medium, .font-large::part(label) {
    font-size:var(--sl-font-size-medium);
}
.font-large, .font-large::part(label) {
    font-size:var(--sl-font-size-large);
}
.vertical-middle {
    vertical-align:middle;
}
.horizontal-middle {
    margin-left:auto;
    margin-right:auto;
}

.text-right {
    text-align:right;
}
.text-left {
    text-align:left;
}
.text-center {
    text-align:center;
}
.text-justify {
    text-align:justify;
}
.text-white {
    color:var(--sl-color-neutral-0) ! important;
}
.text-grey {
    color:var(--sl-color-neutral-500) ! important;
}

.float-right {
    float:right;
}
.float-left {
    float:left;
}
.clear-float {
    clear:both;
}

.border-top, .border-all, .border-horizontal {
    border-top:1px solid var(--sl-color-neutral-200);
}
.border-right, .border-all, .border-vertical {
    border-right:1px solid var(--sl-color-neutral-200);
}
.border-bottom, .border-all, .border-horizontal {
    border-bottom:1px solid var(--sl-color-neutral-200);
}
.border-left, .border-all, .border-vertical {
    border-left:1px solid var(--sl-color-neutral-200);
}
.border-thick {
    border-width:6px;
}
.border-green {
    border-color:var(--sl-color-success-600);
}
.shadow-small {
    box-shadow:var(--sl-shadow-small);
}
.grey-back {
    background-color:var(--sl-color-neutral-50);
}
.lt-grey-back {
    background-color:var(--sl-color-neutral-100);
}
.blue-back {
    background-color:var(--sl-color-primary-600);
    color:var(--sl-color-neutral-0);
}
.blue-back h1, 
.blue-back h2, 
.blue-back h3, 
.blue-back h4 {
    color:var(--sl-color-neutral-0);
}

.pad-top, .pad-all, .pad-horizontal {
    padding-top:1rem;
}
.pad-right, .pad-all, .pad-vertical {
    padding-right:1rem;
}
.pad-bottom, .pad-all, .pad-horizontal {
    padding-bottom:1rem;
}
.pad-left, .pad-all, .pad-vertical {
    padding-left:1rem;
}

.pad-sm-top, .pad-sm-all, .pad-sm-horizontal {
    padding-top:0.25rem;
}
.pad-sm-right, .pad-sm-all, .pad-sm-vertical {
    padding-right:0.25rem;
}
.pad-sm-bottom, .pad-sm-all, .pad-sm-horizontal {
    padding-bottom:0.25rem;
}
.pad-sm-left, .pad-sm-all, .pad-sm-vertical {
    padding-left:0.25rem;
}

.no-wrap {
    white-space:nowrap;
}
.text-overflow {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media screen and (max-width:1000px) {
    .narrow {
        width:calc(100% - 40px);
        padding:0px 20px;
    }
}

img.imageleft {
    max-width:300px;
    float:left;
    margin: 0px 16px 16px 0px;
}
img.imageright {
    max-width:300px;
    float:right;
    margin:0px 0px 16px 16px;
}

.custtype-item {
    margin:1rem 0px;

    & img {
        float:left;
        max-width:350px;
        margin:0px -360px 0px 0px;
        box-shadow:var(--sl-shadow-medium);
        background-color:var(--sl-color-neutral-0);
        padding:4px;
        border:1px solid var(--sl-color-neutral-300);

        @media screen and (max-width:830px) {
            float:none;
            max-width:calc(100% - 10px);
            margin:0px 0px 1rem 0px;
        }
    }

    & h3 {
        margin: 0px 0px 1rem 0px;
        font-weight:var(--sl-font-weight-semibold);
        padding-left:calc(360px + 1rem);

        @media screen and (max-width:830px) {
            padding-left:0px;
        }
    }

    & p {
        margin:0px;
        padding-left:calc(360px + 1rem);

        @media screen and (max-width:830px) {
            padding-left:0px;
        }
    }
    &::after {
        display:block;
        content:" ";
        clear:both;
    }
}

    
.md-news-section sl-button {
    margin:0.5rem 0;
    position:relative;
    width:100%;
}
.md-news-section sl-button::part(label) {
    white-space:normal;
    line-height:1.3;
    flex:1 1 auto;
}
.md-news-section sl-button::part(base) {
    justify-content:start;
}
.md-news-section sl-button::part(suffix) {
    justify-self:end;
}
.md-news-section sl-button::part(base):hover {
    transform:scale(1.0) ! important;
}
.md-news-when {
    font-size:1rem;
    font-weight:200;
    color:var(--sl-color-neutral-500);
    text-align:left;
    margin:0.5rem 0px;

    @media screen and (max-width:875px) {
        font-size:0.85rem;
    }
}
.md-news-title {
    font-size:1.25rem;
    font-weight:600;
    text-transform:none;
    margin:0px;
}
.md-news-excerpt {
    font-size:16px;
    line-height:18px;
    font-weight:normal;
    font-style:italic;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp:3;
    overflow:hidden;
    height:calc(18px * 3);
    position:relative;
    margin-left:0.5rem;
}
.md-news-excerpt p {
    margin:0px;
}
.md-news-content .rightimg {
    max-width:50%;
    float:right;
    margin:0px 0px 1rem 1rem;
    background-color:var(--sl-color-neutral-0);
    padding:4px;
    border:1px solid var(--sl-color-neutral-300);
    box-shadow:var(--sl-shadow-small);

    @media screen and (max-width:800px) {
        float:none;
        margin:0.5rem;
        max-width:calc(100% - 20px);
        display:block;
    }
}
.md-news-content dt {
    margin-top:0.5rem;
    font-weight:600;
}
img.listimg {
    float:left;
    margin:0px 1rem 1rem 0px;    
    max-width:256px;
    max-height:256px;
    background-color:var(--sl-color-neutral-0);
    padding:4px;
    border:1px solid var(--sl-color-neutral-300);
    box-shadow:var(--sl-shadow-small);
}

/* Testimonial & Review Lists */
.md-review-grid {
    display:grid;
    grid-template-columns:240px auto;
    justify-items:stretch;
    align-items:stretch;
    grid-auto-flow:row;
    border:1px solid var(--sl-color-neutral-200);
    user-select:none;
    position:relative;
}
.listheader {
    padding:8px;
    background-color:var(--sl-color-neutral-100);
    border-bottom:1px solid var(--sl-color-neutral-200);
    color:var(--sl-color-primary-1000);
    width:calc(100% - 16px);
    align-self:stretch;
    font-weight:var(--sl-font-weight-bold);
}
.cell {
    width:calc(100% - 16px);
    padding:8px;
    cursor:default;
    border-bottom:1px solid var(--sl-color-neutral-200);
}


.lang-hidden {
    display:none;
}


#md_careers_form {
    padding:2rem;
    background-color:var(--sl-color-neutral-100);
    color:var(--sl-color-neutral-800);
    position:relative;
    display:block;
    margin:1rem auto;
    border-radius:var(--sl-border-radius-medium);
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.4);

    & div.label {
        margin:0.75rem 0.75rem 0.125rem 0.75rem;
        color:var(--sl-color-neutral-800);
    }

    & sl-input,
    & sl-textarea,
    & sl-select {
        margin:0.75rem;
    }
}

.md-pdfupload {
    width:400px;
    height:518px;
    background-color:var(--sl-color-neutral-0);
    background-image:url("../images/pdf-placeholder.png");
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    border:1px solid var(--sl-color-neutral-300);
    box-shadow:inset var(--sl-shadow-small);
    position:relative;
    margin: 0.125rem 0.75rem 0.75rem 0.75rem;
    overflow:hidden;

    &::after {
        content:"Click or Drag PDF File Here";
        position:absolute;
        left:0px;
        bottom:5px;
        right:0px;
        height:auto;
        text-align:center;
        mix-blend-mode:difference;
        color:var(--sl-color-neutral-200);
        overflow:hidden;
        pointer-events:none;
    }

    & input[type=file] {
        position:absolute;
        top:0px;
        left:0px;
        opacity:0;
        height:100%;
        width:100%;
        cursor:pointer;
    }
    &.focused,
    &:focus-visible,
    &:focus-within {
        background-color:var(--sl-color-success-300);
    }

    & canvas {
        position:absolute;
        top:50%;
        left:50%;
        width:380px;
        height:492px;
        translate:-50% -50%;
        box-shadow: var(--sl-shadow-medium);
    }
}