@import url(https://fonts.googleapis.com/css?family=Open+Sans);
:root {
    --logo-font-color: #445660;
    --pg-bkg-color: white;
    --font-color-1: #000000;
    --font-color-2: #fff;
    --font-color-3a: #dee4e6;
    --font-color-3b: #005569;
    --font-color-3c: #748088;
    --font-color-4: #d2deef;
    --priority-bkg: #f9e998;
    --priority-color: #000;
    --priority-links: #455560;
    --basic-listing-bgk: #fff;
    --basic-color: #000;
    --basic-link: #455560;
    --big-font: "Open Sans", sans-serif;
    --font-color-2a: #666767;
    --font-color-2b: #ced1d2;
}
.li-660002026 .company-name h2 {
    font-size: 0px;
    margin-right: 0px;
}
.li-660002026 .company-name h2::before {
    visibility: visible;
    white-space: pre;
    font-size: 25px;
    content: "Residential Structures, P.C.";
}
.li-660002026 .company-name h2::after {
    content: "\a Structural Engineering & Consulting";
    visibility: visible;
    white-space: pre;
    font-size: 18px;
    line-height: 27px;
    font-style: italic;
}
.display-map iframe {
    width: 100%;
}
@media (max-width: 600px) {
    .li-660002026 .company-name h2::before {
        font-size: 20px;
    }
    .li-660002026 .company-name h2::after {
        font-size: 15px;
    }
    .display-map iframe {
        width: 80% !important;
    }
}
@media (max-width: 380px) {
    .li-660002026 .company-name h2::before {
        font-size: 18px;
    }
    .li-660002026 .company-name h2::after {
        line-height: 20px;
        font-size: 13px;
    }
    .li-660002026 .listing-logos img.member-logo {
        height: 105px;
    }
}
.aboutOurGuideText:after {
    content: "The Member Directory is the first resource that everyone in the industry turns to when they are looking to purchase any products or services. The reason everyone gets involved is because the Member Directory is not only available on the home page of the trade association's website, but it is also emailed to members of the Association trade show/convention attendees. For that reason, this is the single best way for you to enhance your image and keep your name out in front of all the key decision makers throughout the industry.";
}

@media (max-width: 1254px) {
    .gui-logo-name {
        font-size: 43px !important;
    }
}
@media (max-width: 950px) {
    .gui-logo-name {
        font-size: 40px !important;
    }
}
@media (max-width: 900px) {
    .gui-logo-name {
        font-size: 40px !important;
    }
}
@media (max-width: 830px) {
    .gui-logo-name {
        font-size: 33px !important;
    }
}
@media (max-width: 587px) {
    .gui-logo-name {
        font-size: 30px !important;
    }
}
@media (max-width: 360px) {
    .gui-logo-name {
        font-size: 25px !important;
    }
}
button.navbar-toggle {
    background-color: var(--font-color-3b);
}
div#pgCont {
    border-color: var(--font-color-3b, black);
    background: var(--pg-bkg-color, #fff);
    background-size: cover;
    background-attachment: fixed;
    background-image: url(/images/guide/chba-background.png);
    background-position: center;
    background-color: #f9fcfe;
    background-blend-mode: overlay;
}
a {
    color: var(--font-color-3b, inherit);
    text-decoration: none;
}
a:hover,
a:focus {
    color: var(--font-color-3c, blue);
    text-decoration: none;
}
.gui-logo {
    margin: auto 0;
}
.gui-logo-name {
    font-size: 45px;
    color: var(--logo-font-color, inherit);
    font-family: var(--big-font, sans-serif);
    font-weight: bold;
    text-shadow: 1px 1px 1px var(--font-color-3b);
}
body {
    font-family: "Open Sans", sans-serif;
    margin: 0px;
    padding: 0px;
    height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(/images/guide/chba-background.png);
    background-position: center;
    background-color: #8b9fa7;
    background-blend-mode: overlay;
}

a.ga4click {
}
.top-bar {
    background-color: var(--font-color-3b, black);
}

.AssocHeader {
    background-color: var(--font-color-2, black);
    grid-template-columns: auto;
    grid-area: assocheader;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(/images/guide/chba-background.png);
    background-position: center;
    background-color: #f1f1f1;
    background-blend-mode: overlay;
}
img#AssocLogo {
    max-height: 150px;
    padding: 8px;
}

.nav-area {
    background-color: var(--font-color-3b);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--font-color-3b, black);
    border-top: 1px solid var(--font-color-3b, black);
}
.nav_banner {
    padding-bottom: 10px;
}
.nav-li {
    border: none;
}
.nav-menu a {
    color: var(--font-color-2, black);
}
.nav-menu .nav-li > a:hover,
.nav-menu .nav-li .parent-sub.active,
.nav-li.active,
.nav-li a:focus {
    color: var(--font-color-2b, inherit);
    background-color: var(--font-color-3b, inherit);
}
.nav-li.active > a {
    color: var(--font-color-2, initial);
}
.sub-li a {
    color: var(--font-color-3b, white);
    font-weight: normal;
    font-size: 14px;
}
.sub-li a:hover {
    top: 0px !important;
    color: var(--font-color-2, blue);
    background-color: var(--font-color-3b, lightgrey);
}
.sub-li.active,
.sub-li.active a {
    color: var(--font-color-3a, blue);
    background-color: var(--font-color-3b, lightgrey);
}
.nav-menu .showSubmenu {
    background-color: var(--font-color-2, grey);
    padding: 6px;
}
img.sponsor-logos.sponsor-logo1 {
    height: 40px;
}
/**BANNER**/
.banner-ad {
    background-color: transparent;
}
.banner-ad img {
    margin-top: 0;
}
.foot_banner .banner-ad img {
    margin: 1% auto;
}
.footer {
    margin: auto;
    background-color: transparent;
    padding-left: 4%;
}
.breadcrumb {
    padding: 0px 15px;
    font-size: 10px;
}

/**CATS**/
.cats-row {
    opacity: 1;
}
.cat-drop.multi-cats {
    color: var(--font-color-3b, white);
}
.cat-dropbox {
    background-color: var(--font-color-3a, white);
}
.cat-dropbox a {
    color: var(--font-color-2a);
    font-weight: bold;
}
.cat-dropbox:hover a,
.cat-dropbox a:hover,
.cat-dropbox:hover .cat-drop.multi-cats {
    color: var(--font-color-2, blue);
    text-decoration: none;
}
.cat-dropbox:hover,
.cat-dropbox:hover .cat-drop.multi-cats {
    background-color: var(--font-color-3b, white);
}
.cat-dropbox:hover a {
    background-color: unset;
}
.sub-cat {
    background-color: var(--pg-bkg-color, white);
    color: var(--font-color-4, black);
}
.sub-cat a {
    color: var(--font-color-3b, black);
}

h4.body_header.cat_header.listings_header {
    width: 100% !important;
    display: block;
    background-color: var(--font-color-2, black);
}
.scats a:hover {
    color: var(--font-color-3b, black);
}
/**FEATURED BAR**/
.featuredbtn.pull-right {
    background-color: var(--font-color-3b, initial);
}
.featuredbtn.pull-right:hover {
    background-color: var(--font-color-3c, blue);
    /* opacity: 0.75; */
}
.body_header,
.featured_title,
.scat-list .body_header {
    color: var(--font-color-2, white) !important;
    background-color: var(--font-color-3b, black) !important;
    padding: 4px 0;
    /* background-image: linear-gradient(45deg, black, transparent 80%); */
}
.featured_header,
.body_header.cat_header,
.spots_header a {
    color: var(--font-color-2, white) !important;
}
.featured_ads {
    grid-template-areas:
        "feat_header feat_header"
        "feats1 feats2"
        "browse_text browse_text";
}
.featuredbtn {
    padding: 3px 16px;
    margin-top: 15px;
    margin-bottom: 6px;
}
.spots > li a {
    color: var(--font-color-4, blue);
}
.spotlights {
    float: right;
    width: 137px;
}
.spots > li:nth-child(even) {
    /* background-color: #286aa3; */
    background-color: initial;
}

.spots > li:nth-child(odd) {
    /* background-color: #4c4d4f; */
    background-color: initial;
}
.spot-prod.case-item {
    background-color: var(--basic-listing-bgk, white);
}
.btn-primary {
    background-color: var(--font-color-1, black);
    border-color: var(--font-color-3a, black);
    color: var(--font-color-3b, white);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    color: #ffffff;
    background-color: #327f33;
    border-color: #0a64ab;
}

/**LOGOS**/
.sponsor-logo img {
    width: 124px;
    height: auto;
}
.sponsor-logo img {
    max-width: 130px;
}
.listing-logos {
    flex: 0 1;
}

.well_footer {
    background-color: var(--font-color-4, black);
}
.footer_nav li a {
    color: var(--font-color-4, blue);
    font-family: "Open Sans", sans-serif;
}
.footer_nav li + li {
    background: url("../images/separator.jpg") no-repeat top left;
    padding-left: 10px;
}
.small {
    color: var(--basic-link, black) !important;
}
.text-muted {
    font-family: "Open Sans", sans-serif;
    margin-top: 26px;
    margin-bottom: 26px;
    font-size: 13px;
}
.listing-logos img.member-logo {
    height: 115px;
}

/**SEARCH**/
.imgsearch {
    width: 134px;
    margin-bottom: 6px;
}
.searchbtn {
    padding: 10px 21px;
    margin-top: 7px;
}
.searchtext {
    margin-left: 10px !important;
    font-size: 13px;
    font-family: "Open Sans", sans-serif;
}
.panel-heading {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    margin-bottom: 6px;
}
.search-body > .panel-heading {
    background-color: var(--font-color-2, black);
    border: 1px solid var(--font-color-3a, black);
    color: var(--font-color-3b, white);
}
.scroll-btns,
.page-nav {
    color: var(--font-color-3a, black);
}
.page-numbers {
    background-color: var(--font-color-3b, blue);
}
.page-numbers li a,
.page-numbers li {
    color: var(--font-color-2, #fff);
}
.page-numbers li a:hover {
    color: var(--font-color-4, blue);
}
.scroll-btns:hover,
.page-nav:hover {
    color: var(--font-color-2, blue);
}
.searchmargin {
    margin-bottom: 14px;
}

/**LISTINGS**/
.listing-item {
    background-color: var(--basic-listing-bgk, transparent);
}
.listing-details {
    color: var(--basic-color, black);
}
.listing-item.priority {
    background-color: var(--priority-bkg, lightblue);
}
.listing-item.priority .listing-details {
    color: var(--priority-color, red);
}
.listing-details a,
.listing-details h4 a {
    color: var(--basic-link, blue);
}
.listing-item.priority .listing-details a {
    color: var(--priority-links, blue);
}
.listing-details a:hover {
    color: var(--font-color-3c, white);
}
.company-contact a {
    color: var(--font-color-3c white);
}
.company-contact a:hover {
    color: var(--font-color-3C, orange);
}
.listing-item.priority .listing-details a:hover {
    color: var(--font-color-3b, orange);
}
.desc_header {
    color: #ffffff;
    background-color: var(--font-color-3b, lightgrey);
    border-color: var(--font-color-3a, black);
    font-family: inherit;
    padding: 6px;
    border-bottom: 1px solid transparent;
}
.desc_boarder {
    border-color: var(--font-color-3a, white);
}
.company-desc {
    border-radius: 4px;
    background: white;
}
.listing_row.top_row {
    margin-bottom: 1em;
}
listing-item .member-logo img {
    max-height: 56px;
}
/**CONTACT US**/
.main-content.main-listings.pg-contactus {
    padding: 0 4.6em 2em 4.6em;
}

/**MISC**/
.glyphicon-chevron-down {
    font-size: 11px;
}
#toTop {
    padding: 3px 8px 5px;
    background: var(--font-color-3b, #000);
    color: #fff;
    position: fixed;
    bottom: 3px;
    right: 3px;
    display: none;
    border-radius: 4px;
}
#toTop:hover {
    cursor: pointer;
    background: var(--font-color-3a, black);
    color: #ffffff;
}

/***POPUP***/
/* The Modal (background) */
.homepopup {
    /* display: none; */ /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
}

/* Modal Content */
.pop-content {
    background-color: #fefefe;
    margin: auto;
    padding: 0px 16px 16px;
    border: 1px solid #888;
    width: fit-content;
    max-width: 1000px;
    height: 55%;
    min-height: fit-content;
    transform: translateY(-50%);
    top: 25%;
    position: relative;
    box-sizing: border-box;
}
.pop-content img {
    height: 80%;
    max-height: 445px;
    display: block;
    max-width: 100%;
    margin: 2em auto;
    box-sizing: border-box;
    border: 2px solid var(--font-color-1, black);
}
.pop-content h3 {
    text-align: center;
    display: block;
    position: relative;
    font-size: 22px;
}
/* The Close Button */
.pop-content .closehomepop {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#contclose {
    margin: 6px auto 0;
    width: 100%;
    color: blue;
    bottom: 1em;
    position: absolute;
    text-align: center;
}
.pop-content .closehomepop:hover,
.pop-content .closehomepop:focus,
#contclose:hover,
#contclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.listing-item .member-logo img {
    max-height: 100px;
    width: auto;
    max-width: 130px;
    /* filter: grayscale(1) invert(1) contrast(2); */
}
/** Change "listings" and "companies" to "members **/
/* The Top Banner */
a.featured_header.features-btn-clicked.ga4click,
a.featured_header.features-btn-clicked.ga4click:hover {
    color: transparent !important;
    pointer-events: auto;
    user-select: none;
    text-shadow: none;
}

a.featured_header.features-btn-clicked.ga4click::before {
    content: "FEATURED MEMBERS";
    color: white;
    pointer-events: none;
    position: absolute;
}

/* The Categories/Spotlights Banner */
button.btn.btn-primary.pull-right.featuredbtn.style4.features-btn-clicked.ga4click {
    color: transparent;
    pointer-events: auto;
    user-select: none;
}
button.btn.btn-primary.pull-right.featuredbtn.style4.features-btn-clicked.ga4click::before {
    content: "VIEW ALL FEATURED MEMBERS";
    color: white;
    position: absolute;
}

/* The Featured ~Companies~ Banner */
.main-content.main-single.pg-featured h4.pg-ads-title {
    color: transparent;
    pointer-events: auto;
    user-select: none;
}

.main-content.main-single.pg-featured h4.pg-ads-title::before {
    content: "FEATURED MEMBERS";
    color: black;
    pointer-events: none;
    position: absolute;
}

/* Company Listings -> Members */
.pg-listings h4.body_header.cat_header.listings_header {
    color: transparent !important;
    pointer-events: auto;
    user-select: none;
}

.pg-listings h4.body_header.cat_header.listings_header:before {
    content: "Company Listings All Members";
    position: absolute;
    color: white;
    pointer-events: auto;
}

/* Association request - hide addresses from free member listings */
.associate.member li.address {
    display: none;
}