/*
2024 - AquiZap
URL: http://aquizap.com.br
Author: Demetrius Loblein
Author URL: http://loblein.com.br
*/


/*HEADER*/

.clear{clear:both;}
	a{text-decoration:none;}
body{ margin:0 auto; background-color: var(--cor-principal);}
html{font-size:20px; font-family:arial;}


#button {
  display: block
}
.menu {
  padding: 10px;
  border: 1px solid var(--cor-clara);
  display: none
}
header.principal{ width: 100%; text-align: center;  background-color: var(--cor-principal); margin-bottom: 20px; padding-top: 10px;}

header.principal div.left{  width:16% ; text-align: left; display:inline-block; vertical-align: top; margin: 7px;}
header.principal div.center{width:54%; text-align: center; display:inline-block; vertical-align: top; margin: 0px;}
header.principal div.center a{ color: var(--contrasta-cor-principal); text-transform: uppercase;}
header.principal div.right{ width:16%; text-align: right; display:inline-block; vertical-align: top; margin: 7px; color:var(--contrasta-cor-principal);
font-size:0.6em;}

header.principal div.left img.icone-menu{ max-width:45px ; }
header.principal div.center img.logo{ max-width:190px ;}
header.principal div.right img.icone-menu{ max-width:45px ;}

header.principal h1{display:none;}



/*busca*/


content.inicial form.busca{ background-color: var(--cor-clara);; width:70%; margin:0 auto;padding:3px; margin-bottom: 20px; border-radius: 10px; text-align: center;}

content.inicial form.busca input[type="text"]{  width:80%;
	padding:10px; font-size: 1.1em;  color: var(--cor-escura); border:0;} 

::placeholder { color: var(--cor-escura); opacity: 0.8;}



	content.inicial form.busca input[type="text"]:focus{background-color:none;outline: none !important;} 


	content.inicial form.busca input[type="submit"]{ 
        float:right; ;
	    height:40px ;
		background-image: var(--lupa-busca);
		background-size:30px;
		background-position: center;	
		background-repeat:no-repeat; 
		cursor: pointer;
		z-index:99 ;
		
		width: 14%;

       background-color:var(--cor-clara);
		padding:7px; border-radius: 5px;  border:0;} 

		content.inicial form.busca input[type="submit"]:focus{ outline: none !important;} 
		
div.getbusca{max-width:500px; font-size:0.7em; margin:0 auto; background-color:var(--cor-clara);; text-align:center; border: solid 1px var(--cor-clara-media); margin-bottom:7px; border-radius: 7px;}
	div.getbusca strong{color:var(--cor-escura); text-transform:uppercase;}	
		
		
/*categorias*/


content.inicial div.categorias{ width: 100%; padding-top: 7px; padding-bottom: 7px;}

content.inicial div.categorias div.listagem{margin:0 auto; width:95% ; border-radius: 10px; 
	text-align: center;  border:solid 1px var(--cor-clara); background-color: var(--cor-clara);}
content.inicial div.categorias div.listagem div.titulo{
	margin:0 auto; padding:10px; font-size: 0.7em;  color:var(--cor-escura);}



content.inicial div.categorias div.listagem div.caixa-texto{
	max-width:800px;  margin:0 auto; padding:10px; text-align:left;}




content.inicial div.categorias div.listagem a div.box{
width:120px; display: inline-block; text-align: center; vertical-align: top; margin:10px; 


}
content.inicial div.categorias div.listagem a div.box img{
	width:110px;  margin:0px; border-radius: 100%;border:solid 1px var(--cor-clara-media);}
content.inicial div.categorias div.listagem a div.box img:hover{border:solid 1px var(--cor-escura);}

content.inicial div.categorias div.listagem a div.box div.texto{
		height:50px ; font-size: 0.8em; color:var(--cor-escura); padding-top: 7px;}


	content.inicial div.categorias div.listagem a div.box div.texto:hover{color:var(--cor-hover);}
	content.inicial div.anuncios div.listagem div.vertodos,
	content.inicial div.categorias div.listagem div.vertodos{
		width: 90%; margin:0 auto; text-align: center; margin-bottom: 10px;}

	content.inicial div.anuncios div.listagem div.vertodos a,
		content.inicial div.categorias div.listagem div.vertodos a{
			padding:7px; border-radius: 5px; background-color:var(--btn-normal); font-size:0.9em ; margin:10px ; color:var(--cor-clara); line-height: 2;}
			content.inicial div.anuncios div.listagem div.vertodos a:hover,
			content.inicial div.categorias div.listagem div.vertodos a:hover{background-color:var(--btn-hover);}
	

content.inicial div.anuncios div.listagem div.box{max-width:500px; min-height:100px ; background-color: var(--cor-clara);
	
	
	margin: 0 auto; margin-bottom: 10px; padding-bottom: 10px; border: solid 1px #ccc; border-radius: 7px; text-align: left; clear: both;} 

content.inicial div.anuncios div.listagem div.box div.box2{ min-height:100px ; padding-bottom: 10px;clear: both;
 }

content.inicial div.anuncios div.listagem div.box div.box2 span{font-size: 0.9em; line-height: 1.4; font-weight: 600; margin-top: -10px; }
content.inicial div.anuncios div.listagem div.box div.box2 span small{font-size: 0.9em; line-height: 1; 
	font-weight: 400; color:var(--cor-escura); clear: both;}


content.inicial div.anuncios div.listagem div.box div.box2 img.status{width:40px;  margin:10px;  margin-top: -40px; float: right;} 

	content.inicial div.anuncios div.listagem div.box div.box2 img.logo{width:90px; height: 90px;  margin:10px; margin-left: 20px; margin-top:20px ;  border-radius: 100%;border:solid 1px var(--cor-clara-media); 
		float: left;} 
/*header categorias*/





content.inicial div.header-categorias{max-width:500px;height:100px ; text-align: center; background-color: var(--cor-clara);; margin: 0 auto; margin-bottom: 10px; border: solid 1px #ccc; border-radius: 7px; text-align: left;} 
content.inicial div.header-categorias div.logo{width:84px; display:inline-block; vertical-align: top; margin:5px; } 

content.inicial div.header-categorias div.logo img{width:100%; border-radius: 100%;border:solid 1px var(--cor-clara-media)} 




	content.inicial div.header-categorias div.texto{ width:60%; vertical-align: top; display:inline-block;
		color:var(--cor-escura); font-size: 1.3em;padding-top: 10px;} 

		content.inicial div.header-categorias div.texto small{font-size: 0.6em;} 
	content.inicial div.header-categorias div.aponta{width:60px; display:inline-block; vertical-align: top; margin:5px;} 

	content.inicial div.header-categorias div.aponta img{width:100%;} 







/*listagem de anuncios*/

content.inicial div.anuncios div.propaganda-vercategoria{max-width:500px; margin: 0 auto; margin-bottom: 10px; font-size: 0.6em; color:var(--contrasta-cor-principal);} 
content.inicial div.anuncios div.propaganda-vercategoria img{width:100%; margin: 0 auto;} 


content.inicial div.anuncios div.listagem{margin:0 auto; width:95% ; border-radius: 10px; 
	text-align: center;}


	

content.inicial div.anuncios div.listagem div.box{max-width:500px;min-height:140px ; background-color: var(--cor-clara); margin: 0 auto; margin-bottom: 10px; border: solid 1px #ccc; border-radius: 7px; text-align: left;} 



content.inicial div.anuncios div.listagem div.box div.acao{width:99%; text-align: center;  min-height:30px ; margin: 0 auto;}
content.inicial div.anuncios div.listagem div.box div.acao img.sim{
	border-radius: 10%;border:solid 1px #ccc; width:15%; margin:  3px; display:inline-block;

}


content.inicial div.anuncios div.listagem div.box div.acao img.nao{pointer-events: none;
	border-radius: 10%;border:solid 1px #ccc; width:15%; margin:  3px; display:inline-block;
filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
	 opacity : 0.4
}

/*propaganda*/

content.inicial div.propaganda{ width: 100%; padding-top: 7px; padding-bottom: 7px;}
content.inicial div.propaganda div.listagem{text-align: center; margin:0 auto; width:95% ; border-radius: 10px; border:solid 1px #cbeded; background-color: azure;}

		

footer{width: 100%; min-height: 100px;}
footer{clear:both; color:var(--contrasta-cor-principal); font-size:0.7em; text-align:center;width:100%;background-color:var(--cor-rodape); margin:0 auto; margin-top:50px;}
footer div{margin:20px;text-align:left;  vertical-align:top;}
footer div.texto{float:left;max-width: 300px; }
footer div.logos{float:right;max-width: 300px; }
footer div.logos img.logo{ max-width:120px;}


	@media (max-width: 800px) {


header.principal div.center img.logo{ max-width:160px ; margin-top: 7px;}
content.inicial form.busca input[type="text"]{width: 70%;}
content.inicial div.anuncios div.propaganda-vercategoria{width:95%;} 


content.inicial div.categorias div.listagem a div.box{	min-width:95px; margin:7px; }
content.inicial div.categorias div.listagem a div.box img{width:85px; 	font-size: 1em;}
content.inicial div.categorias div.listagem a div.box div.texto{height:45px ; font-size: 0.6em;  padding-top: 5px;}
content.inicial div.anuncios div.listagem div.box div.box2 img.logo{width:80px; height:80px ; margin:10px; margin-left: 10px;} 		




/*header categorias*/


content.inicial div.header-categorias{width:95%; height:85px;}
content.inicial div.header-categorias div.logo{width:70px;margin:3px; } 



	content.inicial div.header-categorias div.texto{ width:60%; font-size: 1em;padding-top: 7px;} 

		content.inicial div.header-categorias div.texto small{font-size: 0.6em;} 
	content.inicial div.header-categorias div.aponta{width:40px; margin:3px;} 

	


/*propaganda*/


content.inicial div.propaganda div.listagem a div.box{width:280px; margin:7px;}
content.inicial div.propaganda div.listagem a div.box img{width:280px; }

footer div{padding:7px; font-size:0.9em;}
footer div.texto{float:none;width: 80%; margin:0 auto; }
footer div.logos{float:none;width: 80%; margin:0 auto;  }







div.categorias div.listagem form.cadstro div.box{width: 98%; margin: 7px; margin-bottom: 10px; color:var(--cor-escura); font-size: 0.9em; display: inline-block; vertical-align: top;}
div.categorias div.listagem form.cadstro div.box label input[type='text'],
div.categorias div.listagem form.cadstro div.box label input[type='file'],
div.categorias div.listagem form.cadstro div.box label input[type='tel']{width:90% ; padding:5px; font-size: 1.2em; color:var(--cor-escura); margin-top: 5px; border:solid 1px var(--cor-escura); border-radius: 7px;}
div.categorias div.listagem form.cadstro div.box label input[type="text"]:focus,
div.categorias div.listagem form.cadstro div.box label input[type="tel"]:focus{ outline: none !important;} 
div.categorias div.listagem form.cadstro div.box label div.conta-letras{font-size: 0.8em; border:0px;color:var(--cor-escura);}
div.categorias div.listagem form.cadstro div.box label div.conta-letras input[type='text']{width:5% ; background: none;  border:0px; color:var(--cor-escura);}

div.categorias div.listagem form.cadstro div.box label input[type='file']{color:var(--cor-principal); }

div.categorias div.listagem form.cadstro div.box label select,
div.categorias div.listagem form.cadstro div.box label textarea{width:90% ; padding:5px; font-size: 1.2em; color:var(--cor-escura);  margin-top: 5px; border:solid 1px var(--cor-principal); border-radius: 7px;}


div.categorias div.listagem form.cadstro div.box2 input[type='reset'],
div.categorias div.listagem form.cadstro div.box2 input[type='submit']{  margin:5px;width:45%; }












			
}












@media (max-width: 720px) {

header.principal div.center img.logo{ max-width:150px ;}



content.inicial div.anuncios div.listagem div.box div.box2{font-size: 0.9em;min-height:90px; }
content.inicial div.anuncios div.listagem div.box div.box2 img.logo{width:65px; height: 65px;  margin:7px; margin-left: 7px;} 		
content.inicial div.anuncios div.listagem div.box div.acao img.sim,
content.inicial div.anuncios div.listagem div.box div.acao img.nao{	border-radius: 10%;border:solid 1px #ccc; width:15%; margin: 2px; display:inline-block;
}
	



/*header categorias*/


content.inicial div.header-categorias{width:95%; height:75px;}
content.inicial div.header-categorias div.logo{width:60px;margin:3px; } 



	content.inicial div.header-categorias div.texto{ width:60%; font-size: 0.9em;padding-top: 7px;} 

		content.inicial div.header-categorias div.texto small{font-size: 0.6em;} 
	content.inicial div.header-categorias div.aponta{width:30px; margin:3px;} 

	footer div{padding:5px; font-size:0.8em;}
footer div.texto{float:none;width: 90%;}
footer div.logos{float:none;width: 90%;}



}




