/* CSS for mobile */
body {
	margin: 0 !important;
	padding: 0 !important; 
}
small { display: none; }
.highlight small { 
	display: inline; 
	position: relative; 
	font-size: .5em;

}
blockquote { 
	text-align: justify;
}
p {
	font-size: 0.5em !important;
	text-align: justify;
}
ul {
	list-style-type: circle;
	list-style-position: inside;
	margin-left: 2.5em;
}
.tip { display: none; }
.highlight .tip { 
	display: block;
	position: absolute;
	font-size: 0.7em;
	padding: 1em;
}
ul {
	padding-left: 10px;
	list-style-type: none;
}
.tip ul  {
	padding: 0;
}
text, text.label {
	display: none; 
	fill: black;
	font-size: 0.5em;
}
.cont text { 
	fill: black;
	font-size: 0.5em;
}
text.highlight, text.note { 
	display: inline;
}
path.line { 
	fill: none;
	stroke: rgba(0,0,0,0.4);
}
path.line.selected { 
	stroke-width: 2px;
}
path.line.anio_2013, span.anio_2013 { 
	stroke: purple;
	background-color: purple;
}
path.line.anio_2014, span.anio_2014 { 
	stroke: green;
	background-color: green;
}
path.line.anio_2015, span.anio_2015 {
	stroke: blue;
	background-color: blue;
}
path.line.anio_2016, span.anio_2016 {
	stroke: red;
	background-color: red;
}
circle.highlight { 
	fill: red !important;
}
circle {
	fill: none;
}
rect {
	fill: rgba(255,255,255,0.0); 
}
rect.square { 
	fill: rgba(179, 0, 179, 0.0) !important;
}
ul.legend { 
	margin: 0 !important;
	font-size: 0.4em;
}
ul.legend li { 
	display: inline;
}
ul.legend span { 
	display: inline-block;
	width: 15px;
	height: 1px;
	margin-bottom: 2px;
}
rect.anio_2013 { 
	fill: rgba(255,255,255,0.0);
}
rect.anio_2015.amparo  {
}
rect.anio_2015.reglamento, rect.anio_2016.reglamento {
}
rect.highlight { 
	fill: rgba(255,0,0,0.2) !important; 
}
rect.semana_1 { 
	fill: rgba(0,100,100, 0.5);
}
rect.column { 
	fill: rgba(179, 0, 179, 0.05);
}
rect.column.selected { 
	fill: rgba(179,0,179, 0.1) !important;
}
/* MOVIE CONTAINER */
#movie {
	width: 0 !important;
	max-width: 0 !important;
	padding: 0;
	margin: 0;
	margin-bottom: 75vh;
}
#movie > div { 
	position: relative; 
	top: 10vh;
	width: 100vw;
	margin-bottom: 5vh;
	color: lightgray;
}
#movie > div.highlight { 
	color: black;
}
#movie div.short_scene {
	top: 25vh !important;
	margin-bottom: 75vh;
}
#movie div.last_scene {
	top: 0;
	margin-bottom: 50vh;
}
#movie div p {
	padding: 0.5em;
	padding-right: 1em;
}
#movie div p a { 
	margin-right: 5px;
}
.highlight .red { 
	background-color: rgba(255, 0, 0, 0.5);
	color: black;
}
.highlight .purple { 
	background-color: rgba(193, 144, 212, 0.5);
	color: black;
}
#intro { 
	height: 100%;
	margin-bottom: 0 !important;
	top: 0 !important;
}
#play_ctrl {
	top: 0vh !important;
	padding: 2em;
}
#start { 
	top: 0 !important;
}
h1 { 
	font-size: 1.3em !important;
}
h3 { 
	font-size: 1em;
}
h4 { 
	font-size: 0.5em;
}
#intro h1 {
	padding: 1.5em;
	text-align: center;
}
/* SPECIFIC CHARTS */
#contaminante { 
	height: 100px;
}
#semana { 
	height: 80px;
}
#semana .label { 
	font-size: 0.5em;
	display: inline;
}
#semana .value { 
	font-size: 0.3em;
	display: inline;
}
/* FIXED CONTAINER */
#fixed {
	background-color: white;
	position: fixed;
	top: 50vh;
	left: 0;
	width: 100%;
	height: 50%;
	padding: 0 !important;
	margin: 0 !important;
}
#a_map { 
	height: 100%;
}
#ctrl_anios { 
	display: none;
}
/* CSS for tablets 
@media (min-width: 768px) {
	#intro { 
		height: 100vh;
		background-color: red;
	}
	#movie .scene { 
		margin-bottom: 50%;
	}
}
*/
/* CSS for desktop */
@media (min-width: 992px) {
	#fixed {
		left: 50%;
		top: 0;
		width: 50%;
		height: 100%;

	}
	#movie > div {
		width: 50vw;
		margin-bottom: 0 !important;
		font-size: 2em;
	}
	#movie  {
		margin-bottom: 110vh;
	}
	#intro h1 {
		font-size: 3em;
	}
}
/* CSS for large devices 
@media (min-width: 1200px) {
	body { background-color: yellow; }
}
*/