/*  style for matrices */
.matrix .axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.matrix .bar {
  fill: steelblue;
}

.matrix .x.axis path {
  display: none;
}

.matrix .x.axis line{
	display: none;
}

.matrix .x.axis2 path {
  display: none;
}

.matrix .legend line {
  stroke: #000;
  shape-rendering: crispEdges;
}
/*looks like it needs explicit height on the id so each needs one*/
/*.matrix {
	position: relative;
	height:30em;
	width: 100%;
}*/

#allmatrix {
	position: relative;
	height:35em;
	width: 100%;
}

#racematrix {
	position: relative;
	height:30em;
	width: 100%;
}


#racematrix .buttonholder {
/*position: absolute;
bottom: 0px;*/

width: 100%;
}

.buttonholder ul{
/*position: absolute;
bottom: 0px;*/

clear:both;
}

.datalabel {
	font-weight: bold;
}


#mothermatrix {
	position: relative;
	height:30em;
	width: 100%;
}


#educationmatrix {
	position: relative;
	height:30em;
	width: 100%;
}



svg
{
/*background: silver;*/
}


.interactive ul li{
	float: left;
	width: 15%;
	margin:1em 5%;		
}

.matrix li:first-of-type {
	margin-left: 1em;
}

.button {
	font-size: 1em; 
	text-align: center;
	
	/* background: #ECECE9; */
	border: 1px solid #d05131;
	-webkit-box-shadow: 4px 4px 4px 0px rgba(50, 50, 50, 0.24);
	-moz-box-shadow:    4px 4px 4px 0px rgba(50, 50, 50, 0.24);
	box-shadow:         4px 4px 4px 0px rgba(50, 50, 50, 0.24);
	font-weight: bold;
	padding:.25em 1em;
	
}

.button.international {
	font-size: 1em;
	
	
}

/*@media only screen and (min-width: 950px) {
	.button {
	font-size: 1.3em;

	
}
	
	.button.international {
	font-size: 1.15em;
	
	
}
}
*/


.picked {
	background:#E29B5A;
	border: 1px solid #D05133;
	shape-rendering: crispEdges;
}

.matrix .x.axis text {
	font-weight: bold;
	 font-size: 1.2em; 
}

.insufficient {
	display: block;
float: right;
clear: both;
width:28%;
}

.quinthead {
	font-size: 1em;
	
}

/*@media only screen and (min-width: 767px) {

.quinthead {
	font-size: 3em;
}
}

*/