
html, body{
	margin:0;
	padding-top: 0;
	font-size: 14px;
	color: #ccc;
	height: 100%;
	font-family: sans-serif;
	margin-bottom: 20px;
}

@media only screen and (max-width: 900px) {
  	#bigmap {
		width: 100%;
		height: 60%;
	}
	#legenda, #intro{
		background-color: #000;
		padding: 20px 20px 10px 20px;
		position: static;
	}
	#legenda p{
		display: none;
	}
	#location{
		background-color: #000;
		padding: 0 20px 20px 20px;
		position: static;
	}
	#intro{
		border-radius: 12px;
		margin: 20px;
	}
	#main{
      	background-color: #000;
		padding: 20px;
		position: static;
		border-radius: 12px;
		margin: 20px;
    }
    #bias{
      	background-color: #000;
		padding: 20px;
		position: static;
		border-radius: 12px;
		margin: 20px;
    }
	#smallscreen{
		background-color: #000;
		padding: 0 20px 20px 20px;
		position: static;
	}
	form{
		margin-top: 8px;
	}

}
@media only screen and (min-width: 900px) {
  	#bigmap {
  		position: fixed;
		width: 100%;
		height: 100%;
	}
	#legenda, #intro{
		position: absolute;
		z-index: 10000;
		left: 30px;
		top: 30px;
		width: 250px;
		background-color: #000;
		border-radius: 12px;
		padding: 20px;
	}
	#location{
		position: absolute;
		z-index: 10000;
		right: 30px;
		top: 30px;
		width: 250px;
		background-color: #000;
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 30px;
		display: none;
		max-height: 85%;
		overflow-y: scroll;
	}
	#main{
		position: absolute;
		left: 360px;
		top: 30px;
		width: 250px;
		background-color: #000;
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 30px;
		max-height: 85%;
		overflow-y: scroll;
    }
    #bias{
		position: absolute;
		left: 690px;
		top: 30px;
		width: 250px;
		background-color: #000;
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 30px;
		max-height: 85%;
		overflow-y: scroll;
    }
	form{
		margin-top: 30px;
	}
	#smallscreen{
		display: none;
	}

}
#overlay{
	background-color: #000;
	z-index: 10010;
	opacity: 0.9;
	width: 100%;
	height: 100%;
	position: absolute;
	display: none;
}
#overlaycontent{
	z-index: 10020;
	position: absolute;
	top: 6%;
	left: 50%;
	display: none;
	text-align: center;
}
#bigpic img{
	height: 80vh;
	position: relative;
	left: -50%;
}
#bigpictxt{
	position: relative;
	left: -50%;
}
h1{
	font-size: 24px;
	margin-top: 0;
}
#location img{
	width: 100%;
	cursor: pointer;
}
select{
	padding: 4px;
	margin-bottom: 12px;
}
a{
	color: #fff;
	text-decoration: underline;
}
.leaflet-left .leaflet-control{
	margin-bottom: 30px;
	margin-left: 30px;
}
.leaflet-container .leaflet-control-attribution{
	color: #000;
}
.leaflet-control-attribution a{
	color: #000;
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar{
	border: 2px solid #000;
}