@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,900);
@import url(https://fonts.googleapis.com/css?family=Rajdhani:400,700,500,600,300);

html, body {
	margin: 0;
}

body {
	font-family: Lato, sans-serif;
	overflow:hidden;
}

.title {
	position: absolute;
	top: 0;
	left: 10;
	margin: 10px 0px 0px 36px;
}

.title h1 {
	
	font-size:18pt;
	font-weight: 400;
	margin: 0;
	margin-bottom: 5px;
	font-weight: 600;
}

.title h2 {
	margin: 0;
	font-size: 13pt;
	font-weight: 400;
}

span.smaller{
	font-weight: 300;
}

.axis path {
	stroke-width: 1px;
	stroke: #ccc;
	fill: none;
}

.hide path {
	display:none;
}

.line {
	fill: none;
	stroke: #EC1B23;
	stroke-width: 3.5;
	stroke-antialiasing:true;
	//stroke-dasharray: 5px;
	opacity: .4;
}

.line.top-tier {
stroke-dasharray: 0px;
	opacity: .9;
}

.tick:first-child {
	display: none;
}

.tick line {
	stroke: #ccc;
	stroke-width:1;
}

.axis {
	font-family: Rajdhani, sans-serif;
	font-weight: 400;
	color: black;
	font-size: 11pt;
}

.x.axis path {
	stroke: #444;
}

.x.axis .tick text {
padding-top:10px;
}

.sideText {
	font-size: 12pt;
	font-weight: 600;
	font-family: Lato, sans-serif;
}

.grid line {
		shape-rendering: crispEdges;
		stroke: #ccc;

}

.end-label {
	text-anchor: begin;
	font-family: Rajdhani, sans-serif;
	font-weight: 600;
}

.x.axis.zero .tick {
	display: none;
}

.notes-block {
	position:absolute;
	bottom: 0;
	right: 35px;
}

.source, .note {
	font-size: 9pt;
	font-weight: 300;
	text-align: right;
	color: #999;
}

.note {
	margin-top: 0px;
	width:500px;
	margin-right: 5%;
}

@media screen and (max-width: 800px) {
	.title h1 {

		font-size:16pt;
	}

	.title h2 {

		font-size: 12pt;

	}	
}