@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700');

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}
	
/* HTML ELEMENTS */
body{font-size:12px; letter-spacing: 1px; color:#000;  background-color: #fff; padding:0 0px;   }
* {margin:0; padding:0; -webkit-box-sizing: border-box; box-sizing: border-box;  font-size: 18px; font-family: 'Jost', sans-serif; 	 }

.fundoCor{ background-color: #f6f4ec;}

html, body{height:100%; } 
p{word-wrap:break-word; line-height: 120%; }
a{ text-decoration:none;line-height: 140%;}
ul{list-style:none; }
.italico{ font-style: italic;}
 .centro{text-align:center;} 
.centralizando{margin:auto;}
.box-centro{display:inline-block;}
.floatImg{float: right; padding: 20px;}

.bgCinza2{background-color: #f8f8f8; }

h2{  font-weight: 600;  font-size: 2.2em; color:#3d722b;   }
h3{  font-weight: 600;  font-size: 1.5em; color:#76c043;line-height: 100%; margin-bottom: 20px   }
span{color: #76c043;}
.detalhe{ color:#76c043; text-transform: uppercase; }

.bolde{font-weight:bold;} 
.alinha-estrutura{max-width:1400px;   margin:auto;}
.limpaCss{clear:both; }
.negrito{ font-weight: bold;}
.cinza{color: #aaa;}


.containerHamburger{ position: absolute;  cursor:pointer; right:15px; top: 25px;	padding:5px; z-index: 9999999; display: none}
.container-fechar { position: absolute;  cursor:pointer; right:15px; top: 25px;	padding:5px; z-index: 9999999; display: block}
.bar1, .bar2, .bar3 { width:30px; height:4px; background-color:#fff; margin:6px 0; -webkit-transition:0.4s; -o-transition:0.4s; transition:0.4s;}
.change1 {  -webkit-transform:rotate(-45deg) translate(-9px, 4px) ; -ms-transform:rotate(-45deg) translate(-12px, 4px); transform:rotate(-45deg) translate(-12px, 4px);}
.change2 { opacity:0;}
.change3 {  -webkit-transform:rotate(45deg) translate(-8px, -6px) ; -ms-transform:rotate(45deg) translate(-8px, -6px); transform:rotate(45deg) translate(-8px, -6px);}
/* Rotate first bar */
/* Rotate first bar */
.changebar1 {  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;    -ms-transform: rotate(-45deg) translate(-9px, 6px) ;    transform: rotate(-45deg) translate(-9px, 6px) ;}
/* Fade out the second bar */
.changebar2 {  opacity: 0;}
/* Rotate last bar */
.changebar3 { -webkit-transform: rotate(45deg) translate(-6px, -6px) ;    -ms-transform: rotate(45deg) translate(-6px, -6px) ;    transform: rotate(45deg) translate(-6px, -6px) ;}
.logoTopo{  max-width: 450px;line-height: 100%; margin:0px auto; padding: 0px ;color: #ff0042; }
.logoTopo img{  width: 100%; height: auto; }

.menuSup{ position: relative;   display: flex; flex-direction: column; justify-content: space-between; align-items: center; max-width: 1250px; margin: auto;  padding-bottom: 20px; padding-top: 10px   }
.menuSup ul{  display: flex;flex-direction: column;  }
.menuSup ul li{ padding: 0px 10px;text-align: center; margin-bottom: 10px;  }
.menuSup a:link{text-decoration:none; color:#3d722b;   font-weight: bold; padding: 0px 10px; text-transform: uppercase}
.menuSup a:visited{text-decoration:none; color:#3d722b;}
.menuSup a:hover{text-decoration: none; color:#76c043;  }
.menuSup a:active{text-decoration: none; color:#3d722b;}

.destaque{color:#76c043 !important;}
 
 

.negocio{ padding: 80px 20px;}
.fundoRodape{background-image: url("../imagens/fundoRodape-p.jpg"); background-size: cover; background-repeat: no-repeat; background-position: bottom;  }

.direitos{ padding: 30px 20px; font-size: 14px; text-align: center;}
.footer hr{margin: 20px;}

.produtos{padding:140px 20px; text-align: center}
.produtos ul{ display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; margin:20px auto}
.produtos ul li{ width: 48%; margin: 2% 1%; background-color: #f6f4ec;}
.produtos ul li img{ width: 100%; height: auto;}
.produtos h3{ padding:20px 10px 10px ; font-size: 20px;color:#3d722b;}
.alinhaTxt{ max-width: 800px; margin:30px auto}



.modelo{ background-image: url("../imagens/fundoRodape-p.jpg"); background-size: cover; background-repeat: no-repeat; background-position: bottom; color: #fff; padding: 100px 20px;}
.modelo p{  font-weight: bold; font-size: 1.5em; line-height: 150%}

.confianca{ text-align: center; background-color:#f6f4ec; padding:80px 50px; }
.ancora{ position: fixed; bottom: 0px; right: 0px; width: 50px; height: 50px; background-color: #3d722b; color: #fff; }
.ancora .far{color: #fff;display: flex; align-items: center; justify-content: center; margin-top: 15px; font-size: 1.52em}

.alinhaRodape{ display: flex; flex-direction: column; margin:20px 0px 40px;justify-content: center; align-items: center}
.logoRodape img{ width: 100%;   height: auto; max-width: 200px; margin: auto}
.logoRodape {display: flex;  justify-content: center; align-items: center}
.fundoLogo{ background-image: url("../imagens/bg-logo-p.png"); background-repeat: no-repeat; background-position: center right}

 footer{color:#fff; padding: 40px 0 0;}
.alinhaRodape div{width: 100%; max-width: 100%; padding: 20px;}
.end p{ margin: 20px 0; line-height: 130%;}
.alinhaMail li{margin: 20px 0;}
.alinhaMail li p:nth-child(1){margin:10px 0 8px;color:#76c043; }

.banner-principal{ position: relative; width: 100%;   margin: auto; box-sizing: border-box; padding:0px 0px 0px 0px; min-height: 80vh; background-color: #ccc; display: flex; align-items: center; justify-content: center }
.banner-principal img{ width: 100%;  height: auto; display: block; }
.banner-principal h1{ font-size: 1.5em;   max-width: 800px; text-align: center; color: #fff; }
.banner-principal span{ font-size: 1.0em; }

.quadSeta{ position: absolute; left: 50%; margin-left: -25px;  bottom: 0px; width: 50px; height: 50px;  font-size: 2.0em; text-align: center; padding-top: 10px;background-color: #76c043; color: #fff;}
.animaSeta{animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; -moz-animation: bounce 2s infinite; -o-animation: bounce 2s infinite;}
.animaSeta .fas{color: #fff;}
 

.quem{display: flex; flex-direction: column; align-items: center; padding: 90px 20px; }
.fundoQuem{ background-image:url("../imagens/fundoQuem.png"); background-repeat: no-repeat; background-position: bottom}
.quem img{ width: 100%;   height: auto; display: block }
.quem div{ width: 100%; } 
.quem div:nth-child(2){ margin-top: 80px } 
.quem div:nth-child(1){ padding-right: 0px } 

.btFazemos{ position: relative; background-color: #3d722b; color: #fff; padding: 10px 15px; top: 30px;}

.tel{ font-size: 2em; }
 footer .fas{color:#78c344 ;}

.frasesBnr{ position: relative;  text-align: center;  color: #fff; z-index: 999; top: 35%;  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1) }
.midias{ position: fixed; right: 20px; z-index: 9999999; top: 45%; color: #041422;}
.midias > div{ position: relative; background-color: rgba(13,193,67,0.8);padding: 15px 15px 15px; margin: 6px 0; right: -220px; transition: .3s ease;}
.midias > div:hover{  right: -20px; }
.midias .fab{ animation: shake 1s;    animation-iteration-count: infinite;}
.midias .fab,.midias .fas{ font-size: 2em; margin-right: 15px;}
a.verMidias:link{ position: relative; text-decoration:none; color:#041422; padding: 0px; font-weight: bold;font-size: 1.12em; }
a.verMidias:visited{text-decoration:none; color:#041422;}
a.verMidias:hover{text-decoration: underline; color:#76c043;}
a.verMidias:active{text-decoration: none; color:#041422;}

a.verTel:link{ position: relative; text-decoration:none; color:#fff; padding: 0px; font-weight: bold;font-size: 1.12em; }
a.verTel:visited{text-decoration:none; color:#fff;}
a.verTel:hover{text-decoration: underline; color:#243b85;}
a.verTel:active{text-decoration: none; color:#fff;}


.alinhaBox{ display: flex; flex-direction: column; }
.alinhaBox article{ width: 100%; margin:20px 1%; background-color:rgba(255,255,255,.90); }
.alinhaBox article img{ width: 100%; height: auto; background-color: #fff; }	
.alinhaBox article div{ padding: 40px 20px;}


/* max device width ( mobile )*/
@media screen and  (max-width:560px) {
 
	

}
	 
 
/* min-width & max-width ( entre 767px e 950px )  TABLET*/ 
@media (min-width: 561px) and (max-width: 1100px)   {

	.menuSup{ position: relative;   flex-direction: column; justify-content: space-between; align-items: center; max-width: 1250px; margin: auto;     }
	.menuSup ul{  flex-direction: row; margin-top: 20px }
    .produtos ul li{ width: 23%; margin: 1%; background-color: #f6f4ec;}
    .produtos ul { justify-content: center}
	.alinhaBox{   flex-direction: row; flex-wrap: wrap; justify-content: center}
	.alinhaBox article{ width: 31%; margin: 1%; min-width: 300px;  background-color:rgba(255,255,255,.90); }

}
	

/* min-width ( acima de 900px ) */  
@media screen and (min-width: 1101px) {	 

	.menuSup{ position: relative;   flex-direction: row; justify-content: space-between; align-items: center; max-width: 1250px; margin: auto;     }
	.menuSup ul{  flex-direction: row;  }
	.menuSup ul li{ padding: 0px 10px;text-align: center; margin-bottom: 0px;  }

	.alinhaBox{   flex-direction: row; }
	.alinhaBox article{ width: 31%; margin: 1%; background-color:rgba(255,255,255,.90); }
	.quem{  flex-direction: row; align-items: center; padding: 100px 20px; }
    .alinhaRodape{   flex-direction: row; margin:20px 0px 40px;justify-content: center; align-items: center}
	.alinhaRodape div{width: 100%; max-width: 33%; padding: 20px;}
	.alinhaRodape div:nth-child(1){  max-width: 25%; }
	.alinhaRodape div:nth-child(2){  max-width: 30%;}
	.alinhaRodape div:nth-child(3){  max-width: 45%;}
	
	.produtos ul li{ width: 18%; margin: 1%; background-color: #f6f4ec;}
	.quem div{ width: 50%; } 
	.produtos ul{  flex-direction: row; flex-wrap: wrap; width: 80%; margin:20px auto}
	.banner-principal h1{ font-size: 2em; max-width: 800px; text-align: center; color: #fff; }
	.banner-principal span{ font-size: 1.5em; }
	.quem{display: flex; flex-direction: row; align-items: center; padding: 120px 20px; }
	.negocio{ padding: 100px 20px;}
	.quem div:nth-child(1){ padding-right: 20px } 
	.menuSup{  padding-bottom: 0px    }
	.fundoLogo{ background-image: url("../imagens/bg-logo.png"); background-repeat: no-repeat; background-position: center left}
	.modelo{ background-image: url("../imagens/fundoRodape.jpg");}

 }




/* Style the TABBBBBBBBBB */
.tab {   overflow: hidden;   border: 1px solid #ccc;   background-color: #f1f1f1; }
/* Style the buttons inside the tab */
.tab button {   background-color: inherit;   float: left;   border: none;   outline: none;   cursor: pointer;   padding: 14px 16px;   transition: 0.3s;   font-size: 17px; }
/* Change background color of buttons on hover */
.tab button:hover {   background-color: #ff0042; }
/* Create an active/current tablink class */
.tab button.active {   background-color: #ff0042; }
/* Style the tab content */
.tabcontent {   display: none;   padding: 6px 12px;   border: 1px solid #ccc;   border-top: none; }




