html, body {
	height: 100%;
	scroll-behavior: smooth;
}

body {		
	background: #FFFFFF;
	font-family: 'Raleway', sans-serif;
	font-size: 11pt;
	font-weight: 400;
	color: #363636;
}


h1, h2, h3 {
	margin: 0;
	padding: 0;
}

p, ol, ul {
	margin-top: 0px;
}

p {
	line-height: 190%;
}

strong {
}

a {
	color: #171717;
}

a:hover {
	text-decoration: none;
}

a img {
	border: none;
}

	.image
	{
		display: inline-block;
	}
	
		.image img
		{
			display: block;
			width: 100%;
		}

	.image-full
	{
		display: block;
		width: 100%;
		margin: 0 0 2em 0;
	}
	
	.image-left
	{
		float: left;
		margin: 0 2em 2em 0;
	}
	
	.image-centered
	{
		display: block;
		margin: 0 0 2em 0;
	}

		.image-centered img
		{
			margin: 0 auto;
			width: auto;
		}

hr {
	display: none;
}


/*********************************************************************************/
/* List Styles                                                                   */
/*********************************************************************************/

	ul.style1
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	ul.style1 li
	{
		border-top: solid 1px #E5E5E5;
		padding: 0.80em 0;
	}
	
	ul.style1 li:first-child
	{
		border-top: 0;
		padding-top: 0;
	}

	ul.style2
	{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	ul.style2 li
	{
		border-top: solid 1px #E5E5E5;
		padding: 0.80em 0;
	}
	
	ul.style2 li:first-child
	{
		border-top: 0;
		padding-top: 0;
	}

/*********************************************************************************/
/* Social Icon Styles                                                            */
/*********************************************************************************/

	ul.contact
	{
		margin: 0;
		padding: 1.5em 0em 2.5em 0em;
		list-style: none;
	}
	
	ul.contact li
	{
		display: inline-block;
		padding: 0em 0.30em;
		font-size: 1em;
	}
	
	ul.contact li span
	{
		display: none;
		margin: 0;
		padding: 0;
	}
	
	ul.contact li a
	{
		color: #FFF;
	}
	
	ul.contact li a:before
	{
		display: inline-block;
		background: #3f3f3f;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #FFFFFF;
	}
	
	ul.contact li a.icon-twitter:before { background: #2DAAE4; }
	ul.contact li a.icon-facebook:before { background: #39599F; }
	ul.contact li a.icon-instagram:before { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);}
	ul.contact li a.icon-telegram:before { background: #229ED9; }
	ul.contact li a.icon-rss:before { background: #F2600B; }


/*********************************************************************************/
/* Heading Titles                                                                */
/*********************************************************************************/

	.title
	{
		margin-bottom: 2em;
		text-transform: uppercase;
	}

	.title h2
	{
		font-weight: 400;
		font-size: 2em;
		color: #000000;
	}
	
	.title .byline
	{
		letter-spacing: 0.15em;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 0.90em;
		color: #6F6F6F;
	}

/** WRAPPER */

#wrapper {
	margin-left: 100px;
	margin-right: 100px;
}
.icon-email {
	width: 20px;
	height: 20px;	
	display: flex;
}
#footer-wrapper
{
	background: #0F0F0F;
}

.container {
	width: 1200px;
	height: 100px;
	margin: 0px auto;
}

.clearfix {
	clear: both;
}


/*********************************************************************************/
/* Wrappers                                                                      */
/*********************************************************************************/

#header-wrapper
{
	overflow: hidden;
	background-size: 30%;
	background: #333333;
}


/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#header 
	{
		position: relative;
		overflow: hidden;
		text-align: center;
	}

/*********************************************************************************/
/* Logo                                                                          */
/*********************************************************************************/

	#logo 
	{
		width: 500px;
		height: 100px;
		margin: 0 auto;
		padding: 2em 0em;
		text-transform: uppercase;
	}
	
	#logo h1
	{
		letter-spacing: 0.10em;
		font-size: 3em;
	}
	
	#logo p 
	{
		letter-spacing: 0.10em;
		color: #FFF;
	}
	
	#logo a 
	{
		text-decoration: none;
		color: #FFF;
	}

/*********************************************************************************/
/* Imagem Modal                                                                      */
/*********************************************************************************/
/* Estilo do modal - Fica escondido por padrão */
.modal {
  display: none; /* Deixa o modal invisível */
  position: fixed; /* Fixa o modal na tela, mesmo com rolagem */
  z-index: 100; /* Garante que ele fique acima de outros elementos */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Fundo escurecido e semi-transparente */
  overflow: auto; /* Adiciona barra de rolagem se o conteúdo for grande */
}

/* Estilo do conteúdo interno do modal */
.modal-conteudo {
  position: relative;
  margin: 5% auto; /* Centraliza a caixa na tela */
  width: 90%;
  max-width: 700px;
  padding: 20px;
  background-color: #fefefe;
  border-radius: 8px;
}

/* Estilo do botão de fechar */
.fechar-modal {
  position: absolute;
  top: 15px;
  right: 25px;
  color: #aaa;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.fechar-modal:hover,
.fechar-modal:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Estilo da imagem dentro do modal */
#imagem-ampliada {
  width: 100%;
  height: auto;
  display: block;
}



/*********************************************************************************/
/* Produtos                                                                      */
/*********************************************************************************/
.indicacoes
{
	color: black;
	font-weight: bold;
}
.tituloProduto
{
	height: 100px;
	width: auto;
	/*background-color: #ffcc2a;*/
	background-color: white;
	padding-left: 5px;
}
 .tituloProduto .txttituloProduto
{
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	color: #122364;
	font-size: 50px;
	font-weight: bold;
}

.espaco
{
	height: 100px;
}

#multilar, #multicryl, #multipisos, #SedaSuave, #LuzSuave, #Emborrachado, #Selador, #MassaCorrida, #MassaAcrilica, #FundoPrepara, #FundoFixador,
#TexturaRustica, #TexturaAcrilicaLisa, #TexturaChapisco, #EfeitoCimentado, #MantaAcrilicaFundacao, #MantaAcrilicaLajesCalhas
{
	display: flex;
	border: 2px;
	margin-bottom: 20px;
}
.txtMultipisos, .txtSedaSuave, .txtMulticryl, .txtmultilar, .txtLuzSuave, .txtEmborrachado, .txtSelador, .txtMassaCorrida, .txtMassaAcrilica, .txtFundoPrepara,
.txtFundoFixador, .txtTexturaRustica, .txtTexturaAcrilicaLisa, .txtTexturaChapisco, .txtEfeitoCimentado, .txtMantaAcrilicaFundacao, .txtMantaAcrilicaLajesCalhas
{
	flex: 1;
	display: flex;
	align-items: stretch;
	text-align: justify;
}												
.imgMultipisos, .imgSedaSuave, .imgMulticryl, .imgMultilar, .imgLuzSuave, .imgEmborrachado, .imgSelador, .imgMassaCorrida, .imgMassaAcrilica, .imgFundoPrepara,
.imgFundoFixador, .imgTexturaRustica, .imgTexturaAcrilicaLIsa, .imgTexturaChapisco, .imgEfeitoCimentado, .imgMantaAcrilicaFundacao, 
.imgMantaAcrilicaLajesCalhas
{
	width: 225px;
	height: auto;
	padding: 10px;
	flex-shrink: 0;
	background-image: url("images/Banner Multipisos.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #e0f7fa;
}
.txtMulticryl article, .txtMultipisos article, .txtSedaSuave article, .txtmultilar article, .txtLuzSuave article, .txtEmborrachado article,
.txtSelador article, .txtMassaCorrida article, .txtMassaAcrilica article, .txtFundoPrepara article, .txtFundoFixador article,
.txtTexturaRustica article, .txtTexturaAcrilicaLisa article, .txtTexturaChapisco article, .txtEfeitoCimentado article, .txtMantaAcrilicaFundacao article,
.txtMantaAcrilicaLajesCalhas
{
	flex: 1;
	padding: 20px;
	background-color: white;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	color: black;
	font-size: 30px;
	font-weight: bold;
}
.txtFundoFixador article, .txtMassaAcrilica article, .txtFundoPrepara article, .txtMassaCorrida article, .txtSelador article, .txtTexturaRustica article,
.txtTexturaAcrilicaLisa article, .txtTexturaChapisco article, .txtEfeitoCimentado article, .txtMantaAcrilicaLajesCalhas article
{
	font-size: 23px;
}
.imgMultipisos
{
	width: 300px;
	height: 637px;
}

.imgSedaSuave
{	
	background-image:url("images/SedaSuaveEmborrachada.png");
	width: 300px;
	height: 637px;
}

.imgMultilar 
{
	background-image:url("images/Banner-Multilar.png");	
}	

.imgMulticryl
{	
	background-image: url("images/Banner Multicryl.png");
}
.imgLuzSuave
{
	background-image: url("images/LuzSuave.jpg");
	width: 600px;
}
.imgEmborrachado
{
	background-image: url("images/SedaSuaveEmborrachada.png");
	width: 300px;
	height: 637px;
}
.imgSelador
{
	background-image: url("images/selador.png");
	width: 600px;
}
.imgMassaCorrida
{
	background-image:url("images/MassaCorrida.png");
	width: 600px;
}
.imgMassaAcrilica
{
	background-image: url("images/MassaAcrilica.png");
	width: 600px;
}
.imgFundoPrepara
{
	background-image: url("images/FundoPrepara.png");
	width: 600px;
}
.imgFundoFixador
{
	background-image: url("images/Fixador.png");
	width: 600px;
}
.imgTexturaRustica
{
	background-image: url("images/TexturaRustica.png");
	width: 544px;
}
.imgTexturaAcrilicaLisa
{
	background-image: url("images/TexturaAcrilicaLisa.jpg"); 
	width: 449px;
}
.imgTexturaChapisco
{
	background-image: url("images/texturaChapisco.jpg");
	width: 477px;
}
.imgEfeitoCimentado
{
	background-image: url("images/EfeitoCimentado.jpg");
	width: 541px;
}
.imgMantaAcrilicaFundacao
{
	background-image: url("images/Mantafundacao.png");
}
.imgMantaAcrilicaLajesCalhas
{
	background-image: url("images/MantaPiscinas.png");
	width: 600px;
}

/** MENU */

#menu-wrapper
{
	background: #FFFFFF;
	position: sticky; 
    top: 0px; 
    right: 0px; 
	left: 0px;
    z-index: 1000; 
}

.menuP{
	list-style: none;
 	 display: flex;
}
.menuP li a {
  display: block;
  color: white;
  text-decoration: none;
}
.dropdown{
	position: relative;
}
.submenu {
  display: none;      /* Esconde o menu por padrão */
  position: absolute; /* Faz ele flutuar abaixo do item pai */
  background-color: #B0E0E6;
  list-style: none;
}

.dropdown:hover .submenu {
  display: block;
}

.MissaoVisaoValor {
	padding: 20px;
}
.MissaoVisaoValor .sobreNos{
	font-size: 30px;
	text-align: left;
}
.MissaoVisaoValor img{
	height: 350px;
	width: auto;
	margin: 0 auto;
}
.imgVisaoMissaoValor {
	display: flex;
	justify-content: flex-start;
	border-radius: 8px;
	border: solid 1px;
	gap: 10px;
	width: 1200px;
	margin: 0px;
}
#sobreNos{scroll-margin-top: 150px;}


#menu ul {
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}

#menu li {
	display: inline-block;
}

#menu a {
	display: block;
	letter-spacing: 1px;
	padding: 0px 40px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.5em;
	line-height: 100px;
	border: none;
	color: #000000;
	font-weight: bold;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
}

#menu a:hover{
	background-color: #B0E0E6;
}


#menu .current_page_item a {
	background: #FFFFFF;
}

/** PAGE */

#page
{
	position: relative;
	overflow: hidden;
	padding: 6em 0em 5em 0em;
}

/** CONTENT */

#content
{
	float: left;
	width: 790px;
}

/*********************************************************************************/
/* Sidebar                                                                       */
/*********************************************************************************/

	#sidebar
	{
		float: right;
		width: 345px;
	}
	
	#sidebar .title h2
	{
		font-size: 1.6em;
	}
	
	#sidebar .box1
	{
		margin-bottom: 3em;
	}


/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

	#copyright
	{
		overflow: hidden;
		padding: 5em 0em;
		text-align: center;
	}
	
	#copyright p
	{
		letter-spacing: 0.20em;
		text-align: center;
		text-transform: uppercase;
		font-size: 0.80em;
		color: rgba(255,255,255,.5);
	}
	
	#copyright a
	{
		text-decoration: none;
		color: rgba(255,255,255,.7);
	}

/*********************************************************************************/
/* Welcome                                                                       */
/*********************************************************************************/

	#welcome
	{
		overflow: hidden;
		padding: 5em 0em;
		border-bottom: 1px solid #E5E5E5;
		text-align: center;
	}
	
	#welcome h2
	{
		letter-spacing: 0.20em;
		text-transform: uppercase;
		font-size: 2.6em;
	}
	
	#welcome p
	{
		font-size: 1.3em;
	}

	#welcome .byline
	{
		display: block;
		padding: 0em 0em 1.5em 0em;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 1.2em;
		color: #6F6F6F;
	}

/*********************************************************************************/
/* Portfolio                                                                     */
/*********************************************************************************/

	#portfolio-wrapper
	{
		background: rgba(0,0,0,.04);
		padding: 6em 0em;
		color: rgba(255,255,255,.7);
	}
	
	#portfolio
	{
		overflow: hidden;
	}
	
	#portfolio .title h2
	{
		font-size: 1.2em;
		color: #FFF;
	}

	#portfolio .byline
	{
		font-size: 1em;
		color: #EEA7C1;
	}
	
	#column1,
	#column2,
	#column3,
	#column4
	{
		width: 282px;
	}
	
	#column1,
	#column2
	{
		float: left;
		margin-right: 24px;
	}
	
	#column3
	{
		float: left;
	}
	
	#column4
	{
		float: right;
	}
	
/*********************************************************************************/
/* Button Style                                                                  */
/*********************************************************************************/

	.button
	{
		display: inline-block;
		margin-top: 1.5em;
		padding: 1.50em 3em 1.50em 3em;
		background: #16a085;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 0.90em;
		color: #FFF;
	}
	
		.button:before
		{
			display: inline-block;
			width: 40px;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			text-align: center;
			color: #FFF;
		}
.whatsapp-fixo {
  position: fixed;   /* Fica preso na tela */
  bottom: 20px;      /* 20px de distância do fundo */
  right: 20px;       /* 20px de distância da direita */
  width: 60px;
  height: 60px;
  z-index: 1000;     /* Garante que fique acima de tudo */
}

.whatsapp-fixo img {
  width: 100%;
  height: auto;
  /* Efeito de sombra para dar profundidade */
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.2));
}

.whatsapp-fixo:hover {
  transform: scale(1.1); /* Aumenta um pouco ao passar o mouse */
  transition: 0.3s;
}

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
	
	#footer-wrapper
	{
		overflow: hidden;
		padding: 5em 0em;
		background: #1E1B1A;
		border-radius: 8px;
	}

	#footer
	{
		color: #ADADAD;
	}
	
	#footer .title h2
	{
		font-weight: 400;
		font-size: 1.2em;
		color: #FFF;
	}

	#footer .title
	{
		border-color: #2D2926 !important;
	}
	
	#footer .style1 li
	{
		border-color: #2D2926 !important;
	}
	
	#footer .style1 a
	{
		font-size:1em;
		color: #B1B1B1;
	}
	
	#box1
	{
		float: left;
		width: 354px;
		margin-right: 24px;
		padding-right: 30px;
	}
	
	#box2
	{
		float: left;
		width: 354px;
		margin-left: 24px;
		padding-right: 30px;
	}
	
	#box3
	{
		float: right;
		width: 344px;
		padding-left: 40px;
	}