@charset "utf-8";
/* cabeçalho */
#all{width:1000px;height:auto;margin:0 auto 0 auto;}
#conteudo{width:100%;float:left;background:#ececec;box-shadow:0px 0px 5em #666;-webkit-box-shadow:0px 0px 5em #666;-moz-box-shadow:0px 0px 1em #666;}
#topo{background:#000000;width:950px;height:250px ;margin:25px auto 0 auto;}
#topo1{background:#000000;width:950px;height:120px;margin:0 auto 0 auto; float:left;}
#draco{width:148px;height:80px;padding-top:85px;float:left; margin-left:50px;}
#menus{width:auto;height:40px;float:right; margin-top:70px; margin-right:25px;}
header{float:right;padding-top:40px;}
#btn-menu{display:none;}
header label{display:none;width:auto;height:auto;padding:0px;}
header label:hover{cursor:pointer;}
.menu ul{margin:0;list-style:none;padding:0;display:flex;}
.menu li{flex-grow:1;text-align:center;}
.menu li{border:1px solid #000000; }
.menu li:hover{border:1px solid #FFFFFF;}
.menu li a{display:block;padding:7px 33px;color:#FFFFFF;text-decoration:none;font-weight:normal;font-family:"Century Gothic";font-size:15px;}
.menu li a:hover{display:block;padding:7px 33px;color:#FFFFFF;text-decoration:none; font-weight:normal;}
/*cabeçalho*/

/*conteudo*/
#texto1 { width:95%; margin-left:2.5%; float:left; margin-top:25px; font-size:30px; font:"Century Gothic"}
#banner-site{ width:95%; margin-left:2.5%; float:left; margin-top:25px}
.texto-site{width:95%; margin-left:2.5%; float:left; margin-top:25px; font-size:15px; text-align:justify }
#banner-anuncio{ width:95%; height:150px; margin-left:2.5%; float:left; margin-top:25px; background:url(imagens/banner-eco-economizadores.jpg); display:block;}
#banner-anuncio-texto{ width:70%; margin-left:30%; color:#FFFFFF; font-size:16px; margin-top:25px;}
#action{ width:120px; height:30px; margin-left:415px; margin-top:20px; border:2px solid #FFFFFF; text-align:center; padding-top:10px; color:#FFFFFF; font-size:16px; font-weight:bold}
#action:hover{ background:#FFFFFF; color:#152B43}

.sub-titulo{ width:95%; margin-left:2.5%; float:left; margin-top:25px; font-size:18px; color:#FFFFFF; padding-top:20px; padding-bottom:20px; background:#335B8C; text-align:center;}

.area{ width:95%; margin-left:2.5%; float:left; margin-top:25px; background:#FFFFFF; }
.area-cont{ width:50%;  float:left;}
.area-titulo{ width:95%; margin-left:2.5%; margin-top:30px; float:left; font-size:16px; font-weight:bold; }
.area-texto{  width:95%; margin-left:2.5%; margin-top:30px; float:left; }
.area-icone{ width: 95%; margin-left:2.5%; margin-top:38px; margin-bottom:30px; float:left;}
.icone-1{ width:50%; float:left;}
.icone-2{ width:50%; float:left;}
.icone-3{ width:50%; float:left;}
.icone-4{ width:50%; float:left;}
.area-img{ width:50%; float:right; }
.mob{ float:left;  margin-top:30px; display:none}
.img{ float:left;  margin-top:30px; display:block}
#tabela{ width:95%; margin-left:2.5%; float:left; margin-top:25px; display:block }


/*conteudo*/
/*botão*/
#botao-torneiras-sensor {
	clear: both;
	position:relative;
	display:block;
	cursor: hand;
	z-index: 0;
	height: 300px;
	width: 450px; 
	background:url(imagens/botao-torneiras-sensor2.jpg) no-repeat 0 0;
}
#botao-torneiras-sensor  span.hover {
	position: absolute;
	display: block;
	z-index: -1;
	height: 300px;
	width: 450px;
    background:url(imagens/botao-torneiras-sensor2.jpg) no-repeat bottom;
	left: 0px;
	right: 0px;
}

#botao-desenho-toque {
	clear: both;
	position:relative;
	display:block;
	cursor: hand;
	z-index: 0;
	height: 300px;
	width: 450px; 
	background:url(imagens/botao-desenho-toque2.jpg) no-repeat 0 0;
}
#botao-desenho-toque  span.hover {
	position: absolute;
	display: block;
	z-index: -1;
	height: 300px;
	width: 450px;
    background:url(imagens/botao-desenho-toque2.jpg) no-repeat bottom;
	left: 0px;
	right: 0px;
}

#botao-desenho-pressao {
	clear: both;
	position:relative;
	display:block;
	cursor: hand;
	z-index: 0;
	height: 300px;
	width: 450px;
	background:url(imagens/botao-desenho-pressao2.jpg) no-repeat 0 0;
}
#botao-desenho-pressao  span.hover {
	position: absolute;
	display: block;
	z-index: -1;
	height: 300px;
	width: 450px;
    background:url(imagens/botao-desenho-pressao2.jpg) no-repeat bottom;
	left: 0px;
	right: 0px;
}

/*botão*/
.text3{width:950px;font-family:"Century Gothic";font-size:22px;color:#fff;text-align:center;padding-top:2%;padding-bottom:2%;background:#575757;margin-left: 2.5%;margin-right:auto;}
#contact{width:980px;height:auto;background-color:#ececec;float:left;padding-top:25px;padding-bottom:25px;}
#colun1{width:300px;height:auto;background-color:#575757;float:left;margin-left:2.5%;text-align:center;}
#colun2{width:640px;height:auto;background-color:#fff;float:right;margin-right:20px;}
#cont1{width:270px;height:auto;float:left;color:#FFFFFF;text-align:center;padding-top:50px;padding-bottom:50px;padding-left:10px;padding-right:10px;}
#botao-telefone{ width: 100%; float: left; margin-bottom: 25px}
#botao-email{width: 100%; float: left;margin-bottom: 25px}

#cont2{width:290px;height:auto;float:left;text-align:center;padding-left:5px;padding-right:5px; margin-bottom: 30px;}
#cont3{width:270px;height:auto;float:left;text-align:center;padding-left:10px;padding-top:50px;padding-bottom:50px;color:#FFFFFF;}
.camp1{width:640px;height:50px;float:left;padding-bottom:20px}
.camp2{width:300px;height:auto;float:left;padding-bottom:10px;padding-left:20px;padding-top:10px;}
.camp3{width:300px;height:auto;margin-top:25px;float:left;text-align:center;padding-left:20px;}

#obs{width:100%; float: left; margin-left: 20px;margin-top: 25px;font-weight: bold; font-size: 15px; color: #575757}

#obrigado{ width:950px; height:auto; float:left; margin-left:25px; margin-top:25px; background:#FFFFFF}
#obrigado-img{ width:200px; height:200px; float:left; margin-left:375px; margin-top:50px}
#obrigado-texto1{ width:100%; font-size:24px; float:left; color:#575757; text-align:center; margin-top:50px}
#obrigado-texto2{width:100%; font-size:18px; float:left; color:#575757; text-align:center; margin-top:25px; margin-bottom:50px;}

/*Rodape*/
#rodape{ width:950px; height:auto; float:left; margin-left:25px; background:#000000; margin-top:25px; margin-bottom:25px; position:relative;}
#redes{ width:475px; height:40px; float:left; margin-left:275px;  margin-top:25px;}
.icone-redes{ width:55px; height:55px; margin-left:24px; float:left; }
#endereco{width:950px; height:auto; float:left; text-align:center; color:#FFFFFF; margin-top:30px; margin-bottom:30p }
#menu-rodape{ width:950px; height:50px; float:left; margin-top:25px; color:#FFFFFF; text-align:center;}
#copyright{width:950px; height:50px; float:left;margin-top:25px; text-align:center; }
#industria-brasileira{ width:100px; height:100px; float:right;  margin-top:25px; margin-right:25px; }
.menu2{ width:15%; text-align:center; float:left; text-align:center; font-size:14px; margin-top:20px; margin-left:80px; }
.menu2:hover{ color:#FF6600} 
/*Rodape*/
@media all and (max-width:1024px){
	/*cabeçalho*/
#all{width:100%;height:auto;margin:0 auto 0 auto;}
#conteudo{width:100%;float:left;background:#FFFFFF;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;}
#topo{background:#000000;width:100%;height:100px; margin:0 auto 0 auto; }
#topo1{background:#000000;width:100%;height:auto;float:left;}
#draco{width:15%; height:auto; text-align:center; padding-top:2%; padding-left:40%; margin-left:0px;float:left;}
#menus{ display:block; width:100%;float:left;margin-top:0px;}
header{width:100%; height:auto; background:#000000;margin-bottom:30px; padding-top:0px;}
header label{display:block;}
.menu{position:absolute;background:#000000;width:100%;margin-left:-100%;transition:all 0.5s;}
.menu ul{flex-direction:column;}
.menu li{border-top:1px solid #000000}
.menu li:hover{background:#000000;}
#btn-menu:checked ~ .menu{margin:0;}
.menu li a{color:#FFFFFF;}
.menu li a:hover{color:#FFFFFF;}
/*cabeçalho*/




/*conteudo*/

/*conteudo*/

.text3{width:950px;font-family:"Century Gothic";font-size:22px;color:#fff;text-align:center;padding-top:2%;padding-bottom:2%;background:#575757;margin-left: 2.5%;margin-right:auto;}
#contact{width:100%;height:auto;background-color:#ECECEC;float:left;padding-top:25px;padding-bottom:25px;}
#colun1{width:300px;height:auto;background-color:#575757;float:left;margin-left:2.5%;text-align:center;}
#colun2{width:640px;height:auto;background-color:#fff;float:right;margin-right:20px;}
#cont1{width:270px;height:auto;float:left;color:#FFFFFF;text-align:center;padding-top:50px;padding-bottom:50px;padding-left:10px;padding-right:10px;}
#cont2{width:290px;height:auto;float:left;text-align:center;padding-left:5px;padding-right:5px;}
#cont3{width:270px;height:auto;float:left;text-align:center;padding-left:10px;padding-top:50px;padding-bottom:50px;color:#FFFFFF;}
.camp1{width:640px;height:50px;float:left;}
.camp2{width:300px;height:auto;float:left;padding-bottom:10px;padding-left:20px;padding-top:10px;}
.camp3{width:300px;height:auto;margin-top:25px;float:left;text-align:center;padding-left:20px;}


/*Rodape*/

}

@media all and (max-width:768px){
	/*cabeçalho*/
#all{width:100%;height:auto;margin:0 auto 0 auto;}
#content{width:100%;float:left;background:#FFFFFF;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;}
#topo{background:#000000;width:100%;height:100px; margin:0 auto 0 auto; }
#topo1{background:#000000;width:100%;height:auto; float:left;}
#draco{width:30%; height:auto; text-align:center; padding-top:5%; padding-left:40%; margin-left:0px; float:left;}
#menus{ display:block; width:100%;float:left;margin-top:0px;}
header{width:100%; height:auto; background:#000000;margin-bottom:30px; padding-top:0px;}
header label{display:block;}
.menu{position:absolute;background:#000000;width:100%;margin-left:-100%;transition:all 0.5s;}
.menu ul{flex-direction:column;}
.menu li{border-top:1px solid #000000;}
.menu li:hover{background:#000000;}
#btn-menu:checked ~ .menu{margin:0;}
.menu li a{color:#FFFFFF;}
.menu li a:hover{color:#FFFFFF;}
/*cabeçalho*/
/*conteudo*/

#banner-anuncio{ display:none;}
.area{ width:100%; margin-left:0%; float:left; margin-top:25px; background:#FFFFFF; }
.area-cont{ width:100%;  float:left;}
.area-titulo{ width:95%; margin-left:2.5%; margin-top:30px; float:left; font-size:16px; font-weight:bold; }
.area-texto{  width:95%; margin-left:2.5%; margin-top:30px; float:left; }
.area-icone{ width: 100%; margin-left:0%; margin-top:38px; margin-bottom:30px; float:left;}
.icone-1{ width:50%; margin-left:25%; float:left;}
.icone-2{ width:50%; margin-left:25%; float:left;}
.icone-3{ width:50%; margin-left:25%; float:left;}
.icone-4{ width:50%; margin-left:25%; float:left;}
.area-img{ width:100%; float:right; }
.mob{ width:95%; margin-left:2.5%; float:left; margin-top:30px; display:block }
.img{ float:left; margin-top:30px; display:none }
#tabela{  display:none }
.sub-titulo{ width:100%; margin-left:0%; float:left; margin-top:25px; font-size:18px; color:#FFFFFF; padding-top:20px; padding-bottom:20px; background:#335B8C; text-align:center;}

/*conteudo*/
.text3{width:100%;font-family:"Century Gothic";font-size:22px;color:#fff;text-align:center;padding-top:2%;padding-bottom:2%;background:#575757;margin-left:auto;margin-right:auto;}
#contact{width:100%;height:auto;background-color:#575757;float:left;padding-top:5%;padding-bottom:25px;margin-top:50px;}
#colun1{width:100%;height:auto;background-color:#575757;float:left;margin-left:0px;text-align:center;}
#colun2{width:100%;height:auto;background-color:#575757;float:right;margin-right:20px;}
#cont1{width:95%;height:auto;float:left;color:#FFFFFF;text-align:center;padding-top:50px;padding-bottom:50px;padding-left:5px;padding-right:10px; }
#cont2{width:60%;height:auto;float:left;text-align:center;padding-left:10px;padding-right:0px; margin-left:20% }
#cont3{width:95%;height:auto;float:left;text-align:center;padding-left:5px;padding-top:50px;padding-bottom:50px;color:#FFFFFF;}
.camp1{width:100%;height:50px;float:left;}
.camp2{width:50%;height:auto;float:left;color:#ffffff;padding-bottom:10px;padding-left:25%;padding-top:10px; }
.camp3{width:40%;height:auto;margin-top:25px;float:left;text-align:center;padding-left:20px;}

/*Rodape*/
#rodape{ width:95%; height:auto; float:left; margin-left:2.5%; background:#000000; margin-top:25px; margin-bottom:25px;}
#redes{ width:95%; height:auto; float:left; margin-left:2.5%;  marg in-top:25px;}
#facebook{ width:100%; height:auto; float:left; text-align:center;  }
#linkedin{ width:100%; height:auto; float:left; text-align:center; }
#menu-rodape{ width:80%; height:auto; float:left; margin-left:10%; margin-top:25px; margin-bottom:25px;} 
#copyright{width:95%; height:auto; float:left;  margin-left:2.5%; margin-top:50px;}
#industria-brasileira{ width:50%;height:auto; float:left;  margin-top:0px; margin-right:0px; margin-left:25%; text-align:center;}
.menu2{ width:100%; text-align:center; float:left; text-align:center; font-size:10px; margin-top:20px;}
.menu2:hover{ color:#FF6600} 
/*Rodape*/
}
 
@media all and (max-width:480px){
	/*cabeçalho*/
#all{width:100%;height:auto;margin:0 auto 0 auto;}
#content{width:100%;float:left;background:#FFFFFF;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;}
#topo{background:#000000;width:100%;height:80px; margin:0 auto 0 auto; }
#topo1{background:#000000;width:100%;height:auto;float:left;}
#draco{width:30%; height:auto; text-align:center; padding-top:5%; padding-left:40%; margin-left:0px; float:left;}
#menus{ display:block; width:100%;float:left;margin-top:0px;}
header{width:100%; height:auto; background:#000000;margin-bottom:30px; padding-top:0px;}
header label{display:block;}
.menu{position:absolute;background:#000000;width:100%;margin-left:-100%;transition:all 0.5s;}
.menu ul{flex-direction:column;}
.menu li{border-top:1px solid #000000;}
.menu li:hover{background:#000000;}
#btn-menu:checked ~ .menu{margin:0;}
.menu li a{color:#FFFFFF;}
.menu li a:hover{color:#FFFFFF;}
/*cabeçalho*/

/*conteudo*/

#banner-anuncio{ display:none;}
.area{ width:100%; margin-left:0%; float:left; margin-top:25px; background:#FFFFFF; }
.area-cont{ width:100%;  float:left;}
.area-titulo{ width:95%; margin-left:2.5%; margin-top:30px; float:left; font-size:16px; font-weight:bold; }
.area-texto{  width:95%; margin-left:2.5%; margin-top:30px; float:left; }
.area-icone{ width: 100%; margin-left:0%; margin-top:38px; margin-bottom:30px; float:left;}
.icone-1{ width:50%; margin-left:21%; float:left;}
.icone-2{ width:50%; margin-left:21%; float:left;}
.icone-3{ width:50%; margin-left:21%; float:left;}
.icone-4{ width:50%; margin-left:21%; float:left;}

.area-img{ width:100%; float:right; }
.mob{ float:left; margin-top:30px; display:block }
.img{ float:left; margin-top:30px; display:none }
#tabela{  display:none }






/*conteudo*/

.text3{width:100%;font-family:"Century Gothic";font-size:22px;color:#fff;text-align:center;padding-top:2%;padding-bottom:2%;background:#575757;margin-left:auto;margin-right:auto;}
#contact{width:100%;height:auto;background-color:#575757;float:left;padding-top:5%;padding-bottom:25px;margin-top:50px;}
#colun1{width:100%;height:auto;background-color:#575757;float:left;margin-left:0px;text-align:center;}
#colun2{width:100%;height:auto;background-color:#575757;float:right;margin-right:20px;}
#cont1{width:95%;height:auto;float:left;color:#FFFFFF;text-align:center;padding-top:50px;padding-bottom:50px;padding-left:5px;padding-right:10px;}
#cont2{width:70%;height:auto;float:left;text-align:center;padding-left:0px;padding-right:0px; margin-left:15%;}
#cont3{width:95%;height:auto;float:left;text-align:center;padding-left:5px;padding-top:50px;padding-bottom:50px;color:#FFFFFF;}
.camp1{width:100%;height:50px;float:left;}
.camp2{width:90%;height:auto;float:left;color:#FFFFFF;padding-bottom:10px;padding-left:2.5%;padding-top:10px; margin-left:5%; }
.camp3{width:40%;height:auto;margin-top:25px;float:left;text-align:center;padding-left:20px;}

#rodape{width:100%; height:auto; float:left; background:#000000; margin-left:0%;  margin-bottom:0px }
#redes{ width:95%; height:auto; float:left; margin-left:2.5%;  margin-top:25px; }

#menu-rodape{ width:100%; height:auto; float:left; margin-left:0%; margin-top:25px; } 
#copyright{width:95%; height:auto; float:left;  margin-left:2.5%; margin-top:25px; margin-bottom: 25px}
.icone-redes{ width:20%; height:75px; margin-left:10%; float:left; text-align: center }
#endereco{width:80%; height:auto; float:left; text-align:center; color:#FFFFFF; margin-top:30px; margin-bottom:30p; margin-left:10%; font-size:10px }
	
	
	
#industria-brasileira{ width:50%;height:auto; float:left;  margin-top:0px; margin-right:0px; margin-left:25%; text-align:center;}
.menu2{ width:100%; text-align:center; float:left; text-align:center; font-size:10px; margin-top:20px; margin-left:0px; }
.menu2:hover{ color:#FF6600;} 
}