/* =========================================================
   OPMA GLOBAL TYPOGRAPHY
   CLEAN / MODERN / CPMA-INSPIRED
========================================================= */


/* =========================================================
   BASE FONT & BODY TEXT
========================================================= */

body,
p,
.idMainContent {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #333333;
}


/* =========================================================
   HEADINGS
========================================================= */

h1 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 2.75rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #002766;
    margin-bottom: 1rem;
}

h2 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #002766;
    margin-bottom: 0.8rem;
}

h3 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #002766;
    margin-bottom: 0.7rem;
}

h4 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #002766;
}

h5 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #002766;
}

h6 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #002766;
}


/* =========================================================
   LINKS
========================================================= */

a {
    font-family: Arial, Helvetica, sans-serif !important;
}


/* =========================================================
   BUTTON TYPOGRAPHY
========================================================= */

a.buttonStyle001,
a.buttonStyle002,
a.buttonStyle003,
a.buttonStyle001:link,
a.buttonStyle002:link,
a.buttonStyle003:link {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
}


/* =========================================================
   LISTS
========================================================= */

ul,
ol,
li {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}


/* =========================================================
   SMALL TEXT
========================================================= */

small {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}


/* =========================================================
   MOBILE TYPOGRAPHY
========================================================= */

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

    body,
    p,
    .idMainContent {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    h1 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.9rem !important;
        line-height: 1.25 !important;
    }

    h3 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    h4 {
        font-size: 1.2rem !important;
    }

    h5 {
        font-size: 1.1rem !important;
    }

    h6 {
        font-size: 1rem !important;
    }

    a.buttonStyle001,
    a.buttonStyle002,
    a.buttonStyle003,
    a.buttonStyle001:link,
    a.buttonStyle002:link,
    a.buttonStyle003:link {
        font-size: 1rem !important;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

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

    body,
    p,
    .idMainContent {
        font-size: 1rem !important;
    }

    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    h3 {
        font-size: 1.35rem !important;
    }

    h4 {
        font-size: 1.15rem !important;
    }

}


/* =========================================================
   GLOBAL MOBILE HIDE
========================================================= */

@media (max-width: 767px) {

    .hide-on-mobile {
        display: none !important;
    }

}


/* =========================================================
   MOBILE PANEL
========================================================= */

.WaGadgetMobilePanel .mobilePanel {
    background: #002766;
}

.WaGadgetMobilePanel .mobilePanel .menuInner ul {
    background: #002766 !important;
    color: #97383D !important;
}

.WaGadgetMobilePanel .mobilePanel .menuInner ul li a {
    color: #ffffff !important;
}


/* =========================================================
   BUTTON STYLES
========================================================= */

a.buttonStyle001,
a:link.buttonStyle001 {

    border: 2px solid #002766;
    border-radius: 5px;

    transition: all 0.3s ease;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem !important;
}

a.buttonStyle001:hover,
a:link.buttonStyle001:hover {
    border: 2px solid #ffffff;
}


a.buttonStyle002,
a:link.buttonStyle002 {

    border: 2px solid #ffffff;
    border-radius: 5px;

    transition: all 0.3s ease;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem !important;
}

a.buttonStyle002:hover,
a:link.buttonStyle002:hover {
    border: 2px solid #ffffff;
}


a.buttonStyle003,
a:link.buttonStyle003 {

    border: 2px solid #ffffff;
    border-radius: 5px;

    transition: all 0.3s ease;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem !important;
}

a.buttonStyle003:hover,
a:link.buttonStyle003:hover {
    border: 2px solid #0056b3;
}


/* =========================================================
   IMAGE BOX
========================================================= */

.image-box {

    margin: 20px;

    background: #ffffff;

    border-radius: 20px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.20);

    box-sizing: border-box;
}


.image-box-img {

    display: block;

    width: 100%;
    height: auto;

    border-radius: 12px;
}


/* =========================================================
   MEMBERSHIP BANNER
========================================================= */

.membership-banner {

    background-color: ;

    color: #ffffff;

    width: 100%;
    max-width: 100%;

    padding: 60px 20px;

    box-sizing: border-box;

    text-align: left;

    overflow: hidden;

    font-family: Arial, Helvetica, sans-serif !important;
}


.membership-banner-content {

    width: 100%;
    max-width: 1100px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    min-width: 0;
}


/* =========================================================
   MEMBERSHIP TITLE
========================================================= */

.membership-banner-title {

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 2.75rem !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;

    margin: 0 0 20px 0;
    padding: 0;

    text-align: left;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    overflow-wrap: break-word;
}


/* =========================================================
   MEMBERSHIP BODY
========================================================= */

.membership-banner-content p {

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 1rem !important;

    line-height: 1.6 !important;

    max-width: 600px;

    margin: 0 0 25px 0;
    padding: 0;

    text-align: left;

    box-sizing: border-box;

    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* =========================================================
   MEMBERSHIP BUTTON
========================================================= */

.membership-banner-button {

    display: inline-block;

    background-color: #ffc107;

    color: #333333;

    padding: 12px 28px;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 1rem !important;

    font-weight: 700 !important;

    line-height: 1.25 !important;

    text-decoration: none;

    border-radius: 5px;

    box-sizing: border-box;

    transition: background-color 0.3s ease;
}


.membership-banner-button:hover {
    background-color: #e0a800;
}


/* =========================================================
   MEMBERSHIP BANNER - MOBILE
========================================================= */

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

    .membership-banner {

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

        padding: 40px 20px !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    .membership-banner-content {

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

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

        box-sizing: border-box !important;

        min-width: 0 !important;
    }


    .membership-banner-title {

        font-size: 2.2rem !important;

        line-height: 1.2 !important;

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

        margin: 0 0 18px 0 !important;

        padding: 0 !important;

        overflow-wrap: anywhere !important;

        word-break: normal !important;
    }


    .membership-banner-content p {

        font-size: 1rem !important;

        line-height: 1.6 !important;

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

        margin: 0 0 25px 0 !important;

        padding: 0 !important;

        overflow-wrap: anywhere !important;
    }


    .membership-banner-button {

        font-size: 1rem !important;

        padding: 12px 24px !important;

        max-width: 100% !important;

        white-space: normal !important;
    }

}


/* =========================================================
   MEMBERSHIP BANNER - SMALL PHONES
========================================================= */

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

    .membership-banner {
        padding: 35px 16px !important;
    }


    .membership-banner-title {

        font-size: 2rem !important;

        line-height: 1.2 !important;
    }


    .membership-banner-content p {

        font-size: 1rem !important;

        line-height: 1.6 !important;
    }


    .membership-banner-button {

        font-size: 1rem !important;

        padding: 11px 22px !important;
    }

}


/* =========================================================
   WILD APRICOT CONTENT CONTAINERS
========================================================= */

#id_hJNLMSD,
#id_elqJn1g {

    max-width: 1200px;

    width: 100%;

    margin: 15vh auto;
}


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

    #id_hJNLMSD,
    #id_elqJn1g {

        margin: 0 auto;
    }

}


/* =========================================================
   STATIC PAGE BANNER
   Heading + Body + Button
========================================================= */

.OPMAStaticBanner {

    position: relative;

    width: 100%;

    height: 600px;

    overflow: hidden;

    font-family: Arial, Helvetica, sans-serif !important;
}


/* =========================================================
   STATIC BANNER IMAGE
========================================================= */

.OPMAStaticBanner > img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   STATIC BANNER OVERLAY
========================================================= */

.OPMAStaticBanner-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.45) 45%,
            rgba(0, 0, 0, 0.10) 100%
        );
}


/* =========================================================
   STATIC BANNER CONTENT
   Matches 1200px OPMA sections
========================================================= */

.OPMAStaticBanner-content {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 40px 0;

    box-sizing: border-box;

    text-align: left;
}


/* =========================================================
   STATIC BANNER HEADING
========================================================= */

.OPMAStaticBanner-heading {

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: clamp(
        2.5rem,
        4vw,
        3.2rem
    ) !important;

    line-height: 1.15 !important;

    font-weight: 700 !important;

    max-width: 650px;

    margin: 0 0 20px 0;

    padding: 0;
}


/* =========================================================
   STATIC BANNER BODY
========================================================= */

.OPMAStaticBanner-text {

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 1rem !important;

    line-height: 1.6 !important;

    max-width: 600px;

    margin: 0 0 30px 0;

    padding: 0;
}


/* =========================================================
   STATIC BANNER BUTTON
========================================================= */

.OPMAStaticBanner-button {

    display: inline-block;

    background: #ffffff;

    color: #002766;

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 1rem !important;

    font-weight: 700 !important;

    line-height: 1.25 !important;

    text-decoration: none;

    padding: 12px 28px;

    border: 2px solid #ffffff;

    border-radius: 5px;

    box-sizing: border-box;

    transition: all 0.3s ease;
}


.OPMAStaticBanner-button:hover {

    background: #002766;

    color: #ffffff;

    border-color: #002766;
}


/* =========================================================
   STATIC BANNER TABLET
========================================================= */

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

    .OPMAStaticBanner-content {

        padding-left: 30px;

        padding-right: 30px;
    }

}


/* =========================================================
   STATIC BANNER MOBILE
========================================================= */

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

    .OPMAStaticBanner {

        height: 500px;
    }


    .OPMAStaticBanner-content {

        padding: 30px 25px;
    }


    .OPMAStaticBanner-heading {

        font-size: 2.2rem !important;

        line-height: 1.2 !important;

        max-width: 100%;

        margin-bottom: 15px;
    }


    .OPMAStaticBanner-text {

        font-size: 1rem !important;

        line-height: 1.6 !important;

        max-width: 600px;

        margin-bottom: 25px;
    }


    .OPMAStaticBanner-button {

        font-size: 1rem !important;

        padding: 12px 24px;
    }

}


/* =========================================================
   STATIC BANNER SMALL PHONES
========================================================= */

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

    .OPMAStaticBanner {

        height: 450px;
    }


    .OPMAStaticBanner-content {

        padding: 25px 20px;
    }


    .OPMAStaticBanner-heading {

        font-size: 2rem !important;
    }


    .OPMAStaticBanner-text {

        font-size: 1rem !important;

        line-height: 1.55 !important;
    }


    .OPMAStaticBanner-button {

        font-size: 1rem !important;

        padding: 11px 22px;
    }

}