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

:root {
    --page-width: 100vw;
    --red: #DB0007;
    --yellow: #FFBC0D;
    --dark-red: #8F0F13;
    --text: #000000;
    --gray: rgba(0, 0, 0, .6);
    --light-gray: #F4F4F4;
    --radius: 20px;
    font-size: 20px;
    --side-margin: calc((100vw - var(--page-width)) / -2);
    font-family: "Source Sans 3", sans-serif;
    overflow-x: clip;
}

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

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

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

* {
    scroll-margin-top: var(--header-height);
}

.skip-link {
    position: absolute;
    left: -100vw;
    padding: 5px;
}

.skip-link:focus {
    left: 0;
}

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

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

@media (max-width: 990px) {
     :root {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
     :root {
        font-size: 14px;
    }
}


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

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    margin-bottom: .5em;
    padding: 0;
    font-weight: 800;
    line-height: 1em;
    /* text-transform: uppercase; */
    color: var(--primary);
    font-family: "Montserrat", sans-serif;
}

h1,
h2 {
    font-size: 38px;
    display: flex;
    gap: .5ch;
    align-items: center;
}

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

#homepage-main h1 {
    text-transform: none;
}

#slideshow-row h1::before,
#slideshow-row h2::before {
    content: url(../images/updates_icon.svg) / "";
    bottom: -.35em;
    pointer-events: none;
}

#news-column h2::before {
    content: url(../images/wots_icon.svg) / "";
    pointer-events: none;
}

#benefits-row h2::before {
    content: url(../images/MemeberBenefits_icon.svg) / "";
    pointer-events: none;
}

#events-column h2::before,
#upcoming-row h1::before,
#upcoming-row>.column:first-child h2::before {
    content: url(../images/calendar_icon.svg) / "";
    pointer-events: none;
}

#spotlight-row h2::before {
    content: url(../images/spotlight_icon.svg) / "";
    pointer-events: none;
}

#wots-column h1::before,
.wots-title::before,
#word-on-the-street-column h2::before {
    content: url(../images/updates_icon.svg) / "";
    pointer-events: none;
}

#past-row h2::before {
    content: url(../images/pastevent_icon.svg) / "";
    pointer-events: none;
}

h3 {
    font-size: 22px;
}

h4,
h5,
h6 {
    font-size: 1rem;
}

@media(max-width: 767px) {
     :root {
        font-size: 18px;
    }
    h1,
    h2 {
        font-size: 34px;
    }
}

@media(max-width: 550px) {
    h1,
    h2 {
        font-size: 26px;
    }
    #slideshow-row h1::before,
    #news-column h2::before,
    #benefits-row h2::before,
    #events-column h2::before,
    #spotlight-row h2::before {
        bottom: -.6em;
    }
}

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


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

a {
    color: inherit;
    text-decoration: none;
    transition: .125s color ease-in-out;
}

a:is(:hover, :focus) {
    color: var(--red);
}

:is(#subpage-main, #feeds-main) a:is(:hover, :focus) {
    /* Needed to create more contrast now that all subpages have a yellow background */
    color: var(--dark-red);
}

main a:not(.arrow-link)[target="_blank"]::after {
    content: url('../images/external-link-icon.svg') / "Open in new window";
    display: inline-block;
    margin-inline: 5px;
    pointer-events: none;
}

a:is(footer a,
.simple-button-plugin):not(.arrow-link)[target="_blank"]::after {
    content: url('../images/external-link-icon-white.svg') / "Open in new window";
    display: inline-block;
    margin-inline: 5px;
    pointer-events: none;
}

#homepage-main a:not(.button-link):not(.arrow-link):not(.carousel-control),
#subpage-main a:not(.button-link):not(.arrow-link) {
    text-decoration-color: var(--red) !important;
    text-decoration: underline;
}

a:empty {
    display: none;
}

.arrow-link {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    transition: .125s color ease-in-out;
    white-space: nowrap;
    grid-column: 1 / -1;
    width: fit-content;
}

.arrow-link::after {
    content: url('../images/arrow_icon.svg') / "";
    margin-left: 2px;
    display: inline-block;
    pointer-events: none;
}

.arrow-link:is(:focus,
 :hover) {
    color: var(--red);
    text-decoration: none;
}

.button-link,
#login-modal input[type="submit"],
.addl-text {
    color: var(--text);
    border: none;
    text-transform: capitalize;
    font-weight: 700;
    padding: .75em 2ch;
    display: block;
    width: fit-content;
    margin: 1.25em 0;
    transition: .125s background ease-in-out, .125s color ease-in-out;
    line-height: 1;
    text-decoration: none;
    background-color: var(--yellow);
    border-radius: .3rem;
    white-space: nowrap;
}

:is(.button-link,
.addl-text):first-child {
    margin-top: 0;
}

:is(.button-link,
.addl-text):last-child {
    margin-bottom: 0;
}

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

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

.button-link:before {
    content: none;
}


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

.offscreen {
    position: absolute;
    left: -200vw;
}


/* Wrappers*/

.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: 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 {
    background: transparent !important;
    font-size: 25px;
    color: white;
    text-align: center;
    font-weight: bold;
    max-width: 1200px;
    margin: auto;
    line-height: 1.3;
}

.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 */

nav ul,
#home-main ul,
footer ul {
    -webkit-padding-start: 0px;
    -moz-padding-start: 0px;
    -ms-padding-start: 0px;
    list-style: none;
}

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

.three-column-grid {
    display: grid;
    gap: 1rem 20px;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
}

ul.three-column-grid {
    list-style: none;
    padding: 0;
    margin: 0;
}

@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;
}


/* Forms */

.form-control:focus {
    /* Increased focus color requested by TMS */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .9);
}

.form-control::placeholder {
    /* Increase contrast per TMS */
    color: #666;
}


/*Feed items */

[class*="item"] img[src=""] {
    /* Don't display a broken image if no image has been added to a feed item */
    display: none;
}

:is(.event-item,
.spotlight-item,
.wots-item) {
    box-shadow: 4px 4px 24px -8px #00000040;
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.horizontal.spotlight-item {
    display: grid;
    grid-template-columns: 300px 1fr;
}

.event-item {
    max-width: calc(100vw - 30px);
}

#events-column .event-item,
#past-row .event-item,
#spotlight-row .spotlight-item {
    /* Vertically displayed event items (and also news items now that we've switched the Spotlight/Word on the Street items 12-24) */
    flex-direction: column;
}

:is(.event-item,
.wots-item) img {
    /* Not .spotlight-item */
    margin: auto;
    max-width: 40%;
}

.spotlight-item img {
    width: 100%;
    object-fit: cover;
    max-height: 300px;
    object-position: top;
}

.horizontal.spotlight-item img {
    height: 100%;
    max-height: unset;
}

:is(.event-item,
.wots-item,
.spotlight-item)>div {
    padding: 25px 20px 26px;
    width: 100%;
}

.horizontal.spotlight-item>div {
    padding-top: 47px;
    width: 100%;
}

:is(.event-item,
.wots-item,
.horizontal.spotlight-item) h3,
.spotlight-list .interviewee {
    font-size: 27px;
    margin: 0;
    text-transform: none;
    font-weight: 700;
}

.spotlight-item h3 {
    font-size: 32px;
    margin-bottom: 10px;
}

[class*="-item"] time {
    font-size: 12px;
    color: var(--gray);
    line-height: 1;
}

.board-meetings-item time {
    all: unset;
}

.horizontal.spotlight-item time {
    font-size: 18px;
    display: block;
    margin-bottom: 6px;
    margin-top: 3px;
}

[class*="-item"] time span+span {
    display: inline-block;
    margin-left: .75ch;
    padding-left: .75ch;
    border-left: 1px solid var(--gray);
}

:is(.event-item,
.wots-item,
.horizontal.spotlight-item,
.spotlight-list) .button-link {
    border: 3px solid var(--yellow);
    background: white;
}

:is(.event-item,
.wots-item,
.horizontal.spotlight-item,
.spotlight-list) .button-link:is(:hover,
:focus) {
    border: 3px solid var(--yellow);
    background: var(--yellow);
    color: var(--text);
}

:is(.news-item,
.updates-news-item) h3 {
    font-size: 27px;
    color: var(--red);
}

#news-column h3,
#in-the-news-column h3 {
    margin-bottom: 0;
    text-transform: unset;
    font-weight: 700;
}

#news-column .news-item,
#in-the-news-column .in-the-news-item {
    margin-bottom: 20px;
}

.in-the-news-item {
    display: flex;
    gap: 20px;
    align-items: center;
}

.in-the-news-item img {
    width: 75px;
}

:is(.news-item,
.updates-news-item) h3 a {
    text-decoration: none;
}

.board-meetings-item {
    margin-top: 1em;
    line-height: 1;
    font-weight: 700;
}

.board-meetings-item:first-of-type {
    margin-top: 1.5em;
}

.board-meetings-item a,
.horizontal-news-item a {
    color: var(--red);
}

.horizontal-news-item {
    font-weight: 700;
}

.horizontal-news-item time {
    display: block;
}

@media (max-width: 990px) {
     :is(.event-item,
    .spotlight-item,
    .wots-item,
    .horizontal.spotlight-item) {
        flex-direction: column;
    }
    .horizontal.spotlight-item {
        display: flex;
    }
     :is(.event-item,
    .spotlight-item,
    .wots-item,
    .horizontal.spotlight-item) img {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
     :is(.news-item,
    .updates-news-item) h3 {
        font-size: 22px;
    }
}


/* Cards */

.card,
.spotlight-list>li {
    box-shadow: 4px 4px 24px -8px #00000040;
    background: white;
    border-radius: var(--radius);
    padding: 25px 20px 26px;
    height: 100%;
    position: relative;
}

#subpage-main .row:has(.card) {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 15px;
}

#subpage-main .row:has(.card)::before,
#subpage-main .row:has(.card)::after {
    content: none;
}

#subpage-main .row:has(.card)>.column {
    padding-inline: 0;
}

#subpage-main .row:has(.card)>.column:empty {
    display: none;
}

@media (min-width: 1201px) {
    #subpage-main .row:has(.card) .col-md-4 {
        width: calc(33.3% - 15px);
    }
    #subpage-main .row:has(.card) .col-md-6 {
        width: calc(50% - 15px);
    }
}

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

@media (min-width: 992px) {
    #subpage-main .row:has(.card)>.col-md-3 {
        width: calc(25% - 15px);
    }
}


/* Slideshow styles */

.carousel-control:is(.left,
.right):not(slideshow-controls a) {
    /* Default slideshow style, not what is shown on either version of the homepage */
    font-size: 70px;
    opacity: 1;
    text-decoration: none !important;
    transition: .125s color ease-in-out;
}

.carousel-control:is(.left:hover,
.right:hover):not(slideshow-controls a) {
    /* Default slideshow style, not what is shown on either version of the homepage */
    color: var(--yellow);
}

.carousel-indicators:not(#slideshow-row .carousel-indicators) {
    /* Indicators on slideshows other than the homepage slideshow */
    display: none;
}

#slideshow-row .item .slide-wrap {
    /* .slide-wrap is generated through JS in footer.php to wrap contents of .item so flexbox can be used for positioning without messing up .carousel's use of display: none/block */
    background: white;
    border-radius: var(--radius);
    justify-content: space-between;
    overflow: hidden;
    /* opacity: 0; */
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
}

#slideshow-row .item a {
    display: contents;
}

#slideshow-row .carousel-caption {
    /* Reset all of the styles BS piles on the caption */
    all: revert;
    padding: 15px 60px;
}

#slideshow-row .caption-text {
    font-size: 39px;
    font-weight: 800;
    margin-bottom: 5px;
    line-height: 1;
}

#slideshow-row .caption-text::before {
    content: none;
}

#slideshow-row .alt-text,
.spotlight-item {
    line-height: 1.3;
    font-size: 1rem;
}

#slideshow-row .item :is(:hover,
 :focus) :is(.caption-text,
.alt-text) {
    color: var(--text);
}

#slideshow-row .item>img {
    order: 2;
    max-width: 50%;
}

slideshow-controls {
    --size: 14.15px;
    /* border: 1px solid black; */
    display: flex;
    justify-content: space-between;
    max-width: fit-content;
    margin-inline: auto;
    gap: var(--size);
    margin-top: 26px;
}

slideshow-controls>.carousel-control:is(.left,
.right),
slideshow-controls>.carousel-indicators {
    all: revert;
    padding: 0;
    margin: 0;
}

slideshow-controls>.carousel-control:is(.left,
.right) {
    text-decoration: none;
    position: relative;
    color: transparent;
}

slideshow-controls>.carousel-control.left::before {
    content: url('../images/left-arrow.svg') / "";
    position: absolute;
    top: 0;
    right: 0;
}

slideshow-controls>.carousel-control.right::before {
    content: url('../images/right-arrow.svg') / "";
    position: absolute;
    top: 0;
    left: 0;
}

slideshow-controls>.carousel-control.left:is(:hover,
 :focus)::before {
    content: url('../images/left-arrow-red.svg') / "";
}

slideshow-controls>.carousel-control.right:is(:hover,
 :focus)::before {
    content: url('../images/right-arrow-red.svg') / "";
}

#slideshow-row .carousel-indicators {
    display: flex;
    gap: 20px;
    margin-top: calc(var(--size) / 2);
}

#slideshow-row .carousel-indicators>li {
    border-radius: 0;
    transform: rotate(45deg);
    width: var(--size);
    height: var(--size);
    margin: 0;
    background: white;
    border: none;
}

#slideshow-row .carousel-indicators>.active {
    background: var(--red);
}

@media (max-width:1200px) {
    /* The slideshow, spotlight items and upcoming event items all share the same look */
    #slideshow-row .carousel-caption,
    .spotlight-item>div,
    #upcoming-row .event-item>div {
        padding-inline: 45px;
    }
    #slideshow-row .alt-text,
    .spotlight-item,
    #upcoming-row .event-item>div {
        font-size: 18px;
    }
    #slideshow-row .caption-text,
    .spotlight-item h3,
    #upcoming-row .event-item h3 {
        font-size: 30px;
    }
}

@media (max-width: 992px) {
    #slideshow-row .item .slide-wrap {
        flex-direction: column;
    }
    #slideshow-row .item>img,
    .spotlight-item>img {
        max-width: 320px;
    }
    #slideshow-row .carousel-caption,
    .spotlight-item>div,
    #news-sidebar-column>section {
        padding-inline: 32px;
    }
    #slideshow-row .caption-text,
    .spotlight-item h3 {
        font-size: 28px;
    }
    #slideshow-row .caption-text,
    .spotlight-item h3 {
        font-size: 22px;
    }
    #slideshow-row .alt-text,
    .spotlight-item {
        font-size: 16px;
    }
    #slideshow-row .addl-text,
    .spotlight-item .button-link {
        margin-top: 0;
    }
    #slideshow-row .item.active,
    .spotlight-item {
        flex-wrap: wrap;
    }
    #slideshow-row .item img,
    .spotlight-item>img {
        max-width: 100%;
        width: 100%;
        max-height: 50vh;
        order: unset;
        object-fit: cover;
    }
}

@media (max-width: 767px) {}

@media (max-width: 550px) {
    #slideshow-row .carousel-caption {
        padding-inline: 19px;
    }
}


/*Misc. Objects */

.script-row:not(#mycanvas .script-row) {
    /* Allows scripts to be added via the Grid Editor without displaying the padding, etc that would be included on the published page */
    display: none;
}

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

.links-list {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem 30px;
    align-items: center;
    margin: 0;
    flex-wrap: wrap;
}

.links-list:not(:first-child) {
    margin-top: 2rem;
}

.links-list:not(:last-child) {
    margin-bottom: 2rem;
}

.title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 1rem 30px;
    flex-wrap: wrap;
    grid-column: 1 / -1;
}

.title-wrapper :is(h1,
h2,
h3,
h4) {
    margin-bottom: 0;
}

.heading-wrapper {
    /* Like .title-wrapper, but she only uses this on the BOD Only page where spacing is really tight */
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1rem 15px;
    align-items: center;
    line-height: 1;
    margin-bottom: 11px;
}

.heading-wrapper h3 {
    margin: 0;
}

@media (min-width: 599px) {
    .title-wrapper :is(h1,
    h2,
    h3,
    h4) {
        white-space: nowrap;
    }
}

@media (max-width: 550px) {
    /* Change position of "View all" to bottom of column. This is seen on the homepage for the slideshow-row and spotlight-row */
    .column:has(.title-wrapper) {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .title-wrapper {
        display: contents;
    }
    .title-wrapper :is(h1,
    h2) {
        /* Put back the margin-bottom that was previously assigned to .title-wrapper */
        margin-bottom: .5em;
    }
    .title-wrapper .arrow-link {
        order: 99;
        /* Make the number large enough that it will be the last time in the section */
    }
}


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


/* Logged in/out invisibility */

#logged-out .logged-out-hide,
#logged-in .logged-in-hide {
    display: none;
}


/*--------------------------------------------------------
						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 */

header.wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
    padding-block: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

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

#logged-out header.wrapper {
    /* Don't include sticky header on unlogged-in site */
    position: relative;
}

header .logo {
    width: 153px;
    /* This can be reverted when anniversary logo is removed */
    width: 200px;
}

.login-list {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem 15px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
    margin-bottom: -1px;
    flex-wrap: wrap;
}

@media (min-width: 991px) {
    .login-list>li:not(:last-child) {
        position: relative;
        padding-right: 15px;
    }
    .login-list>li:not(:last-child)::after {
        content: '';
        display: block;
        border-right: 3px solid black;
        position: absolute;
        top: -2px;
        bottom: -2px;
        right: 0;
    }
}

#logged-out button.mobileMenuTrigger {
    /* Don't let unlogged in people access the menu */
    display: none;
}

.login-list .trigger-item {
    display: none;
}

.login-list button {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    line-height: 1;
}

.login-list a:not(:is(:hover,
 :focus)),
.login-list button {
    color: var(--gray);
}

.login-list a:not(:is(:hover,
 :focus))[href="https://mms.msuppliernetwork.org/members/newmem/registration.php?orgcode=MDSN"] {
    /* https://mmsusersupport.com/users/request_detail.php?rid=348532220 note: 179 */
    color: black;
}

button.mobileMenuTrigger {
    background: none;
    border: none;
    margin-left: auto;
    color: var(--dark-red);
}

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

@media (max-width: 767px) {
    header.wrapper {
        /* font-size: 16px; */
        padding-block: 32px;
    }
    header .logo {
        width: 144px;
    }
    .login-list {
        gap: 1rem 15px;
    }
    .login-list .trigger-item:not(#logged-out .trigger-item) {
        display: block;
        order: 100;
    }
}

@media (max-width: 550px) {
    header.wrapper {
        /* font-size: 12px; */
        padding-block: 1rem;
    }
    .login-list {
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .login-list .button-link {
        padding-inline: 1.5ch;
    }
}


/* Navigation */

header nav {
    display: flex;
}

#nav_menu {
    padding: 0;
}

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

#nav_menu>ul {
    display: flex;
    justify-content: space-between;
    gap: 1rem 30px;
    /* Overwrite BS defaults */
    float: none;
    margin: 0;
    align-items: flex-start;
}

#nav_menu a {
    font-weight: 700;
    text-decoration: none;
    transition: .125s color ease-in-out;
    font-family: "Montserrat", sans-serif;
}

#nav_menu>.nav>li>a {
    font-size: 24px;
    padding: 0;
    position: relative;
    line-height: 1;
    white-space: nowrap;
}


/* Italize the last element in the third menu page/item */

#nav_menu>.nav>.dropdown:nth-child(3)>ul>li:last-child>a {
    font-style: italic;
}

#nav_menu a:is(a:hover,
a:focus) {
    color: #212121;
    ;
}

#nav_menu>.nav>li>a::before {
    --size: 9px;
    content: '';
    position: absolute;
    bottom: calc(var(--size) * -1);
    left: 0;
    right: 0;
    height: var(--size);
    background: var(--red);
    opacity: 0;
    transition: .125s opacity ease-in-out;
    z-index: -1;
}

#nav_menu>.nav>li>a:is(a:hover,
a:focus)::before {
    opacity: 1;
}

#nav_menu>.nav>li>a:focus,
#nav_menu>.nav>li>a:hover {
    /* Overwrite BS defaults */
    background: unset;
}

#nav_menu .nav .open>a,
#nav_menu .nav .open>a:focus,
#nav_menu .nav .open>a:hover {
    transition: .125s background ease-in-out;
    background-color: var(--primary);
    border: none;
}

#nav_menu .caret {
    position: absolute;
    color: transparent;
    bottom: 1em;
}

#nav_menu .dropdown-submenu .caret {
    bottom: unset;
    top: -1px;
}

#nav_menu .caret::after {
    content: url(../images/dropdown-arrow.svg) / "";
    pointer-events: none;
}

#nav_menu li:has(.caret) {
    /* Adjust width for absolutely positioned caret */
    padding-right: 15px;
}

#nav_menu .dropdown-menu {
    top: calc(100% + 9px);
    border: none;
    font-size: 1rem;
}

#nav_menu .dropdown-menu:is(.men-level-1,
.men-level-2) {
    top: -7px;
    margin-left: 15px;
}

#nav_menu .dropdown-menu>li {
    position: relative;
}

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

@media (max-width:990px) {
    #nav_menu .home-link {
        display: none;
    }
}

@media (max-width:1200px) {
    #nav_menu>ul {
        column-gap: 30px;
    }
    #nav_menu>.nav>li>a {
        font-size: inherit;
    }
}

@media (max-width:550px) {
    #nav_menu>.nav>li>a {
        font-size: 14px;
    }
}


/* Site originally had no Mobile Navigation per design from outside designers, but this was abandoned by Ilana during Content Population */

#mobileMenuWrapper {
    position: fixed;
    background: white;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: -200vw;
    overflow-y: auto;
    overflow-x: hidden;
    width: 300px;
    transition: .125s left ease-in-out;
    padding: .5rem 2ch;
    box-shadow: 7px 0 5px rgba(0, 0, 0, 0.1);
    display: none;
}

#mobileMenuWrapper.open {
    left: 0;
    display: block;
}

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

#mobile-menu {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: 20px;
}

.triggerClose {
    display: block;
    margin-left: auto;
}

.triggerClose button {
    background: none;
    border: none;
    font-size: 2em;
    line-height: 1;
}

.mDropdown {
    display: none;
}

.mDropdown.open {
    display: block;
}

#mobile-menu>li>a {
    font-weight: 700;
}

#mobile-menu .caret {
    border-top-color: var(--red);
}

.mDropdown a {
    font-size: 16px;
}

@media (max-width: 767px) {
    body:has(.mobileMenuTrigger) #nav_menu {
        display: none;
    }
}


/* Search */

.search-section {
    position: relative;
    font-size: 22px;
    display: flex;
    justify-content: center;
    padding: 1rem;
    z-index: 1;
}

.search-section::before {
    /* Additional 15px needed to compensate for the padding added by .wrapper on the containing element <header> */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--side-margin) - 15px);
    right: calc(var(--side-margin) - 15px);
    z-index: -1;
    background: var(--red);
    background-image: url('../images/searchSection_BG.png');
}

.searchbox {
    position: relative;
    --size: 17.5px;
}

#logged-out .searchbox {
    visibility: hidden;
}

.searchbox .search-input {
    padding: .5em 2ch;
    padding-left: calc(2ch + (var(--size)));
    border: none;
    border-radius: .75em;
    font-size: 1rem;
    width: 507px;
    max-width: 100%;
}

.searchbox .search-button {
    background: url(../images/search-new.svg.php?fc=000);
    background-size: 120%;
    height: var(--size);
    width: var(--size);
    position: absolute;
    left: calc(var(--size) / 1.5);
    top: calc(50% - (var(--size) / 2));
    color: transparent;
    border: none;
    outline: none;
}

@media (max-width: 767px) {
    .search-section {
        padding: 19px 15px;
    }
    .searchbox .search-input {
        width: 404px;
    }
}

@media (max-width: 550px) {
    .search-section {
        padding-block: 7px;
    }
    .searchbox .search-input {
        width: 232px;
    }
}


/* Main */

main {
    --gap: 90px;
}

main>.row {
    position: relative;
    padding-block: var(--gap);
    /* padding-top: var(--gap); */
}

#gm-canvas>.row {
    position: relative;
}

main:is(#subpage-main,
#mms-main)>.row {
    padding-block: calc(var(--gap) / 4);
}

main:is(#subpage-main,
#mms-main)>.row:first-child {
    padding-top: var(--gap);
}

main:is(#subpage-main,
#mms-main)>.row:last-child {
    padding-bottom: var(--gap);
}

@media (max-width: 767px) {
    main {
        --gap: 45px;
    }
}

@media (max-width: 550px) {
    main {
        --gap: 24px;
    }
}


/* Homepage: Slideshow row */

#slideshow-row {
    position: relative;
    --red: #9C0005;
    /* Darker red for contrast on yellow background */
}

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

#slideshow-row .arrow-link::after {
    content: url(../images/arrow_icon-darker-red.svg) / "";
    pointer-events: none;
}


/* Homepage: Benefits row */

.benefits-list {
    padding: 2rem;
    background: var(--light-gray);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: 1rem 30px;
    list-style: none;
    border-radius: var(--radius);
}

.benefits-list h3 {
    text-transform: capitalize;
}

.benefits-list h3::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background: var(--yellow);
    border-radius: 50%;
    margin-bottom: 0.5em;
    font-size: 22px;
}


/* Homepage - Logged in */


/* Events and News row */

#homepage-main #events-and-news-row {
    display: flex;
    gap: 1rem 30px;
}

#events-and-news-row::before,
#events-and-news-row::after {
    content: none;
}

#events-column {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 1rem 30px;
    height: fit-content;
    /* Height property needed to prevent display:flex; from stretching the height of this column to match #updates-column */
    /* container-name: events-container;
    container-type: inline-size; */
}

#mycanvas #events-column {
    display: block;
}

#events-column:has(.event-item:nth-of-type(1):is(:nth-last-child(2))) {
    /* If the events column has only 1 item do this */
    grid-template-columns: repeat(auto-fill, minmax(565px, 1fr));
}

#events-column:has(.event-item:nth-of-type(2):is(:nth-last-child(2))) {
    /* If the events column has only 2 items do this */
    grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
}

#events-column:has(.event-item:nth-of-type(3):is(:nth-last-child(2))) {
    /* If the events column has only 3 items do this */
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
}

#events-column.col-md-8:has(.event-item:nth-of-type(2):is(:nth-last-child(2))) {
    /* If the events column is 2/3's the width of .containter and has only 3 items do this */
    grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
}

#events-column h2,
#events-column .arrow-link {
    grid-column: 1 / -1;
}

#news-column {
    position: relative;
}

@media (min-width: 991px) {
    #news-column::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -15px;
        border-left: 1px solid lightgray;
    }
}

#news-column p {
    margin: 0;
}

@media(max-width: 990px) {
    #homepage-main #events-and-news-row {
        flex-direction: column;
        gap: 72px;
    }
}


/* Homepage: Spotlight row */

#spotlight-row::before,
#past-photos-row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    display: block;
    background: var(--light-gray);
}

#mycanvas #spotlight-row::before,
#mycanvas #past-photos-row::before {
    /* Grid editor fix */
    left: 0;
    right: 0;
}

@media (min-width: 991px) {
    #spotlight-row {
        display: flex;
    }
    #spotlight-row>.column,
    #spotlight-row .spotlight-item div {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    #spotlight-row .spotlight-item {
        flex-grow: 1;
    }
    #spotlight-row .spotlight-item .button-link {
        margin-top: auto;
    }
}

#spotlight-row h2 {
    font-size: 28px;
}

#spotlight-row .arrow-link {
    margin-top: 1rem;
}

@media (max-width: 990px) {
    #spotlight-row .column+.column {
        margin-top: 72px;
    }
}


/* Subpage: Events page */

#upcoming-row,
#word-on-the-street-page {
    display: flex;
    gap: 1rem 30px;
}

#mycanvas #upcoming-row,
#mycanvas #word-on-the-street-page {
    display: block;
}

#upcoming-row {
    padding-bottom: 0;
    padding-inline: 15px;
}

#upcoming-row::before,
#upcoming-row::after,
#word-on-the-street-page::before,
#word-on-the-street-page::after {
    content: none;
}

#upcoming-row>.column:first-child,
#wots-column,
#word-on-the-street-page>.column:first-child {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

#upcoming-row .title-wrapper,
#wots-column h1 {
    /* Adjust for gap added to margin */
    margin-bottom: calc(28px - 1.6rem);
    grid-column: 1 / -1;
}

#board-meetings-column {
    position: relative;
    padding-block: calc(var(--gap) / 2);
}


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

@media (min-width: 991px) {
    #upcoming-row>.column,
    #news-sidebar-column {
        padding-inline: 0;
    }
    #upcoming-row>#board-meetings-column {
        padding-left: 30px;
        padding-block: 0;
        border-left: 2px solid white;
    }
    /* #board-meetings-column::before {
        top: calc(var(--gap) * -1);
        bottom: calc(var(--gap) * -1);
        left: 0;
    } */
}

:not(#mycanvas) #past-row>.column:has(.event-item) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: 1rem 20px;
}

.past-events-list,
.past-events-list>li {
    display: contents;
}

:is(.past-events-list .event-item,
#past-photos-row) img {
    /* This is not from a feed, so images can be any size */
    max-width: 100%;
    width: 100% !important;
    margin: unset;
    aspect-ratio: 367 / 206;
    object-fit: cover;
}

#past-row .event-item>div {
    padding-top: 50px;
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#past-row .event-item:has(img[src*="http"])>div {
    /* If there is an image, less padding-top */
    padding-top: 25px;
}

#past-row .button-link {
    margin-top: auto;
}

#past-photos-row h2::before {
    content: url(../images/past-events-icon.svg) / "";
    pointer-events: none;
}

#past-photos-row .three-column-grid {
    margin-inline: auto;
}

#past-photos-row img {
    overflow: hidden;
    border-radius: calc(var(--radius) / 2);
}

@media(max-width: 990px) {
    #upcoming-row,
    #word-on-the-street-page {
        flex-direction: column;
        gap: 72px;
    }
}


/* Subpage: Word on the Street page */

#word-on-the-street-page .title-wrapper {
    margin-bottom: -6px;
}

#news-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    justify-content: space-between;
    /* margin-top: calc((var(--gap)* -.5)); 
        Removed per Ilana on 2-25-25 call
    */
}

#mycanvas #news-sidebar-column {
    display: block;
}

#news-sidebar-column>section {
    --inner-gap: 64px;
    display: flex;
    flex-direction: column;
    gap: var(--inner-gap);
    background: white;
    border-radius: var(--radius);
    padding-block: calc(var(--gap)* .5);
    padding-inline: 20px;
}

#news-sidebar-column :is(h2,
h3) {
    margin: 0;
}

@media (min-width: 991px) {
    #mcdonalds-in-the-news-section {
        /* Per message #276 on #290167 */
        margin-top: 85px;
    }
}

:is(#mcdonalds-in-the-news-section,
#rmhc-section) {
    line-height: 1.1;
}

:is(#mcdonalds-in-the-news-section,
#rmhc-section) :is(h2,
h3)+* {
    /* Makes up difference in gap between all items and gap between heading the first item */
    /* margin-top: calc(var(--inner-gap) * -.5); */
}

:is(#mcdonalds-in-the-news-section,
#rmhc-section) .title {
    display: block;
    font-size: 22px;
}

#rmhc-section {
    padding-top: calc(var(--gap) / 2);
    border-top: 1px solid var(--light-gray);
}

#rmhc-section a:not(:hover) {
    color: var(--text);
}

#rmhc-section time {
    display: none;
}

:is(#mcdonalds-in-the-news-section,
#rmhc-section)>* {
    margin: 0;
}

@supports (display: block) {
    /* Separated to easily reverse if needed */
    #news-sidebar-column>section {
        --inner-gap: 1.6rem;
    }
     :is(#mcdonalds-in-the-news-section,
    #rmhc-section) :is(h2,
    h3)+* {
        /* If the above style gets pulled, make this style with margin-top uncommented */
    }
    #news-sidebar-column>section>h3 {
        font-size: 32px;
        @media (max-width: 550px) {
            font-size: 26px;
        }
    }
}

@media (max-width: 990px) {
    #news-sidebar-column {
        /* Make up for the padding applied to the row containing this div */
        padding-block: var(--gap);
        margin-bottom: calc(var(--gap)* -1);
    }
    #news-sidebar-column>section {
        --gap: 40px;
    }
}

@media (max-width: 767px) {
    #news-sidebar-column>section {
        --gap: 24px;
    }
}


/* Subpage: Events details page */

#event-header {
    display: flex;
    gap: 1rem 50px;
    margin-top: var(--gap);
    align-items: flex-start;
}

#event-header h1 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 1em;
}

#event-header h2 {
    text-transform: unset;
}

.event-details {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.event-details li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 1ch;
    align-items: center;
}

.event-details li::before {
    content: '';
    display: inline-block;
    margin: auto;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-size: cover;
}

.event-details .event-location::before {
    background-image: url('../images/location_icon.svg');
    height: 38px;
    width: 32px;
    pointer-events: none;
}

.event-date::before {
    background-image: url('../images/event_icon.svg');
    pointer-events: none;
}

.event-time::before {
    background-image: url('../images/time_icon.svg');
    pointer-events: none;
}

#event-header img {
    display: block;
    width: 370px;
    height: auto;
    border-radius: calc(var(--radius) / 2);
    max-width: 100%;
}

#event-description {
    margin-top: 30px;
    margin-bottom: var(--gap);
}

@media (max-width: 990px) {
    #event-header {
        flex-direction: column;
    }
    #event-header img {
        order: -1;
        width: 100%;
    }
    .event-details li::before {
        width: 26px;
        height: 26px;
    }
    .event-details .event-location::before {
        height: 31px;
    }
}


/* Subpage: News page */

#wots-row {
    display: flex;
    gap: var(--gap) 15px;
}

#wots-row::before,
#wots-row::after {
    content: none;
}

.wots-item img {
    min-width: 40%;
    max-width: 100%;
    object-fit: contain;
    height: 100%;
}

#in-the-news-column {
    position: relative;
    /* JS added on the page to wrap the McDonalds In the News and RMHC News sections */
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    gap: var(--gap);
}

@media (min-width: 991px) {
    #in-the-news-column {
        padding-inline: 30px;
    }
}

#in-the-news-column::before {
    content: '';
    position: absolute;
    top: calc(var(--gap)* -1);
    bottom: calc(var(--gap)* -1);
    left: 0;
    right: calc(var(--side-margin) - 15px);
    background: var(--light-gray);
    z-index: -1;
}

.in-the-news-section {
    position: relative;
}

@media (max-width: 990px) {
    #wots-row {
        flex-direction: column;
    }
    #wots-column {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(335px, 1fr));
    }
    .wots-item {
        flex-direction: column;
    }
    #in-the-news-column {
        padding-top: var(--gap);
    }
    #in-the-news-column::before {
        top: 0;
        left: calc(var(--side-margin) - 15px);
    }
    .in-the-news-section::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(var(--gap)* -.5);
        border-bottom: 1px solid #d6d6d6;
    }
}


/* Subpage: News details page */

#news-header {
    margin-top: var(--gap);
}

#news-header img {
    display: block;
    max-width: 100%;
    height: auto !important;
    border-radius: calc(var(--radius) / 2);
    margin-bottom: 37px;
}

#news-description {
    margin-bottom: var(--gap);
}

#news-description h1 {
    text-transform: unset;
    max-width: 767px;
}

#news-description .news-date {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 5px;
}


/* Subpage: Spotlight Interviews page */

.spotlight-heading::before {
    content: url(../images/spotlight_icon.svg) / "";
    pointer-events: none;
}

:not(#mycanvas) .spotlight-list {
    /* Don't affect the page when view in the Grid Editor so admins can more easily click to add a new list item */
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 1rem 30px;
}

.spotlight-list li {
    overflow: clip;
    padding: 0;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.spotlight-list img {
    height: 310px !important;
    width: 100% !important;
    /* Overwrite inline style from editor */
    object-fit: cover;
    object-position: top;
}

.spotlight-list [src="https://msuppliernetwork.org/photos/Sue_Fangmann_02142024102250.JPG"] {
    object-position: center;
}

.spotlight-list li>div {
    padding: 25px 20px 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.interviewee {
    text-transform: uppercase;
}

.spotlight-list .button-link {
    margin-top: auto;
}

@media (max-width: 800px) {
    .spotlight-list {
        grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    }
}


/* Subpage: Spotlight Interviews page */

.board-heading::before {
    content: url(../images/MemeberBenefits_icon.svg) / "";
    pointer-events: none;
}

@media (min-width: 768px) {
    .bod .title {
        font-size: 12px;
    }
}

.bod .interviewee {
    text-transform: uppercase;
}

.bod p {
    color: #737373;
    font-weight: 400;
}

.bod .arrow-link {
    margin-top: 1rem;
    color: var(--red);
}

.bod .arrow-link:is(:hover,
 :focus) {
    color: var(--dark-red);
}

img:is([src="https://msuppliernetwork.org/photos/Mike_G_01032024141518_05062024011747.JPEG"],
[src="https://msuppliernetwork.org/photos/Amy3_12282022162352_05062024014022.JPEG"],
[src="https://msuppliernetwork.org/photos/Kathie_12282022152441_05062024014136.JPEG"],
[src="https://msuppliernetwork.org/photos/Franzen-Keith-191015-0208-fave_EG-fave-final-crop_01112023100220_05062024014554.JPEG"],
[src="https://msuppliernetwork.org/photos/39388_06122019091917_05062024015027.JPG"]) {
    object-position: center;
}


/* Subpage: Network News and Notes  */

.recipients-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    gap: 1rem 30px;
    justify-content: center;
    padding-block: .5rem;
}

.recipients-list li {
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    font-size: 16px;
}

.recipients-list img {
    width: 150px !important;
    height: auto !important;
    /* Overwrite CMS inline styles */
    object-fit: cover;
    margin-bottom: calc(.5rem - 5px);
}

.recipients-list p {
    margin: 0;
    text-align: center;
    line-height: 1;
}

.recipients-list .award {
    font-weight: bold;
    font-size: 1rem;
}

.recipients-list .name {
    font-size: 1rem;
}


/* Subpage: Contact page */

#contact-form {
    background: white;
    border-radius: var(--radius);
    padding: 2rem var(--gap);
}


/* Subpage: Committees page */

#gray-row {
    margin-right: -15px;
    margin-left: -15px;
    margin-top: calc(var(--gap) / 4);
    margin-bottom: calc(var(--gap) / 4);
}

#gray-row .column {
    background-color: #B7B7B7;
    padding: 20px;
    border-radius: var(--radius);
}

#white-row {
    background-color: #ffffff;
    padding: 20px;
    border-radius: var(--radius);
    margin-top: calc(var(--gap) / 4);
    margin-bottom: calc(var(--gap) / 4);
}

#red-column-row {
    display: flex;
    flex-direction: row;
    gap: 25px;
    justify-content: space-between;
}

#red-column-row .column {
    padding: 20px;
    background-color: #DB0007;
    border-radius: var(--radius);
    margin-bottom: 25px;
    color: white;
}

#yellow-column-row {
    display: flex;
    flex-direction: row;
    gap: 25px;
    justify-content: space-between;
}

#yellow-column-row .column {
    padding: 20px;
    background-color: #FFBC0D;
    border-radius: var(--radius);
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    #red-column-row {
        display: block;
    }
    #yellow-column-row {
        display: block;
    }
}


/* MMS Resets */

main:has(#event-header,
#news-header) div[style="padding-top: 25px; padding-bottom: 15px; max-width: 100%px; margin: 0 auto;"],
main:has(#event-header,
#news-header) div[style="max-width: 100%px; background-color: #eb2128; height: 6px; position: relative; margin: 0 auto;"],
main:has(#event-header,
#news-header) div[style="background-color: #FFFFFF; margin-top: -15px; margin-left: 30px; width: auto; position: relative; display: inline-block; float: left; font-family: Verdana; font-size: 18px !important; padding-left: 10px; padding-right: 10px;"] {
    /* Hide the unselectable divs that make up MMS page titles on news and events details pages   */
    display: none !important;
}

main:has(#event-header,
#news-header) #mheader_5_wrapper>br,
main:has(#event-header,
#news-header) #mheader_5_wrapper>center {
    /* Hide the break tags and a <center> at the bottom of news and event details pages  */
    display: none !important;
}

main:has(#event-header,
#news-header) [style*="font-"] {
    /* Reset anything on details pages that has an inline-style applied to it to it's normal font-family/size */
    font-family: unset !important;
    font-size: unset !important;
}


/* Footer */

footer {
    --size: 26px;
    color: white;
    position: relative;
    padding-top: var(--size);
}

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

footer h2 {
    font-size: 22px;
}

footer a {
    text-decoration: none;
}

footer a:is(:hover,
 :focus) {
    text-decoration: underline;
    color: white;
}

footer .social-list {
    padding-block: var(--size);
    padding-inline: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem 30px;
    align-items: center;
    border-bottom: 1px solid currentColor;
    margin: 0;
}

footer .social-list img {
    display: block;
    max-width: 100%;
    height: auto;
}

.social-list .linkedin-icon {
    border-radius: 2px;
}

.social-list .linkedin-icon rect {
    fill: white;
    transition: .125s fill ease-in-out;
}

.social-list .linkedin-icon path {
    fill: var(--red);
    transition: .125s fill ease-in-out;
}

.social-list a:hover .linkedin-icon rect {
    fill: #027BB6;
}

.social-list a:hover .linkedin-icon path {
    fill: white;
}

footer .resources-contact {
    padding-block: var(--size);
    display: flex;
    /* flex-wrap: wrap; */
    gap: 1rem 30px;
    justify-content: space-between;
}

footer .resources-contact ul {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

footer .footer-resources {
    font-weight: 700;
}

.footer-contact li {
    display: flex;
    gap: 1ch;
    align-items: center;
}

.footer-contact .phone-item::before {
    content: url('../images/phone-icon.svg') / "";
    pointer-events: none;
}

.footer-contact .email-item::before {
    content: url('../images/mail-icon.svg') / "";
    pointer-events: none;
}

.footer-contact .address-item::before {
    content: url('../images/gps-icon.svg') / "";
    pointer-events: none;
}

footer .footer-bottom {
    position: relative;
    padding-block: var(--size);
}

footer .footer-bottom::before {
    /* Additional 15px needed to compensate for the padding added by .wrapper on the containing element <footer> */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--side-margin) - 15px);
    right: calc(var(--side-margin) - 15px);
    background: var(--dark-red);
    z-index: -1;
}


/* New footer layout @501px */

@media (max-width: 501px) {
    footer {
        display: grid;
        grid-template-areas: "logo" "resources" "contact" "icon" "bottom";
        gap: var(--size);
    }
    footer>.social-list,
    footer>.resources-contact {
        display: contents;
    }
    footer>.social-list>li:first-child {
        /* Footer logo */
        grid-area: logo;
        margin-inline: auto;
    }
    footer>.social-list>li:last-child {
        /* LinkedIn icon */
        grid-area: icon;
        margin-inline: auto;
    }
    footer .footer-resources {
        /* Footer resources */
        grid-area: resources;
        padding-top: var(--size);
        border-top: 1px solid;
    }
    footer .footer-contact {
        /* Footer contact */
        grid-area: contact;
        padding-block: var(--size);
        border-block: 1px solid;
    }
    .footer-contact ul {
        margin-left: 15px;
    }
    footer>.footer-bottom {
        /* Footer bottom */
        grid-area: bottom;
        font-size: 18px;
        text-align: center;
    }
}


/*--------------------------------------------------------
						Subpage Styles
--------------------------------------------------------*/


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

#mms-main a {
    text-decoration: none;
}

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

#mms-main a:hover {
    color: var(--primary);
    text-decoration: underline;
}


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


/* Request to change background color per #290167 */

#subpage-main::before,
#feeds-main::before,
#mms-main::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    z-index: -1;
    background: var(--yellow);
    display: block;
}

#mms-main {
    background: white;
    padding-block: 1rem;
}


/* #subpage-main.faq-page>.row:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    z-index: -1;
    display: block;
    background: var(--light-gray);
} */