/* este é um comentário para lembrar como se escrevem comentários em CSS*/

body{

font-family:georgia,garamond,serif; 

color: white; /*cor geral do texto que não for especificado*/

background-color: #121311; /*cor geral do fundo que não for especificado*/

width: 820px;

/*background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;fundo que vinha com o site original*/

}



/*para garantir que nenhuma div tenha bordas sem querer*/

div{
        
	border:0px;

	padding:0px;
        
	border-image: 0px;
        

}



/*div que tem informações para o google - importante*/

#endereco{

	background-color:transparent;

	color: transparent;

	z-index: 1;

	top: 0px;

	left: 300px;

	height: 100px;

	overflow:hidden;

}

/*div com o botão curtir*/

#logo{

float: left;

position:fixed;

z-index:1;

top: 80%;

margin-top:-220px;



}

#fundologo{

float: left;

position:fixed;

z-index:1;

top: 66%;

margin-top:-221px;



}



#relativa{

position: relative;

top: 0px;

margin-top: -5px;

float: left;

left: 10px;

margin-left: 40px;

}



/*div improtante que comanda todo o fundo da página*/

#fundo{

	background-image: url(images/fundo2.jpg);

	background-attachment: fixed;

	

	background-position: center;

	left: 50%;

	/*margin-left: -480px;*/

	top: 0;

	z-index: 1;

	width: 960px;

	height: 1000px;

	/*position: absolute;*/

}



/*div que fica dentro da div fundo*/

#principal{
	background-color: #D6D6D6;
	z-index: 3;
	left: 50%;
	margin-left: -480px;
	position: absolute;
	top: 0px;
	visibility: visible;
	background-image: url(nova%20versao%202015/fundo.jpg);
        



	

}



/*garatir que imagens não tenham borda e se forem maiores que a div seham cortadas*/

img{

	border:0px;

	padding:0px;

	margin:0px;

	overflow:hidden;

	}

	





/*divs que controlam o cabeçalho*/

/*logo da escola*/

#div00{

	position:absolute;

	top:250px;

	left: 50%;

	margin-left: -398px;

	z-index:0;

	}

#div01{

	position:absolute;

	top:0px;

	left:0px;

	z-index:4;
        width: 960px;

	}

#div02{

	position:absolute;

	top:0px;

	left:493px;

	z-index:4;

	}

#div03{
	background: transparent;

	position:absolute;

	top:0px; /*caso retorne a versão do site 2014, este valor deve voltar a ser 40px */

	left: 50%;

	margin-left: 13px;

	z-index:4;

	visibility: visible;



	}

	#folinha{
		background: transparent;

	position:absolute;

	top:30px; /*caso retorne a versão do site 2014, este valor deve voltar a ser 40px */

	left: 64%;

	margin-left: 50px;

	z-index:4;

	visibility: visible;
	
	
	}

#div04{

	position:absolute;

	top:80px;

	left:493px;

	z-index:4;

	}

#div05{

	position:absolute;

	top:80px;

	left:597px;

	z-index:4;

	}

#div06{

	position:absolute;

	background-color:transparent;

	top:123px;

	left:597px;

	z-index:4;

	}

#div07{

	position:absolute;

	background-color:transparent;

	top:123px;

	left:703px;

	z-index:4;

	}

#div08{

	position:absolute;

	background-color:transparent;

	top:123px;

	left:803px;

	z-index:4;

	}

#div09{

	position:absolute;

	background-color:transparent;

	top:161px;

	left:0px;

	z-index:4;

	}

#div10{

	position:absolute;

	background-color:transparent;

	top:180px;

	left:580px;

	z-index:4;

	}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/	

/*Parte inteligente do site, ela tenta ajustar a posição do conteúdo - em fase de teste*/

/*todas as outras divs do conteudo estão aqui dentro*/
#celebracao
{
    text-align: center;
}
#conteudo{

	position:absolute;

	background-color: #CCC;

	padding: 20px;

	padding-left: 60px;

	padding-right: 10px;

	color: black;

	top:520px;

	left:50%;

	margin-left: -480px;

	width: 890px;

	z-index:6;

	border-color:black;

	border-width:1px;

	box-shadow: 0px 2px 1px rgba(0,0,0,0.3);

	visibility: visible;



	

	}



/*div com a cor branca que fica dentro*/


#conteudoxxx{

	position:absolute;

	background-color: #CCC;

	padding: 20px;

	padding-left: 60px;

	padding-right: 10px;

	color: black;

	top:10px;

	left:50%;

	margin-left: -480px;

	width: 890px;

	z-index:6;

	border-color:black;

	border-width:1px;

	box-shadow: 0px 2px 1px rgba(0,0,0,0.3);

	visibility: visible;



	

	}




#maisconteudo_especial{/*ocupa todo o espaço disponivel*/

	float: left;

	margin-top: 0px;

	margin-bottom: 20px;

	margin-left: -60px;

	width: 960px;

	box-shadow: 0px 2px 1px rgba(0,0,0,0.3);

}

#maisconteudo_livre{/*para objetos soltos em ordem*/

	float: left;

	margin-top: 0px;

	margin-bottom: 20px;

	margin-left: -60px;

	width: 960px;

	background-color: transparent;

}
#linha_divisoria{/*para objetos soltos em ordem*/

	margin-top: 0px;

	margin-bottom: 20px;
	margin-left: -40px;

	width: 960px;

	background-color: transparent;

}



#maisconteudo{/*é longa horizontalmente mas não chega as bordas*/

	float: left;

	margin-top: 0px;

	margin-bottom: 20px;

	margin-right: 20px;

	width: 840px;

	box-shadow: 0px 2px 1px rgba(0,0,0,0.3);

	

}

/*para duas colunas*/

#maisconteudo_duas{

	margin-top: 0px;

	float:left;

	margin-bottom: 20px;

	width: 414px;

	box-shadow: 0px 2px 1px rgba(0,0,0,0.3);

	margin-right: 12px;

}



/*para três colunas*/



#maisconteudo_tres{

	margin-top: 0px;

	float:left;

	margin-bottom: 20px;

	margin-right: 15px;

	width: 270px;

	box-shadow: 0px 2px 1px rgba(0,0,0,0.3);

	

}



/*para quatro colunas*/

#maisconteudo_quatro{

	margin-top: 0px;

	float:left;

	margin-bottom: 20px;

	margin-right: 17px;

	width: 200px;

	box-shadow: 0px 2px 1px rgba(0,0,0,0.3);

	

}





/*definições de textos adicionais*/

/*cinza escuro titulo*/

#titulo{

	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 

	font-size:18px; 

	margin-left: 10px;

	padding: 20px;

	padding-bottom: 0px;

	

	}

/*cinza claro*/

#texto_geral{

	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

	font-size:14px;

	padding: 20px;

	padding-top: 0px;

	}



#titulo_maior{

	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 

	font-size:24px; 

	margin-left: 10px;

	padding: 20px;

	padding-bottom: 0px;

	text-transform: uppercase;

	

	}



/*criar uma linha interna de decoração

outline:2px solid red;

outline-offset:-15px;

*/



/*define todas as classe que podem ser usadas em divs para colorir o fundo*/

.descuro{

background-color: #3d4352;

}

.dbranco{

background-color: #FFF;

}

.dlaranja{/*usar texto branco*/

background-color: #f78d80;

}

.dazul{/*usar texto branco*/

background-color: #2babdc;

}

.dazul_celeste{/*usar texto branco*/

background-color: #40c1e3;

}

.dazul_celestex{/*usar texto branco*/

background-color: #40c1e3;
font-family: Tahoma, Geneva, sans-serif;
font-size: 36px;


}

.alfa1{/*usar texto branco*/
background-color: #40c1e3;
font-family: Tahoma, Geneva, sans-serif;
font-size: 36px;
padding-left: 50px;
}
.alfa2{/*usar texto branco*/
background-color: #0F9;
font-family: Tahoma, Geneva, sans-serif;
font-size: 36px;
padding-left: 50px;
}
.alfa3{/*usar texto branco*/
background-color: #F66;
font-family: Tahoma, Geneva, sans-serif;
font-size: 36px;
padding-left: 50px;
}
.alfa4{/*usar texto branco*/
background-color: #66C;
font-family: Tahoma, Geneva, sans-serif;
font-size: 36px;
padding-left: 50px;
}
.alfa5{/*usar texto branco*/
background-color: #9C6;
font-family: Tahoma, Geneva, sans-serif;
font-size: 36px;
padding-left: 50px;
}
.alfa6{/*usar texto branco*/
background-color: #FC3;
font-family: Tahoma, Geneva, sans-serif;
font-size: 36px;
padding-left: 80px;
}

.alfaprincipal{/*usar texto branco*/
background-color: #69F;
font-family: Tahoma, Geneva, sans-serif;
font-size: 50px;
padding-left: 50px;
}


.dvermelho{/*usar texto branco*/

background-color: #f44a4a;

}

.dverde{/*usar texto branco*/

background-color: #79b644;

}





/*define as cores para parágrafos - classes*/

p.pcinza_azulado{

color: #9ca2b4;

}

p.amarelo{

color: #FF0;
text-shadow:#000 2px 1px 1px;

}

p.pbranco{

color: white;

}

p.pcinza_medio{

color: #666;

}

p.pcinza_escuro{

color: #333;

}

p.pvoltar{

	text-align:right;

	padding-right: 15px;

}





/*classe para dimensionar imagens automáticamente*/

/*3 colunas*/

.rmaisconteudo_tres{

width: 270px; 

height: auto;

}

/*para a div maisconteudo_especial*/

.rmaisconteudo_especial{

width: 960px; 

height: auto;

}

/*para div maisconteudo*/

.rmaisconteudo{

width: 840px; 

height: auto;

}

/*2 colunas*/

.rmaisconteudo_duas{

width: 414px; 

height: auto;

}



.rmaisconteudo_quatro{

width: 200px; 

height: auto;

}

}



/*centralizar horizontalmente*/

.rcentral{

margin-left: 25%;

margin-right: 25%;

margin-top: 10%;

}

	/*Botoes*/

.rbotoes{

float: left;

margin-top: -20px;

}

.rmaispara_cima{

margin-top: -20px;

}



/*classes para links*/

/*sem detalhes*/

.abranco{

	border:0px;

	padding:0px;

	margin:0px;

	overflow:hidden;

	color: #FFF;

	}

.aescuro{

	border:0px;

	padding:0px;

	margin:0px;

	overflow:hidden;

	color: #3b213a;

}



a:link.linkclaro{

	color: #fff;

}

a:link.linkescuro{

	color: #036;

}



a:visited.linkclaro{

	color: #F30;

}

a:visited.linkescuro{

	color: #900;

}



a:hover.linkclaro{

	color: #CF0;

	text-shadow:1px 1px 1px #333;

	

}

a:hover.linkescuro{

	color: #0C0;

	text-shadow:1px 1px 1px #333;

	

}



a:active.linkclaro{

	color: #FF0;

	

}

a:active.linkescuro{

	color: #3FF;

	

}

/*div dados com endereço do instituto*/

#dados{

position: absolute;

top: 161px;

z-index: 7;

}

/*div final*/

table{

margin-left: 20px;

font-family:Tahoma, Geneva, sans-serif;

color: #fff;

}

th{

	padding: 4px;

}

#propaganda{

float: left;

position: absolute;

top: 450px;

left: 100px;

box-shadow:#000;

z-index:9;

}



#infopos p{

 text-align: justify;

 font-family: arial, verdana, sans-serif;

 font-size: 16px;

 color: #000000;

 font-weight: bold;

}



h1, h2, h3 {

 font-family: arial, verdana, sans-serif;

 text-align: center;

}
/*a partir daqui o estilo que controla os pins*/

/*%%%%%%%%%%%%%%%%%%%%%%%%%%pin com 3 colunas%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
#wrapper {
	width: 90%;
	max-width: 1100px;
	min-width: 800px;
	margin: 50px auto;
}

#columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-fill: auto;
	column-count: 3;
	column-gap: 15px;
	column-fill: auto;
}

.pin {
	display: inline-block;
	background: #FEFEFE;
	border: 2px solid #FAFAFA;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	padding: 15px;
	padding-bottom: 5px;
	background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
	opacity: 1;
	
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

.pin img {
	width: 100%;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}
/*
.pin p {
	font: 12px/18px Arial, sans-serif;
	color: #333;
	margin: 0;
}*/

@media (min-width: 960px) {
	#columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}

@media (min-width: 1100px) {
	#columns {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}
/*
#columns:hover .pin:not(:hover) {
	opacity: 0.4;
}
*/
#columns:hover .pin:hover {
	box-shadow: 6px 6px 5px #888888;
}
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/*%%%%%%%%%%%%%%%%%%%%%%%%%%pin com 2 colunas%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
#columns2 {
	-webkit-column-count: 2;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 2;
	-moz-column-gap: 10px;
	-moz-column-fill: auto;
	column-count: 2;
	column-gap: 15px;
	column-fill: auto;
}

.pin2 {
	display: inline-block;
	background: #FEFEFE;
	border: 2px solid #FAFAFA;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	padding: 15px;
	padding-bottom: 5px;
	background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
	opacity: 1;
	
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

.pin2 img {
	width: 100%;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

.pin2 p {
	font: 12px/18px Arial, sans-serif;
	color: #333;
	margin: 0;
}

@media (min-width: 960px) {
	#columns2 {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}

@media (min-width: 1100px) {
	#columns2 {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}
/*
#columns:hover .pin:not(:hover) {
	opacity: 0.4;
}
*/
#columns2:hover .pin2:hover {
	box-shadow: 6px 6px 5px #888888;
}
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

/*%%%%%%%%%%%%%%%%%%%%%%%%%%pin com 1 colunas%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
#columns1 {
	-webkit-column-count: 1;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 1;
	-moz-column-gap: 10px;
	-moz-column-fill: auto;
	column-count: 1;
	column-gap: 15px;
	column-fill: auto;
}

.pin1 {
	display: inline-block;
	background: #FEFEFE;
	border: 2px solid #FAFAFA;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	padding: 15px;
	padding-bottom: 5px;
	background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
	opacity: 1;
	
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

.pin1 img {
	width: 100%;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

.pin1 p {
	font: 12px/18px Arial, sans-serif;
	color: #333;
	margin: 0;
}

@media (min-width: 960px) {
	#columns1 {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
}

@media (min-width: 1100px) {
	#columns1 {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
}
/*
#columns:hover .pin:not(:hover) {
	opacity: 0.4;
}
*/
#columns1:hover .pin1:hover {
	box-shadow: 6px 6px 5px #888888;
}
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/