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

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

h6{
	font-family: 'Roboto', sans-serif;
    font-weight: 300;
	font-size:14px;
	padding: 5px;
}

.st1{
	fill:none;
	stroke: none;
}

.bold{
	font-weight: 700;
}

.st1 g{
	fill: #c3c3c3;
	stroke: #fff;
	stroke-linecap: round;
	stroke-width: 1px;
    cursor: pointer;
}

.st1 g.destaque{
	fill: #c31868!important;
	cursor: pointer;
}


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

.st2 g text{
	color: #101010;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size:16px;
}

.st2{
	color: #101010;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size:16px;
}

.w3-modal {
    position: absolute;
    z-index: 10;
}

.no-margin{
    margin:0;
}

.text-info{
    margin:2px;
}

b {
    font-weight: 700;
}

.uppercase {
    text-transform: uppercase;
    font-size: 18px;
}

.content-conteiner {
    position: absolute;
    top: 5em;
    left: 0;
	z-index: 200;
    right: 0;
    max-width: 400px;
    height: auto;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    margin: auto;
    padding: 8px;
    color: #333;
    display: none;
    cursor: pointer;
	
}

.show {
    display: block!important;
}

.close {
    display: none!important;
}

.btn-close{
    visibility: visible;
    cursor: pointer;
    float: right;
    font-size: 21px;
    font-weight: 700;
    background: none;
    color: #333;
    position: relative;
    z-index: 10;
}


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

.map .map-container{
	width: 100%;
	height: 520px;
	overflow: hidden;
}

.map .map-container svg{
	height: auto;

}

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

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

.serie{
	text-decoration: none;
}

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

.zh-block{
	display: block!important;
}

.red{
	fill: #d15239!important;
	color:#d15239!important;
}

.red-strong{
	fill: #c31868!important;
	color:#c31868!important;
	
}

.grey{
	fill: #a5a5a5!important;
	color:#a5a5a5!important;
	
}

.green{
	fill: #049392!important;
	color:#049392!important;
	
}


.image-map {
    position: absolute;
    z-index: -10;
    width: auto;
    width: 100%;
}

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

@keyframes colorCliked {
    from {opacity: 100%}
    to {opacity: 30%}
}

@-webkit-keyframes colorCliked {
    from {opacity: 100%}
    to {opacity: 30%}
}

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

	.map .map-container{
		height: 700px;
	}

    .texto-mapa {
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 1em;
        opacity: 0.3;
        font-style: italic;
    }
}


@media (max-width: 610px){
	.w3-display-topleft{
		position: relative!important;
	}
	
	.cor1{
		fill: #d09945!important;
		color:#d09945!important;
		
		transition: inherit;
		-webkit-transition: inherit;
		
	}

	.cor2{
		fill: #049392!important;
		color:#049392!important;
		
		transition: inherit;
		-webkit-transition: inherit;
	}

	.cor3{
		fill: #c31868!important;
		color:#c31868!important;
		
		transition: inherit;
		-webkit-transition: inherit;
	}

	.cor4{
		fill: #602c92!important;
		color:#602c92!important;
		
		transition: inherit;
		-webkit-transition: inherit;
	}
	
	
    .texto-mapa {
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
        font-size: 1.5em;
        opacity: 0.3;
        font-style: italic;
    }
}

.circulos {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 300;
    position: absolute;
    /* left: 10px; */
    margin: 10px auto;
    color: #333;
}

.leg{
	position: relative;
    z-index: 10;
    display: flex;
	flex-wrap: wrap;
    /* flex-direction: row; */
     /* text-align: right; */
}

.circ0 {
	display: inline-block;
	border-radius: 50px;
	background: #84064B;
	width: 10px;
	height: 10px;
    margin-left: 10px;
}

.circ1 {
	display: inline-block;
	border-radius: 50px;
	background: #A5165E;
	width: 10px;
	height: 10px;
    margin-left: 10px;
}

.circ2 {
	display: inline-block;
	border-radius: 50px;
	background: #C11F68;
	width: 10px;
	height: 10px;
    margin-left: 10px;
}

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

.circ4 {
	display: inline-block;
	border-radius: 50px;
	background: #E557A5;
	width: 10px;
	height: 10px;
    margin-left: 10px;
}

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

.bloco-rs {
	position: absolute;
	bottom: 30px;
	font-family: 'Roboto', sans-serif;
	font-size:16px;
}

.rgs {
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	font-weight: 300;
	text-transform: uppercase;
	color: #fff;
	background-color: #d09945;
	padding: 5px;
	border-radius: 3px;
	width: 65px;
}

@media all and (max-width:500px) {
	.bloco-rs {
		bottom: 50px;
	}
}