body {margin:0; padding:0; line-height:34px; font-family:'Libre Franklin'; color:#999; font-size:18px; overflow-x:hidden}

body a {color:inherit !important; text-decoration:none}

.clear {clear:both}

select {outline:none}

@media only screen and (min-width: 1025px) {
	
#fix_responsivo {display:none}
#header_responsivo {display:none}

#header {width:100%; min-width:1200px; height:140px; position:relative; font-size:14px; background:#fff; z-index:999}
#header.sombra {box-shadow:0px 15px 30px rgba(0,0,0,0.05);}
#header .area {width:1200px; margin:0 auto;}
#header .area .logomarca {float:left; width:120px; height:140px; background:url(../Imagens/logomarca.jpg) left center no-repeat; background-size:contain}
#header .area .menu {float:left; text-align:left; margin:76px 0  0 20px;}
#header .area .menu ul {padding:0; margin:0; list-style:none; font-size:0;}
#header .area .menu li {display:inline-block; height:64px; line-height:64px; font-size:14px; padding:0 24px;}
#header .area .menu li span {display:block; cursor:pointer}
#header .area .menu li:hover .underline {width:calc(100% + 32px) !important}
#header .area .menu li.ativo .underline {width:calc(100% + 32px) !important}
#header .area .menu li .underline {position:relative; z-index:9; left:-16px; width:0; height:4px; background:#851085; bottom:4px; transition:all 0.3s}
#header .area .menu li:hover .submenu {visibility:visible; opacity:1; pointer-events:auto;}
#header .submenu {position:absolute; left:50%; margin-left:-50%; width:100%; min-width:1200px; background:#fff; padding:50px 0 30px; top:calc(100% - 1px); border-top:1px solid #eee; visibility:none; opacity:0; pointer-events:none; transition:all 0.3s; box-shadow:0px 15px 15px rgba(0,0,0,0.05);}
#header .submenu ul {width:1200px; margin:0 auto !important; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 30px; -moz-column-gap: 30px;  column-gap: 30px; text-align:left; line-height:normal !important;}
#header .submenu ul .col {-webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;margin-bottom:20px;}
#header .submenu ul .col .titulo {font-size:14px; text-transform:uppercase; color:#851085; margin-bottom:20px;}
#header .submenu ul .col li {margin-top:10px; padding:0; height:auto !important; line-height:normal !important; cursor:pointer; display:table !important; page-break-inside: avoid; break-inside: avoid;}
#header .submenu ul .col li:hover {text-decoration:underline}
#header .area .info {float:right; position:relative; top:90px;}
#header .area .info a:hover {text-decoration:underline}
#header .area .info .busca {position:absolute; top:-60px; right:0; width:350px; height:40px; border:1px solid #eee; border-radius:100px; overflow:hidden;}
#header .area .info .busca input[type="text"] {width:310px; height:40px; background:none; border:none; padding:0 0 0 18px; outline:none}
#header .area .info .busca .bt_busca {width:40px; height:40px; background:url(../Imagens/icone_busca.png) center center no-repeat; position:absolute;right:0; top:0; cursor:pointer;}

#banner {width:100%; min-width:1200px; height:auto; position:relative; overflow:hidden}

#conteudo {width:100%}

.miolo {margin:50px auto; width:1200px; text-align:justify}

.titulo_chamada {font-size:40px; font-weight:200; line-height:50px; margin-bottom:40px; color:#851085;}

.titulo_pagina {font-size:40px; font-weight:200; padding-bottom:20px; border-bottom:1px solid #eee; line-height:50px; margin-bottom:40px; color:#851085;}
.titulo_pagina.produtos {padding:0 0 10px; margin-bottom:50px; width:100%; text-align:left; font-size:16px}
.titulo_pagina.produtos span.separador {display:inline-block; vertical-align:middle; width:20px; height:20px; background:url(../Imagens/icone_seta_separador.png) center center no-repeat; opacity:0.3}
.titulo_pagina.produtos a:hover {text-decoration:underline}
select.ordenar {float:right; border:1px solid #eee; padding:0 5px; height:30px; line-height:30px;}

.subtitulo_pagina {font-size:30px; font-weight:200; color:#851085; margin:0 0 20px}
.subtitulo_pagina.meio {margin-top:40px}

.bt_mais {padding:0 50px; margin-top:40px; font-size:16px; border-radius:5px; line-height:60px; color:#fff; border:2px solid #fff; display:table; cursor:pointer; transition:all 0.3s}
.bt_mais:hover {background:#fff; color:#851085}

#introducao {width:1200px; margin:100px auto; position:relative;}
#introducao .txt {float:left; width:540px; padding:60px 60px 60px 0;}
#introducao .img {width:600px; top:0; bottom:0; right:0; position:absolute}

#diferenciais {width:1200px; margin:100px auto; text-align:center;}
#diferenciais span {display:block; margin:0 auto 50px; width:800px;}
#diferenciais .area .diferencial {float:left; width:262.5px; margin:0 50px 0 0}
#diferenciais .area .diferencial:last-of-type {margin:0;}
#diferenciais .area .diferencial .icone {width:100px; height:100px; margin:0 auto;}
#diferenciais .area .diferencial .titulo {margin:20px 0; color:#000; font-size:26px; font-weight:200}

#chamada {width:100%; min-width:1200px; text-align:center; padding:100px 0;}
#chamada .titulo_chamada {color:#fff;}
#chamada .area {width:800px; margin:0 auto; color:#fff; text-align:center;}
#chamada .area .bt_mais {margin:40px auto 0}

img.servico {width:400px; height:auto; float:right; margin:0 0 50px 50px}

#produtos {width:1200px; margin:100px auto; text-align:center}
#produtos.pg {margin:0;}
#produtos .titulo_chamada {margin-bottom:60px}
#produtos .produto {width:262px; height:330px; text-align:left; cursor:pointer}
#produtos a {float:left; margin:0 50px 0 0;}
#produtos a:nth-of-type(4n) {margin:0}
#produtos .produto .img {width:262px; height:220px; position:relative}
#produtos .produto .img .opacidade {width:100%; height:100%; position:absolute; background:rgba(133, 16, 133, 0); transition:all 0.3s}
#produtos .produto .img .opacidade .mais {background:url(../Imagens/icone_mais.png) center center no-repeat; position:absolute; transform: scale(0, 0); width:100%; height:100%; transition:all 0.3s}
#produtos .produto .titulo {margin:20px 0; font-size:20px; line-height:26px; font-weight:200; color:#000}
#produtos .produto:hover .img .opacidade {background:rgba(133, 16, 133, 0.7)}
#produtos .produto:hover .img .opacidade .mais {transform: scale(1, 1);}

#produto_detalhes .img {float:left; width:450px;}
#produto_detalhes .img .maior {width:450px; height:350px; background-repeat:no-repeat; background-position:center center; background-size:contain}
#produto_detalhes .img .gal {margin-top:40px;}
#produto_detalhes .img .gal .miniatura {width:80px; height:80px; border:1px solid #ddd; background-position:center center; background-repeat:no-repeat; background-size:80%; float:left; margin:0 10px 10px 0; cursor:pointer}
#produto_detalhes .img .gal .miniatura:hover {border:1px solid #000}
#produto_detalhes .img .gal .ativo {border:1px solid #000}
#produto_detalhes .img .gal .miniatura:nth-of-type(5n) {margin:0;}
#produto_detalhes .info {float:right; width:650px;}
#produto_detalhes .info .titulo_produto {font-size:24px; text-align:left; line-height:30px; margin:0 0 40px; color:#000}
#produto_detalhes .info .titulo_produto.meio {margin-top:40px}

#downloads .download {margin-bottom:30px;}
#downloads .download a:hover {text-decoration:underline}
#downloads .download .titulo_download {padding-bottom:20px; border-bottom:1px solid #eee; font-weight:700; margin-bottom:15px; color:#000} 
#downloads .download .titulo_download img {width:auto; height:20px; margin-right:10px}
#downloads .download .tipo_tamanho_formato {float:left; font-size:16px;}

.col_contato {float:left; width:350px;}
.col_contato strong {display:block}
.col_contato a {display:inline-block}
.col_contato a:hover {text-decoration:underline}
.col_contato a:first-of-type {margin:20px 0 0; }
.col_form {width:650px; float:right; margin-bottom:40px}
.col_form input[type="text"] {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; width:305px; outline:none; padding:0 10px; background:none; height:40px; line-height:40px; border:1px solid #ddd; border-radius:3px; margin:0 0 20px 20px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px}
.col_form textarea {padding:10px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; outline:none; width:630px; float:right; height:150px; background:none; border:1px solid #ddd; border-radius:3px; font-family:Arial, Helvetica, sans-serif; font-size:14px}
.col_form .bt_envia {padding:0 50px; margin-top:40px; float:right; font-size:16px; border-radius:5px; line-height:60px; color:#fff; background:#851085; display:table; cursor:pointer; transition:all 0.3s}
.col_form .bt_envia:hover {background:#000}

#rodape {background:#1f2024; min-width:1200px; font-size:15px;}
#rodape .area {width:1200px; position:relative; line-height:30px; display:table; margin:0 auto; padding:60px 0; color:#fff}
#rodape .area .col:first-of-type {border:none; padding:0}
#rodape .area .col {float:left; display:inline-block; min-height:150px; margin-right:40px; padding-left:40px; border-left:1px solid rgba(255,255,255,0.1)}
#rodape .area .col:last-of-type {margin:0}
#rodape .area .col .titulo {margin-bottom:20px; font-size:20px; color:rgba(255,255,255,0.6);}
#rodape .area .col a:hover {text-decoration:underline}
#rodape .area .col ul {padding:0 0 0 16px; margin:0;}
#rodape .area .col li:hover {text-decoration:underline; cursor:pointer}
#rodape .area .col .redes_sociais .icone {width:45px; height:45px; margin-right:10px; border-radius:100px; display:inline-block; cursor:pointer; transition:all 0.3s}
#assinatura {width:1200px; margin:0 auto; line-height:60px; font-size:15px}
#assinatura .direitos {float:left;}
#assinatura .desenvolvimento {float:right}

}

@media only screen and (max-width: 1024px) {

#header {display:none}

#fix_responsivo {width:100%; height:150px;}

#header_responsivo {width:100%; position:absolute; top:0; z-index:999; box-shadow:0px 15px 30px rgba(0,0,0,0.05);}
#header_responsivo .top {width:100%; padding:10px 0; height:30px; border-bottom:1px solid #eee; line-height:30px; background:#fff; text-align:center; font-size:14px}

#header_responsivo .busca {width:100%; background:#eee; display:none;}
#header_responsivo .busca .area_busca {width:90%; margin:0 auto;}
#header_responsivo .busca .area_busca input[type="text"]{width:100%; outline:none; color:#106838; line-height:60px; height:60px; background:none; border:none; padding:0 10px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

#header_responsivo .area {background:#fff; width:100%; position:relative}
#header_responsivo .area .logomarca {width:100px; height:80px; background:url(../Imagens/logomarca.jpg) center center no-repeat; background-size:contain; position:absolute; bottom:10px; left:20px;}
#header_responsivo .area .bt_busca {width:34px; height:34px; background:url(../Imagens/icone_busca_responsivo.png) center center no-repeat; background-size:contain; float:right; margin:32px 0 0}
#header_responsivo .area .bt_menu_responsivo {width:30px; height:40px; float:right; background:url(../Imagens/icone_menu.png) center center no-repeat; margin:30px 20px;}
#header_responsivo ul {padding:0; margin:0; list-style:none; text-align:center; line-height:normal; display:none}
#header_responsivo li {background:#eee; border-bottom:1px solid #ddd !important;}
#header_responsivo li:last-of-type {border:none}
#header_responsivo span {display:inline-block; margin:20px 0;}
#header_responsivo li ul {display:none;}
#header_responsivo li ul li {background:#851085; text-transform:uppercase; color:#fff; border-bottom:1px solid rgba(255,255,255,0.2) !important}
#header_responsivo li ul li ul {display:none}
#header_responsivo li ul li ul li {background:#000; text-transform:none; border-bottom:1px solid rgba(255,255,255,0.1) !important}

#banner {width:100%; height:auto; position:relative; overflow:hidden}

#conteudo {width:100%}

.miolo {margin:40px 20px; text-align:justify}

.titulo_chamada {font-size:32px; font-weight:200; line-height:36px; margin-bottom:20px; color:#851085;}

.titulo_pagina {font-size:32px; font-weight:200; text-align:left; padding-bottom:20px; border-bottom:1px solid #eee; line-height:36px; margin-bottom:20px; color:#851085;}
.titulo_pagina.produtos {padding:0 0 10px; margin-bottom:50px; line-height:26px; width:100%; font-size:16px}
.titulo_pagina.produtos span.separador {display:inline-block; vertical-align:middle; width:20px; height:20px; background:url(../Imagens/icone_seta_separador.png) center center no-repeat; opacity:0.3}
.titulo_pagina.produtos a:hover {text-decoration:underline}
select.ordenar {border:1px solid #eee; margin:10px 0; display:block; width:100%; padding:0 5px; background:#fff; height:40px; line-height:40px;}

.subtitulo_pagina {font-size:28px; text-align:left; font-weight:200; color:#851085; margin:0 0 20px}
.subtitulo_pagina.meio {margin-top:40px}

.bt_mais {padding:0; margin:40px auto 0; width:100%; max-width:400px; font-size:16px; border-radius:5px; text-align:center; line-height:60px; color:#fff; border:2px solid #fff; display:table; cursor:pointer; transition:all 0.3s}
.bt_mais:hover {background:#fff; color:#851085}

#introducao {margin:30px 20px; position:relative; text-align:center}
#introducao .img {width:100%; margin-top:20px; padding-bottom:80%;}

#diferenciais {margin:30px 20px; text-align:center;}
#diferenciais span {display:block; margin:0 20px 20px;}
#diferenciais .area .diferencial {margin:0 0 30px;}
#diferenciais .area .diferencial:last-of-type {margin:0;}
#diferenciais .area .diferencial .icone {width:100px; height:100px; margin:0 auto;}
#diferenciais .area .diferencial .titulo {margin:10px 0; color:#000; font-size:26px; font-weight:200}

#chamada {text-align:center; padding:30px 20px 40px;}
#chamada .titulo_chamada {color:#fff;}
#chamada .area {margin:0 auto; color:#fff; text-align:center;}
#chamada .area .bt_mais {margin:30px auto 0}

img.servico {max-width:400px; display:block; width:100%; height:auto; margin:30px auto;}

#produtos {margin:30px 20px; text-align:center}
#produtos.pg {margin:0;}
#produtos .titulo_chamada {margin-bottom:30px}
#produtos .produto {width:100%; text-align:center; cursor:pointer}
#produtos a {margin:0 auto 20px; display:table; width:100%; max-width:400px;}
#produtos a:last-of-type {margin:0 auto}
#produtos .produto .img {width:100%; padding-bottom:60%; position:relative}
#produtos .produto .img .opacidade {width:100%; height:100%; position:absolute; background:rgba(133, 16, 133, 0); transition:all 0.3s}
#produtos .produto .img .opacidade .mais {background:url(../Imagens/icone_mais.png) center center no-repeat; position:absolute; transform: scale(0, 0); width:100%; height:100%; transition:all 0.3s}
#produtos .produto .titulo {margin:20px 0; font-size:20px; line-height:26px; font-weight:200; color:#000}
#produtos .produto:hover .img .opacidade {background:rgba(133, 16, 133, 0.7)}
#produtos .produto:hover .img .opacidade .mais {transform: scale(1, 1);}

#produto_detalhes .img .maior {width:100%; padding-bottom:60%; background-repeat:no-repeat; background-position:center center; background-size:contain}
#produto_detalhes .img .gal {margin-top:30px; text-align:center; font-size:0;}
#produto_detalhes .img .gal .miniatura {width:60px; height:60px; border:1px solid #ddd; background-position:center center; background-repeat:no-repeat; background-size:80%; display:inline-block; vertical-align:top;  margin:0 5px 10px; cursor:pointer}
#produto_detalhes .img .gal .miniatura:hover {border:1px solid #000}
#produto_detalhes .img .gal .ativo {border:1px solid #000}
#produto_detalhes .info {margin:30px 0 0}
#produto_detalhes .info .titulo_produto {font-size:24px; text-align:left; line-height:30px; margin:0 0 20px; color:#000}
#produto_detalhes .info .titulo_produto.meio {margin-top:30px}

#downloads .download {margin-bottom:20px;}
#downloads .download a:hover {text-decoration:underline}
#downloads .download .titulo_download {padding-bottom:10px; border-bottom:1px solid #eee; font-weight:700; margin-bottom:10px; color:#000} 
#downloads .download .titulo_download img {width:auto; height:20px; margin-right:10px}
#downloads .download .tipo_tamanho_formato {float:left; font-size:16px;}

.col_contato strong {display:block}
.col_contato a {display:inline-block}
.col_contato a:hover {text-decoration:underline}
.col_contato a:first-of-type {margin:20px 0 0; }
.col_form {margin:20px 0}
.col_form input[type="text"] {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; width:100%; outline:none; padding:0 10px; background:none; height:40px; line-height:40px; border:1px solid #ddd; border-radius:3px; margin:0 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:14px}
.col_form textarea {padding:10px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; outline:none; width:100%; height:200px; background:none; border:1px solid #ddd; border-radius:3px; font-family:Arial, Helvetica, sans-serif; font-size:14px}
.col_form .bt_envia {padding:0; width:100%; max-width:400px; text-align:center; margin:30px auto 0; font-size:16px; border-radius:5px; line-height:60px; color:#fff; background:#851085; display:table; cursor:pointer; transition:all 0.3s}
.col_form .bt_envia:hover {background:#000}

#rodape {background:#1f2024; font-size:15px;}
#rodape .area {position:relative; line-height:30px; padding:40px 20px 30px; text-align:center; color:#fff}
#rodape .area .col {margin:0 0 20px;}
#rodape .area .col:last-of-type {margin:0}
#rodape .area .col .titulo {margin-bottom:10px; font-size:20px; color:rgba(255,255,255,0.6);}
#rodape .area .col a:hover {text-decoration:underline}
#rodape .area .col ul {padding:0; margin:0; list-style:none}
#rodape .area .col li:hover {text-decoration:underline; cursor:pointer}
#rodape .area .col .redes_sociais .icone {width:45px; height:45px; margin:10px 5px 0; border-radius:100px; display:inline-block; cursor:pointer; transition:all 0.3s}
#assinatura {padding:20px; line-height:24px; text-align:center; background:#fff; font-size:14px}

}