/*
Theme Name: Urbanbeing
Theme URI: http://www.ape1001.com.br
Description: Tema desenvolvido por Ape1001
Author: Rafael Forcadell
Author URI: http://www.ape1001.com.br
Version: 0.1
*/


html { /*overflow-y:-moz-scrollbars-vertical; overflow-y:scroll; overflow-x:hidden;*/ }
body { margin:0; padding:0; height:100%; color:#999ca1; background:#222; font-family:'Work Sans', Arial, Helvetica, sans-serif; font-weight:400; line-height:18px; font-size:14px; letter-spacing:-0.05em; }


*:focus { outline:none; }
*::-ms-clear { display: none; }
*::-ms-reveal { display:none; }

*::selection { background:rgba(0,0,0,0.2); /* Safari */ }
*::-moz-selection { background:rgba(0,0,0,0.2); /* Firefox */ }

h2, h3, h4, h5, h6 { font-family:'Work Sans', Arial, Helvetica, sans-serif; font-weight:800; }
h2 { font-size:38px; line-height:40px; }
h3 { font-size:30px; line-height:32px; }
h4 { font-size:16px; line-height:18px; }

p { font-weight:400; margin:0 0 10px 0; line-height:20px; font-size:16px; }
p i, p em { font-family:'Work Sans', Arial, Helvetica, sans-serif; font-weight:400; font-style:italic; }
strong, b { font-family:'Work Sans', Arial, Helvetica, sans-serif; font-weight:800; }

ul { margin:0 0 10px 0; }

select { font-family:'Work Sans', Arial, Helvetica, sans-serif; font-weight:200; line-height:18px; font-weight:400; font-size:12px; color:#7c7e81; }

img { border:none; margin:0; box-shadow:#000 0 0 0; }

a {
	-webkit-transition:	color .1s ease-in-out, opacity .1s ease-in-out; 
	-moz-transition:	color .1s ease-in-out, opacity .1s ease-in-out; 
	-o-transition:		color .1s ease-in-out, opacity .1s ease-in-out; 
	transition:			color .1s ease-in-out, opacity .1s ease-in-out; 
}
a:link { color:#fff; text-decoration:none; }     
a:visited { color:#fff; }  
a:hover { color:#ffcc00; text-decoration:underline; }  
a:active { color:#fff; }


.limites { position:absolute; top:0; left:0; width:100%; height:auto !important; min-height:100%; }



.inicio { position:relative; width:100%; min-height:100vh; padding:70px 80px; box-sizing:border-box; }

.inicio ul { clear:both; float:left; list-style:none; margin:0; padding:0; }
.inicio ul li { margin-bottom:40px; }
.inicio ul a { padding:7px 10px; background-color:#ffcc00; color:#333; font-size:21px; font-weight:700; }


.inicio .creditos { clear:both; float:left; max-width:70%; margin-bottom:60px; }
.inicio .creditos p { font-size:12px; margin:0; }
.inicio .creditos p:first-child { color:#fff; }



#map { position:fixed !important; z-index:1; top:0; left:0; width:100%; height:100%; 
	
	-webkit-transition:	left .3s ease-in-out; 
	-moz-transition:	left .3s ease-in-out; 
	-o-transition:		left .3s ease-in-out; 
	transition:			left .3s ease-in-out; 

}
/*#map.navegando { left:50%; }*/

.carregando { position:fixed !important; z-index:10; top:0; left:0; width:100%; height:100%; background-color:rgba(52,52,52,.95); opacity:1; 
	-webkit-transition:	all .3s ease-in-out; 
	-moz-transition:	all .3s ease-in-out; 
	-o-transition:		all .3s ease-in-out; 
	transition:			all .3s ease-in-out; 
}
.carregando.exibir { opacity:1; }
.carregando .ico { position:absolute; top:25px; right:25px; width:50px; height:50px; background:url(imagens/carregando.svg) center no-repeat;  }

.carregando .total { position:absolute; top:50%; left:50%; width:200px; height:4px; margin:-2px 0 0 -100px; background:#2b2b2b; }
.carregando .parte { position:absolute; top:0; left:0; width:0%; height:100%; background:#ffcc00; 
	
}


.labels {
	color: #222;
	background-color:rgba(255,204,0,.8);
	
	font-family:'Work Sans', Arial, Helvetica, sans-serif; 
	font-weight: 800;
	text-align: center;
	width: 80px;
	height:80px;
	border-radius:100%; 
	
	box-sizing:border-box;
	white-space: nowrap;
	
	opacity:.5;
	
	-moz-box-shadow: 	0px 3px 10px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
	box-shadow: 		0px 3px 10px rgba(0,0,0,0.2);
	
	overflow:visible !important;
}

.labels .ref { position:absolute; top:-5px; right:-5px; width:12px; height:12px; border-radius:100%; background-color:#222; font-family:'Work Sans', Arial, Helvetica, sans-serif; font-weight:800; font-size:8px; line-height:12px; letter-spacing:-0.05em; margin:0; text-align:center; color:#ffcc00; text-transform:uppercase; }

.labels.tamanho-0 { width:12px; height:12px; overflow:visible !important; }

.labels.tamanho-1 { width:20px; height:20px; overflow:visible !important; }
.labels.tamanho-1 p.valor { font-weight:800; font-size:12px; line-height:20px; letter-spacing:-0.05em; margin:0; }

.labels.tamanho-2 { width:30px; height:30px; overflow:visible !important; }
.labels.tamanho-2 p.valor { font-weight:800; font-size:15px; line-height:30px; letter-spacing:-0.05em; margin:0; }
.labels.tamanho-2 .ref { top:-4px; right:-4px;}

.labels.tamanho-3 { width:40px; height:40px; }
.labels.tamanho-3 p.valor { font-weight:800; font-size:18px; line-height:40px; letter-spacing:-0.05em; margin:0; }
.labels.tamanho-3 .ref { top:-2px; right:-2px;}

.labels.tamanho-4 { width:50px; height:50px; }
.labels.tamanho-4 p.valor { font-weight:800; font-size:21px; line-height:50px; letter-spacing:-0.05em; margin:0; }
.labels.tamanho-4 .ref { top:-2px; right:-2px;}

.labels.tamanho-5 { width:60px; height:60px; }
.labels.tamanho-5 p.valor { font-weight:800; font-size:24px; line-height:60px; letter-spacing:-0.05em; margin:0; }
.labels.tamanho-5 .ref { top:-1px; right:-1px;}




.icone-navegacao { position:fixed; z-index:3; top:25px; left:25px; width:50px; height:50px; cursor:pointer; }
/*.icone-navegacao:before { position:absolute; top:0; left:0; width:50px; height:50px; margin:0; border-radius:100%; content:""; 
	-webkit-transition:	all .1s ease-in-out; 
	-moz-transition:	all .1s ease-in-out; 
	-o-transition:		all .1s ease-in-out; 
	transition:			all .1s ease-in-out; 
}
.icone-navegacao:hover:before { background-color:#ffcc00; }*/
.icone-navegacao div { position:absolute; top:50%; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:100%; background-color:#ffcc00; 
	-webkit-transition:	all .1s ease-in-out; 
	-moz-transition:	all .1s ease-in-out; 
	-o-transition:		all .1s ease-in-out; 
	transition:			all .1s ease-in-out; 
}
.icone-navegacao div:nth-child(1) { margin-top:-13px; }
.icone-navegacao div:nth-child(2) { margin-top:-3px; 
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.icone-navegacao div:nth-child(3) { margin-top:7px; }
/*.icone-navegacao:hover div { background-color:#343434; }*/

.icone-navegacao:hover div:nth-child(2) { z-index:2; width:40px; height:40px; margin:-20px 0 0 -20px; background-image:url(imagens/icone-navegacao.svg); background-position:center; background-size:cover; 
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}

.navegacao { position:absolute; z-index:4; top:0; left:-50%; width:50%; min-height:100%; overflow:auto; background-color:#343434; padding:70px 80px; box-sizing:border-box; 
	
	-webkit-transition:	left .3s ease-in-out; 
	-moz-transition:	left .3s ease-in-out; 
	-o-transition:		left .3s ease-in-out; 
	transition:			left .3s ease-in-out; 

}

.navegacao.navegando { left:0; }

.navegacao .fechar { position:absolute; z-index:2; top:25px; right:25px; width:50px; height:50px; cursor:pointer; }
.navegacao .fechar div { position:absolute; top:50%; left:50%; width:18px; height:3px; margin-left:-9px; background-color:#ffcc00; }
.navegacao .fechar div:nth-child(1) {
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.navegacao .fechar div:nth-child(2) {
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


.navegacao .rolagem { overflow:auto; }
.navegacao .coluna { width:50%; background-color:#343434; padding:120px 80px; box-sizing:border-box; }

.navegacao .titulo { font-size:32px; line-height:36px; color:#fff; margin:0 0 50px; }

.navegacao .titulo-rotas { font-size:24px; line-height:32px; color:#fff; margin:0; }
.navegacao .titulo-distancia { font-size:20px; line-height:28px; color:#fff; margin:0; }
.navegacao .titulo-tempo { font-size:20px; line-height:28px; color:#fff; margin:0 0 35px 0; }

.navegacao h2 { font-size:24px; line-height:32px; color:#fff; margin:0 0 5px 0; }

.navegacao .faixa-de-tempo { clear:both; float:left; width:100%; margin:0 0 50px 0; }

.navegacao .faixa-de-tempo .slider.ui-slider.ui-slider-horizontal { position:relative; z-index:5; clear:both; float:left; width:100%; }
.navegacao .faixa-de-tempo .slider.ui-slider.ui-slider-horizontal:before { position:absolute; top:50%; left:0; width:100%; height:4px; margin-top:-2px; content:""; background-color:#3e3e3e; }
.navegacao .faixa-de-tempo .slider.ui-slider.ui-slider-horizontal:after { position:absolute; top:-2px; right:0; width:4px; height:16px; content:""; background-color:#3e3e3e; }

.navegacao .faixa-de-tempo .ui-slider .ui-slider-handle { top:50%; margin-top:-10px; width:20px; height:20px; border-radius:100%; background-color:#ffcc00; }
.navegacao .faixa-de-tempo .ui-slider-horizontal .ui-slider-range { top:50%; height:8px; margin-top:-4px; background-color:#ffcc00; }

.navegacao .faixa-de-tempo .ui-slider .ui-slider-handle .n { position:absolute; top:50%; left:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:100%; background-color:#ffcc00; font-family:'Work Sans', Arial, Helvetica, sans-serif; font-weight:400; text-align:center; color:#222; line-height:30px; opacity:0; }
.navegacao .faixa-de-tempo .ui-slider .ui-slider-handle .n:hover,
.navegacao .faixa-de-tempo .ui-slider .ui-slider-handle.ui-state-active .n { opacity:1; }

.navegacao .faixa-de-tempo .legenda { position:relative; z-index:1; clear:both; float:left; width:100%; height:30px; }
.navegacao .faixa-de-tempo .legenda .marcador { display:none; position:absolute; top:0; left:0; font-size:10px; white-space:nowrap; padding:5px 7px; }
.navegacao .faixa-de-tempo .legenda .marcador:before { display:none; position:absolute; top:-14px; left:0; width:4px; height:16px; content:""; background-color:#3e3e3e; }
.navegacao .faixa-de-tempo .legenda .marcador:first-child { display:block; }
.navegacao .faixa-de-tempo .legenda .marcador:last-child {
	display:block;
	/*-moz-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);*/
}
.navegacao .faixa-de-tempo .legenda .marcador:last-child:before { display:none; }

.navegacao .faixa-de-tempo .periodo { clear:both; float:left; margin-left:7px; font-size:10px; } 




.navegacao .faixa-de-horario { clear:both; float:left; width:100%; margin:0 0 50px 0; }

.navegacao .faixa-de-horario .slider.ui-slider.ui-slider-horizontal { position:relative; z-index:5; clear:both; float:left; width:100%; }
.navegacao .faixa-de-horario .slider.ui-slider.ui-slider-horizontal:before { position:absolute; top:50%; left:0; width:100%; height:4px; margin-top:-2px; content:""; background-color:#3e3e3e; }
.navegacao .faixa-de-horario .slider.ui-slider.ui-slider-horizontal:after { position:absolute; top:-2px; right:0; width:4px; height:16px; content:""; background-color:#3e3e3e; }

.navegacao .faixa-de-horario .ui-slider .ui-slider-handle { top:50%; margin-top:-10px; width:20px; height:20px; border-radius:100%; background-color:#ffcc00; }
.navegacao .faixa-de-horario .ui-slider-horizontal .ui-slider-range { top:50%; height:8px; margin-top:-4px; background-color:#ffcc00; }

.navegacao .faixa-de-horario .ui-slider .ui-slider-handle .n { position:absolute; top:50%; left:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:100%; background-color:#ffcc00; font-family:'Work Sans', Arial, Helvetica, sans-serif; font-weight:400; text-align:center; color:#222; line-height:30px; opacity:0; }
.navegacao .faixa-de-horario .ui-slider .ui-slider-handle .n:hover,
.navegacao .faixa-de-horario .ui-slider .ui-slider-handle.ui-state-active .n { opacity:1; }

.navegacao .faixa-de-horario .legenda { position:relative; z-index:1; clear:both; float:left; width:100%; height:30px; }
.navegacao .faixa-de-horario .legenda .marcador { display:none; position:absolute; top:0; left:0; font-size:10px; white-space:nowrap; padding:5px 7px; }
.navegacao .faixa-de-horario .legenda .marcador:before { display:none; position:absolute; top:-14px; left:0; width:4px; height:16px; content:""; background-color:#3e3e3e; }
.navegacao .faixa-de-horario .legenda .marcador:first-child { display:block; }
.navegacao .faixa-de-horario .legenda .marcador:last-child {
	display:block;
	/*-moz-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);*/
}
.navegacao .faixa-de-horario .legenda .marcador:last-child:before { display:none; }

.navegacao .faixa-de-horario .periodo { clear:both; float:left; margin-left:7px; font-size:10px; } 



.navegacao .estacoes { clear:both; float:left; width:100%; margin:0; }




.navegacao .estacoes .desmarcar-todas { clear:both; float:left; margin:0 0 20px 0; padding:0 10px 0 0; font-size:12px; border:0; cursor:pointer; }
.navegacao .estacoes .desmarcar-todas:hover { color:#fff; }
.navegacao .estacoes .marcar-todas { float:left; margin:0 0 20px 0; padding:0 10px; font-size:12px; border:0; cursor:pointer; }
.navegacao .estacoes .marcar-todas:hover { color:#fff; }

.navegacao .estacoes .checkboxes { clear:both; float:left; width:100%; margin:0 0 20px 0; }
.navegacao .estacoes .demais-rotas { clear:both; float:left; width:100%; }

.navegacao .estacoes .control strong { color:#fff; text-transform:uppercase; font-size:10px; font-weight:400; }
.navegacao .estacoes .control .quantidade { position:relative; display:inline-block; margin-left:2px; padding-left:6px; }
.navegacao .estacoes .control .quantidade:before { position:absolute; top:0; left:0; width:1px; height:16px; content:""; background-color:#999ca1; 
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);

}



.navegacao .ferimento { clear:both; float:left; width:38%; margin:0 0 50px 0; }

.navegacao .local { float:left; width:31%; margin:0 0 50px 0; }

.navegacao .envolvidos { float:left; width:31%; margin:0 0 50px 0; }


.navegacao .bairros { clear:both; float:left; width:100%; margin:0; }

.navegacao .bairros .desmarcar-todas { clear:both; float:left; margin:0 0 20px 0; padding:0 10px 0 0; font-size:12px; border:0; cursor:pointer; }
.navegacao .bairros .desmarcar-todas:hover { color:#fff; }
.navegacao .bairros .marcar-todas { float:left; margin:0 0 20px 0; padding:0 10px; font-size:12px; border:0; cursor:pointer; }
.navegacao .bairros .marcar-todas:hover { color:#fff; }



form { position:absolute; top:50%; left:50%; width:400px; height:50px; margin:-25px 0 0 -200px; }

input[type="text"], input[type="password"] { float:left;
	width:40%; height:50px; padding:0 12px; box-sizing:border-box; border:0; background-color:#191919; 
	font-family:'Work Sans', Arial, Helvetica, sans-serif; font-weight:400; font-size:18px; color:#fff; letter-spacing:-0.03em; line-height:50px;
}
input[type="password"] { text-align:right; }
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #191919 inset;
	-webkit-text-fill-color: #fff !important;
}

form input[type=submit] { float:left; width:20%; height:50px; padding:0 15px; border:0; line-height:50%; background:#ffcc00; 
	font-family:'Work Sans', Arial, Helvetica, sans-serif; font-weight:400; font-size:18px; color:#111; letter-spacing:-0.03em;
}



.control { clear:both; float:left; position:relative; display:block; line-height:14px; padding:3px 25px 6px 20px; cursor:pointer; }
.control input { position:absolute; z-index:-1; opacity:0; }
.control__indicator { position:absolute; top:4px; left:1px; width:12px; height:12px; background:#494949; box-sizing:border-box; border:2px solid #494949; }
.control--radio .control__indicator { border-radius:50%; }
/* Hover and focus states */ .control:hover input ~ .control__indicator, .control input:focus ~ .control__indicator { }
/* Checked state */ .control input:checked ~ .control__indicator { background:#ffcc00; border:2px solid #ffcc00; }
/* Indeterminate state */ .control input:indeterminate ~ .control__indicator { background:#494949; border:2px solid #494949; }

/* Hover state whilst checked */ .control:hover input:not([disabled]):checked ~ .control__indicator, .control input:checked:focus ~ .control__indicator { background:#ffcc00; border:2px solid #ffcc00; opacity:1; }
/* Disabled state */ .control input:disabled ~ .control__indicator { pointer-events:none; opacity:.5; background:transparent; }
.control.disabled { opacity:.3; }
/* Check mark */ .control__indicator:after { position:absolute; display:none; content:''; }
/* Show check mark */ .control input:checked ~ .control__indicator:after { display:block; }
/* Checkbox tick */ .control--checkbox .control__indicator:after { top:-1px; left:2px; width:3px; height:6px; transform:rotate(45deg); -webkit-transform:rotate(45deg); border:solid rgba(0,0,0,.5); border-width:0 2px 2px 0; }
/* Disabled tick colour */ .control--checkbox input:disabled ~ .control__indicator:after { border-color:#7b7b7b; }
/* Radio button inner circle */ .control--radio .control__indicator:after { top:0px; left:0px; width:12px; height:12px; border:0; border-radius:100%; background:#494949; }
/* Radio selected state */ .control--radio input:checked ~ .control__indicator,
.control--radio:hover input:not([disabled]):checked ~ .control__indicator, .control--radio input:checked:focus ~ .control__indicator { background:transparent; border:0; }
.control--radio .control__indicator { border:2px solid rgba(0,0,0,.2); }
/* Disabled circle colour */ .control--radio input:disabled ~ .control__indicator:after { background:#fff; }

/* Indeterminate state */ .control--checkbox input:indeterminate ~ .control__indicator:after { display:block; top:2px; left:2px; width:4px; height:1px; transform:rotate(0deg); -webkit-transform:rotate(0deg); border:solid rgba(0,0,0,.2); border-width:0 0 2px 0; }

.control:hover { color:#fff; }






@media screen and (min-width: 1100px) and (max-width: 1300px) {
	
	
	
}

@media screen and (min-width: 681px) and (max-width: 1099px) {
	
	
	
}

@media screen and (min-width: 420px) and (max-width: 680px) {
	
	
	
}


@media screen and (max-width: 419px) {
	
	
	
}