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

:root {
    font-size: 18px;
    --page-width: 100vw;
    --teal: #4BC9C4;
    --light-teal: #77D7D3;
    --dark-teal: #126360;
    --blue: #337C9F;
    --dark-blue: #2E4049;
    --yellow: #FEC84D;
    --pink: #FF6D6D;
    --dark-gray: #262728;
    --light-gray: #727272;
    --side-margin: calc((100vw - var(--page-width)) / -2);
    font-family: 'Work Sans', sans-serif;
    overflow-x: clip;
    --header-height: 74px;
    --footer-height: 555px;
}

@media (min-width: 768px) {
     :root {
        --page-width: 750px;
        --page-width: 100%;
    }
}

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

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

body {
    color: var(--dark-blue);
    position: relative;
    max-width: 100%;
    overflow-x: inherit;
}

body,
header,
nav,
footer {
    font-family: inherit !important;
    font-size: inherit !important;
    /*^^ Overwrites mms_styles.css*/
}


/*--------------------------------------------------------
	H1 - H6
--------------------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    margin-bottom: .5em;
    padding: 0;
    font-weight: 800;
    line-height: 1em;
    color: var(--primary);
    font-family: "Shippori Mincho", serif;
}

h1 {
    font-size: 2em;
}

h1.title:empty {
    /*^^Hides the extra margin that is added on pages without a title*/
    display: none;
}

h2 {
    font-size: 1.75em;
}

h2:has(span) {
    text-align: center;
}

h2 span {
    font-size: 35px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: var(--yellow);
    display: block;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.25em;
}

h5 {
    font-size: 1.15em;
}

h6 {
    font-size: 1.1em;
}

@media(max-width: 800px) {
    h1 {
        font-size: calc(2em - 3px);
    }
    h2 {
        font-size: calc(1.75em - 3px);
    }
    h3 {
        font-size: calc(1.5em - 3px);
    }
    h4 {
        font-size: calc(1.25em - 3px);
    }
    h5 {
        font-size: calc(1.15em - 3px);
    }
    h6 {
        font-size: calc(1.1em - 3px);
    }
}

@media(max-width: 400px) {
    h1 {
        font-size: calc(2em - 5px);
    }
    h2 {
        font-size: calc(1.75em - 5px);
    }
    h3 {
        font-size: calc(1.5em - 5px);
    }
    h4 {
        font-size: calc(1.25em - 5px);
    }
    h5 {
        font-size: calc(1.15em - 5px);
    }
    h6 {
        font-size: calc(1.1em - 5px);
    }
}

.heading-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 19px;
}

.heading-wrapper>*,
.heading-wrapper>.button-link:last-child:not(:first-child) {
    margin: 0;
}

p+h1,
p+h2,
p+h3,
p+h4 {
    margin-top: 1.25em;
}


/*--------------------------------------------------------
	LINKS
--------------------------------------------------------*/

a {
    color: var(--teal);
    text-decoration: none;
    transition: .1s ease-in color;
}

a:not(.button-link, footer a):is(:hover, :focus) {
    text-decoration: none;
    color: var(--pink);
}

a:empty {
    display: none;
}

.block-link {
    display: block;
    max-width: fit-content;
    margin-bottom: 1.25em;
}

.button-link,
#login-modal input[type="submit"],
#nav_menu .button-link {
    --background: var(--yellow);
    --color: #333;
    color: var(--color);
    border: none;
    text-transform: uppercase;
    padding: 1em 3ch;
    display: block;
    transition: .125s ease-in-out color, .125s ease-in-out background, .125s outline ease-in-out;
    line-height: 1em;
    text-decoration: none;
    width: fit-content;
    background: var(--background);
    border-radius: 1.5em;
    outline: 1px transparent solid;
    font-size: 18px;
    letter-spacing: -1px;
    font-weight: 500;
    text-align: center;
}

.button-link.white {
    --background: white;
    --color: var(--dark-teal);
}

.button-link.blue {
    --background: #2E4049;
    --color: white;
}

.button-link.navy {
    --background: var(--dark-blue);
    --color: white;
}

.button-link:first-child:not(:last-child) {
    margin-top: 0;
    margin-bottom: 2em;
}

.button-link:last-child:not(:first-child) {
    margin-bottom: 0;
    margin-top: 2em;
}

#login-modal input[type="submit"] {
    margin: 0;
}

:is(.button-link, #nav_menu .button-link, #login-modal input[type="submit"]):not(.navy):is(:hover, :focus) {
    --color: white;
    color: var(--color);
    --background: var(--dark-blue);
    background: var(--background);
    text-decoration: none;
}

:is(.button-link.navy):is(:hover, :focus) {
    --color: white;
    color: var(--color);
    --background: var(--pink);
    background: var(--background);
    text-decoration: none;
}


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


/*----------------------Wrappers----------------------*/

.wrapper,
.wide-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: 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));
    margin-block: 0;
    width: 100vw;
}

.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: 1rem 15px;
    position: relative;
    left: var(--side-margin);
    right: var(--side-margin);
    display: flex;
    width: calc(100vw + var(--scrollbarWidth));
}

.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 (max-width: 767px) {
    .background-row:not(#mycanvas .background-row)>.column {
        font-size: 20px;
    }
}

@media (max-width: 990px) {
    .container,
    .wrapper {
        /* Extra wiggle room at a breakpoint that needs it  */
        width: 100%;
    }
    /* .full-width,
    .background-row {
        left: var(--side-margin);
        right: var(--side-margin);
        width: calc(100vw + var(--scrollbarWidth));
    } */
}


/*----------------------Lists--------------------------*/

#subpage-main ul {
    padding-left: 1em;
    padding-bottom: 1em;
}

#subpage-main li {
    padding-bottom: .25em;
}

@media (max-width: 500px) {
    #subpage-main li {
        padding-bottom: .5em;
    }
}


/*----------------------Tables--------------------------*/

#subpage-main table {
    font-family: 'Roboto', sans-serif;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 990px) {
    #subpage-main table {
        max-width: 100%;
    }
}

@media (max-width: 550px) {
    #subpage-main table {
        font-size: 15px;
        line-height: 1.25em;
    }
}

#subpage-main *+table {
    margin-top: 2em;
}

#subpage-main table+* {
    margin-top: 3em;
}

#subpage-main table caption {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#subpage-main table tr {
    border-left: .35em solid white;
    border-right: .35em solid white;
}

#subpage-main table *+strong {
    margin-top: .75em;
}

#subpage-main table tbody>tr:nth-of-type(even) {
    background: #F6F6F6;
    border-left: .35em solid #F6F6F6;
    border-right: .35em solid #F6F6F6;
}

address {
    margin-bottom: unset;
    /*Overwrites Bootstrap style*/
}


/*--------------------------------------------------------
						Login Modal
--------------------------------------------------------*/

.modal-header {
    /*Applies to any modal on the site*/
    border: none;
}

.close,
.close:hover {
    opacity: 1;
}

.close svg.menu-trigger {
    width: 30px;
    height: 30px;
}

.close svg.menu-trigger line {
    stroke-width: 4px;
}

.close svg.menu-trigger .line-1 {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
}

.close svg.menu-trigger .line-4 {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    transform-origin: right;
}

.close svg.menu-trigger .line-2 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: center;
    transform-origin: center;
}

.close svg.menu-trigger .line-3 {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: center;
    transform-origin: center;
}

#login-modal .modal-dialog {
    max-width: 260px;
    font-size: 16px;
}

#login-modal h2 {
    font-size: 1.4em;
    text-transform: capitalize;
    letter-spacing: -0.4px;
}

#login-modal label {
    position: absolute;
    left: -200vw;
}

#login-modal input[name="Username"],
#login-modal input[name="Password"] {
    width: 100%;
    padding-left: .25em;
    padding-right: .25em;
    margin-bottom: 0.5em;
    height: 2em;
}

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


/*--------------------------------------------------------
						HEADER
--------------------------------------------------------*/


.wide-wrapper {
    width: 100vw;
    /* padding-left: 75px;
    padding-right: 75px; */
}


/* Header top */

.header-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 767px) {
    .header-top {
        justify-content: center;
    }  
}

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

.header-top .header-top-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 30px;
}

@media (max-width: 767px) {
    .header-top .header-top-wrapper {
        justify-content: center;
    }
}

.header-top ul {
    margin: 0;
}

.header-top a {
    color: #003A37;
    font-size: 16px;
}

.header-top a:is(:hover, :focus) {
    color: #003A37;
}

.contact-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0 clamp(2ch, 4vw, 45px);
    padding: 0 15px;
    flex-wrap: wrap;
    font-family: "Montserrat", Sans-serif;
}

@media (min-width: 660px) {
    .contact-list a::before {
        /* display: inline-block; */
        margin-right: 20px;
    }
    .contact-list a[href*="tel:"]::before {
        content: url('../images/phone-icon.svg');
        position: relative;
        bottom: -1px;
    }
    .contact-list a[href*="mailto:"]::before {
        content: url('../images/mail-icon.svg');
    }
}

@media (max-width: 767px) {
    .contact-list {
        display: none;
    }
}

.social-list {
    gap: 1rem 17px;
    padding: 10px 30px;
    /* background: var(--teal); */
    display: flex;
    align-items: center;
    list-style: none;
}

@media (min-width: 767px) and (max-width: 1025px) {
    .social-list {
        padding: 30px 30px; 
    }
}

.social-list svg {
    width: 26px;
    height: 26px;
    margin-bottom: -4px;
    vertical-align: baseline;
}

.social-list svg rect:not(.linkedin-icon rect) {
    display: none;
}

.header-top .rect {
    /* !important to overwrite inline style in SVGs */
    fill: transparent !important;
}

/* new nav in content manager */


header .menu-right {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

header .new-nav-menu ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0 15px;
    list-style-type: none;
    margin-bottom: 0;
}

header .new-nav-menu ul li {
    position: relative;
}

/* animation for menu items */
header .new-nav-menu>ul>li a{
    transition: .4s ease-in-out;
    display: inline-block
}
header .new-nav-menu>ul>li:not(.new-nav-menu>ul>li>ul>li) a:is(:hover, :focus){
    transform: translateY(-8px);
    transition: .4s ease-in-out;
}

header .new-nav-menu ul a {
    color: #000000;
    white-space: nowrap;
    font-size: 14px;
    font-family: "Lato", Sans-serif;
    text-transform: uppercase;
    transition: .5s color ease-in-out;
}

header .new-nav-menu ul a:is(:hover, :focus) {
    color: black;
}

header .new-nav-menu ul>li:not(:last-of-type, ul>li>ul>li)::after {
    content: "|";
    margin-left: 15px;
    color: #DFDFDF;
}

@media (max-width: 1024px) {
    header .new-nav-menu {
        display: none;
    }      
}

/* new drop-down */

header .new-nav-menu>ul>li>ul {
    display: none;
    padding-inline-start: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    left: -15px;
    background: white;
    font-size: inherit;
    min-width: 160px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    border-radius: var(--radius);
    margin-top: 0;
    z-index: 600;
    list-style-type: none;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    transition: .5s background-color ease-in-out;
}

header .new-nav-menu ul>li>ul>li {
    padding: 10px 0;
}

/* show drop-down if hovering */
header .new-nav-menu ul>li:is(:hover, :focus) ul, header .new-nav-menu ul>li ul:is(:hover, :focus){
    display: block;
}

header .new-nav-menu>ul>li>ul>li:is(:hover, :focus) {
    background-color: #3f444b;
    color: white;
}

header .new-nav-menu ul>li>ul>li>a {
    padding: .25em 1.5ch;
    transition: .125s color ease-in-out, .125s background-color ease-in-out;
}

header .new-nav-menu ul>li>ul>li:is(:hover, :focus)>a {
    color: white;  
    transform: translateY(0px) !important;
}





/* old nav */


header nav {
    margin-top: 49px;
    padding-block: 0px;
    display: flex;
    justify-content: space-between;
    gap: 1rem 50px;
    align-items: center;
    padding-right: 0 !important;
    z-index: 500;
}

@media (min-width: 767px) and (max-width: 1025px) {
    header nav {
        margin-top: 89px;
    }
}

header .logo {
    width: 190px;
    padding-block: 10px;
    margin-left: 75px;
    margin-right: 25px;
}

@media (max-width: 1200px) {
    .header-top {
        width: 100vw;
    }
    .wide-wrapper {
        padding-inline: 15px;
    }
    header .logo {
        /* width: 260px; */
    }
}

@media (max-width: 1200px) {
    header .logo {
        margin-left: 25px;
        margin-right: 25px;
    }
}

/* yellow row */

header .yellow-row {
    display: none;
    padding: 10px;
    width: 100%;
    background-color: #FEC84C;
}

@media (max-width: 767px) {
    header .yellow-row {
        display: block;
    }
}

/* Mobile trigger  */

button.mobileMenuTrigger {
    background: rgba(0,0,0,.05);
    border: none;
    color: #33373d;
    transition: .125s color ease-in-out;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

button.mobileMenuTrigger:is(:hover,
 :focus) {
    /* color: var(--pink); */
}

@media (min-width: 1024px) {
    button.mobileMenuTrigger {
        display: none;
    }
}

@media (max-width: 767px) {
    button.mobileMenuTrigger {
        margin-right: 25px;
    }
}


/* Desktop navigation */

#nav_menu {
    /* margin-top: auto;
    margin-bottom: auto; */
    background-color: #FEC84C;
    font-size: 15px;
    font-family: "Roboto", Sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0;
}

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

#nav_menu>ul {
    display: flex;
    align-items: center;
    /* gap: 1rem 4ch; */
    float: none;
}

#nav_menu li:not(:last-of-type) {
    border-right: 1px solid #EBB944;
}

#nav_menu a {
    text-decoration: none;
    transition: .125s background ease-in-out, .125s color ease-in-out;
    padding: 0;
    white-space: nowrap;
    color: #000000;
    font-weight: 500;
    padding: 27px 45px;
}


#nav_menu .button-link {
    --background: var(--blue);
    --color: white;
}

#nav_menu .nav>li>a:not(.button-link):is(:focus,
 :hover) {
    background: none;
    color: #337C9F;
}

#nav_menu .dropdown-menu {
    background: white;
    padding-block: .5em;
    font-size: inherit;
}

#nav_menu .dropdown-menu a {
    padding: .25em 1.5ch;
    transition: .125s color ease-in-out, .125s background-color ease-in-out;
}

#nav_menu .dropdown-menu>li>a:focus,
#nav_menu .dropdown-menu>li>a:hover {
    color: white;
    background-color: var(--teal);
}

@media (max-width: 767px) {
    #nav_menu {
        display: none !important;
    }
}


/* Mobile navigation */

#mobileMenuWrapper {
    position: absolute;
    background: white;
    top: 72px;
    /* bottom: 0; */
    z-index: 1001;
    overflow-y: auto;
    overflow-x: hidden;
    left: -120%;
    width: 100%;
    /* box-shadow: 0 3px 14px -2px rgba(0, 0, 0, 0.4); */
    transition: left .125s ease-in-out;
    --color: var(--dark-blue);
    color: var(--color);
}

#mobileMenuWrapper.open {
    left: 0;
}

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

#mobileMenuWrapper li {
    display: block;
    /* margin-bottom: .7rem; */
    transition: .5s background-color ease-in-out;
    padding: .7rem 1rem 0 1rem;
}

#mobileMenuWrapper li:not(li#triggerClose):is(:hover, :focus) {
    background-color: #3f444b;
}

#mobileMenuWrapper li:has(.open) {
    position: relative;
}

#mobileMenuWrapper li:has(.open)::before {
    content: '';
    position: absolute;
    top: -.5em;
    bottom: -.5em;
    left: -1rem;
    right: -1rem;
    background: var(--teal);
    z-index: -1;
}

#mobileMenuWrapper a {
    display: block;
    font-family: "Lato", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    background-color: transparent;
    text-decoration: none;
    color: var(--color);
    transition: .5s color ease-in-out;
    padding-bottom: .7rem;
}

#mobileMenuWrapper li:not(li#triggerClose):is(:hover, :focus) a, #mobileMenuWrapper a:hover,
#mobileMenuWrapper a:focus {
    color: white;
}

#mobileMenuWrapper .mDropdown {
    display: none;
    padding-top: .7rem;
}

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

#triggerClose {
    font-size: 22px;
    cursor: pointer;
    text-align: right;
    color: var(--color);
}

#mobileMenuWrapper #mobile-menu {
    overflow: auto;
    padding: 0;
}


/* new mobile menu links - from read file*/

#mobileMenuWrapper #mobile-menu ul>li>ul {
    display: none;
}

#mobileMenuWrapper #mobile-menu ul>li>ul>li {
    background-color: white;
    padding-bottom: .7rem;
    padding-top: .7rem;
    margin: 0 -1rem;
}

#mobileMenuWrapper #mobile-menu ul>li>ul>li:is(:hover, :focus) {
    background-color: #3f444b;
}

#mobileMenuWrapper #mobile-menu ul>li>ul>li>a {
    color: black !important;
    padding-bottom: 0;
    text-indent: 10px;
}

#mobileMenuWrapper #mobile-menu ul>li>ul>li:is(:hover, :focus)>a {
    color: white !important;
}


#mobileMenuWrapper #mobile-menu ul>li:is(:hover, :focus)>ul {
    display: block;
}



/* dropdown only */


/* Main */

main {
    font-size: 20px;
    --gap: 3.5rem;
    min-height: calc(100vh - var(--header-height - var(--footer-height)));
}

#subpage-main,
#mms-main {
    margin-top: 2em;
}

main>.row {
    position: relative;
}

main>.row:not(#slideshow-row):not(.background-row):not(.full-width)>.column {
    padding-block: var(--gap);
}

main>.background-row>.column {
    padding-top: calc(var(--gap) * .25);
    padding-bottom: calc(var(--gap) * .25);
}

:not(.background-row)+.background-row {
    margin-top: var(--gap);
}

#mms-main a:before {
    content: unset;
}

#homepage-main .background-row,
#subpage-main .background-row {
    color: white;
}

#homepage-main .background-row:before,
#homepage-main .background-row:after,
#subpage-main .background-row:before,
#subpage-main .background-row:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    display: block;
}

#homepage-main .background-row:before,
#subpage-main .background-row:before {
    background-image: url(../images/circles-background.svg);
    background-size: 60%;
    /* background-position-y: -200px; */
    background-position-x: -430px;
    z-index: -1;
    opacity: 0.1;
}

#homepage-main .background-row:after,
#subpage-main .background-row:after {
    background-color: var(--light-gray);
    z-index: -2;
}

@media (max-width: 1000px) {
    main {
        font-size: 18px;
    }
}

@media (max-width: 600px) {
    main {
        font-size: 16px;
        --gap: 2rem;
    }
}


/* Slideshow row */

#slideshow-row .carousel-caption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    text-align: left;
    text-shadow: none;
    padding: 0;
}

#slideshow-row .carousel-caption::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    background: #333;
    opacity: 60%;
    z-index: -1;
}

#slideshow-row .carousel-control:is(.left,
.right) {
    display: none;
}

#slideshow-row .carousel-indicators {
    left: unset;
    margin: unset;
    right: 30px;
    width: 100%;
    text-align: right;
    top: 1rem;
}

#slideshow-row .caption-wrapper {
    padding: 30px;
    width: 1220px;
    max-width: 100%;
    margin: auto;
    line-height: 1.1;
    font-size: clamp(30px, 5vw, 64px);
    letter-spacing: -.025em;
}

#slideshow-row .caption-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 1em;
    font-weight: 800;
    margin-bottom: .5em;
}

#slideshow-row .alt-text {
    font-size: .625em;
}

#slideshow-row .button-link {
    margin-top: 2em;
}

#slideshow-row img {
    width: 100%;
}

@media (max-width: 1200px) {
    #slideshow-row .button-link {
        margin-top: 1em;
    }
}

@media (max-width: 990px) {
    #slideshow-row .button-link {
        margin-top: 15px;
    }
}

@media (max-width: 767px) {
    #slideshow-row img {
        min-height: 50vh;
        object-fit: cover;
    }
}

@media (max-width: 500px) {
    #slideshow-row :is(.caption-text,
    .alt-text,
    .button-link) {
        font-size: 16px;
        margin-block: 3px;
    }
    #slideshow-row :is( .button-link) {
        margin-top: 1rem;
    }
}


/* CTA row */

#cta-row {
    --gap: 0;
}

.cta-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
    margin-top: -1rem;
}

@media (min-width: 991px) {
    .cta-list:not(#mycanvas .cta-list) {
        margin-top: -6rem;
    }
}

.cta-list li {
    display: flex;
    flex-direction: column;
    color: var(--dark-teal);
    padding: 2.5rem 1.75rem;
}

.cta-list li:first-child {
    background: var(--light-teal);
}

.cta-list li:nth-child(2) {
    background: var(--dark-blue);
}

.cta-list li:nth-child(3) {
    padding: 0;
}

.cta-list h2 {
    font-size: 34px;
}

.cta-list li:nth-child(2) :is(h2,
p) {
    color: white;
}

.cta-list li:nth-child(2) .button-link:is(:hover,
 :focus) {
    outline: 1px solid currentColor;
}

.cta-list li:nth-child(3) iframe {
    width: 100%;
    height: 100%;
}

@media (max-width: 500px) {
    .cta-list {
        margin-top: 0;
    }
}


/* Mission row */

#mission-row>.column:not(#mycanvas *) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(485px, 1fr));
    gap: 1rem 30px;
    margin-bottom: var(--gap);
    padding-block: var(--gap);
    padding-left: calc((var(--side-margin)* -1) + 15px);
    padding-right: 30px;
    padding-right: calc(15px + var(--scrollbarWidth));
}

.vision-section {
    margin-top: 2rem;
}

#mission-row h2 {
    position: relative;
}

#mission-row h2::before {
    position: absolute;
    left: -2.5ch;
    opacity: 0.8;
}

#mission-row .mission-section h2::before {
    content: url(../images/award-icon.svg);
    left: -2.3ch;
}

.vision-section h2::before {
    content: url(../images/chart-icon.svg);
}

#mission-row .photo-list {
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 15px;
    margin: auto;
}

@media (max-width: 1100px) {
    #mission-row h2:is(.mission-section h2,
    .vision-section h2)::before {
        position: relative;
        left: 0;
        opacity: 0.8;
    }
}

@media (max-width: 990px) {
    #mission-row {
        left: unset;
        right: unset;
        width: 100%;
    }
    #mission-row>.column:not(#mycanvas *) {
        padding-inline: 15px;
    }
}

@media (min-width: 801px) {
    #mission-row .photo-list li {
        display: flex;
        align-items: flex-end;
        grid-column: 2/3;
    }
    #mission-row .photo-list li:first-child {
        grid-row: 1/3;
        grid-column: 1/2;
        padding-bottom: 1rem;
    }
}

@media (max-width: 800px) {
    #mission-row .photo-list {
        grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
    }
    /* #mission-row .photo-list li {
        margin: auto;
    } */
}

@media (max-width: 767px) {
    #mission-row section {
        max-width: calc(100vw - 30px);
    }
}

@media (max-width: 500px) {
    #mission-row .photo-list {
        grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
        grid-template-columns: unset;
        margin: unset;
    }
}


/* Join row */

#join-row {
    position: relative;
}

#homepage-main #join-row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    background: url('../images/background-image.png');
    z-index: -1;
    display: block;
}

#homepage-main #join-row>.column {
    --gap: 6rem;
    padding-block: var(--gap);
}

#homepage-main #join-row :is(h2,
p) {
    color: white;
}

:is(#join-row,
#featured-row) .button-link:is(:hover,
 :focus) {
    outline: 1px solid white;
}


/* Team row */

.board-list,
.board-list ul {
    list-style: none;
    padding: 0;
}

.board-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 1rem 15px;
    text-align: center;
    overflow-y: clip;
}

.board-list>li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75em;
}

.board-list ul {
    display: flex;
    gap: 10px;
}

.profile-item {
    background: white;
}

.committees-item {
    position: relative;
    padding: 1rem;
    /* align-self: center; */
    background: var(--teal);
    grid-row: 1 / 3;
    grid-column: 5;
    justify-content: center;
}

.board-list * {
    /* Remove margin so gap can be handled through flex */
    margin: 0 !important;
}

.board-list h3 {
    font-size: 24px;
}

.board-list p {
    font-weight: 500;
}

.hand-background {
    background: var(--dark-blue);
    padding: 18px;
    border-radius: 50%;
}

@media (max-width: 1200px) {
    .committees-item {
        grid-row: unset;
        grid-column: 1 / -1;
        order: 1;
    }
}

@media (max-width: 767px) {
    .board-list {
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    }
    .board-list h3 {
        font-size: 18px;
    }
}

@media (max-width: 650px) {
    .board-list {
        grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    }
    .board-list h3 {
        font-size: 1rem;
    }
}


/* Featured row */

#homepage-main #featured-row>.column {
    overflow-y: clip;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); */
    background: var(--teal);
}

.navy-section {
    color: white;
    grid-column: span 2;
    padding: 2rem 3rem;
    position: relative;
    background: var(--dark-blue);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#featured-row img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    min-height: 100%;
}

#featured-row>.column>img:nth-child(2) {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
}

.teal-section {
    color: white;
    background: var(--teal);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.tag-list {
    list-style: none;
    padding: 0;
    display: flex;
    gap: .75rem;
    flex-direction: column;
}

.tag-list li {
    background: var(--dark-teal);
    padding: 5px 2ch;
    border-radius: calc(10px + .5em);
    width: fit-content;
    /* min-width: 180px; */
    text-align: center;
}

@media (max-width: 990px) {
    #homepage-main #featured-row>.column {
        grid-template-columns: repeat(auto-fill, minmax(295px, 1fr));
    }
    .navy-section {
        grid-column: 1/-1;
    }
    #featured-row img:nth-of-type(3),
    #featured-row img:nth-of-type(4) {
        /* Hide photos other than group photo of 7 and woman holding flowers with women by her side */
        display: none;
    }
}

@media (max-width: 767px) {
    #featured-row>.column>*:is(section,
    img) {
        grid-column: 1 / -1;
    }
    #featured-row img:nth-of-type(2) {
        width: 100%;
        max-height: 40vh;
        object-fit: cover;
        object-position: top;
    }
    .navy-section,
    .teal-section {
        padding-inline: 15px;
    }
}


/* Testimonial row */

.testimonial-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-columns: repeat(auto-fill, minmax(365px, 1fr));
    gap: 1rem 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.testimonial-list li {
    background: #ECF1F0;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    color: #727272;
    align-items: center;
    line-height: 1.2;
}

.testimonial-list section {
    position: relative;
}

@media (min-width: 991px) {
    .testimonial-list section::after {
        content: '“';
        font-size: 130px;
        position: absolute;
        right: 1rem;
        color: #D8D8D8;
        top: -.75rem;
        line-height: 1;
        font-family: 'Shippori Mincho', serif;
    }
}

.testimonial-list h3 {
    font-size: 25px;
    margin-bottom: 0;
    color: var(--dark-blue);
    position: relative;
    z-index: 1;
}

.testimonial-list .title {
    display: block;
    margin-bottom: .5em;
}

.testimonial-list p:last-child {
    margin: 0;
}

@media (max-width: 600px) {
    .testimonial-list li {
        flex-direction: column;
    }
}


/* Stats row */

#homepage-main #stats-row ul {
    list-style: none;
}

.stats-list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    padding-bottom: 2rem;
    border-bottom: 1px solid #D0D0D0;
    margin-bottom: 2rem;
    padding-left: 0;
    gap: 1rem;
}

.stats-list li {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding-inline: 30px;
    line-height: 1.1;
}

.stats-list .number {
    font-family: 'Shippori Mincho', serif;
    font-size: 60px;
    line-height: .75;
    font-weight: 800;
}

.stats-list .detail {
    color: #727272;
}

.sponsors-list {
    padding: 0;
    display: flex;
    gap: 1rem;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .stats-list {
        gap: 2rem;
    }
}


/* Events row */

#events-row h2 {
    /* text-transform: unset; */
    max-width: 500px;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(395px, 1fr));
    gap: 1rem 30px;
}

.event-item.featured {
    grid-column: 1 / 2;
    grid-row-end: -1;
    display: flex;
    flex-direction: column;
}

.featured img {
    width: 100%;
}

.regular-events {
    /* Grab all style properties from .events-grid */
    display: inherit;
    grid-template-columns: inherit;
    gap: inherit;
}

.event-item {
    line-height: 1.2;
    position: relative;
}

.event-item:not(.featured) {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.event-item h3 {
    font-size: 25px;
}

.event-item h3 a {
    color: var(--dark-blue);
}

.event-item h3 a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.event-item time:not(.location-time time) {
    /* Event date */
    background: var(--dark-blue);
    color: white;
    font-size: 25px;
    font-family: 'Shippori Mincho', setif;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 2px;
    padding: 13px;
}

.event-item:not(.featured) .day {
    font-size: 40px;
}

.featured time:not(.location-time time) {
    opacity: 0.8;
    background: var(--teal);
    position: absolute;
}

.featured .location-time {
    padding-block: 1em;
    border-bottom: 1px solid #c7c7c7;
    margin-bottom: 1em;
    display: flex;
    gap: .5rem 2ch;
}

.location-time .time {
    display: inline-flex;
}

.location-time .time:empty {
    display: none;
}

.location-time .time::before {
    content: url('../images/clock-icon.svg');
    display: inline-block;
    margin-right: .75ch;
}

.featured .location {
    opacity: .75;
}

@media (max-width: 500px) {
    .event-item {
        width: calc(100% - 60px);
    }
}


/* @media only screen and (max-width: 500px) and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .event-item {
        width: calc(100% - 60px);
       
    }
} */


/* Newsletter/Blog row */

#newsletter-blog-row>.column {
    padding-bottom: var(--gap);
}

#newsletter-blog-row h2:has(span) {
    text-align: left;
}

#newsletter-blog-row h2 span {
    font-family: "Sue Ellen Francisco", cursive;
    color: var(--dark-blue);
}

#newsletter-blog-row:not(#mycanvas #newsletter-blog-row) {
    display: flex;
    flex-wrap: wrap;
}

#newsletter-blog-row>.column {
    position: relative;
    padding-inline: 30px;
    padding-block: var(--gap);
}

@media (min-width: 991px) {
    #newsletter-blog-row>.column {
        padding-inline: 100px;
    }
}

#newsletter-column::before,
#blog-column::before {
    position: absolute;
    /* display: block; */
    content: '';
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: 0;
    background: var(--yellow);
    z-index: -1;
}

#blog-column::before {
    left: 0;
    right: var(--side-margin);
    background: var(--teal);
}


/* Newsletter sign up */

#homepage-main #contact-form {
    display: grid;
    gap: 0 15px;
    grid-template-columns: repeat(2, 1fr);
}

#homepage-main #contact-form :is(.form-group,
div) {
    /* display: contents; */
}

#homepage-main #contact-form label:not([for=contactCaptcha]) {
    /* display: none; */
}

#homepage-main #contact-form .form-group:has(.button-link),
#homepage-main #contact-form div:has([name="security_code"]) {
    display: contents;
}

#homepage-main #contact-form :is( [for="contactCaptcha"],
[name="security_code"],
.col-sm-10:has(.button-link),
[name="code"]+p) {
    /* Make "* required", captcha text, captcha text input, send button and captcha text instructions fill 2 columns */
    grid-column: 1/-1;
}

#contact-form .form-group:has([style="font-size: 10px; font-style: italic;"]) {
    align-self: flex-end;
}

#contact-form .form-group:has([style="font-size: 10px; font-style: italic;"]) div {
    display: contents;
}

#homepage-main #contact-form .form-group:has([for="contactCaptcha"]) {
    grid-column: 1/-1;
    display: flex;
    flex-wrap: wrap;
    gap: inherit;
    align-items: center;
}

#homepage-main #contact-form .form-group:has([for="contactCaptcha"]) input {
    max-width: calc(100% - 15px - 100px);
}

#homepage-main #contact-form .col-sm-offset-2 {
    margin-left: 0;
    padding: 0;
}


/*--------------------------------------------------------
				CSS Styles for Inner Pages
--------------------------------------------------------*/


/*----------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: "›";
}


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

footer {
    color: white;
    position: relative;
    margin-top: 4em;
}

#homepage-main+footer {
    margin-top: 0;
}

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

footer>section {
    padding: 80px 25px;
    display: flex;
    justify-content: space-around;
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fill, minmax(325px, 1fr)); */
    /* grid-template-columns: repeat(2, 1fr); */
    gap: 50px;
}

@media (max-width: 811px) {
    footer>section {
        flex-direction: column;
        gap: 4rem 30px;
    }

    footer>section div {
        order: 3;
    }

    footer>section ul:first-of-type {
        order: 2;
    }
}

@media (min-width: 700px)  and (max-width: 811px) {
    footer>section {
        padding: 80px 80px;
    }
}

@media (max-width: 700px) {
    footer>section {
        /* padding: 80px 50px; */
    }
}



footer .logo-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

footer .logo-link {
    margin-bottom: 25px;
}

footer a {
    transition: .125s color ease-in-out;
    color: #046bd2;
}

footer a:is(:hover, :focus) {
    color: #046bd2;
    text-decoration: none;
}

footer .social-list {
    background: none;
    padding: 0;
}

footer .social-list a {
    /* padding: .75em; */
    /* border-radius: 50%;
    background: #384C56; */
    transition: .125s background ease-in-out;
    color: white;
}

footer .social-list a:is(:hover,
 :focus) {
    /* background: #FF6D6D; */
    color: black;
}

footer .social-list svg {
    color: white;
}

footer .social-list rect:not(.linkedin-icon rect) {
    display: none;
}



.footer-links {
    /* background: #384C56; */
    /* padding: 2em; */
    /* margin-top: 2em; */
    align-self: flex-start;
}

@media (min-width: 1201px) {
    .footer-links {
        grid-column: 2 / -1;
    }
}

footer ul.footer-links {
    display: flex;
    gap: .8rem 30px;
    /* gap: 1rem 60px; */
    justify-content: space-between;
    /* justify-content: flex-start; */
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 300;
}

.footer-links h2 {
    font-size: 25px;
    font-weight: 600;
    margin-left: -20px;
}

.footer-links a {
    color: white;
}

.footer-links:last-of-type {
    margin-left: 25px;
}

.footer-links:last-of-type li:nth-child(3) {
    text-indent: -17px;
    margin-left: 17px;
}

.footer-links:last-of-type li:nth-child(2)::before {
    content: url('../images/write-icon.svg');
    display: inline-block;
    position: relative;
    left: -15px;
    width: 1em;
    height: 1em;
}

.footer-links:last-of-type li:nth-child(3)::before {
    content: url('../images/mail-icon-2.svg');
    display: inline-block;
    position: relative;
    left: 0px;
    width: 1em;
    height: 1em;
}

.footer-links:last-of-type li:last-of-type::before {
    content: url('../images/check-icon.svg');
    display: inline-block;
    position: relative;
    left: -15px;
    width: 1em;
    height: 1em;
}

@media (max-width: 701px) {
    .footer-links {
        padding-left: 25px !important;
    }
}


footer .credits {
    text-align: center;
    padding: 15px 2rem;
    position: relative;
    background-color: #77D7D3;
}

footer .credits::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    border-top: 1px solid #465A64;
}

footer .credits p:first-of-type {
    font-family: "Poppins", Sans-serif;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 50px;
    color: #2E2E2E;
 }

footer .credits p {
    color: #000000;
    margin-bottom: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1;
}




.footer-links [href*="mailto:"] {
    /* Shorten the long email address text */
    /* word-break: break-all; */
    /* display: block; */
    /* inline-size: 20ch; */
    /* hyphens: manual; */
}


/*--------------------------------------------------------
						MMS Styling
--------------------------------------------------------*/

#mms-main *[face] {
    font-family: inherit;
    font-size: inherit;
}

#mms-main *[style*="erdana"],
#mms-main *[font-family*="erdana"],

/*^^Targets both elements with Verdana and verdana spec'd*/

#mms-main div,
#mms-main span:not([class^="fa"]),

/*Allows the Font Awesome icons in the Grid Editor to show*/

#mms-main td,
#mms-main tr,
#mms-main table,
#mms-main input,
#mms-main textarea,
#mms-main label
/*^^Styles are meant to overwrite the MMS styles that set everything to Verdana*/

{
    font-family: inherit !important;
}


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

#mycanvas a {
    text-decoration: none;
}

#mycanvas a::before {
    position: initial;
    bottom: initial;
    left: initial;
    right: initial;
    background: initial;
    height: initial;
    transition: initial;
    display: initial;
    z-index: initial;
}


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

@media (min-width: 1100px) {
    #home-whos-attending {
        display: block;
    }
    #home-main #home-whos-attending>.row {
        display: flex;
    }
    #home-main #home-whos-attending>.row>.col-md-6 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

@media (max-width: 1100px) {
    #home-whos-attending .col-md-6 {
        width: 100%;
    }
}

#attending-sponsors-list {
    list-style: none;
}

attending-sponsors-list {
    list-style: none;
}