@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* { margin: 0; padding: 0; border:0; text-decoration:none;box-sizing: border-box; list-style: none;}
/* Basic */
body {font: 62.5%; font-family: 'Roboto', sans-serif; font-weight:400; font-size:16px;}
.clear{clear:both;}

topo{width:100%; float:left; text-align: center; height: 100px; }
topo meio{max-width:1024px; width: 100%; margin:0 auto; display: inline-block; text-align: right;}
topo meio social{ float: right; margin-top: 50px;}
topo meio a{ color: #971519; font-size: 24px; display: inline-block; vertical-align: middle;}
topo logo{ display: none; }

menu { width:100%; float:left; text-align: center; background: #971519; }
menu meio{max-width:1024px; width: 100%; margin:0 auto; display: inline-block;}
menu b1,
menu b2,
menu b3,
menu b4{ display: inline-block; width: 20%; }
menu logo{ display: inline-block; width: 20%; }
menu logo img{ max-width: 95%; position: relative; z-index: 999; margin: -75px 0; }
menu a{ font-size: 18px; padding: 10px; color: #FFF; display: inline-block; vertical-align: middle;}

@media screen and (max-width: 800px){
topo meio{ padding: 0 15px; }
topo logo{ display: inline-block; max-height: 100px; float: left; }
topo logo img{ max-width: 95%; max-height: 100px; position:inherit; margin:5px; }
menu logo{ display: none; }
menu b1,
menu b2,
menu b3,
menu b4{ display: inline-block; width: 25%; }
topo{ height: 120px; }
}
@media screen and (max-width: 500px){
	menu a{ font-size: 16px; padding: 5px;}
}
/* --------------------------- BANNER ------------------------------*/
.banner{width:100%; display: block; padding:0; margin:0; text-align:center; position: relative; z-index: 1;}
.banner .b1{display:block; }
.banner .b2{display:none;}
@media screen and (max-width: 1050px){
.banner p{font-size:26px; }
}
@media screen and (max-width: 800px){
.banner .b1{display:none;}
.banner .b2{display:block;}
}
/* --------------------------- HOME ------------------------------*/
homeEmp{width:100%; float:left; background:#eba600; padding:20px 0; text-align:center; }
homeEmp meio{max-width:1024px; width: 100%; padding:5px 20px; margin:0 auto; display: inline-block; text-align: justify; color: #333; font-weight: 400; line-height: 25px; }
homeEmp meio h1{ color: #971519; text-align: center;}
homeEmp meio h1 img{padding:5px 10px; margin:0 auto; display: inline-block; vertical-align: middle;}
@media screen and (max-width: 500px){
homeEmp meio h1{ font-size: 20px;}
homeEmp meio h1 img{display: none;}
}
/* --------------------------- PRODUTOS ------------------------------*/
bnprod{width:100%; float:left; padding:20px 0; text-align:center; background: url("../imagens/produtos.jpg"); }
bnprod meio{max-width:1024px; width: 100%; padding:25px 10px; margin:0 auto; display: inline-block; text-align: left;}
bnprod meio h2{ color: #FFF; text-align: left; padding: 20px 0;}
bnprod meio h3{ color: #FFF; padding: 20px 0 0;}
bnprod meio p{ color: #FFF; padding: 5px 0; width: 50%;}
bnprod meio .caixa{ position: absolute; right: 0; margin-top: -10%; width: 40%;}
@media screen and (max-width: 1000px){
bnprod meio .caixa{ display: none;}
bnprod meio h2,
bnprod meio h3,
bnprod meio p{ text-align: center; width: 100%;}

}

/* --------------------------- FRANQUIAS ------------------------------*/
produtos{width:100%; float:left; background:#971519; padding:20px 0; text-align:center; }
produtos meio{width: 80%; padding:5px 10px; margin:0 auto;display: inline-block;  text-align: left;}
produtos meio h2{ color:#FFF; font-size:24px; text-align: center; width: 100%; padding: 10px; margin: 0;  display: block;}
produtos meio .box{ width: 220px; height: 200px; border: 2px solid #FFF; margin: 10px; padding: 10px; border-radius: 10px; color: #FFF; display: inline-block; vertical-align: top; text-align: center; }
@media screen and (max-width: 1000px){
produtos meio{ text-align: center;}
}
/* --------------------------- INDENTIFICACAO ------------------------------*/
identificacao{width: 100%; text-align: center; padding: 15px 10px; display: inline-block;}
identificacao meio{ max-width: 1024px; width: 100%; margin: 0 auto; display: inline-block; text-align: center;}
identificacao h2{width:100%; text-align:center; color:#494949; font-weight:bold; padding:10px 0; }
identificacao box1{ display: inline-block; width: 50%; vertical-align: top; padding: 20px;}
identificacao box1 form{ text-align: left;}
identificacao box1 label{ display: inline-block; width: 100%; text-align: left; padding: 3px 0;}
identificacao box1 input{ display: inline-block; width: 100%; padding: 10px; border: 1px solid #333;border-radius: 5px;}
identificacao box1 p{ display: inline-block; width: 100%; padding: 10px 0;}
identificacao box1 button{ padding: 10px; border: 0; background: #c2272d; color: #FFF; cursor: pointer;border-radius: 5px;}
identificacao a{ padding: 10px; border: 0; background: #c2272d; color: #FFF; display: inline-block; font-weight: 400; font-size: 14px; margin-right: 5px;  border-radius: 5px;}
identificacao entrega label{ display: inline-block; width: 100%; text-align: left; padding: 3px 0;}
identificacao entrega input{ display: inline-block; width: 100%; padding: 10px; border: 1px solid #ccc;}
identificacao entrega select{ display: inline-block; width: 100%; padding: 10px; border: 1px solid #ccc;}
identificacao entrega p{ display: inline-block; width: 100%; padding: 10px 0;}
identificacao entrega button{ padding: 10px; border: 0; background: #c2272d; color: #FFF; cursor: pointer;border-radius: 5px;}

@media screen and (max-width: 900px){
identificacao .corpo{width:100%; height:auto;}
identificacao .corpo:last-child{border:0;}
}
@media screen and (max-width: 500px){
identificacao box1,
identificacao box2{ width: 100%;}

}
/* --------------------------- RODAPE ------------------------------*/


/* --------------------------- RODAPE ------------------------------*/
rodape{width:100%; display: block; padding:0; text-align: center; background: #cb622d; }
rodape meio{max-width:100%; width: 1020px; padding:15px; margin:0 auto; display: inline-block; }
rodape meio h2{color: #FFF; }
rodape meio box2{display: inline-block; vertical-align:middle; width: 50%; text-align: center;  }
rodape meio box2 label{ width: 100%; text-align: left; display: inline-block; padding:10px 0 0; vertical-align: middle; color: #FFF; font-size: 14px; font-weight: 400; }
rodape meio box2 input,
rodape meio box2 textarea{display: inline-block; width: 100%; max-width: 100%; padding: 5px; border-radius: 5px; background: #FFF; border: 1px solid #FFF; vertical-align: middle;}
rodape meio box2 google{display: inline-block; width: 300px; max-width: 100%; padding: 0; border-radius: 5px; margin: 10px auto; background: #333; vertical-align: middle; text-align: right; background: #f4f4f4;}
rodape meio box2 button{ display: inline-block; margin: 10px; padding: 10px 20px; color: #FFF; background: #c2272d; border: 0;  border-radius: 5px; font-size: 16px; font-weight: 400; }

rodape2{width:100%; display: block; padding:0; text-align: center; background: #e6e6e6;}
rodape2 img{max-width:100%; padding:10px; margin:0 auto; display: inline-block; }
rodape2 box2{width:100%; padding:5px; display: block; background: #c2272d; }
rodape2 box2 p{max-width:100%; padding:5px; font-weight: 14px; margin:0 auto; display: inline-block; color: #FFF; }

@media screen and (max-width: 500px){
rodape meio box2{display: inline-block; vertical-align:top; width: 100%; text-align: center;  }

}