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

:root {
    font-size: 16px;
    font-family: "Outfit", sans-serif;
    --primary: #0071bc;
    --secondary: #3d9159;
    --text-color: #3b455e;
    --heading-color: #2c323f;
    --page-width: 100vw;
    --side-margin: calc((100vw - var(--page-width)) / -2);
    overflow-x: clip;
    color: var(--text-color);
}


@media (min-width: 992px) {
     :root {
        --page-width: 970px;
        --scrollbarWidth: 17px;
    }
}


@media (max-width: 991px) {
     :root {
        --scrollbarWidth: auto !important;
    }
}


@media (min-width: 1200px) {
     :root {
        --page-width: 1170px;
    }
}

body {
    overflow-x: inherit;
    font-size: inherit !important;
    font-family: inherit !important;
}


/*
--------------------------------------------------------------------------
 Typography 
--------------------------------------------------------------------------
 */

p+p {
    margin-top: .25em;
}

p:empty {
    display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .5em;
    padding: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: var(--heading-color);
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 26px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 22px;
}

h6 {
    font-size: 20px;
}


hr {
    border-top: 1px solid #f2f2f2;
    margin-top: 50px;
    margin-bottom: 50px;
}


/*  Links -------------------

 */

a {
    color: var(--heading-color);
    text-decoration: underline;
    transition: .125s color ease-in-out;
}

a:hover,
a:focus {
    text-decoration: underline;
    color: var(--secondary);
}

.button-link,
input[type="submit"]:not(#mms-main input),
.mobile-login button {
    /* :not exception needed to avoid messing with all sorts of different buttons in the MMS  */
    background: var(--primary);
    padding: .45em 1.6ch;
    display: inline-block;
    color: white;
    border-radius: 5px;
    margin-right: 0px;
    position: relative;
    text-align: center;
    text-shadow: none;
    text-transform: capitalize;
    text-decoration: none;
    font-weight: 500;
    font-size: inherit;
    border: 2px solid var(--primary);
    transition: .125s background ease-in-out, .125s color ease-in-out;
    width: max-content;
}


@media (min-width: 768px) {
    a.button-link,
    input[type="submit"]:not(#mms-main input),
    .mobile-login button {
    }
}

.button-link:not(:last-child) {
    margin-bottom: .5em;
}

.button-link:hover,
.button-link:focus,
input[type="submit"]:not(#mms-main input):hover,
input[type="submit"]:not(#mms-main input):focus,
.mobile-login button:hover,
.mobile-login button:focus {
    text-decoration: none;
    background: var(--secondary);
    border: 2px solid var(--secondary);
    color: #fff;
}

a.button-link+*:not(.button-link, .mobileMenuTrigger) {
    padding-top: 1.5em;
}

*+.button-link {
    margin-top: 1em;
}

li:not(:last-child) .button-link {
    margin-bottom: .75rem;
}


/*
--------------------------------------------------------------------------
 Objects
--------------------------------------------------------------------------
 */

.wrapper {
    /* .wrapper acts as a more symantic stand-in for <container><row><col-md-12></col-md-12></row></container> in sections of this build that don't require stacking columns  */
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    position: relative;
    height: inherit;
    padding-left: 15px;
    padding-right: 15px;
    width: calc(var(--page-width) - 30px);
    width: var(--page-width);
}

.full-width {
    /* Make an element span the width of the viewport */
    position: relative;
    left: var(--side-margin);
    right: var(--side-margin);
    width: calc(100vw + var(--scrollbarWidth));
}

.full-width>.column {
    padding-left: 0;
    padding-right: 0;
}

#gm-canvas .full-width,
#gm-canvas .background-row {
    left: unset;
    right: unset;
    width: unset;
}

.background-row:not(#mycanvas .background-row) {
    padding-block: 2.5rem;
    position: relative;
    left: var(--side-margin);
    right: var(--side-margin);
    display: flex;
    width: calc(100vw + var(--scrollbarWidth));
}

.background-row:not(#mycanvas .background-row)::before {
    background-color: var(--primary);
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    display: block;
}

.background-row:not(#mycanvas .background-row)>.column {
    /* Since element is extended past where the scrollbar is, extra padding is added to make sure it's content is not hidden under the scrollbar */
    padding-right: calc(15px + var(--scrollbarWidth));
}

#subpage-main:has(.background-row:last-child) {
    /* If .background-row is the last row, don't include a gap between main and footer */
    margin-bottom: 0;
    padding-bottom: 0;
}

#subpage-main>.background-row:last-child {
    /* If .background-row is the last row, don't include a gap between main and footer */
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .background-row:not(#mycanvas .background-row)>.col-md-9 {
        width: calc(75% - 15px);
    }
    .background-row:not(#mycanvas .background-row)>.col-md-8 {
        width: calc(66.7% - 15px);
    }
    .background-row:not(#mycanvas .background-row)>.col-md-7 {
        width: calc(58.3% - 15px);
    }
    .background-row:not(#mycanvas .background-row)>.col-md-6 {
        width: calc(50% - 15px);
    }
    .background-row:not(#mycanvas .background-row)>.col-md-5 {
        width: calc(41.7% - 15px);
    }
    .background-row:not(#mycanvas .background-row)>.col-md-4 {
        width: calc(33.3% - 20px);
    }
    .background-row:not(#mycanvas .background-row)>.col-md-3 {
        width: calc(25% - 20px);
    }
    .background-row:not(#mycanvas .background-row)>.col-md-2 {
        width: calc(20% - 20px);
    }
}


@media (min-width: 992px) and (max-width: 1199px) {
    .container,
    .wrapper {
        width: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }
    .full-width,
    .background-row {
        width: 100%;
        right: 0;
        left: 0;
        margin: 0;
    }
}

@media (max-width: 991px) {
    .container,
    .wrapper {
        /* Extra wiggle room at a breakpoint that needs it  */
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }
    .full-width,
    .background-row {
        left: var(--side-margin);
        right: var(--side-margin);
        width: calc(100vw + var(--scrollbarWidth));
        padding-left: 15px;
        padding-right: 15px;
    }
    .background-row:not(#mycanvas .background-row) {
        padding-block: 2rem;
    }
}

@media (max-width: 767px) {
    .background-row:not(#mycanvas .background-row) {
        padding-block: 1rem;
    }
    .container,
    .wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
}




.offscreen {
    /* This class allows an element to be read by a screenreader without appearing in the viewport  */
    position: absolute;
    left: -666vw;
}

@media (min-width: 767px) {
    /*The following styles are meant to give more space to the label column in contact forms that are too narrow for the entire label to be read normally*/
    .col-md-5 form[action="contact_form_resp.php"] .col-sm-2,
    .col-md-4 form[action="contact_form_resp.php"] .col-sm-2,
    .col-md-3 form[action="contact_form_resp.php"] .col-sm-2,
    .col-md-2 form[action="contact_form_resp.php"] .col-sm-2,
    .col-md-1 form[action="contact_form_resp.php"] .col-sm-2 {
        width: 25%;
        padding-right: 1em;
    }
    .col-md-5 form[action="contact_form_resp.php"] .col-sm-10,
    .col-md-4 form[action="contact_form_resp.php"] .col-sm-10,
    .col-md-3 form[action="contact_form_resp.php"] .col-sm-10,
    .col-md-2 form[action="contact_form_resp.php"] .col-sm-10,
    .col-md-1 form[action="contact_form_resp.php"] .col-sm-10 {
        width: 75%;
        padding-left: 0;
    }
    .col-md-5 form[action="contact_form_resp.php"] .col-sm-offset-2,
    .col-md-4 form[action="contact_form_resp.php"] .col-sm-offset-2,
    .col-md-3 form[action="contact_form_resp.php"] .col-sm-offset-2,
    .col-md-2 form[action="contact_form_resp.php"] .col-sm-offset-2,
    .col-md-1 form[action="contact_form_resp.php"] .col-sm-offset-2 {
        margin-left: 25%;
    }
    /*^^Adjusts the form-group placement of the reCAPTCHA iframe and submit buttom to match the new widths from the styles above*/
}

blockquote {
    font-size: inherit;
    border-left-color: var(--primary);
}

blockquote p {
    font-size: 1.05em;
}


/*Styles below are taken from Bootstrap's table style to ensure that tables on content pages are responsive and neat whether Bootstrap classes are added or not. :not added to prevent styling Google Custom Search tables*/

#subpage-main table {
    max-width: 100%;
    border-collapse: collapse;
    color: #212529;
    margin-bottom: 1em;
    font-size: 16px;
    border-bottom: 1px solid #dee2e6;
    margin-top: 2em;
}

#subpage-main thead {
    font-weight: bold;
}

#subpage-main td,
#subpage-main th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
    text-align: inherit;
}

#subpage-main thead th {
    vertical-align: bottom;
    border-top: none;
}

#subpage-main caption {
    color: currentColor;
    text-align: left;
    font-size: 1.375em;
    font-weight: bold;
    padding: 0;
}

#subpage-main tbody tr:hover,
#subpage-main tbody tr:focus {
    color: #212529;
    background-color: rgba(0, 0, 0, .075);
}

@media (max-width: 767px) {
    #subpage-main table {
        font-size: 14px;
    }
    #subpage-main td:first-child,
    #subpage-main th:first-child {
        padding-left: 5px;
    }
    #subpage-main td:last-child,
    #subpage-main th:last-child {
        padding-right: 5px;
    }
}

@media (max-width: 500px) {
    #subpage-main td,
    #subpage-main th {
        padding: 5px 2px;
    }
}

grammarly-btn {
    display: none;
    /*If someone copy/pastes text from Grammarly it will add this invisible button and cause the page to scroll horizontally. This style hides that.*/
}

.ui-widget {
    /* Part of some pages in the MMS, this style tells it not to overwrite the font with Verdana */
    font-family: revert;
}


/* Feed items */

.feed-item {
    padding: .25rem 20px;
    border-radius: 5px;
}

.feed-item h3 {
    font-size: 1.1rem;
}

.feed-item *:not(:last-child) {
    margin-bottom: .5rem;
}


/* Slideshow defaults */

.carousel {
    font-size: 20px;
}

.carousel-control.left,
.carousel-control.right {
    display: none;
}

.caption-text {
    font-size: 28px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.alt-text {
    font-size: 16px;
    color: initial;
    margin-bottom: 10px;
}


/*--end slideshow-defaults---------*/


/*----------Responsive Nivo*/

div[id^=slider-container-FD],
div[id^=slider_FD],
.nivoSlider img {
    max-width: 100% !important;
    height: auto !important;
}


/*----------Nivo Controls*/

.nivo-prevNav,
.nivo-nextNav {
    background-image: none !important;
    width: 25px !important;
    top: 25% !important;
    /*Fallback for browsers that don't support calc*/
    top: calc( 50% - 50px) !important;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 75px;
    font-family: Arial, sans-serif;
    text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
}

.nivo-prevNav:hover,
.nivo-nextNav:hover {
    text-decoration: none;
    color: #ae0e0d;
    text-shadow: none;
}

.nivo-prevNav {
    left: 10px !important;
}

.nivo-nextNav {
    right: 10px !important;
}

.nivo-prevNav:after {
    content: "‹";
}

.nivo-nextNav:after {
    content: "›";
}


/*  Modals ---------------------------------
    ----------------------------------------
 */

.modal-header,
.modal-body {
    padding: .5rem 1rem;
}

.modal-header .close {
    opacity: 1;
    z-index: 1;
    position: relative;
}

.modal h2 {
    font-size: 20px;
    opacity: .9;
}

.modal a {
    display: block;
    margin-bottom: .5em;
}


/*  Login Forms 
*/

.modal input[name="Username"],
.modal input[name="Password"] {
    width: 100%;
    padding-left: .25em;
    padding-right: .25em;
    margin-bottom: 0.5em;
    height: 2em;
    border: 1px solid rgba(68, 68, 68, .5);
}





/*  Mobile Menu-----------------------------
    ----------------------------------------
 */

#mobileMenuWrapper {
    box-shadow: 7px 0 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    left: -120%;
    width: 300px;
    background-color: white;
    transition: left 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000);
    color: #444;
}

#mobileMenuWrapper.open {
    left: 0;
}

#mobile-menu {
    list-style: none;
    overflow-y: auto;
    overflow-x: visible;
    padding: 1em 1.5em;
}

.triggerClose {
    text-align: right;
}

#mobile-menu button {
    border: none;
}

.triggerClose button {
    background: none;
    font-weight: 400;
    margin-bottom: 0.4em;
    padding: 0;
}

#mobileMenuWrapper #mobile-menu a {
    display: inline-block;
    width: 100%;
    margin-bottom: .75em;
    color: var(--heading-color);
    text-decoration: none;
}
#mobileMenuWrapper #mobile-menu a:hover,
#mobileMenuWrapper #mobile-menu a:focus {
    color: var(--secondary);
}

#mobileMenuWrapper .mDropdown {
    display: none;
    list-style: none;
    padding: 0;
    background: none;
}

#mobileMenuWrapper .mDropdown.open {
    display: block;
}

.mDropdown>li>a {
    padding: 0;
}

.mDropdown-parent {
    color: var(--primary);
}

#mobileMenuWrapper .login-item {
    display: none;
}

#mobileMenuWrapper .search-item path {
    fill: var(--secondary);
}

#mobileMenuWrapper .social-list {
    margin-top: 1rem;
}

#mobileMenuWrapper .social-list svg {
}


#mobile-menu .mobile-menu-search {
    margin-bottom: 1em;
}
#mobileMenuWrapper #mobile-menu a.button-link {
    color: #fff;
    margin-top: 0.5em;
    padding: .45em 1.6ch .65em;
}


/*--------------------------------------------------------
    Header
--------------------------------------------------------*/

body>header {
    width: 100%;
    position: relative;
    z-index: 2;
    background: #fff;
    transition: .125s transform ease-in-out;
    padding-top: 1.5rem;
    padding-bottom: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 30px;
}


    @media (min-width: 1200px) {
        body>header.wrapper {
            width: 100%;
            padding-left: 50px;
            padding-right: 50px;
        }
    }
    @media (min-width: 992px) and (max-width: 1199px) {
        body>header.wrapper {
            width: 100%;
            gap: 1rem 15px;
        }
    }
    @media (max-width: 991px) {
        body>header.wrapper {
            width: 100%;
        }
    }
    @media (max-width: 767px) {
        body>header.wrapper {
            gap: 1rem 15px;
        }
    }



.search-item svg {
    height: 1em;
    width: 1em;
}

header>section ul {
    display: flex;
    gap: 2ch;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
}



.login-item button {
    background-color: transparent;
    appearance: none;
    border: none;
    padding: unset;
    text-transform: unset;
    transition: .125s color ease-in-out;
}

header>section a,
.login-item button {
    color: white;
}

.login-item button:hover,
.login-item button:focus,
header>section a:hover,
header>section a:focus {
    color: var(--secondary);
}

header .logo-link svg, 
header .logo-link img {
    max-width: 100%;
    transform: scale(1);
    height: auto;
}
    @media (min-width: 990px) and (max-width: 1099px) {
        header .logo-link svg, 
        header .logo-link img {
            width: 190px;
        }
    }
 


body>header.wrapper > ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style-type: none;
    gap: 0.85em;
}
body>header.wrapper > ul a.button-link {
    margin-bottom: 0;
    padding: .35em 1.55ch;
}
    @media (min-width: 990px) and (max-width: 1099px) {
        body>header.wrapper > ul a.button-link {
            padding: .25em 0.85ch;
        }
    }
     @media (max-width: 520px) {
        body>header.wrapper > ul a.button-link {
            padding: .25em 0.85ch;
            font-weight: 400;
        }
    }
    @media (min-width: 560px) and (max-width: 767px) {
        body>header.wrapper > ul a.button-link.hidden-xs {
            display: block !important;
        }
        #mobileMenuWrapper #mobile-menu a.button-link {
            display: none !important;
        }
    }



/*--------------------------------------------------------
                    Search Bar
--------------------------------------------------------*/

.searchbox {
    width: 600px;
    max-width: 100%;
    color: #808080;
    position: relative;
    padding: 5px 1.5ch;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 18px;
    height: 37px;
    max-height: 37px;
    overflow-y: hidden;
    margin-left: 0px;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0.5em;
}
    
    @media (min-width: 992px) {
        header nav> .searchbox {
            margin: 0 auto 0.5em;
        }
    }
    @media (min-width: 990px) and (max-width: 1200px) {
        .searchbox {
            width: 300px;
        }
    }
    @media (max-width: 991px) {
        header nav> .searchbox {
            width: 200px;;
        }
    }
    @media (max-width: 767px) {
        header nav> .searchbox {
            display: none;
        }
    }



.searchbox ::-webkit-input-placeholder {
    color: #808080;
}

.searchbox :-moz-placeholder {
    /* Firefox 18- */
    color: #808080;
}

.searchbox ::-moz-placeholder {
    /* Firefox 19+ */
    color: #808080;
}

.searchbox :-ms-input-placeholder {
    color: #808080;
}


.search-input {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: none;
    width: 100%;
    padding: inherit;
    background: transparent;
    border-radius: 15px;
    outline: none;
}
.searchbox input[type="submit"]:not(#mms-main input) {
    color: transparent;
    background-color: transparent;
    border: none;
    background-image: url(../images/search-new.svg.php?fc=666666);
    position: absolute;
    right: 0;
    top: -1px;
    bottom: 0;
    width: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px;
    border-radius: 0px;
    margin: 0;
    padding: 10px 20px;
}
.searchbox input[type="submit"]:not(#mms-main input):hover,
.searchbox input[type="submit"]:not(#mms-main input):focus {
    background-color: transparent;
}
    @media (max-width: 767px) {
        .search-button {
            top: 0px;
        }
    }









/* Desktop menu  */

#nav_menu {
    padding: .5em 0;
    position: relative;
    z-index: 1;
}
    @media (max-width: 991px) {
        header>nav #nav_menu {
            display: none !important;
        }
    }


#nav_menu>ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem 2ch;
}

#nav_menu>ul::before,
#nav_menu>ul::after {
    content: none;
}

#nav_menu li {
    position: relative;
}

#nav_menu>ul>li>a {
    transition: color .125s ease-in-out;
    position: relative;
    padding: 5px;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
}


#nav_menu a {
    text-decoration: none;
    background: transparent;
    transition: .125s color ease-in-out;
    color: #4d4d4d;
}

#nav_menu a:hover,
#nav_menu a:focus,
#nav_menu .nav .open>a,
#nav_menu .nav .open>a:focus,
#nav_menu .nav .open>a:hover {
    background: transparent;
    color: var(--secondary);
}

#nav_menu .caret {
    margin-left: .5ch;
}

#nav_menu .dropdown-menu {
    /* Dropdown menu  */
    font-size: 15px;
    padding: .4em 1ch;
    border: none;
    border-radius: 0;
    top: calc(100% + 0.5rem - 10px);
    left: -50%;
    border-top: 0px;
}

    @media (max-width: 767px) {
        #nav_menu .dropdown-menu {
            font-size: 16px;
        }
    }

#nav_menu .dropdown-menu a {
    text-decoration: none;
    background: transparent;
    transition: .125s background ease-in-out, .125s color ease-in-out;
    padding: .35em 0.4em;
}


/* #nav_menu .dropdown-menu a:hover,
#nav_menu .dropdown-menu a:focus {
    background: var(--text-color);
    color: white;
} */

#nav_menu .dropdown-menu:not(.men-level-):not(.men-level-0) {
    top: 0;
}

.search-icon {
    width: 1rem;
    position: relative;
    top: -.125rem;
}
    
    @media (min-width: 990px) and (max-width: 1200px) {
        #nav_menu>ul {
            justify-content: center;
            gap: 0.5rem 0.2ch;
        }
    }
    

    @media (max-width: 900px) {
        #nav_menu>ul {
            gap: 0.5rem 1ch;
        }
        #nav_menu .dropdown-menu {
            left: 0;
        }
    }





/* Mobile menu trigger  */

.mobileMenuTrigger:not(.triggerClose) {
    border: none;
    padding: 0;
    color: var(--primary);
    transition: color .125s ease-in-out;
    display: inline-flex;
    border-radius: 5px;
    background: transparent;
    margin-left: 0;
}


.mobileMenuTrigger:not(.triggerClose):hover,
.mobileMenuTrigger:not(.triggerClose):focus {
    color: var(--secondary);
    outline: none;
}

.mobileMenuTrigger label {
    position: absolute;
    left: -666vw;
}

.mobileMenuTrigger button {
    font-size: 200%;
}

.menu-trigger {
    width: 30px;
}

@media (min-width: 992px) {
    .mobileMenuTrigger:not(.triggerClose) {
        display: none;
    }
}


/* Login modal */

.modal-open #login-modal {
    display: flex;
}

.modal-dialog {
    max-width: 100%;
    font-size: 16px;
    margin: auto;
    width: 300px;
}

.modal-content {
    margin-top: 20px;
    border-radius: 0;
}

.modal-header,
.modal-body {
    padding: .5rem 1rem;
}

.modal-header .close {
    opacity: 1;
    z-index: 1;
    position: relative;
}

.modal h2 {
    font-size: 24px;
    margin-top: 0;
}

.modal-header,
.modal-body {
    padding: 1em 2ch;
}

.modal input[name="Username"],
.modal input[name="Password"] {
    width: 100%;
    padding-left: .25em;
    padding-right: .25em;
    margin-bottom: 0.5em;
    height: 2em;
    border: 1px solid rgba(68, 68, 68, .5);
}

.modal a {
    display: block;
    margin-bottom: .5em;
}


/*
--------------------------------------------------------------------------
 Main
--------------------------------------------------------------------------
 */

main {
    min-height: calc(100vh - 134.19px - 156.8px);
    position: relative;
}

#subpage-main,
#mms-main {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 18px;
}

#subpage-main:has(.background-heading:first-child) {
    padding-top: 0;
}

@media (min-width: 991px) {
    main:not(#mms-main)>.row:not(#slideshow-row):not(.background-heading) {
        display: flex;
        gap: 1rem 30px;
    }
}

main:not(#mms-main) .column {
    position: relative;
}


main:not(#mms-main) .column:not(#slideshow-row .column):not(.details-row .column),
.news-item>div {
}



@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {
    /* As of 9-20-23 support for :has is expected any time in Firefox, the only browser that does not support it. For the meantime, this media query is used to target only Firefox in order to put extra padding for the .button-links that need to be absolutely positioned to the bottom of their .column without covering it's contents that are close to it's bottom */
    main:not(#mms-main) .column:not(#slideshow-row .column),
    .news-item>div {
        padding: 30px 30px 60px;
    }
}

@media (max-width: 991px) {
    main:not(#mms-main) {
        padding: 0 30px;
    }
}

@media (max-width: 767px) {
    main:not(#mms-main) {
        padding: 0 15px;
    }
    main:not(#mms-main) .column:not(#slideshow-row .column):has(.button-link),
    .news-item>div:has(.button-link) {
    }
}

@media (min-width: 767px) {
    #subpage-main .row,
    #homepage-main .row {
        /*These two styles can be tweaked if needed, but they are a handy default for spacing rows (and then columns once the screen hits the col-xs breakpoint on subpages*/
        margin-bottom: 2.5em;
    }
    div[class^="col"]+.col-md-12 {
        margin-top: 2em;
    }
}

@media(max-width: 1200px) {
    #homepage-main article>section,
    #subpage-main {
        padding: 3.5em 0;
    }
}

@media(max-width: 990px) {
    #homepage-main article>section,
    #subpage-main {
        padding: 2.5em 0;
    }
    .col-md-6.col-sm-12+.col-sm-12 {
        margin-top: 30px;
    }
}

@media (max-width: 900px) {
    #subpage-main:not(.full-background),
    #mms-main {
        margin-bottom: 2em;
    }
    main div[id^="section-"] {
        padding: 3.5em 0;
    }
}

@media (max-width: 767px) {
    #homepage-main article>section,
    #subpage-main {
        padding: 1.5em 0;
    }
    #subpage-main [class*="col-md"]+[class*="col-md"] {
        margin-top: 1rem;
    }
    #subpage-main div[class^="col-md"],
    #homepage-main div[class^="col-md"] {
        margin-bottom: 1em;
    }
    #homepage-main article>section {
        padding: 3em 0;
    }
}

@media (max-width: 450px) {
    #homepage-main article>section {
        padding: 2em 0;
    }
}


/*  Home Slideshow  ------------------------
    ----------------------------------------
 */

/*  Home Slideshow  ------------------------
    ----------------------------------------
 */

#slideshow-row.row {
    margin-bottom: 0px;
}
    @media (min-width: 1200px) {
        #slideshow-row.row {
            padding-left: 50px;
            padding-right: 75px;
        }
    }

#slideshow-row .column {
    padding: 0;
}

#slideshow-row .carousel-inner {
    border-radius: 15px;
    border: 1px solid rgba(230,230,230,0.5);
}

#slideshow-row .carousel-indicators {
    bottom: 30px;
    text-align: left;
    left: 0;
    right: unset;
    margin: 0;
    top: auto;
    padding: 0px 3em;
    z-index: 1;
}
#slideshow-row .carousel-indicators li:first-child {
    margin-left: 0px;
}
#slideshow-row .carousel-indicators li {
    width: 12px;
    height: 12px;
    margin: 0;
    margin-left: 4px;
    background: #eaf1f4;
    border: 1px solid var(--primary);
}
#slideshow-row .carousel-indicators li.active {
    width: 12px;
    height: 12px;
    background: var(--primary);
    border: 1px solid var(--primary);
}

#slideshow-row .carousel-caption {
    position: absolute;
    z-index: 100;
    background: transparent;
    left: auto;
    top: 0;
    right: 0px;
    bottom: 0;
    width: 100%;
    text-align: left;
    text-shadow: none;
    margin: 0;
    display: flex;
    align-items: center;
    padding: 0px 3em;
}
    @media (max-width: 991px) {
        #slideshow-row .carousel-caption {
            position: relative;
            background: #fff;
            padding: 1.5em;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
        }
        #slideshow-row .carousel-indicators {
            bottom: 20px;
            padding: 0px 1.5em;
        }
    }

#slideshow-row .carousel-inner .item .carousel-caption:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 1;
    z-index: -1;
    overflow: hidden;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    background-blend-mode: multiply;
    background: linear-gradient(-90deg, transparent 0%, rgb(255, 255, 255));
    background-size: cover;
    background-position: center;
    border-radius: 6px;
}
#slideshow-row .caption-wrapper {
    color: white;
    line-height: 1.1;
    margin-bottom: 2em;
}



#slideshow-row p+p:not(:empty) {
    margin-top: 1rem;
}

@media (max-width: 1100px) {
    #slideshow-row p+p:not(:empty) {
        margin-top: 1rem;
    }
}


#slideshow-row .item img {
    object-fit: cover;
    max-width: 100%;
    width: 100%;
    object-position: center;
    background-position: center;
    background-size: cover;
}

#slideshow-row .caption-text {
    font-size: 40px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: #00293f;
}
#slideshow-row .alt-text {
    color: #000000;
    font-size: 24px;
    font-weight: 400;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.2em 0;
    line-height: 1.35em;
    margin-bottom: 0px;
}
#slideshow-row .button-link {
    background: var(--primary);
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    padding: .15em 1.66ch .2em;
}
#slideshow-row .button-link:hover,
#slideshow-row .button-link:focus {
    background: var(--secondary);
}
   
   @media (min-width: 1240px) {
        #slideshow-row .alt-text {
            width: 60%;
        }
    }
    @media (min-width: 768px) and (max-width: 1199px) {
        #slideshow-row .caption-text {
            font-size: 34px;
        }
        #slideshow-row .alt-text {
            font-size: 20px;
        }
    }
    @media (max-width: 767px) {
        #slideshow-row .caption-text {
            font-size: 30px;
        }
        #slideshow-row .alt-text {
            font-size: 20px;
        }
    }


#homepage-main h1, #homepage-main h2 {
    text-align: center;
}




/* Three Box featured section */
#three-box-wrap:not(#gm-canvas #three-box-wrap) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem 2em;
    margin-bottom: 0;
    text-align: left;
    position: relative;
    top: -1em;
}
#three-box-wrap:not(#gm-canvas #three-box-wrap):before {
    display: none;
}
#three-box-wrap:not(#gm-canvas #three-box-wrap) .column {
    width: 100%;
    background: #fff;
    transition: .125s background ease-in-out, .125s color ease-in-out;
    width: 100%;
    border: 1px solid #f2f2f2;
    border-radius: 15px;
    box-shadow: 0px 1px 10px rgb(0 0 0 / 8%);
    padding: 1.7em 25px 1.8em;
}
#three-box-wrap:not(#gm-canvas #three-box-wrap) .column:has(a:hover),
#three-box-wrap:not(#gm-canvas #three-box-wrap) .column:has(a:focus) {
    background: #eaf1f4;
}
#three-box-wrap:not(#gm-canvas #three-box-wrap) .column svg {
    width: 100px;
    height: 100px;
    margin-bottom: 1.2em;
}
#three-box-wrap:not(#gm-canvas #three-box-wrap) h3 a:before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
    @media (max-width: 1199px) {
        #three-box-wrap:not(#gm-canvas #three-box-wrap) {
            top: 0;
            margin-top: 2em;
            padding-left: 15px;
            padding-right: 15px;
        }
    }

    @media (max-width: 767px) {
        #three-box-wrap:not(#gm-canvas #three-box-wrap) {
            grid-template-columns: repeat(1, 1fr);
            top: 0;
            margin-top: 2em;
        }
        #three-box-wrap:not(#gm-canvas #three-box-wrap) .column {
            margin-bottom: 1em;
        }
    }

#three-box-wrap:not(#gm-canvas #three-box-wrap) h3 a:hover:before,
#three-box-wrap:not(#gm-canvas #three-box-wrap) h3 a:focus:before {
    color: var(--secondary);
}
#three-box-wrap:not(#gm-canvas #three-box-wrap) .column:has(a:hover) svg .cls-1,
#three-box-wrap:not(#gm-canvas #three-box-wrap) .column:has(a:focus) svg .cls-1 {
    fill: var(--secondary);
}




/* Welcome Section */
#welcome-section-wrap.row {
    position: relative;
    text-align: center;
    margin-bottom: 0px;
    padding-top: 50px;
    padding-bottom: 20px;
}

    @media (min-width: 991px) {
        #welcome-section-wrap p {
            width: 58%;
            margin: 0 auto;
        }
    }

#welcome-section-wrap.row .column:not(#gm-canvas #welcome-section-wrap.row .column) {
    position: relative;
}
#welcome-section-wrap.row .column:not(#gm-canvas #welcome-section-wrap.row .column):after {
    position: relative;
    content: "";
    border: 1px solid rgba(240, 237, 237, 0.5);
    width: 100%;
    height: 1px;
    display: block;
    margin-top: 4.5em;
    margin-bottom: 1em;
}




/* Upcoming Events &  Recent News */
#events-outer-wrap:not(#gm-canvas #events-outer-wrap) {
    position: relative;
    text-align: center;
    padding-top: 25px;
    padding-bottom: 45px;
}
#events-outer-wrap:not(#gm-canvas #events-outer-wrap) h2 {
    padding-bottom: 20px;
}

#events-section-wrap:not(#mycanvas #events-section-wrap) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem 30px;
    margin-bottom: 0;
    text-align: left;
}
    @media (max-width: 991px) {
        #events-section-wrap:not(#mycanvas #events-section-wrap) {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 0;
        }
    }

#events-section-wrap:not(#mycanvas #events-section-wrap) h2,
#news-section-wrap:not(#mycanvas #news-section-wrap) > h2 {
    grid-column: 1 / -1;
    margin: 0 auto .5em;
}
#events-section-wrap:not(#mycanvas #events-section-wrap) p,
#events-section-wrap:not(#mycanvas #events-section-wrap) .button-link,
#news-section-wrap:not(#mycanvas #news-section-wrap) > p, 
#news-section-wrap:not(#mycanvas #news-section-wrap) > .button-link {
    grid-column: 1 / -1;
    margin: 0 auto;
}


.events-wrap-item,
.news-wrap-item {
    position: relative;
    background: #fff;
    margin-bottom: 2em;
    transition: .125s background ease-in-out, .125s color ease-in-out;
    width: 100%;
    border: 1px solid #f2f2f2;
    border-radius: 15px;
    box-shadow: 0px 1px 10px rgb(0 0 0 / 8%);
    padding: 1.85em 25px 2.25em;
}
.events-wrap-item {
    padding: 1.85em 25px 2.25em;
}
.events-wrap-item:hover, .events-wrap-item:focus,
.news-wrap-item:hover, .news-wrap-item:focus {
    background: #eaf1f4;
}
.events-wrap-item time {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}
.events-wrap-item time div {
    background: var(--primary);
    padding: 10px;
    border-radius: 5px;
    margin-right: 12px;
}
.events-wrap-item:hover time div,
.events-wrap-item:focus time div {
    background: var(--secondary);
}
.events-wrap-item time img {
    width: 20px;
    height: 20px;
}
.events-wrap-item h3 {
    padding-bottom: 5px;
}
.events-wrap-item a.ev-title-link {
    font-size: 20px;
    font-weight: 700;
}
.events-wrap-item h3 a.ev-title-link:before,
.news-wrap-item a.news-title-link:before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.events-wrap-item:hover a.ev-title-link,
.events-wrap-item:focus a.ev-title-link,
.news-wrap-item:hover a.news-title-link,
.news-wrap-item:focus a.news-title-link {
    color: var(--secondary);
}
.events-wrap-item address {
    margin-bottom: 0px;
}
.events-wrap-item address::before {
    content: 'Location:';
    display: block;
    color: #606a7f;
    font-size: 15px;
    margin-top: 1em;
    padding-bottom: 5px;
}
    @media (max-width: 767px) {
        .events-wrap-item address::before {
            font-size: 16px;
        }
    }
.events-wrap-item address:empty {
    display: none;
}




#news-outer-wrap:not(#gm-canvas #news-outer-wrap) {
    position: relative;
    text-align: center;
    margin-bottom: 0px;
    padding-top: 70px;
    padding-bottom: 80px;
}
#news-outer-wrap:not(#gm-canvas #news-outer-wrap):before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -666vw;
    right: -666vw;
    display: block;
    background-color: #f7f8f9;
    z-index: -1;
}
#news-outer-wrap h2 {
    padding-bottom: 20px;
}

#news-section-wrap:not(#mycanvas #news-section-wrap) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem 30px;
    margin-bottom: 0;
    text-align: left;
}   
    @media (max-width: 991px) {
        #news-section-wrap:not(#mycanvas #news-section-wrap) {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 0rem 30px;
        }
    }
    @media (max-width: 767px) {
        #news-section-wrap:not(#mycanvas #news-section-wrap) {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 0;
        }
    }


.news-wrap-item {
    padding: 2em 25px;
}
.news-wrap-item h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5em;
}
a.news-title-link {
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
}

.news-wrap-item .button-link {
    background: #eaf1f4;
    border: 1px solid var(--primary);
    border-radius: 3px;
    color: var(--primary);
    padding: .13em 1ch .2em;
}
.news-wrap-item .button-link:hover,
.news-wrap-item:hover .button-link,
.news-wrap-item .button-link:focus,
.news-wrap-item:focus .button-link {
    background: var(--secondary);
    border: 1px solid var(--secondary);
    border-radius: 3px;
    color: #fff;
    padding: .13em 1ch .2em;
}






/*  Announcements row ----------------------
    ----------------------------------------
 */


#homepage-main #announcement-row:not(.display) {
    display: none;
}


/*  Introduction row ----------------------
    ----------------------------------------
 */

#introduction-column p {
    font-size: 23px;
    font-weight: bold;
}


/* Event feed */

.event-item {
    display: flex;
    gap: 0.5rem 20px;
    font-size: 20px;
    padding: 1em 0;
}

.events-page-item {
    padding: 1em;
    display: flex;
    gap: 1em;
    flex-direction: column;
    font-size: 18px;
}

.events-page-item>div:first-child {
    display: inherit;
    gap: inherit;
    align-items: center;
    padding-bottom: 1em;
    /* margin-bottom: .5em; */
    border-bottom: 2px solid var(--text-color);
}

.event-item>time,
.events-page-item>div:first-child>time {
    background: var(--primary);
    color: white;
    font-weight: bold;
    font-size: 24px;
    line-height: 1;
    border-radius: 50%;
    min-width: 76px;
    height: 76px;
    padding: calc((76px - 1em) / 2) 0;
    text-align: center;
    width: fit-content;
}

.events-page-item>div:last-of-type>time {
    margin-bottom: .5em;
    font-weight: bold;
}

.event-item h3 {
    font-size: 23px;
    margin-bottom: 5px;
}

.event-item time {
    display: block;
    text-transform: lowercase;
}

.event-item time>span:last-child:not(:empty)::before {
    /* If there is an end time add an em dash between the two spans */
    content: '—';
    display: inline-block;
    margin-right: 0.5ch;
}

.event-item *:empty {
    display: none;
}

#homepage-main .event-item+.event-item {
    border-top: 1px solid var(--primary);
}


/*  CTA row -------------------------------
    ----------------------------------------
 */

#homepage-main #cta-row {
    display: flex;
    gap: 1rem 30px;
    /* flex-wrap: wrap; */
}

#homepage-main #cta-row .column {
    background: url('../images/pattern.webp');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 186px;
    position: relative;
    transition: .125s transform ease-in-out;
}

#homepage-main #cta-row .column:hover,
#homepage-main #cta-row .column:focus {
    transform: scale(1.025);
}

#homepage-main #cta-row a {
    color: white;
    font-size: 36px;
    font-weight: bold;
    max-width: 170px;
    text-align: center;
    line-height: 1.2;
}

#homepage-main #cta-row a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#homepage-main #cta-row a:hover,
#homepage-main #cta-row a:focus {
    text-decoration: none;
}

@media (max-width: 800px) {
    #homepage-main #cta-row .column {
        min-height: 156px;
    }
    #homepage-main #cta-row a {
        max-width: unset;
        font-size: 26px;
    }
}

@media (max-width: 767px) {
    #homepage-main #cta-row {
        flex-direction: column;
    }
}


/*  News row -------------------------------
    ----------------------------------------
 */

main:not(#mms-main) #news-row>.column:not(#slideshow-row .column) {
    padding: 0;
    filter: unset;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(535px, 1fr));
    gap: 1rem 30px;
}

.news-item {
    overflow: hidden;
}

.news-item img {
    height: 235px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.news-item h3 {
    font-size: 23px;
    border-bottom: 3px solid;
    padding-bottom: 0.5rem;
}

.news-item time {
    font-size: 18px;
    opacity: .7;
    margin: 1em 0;
    display: block;
    line-height: 1;
}

@media (max-width: 767px) {
    main:not(#mms-main) #news-row>.column:not(#slideshow-row .column) {
        display: flex;
        flex-direction: column;
    }
}


/*  Banner row------------------------------
    ----------------------------------------
 */


/*  Model row ------------------------------
    ----------------------------------------
 */

.model-list,
.focus-list {
    display: flex;
    list-style: none;
    justify-content: space-around;
    padding: 0;
    gap: 1rem 15px;
    margin-bottom: 2rem;
}

.model-list li,
.focus-list li {
    text-align: center;
    max-width: 160px;
    position: relative;
}

.model-list li+li::before {
    content: '';
    border-bottom: 2px dashed var(--primary);
    display: block;
    width: 50%;
    position: absolute;
    top: 40%;
    right: 140%;
}

.model-list img,
.focus-list img {
    margin: auto;
    min-height: 125px;
    padding: 15px;
}

@media (max-width: 1200px) {
    .model-list li+li::before {
        right: 120%;
    }
}

@media (max-width: 990px) {
    .model-list li+li::before {
        right: 23vw;
        width: 20%;
    }
}

@media (max-width: 767px) {
    .model-list li+li::before {
        content: none;
    }
}

@media (max-width: 600px) {
    .focus-list,
    .model-list {
        flex-direction: column;
        margin: 0 auto 2rem;
        width: fit-content;
    }
}


/*  Subpages -------------------------------
    ----------------------------------------
 */


/* List styles */

.star-list>li {
    list-style-image: url('../images/I100_Icons_InnerStar_Lake_RGB.svg');
}


/* Page titles */

#page-title {
    background-image: url(../images/ATL-City-BG2-e1694113104823.png);
    background-size: cover;
    background-position: center;
    min-height: 290px;
    max-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#page-title::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    opacity: .25;
    z-index: 1;
}

#page-title h1 {
    --shadow-color: rgba(0, 0, 0, .75);
    font-size: 36px;
    margin: 0;
    color: white;
    text-align: center;
    width: fit-content;
    filter: drop-shadow(0px 1px 2px var(--shadow-color));
    border-bottom: 4px solid;
    padding: .25em .5ch;
    position: relative;
    z-index: 2;
}

#page-title:has(h1:empty) {
    display: none;
}



/* Background heading */

.background-heading {
    position: relative;
}

#subpage-main>.background-row:first-child,
#subpage-main>.background-heading:first-child {
    margin-top: 0;
    z-index: 1;
}

#subpage-main .background-heading::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: calc(100% - 260px);
    left: var(--side-margin);
    right: var(--side-margin);
    background: url(../images/pattern.webp);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    z-index: -1;
}

#subpage-main .background-heading h1,
#subpage-main .background-heading h2 {
    text-align: center;
    width: fit-content;
    margin: 1em auto;
    color: white;
}

#subpage-main .background-heading>.column {
    color: white;
    text-align: center;
}

#subpage-main .background-heading+.row {
    margin-top: -3rem;
    z-index: 4;
    position: relative;
}


/* About page */

.board-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    list-style: none;
    gap: 1em 30px;
    padding: 0;
    color: var(--heading-color);
    text-align: left;
}

.board-list li {
    box-shadow: 3px 10px 20px -10px rgba(0, 0, 0, .25);
    overflow: hidden;
    border-radius: 5px;
    background: white;
    display: flex;
    flex-direction: column;
}

.board-list img {
    width: 100% !important;
    height: 175px!important;
    /* !important's needed to prevent someone from not removing width/height attributes when uploading */
    object-fit: cover;
    object-position: center;
}

.board-list li>div {
    padding: 1em;
    font-weight: bold;
    line-height: 1.1;
    display: flex;
    gap: 5px;
    flex-direction: column;
    padding-bottom: 5em;
    font-size: 16px;
    position: relative;
    height: 100%;
}

@media (min-width: 768px) {
    .board-list li>div {
        font-size: 14px;
    }
}

.board-list .name {
    border-bottom: 3px solid;
    padding-bottom: 5px;
    font-size: 18px;
}

.board-list button {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    width: fit-content;
    text-transform: uppercase;
    position: absolute;
    bottom: 1.5em;
    right: 1em;
}


/* Board list modals */

.board-list~.modal .modal-dialog {
    width: 600px;
    color: var(--heading-color);
    text-align: left;
}

@media (min-width: 768px) {
    .board-list~.modal .modal-dialog {
        font-size: 18px;
    }
}

.board-list~.modal .modal-content {
    border-radius: 6px;
}

.board-list~.modal .modal-header {
    border: none;
    padding: 30px 30px 1em;
}

.board-list~.modal .modal-body {
    padding: 0 30px 30px;
}

.board-list~.modal .name,
.board-list~.modal .title {
    font-weight: bold;
}

.board-list~.modal .name {
    font-size: 23px;
    padding-bottom: .5em;
    margin-bottom: .5em;
    border-bottom: 3px solid;
}

.board-list~.modal .title {
    margin-bottom: 1em;
}

#subpage-main .details-row {
    margin: -1rem -30px 1rem;
    font-style: italic;
}

@media (min-width: 768px) {
    #subpage-main .details-row {
        font-size: 14px;
    }
}


/* Events page */

#subpage-main #events-row {
    padding-left: 15px;
    padding-right: 15px;
}

#subpage-main:not(#foo)>#events-row:not(#foo):not(#bar) {
    /* I seriously hate how :not jacks up the specificity of a selector. It should have no effect */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
}

#subpage-main>#events-row::before,
#subpage-main>#events-row::after {
    content: none;
}

#subpage-main #events-row>.column {
    /* Get rid of filter, border-radius and background-color applied to most .columns */
    display: contents;
}

#events-row .event-item {
    filter: drop-shadow(3px 10px 20px rgba(0, 0, 0, .25));
    border-radius: 0.375rem;
    background-color: white;
}


/* Contact row */

#contact-row .wrapper {
    max-width: var(--page-width);
}

#contact-row .wrapper>.row {
    margin-bottom: 0;
}

#subpage-main #contact-row .wrapper>.row>.column {
    color: white;
    background: none;
    filter: unset;
}

#subpage-main #contact-row h2 {
    color: white;
}

#contact-row .grecaptcha-badge,
[action="contact_form_resp.php"] .grecaptcha-badge {
    /* There is a style inside the iframe which can't be overwritten and makes the badge jump around when hovered. Sorry Alphabet. */
    display: none;
}


/* Contact form */

#contact-row form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 30px;
}

#contact-row input {
    background: none;
    border: 0;
    border-bottom: 1px solid white;
    border-radius: 0;
    box-shadow: none;
    padding: 1em;
    height: unset;
    color: white;
    font-size: 18px;
    font-weight: normal;
}

#contact-row input::placeholder {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

#contact-row .col-sm-offset-2,
#contact-row .form-group {
    display: contents;
}

#contact-row .button-link {
    position: relative;
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    font-size: 14px;
    margin: 0;
    width: fit-content;
    grid-row: 2/3;
    grid-column: 2/3;
    height: fit-content;
    margin-top: auto;
}


/* Membership FAQs */

#membership-faqs {
    position: relative;
    z-index: 4;
    margin-top: -30px;
}

#membership-faqs .panel-default,
#membership-faqs .panel-heading,
#membership-faqs .panel-title {
    display: contents;
}

#subpage-main #membership-faqs a {
    display: flex;
    gap: 2ch;
    justify-content: space-between;
    align-items: center;
    color: var(--heading-color);
    line-height: 1.5;
    font-size: 20px;
}

#subpage-main #membership-faqs a::after {
    content: '+';
    font-size: 20px;
    line-height: 1;
    transition: .125s transform ease-in-out;
}

#membership-faqs .panel-body {
    padding: 0;
    padding-top: 1em;
}

#membership-faqs:has(.in) a::after {
    transform: rotate(45deg)
}


/* Contact page */

.icon-wrapper {
    display: grid;
    gap: 1ch;
    align-items: center;
    grid-template-columns: 40px 1fr;
    margin-bottom: 1em;
}

.icon-wrapper img {
    margin: auto;
}

.icon-wrapper address {
    margin: 0;
    line-height: 1.2;
}

#subpage-main #contact-info-column .social-list {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

#contact-info-column .social-list svg {
}

[action="contact_form_resp.php"] [class*="col-"] {
    display: contents;
}


/* Serves row */

#subpage-main #serves-row {
    position: relative;
    padding: 60px 30px;
    margin-bottom: -1em;
}

#subpage-main #serves-row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    background-image: url('../images/atl-map.png');
    background-size: cover;
    display: block;
}

main:not(#mms-main) #serves-row h2 {
    font-size: 25px;
    border: none;
}

#serves-row em {
    font-size: 23px;
}


/*  Grid Page Editor workarounds -----------
----------------------------------------
 */


/*  Footer -------------------
    ----------------------------------------
 */

footer {
    position: relative;
    color: #fff;
    padding: 2.8rem 15px 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 30px;
    font-size: inherit;
    font-family: inherit;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    display: block;
    z-index: -1;
    background: var(--primary);
}

@media (min-width: 991px) {
    .section-wrapper {
        display: contents;
    }
}

@media (min-width: 991px) {
    footer>section:nth-of-type(1),
    #global-section {
        grid-column: 1/3;
    }
    .credit-section {
        grid-column: 3/6;
        text-align: right;
    }
}

#global-section {
    position: relative;
}

#global-section a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


/* Footer elements */

footer h2 {
    color: white;
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

footer address {
    margin: .5rem 0;
}

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

footer a {
    color: #fff;
}
footer a:hover,
footer a:focus {
    text-decoration-thickness: 2px;
    color: #fff;
    transition: .125s text-decoration-thickness ease-in-out;
}

footer p {
    margin: 0;
    line-height: 2em;
}

footer span.footer-privacy {
    border-left: 1px solid #ffffff;
    margin-left: 12px;
    padding-left: 12px;
}



/* Footer links */

.footer-links a {
    display: block;
    width: fit-content;
    position: relative;
    margin-bottom: .25rem;
}

.footer-links a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 2px;
    background: white;
    display: block;
    transition: .125s right ease-in-out;
}

.footer-links a:hover::before,
.footer-links a:focus::before {
    right: 0;
}


/* Footer social list */

.social-list {
    display: flex;
    align-items: center;
    position: relative;
    list-style: none;
    gap: 5px;
    padding: 0;
    margin: 0;
}
.social-list svg {
    width: 30px;
    height: 30px;
}
.social-list svg:hover .cls-1,
.social-list svg:focus .cls-1 {
    fill: #fff;
    transition: .125s fill ease-in-out;
}
.social-list svg:hover .cls-2,
.social-list svg:focus .cls-2 {
    fill: var(--primary);
    transition: .125s fill ease-in-out;
}



@media (max-width: 990px) {
    /* footer {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    } */
    .credit-section {
        margin-top: 1rem;
    }
}

@media (max-width: 767px) {
    footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 50px 0px;
        width: 100%;
    }
    footer p {
        margin-bottom: 1em;
        line-height: 1.15em;
    }
    footer span.footer-privacy {
        display: block;
        border-left: 0px;
        padding-left: 0px;
        margin-left: 0px;
    }
}