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

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

.topo{width: 100%; background: url(../img/banner.png) no-repeat; background-size: cover; background-attachment: fixed;}
.topo .conteudo{padding-top: 40px; padding-bottom: 130px;}
.topo .conteudo h1{ margin-top: 5px; display: block; overflow: hidden; width: 588px; height: 150px; text-indent: -3000px; background-image:url(../img/logo.png); background-position: right;}

.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; background-color: rgba(0,0,0,0.7); border-radius: 5px;}
.topo ul.menu a li{ list-style-type: none; font-size: 16px; text-transform: uppercase; color:#fff; text-shadow: #fff 1px 0px 4px;}
.topo ul.menu a:hover{background:#fff; border-radius: 3px; }
.topo ul.menu a:hover li{text-shadow: none; color:#176d7e; }

.topo .info-telefone-fixo{background: #83b0d5; color:#fff; margin-left: 20px; height: 60px; display: inline-block; vertical-align: top;  margin-top: 160px; line-height: 60px;  width: calc( (100% - 60px) / 2 ); padding-left: 20px;}
.topo .info-telefone-fixo a{color:#fff; font-weight: bold; text-decoration: none; font-size: 22px; font-family: "Arial";}
.topo .info-telefone-atendimento{background: #46c655; height: 60px; width: calc( (100% - 60px) / 2 ); line-height: 60px; margin-top: 160px; position: relative; text-align: right; padding-right: 20px; display: inline-block;}
.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{ font-weight: 900; margin-top: 80px; margin-bottom: 80px; font-size: 50px; line-height: 50px; color:#fff; text-shadow: #00252c 3px 5px 2px;}

.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; left: 0; position: absolute; bottom:-15px; font-weight: bold; font-size: 16px; width: 100%; text-align: center; opacity: 0; transition: 0.5s;}

.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;}


.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: 220px; -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: 0px; bottom: -110px; }

.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;}



@-webkit-keyframes rotate
 {
 0%   {}
 100% {-webkit-transform: rotate(360deg);}
}

/*div#banner div.animacao:hover img#nuvem1{-webkit-animation: nuvem1 0.8s linear infinite;}
div#banner div.animacao:hover img#nuvem2{-webkit-animation: nuvem2 0.8s linear infinite;}*/

h1{position: absolute; height: 163px; width: 580px;}
h1 .span1{background:url(../img/bg-logo.png); background-repeat: no-repeat; width: 208px; height: 163px; display: inline-block; position: absolute; left: 0;}
h1 .span2{background:url(../img/rodar-logo.png); background-repeat: no-repeat; width: 208px; height: 163px; display: block; position: absolute; top: 0; }
h1 .span3{display: inline-block; background:url(../img/txt_logo.png); background-repeat: no-repeat; background-position: left top; width: 360px; height: 64px; position: absolute; left: 218px; bottom: -7px;}

.rotacionar{-webkit-animation: rotate 20s linear infinite;}

.link-whatsapp{display: none;}
.link-telefone{display: none;}


.img-banner-topo{ border:5px solid #fff; width: calc( ( (100% - 60px) / 4 ) - 10px ); height: 230px; display: inline-block; background-image: url(img-fotos/02.jpeg); background-repeat: no-repeat; background-position: center; background-size: cover; margin-left: 20px; }
.img-banner-topo:first-child { margin-left: 0px !important; }


@media (max-width: 960px){

	.img-banner-topo{ width: calc( ( (100% - 20px) ) ); margin-left: 5px !important; margin-top: 10px !important }

	h1 {background-position: center;}
	
	.conteudo{width: calc(100% - 20px); padding: 0 10px;}
	.topo {min-height: unset !important;}
	.topo .conteudo{padding: 20px 10px !important; min-height: unset !important; padding-bottom: 170px !important;}
	.topo .conteudo h1{width: calc(100% - 20px); margin-top: 0 !important; height: 100px !important; background-size: contain; }


	.topo ul.menu a li{color:#fff; text-shadow: #00252c 3px 1px 5px;}

	.contato{padding-top: 20px; margin-bottom: 20px; display: none;}
	.contato form{width: calc(100%); height: unset; border-radius: 0 0 50px 0;}
	.contato form fieldset .left{width: calc(100% - 20px);}
	.contato form fieldset .left input{width: calc((100% - 60px));}
	.contato form fieldset .right{width: calc(100% - 20px); height: unset;}
	.contato form fieldset .right textarea{width: calc(100% - 20px); margin-left: 10px; padding: 0;}

	.descritivo-servico img{width: calc( (100% - 30px) / 2 );}
	.descritivo-servico .conteudo{padding-bottom: 40px;}

	.texto-familia{height: unset !important; min-height: 150px !important;}
	.texto-familia .conteudo-familia{text-align: center;}
	.block-span{display: block; margin-bottom: 30px;}
	.texto-familia p{font-size: 26px; margin-top: 30px !important;}
	.topo .titulo-banner{font-size: 50px; line-height: 50px; padding-bottom: 0px; text-align: center; margin-top: 20px;}
	
	.servicos-principais{height: unset; background: #fff; margin-top: 20px;}
	.servicos-principais .item-servico-principal{width: calc(100% - 40px); background: #00414f; padding-bottom: 20px; margin-left: 5px;}
	.servicos-principais .item-servico-principal span{margin-top: 20px;}
	.servicos-principais .item-secundario{background: #00414f;}
	.servicos-principais .item-secundario p.conteudo-servico-prinicipal{height: unset;}

	.sobre-empresa{margin-bottom: 80px;}
	.sobre-empresa .faixa-sobre{width: calc(100% - 20px); padding: 20px 10px; height: unset; line-height: 30px;}
	.sobre-empresa .conteudo-sobre{background: #ffc04d; height: unset; padding-bottom: 30px;} 
	.sobre-empresa .conteudo-sobre .conteudo span{font-size: 15px; display: block;} 
	.sobre-empresa .conteudo-sobre .esquerda{width: calc(100%);}
	.sobre-empresa .conteudo-sobre .esquerda p.titulo{padding: 30px 0 30px 0px;}
	.sobre-empresa .conteudo-sobre .esquerda p.conteudo{width: calc(100%);}
	.sobre-empresa .conteudo-sobre .esquerda .solicitar-orcamento{width: calc(100% - 20px); margin-left: 10px; position: unset;}

	.sobre-empresa .conteudo-sobre .esquerda .telefone{position: unset; font-size: 18px; padding-top: 30px; text-align: center;}
	.sobre-empresa .conteudo-sobre .esquerda .telefone span{font-size: 18px;}

	.lista-servicos .items-servicos {margin-left: 10px;}
	.lista-servicos .items-servicos .item-servico{width: calc( (100% - 30px) / 2); width: 100% !important; margin-right: 6px; height: 160px; overflow: hidden;}
	.lista-servicos .items-servicos .item-servico img{width: 100%; position: absolute; bottom: -40px;}

	.contato .info-direita{display: none;}

	.topo ul.menu{position: unset; margin-top: 120px; text-align: center;}

	.topo .info-telefone-atendimento{margin-top: 10px; width: calc(100%); padding-right: 0; margin-left:0px;}
	.topo .info-telefone-fixo{margin-top: 20px; width: calc(100%); padding-left: 0; text-align: center; margin-left:0px;}
	
	.topo .info-telefone-atendimento p font{font-size: 17px !important; }
	.topo .info-telefone-atendimento p{width: calc(100%); padding-right: 0; text-align: center;}

	.topo .info-telefone-atendimento span.icon-telefone{display: none;}

	.servicos-principais .item-servico-principal p.titulo-servico-prinicipal{font-size: 24px;}

	.lista-servicos p.titulo{width: calc(100% - 105px) !important; font-size: 24px; }

	.hide-for-mobile{display: none;}


	.link-telefone{background-color: #77b3d4; background-image: url(../img/telefone-celular.png); height: 65px; width: 65px ; background-size: contain; background-repeat: no-repeat; display: block; position: fixed; bottom: 10px; left: 10px; z-index: 999999999;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        border-radius: 60px; 
    }

	.link-whatsapp{background-color: #00b000; background-image: url(../img/whatsapp-celular.png); height: 65px; width: 65px ; background-size: contain; background-repeat: no-repeat; display: block; position: fixed; bottom: 10px; right: 10px; z-index: 999999999;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
        border-radius: 60px; 
    }


    .descritivo-servico .conteudo{text-align: justify;}


    .lista-servicos .items-servicos .item-servico .detalhe-servico{background: #176d7e;position: absolute; transition: 0.3s; top: 0; left: 0; width: 100%; height: 200px; opacity: 0.7;}

    .lista-servicos .items-servicos .item-servico span{opacity: 1; bottom: 15px;}

    .emergencia-ambiental .descritivo img{ height: unset !important; width: calc(100% - 20px); margin-left: 10px; }

}