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

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

.clear {clear:both}

input, textarea, select {outline:none; font-family:'Libre Franklin'; color:#666; font-size:14px; box-sizing: border-box;}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    opacity: 0.5; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
	opacity: 0.5;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
	opacity: 0.5;
}

h1,h2,h3 {margin:0; padding:0}

@media only screen and (min-width: 1025px) {

#fix_responsivo {width:0; height:0; display:none;}
#whatsapp_responsivo {display:none;}
#header_responsivo {display:none}

#sobe {background-image:url(../Imagens/icone_seta_cima.png); background-position:center center; background-repeat:no-repeat; background-color:#7d8c94; position:fixed; z-index:999; width:50px; height:50px; background-size:60%; bottom:-100px; right:15px; border-radius:100px; cursor:pointer; transition:0.3s}
#sobe:hover {background-color:#666}

#fix {width:100%; height:110px; display:none;}

#whatsapp {width:220px; height:60px; line-height:normal; border-top-left-radius:50px; border-bottom-left-radius:50px; overflow:hidden; background:#00d4a2; color:#fff; position:fixed; z-index:999; top:220px; margin-top:-30px; right:-150px; transition:all 0.3s; cursor:pointer;}
#whatsapp .icone {width:64px; height:60px; margin-left:5px; display:inline-block; vertical-align:middle; background:url(../Imagens/icone_whatsapp.png) center center no-repeat; background-size:50%;}
#whatsapp span {display:inline-block; vertical-align:middle}
#whatsapp strong {display:block; font-size:16px}
#whatsapp:hover {right:0;}

#top {width:100%; min-width:1200; background:#999}
#top .area {width:1200px; height:50px; line-height:50px; font-size:14px; color:#fff; margin:0 auto;}
#top .area span {display:inline-block; width:1px; height:10px; background:rgba(255,255,255,0.3); margin:0 8px}
#top .area .redes_sociais {float:right; text-align:right;}
#top .area .redes_sociais img {width:auto; height:20px;}
#top .area .redes_sociais a {display:inline-block; vertical-align:middle; margin:-2px 0 0 10px}
#top .area .redes_sociais a:last-of-type { margin:-2px 0 0 16px}

#header {width:100%; min-width:1200px; background:#fff; position:relative; z-index:999; box-shadow:0px 20px 30px rgba(0,0,0,0.05);}
#header.sombra {box-shadow:0px 15px 30px rgba(0,0,0,0.05);}
#header .area {width:1200px; margin:0 auto; position:relative}
#header .area .logomarca {width:190px; height:60px; background:url(../Imagens/logomarca.jpg) left bottom no-repeat; background-size:contain; position:absolute; bottom:20px; left:0; transition:all 0.3s}
#header .area .menu {float:right; text-align:right}
#header .area .menu ul {margin:0 -20px 0 0; padding:0; font-size:0; list-style:none}
#header .area .menu li {display:inline-block; height:100px; line-height:100px; color:#999; font-size:15px; font-weight:700; padding:0 22px; transition:all 0.3s; cursor:pointer; position:relative}
#header .area .menu li:hover {color:#666}
#header .area .menu li.ativo {color:#666}
#header .area .menu li:hover ul {opacity:1; visibility:visible; top:100%}
#header .area .menu li ul {position:absolute; width:200px; left:0; top:calc(100% + 40px); padding:15px 0; text-align:left; box-shadow:0 10px 30px 15px rgba(0,0,0,0.05); background:#fff; opacity:0; visibility:hidden; transition:all 0.3s}
#header .area .menu li ul li {font-weight:normal; height:auto; color:#666; text-transform:none; margin:0; font-size:14px; padding:10px 20px; line-height:20px; display:block; transition:all 0.3s}
#header .area .menu li ul li:hover {background:#999; color:#fff}

#banner {position:relative; z-index:0; width:100%; height:500px; overflow: hidden;}
#banner .opacidade {position:absolute; z-index:9; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.6); width:100%; height:100%; pointer-events:none}
#banner .area_txt {position:absolute; z-index:91; text-align:center; display:table; top:80px; width:100%; height:300px;}
#banner .area_txt .txt {display:table-cell; padding:0 80px; line-height:80px; font-family:'Oswald'; font-size:64px; font-weight:400; text-transform:uppercase; color:#fff; vertical-align:middle}

#conteudo {width:100%; min-width:1200px;}

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

.titulo_pagina {text-align:center; font-size:50px; font-weight:200; color:#fff; padding:100px 0; position:relative;}

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

.subtitulo_pagina {font-size:28px; font-weight:200; line-height:40px; margin-bottom:30px; color:#666;}
.meio {margin-top:40px;}
.centralizar {text-align:center}

.bt_mais {display:table; padding:15px 50px; margin:30px 0 0; border-radius:3px; border:2px solid #666; color:#666; font-weight:700; transition:all 0.3s}
.bt_mais:hover {background:#666; color:#fff}
.bt_mais.centralizar {margin:30px auto 0}

#introducao {width:1200px; margin:60px auto; position:relative}
#introducao .col_txt {width:600px; float:left}
#introducao .col_img {width:500px; top:0; bottom:-60px; right:0; position:absolute; background:url(../Imagens/img_intro.jpg) center bottom no-repeat; background-size:contain}

#servicos {width:100%; min-width:1200px; background:#F5F5F5; padding:60px 0; text-align:center}
#servicos .area {width:1200px; margin:0 auto;}
#servicos .titulo_chamada {margin-bottom:50px}
#servicos .area span {display:block; margin:0 auto 50px; width:800px;}
#servicos .area .servico {width:200px; text-align:center;}
#servicos .area a {float:left; margin:10px 50px 0 0;}
#servicos .area a:last-of-type {margin:10px 0 0}
#servicos .area .servico .img {width:200px; height:200px; border-radius:200px; position:relative; box-shadow:inset 0 0 20px rgba(0,0,0,0.4);}
#servicos .area .servico .titulo {margin:20px 0; font-size:26px; line-height:30px; font-weight:200; color:#666}

#chamada {width:100%; min-width:1200px; color:#fff; text-align:center; padding:60px 0;}
#chamada .titulo_chamada {color:#fff;}
#chamada span.chamada {width:700px; margin:0 auto; display:block; text-align:center;}
#chamada .numeros {margin:20px auto 0; display:table;}
#chamada .numeros .numero {width:250px; float:left; line-height:38px; margin:0 50px 0 0; font-family:'Oswald'; font-size:32px; font-weight:200; text-transform:uppercase}
#chamada .numeros .numero:last-of-type {margin:0}
#chamada .numeros .numero .qtd {display:block; font-weight:500; font-size:50px; margin:18px 0 20px; color:#999}

#portfolio {width:1200px; margin:0 auto; padding:60px 0; text-align:center}
#portfolio.pg {width:auto; padding:0; text-align:justify}
#portfolio .titulo_chamada {margin-bottom:50px}
#portfolio .projeto {width:262.5px; text-align:left;}
#portfolio a {float:left; margin:10px 50px 0 0;}
#portfolio a:last-of-type {margin:10px 0 0}
#portfolio .projeto .area_img {width:262.5px; height:190px; position:relative; overflow:hidden;}
#portfolio .projeto .area_img .img {position:absolute; top:0; bottom:0; left:0; right:0; transition:all 0.3s}
#portfolio .projeto .titulo {margin:20px 0; font-size:26px; line-height:30px; font-weight:200; color:#666}
#portfolio .projeto:hover .img {top:-15px; bottom:-15px; left:-15px; right:-15px;}

#mvv {margin:60px 0 0}
#mvv .col_mvv {float:left; width:314px; padding:25px 30px 30px; margin:0 36px 0 0; text-align:center; border:1px solid #ddd;}
#mvv .col_mvv .titulo {display:table; padding:0 15px; background:#fff; margin:-40px auto 0; font-size:30px; font-weight:200; line-height:24px; margin-bottom:30px; color:#666}
#mvv .col_mvv:last-of-type {margin:0}

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

.tabelas {display:table; margin:40px auto 0; text-align:center}
.tabelas img {display:block;}

#galeria {margin:40px 0 0}
#galeria .img {width:182.5px; height:150px;}
#galeria a {float:left; margin:0 21px 21px 0}
#galeria a:nth-of-type(6n) {margin:0 0 21px 0}

#fale_conosco .col_info {float:left; width:400px;}
#fale_conosco .col_info strong {display:table; margin:0 0 20px; color:#666}
#fale_conosco .col_info strong.cnpj {margin:20px 0;}
#fale_conosco .col_info a.mail {display:table; margin:0 0 20px}
#fale_conosco .col_info a:hover {text-decoration:underline}
#fale_conosco .col_form {float:right; width:600px;}
#fale_conosco .col_form .titulo_campo {font-size:14px; margin-bottom:5px;}
#fale_conosco .col_form input[type="text"] {width:100%; padding:0 10px; height:40px; line-height:40px; background:#f5f5f5; border:1px solid #ddd; margin-bottom:10px;}
#fale_conosco .col_form textarea {width:100%; padding:10px; height:180px; background:#f5f5f5; border:1px solid #ddd;}
#fale_conosco .col_form .bt_enviar {display:table; padding:15px 50px; margin:30px 0 0; border-radius:3px; border:2px solid #666; color:#666; font-weight:700; transition:all 0.3s}
#fale_conosco .col_form .bt_enviar:hover {background:#666; color:#fff}

#rodape {background:#333f48; color:#84929c; min-width:1200px; font-size:14px;}
#rodape .area {width:1200px; position:relative; display:table; margin:0 auto; padding:50px 0; color:#7d8c94}
#rodape .area .col {float:left; margin-right:80px;}
#rodape .area .col:last-of-type {margin:0;}
#rodape .area .col img {display:table; margin-bottom:34px}
#rodape .area .col .titulo {margin-bottom:20px; font-size:20px; color:#fff;}
#rodape .area .col strong {display:table}
#rodape .area .col a.mail {display:table; margin-top:10px;}
#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;}
#rodape .area .col li.ativo {text-decoration:underline}
#rodape .area .col .redes_sociais .icone {width:45px; height:45px; margin:10px 10px 0 0; border-radius:100px; display:inline-block; cursor:pointer; background-position:center center; background-repeat:no-repeat; background-color:#7d8c94; transition:all 0.3s}
#rodape .area .col .redes_sociais .icone:hover {background-color:#666}
#assinatura {width:100%; min-width:1200px; background:#333f48; line-height:60px; color:#fff; font-size:14px}
#assinatura .area {width:1200px; border-top:1px solid #3f4e59; margin:0 auto;}
#assinatura .area br {display:none}
#assinatura .area .direitos {float:left;}
#assinatura .area .desenvolvimento {float:right}

}


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

#sobe {display:none;}
#fix {width:0; height:0; display:none;}
#whatsapp {display:none;}
#top {display:none;}
#header {display:none;}

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

#whatsapp_responsivo {position:fixed; z-index:999; padding:5px 15px; border-radius:100px; background:#0C9; color:#fff; bottom:20px; right:20px; box-shadow:0 0 20px 6px rgba(0,0,0,0.1)}
#whatsapp_responsivo img {width:15px; height:auto; display:inline-block; vertical-align:middle; margin:-4px 3px 0 0}

#header_responsivo {position:fixed; top:0; z-index:999; width:100%; max-height:100%; overflow-y:auto; background:#fff; box-shadow:0px 15px 15px rgba(0,0,0,0.05);}
#header_responsivo .area {padding:0 15px;}
#header_responsivo .area .logomarca {width:150px; height:60px; background:url(../Imagens/logomarca.jpg) left center no-repeat; background-size:contain; float:left; margin:10px 0 10px 0}
#header_responsivo .area .bt_menu_responsivo {width:50px; height:50px; margin:15px 0 0; float:right; background:url(../Imagens/icone_menu_responsivo.png) center center no-repeat}
#header_responsivo ul {padding:0; display:none; list-style:none; margin:0; background:#999;}
#header_responsivo li {min-height:34px; border-bottom:1px solid rgba(255,255,255,0.2); font-weight:700; font-size:15px; text-align:center; color:#fff;}
#header_responsivo li span {margin:16px; display:inline-block;}
#header_responsivo a:last-of-type li {border:none}
#header_responsivo li ul {background:#fff;}
#header_responsivo li ul li {border-bottom:1px solid rgba(0,0,0,0.1); font-weight:normal; line-height:64px; color:#666;}

#banner {position:relative; width:100%; height:220px; overflow: hidden;}
#banner .opacidade {position:absolute; z-index:9; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.6); width:100%; height:100%; pointer-events:none}
#banner .area_txt {position:absolute; z-index:9; text-align:center; display:table; width:100%; height:90%;}
#banner .area_txt .txt {display:table-cell; padding:0 20px; line-height:35px; font-family:'Oswald'; font-weight:400; font-size:30px; color:#fff; text-transform:uppercase; vertical-align:middle}

#conteudo {width:100%}

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

.titulo_pagina {text-align:center; font-size:36px; line-height:40px; font-weight:200; color:#fff; padding:60px 20px; position:relative;}

.titulo_chamada {font-size:30px; font-weight:200; line-height:34px; margin-bottom:30px; color:#666;}

.subtitulo_pagina {font-size:24px; font-weight:200; line-height:30px; margin-bottom:20px; color:#666;}
.meio {margin-top:40px;}
.centralizar {text-align:center}

.bt_mais {display:table; padding:15px 50px; margin:30px auto 0; border-radius:3px; border:2px solid #666; color:#666; font-weight:700; transition:all 0.3s}
.bt_mais:hover {background:#666; color:#fff}
.bt_mais.centralizar {margin:30px auto 0}

#introducao {margin:30px 20px 40px; position:relative; text-align:center}
#introducao .col_img {display:none;}

#servicos {background:#F5F5F5; padding:30px 20px; text-align:center}
#servicos .titulo_chamada {margin-bottom:30px}
#servicos .area span {display:block; margin:0 auto 30px}
#servicos .area .servico {width:200px; text-align:center;}
#servicos .area a {margin:0 auto 20px; display:table}
#servicos .area a:last-of-type {margin:0 auto;}
#servicos .area .servico .img {width:200px; height:200px; border-radius:200px; position:relative; box-shadow:inset 0 0 20px rgba(0,0,0,0.4);}
#servicos .area .servico .titulo {margin:20px 0; font-size:26px; line-height:30px; font-weight:200; color:#666}

#chamada {color:#fff; text-align:center; padding:30px 20px 40px;}
#chamada .titulo_chamada {color:#fff;}
#chamada span.chamada {margin:0 auto; display:block; text-align:center;}
#chamada .numeros {margin:20px auto 0; display:table;}
#chamada .numeros .numero {width:250px; line-height:38px; margin:0 0 40px; font-family:'Oswald'; font-size:32px; font-weight:200; text-transform:uppercase}
#chamada .numeros .numero:last-of-type {margin:0}
#chamada .numeros .numero .qtd {display:block; font-weight:500; font-size:50px; margin:18px 0 20px; color:#999}

#portfolio {margin:30px 20px 40px; text-align:center}
#portfolio.pg {margin:0; padding:10px 0 0}
#portfolio .titulo_chamada {margin-bottom:40px}
#portfolio a {display:block; width:100%; max-width:400px; margin:0 auto 30px;}
#portfolio a:last-of-type {margin:0 auto}
#portfolio .projeto .area_img {width:100%; padding-bottom:60%; position:relative; overflow:hidden;}
#portfolio .projeto .area_img .img {position:absolute; top:0; bottom:0; left:0; right:0; transition:all 0.3s}
#portfolio .projeto .titulo {margin:15px 0; font-size:20px; line-height:26px; font-weight:200; color:#666}
#portfolio .projeto:hover .img {top:-15px; bottom:-15px; left:-15px; right:-15px;}

#mvv {margin:30px 0 50px}
#mvv .col_mvv {padding:0 20px 20px; margin:0 0 40px; text-align:center; border:1px solid #ddd;}
#mvv .col_mvv .titulo {display:table; padding:0 15px; background:#fff; margin:-12px auto 0; font-size:30px; font-weight:200; line-height:24px; margin-bottom:10px; color:#666}
#mvv .col_mvv:last-of-type {margin:0}

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

.tabelas {display:table; width:100%; max-width:400px; margin:30px auto 0; text-align:center}
.tabelas:last-of-type {margin:30px auto 40px}
.tabelas img {display:block; width:100%; height:auto;}

#galeria {margin:30px 0 0}
#galeria .img {width:100%; padding-bottom:60%;}
#galeria a {width:100%; max-width:400px; display:table; margin:0 auto 20px;}
#galeria a:last-of-type {margin:0 auto 40px}

iframe.mapa {width:100% !important; height:300px !important}

#fale_conosco .col_info strong {display:table; margin:0 0 15px; color:#666}
#fale_conosco .col_info strong.cnpj {margin:15px 0;}
#fale_conosco .col_info a.mail {display:table; margin:0 0 20px}
#fale_conosco .col_info a:hover {text-decoration:underline}
#fale_conosco .col_form {margin:20px auto 40px; width:100%; max-width:400px}
#fale_conosco .col_form .titulo_campo {font-size:14px; margin-bottom:5px;}
#fale_conosco .col_form input[type="text"] {width:100%; padding:0 10px; height:40px; line-height:40px; background:#f5f5f5; border:1px solid #ddd; margin-bottom:10px;}
#fale_conosco .col_form textarea {width:100%; padding:10px; height:150px; background:#f5f5f5; border:1px solid #ddd;}
#fale_conosco .col_form .bt_enviar {display:table; padding:15px 50px; margin:30px auto 0; border-radius:3px; border:2px solid #666; color:#666; font-weight:700; transition:all 0.3s}
#fale_conosco .col_form .bt_enviar:hover {background:#666; color:#fff}

#rodape {background:#333f48; color:#84929c; text-align:center; font-size:14px;}
#rodape .area {padding:30px 20px; color:#7d8c94}
#rodape .area .col {margin:0 auto 30px;}
#rodape .area .col:last-of-type {margin:0 auto;}
#rodape .area .col img {display:table; margin-bottom:34px}
#rodape .area .col .titulo {margin-bottom:10px; font-size:20px; color:#fff;}
#rodape .area .col strong {display:table; margin:0 auto;}
#rodape .area .col a.mail {display:table; margin:10px auto 0;}
#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;}
#rodape .area .col li.ativo {text-decoration:underline}
#rodape .area .col .redes_sociais .icone {width:45px; height:45px; margin:10px 10px 0 0; border-radius:100px; display:inline-block; cursor:pointer; background-position:center center; background-repeat:no-repeat; background-color:#7d8c94; transition:all 0.3s}
#rodape .area .col .redes_sociais .icone:hover {background-color:#666}
#assinatura {text-align:center; background:#333f48; color:#fff; padding:0 20px; font-size:14px}
#assinatura .area {border-top:1px solid #3f4e59; padding:20px 0;}
#assinatura .area br {display:block}

}