html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	font-family: "Lato", sans-serif;
	font-weight: 200;
	overflow: hidden;
	background: #222;
}

.embed .hide-if-embed {
	display: none !important;
}

.show-if-embed {
	display: none;
}

.embed .show-if-embed {
	display: block;
}

.container:after {
	content:"";
	display:block;
	clear:both;
}

h1,
h2,
h3 {
	font-family: "Lato";
	font-weight: 200;
}

#site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #111;
	padding: 20px;
	height: 20px;
	z-index: 100;
}

#site-header h2,
#site-header nav {
	display: inline-block;
	margin: 0;
	padding: 0;
	float: left;
	width: 30%;
	line-height: 19px;
	font-size: 12px;
	font-family: "Lato";
	font-weight: 600;
	color: #aaa;
	text-transform: uppercase;
	text-decoration: none;
}

#site-header h2 {
	margin-top: -15px;
}

#site-header nav {
	text-align: right;
	float: right;
}

#site-header nav a {
	color: #aaa;
	text-decoration: none;
	margin-left: 20px;
}

#site-header a {
	color: #aaa;
	text-decoration: none;
}

#site-header a:hover {
	color: #fff;
}

#site-header h2 img {
	margin-right: 5px;
	float: left;
}

.embed #site-header h2 img {
	width: 150px;
	height: auto;
	margin-top: 6px;
}

#site-header .header-options {
	width: 40%;
	display: table;
	float: left;
}

#site-header .header-option {
	width: 1%;
	display: table-cell;
	text-align: center;
	position: relative;
}

#site-header .header-option-trigger {
	display: inline-block;
}

#site-header .header-option-trigger:hover .options {
	display: block;
}

#site-header .header-option .options {
	display: none;
	position: absolute;
	top: 20px;
	left: 10%;
	right: 10%;
	color: #f0f0f0;
	font-family: "Lato";
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 200;
	padding-top: 20px;
}

#site-header .header-option .options li {
	padding: 15px;
	font-size: 18px;
	line-height: 18px;
	border-bottom: 1px solid #000;
	cursor: pointer;
	background: #111;
	text-align: center;
}

.embed #site-header .header-option .options li {
	font-size: 14px;
}

#site-header .header-option .options li:last-child {
	border-radius: 0 0 5px 5px;
}

#site-header .header-option .options li:hover {
	color: steelblue;
	background: #000;
}

#site-header .manancial-drop h1 {
	padding: 0;
	margin: 0;
	line-height: 20px;
	font-family: sans-serif;
	font-size: 24px;
	text-transform: uppercase;
	pointer-events: none;
	font-family: "Lato";
	font-weight: 200;
	color: steelblue;
	text-align: center;
}

.embed #site-header .manancial-drop h1 {
	font-size: 18px;
}

#site-header h1 .arrow {
	margin-left: 10px;
}

#site-header h1 .arrow path {
	fill: steelblue !important;
}

#site-header .manancial-info {
	display: inline-block;
	margin-left: 10px;
	position: relative;
}

#site-header .manancial-info:hover .info-container {
	display: block;
}

#site-header .manancial-info .info-container {
	display: none;
	position: absolute;
	top: -10px;
	left: 0;
}

#site-header .manancial-info .info-container .info-content {
	margin-left: 30px;
	background: #f0f0f0;
	color: #333;
	padding: 20px 20px 1px;
	width: 300px;
	text-align: left;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

#site-header .manancial-info .info-container .info-content:before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background: #f0f0f0;
	top: 15px;
	left: -5px;
	transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-khtml-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

#site-header .manancial-info .info-container .info-content p {
	margin: 0 0 20px;
	font-family: "Lato";
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
}

#info {
	position: absolute;
	top: 60px;
	padding: 20px;
	left: 0;
	right: 0;
	pointer-events: none;
	font-family: sans-serif;
	background: #262626;
}

#info table {
	font-weight: 200;
	font-size: 34px;
	font-family: "Lato";
	float: right;
}
.embed #info table {
	font-size: 24px;
}
#info table p.subvalues {
	margin: 0;
	font-size: 16px;
	line-height: 10px;
	display: block;
	margin-top: 2px;
}
#info table span.indice {
	display: inline-block;
	margin-right: 10px;
	color: #999;
}
#info table span.indice:before {
	content: '';
	display: block;
	float: left;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-o-border-radius: 100%;
	width: 8px;
	height: 8px;
	background: #fff;
	margin-right: 5px;
	margin-top: 2px;
	/*opacity: 0.4;*/
}
#info table span.indice.indice-1:before {
	background: rgb(236, 234, 79);
}
#info table span.indice.indice-2:before {
	background: rgb(215, 71, 71);
}

#info table tr {
	float: left;
	margin-right: 20px;
}
#info table td:first-child {
	width: 80px;
}

.embed #info table td:first-child {
	width: 40px;
}

#info table td {
	color: #eee;
	width: 150px;
}

.embed #info table td {
	width: 140px;
}

#info table svg {
	width: 30px;
	height: 30px;
}
#info table path {
	fill: #fff !important;
}

#info table tr.volume.status-1 td {
	color: #5587E0;
}
#info table tr.volume.status-1 td svg path {
	fill: #5587E0 !important;
}

#info table tr.volume.status-2 td {
	color: #8DE3FF;
}
#info table tr.volume.status-2 td svg path {
	fill: #8DE3FF !important;
}

#info table tr.volume.status-3 td {
	color: #E3D438;
}
#info table tr.volume.status-3 td svg path {
	fill: #E3D438 !important;
}

#info table tr.volume.status-4 td {
	color: #D48165;
}
#info table tr.volume.status-4 td svg path {
	fill: #D48165 !important;
}

#info table tr.volume.status-5 td {
	color: #CF3731;
}
#info table tr.volume.status-5 td svg path {
	fill: #CF3731 !important;
}

#info table tr.pluviometria.status-1 td {
	color: #3173E0;
}
#info table tr.pluviometria.status-1 td svg path {
	fill: #3173E0 !important;
}

#info table tr.pluviometria.status-2 td {
	color: #64B7FF;
}
#info table tr.pluviometria.status-2 td svg path {
	fill: #64B7FF !important;
}

#info table tr.pluviometria.status-3 td {
	color: #A1C3E3;
}
#info table tr.pluviometria.status-3 td svg path {
	fill: #A1C3E3 !important;
}

#info table tr.pluviometria.status-4 td {
	color: #D49B64;
}
#info table tr.pluviometria.status-4 td svg path {
	fill: #D49B64 !important;
}

#info table tr.pluviometria.status-5 td {
	color: #CF713C;
}
#info table tr.pluviometria.status-5 td svg path {
	fill: #CF713C !important;
}

#info h2 {
	width: 400px;
	margin: 0px;
	color: #ddd;
	font-size: 30px;
	line-height: 65px;
	font-family: "Lato";
	font-weight: 200;
	float: left;
}

.embed #info h2 {
	width: auto;
	font-size: 20px;
	line-height: 40px;
}

#info h2 svg {
	width: 30px;
	height: 30px;
	margin-top: 16px;
	margin-right: 20px;
	float: left;
	opacity: .6;
}

.embed #info h2 svg {
	width: 15px;
	height: 15px;
	margin-top: 12px;
	margin-right: 10px;
}

#info h2 path {
	fill: #ddd !important;
}

#info h3 {
	font-size: 14px;
	line-height: 18px;
	margin: 0;
	color: #aaa;
}

#legend {
	position: absolute;
	right: calc(30% + 30px);
	top: 160px;
	z-index: 10;
	background: #262626;
	padding: 10px 10px 5px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.embed #legend {
	right: 20px;
	top: 120px;
}

#legend .label {
	display: block;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	margin: 0 0 5px;
	text-transform: uppercase;
	text-align: center;
}

#legend p {
	margin: 0 auto 5px;
	position: relative;
	opacity: .2;
	transition: opacity .2s linear;
	-moz-transition: opacity .2s linear;
	-wekbit-transition: opacity .2s linear;
	-o-transition: opacity .2s linear;
}

#legend:hover p {
	opacity: 1;
}

#legend p:hover .tip {
	display: block;
}

#legend p .tip {
	display: none;
	position: absolute;
	top: -20px;
	right: 100%;
	margin-right: 20px;
	width: 200px;
	background: #fff;
	color: #333;
	padding: 10px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

#legend p .tip:after {
	position: absolute;
	display: block;
	content: '';
	background: #fff;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	top: 15px;
	right: -5px;
	width: 10px;
	height: 10px;
}

#legend p .color {
	width: 60px;
	height: 5px;
	display: block;
}

#legend p.stories {
	display: block;
	height: 10px;
	width: 10px;
}

#legend p.stories .color {
	width: 10px;
	height: 10px;
	display: block;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	background: #ffe86e;
	border: 1px solid rgba(0,0,0,0.5);
}

#legend p.stories .tip {
	width: 80px;
	top: -14px;
}

#stories {
	position: absolute;
	top: 190px;
	right: 0;
	bottom: 80px;
	width: 30%;
	overflow: auto;
	color: #f0f0f0;
}

#stories h2 {
	color: #999;
	text-transform: uppercase;
	font-size: 18px;
	margin: 0 0 10px;
	padding: 0 0 9px;
	border-bottom: 1px dashed #444;
}

#stories ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#stories li {
	margin: 0;
	padding: 0;
}

#stories #stories-nav {
	margin: 0 0 10px;
}

#stories #stories-nav ul li {
	display: inline-block;
	background: #272727;
	color: #999;
	padding: 5px;
	border-radius: 4px;
	font-size: 12px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all .2s linear;
}

#stories #stories-nav ul li:hover {
	background: #292929;
	color: #ddd;
}

#stories article {
	background: #292929;
	padding: 20px;
	margin: 0 20px 20px 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	border-radius: 4px;
	transition: all .2s linear;
}

#stories article:hover {
	background: #333;
}

#stories article p.meta {
	margin-bottom: 5px;
}

#stories article p.meta span {
	display: inline-block;
	margin-right: 5px;
	font-size: 14px;
}

#stories article h3 {
	margin: 0;
	padding: 0;
	color: #fff;
	margin-bottom: 10px;
	font-size: 22px;
}

#stories article a {
	color: inherit;
	text-decoration: none;
}

#stories article p {
	margin: 0;
	color: #999;
}

.focus {
	cursor: move;
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: grab;
}

.focus .x.axis line,
.focus .x.axis text {
	fill: #fff;
}

.zoom-pane {
	pointer-events: none;
	cursor: grab;
}

.x.brush {
	overflow: hidden;
}

.axis path,
.axis line {
	fill: none;
	stroke: #aaa;
	shape-rendering: crispEdges;
}

.axis text {
	fill: #777;
	font-family: "Lato";
	font-size: 12px;
}

.x.axis path {
	display: none;
}

.y.axis {
	opacity: 1;
	-webkit-transition: opacity .2s ease-in-out;
}

.y.axis line {
	stroke: rgba(255,255,255,0.2);
	stroke-dasharray: 2,2;
}

.y.axis text {
	fill: rgba(255,255,255,0.6);
	text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
	font-size: 12px;
}

.y.axis path {
	display: none;
}

.pluviometria {
	fill: rgba(0,0,0,0.7);
	stroke: rgba(0,0,0,0.2);
	stroke-width:1px;
}

.area.volume {
	fill: steelblue;
	fill-opacity: 0.8;
	stroke: rgba(0,0,0,0.1);
	stroke-width: 2px;
}

.area.volume_2,
.area.volume_3 {
	/*stroke-width: 2px;
	stroke-dasharray: 2;*/
	/*opacity: 0.4;*/
}

.area.volume_2 {
	fill: #ecea4f;
}

.area.volume_3 {
	fill: #d74747;
}

.context .area.volume {
	fill: #333;
	-webkit-transition: fill .2s ease-in-out;
	height: 50px;
}

.context .axis text {
	font-size: 10px;
	-webkit-transition: fill .2s ease-in-out;
}

.context:hover .area.volume {
	fill: #444;
}

.context:hover .axis text {
	fill: #999;
}

.brush .extent {
	stroke: #fff;
	fill-opacity: .125;
	shape-rendering: crispEdges;
}

#filter {
	display: none;
}

#filter .filter-result,
#filter .filter-input {
	float: left;
	color: #fff;
}

#filter .filter-result {
	width: 65%;
}

#filter .filter-input {
	width: 35%;
}


#filter .filter-input label {
	margin: 8px 0;
	display: block;
	font-weight: 200;
}

#filter .filter-input label span {
	width: 15%;
	display: inline-block;
	line-height: 30px;
	font-size: 10px;
	border-right: 1px solid #404040;
}

#filter .filter-input input {
	width: 65%;
	padding: 0;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 16px;
	height: 30px;
	font-family: "Lato";
	font-weight: 200;
	margin: 0;
	outline: 0;
	padding-left: 10px;
}

#filter .button {
	border-top: 1px solid #292929;
	background: #202020;
	padding: 0 15px;
	/*border-radius: 4px;*/
	text-decoration: none;
	display: block;
	text-align: center;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 30px;
	margin-top: 5px;
	font-weight: 600;
	color: #999;
}

#filter .button:hover {
	color: #fff;
}

#filter h3 {
	font-size: 10px;
	line-height: 10px;
	color: #999;
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: 1px solid #444;
	text-transform: uppercase;
	font-weight: 600;
}

#filter .filter-result svg {
	width: 30px;
	height: 30px;
	margin-right: 10px;
	float: left;
}

#filter .filter-result p {
	color: #aaa;
	line-height: 30px;
	margin: 8px 0;
}

#filter .filter-result p .label {
	font-size: 10px;
	text-transform: uppercase;
	display: inline-block;
	margin-left: 5px;
	padding: 0;
	font-weight: 200;
	text-align: left;
	color: #aaa;
}

#filter .filter-result p .val {
	font-size: 16px;
	color: #fff;
	font-weight: 400;
}

#filter .filter-result p.volume .val {
	color: red;
}
#filter .filter-result p.volume.positive .val {
	color: green;
}

.progress-meter .background {
  fill: transparent;
}

.progress-meter .foreground {
  fill: steelblue;
}

.progress-meter text {
  font-family: "Lato";
  font-size: 40px;
  fill: steelblue;
  font-weight: 200;
}
.dot {
	stroke-width: 0;
	fill:#1659C2;
}
.tooltip {
	position: absolute;
	width: 100px;
	padding: 10px;
	margin-left: -60px;
	margin-top: -70px;
	text-align: center;
	background: #f0f0f0;
	color: #333;
	font-size: 14px;
	border-radius: 3px;
	pointer-events: none;
	line-height: 30px;
	font-family: "Lato";
	font-weight: 200;
}
.tooltip:after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	bottom: -5px;
	left: 50%;
	margin-left: -5px;
	background: #f0f0f0;
}
.tooltip svg {
	width: 30px;
	height: 30px;
	float: left;
	margin: 0 10px 0 0;
}
.tooltip svg path {
	fill: #333;
}
.selection-line {
	pointer-events: none;
}
.story {
	stroke: rgba(0,0,0,0.5);
	stroke-width: 1px;
	fill: #ffe86e;
	cursor: pointer;
}
.story.cluster {
	stroke: rgba(0,0,0,0.5);
	stroke-width: 5px;
}
.story-content {
	position: absolute;
	width: 200px;
	padding: 10px;
	margin-left: -240px;
	margin-top: -25px;
	background: #f0f0f0;
	color: #333;
	font-size: 14px;
	border-radius: 3px;
	pointer-events: none;
	line-height: 18px;
	font-family: "Lato";
	font-weight: 200;
	/*transition: all .02s linear;
	-webkit-transition: all .02s linear;
	-moz-transition: all .02s linear;*/
}
.story-content.cluster {
	width: 100px;
	padding: 20px 10px;
	margin-left: -140px;
	text-align: center;
}
.story-content.opened {
	max-height: 200px;
	margin-left: -220px;
	overflow-y: visible;
	overflow-x: auto;
	pointer-events: auto;
	padding: 0;
}
.story-content.opened:after {
	display: none;
}
.story-content.opened ul {
	margin: 0;
	padding: 10px;
	list-style: none;
}
.story-content.opened ul li {
	margin: 0 0 10px;
	padding: 0;
}
.story-content.opened ul li a {
	text-decoration: none;
	color: #333;
}
.story-content span {
	color: #999;
}
.story-content h3 {
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	color: #333;
}
.story-content:after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 18px;
	left: 100%;
	margin-left: -5px;
	background: #f0f0f0;
}
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0,0,0,0.5);
	z-index: 999999;
}
.modal .close-modal {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	cursor: pointer;
}
.modal .modal-content {
	position: absolute;
	top: 10%;
	bottom: 10%;
	left: 20%;
	right: 20%;
	background: #f0f0f0;
	color: #333;
	font-size: 20px;
	line-height: 26px;
	padding: 60px;
	font-family: "Lato";
	font-weight: 200;
	overflow: auto;
	z-index: 2;
}
.modal .modal-content p {
	margin: 0 0 40px;
}
.modal .modal-content p a {
	color: #000;
}
#site-footer {
	position: fixed;
	background: #111;
	padding-top: 10px;
	bottom: 0;
	left: 0;
	right: 0;
	color: #fff;
	text-transform: uppercase;
	font-family: "Lato";
	font-weight: 200;
	font-size: 12px;
	z-index: 3;
	word-spacing: 2px;
}
#site-footer a {
	color: #aaa;
	text-decoration: none;
	font-weight: 600;
}
#site-footer a:hover {
	color: #fff;
}
#site-footer p {
	float: left;
	margin: 0 20px 10px;
}
#site-footer p span {
	float: left;
}
#site-footer p img {
	height: 30px;
	width: auto;
	float: right;
	margin-left: 20px;
}
#site-footer .social {
	float: left;
	margin: 5px 0 10px 40px;
}
#site-footer .site-link {
	float: left;
	margin: 5px 0 0 20px;
}
#site-footer .social > div,
#site-footer .social > iframe {
	display: inline-block;
	float: left;
	margin-right: 20px;
}
#site-footer .fork {
	float: right;
	margin-right: 40px;
}
#site-footer .fork p {
	line-height: 30px;
	margin: 0;
	padding: 0;
	text-align: center;
}
#site-footer .credits {
	float: right;
	line-height: 30px;
	margin-right: 20px;
	color: #999;
}

.mouse-tip {
	position: fixed;
	background: rgba(0,0,0,0.4);
	color: #fff;
	top: 40%;
	left: 26%;
	padding: 20px;
	font-weight: 600;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	pointer-events: none;
	border-radius: 4px;
	transition: all .3s linear;
	opacity: 1;
	width: 200px;
	text-align: center;
}

.embed .mouse-tip {
	top: 45%;
	left: 50%;
	margin-left: -100px;
}

.mouse-tip.inactive {
	opacity: 0;
}

#compare-data .modal-content {
	left: 18%;
	right: 18%;
	padding: 40px 60px;
}

#compare-chart .line {
	stroke-width: 1.5;
	stroke: steelblue;
	fill: transparent;
}

#compare-chart circle {
	stroke: steelblue;
	stroke-width: 1.5;
	fill: #f0f0f0;
	cursor: none;
}

#compare-chart .compare-tooltip {
	position: fixed;
	width: 160px;
	padding: 10px;
	margin-left: -80px;
	margin-top: -80px;
	text-align: center;
	background: #f0f0f0;
	color: #333;
	font-size: 14px;
	border-radius: 3px;
	pointer-events: none;
	line-height: 20px;
	font-family: "Lato";
	font-weight: 200;
	border: 1px solid #ccc;
}

#compare-chart .compare-tooltip h3 {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0 0 20px;
	line-height: 12px;
}

#compare-chart .compare-tooltip p {
	margin: 0 0 20px;
}

#compare-chart .compare-tooltip p.volume span {
	font-size: 40px;
	line-height: 40px;
	font-weight: 600;
	display: block;
}

#compare-table table {
	width: 100%;
	margin-top: 40px;
}

#compare-table th {
	font-size: 14px;
	line-height: 1.2;
	color: #999;
	text-align: left;
	vertical-align: middle;
	padding-bottom: 15px;
	border-bottom: 1px solid #c4c4c4;
	padding-right: 10px;
}

#compare-table td {
	padding: 15px 15px 15px 0;
	border-bottom: 1px solid #ccc;
}

#compare-table td.year,
#compare-table td.volume {
	width: 22%;
}

#compare-table td.year {
	font-weight: 600;
	font-size: 16px;
	padding-right: 30px;
	color: #666;
}

#compare-table td.volume {
	font-weight: 600;
}

#compare-table td span.volume {
	font-size: 14px;
	font-weight: 600;
}

#compare-table td span.volume.positive {
	color: green;
}

#compare-table td span.volume.negative {
	color: red;
}
