/*Resetando os estilos doos componentes da página*/
body, h1, h2, p, ul, li, a {
	margin: 0px;
	padding: 0px;  
}
/*Setando a fonte padrão e colocando informando a cor de fundo do corpo da página*/
body {
	font-family: "Nunito", Helvetica, Arial, sans-serif;
	color: #111;
	background: #FFFFFF;
}
header{
	height: auto;
	overflow: hidden;
}
/*Resetando os estilos das listas, por exemplo, aquelas bolinhas que ficam à frente dos ítens*/
ul {
	 list-style: none;
}
/*Resetando o sublinhado dos links*/
a {
	text-decoration: none;
}
/*Ajustando as imgs pra que sejam responsivas, sem estourar o container*/
img {
	display: block; 
	max-width: 100%;
}
/*border-box serve pra respeitar o tamanho do conteiner(* = todos os elementos), independente do padding add na configuração do ítem */
* {
	box-sizing: border-box;
	outline: none!important;
	text-decoration: none!important ;
}



/****************************************************************************************************************************************\



/*Informando a cor de fundo e a cor do texto do topo*/
.fundo-menu {
	font-family: "Nunito", Helvetica, Arial, sans-serif;
	/*background: rgba(28,28,28,0.7);*/
	background: #04254E;
	color: #FFF; 
	text-align: center;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}

.fundo-menu p {
	font-family: "Lato", Rye, Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	text-shadow: black 2px 2px 2px;
	/*background: #222;*/
	color: #FFF; 
	text-align: center;
}

.espaco-menu {
	max-width: 1200px;  /*Informando a largura das "sections",  onde as informações da página são ajustadas*/
	margin: 0 auto;    /*Alianhando o ítem ao centro, sendo "zero" pra cima e pra baixo e "auto" para os lados*/
	display: flex;     /*Os elementos se ajustam lado a lado*/
	justify-content: space-between; /*Ajusta o espaçamento entre os elementos, respeitando o tamanho de cada um deles*/
	flex-wrap: wrap;   /*Quebra os elementos para a próxima linha, de acordo com o tamanho da tela*/
	padding-top: 20px; /*Da um espaçamento (interno) sob a margem superior*/
}

.espaco-menu p, .espaco-menu a{
	margin: 0 10px 10px 10px;  /*Cria uma margem de "zero" acima, "dez" para os lados e "dez" pra baixo*/
}

.espaco-menu a {
	color: #F0F0F0;  /*Define a cor do link dentro do topo*/
}

#funto-topo {
	position: fixed;
	background: rgba(28, 28, 28, 0.8); 
	transition: all 0.4s;
   -webkit-transition: all 0.4s;
   -moz-transition: all 0.4s;
   -ms-transition: all 0.4s;
   -o-transition: all 0.4s;	
}
.menu-diferente {
	/*background: rgba(28,28,28,0.8);*/
	background: #04254E;
	transition: all 0.4s;
   -webkit-transition: all 0.4s;
   -moz-transition: all 0.4s;
   -ms-transition: all 0.4s;
   -o-transition: all 0.4s;	
}

.menu ul {
	display: flex;   /*Alinha os ítens lado a lado*/
	flex-wrap: wrap; /*Quebra os textos do menu para a próxima linha, de acordo com o tamanho do container*/
}

.menu a {
	font-size: 0.75em; /*Define o tamanho da fonte da logo. Calcula-se o tamanho em pixel(20) dividido por 16 (base do browser)*/
	display: block;    /*Mantém os ítens do menu inline*/
	padding: 5px;     /*Cria um distanciamento entre os ítens em todas as bordas*/
}

.menu a:hover {
	color: yellow;       /*Define a cor dos textos do Menu ao passar o mouse*/
}

.menu ul li:hover {
	/*background: #555;*/ 
}

.menu ul ul{
	position: absolute;
	display: list-item;
	visibility: hidden;
	/*margin-top: 12px; */
	padding-top: 13px;
}

.menu ul li:hover ul{
	visibility: visible;
}

.menu ul ul li{
	/*border-bottom: solid 1px #CCC;*/
	/*top: 0; left: 0; bottom: 0; right: 0;*/
	margin-top: -9px;
	/*background: rgba(28,28,28,0.7); */
	background: #224E84;
}

.menu ul ul li a{
	/*background-color: #999;*/
	font-size: 0.75em;
	/*background: rgba(28,28,28,0.7);*/
}

label[for="bt_menu"] {
	position: fixed;
	padding: 5px;
	color: #04254E;
	font-family: "Arial";
	text-align: center;
	font-size: 40px;
	cursor: pointer;
	width: 50px;
	height: 50px;	
	z-index: 30;
}
	
/*****************************************************************************************************************************************/

.categlay1{
	position: relative;
	top: 250px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	width: 98%;
/*	height: 420px; */
	border-top: 1px #CCC solid;
	margin: 5px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 998;
}
.categlay2{
	position: relative;
	top: 180px;
	width: 98%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
/*	height: 490px; */
	border-top: 1px #CCC solid;
	margin: 5px;
	overflow-y: auto;
	overflow-x: hidden;
}
.prodlay1{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 98%;
	/*height: 370px; */
	border-top: 1px #CCC solid;
	margin: 5px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 998;
}
.prodlay2{
	position: relative;
	width: 98%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*height: 440px;*/  
	border-top: 1px #CCC solid;
	margin: 5px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 998;
}
.prodlayA{
	position: relative;
	top: 150px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 98%;
	/*height: 315px;*/
	margin: 5px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 998;
}
.prodlayB{
	position: relative;
	top: 150px;
	width: 98%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*height: 385px;*/
	margin: 5px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 998;
}
.delivlay1{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	width: 98%;
/*	height: 470px; */
	border-top: 1px #CCC solid;
	margin: 5px;
	padding: 5px;
	overflow-y: auto;
	overflow-x: hidden;
}
.delivlay2{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	width: 98%;
/*	height: 540px; */
	border-top: 1px #CCC solid;
	margin: 5px;
	padding: 5px;
	overflow-y: auto;
	overflow-x: hidden;
}
.bg-img {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
	z-index: -2000;
}

#img1top {
	width: 100%;
}

.toplogo {
	position: fixed;
	top: 0;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	justify-content: space-between;
	width: 100%;
	z-index: 1000;
	background: #FFF;
}
.imglogo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	align-items: center;
	background-color: white;
}
.imglogo img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
}
.txtlogo {
	padding: 5px;
	justify-content: right;
}
.txtlogo h2 {
	text-align: right;  
	font-family: "Barlow",Helvetica Neue,Roboto,Helvetica,Arial,sans-serif;
	font-size: 1.3em;
	margin-bottom: 5px;
}
.txtlogo p {
	text-align: right;  
	font-family: "Barlow",Helvetica Neue,Roboto,Helvetica,Arial,sans-serif;
	font-size: 1.0em;		
}
#deliv {
	margin-top: 5px;
	text-align: right;  
	font-family: "Barlow",Helvetica Neue,Roboto,Helvetica,Arial,sans-serif;
	font-size: .75em;		
}
.cabecalho {
	position: fixed;
	top: 130px;	
	width: 100%;
	height: 50px;
	padding: 10px;
	text-align: center;  
	font-family: "Barlow",Helvetica Neue,Roboto,Helvetica,Arial,sans-serif;
	font-size: 1.75em;	
	z-index: 999;
	background: red;
}
.categ {
	display: flex;
	flex-wrap: wrap;
	width: 96%;
	height: 50px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #555;
	color: white;
}
.categ a {
	text-decoration: none;
}
.categ2 {
	display: flex;
	flex-wrap: wrap;
	width: 15%;
	height: 150px;
	margin: 5px;
	border: 1px solid #CCC;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	box-shadow: #CCC 2px 2px 2px;
	align-items: center;
	justify-content: center;
	text-align: center;	
}
.categB {
	display: flex;
	flex-wrap: wrap;
	width: 15%;
	height: 150px;
	margin: 5px;
	border: none;
	align-items: center;
	justify-content: center;
	text-align: center;	
}
.imgCateg {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;	
}
.imgCateg img {
	width: 125px;
}
#imgCat {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	top: 10px;
}
.det-conteiner {
	position: relative;
	top: -10px;
	display: inline;
	flex-wrap: wrap;
	width: 98%;
	padding: 5px;
}
.det-conteiner2 {
	position: relative;
	display: inline;
	flex-wrap: wrap;
	width: 98%;
	padding: 5px;	
}
.det-conteiner-prod {
	position: relative;
	top:150px;
	display: inline;
	flex-wrap: wrap;
	width: 98%;
	height: 620px;
	padding: 5px;
	overflow-y: auto;
	overflow-x: hidden;	
}
.home {
	display: flex;
	flex-wrap: wrap;
	width: 98%;
	height: 40px;
	border-top-left-radius: 15px;
	border-bottom-right-radius: 15px;
	padding: 10px;
	margin-top: 10px;
	padding-left: 50px;
	margin-bottom: 15px;
	justify-content: left;
	align-items: center;
	box-shadow: #BFBFBF 2px 2px 2px;
	background: #E4E4E4;
}
#imghome {
	position: absolute;
	width: 20px;
	left: 20px;
}
.img_home {
	width: 98%;
	margin-top: 10px;
}
.img_home a {
	color: red;
	font-size: 0.8em;
}
#bothomemenu {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 30px;
	right: 0px;
	border-radius: 8px;
	border: 1px solid #CCC;
	background: rgba(255,255,255,0.8);	
}
#bothomeped {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 30px;
	right: 0px;
	border-radius: 8px;
	border: 1px solid #CCC;
	background: rgba(255,255,255,0.8);	
}
#bothomecnt {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 30px;
	right: 0px;
	border-radius: 8px;
	border: 1px solid #CCC;
	background: rgba(255,255,255,0.8);	
}
#detped {
	right: 90px;
	top: 65px;
}
.alt150 {top: 150px;}
.alt190 {top: 190px;}
.alt230 {top: 230px;}
.alt1060 {top: 1060px;}
.alt1100 {top: 1100px;}
.alt1140 {top: 1140px;}
.alt1470 {top: 1470px;}
.alt1510 {top: 1510px;}
.alt1550 {top: 1550px;}
.backHome {
	position: fixed;
	top: 135px;	
	/*position: absolute;*/
	display: flex;
	flex-wrap: wrap;
	/*top: 141px;*/	
	left: 15px;
	width: 30px;
	height: 20px;
	z-index: 9999;
}
.logSessao {
	position: fixed;
	display: flex;
	flex-wrap: wrap;
	top: 141px;	
	right: 15px;
	width: 30px;
	height: 20px;
	z-index: 9999;
}
.deschome {
	display: flex;
	flex-wrap: wrap;
	width: 98%;
	margin-top: 10px;
	padding-top: 10px;
	justify-content: space-between;
}
.deschome p {
	font-size: 1.15em;
	color: #333;
	text-align: justify;
}
.separa {
	width: 100%;
	height: 2px;
	margin-top: 40px;
	margin-bottom: 30px;
	background: #999;
}
.iconehome {
	display: flex;
	flex-wrap: wrap;
	width: 98%;
	margin-top: 10px;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	justify-content: center;
}
.iconehome img {
	width: 50px;
}
.espaco {
	padding-left: 20px;
	padding-right: 20px;
}
.titimghome {
	display: flex;
	flex-wrap: wrap;
	width: 98%;
	margin-top: 10px;
	padding-top: 10px;	
}
.titimghome h1 {
	font-size: 1.5em;
	text-shadow: 1px 1px 1px #000;
	color: orange;
	text-align: justify;	
}
.detprod {
	position: relative;
	flex: 1 1 250px;
	margin-top: 10px;
	height: 132px;
	padding: 5px;
	border: 1px solid #CCC;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	box-shadow: #CCC 5px 5px 5px;	
	overflow-y: auto;
	overflow-x: hidden;	
}
.detprod p {
	color: #444;
	font-size: 1.1em;
}
.detprod span {
	position: absolute;
	margin-top: -8px;
	right: 10px;
	z-index: -1;
}
.detprod span img {
	width: 75px;
	height: 75px;
	border-radius: 50%;
}
.detprod h2 {
	margin-top: 10px;
	color: maroon;
	font-size: 1.85em;
}
.decimal {
	width: 96%;
}
.detprod .decimal h1 {
	float: left;
	/*margin-left: 25px;*/
	margin-top: -35px;
	color: maroon;
	font-size: 1.1em;
}
#imgpromo {
	position: absolute;
	margin-top: -50px;
	left: 5px;
}
#imgpromo img {
	width: 50px;
}
.txtdetpro {
	width: 100%;
	color: #444;
	font-size: 0.75em;
	margin-top: 5px;
	text-align: left;
	padding: 2px;
	z-index: 1;
}
.listaped {
	display: flex;
	width: 100%;
	margin-top: 5px;
	padding: 5px;
	font-size: 1.0em;
	border-bottom: 1px solid #ccc;
}
.codped {
	position: relative;
	width: 24%;
	text-align: left;
}
.hrped {
	position: relative;
	width:15%;
	text-align: center;
}
.stped {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 43%;
	text-align: center;
	font-size: 0.7em;
}
.consped {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 9%;
	justify-content: right;
	align-items: center;
}
.consped img {
	width: 25px;
}
.codpedY {
	position: relative;
	display: block;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
.codpedY p {color:  #999}
.qdeIP {
	width: 8%;
}
.descIP {
	width: 55%;
}
.stip {
	display: flex;
	justify-content: right;
	align-items: center;
	width: 28%;
	font-size: 0.7em;
	text-align: right;
	padding-right: 2px;
}

.L1 {margin-left: 25px;}
.L2 {margin-left: 43px;}
.L3 {margin-left: 61px;}
.L4 {margin-left: 79px;}

.comandos {
	position: fixed;
	bottom: 50px;	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	padding-left: 5px;
	padding-right: 5px;
	height: 50px;
	z-index: 9997;
}
.act {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 3px;
	width: 72px;
	height: 44px;
	border-radius: 5px;
	margin: 1px;
	margin-top: 2px;
	border: 0px solid #999;
	font-size: 0.45em;
	color: #fff;
}
.act a {
	text-decoration: none;
	color: #fff;
}
.lnkbot {
	padding: 3px;
	width: 72px;
	margin-top: -3px;
}
.act img {
	width: 35px;
}
.pedido {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-top: -40px;
	width: 100px;
	height: 35px;
	padding: 1px;
	left: 36%;
	border-radius: 5px;
	/*background: #E1E1E1;*/
}
.pedido a {
	font-size: 0.65em;
	color: #666;
}
.pedido span {
	font-size: 1.0em;
	color: red;
	top: 25px;
}
#lupa {
	width: 25px;
}
.btMenos{	
	display: flex;
	width: 25px;
	height: 30px;
	text-align: center;
	justify-content: center;
	align-items: center;
	background: #B6B6B6;
	border-radius: 10px;
}
.btMenos p, a {
	font-size: 1.25em;
	color: #FFF;
}
.btMenos img {width: 16px;}
.btQde {	
	display: flex;
	width: 25px;
	height: 30px;
	text-align: center;
	justify-content: center;
	background: transparent;
	border-radius: 2px;
}
.btQde p, a {
	font-size: 1.4em;
	font-weight: bold;
	color: red;
}
.btMais {	
	display: flex;
	width: 25px;
	height: 30px;
	text-align: center;
	justify-content: center;
	align-items: center;
	background: #B6B6B6;
	border-radius: 10px;
}
.btMais img {width: 16px;}
.btMais p, a {
	font-size: 1.10em;
	color: #FFF;
}
#consPedido {
	position: fixed;
	top: 400px;
	left: 2px;
	width: 50px;
	height: 50px;
	z-index: 2000;
}
#consPedido img {
	width: 50px;
}
#consConta {
	position: fixed;
	top: 465px;
	left: 2px;
	width: 50px;
	height: 50px;
	z-index: 2001;
}
#consConta img {
	width: 50px;
}

.bottxt {width: 100%;}
.botimg {width: 100%;} 

.close {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	text-align: center;
	justify-content: center;
	align-items: center;
	color: black;
}
#emoji {
	position: relative;
	align-items: center;
}
.close img {
	width: 75px;
}

/***************************************************************************************************************************************/
.modulos {
	width: 98%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: 5px;
	border-radius: 5px;
	padding-left: 10px;
	padding-right: 10px;
}
.modulos img {
	width: 100px;
}
.mod1 {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 23%;
	margin-bottom: 10px;
	border-radius: 10px;
}
.mod2 {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;	
	width: 100%;
	height: 23%;
	margin-bottom: 10px;
	background: purple;
	border-radius: 10px
}
.mod3 {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 23%;
	margin-bottom: 10px;
	background: darkgreen;
	border-radius: 10px
}
.mod4 {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;	
	width: 100%;
	height: 23%;
	margin-bottom: 10px;
	background: blue;
	border-radius: 10px
}
.garcom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 25px;
	border-bottom: 1px solid #CCC;
}
.icone {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 10px;
	width: 140px;
	height: 100px;
	border-radius: 10px;
	color: #FFF;
	font-weight: bold;
}
.icone span {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	top: -10px;
	right: -10px;
	border-radius: 50%;
	border: 1px solid #CCC;
}
.icone a {
	font-size: 1.0em;
}
#qped {background: darkgreen;}
#qprod {background: royalblue;}
#qmesa {background: red;}
#qsala {background: #D708CB;}
#pedpto {background: #DF8108; color: #FFF;}
.botao-conteiner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 75px;
}
.botao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;	
	width: 50px;
	height: 50px;
	margin: 25px;
	bottom: 5px;
	border-radius: 50%;
}
#back {background: orange;}
#up {background: #9BBE2E;}
.botao-conteiner a {color: #333;}
.mesa {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 9%;
	justify-content: center;
	font-weight: bold;
	color: red;
	align-items: center;	
}
.botao-conteinerDeliv {
	position: fixed;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/*top: 20px;*/
	bottom: 50px;
	width: 100%;
	margin: 0 auto;
}
.botaoDeliv {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;	
	width: 50px;
	height: 50px;
	margin: 0 25px;
	bottom: 0px;
	border-radius: 50%;
	background: red;
}
.botao-conteinerDeliv a {color: #333;}
.cabecPX {
	position: relative;
	display: flex;
	width: 100%;
	font-size: 0.75em;
	font-weight: bold;
	text-align: center;
	color: blue;	
	border-bottom: 1px solid #CCC;
	padding: 5px;
}
.codpedx {
	position: relative;
	width: 24%;
}
.mesax {
	position: relative;
	width: 9%;
}
.hrpedx {
	position: relative;
	width: 15%;
}
.stpedx {
	position: relative;
	width: 43%;
}
.conspedx {
	position: relative;
	width: 9%;
}
#cod {text-align: left;}


/**************************************************************************************************************************************/

.footer {
	position: fixed;
 	display: flex;		/*Alinha lado a lado os ítems do footer*/
 	height: 50px;
 	align-items: center;
 	justify-content: space-between;
 	bottom: 0;
 	width: 100%;
 	z-index: 9999;

/*	position: relative;
 	display: flex;		
 	height: 50px;
 	align-items: center;
 	justify-content: space-between;*/
 } 

.footer p {
	flex: 1;
	text-align: center; 
	font-size: 0.75em;
	margin:0 auto;
}
.footer spam {
	flex: 1;
	text-align: center; 
	font-size: 0.75em;
	margin:0 auto;
}
/*Cor de fundo*/
.bg0 {background: #04254E;} /*Padrão SWTI*/
.bg1 {background: #FFFFFF;}	/*branco*/
.bg2 {background: #000000;}	/*preto*/
.bg3 {background: #B9B7B5;}	/*cinza claro*/
.bg4 {background: #797775;}	/*cinza*/
.bg5 {background: #545352;}	/*cinza escuro*/
.bg6 {background: #55F349;}	/*verde claro*/
.bg7 {background: #19A60E;}	/*verde*/
.bg8 {background: #257708;}	/*verde escuro*/
.bg9 {background: #38D8E2;}	/*azul claro*/
.bg10 {background: #0410FB;}/*azul*/
.bg11 {background: #060FC3;}/*azul escuro*/
.bg12 {background: #F7F89A;}/*amarelo claro*/
.bg13 {background: #FCFF01;}/*amarelo*/
.bg14 {background: #D8DA06;}/*amerelo escuro*/
.bg15 {background: #BA7304;}/*marrom claro*/
.bg16 {background: #905A04;}/*marron*/
.bg17 {background: #680406;}/*marron escuro*/
.bg18 {background: #FC504C;}/*vermelho claro*/
.bg19 {background: #FE0107;}/*vermelho*/
.bg20 {background: #BF0408;}/*vermelho escuro*/
.bg21 {background: #EF0DE2;}/*violeta claro*/
.bg22 {background: #BF0AB4;}/*violeta*/
.bg23 {background: #9A0591;}/*violeta escuro*/
.bg24 {background: #FAB43A;}	/*laranha claro*/
.bg25 {background: #FEA203;}/*laranja*/
.bg26 {background: #DF8108;}/*laranja escuro*/

/*Cor Fonte Cabeçalho e rodapé*/
.ftCab0 {color: #000;}
.ftCab1 {color: #FFF;}
.ftCab2 {color: #CCC;}

/*Cor Fonte Categ*/
.ftCat0 {color: #000;}
.ftCat1 {color: #FFF;}
.ftCat2 {color: #CCC;}

/*Cor Fonte Status Pedido*/
.ftSt0 {color: #F89F12;}
.ftSt1 {color: red;}
.ftSt2 {color: green;}
.ftSt3 {color: blue;}
.ftSt4 {color: maroon;}
.ftSt5 {color: #F65FDB;}

.disable {
	background: #969696;
	color: #BFBFBF;
	box-shadow: #BFBFBF 2px 2px 2px;
	text-shadow: #E0E0E0 1px 1px 1px;
}
.disable2 {
	background: #D5D7D5;
	box-shadow: #B6B5B5 5px 5px 5px;
}
.colline {display: flex; flex-wrap: wrap; align-items: center;}
.colline h1 {font-size: 1.25em; padding: 10px;}
.w05 {width: 5%;}
.w10 {width: 10%;}
.w15 {width: 15%;}
.w20 {width: 20%;}
.w25 {width: 25%;}
.w30 {width: 30%;}
.w35 {width: 35%;}
.w40 {width: 40%;}
.w45 {width: 45%;}
.w50 {width: 50%;}
.w55 {width: 55%;}
.w60 {width: 60%;}
.w65 {width: 65%;}
.w70 {width: 70%;}
.w75 {width: 75%;}
.w80 {width: 80%;}
.w85 {width: 85%;}
.w90 {width: 90%;}
.w95 {width: 95%;}
.w100 {width: 100%;}

.algl {text-align: left; justify-content: left;}
.algC {text-align: center; justify-content: center;}
.algR {text-align: right; justify-content: right;}
.brdT {border-top: 1px solid #CCC;}
.brdB {border-bottom: 1px solid #CCC;}
.brdTx {border-top: 1px solid #FEA203;}
.brdBx {border-bottom: 1px solid #FEA203;}

.tft0 {font-size: 0.5em;}
.tft0b {font-size: 0.6em;}
.tft1 {font-size: 0.75em;}
.tft1b {font-size: 0.8em;}
.tft2 {font-size: 1.0em;}
.tft3 {font-size: 1.25em;}
.tft4 {font-size: 1.5em;}


.mapa {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 0px;
	margin-top: 20px;
	border-top: transparent;
	border-bottom: transparent;
	margin-bottom: 50px;
	width: 100%;
	order: 2;
}
.mapa iframe {
	position: relative;
	top: 10px;
	width: 360px;
	height: 270px;
}
.final {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	width: 98%;
	padding: 5px;
	margin-top: 20px;
	margin-bottom: 20px;
	background: #E4E4E4;
	justify-content: center;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
.final h1 {
	color: #000;
	font-size: 1.5em;
	text-align: center;
}



/*BOTÃO PARA ABRIR O MENU EM TELA DE TABLET OU CELULAR*/
/*Pra esconder o checkbox na tela grande*/
#bt_menu {
	display: none;
}
/*Pra esconder o botão na tela grande*/
label[for="bt_menu"] {
	display: none;
}

@media (max-width: 799px) {
	/*Pra aparecer o botão na tela de tablets ou smatphone*/
	label[for="bt_menu"] {
		/*display: block;*/
		display: none;
	}

	#bt_menu:checked ~ .fundo-menu {
		margin-left: 0px;
	}
/*Pra esconder o menu na tela de tablets ou smatphone*/
	.fundo-menu {
		background: rgba(54,54,54,1.0);
		font-size: 1.25em;
		margin-left: -100%;
		transition: all .4s;
	}	

	.menu ul li {
		width: 100%;
		float: none;
	}
	.menu ul ul {
		position: static;
		overflow: hidden;
		max-height: 0;
		transition: all .4s;
	} 
	.menu ul li:hover ul{
		height: auto;
		max-height: 200px;
	}
	.espaco-menu p {
		padding-left: 60px;  /*Cria uma margem de "zero" acima, "dez" para os lados e "dez" pra baixo*/
	}	


	.menu ul ul {
		background: rgba(28,28,28,1.0); 
	}
	.menu ul ul li {
		background: rgba(28,28,28,1.0); 
		border-bottom: solid 1px #555;
	}
	.menu a:hover {
		color: #3CBE0F;
		font-size: 0.80em;       /*Define a cor dos textos do Menu ao passar o mouse*/
		font-weight: bold;
	}
	.menu ul ul a {
		color: #3CBE0F;  /*Define a cor do link dentro do topo*/
	}	
	.bloco1 {
		margin-top: 5px;
	}
	.bg-img {
	height: 200px;	
	}
	.prodlayA{
		width: 98%;
		/*height: 445px;*/
		margin: 5px;
	}
	.prodlayB{
		width: 98%;
		/*height: 490px;*/
		margin: 5px;	
	}	
	.delivlay1{
		width: 98%;
		height: 470px;
		margin: 5px;
	}
	.delivlay2{
		width: 98%;
		height: 540px;
		margin: 5px;
	}	
	.botao-conteinerDeliv {
		background: #FFF;
		bottom: 55px;
	}	
	.backHome {
		top: 140px;	
	}		
	.categ2 {
		width: 48%;
		height: 120px;
		margin: 3px;
	}
	.categB {
		width: 48%;
		height: 120px;
		margin: 3px;
	}	
	.imgCateg img {
		width: 90px;
	}	
}


@media (max-width: 380px) {
	.newsletter-form button {
		font-size: 1.5em;
	}
	.categlay1{
		width: 98%;
		height: 280px;
		margin: 5px;
	}
	.categlay2{
		width: 98%;
		top: 140px;
		height: 350px;
		margin: 5px;
	}
	.prodlay1{
		width: 98%;
		/*height: 370px; */
		margin: 5px;
	}
	.prodlay2{
		top:-15px;
		width: 98%;
		/*height: 440px;*/
		margin: 5px;
	}	
	.delivlay1{
		width: 98%;
		height: 280px;
		margin: 5px;
	}
	.delivlay2{
		width: 98%;
		height: 350px;
		margin: 5px;
	}	
	.toplogo {
		padding: 5px;
	}
	.imglogo {
		width: 90px;
		height: 90px;
	}
	.imglogo img {
		width: 90px;
		height: 90px;
	}	
	.txtlogo {
		padding: 5px;
		justify-content: right;
	}
	.txtlogo h2 {
		text-align: right;  
		font-family: "Barlow",Helvetica Neue,Roboto,Helvetica,Arial,sans-serif;
		font-size: 1.25em;
		margin-bottom: 2px;
	}
	.txtlogo p {
		font-size: 0.8em;		
	}
	#deliv {
		margin-top: 5px;
		font-size: .5em;		
	}
	.cabecalho {
		top: 100px;
		height: 40px;
		padding: 5px;
		font-size: 1.5em;	
	}
	.categ {
		height: 40px;
		margin-top: 3px;
		margin-bottom: 3px;
	}
	.categ a {
		text-decoration: none;
	}	

	.det-conteiner {		
		position: relative;
		top: -10px;
		display: inline;
		flex-wrap: wrap;
		width: 98%;
		padding: 5px;
	}
	.det-conteiner-prod {
		position: relative;
		display: inline;
		flex-wrap: wrap;
	/*	height: 450px;
		top:145px; */
		width: 98%;
		padding: 5px;
	}	
	.detprod p {
		font-size: 1.0em;
	}
	.detprod span {
		margin-top: -15px;
		right: 10px;
	}
	.detprod span img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	.detprod h2 {
		margin-top: 5px;
		font-size: 1.85em;
	}
	.decimal {
		width: 96%;
	}
	.detprod .decimal h1 {
		float: left;
		/*margin-left: 25px;*/
		margin-top: -37px;
		color: maroon;
		font-size: 1.0em;
	}
	.comandos {
		width: 100%;
		padding-left: 0px;
		padding-right: 10px;
		height: 50px;
		bottom: 50px;
	}
	.act {
		padding: 3px;
		width: 65px;
		height: 45px;
		margin: 2px;
		margin-top: 2px;
		margin-bottom: 3px;
		font-size: 0.45em;
	}	
	#consPedido {
		top: 282px;
		left: 5px;
		width: 50px;
		height: 50px;
	}
	#consPedido img {
		width: 50px;
	}
	#consConta {
		top: 350px;
		left: 5px;
		width: 50px;
		height: 50px;
	}
	#consConta img {
		width: 50px;
	}
	.modulos {
		height: 100%;
		margin: 5px;
		border-radius: 5px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.modulos img {
		width: 65px;
	}
	.mod1 {
		width: 80%;
		height: 23%;
		margin-bottom: 10px;
		border-radius: 10px;
	}
	.mod2 {	
		width: 80%;
		height: 23%;
		margin-bottom: 10px;
		border-radius: 10px
	}
	.mod3 {
		position: relative;
		width: 80%;
		height: 23%;
		margin-bottom: 10px;
		border-radius: 10px
	}
	.mod4 {	
		width: 80%;
		height: 23%;
		margin-bottom: 10px;
		border-radius: 10px
	}	
	.garcom {
		width: 100%;
		padding-left: 35px;
		padding-right: 35px;
		border-bottom: 1px solid #CCC;
	}
	.icone {
		margin: 5px;
		width: 110px;
		height: 70px;
		border-radius: 10px;
		color: #FFF;
		font-weight: bold;
	}
	.icone span {
		width: 25px;
		height: 25px;
		top: -10px;
		right: -10px;
		border-radius: 50%;
		border: 1px solid #CCC;
	}
	.icone a {
		font-size: 0.8em;
	}	
	.botao-conteiner {
		height: 80px;
	}
	.botao {	
		width: 50px;
		height: 50px;
		margin: 0 20px;
		bottom: 0px;
		border-radius: 50%;
	}	
	.botao-conteinerDeliv {
		height: 80px;
	}
	.botaoDeliv {	
		width: 50px;
		height: 50px;
		margin: 0 20px;
		bottom: 0px;
		border-radius: 50%;
	}	
	.backHome {
		top: 105px;	
	}	
	#detped {
		right: 80px;
		top: 55px;
	}	
	.logSessao {
		top: 105px;	
	}
 }