@charset "utf-8";

#paginas { float: left; width: 100%; margin: 30px 0;}

#titulo { float: left; width: 100%; margin: 0 0 20px;}
#titulo h1 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 2.5em; color: #7AD4E6;}
#titulo h2 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 2.5em; color: #7AD4E6;}
#titulo em { float: left; width: 100%; height: 40px; background-image: url(../imagens/titulo.png); background-repeat: no-repeat; background-position: 50%;}

#texto { float: left; width: 100%; margin: 10px 0 0;}
#texto h4 { float: left; width: 100%;  margin: 0 0 20px; text-align: center; font-size: 1em;}

#destaques { float: left; width: 90%; margin: 30px 5%;}
#destaques .lado1 { float: left; width: 65%;}
#destaques .lado2 { float: right; width: 33%;}
#destaques .lado2 .tab { float: right; width: 100%; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid #AAAAAA;}
#destaques .lado2 .tab .img { float: left; width: 40%; position: relative;}
#destaques .lado2 .tab .img em { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; opacity: 0; background-color: rgba(0,0,0,0.50); background-size: 30px; background-position: 50%; background-repeat: no-repeat;}
#destaques .lado2 .tab .img em.play { background-image: url(../imagens/play.png);}
#destaques .lado2 .tab .img em.link { background-image: url(../imagens/link.png);}
#destaques .lado2 .tab:hover .img em { opacity: 1;}
#destaques .lado2 .tab .img img { float: left; width: 100%;}
#destaques .lado2 .tab .texto { float: right; width: 58%;}
#destaques .lado2 .tab .texto h4 { float: left; width: 100%;}
#destaques .lado2 .linha2 { float: left; width: 100%; height: 1px; margin: 0 0 10px; background-color: #AAAAAA; display: none;}

#banners { float: left; width: 100%; position: relative; z-index: 1;}
#banners .slides, .slides > li, .flex-control-nav { float: left; margin: 0; padding: 0; list-style: none;}
#banners .slides > li { display: none; -webkit-backface-visibility: hidden;}
#banners .slides > li img { float: left; width: 100%;}
#banners .flex-direction-nav { display: none;}
#banners .flex-control-nav { position: absolute; width: 100%; bottom: 25px; right: 0; z-index: 5; text-align: center;}
#banners .flex-control-nav li { margin: 0 0 0 10px; display: inline-block;}
#banners .flex-control-paging li a { width: 15px; height: 15px; background-color: #7AD4E6; cursor: pointer; display: block; font-size: 0; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#banners .flex-control-paging li a:hover { background-color: #FFF212;}
#banners .flex-control-paging li a.flex-active { background-color: #FFF212;}

#anuncios { float: left; width: 100%; text-align: center;}
#anuncios img { max-width: 100%;}

#galeria_ajax { float: left; width: 100%;}
#galeria_loader { float: left; width: 100%; height: 200px; background-image: url("../imagens/loader.gif"); background-position: 50% -70px; background-repeat: no-repeat; display: none;}
#galeria_mais { float: left; width: 100%; height: 80px; cursor: pointer; background-image: url("../imagens/carregar.png"); background-position: 50%; background-repeat: no-repeat; text-align: center;}

#galeria { float: left; width: 91%; margin: 30px 4.5% 30px;}
#galeria .tab { float: left; width: 49%; margin: 0.5%; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);}
#galeria .tab img { float: left; width: 96%; margin: 2%;}

#projetos { float: left; width: 60%; padding: 60px 20%; position: relative; background: rgb(78,173,194); background: -moz-linear-gradient(90deg, rgba(78,173,194,1) 0%, rgba(48,187,214,1) 100%); background: -webkit-linear-gradient(90deg, rgba(78,173,194,1) 0%, rgba(48,187,214,1) 100%); background: linear-gradient(90deg, rgba(78,173,194,1) 0%, rgba(48,187,214,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4eadc2",endColorstr="#30bbd6",GradientType=1);}
#projetos h4 { float: left; width: 100%; position: relative; z-index: 2; text-align: center; line-height: 1.8; font-size: 1.5em;}
#projetos em { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background-image: url(../imagens/bg_projeto.png); background-repeat: no-repeat; background-position: 15px 15px;}

#quemsomos { float: left; width: 90%; padding: 10px 5%;}
#quemsomos .lado1 {float: left; width: 55%;}
#quemsomos .lado2 { float: right; width: 43%;}
#quemsomos .imagem { float: left; width:100%;}
#quemsomos .imagem img { float: left; width: 100%;}
#quemsomos .texto { float: left; width: 100%;}
#quemsomos .texto h3 { float: left; width: 100%; text-align: center; font-size: 1.3em; color: #000000;}

#nossotrabalho { float: left; width: 80%; margin: 0 10%;}
#nossotrabalho h2 { float: left; width: 80%; margin: 0 10%; text-align: center; font-size: 1.5em; line-height: 2; color: #928F60;}
#nossotrabalho h3 { float: left; width: 100%; margin: 15px 0; padding: 15px 0; border-top: 3px dotted #CCCCCC; border-bottom: 3px dotted #CCCCCC; text-align: center; font-size: 1.5em;}

#doacoes { float: left;width: 90%; padding: 0 5%;}
#doacoes .texto { float: left; width: 100%;}
#doacoes .texto h2 { float: left; width: 100%; border-bottom: 3px dotted #CCCCCC; text-align: center; font-size: 1.7em; color: #000000;}
#doacoes .texto h3 { float: left; width: 100%; padding: 30px 0 0; font-size: 1.3em; color: #000000;}
#doacoes .doar { float: left; width: 100%; padding: 10px 0;}

#envolva { float: left; width: 90%; padding: 10px 5%;}
#envolva .lado1 {float: left; width: 55%;}
#envolva .lado2 { float: right; width: 43%;}
#envolva .imagem { float: left; width:100%;}
#envolva .imagem img { float: left; width: 100%;}
#envolva .texto { float: left; width: 100%;}
#envolva .texto strong { color: #6AB8E4;}
#envolva .texto h2 { float: left; width: 100%; font-size: 1.2em; color: #000000;}
#envolva .texto h3 { float: left; width: 100%; font-size: 1em; color: #000000;}
#envolva .doar { float: left; width: 100%; padding: 10px 0;}

#blog { float: left; width: 92%; margin: 0 4%;}
#blog .tab { float: left; width: 23%; margin: 0 1% 20px;}
#blog .tab .img { float: left; width: 100%; position: relative;}
#blog .tab .img em { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background-color: rgba(0,0,0,0.20); background-size: 30px; background-position: 50%; background-repeat: no-repeat;}
#blog .tab .img em.play { background-image: url(../imagens/play.png);}
#blog .tab .img em.link { background-image: url(../imagens/link.png); opacity: 0;}
#blog .tab .img img { float: left; width: 100%;}
#blog .tab .texto { float: left; width: 100%; margin: 10px 0 0;}
#blog .tab .texto h4 { float: left; width: 100%;}
#blog .tab:hover .img em { background-color: rgba(0,0,0,0.50);}
#blog .tab:hover .img em.link { opacity: 1;}
#blog .tab:hover .texto h4 { text-decoration: underline;}
#blog .linha2 { float: left; width: 100%; height: 1px; margin: 0 0 10px; background-color: #AAAAAA; display: none;}
#blog .linha4 { float: left; width: 100%; height: 1px;}

#exibiblog { float: left; width: 60%; margin: 30px 20%;}
#exibiblog .video { float: left; width: 100%;}
#exibiblog .video .iframe { position: relative; width: 100%; padding-bottom: 55%; margin: 8px 0; overflow: hidden;}
#exibiblog .video .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#exibiblog .imagem { float: left; width: 100%; position: relative; overflow: hidden;}
#exibiblog .imagem img { float: left; width: 100%;}
#exibiblog .compartilhe { float: left; width: 100%; padding: 9px 0 5px; margin: 10px 0; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; color: #000000;}
#exibiblog .compartilhe strong { float:left; padding: 9px 5px 0 0; font-weight:normal; font-size:0.9em; color:#555555;}
#exibiblog .compartilhe img { float: left; margin-right: 3px; margin-bottom: 3px; opacity:0.7;}
#exibiblog .compartilhe img:hover { opacity: 1; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; -moz-transform: scale(1.2) rotate(-720deg); -webkit-transform: scale(1.2) rotate(-720deg); -o-transform: scale(1.2) rotate(-720deg); -ms-transform: scale(1.2) rotate(-720deg); transform: scale(1.2) rotate(-720deg);}
#exibiblog .compartilhe a.zap2 { display: none;}
#exibiblog .titulo { float: left; width: 100%; margin: 20px 0 0;}
#exibiblog .titulo h1 { float: left; width: 100%; font-weight: bold; font-size: 2.5em; line-height: 1.2; color: #000000;}
#exibiblog .descricao { float: left; width: 100%; font-size: 1em; line-height: 1.8; color: #333333;}
#exibiblog .descricao iframe { max-width: 100%;}
#exibiblog .descricao img { max-width: 100%;}
#exibiblog .descricao strong { text-transform: uppercase;}
#exibiblog .descricao li { float: left; width: 100%; margin: 5px 0 0;}
#exibiblog .descricao a:hover { color: #FF0000;}
#exibiblog .galeria { float: left; width: 100%;}
#exibiblog .galeria .img { float: left; width: 50%; background-color: #FFFFFF; position: relative; overflow: hidden; -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);}
#exibiblog .galeria .img img { float: left; width: 94%; margin: 3%;}
#exibiblog .galeria .linha2 { float: left; width: 100%; height: 1px;}

#contato { float: left; width: 100%; margin: 30px 0 10px;}
#contato .form { float: left; width: 30%; margin: 10px 35%;}
#contato .form .campo { float: left; width: 92%; height: 70px; border: 1px solid #AAAAAA; margin: 0 0 10px; padding: 0 4%; text-transform: uppercase; -webkit-border-radius: 2px; -webkit-border-top-left-radius: 20px; -moz-border-radius: 2px; -moz-border-radius-topleft: 20px; border-radius: 2px; border-top-left-radius: 20px;}
#contato .form .textarea { float: left; width: 92%; height: 110px; border: 1px solid #AAAAAA; margin: 0 0 10px; padding: 25px 4%; text-transform: uppercase; -webkit-border-radius: 2px; -webkit-border-top-left-radius: 20px; -moz-border-radius: 2px; -moz-border-radius-topleft: 20px; border-radius: 2px; border-top-left-radius: 20px;}
#contato .form .botao { float: right; width: 30%; height: 70px; border: 1px solid #EEEEEE; margin: 0 0 10px; padding: 25px 4%; background-color: #7AD4E6;  text-transform: uppercase; font-weight: bold; font-size: 1.2em; cursor: pointer; -webkit-border-radius: 2px; -webkit-border-top-left-radius: 20px; -moz-border-radius: 2px; -moz-border-radius-topleft: 20px; border-radius: 2px; border-top-left-radius: 20px;}
#contato .form .botao:hover { background-color: #0192B8; color: #FFFFFF;}
#contato .aviso { float: left; width: 100%; position: relative; display: none; padding: 12px 0 10px; background-color: #EEEEEE; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD;}
#contato .aviso .msg { float: left; width: 100%;}
#contato .aviso .msg h4 { float: left; width: 100%; text-align: center;}
#contato .aviso .fechar { position: absolute; top: 16px; right: 5%; font-weight: bold; font-size: 1em; line-height: 1; color: #909090; cursor: pointer;}
#contato .aviso .fechar:hover { color: #D93A3D;}

@media only screen and (max-width: 1100px){
     #destaques .lado1 { width: 100%;}
     #destaques .lado2 { float: left; width: 100%; margin: 20px 0 0;}
     #destaques .lado2 .tab { width: 50%; margin: 0; border-bottom: 0;}
     #destaques .lado2 .tab .texto { float: left; width: 50%; margin: 0 4%;}
     #destaques .lado2 .linha2 { display: block;}
}
@media only screen and (max-width: 1000px){
	#destaques { margin: 25px 5% 15px;}
	#anuncios { width: 90%; margin: 0 5%;}
	#galeria { margin: 20px 4.5%;}

     #blog .tab { width: 50%; padding: 0 0 12px; margin: 0;}
     #blog .tab .img { width: 40%;}
     #blog .tab .texto { width: 50%; margin: 0 4%;}
     #blog .linha2 { display: block;}
     #blog .linha4 { display: none;}

	#contato .form { width: 80%; margin: 20px 10%;}
}
@media only screen and (max-width: 900px){
	#paginas { margin: 30px 0 15px;}
	#quemsomos .lado1 { width: 100%;}
	#quemsomos .lado2 { float: left; width: 100%; margin: 20px 0 0;}

	#exibiblog { width: 90%; margin: 30px 5%;}
}
@media only screen and (max-width: 700px){
     #destaques .lado2 .tab { width: 100%; margin: 0 0 12px; border-bottom: 1px solid #AAAAAA;}
     #destaques .lado2 .linha2 { display: none;}

     #blog .tab { width: 100%; margin: 0 0 12px; border-bottom: 1px solid #AAAAAA;}
     #blog .linha2 { display: none;}
}
@media only screen and (max-width: 600px){
	#titulo h1 { font-size: 1.8em;}
	#titulo h2 { font-size: 1.8em;}

     #galeria .tab { width: 100%; margin: 0 0 8px;}

	#projetos { width: 90%; padding: 40px 5%;}

	#exibiblog { margin: 20px 5%;}
	#exibiblog .titulo h1 { font-size: 2em;}

	#contato { margin: 30px 0 0;}
	#contato .form { width: 90%; margin: 0 5% 20px;}
}
@media only screen and (max-width: 550px){
	#destaques { margin: 25px 5% 5px;}

	#projetos h4 { font-size: 1.2em;}
}