body, html {
  font-family: 'Roboto', sans-serif;
  padding:0px;
  margin:0px;
  position:relative;
  font-size:12pt;
  line-height:18pt;
  background:black;
  color:white;
}
a {
  color:white;
}
#header {
  height:50px;
  background:#222;
  width:100%;
  margin-top:0px;
}
#header-inner {
  padding:7px;
}

.site-title {
  margin:5px 10px;
  font-size:1.2em;
  color:white;
  text-decoration:none;
}

#content {

  width:70%;
  min-width:380px;
  margin:40px 15%;
  
}

#header-nav {
  display:inline;
}
#header-nav li {
  display: inline;
  list-style-type: none;
  padding: 0;
  font-size:1.1em;
  margin-right:20px;
}
#header-nav li a {
  color:white;
  text-decoration:none;
}
#map {
  width:100%;
  height: 800px;
}
#sidebar {
  width:15%;
  min-width:280px;
  background-color:rgba(0, 0, 0, 0.65);
  position:absolute;
  top:50px;
  right:10px;
  box-shadow: 5px 5px 8px #333;
  color:white;
  padding:20px;
}

#sidebar img {
  width:100%;
}
#sidebar h1 {
    color: white;
    font-size: 20px;
    font-weight: 300;
    margin: 5px;
}
#sidebar h3 {
    color: white;
    font-size: 17px;
    font-weight: 500;
    margin: 5px;
}

.leaflet-popup-content {
  color:black;
}

@media (max-width: 350px) {
  #title {
     font-size:8pt;
     right:0px;
     width:100%;
  }
}

/*********** gallery ************/

.gallery-tile {
  text-align:center;
  border:solid 1px #444;
  width:200px;
  height:270px;
  float:left;
  padding:5px;
  font-size:85%;
}
.gallery-tile img {
  max-width:190px;
}


/************ modal *****************/


#modal {
  position:absolute;
  top:2%;
  left: 10%;
  width:80%;
  background-color:rgba(0, 0, 0, 0.9);
  text:white;
}
#modal-header {
  margin-top:10px;
}
#modal-content {
  padding:0px 40px 40px 40px;
}

@media screen and (max-width: 780px) {
	#modal {
	  left: 10%;
	  width:80%;
	}
}

@media screen and (max-width: 520px) {
	#modal {
	  left: 2%;
	  width:96%;
	}
}