@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');

#viz {
  font-family: "Roboto", monospace;
  font-weight: 400;
  padding: 0;
}

#viz * {
  text-align: left;
}

/* MAPS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#viz .map .leaflet-control-attribution.leaflet-control {
  font-family: "Roboto", sans-serif;
}

#viz .map .leaflet-control-attribution.leaflet-control a {
  font-size: 1.0rem;
}

/* LEGENDS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#viz .legend {
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
}

#viz .legend img {
  display: inline-block;
}

#viz .legend .label {
  font-size: inherit;
}

/* #VIZ #MAP
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#viz .map .leaflet-marker-icon.cluster {
  font-family: "Roboto", sans-serif;
}


/* #VIZ #MAP popup
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#viz .info,
#viz .info table,
#viz .info .details table,
#viz .info p {
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  line-height: 1.2;
}

#viz .info p.region,
#viz .info p.organisme,
#viz .info .nom-adr p,
#viz .info .summary p.secteur,
#viz .info .students p {
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
}

#viz .info p.region,
#viz .info p.organisme,
#viz .info .nom-adr,
#viz .info p.secteur,
#viz .info .students {
  padding: 0.5rem 1rem;
}

#viz .info table th {
  text-align: center;
}

#viz .info table th:first-child {
  width: 40%;
}

/* LIGHTBOX */
#viz .lightbox .close {
  font-size: 2.5rem;
	padding: 10px;
	color: #000;
}

#viz .lightbox .container {
  margin-top: 50px;
  padding: 0;
}

/* CLOSE ICON
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#viz .icon-btn {
  font-size: 3rem;
	padding: 10px;
	color: #000;
}

#viz .icon-btn:hover {
	color: #0E0;
	text-shadow: none;
}

#viz .icon-btn i {
	cursor: pointer;
}

@media (min-width: 40em) {
	#viz .icon-btn {
		padding: 0px 2px;
	}
}

/* TABLES */
#viz table {
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
}

@media (min-width:40em){
  #viz table {
    font-size: 1.4rem;
  }
}

/* LARGER (THAN MOBILE) SCREENS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width:400px) {
  #viz #header h1.title {
    font-size: 4rem;
  }
}

@media screen and (min-width:551px) {
  #viz #header h1.title {
    font-size: 5rem;
  }

  #viz h2 {
    font-size: 3.5rem;
  }

  #viz h3 {
    font-size: 2.7rem;
  }

  #viz .legend {
    font-size: 1.6rem;
  }
}