:root {
    --blue: #223762;
    --maroon: #790305;
    --gray: #8b8e92;
    overflow-x: hidden;
    font-size: 16px;
}

body {
    font-family: 'Nunito', sans-serif;
    color: #464849;
    font-size: inherit;
    overflow: inherit;
}


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

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #4B4D4D;
    margin: 0px;
    padding: 0px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    font-family: inherit;
}

h1 {
    font-size: 30px;
    padding-bottom: 15px;
}

h2 {
    font-size: 26px;
    border-bottom: 1px solid #223762;
    padding-bottom: 8px;
    margin-bottom: 25px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 21px;
}

h5 {
    font-size: 19px;
}

h5 {
    font-size: 18px;
}


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

a {
    color: var(--blue);
    transition: color .3s ease-in-out;
}

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

a.button,
input[type="submit"],
.mobile-login button {
    background: var(--blue);
    font-size: inherit;
    padding: .5em 3ch;
    display: inline-block;
    color: white;
    border-radius: 2em;
    margin-right: 2ch;
    position: relative;
    border: none;
    text-align: center;
}

.button:last-child {
    margin-right: 0;
}

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

.button:hover,
.button:focus {
    text-decoration: none;
}

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


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

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

.editor-only {
    display: none;
}

#mycanvas .editor-only {
    display: block;
    background: yellow;
    color: black;
}

#mycanvas .editor-only::before {
    content: 'This section is for instructions only. It will not show up on the website';
}


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

.wrapper {
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    position: relative;
    height: inherit;
    padding-left: 15px;
    padding-right: 15px;
}

.full-width {
    /* Make an element span the width of the viewport */
    --side-margin: calc((100vw - var(--page-width) + 13px) / -2);
    /* 13px to compensate for width of scrollbar */
    position: relative;
    left: var(--side-margin);
    right: var(--side-margin);
    width: calc(100vw + 13px);
}

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

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

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

@media (max-width: 990px) {
    .container,
    .wrapper {
        /* Extra wiggle room at a breakpoint that needs it  */
        width: 100%;
    }
    .full-width {
        left: -15px;
        /* --side-margin: unset;
        right: unset;
        width: unset; */
    }
}

@media (max-width: 500px) {
    .full-width {
        left: unset;
        --side-margin: unset;
        right: unset;
        width: unset;
    }
}


/* Slideshows defaults */

.carousel {
    font-size: 20px;
}

.carousel-indicators {
    z-index: 5;
}


/* Homepage slideshow */

#slide-row .carousel-indicators {
    top: 1rem;
    right: 1rem;
    left: unset;
    bottom: unset;
    text-align: right;
    margin: unset;
    z-index: 1;
}

#slide-row .carousel-indicators li {
    border-color: var(--maroon);
    background: white;
}

#slide-row .carousel-indicators li.active {
    background: var(--maroon);
}

#slide-row a:hover,
#slide-row a:focus {
    text-decoration: none;
}

#slide-row .carousel-caption {
    position: absolute;
    z-index: 2;
    color: #fff;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    width: 100%;
    text-align: left;
    text-shadow: none;
    margin: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Style needed to overwrite BS defaults */
}

#slide-row .caption-wrapper {
    position: relative;
    padding: 1.5em 15px;
    width: calc(33% - 15px);
}

#slide-row .caption-wrapper::before {
    content: '';
    position: absolute;
    background: var(--blue);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    opacity: .8;
}

#slide-row .caption-text {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
    text-transform: capitalize;
}

#slide-row .alt-text {
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.4;
}

#slide-row .carousel-control.left,
#slide-row .carousel-control.right,
#slide-row .carousel-control:hover {
    display: none;
}

@media (min-width: 1170px) {
    #slide-row .carousel-caption {
        width: 1170px;
        padding: 0 15px;
    }
}

@media (max-width: 990px) {
    #slide-row .carousel-caption {
        align-items: flex-end;
    }
    #slide-row .caption-wrapper {
        width: 100%;
    }
    #slide-row .caption-text {
        font-size: 18px;
        margin-bottom: .5em;
    }
    #slide-row .alt-text {
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    #slide-row .carousel-caption {
        position: relative;
    }
    #slide-row .carousel-caption::before {
        opacity: 1;
    }
    #slide-row .caption-wrapper::before {
        opacity: 1;
    }
}


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

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 15px;
    position: relative;
}

header .logo {
    width: 250px;
}

.header-contact {
    text-align: right;
}

.header-phone {
    border: 1px solid #C9C9C9;
    padding: 9px;
    text-align: center;
    margin-bottom: 5px;
    margin-right: 1px;
}

.header-contact ul {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    list-style: none;
    margin: 0;
    flex-wrap: wrap;
}

.header-contact ul svg,
.social-item svg {
    width: 42px;
    height: 42px;
    margin-left: 5px;
}

#mobile-toggle {
    background: var(--maroon);
    width: 32px;
    height: 29px;
    display: inline-block;
}

@media (min-width: 768px) {
    #mobile-toggle {
        display: none;
    }
}

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


/*--------------------------------------------------------
Desktop Navigation
--------------------------------------------------------*/

#main-menu::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -666vw;
    right: -666vw;
    background: var(--blue);
}

#nav_menu {
    padding-left: 0px;
    padding-right: 0px;
    font-family: 'Montserrat', sans-serif;
}

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

#nav_menu>ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}

.nav>.listserv-menu-item {
    order: 666;
    flex: auto;
    display: flex;
    justify-content: flex-end;
    /* Obnoxious selector needed to overwrite BS defaults */
}

.listserv-menu-item a {
    background: var(--maroon);
}

#nav_menu a {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 16px 18px 12px;
    transition: background-color .3s ease-in-out;
    border-bottom: 3px solid transparent;
}

#nav_menu a:hover,
#nav_menu a:focus,
#nav_menu .navbar-nav .open>a,
#nav_menu .navbar-nav .open>a:focus,
#nav_menu .navbar-nav .open>a:hover {
    background: var(--gray);
    border-bottom: 3px solid var(--maroon);
    /* color: #fff; */
}


/* #nav_menu .caret {
    margin-left: 4px;
} */

#nav_menu>ul>li>a {
    padding-inline: 5px;
    white-space: nowrap;
}

#nav_menu .dropdown-menu {
    background-color: white;
    border: 0;
    border-radius: 0;
    padding: .75rem 18px 1.25rem;
}

#nav_menu .dropdown-menu a {
    color: #464849;
    padding: 5px 0;
    border-bottom: 3px solid transparent;
    font-weight: normal;
    text-transform: none;
    transition: border .3s ease-in-out;
}

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

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


/*--------------------------------------------------------
                    Mobile Navigation
--------------------------------------------------------*/

#mobileMenuWrapper {
    position: fixed;
    background: white;
    top: 0;
    bottom: 0;
    z-index: 50;
    overflow-y: auto;
    overflow-x: hidden;
    left: -120%;
    width: 300px;
    box-shadow: 0 3px 14px -2px rgba(0, 0, 0, 0.4);
    transition: left .125s ease-in-out;
    padding: .5rem 1rem;
}

#mobileMenuWrapper.open {
    left: 0;
}

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

#mobileMenuWrapper li {
    margin-bottom: 5px;
}

#mobileMenuWrapper .mDropdown {
    display: none;
    padding-inline-start: 15px;
    margin-top: 8px;
}

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

.social-item {
    display: inline-block;
    margin-left: -5px;
    margin-right: 5px;
}

#triggerClose {
    font-size: 22px;
    cursor: pointer;
    text-align: right;
    line-height: 1;
}

#mobileMenuWrapper a {
    font-size: 18px;
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
}


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

#subpage-main,
#mms-main {
    padding-top: 3rem;
    min-height: calc(100vh - (61px + 75px + 136px + 3rem));
}

main .row+.row {
    margin-top: 3rem;
}

@media (max-width: 990px) {
    #subpage-main,
    #mms-main {
        padding-top: 2rem;
    }
    main .row+.row {
        margin-top: 2rem;
    }
}

@media (max-width: 767px) {
    #subpage-main,
    #mms-main {
        min-height: calc(100vh - (120px + 52px + 157px));
        padding-top: 1rem;
    }
    main [class*="col-"]+[class*="col-"] {
        margin-top: 1rem;
    }
}


/* Slide row */

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


/* Homepage grid  */

#cta-row>[class^="col"]:not(.gm-editing),
#events-row>[class^="col"]:not(.gm-editing),
#sponsors-row>[class^="col"]:not(.gm-editing) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    grid-gap: 15px 30px;
}

#cta-row h2,
#events-row h2,
#sponsors-row h2 {
    grid-column: 1 / -1;
}


/* Banner row  */

#banner-row {
    position: relative;
    color: white;
    padding: .5rem 0;
    margin-top: 0;
    font-size: 20px;
}

#banner-row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -666vw;
    right: -666vw;
    background: var(--maroon);
    display: block;
}

#banner-row>[class^="col"]:not(.gm-editing) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

#banner-row p:first-of-type {
    margin-bottom: 0;
}


/* CTA row  */

#cta-row {
    font-size: 20px;
}

#cta-row.cta-row-2>[class^="col"]:not(.gm-editing) {
    grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
}

#cta-row .card {
    min-height: 150px;
    position: relative;
    display: flex;
    text-align: center;
    align-items: center;
    overflow: hidden;
}

#cta-row .minors-counsel.card {
    overflow: visible;
    background: #878787;
    position: relative;
}

#cta-row .card a {
    color: white;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0 0 5px black;
    font-weight: bold;
    line-height: 1.2;
    font-weight: bold;
    position: relative;
    z-index: 2;
}

#cta-row .card a span:not(span:has(span)) {
    padding-inline: 0 10px;
    -webkit-box-decoration-break: clone;
    white-space: pre-wrap;
    box-shadow: -10px 0 0 #790305;
    padding-block: 3px;
    line-height: 1.5;
    margin-left: 10px;
}

#cta-row .minors-counsel .dropdown-menu {
    max-width: 100%;
}

#cta-row .minors-counsel .dropdown-menu a {
    color: currentColor;
    text-shadow: none;
    white-space: unset;
    color: #464849;
    padding: 5px 5px;
    border-bottom: 3px solid transparent;
    font-weight: normal;
    text-transform: none;
    transition: border .3s ease-in-out;
    font-size: 16px;
}

#cta-row img {
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    min-height: 100%;
    width: unset !important;
    height: unset !important;
    /* !important's used because the Image uploader in the CMS adds an inline-style to images which would ruin preview in the editor*/
    aspect-ratio: 16/9;
}

#cta-row .minors-counsel img {
    max-height: 150px;
    margin: auto;
}


/* Sponsors row  */

#sponsors-row>[class^="col"]:not(.gm-editing) {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}


/* Events row  */

.event-item section {
    display: flex;
    margin-bottom: 15px;
    align-items: flex-start;
}

.event-item time {
    font-weight: bold;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-right: 1ch;
    min-width: 50px;
}

.event-item .month {
    color: white;
    background: var(--maroon);
    padding: .125em 1ch;
}

@media (min-width: 768px) {
    .event-item .month {
        font-size: 14px;
    }
}

.event-item .day {
    font-size: 1.1em;
    padding: .125em 0;
    font-family: sans-serif;
    border: 1px solid var(--maroon);
}

.event-item h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    text-transform: capitalize;
    margin-bottom: 0;
    padding: 0;
    color: var(--maroon);
}

.event-item h3 a {
    color: inherit;
}


/*---------- news_feed_pages function ----*/

div#news-button-container {
    margin: 10px 0px 0px 0px;
    text-align: right;
}

div#news-button-verbiage {
    margin-right: 10px;
    display: inline-block;
    color: #5DB2D7;
}

div#news-button-container:active {
    margin: 9px 0px 0px -1px;
    /* keeps buttons from jumping around when pressed*/
}

div.news-button {
    display: inline-block;
    padding: 5px 10px;
    background-color: #5DB2D7;
    color: black;
    border: 1px solid black;
    border-radius: 5px;
    margin: 0px;
}

div.nb-number:hover {
    opacity: 0.7;
    /*buttons move toward backgound color when hovered over*/
    cursor: pointer;
}

div.nb-number:active {
    /* make buttons look like they are being pressed when clicked*/
    opacity: 0.6;
    border-width: 2px 0px 0px 2px;
}

div.nb-selected {
    /* style the selected button */
    opacity: 0.5;
}

div#nb-ellipsis-left,
div#nb-ellipsis-right {
    background-color: transparent;
    color: #5DB2D7;
    border: 0px;
    margin: 0px;
    padding: 5px;
    font-weight: bold;
}


/*---------- END: news_feed_pages ----*/


/* Sponsors row 2 */

.sponsors-grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 15px 30px;
    align-items: center;
    justify-content: center;
    margin: 10px auto 40px;
    max-width: 560px;
}

.sponsors-grid::before {
    text-transform: capitalize;
    font-weight: bold;
    font-size: 18px;
}

.sponsors-grid::before {
    text-align: center;
    color: white;
    background: var(--blue);
}


/* @media (min-width: 991px) { */

.sponsors-grid::before {
    position: absolute;
    writing-mode: vertical-rl;
    text-orientation: initial;
    top: 0;
    bottom: 0;
    right: -290px;
    left: unset;
    padding-inline: 10px;
}


/* } */

@media (max-width: 1200px) and (min-width: 991px) {
    .sponsors-grid::before {
        right: -190px;
    }
}

.sponsors-grid.platinum::before {
    content: 'Platinum';
    min-height: 94px;
}

.sponsors-grid.gold::before {
    content: 'gold';
}

.sponsors-grid.silver::before {
    content: 'silver';
}

.sponsors-grid.bronze::before {
    content: 'bronze';
}

.sponsors-grid img {
    max-width: 165px;
}

.sponsors-grid.platinum img {
    max-width: 300px;
}

@media (max-width: 990px) {
    .sponsors-grid::before {
        content: none !important;
    }
}


/*--------------------------------------------------------
	CSS STYLE FOR INNER PAGES
--------------------------------------------------------*/

#subpage {
    min-height: calc(100vh - 336px);
    padding-top: 30px;
    padding-bottom: 40px;
}


/*--------------------------------------------------------------
                        Modal Log In
--------------------------------------------------------------*/

.modal {
    overflow-y: visible;
}

.modal-dialog {
    max-width: 280px;
    margin: 50px auto;
}

.modal-header {
    text-align: center;
}

.modal-body {
    padding: 15px 23px;
}

#login input {
    width: 203px!important;
    height: 30px;
    margin: 0px auto;
    margin-bottom: 10px;
    padding: 0px 6px;
    margin-left: 15px;
    background: #fff;
    font-size: 16px;
    color: #000;
    box-shadow: none !important;
    border: 1px solid #C9C9C9;
}

#login input[type="submit"] {
    background: #223762;
    color: #fff;
    border: 1px solid #223762!important;
    font-size: 18px !important;
    margin-left: 10px;
    outline: none;
    text-decoration: none;
    text-transform: uppercase;
    padding: 5px 20px;
    height: auto;
    font-weight: bold;
    font-family: 'Nunito', sans-serif;
}

#login input[type="submit"]:hover {
    background: #790011;
    border: 1px solid #790011 !important;
    color: #fff;
}

#login a {
    color: #790011;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    display: block;
    margin-left: 15px;
    padding-bottom: 10px;
}

#login a:hover {
    color: #223762;
}

#login input:last-of-type {
    width: 100px;
    margin: none;
}

h6.modal-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #4B4D4D;
    font-size: 24px;
    text-transform: uppercase;
}


/*--------------------------------------------------------
	FOOTER
--------------------------------------------------------*/

footer {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    padding: 30px 0px 52px;
    position: relative;
    margin-top: 3rem;
}

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

footer a {
    color: #fff;
    text-decoration: underline;
}

footer a:is(:hover, :focus) {
    color: #bfbfbf;
}


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

#mycanvas #banner-row::before {
    left: 0;
    right: 0;
}

#mycanvas #cta-row .gm-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    grid-gap: 15px 30px;
}

#mycanvas #sponsors-row .gm-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-gap: 15px 30px;
}

#cta-row.gm-editing::before,
#sponsors-row.gm-editing::before,
#slide-row.gm-editing::before {
    background: yellow;
    color: black;
    display: block;
    padding: .5rem 15px;
    font-size: 18px;
}

#cta-row.gm-editing::before,
#sponsors-row.gm-editing::before {
    content: "New images should be added directly to this area without adding new rows and columns through the editor.";
}

#slide-row.gm-editing::before {
    content: 'Contents of the "Call to Action" and Sponsors rows have been setup using CSS Grid to automatically place elements into columns that will best fit the screen they are viewed on. Do not add additional columns to these rows.';
}