@import url(https://fonts.googleapis.com/css?family=Open+Sans);
:root {
  --logo-font-color: #0d1d41;
  --pg-bkg-color: #ffffff;
  --font-color-1: #1f1f1f;
  --font-color-2: #fff;
  --font-color-3a: #ffffff;
  --font-color-3b: #69727d;
  /* --font-color-3b: #4091df; */
  --font-color-4: #418edf;
  --font-color-hover: #324a6d;
  --priority-bkg: #c7c8eb;
  --priority-color: #000;
  --priority-links: #0d1d41;
  --basic-listing-bgk: #fff;
  --basic-color: #000;
  --basic-link: #0d1d41;
  --big-font: "Open Sans", sans-serif;
}
div#pgCont {
  border-color: var(--font-color-3b, black);
  background: var(--pg-bkg-color);
  display: flex;
  flex-direction: column;
}
.main-content, .main-body.main-home {
  flex-grow: 1;
}

.main-body.main-home.hideEls {
  width: 100%;
}

.main-content.main-listings.pg-mediakit, 
.main-content.main-listings.pg-advertisewithus, 
.main-content.main-listings.pg-contactus {
  width: 95%; /* ← the map should be a big away from the edges */
}

a {
  color: var(--font-color-3b, inherit);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--font-color-4, blue);
  text-decoration: none;
}
.gui-logo {
  margin: auto 0;
}
.gui-logo-name {
  font-size: 2.5rem;
  color: var(--logo-font-color, inherit);
  font-family: var(--big-font, sans-serif);
  font-weight: bold;

  /* Needed to add the line break between Name and Product*/
  position: relative;
  white-space: nowrap;
  color: transparent;
  line-height: 1.2;
  user-select: none;
  pointer-events: none;
  height: 2.5em;
}

.gui-logo-name::after {
  white-space: pre;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  content: "BIA of the Big Bend\A Membership Directory";
  color: #000;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0px;
  padding: 0px;
  height: 100%;
  background-image: url("/images/guide/biabb-background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.top-bar {
  background-color: unset;
}

.AssocHeader {
  background-color: unset;
  grid-template-columns: auto;
  grid-area: assocheader;
}
img#AssocLogo {
  max-height: 100px;
}

.nav-area {
  background-color: var(--font-color-3b);
  margin-bottom: 5px;
}
.nav-li {
  border: none;
}
li.nav-li:hover {
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1.8px;
}

.nav-menu a {
  /* color: var(--font-color-3a, black); */
}
.nav-menu .nav-li > a:hover,
.nav-menu .nav-li .parent-sub.active,
.nav-li.active {
  color: var(--font-color-2, 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-2, white);
  font-weight: normal;
  font-size: 14px;
}
.sub-li a:hover {
  top: 0px !important;
  color: var(--font-color-4, blue);
  background-color: var(--font-color-2, lightgrey);
}
.sub-li.active,
.sub-li.active a {
  /* color: var(--font-color-3a, blue); */
  color: white;
  background-color: var(--font-color-3b, lightgrey);
}
.nav-menu .showSubmenu {
  background-color: var(--font-color-4, 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%;
}
.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: white;
  color: var(--font-color-3b);
  /* background-color: var(--font-color-3a, white); */
}
.cat-dropbox a {
  font-weight: bold;
  color: var(--font-color-3b);
}
.cat-dropbox:hover a,
.cat-dropbox a:hover,
.cat-dropbox:hover .cat-drop.multi-cats {
  /* color: var(--font-color-2, blue); */
  text-decoration: none;
  color: unset;
}
.cat-dropbox:hover,
.cat-dropbox:hover .cat-drop.multi-cats {
  background-color: white;
  /* 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);
}
/**FEATURED BAR**/
.featuredbtn.pull-right {
  background-color: var(--font-color-3b, initial);
}
.featuredbtn.pull-right:hover {
  background-color: var(--font-color-4, blue);
}
.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%); */
}
.scats a:hover {
  color: var(--font-color-4);
}
.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: 128px;
  height: 34px;
}

.well_footer {
  background-color: var(--font-color-1, 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;
}

/**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-3a, blue);
}
.page-numbers li a,
.page-numbers li {
  color: var(--font-color-3b, #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-4, white);
}
.listing-item.priority .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: "Montserrat", sans-serif;
  padding: 6px;
  border-bottom: 1px solid transparent;
}
.desc_boarder {
  border-color: var(--font-color-3b, white);
}
.company-desc {
  border-radius: 4px;
  background: white;
}
.listing_row.top_row {
  margin-bottom: 1em;
}

/**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-4, 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;
}

img#AssocLogo {
  border-radius: 4px;
  /* box-shadow: 0 0 8px 4px white, 0 0 12px 8px inset; */
}

/* Pause for the day */
/* Renamed the file hita, and hita was renamed hita-OG (in my test site only) */
a.category-link,
a.category-link.parent-category.ga4click {
  background-color: white;
  text-decoration-line: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 0.13em;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s;
}

a.category-link:hover,
a.category-link.parent-category.ga4click:hover {
  color: var(--font-color-4);
  text-decoration-color: var(--font-color-4);
}

.cat-dropbox {
}