﻿@charset "utf-8";
/* CSS Document */

/*div{max-width: 1000px;}*/
img, picture, video, embed {max-width: 100%;}

b,strong,i, em{padding:0% 0% 0.5% 0%;} /*FAZER ISSO PARA TIRAR O DESNÍVEL NA FORMATAÇÃO */

a{padding:0% 0% 1% 0%;} /*FAZER ISSO PARA TIRAR O DESNÍVEL NA FORMATAÇÃO */

body{
	font-size: 62.5%; /*REGULAR TAMANHO DE FONTE PARA FICAR 1em = 10px*/
	max-width:100%;
	alignment-baseline:central;
	margin-top:12%;
	padding:0;
	background-color:rgba(0,51,82,1);
}

.topo_1600_fixo_02 {
	background:url(http://www.advancesincleanerproduction.net/10th/jpegs/top_menu_10th_02.png);
	/*max-width:1600px;*/
	background-size:100%;
	background-repeat:no-repeat;
	/*background-color:rgba(0,51,82,0.8);*/
	alignment-baseline:central;
	margin:0 auto;
	position:fixed;
	top: 0;
  	left: 0;
  	right: 0;
	padding-bottom:5%;
}


/* BOTÕES - INÍCIO */

.botao_azul {
	margin:0 auto;
	padding: 2.5%;
	max-width:60%;
	alignment-baseline:central;
	background: rgba(0,21,52,1);
	font-family:Arial, Helvetica, sans-serif;
	font-size: 230%; /* MULTIPLICA O em POR 100*/
	text-align:center;
	color: #FFF;
	float: center;
}


.botao_verde {
	margin:0 auto;
	padding: 2.5%;
	max-width:60%;
	alignment-baseline:central;
	background:#090;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 230%; /* MULTIPLICA O em POR 100*/
	text-align:center;
	color: #FFF;
	float: center;
}

/* BOTÕES - FINAL */


/* ESTRUTURA DO SITE */

#container_geral {
	max-width:1600px;
	height:auto;
	margin:0 auto;
	alignment-baseline:central;
	padding-top:1.5%;
	background-color:rgba(0,51,82,1);
	/*border:solid 2px #F03;*/
}

.container_fundo {
	width: auto;
	height:auto;
	margin:0 auto;
	alignment-baseline:central;
	padding: 1.5% 0% 1.5% 0%;
}

.container_fundo_azul {
	margin:0 auto;
	background-color:rgba(0,51,82,1);
	display:table;
	width:100%;
	padding:1% 0% 1% 0%;
}

.container_fundo_hist {
	margin:0 auto;
	background-color:rgba(0,51,82,1);
	display:table;
	width:100%;
	padding:1% 0% 1% 0%;
}

.container_fundo_azul_02 {
	margin:0 auto;
	background-color:rgba(0,51,82,1);
	display:table;
	width:100%;
	padding:0%;
}

.container_fundo_azul_00 {
	margin:0 auto;
	background-color:rgba(0,51,82,1);
	display:table;
	width:100%;
	padding:1% 0% 0% 0%;
}


.caixa_tabela_E {
	display:table-cell;
	vertical-align:top;
	width:50%;
	height:auto;
	/*background-color:#FFF;*/
	/*border:solid 2px #000000;*/
	padding:0% 0.5% 0% 0.5%;
	margin:0 auto;
}

.caixa_tabela_D {
	display:table-cell;
	vertical-align:top;
	width:50%;
	height:auto;
	/*background-color:#FFF;*/
	/*border:solid 2px #000000;*/
	padding:0% 0.5% 0% 0.5%;
	margin:0 auto;
}

.caixa_tabela_02 {
	width:800px;
	height:100%;
	margin:0 auto;
	padding: 4% 6% 5% 6%; /*top; right; bottom; left*/
	alignment-baseline:central;
	background-color:rgba(255,255,255,1);
	display:table-cell;
	/*border:solid 2px #000000;*/
}

.linha {
	width: auto;
	margin:0 auto;
	margin-top: 1%;
	margin-bottom: 1%;
	alignment-baseline:central;
	padding: 0%;
	/*margin-top:3%;*/
}

/* FIM ESTRUTURA*/

/*CAIXAS DE TEXTO*/
.caixa_branca {
	width:91%;
	height:auto;
	margin:0 auto;
	padding:2.5% 4% 2.5% 4%;
	alignment-baseline:central;
	background-color:rgba(255,255,255,1);
	/*overflow:hidden; /* FAZ A CAIXA BRANCA AJUSTAR-SE AO CONTEÚDO INTERNO */
}

.caixa_branca_opaca {
	width:88%;
	height:auto;
	margin:0 auto;
	padding: 0% 6% 0% 6%; /*top; right; bottom; left*/
	alignment-baseline:central;
	background-color:rgba(255,255,255,1);

}

.caixa_cinza {
	width:95%;
	height:auto;
	margin:0 auto;
	overflow:hidden; /*DIV ACOMPANHA O CONTEÚDO INTERNO*/
	padding: 1% 2% 1% 2%; /*top; right; bottom; left*/
	alignment-baseline:central;
	background-color:rgba(0,51,82,0.3);
}

.caixa_trans {
	max-width:95%;
	height:auto;
	margin:0 auto;
	/*padding: 4% 6% 5% 6%; /*top; right; bottom; left*/
	alignment-baseline:central;
}

/* FIM CAIXAS DE TEXTO*/




/*ESTRUTURA DO MENU - INÍCIO*/

/* NAV DO MENU */
.menu_ret {
	width: 22%;
	height: 0;
 	/*background-color: rgba(0,102,51,1); /*COR PADRÃO RGBA: VERDE DE FUNDO (red, green, blue, alpha)*/
	font-family:Arial, Helvetica, sans-serif;
	font-size: 200%;
	margin-left: -100%; /*AQUI REGULEI PRA ELE VIR DA ESQUERDA PRA DIREITA. AÍ TENHO QUE COMPENSAR NO CHECKED*/
	transition: all .4s;
}

/* NAV DAS LISTAS */
.menu_ret ul {
	list-style: none;
	position: relative; /* O position relative posiciona o elemento em relação a si mesmo. Ou seja, o ponto zero será o canto superior esquerdo, e ele começará a contar a partir dali.*/
	padding-top:22%; /* nesse caso, eu quero que o menu abra no final da figura do topo*/
}

.menu_ret ul li {
	width: 100%;
	float: none;
}


/* LINKS DO MENU */
.menu_ret a {
	padding: 6%; /* ALTURA DA LINHA DO MENU*/
	display: block;
	text-decoration: none;
	text-align: center;
	background-color: rgba(0,51,82,1); /*COR PADRÃO RGBA: AZUL DE FUNDO (red, green, blue, alpha)*/
	color: #fff;
}

.menu_ret ul ul {
	position: static;
	overflow: hidden;
	max-height: 0;
	transition: all .4s;
}

.menu_ret ul li:hover ul { 
	height: auto;
	max-height: 20%;
}

/* QUANDO PARAR CURSOR NO MENU */ 
.menu_ret a:hover {
	background-color: #f4f4f4;
	color: rgba(0,51,82,1); /*COR PADRÃO RGBA: AZUL DE FUNDO (red, green, blue, alpha)*/
}

.menu_ret ul ul li {
	float: none;
	border-bottom: solid 1px #ccc;
}

/* PARÂMETROS DO SUBMENU */
.menu_ret ul ul li a {
	background-color: #0C6;
}

label[for="bt_menu"]{
	padding: 0% 0% 0% 4%; /* (top, right, bottom, left) */
	margin-top:3.6%; /* COLOQUEI PRA AJUSTAR O MENU NO TOPO DA PÁGINA - AQUI, SE DESCONTA O PADDING QUE EU COLOCO NO MENU 1600 */
	/*background-color: rgba(0,102,51,1); /*COR PADRÃO RGBA: VERDE DE FUNDO (red, green, blue, alpha)*/
	color: rgba(0,51,82,1);
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 700%;
	cursor: pointer;
	width: 2%;
}

#bt_menu{
	display: none;
}

label[for="bt_menu"]{
	display: block;
}

#bt_menu:checked ~ .menu_ret{
	margin-left: 0; 
}

/*ESTRUTURA DO MENU - FINAL*/


/*FIGURAS E TABELAS*/

.figuras_mae { /*eu preciso de uma 'DIV MÃE' com display table pra poder por uma filha table-cell*/
	display: table;
  	margin: 0 auto;
}

.figuras_mae_cima { /*eu preciso de uma 'DIV MÃE' com display table pra poder por uma filha table-cell*/
	display: table;
  	margin: 0 auto;
	margin-top:-2%;
}

.figuras { /*filha table-cell*/
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	width:10%;
	height:auto;
	padding:3% 1% 0% 1%;
}


.figuras_02 {
	float:left;
	margin: 0 auto;
	padding: 1% 4% 1% 0%; /*top; right; bottom; left*/
	clear:both;
}


.figuras_padr { /*filha table-cell*/
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	width:10%;
	height:auto;
	padding:5% 10% 0% 1%;
}

.figuras_padl { /*filha table-cell*/
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	width:10%;
	height:auto;
	padding:5% 1% 0% 10%;
}

hr {
	border:solid 1px #000;
}

.linha_peq {
	border: 1px solid #000;
	width: 70%;
	margin:0 auto;
}

.tabela_prog_mae { /*eu preciso de uma 'DIV MÃE' com display table pra poder por uma filha table-cell*/
	display:table;
  	margin:0 -25% 0 0;
	border:solid 2px #000;
	width:75%;
	padding:0 12.5% 0 12.5%;
}

.tabela_prog_mae_fecha { /*eu preciso de uma 'DIV MÃE' com display table pra poder por uma filha table-cell*/
	display: table;
  	margin:0 -25% 0 0;
	border:solid 2px #000;
	border-top:0;
	width:75%;
	padding:0 12.5% 0 12.5%;
}

.tabela_prog_filha { /*filha table-cell*/
	display:table-cell;
	vertical-align:top;
	margin-left:-50%;
	width:50%;
	height:auto;
	border-right:solid 2px #000000;
	padding:1%;
}

.tabela_prog_filha_02 { /*filha table-cell*/
	display:table-cell;
	vertical-align:top;
	width:50%;
	height:auto;
	padding:1%;
}


/* FIM FIGURAS E TABELAS */


/* FONTES */
.texto_verde {
	font-family:Arial, Helvetica, sans-serif;
	line-height:130%;
	font-size: 380%;
	color: #090;
	font-weight: bold;	
	text-align:center;
	float: center;
	padding-bottom:3%;
}

.texto_azul {
	font-family:Arial, Helvetica, sans-serif;
	line-height:130%;
	font-size: 380%;
	color: rgba(0,51,82,1);
	font-weight: bold;	
	text-align:center;
	float: center;
	padding-bottom:3%;
}

.texto {
	font-family:Arial, Helvetica, sans-serif;
	line-height:180%;
	font-size:220%;
	text-align:justify;
	color:#000;
	float:center;
}

.texto_tab {
	font-family:Arial, Helvetica, sans-serif;
	line-height: 160%;
	font-size: 170%;
	margin-left:-35%;
	text-align: center;
	color: #000;
	float: center;
}

.texto_tab_02 {
	font-family:Arial, Helvetica, sans-serif;
	line-height: 160%;
	font-size: 170%;
	margin-right:-35%;
	text-align: center;
	color: #000;
	float: center;
}

.texto_tab_cen {
	font-family:Arial, Helvetica, sans-serif;
	line-height: 160%;
	font-size: 170%;
	margin:0 auto;
	text-align: center;
	color: #000;
	float: center;
}

.texto_cen {
	font-family:Arial, Helvetica, sans-serif;
	line-height: 180%;
	font-size: 210%;
	text-align:center;
	color: #000;
	float: center;
}

/*FIM FONTES*/


/*botão de fechar - INÍCIO*/
.close{
    width: 3.5%; /*largura*/
    height: 3.5%; /*altura*/
	padding-bottom:0.7%; /*para alinhar o que está dentro do botão*/
    /*position: relative; /*relativo para ficar por posicionado como está - acima e para fora da caixa de alerta*/
    /*right: -288px; /*posição em relação à  linha da caixa de alerta - horizontal*/
    /*top: -12px; /*posição em relação à  linha da caixa de alerta - vertical*/
    float: right; /*desacopla o botão do resto dos componentes*/
    border-radius: 30%; /*raio de circunferencia dos cantos - 50% faz cada lado ficar totalmente redondo, criando um botão circular*/
    border: 3px solid #090; /*borda do botão*/
    /*background-color: #F55555; /*cor de fundo do botão*/
    /*transition: all 0.2s ease; /*animação que ocorre quando alguma ação é realizada*/
    cursor: pointer; /*mostra o dedo de link mostrando que é clicável*/
	color:#090;
	text-align: center; /*alinhamento to texto no meio do botão (esq-dir)*/
	font-family:"Calibri Light";
	font-size: 240%; /*tamanho da fonte (X)*/
	line-height: 150%; /*tamanho da linha que contem o texto - 24 é o mesmo tamanho do botão para o X ficar alinhado no centro (cima-baixo)*/
}
/*botão de fechar - FIM*/

/*MUDANÇAS DE FONTES (OU IMAGENS) EM VARIADAS RESOLUÇÕES*/

/*PC WIDE 15"*/
@media only screen and (min-width: 1025px) and (max-width: 1360px) {

	body { 	
		margin-top:14%;
	}
	
	.botao_verde {
		font-size: 170%;
		padding: 4%;
	}
	
	.botao_azul{
		font-size:170%;
		padding: 4%;
	}
	
	.caixa_tabela_02{
		height:240px;
	}
	
	.caixa_branca{
		width: 91%;
		margin-top: -1;
		margin-bottom: -0.5%;
	}
	
	.caixa_branca_opaca{
		width: 83%;
		margin-top: -1.5%;
		margin-bottom: -1%;
	}
	
	.caixa_trans {
		max-width:96%;
	}
	
	.texto{		
		line-height: 180%;
		font-size: 220%;
	}
	
	.texto_tab{		
		line-height: 160%;
		font-size: 170%;
	}

	.texto_verde{
		line-height: 130%;
		font-size: 380%;
	}

	.texto_azul{
		line-height: 130%;
		font-size: 380%;
	}

	.texto_cen{		
		line-height: 170%;
		font-size: 190%;
	}
	
	.figuras_mae {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.figuras_mae_cima {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.menu_ret {
		width: 30%;
		font-size: 250%;
	}
	
	label[for="bt_menu"]{
		text-align: center;
		font-size: 400%;
	}
		

}

/*IPAD DEITADO*/
@media only screen and (min-width: 1001px) and (max-width: 1024px) {

	body { 	
		margin-top:14%;
	}
	
.botao_verde {
		font-size: 170%;
		padding: 4%;
	}
	
	.botao_azul{
		font-size:170%;
		padding: 4%;
	}
	
	.caixa_branca{
		width: 91%;
		margin-top: -1;
		margin-bottom: -0.5%;
	}
	
	.caixa_tabela_02{
		height:240px;
	}
	
	.caixa_branca_opaca{
		width: 85%;
		margin-top: -1.5%;
		margin-bottom: -1%;
	}
	
	.caixa_trans {
		max-width:96%;
	}

	.texto{		
		line-height: 170%;
		font-size: 190%;
	}
	
	.texto_tab{		
		line-height: 150%;
		font-size: 140%;
	}


	.texto_verde{
		line-height: 100%;
		font-size: 290%;
	}
	
	.texto_azul{
		line-height: 100%;
		font-size: 290%;
	}


	.texto_cen{		
		line-height: 170%;
		font-size: 190%;
	}
	
	.figuras_mae {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.figuras_mae_cima {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.menu_ret {
		width: 30%;
		font-size: 250%;
	}
	
	label[for="bt_menu"]{
		text-align: center;
		font-size: 350%;
	}
		

}


/* PC PADRÃO ANTIGO */
@media only screen and (min-width: 960px) and (max-width: 1000px) {

	body { 	
		margin-top:14%;
	}
	
	.botao_verde {
		font-size: 170%;
		padding: 4%;
	}
	
	.botao_azul{
		font-size:170%;
		padding: 4%;
	}
	
	.caixa_tabela_02{
		height:200px;
	}
	
	.caixa_branca{
		width: 91%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_branca_opaca{
		width: 85%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_trans {
		max-width:96%;
	}

	.texto{		
		line-height: 170%;
		font-size: 190%;
	}
	
	.texto_tab{		
		line-height: 150%;
		font-size: 140%;
	}
	
	.texto_tab_02{		
		line-height: 150%;
		font-size: 140%;
	}
	
	.texto_tab_cen{		
		line-height: 150%;
		font-size: 140%;
	}	

	.texto_verde{
		line-height: 100%;
		font-size: 290%;
	}
	
	.texto_azul{
		line-height: 100%;
		font-size: 290%;
	}

	.texto_cen{
		line-height: 170%;
		font-size: 190%;
	}
	
	.figuras_mae {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.figuras_mae_cima {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.menu_ret {
		width: 25%;
		font-size: 220%;
	}
	
	label[for="bt_menu"]{
		text-align: center;
		font-size: 300%;
	}
		

}


/*IPAD EM PÉ*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	body { 	
		margin-top:14%;
	}
	
	.botao_verde {
		font-size: 170%;
		padding: 4%;
	}
	
	.botao_azul{
		font-size:170%;
		padding: 4%;
	}
	
	.caixa_tabela_02{
		height:170px;
	}
	
	.caixa_branca{
		width: 91%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_branca_opaca{
		width: 85%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_trans {
		max-width:96%;
	}

	.texto{		
		line-height: 170%;
		font-size: 170%;
	}
	
	.texto_tab{		
		line-height: 150%;
		font-size: 120%;
	}
	
	.texto_tab_02{		
		line-height: 150%;
		font-size: 120%;
	}

	.texto_tab_cen{		
		line-height: 150%;
		font-size: 120%;
	}

	.texto_verde{
		line-height: 100%;
		font-size: 260%;
	}
	
	.texto_azul{
		line-height: 100%;
		font-size: 260%;
	}

	.texto_cen{
		line-height: 170%;
		font-size: 170%;
	}
	
	.figuras_mae {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.figuras_mae_cima {
		display: table;
		max-width: 100%;
		height: auto;
	}
	.menu_ret {
		width: 35%;
		font-size: 240%;
	}
	
	label[for="bt_menu"]{
		text-align: center;
		font-size: 300%;
	}
		

}



/*CELULAR DEITADO */
@media only screen and (min-width: 668px) and (max-width: 767px) {
	
	body { 	
		margin-top:14%;
	}
	
	.container_fundo_hist {
		padding:2% 0% 1% 0%;
	}
	
	.botao_verde {
		font-size: 170%;
		padding: 4%;
	}
	
	.botao_azul{
		font-size:170%;
		padding: 4%;
	}
	
	.caixa_tabela_02{
		height: 200px;
	}
	
	.caixa_branca{
		width: 91%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_branca_opaca{
		width: 85%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}

	.caixa_trans {
		max-width:96%;
	}

	.texto{		
		line-height: 170%;
		font-size: 180%;
	}
	
	.texto_tab{		
		line-height: 150%;
		font-size: 130%;
	}
	
	.texto_tab_02{		
		line-height: 150%;
		font-size: 130%;
	}
	
	.texto_tab_cen{		
		line-height: 150%;
		font-size: 130%;
	}
	

	.texto_verde{
		line-height: 100%;
		font-size: 240%;
	}
	
	.texto_azul{
		line-height: 100%;
		font-size: 240%;
	}

	.texto_cen{
		line-height: 170%;
		font-size: 180%;
	}
	
	.figuras_mae {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.figuras_mae_cima {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.menu_ret {
		width: 36%;
		font-size: 220%;
	}
	
	label[for="bt_menu"]{
		text-align: center;
		font-size: 400%;
	}
		

}

/*IPHONE 6, 7 E 8 DEITADO*/
@media only screen and (min-width: 641px) and (max-width: 667px) {
	
	body { 	
		margin-top:14%;
	}
	
	.container_fundo_hist {
		padding:2% 0% 1% 0%;
	}
	
	.botao_verde {
		font-size: 115%;
		padding: 4%;
	}
	
	.botao_azul{
		font-size:115%;
		padding: 4%;
	}
	
	.caixa_tabela_02{
		height:150px;
	}
	
	.caixa_branca{
		width: 91%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_branca_opaca{
		width: 85%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}

	.caixa_trans {
		max-width:96%;
	}

	.texto{		
		line-height: 170%;
		font-size: 150%;
	}
	
	.texto_tab{		
		line-height: 150%;
		font-size: 100%;
	}
	
	.texto_tab_02{		
		line-height: 150%;
		font-size: 100%;
	}
	
	.texto_tab_cen{		
		line-height: 150%;
		font-size: 100%;
	}

	.texto_verde{
		line-height: 100%;
		font-size: 220%;
	}
	
	.texto_azul{
		line-height: 100%;
		font-size: 220%;
	}

	.texto_cen{
		line-height: 170%;
		font-size: 150%;
	}
	
	.figuras_mae {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.figuras_mae_cima {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	
	.menu_ret {
		width: 36%;
		font-size: 220%;
	}
	
	label[for="bt_menu"]{
		padding:1.0% 4.5% 1.0% 1.5%; /* (top, right, bottom, left) */
		text-align: center;
		font-size: 400%;
	}
		

}


@media only screen and (min-width: 569px) and (max-width: 640px) {
	
	body { 	
		margin-top:14%;
	}
	
	.container_fundo_hist {
		padding:2% 0% 1% 0%;
	}
	
	.botao_verde {
		font-size: 115%;
		padding: 4%;
	}
	
	.botao_azul{
		font-size:115%;
		padding: 4%;
	}
	
	.caixa_tabela_02{
		height: 140px;
	}
	.caixa_branca{
		width: 91%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_branca_opaca{
		width: 85%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_trans {
		max-width:96%;
	}
	
	.texto{		
		line-height: 170%;
		font-size: 150%;
	}
	
	.texto_tab{		
		line-height: 150%;
		font-size: 100%;
	}
	
	.texto_tab_02{		
		line-height: 150%;
		font-size: 100%;
	}
	
	.texto_tab_cen{		
		line-height: 150%;
		font-size: 100%;
	}

	.texto_verde{
		line-height: 100%;
		font-size: 220%;
	}
	
	.texto_azul{
		line-height: 100%;
		font-size: 220%;
	}

	.texto_cen{
		line-height: 170%;
		font-size: 150%;
	}
	
	.figuras_mae {
		display: table;
		max-width: 100%;
		height: auto;
		
	}
	
	.figuras_mae_cima {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.menu_ret {
		width: 36%;
		font-size: 220%;
	}
	
	label[for="bt_menu"]{
		text-align: center;
		font-size: 400%;
	}
		

}

/*IPHONE 5S DEITADO*/
@media only screen and (min-width: 481px) and (max-width: 568px){
	
	body { 	
		margin-top:14%;
	}
	
	.container_fundo_hist {
		padding:2% 0% 1% 0%;
	}
	
	.botao_verde {
		font-size: 115%;
		padding: 4%;
	}
	
	.botao_azul{
		font-size:115%;
		padding: 4%;
	}
	
	.caixa_tabela_02{
		height: 200px;
	}
	
	.caixa_branca{
		width: 91%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_branca_opaca{
		width: 85%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_trans {
		max-width:93%;
	}
	
	.texto{		
		line-height: 170%;
		font-size: 110%;
	}
	
	.texto_tab{		
		line-height: 150%;
		font-size: 60%;
	}
	
	.texto_tab_02{		
		line-height: 150%;
		font-size: 60%;
	}
	
	.texto_tab_cen{		
		line-height: 150%;
		font-size: 60%;
	}	

	.texto_verde {
		line-height: 100%;
		font-size: 160%;
	}
	
	.texto_azul{
		line-height: 100%;
		font-size: 160%;
	}

	.texto_cen{
		line-height: 170%;
		font-size: 100%;
	}
	
	.figuras_mae {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.figuras_mae_cima {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.menu_ret {
		width: 50%;
		font-size: 220%;
	}
	
	label[for="bt_menu"]{
		text-align: center;
		font-size: 400%;
	}
		

}


/*CELULAR EM PÉ */
@media only screen and (min-width: 376px) and (max-width: 480px) {

	body { 	
		margin-top:14%;
	}
	
	.container_fundo_hist {
		padding:2% 0% 1% 0%;
	}
	
	.botao_verde {
		font-size: 115%;
		padding: 4%;
	}
	
	.botao_azul{
		font-size:115%;
		padding: 4%;
	}
	
	.caixa_tabela_02{
		height:110px;
	}
	
	.caixa_branca{
		width: 91%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_branca_opaca{
		width: 85%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}

	.caixa_trans {
		max-width:93%;
	}

	.texto{		
		line-height: 170%;
		font-size: 110%;
	}
	
	.texto_tab{		
		line-height: 150%;
		font-size: 100%;
	}
	
	.texto_tab_02{		
		line-height: 150%;
		font-size: 100%;
	}
	
	.texto_tab_cen{		
		line-height: 150%;
		font-size: 100%;
	}

	.texto_verde {
		line-height: 100%;
		font-size: 160%;
	}
	
	.texto_azul{
		line-height: 100%;
		font-size: 160%;
	}

	.texto_cen{
		line-height: 170%;
		font-size: 110%;
	}
	
	.figuras_mae {
		display: table;
		max-width: 100%;
		height: auto;
		/*margin-left:5%;*/
	}
	
	.figuras_mae_cima {
		display: table;
		max-width: 100%;
		height: auto;
		/*margin-left:5%;*/
	}	
	
	.menu_ret {
		width: 40%;
		font-size: 150%;
		margin-top:-5%;
	}
	
	label[for="bt_menu"]{
		text-align: center;
		font-size: 300%;		
	}	
	
	.enfeite_do_pavao {
	font-size: 110%

	}	

}


/* DAQUI PRA BAIXO EU NÃO CONSIGO VER NO NAVEGADOR*/

/*IPHONE 6, 7 E 8 EM PÉ */
@media only screen and (min-width: 321px) and (max-width: 375px) {

	body { 	
		margin-top:14%;
	}
	
	.container_fundo_hist {
		padding:2% 0% 1% 0%;
	}
	
	.botao_verde {
		font-size: 115%;
		padding: 4%;
	}
	
	.botao_azul{
		font-size:115%;
		padding: 4%;
	}
	
	.caixa_tabela_02{
		height:130px;
	}
	
	.caixa_branca{
		width: 91%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_branca_opaca{
		width: 85%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}

	.caixa_trans {
		max-width:93%;
	}

	.texto{		
		line-height: 170%;
		font-size: 110%;
	}
	
	.texto_tab{		
		line-height: 150%;
		font-size: 100%;
	}
	
	.texto_tab_02{		
		line-height: 150%;
		font-size: 100%;
	}
	
	.texto_tab_cen{		
		line-height: 150%;
		font-size: 100%;
	}

	.texto_verde {
		line-height: 100%;
		font-size: 160%;
	}
	
	.texto_azul{
		line-height: 100%;
		font-size: 160%;
	}

	.texto_cen{
		line-height: 170%;
		font-size: 110%;
	}
	
	.figuras_mae {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.figuras_mae_cima {
		display: table;
		max-width: 100%;
		height: auto;
	}
	
	.menu_ret {
		width: 40%;
		font-size: 150%;
		margin-top:-5%;
	}
	
	label[for="bt_menu"]{
		text-align: center;
		font-size: 300%;		
	}	
	
	.enfeite_do_pavao {
	font-size: 110%

	}	

}

/* IPHONE 5S EM PÉ */
@media only screen and (max-width : 320px) {

	body { 	
		margin-top:14%;
	}
	
	.container_fundo_hist {
		padding:2% 0% 2% 0%;
	}
	
	.botao_verde {
		font-size: 115%;
		padding: 4%;
	}
	
	.botao_azul{
		font-size:115%;
		padding: 4%;
	}
	
	.caixa_tabela_02{
		height:150px;
	}
	
	.caixa_branca{
		width: 91%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}
	
	.caixa_branca_opaca{
		width: 85%;
		margin-top: -1%;
		margin-bottom: -0.5%;
	}

	.caixa_trans {
		max-width:93%;
	}

	.texto{		
		line-height: 170%;
		font-size: 110%;
	}
	
	.caixa_tabela_02{
		height:100px;
	}
	
	.texto_tab{		
		line-height: 150%;
		font-size: 100%;
	}
	
	.texto_tab_02{		
		line-height: 150%;
		font-size: 100%;
	}
	
	.texto_tab_cen{		
		line-height: 150%;
		font-size: 100%;
	}

	.texto_verde {
		line-height: 100%;
		font-size: 160%;
	}
	
	.texto_azul{
		line-height: 100%;
		font-size: 160%;
	}

	.texto_cen{
		line-height: 170%;
		font-size: 110%;
	}
	
	.figuras_mae {
		display: table;
		max-width: 100%;
		height: auto;
		/*margin-left:5%;*/
	}
	
	.figuras_mae_cima {
		display: table;
		max-width: 100%;
		height: auto;
		/*margin-left:5%;*/
	}
	
	.menu_ret {
		width: 40%;
		font-size: 150%;
		margin-top:-5%;
	}
	
	label[for="bt_menu"]{
		text-align: center;
		font-size: 300%;		
	}	
	
	.enfeite_do_pavao {
	font-size: 110%

	}	

}