/*=========== RESET ===========*/
* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box; font-family: 'Lato', sans-serif;}
body {background-color: #f5f5f5;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}
html {
  scroll-behavior: smooth;
}
/* BARRA DE ROLAGEM */
::-webkit-scrollbar {
    width: 9px;
    background: rgba(96,96,98,1);
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background: rgba(96,96,98,0.2); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-track-piece {
    -webkit-box-shadow: inset 0 0 6px rgba(96,96,98,0.2); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(45,45,45,0.5); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	height: 100px;
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(96,96,98,1); 
}
/* CABECALHO */
.cabecalho {width: 100%; float: left; padding: 3% 4%; top: 0; left: 0; z-index: 4;}
.cabecalho2 {
    background-color: #555;
    -webkit-box-shadow: 2px 0px 5px #000000;
	-moz-box-shadow: 2px 0px 5px #000000;
    box-shadow: 2px 0px 5px #000000;
}
.logo {width: 56px; height: 56px; float: left; background: url("../img/logo-mobile.png") center center/56px no-repeat; font-size: 0; padding-bottom: 1%;}
.btn-menu {width: 56px; height: 56px; float: right; text-align: center; color: #dac981; border-radius: 56px; cursor: pointer; background-color: #003853;}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.sticky + .banner {
  padding-top: 80px;
}
.sticky + .contato {
  padding-top: 100px;
}
.sticky + .clientes {
  padding-top: 100px;
}
.sticky + .areas-atuacao {
  padding-top: 100px;
}
.sticky + .a_wolfer {
  padding-top: 100px;
}
.sticky + .orcamentos {
  padding-top: 100px;
}
/* MENU */
.menu {display: none; width: 100%; height: 100%; position: fixed; background: #003853; top: 0; left:0; position: relative;}
.btn-close {font-size: 1.5em; color: #003853; float: right; cursor: pointer; margin: 3% 2% 0 0;}
.menu ul {width: 100%; float: left; text-align: center; background-color: #f5f5f5;}
.menu li {padding: 1.5%;}
.menu li a {font-size: 1.3em; font-weight: bold; display: block; width: 100%; border-radius: 2%; background: #003853; color: #dac981; padding: 1.5% 3%;}
.menu i {margin-right: 3%;}
.menu li a:hover {background: #dac981; color: #003853;}
	.menu .active {background-color: #dac981; color: #003853;}
	.menu .link_externo {background-color: #843031; color: #fff;}
	.menu .link_externo:hover {background-color: #606062; color: #fff;}
/* BANNER */
.banner {width: 100%; float: left; text-align: center; padding: 3% 4%; background: url("../img/bg.png") no-repeat fixed;}
.title {width: 100%;}
.title h2 {font-size: 2.5em; color: #fff; font-weight: 700;}
.title h3 {font-size: 1.5em; color: #fff;}
.buttons {width: 100%; margin-top: 2%;}
.buttons i {float: right;}
.btn-sobre {width: 100%; font-size: 1.5em; text-align: left; cursor: pointer; padding: 5%; border-radius: 10px; background-color: #fff; color: #003853;}



.form-sugestoes {width: 100%; padding: 2%; text-align: center; float: left; background-color: #FBAD06;}
.form-sugestoes input {width: 90%; border: 2px solid #352B2B; border-radius: 10px; margin: 1% 0; padding: 2%;}
.form-sugestoes input:focus {border-color: #17AD06;}
.form-sugestoes textarea {width: 90%; border: 2px solid #352B2B; border-radius: 10px; margin: 1% 0 0 0; padding: 2%;}
.form-sugestoes textarea:focus {border-color: #17AD06;}
.form-sugestoes button {width: 90%; background-color: #a53234; color: #fff; border: 2px solid #352B2B; border-radius: 10px; padding: 1%; cursor: pointer; font-weight: bold;}
.form-sugestoes button:hover {background-color: #606062; color: #fff;}
.form-sugestoes h3 {font-size: 1em; font-weight: bold; margin-bottom: 1%;}
.contador {text-align: left; font-size: 10pt; margin-bottom: 2%;}

/* SERVICOS */
.servicos {width: 100%; display: inline-block; padding: 3% 4%; background-color: #003853; text-align: center;}
.servico {width: 100%; display: block; background-color: #f2f2f2; text-align: left; border-radius: 7px; margin-bottom: 3%;}
.servico img {border-radius: 7px 7px 0 0;}
.inner {padding: 7%;}
.inner a {font-size: 1.5em; color: #003853; font-weight: 700;}
.inner h4 {font-size: 1.2em; color: #555; padding-top: 2%; font-weight: bold;}
.inner p {padding-top: 6%; color: #555; line-height: 1.5em;}
/* NOTICIAS E PREMIACOES */
.noticias-premiacoes {width: 100%; float: left; padding: 3% 4%; background-color: #fff; display: inline-block;}
.noticias-premiacoes h3 {font-size: 1.5em; color: #003853; padding: 2% 0; font-weight: bold;}
/* NOTICIAS */
.noticia {width: 100%; background-color: #999; text-align: center; border-radius: 7px; margin-bottom: 3%; display: block;}
.noticia img {border-radius: 7px;}
.inner2 {padding: 7%;}
.inner2 h4 {font-size: 1.5em; color: #003853; padding-top: 2%; font-weight: bold;}
.inner2 p {padding-top: 4%; color: #fff; line-height: 1.5em;}
.saiba-mais {background-color: #003853; width: 100%; padding: 3%; margin-top: 4%; border-radius: 7px; font-size: 1.1em; font-weight: bold; color: #dac981; cursor: pointer;}
.saiba-mais:hover {background-color: #dac981; color: #003853;}
/* PREMIACOES */
.premiacao {width: 100%; background-color: #999; text-align: center; border-radius: 7px; margin-bottom: 3%; float: left;}
.premiacao img {border-radius: 7px;}
/* PARCEIROS */
.parceiros {width: 100%; float: left; padding: 3% 4%; background-color: #dac981;}
.parceiros h3 {font-size: 1.5em; color: #003853; padding: 2% 0 6% 8%; font-weight: bold;}
.parceiro {text-align: center; margin-right: 3%;}
.parceiro:last-child {margin-right: 0;}
.parceiro img {border-radius: 7%; height: 20px; margin: 0 4%;}
/* RODAPÉ */
.rodape {width:100%; float: left; padding: 3% 4%; text-align: center; background-image: linear-gradient(#003853,#001823);}
.rodape hr {color: rgba(255,255,255,0.30); border: 1px solid rgba(255,255,255,0.30); margin-top: 3%;}
.ao-topo {text-align: right;}
a[href="#top"]{
    padding:10px;
    top: 90%;
    right:40px;
    display:none;
	color: rgba(218,201,129,0.70);
	font-weight: bold;
}
a[href="#top"]:hover{
    text-decoration:none;
	color: rgba(218,201,129);
}
.mapa-site h6 {font-size: 1.3em; color: #dac981; padding: 2% 0 1% 0; font-weight: bold;}
.mapa-site a {color: rgba(255,255,255,0.70); margin-right: 6%;}
.mapa-site a:hover {color: rgba(255,255,255);}
.mapa-site a:last-child {margin-right: 0;}
.social-icons h6 {font-size: 1.3em; color: #dac981; padding: 2% 0 1% 0; font-weight: bold;}
.social-icons a {font-size: 1.5em; color: rgba(255,255,255,0.70); margin-right: 3%;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: rgba(255,255,255);}
.copyright {margin: 4% 0 1% 0; color: rgba(255,255,255,0.70);}
.desenvolvedor {margin-bottom: 2%; color: rgba(255,255,255,0.70);}

/* CONTATO */
.contato {padding: 3% 4%;}
.contato h4 {font-size: 1.5em; color: #003853; padding-left: 2%; font-weight: bold; margin-top: 6%;}
.contato h5 {font-size: 1em; color: #555; font-weight: bold; padding-left: 2%; margin: 3% 0;}
.contato p {padding: 2%; color: #555; line-height: 1.5em;}
.form {width: 100%; margin: 2%;}
.form input {
    width: 98%;
    margin: 1% 0;
    border-radius: 15px;
    background-color: #f5f5f5;
    color: #555;
    padding: 2%;
    border: 2px solid #dac981;
}
.form input:focus {border: 2px solid #003853;}
.form textarea {width: 98%; margin: 1% 0; border-radius: 15px; background-color: #f5f5f5; color: #555; padding: 2%; border: 2px solid #dac981;}
.form textarea:focus {border: 2px solid #003853;}
.form button {
	width: 45%;
	margin: 2% 2%;
	padding: 2%;
    border-radius: 5px;
	background-color: #003853;
	color: #dac981;
	font-weight: bold;
	cursor: pointer;
}
.form button:last-child {margin-right: 0;}
.form button:hover {background-color: #dac981; color: #003853;}

.map{
    width: 92%;
    height: auto;
    margin: 2%;
}

/* CLIENTES */
.clientes {width: 100%; float: left; padding: 3%; display: inline-block; text-align: center;}
.clientes h3 {font-size: 1.5em; color: #003853; font-weight: bold; margin-bottom: 2%;}
.cliente {width: 92%; background-color: #003853; text-align: left; border-radius: 7px; margin: 4%; float: left;}
.cliente img {border-radius: 7px 7px 0 0;}
.inner3 {padding: 7%;}
.inner3 a {font-size: 1.2em; color: #dac981; font-weight: 700;}
.inner3 h5 {font-size: 1em; color: #dac981; padding-top: 2%;}

/* AREA DE ATUACAO */
.areas-atuacao {width: 100%; float: left; padding: 3%; display: inline-block; text-align: center;}
.areas-atuacao h3 {font-size: 1.5em; color: #003853; font-weight: bold; margin-bottom: 2%;}
.area {width: 92%; text-align: left; border-radius: 7px; margin: 4%; float: left;}
.area img {border-radius: 7px;}
.inner4 {padding: 2% 0;}
.inner4 h3 {font-size: 1.5em; color: #003853; padding-top: 2%;}
.inner4 p {font-size: 1em; color: #555; padding-top: 2%; line-height: 1.8em; text-align: justify !important;}
.inner4 a {padding: 2%; background-color: #003853; border-radius: 7px; margin-top: 3%; font-weight: bold; color: #dac981; float: left;}
.inner4 a:hover {background-color: #dac981; color: #003853;}
.inner4 span {font-weight: bold; color: #606062;}
.inner4 span i {margin-right: 1em;}
.inner4 .subitem {margin-left: 6%;}

/* A WOLFER */
.a_wolfer {width: 100%; float: left; padding-top: 3%; display: inline-block;}
.sobre {width: 92%; margin: 4%;}
.sobre h3 {color: #003853; font-size: 1.8em; font-weight: bold; margin-bottom: 2%;}
.sobre p {color: #555; font-size: 1.2em; text-align: justify; line-height: 2;}
.sobre h4 {color: #003853; font-size: 1.3em; font-weight: bold; margin: 3% 0 2% 0;}
.sobre i {color: #003853;}
.nossos_servicos {width: 100%; padding: 4%; background-color: #555; float: left;}
.nossos_servicos h3 {color: #dac981; font-size: 1.3em; font-weight: bold; margin-bottom: 2%;}
.serv {width: 100%; margin: 4% 0 5% 0;}
.serv img {border-radius: 7px 7px 7px 0;}
.inner5 a {padding: 2%; background-color: #003853; border-radius: 0 0 7px 7px; font-weight: bold; color: #dac981; float: left; margin-bottom: 5%;}
.inner5 a:hover {color: #003853; background-color: #dac981;}

/* ORCAMENTOS */
.orcamentos {width: 100%; float: left; padding-top: 3%; display: inline-block;}
.orcamento {width: 92%; margin: 4%;}
.orcamento h3 {color: #003853; font-size: 1.8em; font-weight: bold; margin-bottom: 2%;}
.orcamento p {color: #606062; font-size: 1.1em; text-align: justify; margin-bottom: 3%;}
.orcamento h4 {color: #003853; font-size: 1.3em; font-weight: bold; margin: 3% 0 2% 0;}
.orcamento input {
    width: 98%;
    margin: 1% 0;
    border-radius: 15px;
    background-color: #f5f5f5;
    color: #555;
    padding: 2%;
    border: 2px solid #dac981;
}
.orcamento input:focus {border: 2px solid #003853;}
.orcamento textarea {width: 98%; margin: 1% 0; border-radius: 15px; background-color: #f5f5f5; color: #555; padding: 2%; border: 2px solid #dac981;}
.orcamento textarea:focus {border: 2px solid #003853;}
.orcamento button {
	width: 45%;
	margin: 2% 2%;
	padding: 2%;
    border-radius: 5px;
	background-color: #003853;
	color: #dac981;
	font-weight: bold;
	cursor: pointer;
}
.orcamento button:last-child {margin-right: 0;}
.orcamento button:hover {background-color: #dac981; color: #003853;}

/* LIGHTBOX */
.sinalizacao {width: 100%; float: left; padding: 3%; display: inline-block; text-align: center;}
.sinalizacao h4 {font-size: 1em; color: #003853; font-weight: bold; margin: 2% 0;}
.area2 {width: 48%; height: 190px; text-align: center; border-radius: 7px; margin: 2% 0 2% 2%; float: left;}
.area2 img {border-radius: 7px;}
.area3 {width: 48%; text-align: center; border-radius: 7px; margin: 2% 0 2% 2%; float: left;}
.area3 img {border-radius: 7px;}
.areabaixa2 {height: 190px;}
.botao_orcamento {width: 100%; padding: 2%; text-align: center; margin: 2%;}
.botao_orcamento a {padding: 2% 15%; background-color: #003853; border-radius: 7px; margin-top: 3%; font-weight: bold; color: #dac981;}
.botao_orcamento a:hover {background-color: #dac981; color: #003853;}
.demonstrations { float: left; clear: both; width: 100%; margin-bottom: 18px; }
.demonstrations a {
  float: left;
  width: 150px;
  height: 80px;
  margin: 0 5px 5px 0;
  cursor: pointer;
}
.demonstrations a img {
  float: left;
  width: 150px;
  height: 80px;
}
.demonstrations .rightmost { margin-right: 0; }

.fone {
    font-size: 1.2em;
	font-weight: bold;
    margin: 1% 0 3% 0;
    color: #dac981;
}
.endereco {font-size: 0.9em; margin: 1% 0; color: rgba(255,255,255,0.70); line-height: 1.4em;}
.whatsapp {
    position: fixed;
    top: 85%;
    right: 0;
    padding: 10px;
    z-index: 10000000;
	width: 6%;
}

/* MEDIA TYPES */

/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 640px){
	.cabecalho {padding-bottom: 2%; height: 120px;}
	.logo {width: 75px; height: 75px; background: url("../img/logo_wolfer_fire.png") center center/57px no-repeat;}
.cliente {width: 42%;}
}

/* MEDIUM DEVICES - SMARTPHONES */
@media screen and (min-width: 768px){
	.servico {width: 49%; margin-right: 2%; float: left; display: inline-block;}
	.servico:nth-child(4){margin-right: 0;}
	.servico:nth-child(8){margin-right: 0;}
	.servico:nth-child(10){margin-right: 0;}
	.servico:last-child {margin-right: 0;}
	.noticia {width: 49%; margin-right: 2%; float: left;}
	.noticia:nth-child(2){margin-right: 0;}	
	.noticia:last-child {margin-right: 0;}
	.premiacao {width: 49%; margin-right: 2%; float: left;}
	.premiacao:nth-child(2){margin-right: 0;}	
	.premiacao:last-child {margin-right: 0;}
.rodape hr {margin-top: 1%;}
.mapa-site h6 {font-size: 1em;}
.mapa-site a {margin-right: 5%;}
.mapa-site a:last-child {margin-right: 0;}
.social-icons h6 {font-size: 1em;}
.social-icons a {font-size: 1.3em; margin-right: 5%;}
.social-icons a:last-child {margin-right: 0;}
.copyright {font-size: 10pt;}
.desenvolvedor {font-size: 10pt;}
	
.area2 {width: 15%; border-radius: 7px; margin: 2% 2% 2% 0; float: left;}
	.areabaixa {height: auto;}
	.area2:nth-child(6){margin-right: 0;}
	.area2:nth-child(12){margin-right: 0;}
	.area2:nth-child(18){margin-right: 0;}
	.area2:nth-child(24){margin-right: 0;}
	.area2:nth-child(30){margin-right: 0;}
	.area2:nth-child(36){margin-right: 0;}
	.area2:nth-child(42){margin-right: 0;}
	.area2:nth-child(48){margin-right: 0;}
	.area2:nth-child(54){margin-right: 0;}
	.area2:nth-child(60){margin-right: 0;}
	.area2:nth-child(66){margin-right: 0;}
	.area2:last-child{margin-right: 0;}	
.area3 {width: 12%; border-radius: 7px; margin: 2% 2% 2% 0;}
}

/* MEDIUM DEVICES - TABLET & DESKTOPS */
@media screen and (min-width: 960px){
	.servico {width: 23.5%; height: 22em;}
	.servico:nth-child(2){margin-right: 2%;}
	.servico:nth-child(6){margin-right: 2%;}
	.servico:nth-child(10){margin-right: 2%;}
	.inner a {font-size: 1.3em;}
	.noticia {width: 23.5%;}
	.noticia:nth-child(2){margin-right: 2%;}	
	.noticia:last-child {margin-right: 0;}
	.premiacao {width: 23.5%;}
	.premiacao:nth-child(2){margin-right: 2%;}	
	.premiacao:last-child {margin-right: 0;}
	.parceiros h3 {padding-bottom: 3%;}
	.parceiro img {height: 40px;}
	.copyright {margin-top: 2%;}
	.contato {padding: 0 2%;}
	.form {width: 44%; float: left; margin-right: 6%;}
	.map {width: 44%; float: left;}
	.map iframe {min-height: 340px;}
.contato h4 {font-size: 1.2em; padding-left: 1%;}
.contato h5 {font-size: 1em; margin: 1% 0;}
.contato p {padding: 1%; color: #555; line-height: 1.2em;}
.cliente {width: 21%; display: block; margin: 2%}
.inner3 a {font-size: 1em; color: #dac981; font-weight: 700;}
.inner3 h5 {font-size: 0.8em; color: #dac981; padding-top: 2%;}
.sticky + .clientes {
  padding-top: 150px;
}
.clientes h3 {margin-bottom: 2%;}
.area {width: 45%; margin: 2.5%; position: relative;}
	.inner4 a {bottom: 0; position: absolute;}
	.linha1 {height: 51em;}
	.linha2 {height: 40em;}
	.linha3 {height: 70em;}
	.linha4 {height: 42em;}
	.linha5 {height: 38.5em;}
	.linha6 {height: 112em;}
	.linha7 {height: 60em;}
.sticky + .areas-atuacao {
  padding-top: 150px;
}
	.a_wolfer {margin-top: 1%;}
.sobre {width: 66%; float: left;}
.nossos_servicos {width: 22%; float: right; margin: 4% 4% 4% 0; padding: 2%; border-radius: 7px;}
	.serv {margin-bottom: 10%;}
.sobre h3 {font-size: 1.4em;}
.sobre h4 {font-size: 1.2em;}
.sobre p {font-size: 1em;}
.sticky + .a_wolfer {
  padding-top: 80px;
}
.orcamentos {margin-top: 1%;}
.orcamento {width: 66%; float: left;}
	.orcamento input {padding: 1%;}
	.orcpqn {width: 30.5% !important; margin-right: 2.6% !important;}
	.orcamento button {padding: 1%;}
.sticky + .orcamentos {padding-top: 80px;}
	.fone {margin: 1% 0 2% 0;}		
	
.form-sugestoes input {width: 45%; padding: 1%; margin: 0.5% 0;}
.form-sugestoes textarea {width: 90%; padding: 1%; margin: 0.5% 0 0 0;}
.form-sugestoes textarea:focus {border-color: #17AD06;}
	.form-sugestoes button {width: 90%; padding: 2.2%;}
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px){
	.cabecalho {padding-bottom: 3%; padding-top: 0;}
	.logo {margin-top: 2%;}
	.btn-menu {display: none;}
	.btn-close {display: none;}
	.menu {width: auto; height: 57px; line-height: 57px; float: right; background-color: #555; display: block !important; position: static;}
	.menu li {
    padding: 0;
    float: left;
    padding-bottom: 1%;
    height: 57px;
    background-color: #555;
    justify-content: center;
}
	.menu li a {color: #dac981; font-size: 1em; padding: 15px; border-radius: 0; font-weight: bold;}
	.menu li i {display: block; font-size: 1.2em;}
	.sticky + .banner {padding-top: 130px;}
	.rodape {padding-bottom: 0;}
	.map iframe {min-height: 400px;}
	.servico {width: 23%;}
}
@media screen and (min-width: 1400px){
	.linha1 {height: 52em;}
	.linha2 {height: 42em;}
	.linha3 {height: 70em;}
	.linha4 {height: 43em;}
	.linha5 {height: 38.5em;}
	.linha6 {height: 108em;}
}