@charset "utf-8"; 

#paginas { float: left; width: 100%; padding: 178px 0 20px; min-height: 400px;}
#paginas .titulo { float: left; width: 100%; margin: 35px 0 20px;}
#paginas .titulo h1 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2.8em; color: #444444;}
#paginas .titulo em { float: left; width: 10%; height: 5px; margin-left: 45%; background-color: #888888;}
#paginas .titulo.claro h1 { color: #FFFFFF;}
#paginas .titulo.claro em { background-color: rgba(0, 0, 0, 0.48);}
#paginas .titulo.left h1 { text-align: left;}
#paginas .titulo.left em { margin-left: 0;}
#paginas .texto { float: left; width: 100%;}
#paginas .texto h5 { float: left; width: 100%; line-height: 1.8; font-size: 1em;}
#paginas .texto h5 strong { text-transform: uppercase;}
#paginas .texto h5 em { color: #EE0000;}
#paginas .texto h5.centralizado { text-align: center;}
#paginas.index { padding: 20px 0;}

#banners { float: left; width: 100%; min-height: 350px; padding: 170px 0 0; position: relative; overflow: hidden; z-index: 100;}
#banners .slides, .slides > li, .flex-control-nav { float: left; margin: 0; padding: 0; list-style: none;}
#banners .slides > li { display: none;}
#banners .slides > li img { float: left; width: 100%;}
#banners .flex-control-nav { display: none;}
#banners .flex-direction-nav { margin: 0; padding: 0; list-style: none;}
#banners .flex-direction-nav a { position: absolute; width: 40px; height: 60px; top: 60%; z-index: 10; display: block; cursor: pointer; font-size: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#banners .flex-direction-nav a:before { width: 40px; height: 60px; display: inline-block; content: '\f001'; background-image:url(../imagens/seta1.png);}
#banners .flex-direction-nav a.flex-next:before { content: '\f002'; background-image:url(../imagens/seta2.png); }
#banners .flex-direction-nav .flex-prev { left: 0; opacity: 0; outline: 0;}
#banners .flex-direction-nav .flex-next { right: 0; opacity: 0; outline: 0;}
#banners:hover .flex-direction-nav .flex-prev { left: 25px; opacity: 1;}
#banners:hover .flex-direction-nav .flex-next { right: 25px; opacity: 1;}

#tabela { float: left; width: 100%;}
#tabela .tab1 { float: left; width: 30%; padding: 10px 1% 20px; margin: 0 34% 20px;}
#tabela .tab2 { width: 25%; padding: 10px 1% 20px; margin: 0 0 20px;}
#tabela .tab2.ta1 { float: left; margin-left: 22%}
#tabela .tab2.ta2 { float: right; margin-right: 22%;}
#tabela .tab3 { width: 25%; padding: 10px 1% 20px; margin: 0 0 20px;}
#tabela .tab3.ta1 { float: left; margin-left: 8%;}
#tabela .tab3.ta2 { float: left; margin-left: 1.5%;}
#tabela .tab3.ta3 { float: right; margin-right: 8%;}
#tabela .tab4 { width: 22%; padding: 10px 1% 20px; margin: 0 0 20px;}
#tabela .tab4.ta1 { float: left;}
#tabela .tab4.ta2 { float: left; margin-left: 1.3%;}
#tabela .tab4.ta3 { float: left; margin-left: 1.3%;}
#tabela .tab4.ta4 { float: right;}
#tabela .texto { float: left; width: 100%;}
#tabela .texto h3 { float: left; width: 100%; margin: 10px 0 0; text-align: center; font-weight: bold;}
#tabela .texto h4 { float: left; width: 100%; margin: 10px 0 0; text-align: center; line-height: 1.7;}
#tabela .links { float: left; width: 100%; padding: 40px 0 20px; text-align: center;}
#tabela .links .link { padding: 15px 25px 12px; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: #222222;}
#tabela .links .link:hover { padding: 15px 45px 12px;}
#tabela .linha2 { float: left; width: 100%; height: 1px; display: none;}
#tabela .linha4 { float: left; width: 100%; height: 1px;}

#empresa { float: left; width: 100%;}
#empresa .texto { float: left; width: 60%;}
#empresa .texto h3 { float: left; width: 100%; font-size: 2em;}
#empresa .texto h4 { float: left; width: 100%; margin-top: 15px; line-height: 1.8; font-size: 1.05em; color: #444444;}
#empresa .img { float: right; width: 35%; margin-top: 65px;}
#empresa.index { padding: 65px 0;}

#produtos { float: left; width: 100%; background-color: #00CCFF;}
#produtos .subtitulo { float: left; width: 100%; margin: 0 0 30px;}
#produtos .subtitulo h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2.8em; color: #FFFFFF;}
#produtos .subtitulo em { float: left; width: 10%; height: 5px; margin-left: 45%; background-color: rgba(0, 0, 0, 0.4);}
#produtos .fundo { background-color: rgba(0, 0, 0, 0.1);}
#produtos .fundo:hover { background-color: rgba(0, 0, 0, 0.4);}
#produtos .texto h3 { font-size: 1.5em; color: #FFFFFF;}
#produtos .texto h4 { font-size: 1em; color: #FFFFFF;}
#produtos .img { float: left; width: 70%; margin-left: 15%;}
#produtos.index { padding: 50px 0;}

#servicos { float: left; width: 100%; background-color: #FAFAFA;}
#servicos .subtitulo { float: left; width: 100%; margin: 0 0 30px;}
#servicos .subtitulo h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2.8em; color: #444444;}
#servicos .subtitulo em { float: left; width: 10%; height: 5px; margin-left: 45%; background-color: #888888;}
#servicos .fundo:hover { background-color: #FFFFFF;}
#servicos .texto h3 { font-size: 1.5em; color: #222222;}
#servicos .texto h4 { font-size: 1em; color: #555555;}
#servicos .img { float: left; width: 70%; margin-left: 15%;}
#servicos.index { padding: 50px 0;}

#clientes { float: left; width: 100%; background-color: #FF8300;}
#clientes .subtitulo { float: left; width: 100%; margin: 0 0 30px;}
#clientes .subtitulo h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2.8em; color: #FFFFFF;}
#clientes .subtitulo em { float: left; width: 10%; height: 5px; margin-left: 45%; background-color: rgba(0, 0, 0, 0.4);}
#clientes .fundo { background-color: #FFFFFF;}
#clientes .texto h3 { font-size: 1.2em; color: #222222;}
#clientes .img { float: left; width: 100%;}
#clientes .links .link { background-color: #FFFFFF; border: 2px solid #FFFFFF;}
#clientes.index { padding: 50px 0;}

#blog { float: left; width: 100%;}
#blog .subtitulo { float: left; width: 100%; margin: 0 0 30px;}
#blog .subtitulo h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2.8em; color: #444444;}
#blog .subtitulo em { float: left; width: 10%; height: 5px; margin-left: 45%; background-color: #888888;}
#blog .fundo:hover { background-color: #FFFFFF;}
#blog .texto h3 { font-size: 1.2em; color: #222222;}
#blog .texto h4 { font-size: 1em; color: #555555;}
#blog .img { float: left; width: 100%;}
#blog .links .link { background-color: #00CCFF; border: 2px solid #00CCFF; color: #FFFFFF;}
#blog.index { padding: 50px 0;}

#suporte { float: left; width: 100%; background-color: #444D7B;}
#suporte .lado1 { float: left; width: 50%;}
#suporte .lado1 .img { float: left; width: 100%;}
#suporte .lado2 { float: right; width: 50%; padding: 50px 0;}
#suporte .subtitulo { float: left; width: 100%; margin: 0 0 15px;}
#suporte .subtitulo h2 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; font-size: 2.8em; color: #FFFFFF;}
#suporte .subtitulo em { float: left; width: 100px; height: 5px; background-color: rgba(0, 0, 0, 0.4);}
#suporte h4 { float: left; width: 100%; margin-bottom: 15px; line-height: 1.5; font-size: 1.2em; color: #FFFFFF;}
#suporte .contatos { float: left; width: 48%;}
#suporte .contatos .tab { float: left; width: 96%; padding: 14px 2% 11px; margin-bottom: 5px; background-color: #FFFFFF;}
#suporte .contatos .tab strong { float: left; width: 100%; margin-bottom: 3px; text-transform: uppercase; font-size: 1em; color: #444444;}
#suporte .contatos .tab b { float: left; width: 100%; font-weight: normal; font-size: 1em; color: #555555;}
#suporte .donwloads { float: right; width: 48%;}
#suporte .donwloads h3 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; font-size: 1.7em; color: #FFFFFF;}
#suporte .donwloads a { float: left; width: 100%; margin-bottom: 5px;}
#suporte .donwloads a img { float: left;}

#agenda { float: left; width: 100%; padding: 20px 0;}
#agenda .mes { float: left; width: 100%; position: relative;}
#agenda .mes .seta { position: absolute; top: 0;}
#agenda .mes .seta.se1 { left: 0;}
#agenda .mes .seta.se2 { right: 0;}
#agenda .mes .seta .img { float: left; width: 35px; background-color: #000000; padding: 5px; outline: 0; border: 0;}
#agenda .mes .nome { float: left; width: 80%; padding: 4px 0 10px; margin: 0 10%; border-bottom: 10px solid #EEEEEE; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2em;}
#agenda .dias { float: left; width: 90%; margin: 8px 0 0 10%; text-align: center;}
#agenda .dias .tab { float: left; width: 15.4%; margin: 0.5% 0.5% 0 0; padding: 1%; background-color: #CC0000; position: relative;}
#agenda .dias .tab.ativo {background-color: #000000;}
#agenda .dias .tab .nome { float: left; text-align: center; font-size: 1em; color: #FFFFFF;}
#agenda .dias .tab .dia { float: left; width: 100%; font-weight: bold; font-size: 2.5em; color: #FFFFFF;}
#agenda .dias .tab .tarefa { float: left; width: 100%; padding: 10px 0 0; margin-top: 5px; border-top: 2px solid #FF282B; color: #FFFFFF;}
#agenda .dias .tab .n { width: 0; height: 0; display: none;}
#agenda .dias .tab .botao { position: absolute; width: 100%; height: 100%; background-color: transparent; left: 0; top: 0; border: 0; outline: 0; cursor: pointer;}
#agenda .dias .tab:hover { background-color: #000000;}
#agenda .dias:hover .tab.ativo { background-color: #550000;}
#agenda .tarefas { float: left; width: 80%; margin: 30px 0 0 10%;}
#agenda .tarefas .tab { width: 45%; padding: 25px 2% 20px; margin: 0 0 15px; background-color: #FFFFFF; position: relative;}
#agenda .tarefas .tab.ta1 { float: left;}
#agenda .tarefas .tab.ta2 { float: right;}
#agenda .tarefas .tab.ta100 { float: left; width: 96%;}
#agenda .tarefas .tab .empresa { float: left; width: 100%; font-weight: bold; font-size: 1.4em;}
#agenda .tarefas .tab .endereco { float: left; width: 100%; margin-top: 2px; font-style: italic; color: #EE0000;}
#agenda .tarefas .tab .nome { float: left; width: 100%; padding: 5px 0 3px; margin: 12px 0 8px; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; line-height: 1.6;}
#agenda .tarefas .tab .tecnico { float: left; width: 100%; margin-top: 10px;}

#contato { float: left; width: 100%; background-color: #FFFFFF;}
#contato .subtitulo { float: left; width: 100%; margin: 0 0 20px;}
#contato .subtitulo h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2.8em; color: #444444;}
#contato .subtitulo em { float: left; width: 10%; height: 5px; margin-left: 45%; background-color: #888888;}
#contato .texto { float: left; width: 100%;}
#contato .texto h5 { float: left; width: 100%; text-align: center; line-height: 1.8; font-size: 1em;}
#contato .texto .contatos { float: left; width: 100%; margin: 10px 0;}
#contato .texto .contatos .tab { width: 30%; padding: 14px 1% 11px; margin-bottom: 5px; background-color: #FFFFFF; text-align: center;}
#contato .texto .contatos .tab.ta1 { float: left;}
#contato .texto .contatos .tab.ta2 { float: left; margin-left: 3%;}
#contato .texto .contatos .tab.ta3 { float: right;}
#contato .texto .contatos .tab strong { float: left; width: 100%; margin-bottom: 3px; text-transform: uppercase; font-size: 1em; color: #444444;}
#contato .texto .contatos .tab b { float: left; width: 100%; font-weight: normal; font-size: 1em; color: #555555;}
#contato .form { float: left; width: 100%;}
#contato .form .lado1 { float: left; width: 48%;}
#contato .form .lado2 { float: right; width: 50%;}
#contato .form .todos { float: left; margin-top: 20px; background-color: #EEEEEE; font-family: 'Yantramanav', Arial; font-size: 1.1em; border: 0; outline: 0;}
#contato .form .todos.campo { width: 98%; height: 70px; padding: 0 1%; font-size: 1.1em;}
#contato .form .todos.textarea { width: 98%; height: 140px; padding: 10px 1%;}
#contato .form .botao { float: left; padding: 17px 15px 16px; background-color: #A1D129; font-family: 'Yantramanav', Arial; text-transform: uppercase; font-weight: bold; font-size: 1em; color: #FFFFFF; cursor: pointer; outline: 0; border: 0;}
#contato .form .botao:hover { background-color: #779A1E;}
#contato.index { padding: 50px 0;}

#boleto { position: absolute; width: 100%; height: 100%; z-index: 300;}
#boleto .fundo { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 250;}
#boleto .tab { float: left; width: 50%; padding: 50px 5% 40px; margin: 130px 0 0 20%; background-color: #FFFFFF; position: relative; z-index: 275;}
#boleto .tab .fechar { position: absolute; padding: 4px 11px; right: -21px; top: -21px; background-color: #EE0000; font-family: "Segoe UI", Arial; font-weight: bold; font-size: 1.2em; color: #FFFFFF; cursor: pointer;}
#boleto .tab .conteudo { float: left; width: 100%;}
#boleto .tab .conteudo .texto { float: left; width: 100%; padding: 0 0 10px; margin: 0 0 20px; border-bottom: 1px solid #AAAAAA; text-align: center; font-size: 1em;}
#boleto .tab .conteudo .texto b { font-size: 1.2em;}
#boleto .tab .conteudo .link { width: 46%; text-align: center;}
#boleto .tab .conteudo .link.lin1 { float: left; padding: 10px 1% 2px;}
#boleto .tab .conteudo .link.lin2 { float: right; padding: 24px 1% 18px;}
#boleto .tab .conteudo .link img { max-width: 100%; font-size: 0;}

#exibindo { float: left; width: 100%;}
#exibindo .img { float: left; width: 21%; border: 5px solid #FFFFFF;}
#exibindo .textos { float: right; width: 75%;}
#exibindo .textos .subtitulo { float: left; width: 100%; margin-bottom: 10px;}
#exibindo .textos .subtitulo h4 { float: left; width: 100%; font-size: 1.3em;}
#exibindo .textos .descricao { float: left; width: 100%; line-height: 1.8;}
#exibindo .textos .descricao h3 { float: left; margin-top: 10px; text-transform: uppercase; font-weight: bold; font-size: 1.5em;}
#exibindo .textos .descricao p { float: left; width: 100%; margin: 0 0 20px; font-size: 1.1em;}
#exibindo .textos .descricao iframe { float: left; max-width: 100%;}
#exibindo .textos .descricao a:hover { color: #AC1113 !important;}

#exibindo .compartilhar { float: left; width: 100%;  padding: 8px 0; margin: 8px 0; border-top: 1px solid rgb(90 90 90 / 30%); border-bottom: 1px solid rgb(90 90 90 / 30%);}
#exibindo .compartilhar .nco { float: left; padding: 15px 0; margin: 0 5px 0 0; line-height: 0; font-weight: normal; color: rgb(90 90 90);}
#exibindo .compartilhar .ico { float: left; width: 30px; height: 30px; margin: 0 5px 0 0; outline: 1px solid rgb(90 90 90 / 30%); background-color: rgb(90 90 90 / 10%); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
#exibindo .compartilhar .ico.facebook { background-image: url('../imagens/compartilhar-facebook.png');}
#exibindo .compartilhar .ico.whatsapp { background-image: url('../imagens/compartilhar-whatsapp.png');}
#exibindo .compartilhar .ico:hover { background-color: rgb(90 90 90 / 20%); outline: 1px solid rgb(90 90 90 / 40%);}

#swhatsapp { position: fixed; width: 60px; height: 60px; bottom: 10px; right: 10px; z-index: 1000; background-color: #008C44; background-image: url('../imagens/swhatsapp.png'); background-size: 32px; background-position: 50%; background-repeat: no-repeat; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#swhatsapp:hover { background-color: #008C22;}

@media only screen and (max-width: 1200px) {
	#banners { min-height: 200px;}
	#suporte .lado1 { display: none;}
	#suporte .lado2 { width: 100%;}
}
@media only screen and (max-width: 900px) {
	#paginas { padding: 98px 0 20px;}
	#banners { padding: 98px 0 0;}
	#tabela .tab1 { width: 48%; margin: 0 25% 30px;}
	#tabela .tab2 { width: 40%;}
	#tabela .tab2.ta1 { float: left; margin-left: 6%}
	#tabela .tab2.ta2 { float: right; margin-right: 6%;}
	#tabela .tab3 { width: 30%;}
	#tabela .tab3.ta1 { margin-left: 0;}
	#tabela .tab3.ta2 { margin-left: 2%;}
	#tabela .tab3.ta3 { margin-right: 0;}
	#tabela .tab4 { width: 38%;}
	#tabela .tab4.ta1 { margin-left: 9%;}
	#tabela .tab4.ta2 { float: right; margin-left: 0; margin-right: 9%;}
	#tabela .tab4.ta3 { margin-left: 9%;}
	#tabela .tab4.ta4 { margin-right: 9%;}
	#tabela .linha2 { display: block;}
	#boleto .tab { width: 70%; margin-left: 14%;}
	#exibindo .textos .opcoes .tab { float: left; width: 98%; margin: 0 0 15px 0;}
	#agenda .dias .tab { width: 27.3%;}
}
@media only screen and (max-width: 800px) {
	#banners { min-height: 50px;}
	#tabela .tab3 { width: 60%;}
	#tabela .tab3.ta1 { margin-left: 20%;}
	#tabela .tab3.ta2 { margin-left: 20%;}
	#tabela .tab3.ta3 { margin-right: 20%;}
	#empresa .texto { width: 100%;}
	#empresa .img { float: left; width: auto; max-width: 50%; margin-top: 30px;}

	#contato .texto .contatos .tab { width: 98%;}
	#contato .texto .contatos .tab.ta2 { margin-left: 0;}
}
@media only screen and (max-width: 600px) {
	#paginas .titulo em { width: 20%; margin-left: 40%;}
	#tabela .tab3 { width: 80%;}
	#tabela .tab3.ta1 { margin-left: 10%;}
	#tabela .tab3.ta2 { margin-left: 10%;}
	#tabela .tab3.ta3 { margin-right: 10%;}
	#tabela .tab4 { width: 46%;}
	#tabela .tab4.ta1 { margin-left: 0;}
	#tabela .tab4.ta2 { margin-right: 0;}
	#tabela .tab4.ta3 { margin-left: 0;}
	#tabela .tab4.ta4 { margin-right: 0;}
	#contato .form { margin: 0;}
	#contato .form .lado1 { width: 100%;}
	#contato .form .lado2 { width: 100%;}
	#exibindo .img { width: auto; margin-bottom: 20px;}
	#exibindo .textos { width: 100%;}
	#suporte .contatos { width: 100%;}
	#suporte .donwloads { width: 100%; margin-top: 30px;}
	#agenda .mes .seta .img { width: 20px;}
	#agenda .dias .tab { width: 42.1%;}
}
@media only screen and (max-width: 500px) {
	#tabela .tab1 { width: 98%; margin: 0 0 30px;}
	#tabela .tab2 { width: 98%;}
	#tabela .tab2.ta1 { margin-left: 0}
	#tabela .tab2.ta2 { margin-right: 0;}
	#tabela .tab4 { width: 98%;}
	#empresa.index { padding: 20px 0;}
	#empresa .img { max-width: 90%;}
}
@media only screen and (max-width: 400px) {
	#paginas .titulo { margin: 25px 0 20px;}
	#paginas .titulo h1 { font-size: 2em;}
	#tabela .tab3 { width: 98%;}
	#tabela .tab3.ta1 { margin-left: 0;}
	#tabela .tab3.ta2 { margin-left: 0;}
	#tabela .tab3.ta3 { margin-right: 0;}
	#agenda .mes .nome { font-size: 1.2em;}
}
@media only screen and (max-width: 350px) {
	#paginas .titulo { margin: 15px 0 20px;}
	#empresa .texto h3 { font-size: 1.5em;}
	#produtos .subtitulo h2 { font-size: 2em;}
	#contato .subtitulo h2 { font-size: 2em;}
}