* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #f4f4f4;
    color: #111;
    font-family: "Montserrat", sans-serif;
}

.row {
    margin-bottom: 20px;
}

.col {
    display: block;
    float: left;
    margin-left: 2%;
}

    .col:first-child {
        margin-left: 0;
    }

.span_1 {
    width: 2.25%;
}

.span_2 {
    width: 6.5%;
}

.span_3 {
    width: 10.75%;
}

.span_4 {
    width: 15.0%;
}

.span_5 {
    width: 19.25%;
}

.span_6 {
    width: 23.5%;
}

.span_7 {
    width: 27.75%;
}

.span_8 {
    width: 32.0%;
}

.span_9 {
    width: 36.25%;
}

.span_10 {
    width: 40.5%;
}

.span_11 {
    width: 44.75%;
}

.span_12 {
    width: 49.0%;
}

.span_13 {
    width: 53.25%;
}

.span_14 {
    width: 57.5%;
}

.span_15 {
    width: 61.75%;
}

.span_16 {
    width: 66.0%;
}

.span_17 {
    width: 70.25%;
}

.span_18 {
    width: 74.5%;
}

.span_19 {
    width: 78.75%;
}

.span_20 {
    width: 83.0%;
}

.span_21 {
    width: 87.25%;
}

.span_22 {
    width: 91.5%;
}

.span_23 {
    width: 95.75%;
}

.span_24 {
    width: 100%;
}

.container {
    width: 90%;
    max-width: 900px;
    margin: auto;
}

/* HERO */
.hero {
    position: relative;
    background: url("/img/Nancy-Mannion-for-Congress-Background.jpg") center/cover no-repeat;
    color: #fff;
    padding-top: 20px;
    overflow: hidden;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.10) 100%);
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 28px;
}

.hero__left {
    max-width: 640px;
}

.hero__title {
    font-size: 52px;
    line-height: 1.05;
    margin: 10px 0 8px;
    letter-spacing: .5px;
}

.hero__tagline {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}

.hero__district {
    font-size: 14px;
    opacity: .9;
    margin-bottom: 22px;
}

.hero__buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero__logoTop {
    font-size: 39px;
    font-weight: 400;
    text-transform: uppercase;
    opacity: 0.95;
}

.hero__logoMain {
    font-size: 39px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: -13px;
}

.hero__logoSub {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: -4px;
    opacity: 0.9;
    margin-bottom: 40px;
}

    .hero__logoSub span {
        color: #ff6863;
    }
/* Candidate image */
.hero__right {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.hero__candidate {
    width: min(350px, 100%);
    height: auto;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
}

/* BUTTONS */
.btn {
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    text-align: center;
    min-width: 129px;
    margin-right: 10px;
}

.btn-red {
    background: #d23a35;
    color: white;
}

.btn-outline {
    border: 2px solid white;
    color: white;
}

.btn-light {
    background: #f6e7dc;
    color: #d23a35;
    font-size: 17px;
    line-height: 15px;
}

.btn--red {
    background: #d23a35;
    color: #fff;
}

.btn--ghost {
    border: 2px solid rgba(255,255,255,.9);
    color: #fff;
}

#HeroButtons .btn:nth-child(3) {
    margin-right: 0;
}
/* FEATURES */
.features {
    padding: 45px 0;
    background: #f4f4f4;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature-card {
    background: white;
    padding: 25px;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

    .feature-card .icon {
        margin-bottom: 8px;
    }

    .feature-card h3 {
        margin-bottom: 10px;
        font-size: 18px;
        color: #001f5f;
    }

    .feature-card p {
        font-size: 14px;
        color: #555;
        margin-bottom: 15px;
        line-height: 20px;
    }

    .feature-card a {
        font-size: 14px;
        color: #005ab3;
        font-weight: bold;
        text-decoration: none;
    }

/* MEET SECTION */
.meet {
    background: white;
    padding: 55px 0;
}

.meet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
}

.meet-img img {
    width: 100%;
    border-radius: 4px;
}

.meet-text h2 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #001f5f;
}

.meet-text p {
    font-size: 14px;
    color: #444;
    margin-bottom: 15px;
    line-height: 1.6;
}

/* DONATION STRIP */
.donation-strip {
    color: white;
    padding: 17px 0;
    text-align: center;
    background-image: linear-gradient(to right, #be2828, #f34430);
}

.donation-inner h2 {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 500;
}

.donation-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* NEWS */
.news {
    padding: 55px 0;
    background: #f4f4f4;
}

.section-title {
    font-size: 26px;
    margin-bottom: 25px;
    color: #001f5f;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.news-card {
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

    .news-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
    }

.news-body {
}

    .news-body h3 {
        font-size: 19px;
        margin-bottom: 10px;
        color: #001f5f;
        font-weight: 700;
        line-height: 27px;
    }

    .news-body p {
        font-size: 14px;
        color: #555;
        margin-bottom: 15px;
        line-height: 20px;
    }

    .news-body a {
        font-size: 14px;
        color: #005ab3;
        font-weight: bold;
        text-decoration: none;
    }

.news-card h3, .news-card p {
    padding: 8px 15px;
    margin: 0;
}

/* FOOTER */
.site-footer {
    background: #0b1a33; /* deep campaign navy */
    color: #fff;
    font-family: "Montserrat", sans-serif;
}

.site-footer__inner {
    padding: 44px 0 32px;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.2fr;
    gap: 28px;
    align-items: start;
}

/* Brand */
.site-footer__name {
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.site-footer__sub {
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 12px;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 14px;
}

.site-footer__meta {
    font-size: 13px;
    opacity: .9;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

    .site-footer__meta a {
        color: #fff;
        text-decoration: none;
        opacity: .9;
    }

        .site-footer__meta a:hover {
            opacity: 1;
            text-decoration: underline;
        }

    .site-footer__meta .dot {
        opacity: .6;
    }

/* Nav */
.site-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    padding-top: 4px;
}

    .site-footer__nav a {
        color: #fff;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .3px;
        opacity: .9;
    }

        .site-footer__nav a:hover {
            opacity: 1;
            text-decoration: underline;
        }

/* CTA */
.site-footer__ctaTitle {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    opacity: .9;
    margin-bottom: 10px;
}

.site-footer__form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 0px;
}

.NewsLetterSignUp form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 0px;
}

.NewsLetterSignUp .fieldNewNoLbl {
    margin: 0;
    margin-bottom: 10px;
}

.NewsLetterSignUp .formSubmit {
    margin-top: 0;
}

.site-footer__form input[type=text] {
    height: 42px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #fff;
    padding: 0 12px;
    font-size: 13px;
    outline: none;
}

.site-footer__form input::placeholder {
    color: rgba(255,255,255,.7);
}

.site-footer__form .formSubmmitButton {
    height: 42px;
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,.9);
    background: transparent;
    color: #fff;
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 12px;
    padding: 0 14px;
    cursor: pointer;
    text-transform: uppercase;
}

    .site-footer__form .formSubmmitButton:hover {
        background: rgba(255,255,255,.12);
    }

.site-footer__fine {
    font-size: 11px;
    line-height: 1.4;
    opacity: .75;
}

/* Bottom strip */
.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.18);
}

.site-footer__bottomInner {
    padding: 14px 0;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    opacity: .85;
}

.paidfor {
    font-weight: 700;
    letter-spacing: .3px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        padding: 34px 0 24px;
        text-align: center;
    }

    .site-footer__meta {
        justify-content: center;
    }

    .site-footer__nav {
        grid-template-columns: repeat(3, auto);
        justify-content: center;
    }

    .site-footer__form {
        grid-template-columns: 1fr;
    }

    .site-footer__bottomInner {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 520px) {
    .site-footer__nav {
        grid-template-columns: repeat(2, auto);
        gap: 10px 16px;
    }
}


/* ADMIN FIX VIEW */
.AdminView .hero-text {
    display: flex;
}
/* RESPONSIVE */
@media(max-width: 900px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .meet-grid {
        grid-template-columns: 1fr;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .hero-text h1 {
        font-size: 34px;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .hero__right {
        justify-content: center;
    }

    .hero__title {
        font-size: 38px;
    }
}

@media(max-width: 560px) {
    a.btn.btn-light {
        width: 100%;
        margin-bottom: 10px;
    }
}

@media(max-width: 600px) {
    div#HeroButtons .btn {
        display: block;
        margin-bottom: 10px;
    }
}

@media(min-width: 901px) and (max-width: 1010px) {
    .btn {
        padding: 12px 9px;
        margin-right: 2px;
    }
}

.site-footer__form .warningNew {
    color: #ff7263;
    font-size: 13px;
    font-weight: 700;
}

.hero__logo a {
    color: white;
    text-decoration: none;
}

.page-hero {
    background: url("/img/Nancy-Mannion-for-Congress-Background.jpg") center/cover no-repeat;
    padding: 55px 0;
    position: relative;
    color: white;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.page-hero__inner {
    position: relative;
    text-align: left;
}

.page-hero__title {
    font-size: 44px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.page-hero__subtitle {
    font-size: 15px;
    /*max-width: 650px;*/
    opacity: 0.9;
    line-height: 1.6;
}

.page-content {
    background: #f4f4f4;
    padding: 55px 0;
}

.page-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 30px;
    align-items: start;
}

.page-main {
    background: white;
    padding: 35px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

    .page-main h2 {
        font-size: 22px;
        font-weight: 900;
        margin-bottom: 12px;
        color: #001f5f;
    }

    .page-main p {
        font-size: 15px;
        line-height: 1.7;
        color: #444;
        margin-bottom: 15px;
    }

.page-sidebar .sidebar-box {
    background: white;
    padding: 25px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.sidebar-box h3 {
    font-size: 14px;
    font-weight: 900;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #001f5f;
}

.sidebar-box a {
    display: block;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #003366;
}

    .sidebar-box a:hover {
        text-decoration: underline;
    }

aside.page-sidebar {
    max-width: 300px;
}

@media(max-width: 900px) {
    .page-grid {
        grid-template-columns: 1fr;
    }

    aside.page-sidebar {
        max-width: initial;
        text-align: center;
    }
}


div#NewSideBar img {
    max-width: 100%;
}

div#NewSideBar > div {
    margin-bottom: 35px;
}


.mgList {
    list-style: none;
    padding-left: 0 !important;
    margin: 0;
}

    /* Each event block */
    .mgList > li.eventLinkURL {
    }

        .mgList > li.eventLinkURL:last-child {
            border-bottom: none;
        }

        .mgList > li.eventLinkURL:hover {
            background: #fafafa;
        }

/* Head area */
.eventHead {
    margin: 0 0 5px;
    display: grid;
    grid-template-columns: 18px 1fr;
    column-gap: 10px;
    align-items: start;
    font-family: "Montserrat", sans-serif;
}

.eventStar {
    color: #001f5f; /* your navy */
    font-size: 16px;
    line-height: 1.2;
    margin-top: 2px;
    text-align: right;
}

.eventTitle {
    font-size: 20px;
    font-weight: 900;
    color: #001f5f;
    line-height: 1.2;
}

/* Meta row (date/time) */
.eventMeta {
    grid-column: 2 / -1;
    margin-top: 6px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 700;
}

.eventDateList {
    color: #d23a35; /* your campaign red */
}

.eventTime {
    color: #001f5f;
    opacity: .9;
}

/* Location */
.eventWhere {
    margin-left: 28px; /* aligns under title */
    font-family: "Montserrat", sans-serif;
    margin-top:5px;
}

.eventVenue {
    font-size: 13px;
    color: #111;
}

.eventAddr {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
}

/* Mobile spacing */
@media (max-width: 520px) {
    .mgList > li.eventLinkURL {
        padding: 16px 14px;
    }

    .eventTitle {
        font-size: 16px;
    }
}

/* Hover Effect (A + B combined) */
.mgList > li.eventLinkURL {
}

    /* Left accent bar */
    .mgList > li.eventLinkURL::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: transparent;
        transition: background .2s ease;
    }

    /* Hover styles */
    .mgList > li.eventLinkURL:hover {
        background-color: #fafafa;
        box-shadow: 0 6px 18px rgba(0,0,0,.08);
        transform: translateY(-1px);
        cursor: pointer;
    }

        .mgList > li.eventLinkURL:hover::before {
            background: #d23a35; /* campaign red */
        }

/* Mobile / touch devices: prevent hover weirdness */
@media (hover: none) {
    .mgList > li.eventLinkURL:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Hover Effect (A + B combined) */
.mgList > li.eventLinkURL {
    position: relative;
    transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
    padding: 12px 18px;
    padding-bottom: 4px;
}

    /* Left accent bar */
    .mgList > li.eventLinkURL::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: transparent;
        transition: background .2s ease;
    }

    /* Hover styles */
    .mgList > li.eventLinkURL:hover {
        background-color: #fafafa;
        box-shadow: 0 6px 18px rgba(0,0,0,.08);
        transform: translateY(-1px);
        cursor: pointer;
    }

        .mgList > li.eventLinkURL:hover::before {
            background: #d23a35; /* campaign red */
        }

/* Mobile / touch devices: prevent hover weirdness */
@media (hover: none) {
    .mgList > li.eventLinkURL:hover {
        transform: none;
        box-shadow: none;
    }
}

.mgList > li.eventLinkURL:hover .eventtitleList {
    color: #001f5f;
    text-decoration: underline;
}

.event-note {
    font-size: 12px;
    color: #666;
    margin-top: 18px;
    font-style: italic;
    text-align: center;
}

.sidebar-socialIcons {
    margin-top: 18px;
    display: flex;
    gap: 10px;
}

.social-icon-dark {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(11,26,51,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #001f5f;
    transition: 0.2s ease;
}

    .social-icon-dark i {
        font-size: 16px;
    }


.event-share-btn {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    border: 1px solid rgba(11,26,51,.22);
    background: #fff;
    color: #001f5f;
    border-radius: 4px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: .2s ease;
}

    .event-share-btn:hover {
        background: rgba(11,26,51,.06);
        border-color: rgba(11,26,51,.35);
    }

/* ===== Event Details Page Skin (for your existing DB markup) ===== */

.Engine #Main.Main {
    font-family: "Montserrat", sans-serif;
}

/* Remove ?old layout? feel */
.Engine #Main .innerMain {
    padding: 0;
}

/* Title */
.Engine #Main0 h1 {
    font-size: 28px;
    font-weight: 900;
    color: #001f5f;
    margin: 0 0 18px;
    line-height: 1.2;
    text-transform: none;
}

/* The big gray block holding date + location */
.Engine #Main0 > div[style*="background: #e6eaf2"] {
    background: #fafafa !important;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 18px !important;
    margin: 0 0 16px !important;
    text-align: left !important;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 18px;
    align-items: stretch;
}

/* Date box */
#joinusDate {
    background: #fff;
    border: 2px solid rgba(11,26,51,.22);
    border-radius: 6px;
    padding: 14px 12px;
    text-align: center;
}

    /* Day / Month / Date / Time */
    #joinusDate p {
        margin: 0;
        padding: 0;
        line-height: 1.1;
    }

        #joinusDate p:nth-child(1) {
            font-weight: 900;
            letter-spacing: 1px;
            color: #001f5f;
            text-transform: uppercase;
            font-size: 13px;
        }

        #joinusDate p:nth-child(2) {
            font-weight: 900;
            color: #d23a35;
            text-transform: uppercase;
            font-size: 13px;
            margin-top: 6px;
        }

        #joinusDate p:nth-child(3) {
            font-weight: 900;
            color: #d23a35;
            font-size: 46px;
            margin: 8px 0;
        }

        #joinusDate p:nth-child(4) {
            font-weight: 800;
            color: #001f5f;
            font-size: 13px;
            letter-spacing: .6px;
            text-transform: uppercase;
        }

/* Location block */
#joinusloc {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 14px 16px;
    display: block;
}

    /* Venue */
    #joinusloc b {
        display: block;
        font-size: 18px;
        font-weight: 900;
        color: #001f5f;
        margin-bottom: 6px;
    }

/* Address line after <b> is currently plain text; make it behave nicer */
#joinusloc {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

    /* Your city line (already styled inline) ? just ensure font matches */
    #joinusloc p {
        font-family: "Montserrat", sans-serif !important;
        font-weight: 800;
        letter-spacing: .2px;
    }

/* RSVP section title */
.Engine #Main1 h2 {
    margin: 24px 0 14px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #001f5f;
}

/* Wrap RSVP form into a ?card? feel */
.newForm.nmRSVP {
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
    padding: 18px;
}

/* Form labels */
.fieldToplabel {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #001f5f;
    margin-bottom: 6px;
}

/* Inputs + textarea */
input.textField,
textarea.textField {
    width: 100%;
    border: 1px solid rgba(11,26,51,.20);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
    outline: none;
    font-family: "Montserrat", sans-serif;
}

textarea.textField {
    min-height: 140px;
    resize: vertical;
}

/* Field spacing */
.fieldNew {
    margin-bottom: 14px;
}

/* Checkbox rows */
.fieldNewNoLbl {
    margin: 10px 0;
    font-size: 13px;
    font-weight: 700;
    color: #001f5f;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .fieldNewNoLbl input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #001f5f;
    }

/* Hide warning ?&nbsp;? blocks when empty space bothers you */
.warningNew {
    font-size: 12px;
    color: #d23a35;
}

/* Submit button */
.formSubmit {
    margin-top: 14px;
}

.formSubmmitButton {
    background: #001f5f;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 16px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    cursor: pointer;
}

    .formSubmmitButton:hover {
        background: #122a52;
    }

/* Mobile */
@media(max-width: 900px) {
    .Engine #Main0 > div[style*="background: #e6eaf2"] {
        grid-template-columns: 1fr;
    }
}

.a2a_default_style {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.page-main h1 {
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 12px;
    color: #001f5f;
}

a.signupasvolunteer, body#Meet-NancyEvents a.a2a_dd {
    text-decoration: none;
    background: #ededed;
    padding: 0px 10px 2px 10px;
    margin-left: 10px;
    border-radius: 10px;
    color: #555555;
    font-size: 16px;
}

    a.signupasvolunteer:hover, body#Meet-NancyEvents a.a2a_dd:hover {
        background: #dae0ec;
    }

ul.selectEventList {
    list-style: none;
    padding: 0;
    text-align: left;
}

/* Hover Effect (A + B combined) */
.selectEventList > li {
    position: relative;
    transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
    padding: 10px 5px;
}

    /* Left accent bar */
    .selectEventList > li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: transparent;
        transition: background .2s ease;
    }

    /* Hover styles */
    .selectEventList > li:hover {
        background-color: #fafafa;
        box-shadow: 0 6px 18px rgba(0,0,0,.08);
        transform: translateY(-1px);
        cursor: pointer;
    }

        .selectEventList > li:hover::before {
            background: #d23a35; /* campaign red */
        }

/* Mobile / touch devices: prevent hover weirdness */
@media (hover: none) {
    .selectEventList > li:hover {
        transform: none;
        box-shadow: none;
    }
}

.timeslo.bookedts {
    background: #e0e0e0;
}

.timeslo {
    width: 13%;
    height: 50px;
    display: inline-block;
    border: 1px solid grey;
    margin: 0.5%;
}

    .timeslo.reservedts {
        background: #ffd9cd;
    }

    .timeslo.availablets {
        background: #c9e6c9;
        cursor: pointer;
    }

        .timeslo.availablets:hover {
            background: #2abe2a;
        }

    .timeslo.selectedts {
        background: #0000ff !important;
        border-color: blue;
    }

div#spotSection {
    margin-top: 59px;
}

div#dpForm {
    text-align: center;
}

.dpField input {
    padding: 12px 10px;
    border: 1px solid darkgrey;
    border-radius: 3px;
    width: 100%;
}

.dpField {
    margin: 13px 0;
    text-align: left;
}

    .dpField > div {
        font-size: 20px;
        color: #001f5f;
    }

        .dpField > div > span {
            color: red;
        }

.dpSection > p {
    font-size: 19px;
    color: rgb(237 27 36);
    padding: 10px 0;
}


div#spotSection > p {
    font-size: 22px;
    font-family: 'Comfortaa', cursive;
    color: rgb(89 0 77);
    text-shadow: 0 0 17px rgb(97, 40, 87);
    padding: 10px 0;
}

div#availableSpots {
    max-width: 410px;
    margin: 0 auto;
    padding: 0 0 20px 0;
    border-radius: 3px;
}

div#eDate {
    background: #d7c9d5;
    color: #733d6d;
    padding: 5px 0;
    font-weight: bold;
    line-height: 23px;
}

.timeslo.selectedts {
    background: #b1029e !important;
    border-color: #b1029e;
}

.tsTitle {
    padding: 13px 0 3px;
}

#extraInfo textarea#comments {
    padding: 10px;
    height: 100px;
    border: 1px solid darkgrey;
    border-radius: 3px;
    width: 100%;
}

div#extraInfo {
    margin-top: 35px;
}

button#submitit {
    color: white;
    text-decoration: none;
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 50px;
    background: #001f5f;
    border: none;
    border-radius: 4px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    padding: 12px 16px;
}

    button#submitit:hover {
    }

div#spotSection > p > span {
    color: red;
}

.legentitem > div {
    width: 17px;
    height: 17px;
    display: inline-block;
    border: 1px solid grey;
    margin: 2px;
    position: relative;
    top: 5px;
}

div#legend {
    text-align: left;
    margin: 18px 0 0 62px;
    font-size: 14px;
}

.l1 {
    background: #95ce95;
}

.l2 {
    background: #ffd9cd;
}

.l3 {
    background: #e0e0e0;
}

.l4 {
    background: #b1029e;
    border-color: #b1029e;
}

a.signupasvolunteer, body#Meet-NancyEvents a.a2a_dd {
    text-decoration: none;
    background: #ededed;
    padding: 0px 10px 2px 10px;
    margin-left: 10px;
    border-radius: 10px;
    color: #555555;
    font-size: 16px;
}

    a.signupasvolunteer:hover, body#Meet-NancyEvents a.a2a_dd:hover {
        background: #dae0ec;
    }


a.signupasvolunteerevent {
    text-decoration: none;
    color: white;
    background: #223d96;
    padding: 8px !important;
    margin-left: 2px;
    border-radius: 4px;
}

a.btnVolunteernow:hover {
    background: #284177;
}

a.btnVolunteernow {
    padding: 9px 33px;
    text-decoration: none;
    font-size: 30px;
    background: #374f9f;
    color: white;
    border-radius: 5px;
}

.volunteerBtnFrame {
    text-align: center;
}

.legentitem > div.l5 {
    border-style: dashed;
}

.timeslo.lockedts {
    border-style: dashed;
}

button.selectdiffevent {
    margin-left: 26px;
    padding: 4px 10px;
    color: white;
    text-decoration: none;
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 50px;
    background: #001f5f;
    border: none;
    border-radius: 4px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
}

button:hover {
    cursor: pointer;
}

button#submitit:hover, button.selectdiffevent:hover {
    background: #0b1a33;
}

li.shareEventListed {
    padding-left: 33px;
    margin-bottom: 15px;
    margin-top: 5px;
}

body#Contact-Us .fname, body#VolunteerSign-Up .fname {
    float: none !important;
    width: 49%;
    display: inline-block;
    margin-right: 1% !important;
    padding-right: 0 !important;
}

body#Contact-Us .lname, body#VolunteerSign-Up .lname {
    width: 49%;
    display: inline-block;
}

body#Contact-Us .phone, body#VolunteerSign-Up .phone {
    float: none !important;
    padding-right: 0 !important;
    width: 68%;
    margin-right: 2%;
    display: inline-block;
}

body#Contact-Us .zipcode, body#VolunteerSign-Up .zipcode {
    width: 30%;
    display: inline-block;
}

body#Contact-Us .fieldNew.interestedin > div, body#VolunteerSign-Up .fieldNew.interestedin > div {
    padding-top: 7px;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #001f5f;
}

body#Contact-Us .fieldNew.interestedin > div > label, body#VolunteerSign-Up .fieldNew.interestedin > div > label {
    margin: 10px 0;
    font-size: 13px;
    font-weight: 700;
    color: #001f5f;
    align-items: center;
    padding-left: 7px;
    position: relative;
    top: -4px;
}

.fieldlabel {
    font-size: 14px;
}

#Endorsements img.D1 {
    float: left;
    padding: 20px;
    max-width: 230px;
}

.BodyHighlightFrame {
    font-family: 'Cabin', sans-serif;
    background-image: linear-gradient(to right, #be2828, #f34430);
    padding: 20px 40px 10px 40px;
    margin-bottom: 10px;
}

    .BodyHighlightFrame p {
        padding: 0;
        margin: 0;
        color: white;
        margin-bottom: 10px;
        text-align: justify;
        font-size: 17px;
    }

.dpField > div {
    font-size: 20px;
    color: #001f5f;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #001f5f;
    margin-bottom: 6px;
}

.news-card .newsImgFullBox img {
    height: 357px;
    width: auto;
}

main.page-main img {
    max-width: 100%;
}

i.eventCancelled {
    color: #ed1b24;
}

li.iscanceled1 .eventStar {
    color: #ff0000;
}

li.iscanceled1 .eventStar {
    color: #ff0000;
    font-size: 23px;
    margin-top: 0;
    font-weight: bold;
}

li.iscanceled1.eventLinkURL {
    margin-bottom: 18px;
}

.mgList > li.iscanceled1.eventLinkURL:hover {
    background: none;
    cursor: default;
    box-shadow: none;
}

    .mgList > li.iscanceled1.eventLinkURL:hover::before {
        background: grey;
    }

.eventDateDetails {
    margin-left: 28px;
    font-family: "Montserrat", sans-serif;
    color: #001f5f;
    font-weight: 600;
    display: flex;
    grid-column: 1 / -1;
    font-size: 16px;
}
body#VolunteerSign-Up a.signupasvolunteer {
    margin-left: 26px;
}
body#VolunteerSign-Up .eventWhere {
    margin-bottom: 10px;
}