#readership-map {
  height:35em;
}

.leaflet-container {
  background: #70b5e8;
}

#map-title-container h1 {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1.5em;
  font-weight: 400;
  color:#00285e;
}

#map-title-container {
  background: #ffffffbd;
  padding: 0.5em 2em;
  margin: 0;
}

.leaflet-popup-content a {
  margin-top: 0.5em;
  display: inline-block;
}

.leaflet-marker-icon,
.leaflet-marker-shadow {
  animation: grow 1s;
}

@keyframes grow {
    from { opacity: 0; width:0; height:0 }
    to   { opacity: 1; width:inherit; height:inherit }
}

/* Firefox < 16 */
@-moz-keyframes grow {
    from { opacity: 0; width:0; height:0  }
    to   { opacity: 1; width:inherit; height:inherit  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes grow {
    from { opacity: 0; width:0; height:0  }
    to   { opacity: 1; width:inherit; height:inherit  }
}

/* Internet Explorer */
@-ms-keyframes grow {
    from { opacity: 0; width:0; height:0  }
    to   { opacity: 1; width:inherit; height:inherit  }
}

/* Opera < 12.1 */
@-o-keyframes grow {
    from { opacity: 0; width:0; height:0  }
    to   { opacity: 1; width:inherit; height:inherit  }
}

.leaflet-top, .leaflet-bottom {
  z-index:401;
}

@media only screen and (max-width: 500px) {
  #statsmap {
    height:20em;
  }

  #map-title-container h1 {
    font-size:1em;
  }

  .leaflet-left .leaflet-control, .leaflet-top.leaflet-right .leaflet-control {
    margin:2px;
  }

  .leaflet-container .leaflet-control-attribution, .leaflet-container .leaflet-control-scale {
    font-size:10px;
  }
}