*{
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	line-height:1.5;
}

.bold{
	font-weight: 700;
}

.main-container {
	margin: 0 5px;
}


.st1 g:hover{
	opacity: 0.6!important;
}

.no-margin{
	margin:0;
}

.text-info{
	margin:2px 0 15px;
	position: relative;
}

.map{
	position: relative;
	width: 100%;
}

.name-vaccine::first-letter{
	text-transform: capitalize;
}

.container-map{
	margin-top: 90px;
}	

.leg{
	position: absolute;
	bottom: 76px;
}

.city-name{
	position: absolute;
	/* width: 210px; */
    padding: 5px 10px;
	display: none;
	background-color: grey;	
}

.serie{
	text-decoration: none;
}

.ano-selected{
	background-color: #d15239!important;
}

.zh-block{
	display: block!important;
	/* top: 570px !important;
	left: 10px !important;  */
}

.w3-small {
	font-weight: 100;
	margin-top: 100px;
}

.yellow {
	display: inline-block;
	border-radius: 50px;
	background: #e5b52e;
	width: 10px;
	height: 10px;
}

.orange {
	display: inline-block;
	border-radius: 50px;
	background: #ce6b3a;
	width: 10px;
	height: 10px;
}

.red {
	display: inline-block;
	border-radius: 50px;
	background: #aa3222;
	width: 10px;
	height: 10px;
}

.black {
	display: inline-block;
	border-radius: 50px;
	background: #000;
	width: 10px;
	height: 10px;
}

.cinza{
	fill: #c3c3c3!important;
	color:#c3c3c3!important;
}

.cor1 {
	color:#8CEDED!important;
}

.cor2 {
	color:#1bb2ae!important;
}

.cor3 {
	color:#049392!important;
}

.cor4 {
	color:#01605d!important;
}

.cor5 {
	color:#024747!important;
}

.obs{
	margin-top: 10px;
	font-size:14px;
	line-height:1.1;
}

.circulos {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: 12px;
    color: #333;
}

.circ1 {
	display: inline-block;
	border-radius: 50px;
	background: #8CEDED;
	width: 10px;
	height: 10px;
}

.circ2 {
	display: inline-block;
	border-radius: 50px;
	background: #1bb2ae;
	width: 10px;
	height: 10px;
}

.circ3 {
	display: inline-block;
	border-radius: 50px;
	background: #049392;
	width: 10px;
	height: 10px;
}

.circ4 {
	display: inline-block;
	border-radius: 50px;
	background: #01605d;
	width: 10px;
	height: 10px;
}

.circ5 {
	display: inline-block;
	border-radius: 50px;
	background: #024747;
	width: 10px;
	height: 10px;
}

.mapa-container {
	margin-bottom: 10px;
	min-height: 450px;
}

.cliked{
	animation: colorCliked 444ms linear infinite alternate!important;
	-webkit-animation: colorCliked 444ms linear infinite alternate!important;
}

@keyframes colorCliked {
    from {fill: rgba(255, 241, 214, 0.2);}
    to {}
}

@-webkit-keyframes colorCliked {
    from {fill: rgba(255, 241, 214, 0.2);}
    to {}
}

@media(min-width: 601px){
	.zh-intro:after{
		content: " ou clique no mapa";
	}
}


@media (max-width: 610px){
	@keyframes colorCliked {
		from {fill: rgba(255, 241, 214, 0.2);}
		to {}
	}

	@-webkit-keyframes colorCliked {
		from {fill: rgba(255, 241, 214, 0.2);}
		to {}
	}

	.cliked{
		animation: colorCliked 444ms linear infinite alternate!important;
		-webkit-animation: colorCliked 444ms linear infinite alternate!important;
	}

	.w3-display-topleft{
		position: relative!important;
	}
	
	.zh-block{
		display: none!important;
	}
}