/* reset */

* { margin: 0px; padding: 0px; text-align: justify; font-family: verdana; text-decoration: none; }

u {text-decoration:underline;}

/* corpo */

body { background:#FFF; }

.fundo-blu { width: 100%; height: auto; background:#1E3B8F; padding: 50px 0px; margin: auto; display: block; }

.fundo-azul { background: #0298FF; padding: 30px 0px; }
.fundo-branco { background: #FFFFFF; padding: 10px; color: #000; border-radius: 15px; }
.fundo-branco p{ padding: 10px; }

.link { width:390px; height:auto; display:table; background:#F2F2F2;}

.link1 { width:390px; height:auto; display:table;}

.link-servicos a { background: #0293FC; padding:6px; border-radius: 5px; margin:3px; color:#000; font-size:12px; box-shadow: 1px 1px 1px #000; display: table; float: left; }

.link-servicos h2 { color:#000; }

.link-servicos a:hover { background: #000; color:#fff; }

.link-servicos-w a { background: #0F9; padding:6px; border-radius: 5px; margin:3px; color:#000; font-size:12px; box-shadow: 1px 1px 1px #000; display: table; float: left;  }

.link-servicos-w h2 { color:#000; }

.link-servicos-w a:hover { background: #000; color:#fff; }

ul { widith: 100%; display: table; }

section { width: 95%; padding: 0px 1%; margin: 25px auto; display: table;  }

.zap { width: 15px; height:15px; float: left; display: block; text-align:center; margin:3px 0px 0px 0px; } 

.zap2 { width: 10px; height:10px; float: left; display: block; text-align:center; margin:3px 0px 0px 0px; } 

/* theme */

#skin { width: 100%; max-width: 1360px; margin: 0px auto; background: #FFFFFF; }

a { color: #000; }

a:hover { color: #666; }

p { margin: 20px 0px; font-size: 17px; }

li { font-size: 17px; margin-left: 20px;}

h1 { font-size:29px; text-align: center; margin: 60px auto; }
section h2 { font-size:23px; }
.primaria { color: #F31; }

.secundaria { color: #B71C00; }
.basico { color: #333; }
.bgprimaria { background: #F31; }
.bgsecundaria { background: #B71C00; }
.bgbasico { background: #333; }

.whatsapp { width: 60%; margin: 10px auto; display: none; }
.whatsapp img { width: 100%; border-radius: 100px; }

/* Whatsapp */
.whatsapp { 
    position: fixed; width: 76px; height: 76px; margin: 0; padding: 0px; 
    right: 30px; bottom: 30px; display: table; z-index: 10000;
    box-shadow: 0 0 0 0px rgba(40,135,106,1); background: #fff; border-radius: 100%;
    animation: pulse 1s; animation-iteration-count: infinite; }
.whatsapp img { width: 60%; padding: 20%; z-index: 100; }
/* Whatsapp */

/* Keyframe Whatsapp*/
@keyframes pulse {
    from { box-shadow: 0 0 0 0px rgba(40,135,106,1); }
    to { box-shadow: 0 0 0 45px rgba(40,135,106,0); }
}

@-webkit-keyframes pulse {
    from { box-shadow: 0 0 0 0px rgba(40,135,106,1); }
    to { box-shadow: 0 0 0 45px rgba(40,135,106,0); }
}
.whatsappb img { width: 152px; height: auto; position: fixed; margin: 0; padding: 0px; 
    right: 69px; bottom: 108px; display: table; z-index: 10; }
/* Keyframe Whatsapp*/

.info_header { width: 100%; background: #FFF; display: table; border-top: 9px solid #3990EC; padding: 0px; text-align: center; font-weight: 600; color: #000; padding: 0px; }

/*** Header ***/
header { position: relative; width: 90%; padding: 0 5%; background: rgba(255,255,255,.1); display: table; z-index: 900; }

header .logo { width: 17%; margin: 1px 0; float: left; }
header .logo img { width: 100%; }

header .menu { width: 50%; margin: 30px 0; float: right; }
header .menu #menu ul { width: auto; float: right; list-style: none; display: table; }
header .menu #menu ul li { position: relative; float: left; display: table; }
header .menu #menu ul li a { font-size: 16px; font-weight: 300; font-weight: 0; margin: 3px 5px; padding: 10px; background: linear-gradient(#ccc,#fff); color: #000; display: block;  border: solid 1px rgba(187,187,187,.9); border-radius: 9px; }
header .menu #menu ul li:hover a { background: linear-gradient(#000,#333 ); color: #fff; border: solid 1px; }
header .menu #menu ul li ul { position: absolute; width: auto; display: none; background: #000000; border-radius: 0px; z-index: 5000; }
header .menu #menu ul li ul li { float: none; display: table; } 
header .menu #menu ul li ul li a { font-size: 14px; width: 150px; margin: 3px; padding: 8px; border-radius: 0px; display: block; border-radius: 9px; }
header .menu #menu ul li:hover ul li:hover a { background: #FFFFFF; color: #000000; }
header .menu #menu ul li:hover ul li a { background: none; border: solid 1px rgba(187,187,187,.9); }
header .menu #menu ul li:hover ul { display: table; animation: drop 1s; }
header .menu #menu ul li .ative { background: linear-gradient(#000,#666 ); color: #fff; border: solid 1px rgba(187,187,187,.9); }
header .menu-responsivo { display: none; margin: 0px auto; z-index: 50000000; }

/*** Header ***/

/* center */
center { width: 100%; height: auto; display: table; margin: 0px; }
center #banner { width: 100%; max-height:300px; border-radius: 9px; margin-top:3px; }
center #empresa .left { width: 30%; height: auto; float: left; }
center #empresa .left img { width: 95%; border-radius: 9px; }
center #empresa .right { width: 70%; height: auto; float: right; }

center #destaque { width: 24%; padding: 0%; margin: 6px; float: left; font-size:12px; display: block; }
center #destaque a { min-height: 80px; text-align: left; color: #fff; }
center #destaque a:hover { min-height: 80px; text-align: left; color: #BBB8B8; }
center #destaque img { width: 100%; border-radius: 15px; }
center #destaque h2 {  text-align: center; color: #E0E0E0; font-size: 23px; margin: 2px; }
center #destaque p { min-height: 80px; text-align: left; color: #fff; }

center #servicos { width: 11%; height: 230px; margin: .2%; padding: .2%; float:left; text-align:center; display:table; }
.servicos { width: 340px; height: auto; float: left; margin: 0px 10px 0px 0px; }
center #servicos img { width: 90%; margin: 3%; border-radius: 100%; }
center #servicos h1 { height:33px; font-size: 13px; text-align: center; }

center #info { display: table; }
center #info h3 { margin: 50px 0px; text-align: center; font-size: 19px; }

center #contato .left { width: 30%; float: left; text-align: right; }
center #contato .left img { margin: 10px 20px; border-radius: 9px; }
center #contato .right { width: 70%; float: right; }
.contatos { width: 90%; height: 390px; padding: 50px; margin: 0px auto 60px auto; display: block; color: #fff; background:#1E3B8F; border-radius: 15px; }
.contatos-f { width: 49%; height: 150px; float: left; margin: 60px 0px 10px 0px; }
.contatos h1 { font-size: 39px; color: #fff; margin: 30px 0px 10px 0px; text-align: center; }
.contatos h2 { font-size: 23px; color: #fff; text-align: center; }
.contatos h3 { font-size: 21px; color: #fff; text-align: center; }
.contatos p { font-size: 19px; color: #fff; margin: 20px 0px; text-align: center; }

.botao-cc  { width: 100%; height: 30px; float: left; margin: 0px auto; }
.botao-c  { width: 190px; height:30px; padding: 10px; margin: auto; font-size:19px; border-radius: 19px; border: 2px solid #fff; background: linear-gradient(#004CFF,#0095C3 ); text-align: center; font-weight: 100; }
.botao-c a{ color: #FFF; }
.botao-c a:hover{ color: #000000; }

.botao-t  { width: 100%; height: auto; padding: 10px; margin: auto; font-size:13px; border-radius: 19px; border: 2px solid #fff; background: linear-gradient(#0095C3,#05C2FC ); text-align: center; }
.botao-t a{ color: #FFF; }
.botao-t a:hover{ color: #000000; }

.bt-whats { width: 200px; font-size: 21px; text-align: center; background: #00AF09; color: #FFFFFF; padding: 20px; border-radius: 30px; margin: 30px 0px 0px 10px; }

.bt-whats a { color: #ffffff; }

.bt-whats a:hover { color: #000000; }



.testemunhos { width: 21%; height: 200px; background: #fff; border: 0px solid #eee; float: left; margin: 1%; padding: 10px; border-radius: 9px; }

.testemunhos img { width: 22%; height: auto; text-align: center; border-radius: 50%; }

.testemunhos p { width: 100%; height: 200px; font-size: 16px; color: #000; float: left; }



/* center */

.atendemos { width:45%; height:auto; float:left; margin-left:10px; }

#zonas {width:100%; height:auto; float:left; font-size:11px; display: none; color:#999; }

#zona {width:100%; height:auto; float:left; font-size:11px; display: table; color:#999; }

#hidraulica{ width:275px; height:330px; float:left; display:table; margin:15px; text-align:center; border-radius:9px; }
#hidraulica p { width: 100%; }

#encanador{ width:275px; height:330px; font-size: 13px; display:block; margin:15px; text-align:center; border-radius:9px; float:left; }
#encanador img { width: 100%; height: auto; }
#encanador p { width: 100%;  }

#categoria {width:100%; height:auto; float:left; font-size:11px; display:table; color:#999; margin-top:30px;}

#caça_vazamentos{ width:275px; height:330px; display:table; margin:15px; text-align:center; border-radius:9px; float:left; font-size: 12px; }
#caça_vazamentos img { width: 100%; height: auto; }
#caça_vazamentos p { width: 100%; }

#telhadista { width:275px; height:330px; float:left; display:table; margin:15px; text-align:center; border-radius:9px; font-size: 12px; }
#telhadista img { width: 100%; height: auto; }
#telhadista p { width: 100%; }

#encanadores { width:90%; height:auto; float:left; font-size:13px; display:table; margin: auto; }
#encanadores img { width: 100%; height: auto; }
#encanadores ul { width:99%; margin: auto; }

#eletricista { width:275px; height:330px; float:left; display:table; margin:15px; text-align:center; border-radius:9px; }
#eletricista p { width: 100%; }
#eletricista img { width: 100%; height: auto; }

.service h1{ margin: 30px 0px; }

.service p{ margin: 10px 0px; }

.botao-w  { width: 190px; height:30px; padding: 10px; margin: 0px auto 30px auto; font-size:19px; border-radius: 19px; border: 2px solid #fff; background: linear-gradient(#004CFF,#0095C3 ); text-align: center; }

.botao-w a{ color: #FFF; height:30px; }

.botao-w a:hover{ color: #000000; }

.img-conta-alta { width:15%; height:auto; float:left; margin:6px; }

.conta-alta { width:80%; height:auto; float:left; margin:6px; }

#desentupidora{ width:275px; height:330px; display:table; margin:15px; text-align:center; border-radius:9px; float:left;}
#desentupidora p { width: 100%; }

.desentupidora-em { width:50%; height:auto; display:table; color:#CCC; float:left; }

.desentupimento-de { width:17%; height:auto; float:left; font-size:11px; background: #00A3FF; margin:6px; padding:10px; border-radius:3px; }

.desentupimento-de a{ color: #fff; }

.desentupimento-de a:hover{ color: #eee; }

.telhadista-em { width:50%; height:auto; display:table; color:#CCC; float:left; }
.telhadista-em a{ font-size: 19px; }
/* footer */

footer { width: 99%; padding:90px 6px; background: #1E3B8F; color: #FFF; display: table; }
footer p{ text-align: center; font-size: 14px; font-weight: 300; }

#direitos { width:98%; height:20px; background-color:#3990EC; color: #000; float:left; display:table; padding:13px; text-align:center; }

/* footer */



/* responsive */

@media only screen and (max-width: 960px){
    center #servicos { width: 48%; }
    header #header .left, header #header .right { width: 100%; float: none; margin: 0px; padding: 0px; z-index: 10; }
	#banner { width: 100%; height:300px; }
    header #header .left img { width: 100%; }
    header #header .right h3 { margin: 0px; text-align: center; }
				
    /*** header ***/
    header .logo { width: 40%; }
    header .menu { width: 30%; margin: 30px 0; }
    header .menu #menu { position: fixed; width: 31%; height: 100%; padding: 0 10%; top: 0; left: 0; background: rgba(0,0,0,.8); display: none; z-index: 10; }
    header .menu #menu ul { width: auto; float: left; margin: 0px auto; }
    header .menu #menu ul li { float: left; }
    header .menu #menu ul li a .icons { display: block; }
    header .menu #menu ul li a { padding: 30px; margin: 0px; display: block; }
    header .menu #menu ul li a:hover { background: #000000; color: #FFFFFF; }
    header .menu-responsivo, header .menu #menu #close { display: block; }
    /*** header ***/

center #destaque { width: 98%; margin: 0px; }
center #empresa .left { width:100%; height: auto; margin:5px; }
center #empresa .right { width: 95%; height: auto; margin:5px; }
}

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

	section { width: 98%; padding: 0px 0%; margin: 25px auto; display: table;  font-size:12px; }

 header #header .left, header #header .right { width: 100%; float: none; margin: 0px; padding: 0px; }

	#banner { width: 100%; height:150px; }

	.link-servicos a { width: 80%; border-radius: 19px; margin: 6px auto; float:none; font-size:19px; color: #ccc; box-shadow: 1px 1px 1px #000; text-align: center; }

	.link-servicos-w a { width: 80%; border-radius: 19px; margin: 6px auto; float:none; font-size:19px; box-shadow: 1px 1px 1px #000; text-align: center; }

.servicos { width: 100%; margin: 0px 0px 20px 0px; }
	
#encanador {width:98%; margin:0px; }

#encanador img {width:98%; height: auto; }

#encanadores {width:98%; height: auto; margin:0px; }
#encanadores p{ width: 98%; }

#encanador img {width:98%; height: auto; }
#encanador p{ width: 98%; }

#eletricista {width:98%; height: auto; margin:0px; }
#eletricista p{ width: 98%; }
#eletricista img {width:98%; height: auto; }

header #header .left img { width: 100%; }
header #header .right h3 { margin: 0px; text-align: center; }
header #header .right h5 { margin: 0px; text-align: center; font-size:15px; }

#encanadores h1 { font-size:23px; }

header .menu-responsivo, header .menu #menu #close { display: table; }

    /*** header ***/

header .logo { width: 70%; }

    /*** header ***/

	

	.contatos { width: 90%; height: 550px; padding: 10px; }

	.contatos-f { width: 93%; height: auto; margin: 10px 0px; }

	.contatos h1 { font-size: 36px; }

	.contatos h2 { font-size: 17px; }

	.contatos h3 { font-size: 26px; }

    .contatos p { font-size: 19px; }

	

center #destaque { width: 98%; margin: 20px; }
#telhadista {width: 98%; height:auto; font-size: 16px; margin: 20px 0px; padding: 5px;  }
	#telhadista img {width:98%; height:auto; }
	#telhadista p{ width: 98%; }
	
	.telhadista-em { width: 98%; }
	.telhadista-em p{ width: 98%; padding: 2px; }
	.telhadista-em a{ font-size: 19px; }

.testemunhos { width: 98%; height: auto; }
.testemunhos p{ width: 98%; height: auto; }

	.desentupimento-de { width:90%; height:auto; float:left; font-size:15px; background: #CCC; margin:3px; padding:3px; }

	#caça_vazamentos {width:100%; height:auto; margin:15px 0px; }
	#caça_vazamentos img {width:100%; height:auto; margin:15px 0px; }
#caça_vazamentos p{ width: 98%; padding: 2px; }
#caça_vazamentos a{ font-size: 19px; }
	

	center #contato .left { width: 95%; float: right; }

	center #contato .left img { width: 95%; float: right; }

    center #contato .right { width: 95%; float: right; }

	

	.img-conta-alta img {width:85%; height:auto; float:left; }

	center #banner { width: 100%; }

	.whatsapp { display: table; }

	

	.zap { width: 15px; height:15px; float: left; display: table; } 

    .zap2 { width: 10px; height:10px; float: left; display: block; } 



	.prev { display: none; }

    .next { display: none; }

	

	.link { width:100%; }

    .link1 { width:100%; }

	h1 { font-size:23px; text-align: center; }

    h2 { font-size:19px; text-align: center; }

center #empresa .left { width:100%; height: auto; margin:5px;}

center #empresa .right { width: 95%; height: auto; margin:5px; }

.img-conta-alta {width:95%; height:auto; float:left;}

.conta-alta {width:95%; height:auto; float:left;}

.atendemos { width:95%; height:auto; float:left; margin-left:3px; }

footer .left { width: 95%; float: left; }

footer .right { width: 95%; float: left; }

}

@media only screen and (max-width: 480px){
header #header .left, header #header .right { width: 100%; float: none; margin: 0px; padding: 0px; }
#banner { width: 100%; height:300px; }
#telhadista img {width:130%; height:auto; }

header #header .left img { width: 100%; }
header #header .right h3 { margin: 0px; text-align: center; }
header #header .right h5 { margin: 0px; text-align: center; }

center #destaque { width: 98%; margin: 0px; text-align: center; }
center #empresa .left { width: 100%; height: auto; margin:5px; }
center #empresa .right { width: 95%; height: auto; margin:5px; }

}