html {
    --accent: #ff9900;
    /* REPLACE:COLOR_1 */
    --accent-dark: #669900;
    /* REPLACE:COLOR_2 */
    --primary: #336699;
    /* REPLACE:COLOR_3 */
    --text: #4c4c4c;
    overflow-x: hidden;
    font-size: 16px;
}

body {
    font-family: 'Arimo', sans-serif;
    font-size: inherit;
    color: var(--text);
}

p {
    margin-bottom: .25em;
}


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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    margin: 0 0 .75em;
    padding: 0;
    text-transform: capitalize;
}

h1 {
    font-size: 32px;
}

h2 {
    font-size: 26px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

#homepage-main h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 28px;
    position: relative;
    margin-bottom: 3rem;
}

#homepage-main h2::before {
    content: '';
    position: absolute;
    bottom: -.5em;
    left: 0;
    right: 0;
    margin: auto;
    height: 2px;
    width: 4ch;
    background: var(--accent);
}


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

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

a:hover,
a:focus {
    color: var(--accent-dark);
}

.button-link,
.login-form input[type="submit"] {
    background: var(--accent);
    transition: background-color .125s ease-in-out;
    display: inline-block;
    color: white;
    padding: .5em 4ch;
    text-decoration: none;
    border: none;
    font-size: 1.1em;
}

.button-link:hover,
.button-link:focus {
    background: var(--accent-dark);
    transition: background-color .125s ease-in-out;
    color: white;
    text-decoration: none;
}


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

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


/*  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 {
        --side-margin: unset;
        left: unset;
        right: unset;
        width: unset;
    }
}

.row_background {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.row_background:not(#mycanvas .row_background) {
    color: white;
}

.row_background::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -666vw;
    right: -666vw;
    display: block;
    background-color: var(--primary);
    z-index: -1;
}

.row_background:not(#mycanvas .row_background) * {
    color: white;
}

@media (max-width: 767px) {
    .row_background {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}


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

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    font-size: 16px;
    /* Font-size included because some pages of the MMS try to override the body's font-size */
}

header::before {
    content: '';
    position: absolute;
    left: -666vw;
    right: -666vw;
    border-top: 5px solid var(--primary);
    top: 0;
}

header>a:first-child {
    padding: .75em 0;
}

header .logo {
    padding-right: 15px;
}

header>section {
    display: flex;
    flex-direction: column;
}


/* --- Search ---  */

.searchbox {
    outline: 1px solid var(--primary);
    max-width: 100%;
    position: relative;
    width: 230px;
    height: 2em;
    transition: outline .25s ease-in-out;
    overflow: hidden;
}

.searchbox:focus-within {
    outline: 2px solid var(--accent);
}

.search-input {
    border: none;
    padding: .5em 1ch;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.search-input:focus {
    outline: none;
}

.search-button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border: 0;
    width: 2em;
    background-image: url(../images/search-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

@media (max-width: 767px) {
    .searchbox {
        width: 200px;
    }
}


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

nav {
    height: 2.5em;
    font-size: 16px;
    /* Font-size included because some pages of the MMS try to override the body's font-size */
}

nav::before {
    content: '';
    background: var(--primary);
    position: absolute;
    left: -666vw;
    right: -666vw;
    top: 0;
    bottom: 0;
}

#nav_menu {
    position: relative;
    z-index: 1;
    padding: 0;
}

#nav_menu .dropdown-menu>li>a:focus,
#nav_menu .dropdown-menu>li>a:hover,
#nav_menu .nav>li>a:focus,
#nav_menu .nav>li>a:hover,
#nav_menu .nav .open>a,
#nav_menu .nav .open>a:focus,
#nav_menu .nav .open>a:hover {
    /* Overwriting BS default */
    background-color: transparent;
    border-color: none;
}

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

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

#nav_menu a {
    color: white;
    padding: 1em 2ch;
    white-space: nowrap;
}

#nav_menu a::before {
    /* Link underline effect  */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--accent);
    height: 0;
    transition: height .125s ease-in-out .125s;
}

#nav_menu a:hover::before {
    height: 5px;
}

#nav_menu .login-link {
    font-size: 1em;
}

#nav_menu .login-link::before {
    background: var(--primary);
    filter: brightness(1.5);
}

#nav_menu a::after {
    /* Background color  */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary);
    z-index: -1;
    filter: brightness(1.5);
    opacity: 0;
    transition: opacity .125s ease-in-out;
}

#nav_menu a:hover::after,
#nav_menu a:focus::after {
    opacity: 1;
}

#nav_menu ul>li>.login-link:hover,
#nav_menu ul>li>.login-link:focus {
    /* Selector is absurdly specific to overwrite BS defaults */
    background: var(--accent);
}

#nav_menu .login-link::after {
    content: none;
}

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

#nav_menu .dropdown-menu {
    /* Dropdown menu  */
    /* background: var(--primary); */
    font-size: inherit;
    padding-bottom: 1em;
    min-width: 20ch;
}

#nav_menu .dropdown-menu::before,
#nav_menu .dropdown-menu::after {
    /* Dropdown menu background layers to create a transparent background that derived from client's primary color*/
}

#nav_menu .dropdown-menu::before {
    /* Dropdown menu background */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary);
    filter: brightness(1.5);
}

#nav_menu>ul ul a {
    /* Dropdown menu links */
    margin: .5em 2ch;
    padding: 0;
    position: relative;
}

#nav_menu>ul ul a:hover,
#nav_menu>ul ul a:focus {
    text-decoration: none;
    border: none;
}

#nav_menu>ul ul a::after {
    content: none;
}

#nav_menu>ul ul a::before,
#nav_menu>ul ul a::before {
    bottom: -.25em;
    background: currentColor;
    transition-delay: none;
}

#nav_menu>ul ul a:hover::before,
#nav_menu>ul ul a:focus::before {
    height: 2px;
}

@media (max-width: 1200px) {
    #nav_menu a {
        padding: 1em 1ch;
    }
}

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


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

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

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

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

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

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

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

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

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

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


/*--------------------------------------------------------
    Mobile navigation
--------------------------------------------------------*/

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

header .mobileMenuTrigger {
    align-self: flex-end;
    margin-top: 15px;
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    transition: color .125s ease-in-out;
}

header .mobileMenuTrigger:hover,
header .mobileMenuTrigger:focus {
    color: var(--accent);
    outline: none;
}


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

#subpage-main,
#mms-main {
    padding-top: 3rem;
    min-height: calc(100vh - (120px + 52px + 157px + 3rem))
}

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

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

@media (max-width: 767px) {
    #subpage-main,
    #mms-main {
        min-height: calc(100vh - (120px + 52px + 157px))
    }
    main .row+.row {
        margin-top: 1rem;
    }
    #subpage-main,
    #mms-main {
        padding-top: 1rem;
    }
}


/* Slideshows defaults */

.carousel {
    font-size: 20px;
}


/* Homepage slideshow styles */

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

.carousel-inner .item img {
    width: 100%;
}

#slide-row .carousel-caption {
    position: absolute;
    z-index: 2;
    color: #fff;
    padding: 1.5em 15px;
    left: 0;
    bottom: 0;
    right: 0;
    top: auto;
    width: 100%;
    text-align: left;
    text-shadow: none;
    margin: auto;
}

#slide-row .carousel-caption::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -666vw;
    right: -666vw;
    display: block;
    background-color: var(--primary);
    opacity: .95;
    z-index: -2;
}

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

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

@media (max-width: 990px) {
    #slide-row .carousel-indicators {
        bottom: unset;
        top: 1rem;
    }
    .carousel-indicators li {
        border-color: var(--primary);
    }
    .carousel-indicators li.active {
        background: var(--primary);
    }
    #slide-row .carousel-caption {
        position: relative;
        padding: 1em 15px;
    }
    #slide-row .carousel-caption::before {
        opacity: 1;
    }
    #slide-row .caption-text {
        font-size: 22px;
    }
    #slide-row .alt-text {
        font-size: 1rem;
    }
}


/* Introduction row  */

#introduction-row .column {
    text-align: center;
}

#introduction-row svg {
    width: 120px;
    height: 120px;
}

#introduction-row circle {
    fill: #303543;
    stroke: var(--accent);
    stroke-miterlimit: 10;
    stroke-width: 5px;
}

#introduction-row :hover circle,
#introduction-row :focus circle,
#introduction-row circle:hover,
#introduction-row circle:focus {
    fill: var(--accent);
    stroke: var(--accent);
    transition: .3s;
}

#introduction-row path {
    fill: var(--accent);
}

#introduction-row :hover path,
#introduction-row :focus path,
#introduction-row path:hover,
#introduction-row path:focus {
    fill: #303543;
    transition: .3s;
}

#introduction-row h3 {
    margin-top: .5em;
    margin-bottom: .5em;
}

#introduction-row h3 a {
    color: inherit;
}

#introduction-row section>div {
    text-align: left;
}

@media (max-width: 767px) {
    #introduction-row .column {
        width: 100%;
        text-align: left;
        display: flex;
        flex-direction: row;
    }
    #introduction-row svg {
        margin-right: 15px;
        max-width: 15vw;
    }
    #introduction-row h3 {
        margin-bottom: .25em;
    }
}


/* News feed  */

.news-item {
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    padding: 2rem 0;
}

.news-item:last-of-type {
    margin-bottom: 2rem;
}

.news-item h3 {
    margin-bottom: .5em;
    position: relative;
}

.news-item h3:before {
    content: '';
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    left: -2ch;
    top: .25em;
}

.news-title-link:hover,
.news-title-link:focus {
    color: var(--accent);
    transition: color .125s ease-in-out;
    text-decoration: none;
}

.news-item .date {
    margin-bottom: .25em;
    display: block;
}

@media (max-width: 767px) {
    .news-item {
        padding: 1rem 0;
    }
    .news-item:last-of-type {
        margin-bottom: 1rem;
    }
}


/* Events feed  */

.events-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem 30px;
    margin-bottom: 2rem;
}

.event-item {
    display: flex;
    border: 1px solid currentColor;
    /* max-width: calc(33% - 15px); */
}

.event-item time {
    background: var(--primary);
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    width: 100px;
    line-height: 1.1;
    padding: 1ch;
}

.event-item .month {
    font-size: .6em;
}

.event-item section {
    padding: 1.1rem 1rem;
    /* padding-left: 1rem; */
    line-height: 1.2;
}

.event-item h3 {
    font-size: 1.2rem;
    color: var(--text);
    margin-bottom: .5em;
}

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

@media (max-width: 990px) {
    .events-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .events-wrapper {
        display: block;
        margin-bottom: 1rem;
    }
    .event-item+.event-item {
        margin-top: 1rem;
    }
}


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

.subpage {
    min-height: calc(100vh - 330px);
    padding-top: 30px;
    padding-bottom: 30px;
}

.subhead {
    margin: 30px auto;
}

.subhead h1 {
    text-align: center;
    font-family: "Arimo", sans-serif;
    font-weight: 700;
    font-size: 30px !important;
}

.subhead hr {
    width: 60px;
    border-top: 2px solid var(--accent);
    margin-top: 10px;
}

.nav-tabs .dropdown svg .cls-1 {
    fill: var(--accent);
}


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

footer {
    color: white;
    position: relative;
    margin-top: 3rem;
    padding: 2rem 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -666vw;
    right: -666vw;
    background: var(--primary);
    z-index: -1;
}
footer.wrapper a {
    color: #fff;
}
footer a:hover,
footer a:focus {
    color: var(--accent);
}

@media (max-width: 990px) {
    footer {
        margin-top: 2rem;
    }
}

@media (max-width: 767px) {
    footer {
        margin-top: 1rem;
        flex-direction: column-reverse;
    }
}

.credits span {
    display: block;
}

.credits span:last-of-type {
    margin-top: 5px;
}

.social-wrapper {
    margin-bottom: 5px;
}

.social-wrapper a:hover,
.social-wrapper a:focus {
    text-decoration: none;
}

.social-wrapper circle {
    stroke: var(--accent);
    fill: var(--primary);
    transition: stroke .125s ease-in-out, fill .125s ease-in-out;
}

.social-wrapper path {
    fill: var(--accent);
    transition: fill .125s ease-in-out;
}

.social-wrapper :hover circle,
.social-wrapper :focus circle {
    fill: var(--accent);
}

.social-wrapper :hover path,
.social-wrapper :focus path {
    fill: var(--primary);
}


/*--------------------------------------------------------
    System/MMS
--------------------------------------------------------*/

.forum-small {
	font-size: 12px !important;
}


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


/*------------------------2nd Tier Nav*/

.navbar-nav li {
    position: relative;
    float: left;
    list-style-type: none;
}

.men-level-1 {
    top: 0px;
}


/*--------------------End-2nd Tier Nav*/


/*----------------------------
    MMS Member Icons Menu
------------------------------*/

@media (min-width: 1200px) {
    .nav-tabs li.dropdown {
        width: 190px;
    }
}

@media (min-width: 990px) and (max-width: 1200px) {
    .nav-tabs li.dropdown {
        width: 155px;
    }
}

@media (min-width: 767px) and (max-width: 990px) {
    .nav-tabs li.dropdown {
        width: 120px;
    }
}


/*------------------------------------------------------------------------------------
                            Dropdown Menus - full/collapsed
--------------------------------------------------------------------------------------*/

.dropdown-menu li {
    width: 100%;
}


/*----------------------------
    Mobile Menu
    
    --- INSTRUCTIONS ---
    For the most part, these mobile menu styles will be exactly like your regular navigation styles.
    There are a few things to watch out for however. I've marked specific items with two hash tags and caps,
    like ##ITEM. 
    
    ##TOP - There are three places where this exists, and each one should be the same as the other three.
            This item tells the mobile menu to start lower than the toggle button.
            
    ##DIRECTION - This item tells your mobile menu which direction to slide in from, and has a few
        different parts. Changing "left" to "top" in each ##DIRECTION would have the menu slide in from the top. Bottom is a bad choice here.
        ##DIRECTION-01 - slides in from the side you specify. This one is set negative as it is the starting position of the menu.
        ##DIRECTION-02 - sets the duration of the slide, and again which direction it slides from.
        ##DIRECTION-03 - sets the "open" position. This will be the zeroed out version of ##DIRECTION-01
    
    --------------------
------------------------------*/


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


/*-------------------------------------toggle*/

button#mobile-toggle {
    width: 37px;
    height: 37px;
    display: none;
    position: absolute;
    right: 15px;
    bottom: 30px;
    border: 2px solid #002857;
    border-radius: 4px;
    padding: 8px 5px;
    background-color: white;
    box-shadow: 0px 1.5px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

@media (max-width: 990px) {
    button#mobile-toggle {
        display: inline-block;
    }
}

button#mobile-toggle svg * {
    fill: #002857;
}


/*--------------------------------end--toggle*/

#mobile-menu>li#triggerClose {
    display: inline;
    float: right;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    font-size: 22px;
    cursor: pointer;
    color: #e5e5e5;
}

#mobile-menu>li#mobile-logo {
    position: relative;
    left: -15px;
    top: -10px;
}

#mobile-menu>li#mobile-logo>a {
    display: inline;
    max-width: 80%;
}

#mobile-menu>li #q {
    width: 100%;
}

#mobile-menu>li>a {
    width: 174px;
    min-height: 32px;
    margin-bottom: 2px;
    border-radius: 1px;
    background-color: transparent;
    padding-left: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    -webkit-transition: color .25s;
    transition: color .25s;
    text-decoration: none;
    border-top: 3px solid transparent;
}

#mobile-menu>li>a {}

#mobileMenuWrapper {
    position: fixed;
    top: 0px;
    bottom: 0px;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    left: -120%;
    width: 300px;
    background-color: var(--primary);
    transition: left 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000);
}

#mobileMenuWrapper.open {
    left: 0px;
}


/* REQUIRED - Dropdown menu item transition states*/

#mobileMenuWrapper .mDropdown {
    display: none;
    background-color: #4f5666;
    border: none;
    padding: 0;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

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


/* REQUIRED - Sets the ULs to not have dots, or be spaced in the typical UL fashion. */

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


/* OPTIONAL-ISH - These are the settings for the base menu UL */

#mobileMenuWrapper #mobile-menu {
    overflow: auto;
    padding: 15px 15px 15px 10px;
}


/* OPTIONAL-ISH - This sets each link on its own line fo' sho' */


/*#mobileMenuWrapper a, #mobileMenuWrapper div{
    display: block;
}*/


/* OPTIONAL - The actual A's. Style them as you wish*/


/* Top Level / all*/

#mobileMenuWrapper #mobile-menu a {
    display: inline-block;
    width: 100%;
    color: #fff;
}

#mobileMenuWrapper #mobile-menu>li>a:hover,
#mobileMenuWrapper #mobile-menu>li>a:focus {
    background-color: #4f5666;
    border-bottom: 3px solid var(--accent);
    transition: .3s;
}


/* dropdown only */

#mobileMenuWrapper .mDropdown a {
    padding: 8px;
}

#mobileMenuWrapper .mDropdown a:hover,
#mobileMenuWrapper .mDropdown a:focus {
    background-color: var(--accent);
    transition: .3s;
    text-decoration: none;
}

#mobile-menu>li>ul {
    background-color: rgba(0, 0, 0, .04);
}