header{
	background-color:#222;
	padding:.5rem 0;
}
.off-canvas{
	background:#222;
}
.off-canvas ul li{
	border-bottom:1px solid #333;
}
.off-canvas a{
	color:#fff;
	font-weight:bold;
}
section{
	padding:2rem 0;
}
.subheader{
	position:relative;
}
.subheader::before{
	content:'';
	display:block;
	width:100%;
	height:1px;
	background-color:#8a8a8a;
	position: absolute;
	top: 50%;
	right: 0;
	z-index:0;
}
.subheader h3{
	position:relative;
	z-index:1;
	display:inline-block;
	background:#fff;
	padding:20px;
	margin-bottom:0;

}
.positive{
	color:#4cc0c0;
}
.negative{
	color:#fe6383;
}

/* Chart / Comparison */
.chart{
	position:relative;
}
.chart-title{
	text-align:center;
}
.comparison{
	position:absolute;
	width:100%;
	text-align:center;
	top:50%;
	left:50%;
	z-index:0;
	transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
}
.comparison .title{
	text-transform:uppercase;
	line-height:1;
}
.percent,
.value{
	margin-bottom:0;
}

/* Legend*/
.blue{background-color:#37a1eb!important}
.yellow{background-color:#ffcc56!important}
.red{background-color:#fe6383!important}
.green{background-color:#4cc0c0!important}
.orange{background-color:#ff9f40!important}
.gray{background-color:#d0d0d0!important}

.legend{
	width:50%;
	margin:20px auto 0;
}
.legend-box{
	display:inline-block;
	width:100%;
	height:10px;
	margin-right:10px;
	background-color:#ddd;
}
.legend-val{
	display:inline-block;
	width:auto
}


.notes{
	font-style:italic;
	margin-top:2rem;
	text-align:center;
}
.notes p{
	margin-bottom:.5rem;
}

.hide{
	display:none!important;
}
.show{
	display:block!important;
}

@media screen and (min-width: 64em) {
.hide,
.show{
	display:block!important;
}
}