/*A criação é silenciosa. Origem e resultado, toda criação está sujeita a isso*/
@import url(animacoes.css);
@import url(popup.css);

:root{
	--azul-a:#1d81c1;
	--cinza:#f1f1f1;
	--pendente:#c1b71d;
	--feito:#91c11d;
	--feito-h:#b7eb39;
	--cancela:#bd003d;
	--cancela-h:#e51a5b;
	--janela-linha:#dfdfdf;
}

*{margin:0; padding:0; text-decoration:none; border:none; list-style:none; position:relative; font-size:0;}
input[type="button"]{color:transparent;}

body{font-family:Arial, Helvetica, sans-serif; background:#ffffff;}

.base{width:100%; margin-right:auto; margin-left:auto;}

.none{display:none;}

.inline{display:inline-block; vertical-align:top;}
.t-cell{display:table-cell;}
.v-top{vertical-align:top;}
.v-mid{vertical-align:middle;}

.a-left{text-align:left;}
.a-right{text-align:right;}
.a-center{text-align:center;}

.block{display:block;}
.tabela{display:table;}
.borda{border:solid 1px;}

.b-dir{border-right:solid 1px #ccc;}

.m-top{margin-top:20px;}
.m-bot{margin-bottom:10px;}
.m-left{margin-left:10px;}
.m-l20{margin-left:20px;}
.m-t10{margin-top:10px;}

.padding{padding:20px;}
.pad-10{padding:10px;}
.pad-5{padding:5px;}
.pr-10{padding-right:10px;}

.ctitulo{position:absolute; font-size:14px; pointer-events:none; left:20px; top:20px; color:#333333;}
.bg-none{background:none !important;}
.float-r{float:right;}
.float-l{float:left;}


.w50{width:calc(50% - 10px);}

.mensagem div *{font-size:12px; color:#ffffff;}

.readonly{opacity:0.5; pointer-events:none;}

.botao{background:#e3e3e3;}
	.botao div{color:#ffffff; font-size:24px; text-align:center; text-transform:uppercase;}

.ns{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

img{width:100%;}

.loading, .load{position:fixed; background:#ffffff90; height:100%; width:100%; z-index:3; text-align:center; display:none; margin-top:0; top:0;}

.loading .carregando{bottom:10px; position:fixed;}

.pg-load{position:absolute; z-index:+2; width:100%; text-align:center; display:none; bottom:0;}
	.pg-load .carregando-p{text-align:center; left:50%;}


.fixo{position:fixed;}
	
.topo{background:url(../images/topo_f.jpg) no-repeat; width:100%; height:400px;}

	.topo .logo{position:absolute; left:50%; top:50%; margin-top:40px; transform:translate(-50%, -50%); width:160px; pointer-events:none;}
		.topo .logo .sombreado{background:#000000; top:50%; left:50%; width:100%; padding-bottom:100%; position:absolute; transform:translate(-50%, -50%); border-radius:50%; filter:blur(20px);}
		
	
	.topo.fixo{height:60px; z-index:2; background:none;}
		.topo.fixo .logo{display:none;}
	
	
	.topo nav{top:20px; position:absolute;}
		.topo ul{display:flex; flex-wrap:wrap;}
			.topo ul li{margin-right:20px; margin-bottom:20px; font-size:18px; background:#c7c7c7; color:#333333; padding:10px; transition:all 0.2s;}
				.topo ul li *{font-size:1em;}
				.topo ul li a{padding:10px; color:#333333;}
				
				.topo ul li:hover{background:#03d1c4; cursor:pointer;}
				

	section:not(.galeria){margin-bottom:190px;}

	section h1{font-size:40px; color:#333333; margin-bottom:40px;}
	
	
	section .prumo{z-index:1;}
	
	section h2:has(.icone){display:flex;}
	section .icone{max-width:40px; margin-top:-7px; margin-left:20px;}
		section .icone img{width:100%; max-height:40px;}
				
			
	
	section .caixa{position:absolute; width:35%; height:calc(100% + 20px); border:solid 1px #000000; left:-12px; top:50%; transform:translateY(-50%);}
		
		section .texto{width:70%;}
		
		section .texto h2{font-size:28px; margin-bottom:20px; margin-top:20px;}
		
		section .texto p{font-size:18px; margin-bottom:10px; text-align:justify; z-index:1;}
		
		section ul li:not(li:has(img)){font-size:22px; margin-left:40px; padding-top:5px; padding-bottom:5px; list-style:circle; z-index:1;}
		
		
		#clientes ul, #fornecedores ul{display:flex; flex-wrap:wrap; width:100%; justify-content:flex-start;}
			#clientes ul li, #fornecedores ul li{margin-right:20px; margin-bottom:20px; width:calc(20% - 22px); padding-bottom:calc(20% - 22px); border:solid 1px #000000; border-radius:30px; overflow:hidden;}
				#clientes ul li img, #fornecedores ul li img{position:absolute;}
		
		#clientes .caixa{width:70%;}
		
		#clientes h1{margin-bottom:60px;}



.ic-menu{background:#078fc9; width:40px; padding:20px; display:none;}
	.ic-menu div{width:100%; height:7px; background:#ffffff; margin-bottom:7px;}
	.ic-menu div:last-child{margin-bottom:0;}



.formulario{margin-top:40px;}



.resultado{border:solid 1px; margin-top:20px; display:none;}
	.resultado div{font-size:18px; color:#333333; padding:20px;}
	
	.sucesso{border-color:var(--feito);}
		.sucesso *{font-size:inherit;}

.ctitulo{font-size:16px; color:#000000; position:absolute; left:20px; top:20px; transition:all 0.2s; opacity:1;}
	.ctitulo.foco{opacity:0.2;}
	.ctitulo.preenchido{font-size:9px; top:-4px; background:#ffffff; padding-left:3px; padding-right:3px;}
	
	.formulario input, .formulario textarea{padding:20px; border:solid 1px #000000; width:100%; font-size:16px;}
	
	.formulario .campo{margin-bottom:20px;}
	
	.formulario .botao > div{padding:20px;}


	
	.cores{display:flex; position:absolute; right:20px; bottom:20px;}
	.cores li{width:30px; height:30px; margin-right:10px; list-style:none;}
	
	.vermelho{background:#F00;}
	.amarelo{background:#FF0;}
	.verde{background:#0C3;}
	.azul{background:#069;}
	

	#atividades header{background:#343434; overflow:hidden;}
		
		#atividades header img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
		
		.filtro-vermelho{filter:url(#vermelho);}
		.filtro-amarelo{filter:url(#amarelo);}
		.filtro-verde{filter:url(#verde);}
		.filtro-azul{filter:url(#azul);}
		
		#atividades header h2{font-size:24px; color:#ffffff;}
		#atividades header h1{font-size:100px; color:#ffffff;}
	
	#atividades .texto{text-align:right; width:100%;}
		#atividades .texto .padding{display:flex; flex-wrap:wrap; justify-content:flex-end;}
		#atividades .texto h2{width:100%;}
		#atividades .texto ul{width:70%; text-align:left; margin-top:8%;}
		
		#atividades .caixa{right:-12px; left:auto;}
		
		#atividades .texto ul li{padding-top:10px; padding-bottom:10px;}
	
	
	.fundo-azul{background:#078fc9; height:400px; width:100%; transform:skewY(-4deg);}
	.fundo-verde{width:100%; background:#03d1c4; margin-top:-300px;}
	
	.fundo-verde::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 50%;
	  background-color: inherit;
	  transform: skewY(4deg);
	  transform-origin: bottom;	  
	}
	

	.fundo-marrom{width:100%; background:#77645d; margin-top:-40px;}
	
	#galeria h1{color:#ffffff;}
	
	.coluna{display:flex; align-items:center;}
	
	#galeria{padding-bottom:100px;}
	
		.galeria{display:flex;}
			.galeria nav{width:180px; margin-right:60px;}
				.galeria nav ul li{font-size:18px; color:#333333;}
					.galeria nav ul li a{color:#000000; font-size:1em;}
					
					.galeria nav ul li.ativo a{font-weight:bolder;}
				
			.galeria .itens{display:flex; flex-wrap:wrap; padding-left:40px; padding-top:10px; width:100%;}
				.galeria .itens li{margin-right:20px; margin-bottom:20px; width:calc(20% - 20px); padding-bottom:20%; overflow:hidden;}
					.galeria .itens li img{position:absolute; left:50%; top:50%; height:100%; transform:translate(-50%, -50%); object-fit:cover;}
					
					
		.botao.ativo{background-image:linear-gradient( to right, #078fc9, #1aafef);}			
			.botao.ativo:hover{cursor:pointer;}
			
			
			.formulario .erro{border:solid 1px #b40000;}
	
	.v-topo{
		position:fixed; bottom:20px; width:30px; height:30px; background:#000000; border-radius:50%; display:flex; align-items:center;
		justify-content:center;
		left:50%;
		transform:translateX(-50%);
		z-index:9;
	}
		.v-topo div{border-right:solid 3px #ffffff; border-top:solid 3px #ffffff; width:10px; height:10px; transform:rotate(-45deg);}
	
	
	
	
	
	#map-canvas{width:100%; height:100%;}
		#map-canvas iframe{width:100%; height:100%;}
					
	
	.voltar{background:#333333; position:fixed; left:0; bottom:0; z-index:1;}
		.voltar div{padding:20px; color:#ffffff; font-size:30px;}	
		
		.voltar:hover{background:#000000; cursor:pointer;}
		
		
	
	.whats {
		position: fixed;
		right: 20px;
		bottom: 20px;
		z-index: 4;
		filter: drop-shadow(0 0 10px #00000050);
		width: 64px;
		transition: all 0.2s;
	}
	
	
				
			.galeria .divisa{width:40px; position:absolute; left:180px; height:calc(100% + 20px); transform:translateX(-50%); z-index:1;}
	
	.rodape .padding{display:flex;}
	.rodape article{padding-right:20px; padding-left:20px; border-right:solid 1px #ffffff; max-width:50%;}
		.rodape article:last-child{border-right:none;}
		.rodape article img{width:60px; margin-right:20px;}
		
		.rodape .coluna p{color:#ffffff90;}
		.rodape article p{font-size:16px; color:#ffffff; text-align:left;}
			.rodape article p *{font-size:1em;}
			.rodape article p a{padding:5px; background:#09C; font-size:9px; color:#ffffff; border-radius:6px;}
		
		.rodape .copy{background:#333333;}
			.rodape .copy div{color:#ffffff; font-size:14px; justify-content:flex-end;}
				.rodape .copy div *{font-size:1em; color:#F90;}
@media screen and (max-width: 1100px){
	
	#fornecedores h1 .caixa{width:370px;}
	#fornecedores .preenchimento{width:calc(100% - 370px);} 
	
	.galeria .itens li{width:calc(25% - 20px); padding-bottom:calc(25% - 20px);}
	
	
	
}
@media screen and (max-width: 990px){
	
	.topo nav{display:none;}
	
	.ic-menu{display:block;}
	
	#clientes h1{font-size:30px;}
	
	#orçamento .caixa{width:290px;}
	#orçamento .preenchimento{width:calc(100% - 300px);
}

@media screen and (max-width: 800px) {	
	#sobre .ilustracao{right:80px; width:120px;}
	#clientes h1{font-size:25px;}
	
	.galeria .itens li{width:calc(33% - 20px); padding-bottom:calc(33% - 20px);}
	
	.rodape article{max-width:100%; width:100%; margin-bottom:20px; border-right:0;}
	
	.rodape .padding{flex-wrap:wrap;}
}

@media screen and (max-width: 700px){
	#atividades header h1{font-size:80px;}
	#clientes h1{font-size:20px;}
	
	#clientes ul li{width:calc(25% - 22px); padding-bottom:calc(25% - 22px);}
	
	.galeria .itens li{width:calc(25% - 20px); padding-bottom:calc(25% - 20px);}
	.galeria .divisa{display:none;}
	
	.galeria{flex-wrap:wrap;}
	.galeria nav{margin-bottom:20px; width:100%; border-bottom:solid 1px #000000; margin-right:20px;}	
		.galeria nav ul{display:flex; flex-wrap:wrap;}
		.galeria nav ul li{margin-right:20px;}
		
	.galeria .itens{padding-left:0; padding-right:0;}
	
	#galeria .padding{padding-right:0;}
}
@media screen and (max-width: 600px){
	#atividades header h1{font-size:70px;}
	#atividades .preenchimento{width:calc(100% - 200px);}
	#atividades .caixa{width:200px;}
	
}
@media screen and (max-width: 550px) {	
	#sobre .ilustracao{right:30px; width:80px;}	
	#sobre .caixa{width:170px;}
	
	#sobre .preenchimento{width:calc(100% - 180px);}
	
	
	
	section .texto{width:86%;}
	#atividades .ilustracao{left:40px;}
	#atividades .texto ul{width:calc(100% - 60px);}
	
	#atividades header h1{font-size:50px;}
	
	#clientes h1{font-size:25px;}
	#clientes .preenchimento{display:none;}
	#clientes .caixa{width:420px;}
	
	#clientes ul li{width:calc(33% - 22px); padding-bottom:calc(33% - 22px);}
	
	#fornecedores .preenchimento{display:none;}

	#fornecedores ul li{width:calc(33% - 22px); padding-bottom:calc(33% - 22px);}
	
	#orçamento .preenchimento{display:none;}
	
	.galeria .itens li{width:calc(33% - 20px); padding-bottom:calc(33% - 20px);}
	
	
		
	.rodape article{padding-right:0;}
	
}
@media screen and (max-width: 450px){
	
	#sobre .ilustracao{display:none;}
	#sobre .texto{width:100%;}
	
	#clientes h1{font-size:20px;}
	#clientes .preenchimento{display:none;}
	#clientes .caixa{width:337px;}
	
	#clientes ul li{width:calc(50% - 22px); padding-bottom:calc(50% - 22px);}
	
	#fornecedores h1{font-size:35px;}
		#fornecedores h1 .caixa{width:320px;}
	#fornecedores ul li{width:calc(50% - 22px); padding-bottom:calc(50% - 22px);}
	
	.galeria .itens li{width:calc(50% - 20px); padding-bottom:calc(50% - 20px);}
	
	#galeria h1{font-size:30px;}

}