@media (max-width: 1366px) {
	main aside {
		width: 300px;
		padding: 15px 0;
	}
	main aside .grid {
		padding: 0 15px;
	}
	main aside ul li a {
		padding: 10px;
	}
	section.lista .grid:last-child {
		grid-template-columns: 1fr;
	}
	section.categorias {
		padding-top: 150px;
		padding-bottom: 20px;
	}
	section.pedidos-da-loja .mesa {
		padding: 15px;
	}
	header .pesquisa form input {
		padding: 15px 20px;
	}	
}
@media (max-width: 1024px) {
	.modal {
		border-radius: 0;
		max-height: unset;
		height: 100vh;
		width: calc(100% - 40px);
	    height: calc(100vh - 40px);		
	}
	.modal.ativo {
		top: 20px;
	}
	.produto.modal .subgrid {
	    height: calc(100vh - 215px);
	}	
	.produto.modal .adicionais {
	    height: calc(90vh - 215px);
	}	
	.editar.modal .subgrid, .editar.modal .senha {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.editar.modal .lista .pedido ul li {
		justify-content: space-between;
	}
	.qrcode.modal {
		max-width: 100%;
	}
	section.configuracoes.ordens div.categorias .item {
		grid-template-columns: max-content 1fr max-content
	}
	section.configuracoes.ordens div.categorias span {
		display: none;
	}
	section.configuracoes.ordens div.categorias .item em {
		font-size: 12px;
	}
	section.configuracoes.ordens div.categorias input {
		padding: 0;
	}
	section.configuracoes.ordens div.categorias .item button[name=excluir] {

	}
	section.configuracoes.ordens div.categorias .item > i  {
		display: none;
	}	
	section.informacoes-do-restaurante .pagamento .api h4 img {
		width: 50px;
	}
	section.informacoes-do-restaurante .pagamento .api .input {
		border: 0;
		padding: 0;
	}
	section.informacoes-do-restaurante .pagamento .api {
		grid-template-columns: 1fr;
        gap: 20px;		
        padding-top: 55px;
	}

	.editar.modal.evento .lista .pedido a {
		position: absolute;
	    right: 10px;
	    bottom: 10px;
	    top: unset;		
	}
	.editar.modal.evento .lista .pedido .produtos-lista {
	    border-bottom: 1px solid #d4d4d4;
	    padding-bottom: 10px;		
	}
	#mapa {
	    zoom: 90%;
        box-shadow: unset    	
	}
/*	.editar.modal .lista .pedido p strong {
		display: none;
	}*/
	.editar.modal .lista .pedido p span {
		display: inline-flex;
		margin-left: 5px;
        position: relative;
        top: -1px;		
	}
	.editar.modal .lista .pedido {
		grid-template-columns: 1fr!important;
		gap: 6px;	
	}
	.editar.modal .lista .pedido p {
		text-align: left;
	}
	.confirmar-ordem.ativo {
	    bottom: 72px;
	}
	body.bg:before {
		display: none!important;
	}
	.sacola .cupom button, .sacola .pontos button {
		padding: 8px 0;
	}
	.sacola .pontos div, .sacola .pontos button, .sacola .cupom div, .sacola .cupom button, .sacola .gorjeta div {
		display: none;
	}
	.sacola .pontos u, .sacola .cupom u, .sacola .gorjeta u {
		display: flex;
        position: absolute;
        top: 0;
        right: 0;
        text-decoration: none;
        color: #e0940f;
        font-size: 20px;
        transform: rotate(180deg);
        padding: 30px;
	}
	.sacola .pontos u:before, .sacola .cupom u:before, .sacola .gorjeta u:before {
		content: '\e9c2';
		font-family: 'icomoon' !important;
	}
	.sacola .pontos.ativo u, .sacola .cupom.ativo u {
		transform: rotate(0);
	}
	.sacola .pontos.ativo div, .sacola .pontos.ativo button, .sacola .cupom.ativo div, .sacola .cupom.ativo button, .sacola .gorjeta.ativo div {
		display: grid;
	}	

    ::-webkit-scrollbar {
        display: none;
    }
    html, body {
        scrollbar-width: none;
	}
	.sacola .totalizadores {
		padding: 15px;
	}
	.sacola .gorjeta {
		gap: 15px;
	}
	.sacola .gorjeta h3 {
		padding-left: 65px;
	}
	.sacola .gorjeta i {
	    position: absolute;
	    top: 15px;
	    left: 15px;
	}	
	.status.modal h2 {
		margin-bottom: 15px;
	}
	section.categorias form {
		display: flex;
	}
	section.categorias .grid {
	    grid-template-columns: minmax(0, 1fr);
	}	
	section.categorias .avancar {
		display: none!important;
	}
	.grid {
		padding: 0 15px;
	}
	.status.modal .pedido em {
		display: block;
		margin-bottom: 3px;
	}
	.status.modal .pedido .produtos span {
		gap: 0;
		flex-direction: column;
	}
	.status.modal .pedido {
		gap: 10px;
	}
	.modal .fechar {
        position: fixed;
        background: #e0940f;
        padding: 15px;
        top: 0;
        right: 0;
        border-radius: 0 0 0 12px;
        color: #fff;
	}
	.modal .fechar:before {
		color: #fff;
	}
	.modal .voltar {
		position: fixed;
		right: 20px;
		left: unset;
	}
	header .pesquisa form a {
        position: fixed;
        top: 15px;
        right: 16px;
        color: #fff;
        font-size: 20px;
	}
	header .pesquisa form.travar a {
        display: flex;		
	}
	header .pesquisa form button {
		display: none;
	}
	section.categorias.fixo.esconder {
		top: -80px;
	}
	section.categorias button, section.categorias .avancar {
		background: #fff;
	}
	header .informacoes h1 {
		max-width: unset;
	}
	header .informacoes .menu {
		top: -5px;
	}
	body {
		padding-top: 0;
	}
	header, header.fixo {
		position: unset;
		margin-bottom: 0;
		height: 119px;
		display: grid;
		height: 81px;
		padding: 0;
	}
	header > .grid {
		padding: 0;
	}
	header .logo {
		border-radius: 0;
	}
	header.busca {
		margin-bottom: 40px;
	}
	header .botoes {
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	    background: #f6f6f6;
	    left: 0;
	    border-top: 1px solid #D4D4D4;
	    padding: 15px 30px;		
	    z-index: 2;
	    display: flex;
	    justify-content: space-between;
	    gap: unset;
		transition: .3s;
		padding: 15px;
	}
	header .botoes.esconder {
		bottom: -70px;
	}
	header .botoes a.abrir-pesquisa {
		display: unset;
	}
	header .botoes a.abrir-pesquisa
	body {
		padding-top: 0;
	}
	header .botoes a sup {
		right: unset;
		margin-left: 15px;
	}
	header .pesquisa {
		display: none;
	}
	section.categorias {
	    padding: 30px 0;
		position: relative;
	}
	section.categorias button {
		margin: 0 5px;
		font-size: 14px;
	}
	section.lista .produto .img {
		width: 100px;
		height: 100px;
	}
	section.lista .produto {
		padding: 15px;
	}
	section.lista .produto div i {
		font-size: 18px;
	}
	section.lista .produto div h2 {
	    font-size: 16px;
	    margin-bottom: 5px;
	    line-height: 20px;
	}	
	section.lista .produto div p {
        font-size: 14px;
        line-height: 18px;		
        margin-bottom: 5px;
	}
	section.lista .produto div sup {
		font-size: 16px;
	}
	section.lista .produto div {
	    display: grid;
	    align-content: center;
	    height: 100%;		
	}
	.produto.modal .subgrid {
		grid-template-columns: 1fr;
	}
	.produto.modal .img {
		aspect-ratio: 1.5/1;
		width: unset;
	    height: unset;		
	}
	footer {
		margin-bottom: 69px;
		padding-bottom: 120px;
	}
	header .pesquisa {
	    display: block;
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    z-index: 1;
	    transition: .3s;
	}	
	header .pesquisa.ativo form input {
		left: 0;
		opacity: 1;
		visibility: visible;
        border: 1px solid #d4d4d4;		
	}
	header .pesquisa form input {
        background: #fff;
        border: 0;
        border-radius: 0;
        position: fixed;
        top: 40px;
        margin: auto;
        width: 80%;
        right: 0;
        opacity: 0;
        visibility: hidden;
        height: 50px;
        font-size: 18px;
        box-shadow: 10px 10px 10px 30em rgb(0 0 0 / 50%);
        border-radius: 10px;
	}
	header .pesquisa form input::placeholder {
		color: #ccc;
	}
	header .pesquisa form button i {
		color: #fff;
	}
	section.lista.destaque .produto div:last-child {
		height: unset;
	}
	.modal {
		width: 100%;
		height: 100%;
		top: 0;
/*		left: -100px;*/
		padding: 15px;
	}
	.modal.ativo {
		left: 0;
		top: 0;
	}
	.estabelecimento.modal h2, .estabelecimento.modal h2 span {
		font-size: 20px;
	}
	.estabelecimento.modal .pagamento blockquote h3,
	.estabelecimento.modal .sobre time {
		font-size: 20px;
	}
	.estabelecimento.modal .pagamento blockquote ul li {
		font-size: 16px;
		margin: 5px;
	}
	.estabelecimento.modal .horario p {
		font-size: 16px;
	}
	.produto.modal .subgrid, .produto.modal .adicionais {
		height: unset;
	}
	.produto.modal .conteudo {
		margin-bottom: 100px;
	}
	.produto.modal .pedir {
		grid-template-areas: 'preco qtd btn';
        grid-template-columns: unset;
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        border-radius: 0;
        background: #fff;
	}
	.produto.modal .pedir > button {
		padding: 10px 15px;
	}
	.produto.modal .pedir .preco {
		grid-area: preco;
	}
	.produto.modal .pedir .quantidade {
		grid-area: qtd;
	}
	.produto.modal .pedir button {
		grid-area: btn;
	}
	.produto.modal .pedir .quantidade, .produto.modal .pedir > button {
		width: 100%;
	}
	.produto.modal .adicionais h3 strong {
		top: 0;
	}
	.produto.modal .adicionais h3 span {
		margin-top: 5px;
	}
	.produto.modal .adicionais .item label {
		font-size: 16px;
	}
	.produto.modal .adicionais .quantidade input {
		font-size: 20px;
	}
	footer .grid {
        flex-direction: column;
        align-items: center;
	}	
	footer figure img {
        display: flex;
        justify-self: center;
	}
	footer p {
		text-align: center;
	}
	footer .compartilhar img {
		max-width: 35px;
	}
	.sacola .opcao, .sacola .cupom, .sacola .pagamento form, .sacola .gorjeta, .sacola .gorjeta div, .sacola .pontos {
		grid-template-columns: 1fr;
	}
	.sacola .cupom i, .sacola .pontos i, .sacola .gorjeta i {
		font-size: 36px;
        position: absolute;
        top: 22px;
        left: 15px;		
	}
	.sacola .cupom h3, .sacola .pontos h3, .sacola .gorjeta h3 {
		padding-left: 45px;
		font-size: 16px;
	}	
	.sacola .cupom h3 span, .sacola .pontos h3 span, .sacola .gorjeta h3 span {
		font-size: 14px;
	}	
	.sacola .cupom div, .sacola .pontos div {
		margin-right: 0;
	}
	.sacola .pontos input[type=range] {
		margin-bottom: 20px;
	}
	.sacola .pontos sup {
		position: unset;
		margin-top: 15px;
	}
	.sacola .pontos div p {
        margin: 10px 0 15px;
        text-align: center;
        font-size: 14px;
	}
	.sacola .cupom, .sacola .pontos, .sacola .gorjeta {
		padding: 15px;
		position: relative;
	}
	.sacola .pagamento form.ativo {
		height: 172px;
	}
	.sacola .opcao div {
		grid-template-columns: 65px 1fr;
	}
	.sacola .pagamento .subgrid {
		grid-template-columns: 52px 1fr max-content;
	}
	.sacola .pagamento h3 {
		line-height: 25px;
	}
	.sacola .cupom input::placeholder {
		font-size: 14px;
	}
	section.lista .produto span {
        font-size: 13px;
        width: max-content;
        top: -15px;	
	}
	.status.modal .botoes a {
		font-size: 18px;
	}
	section.lista .produto {
		
	}
	section.lista.destaque .produto span {
	    right: unset;
	    top: 10px;
	    left: 10px;
	}
	header .logo {

	}
	header .grid {
		gap: 20px;
		grid-template-columns: max-content 1fr;
	}
	section.lista h1, .perfil.modal h2, .pedidos.modal h2, .sacola h2, .editar.modal h2, .endereco.modal h2, .avaliacao.modal h2 {
		font-size: 20px;
	}	
	.pedidos.modal .item h3 {
		grid-template-columns: 1fr;
	}
	.pedidos.modal .item h3 {
		justify-items: center;
		gap: 10px;
	}
	.sacola .lista .item div {
		grid-template-areas: 'a c' 'b b';
		gap: 0px;
	}
	.sacola .lista .item div h3 {
		grid-area: a;
	    line-height: 22px;
	    font-weight: 600;		
	}
	.sacola .lista .item div sup {
		grid-area: b;
	}
	.sacola .lista .item div i {
		grid-area: c;
	}
	.sacola .lista > div .item p {
		margin-left: 0;
	}
	.sacola .lista > div {
	    border-bottom: 1px solid #d4d4d4;
	    margin-bottom: 20px;
	}	
	.sacola .lista > div:last-child {
		border: 0;
		margin-bottom: 0;
	}
	.sacola .lista > div:last-child p {
		margin-bottom: 0;
	}
	.sacola .lista .item .excluir {
		width: 35px;
		height: 35px;
	    position: relative;
	    top: -5px;		
	}
	.sacola .endereco .input {
		grid-template-columns: 1fr;
	}
	.sacola .endereco .input button {
		padding: 10px 20px;
	}
	.status.modal .nota .logo {
		width: 70px;
		height: 70px;
	}
	.status.modal .nota {
	    grid-template-columns: max-content 1fr max-content;
	    gap: 10px;		
	}
	.dados.modal .subgrid > div, .dados.modal .subgrid > div.senha, .dados.modal .subgrid > div.quatro {
	    grid-template-columns: 1fr;
	    gap: 15px;
	}	
	.status.modal .botoes {
		flex-direction: column;
	}
	.status.modal .pedido p, .status.modal .pedido time, .status.modal .pedido sup {
		font-size: 14px;
	}
	.sacola .totalizadores .gratuity p, .sacola .totalizadores .charge p, .sacola .totalizadores .imposto p, .sacola .totalizadores .subtotal p, .sacola .totalizadores .taxa p, 
	.sacola .totalizadores .cupomaplicado p, .sacola .totalizadores .fora p, .sacola .totalizadores .tip p, .sacola .totalizadores .pontosaplicado p, .sacola .totalizadores .total p,
	.sacola .totalizadores .gratuity sup, .sacola .totalizadores .charge sup, .sacola .totalizadores .imposto sup, .sacola .totalizadores .subtotal sup, .sacola .totalizadores .taxa sup, 
	.sacola .totalizadores .cupomaplicado sup, .sacola .totalizadores .fora sup, .sacola .totalizadores .tip sup, .sacola .totalizadores .pontosaplicado sup, .sacola .totalizadores .total sup	 {
		font-size: 14px;
	}	
	header .informacoes h1 {
		font-size: 16px;
		line-height: 20px;
	}
	header .informacoes div p {
		font-size: 13px;
		margin-bottom: -5px;
	}
	header .grid {
		grid-template-columns: max-content 1fr;
		gap: 20px;
	}
	header .informacoes {
		min-width: unset;
		padding-right: 35px;
	}
	.produto.modal .adicionais .quantidade {
		padding: 5px 10px;
	}
	.produto.modal .adicionais .item label {
	    padding-right: 10px;
	    line-height: 20px;
	    font-size: 14px;
	}
	.produto.modal .adicionais .item label b {
		top: 0;
		display: inline-block;
	}
	.produto.modal .adicionais h3 span {
		font-size: 14px;
	}
	.produto.modal h2 {
		font-size: 25px;
		margin-bottom: 6px;
	}
	.estabelecimento.modal > ul li {
		font-size: 16px;
	}
	.estabelecimento.modal > ul {
		padding-top: 20px;
	}
	.estabelecimento.modal .horario p strong {
		display: block;
	}
	.estabelecimento.modal .sobre blockquote, .estabelecimento.modal .sobre p {
	    font-size: 16px;
	}	
	.produto.modal .adicionais .quantidade {
		border-radius: 9px;
	}
	.produto.modal .adicionais .quantidade input {
		font-size: 16px;
		width: 30px;
	    position: relative;
	    top: -2px;		
	}
	.produto.modal .pedir .quantidade input {
		font-size: 18px;
		top: -2px;
		position: relative;
	}
	.produto.modal .pedir sup {
		font-size: 20px;
	}
	.produto.modal .pedir .quantidade {
		justify-self: right;
	}
	.produto.modal .pedir .quantidade input {
		width: 30px;
	}
	.sacola .lista .item h3 {
		font-size: 16px;
	}
	.sacola .lista .item sup {
		font-size: 16px;
	}
	.sacola .lista {
		padding: 20px 20px 10px;
	}
	.sacola .lista > div .item p {
	    margin: -10px 0 20px 0px;
	    font-size: 13px;
	}	
    header .logo {
        width: 85px;
        height: 100%;
    }	
    .clientes.modal .subgrid {
    	grid-template-columns: 1fr;
    }	
    .avaliacao.modal {
	    width: calc(100% - 50px);
	    height: calc(100% - 50px);
    }
    body.eventos:before {
    	height: 100%;
    }
}


@media (max-width: 428px) {
    #mapa {
    	zoom: 80%;
    }
}


@media (max-width: 380px) {
    #mapa {
        zoom: 68%;
    }		
	header .informacoes {
		padding-right: 0;
	}
	header .informacoes .menu {
	    right: -10px;
	    top: -10px;
	}	
	section.lista .produto span {
		padding: 3px 10px;
		font-size: 12px;
		border-radius: 7px;
	}
	section.lista h1 {
		font-size: 22px;
	}
	header .botoes {
	    gap: 10px;	
	    justify-content: space-between;
	}
	section.lista .produto div p {
		display: none;
	}
    section.lista .produto .img {
        width: 75px;
        height: 75px;
    }	
    section.lista .produto {
    	padding: 10px;
    }
    section.lista .grid:last-child {
    	gap: 20px;
    }
    section.lista h1 {
    	margin-bottom: 28px;
    }
}


@media (max-width: 360px) {

}