div#pyramid-illustration {
	background-color: #e5ddd7;
	margin-top: 20px;
	margin-bottom: 20px;
	position: relative;
  overflow: visible;
}

#pyramid-illustration svg {
  width: 100%;
  height: auto;
	shape-rendering: crispEdges;
	margin: auto;
}


#pyramid-illustration text#year-label {
  font: 14px 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 40px;
  fill: #666;
}

#pyramid-illustration text {
	font: 14px 'Helvetica Neue', Helvetica, sans-serif;
	fill: #666
}


#pyramid-illustration .age-labels {
	fill: #fff;	
}

#pyramid-illustration .axes {
  stroke: #666;
  stroke-width: 1px;
  stroke-linecap: square;
}

#pyramid-illustration line.female {
  stroke: #bc70a1;
  stroke-width: 18px;
  shape-rendering: crispEdges;
}

#pyramid-illustration line.male {
  stroke: #1f77b4;
  stroke-width: 18px;
  shape-rendering: crispEdges;
}

#pyramid-illustration .controls {
  fill: #b3b3b3;
  stroke: #333;
  stroke-width: 0.5px;
  shape-rendering: geometricPrecision;
}

#pyramid-illustration .controls line {
	stroke-width: 2px;
}

#downarrow:hover, 
#uparrow:hover,
#downdownarrow:hover,
#upuparrow:hover,
#pause:hover {
  fill: #ddd;
  stroke: #333;
}