/* ...................... 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:#fff; font-family: 'Montserrat', sans-serif; font-weight:500; font-size:16px; line-height:160%; color:#1F1F1F; z-index:1; }

form						{ margin:0; padding:0; }

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

input, textarea, select, option			{ font-family:'Roboto', arial; 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:#E2BB2E; transition: background-color 0.3s ease; color:#fff; font-size:20px; height:50px; line-height:50px; padding:0 20px 0 20px;}
a.botao:hover					{ background:#D08E06; }

a.botao.azul 					{ background:#000; }
a.botao.azul:hover				{ background:#072947; }

::selection					{ background:#000; color:#fff; }
::-moz-selection				{ background:#000; 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:#000; font-weight:200; margin:0; padding:0; line-height:100%; }
h1.center					{ text-align:center; }

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

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

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 da empresa - principios e nos tópicos contato */
h6						{ font-size:20px; color:#000; font-weight:500; margin:0; padding:0; line-height:100%; }
h6.center					{ text-align:center; }
h6.topicos					{ margin-top:50px; }

@media only screen and (max-width : 900px) 	{
	
h1						{ font-size:40px; }

h2						{ font-size:30px; }

h3						{ font-size:30px; }


}

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

.cab							{ position:relative; height:96px; background-color:#000; 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:246px; height:66px; padding:15px 0 15px 0; }
	
	.cab .logotipo img				{ width:246px; height:66px; }
	
	.cab .logotipo_smart				{ display:none; width:216px; height:58px; padding:10px 0 10px 0;}
	
	.cab .menu 					{ flex-grow: 1; /* O menu ocupa todo o espaço restante */ height: 96px; 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:96px; height:96px; }
		
		.menu li a				{ margin:0; padding:0; color:#fff; font-size:15px; z-index:99999; }
		
		.menu li a:hover			{ color:#E2BB2E; text-decoration:none; }
		
		.menu li a.ativo			{ color:#E2BB2E; text-decoration:none; }

			.suspenso 			{ display: none; position: fixed; /* Posiciona em relação à tela (viewport) */ top: 96px; /* Posiciona imediatamente abaixo do item de menu principal */ left: 0; width: 100vw; background-color: #000; 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 */ justify-content: flex-start; align-items: flex-start; width: 100%; padding: 0; margin: 0; }

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

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

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


	.cab .redes 					{ height: 96px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; 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:#000; 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:76px; 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 #eee; }
		
		.menu li a				{ font-size:16px; }	
		
			.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%;  height:36px; line-height:36px; margin:0; padding:0; box-sizing: border-box; }

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

							}


/* ...................... 2. Banner ............................................................................................................................................... */
 /* Contêiner Principal */
#demo_container {
  width: 100%;
  max-height: 490px;       /* Limita a altura máxima em 500px */
  height: auto;            /* Deixa a altura se ajustar ao conteúdo */
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;

  /* Flexbox para centralizar conteúdo */
  display: flex;
  align-items: center;     /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
}

        /* Contêiner dos Itens */
        #items_container {
            position: relative;
            width: 100%;
            height: 100%; /* Herda a altura de #demo_container */
            margin: 0;
            padding: 0;
            z-index: 2;
            overflow: hidden;
        }

        /* Itens do Slide */
        .slide_item {
            position: absolute;
            width: 100%;
            height: 100%; /* Preenche todo o espaço vertical */
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
	    pointer-events: none;
            /* background: green;  Pode ser removido ou ajustado conforme necessário */
        }

        /* Slide Ativo */
        .slide_item.active {
            opacity: 1;
	    pointer-events: auto;
        }


        /* Imagens do Slide */
        .slide_item img {
            width: 100%;
            height: 100%;
            object-fit: scale-down; 
            display: block; /* Remove espaços indesejados abaixo das imagens */
        }

        /* Texto do Banner */
        .banner_text {
            position: absolute;
            top: 50%; /* Posiciona a tarja verticalmente no centro da imagem */
            left: 0; /* Alinha a tarja à esquerda */
            transform: translateY(-50%); /* Centraliza a tarja verticalmente */
            width: 50%;
            height: 30%; /* Faz a tarja ocupar 30% da altura da imagem */
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 36px;
            font-weight: 700;
            line-height: 120%;
            z-index: 3;
            text-align: left;
            padding: 20px;
            transition: all 0.5s ease;
        }

	/* Responsividade para telas menores que 1920px */
	@media (max-width: 1800px) {
	    #demo_container {
		width: 100%;
		max-height: 400px;
	    } 
	}
	
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 1600px) {
	    #demo_container {
		max-height: 350px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 1400px) {
	    #demo_container {
		max-height: 300px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 1200px) {
	    #demo_container {
		max-height: 250px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 1000px) {
	    #demo_container {
		max-height: 200px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 800px) {
	    #demo_container {
		max-height: 160px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 650px) {
	    #demo_container {
		max-height: 140px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 550px) {
	    #demo_container {
		max-height: 120px;
	    }
	}
	
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 500px) {
	    #demo_container {
		max-height: 100px;
	    }
	}


        /* Responsividade para telas menores */
        @media (max-width: 900px) {

            .banner_text {
                width: 80%;
                left: 50%;
                transform: translate(-50%, -50%); /* Centraliza a caixa tanto vertical quanto horizontalmente */
                font-size: 18px;
                text-align: center;
            }
        }



	
/* ...................... 6. Marcas / Publicidade   .............................................................................................................................................. */

      .inicial_publicidade_rel {
            position: relative;
            max-width: 100%;
            padding: 20px 20px;
            margin: 0 auto;
            z-index: 300;
            box-sizing: border-box;
        }

        .logosd {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 10px;
            box-sizing: border-box;
        }

        .logosd div {
            display: flex; /* Torna o div um contêiner flex */
            justify-content: center; /* Centraliza horizontalmente */
            align-items: center; /* Centraliza verticalmente */
            margin: 0 auto;
            padding: 0;
            text-align: center;
            list-style: none;
            min-height: 60px; /* Define uma altura mínima para a centralização vertical */
            min-width: 60px;  /* Opcional */
        }

        .logosd div img {
            max-height: 50px;
            max-width: 100%; /* Garante que a imagem não exceda a largura do contêiner */
            display: block; /* Remove espaços em branco abaixo das imagens */
        }

        @media (max-width: 900px) {
            .inicial_publicidade_rel {
                padding: 10px 10px; /* Ajuste o padding conforme necessário */
            }
	    

        .logosd div {
            min-height: 40px; /* Define uma altura mínima para a centralização vertical */
            min-width: 40px;  /* Opcional */
        }

        .logosd div img {
            max-height: 30px;
        }
	    
	    
        }
  



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

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

.inicial_produtos_rel					{ position:relative; max-width:1200px; padding:40px 40px; margin:0 auto; z-index:300; box-sizing:border-box; }
  
	.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:400px; flex:0 0 calc(25% - 30px); /* Subtraindo o gap da largura */ margin:0; padding:0; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease;  transition: all 0.3s ease; box-sizing:border-box; background:#fff; }
	.proitem.interna				{ flex:0 0 calc(33.3% - 30px); /* usado para páginas internas */}
	.proitem.pdf					{ flex:0 0 calc(33.3% - 30px); /* usado para páginas internas */ height:100%;}
		
		
        .proitem_foto					{ height:240px; padding:20px; width:100%;  display: flex; justify-content: center; align-items: center; background:#fff;  box-sizing:border-box; }
							
	.proitem_foto img				{ height:200px; width:100%; object-fit: contain; }
							 

	.proitem_nome					{ height:100px; font-size:16px;  text-align:center;  color:#666666;  background:#fff;  padding:0 20px 0 20px;  box-sizing:border-box; }
							
	.proitem_mais					{ position:absolute; bottom:0; height:40px; width:100%; line-height:40px; font-size:16px;  text-align:center;  background:#000; color:#fff;  font-weight:200; padding:0 20px 0 20px;  box-sizing:border-box; }
	
	  
@media only screen and (max-width : 900px) {
	
.inicial_produtos_rel					{ padding:20px 20px; }
    
	.produtos_caixa					{  }
    
	.proitem					{ flex:0 0 calc(50% - 30px); margin:0 0 20px 0; }
	.proitem.interna				{ flex:0 0 calc(50% - 30px); }
	.proitem.pdf					{ flex:0 0 calc(50% - 30px); height:100%; /* usado para páginas internas */}

}
	
	
@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;  }			 
	.proitem.interna				{ height:100%; flex:0 0 calc(100% - 0px); width:100%; }			
		
        .proitem_foto					{ height:100%; width:100%; }
							
	.proitem_foto img				{ height:auto; max-width:100%; width:auto; }
							 

	.proitem_nome					{ height:100%; padding:0 20px 20px 20px; }
	
	.proitem_mais					{ position:relative; }

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

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

  .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:#E2BB2E; color:#fff; font-size:20px; height:50px; line-height:50px; padding:0 20px 0 20px;}
	
	.chamada a.botao:hover				{ background:#000;}


  .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: #E2BB2E; }

	.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 10px 0 10px; }
  
  .inicial_catalogo_rel .chamada			{ width:100%; margin-bottom:40px; }
  
	.chamada a.botao 				{ display:block; padding:0; text-align:center; }

  .inicial_catalogo_rel .imagem				{ width:100%; margin-bottom:40px; flex-direction: column; align-items: center; }
  
	.imagem img					{ width:100%; }
  
}
	
	
/* ...................... 5. Sobre nós - Taeguls inicial   .............................................................................................................................................. */


.sobre_sobre						{ display:flex; width:100%; margin:40px auto; box-sizing:border-box; z-index:100; }
  
	.sobre_sobre_esquerda				{ flex:0 0 50%; background:center no-repeat; background-size:cover; position:relative; z-index:110;  }
    
		.sobre_sobre_esquerda.imginicial	{ background-image:url(images/taegu_inicial.jpg); z-index:120;}
      
	.sobre_sobre_esquerda_smart			{ display:none; }
    
	.sobre_sobre_direita				{ flex:0 0 50%; position:relative; z-index:110; }
  
		.sobre_rel_direita_metade		{ max-width:600px; padding:80px 40px 80px 40px; margin:0; box-sizing:border-box; z-index:200; }

	.sobre_subtitulo				{ font-weight:700; padding:30px 0 30px 0;}
	
	.sobre_texto					{ font-weight:400; padding-bottom:30px; }


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

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

    .sobre_sobre_esquerda				{ display:none; }
    
      .sobre_sobre_esquerda.imginicial			{ display:none; }
      
    .sobre_sobre_esquerda_smart				{ display:block; }
    
      .sobre_sobre_esquerda_smart img			{ width:100%; }

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

}
	


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

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

.rodape_redes 						{ width:100%; margin-top:20px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; }


	.rodape_rel					{ display:flex; max-width:1200px; padding:80px 40px 80px 40px; margin:0 auto; box-sizing:border-box; z-index:210;}

		.mapa_esquerda				{ flex:0 0 25%; z-index:220; }
    
		.mapa_centro				{ flex:0 0 50%; display:flex; z-index:220; justify-content: space-between; width:100%; margin:0 auto; padding:0 40px; box-sizing:border-box; }

		.mapa_direito				{ flex:0 0 25%; z-index:220; }


	.mapa_itens ul					{ list-style:none;  padding:0; margin:10px 0 0 0; height:auto; width:100%; position:relative; }
	
	.mapa_itens ul.duascolunas			{ columns: 2; }
	  
	.mapa_itens li					{ padding:0; margin:0; }
	    
	.mapa_itens li a				{ margin:0; padding:0; font-size:14px; color:#fff; font-weight:300; }
	    
	.mapa_itens li a.ativo				{ color:#E2BB2E; }
	    
	.mapa_itens li a:hover				{ text-decoration:none; color:#E2BB2E; }


@media only screen and (max-width : 900px) {
	
	.rodape_rel					{ flex-direction: column; padding:20px 20px 0 20px; }
     
		.rodape_rel h4				{ display:none; }
     
		.mapa_esquerda				{ flex:0 0 100%; margin:40px 0 40px 0;  }
    
		.mapa_centro				{ flex:0 0 100%;  }

		.mapa_direito				{ flex:0 0 100%; }
     
	.mapa_itens ul					{ display:flex; flex-wrap: wrap; justify-content: center; }
	
	.mapa_itens ul.duascolunas			{ display:none; }
	  
	.mapa_itens li					{ padding:0 10px 10px 10px; }
		      
}

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


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

  .rodape_ass_rel					{ max-width:1200px; padding:0 40px 0 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 30px 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:#E2BB2E; }


/* ...................... 7.2 Rodapé Leads2 email   .............................................................................................................................. */


#leads2bForm 						{ padding:20px 0; font-size:14px; font-weight:300;  }

#leads2bForm div 					{ margin-bottom:10px;  }

#leads2bForm label 					{ color:#fff; display: block; margin-bottom:3px; }

#leads2bForm input 					{ width: 100%; padding: 8px; border:none; box-sizing: border-box; }

#leads2bForm button 					{ padding: 10px 20px; background:#E2BB2E; transition: background-color 0.3s ease; color: #fff; border: none; cursor: pointer; }

#leads2bForm button:hover 				{ background-color: #D08E06; }

 
    
/* ...................... 8 Interna Empresa   .............................................................................................................................. */
    
    

.interna_sobre							{ display:flex; width:100%; margin:0 auto; box-sizing:border-box; z-index:100; }

a.botao_sobre 							{ display:block; text-align:center; font-size:20px; color:#fff; padding:20px 10px; background:#000; }

a.botao_sobre:hover						{}
  
.principios ul 							{ display: flex; justify-content: space-between; padding: 0; list-style-type: none; }

.principios li 							{ flex: 1; padding:0 10px; box-sizing: border-box; }

  
  
	.interna_sobre_esquerda					{ flex:0 0 calc(50% - 200px); background:center no-repeat; background-size:cover; position:relative; z-index:110;  }
    
		.interna_sobre_esquerda.imgsobre		{ background-image:url(images/taegu_sobre.jpg); z-index:120;}
		
		.interna_sobre_esquerda.imgferramenta		{ background-image:url(images/taegu_img.jpg); z-index:120;}
      
	.interna_sobre_esquerda_smart				{ display:none; }
    
	.interna_sobre_direita					{ flex:0 0 calc(50% + 200px); position:relative; z-index:110; }
  
		.interna_sobre_rel_direita_metade		{ max-width:800px; padding:80px 40px 80px 40px; margin:0; box-sizing:border-box; z-index:200; }

	.interna_sobre_subtitulo				{ font-weight:700; padding:30px 0 30px 0;}
	
	.interna_sobre_texto					{ font-weight:400; padding-bottom:30px; }


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

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

.principios ul 							{ flex-direction: column; }

.principios li 							{ padding:20px 0; }



    .interna_sobre_esquerda					{ display:none; }
    
      .interna_sobre_esquerda.imgsobre				{ display:none; }
      
    .interna_sobre_esquerda_smart				{ display:block; }
    
      .interna_sobre_esquerda_smart img				{ width: 100%; height: 200px; object-fit: cover; overflow: hidden; }

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


}


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

.contato 							{}

.contato a 							{ display:inline-block; padding:5px; margin:10px 0; color:#fff; background-color:#000; text-decoration:none; }

.contato a:hover						{ background-color:#E2BB2E; }

      
/* ...................... 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:#000; }

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

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

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

.categorias li a:hover					{ background:#E2BB2E; }
	
        .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:#E2BB2E; }

#menusmart_ico						{ position:absolute; top:0; left:20px; height:40px; line-height:40px; padding-left:40px; color:#fff; background:url(images/smart_ico.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; }

}


/* ...................... 9.1 Inicial Geral - Politica ............................................................................................................................................. */
         
      
.cont							{ width:100%; padding:0; margin:40px 0 40px 0; box-sizing:border-box; z-index:200;}

  .cont_rel						{ position:relative; max-width:1200px; padding:0 40px 0 40px; margin:0 auto; 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: #000; 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: #072947; }
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:#E2BB2E; 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; }
  
  .marca_imagem img					{ width:80%; }
 
@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; }
  
  .marca_imagem img					{ width:auto; }
	
}
 
 
/* ...................... 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: #000; 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;}



/* ...................... 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); } }
 


/* ...................... banner popup ................................................................................................................................................. */
  
	#popup					{ display:block; position:absolute; min-height:100%; width:100%; z-index:9997;
						/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0.65+100 */
						background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
						background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
						background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
						}

	.poptexto				{ position:fixed; top:50%; left:50%; margin:0 0 0 -300px; width:600px; height:482px; background:#fff; z-index:9998;}
	
	.popimagem				{ position:fixed; top:20%; left:50%; margin:0 0 0 -300px; width:600px; height:482px; z-index:9998;}
	.popimagem img				{ width:100%; }
	
		.revecada			{ padding:50px 20px 20px 20px; line-height:140%; text-align:center; font-size:20px; }
		  .revecada .titulo		{ display:block; color:#E2635B; font-weight:700; text-transform:uppercase; padding-bottom:20px; }
		    .revecada a			{ color:#E2635B; }			
		    .revecada a:hover		{ color:#000; }
    
	.popfechar				{ position:fixed; top:20%; left:50%; margin:0 0 0 -300px; width:600px; z-index:9999; }	
		.popfechar a.fechar		{ position:absolute; top:5px; right:5px; height:30px; width:30px; line-height:30px; background:#313B5F; color:#fff; text-align:center; font-weight:700; border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; cursor:pointer; z-index:9999;}			
		.popfechar a.fechar:hover	{ background:#000; }
	    
	    
	/* ...................... banner popup SMART .............................................................................................................................................. */
  
	@media only screen and (min-device-width : 320px) and (max-device-width : 959px) and (orientation:portrait) {

	.popimagem				{ position:relative; top:10%; left:0; margin:0; width:100%; height:auto;}
	
	.popfechar				{ position:relative; top:10%; left:0; margin:0; width:100%; }	
	
	}

	
	@media only screen and (min-device-width : 320px) and (max-device-width : 959px) and (orientation:landscape) {

	.popimagem				{ position:relative; top:10%; left:0; margin:0; width:100%; height:auto;}
	
	.popfechar				{ position:relative; top:10%; left:0; margin:0; width:100%; }	
  
	}