/* ...................... GERAL ................................................................................................................................................ */

html						{ height:100%; width:100%; -webkit-text-size-adjust:none; text-size-adjust:none; }

body						{ margin:0; padding:0; height:100%; width:100%; background:#eee; font-family: 'Montserrat', sans-serif; font-weight:500; font-size:16px; line-height:160%; color:#555; z-index:1; }

form						{ margin:0; padding:0; }

  fieldset					{ margin:0; padding:0; border:none; }

input, textarea, select, option			{ outline:0; }

img						{ border:none; }

a						{ color:#E60013; text-decoration:none;  -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition: all 0.3s ease; }

a:hover						{ color:#F8AE12; }

a.botao 					{ display:inline-block; background:#E60013; transition: background-color 0.3s ease; color:#fff; font-size:20px; height:50px; border-radius:25px; line-height:50px; padding:0 20px 0 20px;}
a.botao:hover					{ background:#111; }

a.botao.vermelho 				{ background:#E60013; }
a.botao.vermelho:hover				{ background:#111; }

::selection					{ background:#0B3B65; color:#fff; }
::-moz-selection				{ background:#0B3B65; color:#fff; }

.clear						{ clear:both; }

body li.clear					{ clear:both; height:0; padding:0; margin:0; width:100%; float:none; }

.hidden 					{ display: none; }

.invisivel					{ display:none; }

.tudo						{ margin:0 auto; min-height:100%; width:100%; position:relative; }

* html .tudo					{ height:100%; }

.smart_ocultar					{ display:block; }


h1						{ font-size:50px; color:#111; font-weight:200; margin:0; padding:0 0 20px 0; line-height:100%; }
h1.center					{ text-align:center; }

h2						{ font-size:40px; color:#111; font-weight:700; margin:0; padding:0; line-height:100%; }
h2.center					{ text-align:center; }
h2.branco					{ color:#fff;}
h2.produto_caracteristica			{ font-weight:700; color:#111; }

h3						{ font-size:40px; color:#111; font-weight:200; text-align:center; margin:0; padding:0; line-height:100%; }
h3.branco					{ color:#fff; }

h4						{ font-size:20px; color:#fff; font-weight:500; margin:0; padding:0; line-height:100%; }
h4.center					{ text-align:center; }

h5						{ font-size:14px; color:#fff; font-weight:400; margin:0; padding:0; line-height:100%; }
h5.center					{ text-align:center; }
h5.produto_categoria				{ color:#000;  }

/* usado na interna de contato */
h6						{ font-size:16px; color:#000; font-weight:400; margin:30px 0 0 0; padding:0; line-height:100%; }


@media only screen and (max-width : 900px) 	{
	
h1						{ font-size:30px; font-weight:400; }
h1.mobile					{ text-align:center; }

h2						{ font-size:24px; font-weight:400; text-align:center; }

h3						{ font-size:24px; font-weight:400; }


}

/* ...................... 1. CABECALHO Logotipo ............................................................................................................................................ */

.cab							{ position:relative; height:79px; background-color:#fff; padding:0; margin:0 auto; z-index:500; border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; }

	.cab_rel					{ position:relative; max-width:1200px; display: flex; align-items: center; justify-content: space-between; padding:0 40px 0 40px; margin:0 auto; z-index:3000; box-sizing:border-box; }

	.cab .logotipo					{ width:289px; height:59px; padding:10px 0 10px 0; }
	
	.cab .logotipo img				{ width:289px; height:59px; }
	
	.cab .logotipo_smart				{ display:none; width:289px; height:59px; padding:10px 0 10px 0;}
	
	.cab .menu 					{ flex-grow: 1; /* O menu ocupa todo o espaço restante */ height: 79px; display: flex; align-items: center; justify-content: center; /* Centraliza o conteúdo do menu */ }

		.menu ul				{ position:relative; display:flex; justify-content: center; margin:0; padding:0; list-style:none; }
		
		.menu li				{ margin:0; padding:0 20px 0 0; line-height:79px; height:79px; }
		
		.menu li a				{ margin:0; padding:0; color:#555; font-size:15px; z-index:99999; }
		
		.menu li a:hover			{ color:#E60013; text-decoration:none; }
		
		.menu li a.ativo			{ color:#E60013; text-decoration:none; }

			.suspenso 			{ display: none; position: fixed; /* Posiciona em relação à tela (viewport) */ top: 79px; /* Posiciona imediatamente abaixo do item de menu principal */ left: 0; width: 100vw; background-color: #111111; z-index: 99999; padding: 20px; box-sizing: border-box; }

			.menu li:hover .suspenso 	{ display: flex; /* Exibe o submenu suspenso ao passar o mouse */ }

				.suspenso-coluna 	{ position: relative; max-width: 1120px; margin: 0 auto; width:100%; }

				.suspenso-coluna ul 	{ list-style: none; display: flex; flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */ align-items: stretch; /* Garante que os itens na mesma linha tenham a mesma altura */ justify-content: flex-start; align-items: flex-start; width: 100%; padding: 0; margin: 0; }

				.suspenso-coluna li 	{ width: 25%; height:auto; line-height:110%; margin:0; padding:10px 0 10px 0; box-sizing: border-box; }

				.suspenso-coluna li a 	{ color: #fff; }

				.suspenso-coluna li a:hover 	{ color: #E60013; }


	.cab .redes 					{ height: 79px; display: flex; align-items: center; justify-content: flex-end; gap: 2px; flex-shrink: 0; /* Impede que a área de redes sociais encolha */ }

		.rede-link img 				{ width: 36px; height: 36px; display: block; transition: opacity 0.3s ease; }

		.rede-link img:hover 			{ opacity: 0.7; }

		.rede-botao 				{ height: 36px; padding: 0 15px;  background-color:#E60013; color:#fff; border-radius: 18px; /* Cantos arredondados */ display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 15px; }

		.rede-botao:hover 			{ background-color: darkred; /* Cor ao passar o mouse */ }
		
		
		
	#box_menu 					{ position: relative; /* Para manter a sua posição no fluxo normal na versão desktop */ z-index: 9000; display: flex; align-items: center; width: 100%; justify-content: space-between; }

 	#ico_menu					{ display:none; top:0; right:5px; position:absolute; cursor:pointer; width:30px; height:76px; background:url(images/smart_ico.png)no-repeat center center; z-index:9988; }

	#ico_fechar					{ display:none; position:absolute; right:0; top:0; height:76px; background:url(images/ico_fechar.png) center no-repeat #fff; width:50px; cursor:pointer; z-index:9999; }



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

	#ico_menu					{ display:block; }

	#box_menu					{ z-index:9998; position:fixed; top:0; right:-1200px; min-width:70%; background-color:#111; height:100%; padding:0 20px 0 20px; box-sizing:border-box; -webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.3); -moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.3); box-shadow:0 0 5px rgba(0, 0, 0, 0.3); }

	#ico_fechar					{ display:block; }
      
      
.cab							{ height:79px; padding:0; margin:0; }

	.cab_rel					{ align-items: flex-start; justify-content: flex-start; padding:0; }

	.cab .logotipo					{ display:none; }
	
	.cab .logotipo_smart				{ display:block; width:100%; text-align:center; box-sizing:border-box; }
		
	.cab .menu 					{ position:relative; padding:0; top:132px; /*somado o valor do cabeçalho + redes + 20px para começar o menu */ align-items: flex-start; justify-content: flex-start;  }

		.menu					{ text-align:left; }
		
		.menu ul				{ flex-direction: column; justify-content: flex-start; width:100%; }
		
		.menu li				{ margin:0; padding:10px 0 10px 0; height:auto; line-height:120%; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
		
		.menu li a				{ font-size:16px; color:#fff; }	
		
			.suspenso 			{ display: none; /* Inicialmente escondido, controlado via JS */ position: relative; /* Garanta que o submenu se abra no contexto certo */ top:0; width: 100%; flex-direction: column; padding: 10px 0 10px 10px; }

			.menu li:hover .suspenso 	{ display: none; /* Desativa o hover no mobile */ }

				.suspenso-coluna 	{ width: 100%; padding: 5px 0; }

				.suspenso-coluna li 	{ width: 100%; }

	.cab .redes 					{ height:36px; position:relative; padding:0; top:0; align-items: flex-start; justify-content: flex-start;  }

							}


/* ...................... 2. Banner ............................................................................................................................................... */


#demo_container 					{ display: block; width: 100%; margin: 0 auto 60px auto; padding: 0; position: relative; z-index: 1; overflow: hidden; background-color:#eee; }

#items_container 					{ position: relative; width: 100%; margin: 0 auto; padding: 0; z-index: 2; overflow: hidden;  }

.slide_item 						{ position: absolute; width: 100%; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out;  }

.slide_item.active 					{ opacity: 1; }

.slide_item img 					{ width: 100%; height: auto;  object-fit: cover;  max-height: 100vh; /* Garante que a imagem nunca ultrapasse a altura da viewport */ }

.banner_text 						{ position: absolute; top: 50%; left: 0; transform: translateY(-50%);  height: 30%; display: flex; flex-direction: column;  justify-content: center; background-color: rgba(0, 0, 0, 0.0); /*deixei 0.0 mas se desejar alterar para criar uma barra ao fundo para melhor destacar o texto seria bom */ color: #fff; font-size:60px; font-weight:700; line-height:100%; z-index: 3; text-align: left; padding:0 20px; box-sizing: border-box; transition: all 0.5s ease; }

.banner_text .descricao					{ font-size:36px; line-height:100%; padding:10px 0; }

.banner-botao 						{ height: 50px; padding:0;  background-color:#E60013; color:#fff; border-radius: 25px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 15px; font-weight:600; }
.banner-botao:hover 					{ background-color: darkred; color:#fff; }


@media (max-width: 900px) 				{
	
.banner_text 						{ width: 100%; left: 50%; transform: translate(-50%, -50%); /* Centraliza a caixa tanto vertical quanto horizontalmente */ font-size: 24px; text-align: center; }
.banner_text .descricao					{ font-size:18px; padding:5px 0; }

.banner-botao 						{ height:24px; border-radius: 12px; font-size: 12px; font-weight:400; }


							}




/* ...................... 3. Destaques - Produtos Inicial .............................................................................................................................................. */

.inicial_produtos					{ width:100%; padding:0; margin:0; background-color:#EEE; box-sizing:border-box; z-index:200;}
.inicial_produtos.preto					{ background-color:#333333; padding-top:60px; }

.inicial_produtos_rel					{ position:relative; max-width:1200px; padding:0 40px 60px 40px; margin:0 auto; z-index:300; box-sizing:border-box; }

	.inicial-carousel				{ display:flex; width:100%; flex-wrap: wrap; justify-content: center; margin:30px 0 0 0; padding:0; box-sizing:border-box; /* Usado apenas na página inicial para criar transição das imagens */}
	.produtos_caixa					{display:flex; width:100%; flex-wrap: wrap; justify-content: center; gap:30px; margin:30px 0 0 0; padding:0; box-sizing:border-box; }


	.proitem					{ position:relative; height:340px; flex:0 0 calc(25% - 30px); /* Subtraindo o gap da largura */ margin:0; padding:0 15px 0 15px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;  transition: all 0.3s ease; box-sizing:border-box; }
	.proitem.interna				{ flex:0 0 calc(33.3% - 30px); padding:0; /* usado para páginas internas */}
	.proitem.pdf					{ flex:0 0 calc(33.3% - 30px); padding:0; /* usado para páginas internas */ height:100%;}
		
		
        .proitem_foto					{ height:240px; padding:20px; width:100%;  display: flex; justify-content: center; align-items: center; border-radius: 6px; border: 1px solid #bbb; background:#fff;  box-sizing:border-box; }
							
	.proitem_foto img				{ height:200px; width:100%; object-fit: contain; }
	
	.proitem_foto .semfoto				{ height:200px; width:100%; }
							 

	.proitem_nome					{ height:100px; font-size:14px; line-height:120%; text-align:center; color:#666666; padding:20px;  box-sizing:border-box; }
	.proitem_nome.branco				{ color:#fff;}

	  
@media only screen and (max-width : 900px) {
	
.inicial_produtos_rel					{ padding:0 20px 0 20px; }
    
	.produtos_caixa					{  }
    
	.proitem					{ flex:0 0 calc(50% - 30px); margin:0 0 20px 0; height:100%; }
	.proitem.interna				{ flex:0 0 calc(50% - 30px); padding:0; }
	.proitem.pdf					{ flex:0 0 calc(50% - 30px); padding:0; height:100%; /* usado para páginas internas */}

	.proitem_nome					{ height:100%; padding:20px; }

}
	
	
@media only screen and (max-width : 500px) {
	
	
	.produtos_caixa					{ flex-direction: column;  }
	
	.proitem					{ height:100%; flex:0 0 calc(100% - 0px); width:100%; margin:0 0 20px 0; height:100%;   }			 
	.proitem.interna				{ height:100%; flex:0 0 calc(100% - 0px); width:100%; padding:0; }			
		
        .proitem_foto					{ height:100%; width:100%; }
							
	.proitem_foto img				{ max-width:100%; width:auto; }
							 

	.proitem_nome					{ height:100%; padding:20px; }


}


/* ...................... 4. Catálogos   .............................................................................................................................................. */

.inicial_catalogo					{ width:100%; padding:40px 0 40px 0; margin:0; box-sizing:border-box; z-index:200; background:#fff;}

  .inicial_catalogo_rel					{ position:relative; display:flex; align-items: center; justify-content: flex-start; max-width:1200px; padding:0 40px 0 40px; margin:0 auto; box-sizing:border-box; }
  
  .inicial_catalogo_rel .chamada			{ width:50%; }
  
	.chamada .descricao				{ font-size:16px; margin:20px 0 20px 0;}
	
	.chamada a.botao 				{ display:inline-block; background:#E60013; color:#fff; font-size:20px; height:50px; line-height:50px; border-radius: 25px; padding:0 20px 0 20px;}
	
	.chamada a.botao:hover				{ background:#111;}


  .inicial_catalogo_rel .imagem				{ width:50%; display:flex; gap:5px; align-items: end; justify-content: flex-end; }
  
	.imagem img					{ }
	
	.setas						{ display:flex; margin-top:20px; gap:5px; align-items: end; justify-content: flex-end; }
	
	.setas .seta 					{ height: 40px; width: 40px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; text-decoration: none; background-color: #fff; cursor: pointer; box-sizing: border-box; }

	.setas .seta:hover 				{ border-color: #E60013; }

	.setas .seta.esquerda 				{ background-image: url("images/seta_esquerda.png"); background-repeat: no-repeat; background-position: center; }

	.setas .seta.direita 				{ background-image: url("images/seta_direita.png"); background-repeat: no-repeat; background-position: center; }

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

  .inicial_catalogo_rel					{ flex-direction: column; padding:0 20px 0 20px; }
  
  .inicial_catalogo_rel .chamada			{ width:100%; margin-bottom:40px; }
  
	.chamada a.botao 				{ display:block; padding:0; text-align:center; font-size:14px;}

  .inicial_catalogo_rel .imagem				{ width:100%; margin-bottom:40px; flex-direction: column; align-items: center; }
  
	.imagem img					{ width:100%; }
  
}
	
	
/* ...................... 5. Represententates  .............................................................................................................................................. */


.representante						{ display:flex; width:100%; margin:0 auto; box-sizing:border-box; z-index:100; background:#050B17; }
  
	.representante_esquerda				{ flex:0 0 50%; background:center no-repeat; background-size:cover; position:relative; z-index:110;  }
    
		.representante_esquerda.imginicial	{ background-image:url(images/representantes.png); z-index:120;}
      
	.representante_esquerda_smart			{ display:none; }
    
	.representante_direita				{ flex:0 0 50%; position:relative; z-index:110; }
  
		.representante_rel_direita_metade	{ max-width:600px; padding:80px 40px 80px 40px; margin:0; box-sizing:border-box; z-index:200; }

	.representante_subtitulo			{ font-weight:700; padding:30px 0 30px 0; color:#888888;}
	
	.representante_texto				{ font-weight:400; padding-bottom:30px; }


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

  .representante					{ display:block; text-align:center; }

    .representante_esquerda				{ display:none; }
    
      .representante_esquerda.imginicial		{ display:none; }
      
    .representante_esquerda_smart			{ display:block; }
    
      .representante_esquerda_smart img			{ width:100%; }

    .representante_direita				{ flex:0 0 100%; margin:0; padding:0 0 20px 0; }
  
      .representante_rel_direita_metade			{ max-width:100%; margin:0; padding:20px; }
      

}
	
	
/* ...................... 6. Sobre Matata Kitoyo   .............................................................................................................................................. */


.inicial_sobre						{ display:flex; width:100%; margin:0 auto; box-sizing:border-box; z-index:100; background:#fff; }

.inicial_sobre_rel					{ display:flex; align-items: center; justify-content: center; flex-direction: column; position:relative; max-width:1200px; padding:80px 40px 80px 40px; margin:0 auto; z-index:300; box-sizing:border-box; }

.inicial_sobre_rel .sobre_subtitulo			{ text-align:center; }
  
.inicial_sobre_rel .descricao				{ text-align:center; padding:20px 0 20px 0; }
  
  

@media only screen and (max-width : 500px) {
	
	
.inicial_sobre_rel					{ padding:40px 20px 40px 20px; }
	

     
}
  

 
/* ...................... 7. Rodapé   .............................................................................................................................................. */
 

.rodape							{ background:#111; width:100%; padding:0; margin:0; box-sizing:border-box; z-index:200;}

	.rodape_rel					{ display:flex; flex-direction: column; max-width:1200px; padding:60px 40px 60px 40px; margin:0 auto; box-sizing:border-box; z-index:210;}
  
		.rodape_rel .slogan			{ font-size:14px; font-weight:300; color:#fff; padding:20px 0 20px 0; margin:0; }
  
  		.mapa_institucional			{ flex:0 0 100%; z-index:220; width:100%; text-align:center; margin:0 auto; }
  
		.mapa_menu				{ flex:0 0 100%; z-index:220; }
    



	.mapa_itens ul					{ display:flex; flex-wrap: wrap; justify-content: center; list-style:none; padding:0; margin:0; height:auto; width:100%; position:relative; }
	  
	.mapa_itens li					{ padding:0 20px 0 20px; margin:0; }
	    
	.mapa_itens li a				{ margin:0; padding:0; font-size:14px; color:#fff; font-weight:300; }
	    
	.mapa_itens li a.ativo				{ color:#FF2626; }
	    
	.mapa_itens li a:hover				{ text-decoration:none; color:#FF2626; }


@media only screen and (max-width : 900px) {
	
	.rodape_rel					{ flex-direction: column; padding:20px; }
     
		.rodape_rel h4				{ display:none; }
    
		      
}

/* ...................... 7.1 Rodapé Assinatura   .............................................................................................................................. */


.rodape_ass						{ background:#111; width:100%; padding:0; margin:0; box-sizing:border-box; z-index:200;}

  .rodape_ass_rel					{ max-width:1200px; padding:0 40px 30px 40px; margin:0 auto; text-align:center; box-sizing:border-box; z-index:210;}
  
    .rodape_ass_rel .risco				{ width:100%; height:1px; background-color: rgba(255, 255, 255, 0.1); margin:0 auto 60px auto; }
  
    .rodape_ass_rel address				{ margin:10px 0 30px 0; padding:0; font-size:12px; font-weight:300; color:#fff; line-height:120%; font-style:normal;  }
    
    .rodape_ass_rel .expediente				{ margin:10px 0 30px 0; padding:0; font-size:12px; font-weight:300; color:#fff; line-height:120%; font-style:normal;}
  
    .index						{ margin:30px auto; padding:0; font-size:12px; font-weight:300; color:#fff; text-align:center; }
    
    .index a 						{ color:#fff; }
    
    .index a:hover					{ color:#FF2626; }


@media only screen and (max-width : 900px) 		{
	
  .rodape_ass_rel					{ padding:0 20px 10px 20px; }
    
    .rodape_ass_rel .risco				{ margin:0 auto 30px auto; }
		      
}
    
/* ...................... 8 Interna Empresa   .............................................................................................................................. */
    
.interna							{ width:100%; padding:0; margin:0; background-color:#EEE; box-sizing:border-box; z-index:200; }

.interna_rel							{ position:relative; max-width:1200px; padding:60px 40px; margin:0 auto; z-index:300; box-sizing:border-box; }
     
.video-conteudo							{ float: right; width: 50%; margin: 0 0 10px 10px; }
    
.sobre_taegu 							{ display: flex; justify-content: space-between; align-items: center; margin:50px 0 0 0;  }

.sobre_taegu_imagem 						{ width: 50%; }

.sobre_taegu_imagem img 					{ width: 100%; }

.sobre_taegu_texto 						{ width: 50%; padding-left: 20px; }

.subit 								{ list-style: none; margin: 0; padding: 0; }

.subit li 							{ margin: 0; padding: 0; border-bottom: 1px solid #ccc;}

.subit li a 							{ display: block; padding: 8px 0; color:#555; text-decoration: none; }

.subit li a:hover						{ color:#E60013; }

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

.interna_rel							{ position:relative; max-width:1200px; padding:40px 20px; margin:0 auto; z-index:300; box-sizing:border-box; }

.video-conteudo							{ float: none; width: 100%; margin:0; }

.sobre_taegu 							{ flex-direction: column; margin:20px 0 0 0; }

.sobre_taegu_imagem 						{ width: 100%; }

.sobre_taegu_imagem img 					{ width: 100%; }

.sobre_taegu_texto 						{ width: 100%; margin-top: 10px; padding-left:0; }

}


/* ...................... 8.1 Interna Contato   .............................................................................................................................. */

.contato 							{ text-align:center; }

.contato a 							{ padding:5px; font-size:20px; margin:0; color:#111; text-decoration:none; }

.contato a:hover						{ color:#E60013; }

      
/* ...................... 9. Produtos - Categorias ............................................................................................................................................. */
         
      
.cont_categoria						{ width:100%; padding:0; margin:0; background-color:#EEE; box-sizing:border-box; z-index:200; }

.categoria						{ position:relative; max-width:1200px; display:flex; align-items: flex-star; justify-content: flex-start; padding:60px 40px; margin:0 auto; z-index:300; box-sizing:border-box; }

.coluna_dir						{ flex:0 0 calc(75% - 20px); margin-left:20px; padding:0; width:100%; }

.coluna_esq						{ flex:0 0 calc(25% - 20px); margin-right:20px; padding:0; width:100%; }

.coluna_esq .bloco					{ margin-top:10px; margin-bottom:30px; padding:0; box-sizing:border-box; }

.categorias						{ list-style:none; margin:0; padding:0; background:#111; }

.categorias li						{ margin:0; padding:0; }

.categorias li a					{ display:block; background:#111; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color:#fff; padding:10px; line-height:120%; }

.categorias li a.ativo					{ background:#E60013; }

.categorias li a:hover					{ background:#E60013; }
	
        .categorias ul					{ list-style:none; margin:0; padding:0; }
      
        .categorias ul li a				{ margin:0; padding:5px 0 5px 20px; }


.cab_menusmart						{ display:none; }
.smart_menu_categorias					{ display:block; }
    

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


.menu_categoria						{ display:none; }

.categoria						{ padding:0; flex-direction: column;  }

.cab_menusmart						{ position:relative; display:block; width:100%; height:40px; background-color:#E60013; }

#menusmart_ico						{ position:absolute; top:0; left:20px; height:40px; line-height:40px; padding-left:40px; color:#fff; background:url(images/smart_ico_branco.png) left center no-repeat; cursor:pointer;}
#menusmart_ico:hover					{ color:#fff; }

.smart_menu_categorias					{ display:none; padding:20px 0 20px 0; }

.coluna_esq						{ flex:0 0 calc(100% - 0px); margin-right:0; padding:0; width:100%; background:#fff; padding:0 20px 0 20px; box-sizing:border-box;  }

.coluna_dir						{ flex:0 0 calc(100% - 0px); width:100%; padding:20px; margin:0; box-sizing:border-box; }

}



/* ...................... 10. Produtos - Produto ............................................................................................................................................. */

.cont_produto						{ width:100%; padding:0; margin:0; z-index:200; }

.cont_produto_rel					{ position:relative;  display:flex; align-items: flex-star; justify-content: flex-start; max-width:1200px; padding:60px 40px; margin:0 auto; z-index:300; box-sizing:border-box; }

.item_esq						{ flex:0 0 calc(50% - 20px); margin-right:20px; padding:0; width:100%; }

.item_dir						{ flex:0 0 calc(50% - 20px); margin-left:20px; padding:0; width:100%; }

.texto							{ padding:20px 0 40px 0 ;}

a.botaoorcamento 					{ display: block; background:#111; transition: background-color 0.3s ease; color: #fff; font-size: 20px; height: 50px; line-height: 50px; margin-bottom: 10px; padding: 0 64px 0 20px; position: relative; text-decoration: none; }
a.botaoorcamento:hover 					{ background:#000; }
a.botaoorcamento::after 				{ content: ''; position: absolute; right: 20px; top: -12px; width: 44px; height: 44px; background: url("images/icon_whatsapp.png") no-repeat center center; background-size: cover; }


a.botaoloja 						{ display:block; background:#E60013; transition: background-color 0.3s ease; color:#fff; font-size:20px; height:50px; line-height:50px; padding:0 20px 0 20px;}
a.botaoloja:hover					{ background:#9F000C; }

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


.cont_produto_rel					{ flex-direction: column; padding:20px 20px; }

.item_dir						{ flex:0 0 calc(100% - 0px); margin:0px; margin-bottom:40px; }
  
.item_esq						{ flex:0 0 calc(100% - 0px); margin:0px; padding:0; }
	
}




/* ...................... 11. Marcas - Dados da empresa, produtos e catálogos   .............................................................................................................................................. */

/* ...................... 11.2 Marcas - Dados da empresa   .............................................................................................................................................. */

.marca_institucional					{ width:100%; padding:0; margin:40px 0 40px 0; box-sizing:border-box; z-index:200;}

  .marca_institucional_rel				{ position:relative; display:flex; align-items: center; justify-content: flex-start; max-width:1200px; padding:0 40px 0 40px; margin:0 auto; box-sizing:border-box; }
  
  .marca_texto						{ width:75%; font-size:16px; margin:20px 0 20px 0; }

  .marca_imagem						{ width:25%; display:flex; align-items: center; justify-content: center;}
 
@media only screen and (max-width : 900px) 		{ 


  .marca_institucional_rel				{ flex-direction: column; padding:0 20px 0 20px; }
  
  .marca_texto						{ order:1; width:100%; margin:0; }

  .marca_imagem						{ order:0; width:100%; margin-bottom:20px; }
	
}
 
 
/* ...................... 11.3 Marcas - Catálogos   .............................................................................................................................................. */


.interna_catalogo					{ width:100%; padding:0; margin:40px 0 40px 0; box-sizing:border-box; z-index:200;}

  .interna_catalogo_rel					{ position:relative; display:flex; align-items: center; justify-content: flex-start; max-width:1200px; padding:0 40px 0 40px; margin:0 auto; box-sizing:border-box; }
  
  .interna_catalogo_rel .int_chamada			{ width:25%; }
  
	.int_chamada .descricao				{ font-size:16px; margin:20px 0 20px 0;}
	
	a.botaoajuda 					{ display: block; background: #0B3B65; transition: background-color 0.3s ease; color: #fff; font-size: 20px; height: 50px; line-height: 50px; margin-bottom: 10px; padding: 0 64px 0 20px; position: relative; text-decoration: none; }
	a.botaoajuda:hover 				{ background: #072947; }
	a.botaoajuda::after 				{ content: ''; position: absolute; right: 20px; top: -12px; width: 44px; height: 44px; background: url("images/icon_whatsapp.png") no-repeat center center; background-size: cover; }
  
  .int_imagem						{ width:75%; display:flex; gap:5px; align-items: end; justify-content: flex-end; }
  
    .int_espaco_catalogos				{ width: calc(100% - 90px); display:flex; align-items: center; justify-content: center; }
    
      .caixa_catalogo					{ width:50%; padding:0 20px 0 20px; text-align:center; box-sizing:border-box;}
      .caixa_catalogo a .titulo				{ text-decoration:none; color:#666;}
      .caixa_catalogo img				{ width:80%;}
  
    .int_setas						{ width:90px; }
  


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

  .interna_catalogo_rel					{ flex-direction: column; padding:0 10px 0 10px; }
  
  .interna_catalogo_rel .int_chamada			{ width:100%; margin-bottom:40px; }
  
	.int_chamada a.botao 				{ display:block; padding:0; text-align:center; }

  .interna_catalogo_rel .int_imagem			{ width:100%; margin-bottom:20px; flex-direction: column; align-items: center; }
  
      .caixa_catalogo					{ padding:0 10px 0 10px; }
      .caixa_catalogo img				{ width:100%;}
  
}



/*....................... 12.1. Produtos - Foto unico (criada pois a ferramenta slick falha quando imagem unica no celular para carregar ) .....  */



    .campos_fotos_unico				{ display:flex; width:100%; margin:0 auto; background:#fff; margin:10px 0 10px 0;}
    .campos_fotos_unico img			{ max-width:100%; width:auto; height:auto; margin:0 auto; }


/* ...................... 12.2. Produtos - Fotos (slick) ............................................................................................................................................. */



    #campos_fotos .slider 			{ display:flex; max-width:400px; margin:0 auto; }



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

    #campos_fotos .slider 			{ display:flex; max-width:100%; margin:0 auto; }
	
}
    
    
    #campos_fotos .slider.slider-for		{ flex:0 0 calc(100%); 
						min-height:450px;
						max-height:450px;
						height:auto;
						display: -webkit-flex;
						display: flex;
						overflow:hidden;
						-webkit-align-items: center;
						 align-items: center;
						-webkit-justify-content: center;
						 justify-content: center;
						}

    #campos_fotos .slider.slider-for img	{ max-width:100%; width:auto; max-height:400px; height:auto; margin:0 auto; }						
    
    #campos_fotos .slick-slide 			{ margin: 0px 20px; }

    #campos_fotos .slick-slide img 		{ width: 100%; }

    #campos_fotos .slider.slider-nav		{ 
						-webkit-align-items: center;
						 align-items: center;
						min-height:150px; 
						max-height:150px; 
						height:auto; 
						width: calc(100% - 30px);
						margin:0 auto; 
						}
    
    #campos_fotos .slider.slider-nav div 	{ display:block;}
    
    #campos_fotos .slider.slider-nav div img	{ height:100px; width:100px; object-fit: cover;}	
    
    
    /* Setas medidas e cores */
    #campos_fotos .slick-prev			{ width: 15px; height: 25px; }
    
    #campos_fotos .slick-next			{ width: 15px; height: 25px; }
  
    #campos_fotos .slick-prev:before		{ content: url('js/slick/voltarelemento_menor.png'); opacity: .20; }

    #campos_fotos .slick-next:before		{ content: url('js/slick/Irelemento_menor.png'); opacity: .20; }
    
    #campos_fotos .slick-prev			{ left: -30px; }
    
    [dir='rtl'] #campos_fotos .slick-prev	{ right: -30px; left: auto; }
    
    #campos_fotos .slick-next			{ right: -30px; }
    
    [dir='rtl'] #campos_fotos .slick-next 	{ right: auto; left: -30px; }

    #campos_fotos .slick-prev:hover,
    #campos_fotos .slick-prev:focus,
    #campos_fotos .slick-next:hover,
    #campos_fotos .slick-next:focus		{color: transparent; outline: none; background: transparent; }
    
    #campos_fotos .slick-prev:hover:before,
    #campos_fotos .slick-prev:focus:before,
    #campos_fotos .slick-next:hover:before,
    #campos_fotos .slick-next:focus:before	{ opacity: 1;}
    

    /* Miniaturas das fotos */
    #campos_fotos .slick-slide 			{ transition: all ease-in-out .3s; opacity: .5;  }
    
    #campos_fotos .slick-active 		{ opacity: .5; }

    #campos_fotos .slick-current 		{ opacity: 1; }
  


.carousel						{ display:flex; max-width:1060px; justify-content: center; margin:0; padding:0; box-sizing:border-box;}


/* ...................... 13. Representantes  ........................................................................................................................................... */

.confirma						{ display:block; clear:both; padding:10px; background:#111; color:#fff; font-size:14px; text-align:center; margin:10px auto 15px auto; position:relative; z-index:4; }

.representantes						{ display:flex; width:100%; }

.representantes .dir					{ flex:0 0 calc(50%); margin:0; padding:0; }

.representantes .dir p					{ padding:0 0 20px 0; margin:0; }

.representantes .esq					{ flex:0 0 calc(50% - 40px); margin:0 40px 0 0; padding:0; }

.representantes .esq p					{ padding:0 0 20px 0; margin:0; }

.representantes input[type=text], 
.representantes input[type=email], 
.representantes select, 
.representantes textarea				{ display:block; border:1px solid #E3E2E0; padding:5px; min-height:40px; color:#666; background:#fff; font-size:14px; margin:0 0 20px 0; color:#231F20; width:100%; box-sizing:border-box; }

.representantes textarea				{ width:100%; font-size:14px; }

.representantes select					{ width:auto; }

.representantes .botaoform 				{ display:inline-block; border:none; background:#E60013; color:#fff; font-size:14px; height:40px; line-height:40px; border-radius: 25px; padding:0 20px 0 20px; cursor:pointer;}

.representantes .botaoform:hover			{ background:#111;}


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


.representantes						{ display:block; margin:40px 0 40px 0; }

.representantes .dir					{ flex:0 0 calc(100%); }

.representantes .esq					{ flex:0 0 calc(100%); margin-right:0; }

}



/* ...................... galeria de fotos ...................................................................................................................................... */


#lightgallery							{ list-style:none; margin:30px 0 0 -15px; padding:0; display:flex; width:100%; flex-flow:row wrap; align-items:stretch; }

 #lightgallery a						{ margin:0 0 15px 15px; padding:0; position:relative; flex:0 0 calc(25% - 15px); border:1px solid #0083CB; box-sizing:border-box; }

  #lightgallery a:hover						{ border-color:#666; }

    #lightgallery a.lg-item					{ position:relative; display:block; text-align:center; }

      #lightgallery a span.foto					{ display:flex; align-items: center; justify-content: center; height:200px; width:100%; padding:10px; box-sizing:border-box;  }

	#lightgallery a span.foto img				{ object-fit: cover; width:100%; height:100%; }


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

 #lightgallery a						{ flex:0 0 calc(50% - 15px); }

}

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

#lightgallery {
    display: block;
}

#lightgallery a {
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
    border: none;
}

#lightgallery a:hover {
    border-color: #666;
}

#lightgallery a span.foto {
    display: block;
    height: auto;
    height:100%;
    padding:0;
}

#lightgallery a span.foto img {
    width: 100%;
}


}

 
 

 /* ...................... botão flutuante whatsapp .............................................................................................................................. */

#whats_pulse						{ position:fixed; bottom:20px; right:20px; z-index:999; width:60px; height:60px; background:url(images/ico_whatsapp.png) center no-repeat #4CAF50; border-radius:100%; box-shadow:0 0 0 0 rgb(76 175 80 / 100%); animation:pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); }

@keyframes pulse 					{ to { box-shadow: 0 0 0 20px rgba(232, 76, 61, 0); } }