/* ==================================================================
   ROTARY CLUB OF COLUMBIA/PATUXENT
   Ning Custom Stylesheet — Version 2
   September 2026
   ==================================================================

   ROTARY PALETTE

   Rotary Dark Blue:  #17458f
   Rotary Blue:       #0077c8
   Rotary Gold:       #f7a81b

   Body Text:         #333333
   Secondary Text:    #555555
   Page Background:   #f6f7f8
   Border Gray:       #e8eaec

   ================================================================== */


/* ==================================================================
   1. GLOBAL TYPOGRAPHY
   ================================================================== */

body {
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: #0077c8;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #17458f;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #17458f;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    line-height: 1.25;
}

p {
    line-height: 1.65;
}


/* ==================================================================
   2. SITE WIDTH
   ================================================================== */

.site-header.container,
.site-body.container {
    width: auto !important;
    max-width: 1180px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==================================================================
   3. HEADER / LOGO

   Do NOT assign a background to .site-headerFrame.
   Ning supplies the Columbia lake photograph.
   ================================================================== */

.site-headerFrame {
    border: 0 !important;
    box-shadow: none !important;
}

.site-nameLogo {
    text-align: center !important;
}

.header-siteNameLogo {
    margin: 0 !important;
    padding: 0 !important;
}

.header-logoImage {
    display: block !important;
    text-align: center !important;
}

.header-logoIMG {
    display: block;

    width: auto !important;
    max-width: 900px !important;
    max-height: 280px !important;

    margin: 0 auto !important;
}


/* ==================================================================
   4. MAIN NAVIGATION
   ================================================================== */

.header-nav.navbar {
    background: #ffffff !important;
    background-image: none !important;

    border: 0 !important;
    border-top: 1px solid #e5e5e5 !important;
    border-bottom: 1px solid #e5e5e5 !important;

    box-shadow: none !important;

    margin: 20px 0 0 !important;
    padding: 0 !important;
}

.header-nav .mainTab {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff !important;

    list-style: none !important;
}

.header-nav .mainTab-item {
    display: block !important;
    float: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
}

.header-nav .mainTab-item > a {
    position: relative;

    display: flex !important;
    align-items: center !important;

    height: 52px;

    margin: 0 !important;
    padding: 0 15px !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: #17458f !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    text-shadow: none !important;

    transition:
        color .2s ease,
        background-color .2s ease;
}

.header-nav .mainTab-item > a > span {
    color: inherit !important;

    background: transparent !important;

    border: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    text-shadow: none !important;
}


/* ==================================================================
   5. NAVIGATION HOVER / ACTIVE STATE
   ================================================================== */

.header-nav .mainTab-item > a::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 0;

    height: 3px;

    background: #f7a81b;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .2s ease;
}

.header-nav .mainTab-item > a:hover {
    color: #0077c8 !important;
    background: #f7f8f9 !important;
}

.header-nav .mainTab-item > a:hover::after {
    transform: scaleX(1);
}

.header-nav .mainTab-item.active > a,
.header-nav .mainTab-item.current > a,
.header-nav .mainTab-item.selected > a,
.header-nav .mainTab-item > a.active,
.header-nav .mainTab-item > a.current {
    color: #0077c8 !important;
}

.header-nav .mainTab-item.active > a::after,
.header-nav .mainTab-item.current > a::after,
.header-nav .mainTab-item.selected > a::after,
.header-nav .mainTab-item > a.active::after,
.header-nav .mainTab-item > a.current::after {
    transform: scaleX(1);
}

/* ==================================================================
   MAIN NAVIGATION — DROPDOWN MENUS
   ================================================================== */


/* Dropdown container */

.header-nav .mainTab-item ul,
.header-nav .mainTab-item .subTab,
.header-nav .mainTab-item .subMenu {
    min-width: 210px !important;

    margin: 0 !important;
    padding: 6px 0 !important;

    background: #ffffff !important;
    background-image: none !important;

    border: 1px solid #dfe3e6 !important;
    border-top: 3px solid #f7a81b !important;
    border-radius: 0 0 3px 3px !important;

    box-shadow: 0 6px 16px rgba(0, 0, 0, .14) !important;
}


/* Individual submenu items */

.header-nav .mainTab-item ul li,
.header-nav .mainTab-item .subTab li,
.header-nav .mainTab-item .subMenu li {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
}


/* Submenu links */

.header-nav .mainTab-item ul li > a,
.header-nav .mainTab-item .subTab li > a,
.header-nav .mainTab-item .subMenu li > a {
    display: block !important;

    box-sizing: border-box !important;
    width: 100% !important;

    margin: 0 !important;
    padding: 11px 16px !important;

    background: #ffffff !important;
    background-image: none !important;

    border: 0 !important;

    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;

    white-space: nowrap !important;

    transition:
        background-color .15s ease,
        color .15s ease,
        padding-left .15s ease;
}


/* Hover / keyboard focus */

.header-nav .mainTab-item ul li > a:hover,
.header-nav .mainTab-item ul li > a:focus,
.header-nav .mainTab-item .subTab li > a:hover,
.header-nav .mainTab-item .subTab li > a:focus,
.header-nav .mainTab-item .subMenu li > a:hover,
.header-nav .mainTab-item .subMenu li > a:focus {
    background: #f6f7f8 !important;

    color: #0077c8 !important;

    padding-left: 20px !important;
}


/* Gold indicator on hover */

.header-nav .mainTab-item ul li > a:hover,
.header-nav .mainTab-item ul li > a:focus {
    border-left: 4px solid #f7a81b !important;
}


/* Prevent top-level navigation underline treatment
   from being inherited by submenu links */

.header-nav .mainTab-item ul li > a::after,
.header-nav .mainTab-item .subTab li > a::after,
.header-nav .mainTab-item .subMenu li > a::after {
    display: none !important;
}
/* ==================================================================
   6. DONATE NAVIGATION BUTTON
   ================================================================== */

.header-nav .mainTab-item >
a[href*="virtual-happy-dollars"] {
    background: #f7a81b !important;
    color: #17458f !important;

    font-weight: 700 !important;

    padding-left: 20px !important;
    padding-right: 20px !important;
}

.header-nav .mainTab-item >
a[href*="virtual-happy-dollars"]:hover {
    background: #e89a00 !important;
    color: #17458f !important;
}

.header-nav .mainTab-item >
a[href*="virtual-happy-dollars"]::after {
    display: none !important;
}


/* ==================================================================
   7. MAIN PAGE BODY
   ================================================================== */

.site-bodyFrame {
    background: #f6f7f8 !important;
    background-image: none !important;
}

.content-body.entry {
    background: transparent !important;
}


/* ==================================================================
   8. HOMEPAGE TITLE
   ================================================================== */

.page-home .content-header {
    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    padding-top: 28px !important;
    padding-bottom: 20px !important;
}

.page-home .content-header h1,
.page-home .content-header h2,
.page-home .content-header h3 {
    color: #17458f !important;

    font-weight: 600 !important;

    text-shadow: none !important;
}


/* ==================================================================
   9. HOMEPAGE GRID
   ================================================================== */

.page-home .content-body.entry .row {
    margin-top: 5px;
}

.page-home .column-wide,
.page-home .column-narrow {
    box-sizing: border-box;
}


/* ==================================================================
   10. HOMEPAGE CARDS
   ================================================================== */

.page-home .grid-frame.sheet {
    background: #ffffff !important;
    background-image: none !important;

    border: 1px solid #e8eaec !important;
    border-radius: 2px !important;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, .035) !important;

    margin-bottom: 28px !important;
    padding: 0 !important;
}


/* ==================================================================
   11. STANDARD MODULE HEADERS

   Handles custom HTML modules where .module-header is directly
   inside the card.
   ================================================================== */

.page-home .grid-frame.sheet > .module-header {
    box-sizing: border-box !important;

    background: #ffffff !important;
    background-image: none !important;

    border: 0 !important;
    border-bottom: 3px solid #f7a81b !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    margin: 0 !important;
    padding: 14px 18px 11px 18px !important;

    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;

    text-shadow: none !important;
}

/* ==================================================================
   CUSTOM HTML MODULE HEADER TYPOGRAPHY

   Forces custom HTML module titles to match Events / Blog.
   ================================================================== */

.page-home .section-html > .module-header,
.page-home .section-html > .module-header *,
.page-home .section-html > .module-header .module-name,
.page-home .section-html > .module-header .module-name a {
    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;

    text-decoration: none !important;
    text-shadow: none !important;
}
/* ==================================================================
   12. NING WRAPPED MODULE HEADERS

   Native Ning modules such as Events and Blog wrap module-header
   inside .section_header.
   ================================================================== */

.page-home .grid-frame.sheet > .section_header {
    display: block !important;
    position: static !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 0 !important;
    box-shadow: none !important;
}

.page-home .grid-frame.sheet >
.section_header > .module-header {
    display: block !important;
    position: static !important;

    width: auto !important;

    margin: 0 !important;
    padding: 14px 18px 11px 18px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;
    background-image: none !important;

    border: 0 !important;
    border-bottom: 3px solid #f7a81b !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: #17458f !important;
}

.page-home .grid-frame.sheet
.section_header .module-name {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

.page-home .grid-frame.sheet
.section_header .module-name > a {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #17458f !important;

    background: transparent !important;

    font: inherit !important;

    text-decoration: none !important;
    text-shadow: none !important;
}

.page-home .grid-frame.sheet
.section_header .module-name > a:hover {
    color: #0077c8 !important;
}


/* ==================================================================
   13. STANDARD MODULE BODY
   ================================================================== */

.page-home .grid-frame.sheet > .module-body {
    background: #ffffff !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    padding: 20px 18px 24px 18px !important;

    color: #333333 !important;

    font-size: 16px !important;
    line-height: 1.65 !important;
}

.page-home .grid-frame.sheet .entry-content {
    color: #333333 !important;
    line-height: 1.65 !important;
}

.page-home .grid-frame.sheet .entry-content p {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.page-home .grid-frame.sheet .entry-content a {
    color: #0077c8 !important;
    text-decoration: none !important;
}

.page-home .grid-frame.sheet .entry-content a:hover {
    color: #17458f !important;
    text-decoration: underline !important;
}


/* ==================================================================
   14. GENERAL MODULE IMAGES
   ================================================================== */

.page-home .grid-frame.sheet img {
    max-width: 100% !important;
    height: auto !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* ==================================================================
   15. CENTER COLUMN HTML MODULES

   Allows large graphics such as Weekly Meeting to make better use
   of the wide center column.
   ================================================================== */

.page-home .column-wide
.section-html > .module-body {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.page-home .column-wide
.section-html .entry-content img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* ==================================================================
   16. MEETING / JOIN US MODULE
   ================================================================== */

.meeting-info .meeting-time {
    color: #17458f !important;

    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;

    margin-bottom: 18px !important;
}

.meeting-info strong {
    color: #17458f;
}


/* ==================================================================
   17. ROTARY CALL-TO-ACTION BUTTON
   ================================================================== */

.rotary-cta {
    display: inline-block !important;

    background: #0077c8 !important;
    color: #ffffff !important;

    padding: 10px 18px !important;

    border: 0 !important;
    border-radius: 2px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    transition: background-color .2s ease;
}

.rotary-cta:hover {
    background: #17458f !important;
    color: #ffffff !important;

    text-decoration: none !important;
}


/* ==================================================================
   18. EVENTS MODULE
   ================================================================== */

.page-home .section-eventBundle
.detailedColumnEvents {
    padding: 18px 16px !important;

    color: #333333 !important;

    font-size: 14px !important;
    line-height: 1.45 !important;
}


/* Individual event */

.page-home .detailedColumnEvents > .entry {
    display: block !important;

    margin: 0 0 22px 0 !important;
    padding: 0 0 22px 0 !important;

    border-bottom: 1px solid #dfe3e6 !important;

    overflow: hidden !important;
}

.page-home .detailedColumnEvents > .entry:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    border-bottom: 0 !important;
}


/* Remove event thumbnails */

.page-home .detailedColumnEvents
.eventPage-image {
    display: none !important;
}


/* Reset Ning media layout */

.page-home .detailedColumnEvents
.entry-headline.media-frame {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

.page-home .detailedColumnEvents
.media-body {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* Event title */

.page-home .detailedColumnEvents
.entry-title {
    display: block !important;

    margin: 0 0 8px 0 !important;
    padding: 0 !important;

    color: #17458f !important;

    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

.page-home .detailedColumnEvents
.entry-title a {
    color: #17458f !important;

    font: inherit !important;

    text-decoration: none !important;
}

.page-home .detailedColumnEvents
.entry-title a:hover {
    color: #0077c8 !important;
}


/* Event date / time */

.page-home .detailedColumnEvents
.media-body > .entry-byline:first-of-type {
    margin: 0 0 5px 0 !important;

    color: #0077c8 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}


/* Event location */

.page-home .detailedColumnEvents
.media-body > .entry-byline:nth-of-type(2) {
    margin: 0 !important;

    color: #555555 !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}


/* Hide description / author detail on homepage */

.page-home .detailedColumnEvents
.media-body > ul {
    display: none !important;
}


/* Clear floats */

.page-home .detailedColumnEvents >
.entry::after {
    content: "";

    display: table;
    clear: both;
}


/* ==================================================================
   19. EVENTS FOOTER / VIEW ALL
   ================================================================== */

.page-home .section-eventBundle >
.module-footer {
    box-sizing: border-box !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 4px 18px 18px 18px !important;

    text-align: right !important;

    background: #ffffff !important;

    border: 0 !important;
}

.page-home .section-eventBundle >
.module-footer > a.pull-right {
    float: none !important;
    position: static !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #0077c8 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

.page-home .section-eventBundle >
.module-footer > a.pull-right:hover {
    color: #17458f !important;
    text-decoration: underline !important;
}


/* ==================================================================
   20. BLOG MODULE
   ================================================================== */

.page-home .section-blogBundle
.blogSection-entry {
    display: block !important;

    margin: 0 0 26px 0 !important;
    padding: 0 0 26px 0 !important;

    border-bottom: 1px solid #dfe3e6 !important;
}

.page-home .section-blogBundle
.blogSection-entry:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;

    border-bottom: 0 !important;
}


/* Hide author avatar */

.page-home .section-blogBundle
.blogSection-entry .avatar-frame {
    display: none !important;
}


/* Reset Ning media layout */

.page-home .section-blogBundle
.blogSection-entry .entry-headline.media-frame {
    display: block !important;

    width: 100% !important;

    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.page-home .section-blogBundle
.blogSection-entry .media-body {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* Blog title */

.page-home .section-blogBundle
.blogSection-entry .entry-title {
    display: block !important;

    margin: 0 0 7px 0 !important;
    padding: 0 !important;

    color: #17458f !important;

    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

.page-home .section-blogBundle
.blogSection-entry .entry-title a {
    color: #17458f !important;

    font: inherit !important;

    text-decoration: none !important;
}

.page-home .section-blogBundle
.blogSection-entry .entry-title a:hover {
    color: #0077c8 !important;
}


/* Blog byline */

.page-home .section-blogBundle
.blogSection-entry .entry-byline {
    margin: 0 !important;
    padding: 0 !important;

    color: #666666 !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.page-home .section-blogBundle
.blogSection-entry .entry-headline hr {
    display: none !important;
}


/* Blog feature image */

.page-home .section-blogBundle
.blogSection-entry > header + a {
    display: block !important;

    margin: 14px 0 16px 0 !important;
    padding: 0 !important;
}

.page-home .section-blogBundle
.blogSection-entry > header + a img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Blog excerpt — four lines */

.page-home .section-blogBundle
.blogSection-entry > .entry-content {
    display: -webkit-box !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;

    overflow: hidden !important;

    margin: 0 0 12px 0 !important;
    padding: 0 !important;

    color: #444444 !important;

    font-size: 14px !important;
    line-height: 1.55 !important;
}

.page-home .section-blogBundle
.blogSection-entry > .entry-content p {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}


/* Read More */

.page-home .section-blogBundle
.blogSection-entry > .entry-readMore {
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #0077c8 !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

.page-home .section-blogBundle
.blogSection-entry > .entry-readMore:hover {
    color: #17458f !important;
    text-decoration: underline !important;
}


/* Hide comments / tags */

.page-home .section-blogBundle
.blogSection-entry > .entry-footnote {
    display: none !important;
}


/* ==================================================================
   21. BLOG FOOTER / VIEW ALL
   ================================================================== */

.page-home .section-blogBundle >
.module-footer {
    box-sizing: border-box !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 4px 18px 18px 18px !important;

    text-align: right !important;

    background: #ffffff !important;

    border: 0 !important;
}

.page-home .section-blogBundle >
.module-footer > a.pull-right {
    float: none !important;
    position: static !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #0077c8 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

.page-home .section-blogBundle >
.module-footer > a.pull-right:hover {
    color: #17458f !important;
    text-decoration: underline !important;
}


/* ==================================================================
   22. GENERAL NING BUTTONS
   ================================================================== */

.button,
a.button,
input.button,
input[type="submit"],
button {
    background: #0077c8 !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 0 !important;
    border-radius: 3px !important;

    box-shadow: none !important;
    text-shadow: none !important;
}

.button:hover,
a.button:hover,
input[type="submit"]:hover,
button:hover {
    background: #17458f !important;
    color: #ffffff !important;
}


/* ==================================================================
   23. OPTIONAL ROTARY CALLOUT
   ================================================================== */

.rotary-callout {
    background: #ffffff;

    border-left: 5px solid #f7a81b;

    padding: 25px 30px;
    margin: 25px 0;
}

.rotary-callout h2,
.rotary-callout h3 {
    color: #17458f;
    margin-top: 0;
}


/* ==================================================================
   24. OPTIONAL ROTARY EYEBROW
   ================================================================== */

.rotary-eyebrow {
    color: #0077c8;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.3px;
    text-transform: uppercase;

    margin-bottom: 8px;
}


/* ==================================================================
   25. FOOTER
   ================================================================== */

.site-footerFrame {
    background: #17458f !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 0 !important;
}

.site-footerFrame a {
    color: #ffffff !important;
}

.site-footerFrame a:hover {
    color: #f7a81b !important;
}


/* ==================================================================
   26. MOBILE NAVIGATION BUTTON
   ================================================================== */

.header-nav .occasional-button .button {
    background: #17458f !important;

    color: #ffffff !important;

    border: 0 !important;
    border-radius: 3px !important;

    box-shadow: none !important;
}


/* ==================================================================
   27. TABLET / SMALL DESKTOP
   ================================================================== */

@media screen and (max-width: 1000px) {

    .site-header.container,
    .site-body.container {
        max-width: 94% !important;
    }

    .header-logoIMG {
        max-width: 90% !important;
        height: auto !important;
    }

    .header-nav .mainTab-item > a {
        padding-left: 11px !important;
        padding-right: 11px !important;

        font-size: 14px !important;
    }

}


/* ==================================================================
   28. MOBILE
   ================================================================== */

@media screen and (max-width: 767px) {

    body {
        font-size: 16px;
    }


    /* Logo */

    .header-logoIMG {
        width: auto !important;
        max-width: 95% !important;
        max-height: none !important;

        margin: 0 auto !important;
    }


    /* Navigation */

    .header-nav.navbar {
        margin-top: 12px !important;
    }

    .header-nav .mainTab {
        display: block !important;
    }

    .header-nav .mainTab-item {
        display: block !important;
        width: 100% !important;
    }

    .header-nav .mainTab-item > a {
        display: block !important;

        height: auto !important;

        padding: 13px 16px !important;

        border-bottom:
            1px solid #eeeeee !important;
    }

    .header-nav .mainTab-item > a::after {
        display: none !important;
    }


    /* Donate */

    .header-nav .mainTab-item >
    a[href*="virtual-happy-dollars"] {
        background: #f7a81b !important;

        padding: 13px 16px !important;
    }


    /* Main content */

    .site-body.container {
        max-width: 94% !important;
    }


    /* Cards */

    .page-home .grid-frame.sheet {
        margin-bottom: 22px !important;
    }

    .page-home .grid-frame.sheet > .module-header,
    .page-home .grid-frame.sheet >
    .section_header > .module-header {
        padding: 13px 15px 10px 15px !important;
    }

    .page-home .grid-frame.sheet > .module-body {
        padding: 17px 15px 21px 15px !important;
    }


    /* Events */

    .page-home .section-eventBundle
    .detailedColumnEvents {
        padding: 17px 15px !important;
    }


    /* Event and Blog footers */

    .page-home .section-eventBundle > .module-footer,
    .page-home .section-blogBundle > .module-footer {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

}

/* ==================================================================
   MEMBERS MODULE — HOMEPAGE
   Preserve Ning's native 2-column / 3-row behavior
   ================================================================== */


/* --------------------------------------------------------------
   Module heading
   -------------------------------------------------------------- */

.page-home .section-members .module-header,
.page-home .section-members .module-header *,
.page-home .section-members .module-name,
.page-home .section-members .module-name a {
    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;

    text-decoration: none !important;
    text-shadow: none !important;
}


/* --------------------------------------------------------------
   Members list

   IMPORTANT:
   Do not change display, height, overflow, or positioning here.
   Ning uses those properties to limit the module to 3 rows.
   -------------------------------------------------------------- */

.page-home .section-members
.membersSection-smallAvatars {
    margin-top: 0 !important;

    padding-top: 20px !important;
    padding-bottom: 12px !important;
}


/* --------------------------------------------------------------
   Individual visible member cells

   Preserve Ning's dimensions and positioning.
   -------------------------------------------------------------- */

.page-home .section-members
.membersSection-avatar {
    margin-top: 0 !important;
    margin-bottom: 12px !important;

    text-align: center !important;
}


/* --------------------------------------------------------------
   Avatar
   -------------------------------------------------------------- */

.page-home .section-members
.membersSection-avatar .avatar-frame {
    margin-bottom: 7px !important;
}

.page-home .section-members
.membersSection-avatar .avatar-frame img {
    border-radius: 8px !important;

    box-shadow: none !important;
}


/* --------------------------------------------------------------
   Member name
   -------------------------------------------------------------- */

.page-home .section-members
.membersListPage-userName {
    margin-top: 0 !important;

    color: #17458f !important;

    line-height: 1.3 !important;

    text-align: center !important;
}

.page-home .section-members
.membersListPage-userName > a {
    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    text-decoration: none !important;
}

.page-home .section-members
.membersListPage-userName > a:hover {
    color: #0077c8 !important;

    text-decoration: none !important;
}


/* ==================================================================
   MEMBERS — VIEW ALL
   ================================================================== */

.page-home .section-members > .module-footer {
    box-sizing: border-box !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 4px 18px 18px 18px !important;

    text-align: right !important;

    background: #ffffff !important;

    border: 0 !important;
}

.page-home .section-members >
.module-footer > a.pull-right {
    float: none !important;
    position: static !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #0077c8 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}

.page-home .section-members >
.module-footer > a.pull-right:hover {
    color: #17458f !important;

    text-decoration: underline !important;
}

/* ==================================================================
   MEMBERS — SHOW ONLY FIRST SIX ON HOMEPAGE
   ================================================================== */

/* Explicitly hide members 7 and beyond */

.page-home .section-members
.membersSection-smallAvatars > .membersSection-avatar:nth-child(n+7) {
    display: none !important;
}

.page-home .section-members >
.module-footer > a.pull-right:hover {
    color: #17458f !important;
    text-decoration: underline !important;
}

.page-home .section-members > .module-footer {
    padding-top: 0 !important;
    padding-right: 18px !important;
    padding-bottom: 16px !important;
    padding-left: 18px !important;
}

/* Tighten bottom of member list */

.page-home .section-members
.membersSection-smallAvatars {
    padding-bottom: 0 !important;
}


/* ==================================================================
   CLUB INFO PAGE
   ================================================================== */


/* --------------------------------------------------------------
   Page background
   -------------------------------------------------------------- */

.page-club-info .site-bodyFrame {
    background: #f6f7f8 !important;
}


/* --------------------------------------------------------------
   Main content area
   -------------------------------------------------------------- */

.page-club-info .content-body.entry {
    max-width: 1000px !important;

    margin: 0 auto 40px auto !important;
    padding: 36px 44px 44px 44px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #e8eaec !important;
    border-radius: 2px !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .035) !important;
}


/* --------------------------------------------------------------
   Page title
   -------------------------------------------------------------- */

.page-club-info .content-header {
    max-width: 1000px !important;

    margin: 30px auto 0 auto !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 1px solid #e8eaec !important;
    border-bottom: 0 !important;
}

.page-club-info .content-header h1 {
    margin: 0 !important;
    padding: 22px 44px 16px 44px !important;

    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    border-bottom: 3px solid #f7a81b !important;

    text-shadow: none !important;
}


/* --------------------------------------------------------------
   Article typography
   -------------------------------------------------------------- */

.page-club-info .entry-content {
    color: #333333 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.page-club-info .entry-content p {
    margin: 0 0 20px 0 !important;
}


/* --------------------------------------------------------------
   Main introductory heading
   -------------------------------------------------------------- */

.page-club-info .entry-content h3 {
    margin: 0 0 22px 0 !important;

    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}


/* --------------------------------------------------------------
   Other headings
   -------------------------------------------------------------- */

.page-club-info .entry-content h2,
.page-club-info .entry-content h4 {
    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}


/* --------------------------------------------------------------
   Links
   -------------------------------------------------------------- */

.page-club-info .entry-content a {
    color: #0077c8 !important;

    font-weight: 600 !important;

    text-decoration: none !important;
}

.page-club-info .entry-content a:hover {
    color: #17458f !important;

    text-decoration: underline !important;
}


/* --------------------------------------------------------------
   Images
   -------------------------------------------------------------- */

.page-club-info .entry-content img {
    max-width: 100% !important;
    height: auto !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* --------------------------------------------------------------
   Horizontal rules
   -------------------------------------------------------------- */

.page-club-info .entry-content hr {
    height: 1px !important;

    margin: 30px 0 !important;

    background: #dfe3e6 !important;

    border: 0 !important;
}


/* --------------------------------------------------------------
   Strong text
   -------------------------------------------------------------- */

.page-club-info .entry-content strong {
    color: #17458f;

    font-weight: 600;
}


/* ==================================================================
   CLUB INFO — MOBILE
   ================================================================== */

@media screen and (max-width: 767px) {

    .page-club-info .content-header {
        margin-top: 20px !important;
    }

    .page-club-info .content-header h1 {
        padding: 18px 20px 14px 20px !important;

        font-size: 26px !important;
    }

    .page-club-info .content-body.entry {
        padding: 26px 20px 32px 20px !important;
    }

    .page-club-info .entry-content h3 {
        font-size: 21px !important;
    }

}

/* ==================================================================
   CLUB INFO — OFFICERS & DIRECTORS
   ================================================================== */

.page-club-info .rotary-leadership {
    margin-top: 38px;
}

.page-club-info .rotary-leadership > h2 {
    margin: 0 0 22px 0 !important;
    padding: 0 0 10px 0 !important;

    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;

    border-bottom: 3px solid #f7a81b;
}


/* Two-column grid */

.page-club-info .rotary-leadership-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 40px;
    row-gap: 0;
}


/* Individual officer/director */

.page-club-info .rotary-leader {
    padding: 16px 0 17px 0;

    border-bottom: 1px solid #e1e4e6;
}


/* Position */

.page-club-info .rotary-role {
    margin-bottom: 3px;

    color: #0077c8;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: .4px;
    text-transform: uppercase;
}


/* Person's name */

.page-club-info .rotary-name {
    color: #333333;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}


/* Mobile */

@media screen and (max-width: 650px) {

    .page-club-info .rotary-leadership-grid {
        grid-template-columns: 1fr;
    }

    .page-club-info .rotary-leader {
        padding: 13px 0 14px 0;
    }

}

/* ==================================================================
   ABOUT ROTARY INTERNATIONAL PAGE
   ================================================================== */


/* Page background */

.page-about-rotary-international .site-bodyFrame {
    background: #f6f7f8 !important;
}


/* Main content card */

.page-about-rotary-international .content-body.entry {
    max-width: 1000px !important;

    margin: 0 auto 40px auto !important;
    padding: 36px 44px 44px 44px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #e8eaec !important;
    border-radius: 2px !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .035) !important;
}


/* Page heading */

.page-about-rotary-international .content-header {
    max-width: 1000px !important;

    margin: 30px auto 0 auto !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 1px solid #e8eaec !important;
    border-bottom: 0 !important;
}

.page-about-rotary-international .content-header h1 {
    margin: 0 !important;
    padding: 22px 44px 16px 44px !important;

    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    border-bottom: 3px solid #f7a81b !important;

    text-shadow: none !important;
}


/* Content typography */

.page-about-rotary-international .entry-content {
    color: #333333 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.page-about-rotary-international .entry-content p {
    margin: 0 0 20px 0 !important;
}


/* Headings */

.page-about-rotary-international .entry-content h2,
.page-about-rotary-international .entry-content h3 {
    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.page-about-rotary-international .entry-content h3 {
    margin: 0 0 22px 0 !important;

    font-size: 24px !important;
}


/* Links */

.page-about-rotary-international .entry-content a {
    color: #0077c8 !important;

    font-weight: 600 !important;

    text-decoration: none !important;
}

.page-about-rotary-international .entry-content a:hover {
    color: #17458f !important;

    text-decoration: underline !important;
}


/* Images */

.page-about-rotary-international .entry-content img {
    max-width: 100% !important;
    height: auto !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Mobile */

@media screen and (max-width: 767px) {

    .page-about-rotary-international .content-header {
        margin-top: 20px !important;
    }

    .page-about-rotary-international .content-header h1 {
        padding: 18px 20px 14px 20px !important;

        font-size: 26px !important;
    }

    .page-about-rotary-international .content-body.entry {
        padding: 26px 20px 32px 20px !important;
    }

    .page-about-rotary-international .entry-content h3 {
        font-size: 21px !important;
    }

}

/* ==================================================================
   ABOUT ROTARY — CONTENT COMPONENTS
   ================================================================== */

.page-about-rotary-international .rotary-about > h2 {
    margin: 0 0 12px 0 !important;

    color: #17458f !important;

    font-size: 27px !important;
    font-weight: 600 !important;
}


/* Introductory statement */

.page-about-rotary-international .rotary-intro {
    margin-bottom: 26px !important;

    color: #17458f !important;

    font-size: 20px !important;
    line-height: 1.5 !important;
}


/* Local Rotary callout */

.page-about-rotary-international .rotary-about-callout {
    margin: 32px 0 !important;
    padding: 26px 30px !important;

    background: #f6f7f8 !important;

    border-left: 5px solid #f7a81b !important;
}

.page-about-rotary-international .rotary-about-callout h3 {
    margin: 0 0 14px 0 !important;

    color: #17458f !important;

    font-size: 21px !important;
}


/* Learn more section */

.page-about-rotary-international .rotary-learn-more {
    margin-top: 34px !important;
    padding-top: 26px !important;

    border-top: 1px solid #dfe3e6 !important;
}

.page-about-rotary-international .rotary-learn-more h3 {
    margin: 0 0 12px 0 !important;
}


/* Secondary link beside CTA */

.page-about-rotary-international .rotary-secondary-link {
    display: inline-block !important;

    margin-left: 18px !important;

    color: #17458f !important;

    font-weight: 600 !important;
}


/* Mobile */

@media screen and (max-width: 600px) {

    .page-about-rotary-international .rotary-intro {
        font-size: 18px !important;
    }

    .page-about-rotary-international .rotary-about-callout {
        padding: 21px 20px !important;
    }

    .page-about-rotary-international .rotary-secondary-link {
        display: block !important;

        margin: 16px 0 0 0 !important;
    }

}

/* ==================================================================
   INTERNATIONAL SERVICE PAGE
   ================================================================== */


/* --------------------------------------------------------------
   Page background
   -------------------------------------------------------------- */

.page-international-giving .site-bodyFrame {
    background: #f6f7f8 !important;
}


/* --------------------------------------------------------------
   Main content card
   -------------------------------------------------------------- */

.page-international-giving .content-body.entry {
    max-width: 1000px !important;

    margin: 0 auto 40px auto !important;
    padding: 36px 44px 44px 44px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #e8eaec !important;
    border-radius: 2px !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .035) !important;
}


/* --------------------------------------------------------------
   Page title
   -------------------------------------------------------------- */

.page-international-giving .content-header {
    max-width: 1000px !important;

    margin: 30px auto 0 auto !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 1px solid #e8eaec !important;
    border-bottom: 0 !important;
}

.page-international-giving .content-header h1 {
    margin: 0 !important;
    padding: 22px 44px 16px 44px !important;

    color: #17458f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    border-bottom: 3px solid #f7a81b !important;

    text-shadow: none !important;
}


/* --------------------------------------------------------------
   General typography
   -------------------------------------------------------------- */

.page-international-giving .entry-content {
    color: #333333 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.page-international-giving .entry-content p {
    margin: 0 0 20px 0 !important;
}


/* --------------------------------------------------------------
   Opening heading
   -------------------------------------------------------------- */

.page-international-giving .rotary-international > h2 {
    margin: 0 0 12px 0 !important;

    color: #17458f !important;

    font-size: 27px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}


/* --------------------------------------------------------------
   Introductory statement
   -------------------------------------------------------------- */

.page-international-giving .rotary-intro {
    margin-bottom: 26px !important;

    color: #17458f !important;

    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}


/* --------------------------------------------------------------
   Standard content sections
   -------------------------------------------------------------- */

.page-international-giving
.rotary-international-section {
    margin-top: 34px !important;
    padding-top: 28px !important;

    border-top: 1px solid #dfe3e6 !important;
}

.page-international-giving
.rotary-international-section h3 {
    margin: 0 0 14px 0 !important;

    color: #17458f !important;

    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}


/* --------------------------------------------------------------
   GLOBAL PARTNERSHIP CALLOUT
   -------------------------------------------------------------- */

.page-international-giving
.rotary-international-callout {
    margin: 36px 0 !important;
    padding: 27px 30px 28px 30px !important;

    background: #f6f7f8 !important;

    border-left: 5px solid #f7a81b !important;
}

.page-international-giving
.rotary-international-callout h3 {
    margin: 0 0 14px 0 !important;

    color: #17458f !important;

    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.page-international-giving
.rotary-international-callout p:last-child {
    margin-bottom: 0 !important;
}


/* --------------------------------------------------------------
   STRONG TEXT
   -------------------------------------------------------------- */

.page-international-giving .entry-content strong {
    color: #17458f !important;

    font-weight: 600 !important;
}


/* --------------------------------------------------------------
   GET INVOLVED
   -------------------------------------------------------------- */

.page-international-giving
.rotary-get-involved {
    margin-top: 38px !important;
    padding: 28px 30px 30px 30px !important;

    background: #17458f !important;

    color: #ffffff !important;

    border-top: 5px solid #f7a81b !important;
}

.page-international-giving
.rotary-get-involved h3 {
    margin: 0 0 14px 0 !important;

    color: #ffffff !important;

    font-size: 23px !important;
    font-weight: 600 !important;
}

.page-international-giving
.rotary-get-involved p {
    color: #ffffff !important;
}

.page-international-giving
.rotary-get-involved-action {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}


/* Gold CTA inside blue Get Involved box */

.page-international-giving
.rotary-get-involved .rotary-cta {
    background: #f7a81b !important;

    color: #17458f !important;

    font-weight: 700 !important;
}

.page-international-giving
.rotary-get-involved .rotary-cta:hover {
    background: #ffffff !important;

    color: #17458f !important;
}


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

.page-international-giving .entry-content a {
    color: #0077c8;

    font-weight: 600;

    text-decoration: none;
}

.page-international-giving .entry-content a:hover {
    color: #17458f;

    text-decoration: underline;
}


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

@media screen and (max-width: 767px) {

    .page-international-giving .content-header {
        margin-top: 20px !important;
    }

    .page-international-giving .content-header h1 {
        padding: 18px 20px 14px 20px !important;

        font-size: 26px !important;
    }

    .page-international-giving .content-body.entry {
        padding: 26px 20px 32px 20px !important;
    }

    .page-international-giving
    .rotary-international > h2 {
        font-size: 23px !important;
    }

    .page-international-giving
    .rotary-intro {
        font-size: 18px !important;
    }

    .page-international-giving
    .rotary-international-callout {
        padding: 22px 20px !important;
    }

    .page-international-giving
    .rotary-get-involved {
        padding: 24px 20px 26px 20px !important;
    }

}
/* ==================================================================
   END — COLUMBIA/PATUXENT ROTARY CUSTOM CSS V2
   ================================================================== */