img{
	border: 0;
}
body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color:#333;
	background: #FFF;
	margin: 0;
}
a {
	text-decoration: none;
	color: #585858;
}
a:hover{
	text-decoration: underline;
}
header , footer , article , aside , nav , section {display:block}

.meio{
	width: 960px;
	margin: 0 auto;
}
.resp{
	display:none;
}

/************************************************************************
* Topo
************************************************************************/
header{
	display: block;
}
header .meio{
	display: table;
}
header .end{
	display: table-cell;
	width: 30%;
	vertical-align: middle;
}
header .logomarca{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
/* Redes */
header .redes{
	display: table-cell;
	width: 30%;
	vertical-align: middle;
	text-align: right;
}
header .redes a{
	height: 28px;
	width: 31px;
	display: block;
	margin-left: 5px;
	float: right;
	background: url('../imgs/redes.jpg');
}
header .redes .yt{
}
header .redes .fb{
	background-position: -40px 0;
}
header .redes .ld{
	background-position: -80px 0;
}
header .redes .tel{
	background-position: -120px 0;
}
header .redes .tel2{
	background-position: -160px 0;
	background-repeat: no-repeat;
	background-color: #2E2E2E;
	color: #fff;
	padding-top: 5px;
	height: 23px;
	padding-right: 10px;
	width: 120px;
}

/* Menu */
header .menu{
	background: url('../imgs/fmenu.jpg');
	width: 100%;
	height: 82px;
}
header menu{
	width: 960px;
	margin: 0 auto;
	display: table;
	background: #F4F5F8;
	height: 100%;
}
header menu a{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #000;
}
header menu a.on{
	background: #C84928;
	color: #fff;
}






/************************************************************************
* Banner
************************************************************************/
#banner{
	width: 100%;
	height: 415px;
	position: relative;
	overflow: hidden;
	z-index:1;
	margin: 15px auto 0 auto;
}


/************************************************************************
* Meio
************************************************************************/
.conteudo{
	padding: 15px 10px;
	overflow: auto;
}


.home{
	display: table;
}
.home .esqhome{
	display: table-cell;
	padding: 10px;
}
.home .dirhome{
	display: table-cell;
	border: 3px solid #ECEDEF;
	width: 257px;
}
.home .dirhome p{
	padding: 1px 15px;
}
.home .dirhome h2{
	text-transform: uppercase;
	text-align: center;
}



/* Video responsivo */
.video{
	width: 560px;
	height: 315px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
.video .img{
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.video .youtube{
	position: absolute;
	top: calc(50% - 32px);
	left:calc(50% - 32px);
	width: 64px;
	height: 64px;
	background: url('../imgs/youtube.png');
	cursor: pointer;
	z-index:2;
}
.video iframe{
	position: absolute;
	top: 0;
	left:0;
	display:none;
	border: none;
}




.na_midia{
	display: table;
}
.materias{
	display: table-cell;
	padding: 10px 20px;
	vertical-align: top;
}
.materias img{
	max-width: 100%;
}
.materias hr{
	width: 90%;
}
.materias_categorias{
	display: block;
	background: #EDECED;
	width: calc(100% - 40px);
	padding: 10px;
	overflow: auto;
	margin-bottom: 15px;
}
.materias_categorias a{
	display: block;
	padding: 10px 60px;
	font-weight: bold;
	text-align: center;
	color: #000;
	float: left;
}
.materias_categorias a:hover{
	color: #C14024;
}
.materias_categorias a.on{
	background: #C14024;
	color: #fff;
}
.mt{
	text-align: center;
}





.links{
	vertical-align: top;
	display: table-cell;
	width: calc(250px - 20px);
	height: 300px;
	padding: 0 10px;
}
.links h4{
	font-size: 17px;
	text-transform: uppercase;
	color: #FF5252;
	margin: 0;
	padding: 10px;
	border-top: 5px solid #F4F5F8;
	border-bottom: 5px solid #F4F5F8;
}
.links ul{
	margin: 0;
	list-style: none;
	padding: 0;
}
.links li{
	background: url('../imgs/lapis.jpg') no-repeat;
	padding: 5px 5px 5px 28px;
}
.links a{
	color: #000;
}


.categorias{
	display: block;
	background: #EDECED;
	width: calc(100% - 40px);
	padding: 20px;
	overflow: auto;
	margin-bottom: 15px;
}
.categorias a{
	display: block;
	width: 150px;
	padding: 10px;
	font-weight: bold;
	text-align: center;
	color: #000;
	float: left;
}
.categorias a:hover{
	color: #C14024;
}
.categorias a.on{
	background: #C14024;
	color: #fff;
}




.contato {
	width: 98%;
}
.contato input.t, .contato textarea{
	width: calc(100% - 10px);
	padding: 5px;
	border: 1px solid #000;
	margin-bottom: 10px;
}
.contato input.t1{
	width: calc(50% - 12px - 15px);
	margin-right: 15px;
	float: left;
}
.contato input.t2{
	width: calc(50% - 12px);
}
.contato textarea{
	height: 60px;
}
.contato input[type=submit]{
	float: right;
	background: #DB4438;
	color: #fff;
	padding: 8px;
	border: 0;
}


/************************************************************************
* Footer
************************************************************************/
footer{
	width: 100%;
	background: #F4F5F8;
}
footer .esq{
	width: 50%;
	float: left;
	margin: 20px 0;
	height: 310px;
}
footer .dir{
	width: 50%;
	float: right;
	margin: 20px 0;
}
footer form{
	width: 98%;
}
footer form input.t, footer form textarea{
	width: calc(100% - 10px);
	padding: 5px;
	border: 1px solid #000;
	margin-bottom: 10px;
}
footer form input.t1{
	width: calc(50% - 12px - 15px);
	margin-right: 15px;
	float: left;
}
footer form input.t2{
	width: calc(50% - 12px);
}
footer form textarea{
	height: 60px;
}
footer form input[type=submit]{
	float: right;
	background: #DB4438;
	color: #fff;
	padding: 8px;
	border: 0;
}


footer .f1{
	overflow: auto;
}
footer .assinatura{
	background: #D6D6D6;
	clear: both;
	padding: 10px 0;
	overflow: auto;
	color: #000;
}
footer .assinatura .nome{
	float: left;
}
footer .assinatura .desenvolvedor{
	float: right;
}
footer .assinatura a{
	color: #000;
}


footer .mapa{
	position: relative;
}
footer .mapa img{
	position: absolute;
	top: 0;
	left: 0;
}
footer .mapa iframe{
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}


/************************************************************************
* Responsivo
************************************************************************/
@media (max-width:960px){
.meio{
	width: 100%;
}

.resp{
	display:initial;
}

#menu{
	background: url('../imgs/menu.png');
	background-position: 0 -69px;
	width: 209px;
	height: 69px;
	display: block;
}
#menu.on{
	background-position: 0 0;
}


header .meio{
	display: table;
}
header .end{
	display: initial;
	float: right;
	margin: 80px 10px 0 0;
}
header .logomarca{
	display: initial;
	float: left;
}
header .redes{
	display: initial;
	position: absolute;
	top: 205px;
	right: 10px;
	width: 300px;
}


header .menu{
	height: auto;
	width: 100%;
	background: #EFEFEF;
}
header menu{
	width: 100%;
	display: none;
	background: #C84928;
	padding: 0;
}
header menu a{
	display: initial;
	width: calc( 100% - 14px - 14px);
	display: block;
	padding: 14px;
}


.conteudo{
	width: calc(100% - 20px);
	clear: both;
}


.video{
	width: 430px;
	height: 241px;
}


.na_midia{
	display: initial;
	width: calc(100% - 20px);
	margin: 0 10px;
	overflow: auto;
}
.materias{
	display: block;
}
.mt img{
	width: 90%;
}
.links{
	display: block;
	height: auto;
	width: 100%;
}
.materias img{
	max-width: auto;
}
.paginacao{
	font-size: 18px;
	text-align: center;
}



footer .esq{
	width: calc(100% - 40px);
	float: initial;
	margin: 20px;
}
footer .dir{
	width: calc(100% - 40px);
	float: initial;
	margin: 20px;
}





}


@media (max-width:550px){
.home{
	display: block;
}
.home .esqhome{
	display: initial;
	padding: 10px;
}
.home .dirhome{
	display: initial;
	border: 3px solid #ECEDEF;
	width: 100%;
}

}



@media (max-width:470px){

.categorias a{
	width: 100px;
}


footer .mapa img{
	width: 100%;
	height: 200px;
}

header .end{
	display: initial;
	float: initial;
	position: absolute;
	top: 190px;
	left: 0;
	margin: 0;
	width: 100%;
	text-align: center;
}
header .logomarca{
	display: initial;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}
header .redes{
	display: initial;
	float: initial;
	position: absolute;
	top: 220px;
	right: 0;
	margin: 0;
	margin-right: 20px;
}

header .menu{
	margin-top: 100px;
}


}