body, html {
    overflow-x: auto;
    overflow-y: auto;
}

#map { position:absolute; top:0; bottom:0; right:0; width:83.333%; }

.full-height-container { overflow:hidden; height:100%; }
.full-height-container .scroll { overflow:auto; height:100%; }

.loading:before { background-color:rgba(0,0,0,0.20); }

input[type='checkbox'] + label {
  color:#fff;
  height:50px;
  line-height:30px;
}
input[type='checkbox'] + label:before,
input[type='checkbox'] + label:after {
  margin-top:5px;
}
input[type='checkbox']:checked + label,
input[type='checkbox']:checked + label:hover { color:#fff; }
input[type='checkbox']:checked + label:hover:before { opacity:0.75; }

.checkbox-pill input[type='checkbox'] + label[for='protected'],
.checkbox-pill input[type='checkbox']:checked + label[for='protected'],
.fill-protected   { background-color:#00723F; }
.checkbox-pill input[type='checkbox'] + label[for='threatened'],
.checkbox-pill input[type='checkbox']:checked + label[for='threatened'],
.fill-threatened { background-color:#D89A2E; }
.checkbox-pill input[type='checkbox'] + label[for='endangered'],
.checkbox-pill input[type='checkbox']:checked + label[for='endangered'],
.fill-endangered  { background-color: #83232A; }
.legend { box-shadow:0 1px 2px rgba(0,0,0,0.10); }
.legend, .mapboxgl-ctrl-attrib { display:none }


.mapboxgl-popup-close-button {
  z-index: 1;
}

button {
  padding: 2px 8px 2px;
}

.mapboxgl-popup-content {
  font: 500 18px/22px 'Helvetica Neue', 'Open Sans', Sans-serif;
  padding: 2px 6px;
  max-width: 420px;
}

.mapboxgl-popup-content-wrapper {
  padding: 1%;
}

.protected {
  color: #00723F;
  visibility: visible;
}

.threatened {
  color: #D89A2E;
  visibility: visible;
}

.endangered {
  color: #83232A;
  visibility: visible;
}

.mapboxgl-popup-content h3 {
  margin: 0;
  display: block;
  padding: 0;
  border-radius: 3px 3px 0 0;
  font-weight: 700;
  font-size:12px !important;
}

.mapboxgl-popup-content h4 {
  margin: 0;
  display: block;
  font-weight: 400;
  font-size:10px !important;
}

.mapboxgl-popup-content div {
  padding: 2px;
}

.mapboxgl-container .leaflet-marker-icon {
  cursor: pointer;
}

.popup-leftside {
  background-color: #fff;
  width: 50%;
  display: inline-block;
  height: 100%;
  border-radius: 3px 0 0 3px;
}

.popup-rightside {
  margin: 1.6% 2%;
  width: 46%;
  display: inline-block;
  float: right;
  font-size: 12px;
  position: relative;
}

.popup-image {
  max-height: 190px;
  vertical-align: middle;
  max-width: 210px !important;
  padding: 12.6% 0;
}

hr {
  margin: 0;
  background-color: #bbb;
}

.marker {
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

.popup-description {
  line-height: 15px;
  margin: 5px 0;
}

.popup-country {
  top: -3px;
  position: relative;
}

.popup-link {
  padding: 2px 2px !important;
}

.mapboxgl-ctrl-compass {
  display: none !important;
}

.mapboxgl-popup {
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

.hover-popup {
  text-align: center;
}


@media only screen and (max-width:770px) {
  .listings .item {
    padding: 7px;
  }
  #search-bar, .mapboxgl-ctrl-top-right, .legend {
    display:none;
  }
  .listing-container { width: 23%; }
  .mb-watermark { margin-left:33.3333%; }

  .pad1 {
    display:none;
  }

  .mapboxgl-popup-content {
    padding: 0;
    max-width: 300px;
  }

  /* v3.0 only, will remove once solved the mobile interaction challenge */
  #map {
    width: 100%;
  }

  /* v3.0 only, will remove once solved the mobile interaction challenge */
  .dynamic-listing-container {
    display:none;
  }

  /* v1.0 only! */
  .full-height-container {
    background:transparent;
  }

  input[type='checkbox'] + label:before,
  input[type='checkbox'] + label:after {
    margin-top: -2px;
  }
  input[type='checkbox'] + label {
    color:#fff;
    height: 36px;
    line-height: 15px;
  }

  .mapboxgl-popup-content div {
    padding: 1px;
  }

  .popup-rightside {
    font-size: 11px;
  }
  .popup-image {
    margin: 25% 0;
  }
}


@media only screen and (max-width:540px) {

  .listings .item {
    padding: 8px;
  }
  
.popup-image {
    max-width: 130px;
    padding: 10% 0 0 0;
    margin: 0;
  }
  
  #map {
    width:100%;
  }
  .listing-container {
    width:33.33333%;
  }

  .dynamic-listing-container {
    display:none;
  }

  .full-height-container {
    background:transparent;
    height: inherit;
  }
  .listing-container {
    padding:0;
    margin:0;
    border-radius:0;
    z-index:10;
    position:fixed;
  }

  .listing-container {
    bottom:auto;
  }

  .mb-watermark {
    bottom:38%;
    left:10px;
    margin-left:0;
  }
  input[type='checkbox'] + label {
    border:none;
  }
}

@media only screen and (max-width:400px) {
  .listing-container {
    width:40%;
  }

  .popup-leftside {
    display:inline;
    width:auto;
  }
  .popup-rightside {
    display:inline;
    width:auto;
  }
  .mapboxgl-popup-content {
    max-width: 190px;
    padding: 1px 0;
  }

  .popup-image {
    max-width: 130px;
    padding: 10% 0 0 0;
    margin: 0;
  }

  .mapboxgl-popup-content div {
    padding: 0;
  }
}