@import "../css/font-awesome/css/font-awesome.css";
@import "../css/reset.css";
:root{
    --bg-cor-primaria:#ffffff;
    --bg-cor-secundaria:#a30003;
    --bg-cor-terciaria:#2e3363;

    --txt-cor-primaria:var(--bg-cor-terciaria);
    --txt-cor-secundaria:#ffffff;
    --txt-cor-terciaria:#ffffff;

	--link-texto-branco: #ffffff;
	--preto: #000000;
	--branco: #ffffff;
    --azul-primario: var(--bg-cor-terciaria);
	--amarelo-padrao: #ffe116;
	--cor-texto-enfase-basico: #333333;
	--cor-texto-primario: #FFFFFF;
	--cor-texto-secundario: var(--bg-cor-terciaria);
	--cor-azul-fundo-primario: #FFFFFF;
	--cor-azul-fundo-padrao: var(--bg-cor-terciaria);
	--cor-texto-azul-destaque: #0051ff;
	--cor-vermelho-primario: #ed3237;
	--cor-vermelho-secundario: #ff3d40;
	--cor-vermelho-escuro: #a30003;
	--fonte-bold: bold;
	--fonte-700: 700;
	--fonte-normal: 400;
	--fonte-light: 400;
    --cor-background-claro: #d5d5d5;
    --cor-background-verde: #0a0;

	--header-background-image: url('');
    --header-background__barra-topo:var(--bg-cor-terciaria);
    --color-bg-secundary:var(--bg-cor-terciaria);
    --header-cor-texto__barra-topo: #ffffff;
    --header-background__caixa-cabecalho: transparent;

    --catalogo__titulo-size: 1rem;
    
    --footer-background: var(--bg-cor-terciaria);
    --footer-cor-texto: #ffffff;
    --footer-color-hover: #333333;
    --footer__assinatura-background-color: #333333;
    --footer__assinatura-color: #ffffff;
    --footer__assinatura-color-hover: #2e3363;
}
.msgNoCarrinho{
    background-color: var(--cor-background-verde);
    color: var(--branco);
    font-size: 12px;
    font-weight: var(--fonte-normal);
    margin-top: 0.5rem;
    padding: 6px;
    display: block;
    padding: 6px;
    text-align: center;
    border-radius:6px;
    margin: 6px 20%;
}
.msg_global{
    position: fixed;
    display: flex;
    background-color: rgba(0, 0, 0, 0.9);
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    top: 0;
    left: 0;
}
.msg_global_processando{
    position: fixed;
    display: flex;
    width: 80vw;
    min-height: 20vh;
    overflow: auto hidden;
    background-color: #FFFF00;

    padding:24px;
    font-weight: 400;
    font-size: 2rem;
    flex-direction: column;
}
.msg_global_processando .texto1{
    color: #900;
    font-weight: bold;
}
body{font-family: 'Open Sans', sans-serif; text-align:center; font-size:1em; color:#000; background-color:#f5f5f5; padding:0; margin:0; overflow-x:hidden; word-wrap: break-word;}
.fa { display: inline-block; font: normal normal normal 1em/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
#cx-importante{width:auto; text-align:center; display:inline-block; background-color:#fff; border:0.05em solid #999; margin:1em 3vw; padding:0.5em 0;}
	#cx-importante .chamada{width:98%; text-align:left; display:inline-block;}
		#cx-importante .chamada span{ font-size:0.9em; font-weight:600; color:#000; line-height:1.5em;}
	#cx-importante .aviso{width:98%; text-align:left; display:inline-block;}
		#cx-importante .aviso span{font-size:0.8em; font-weight:400; color: #666; line-height:1.5em;}
input, textarea, select{-webkit-appearance:none;}
/*### INICIO ###*/
#inicio{ margin-top:0em; width:100%; display:inline-block; color: #5c5c5c}
.conteudo, #inicio .conteudo, #inicio .conteudoIntro {width:90%;max-width:1600px;display:inline-block;margin:2em auto;}
	#inicio a{text-decoration:none;}
/* estrutura básica */
#areaGeralPagina{width:100%;display:inline-block;background-color:#f5f5f5;text-align:center;}
#areaGeralPagina b{font-weight:600;}
#areaGeralPagina i{font-style:italic;}
#areaGeralPagina u{text-decoration:underline;}
#areaGeralPagina .conteudoGP{text-align:left;}
#areaGeralPagina span, #areaGeralPagina p, #areaGeralPagina .areaCon, #areaGeralPagina .titulo,
#areaGeralPagina .subtitulo, #areaGeralPagina .resumo{width:auto;display:inline-block;color:#333;font-size:medium;font-weight:400;line-height:1;}
#areaGeralPagina .areaTitulo, #areaGeralPagina .areaCon{width:100%;display:inline-block;margin-bottom:0.5em;}
#areaGeralPagina .titulo{font-size:large;color:#000;font-weight:600;}
#areaGeralPagina .resumo{font-size:small;color:#000;}
/*min-banner*/
#inicio #ini-itemA{width:100%; display:inline-block; margin-top:1em; padding:1em 0em; background-color:#FFF;}
		#inicio #ini-itemA .titulo{ width:100%; text-align:left; display:inline-block;}
		#inicio #ini-itemA .m-banners{ width:100%; text-align: center; display:inline-block;}
	#inicio .m-banners .html_carousel{width:96%; display:inline-block; position:relative; text-align:center;}
		#inicio .m-banners .html_carousel .caroufredsel_wrapper{width:100%; display:inline-block;}
		#inicio .m-banners #mini-banner{ margin:0em; padding:0em; width:100%; display:inline-block; z-index:1; text-align:center;}
		#inicio .m-banners #mini-banner .slide{ margin:auto 0.5em; list-style:none; display:inline-block; text-align:center;}
			#inicio .m-banners #mini-banner .slide .caixaLogo{width:10em; height:5em; background-position:50%; background-repeat: no-repeat; background-size:contain; display:inline-block; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em;}
		#inicio .m-banners #setas_navegacao{width:104%; display:inline-block; position:absolute; top:18%; left:-2%; z-index:0;}
			#inicio .m-banners #setas_navegacao .mini_banner_volta,
			#inicio .m-banners #setas_navegacao .mini_banner_avanca{color:#900; z-index:10; display:inline-block; font-size:2em; font-weight:600;}
		#inicio .m-banners #setas_navegacao .mini_banner_volta{ float:left; margin-left: 0em; background-position:0em;}
		#inicio .m-banners #setas_navegacao .mini_banner_avanca{ float:right; margin-right: 0em; background-position:-2em;}

/*### INICIO ###*/
#bt{min-width: 6em; cursor:pointer; margin:0.5em 0; border-radius: 0.25em; color: #fff; border: 0.1em #666 solid; background-color: #003; padding: 0.5em; font-size: 1em;}
#bt:hover{ background-color:#900;}

/*### CADASTRO	###*/
#MsgFormulario, .MsgFerramenta{display: inline-block; padding: 1em; background-color: #fff; font-size: 1.5em; font-weight: 500; font-style: italic; width: 78%;}
	#acesso-negado{ background-color:#900; color:#FFF;}
		#acesso-negado a{color:#FFF;}
	#acesso-negado-a{ background-color:#F90;}
	#acesso-negado-b{ background-color: #F00; color:#FFF;}
/*### RECUPERAR	###*/
#CaixaFormR, #CaixaRelembrar, #CaixaRelembrarTS{-webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; border:#666 solid 0.1em; margin:2em 0em; display: inline-block; padding: 1em; background-color: #fff; font-size: 1.0em; font-weight: 500; font-style: italic; width: 78%;}
	#CaixaFormR .titulo{ width:100%; display:inline-block; margin-bottom:0.5em; font-style:normal; font-size:1.25em; font-weight:600;}
	#CaixaFormR .desc{width:100%; display:inline-block; margin-bottom:0.5em;}
		#CaixaFormR #FormLembrarS{display:inline-block; width:100%;}
		#CaixaFormR #FormLembrarS label{ display:inline-block; font-size:1em; font-weight:600;}
		#CaixaFormR #FormLembrarS #email_cad{ padding:0.5em; margin:0em 1em; font-size:1em; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; border:#666 solid 0.1em;}
#CaixaRelembrar .CRaguarde{width:98%; display:inline-block; background-color:#F90; color:#FFF; padding:0.5em;}
	#CaixaRelembrar .CRaguarde img{width:2em; display:inline-block; vertical-align:middle;}
#CaixaRelembrarTS{width:20em; text-align:left;}
#CaixaRelembrar #FormTS{display:inline-block; width:100%;}
	#CaixaRelembrarTS #FormTS label, #CaixaRelembrarTS em, #CaixaRelembrarTS .titulo{ display:inline-block; font-size:1em; font-weight:600; margin-top:1em;}
		#CaixaRelembrarTS #FormTS label span{ font-size:0.75em;}
		#CaixaRelembrarTS #FormTS label span img{ width:1em; display:inline-block; vertical-align:middle;}
	#CaixaRelembrarTS em{font-size:0.8em;}
	#CaixaRelembrarTS #FormTS input{ width:84%; padding:0.5em; margin:0em 1em; font-size:1em; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; border:#666 solid 0.1em;}
	#CaixaRelembrarTS #FormTS #bt{width: 5em; margin-top:1em; border-radius: 0.5em; color: #fff; border: 0.1em #666 solid; background-color: #003; padding: 0.5em; font-size: 1em;}



/*### EMPRESA ###*/
	#inicio #ini-itemB{width:100%; display:inline-block; margin-top:0em; padding:1em 0em; background-image:url(../imagem/inicio/fundo-empresa.jpg); background-repeat:no-repeat; background-size:cover; background-attachment:fixed;}
		#inicio #ini-itemB .conteudo{width:90%; max-width:69em; display:inline-block;}
			#inicio #ini-itemB .empresa-facebook{width:100%; display:inline-block;}
				#inicio #ini-itemB .empresa-facebook .empresa, #inicio #ini-itemB .empresa-facebook .facebook{width: 35.25em; vertical-align: top; list-style:none; margin: 1em; display:inline-block;}
					#inicio #ini-itemB .empresa-facebook .empresa{ margin-left:0em;}
						#inicio #ini-itemB .empresa-facebook .empresa .texto, #inicio #ini-itemB .empresa-facebook .empresa .mapa{width:100%; display:inline-block;  overflow: hidden; border-radius: 1em;}
						#inicio #ini-itemB .empresa-facebook .empresa .texto{ background-color: #FFC; padding:1em; width:94%; margin-bottom:1em; text-align:left; line-height:1.5em; font-size:0.95em; font-weight:400;}
						#inicio #ini-itemB .empresa-facebook .empresa .mapa{ padding:0em;}
					#inicio #ini-itemB .empresa-facebook .facebook{ margin-right:0em; width: 31.25em;}
						#inicio #ini-itemB .empresa-facebook .facebook iframe{ width:100%; height:32.4em;  overflow: hidden; border-radius: 1em;}
/*### TERMOS E CONDICOES ###*/
#TermosCondicoes{width:100%; display:inline-block; margin-top:0em; padding:1em 0em;}
	#TermosCondicoes .conteudo{width:90%; max-width:69em; display:inline-block; background-color:#FFF; padding:1em 0em; text-align:center; padding-bottom:2em;}
	#TermosCondicoes .tituloTermosCondicoes{width:100%; display:inline-block; margin:1em; font-size:1.5em; font-weight:600; text-align:center; margin-bottom:1em;}
	#TermosCondicoes .tituloTermos, #TermosCondicoes .tituloCondicoes{width:96%; display:inline-block; margin:1em; font-size:1.25em; font-weight:600; text-align: left; margin-bottom:0.5em;}
	#TermosCondicoes .textoTermos, #TermosCondicoes .textoCondicoes{width:96%; display:inline-block; margin:1em; font-size:1.0em; line-height:1.5em; font-weight:400; text-align: justify; margin-bottom:1em;}

/*### RECEPTOR ###*/
#receptor{width:100%; display:inline-block;}
#receptor .conteudo{width:90%; display:inline-block; max-width:57.5em; margin-top:4em; margin-bottom:3em; text-align:left; font-size:1.2em; color:#666;}
#receptor .recebe-caminho{width:97.3%; font-weight:500; margin-top:1em; font-size:0.8em; margin-bottom:1em; color:#fff; text-align: right; padding:1em; border: 0.0em solid #ccc; display:inline-block; background-color:#a1a1a1;}
#receptor .recebe-caminho a{ color:#FFF; text-decoration:underline;}
#receptor .receptor-ler{width:96.4%; margin-top:1em; margin-bottom:1em; color:#000; padding:1em; text-decoration:none; border: 0.1em solid #ccc; display:inline-block; background-color:rgba(255,255,255,0.5);}
/*### BT TOP ###*/
#BTtop .fa { position: relative; top: 0.15em; font-size: 1.5em;}
#BTtop { background: rgba(0, 0, 0, 0.9); color: #fff; text-align: center; display: none; width: 2.2em; height: 2.2em; border: none; -webkit-border-radius: 0.4em; -moz-border-radius: 0.4em; -ms-border-radius: 0.4em; -o-border-radius: 0.4em; border-radius: 0.4em; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; z-index: 30; cursor:pointer; position:fixed; bottom: 0.5em; right: 0.5em}
#BTtop:hover{background: rgba(0, 0, 0, 0.7);}
#assinatura{width:100%; display:inline-block; font-size:0.8em; background-color:#CCC; padding-top:1.5em; margin-bottom:0em;}
#assinatura .conteudo{width:90%; text-align:left; display:inline-block; max-width:87em; margin-top:1em; margin-bottom:1em; vertical-align:middle;}
#assinatura span{ float: right;}
#assinatura a{ text-decoration:none; color:#000;}
#assinatura a:hover{ color:#000;}

input[type="submit"]{-webkit-appearance: none;}
/*### CAIXA MSG ###*/
#AlertaCamposN, #AlertaCampos{display: none; position:fixed; z-index:20; bottom:0em; right:0em; padding:0.5em; background-color:#060; color:#FFF; font-size:1.2em;}
/*### MOBILE ###*/
@media only screen and (max-width: 1024px) {

#inicio #tabelas{ width:95%;}
#inicio #ini-itemB .empresa-facebook .empresa{width:100%;}
	#inicio #ini-itemB .empresa-facebook .empresa .texto, #inicio #ini-itemB .empresa-facebook .empresa .mapa{width:45%; margin:0.5em; vertical-align:middle;}
#contato #FormContato input[type="text"]{width: 94.8%;}
#contato #FormContato textarea{width: 97.8%;}
/*on*/
#inicio #tabelas .lista-produtos .celula-produto{ width:6em;}
	}
@media only screen and (max-width: 900px) {
	#inicio .m-banners .html_carousel{ width:90%;}
		#inicio .ini-banner .conteudo, #inicio .ini-banner .html_carousel, #inicio .ini-banner .conteudo .slide{height: 27vw;}
	#inicio #tabelas #pre-cabecalho .busca{ width:19em;}
	}
@media only screen and (max-width: 800px) {
#inicio .m-banners #mini-banner .slide .caixaLogo{width:8.7em; height:5em;}
#inicio .m-banners #setas_navegacao{ width: 106%; left:-4%;}
	#contato #FormContato input[type="text"]{width: 93%;}
	#contato #FormContato textarea{width: 97.8%;}
}
@media only screen and (max-width: 768px) {
	#inicio .m-banners .html_carousel{width: 70.5%;}
	#inicio #tabelas #pre-cabecalho .busca {width: 18em;}
	#inicio #tabelas #pre-cabecalho .busca #busca{    width: 65%;}
/*on*/
#inicio #CaixaTabelas .downloads{ width:80%;}
	}
@media only screen and (max-width: 603px) {
#inicio #tabelas #pre-cabecalho{ width:90%; text-align:center;}
#inicio #tabelas #pre-cabecalho .busca{width:100%; margin-top:1em;}
#inicio #tabelas #cabecalho-produto{width:100%;}
#inicio #cadastro-login{width:90%;}
#inicio #cadastro-login #caixa-cadastrar, #inicio #cadastro-login #caixa-entrar{margin-right:0em; margin-left:0em; width:100%; margin-bottom:1em;}
#inicio #tabelas #cabecalho-produto{ width:90%;}
#inicio #tabelas .lista-produtos{width: 95%; display:inline-table;}
#inicio #tabelas .lista-produtos .celula-produto,
#inicio #tabelas .lista-produtos #descricao{ display:table-cell; vertical-align:middle; height:auto;}
	#caixa_informacao .ci_colunas .ci_colunaA, #caixa_informacao .ci_colunas .ci_colunaB{ text-align:left; margin-right:0em; width:100%; margin-bottom:1em;}
	#inicio .m-banners .html_carousel{width:92%;}
	#contato #FormContato input[type="text"]{width: 91%;}
	#contato #FormContato textarea{width: 96.8%;}
		#inicio #ini-itemB .empresa-facebook .empresa .texto, #inicio #ini-itemB .empresa-facebook .empresa .mapa{ width:95%; margin-right:0em; margin-left:0em;}
	}
	@media only screen and (max-width: 1024px) and (max-height: 603px) {}

@media only screen and (max-width: 533px) {
    #BTtop{
        bottom: 4rem;
    }
#inicio .m-banners .html_carousel { width: 72%;}
#inicio .m-banners #setas_navegacao{left: -6.5%;}
#inicio #tabelas #cabecalho-produto { width: 90%;}
#inicio #ini-itemB .empresa-facebook .empresa{margin-right:0em}
#inicio #ini-itemB .empresa-facebook .facebook{width: 95%; margin-left:0em;}
	#contato #FormContato input[type="text"]{width: 89.5%;}
	#contato #FormContato textarea{width: 95.8%;}
#inicio #CaixaTabelas .AreaAvisoRodape{ margin:1em 0em; width:90%;}
	}
@media only screen and (max-width: 480px) {
	#inicio #ini-itemB .empresa-facebook .empresa .texto, #inicio #ini-itemB .empresa-facebook .empresa .mapa{    width: 90%;}
	#inicio .m-banners .html_carousel { width: 80%;}
	}
@media only screen and (max-width: 414px) {
#inicio .m-banners .html_carousel {width: 10em;}
#inicio .m-banners #setas_navegacao{width:13.5em; left:-2em;}
#inicio #tabelas .lista-produtos-aberta{width: 84%;}
#inicio #tabelas .lista-produtos-aberta .celula-produto{display: table-cell; vertical-align:middle;}
#inicio #tabelas .lista-produtos{font-size:0.9em;}
	#contato #FormContato .coluna, #contato #FormContato .colunab{ width:100%;}
	#contato #FormContato .coluna, #contato #FormContato .colunab{ float:none; margin-right:0em; margin-left:0em; text-align:left;}
	#contato #FormContato input[type="text"]{width: 93.5%;}
	#contato #FormContato textarea{width: 93.8%;}
		}
@media only screen and (max-width: 375px) {
	#contato #FormContato input[type="text"]{width: 93.0%;}
	#inicio #ini-itemB #caixa-equipe li{margin: 1em 0em;}
	}
@media only screen and (max-width: 360px) {
	#inicio #tabelas #pre-cabecalho .titulo, #inicio #tabelas #pre-cabecalho .titulo_b, #inicio #tabelas #pre-cabecalho .busca{ margin-bottom:1em;}
	#inicio #cadastro-login{width: 85%;}
#inicio #cadastro-login #caixa-entrar form input[type="text"], #inicio #cadastro-login #caixa-entrar form input[type="password"], #inicio #cadastro-login #caixa-cadastrar form input[type="text"], #inicio #cadastro-login #caixa-cadastrar form input[type="password"], inicio #cadastro-login #caixa-cadastrar form input[type="checkbox"]{ width:93%;}
	#inicio .ini-banner #numera-UT a{ font-size:0.7em;}
	}
@media only screen and (max-width: 320px) {
	#inicio #cadastro-login{width: 80%;}
#inicio #cadastro-login #caixa-entrar form input[type="text"], #inicio #cadastro-login #caixa-entrar form input[type="password"], #inicio #cadastro-login #caixa-cadastrar form input[type="text"], #inicio #cadastro-login #caixa-cadastrar form input[type="password"], inicio #cadastro-login #caixa-cadastrar form input[type="checkbox"]{width: 92%;}

	#contato #FormContato input[type="text"]{width: 92%;}
	#contato #FormContato textarea { width: 92.8%;}
	}