#map,
body,
html {
  height: 100%;
  width: auto;
  margin: 0;
  padding: 0;
  background-color: #75cff0;
}

input {
  background-color: #fff9dd;
  border-radius: 5px;
}



li {
      margin: 0;
  list-style-type: none;
}

.nav-link {
    padding: 0.25rem 0;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    margin-left: 1rem;
    border-bottom: 0.25rem solid transparent;
}

.nav-link:hover{
    color: rgba(255,255,255,0.5);
    border-bottom-color:rgba(255,255,255,0.5);
}

.nav-link.active {
    color: white;
    border-bottom-color:white;

}

ul {
  padding: 0 !important;
    margin: 0;
}

#info,
#right {
  display: block;
}

.empty-message {
  display: none;
}
.results-header {
  font-size: 1.4em;
  margin: 38px 20px 5px 0;
  padding: 10px 15px;
  border-bottom: 1px solid #ccc;
  background-color: steelblue;
  color: white;
  width: 100%;
}

.link-class {
  border-bottom: 1px solid #777;
  padding: 20px 10px;
  height: 40px;
}
.link-class:hover {
  background-color: #f1f1f1;
}
.menu-header {
  background-color: #52617c;
  padding: 10px 2px;
  margin: 10px 0;
  border: 1px solid #000;
  border-radius: 3px;
  width: 100%;
  height: auto;
}
#info {
  width: 100%;
  height: auto;
  overflow: auto;
  font-size: 1.2em;
  color: #fff;
  background-color: navy;
  margin: 0;
  padding: 10px;
  border: 3px solid #e2961e;
  overflow-y: scroll;
}
#info img {
  height: auto;
  max-height: 175px;
  width: 125px;
  margin: 0;
  padding: 0;
  border: none;
}
#info img li {
  display: inline;
}
.image-content {
  display: block;
  height: 200px;
  max-height: 200px;
  width: 125px;
  margin-left: 5px;
}
#info a {
  color: #fff;
}
#info hr {
  border-color: #e2961e;
  width: 50%;
  margin: 15px 20px;
}
#right {
  float: right;
  margin: 15px 0 20px;
}
a.infowindow_link_zoom_city,
a.infowindow_link_zoom_global,
a.infowindow_link_zoom_state,
a.infowindow_link_zoom_street {
  background-color: #4682b4;
  padding: 4px 0;
  margin: 3px 0 0;
  width: 49.3425868%;
  text-align: center;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 3px;
  display: inline-block;
}
.crew-content,
.kin-content,
.source-content,
.zoom-buttons {
  display: block;
  margin: 20px 3px 0;
  text-align: left;
  font-size: 1.4 em;
}
.info-button {
  background-color: #4682b4;
  padding: 4px 0;
  margin: 0;
  width: 100%;
  text-align: center;
  border: 1px solid #000;
  border-radius: 3px;
  display: inline-block;
}

.descriptor {
  color: #e6c737;
  font-weight: 700;
  font-size: 1.2em;
}
.leaflet-popup-content-wrapper {
  width: 421px;
  height: auto;
}
.leaflet-popup-content {
  width: 356px !important;
}
.search-box-container {
  width: 100%;
  margin: 30px;
}

/*TYPEAHEAD*/
.twitter-typeahead{display: block !important;}
.tt-menu.tt-open {background-color: #fff !important; width: 100%;
    margin: 0;}
    
.tt-hint,
.tt-query,

.typeahead:focus {
  border: 2px solid #0097cf;
}
.tt-query {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
  color: #999;
}
.tt-dropdown-menu {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 12px;
  padding: 8px 0;
  width: 422px;
}

.tt-menu{
  position: fixed !important;
  overflow-y: scroll !important;
  inset: 100px 0 0 !important;    
}

div.tt-menu.tt-open,
div.tt-selectable {
  margin: 0;
  width: 100%;
}
.tt-suggestion {
  font-size: 18px;
  line-height: 24px;
  padding: 3px 20px;
}
.tt-suggestion.tt-cursor {
  background-color: #0097cf;
  color: #fff;
}
.tt-suggestion p {
  margin: 0;
}
input.form-control.typeahead.tt-hint {
  display: none;
}
input.form-control.typeahead.tt-input {
  width: 100%;
}
div.tt-selectable {
  border-bottom: 1px solid #d0d0d0;
  padding: 10px;
      width: 100%;
}
div.tt-selectable a {
  color: #000;
  text-decoration: none;
}
.tt-selectable img {
  width: 60px;
  height: 80px;
  float: left;
  margin: 10px;
  border-right: 1px solid #d0d0d0;
}

/*MEDIA QUERIES*/

@media screen and (min-width: 768px) and (max-width: 991px) {
  input.form-control.typeahead.tt-input {
    width: 100%;
  }
  
  .tt-menu{
    position: fixed !important;
    overflow-y: scroll !important;
    inset: 125px 0 0 !important; 
  }
}

@media screen and (min-width: 376px) and (max-width: 767px) {
  #right {
    float: right;
    margin: -10px 0 10px 10px;
    width: 64px;
  }
  #info {
    width: 300px;
    height: 225px;
    color: #fff;
    background-color: navy;
    display: block;
    margin: 0;
    padding: 10px;
    border: 3px solid #e2961e;
    overflow: auto;
  }
  #right img {
    height: auto;
    width: 75px;
    padding: 0;
    border: none;
    margin: 0;
  }
  .image-content {
    display: block;
    height: 150px;
    max-height: 150px;
    width: 75px;
  }
  #info img li {
    display: inline;
  }
  .crew-content,
  .kin-content,
  .source-content {
    font-size: 1.4em;
  }
  .crew-content,
  .kin-content,
  .source-content,
  .zoom-buttons {
    display: block;
    margin: 20px 0 0;
    text-align: left;
  }
  .leaflet-popup-content-wrapper {
    width: 365px !important;
    height: 275px !important;
  }
  .leaflet-popup-content {
    width: 395px;
    height: 250px;
  }
  .leaflet-popup-content p {
    margin: -6px 0;
  }
  a.infowindow_link_zoom_city,
  a.infowindow_link_zoom_global,
  a.infowindow_link_zoom_state,
  a.infowindow_link_zoom_street {
    background-color: #4682b4;
    padding: 4px 0;
    margin: 3px 0 0;
    width: 49.0876407%;
    text-align: center;
    text-decoration: none;
    border: 1px solid #000;
    border-radius: 3px;
    display: inline-block;
  }
  .search-box-container {
    width: 100%;
    margin: 30px -15px;
  }
  
  /*TYPEAHEAD*/
  
  input.form-control.typeahead.tt-input {
    width: 100%;
    margin: 0 15px 0;
  }
  
  .tt-menu{
  position: fixed !important;
  overflow-y: scroll !important;
  inset: 125px 0 0 !important; 
  }
  
  div.tt-menu.tt-open {
    width: 100%;
    margin: 0;
  }
  div.tt-selectable {
    border-bottom: 1px solid #d0d0d0;
    width: 100%;
    margin: 0;
    padding: 10px;
  }
  .tt-selectable img {
    width: 75px;
    height: 95px;
    float: left;
    margin: 5px 10px 10px -10px;
    border-right: 1px solid #d0d0d0;
  }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
  #right {
    float: right;
    margin: -10px 0 10px 10px;
    width: 70px;
  }
  #info {
    width: 58vw;
    height: 318px;
    color: #fff;
    background-color: navy;
    display: block;
    margin: 0;
    padding: 10px;
    border: 3px solid #e2961e;
    overflow: auto;
  }
  .info-button {
    background-color: #4682b4;
    padding: 4px 0;
    margin: 0 0 0 3px;
    width: 100%;
    text-align: center;
    border: 1px solid #000;
    border-radius: 3px;
    display: inline-block;
  }
  #right img {
    height: auto;
    width: 75px;
    padding: 0;
    border: none;
    margin: 0;
  }
  .image-content {
    display: block;
    height: 150px;
    max-height: 150px;
    width: 75px;
  }
  #info img li {
    display: inline;
  }
  .crew-content,
  .kin-content,
  .source-content,
  .zoom-buttons {
    display: block;
    margin: 20px 0 0;
    text-align: left;
  }
  .leaflet-popup-content-wrapper {
    width: 78vw !important;
    height: 375px !important;
  }
  .leaflet-popup-content {
    width: 68px;
    height: 348px;
  }
  .leaflet-popup-content p {
    margin: -6px 0;
  }
  a.infowindow_link_zoom_city,
  a.infowindow_link_zoom_global,
  a.infowindow_link_zoom_state,
  a.infowindow_link_zoom_street {
    background-color: #4682b4;
    padding: 4px 0;
    margin: 3px 0 0;
    width: 48.9307956%;
    text-align: center;
    text-decoration: none;
    border: 1px solid #000;
    border-radius: 3px;
    display: inline-block;
  }
  .search-box-container {
    width: 100%;
    margin: 30px -15px;
  }
  
  /*TYPEAHEAD*/
  .tt-menu{
  position: fixed !important;
  overflow-y: scroll !important;
  inset: 125px 0 0 !important; 
  }
  
  input.form-control.typeahead.tt-input {
    width: 100%;
    margin: 0 15px 0;
  }
  div.tt-selectable {
    border-bottom: 1px solid #d0d0d0;
    padding: 10px;
    width: 100%;
  }
  .tt-selectable img {
    width: 75px;
    height: 95px;
    float: left;
    margin: 5px 10px 10px -10px;
    border-right: 1px solid #d0d0d0;
  }
}