.hero-full-screen {
  height: 100vh;
  
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: url("./assets/FremontBrewing-SparklyPhotography-CMYK-900x600.jpg") center center no-repeat;
  background-size: cover;
}

html, .blackbackground {
  background-color: rgb(60, 58, 58);
  height: 100vh;
  display: -webkit-flex; 
  display: -ms-flexbox;
  display: flex; 
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  
  
  
 
  
  
}

.top-bar {
 background-color: black !important;
 color: white;
}

a {
  color: white !important;
}

.top-content-section {
  width: 100%;
}

.middle-content-section {
  text-align: center;
  color: #fefefe;
}

.card {
  height: 280px;
  width: 300px;
  background-color:grey !important;
  font-weight: bold !important;
  text-align: center;
 
}

.card-divider {
  background-color: black !important;
  color: white;
  text-align: center !important;
}

.marker {
  background-image: url("assets/pngguru.com.png");
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}
  
.mapboxgl-popup {
  max-width: 200px;
}
  
.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}