/*
// VALUE:COLOR_1:#11517c
// VALUE:COLOR_2:#d19c18
// VALUE:COLOR_3:#8d9e5f
*/


/*--------------------------------------------------------
	FONT ASSIGNMENTS
--------------------------------------------------------*/

:root {
    --header-height: 240px;
    --footer-height: 551px;
    --side-margin: calc((100vw - var(--page-width)) / -2);
    --page-width: 100vw;
    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;
    }
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-size: 16px;
}

p {
    font-family: 'Lato', sans-serif;
}

/* .container {} */

em {
    color: #2C2C2D;
}


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

h1,
h2,
h3,
h4 {
    margin: 0 0 1em 0;
    padding: 0px;
    font-family: 'Lato', sans-serif;
}

/* h1 {
    font-size: ;
    color: ;
}

h2 {
    font-size: ;
}

h3 {
    font-size: ;
}

h4 {
    font-size: ;
} */

h1.title {
    margin-top: 30px;
    margin-bottom: 30px;
}


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

a {
    /* color: ; */
    cursor: pointer;
    font-family: 'Lato', sans-serif;
}

/* a:hover,
a:focus {
    color: ;
} */


.button-link {
    color: white;
    border: none;
    text-transform: capitalize;
    font-weight: 700;
    padding: .75em 2ch;
    display: block;
    width: fit-content;
    margin: 1.25em 0;
    transition: .125s background-color ease-in-out, .125s color ease-in-out;
    line-height: 1;
    text-decoration: none;
    background-color: #11517c;
    border-radius: .3rem;
    white-space: nowrap;
}

.button-link:first-child {
    margin-top: 0;
}

.button-link:last-child {
    margin-bottom: 0;
}

.button-link:is(:hover, :focus) {
    background-color: #0c4063;
    color: white;
    text-decoration: none;
}

/*--------------------------------------------------------
	IMAGES, Objects
--------------------------------------------------------*/

img {
    border: 0px;
}

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

.background-row {
    position: relative;
}

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

.background-row:not(#mycanvas .background-row)>.column {
    background: transparent !important;
    font-size: 16px;
    /* color: white; */
    /* text-align: center;
    font-weight: bold; */
    max-width: 1200px;
    margin: auto;
    line-height: 1.3;
}

.background-row:not(#mycanvas .background-row)>.column:not(.column:has(+.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: 16px;
    }
}



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


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

#top-wrap-header,
.top-head-opacity {
    min-height: 615px;
}

#top-wrap-header.sub-top-only,
.sub-top-only .top-head-opacity {
    min-height: auto;
}

#top-wrap-header {
    /*background: url(https://claverfoundation.org/redesign/images/header-image.png) repeat-x 0 0;
	background: url(https://claverfoundation.org/redesign/images/FullMural.jpg) repeat-x 0 0;*/
    background: url(../images/juniors_header.jpg) repeat-x 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    display: block;
    max-width: 100%;
    position: relative;
    width: 100%;
    height: 42vw;
}

.top-head-opacity {
    /*background: rgba(0,0,0,0.3);*/
    background: rgb(19, 19, 20);
    background: -moz-linear-gradient(180deg, rgba(19, 19, 20, 1) 0%, rgba(9, 57, 89, .9) 0%, rgba(17, 81, 124, 0.5) 100%);
    background: -webkit-linear-gradient(180deg, rgba(19, 19, 20, 1) 0%, rgba(9, 57, 89, .9) 0%, rgba(17, 81, 124, 0.5) 100%);
    background: linear-gradient(180deg, rgba(19, 19, 20, 1) 0%, rgba(9, 57, 89, .9) 0%, rgba(17, 81, 124, 0.5) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#131314", endColorstr="#11517c", GradientType=1);
    background-size: cover;
    display: block;
    max-width: 100%;
    position: relative;
    width: 100%;
    height: 42vw;
}

.mobile-search-menu {
    top: 15px !important;
    text-align: right;
    position: relative;
}

.mobile-search-menu #search-input {
    display: inline-block;
    margin-top: 0px !important;
    position: relative;
    top: -10px !important;
}

.glyphicon-search:before {
    content: url("../images/search-icon.png");
}

.search-wrap svg,
#search-input svg {
    width: 28px;
    height: 28px;
}


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

#logo-wrap img {
    max-width: 260px;
}

#main-header {
    padding-top: 25px;
}

.sub-top-only #main-header {
    padding: 35px 0px;
}

.home-featured {
    padding-top: 40px;
}

.home-featured h1 {
    color: #fff;
    font-size: 72px;
    font-weight: bold;
    margin-bottom: 20px;
}

.home-featured hr {
    border-top: 1px solid #fff;
}

.home-featured {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
}

.home-featured p {
    font-size: 24px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 30px;
}

.home-featured a {
    color: #fff;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    border: 2px solid #fff;
    padding: 10px 25px;
    /* position: relative;
    top: 35px; */
}

.home-featured a:hover,
.home-featured a:focus {
    background: #fff;
    color: #383838;
    text-decoration: none;
}


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


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

#nav_menu .navbar-nav>li a {
    /* color: ; */
    font-family: 'Lato', sans-serif;
}

#nav_menu .navbar-nav>li a:hover,
#nav_menu .navbar-nav>li a:focus,
#nav_menu .navbar-nav .open>a,
#nav_menu .navbar-nav .open>a:focus,
#nav_menu .navbar-nav .open>a:hover {
    background-color: transparent;
    border: 0px;
}


/*--------------------------------------------------------
	INDEX / MAIN BODY
--------------------------------------------------------*/


:is(#subpage, #homepage) {
    --gap: 50px;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

:is(#subpage, #homepage)>.row {
    position: relative;
    padding-block: var(--gap);
}

#subpage>.row {
    padding-block: calc(var(--gap) / 2);
}

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

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

@media (max-width: 990px) {
    #subpage>.row>.column:not(:first-child) {
        margin-top: var(--gap);
    }
}

@media (max-width: 767px) {
    :is(#subpage, #homepage) {
        --gap: 45px;
    }
}

@media (max-width: 550px) {
    :is(#subpage, #homepage) {
        --gap: 40px;
    }
}







/* Objects */

.row_background {
    color: #ffffff;
    background-color: #636F42;
}

.row_background h1,
.row_background h2,
.row_background h3,
.row_background h4,
.row_background p,
.row_background a {
    color: #ffffff;
}

.column_background {
    color: #ffffff;
    background-color: #636F42;
}

.column_background h1,
.column_background h2,
.column_background h3,
.column_background h4,
.column_background p,
.column_background a {
    color: #ffffff;
}


/* Home Featured Section */

.background-wrapper {
    padding: 70px 0px;
}


/* Home Content */

#homepage {
    font-size: 24px;
}

.home-primary-section {
    /*padding: 70px 0px;*/
    font-size: 24px;
    color: #383838;
    text-align: center;
}

.home-primary-section h1 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 48px;
    padding-bottom: 40px;
    color: #383838;
}

.more-info {
    padding-top: 35px;
}

.more-info a {
    text-transform: uppercase;
    color: #d19c18;
    /* REPLACE:COLOR_1 */
    font-size: 24px;
    font-weight: bold;
}

.more-info i.fa.fa-long-arrow-right {
    padding-right: 15px;
}



.home-secondary-section {
    /*padding: 70px 0px;*/
    font-size: 24px;
    color: #383838;
    text-align: center;
}

.home-secondary-section h2 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 44px;
    padding-bottom: 40px;
    color: #383838;
}

.upcoming-events-section {
    padding: 50px 0px;
}

.upcoming-events-section h2 {
    color: #2D2F37 !important;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    padding-bottom: 30px;
}

.event-date-wrap {
    background: #8EB6F5;
    color: #fff;
    text-align: center;
    font-size: 48px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 0px;
}

.event-content {
    margin-bottom: 25px;
}

.event-title,
a.ev-title-link {
    color: #2D2F37;
    font-size: 26px;
    font-weight: bold;
    padding-bottom: 5px;
}

.event-details-wrap p.event-blurb {
    font-size: 24px;
    color: #000;
}

.event-blurb a {
    color: #2D2F37;
}

/* Three-column */


@media (max-width: 991px) {
    #three-column {
        text-align: center;
    }

    #three-column table {
        margin-block: 20px;
    }
}


/* Home Upcoming Events */

#upcoming-events-wrap {
    position: relative;
}

#upcoming-events-wrap:not(#mycanvas #upcoming-events-wrap)::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    z-index: -2;
    display: block;
    /*background: url(https://claverfoundation.org/redesign/images/FullMural.jpg) repeat-x 0 0;*/
    background: url(../images/header-image.png) repeat-x 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    text-align: center;
}

#upcoming-events-wrap .column {
    position: relative;
    display: block;
    padding: 60px 0;
    text-align: center;
}

#upcoming-events-wrap:not(#mycanvas #upcoming-events-wrap) .column::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    z-index: -1;
    background: rgba(0, 0, 0, 0.3);
    background-size: cover;
}

#upcoming-events-wrap:not(#mycanvas #upcoming-events-wrap) h1 {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 48px;
}

/* #upcoming-events-wrap .view a {
    color: #fff;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: bold;
    border: 2px solid #fff;
    padding: 10px 75px;
    position: relative;
    top: 35px;
}

#upcoming-events-wrap .view a:hover,
#upcoming-events-wrap .view a:focus {
    background: #fff;
    color: #383838;
    text-decoration: none;
} */

#upcoming-events-wrap .view {
    text-transform: uppercase;
    font-size: 36px;
    font-weight: bold;
    border: 2px solid #fff;
    padding: 10px 75px;
    white-space: nowrap;
    /* position: relative;
    top: 35px; */
}

#upcoming-events-wrap:not(#mycanvas #upcoming-events-wrap) .view {
    color: #fff;
}



#upcoming-events-wrap .view:hover,
#upcoming-events-wrap .view:focus {
    background: #fff;
    color: #383838;
    text-decoration: none;
}

#upcoming-events-wrap .view {
    margin-top: 40px;
}

/* Sponsor-Row */

#sponsor-row .carousel-indicators {
    display: none;
}

#sponsor-row .carousel-caption {
    display: none;
}


#sponsor-row .carousel-control {
    display: block;
    text-indent: -9999px;
}

#sponsor-row .carousel-control.left,
#sponsor-row .carousel-control.right {
    display: block;
    background-image: none;
}

#sponsor-row .carousel-control.left {
    top: unset;
    right: auto;
    bottom: 50%;
    left: 25px;
    vertical-align: middle;
    text-align: center;
    /* padding-right: 5px; */
    width: 32px;
    height: 32px;
    transform: translateY(50%);
}

#sponsor-row .carousel-control.left:after {
    content: '';
    background-image: url(../images/left-arrow.svg);
    background-position-x: 10px;
    background-position-y: center;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    position: relative;
    top: -29px;
    left: 0;
    text-indent: 0;
    background-color: #11517c;
    /* border-radius: 50%; */
}

#sponsor-row .carousel-control.right {
    top: unset;
    right: 25px;
    left: auto;
    bottom: 50%;
    margin: auto;
    vertical-align: middle;
    text-align: center;
    /* padding-left: 5px; */
    width: 32px;
    height: 32px;
    transform: translateY(50%);
}

#sponsor-row .carousel-control.right:after {
    content: '';
    background-image: url(../images/right-arrow.svg);
    background-position-x: 13px;
    background-position-y: center;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    position: relative;
    top: -29px;
    right: 0;
    text-indent: 0;
    background-color: #11517c;
    /* border-radius: 50%; */
}



/* Home What's Happening (News) */

#whats-new-wrap {
    position: relative;
    text-align: center;
}

body:has(#homepage .background-wrapper:last-of-type #whats-new-wrap) .background-wrapper:has(#whats-new-wrap){
    padding-bottom: 0;
}

#whats-new-wrap:not(#mycanvas #whats-new-wrap)::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    z-index: -2;
    /*background: url(https://host7.viethwebhosting.com/~cop1/images/happening-news.png) repeat-x 0 0;*/
    background: url(../images/feedthe_homeless.jpg) repeat-x 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: block;
    background-position: center;
}

#whats-new-wrap .column {
    position: relative;
    padding: 60px 0px;
}

#whats-new-wrap:not(#mycanvas #whats-new-wrap) .column::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--side-margin);
    right: var(--side-margin);
    z-index: -2;
    background: rgba(0, 0, 0, 0.3);
    background-size: cover;
}

#whats-new-wrap:not(#mycanvas #whats-new-wrap) h1 {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 48px;
}

/* #whats-new-wrap .view a {
    color: #fff;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: bold;
    border: 2px solid #fff;
    padding: 10px 75px;
    position: relative;
    top: 35px;
}

#whats-new-wrap .view a:hover,
#whats-new-wrap .view a:focus {
    background: #fff;
    color: #383838;
    text-decoration: none;
} */

#whats-new-wrap:not(#mycanvas #whats-new-wrap) .view {
    color: #fff;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: bold;
    border: 2px solid #fff;
    padding: 10px 75px;
    white-space: nowrap;
    /* position: relative;
    top: 35px; */
}

#whats-new-wrap .view:hover,
#whats-new-wrap .view:focus {
    background: #fff;
    color: #383838;
    text-decoration: none;
}

#whats-new-wrap .view {
    margin-top: 40px;
}




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

#slide-row {
    margin-bottom: 10px;
}

.carousel-control.left,
.carousel-control.right,
.carousel-control:hover {
    background-image: none;
    /* font-size: ;
    font-weight: ; */
    z-index: 101;
}

/* .carousel-control {
    top: ;
    width: ;
} */

.carousel-caption {
    position: absolute;
    z-index: 100;
    background-color: #002857;
    background: rgba(0, 0, 0, .6);
    padding: 10px 15px;
    left: initial;
    bottom: initial;
    right: 0px;
    top: 0px;
    width: 35%;
    text-align: left;
    text-shadow: none;
}
/* 
@media (min-width: 990px) and (max-width: 1199px) {
    .carousel-caption {}
}

@media (max-width: 990px) {
    .carousel-caption {}
    #slide-row .col-md-12 {}
} */

.carousel-caption p.caption-text {
    font-size: 28px;
    font-weight: 600;
    line-height: 33px;
    padding-bottom: 10px;
    border-bottom: 3px solid #FFE519;
    display: block;
    color: #FFE519;
    margin-bottom: 10px;
}

.carousel-caption p.alt-text {
    font-size: 16px;
    font-family: serif;
    font-style: italic;
    color: white;
    margin-bottom: 10px;
}

.carousel-caption a {
    font-weight: 700;
    background-color: #FFE519;
    max-width: 215px;
    display: block;
    border-bottom: 5px solid #E0AB03;
    border-radius: 3px;
    padding: 13px 30px;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    margin: 0px auto;
    color: #333;
}


/*----------------End Slideshow------*/


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


/*----------------------------------Primary-Content*/


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


/* Sub Pages */

#subpage {
    min-height: calc(100vh - 521px);
}


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

#footer-row {
    background: #11517c;
    color: #fff;
    padding: 80px 0px 70px;
    text-align: center;
    margin-top: 80px;
}

body:has(#homepage .background-wrapper:last-of-type #whats-new-wrap) #footer-row {
    margin-top: 0;
}

.footer-wrapper p {
    color: #fff;
    font-size: 24px;
    padding-top: 15px;
}

.footer-text a {
    color: #fff;
    font-size: 24px;
    padding-top: 15px;
}

.footer-social-media svg {
    display: inline-block;
    margin-left: 15px;
    height: 50px;
    width: 50px;
    fill: #fff;
}

.fb-img {
    margin-left: 0px !important;
}


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


/*-------------------------------End-Footer Menu*/


/*--------------------------------------------------------
	UTILITIES
--------------------------------------------------------*/


/*----------- MEDIA QUERY --------------------*/

/* @media (min-width: 1000px) {
    .container {}
} */

@media (min-width: 990px) and (max-width: 1199px) {
    /* .container {} */
    .mobile-search-menu {
        top: 40px !important;
    }
    .home-featured {
        padding-top: 10px;
    }
    .home-featured hr {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .home-featured,
    .home-featured p {
        font-size: 20px;
    }
    .home-featured h1 {
        font-size: 60px;
    }
    .home-featured a {
        font-size: 26px;
        top: 20px;
    }
    .upcoming-events-opacity,
    .whats-new-opacity {
        padding: 0;
    }
}

/* @media (max-width: 991px) {
    .container {}
} */

@media (min-width: 768px) and (max-width: 990px) {
    /* .container {} */
    #main-header {
        padding-top: 20px;
    }
    .sub-top-only #main-header {
        padding: 25px 0px;
    }
    .mobile-search-menu {
        top: 35px !important;
    }
    .home-featured {
        padding-top: 30px;
    }
    .home-featured hr {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .home-featured,
    .home-featured p {
        font-size: 16px;
    }
    .home-featured h1 {
        font-size: 40px;
    }
    .home-featured a {
        font-size: 18px;
        padding: 10px 25px;
        top: 10px;
    }
    .background-wrapper {
        padding: 50px 0px;
    }
    .home-primary-section {
        /*padding: 50px 0px;*/
        font-size: 20px;
    }
    .home-primary-section h1 {
        font-size: 38px;
    }
    #upcoming-events-wrap h1 {
        font-size: 38px;
    }
    #whats-new-wrap h2 {
        font-size: 34px;
    }
    #upcoming-events-wrap .view a,
    #whats-new-wrap .view a {
        font-size: 26px;
    }
    #upcoming-events-wrap .view,
    #whats-new-wrap .view {
        margin-top: 30px;
    }
    .upcoming-events-opacity,
    .whats-new-opacity {
        padding: 0;
    }
}

@media (max-width: 767px) {
    /* .container {} */
    #main-header {
        padding-top: 15px;
    }
    .sub-top-only #main-header {
        padding: 25px 0px;
    }
    .mobile-search-menu {
        top: 30px !important;
    }
    .home-featured {
        padding-top: 30px;
    }
    .home-featured h1 {
        font-size: 24px;
    }
    .home-featured hr {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .home-featured p {
        display: none;
    }
    .home-featured h1 {
        font-size: 28px;
    }
    .home-featured hr {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .home-featured a {
        font-size: 18px;
        padding: 5px 10px;
        top: 0px;
    }
    .background-wrapper {
        padding: 40px 0px;
    }
    .home-primary-section {
        /*padding: 35px 0px;*/
        font-size: 18px;
    }
    .home-primary-section h1 {
        font-size: 26px;
        padding-bottom: 20px;
    }
    .more-info {
        padding-top: 15px;
    }
    .more-info a {
        font-size: 18px;
    }
    .upcoming-events-opacity {
        padding: 0;
    }
    #upcoming-events-wrap h1 {
        font-size: 26px;
    }
    #upcoming-events-wrap .view {
        margin-top: 0px;
    }
    #upcoming-events-wrap .view a {
        font-size: 18px;
        padding: 10px 50px;
        top: 20px;
    }
    .home-secondary-section {
        /*padding: 35px 0px;*/
        font-size: 18px;
    }
    .home-secondary-section h2 {
        font-size: 24px;
        padding-bottom: 20px;
    }
    .whats-new-opacity {
        padding: 0;
    }
    #whats-new-wrap h1 {
        font-size: 26px;
    }
    #whats-new-wrap .view {
        margin-top: 0px;
    }
    #whats-new-wrap .view a {
        font-size: 18px;
        padding: 10px 50px;
        top: 20px;
    }
    #footer-row {
        padding: 40px 0px 30px;
        margin-top: 40px;
    }
    .footer-wrapper p,
    .footer-wrapper a {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    /* .container {} */
    #main-header {
        padding-top: 5px;
    }
    .mobile-search-menu {
        top: 15px !important;
    }
    .home-featured {
        padding-top: 30px;
    }
    .home-featured h1 {
        font-size: 24px;
    }
    .home-featured hr {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .home-featured p {
        display: none;
    }
    .home-featured h1 {
        font-size: 18px;
    }
    .home-featured hr {
        margin-top: 5px;
        margin-bottom: 2px;
    }
    .home-featured a {
        font-size: 14px;
        padding: 5px 10px;
        top: 0px;
    }
    .background-wrapper {
        padding: 25px 0px;
    }
    .home-primary-section {
        /*padding: 35px 0px;*/
        font-size: 18px;
    }
    .home-primary-section h1 {
        font-size: 26px;
        padding-bottom: 20px;
    }
    .more-info {
        padding-top: 15px;
    }
    .more-info a {
        font-size: 18px;
    }
    .upcoming-events-opacity {
        padding: 0;
    }
    #upcoming-events-wrap h1 {
        font-size: 26px;
    }
    #upcoming-events-wrap .view {
        margin-top: 0px;
    }
    #upcoming-events-wrap .view a {
        font-size: 18px;
        padding: 5px 50px;
        top: 10px;
    }
    .home-secondary-section {
        padding: 0;
        font-size: 18px;
    }
    .home-secondary-section h2 {
        font-size: 24px;
        padding-bottom: 20px;
    }
    .whats-new-opacity {
        padding: 5px 0px;
    }
    #whats-new-wrap h1 {
        font-size: 26px;
    }
    #whats-new-wrap .view {
        margin-top: 0px;
    }
    #whats-new-wrap .view a {
        font-size: 18px;
        padding: 5px 50px;
        top: 10px;
    }
    #footer-row {
        padding: 40px 0px 30px;
        margin-top: 40px;
    }
    .footer-wrapper p,
    .footer-wrapper a {
        font-size: 20px;
    }
}


/* Safari Browser */

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome,
    #logo-wrap svg {
        height: 15% !important;
    }
     ::i-block-chrome,
    #top-wrap-header {
        height: 578px;
    }
     ::i-block-chrome,
    .top-head-opacity {
        height: 578px;
    }
}


/* Internet Browser */

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    #nav-wrap {
        margin-top: 50px !important;
    }
}


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


/*------------------------------------------------------------------------------------
							Main Menu CSS
--------------------------------------------------------------------------------------*/

#nav_menu {
    padding: 0;
}

#nav_menu li.search-wrap a {
    padding-right: 0 !important;
}

#nav_menu .nav.navbar-nav {
    float: right;
}

#nav-wrap {
    margin-top: 108px;
}

#nav_menu .navbar-nav>li a {
    color: #fff;
    font-size: 16px;
    font-weight: normal;
}


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

#nav_menu .dropdown-menu {
    background-color: #fff;
    border: 0;
    border-radius: 0px;
    padding: 0px 0;
}

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

#nav_menu .dropdown-menu li a {
    color: #000;
    padding-top: 15px;
    padding-bottom: 15px;
}

#nav_menu .dropdown-menu li a:hover,
#nav_menu .dropdown-menu li a:focus {
    color: #fff;
    background: #0d4366;
}

#mobileMenuWrapper ul.mDropdown.open a {
    /* background: #fff; */
    /* color: #000 !important; */
    margin-bottom: 0;
    padding: 10px;
}

#mobileMenuWrapper ul.mDropdown.open a:hover,
#mobileMenuWrapper ul.mDropdown.open a:focus {
    color: #fff !important;
    background: #0d4366;
}


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

#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: 6px;
    border-radius: 3px;
    background-color: transparent;
    padding-left: 8px;
    padding-top: 10px;
    padding-right: 5px;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: #5485A3;
    -webkit-transition: color .25s;
    transition: color .25s;
    text-decoration: none;
}

#mobileMenuWrapper {
    /*
	The menu wrapper is the div that surrounds the mobile menu.
	You'll want to make sure this has a background of some sort so the text shows up/doesn't appear over other text
	Setting bottom:0px; is needed to make a long menu scroll-able.
	
	
	
	/* REQUIRED */
    position: fixed;
    top: 0px;
    bottom: 0px;
    /* If having the menu slide in from the top or bottom, comment out this line */
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    /* CHANGEABLE-ISH */
    left: -120%;
    /* Change this to left, right, top, or bottom.  You'll also have to make a change in the open state */
    width: 300px;
    /* The mobile menu works best with a pre-defined width. Percentages also work great here. */
    /* CHANGEABLE */
    background: #11517c;
    border-right: 2px solid #fff;
    /* Transition - bump */
    transition: left .3s;
    /* ##DIRECTION-02 */
    -webkit-transition: all 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000);
    /* older webkit */
    -webkit-transition: all 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000);
    -moz-transition: all 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000);
    -o-transition: all 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000);
    transition: all 300ms cubic-bezier(1.000, 0.010, 0.0, 1.000);
}

#mobileMenuWrapper.open {
    left: 0px;
    /* This is required.  If you changed the direction attribute above, change it here too. */
    bottom: 0px;
    /* This line is here for bottom/top slide-ins.  See note on bottom above.*/
}


/* REQUIRED - Dropdown menu item transition states*/

#mobileMenuWrapper .mDropdown {
    display: none;
}

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


/* dropdown only */

#mobileMenuWrapper .mDropdown a {
    padding: 8px;
    margin-bottom: 10px;
}

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


/*--------------------------------------------------------
    MOBILE MENU
--------------------------------------------------------*/

#mobileMenuWrapper.open {
    left: 0px;
    bottom: 0px;
}

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

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

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

#mobileMenuWrapper #mobile-menu a {
    width: 100%;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none !important;
}

#mobileMenuWrapper ul.mDropdown {
    margin: 5px 15px 0;
    display: none;
}

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

/* #mobile-menu a {} */

#mobile-toggle {
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

#mobile-logo {
    width: 40%;
    float: left;
    margin-top: 27px;
    margin-bottom: 20px;
}

#mobile-logo a {
    margin: 0 !important;
}

#mobile-logo svg#logo {
    width: 250px;
    max-width: 250px;
}

svg#burger {
    width: 40px;
    height: 40px;
}

#mobile-menu-col {
    display: inline-block;
}


/* Custom Mobile Menu */

#mobile-menu a.join-link {
    background: #16a085;
    padding: 10px 20px;
    border-radius: 7px;
    color: #fff !important;
    text-transform: uppercase;
}

#mobile-menu .mobile-login a {
    color: #16a085 !important;
    border: 1.364pt solid #16a085;
    padding: 10px 20px;
    border-radius: 7px;
    text-transform: uppercase;
    margin-top: 5px;
}


/*------------------------------------------------------------------------------------
								@Media and Sizes
--------------------------------------------------------------------------------------*/

@media (max-width: 1199px) {
    #top-wrap-header,
    .top-head-opacity {
        min-height: 500px;
    }
}


/*------ Nav collapse @ Tablet size ------*/

@media (max-width: 991px) {
    #top-wrap-header,
    .top-head-opacity {
        min-height: 450px;
    }
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
    /*.dropdown-menu {
		border: none;
		background-color: transparent;
		-webkit-box-shadow: none;
		box-shadow: none;
	}*/
}

@media (min-width: 768px) and (max-width: 990px) {
    #top-wrap-header,
    .top-head-opacity {
        min-height: 430px;
    }
}

@media (max-width: 767px) {
    #top-wrap-header,
    .top-head-opacity {
        min-height: 350px;
    }
}

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