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

body {font-size:62,5%;}

/*container*/
#container {
	max-width:1000px;
	margin:0 auto;
	alignment-baseline:central;
	/*border:2px solid #000000;*/
}

#container_02 {
	padding-top:22%;
	margin:0 auto;
	/*border:2px solid #00F;*/
}

/*ESTRUTURA DO MENU*/

#menu {
	width:100%;
	padding:0.8% 0% 0.8% 0%; /*top; right; bottom; left*/
	background:rgba(220,232,226,1); /*COR PADRÃO RGBA: VERDE DE FUNDO (red, green, blue, alpha)*/
	position:fixed;
	/*margin-left:-32%;*/
	/*border:2px solid #000000;*/
}

#menu_02 {
	width:100%;
	padding:0.8% 0% 0.8% 0%; /*top; right; bottom; left*/
	background:rgba(0,102,51,1); /*COR PADRÃO RGBA: VERDE DE FUNDO (red, green, blue, alpha)*/
	position:fixed;
}

.logo {
	/*width:18%;*/
	padding:1.5% 1% 2.5% 1%; /*top; right; bottom; left*/
	/*border:2px solid #000000;*/
	/*display:table-cell;*/
}

.menu_coluna{
	width:8%;
	padding:0%; /*top; right; bottom; left*/
	display:table-cell;
	vertical-align:middle;
	/*border:2px solid #000000;*/
}

.menu_coluna .link01 {
	color:#fff;
	font-family:"Calibri Light";
	font-size:20px;
	font-weight:bold;
}

/* HOVER INDEPENDENTE PARA CADA DIV - CSS */
.menu_coluna:link .link01 {color:#fff; text-decoration:none;}
.menu_coluna:hover .link01 {color:#fff; text-decoration:underline;}
.menu_coluna:active .link01 {color:#fff; text-decoration:none;}
.menu_coluna:visited .link01 {color:#fff; text-decoration:none;}

/*CAIXAS DE TEXTO*/

.caixa_branca {
	width: 84%;
	max-width:1000px;
	height:auto;
	margin:0 auto;
	padding:5% 8% 6% 8%; /*top; right; bottom; left*/
	alignment-baseline:central;
	/*background-color:#CCC;*/
}

.caixa_verde {
	width: 84%;
	max-width:1000px;
	height:auto;
	margin:0 auto;
	padding:5% 8% 6% 8%; /*top; right; bottom; left*/
	alignment-baseline:central;
	background: rgba(182,221,199,0.3); /*COR PADRÃO RGBA: VERDE DE FUNDO*/
}

/* Botões e JPEG's */

.imagem {
	margin:0 auto;
	float:auto;
	padding-top:3%;
	padding-bottom:1%;
	/*border: 2px #360 solid;*/
}

figure {margin:0 auto;}


/* Fontes */

.texto {
	font-family:"Calibri Light";
	line-height: 1.5em;
	font-size: 1.5em;
	color: #000;
	float: center;
	width: auto;
	height: auto;
	margin: auto;
}

.texto_bio {
	font-family:"Calibri Light";
	line-height: 1.2em;
	font-size: 1.0em;
	color: #000;
	float: center;
	width: auto;
	height: auto;
	margin: auto;
}

.texto_verde {
	font-family:"Calibri Light";
	line-height:1.7em;
	font-size: 1.9em;
	color: #090;
	font-weight: bold;	
	float: center;
	width: auto;
	height: auto;
	margin: auto;
}

/*botão de fechar*/
.close{
    width: 35px; /*largura*/
    height: 35px; /*altura*/
    font-family:"Calibri Light";
	font-size: 22px; /*tamanho da fonte (X)*/
    line-height: 35px; /*tamanho da linha que contem o texto - 24 é o mesmo tamanho do botão para o X ficar alinhado no centro (cima-baixo)*/
    text-align: center; /*alinhamento to texto no meio do botão (esq-dir)*/
    /*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: 50%; /*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*/
    color: #000; /*cor do text*/
    /*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*/
}


/*MUDANÇAS DE FONTES (OU IMAGENS) EM VARIADAS RESOLUÇÕES*/

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
    .texto{
        font-size: 15px;
    }
	
	.texto_verde{
        font-size: 19px;
    }
	
	.texto_menu{
        font-size: 12px;
    }
	
	.texto_bio{
        font-size: 10px;
    }
		
	#container{
        max-width: 95%;
    }
	
	/*#container_02{
       	max-width: 95%;
    }*/
	
	#menu{
       	max-width: 95%;
    }
	
	#menu_02{
       	max-width: 95%;
    }
	
	.menu_coluna .link01{
		 font-size: 12px;
    }

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .texto{
        font-size: 15px;
    }
	
	.texto_verde{
        font-size: 18px;
    }
	
	.texto_menu{
        font-size: 11px;
    }
	
	.texto_bio{
        font-size: 10px;
    }
	#container{
       	max-width: 95%;
    }
	
	/*#container_02{
       	max-width: 95%;
    }*/
	
	#menu{
		max-width: 95%;
    }
	
	#menu_02{
       	max-width: 95%;
    }
	
	.menu_coluna .link01{
		 font-size: 12px;
    }
		
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    .texto{
        font-size: 15px;
    }

    .texto_verde{
        font-size: 18x;
    }
		
	.texto_menu{
        font-size: 11px;
    }
		
	.texto_bio{
        font-size: 10px;
    }
	
	#container{
        max-width: 95%;
    }
	
	/*#container_02{
       	max-width: 95%;
    }*/
	
	#menu{
		max-width: 95%;
    }
	
	#menu_02{
       	max-width: 95%;
    }
	
	.menu_coluna .link01{
		 font-size: 12px;
    }

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .texto{
        font-size: 13px;
    }
	
	.texto_verde{
        font-size: 16px;
    }
	
	.texto_menu{
        font-size: 9px;
    }
	
	.texto_bio{
        font-size: 10px;
    }

	#container{
        max-width: 95%;
    }
	
	/*#container_02{
       	max-width: 95%;
    }*/

	#menu{
		max-width: 95%;
    }
	
	#menu_02{
       	max-width: 95%;
    }
	
	.menu_coluna .link01{
		 font-size: 12px;
    }
	
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
   .texto{
        font-size: 13px;
    }
	
	.texto_verde{
        font-size: 16px;
    }
	
	.texto_menu{
        font-size: 9px;
    }
		
	.texto_bio{
        font-size: 10px;
    }

	#container{
        max-width: 95%;
    }	

	#menu{
		max-width: 95%;
    }
	
	#menu_02{
       	max-width: 95%;
    }
	
	.menu_coluna .link01{
		 font-size: 10px;
    }

}

/* FORMATO DE LINKS */

a:link, a:active {
	text-decoration:none;
	color:#090;
	}

a:hover {
	text-decoration: underline; 
	color:#090;
	}

a:visited {
	text-decoration: none;
	color:#090;
}