@charset "utf-8";
img, object, embed, video {
	max-width: 100%;
}

.ie6 img {
	width:100%;
}
body{
	font-family: "Arial Black";
	background-color:#333;
	margin-top:10%;
	height:100%;
	width:100%;
	}

#topo{
	margin-top:-10%;
	position: fixed;
	width:100%;
	}

	
h1{
	margin:0;
	background-color:#333;
	color:#FFF;
	height:4em;
  	display: flex;
  	align-items: center;
  	justify-content: center;
	font-size:35px;
	
	}
h3{
	font-size:18px;
	font-weight: lighter;
	color:#000;
	alignment-adjust:middle;
	}
#contato{
	font-size:18px;
	alignment-adjust:middle;
		}
	
.flex-container {
	
	margin-left:5%;
	margin-right:5%;
	display: flex;
  	justify-content: center;
}

.flex-container > div {
  background-color:#E1E1E1;
  width:75%;
  margin:5px;
  text-align: center;
  line-height:auto;
  font-size: 16px;
  height:auto;
}	

.flex-container2 {
	color:#FFF;
	display: flex;
  	justify-content:center;
  	background-color: #333;
	
}

.flex-container2 > div {
	margin-left:5%;
	background-color: #333;
	width:100%;
	
	
}	
/*NOSSOS PRODUTOS*/
.flex-container3 {
	margin-left:5%;
	margin-right:5%;
	display: flex;
  	justify-content: center;
}

.flex-container3 > div {
  width:100%;
  margin:5px;
  text-align: center;
  line-height:auto;
  height:auto;
}

.flex-container4 {
	
    margin-left:20%;
	margin-right:20%;
	display: flex;
}	
.flex-container4 > div {
  	text-align:left;
}
#refor1{
	font-size:16px;}

.gridContainer {
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
#LayoutDiv1 {
	
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#refor1{
	font-size:16px;}
#prod, #serv{
	margin-left:40%;
	margin-right:40%;	
	font-size:16px;}
	
#refor{
	text-align:center;
	}
	
#contato2{
	font-size:16px;
	}
		
#rodape{
	margin:0;	
	padding:0;
	color:#FFF;
	background-image:url(fundotopo.png);
	background-repeat:no-repeat;
	width:100%;
	height:100px;}
	
.antesdepois{
	width:70%;
	margin-left:20%;
	margin-right:20%;
	display: flex;
	}
.antesdepois > div {
  
  margin:5px;
  text-align: center;
  line-height:auto;
  height:auto;
}

.flex-containercontato {
	color: #333;
	display: flex;
  	justify-content: center;
	
}

.flex-containercontato > div {
	margin-top:5%;
	width:auto;
	margin:3%;
	text-align: center;

}
#serv, #prod{
	margin-left:10%;
	margin-right:10%;
	}
#reforserv{
	width:40%;
	}	
#titdicas{
	height:100px;
	background-color:#333;
	color:#FFF;
	display:flex;
	font-size:24px;
	padding: 20px 40%;}
.dicas{
	font-family:arial;
	width:100%;
	justify-content: center;
	background-color:#FFF;
	height:auto;
	display:flex;
	font-size:18px;
	padding:0 3%;
	
		}
#carrinho{
	width:100%;
	height:auto;
	background-color:#FFF;}	
	
	
/*Lei*/ 
	
#lei
{
	display: none;
	top:0;
	padding-left:20px;
	overflow: auto;
	position:relative;
	background-color: #FFF;
    width: 100%;
    height: 100%;
	z-index:9999;
	font-family: Arial;
  
	}
	
	#topolei
	{
	display: none;
	overflow: auto;
	position: fixed;
    top:0;
	background-color: #333;
    width: 100%;
    height:100%;
	z-index:9999;
	}
	#block{
		position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
		background-color: rgba(255, 255, 255, 0.8); 
		z-index: 9999;		
		}
.floating-div {
	
	  color:#FFF;
      position: fixed;
      top: 90%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      padding: 20px;
      background-color: #595959;
     
      z-index: 9999;
	  font-size:16px;
	  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }
    
    /* Estilos para os botões */
    .button {
	  font-family: prototype;
      padding: 10px 20px;
      margin-right: 10px;
      background-color: transparent;
      color: #FFF;
      border: 2px double;
      cursor: pointer;
	  padding: 10px 40px;
	  font-size: 18px;
	  border-radius: 10px;
    }
    
    /* Estilos para o link */
    .link {
      color: #FFF;
      text-decoration: none;
    }	
 .button1{
	 font-family: prototype;
	 text-decoration: none;
	 background-color: transparent;
     border: none;
     color: blue;
     text-decoration: underline;
     cursor: pointer;
	 font-size:14px;
	 border-bottom-color:#390;
	 border:none;}

#fecharlei{
	font-size:24px;
	font-family:prototype;
	margin-left:80%;
	font-weight:bold;
	color:#FFF;
	border:0;
	background-color:#333}	 	

/* Layout para tablets: 481 px a 768 px. Herda estilos de: Layout para celulares. */

@media only screen and (min-width: 481px) {
.gridContainer {
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


}

/* Layout para desktops: 769 px até o máximo de 1232 px. Herda estilos de: Layout para celulares e Layout para tablets. */

@media only screen and (min-width: 769px) {
.gridContainer {
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}
@media(max-width: 800px){
	 #lei, #topolei{
		   font-size:12px;}
	#contato{
		font-size:12px;
		}
   h1{
	   font-size:18px;
	   }
	#prod{
		font-size:14px;}
		#refor1{
	font-size:14px;}
	#prod{
	font-size:14px;}
	#contato2{
		font-size:14px;}
		#selo
	{width:63px;
	 height:56px;}
	
	   
   }
@media(max-width : 500px){
	
	bory{
		font-family:Arial;}
	
	#fecharlei{
	
	margin-left:10%;
	}	 	
	 #lei, #topolei{
		   font-size:12px;
		   width:100%;
		   height:100%;
		   }
		   
	#fecharlei{
	font-size:14px;
	}
	#i, #f{
	width:30px;
	height:30px;

	}
	.flex-container2 > div
	{margin-left:3%;}

	#end, #tel, #rel, #redes2, #redes
	{width:40px;
	 height:40px;}
    h1
    {font-size:14px;}
	
	#prod, #serv, #contato{
		font-size:8px;}
	#refor1
	{font-size:5px;}
	
	#contato2 #topolei, #lei
	{font-size:7px;}
	#rodape
	{font-size:6px;}	
	#peças
	{float:left;}
	iframe
	{width:90%;
	 margin-left:2%;}
	#selo
	{width:63px;
	 height:56px;}
	#reforserv
	{width:100%;}
	.flex-container4
	{margin-left:5%;
	 margin-right:5%;}
	#face
	{width:20px;
	 height:20px;}	
	#whats
	{width:10px;
	 height:10px;}
	.dicas
	{font-size:8px;
	 padding:0 0;}
	#titdicas
	{font-size:12px;
	 width:100%;
	 padding:0 30%;}
	#platoon
	{width:252px;
	 height:130px;}
	#int
	{width:252px;
	 height:170px;}	
	 
	 .floating-div{
		 width:100%;
		 height:auto;
		 font-size:12px;
	  }
	  #aceitar{
		  font-size:14px;}
		  
   @media(max-width : 300px){
	   	bory{
		font-family:Arial;}
	   #lei, #topolei,#floatingDiv, #aceitar{
		   font-size:7px;}
   h1{
	   font-size:10px;}
	
		#prod, #serv{
		font-size:10px;} 
		#refor1{
	font-size:10px;}
	#prod{
	font-size:10px;}
		#contato2{
		font-size:10px;}
		
	  }
	  #aceitar{
		  font-size:14px;}
	
		
   }
   @media(max-width : 200px){
   h1{
	   font-size:5px;}
	 
		#prod, #serv{
		font-size:5px;} 
		#refor1{
	font-size:5px;}
	#prod{
	font-size:5px;}
		#contato2{
		font-size:5px;}	
		
   }
   .whatsapp-div {
            position: fixed; /* Torna a div fixa na tela */
            bottom: 20px; /* Define a distância da parte inferior da tela */
            right: 20px; /* Define a distância da parte direita da tela */
            
            padding: 10px; /* Espaçamento interno */
            border-radius: 50%; /* Torna o ícone redondo */
            z-index: 1000; /* Camada de empilhamento alta para ficar acima do conteúdo */
            cursor: pointer; /* Altera o cursor para indicar que é clicável */
        }

        /* Estilo para o ícone do WhatsApp */
        .whatsapp-icon {
            width: 30px; /* Largura do ícone */
            height: 30px; /* Altura do ícone */
            fill: #fff; /* Cor do ícone (branco) */
        }