/*

Theme Name: ZebraSite Theme

Version: 4.0

Description: Divi Child Theme for Rare Disease Advocacy

Author: Ben Forred

Template: Divi

Author URL: https://zebrasitestudios.com

*/

@import url('https://fonts.googleapis.com/css2?family=Baskervville&display=swap');

/*-------My Theme Customizations------- */



:root {

    --base-color: hsl(0, 0%, 94%);
    --base-color-transparent: hsla(0, 0%, 98%, 0.9);
    --base-variant: hsl(0, 0%, 96%);
    --base-darkest: hsl(0, 0%, 0%);
    --text-color: #525252;
	--sub-heading-text-color: hsl(197, 55%, 40%);
    --heading-text-color: hsl(228, 52%, 18%);
    --primary-color:hsl(227, 53%, 18%);
    --primary-color-transparent:hsla(227, 53%, 18%, 0.9);
    --secondary-color:#8cc7d9;
    --accent-color: #e35f6c;
    --tertiary-color: hsl(188, 24%, 18%);
    --background-img-overlay1: hsla(0, 0%, 90%, 0.7);
    --background-img-overlay2: hsla(0, 0%, 90%, 0.6);
    --background-img-overlay3: hsl(0, 0%, 94%);
    --background-img-overlay4: hsla(0, 0%, 94%, 0.5);
    --gray1: hsl(0, 0%, 94%);
    --gray2: hsl(0, 0%, 70%);
    --gray3: hsl(0, 0%, 55%);
}



body.dark-mode {
    --base-color: hsl(238, 42%, 13%);
    --base-color-transparent: hsla(238, 42%, 13%, 0.6);
    --base-variant: hsl(0, 0%, 96%);
    --text-color: hsl(0, 0%, 90%);  
    --sub-heading-text-color: hsl(194, 43%, 68%);
	--heading-text-color: hsl(227, 53%, 82%);
    --primary-color: hsl(227, 65%, 13%);
    --primary-color-transparent:hsla(227, 65%, 13%, 0.9);
    --secondary-color:hsl(195, 36%, 20%);
    --accent-color: hsl(354, 79%, 60%);
    --tertiary-color: hsl(188, 24%, 18%);
    --background-img-overlay1: hsla(202, 82%, 6%, 0.7);
    --background-img-overlay2: hsl(202, 82%, 6%, 0.6);
    --background-img-overlay3: hsl(202, 82%, 6%);
    --background-img-overlay4: hsla(202, 82%, 6%, 0.5);
    --gray1: hsl(0, 0%, 11%);
    --gray2: hsla(0, 0%, 30%);
    --gray3: hsl(0, 0%, 40%);
}


/* Section Background Classes */

/* Primary color background */

.et_pb_section.primary-color {
    background-color: var(--primary-color) !important;
}

/* Secondary color background */

.et_pb_section.secondary-color {
    background-color: var(--secondary-color) !important;
}





/* ------ Font Size Multiplier ------ */

:root {
    --font-size-multiplier: 1;
}


li.enlarge-font.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-873 {
    max-width: 3rem;
    max-height: 3rem;
    padding: 3px;
}



.dark-mode li.enlarge-font.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-873 {

    background-color: white !important;

    border: 1px solid transparent;

    border-radius: 50%;

}



li.enlarge-font.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-873:hover {

    cursor: pointer;

}





/*----- Default Dynamic Font Settings -----*/



html {

    font-size: 62.5%;

}



.fwd-font-size h1 {

    font-size: clamp(3rem, calc(3rem + ((1vw - 0.32rem) * 1.6026)) * var(--font-size-multiplier), calc(6.7rem * var(--font-size-multiplier))) !important;
    color: var(--heading-text-color) !important;
    text-align: center;

}



.fwd-font-size h2 {

    font-size: clamp(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 1.2821))* var(--font-size-multiplier), calc(3.5rem * var(--font-size-multiplier)));

    color: var(--heading-text-color);

    text-align: center;

}



.fwd-font-size h3 {

    font-size: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 1.2821))* var(--font-size-multiplier), calc(3rem * var(--font-size-multiplier)));

    color: var(--heading-text-color);

    text-align: center;

}



.fwd-font-size h4 {

    font-size: clamp(1.8rem, calc(1.8rem + ((1vw - 0.32rem) * 0.7692))* var(--font-size-multiplier), calc(3rem * var(--font-size-multiplier)));
    color: var(--heading-text-color);
}



.fwd-font-size h5 {

    font-size: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.5769))* var(--font-size-multiplier), calc(2.5rem * var(--font-size-multiplier)));
    color: var(--heading-text-color);
}



.fwd-font-size h6 {

    font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.3846))* var(--font-size-multiplier), calc(2rem * var(--font-size-multiplier)));
    color: var(--heading-text-color);
}



.fwd-font-size p, .fwd-font-size li {

    color: var(--text-color);

}



.fwd-font-size p, .fwd-font-size li, .fwd-font-size a, #top-menu a  {

    font-size: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.1282))* var(--font-size-multiplier), calc(1.8rem * var(--font-size-multiplier)));

}



.fwd-font-size a {

    color: var(--accent-color);

    font-weight: 600;

}



/*--------- Theme Elements --------- */



.fwd-btn {
    font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.641))* var(--font-size-multiplier), calc(1.8rem * var(--font-size-multiplier)));
    background-color: var(--accent-color);
    color: var(--base-color);
    border: 2px solid var(--base-color);
    border-radius: 10rem;
    min-width: fit-content;
}

.dark-mode .fwd-btn {
    border: 2px solid transparent;
}

.fwd-btn:hover {
    background-color: var(--base-color) !important;
    color: var(--accent-color);
    border: 2px solid var(--accent-color) !important;
    transition: border 300ms ease-in-out;
} 

.fwd-btn:active {
    margin-top: 0rem;
}

/* Section divider (bottom section before the footer)
If a bottom divider is added to the section just above the footer, the SVG data URL info needs to be changed for light/dark mode. Adjust the hex codes to the appropriate light and dark modes that correspond to whatever the background color of the footer is.

Adjust: fill="%23[insert hex code here]" for each of the background images below*/

.et_pb_bottom_inside_divider {
    background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100px" viewBox="0 0 1280 140" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><g fill="%23151f45"><path d="M0 140h1280C573.08 140 0 0 0 0z"/></g></svg>') !important;
    margin-bottom: -0.2rem;
    transition: background-image 300ms ease;
}

.dark-mode .et_pb_bottom_inside_divider {
    background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100px" viewBox="0 0 1280 140" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><g fill="%230c1537"><path d="M0 140h1280C573.08 140 0 0 0 0z"/></g></svg>') !important;
    transition: background-image 300ms ease;
}

/*--------- Divi Back-to-top Button---------*/





.et_pb_scroll_top.et-visible {

    opacity: 1;

    -webkit-animation: fadeinRight 0.4s 1 cubic-bezier(0.77, 0, 0.175, 1);

    animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);

    clip-path: polygon(100% 0, 0% 100%, 100% 100%);

    padding-top: 40px;

    padding-bottom: 0px;

    background-color: var(--accent-color);

    margin-bottom: -126px;

}







.et_pb_scroll_top.et-hidden {

    opacity: 0;

    -webkit-animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);

    animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);

    clip-path: polygon(100% 0, 0% 100%, 100% 100%);

    padding-top: 40px;

    padding-bottom: 0px;

    background-color: var(--accent-color);

    margin-bottom: -126px;

}



/*----------- Header & Menu -----------*/



div#top-header {

    background-color: var(--base-variant);

}



#et-info-phone {

    margin-right: 1.3rem;

    color: var(--base-variant);

}



span#et-info-email {

    color: var(--base-variant);

}



header#main-header {

    background-color: var(--primary-color);

}



.nav li ul {

    border-top: 3px solid var(--tertiary-color);

}



.nav li ul li:hover {

    color: var(--primary-color);

}



.menu-item-1279 ul {

    min-width: 28rem !important;

}



#top-menu li li a {

    width: fit-content !important;

    color: var(--heading-text-color) !important;

}

/* ---------- Top Menu ----------- */

div#top-header {
    background-color: var(--secondary-color);
    font-size: 1.4rem;
    color: var(--base-color);
}



/*----------- Top Menu Logo -----------*/



@media only screen and (min-width: 981px) {

    #logo {

        width: 18rem;
        max-height: 14rem;
        animation: shrink 300ms linear ease-in-out;
        height: auto;
    }



    .et-fixed-header #logo {

        width: 0vw;

        animation: grow 300ms linear ease-in-out;

    }




.container.clearfix.et_menu_container {
    min-height: 11rem;
    transition: min-height 300ms ease-out;
}

.et-fixed-header .container.clearfix.et_menu_container {
    min-height: 5.5rem !important;
    transition: min-height 300ms ease-in;
}


/*------------ Top Menu Logo Animation -------------*/



@keyframes shrink {

    0% {width: 10vw;}

    25% {width: 7.5vw;}

    50% {width: 5vw;}

    75% {width: 2.5vw;}

    100% {width: 0vw;}

}



@keyframes grow {

    0% {width: 0vw;}

    25% {width: 2.5vw;}

    50% {width: 5vw;}

    75% {width: 7.5vw;}

    100% {width: 10vw;}

}





/*----------- Top Menu Links -----------*/



    ul#top-menu li a {
        display: flex;
        flex-direction: column;
        padding: 5px 10px;
        font-size: max(1.8rem, 0.85vw);
        margin-right: 5px !important;
        top: 0px;
        color: var(--base-variant);
    }

        ul#top-menu li a:hover {
        color: var(--secondary-color) !important;
        opacity: 1;
    }



    ul#top-menu li.current-menu-item a {

        color: var(--accent-color)  !important;

    }



    ul#top-menu li.current-menu-item a:hover {

        color: var(--accent-color)  !important;

    }



    .et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul, .et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__wrap {

        min-width: 80%;

    }



    .et_pb_menu_0_tb_header.et_pb_menu .nav li ul {

        max-width: 67%;

    }



    #top-menu-nav>ul>li>a:hover {

        opacity: 1;

        color: var(--secondary-color);

    }



    #main-header .nav li ul a:hover {

        color: var(--accent-color) !important;

        opacity: 1;

        background-color: var(--base-color);

        }



    #top-menu li.current-menu-ancestor>a, #top-menu li.current-menu-item>a, .mobile_menu_bar:after, .mobile_menu_bar:before {
    color: var(--accent-color) !important;
    }


    .et-fixed-header li.mega-menu.mega-menu-parent li li, #top-menu li.mega-menu.mega-menu-parent li>a:hover {

        width: 100% !important;

        color: var(--accent-color);

        opacity: 1;

        background-color: var(--base-color);

    }



    #main-header, #main-header .nav li ul, .et-search-form, #main-header .et_mobile_menu {

        background-color: var(--base-color);

    }

}

/* LOGO STYLING ON MOBILE */

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

    #logo {
        width: 15rem !important;
        max-height: 30rem !important;
    }
    
}

/* Top menu submenu styling (not sticky header, which is below) */

ul#top-menu li ul {
    border-radius: 0px 0px 8px 8px;
    border-bottom: 3px solid var(--secondary-color);
    min-width: 38rem !important;
}

/* Education sub-menu */

ul#top-menu li.menu-item-2197 ul.sub-menu {
    min-width: 24rem;
    display: flex;
    flex-direction: column;
}

/* Research sub-menu */

ul#top-menu li.menu-item-1735 ul.sub-menu {
    min-width: 25rem;
}

/* Community sub-menu */

ul#top-menu li.menu-item-2048 ul.sub-menu {
    min-width: 30rem;
    display: flex;
    flex-direction: column;
}

/* Advocacy sub-menu */

ul#top-menu li.menu-item-2054 ul.sub-menu {
    min-width: 27rem;
}

/* Contact sub-menu */

ul#top-menu li.menu-item-2061 ul.sub-menu {
    margin-left: -85%;
}




/* Secondary Header */

#et-secondary-nav.menu .top-menu-donate a {
    background-color: var(--accent-color) !important;
    color: var(--base-variant) !important;
    padding: 1rem 2rem 1rem 2rem;
    border-radius: 500px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

#et-secondary-nav.menu .top-menu-donate a:hover {
    background-color: var(--base-variant) !important;
    color: var(--accent-color) !important;
    opacity: 1;
}

#et-info {
    padding-top: 1rem;
}

span#et-info-email {
    color: var(--primary-color);
    font-weight: 500;
}

#et-info-phone {
    margin-right: 1.3rem;
    color: var(--primary-color);
}

.et-social-icons li a.icon:before {
    color: var(--primary-color) !important;
}


/* Search Bar */

form.searchwp-form .searchwp-form-input-container .swp-input {
    margin: 0;
    width: 100%;
    border-radius: 100px;
    border: var(--base-color) 2px solid;
}

input.search-submit.swp-button {
    border-radius: 100px;
    padding: 0px 1rem;
    border: var(--base-color) 2px solid;
    background-color: var(--base-variant);
}

  

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



header.et-fixed-header {

    background-color: var(--primary-color-transparent)!important;

    position: sticky;

    top: 0px;

    width: 100%;

    z-index: 99;

}




.et-fixed-header#main-header .nav li ul a {
    color: var(--primary-color);
}



.et-fixed-header#main-header .nav li ul a:hover {

    color: var(--accent-color) !important;

    opacity: 1;

    background-color: var(--base-color);

    }


/* sticky header sub-menu styling */

header.et-fixed-header ul li.menu-item-2197 ul {
    min-width: 24rem !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0px 0px 8px 8px !important;
}
    

header.et-fixed-header ul#top-menu li ul li {
    height: 4rem;
}

header.et-fixed-header li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-4272 {
    height: fit-content !important;
    margin-bottom: 6% !important;
}

    

@media screen and (min-width: 783px) {

    

    .logged-in.admin-bar .et-fixed-header {

        top: var(--wp-admin--admin-bar--height, 0px);

        }

    }





@media screen and (min-width: 1024px) {



    .et_pb_menu__menu>nav>ul>li>a {

        font-size: 18px;

    }



    .et-fixed-header .et_pb_menu__menu>nav>ul>li {

        padding: 0px;

        margin-top: -13px;

    }



    .et-fixed-header ul#top-menu li a {

        font-size: 16px;

        height: 50px;

        margin-top: 0px;

        background: none;

    }



    .et-fixed-header ul#top-menu li a:hover {

        background: none;

    }



    .et-fixed-header .et-menu-nav li a svg {

        display: none;

    }



    #top-menu li.mega-menu li>a {

        color: var(--primary-color) !important;

    }



    .et-fixed-header#main-header .nav li ul {

        background-color: var(--base-color) !important;

    }

}





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



#footer-section {
    background-color: var(--primary-color) !important;
}

#footer-section .fwd-font-size h3,
#footer-section .fwd-font-size p {
    color: var(--base-variant) !important;
}

#footer-section a {
    color: var(--accent-color);
}

#footer-section h2 {
    font-size: 2.2rem !important;
    color: var(--base-variant);
}

#footer-section .et_pb_main_blurb_image .et-pb-icon {
    color: var(--base-variant);
}

    /* Footer Subscribe form */

    #fluentform_7 .ff-btn-submit:not(.ff_btn_no_style) {
    background-color: var(--accent-color);
    color: #fafafa;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 0.5rem 3rem;
}

#fluentform_7 .ff-el-form-check label div {
    color: #fafafa;
}

#fluentform_7 .ff-el-input--label {
    color: #fafafa !important;
}

#footer_menu nav.et-menu-nav ul {
    display: flex;
    flex-direction: column;
    min-width: 18rem;
}

#footer-section .et_pb_menu .et_pb_menu__wrap {
    border: none;
    border-radius: 0px !important;
    background-color: var(--primary-color);
}

#footer_menu nav.et-menu-nav ul li a {
    color: var(--base-variant) !important;
    line-height: 2rem;
}
#footer_menu nav.et-menu-nav ul li a:hover {
    opacity: 1 !important;
}

#footer-section #footer_menu .current-menu-item a {
    color: var(--accent-color) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* Responsive Footer */

@media screen and (max-width: 767px) {
    #footer-disclaimer {
    max-width: 95% !important;
    width: 90%;
    padding-left: 4rem !important;
    }

    .et_pb_menu--style-left_aligned .et_pb_menu__wrap {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    }
}

.et_pb_module .mobile_menu_bar:before {
	visibility: hidden;
}

.mobile_menu_bar:before {
	color: #e35f6c;
}

/* --------------- Website Specific Styling -------------- */

.dark-mode span.glossaryLink {
    color: var(--accent-color) !important;
}

.dark-mode span.glossaryLink:hover {
    color: var(--accent-color) !important;
}

/* Research sources styling */

.sources a, .sources p {
    color: var(--accent-color) !important;
    font-weight: 600;
    font-size: 15px;
}



/* On-page menus */

.et_pb_section.on-page-menu {
    background: var(--secondary-color) !important;
    box-shadow: 3px 4px 9px rgba(0, 0, 0, 0.4);
    z-index: 9;
}

.on-page-menu-item p {
    color: var(--primary-color);
}

@media screen and (max-width: 981px) {
    .mobile-on-page-menu {
        height: 5rem !important;
    }

    .is-expanded.mobile-on-page-menu {
        height: 100% !important;
        transition: height 500ms ease-in-out;
    }

    .mobile-on-page-menu p {
        margin-top: 1rem !important;
    }

    #on-page-menu-toggle .et-pb-icon {
        color: var(--accent-color);
    }
}



/* hero section styling across website */

.hero-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Home hero background DNA helix opacity */

.home-hero .et_pb_image_0 {
    opacity: 0.6;
}


/* Remove the white space beneath images */

img {
    vertical-align: top;
}



header#main-header {
    box-shadow: none;
}

.breadcrumbs {
    max-width: fit-content;
    display: block;
    margin: 0 auto;
}

.breadcrumbs ul li {
    color: var(--primary-color) !important;
    font-size: 1.8rem;
    font-weight: 600;
}

.breadcrumbs ul li a {
    color: var(--primary-color);
}

.breadcrumbs .dsm_breadcrumbs_item_current {
    color: var(--primary-color) !important;
    font-weight: 700;
}

.breadcrumbs .dsm_breadcrumbs_separator {
    color: var(--secondary-color) !important;
}




.et_pb_section.home-hero {
    background-color: var(--primary-color) !important;
}

#home-hero-row {
    min-height: 70vh;
    height: fit-content;
}

div#home-hero-col-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
}

#home-hero-col-1 h1 {
    font-size: clamp(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 1.2821)) * var(--font-size-multiplier), calc(5rem * var(--font-size-multiplier))) !important;
}

#home-hero-col-1 h2 {
    font-size: clamp(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 1.2821)) * var(--font-size-multiplier), calc(3rem * var(--font-size-multiplier))) !important;
    margin-top: 3rem;
}

div#home-hero-col-1 a {
    margin-bottom: 3rem;
}


.home-hero h1,
.home-hero h2 {
    color: #fafafa !important;
}

/* hero section gradient overlays */

.overlay {
    border-image: fill 1 linear-gradient(var(--background-img-overlay2), var(--background-img-overlay1));
}


.hero-icon-list li {
    color: var(--heading-text-color);
    font-weight: 600;
}


/* Quick Facts Box */

#quick_fact_row {
    background-color: var(--secondary-color) !important;
}

#quick_fact_row .quick-facts .et_pb_main_blurb_image {
    color: var(--accent-color);
}

#quick_fact_row .quick-facts h4 {
    color: var(--primary-color);
    font-weight: 700;
}



.home-blurb {
    border-radius: 10px;
    margin: 0.5rem 1rem;
    padding: 5rem 3rem;
}

.home-blurb .et_pb_main_blurb_image {
    color: var(--accent-color);
}

.dark-mode #blurb-section h2 {
    color: var(--base-variant);
}


.blurb1 {
    background-color: var(--primary-color);
}

.blurb2 {
    background-color: var(--base-variant);
}

.dark-mode .blurb2 {
    background-color: hsla(0, 0%, 96%, 0.3) !important;
}

.dark-mode .blurb2 h3,
.dark-mode .blurb2 p,
.dark-mode .blurb3 h3,
.dark-mode .blurb3 p {
    color: var(--base-variant);
}

.blurb4 {
    background-color: var(--secondary-color);
}

.blurb3 {
    background-color: var(--base-color);
}

.blurb1 h3,
.blurb1 p,
.blurb4 h3,
.blurb4 p {
    color: var(--base-variant);
}

.blurb2 p,
.blurb3 p {
    color: #3a3a3a;
}

.et_pb_section.fwd-divider.et_section_regular {
    background-color: var(--secondary-color) !important;
}

#subscribe form.fluent_form_2 .ff-btn-submit:not(.ff_btn_no_style) {
    background-color: var(--accent-color) !important;
    color: var(--base-variant) !important;
    border-radius: 500px !important;
    font-weight: 600px;
    text-transform: uppercase;
}


/* Research Section */

#research {
    border-image: linear-gradient(90deg, var(--background-img-overlay3), var(--background-img-overlay4)) fill 1;
}

#fwd-content-circle .dsm_button {
    background-color: var(--accent-color);
    color: var(--base-variant);
    border: none;
}

#fwd-content-circle .dsm-circle-info-content-wrapper span.dsm_content_icon {
    color: var(--accent-color) !important;
}

#fwd-content-circle .dsm-circle-info-content-wrapper .dsm-title {
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--primary-color);
}

#fwd-content-circle .dsm-circle-info-button-wrapper {
    background: var(--secondary-color);
    color: var(--base-variant);
}

#fwd-content-circle .dsm-circle-info-container {
    border-color: var(--primary-color);
}

#fwd-content-circle .dsm-circle-info-item-active .dsm-circle-info-button-wrapper {
    background-color: var(--accent-color) !important;
}





/* Home Page Subscribe Row */



form.fluent_form_5 .ff-btn-submit:not(.ff_btn_no_style) {
    background-color: var(--accent-color) !important;
    color: var(--base-variant);
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 800px;
}



/* ABOUT PAGE */

.board-profile-row {
    border-radius: 20px;
    padding: 5rem 4rem !important;
    background-color: var(--base-color);
    box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.4);
    margin: 5rem auto;
}

.board-profile-row .board-profile-container .board-profile-photo img {
    border: 5px solid var(--accent-color);
    border-radius: 50%;
}

.board-profile-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr;
}

/* Media Query for Mobile Devices */
@media screen and (max-width: 767px) {
  .board-profile-container {
    display: grid;
    /* Change to 1fr for a single full-width column */
    grid-template-columns: 1fr; 
    /* grid-template-rows: auto; (Optional: let rows adjust to content) */
	/* Center items horizontally and vertically in the grid */
    place-items: center;
    /* Center text within the items (optional but recommended) */
    text-align: center; 
  }
}


.board-profile-photo img {
    border-radius: 50%;
    border: 5px solid var(--accent-color);
}


/* MEDIA & STORIES PAGE */

.page-id-1795 a {
    color: #577e8a;
}


/* 
#smab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--base-color-transparent) !important;
    z-index: 2;
}

#smab h2,
#smab p {
    color: var(--primary-color);
}

.smab-member,
.board-member {
    background-color: var(--base-variant) !important;
}
.smab-member h4,
.smab-member h5 {
    color: var(--primary-color);
}

.smab-member p {
    color: var(--text-color) !important;
}

.board-photo img {
    border: 5px solid var(--accent-color);
    border-radius: 50%;
}

.board-member h4,
.board-member h5,
.board-member p {
    color: var(--primary-color) !important;
} */

.about-cta h2 {
    color: var(--heading-text-color) !important;
}

.about-cta p {
    color: var(--text-color);
}

#about_cta .about-cta a {
    background-color: var(--accent-color);
    border-radius: 500px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--base-variant);
    border: none;
}


/* Get Involved Page */

#rock_for_rare {
    background-color: #03131c !important;
}

#rock_for_rare h2 {
    color: var(--accent-color);
}

#rock_for_rare p {
    color: var(--base-variant);
}

.section-background-image {
    border-image: linear-gradient(90deg, var(--background-img-overlay3) 30%, var(--background-img-overlay4)) fill 1;
}

#call_to_action h2 {
    color: var(--heading-text-color) !important;
}

#call_to_action a {
    background-color: var(--accent-color);
    color: var(--base-variant);
    text-transform: uppercase;
    border-radius: 500px;
    padding: 1rem 5rem 0.5rem 5rem;
    box-shadow: 6px 6px 18px 0px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode #call_to_action a {
    box-shadow: none !important;
}


/* Resources Page */

.wpgb-facet.wpgb-facet-2 {
    display: flex;
    gap: 2rem;
}

.wpgb-area.wpgb-area-top-2 {
    justify-content: space-between;
}

.wpgb-search-facet {
    width: 30vw;
}

.wp-grid-builder .wpgb-sidebar {
    flex-basis: 14vw !important;
}

.wp-grid-builder .wpgb-sidebar .wpgb-facet .wpgb-checkbox-label {
    gap: 2rem;
}

.wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox[aria-pressed=true] .wpgb-checkbox-control {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}


/* resource card styling */

.wp-grid-builder .wpgb-card [class*=wpgb-block-]>a {
    text-decoration: none;
    font-size: 1.8rem;
    color: var(--primary-color);
}

h3.wpgb-block-1 {
    padding-top: 2rem !important;
}

a.wpgb-block-3.fwd-btn {
    margin-bottom: 2.5rem !important;
    background-color: var(--accent-color) !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.6rem !important;
    padding: .5rem 3rem !important;
    border: 2px solid var(--accent-color) !important;
    color: var(--base-color);
}

a.wpgb-block-3.fwd-btn:hover {
    background-color: var(--base-color) !important;
    color: var(--accent-color) !important;
}

.wpgb-block-2 {
    padding: 0rem 2rem !important;
    font-size: 1.5rem !important;
    color: var(--text-color) !important;
}


/* Events Page */

.postid-1512 .etn-single-event-speaker-block .etn-single-event-speaker-grid-wrapper .etn-speaker-image img {
    border-radius: 10px;
    max-width: 25rem;
    width: 25rem;
    height: auto;
}

.etn-event-item .etn-event-thumb {
    margin-bottom: 4rem;
}

.etn-event-item {
    box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.4) !important;
    padding: 4rem 3rem !important;
    background-color: var(--base-variant);
}

.etn-event-item .etn-title a {
    color: var(--primary-color);
    font-size: 1.8rem;
}

.etn-event-item .etn-event-location {
    color: var(--secondary-color);
    font-size: 1.4rem;
    margin-bottom: 35px;
    font-weight: 700;
}

#events_page_grid .etn-event-date span {
    font-size: 1.6rem !important;
    color: var(--accent-color);
    font-weight: 600;
}

#event_cta {
    border-image: linear-gradient(var(--background-img-overlay1), var(--background-img-overlay2)) fill 1;
}

/* Research Page */

div#registry {
    background-color: var(--secondary-color) !important;
}

#registry h2,
#registry p {
    color: var(--base-variant);
}

#registry .registry-blurb h4,
#registry .registry-blurb p {
    color: var(--base-variant);
}

#registry .registry-blurb .et_pb_main_blurb_image span {
    color: var(--accent-color);
    background-color: var(--base-color);
    padding: 1rem;
    border-radius: 50%;
    font-size: 30px;
}

#research_cta {
     border-image: linear-gradient(var(--background-img-overlay1), var(--background-img-overlay2)) fill 1;
}

.wp-grid-builder .wpgb-card-4 .wpgb-card-header {
    padding-right: 25px;
    padding-left: 25px;
    border-radius: 10px 10px 0px 0px;
}

.wp-grid-builder .wpgb-card-4 .wpgb-card-footer {
    border-radius: 0px 0px 10px 10px;
}

a.journal-article-button {
    font-size: 16px;
    color: #fafafa;
    background-color: var(--accent-color);
    border-radius: 100px;
}





/* Contact Page */

span.et-waypoint.et_pb_animation_top.et_pb_animation_top_tablet.et_pb_animation_top_phone.et-pb-icon.et-animated {
    color: var(--accent-color);
}

.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
    color: var(--accent-color) !important;
}

.fluentform .ff-el-input--label {
    color: var(--text-color);
    font-size: 1.5rem;
}

.ff_t_c {
    color: var(--text-color);
    font-size: 1.5rem;
}

form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style) {
    background-color: var(--accent-color) !important;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 0.5rem 4rem;
}

.contact-social-divider {
    color: var(--primary-color);
    font-size: 4rem !important;
}

.contact-social-icon a .et-pb-icon {
    color: var(--secondary-color) !important;
    transition: color 300ms ease-in-out;
}

.contact-social-icon a .et-pb-icon:hover {
    color: var(--accent-color) !important;
    transition: color 300ms ease-in-out;
}


/* Patient Story Page Template */

.about-me-column {
    padding-left: 3rem;
    border-left: 2px solid var(--secondary-color);
}

.about-me-column h3 {
    color: var(--heading-text-color);
}

.patient-story-info div {
    font-size: 1.6rem;
    color: var(--text-color);
    margin-left: 4rem;
}

.hero-section .et_pb_column {
    border: none !important;
    padding: 0px !important;
}

.patient-story-title div {
    font-size: clamp(4rem, calc(4rem + ((1vw - 0.32rem) * 1.6026)) * var(--font-size-multiplier), calc(6rem * var(--font-size-multiplier)));
    text-align: center;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 7rem;
}

/* Clinical Trial Page */
.wpgb-card-4 .wpgb-block-3.clinical-trial-card-button {
	visibility: visible !important;
	background-color: var(--accent-color) !important;
	max-width: 25rem;
	display: block;
	margin: 2rem !important;
}

.wpgb-card-4 .wpgb-card-body.ct-body {
	background-color: #fff !important;
	padding: 20px 25px 20px 25px !important;
}

.wpgb-card-4 .wpgb-card-footer.ct-footer {
	background-color: #fff !important;
	padding-bottom: 20px !important;
}

/* Patient Story Library Page */

.wpgb-block-3 {
    visibility: hidden;
}

.wpgb-card-2 .patient-story-card-button {
    background-color: var(--accent-color) !important;
    padding: 0.5rem 3rem !important;
    width: 35rem;
    display: block;
    margin: 4rem auto !important;
    box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.4) !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}

.wpgb-card-2 .wpgb-card-media-thumbnail {
    border-radius: 50%;
    width: 15vw;
    height: 15vw;
    display: block;
    margin: 0rem auto !important;
    box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.4) !important;
}

.wpgb-card-2 .patient-story-card-header div {
    background: var(--base-color);
    font-size: 2.2rem !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
    padding-bottom: 1rem !important;
}

.wpgb-card-2 .patient-story-back-btn p {
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    width: 27rem;
    border-radius: 100px;
    margin: 0 auto;
}

.wpgb-card-footer {
    background: transparent !important;
}


/* GLOSSARY INDEX */

li.ln-0, li.ln-1, li.ln-2, li.ln-3, li.ln-4, li.ln-5, li.ln-6, li.ln-7,
li.ln-8, li.ln-9, li.ln-11, li.ln-12, li.ln-14, li.ln-15, li.ln-17, li.ln-18, li.ln-19,
li.ln-22 {
    border-top: 2px solid var(--secondary-color) !important;
    border-radius: 8px;
}

/* hide search input */
input#glossary-search-term {
    display: none !important;
}




/* BLOG TEMPLATE */

body.et_pb_pagebuilder_layout.single #page-container #et-boc .et-l .et_pb_row_2_tb_body.et_pb_row {
    width: 85% !important;
    max-width: 85% !important;
}

.et_pb_module.et_pb_image.et_pb_image_1_tb_body.blog-profile-img img {
    max-width: 22rem !important;
}

.et_pb_gutters3 .et_pb_column_1_4, .et_pb_gutters3.et_pb_row .et_pb_column_1_4 {
    width: 20% !important;
}

.et_pb_module.et_pb_text.et_pb_text_0_tb_body.fwd-font-size.et_pb_text_align_left.et_pb_bg_layout_light h2 {
    font-size: 2.2rem;
}

.et_pb_with_border.et_pb_column_3_4.et_pb_column.et_pb_column_2_tb_body.et_pb_css_mix_blend_mode_passthrough {
    margin-right: 4rem;
}

#blog_template_body .et_pb_with_border.et_pb_column_3_4.et_pb_column.et_pb_column_2_tb_body {
    padding: 0rem 5rem;
}



#blog_template_body .et_pb_module.et_pb_post_content.et_pb_post_content_0_tb_body {
    font-size: 1.6rem;
    color: var(--text-color) !important;
}

#blog_template_body .et_pb_module.et_pb_post_content.et_pb_post_content_0_tb_body a {
    color: var(--accent-color);
    font-weight: 600;
}

#comment-wrap p.logged-in-as {
    font-size: 1.4rem;
}

#commentform input[type=email], #commentform input[type=text], #commentform input[type=url], #commentform textarea {
    color: var(--text-color);
    background-color: var(--base-color);
    font-size: 1.6rem;
    border: 1px solid var(--secondary-color);
    border-radius: 8px;
}

#commentform p.form-submit button#et_pb_submit {
    border: 1px solid var(--accent-color);
    background: var(--base-color);
    color: var(--accent-color);
    border-radius: 100px;
    padding: 0rem 3rem !important;
    font-size: 1.6rem;
}

.et_pb_module.et_pb_image.et_pb_image_0_tb_body {
    margin-bottom: 7rem;
}

.et_pb_module.et_pb_image.et_pb_image_0_tb_body img {
    min-width: 20rem;
}


#blog_template_body table td a img {
    margin-bottom: 10rem !important;
}


/* BLOG LIBRARY PAGE */

article.wpgb-card.wpgb-card-3 {
    border-radius: 10px !important;
    box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.2);
}

/* .et_pb_blog_grid .et_pb_image_container img {
    border-radius: 10px 10px 0px 0px !important;
}

.et_pb_post h2 {
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: 600;
    padding: 0rem 1rem 2rem 1.5rem;
    line-height: 1.7em;
}

.et_pb_post .post-content p {
    font-size: 1.4rem !important;
    color: var(--text-color);
    line-height: 1.6em;
    padding: 0rem 1.5rem;
}

.et_pb_post .post-meta p {
    color: var(--primary-color) !important;
    font-weight: 600;
}

.et_pb_post .post-meta a {
    color: var(--accent-color) !important;
    font-weight: 600;
}

.et_pb_post a img {
    border-radius: 8px 8px 0px 0px;
} */

.wp-grid-builder .wpgb-card-3 .wpgb-block-1 {
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.wp-grid-builder .wpgb-card-3 .wpgb-block-5 p {
    color: var(--text-color);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.6;
}

.wpgb-grid-3 .wp-grid-builder .wpgb-card .wpgb-card-body {
    border-radius: 8px;
    background-color: var(--base-variant);
}

.wpgb-grid-3.wp-grid-builder.wpgb-enabled .wpgb-card {
    position: absolute;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
}

.wp-grid-builder .wpgb-card-3 .wpgb-block-1 {
    color: var(--primary-color);
    padding: 0.5rem 1.5rem;
}

.wpgb-grid-3 .wp-grid-builder .wpgb-card-3 [class*=wpgb-block-]>a {
    font-size: 1.8rem;
}

.wpgb-card-3 .wpgb-card-body {
    border-radius: 0px 0px 8px 8px;
}

.wpgb-grid-3 .wp-grid-builder .wpgb-card-3 .wpgb-block-5 {
    color: var(--text-color);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.6;
    padding: 1.5rem;
}

.wpgb-grid-3 .wp-grid-builder .wpgb-card .wpgb-card-media {
    display: flex;
    position: relative;
    max-height: 13rem !important;
}

.wpgb-grid-3 div.wpgb-card-media-thumbnail a div {
    border-radius: 8px 8px 0px 0px;
}

.wp-grid-builder.wp-grid-3 .wpgb-card .wpgb-card-media-thumbnail div {
    max-height: 16.5rem !important;
}

.wpgb-card-media.wpgb-scheme-light {
    max-height: 16.5rem !important;
}

.wp-grid-builder .wpgb-card .wpgb-card-body {
    background: #fff !important;
    padding: 0rem 2rem !important;
    padding-bottom: 3rem !important;
}

.wpgb-facet .wpgb-checkbox-facet {
    max-width: 10rem;
}


/* Pagination Filter on Blog Grid */

.wpgb-facet .wpgb-pagination li a[aria-current] {
    color: var(--accent-color) !important;
    font-weight: 700 !important;
}

.wpgb-pagination li a {
    color: var(--primary-color);
    font-weight: 600 !important;
}

nav.wpgb-pagination-facet {
    margin-top: 4rem !important;
}


/* PROCLAMATIONS PAGE */

.et_pb_column.proclamation-download-card {
    background-color: #f5f5f5;
}

.et_pb_column.proclamation-download-card p {
    color: var(--primary-color);
}

.et_section_regular.proclamation-section {
    background-color: var(--secondary-color) !important;
}

#proclamation-cta h2 {
    color: var(--primary-color) !important;
}

.programs-initiative {
    height: fit-content !important;
}

#biodexa-section {
    background-color: var(--secondary-color) !important;
}

#dan-linkedin .dsm_icon_list .dsm_icon_list_child {
    justify-content: center;
}


/* TREATMENT & LIVING WITH FAP PAGE */

#on_page_menu {
    background-color: var(--secondary-color) !important;
}

.page-id-4185 .et_pb_icon_1 .et_pb_icon_wrap .et-pb-icon {
    color: var(--accent-color);
}




/*============ RESPONSIVE STYLING ============*/

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

    /* Mobile Nav */

    ul#mobile_menu {
        border-top: 3px solid var(--accent-color);
        border-radius: 0px 0px 10px 10px;
        border-bottom: 3px solid var(--accent-color);
        background-color: #f5f5f5;
    }

    ul#mobile_menu li a {
        color: var(--primary-color) !important;
        font-size: 16px;
        letter-spacing: 0.5px;
    }


    div#home-hero-col-1 {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }

    #home-hero-col-1 h1 {
        font-size: clamp(3rem, calc(3rem + ((1vw - 0.32rem) * 1.2821)) * var(--font-size-multiplier), calc(5rem * var(--font-size-multiplier))) !important;
        color: var(--primary-color) !important;
        font-weight: 600;
    }

    #home-hero-col-1 h2 {
    font-size: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 1.2821)) * var(--font-size-multiplier), calc(3rem * var(--font-size-multiplier))) !important;
    margin-top: 3rem;
    color: var(--primary-color) !important;
    font-weight: 600;
    }
   
    div#mobile_benefit_blurb_row {
        display: flex;
        flex-direction: column;
        gap: 5rem;
    }   

    #mobile_benefit_blurb_row .benefit-blurb-col {
        max-width: 100% !important;
        width: 100% !important;
    }

    .benefit-blurb-col .et_pb_blurb_10 h3 span {
        color: var(--primary-color) !important;
    }

    .mobile-on-page-menu-col {
        min-width: 100%;
        margin-bottom: 5px !important;
    }

    .mobile-on-page-menu {
        padding: 15px;
    }

    #mission_and_vision {
        height: auto !important;
    }

    .dsm_icon_divider_0 .et-pb-icon {
        font-size: 10vw !important;
    }

    .breadcrumbs ul li {
        font-size: 1.5rem !important;
    }

    .wp-grid-builder .wpgb-card-2 .wpgb-block-4 {
        max-width: 100%;
    }

    .wpgb-card-2 .wpgb-card-media-thumbnail {
        min-width: 25rem;
        min-height: 25rem;
    }

    .about-me-column {
        padding-left: 0rem !important;
        border-left: none !important;
    }

    .patient-story-title div {
        line-height: 1.2em;
    }

    .postid-4128 .et_pb_section_0_tb_body {
        height: fit-content;
    }

    #fap-genetics .et_pb_column.type-of-mutation-col {
        margin-bottom: 4rem !important;
    }

    .dsm_breadcrumbs_0_tb_body .dsm_breadcrumbs li.dsm_breadcrumbs_item.dsm_breadcrumbs_item_current, .dsm_breadcrumbs_0_tb_body .dsm_breadcrumbs li.dsm_breadcrumbs_item.dsm_breadcrumbs_item_current span {
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 1.5em;
    }

    .et_pb_image_12 .et_pb_image_wrap img {
        height: 100% !important;
    }

    .page-id-4261 .et_pb_section.hero-section {
        height: 38vh !important;
    }

    div#blog_author_col {
        width: 100% !important;
    }

    .et_pb_row.social-media-row {
        display: flex;
        flex-wrap: nowrap !important;
    }
}