@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url(https://fonts.googleapis.com/css?family=Asap);
:root {
    --logo-font-color: #262260;
    --pg-bkg-color: #fff;
    --font-color-1: black;
    --font-color-2: #fff;
    --font-color-3a: #aec0dc;
    --font-color-3b: #262260;
    --font-color-4: #494949;
    --priority-bkg: #d4cfed;
    --priority-color: #000;
    --priority-links: #1f1a6a;
    --basic-listing-bgk: #fff;
    --basic-color: #000;
    --basic-link: #2c2591;

    --big-font: "Blackpaper", serif;
    --rebrand-grad-dark: #009790;
    --rebrand-grad-light: #00fff4;
    --rebrand-dark-back: #002d2b;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(/images/guide/wclbma-background.png);
    background-position: center;
    background-color: #918fa6;
    background-blend-mode: overlay;
}
@media (max-width: 1254px) {
    .gui-logo-name {
        font-size: 40px !important;
    }
}
@media (max-width: 900px) {
    .gui-logo-name {
        font-size: 35px !important;
    }
}
@media (max-width: 780px) {
    .gui-logo-name {
        font-size: 30px !important;
    }
}
@media (max-width: 560px) {
    .gui-logo-name {
        font-size: 25px !important;
    }
}
div#pgCont {
    border-color: var(--font-color-3b, black);
    background: linear-gradient(var(--rebrand-dark-back), transparent 222%);
    display: flex;
    flex-direction: column;
}
.main-content {
    flex-grow: 1;
}
a,
.company-contact a {
    color: steelblue;
    text-decoration: none;
}
a:hover,
a:focus {
    color: var(--font-color-3a, blue);
    text-decoration: none;
}
.gui-logo {
    /* box-shadow: 2px 0px 5px var(--rebrand-dark-back); */
    margin: 1em 1em 0em 1em;
}
.gui-logo-name {
    color: transparent;
    user-select: none;
}
.gui-logo-name::before {
    content: 'West Coast LMBA';
    letter-spacing: 1.5em;
    font-family: 'Blackpaper', serif;
    font-feature-settings: "liga" 0, "calt" 0;
    font-variant-ligatures: none;
    position: absolute;
    top: 8px;
    left: 4.4rem;
    width: 100%;
    text-align: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: 5px 5px 5px black;
    font-size: 20px;
    font-weight: 700;
    color: #47d9d0;
}
.gui-logo-name:after {
    content: 'Buyers Guide';
    font-family: 'Blackpaper', serif;
    font-feature-settings: "liga" 0, "calt" 0;
    font-variant-ligatures: none;
    position: absolute;
    top: 0.3em;
    left: 3.8rem;
    width: 100%;
    text-align: inherit;

  /* Match original styling */
    text-shadow: 5px 5px 5px black;
    font-size: 80px;
    font-weight: 700;
    color: #47d9d0;
}

.top-bar {
    background-color: unset;
}

.AssocHeader {
    background-color: var(--rebrand-dark-back);
    grid-template-columns: auto;
    grid-area: assocheader;
}
img#AssocLogo {
    max-height: 100px;
}

.nav-area {
    margin-bottom: 5px;
    background-image: linear-gradient(
        45deg,
        var(--rebrand-grad-dark),
        var(--rebrand-grad-light),
        #00fff4
    );
}
.nav-li {
    border: none;
}
.nav-menu a {
    color: var(--rebrand-grad-light);
    font-family: Arial;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0.1em 0.1em 0.1em gray;
}
/* The Home button is in the darker area of the gradient, needs a lighter outline for contrast on hover */
.nav-menu a:hover {
    text-shadow: 0.1em 0.1em 0.1em var(--rebrand-grad-light);
}
.nav-menu .nav-li > a:hover,
.nav-menu .nav-li .parent-sub.active,
.nav-li.active {
    color: var(--rebrand-grad-dark);
    background-color: transparent;
}
nav.menu-area {
    background-image: linear-gradient(
        45deg,
        var(--rebrand-grad-dark),
        var(--rebrand-grad-light) #00fff4
    ) !important;
}

.sub-li a {
    color: var(--rebrand-grad-dark);
    font-weight: 600;
    font-size: 14px;
    text-transform: unset;
    text-shadow: 1px 1px 1px black;
    background-color: var(--rebrand-dark-back);
}
.sub-li a:hover {
    top: 0px !important;
    color: var(--rebrand-grad-light);
    background-color: var(--rebrand-dark-back);
    text-shadow: 1px 1px 1px black;
}
.sub-li.active,
.sub-li.active a {
    color: var(--font-color-3b, blue);
    text-shadow: unset;
    background-color: var(--font-color-2, lightgrey);
}
.nav-menu .showSubmenu {
    background-color: var(--font-color-3b, grey);
}

/**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%;

    background-image: linear-gradient(
        45deg,
        var(--rebrand-grad-light),
        var(--rebrand-dark-back)
    );
}
.breadcrumb {
    padding: 0px 15px;
    font-size: 10px;
}

/**CATS**/
.cats-row {
    opacity: 1;
}
.cat-drop.multi-cats {
    color: var(--font-color-2, white);
}
.cat-dropbox {
    background-color: var(--rebrand-grad-dark, white);
    background-image: linear-gradient(
        45deg,
        var(--rebrand-dark-back),
        transparent
    );
}
.cat-dropbox a {
    color: var(--font-color-2);
    font-weight: bold;
}
.cat-dropbox:hover a,
.cat-dropbox a:hover,
.cat-dropbox:hover .cat-drop.multi-cats {
    color: var(--font-color-3b, blue);
    text-decoration: none;
}
.cat-dropbox:hover,
.cat-dropbox:hover .cat-drop.multi-cats {
    color: var(--rebrand-dark-back);
    background-color: var(--rebrand-grad-light);
}
.cat-dropbox:hover a {
    background-color: unset;
}
.sub-cat {
    background-color: var(--rebrand-grad-light);
    color: var(--font-color-1, black);
}
.sub-cat a {
    color: var(--font-color-1, black);
}
.sub-cat a:hover {
    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);
}
/**FEATURED BAR**/
.featuredbtn.pull-right {
    background-color: unset;
    color: var(--rebrand-grad-light) !important;
    padding: 4px 0;
    background-image: linear-gradient(
        45deg,
        var(--rebrand-dark-back),
        var(--rebrand-grad-dark)
    );
    font-family: "Arial";
    font-weight: bold;
    padding: 0.4em 1em 0 1em;
}
.featuredbtn.pull-right:hover {
    background-color: var(--font-color-3b, blue);
}
.body_header,
.featured_title,
.scat-list .body_header {
    color: var(--rebrand-grad-light) !important;
    background-color: var(--font-color-3b, black) !important;
    padding: 4px 0;
    background-image: linear-gradient(
        45deg,
        var(--rebrand-dark-back),
        var(--rebrand-grad-dark)
    );
}
.featured_header,
.body_header.cat_header,
.spots_header a {
    color: var(--rebrand-grad-light, 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;
}

a.spotlight-btn-click.ga4click {
    /* color: var(--rebrand-grad-light) !important; */
}

/**LOGOS**/
.sponsor-logo img {
    width: 128px;
    height: 34px;
}

.well_footer {
    background-color: var(--font-color-1, black);
}
.footer_nav li a {
    color: var(--font-color-3b, blue);
    font-family: "Open Sans", sans-serif;
}
.footer_nav li + li {
    background: url("../images/separator.png") 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;
}

/**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 {
    text-shadow: 0.1em 0.1em 2px black;
    background-color: unset;
    color: var(--rebrand-dark-back);
}
.page-numbers li a,
.page-numbers li {
    color: var(--rebrand-grad-dark);
}
.page-numbers li a:hover {
    color: var(--font-color-2, 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);
}
/* West Coast LBMA Rebrand from dark-green -> black on white */
.listing-item .member-logo img {
    filter: grayscale(1) invert(1) contrast(2);
    box-shadow: 0 0 5px 5px var(--rebrand-dark-back);
}
.company-contact a:hover {
    color: var(--font-color-3a, white);
}
.listing-item.priority .listing-details a:hover,
.listing-details a:hover {
    color: var(--font-color-4, 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-desc.company-info {
    color: var(--rebrand-grad-dark);
    text-shadow: 0.1em 0.1em 5px black;
}
.listing_row.top_row {
    margin-bottom: 1em;
}
ul.quick-nav {
    background-image: linear-gradient(
        45deg,
        var(--rebrand-grad-dark),
        var(--rebrand-grad-light)
    );
}
/**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;
}
.media-scroll h1 {
    color: var(--rebrand-grad-dark);
    text-shadow: 0.1em 0.1em 5px black;
}

.aboutOurGuideText {
    color: var(--rebrand-grad-dark);
    text-shadow: 0.1em 0.1em 5px black;
}

.media-scroll p strong,
.media-scroll p {
    color: var(--rebrand-grad-dark);
    text-shadow: 0.1em 0.1em 5px black;
}

label {
    color: var(--rebrand-grad-light);
    text-shadow: 0.2em 0.2em 15px black;
}

/* more EXPLORE page tweaks  */
h4.pg-ads-title {
    color: var(--rebrand-grad-light, white) !important;
    background-image: linear-gradient(
        45deg,
        var(--rebrand-dark-back),
        var(--rebrand-grad-light)
    );
}

.advertisewithus-scroll h1 {
    color: var(--rebrand-grad-dark);
    text-shadow: 0.1em 0.1em 5px black;
}

.advertisewithus,
.advertisewithus a {
    color: var(--rebrand-grad-dark);
    text-shadow: 0.1em 0.1em 5px black;
}

.contactus-scroll h1 {
    color: var(--rebrand-grad-dark);
    text-shadow: 0.1em 0.1em 5px black;
}

.contactusAdvertiseWUs,
.contactusAdvertiseWUs a {
    color: var(--rebrand-grad-dark);
    text-shadow: 0.1em 0.1em 5px black;
}

@font-face {
    font-family: "Blackpaper";
    src: url("../fonts/BlackpaperRegular.eot");
    src: url("../fonts/BlackpaperRegular.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/BlackpaperRegular.woff") format("woff"),
        url("../fonts/BlackpaperRegular.ttf") format("truetype"),
        url("../fonts/BlackpaperRegular.svg#BlackpaperRegular") format("svg");
    font-weight: normal;
    font-style: normal;
}