*{margin:0; padding: 0; font-family: "Raleway";}

.conteudo{max-width: 1150px; width: 100%; margin:0 auto; position: relative;}

.topo{width: 100%; background: url(../img/bg-topo.jpg) no-repeat; background-size: cover; background-attachment: fixed;}
.topo .conteudo{padding-top: 40px; padding-bottom: 80px;}
.topo .conteudo h1{width: 333px; height: 66px; background: url(../img/logo.png) no-repeat center; display: block; overflow: hidden; text-indent: -3000px;}

.topo ul.menu{position: absolute; right: 10px; top: 40px;}
.topo ul.menu a{display: inline-block; text-decoration: none; margin: 0 0; padding: 10px; transition: 0.3s;}
.topo ul.menu a li{ list-style-type: none; font-size: 16px; text-transform: uppercase; color:#fff;}
.topo ul.menu a:hover{background:#176d7e; border-radius: 3px; }
.topo .info-telefone-atendimento{background: #176d7e; height: 60px; width: 470px; line-height: 60px; margin-top: 160px; position: relative; text-align: right; padding-right: 20px;}
.topo .info-telefone-atendimento p{color:#fff; font-family: "Arial"; font-weight: bold; letter-spacing: 2px;}
.topo .info-telefone-atendimento span.icon-telefone{background:url(../img/bg-icone-btn.png); width: 73px; height: 60px; position: absolute; left: 0; top: 0; background-size: cover; display: block;}
.topo .info-telefone-atendimento span.icon-telefone .icone-telefone-img{background: url(../img/icone-telefone.png) no-repeat center; width: 60px; height: 60px; display: block; }
.topo .titulo-banner{color:#fff; line-height: 80px; font-size: 90px; font-weight: 900; margin-top: 80px; margin-bottom: 80px; max-width: calc(100% - 260px);}

.servicos-principais{background: #176d7e; height: 415px;}

.servicos-principais .item-servico-principal{width: 300px; margin-right: 20px; padding: 0 15px; display: inline-grid;}
.servicos-principais .item-secundario{width: 390px; background: #00414f;}
.servicos-principais .item-secundario p.conteudo-servico-prinicipal{height: 264px;}

.servicos-principais .item-servico-principal span{margin-top: 50px; display: block; font-weight: lighter; color:#fff; font-size: 20px;}
.servicos-principais .item-servico-principal p.titulo-servico-prinicipal{color:#fff; font-weight: 900; text-transform: uppercase; font-size: 40px;}
.servicos-principais .item-servico-principal p.conteudo-servico-prinicipal{color:#fff; font-size: 20px; line-height: 26px; font-weight: lighter; margin-top: 30px;}
 
.lista-servicos{margin-top: 20px; z-index: 2; position: relative;}
.lista-servicos p.titulo{ height: 60px; line-height: 60px; font-weight: bold; background:#ed4038; color: #fff; position: relative; width: 100%; font-size: 30px; padding-left: 100px; width: 1050px;}
.lista-servicos p.titulo span.icone-config{background:url(../img/bg-icone-btn-2.png); width: 73px; height: 60px; position: absolute; left: 0; top: 0; background-size: cover; display: block;}
.lista-servicos p.titulo span.icone-config span.icone-img{background:url(../img/icone-configuracao.png) no-repeat center; width: 60px; height: 60px; display: block; position: absolute; left: 0; top: 0; background-size: 60%;}
.lista-servicos p.descritivo{padding: 40px 0; color:#3d3d3d; font-size: 20px; line-height: 36px; text-align: center;}

.lista-servicos .items-servicos .item-servico{position: relative; width: 200px; height: 200px; margin-right: 33px; display: inline-block; cursor: pointer;}
.lista-servicos .items-servicos .item-servico:last-child{margin-right: 0;}
.lista-servicos .items-servicos .item-servico .detalhe-servico{background: #176d7e; height: 15px; position: absolute; transition: 0.3s; top: 0; left: 0; width: 100%;}
.lista-servicos .items-servicos .item-servico span{color:#fff; position: absolute; bottom:-15px; font-weight: bold; font-size: 16px; width: 100%; text-align: center; opacity: 0; transition: 0.5s; left:0; }

.lista-servicos .items-servicos .item-servico:hover .detalhe-servico{background: #830600; height: 200px; opacity: 0.7;}
.lista-servicos .items-servicos .item-servico:hover span{opacity: 1; bottom: 15px;}

.lista-servicos .items-servicos .ativo{cursor: default;}
.lista-servicos .items-servicos .ativo .detalhe-servico{background: #830600; height: 200px; opacity: 0.7;}
.lista-servicos .items-servicos .ativo span{opacity: 1; bottom: 15px; left: 0;}

.descritivo-servico{border-top:1px solid #ddd; border-bottom:1px solid #ddd; background:#ececfb; position: relative; margin-top: -110px; padding-top: 140px; }
.descritivo-servico .titulo{color:#3d3d3d; font-weight: bold;  font-size: 20px; padding: 30px 0; text-transform: uppercase;}
.descritivo-servico .conteudo{font-size: 20px; color:#3d3d3d; line-height: 30px; padding-bottom: 200px;}
.descritivo-servico img{position: absolute; bottom: -90px;}
.descritivo-servico img:last-child{right: 0;}

.descritivo-servico div.conteudo div{display: none;}
.descritivo-servico div.conteudo .servico-ativo{display: block !important;}

.base-clientes{padding-top: 120px; margin-bottom: 20px;}
.base-clientes .titulo{font-size: 30px; font-weight: bold; color:#343434; margin-top: 30px; margin-bottom: 30px;}
.base-clientes .clientes .cliente{ height: 130px; display: inline-block; width: 170px; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: 1s;}
.base-clientes .clientes .cliente:hover{-webkit-filter: grayscale(0%); filter: grayscale(0%); }


.emergencia-ambiental{ margin-top: 60px; position: relative;}
.emergencia-ambiental .titulo{ color:#1172c3; font-size: 40px; font-weight: 900; text-transform: uppercase; }
.emergencia-ambiental .descritivo{color:#2b2b2b; font-size: 20px; font-weight: 900; margin-top: 20px; margin-bottom: 80px;}
.emergencia-ambiental .descritivo span{font-weight: normal; font-family: "Arial";}
.emergencia-ambiental .img-emergencia-ambiental{position: absolute; right: 140px; bottom: -90px; }

.sobre-empresa{margin-top: -40px;}
.sobre-empresa .faixa-sobre{ background: url(../img/bg-sobre-contato.png) center; height: 85px; width: 100%; line-height: 85px; color:#fff; font-size: 20px; font-weight: bold; border-top: 1px solid #00919c; border-bottom: 1px solid #00919c;}

.sobre-empresa .conteudo-sobre{background: #00b8ba; position: relative; background: linear-gradient(to right, #00b8ba 0%, #00b8ba 50%, #fff 50%, #fff 50%, #fff 100%); height: 471px; box-shadow: 0 -5px 5px -5px #005b62;}
.sobre-empresa .conteudo-sobre .esquerda{width: 440px;}
.sobre-empresa .conteudo-sobre .esquerda p.titulo{ font-size: 20px; font-weight: 900; color:#fff; padding: 70px 0 30px 20px; }
.sobre-empresa .conteudo-sobre .esquerda p.conteudo{font-size: 20px; font-weight: 300; color:#fff; padding: 0 0 20px 0; line-height: 40px; width: 400px; }
.sobre-empresa .conteudo-sobre .esquerda .solicitar-orcamento{background: #005b62; color :#fff; display: block; height: 50px; line-height: 50px; position: absolute; width: 53%;  margin-top: 20px; z-index: 2; left: 0; text-decoration: none; text-align: center; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg);}

.sobre-empresa .conteudo-sobre .esquerda .telefone{ position: absolute; bottom: -150px; font-size: 40px; font-family: "Arial"; color:#fff; font-family: "Arial"; font-weight: 500;}
.sobre-empresa .conteudo-sobre .esquerda .telefone span{font-size: 30px; font-family: "Arial"; font-weight: 200;}

.sobre-empresa .conteudo-sobre .direita{height: 471px; width: 50%; position: absolute; overflow: hidden; right: 0; top: 0;}
.sobre-empresa .conteudo-sobre .direita div.img-galeria{float: left; width: 118px; height: 157px; display: block;}

.mapa{margin-top: 20px;}
.mapa p{width: 29%; float: right; color:#2b2b2b; font-size: 20px;}

.topo{position: relative;}
.texto-familia{background: #e4eff6; position: absolute; left: 0; bottom: 0; width: 100%; height: 150px;}
.texto-familia .conteudo-familia{max-width: 1150px; width: 100%; margin:0 auto; position: relative;}
.texto-familia p{color:#00343e; font-weight: bold; font-size: 30px; text-transform: uppercase; margin-top: 50px; line-height: 28px;}
.texto-familia p span{font-weight: normal; font-size: 20px; text-transform: none;}

.contato{background: url(../img/bg-contato.png) no-repeat right top; padding-top: 80px; margin-top: 20px; min-height: 440px; max-width: 2000px; margin:0 auto; margin-bottom: 40px;}
.contato .conteudo{position: relative;}
.contato form{background: #176d7e; width: 755px; height: 440px; border-radius: 0 0 0 50px;}
.contato form fieldset{border:none;}
.contato form fieldset .titulo{color:#fff; font-size: 30px; line-height: 100px; font-weight: 700; margin-left: 40px; text-transform: uppercase;}
.contato form fieldset .left{width: 280px; margin-left: 40px; display: inline-block;}
.contato form fieldset .left label{color:#fff; font-size: 18px; display: block;}
.contato form fieldset .left input{color:#fff; border:none; border-bottom: 1px solid #fff; background: transparent; margin-bottom: 40px; margin-top: 10px; outline: none; height: 30px; font-size: 16px; width: 260px;}

.contato form fieldset .right{float: right; width: 430px; border-left: 1px solid #fff;  height: 340px;}
.contato form fieldset .right label{color:#fff; font-size: 18px; display: block; padding-left: 20px;}
.contato form fieldset .right textarea{outline: none; font-size: 16px; font-family: "FuturaStd-Medium"; line-height: 22px; border:none; background: transparent; width: 390px; resize: none; margin-top: 10px; color:#fff; height: 238px; border-bottom: 1px solid #fff; padding-left: 20px; padding-right: 20px;}
.contato form fieldset .right .btn-enviar-contato{ border:none; background: transparent; font-weight: bold; color:#fff; outline: none; height: 60px; width: 410px; text-align: left; padding-left: 20px; font-size: 20px; cursor: pointer; }
.contato .info-direita{position: absolute; color: #fff; top: 30px; right: 55px;}

.topo .titulo-banner-mobile{display: none;}

.regioes-atendidas{ margin-top:20px; }
.regioes-atendidas .item-regioes{ position: relative; display:inline-block; width:calc( ( 100% - 60px ) / 4 ); background-color:#fff;  background-image: url(../img/foto-cidade.png); background-repeat: no-repeat; background-size: cover; background-position: center; height:200px; margin-left:20px; margin-bottom:20px; text-decoration:none; }
.regioes-atendidas .item-regioes:nth-child(4n+1){ margin-left:0px; }
.regioes-atendidas .item-regioes p{ text-align:center; position: absolute; width: 100%; left: 0; margin-top:10px; font-weight: bold; background:rgba(255,255,255,0.7); padding:5px 0; font-size:14px; text-transform:uppercase;  color:#000; }


.texto-cidade .texto-cidade-interna{ font-size: 20px; color:#3d3d3d; line-height: 30px; }
.texto-cidade .titulo{color:#3d3d3d; font-weight: bold;  font-size: 20px; padding: 30px 0; text-transform: uppercase;}

@media (max-width: 960px){

	.texto-cidade{ width:calc(100% - 20px); margin-left:10px; }

	.topo .conteudo h1{ width:100%; background-repeat:no-repeat; background-size: contain; background-position:center; }
	.topo ul.menu{ position:unset; right:unset; top:unset; }
	.topo ul.menu{ text-align:center; margin-top:10px; }
	.topo ul.menu a{ padding:10px 5px; }
	.topo .titulo-banner{ margin-top:20px; margin-bottom:0px; text-align: center; font-size:30px; width:calc(100% - 20px); margin-left:10px; line-height:unset; display:none; max-width:unset; }
	.topo .titulo-banner-mobile{display: block;}
	.topo .conteudo{ min-height:unset !important; padding-bottom:20px; padding-top:20px; }
	.texto-familia{ position:unset; left:unset; bottom:unset; padding:20px 10px; width:calc(100% - 20px); height: unset; border-bottom:1px solid #7a8589; }
	.texto-familia p{ margin-top:0px; font-size:24px; }
	.texto-familia .conteudo-familia img{ display:none; }

	.servicos-principais{ height:unset; }
	.servicos-principais .item-servico-principal{ width:calc(100% - 20px); margin-right:unset; display:inline-block; padding:0 10px; margin-bottom:20px; }
	.servicos-principais .item-servico-principal span{ margin-top:20px; }
	.servicos-principais .item-servico-principal p.conteudo-servico-prinicipal{ margin-top:10px; }
	.servicos-principais .item-secundario p.conteudo-servico-prinicipal{ height:unset; margin-bottom:20px; }
	.servicos-principais .item-servico-principal p.titulo-servico-prinicipal{ font-size:24px; }


	.lista-servicos p.descritivo{ padding:20px 0; width:calc(100% - 20px); margin-left:10px; text-align:left; }

	.lista-servicos .items-servicos .item-servico{ display:inline-block; margin-left:5px; width:calc( (100% - 25px) / 3 ); overflow:hidden; margin-right:0px; height:140px; margin-bottom:5px; }
	.lista-servicos .items-servicos .item-servico span{ opacity: 1; bottom: 15px; padding: 5px 0; font-size:12px; left:0;background:#176d7e; }
	.lista-servicos .items-servicos .ativo span{color: #fff; background: unset;}

	.descritivo-servico{ padding:0 10px; padding-top:120px; width:calc(100% - 20px);  }
	.descritivo-servico .titulo{ padding:10px 0; }
	.descritivo-servico .conteudo{ padding-bottom:10px; }

	.emergencia-ambiental{ margin-top:20px; }

	.lista-servicos p.titulo{ width:calc(100% - 100px); overflow:hidden; }
	.topo .info-telefone-atendimento{ width:calc(100% - 40px); margin-left:10px; margin-top:10px; font-size:13px; }
	.emergencia-ambiental .titulo{ text-align:center; font-size:28px; }
	.emergencia-ambiental .img-emergencia-ambiental{display: none;}

	.emergencia-ambiental .descritivo{ width:calc(100% - 20px); margin-left:10px; margin-bottom:60px; }
	.emergencia-ambiental .descritivo span{ display:block; margin-top:10px; font-size:22px; line-height:32px; }

	.sobre-empresa .faixa-sobre{ font-size:18px; text-align:center; }
	.sobre-empresa .conteudo-sobre .esquerda{ width:calc(100% - 20px); padding-left:10px; }
	.sobre-empresa .conteudo-sobre .esquerda p.titulo{padding: 20px 0px;}
	.sobre-empresa .conteudo-sobre .esquerda .solicitar-orcamento{ position:unset; margin-top:0px; }
	.sobre-empresa .conteudo-sobre .esquerda .telefone{ position:unset; margin-top:10px; text-align:center; }
	.sobre-empresa .conteudo-sobre .direita{ display:none; }
	.sobre-empresa .conteudo-sobre{ background:#00b8ba; height:unset; padding-bottom:20px; }
	.sobre-empresa .conteudo-sobre .esquerda p.conteudo{ width:100%; }

	.mobile-off{display: none !important;}

	.descritivo-servico img{ display:none; }
	.contato{ display:none; }

	.base-clientes{ display:none; }



	.regioes-atendidas .item-regioes{ margin-left:10px !important; margin-bottom: 10px; width:calc(100% - 20px); }

}