#ssi-content {
	background-color: #003c71;
	color: white;
}
#ssi-content .container {
	padding-top: 20px;
	padding-bottom: 20px;
}
#ssi-content .chart-heading {
	padding-bottom: 20px;
	font-family: "intel-clear-headline";
    line-height: .9;
    letter-spacing: .029em;
    font-size: 5em;
	text-align: center;
}
#ssi-content .chart-heading sup {
	top: -1em;
    font-size: 50%;
}
#ssi-content .dataset-nav {
	width: auto;
	margin: 0 auto 20px;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	overflow-x: hidden;
}
#ssi-content li.dataset-name {
	display:inline-block;
	padding: 10px 5px;
	cursor: pointer;
	opacity: 0.5;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;
}
#ssi-content li.dataset-name.active {
	opacity: 1;
}
#ssi-content .gender-chart,
#ssi-content .ethnicity-chart
{
	margin: 0;
	text-align: center;
	direction: ltr;
}
#ssi-content .gender-chart {
	-ms-transform: rotate(90deg);	
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	width: 67%;
    margin: -20% auto -16.75%;
	position: relative;
	right: -10px;
}
#ssi-content .ethnicity-chart {
	border-top: 1px solid rgba(255,255,255,0.1);
	
}
#ssi-content .ethnicity-chart svg {
	-ms-transform: scale(1.25);
	-webkit-transform: scale(1.25);
	transform: scale(1.25);
	
	-ms-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	
    margin-bottom: 25%;
    margin-left: -50%;
}
    
#ssi-content .gender-chart .percent,
#ssi-content .ethnicity-chart .percent
{
	font-family: "intel-clear-headline";
    line-height: .9;
    letter-spacing: .029em;
    font-size: 3em;
	direction: ltr;
}
#ssi-content .gender-chart .large-screen,
#ssi-content .ethnicity-chart .large-screen
{
	display: none;
}
#ssi-content .gender-chart .percent tspan,
#ssi-content .ethnicity-chart .percent tspan
{
	font-size: 18px;
}
#ssi-content .gender-chart h3,
#ssi-content .ethnicity-chart h3
{
	display: none;
}
#ssi-content .clearfix {
	clear: both;
}
@media (min-width: 768px)
{
	#ssi-content .gender-chart,
	#ssi-content .ethnicity-chart
	{
		float: left;
		border: 1px solid rgba(255,255,255,0.1);
	}
	#ssi-content .gender-chart {
		width: 28%;
		margin: 0;
		clear: both;
		right: initial;
		
		-ms-transform: rotate(0deg);	
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	#ssi-content .ethnicity-chart {
		width: 70%;
		margin-left: 2%;
	}
	#ssi-content .ethnicity-chart svg {
		-ms-transform: scale(1);
		-webkit-transform: scale(1);
		transform: scale(1);
		
		margin-bottom: auto;
		margin-left: auto;
	}
	#ssi-content .gender-chart .large-screen,
	#ssi-content .ethnicity-chart .large-screen
	{
		display: block;
		direction: ltr;
	}

	#ssi-content .gender-chart .small-screen,
	#ssi-content .ethnicity-chart .small-screen
	{
		display: none;
	}
	#ssi-content .gender-chart text,
	#ssi-content .ethnicity-chart text
	{
		-ms-transform: rotate(0deg);	
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	#ssi-content .gender-chart h3,
	#ssi-content .ethnicity-chart h3
	{
		display: block;
	}
}
@media (min-width: 992px)
{
	#ssi-content .dataset-nav {
		float: right;
		width: 28%;
		clear:none;
		padding-left: 40px;
		white-space: normal;
		overflow-x: visible;
		direction: ltr;
	}
	#ssi-content li.dataset-name {
		display: block;
		position: relative;
	}
	/* Arrow Icon */
	#ssi-content li.dataset-name.active::before {
		position: absolute;
		top: 50%;
		left: -18px;
		content: "";
		display: inline-block;
		width: 8px;
		height: 8px;
		border-left: 1px solid white;
		border-bottom: 1px solid white;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		margin-top: -4px;
	}
	/* Circle Around Arrow */
	#ssi-content li.dataset-name.active::after {
		position: absolute;
		top: 50%;
		left: -28px;
		content: "";
		display: inline-block;
		width: 24px;
		height: 24px;
		border: 1px solid white;
		border-radius: 24px;
		margin-top: -12px;
	}
	#ssi-content .gender-chart {
		width: 20%;
		clear: none;
	}
	#ssi-content .ethnicity-chart {
		width: 50%;
	}
}