/* Tudo resetado!! */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

/* http://prefixmycss.com/  CONFERIDO! */
/* Nova ferramenta de correção de CSS
 * http://pleeease.io/play/
 */
/* http://prefixr.com */
/* usado para gerar compatibilidade com outros browsers */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,
p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,
dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,
sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td { 
	margin:0; /* TRBL */
	padding:0; /* TRBL */
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	text-indent: 0px;
}

/* GENERICO */
/* http://sergiolopes.org/css-box-sizing-border-box/ */
*, *:before, *:after {
	-ms-box-sizing: border-box;

	/* para o IE8 */
	box-sizing: border-box; /* evita que o quadro da legenda SAIA DA CAIXA */
}



/* GENERICO */
@font-face {
	font-family: Humanist777;
	src: url("fonts/Humanist 777 Light BT.ttf");
	font-weight:100;
}




div#interface {
	background-color: white;
	width: 95%;
	margin-left: auto; 
	margin-right: auto; 
} 
aside#logoComMenu {
	display: block;   /* BLOCO para usar FLOAT!! */
	float: left; 
	width: 30%;
}
section#restoTela {
	display: block;   /* BLOCO para usar FLOAT!! */
	float: right; 
	width: 70%;
}

/* Possui 3 Sections internas: relogio, tradutor, cab_rodape */
/* PAI = section#restoTela */
section#cabecalho {
	/* background-color:red; */
	width: 100%; /* 100% do PAI */
	height: 3%;  /*   3% do PAI */
}
/* OK, Checado! */

/* PAI = section#cabecalho */
section#tradutor {
	display: block; /* BLOCO para usar FLOAT!! */
	float: right;
	width: 34%;     /*  30% do PAI */
	height: 100%;   /* 100% do PAI */
	margin: .5%;
}
section#tradutor span {
	font-family: arial, sans-serif;
	font-size: .8em;
	margin: 0 0 0 0;
	padding: 0;
}
section#tradutor input {
	margin: 0 10% 0 0;
	padding: 0;
}
/* CADA BANDEIRA OCUPARÁ */
.botaoTradutor {
	width : 25px; /* É TAO pequeno que nao vale a pena colocar proporcional */ 
	height: 17px; /* É TAO pequeno que nao vale a pena colocar proporcional */
	padding: 0;
	cursor: pointer;
	border: none; /* PRECISA desta linha, senao a GOOGLE cria uma borda! */
}
.bandeiraBR {
	background:url("../imagens/br.gif") 0px 0px no-repeat;
}
.bandeiraES {
	background:url("../imagens/es.gif") 0px 0px no-repeat;
}
.bandeiraAR {
	background:url("../imagens/ar.gif") 0px 0px no-repeat;
}
.bandeiraBO {
	background:url("../imagens/bo.gif") 0px 0px no-repeat;
}
.bandeiraCL {
	border: 1px solid rgba(0,0,0,.1);
	background:url("../imagens/cl.gif") 0px 0px no-repeat;
}
.bandeiraCO {
	background:url("../imagens/co.gif") 0px 0px no-repeat;
}
.bandeiraEC {
	background:url("../imagens/ec.gif") 0px 0px no-repeat;
}
.bandeiraMX {
	background:url("../imagens/mx.gif") 0px 0px no-repeat;
}
.bandeiraPE {
	background:url("../imagens/pe.gif") 0px 0px no-repeat;
}




/* PAI = section#cabecalho */
section#relogio {
	display: block; /* BLOCO para usar FLOAT!! */
	float: right;
	width: 30%;     /*  30% do PAI */
	height: 100%;   /* 100% do PAI */
	margin: .5% 0% 0% 4%;
	text-align: right;
	color: #5CC6D0;
	font-family	: Humanist777, sans-serif; /* SEM SERIFA */
}
/* PAI = section#cabecalho */
section#cab_rodape {
	clear: both; /* desliga a flutuação */
}
/* PAI = section#restoTela */
/* Revisto OK em 25fev 20:30 */
section#Princ_Patroc {
	height: 40%;    /* 40% do PAI */
	width:  100%;   /* 100% do PAI */
	margin-bottom: 0%; /*  0% do PAI */
}
/* PAI = Princ_Patroc */
/* Revisto OK em 25fev 20:30 */
section#fotoPrincipal {
	display: block; /* para funcionar o FLOAT */
	float: left;
	
	margin: .5% 2% 0% 2% ;  /*  1% do PAI */
	padding: 0;
	
	height: 100%;    /* 100% do PAI */
	width:  84%;     /* 87% do PAI */

	font-weight	: normal; /* normal, bold; */
	font-family	: Humanist777, sans-serif; /* SEM SERIFA */
	/* background-color: green; */ 
	/* border: 1px solid black; */ 
}
/* PAI = section#fotoPrincipal */
/* Revisto OK em 25fev 20:30 */
section#fotoPrincipal .quadroPrincipal {
	height: 100%;   /* 100% do PAI */
	width:  100%;   /* 100% do PAI */
}

/* PAI = section#fotoPrincipal */
/* Revisto OK em 25fev 20:30 */
section#fotoPrincipal .quadroPrincipal  header {
	height: 9%;   /* 9% do PAI */
	width:  100%;  /* 100% do PAI */
	padding: .5%;

	color: #5CC6D0;
	text-align		: center;
	font-size: 1.5em;
	/* border: 5px solid blue; */
}
/* PAI = section#fotoPrincipal */
/* Revisto OK em 25fev 20:30 */
section#fotoPrincipal .quadroPrincipal  section {
	height: 100%;  /* 100% do PAI */
	width:  100%;  /* 100% do PAI */
	/* border: 5px solid blue; */
}
/* Sem ISSO, Pula uma linha vazia antes do cabeçalho dos quadros CTRS */
/* Revisto OK em 25fev 20:30 */
header#cabecalhoFotoPrincipal {
	height: 1px;
}
/* Revisto OK em 25fev 20:30 */
span#pagerPrincipal {
	position: relative;
	top: 225px;
	left: 40%; /* 10px; */
	opacity: 0;
	filter:alpha(opacity=0);

	/* transition NAO É no hover !! */
	/* o parametro OPACITY quando alterado, levara 1 segundo para fazer a alteração */
	-webkit-transition: opacity 1s; /* Safari */
	transition: opacity 1s;         /* Padrão */
	-moz-transition: opacity 1s;    /* Mozilla */
	-o-transition: opacity 1s;      /* Opera */
	-ms-transition: opacity 1s;     /* Microsoft */
}
/* Revisto OK em 25fev 20:30 */
span#prevPrincipal {
	cursor: pointer;
	opacity: 0;
	filter:alpha(opacity=0);
	position: relative;
	left: 1%; /* 10px; */
	top: 210px;

	width: 1%;

	z-index: 200; /* para ser possivel clicar, senao o objeto fica atras */
	/* transition NAO É no hover !! */
	/* o parametro OPACITY quando alterado, levara 1 segundo para fazer a alteração */
	-webkit-transition: opacity 1s; /* Safari */
	transition: opacity 1s;         /* Padrão */
	-moz-transition: opacity 1s;    /* Mozilla */
	-o-transition: opacity 1s;      /* Opera */
	-ms-transition: opacity 1s;     /* Microsoft */
	
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/prev.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
span#nextPrincipal {
	cursor: pointer;
	opacity: 0;
	filter:alpha(opacity=0);
	position: relative;
	left: 94%; /* 10px; */
	top: 210px;

	width: 1%;

	z-index: 200; /* para ser possivel clicar, senao o objeto fica atras */
	/* transition NAO É no hover !! */
	/* o parametro OPACITY quando alterado, levara 1 segundo para fazer a alteração */
	-webkit-transition: opacity 1s; /* Safari */
	transition: opacity 1s;         /* Padrão */
	-moz-transition: opacity 1s;    /* Mozilla */
	-o-transition: opacity 1s;      /* Opera */
	-ms-transition: opacity 1s;     /* Microsoft */
	
	
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/next.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}

/* Quando o usuário coloca o mouse em cima da foto, aí sim aparecem as setas E o pager! */
section#fotoPrincipal:hover #prevPrincipal {opacity:1;filter:alpha(opacity=100);}
section#fotoPrincipal:hover #nextPrincipal {opacity:1;filter:alpha(opacity=100);}
section#fotoPrincipal:hover #pagerPrincipal {opacity:1;filter:alpha(opacity=100);}


/* PAI = section#fotoPrincipal */
/* Revisto OK em 25fev 20:30 */
section#classFotoPrincipal1 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/a.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
section#classFotoPrincipal2 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/b.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
section#classFotoPrincipal3 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/c.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
section#classFotoPrincipal4 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/d.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
section#classFotoPrincipal5 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/e.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}








/* PAI = Princ_Patroc */
/* Revisto OK em 25fev 20:30 */
section#fotoPatrocinadores {
	display: block; /* para funcionar o FLOAT */
	float: right;
	
	margin: .5% 0% 0% 1% ;  /*  1% do PAI */
	padding: 0;
	
	height: 33%;    /*  33% do PAI */
	width:  10%;     /* 11% do PAI */

	/* background-color: green; */ 
	/* border: 3px solid black; */  
}
/* PAI = section#fotoPatrocinadores */
/* Revisto OK em 25fev 20:30 */
section#fotoPatrocinadores .quadroPatrocinadores {
	height: 100%;   /* 100% do PAI */
	width:  100%;   /* 100% do PAI */
	padding: 1%;
	/* border: 3px solid black; */  
}
/* PAI = section#fotoPrincipal */
/* Revisto OK em 25fev 20:30 */
section#fotoPatrocinadores .quadroPatrocinadores  section {
	height: 100%;  /* 100% do PAI */
	width:  100%;  /* 100% do PAI */
	/*border: 1px solid blue; */
}




/* PAI = section#fotoPrincipal */
/* Revisto OK em 25fev 20:30 */
section#fotoPatrocinadores .quadroBancos {
	height: 100%;   /* 100% do PAI */
	width:  100%;   /* 100% do PAI */
}

/* PAI = section#fotoPrincipal */
/* Revisto OK em 25fev 20:30 */
section#fotoPatrocinadores .quadroBancos  section {
	height: 100%;  /* 100% do PAI */
	width:  100%;  /* 100% do PAI */
	/* border: 5px solid blue; */
}






section#classFotoBB {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/apoio_bb.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoBNDES {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/apoio_bndes.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoBradesco {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/apoio_bradesco.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCaixa {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/apoio_caixaeconomicafederal.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCNPQ {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/apoio_cnpq.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCAPES {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/apoio_capes.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoISO {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/apoio_iso.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoIBRAM {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/apoio_ibram.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}



























/* PAI = section#restoTela */
/* Revisto OK em 25fev 20:30 */
section#CTRS_EVENTO {
	height: 48%;   /* 100%-30-3 do PAI */
	width:  100%;   /* 100% do PAI */
}

/* PAI = section#CTRS_EVENTO */
/* Revisto OK em 25fev 20:30 */
section#fotoCTRS {
	display: block; /* para funcionar o FLOAT */
	float: left;
	
	margin: 0% 0% 0% 7% ; /*  1% do PAI */
	padding: 0;
	
	height: 100%;    /* 100% do PAI */
	width:  50%;     /* 65% do PAI */

	font-weight	: normal; /* normal, bold; */
	font-family	: Humanist777, sans-serif; /* SEM SERIFA */
	/* background-color: green; */ 
	/* border: 1px solid black; */
}

/* PAI = section#fotoCTRS */
/* Revisto OK em 25fev 20:30 */
section#fotoCTRS .quadroCTRS {
	height: 100%;   /* 100% do PAI ---330px*/
	width:  80%;   /* 80% do PAI, senão sai ESPICHADO --330px tem que ser um QUADRADO!! */
}

/* PAI = section#fotoCTRS */
/* Revisto OK em 25fev 20:30 */
section#fotoCTRS .quadroCTRS  header {
	height: 9%;   /* 9% do PAI */
	width:  100%;  /* 100% do PAI */
	padding: .5%;

	color: #5CC6D0;
	text-align		: center;
	font-size: 1.5em;
	/* border: 5px solid blue; */
}
/* PAI = section#fotoCTRS */
/* Revisto OK em 25fev 20:30 */
section#fotoCTRS .quadroCTRS  section {
	height: 100%;  /* 100% do PAI */
	width:  100%;  /* 100% do PAI */
	/* border: 5px solid blue; */
}
/* Sem ISSO, Pula uma linha vazia antes do cabeçalho dos quadros CTRS */
/* Revisto OK em 25fev 20:30 */
header#cabecalhoFotoCTRS {
	height: 1px;
}
/* Revisto OK em 25fev 20:30 */
span#pagerCTRS {
	position: relative;
	top: 155px;
	left: 40px;
	opacity: 0;
	filter:alpha(opacity=0);
	/* transition NAO É no hover !! */
	/* o parametro OPACITY quando alterado, levara 1 segundo para fazer a alteração */
	-webkit-transition: opacity 1s; /* Safari */
	transition: opacity 1s;         /* Padrão */
	-moz-transition: opacity 1s;    /* Mozilla */
	-o-transition: opacity 1s;      /* Opera */
	-ms-transition: opacity 1s;     /* Microsoft */
}
/* Revisto OK em 25fev 20:30 */
span#prevCTRS {
	cursor: pointer;
	opacity: 0;
	filter:alpha(opacity=0);
	position: relative;
	left: 2%; /* 10px; */
	top: 140px;

	width: 1%;

	z-index: 200; /* para ser possivel clicar, senao o objeto fica atras */
	/* transition NAO É no hover !! */
	/* o parametro OPACITY quando alterado, levara 1 segundo para fazer a alteração */
	-webkit-transition: opacity 1s; /* Safari */
	transition: opacity 1s;         /* Padrão */
	-moz-transition: opacity 1s;    /* Mozilla */
	-o-transition: opacity 1s;      /* Opera */
	-ms-transition: opacity 1s;     /* Microsoft */
	
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/prev.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
span#nextCTRS {
	cursor: pointer;
	opacity: 0;
	filter:alpha(opacity=0);
	position: relative;
	left: 70%; /* 10px; */
	top: 140px;

	width: 1%;

	z-index: 200; /* para ser possivel clicar, senao o objeto fica atras */
	/* transition NAO É no hover !! */
	/* o parametro OPACITY quando alterado, levara 1 segundo para fazer a alteração */
	-webkit-transition: opacity 1s; /* Safari */
	transition: opacity 1s;         /* Padrão */
	-moz-transition: opacity 1s;    /* Mozilla */
	-o-transition: opacity 1s;      /* Opera */
	-ms-transition: opacity 1s;     /* Microsoft */
	
	
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/next.png") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}

/* Quando o usuário coloca o mouse em cima da foto, aí sim aparecem as setas E o pager! */
section#fotoCTRS:hover #prevCTRS {opacity:1;filter:alpha(opacity=100);}
section#fotoCTRS:hover #nextCTRS {opacity:1;filter:alpha(opacity=100);}
section#fotoCTRS:hover #pagerCTRS {opacity:1;filter:alpha(opacity=100);}


/* PAI = section#fotoCTRS */
/* Revisto OK em 25fev 20:30 */
section#classFotoCTRSbr1 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsPTau3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
section#classFotoCTRSbr2 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsPTbx3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
section#classFotoCTRSbr3 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsPTfe3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
section#classFotoCTRSbr4 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsPTcu3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSbr5 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsPTh2o3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSbr6 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsPTni3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSbr7 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsPTpoli3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSbr8 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsPTrs3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSbr9 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsPTenxofre3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSbr10 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsPTprata3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}






/* Revisto OK em 25fev 20:30 */
section#classFotoCTRSes1 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsESau3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
section#classFotoCTRSes2 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsESbx3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
section#classFotoCTRSes3 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsESfe3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
/* Revisto OK em 25fev 20:30 */
section#classFotoCTRSes4 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsEScu3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSes5 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsESh2o3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSes6 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsESni3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSes7 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsESpoli3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSes8 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsESrs3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSes9 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsESenxofre3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}
section#classFotoCTRSes10 {
	/* dica para NAO PERMITIR o salvamento de imagens...usar como BACKGROUND!! */
	background: url("../imagens/ctrsESprata3.jpg") no-repeat 0px 0px; /* desloc hor vert */

	/* Se alterar largura de tela, a imagem é apertada. Sem isso a imagem sai do limite */
	background-repeat: no-repeat;
	 background-size: 100% 100%;
}


















/* PAI = section#CTRS_EVENTO */
section#fotoEvento {
	display: block; /* para funcionar o FLOAT */
	float: right;
	margin: 2% 1% 1% 1% ; /*  1% do PAI */

	height: 100%;    /* 100% do PAI */
	width:  40%;     /* 40% do PAI */

	font-weight	: normal; /* normal, bold; */
	font-family	: Humanist777, sans-serif; /* SEM SERIFA */
	/* background-color: green; */ 
	/* border: 1px solid black; */
}
/* PAI = section#fotoEvento */
section#fotoEvento .quadroEvento {
	height: 100%;   /* 100% do PAI */
	width:  100%;   /* 100% do PAI */
}

/* PAI = section#fotoEvento */
section#fotoEvento .quadroEvento  header {
	height: 9%;   /* 9% do PAI */
	width:  100%;  /* 100% do PAI */
	padding: .5%;

	color: #5CC6D0;
	text-align		: center;
	font-size: 1.3em;
	/* border: 5px solid blue; */
}
/* PAI = section#fotoEvento */
section#fotoEvento .quadroEvento  section {
	height: 40%;   /* 40% do PAI */
	width:  100%;  /* 100% do PAI */
	/* border: 5px solid blue; */
}
/* PAI = section#fotoEvento */
section#fotoEvento .quadroEvento  footer {
	height: 51%;   /* 51% do PAI */
	width:  100%;  /* 100% do PAI */
	/* border: 5px solid blue; */
}
section#fotoEvento .quadroEvento  footer  a:link { 
	text-decoration: none;
}
section#fotoEvento .quadroEvento  footer  p { 
	text-indent: 0px;
	margin-top:3%;
	margin-bottom:3%;
	color: #5CC6D0;
	font-size: 1.2em;

	/* transition NAO É no hover !! */
	-webkit-transition: background-color 0.5s; /* Safari */    /* Mozilla */      /* Opera */     /* Microsoft */
	transition: background-color 0.5s;         /* Padrão */
}
section#fotoEvento .quadroEvento  footer  p:hover { 
	text-decoration: underline;
}

section#fotoEvento .quadroEvento  footer  span{
	text-indent: 0px; 
	font-size: 1em;
}
/* Sem ISSO, Pula uma linha vazia antes do cabeçalho dos quadros Eventos */
header#cabecalhoFotoEvento {
	height: 1px;
}
span#pagerEvento {
	position: relative;
	top: 120px;
	left: 30px;
	opacity: 0;
	filter:alpha(opacity=0);
	/* transition NAO É no hover !! */
	/* o parametro OPACITY quando alterado, levara 1 segundo para fazer a alteração */
	-webkit-transition: opacity 1s; /* Safari */
	transition: opacity 1s;         /* Padrão */
	-moz-transition: opacity 1s;    /* Mozilla */
	-o-transition: opacity 1s;      /* Opera */
	-ms-transition: opacity 1s;     /* Microsoft */
}
span#prevEvento {
	cursor: pointer;
	opacity: 0;
	filter:alpha(opacity=0);
	position: relative;
	left: 1%; /* 10px; */
	top: 110px;

	width: 1%;

	z-index: 200; /* para ser possivel clicar, senao o objeto fica atras */
	/* transition NAO É no hover !! */
	/* o parametro OPACITY quando alterado, levara 1 segundo para fazer a alteração */
	-webkit-transition: opacity 1s; /* Safari */
	transition: opacity 1s;         /* Padrão */
	-moz-transition: opacity 1s;    /* Mozilla */
	-o-transition: opacity 1s;      /* Opera */
	-ms-transition: opacity 1s;     /* Microsoft */
}
span#nextEvento {
	cursor: pointer;
	opacity: 0;
	filter:alpha(opacity=0);
	position: relative;
	left: 84%; /* 10px; */
	top: 110px;

	width: 1%;

	z-index: 200; /* para ser possivel clicar, senao o objeto fica atras */
	/* transition NAO É no hover !! */
	/* o parametro OPACITY quando alterado, levara 1 segundo para fazer a alteração */
	-webkit-transition: opacity 1s; /* Safari */
	transition: opacity 1s;         /* Padrão */
	-moz-transition: opacity 1s;    /* Mozilla */
	-o-transition: opacity 1s;      /* Opera */
	-ms-transition: opacity 1s;     /* Microsoft */
}

/* Quando o usuário coloca o mouse em cima da foto, aí sim aparecem as setas E o pager! */
section#fotoEvento:hover #prevEvento {opacity:1;filter:alpha(opacity=100);}
section#fotoEvento:hover #nextEvento {opacity:1;filter:alpha(opacity=100);}
section#fotoEvento:hover #pagerEvento {opacity:1;filter:alpha(opacity=100);}























footer#rodape {
	/* border: 1px solid black; */ 
	background-color: rgba(0,0,180,.3);
	width: 100%;
	clear: both;  /* Limpa esses blocos */
}
object#logoCTRS_2 {
	width: 100%;  /* OBRIGATORIO! */
	height: 40%; /* OBRIGATORIO! idem a aside! se tirar isso o SVG fica cortado! */
}
/* COR MENU TRABALHE */
.navFundoMenuC {
	background: #57A695;
}
/* COR MENU NOTICIAS */
.navFundoMenuD {
	background: white;
}
/* COR MENU A */
.navFundoMenuA {
	background	: #5CC6D0;
}
/* COR MENU B */
.navFundoMenuB {
	background: #97D7DE;
}
/* COR MENU E */
.navFundoMenuE {
	background: white;
}

/* http://www.adam-bray.com/blog/91/easy-html-5-css-3-navigation-menu/ */
nav {
	overflow: hidden;
	width: 100%; 
}

nav ul {
	margin: 1%;
	padding: 0px;
	text-align: center;
}

nav ul li {
	list-style-type: none;
	cursor: pointer;

	border: 1px solid white; 
	background: transparent;
	color: #222222;

	font-weight	: normal; /* normal, bold; */
	font-family	: Humanist777, sans-serif; /* SEM SERIFA */

	text-align		: center;
	text-decoration	: none;
	padding: 10px;

	-webkit-transition: all 0.5s;
	transition: all 0.5s; 
}
/* Hover States */
nav > ul > li:hover {
	text-decoration: none;
	background: black;
	color: white;
}

/* TEXTO DE CONTEUDO */
section#showConteudo {
	/* border: 4px solid green; */
	box-shadow: 0px 0px 10px rgba(0,0,0,.5); /* sombra */
	margin: 1% 1% 1% 1%;	
	display: none;
	width: 800px;
}

section#showConteudo h1#botoes{
	background-color: #DDDEDF;
}
.botaoLink {
	cursor: pointer;

	border: 1px solid white; 
	/* background: transparent; */
	color: #222222;

	font-weight	: normal; /* normal, bold; */
	font-family	: Humanist777, sans-serif; /* SEM SERIFA */

	text-align		: center;
	text-decoration	: none;
	padding: 10px;

	/* transition NAO É no hover !! */
	-webkit-transition: background-color 1s; /* Safari */    /* Mozilla */      /* Opera */     /* Microsoft */
	transition: background-color 1s;         /* Padrão */
}
.botaoLink:hover {
	text-decoration: none;
	background: black;
	color: white;
}
#titulo1 {
	font-family	: Humanist777, sans-serif; /* SEM SERIFA */
	text-align: justify;
	padding: 2% 2% 2% 2%;

	/* height: 600px; /* OBRIGATORIO junto com overflow * /
	overflow: auto;
	*/
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}
#titulo1 h1 {
	color: #4C93AC;
}
.nicelist { 
	margin-left:		1em; 
}
.nicelist li { 
	padding-left:		.5em; 
	list-style-type:	bullet; 
	margin-bottom:		1em;
}
.nicelist li a:link { 
	text-decoration: none;
	background: transparent;
	color: black;
	/* transition NAO É no hover !! */
	-webkit-transition: background-color 0.5s; /* Safari */    /* Mozilla */      /* Opera */     /* Microsoft */
	transition: background-color 0.5s;         /* Padrão */
}
.nicelist li a:hover { 
	padding: 5px;
	text-decoration: none;
	background: black;
	color: white;
}
.nicelist li a:visited { 
	text-decoration: none;
	background: transparent;
	color: black;
	/* transition NAO É no hover !! */
	-webkit-transition: background-color 0.5s; /* Safari */    /* Mozilla */      /* Opera */     /* Microsoft */
	transition: background-color 0.5s;         /* Padrão */
}
.nicelist li a:visited:hover { 
	padding: 5px;
	text-decoration: none;
	background: black;
	color: white;
}
p a {
	text-decoration: none;
	background: transparent;
	color: black;
	/* transition NAO É no hover !! */
	-webkit-transition: background-color 0.5s; /* Safari */    /* Mozilla */      /* Opera */     /* Microsoft */
	transition: background-color 0.5s;         /* Padrão */
}
p a:hover { 
	padding: 2px;
	text-decoration: none;
	background: black;
	color: white;
}
.noticias {
	margin: 0% 0% 0% 0%; 
	padding: 4% 75% 0% 0%;
	font-family	: Humanist777, sans-serif; /* SEM SERIFA */
	font-size: 1.4em;
	color: #4d857a;
}
.botaoLeiaMais {
	/* escreve texto quebrando por espaços */
	/* Dica de http://www.leomiranda.com/dicas-css/controlando-quebras-de-linhas-pelo-css.html */
	white-space: normal; 
	color: #4d857a;

	font-size: 1em;
	font-family	: Humanist777, sans-serif; /* SEM SERIFA */
	text-align: center;
	padding: 0% 0% 0% 0%;
}
/* Título da Noticia ou Evento */
.textoTitulo {
	border-top: 1px solid black;
	padding: 1% 0% 0% 0%;
	font-family	: Humanist777, sans-serif; /* SEM SERIFA */
	font-size: 1em;
	text-align: left;
	color: #4d857a;
}
.textoNoticias {
	padding: 0% 2% 0% 2%;
	font-family	: Humanist777, sans-serif; /* SEM SERIFA */
	font-size: .9em;
	text-align: justify;
	color: black;
}
.textoLeiaMais {
	color: #cc526e;
}