@charset "utf-8";

#paginas { float: left; width: 100%; min-height: 500px; padding: 40px 0 20px;}

#titulo { float: left; width: 90%; padding: 0 5% 10px; margin: 0 0 10px; position: relative;}
#titulo h1 { float: left; max-width: 80%; margin: 0 0 0 40px; font-weight: bold; font-size: 3em; line-height: 1; color: #000000;}
#titulo h2 { float: left; max-width: 80%; margin: 0 0 0 40px; font-weight: bold; font-size: 3em; line-height: 1; color: #000000;}
#titulo b { color: #0095D6;}
#titulo em { position: absolute; width: 30px; height: 30px; top: 7px; left: 5%; background-image: url(../imagens/icoTitulo.png); background-repeat: no-repeat; background-position: 50%;}
#titulo.c { border-bottom: 2px solid #E8E8E8;}
#titulo.c h1 { width: 100%; max-width: 100%; margin: 0; text-align: center;}

#subtitulo { float: left; width: 100%; margin: 0 0 20px;}
#subtitulo h1 { float: left; width: 100%; padding: 10px 0 5px; background-color: #000000; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 2.5em; color: #FFFFFF;}
#subtitulo h2 { float: left; width: 90%; padding: 8px 5% 5px; background-color: #2253AB; font-weight: bold; text-align: center; font-size: 1.3em; line-height: 1.2; color: #025477;}

#texto { float: left; width: 100%;}
#texto .simples { float: left; width: 100%;}
#texto .simples h3 { float: left; width: 90%; margin: 0 5%; font-style: italic; font-size: 1.3em; color: #444444;}
#texto .simples h3 b { float: left; margin: 0 0 0 38px; font-weight: normal;}
#texto .simples h4 { float: left; width: 70%; padding: 30px 0; margin: 30px 15%; border-top: 5px dotted #CCCCCC; border-bottom: 5px dotted #CCCCCC; font-weight: bold; text-align: center; font-size: 2em; line-height: 1.2;}

#texto .destaque { float: left; width: 100%;}
#texto .destaque h2 { float: left; width: 90%; padding: 8px 5% 5px; margin: 10px 0 0; background-color: #EEE; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2em; color: #3F5767;}
#texto .destaque h3 { float: left; width: 88%; padding: 18px 1% 15px; margin: 20px 5% 0; border: 1px solid #CCCCCC; text-transform: uppercase; font-weight: bold; line-height: 1; font-size: 1.3em; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
#texto .destaque h4 { float: left; width: 88%; margin: 20px 6% 0; font-size: 1.2em; color: #555555;}

#texto .contato { float: left; width: 100%;}
#texto .contato h5 { float: left; width: 100%; text-align: center; font-size: 1.1em;}
#texto .contato h5 strong { font-size: 1.2em;}
#texto .contato h5 a { color: #0095D6;}
#texto .contato h5 a:hover { text-decoration: underline;}

#texto .botoes { float: left; width: 100%; padding: 30px 0; text-align: center;}
#texto .botoes a { padding: 10px 40px 8px; background-color: #2253AB; font-weight: bold; font-size: 1.5em; color: #FFFFFF; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#texto .botoes a:hover { background-color: #000000; color: #2253AB;}

#texto .sociais { float: left; width: 100%; padding: 20px 0 30px; text-align: center;}
#texto .sociais a { padding: 15px 25px; margin: 0 2px; background-position: 50%; background-repeat: no-repeat; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#texto .sociais a.whatsapp { background-image: url('../imagens/whatsapp.png');}
#texto .sociais a.instagram { background-image: url('../imagens/instagram.png');}
#texto .sociais a.facebook { background-image: url('../imagens/facebook.png');}
#texto .sociais a:hover { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

#margem { float: left; width: 100%; height: 137px; background-color: #2253AB;}

#destaques { float: left; width: 92%; padding: 26px 4% 0; position: relative; z-index: 100;}
#destaques .tab { float: left; width: 23%; margin: 0 1%;}
#destaques .tab .icone { float: left; width: 75px; height: 60px; margin: 0 5px 19px 0; border: 1px solid #CCCCCC; background-repeat: no-repeat; background-position: 50%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#destaques .tab .icone.ico1 { background-image: url(../imagens/instalacao.png);}
#destaques .tab .icone.ico2 { background-image: url(../imagens/limpeza.png);}
#destaques .tab .icone.ico3 { background-image: url(../imagens/manutencao.png);}
#destaques .tab .icone.ico4 { background-image: url(../imagens/pmoc.png);}
#destaques .tab .descricao b { font-weight: bold; font-size: 1.3em;}
#destaques .tab .descricao em { font-size: 0.9em; color: #555555;}
#destaques .tab:hover .descricao b { color: #0095D6;}
#destaques .tab.ativo .descricao b { color: #0095D6;}

#banners { float: left; width: 100%; position: relative; overflow: hidden;}
#banners .fundo { float: left; width: 100%;}
#banners .fundo.m { display: none;}
#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%; right: 0; bottom: 10px; text-align: center; z-index: 10;}
#banners .flex-control-nav li { margin: 0 3px; display: inline-block;}
#banners .flex-control-paging li a { width: 30px; padding: 5px 0 3px; background-color: #FFFFFF; cursor: pointer; text-align: center; font-weight: bold; font-size: 0.9em; display: block;}
#banners .flex-control-paging li a:hover { background-color:#2253AB; color: #FFFFFF;}
#banners .flex-control-paging li a.flex-active { background-color:#2253AB; color: #FFFFFF;}

#pmoc { float: left; width: 100%; padding: 40px 0;}
#pmoc .detalhes { float: left; width: 90%; margin: 0 5%;}
#pmoc .detalhes h5 { float: left; width: 100%; font-size: 1.2em; color: #555555;}
#pmoc .detalhes li { float: left; width: 96%; padding: 15px 2% 13px; margin: 0 0 10px; border: 1px solid #DDDDDD; list-style: none;}
#pmoc .imagem { float: left; width: 90%; margin: 20px 0 0 5%;}
#pmoc .imagem .img { float: left; width: 38%; background-color: #FFFFFF;}
#pmoc .imagem .img img { float: left; width: 97%; padding: 1.5%;}
#pmoc .imagem .detalhes { float: right; width: 60%; line-height: 1.8; margin: 0;}

#servicos { float: left; width: 100%; padding: 45px 0 15px;}
#servicos .tab4 { float: left; width: 20%; margin: 0 0 20px 4%;}
#servicos .tab4 .img { float: left; width: 100%; text-align: center;}
#servicos .tab4 .img img { max-width: 90%; padding: 5%;}
#servicos .tab4 .subtexto { float: left; width: 100%; margin: 10px 0 0;}
#servicos .tab4 .subtexto h3 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 1.4em; color: #000000;}
#servicos .tab4 .subtexto h4 { float: left; width: 100%; text-align: center; font-size: 1em; color: #555555;}
#servicos .tab4 .subtexto .link { float: left; width: 100%; padding: 20px 0 8px; text-align: center;}
#servicos .tab4 .subtexto .link b { padding: 8px; background-color: #000000; font-size: 1em; color: #FFFFFF;}
#servicos .tab4:hover .subtexto .link b { background-color: #2253AB; color: #FFFFFF;}
#servicos .tab2 { float: left; width: 45%; padding: 15px 1% 10px; margin: 30px 0 0 2%; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);}
#servicos .tab2 .img { float: left; width: 38%; text-align: left;}
#servicos .tab2 .img img { max-width: 100%;}
#servicos .tab2 .subtexto { float: right; width: 60%;}
#servicos .tab2 .subtexto h3 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; line-height: 1.2; font-size: 1.4em; color: #000000;}
#servicos .tab2 .subtexto h4 { float: left; width: 100%; margin: 8px 0 0; font-size: 0.92em; color: #555555;}
#servicos .tab2 .subtexto .link { float: left; width: 100%; padding: 20px 0 8px;}
#servicos .tab2 .subtexto .link b { padding: 8px; background-color: #000000; font-size: 1em; color: #FFFFFF;}
#servicos .tab2:hover .subtexto .link b { background-color: #2253AB; color: #FFFFFF;}
#servicos .linha { float: left; width: 100%; height: 1px;}

#credenciado { float: left; width: 100%; padding: 30px 0 10px; text-align: center;}
#credenciado .subtitulo { float: left; width: 100%; padding: 20px 0 10px; background-color: #2253AB;}
#credenciado .subtitulo h2 { float: left; width: 100%; line-height: 1.1; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 2.5em; color: #025477;}
#credenciado .imagens { float: left; width: 80%; padding: 20px 10% 0; }
#credenciado .imagens .img { max-width: 100%; border: 1px solid #DDDDDD;}

#fotos { float: left; width: 92%; padding: 0 4%;}
#fotos .tab { float: left; width: 23%; padding: 0.5%; margin: 0 0 10px 1%; position: relative; overflow: hidden;  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);}
#fotos .tab .obs { position: absolute; width: 99%; height: 99%; top: 0.5%; left: -100%; background-image: url(../imagens/icoZoom.png); background-position: 50%; background-repeat: no-repeat;}
#fotos .tab .img { float: left; width: 100%;}
#fotos .tab:hover .obs { background-color: rgba(0, 0, 0, 0.49); left: 0.5%;}

#mapa { float: left; width: 100%; border-top: 1px solid #EEEEEE;}
#mapa .mp { float: left; width: 100%; height: 500px;}

#contato { float: left; width: 40%; margin: 15px 30% 0;}
#orcamento { float: left; width: 40%; margin: 0 30%;}

#email { float: left; width: 100%;}
#email .aviso { float: left; width: 100%; display: none; position: relative; margin: 25px 0 0;}
#email .aviso .msg { float: left; width: 90%; padding: 18px 5% 15px; background-color: #FFF27E; color: #090F14; font-size: 1.2em; line-height: 1.1; text-align: center;}
#email .aviso .fechar { position: absolute; top: 15px; right: 15px; cursor: pointer; font-size: 1.3em;}
#email .form { float: left; width: 100%; margin: 20px 0;}
#email .form .c1 { float: left; width: 100%;}
#email .form .c2 { float: left; width: 25%;}
#email .form .c3 { float: right; width: 70%;}
#email .form .nomecampo { float: left; width: 100%; margin: 25px 0 3px; font-size: 1em;}
#email .form .nomecampo em { font-style: normal; color: #FF0000;}
#email .form .campo { float: left; width: 95%; height: 50px; padding: 1px 2% 0; border: 1px solid #C7C7C7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} 
#email .form .campo:focus { border: 1px solid #59B5FF; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);} 
#email .form .textarea { float: left; width: 95%; height: 110px; padding: 5px 2% 0; border: 1px solid #C7C7C7; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} 
#email .form .textarea:focus { border: 1px solid #59B5FF; -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);} 
#email .form .botao { float: right; background-color: #000000; color: #FFFFFF; margin: 10px 0 0; padding: 18px 30px; text-transform: uppercase; font-weight: bold; cursor: pointer; font-size: 1.4em; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} 
#email .form .botao:hover { background-color: #2253AB;} 

@media only screen and (max-width: 1100px){
	#destaques .tab .descricao b { font-size: 1.2em;}
}
@media only screen and (max-width: 1000px){
	#texto .destaque h3 { width: 86%; padding: 18px 2% 15px;}
	#texto .destaque h4 { width: 86%; margin: 20px 7% 0;}

	#destaques.pag { display: none;}
	#destaques .tab { width: 48%;}

	#servicos .tab4 { width: 40%; margin: 0 0 50px 6.7%;}
	#servicos .tab2 { margin: 0 0 0 2%;}
	#servicos .tab2 .img { width: 100%; text-align: center;}
	#servicos .tab2 .subtexto { width: 100%; margin: 20px 0 0; text-align: center;}

	#contato { width: 90%; margin: 15px 5% 0;}
	#orcamento { width: 90%; margin: 0 5%;}
}
@media only screen and (max-width: 800px){
	#paginas { padding: 20px 0 10px;}
	#titulo { margin: 0;}

	#banners .fundo.d { display: none;}
	#banners .fundo.m { display: block;}
}
@media only screen and (max-width: 700px){
	#credenciado .imagens { width: 94%; padding: 20px 3% 0;}

	#servicos { padding: 0 0 10px;}
}
@media only screen and (max-width: 650px){
	#banners .flex-control-nav { display: none;}

  #fotos .tab { width: 47.5%;}

	#servicos .tab4 { width: 90%; margin: 0 5% 20px;}
	#servicos .tab4 .subtexto { width: 90%; margin: 10px 5% 0;}
	#servicos .tab4 .img.sombra { -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}
	#servicos .tab4 .img img { padding: 0;}
	#servicos .tab2 { width: 90%; padding: 15px 0 10px; margin: 0 5% 20px; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}
	#servicos .tab2 .subtexto { width: 90%; margin: 20px 5% 0;}

	#credenciado { padding: 0 0 10px;}
	#credenciado .subtitulo h2 { font-size: 2em;}
}
@media only screen and (max-width: 500px){
	#titulo h1 { font-size: 2.5em;}
	#titulo em { top: 5px;}
	
	#texto .simples h4 { width: 90%; margin: 30px 5%;}

	#subtitulo h1 { font-size: 2em;}
	#subtitulo h2 { font-size: 1.1em;}
}
@media only screen and (max-width: 480px){
	#destaques { padding: 15px 4% 14px;}
	#destaques .tab { width: 92%; padding: 10px 3%; margin: 5px 0 0; border: 1px solid #DDDDDD;}
	#destaques .tab .icone { margin: 0 5px 0 0;}
}