/*
Theme Name: COR INTERNET
Author: SETE Serviços Técnicos (Daniel Maffioletti)
Description: Template produzido com bootstrap 3.37 para o Centro de Operações Rio
Author URI: http://www.seteservicos.com.br
License: Todos os direitos reservados
*/


/*
	HTML =============================
*/
*{ outline: none; transition: all 0.4s; }

a{
	color:#FFF;
}

a:hover{
	text-decoration: none;
}

body{
	color:#eee;
	background: #011720;
}

h2{
	color:#090;
	font-weight: bold;
}

h3, h4{
	color:#069;
}

hr{
	border:rgba(255,255,255, 0.1) solid 1px;
}

header{
	background: #061d24;
}

header p{
	margin: 12px 0 -20px 0;
}


section aside p{
	text-align: justify;
}


/*
	CLASSES =============================
*/

.cor-redes{
	font-size: 11px;
}

.iframe-mapa, #previsaotempo{
	background: rgba(0,0,0, 0.4);
	border:#333 solid 0px;
}


.rodape-img{
	margin-bottom: 5px;
}

.rodape-box{
	padding:10px;
	margin-bottom: 5px;
	background: #011720;
}

.rodape-box p{
	margin-top:15px;
	padding:15px;
	text-align: center;
	background: rgba( 255,255,255, 0.02);
	border:rgba(255,255,255, 0.04) solid 5px;
	color: #627f46;
}


.cor_rosa{
	background: #c500c5;
}

.cor_vermelho{
	background: #F00;
}

.cor_laranja{
	background: #ce6b01;
}

.cor_verdelimao{
	background: #c3e600;
}

.cor_verdeescuro{
	background: #045504;
}


.cor_verde{
	background: #137a13;
}

.cor_verdeclaro{
	background: #11a70c;
}

.boletim-item{
	background: rgba(0,0,0, 0.5);
	border-left:#000 solid 3px;
	margin-bottom: 3px;
	padding: 5px 0;
}

.boletim-item:hover{
	background: rgba(0,0,0, 0.2);
	border-left:#FFF solid 6px;
}


.list-group-item{
	background: none;
	border: 0px;
}

.redes-sociais-titulo{
	background: rgba(0,0,0, 0.5);
	border:4px solid #061d24;
	margin-bottom: -5px;
}

.redes-sociais-content{
	border:4px solid #061d24;
	height: 600px;
}

.box-aside{
	background: rgba( 0,0,0, 0.2 );
	margin-bottom: 30px;
}

.rodape-box h1{
	color:#337ab7;
}



.box-temperatura{
	height: 150px !important;
	padding-top: 10px;
}

.box-temperatura h4{
	font-size: 12px;
}

.box-max{
	color:#900 !important;
	font-size: 2em;
}

.box-min{
	color:#0CE !important;
	font-size: 1.5em;
}

.formcamera{
	display: none;
	margin:50px 0;
}

#ptempo{
	background: rgba(0,0,0, 0.2);
	margin: 50px 0;
}

#ptempo_periodos h4{
	color:#FFF;
}

#ptempo_periodos h4 span{
	color:#0CE;
}

.ptempo_condicoes{
	background: #000;
	border:#333 solid 0px;
	padding:20px;
	color:#0CE;
	font-weight: bold;
}

.ptempo_espaco{
	padding:20px 20px 0 20px;
}

.paginacao{
	margin-top: 50px;
}

.wp-pagenavi span, .wp-pagenavi a{
	border-radius: 5px;
	padding:5px 10px !important;
}


/*
	ID =============================
*/

.rodape{
	margin-top: 50px;
}


#ptempo_periodos_content h4 span{
	color:#FFF;
	font-weight: bold;
}

#ptempo_periodos_content p span{
	color:#FF0;
	font-weight: bold;
}

#ptempo_periodos_content{
	border:#fff solid 0px;
	margin-bottom: 30px;
	margin-top: 30px;
}

#ptempo_periodos_content div{
	border: rgba(255,255,255, 0.1) solid 1px;
	padding: 0;
}

#ptempo_periodos_content div:last-child,
#ptempo_periodos_content div:last-child h4{
	border-radius: 0 10px 10px 0;
}

#ptempo_periodos_content div:first-child,
#ptempo_periodos_content div:first-child h4{
	border-radius: 10px 0 0 10px;
}


#ptempo_temperatura{
	margin: 20px 0 30px 0;
}

#ptempo_temperatura h4, #ptempo_periodos h4{
	background: #09222d;
	font-size: 14px;
	color:#0CE;
	height: 50px;
	padding:15px 0 0 0;
	margin: 0;
}

#ptempo_temperatura div{
	border: rgba(255,255,255, 0.1) solid 1px;
	padding: 0;
}

#ptempo_temperatura div:first-child,
#ptempo_temperatura div:first-child h4{
	border-radius: 10px 0 0 10px;
}

#ptempo_temperatura div:last-child,
#ptempo_temperatura div:last-child h4{
	border-radius: 0 10px 10px 0;
}



#logo{
	margin-top: 10px;
}

#header_data{
	display: block;
	color:#666;
	font-size: 1.3em;
}

#header_hora{
	display: block;
	color:#FFF;
	font-weight: bold;
}

#header_estagio h3{
	margin-bottom: 5px;
}

#header_estagio #estagio_normalidade{
	background: #090;
}

#menu{
	margin:10px 0;
}

#menu a{
	color:#FFF;
	margin:5px 0px;
}

#mapa{
	margin:35px 0;
}


#legenda{
	background: rgba(0,0,0, 0.4);
	text-align: center;
	padding:15px;
}

#legenda h4{
	color:#090;	
	font-weight: bold;
}

#legenda .btn-group{
	margin-top: 20px;
}

#legenda .btn-group button{
	height: 90px;
}

.rodape{
	margin-top: 50px !important;
}

.rodape2{
	margin-top: 30px;
	padding:30px 0;
	background: #000;
}

#creditos{
	font-size:12px;
}


#noticias{
	background: #061d24;
	padding-bottom: 35px;
}


#redes-sociais .well h1{
	color:#FFF;
}


#coluna_auxiliar{
	margin-top:20px;
}

#previsaotempo {
	margin:50px 0;
}

#previsaotempo .well{
	background: rgba(0,0,0, 0.5);
	border: #000 solid 3px;
	height: 130px;
}

#previsaotempo .badge{
	background: #000;
	color: #069;
}

#previsaotempo .titulo{
	color:#FFF;
}

#previsaotempo p{
	color:#666;
}

#previsaotempo > p{
	color:#FFF;
}

#copy{
	color:#999;
}

/*
#copy a{
	color:#333;
}

#copy a:hover{
	color:#0CE;
}
*/

#page-content a{
	color:#0CE;
}


/* ======================================================
	PAINEL ESTÁGIO
======================================================== */

.crise a{
	color:#FF6;
	background: rgba(0,0,0, 0.1);
	padding:0 5px;
}

.crise a:hover{
	color:#000;
	background: rgba(0,0,0, 0.3);
}


.crise h1{
	font-size: 4em;
	text-align: center;
	margin-bottom: 30px;
	color: #FFF;
}

.atencao h1{
	font-size: 4em;
	text-align: center;
	margin-bottom: 30px;
	color: #000;
}

.crise p, .crise ul li{
	font-size:1.3em;
	line-height: 1.3em;
}

.btn-fechar{
	float:right;
	font-size: 1.5em;
	cursor: pointer;
	color:#FFF;
	background:#000;
	border-radius: 50px;
	padding:10px 20px;
	margin:10px;
	position: relative;
	z-index: 999;
}

.btn-fechar:hover{
	background: #666
}

.transportes h1, .transportes h3{
	text-align: center;
}

.legenda{
	border:rgba( 0,0,0 ,.2) solid 1px;
	margin:20px auto;
	width: 320px;
	background: rgba( 0,0,0 ,.1);
	border-radius: 20px;
}

.legenda .bom,
.legenda .regular,
.legenda .crise{
	float: left;
	margin: 5px;
	padding: 5px;
	width:30%; 
}

.legenda .bom span{
	display: block;
	width: 10px;
	height: 15px;
	background: #090;
	float: left;
	margin: 0 4px 0 10px;
}

.legenda .regular span{
	display: block;
	width: 10px;
	height: 15px;
	background: #F6B600;
	float: left;
	margin: 0 4px 0 0;
}

.legenda .crise span{
	display: block;
	width: 10px;
	height: 15px;
	background: #F00;
	float: left;
	margin: 0 4px 0 0;
}

.icone-transporte{
	height: 200px;
	overflow: auto;
}

.icone-transporte p{
	font-size: 12px;
}
.crise iframe{
	background:#FFF;
}

.crise-titulo-redes{
	background: rgba(0,0,0, 0.5);
	border:rgba(0,0,0, 0.8);
	margin-bottom: 1px;
}

.crise-titulo-redes h3{
	color:#FFF;
}


.atencao p, .atencao ul li{
	color:#000;
	font-size:1.3em;
	line-height: 1.3em;
}

.status-atencao #txt-estagio span{
	background: #f7f700 !important;
	color:#000;
}

.header_redes_sociais a{
	color:#FFF;
	padding-top: 10px;
}

a.icone-youtube:hover{
	color:#F00;
}

a.icone-twitter:hover{
	color:#0CE;
}

a.icone-facebook:hover{
	color:#069;
}


/* icones sprits tempo ============================ */

.icone_tempo{
	background-image: url('img/icones_previsao_do_tempo.png');
	background-position:-8px 0px;
	margin: 10px auto;
	width: 34px;
	height: 32px;
	border:0 !important;
}

.CeuClaroDia{
	height:33px;
	background-position:-84px 0px;
}

.EncobertoDia{
	height:17px;
	background-position:-84px -40px;
	margin-top:12px;
}

.EncobertoChuvaDia{
	height:27px;
	background-position:-84px -62px;
	margin-top:10px;
}

.ParcialmenteNubladoDia{
	height:23px;
	background-position:-84px -116px;
	margin-top:7px;
}

.NubladoDia{
	height:21px;
	background-position:-84px -93px;
	margin-top:7px;
}

.NubladoChuvaDia{
	height:34px;
	background-position:-84px -142px;
}

.TrovoadaDia{
	height:35px;
	background-position:-84px -180px;
}

.Neblina{
	height:27px;
	background-position:-84px -218px;
	margin-top:9px;
}

.CeuClaroNoite{
	height:32px;
	background-position:right 0;
}

.EncobertoNoite{
	height:18px;
	background-position:right -40px;
	margin-top:12px;
}

.EncobertoChuvaNoite{
	height:27px;
	background-position:right -62px;
	margin-top:10px;
}

.ParcialmenteNubladoNoite{
	height:23px;
	background-position:right -120px;
}

.NubladoNoite{
	height:23px;
	background-position:right -94px;
	margin-top:8px;
}

.NubladoChuvaNoite{
	height:31px;
	background-position:right -147px;
}

.TrovoadaNoite{
	height:32px;
	background-position:right -183px;
	margin-top:7px;
}





.noticia{
	border-bottom: #069 solid 1px;
	padding-bottom: 15px;
}


.noticia:hover{
	border-bottom: #0CE solid 2px;
}


.noticia a{
	color:#09C;
}

.noticia:hover a{
	color:#0CE;
}

.noticia h4{
	height: 50px;
	border:#ccc solid 0px;
}

.content_noticias img{
	width: 100%;
}


.label-crise{
    background: #4a21b2;
}


.menu_icone{
	/*border: #FFF solid 1px;*/
	padding-top: 10px;
	width: 60px;
	height: 60px;
	font-size: 2em;
	display: none;
}

.menu_icone a:hover{
	cursor: pointer;	
}


.logo{
	margin-top:20px;
	width:100%;
	height:77px;
	background-size: contain !important;
	/*border:#FFF solid 1px;*/
}

.menu-item{
	margin-right: 16px;
}

@media (max-width: 450px ){

	.logo{
		width:100%;
		height:77px;
		background-size: none !important;
		/*border:#FFF solid 1px;*/
	}

	.logoarea{
		padding:5px 0 0 10px;
	}

	#menuitens{
		clear: both;
		width: 100%;
		/*border:#FFF solid 1px;*/
		/*height: 200px;*/
		/*overflow: auto;*/
	}

	.menu_icone{
		display: block;
	}

	section aside .btn{
		padding: 6px 10px;
	}
	
	iframe{
		height: 590px;
	}

	h2{
		font-size: 22px;
	}

	#txt-estagio{
		margin-top:25px !important;
		font-size: 15px !important;
		font-size: 1.6em !important;
	}

	#legenda{
		padding:2px 0;
	}

	#mapa{
		margin:0;
	}

	#redes-sociais, #noticias{
		margin:50px 0;
	}

	#boletins, #tvcor{
		margin-top: 45px;
	}

	.face_mobile{
		display: block;
	}

	.face_desktop{
		display: none;
	}

	.menu-item{
		display: block;
		padding:3px;
		font-size: 12px;
		border-bottom: #333 solid 1px;
	}

	.img-rodape{
		margin-left: 45px;
		margin-bottom: 15px;
	}

	.estagio-painel{
		/*margin-top: 40px;*/
	}

	.estagio-painel h1{
		font-size: 1.8em;
	}

}


@media (min-width: 400px ){

	.face_mobile{
		display: none;
	}

	.face_desktop{
		display: block;
	}

}