@charset "utf-8";
/* CSS Document */



/************************************************************************/
/*                FONTE UTILIZADA NO CORPO  							*/
/************************************************************************/
body {
	font-family: 'carter-one'; /* escolha da fonte */
	line-height: 20px; /*espaçamento entre linhas*/
	font-size: 16px; /*tamanho da fonte, variar entre 18 a 14 pixels*/
	color: #000000; /*cor da fonte*/
	
}

















/************************************************************************/
/* 							FIGURA UTILIZADA NO TOPO					*/
/************************************************************************/
.topo {
	/* chama a identidade criada na página html */
	background: url("../imagens/barra-topo-1920x278px.png");
	width: 940px; /*define a largura da barra-top poderia ser 940px*/
	height: 150px; /*define a altura da figura barra-topo poderia ser 150px*/
	border-bottom:10px solid #090; /*define a borda da figura barra-topo*/
	margin: auto; /*margem da barra*/
}
















/************************************************************************/
/* 							LOGOTIPO 									*/
/************************************************************************/
/* agora para trabalhar no logotipo, pois o tipo foi "class" agora tem que trabalhar com . "ponto"*/
.logo {
float: left;/*primeira coisa é onde vai ficar a imagem em flutuação*/
/*agora deve-se chamar a imagem do logo tipo...*/
background:url("../imagens/FEE-logotipo.gif");
/*agora determinando a largura da imagem*/
width:100px;
/*agora a altura da imagem*/
height: 105px;
/*a posição da imagem como relativa, para que ela fique independente das outras div's*/
position:relative;
/*agora a margem referenciada dentro do topo*/
margin:15px 0 0 15px; /*o primeiro número "40px" está relacionada a parte superior, o segundo número a parte direira, o terceiro a inferior e o último a parte esquerda*/
}




















/************************************************************************/
/* 							MENU	 									*/
/************************************************************************/
/* agora é necessário mexer no menu e a lista que está dentro do topo*/
/* em primeiro lugar vamos mexer com o menu*/
.topo .menu ul {
	position: relative;
	float: right;
	margin: -40px 25px 0 100px;
}

/* agora vamos mexer com a lista*/
.topo .menu ul li {
	/*primeiro chamar o comando display para deixar em linha*/
	display:inline;
	/*o preenchimento ou seja o espaçamento entre as palavras */
	padding: 10px 0 0 60px;
	/*e na flutuação deixar como nenhuma*/
	float: none;
}

/*agora mexendo com a cor do link*/
.topo .menu ul li a{
color: #000000;	
	/*retirando o sublinhado do link*/
	text-decoration: none;
}

/*efeito quando a pessoa passar com o mouse por cima*/
.topo .menu ul li a:hover{
	text-decoration: underline; /*volta a ser sublinhada*/
	color: #FF0000;
}


/*agora definindo um cor para quando estiver na pagína inicial, mexendo na classe active*/
.topo .menu ul li .active { /*ver na lista desordenada do html*/
	color: #0D4904;
	/*alterando a fonte para negrito*/
	font-weight: bold;
}















/************************************************************************/
/* 				DETERMINANDO A ÁREA DO CONTEÚDO DA PÁGINA INICIAL		*/
/************************************************************************/
/*inicio da página inicial */
#fundo_inicial { /*neste caso utiliza # pois utilizamos a id*/
	/*definindo as dimensões do fundo do site*/	
	width: 940px;
	height: 872px;
	margin:10px auto 20px auto;
	background-color: #FFFFFF;
}

/*definindo parâmetros do box da imagem img1*/
.box_img1{
	/*primeiro inserir a imagem*/
	background: url("../imagens/foto01-projetando.jpeg");
	/*definindo o tamanho da imagem*/
	width: 450px;
	height: 300px;
	/*definindo o modo de flutuação da imagem*/
	float:left;
	position: relative;
	margin: 15px;
}









/* <<<<<<<<<<<<<<<<<<<<<		BOX TEXTO 1 - PÁGINA INICIAL 		>>>>>>>>>>>>>>>>>>>>>>*/
.box_txt1{
	width: 420px;
	height: 300px;
	float: left;
	position: relative;
	margin: 15px;
}

/* CABEÇALHO */
/*agora para configurar o estilo do cabeçalho para ser utilizado no box_txt1*/
/*primeiro chama-se o box e vincula ao cabeçalho h1*/
.box_txt1 h1{
	font-size: 24px;
	color: #090;
	font-weight: bold;
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
}

/* PARAGRÁFO */
/*agora para configurar o paragrafo*/
.box_txt1 p{ /*o p significa paragrafo*/
	text-align: justify; /*comando para justificar o texto*/
}

/* EFEITO SEM PASSAR O MOUSE */
/*para estilizar o link do saiba mais...*/
.box_txt1 a{
	text-decoration: none; /*sem sublinhado*/
	color: #F30;
}

/* EFEITO AO PASSAR O MOUSE */
/*incluindo o efeito quando passa o mouse por cima da palavra*/
.box_txt1 a:hover{
	text-decoration: underline;
	color: #F60;
}




















/* <<<<<<<<<<<<<<<<<<<<<		LINHA HORIZONTAL - PÁGINA INICIAL 		>>>>>>>>>>>>>>>>>>*/
/*criando a regua*/
.regua {
	width: 900px;
	margin: auto;
	border: 1px  solid #CCC;
	clear: both /*este comando faz que a regua apareça, pois vai zerar as div's anteriores */
}

/*criando o grupo_fotos*/
.grupo_fotos{
	background: url("../imagens/grupo1.png");/*chamando a imagem de grupo1*/
	width: 920px;
	height: 200px;
	margin: auto;
}















/* <<<<<<<<<<<<<<<<<<<<<		BOX TEXTO 2 - PÁGINA INICIAL 		>>>>>>>>>>>>>>>>>*/
/*criando o box do txt2*/
.box_txt2{
	width: 920px;
	height: 150px;
	margin: auto;
}


/*definindo o texto do cabeçalho do box texto 2*/
.box_txt2 h1{
	font-size: 24px;
	color: #090;
	font-weight: bold;
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
}

/*agora definindo a formatação do texto do box txt2*/
.box_txt2 p{ /*o p significa paragrafo*/
	text-align: justify; /*comando para justificar o texto*/
	font-size: 15px;
	
}



/* <<<<<<<<<<<<<<<<<<<<<		BOX TEXTO 3 - PÁGINA INICIAL 		>>>>>>>>>>>>>>>>>*/
/*criando o box do txt3*/
.box_txt3{
	width: 920px;
	height: 150px;
	margin: auto;
}


/*definindo o texto do cabeçalho do box texto 2*/
.box_txt3 h1{
	font-size: 24px;
	color: #090;
	font-weight: bold;
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
}

/*agora definindo a formatação do texto do box txt2*/
.box_txt3 p{ /*o p significa paragrafo*/
	text-align: justify; /*comando para justificar o texto*/
	font-size: 15px;
	
}


/* <<<<<<<<<<<<<<<<<<<<<		BOX RODAPÉ - PÁGINA INICIAL 		>>>>>>>>>>>>>>>>>*/
/*definição do rodape*/
.rodape{
	width: 920px;
	height: 120px;
	margin: 20px auto;/*20px superior e o resto automático*/
	clear: both;/*para dar uma zerada nos divs*/
	background: url("../imagens/barra-down-1920x278px.png");
}
.box_txt_rodape p{
	width:900px;
	height: 100px;
	margin: 15px 0 0 auto;
	font-family: aladin;
	text-align: center;
	font-size: 13px;
	
}


/* FIM DA PÁGINA INICIAL */













/*INÍCIO DA SEGUNDA PÁGINA DO SITE -  APRESENTAÇÃO*/

/*inicio da página inicial */
#fundo_apresentacao { /*neste caso utiliza # pois utilizamos a id*/
/*definindo as dimensões do fundo do site*/	
width: 940px;
height: 670px;/*pode-se reduzir o tamanho do fundo da página se desejar*/
margin:10px auto 20px auto;
background-color: #FFFFFF;
}



/*agora definindo novos box para texto ou imagens*/
.box_txt3{
	width: 900px;
	height: 200px;
	float: left;
	position: relative;
	margin: 15px;
}



/*agora para configurar o estilo do cabeçalho para ser utilizado no box_txt3*/
/*primeiro chama-se o box e vincula ao cabeçalho h1*/
.box_txt3 h1{
	font-size: 24px;
	color: #090;
	font-weight: bold;
	font-family: Arial, Helvetica, "sans-serif";
}



/*agora para configurar o paragrafo*/
.box_txt3 p{ /*o p significa paragrafo*/
	text-align: justify; /*comando para justificar o texto*/
	font-size: 18px;
}



/*criando box para imagens da página 2*/
.box_imagens{
	position: relative;
	width: 900px;
	height: 350px;
	margin: 20px auto auto 20px;
	float: left;
}




/*definição do rodape*/
.rodape{
	width: 920px;
	height: 120px;
	margin: 20px auto;/*20px superior e o resto automático*/
	clear: both;/*para dar uma zerada nos divs*/
	background: url("../imagens/barra-down-1920x278px.png");
}


/* FIM DA PÁGINA APRESENTAÇÃO*/





/* INÍCIO DA PÁGINA SERVIÇOS*/

#fundo_servicos{
	width: 940px;
	height: 450px;
	margin: 10px auto 20px auto;
	background-color: #fff;
}


.box_img2{
	width: 400px;
	height: 300px;
	float: left;
	position: relative;
	margin: 15px 15px 10px 15px;
	background: url("../imagens/servicos.png");
}



/* X=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=  */
/* X=X=X=X=X=X=X=X FORMATAÇÃO DE TEXTOS H1 "CABEÇALHOS" E P "PARAGRAFOS" X=X=X=X=X=X  */
/* X=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=  */

.box_txt4 {
	width: 450px;
	height: 380px;
	float: left;
	position: relative;
	margin: 15px;
}

.box_txt4 h1{
	font-size: 24px;
	color: #090;
	font-weight: bold;
	font-family: Arial, Helvetica, "sans-serif";
}


/*agora para configurar o paragrafo*/
.box_txt4 p{ /*o p significa paragrafo*/
	text-align: justify; /*comando para justificar o texto*/
}




/* X=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=  */
/*                             FIM DA PÁGINA SERVIÇOS                                 */
/* X=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=  */





/* X=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=  */
/*                             INICIO DA PÁGINA NOTICIAS                              */
/* X=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=  */


#fundo_noticias {
	width: 940px;
	height: 600px;
	margin: 10px auto 20px auto;
	background-color: #fff;
}



.box_txt5 {
	width: 450px;
	height: 600px;
	float: left;
	position: relative;
	margin: 15px;
}


.box_txt5 h1{
	font-size: 24px;
	color: #090;
	font-weight: bold;
	font-family: Arial, Helvetica, "sans-serif";
}


/*agora para configurar o paragrafo*/
.box_txt5 p{ /*o p significa paragrafo*/
	text-align: justify; /*comando para justificar o texto*/
}



.box_img3 {
	width: 150px;
	height: 150px;
	float: left;
	position: relative;
	margin: 15px 15px 10px 15px;
	background:url("../imagens/noticias/foto1_g.jpg");
}




.box_img4 {
	width: 150px;
	height: 150px;
	float: left;
	position: relative;
	margin: 15px 15px 10px 15px;
	background:url("../imagens/noticias/foto2_g.jpg");
}




.box_img5 {
	width: 150px;
	height: 150px;
	float: left;
	position: relative;
	margin: 15px 15px 10px 15px;
	background:url("../imagens/noticias/foto3_g.jpg");
}




.box_img6 {
	width: 150px;
	height: 150px;
	float: left;
	position: relative;
	margin: 15px 15px 10px 15px;
	background:url("../imagens/noticias/foto4_g.jpg");
}

/* X=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=  */
/*                             FIM DA PÁGINA NOTICIAS                                 */
/* X=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=  */

















/* X=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=  */
/*                             INICIO DA PÁGINA CONTATO                               */
/* X=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=X=X=X=XX=X=  */

#fundo_contato{
	width: 940px;
	height: 750px;
	position: relative;
	margin: 10px auto 20px auto;
	background-color: #fff;
	
}
.formulario{
	width: 450px;
	height: 400px;
	float: left;
	position: relative;
	margin: 15px;
}
.formulario h1{
	font-size: 24px;
	color: #090;
	font-weight: bold;
	font-family: Arial, Helvetica, "sans-serif";
}


/*agora para configurar o paragrafo*/
.formulario p{ /*o p significa paragrafo*/
	text-align: justify; /*comando para justificar o texto*/
}

.mapa {
	width: 400px;
	height: 300px;
	float: left;
	position: relative;
	margin: 15px;
}

.box_parceiros{
	font-size: 24px;
	color: ##000000;
	font-weight: bold;
	font-family: Lucida Grande, "DejaVu Sans";
	width: 900px;
	height: 600px;
	float: left;
	position: relative;
	margin: 15px;
}

.box_parceiro1 {
	width: 150px;
	height: 150px;
	float: left;
	position: relative;
	margin: 15px 15px 10px 15px;
	background:url("../imagens/POPRH.png")
	}
	
.box_parceiro2 {
	width: 150px;
	height: 150px;
	float: left;
	position: relative;
	margin: 15px 15px 10px 15px;
	background:url("../imagens/winner.png");
}

.box_parceiro3 {
	width: 300px;
	height: 96px;
	float: left;
	position: relative;
	margin: 15px 15px 10px 15px;
	background:url("../imagens/CEU.png");
}

.box_parceiro4 {
	width: 150px;
	height: 67px;
	float: left;
	position: relative;
	margin: 15px 15px 10px 15px;
	background:URL("../imagens/ENSA.png");
}