/* ---------------------------------- */


/* -----------  FONTES  ------------- */


/* ---------------------------------- */

@font-face {
  font-family: 'Roboto Condensed';
  src: url(../fonts/Roboto-Condensed.ttf)
}

@font-face {
  font-family: 'Roboto Light';
  src: url(../fonts/Roboto-Light.ttf)
}

body {
  overflow-x: hidden
}

@media screen and (min-width:0px) {
  #pnContainer {
    width: calc(100vw - (100vw - 100%));
    border: none;
    background-color: #f5f5f5;
    transition: ease .5s background-color
  }
  #pgZChef_Topo {
    width: 100%;
    height: 300px;
    padding-top: 64px;
    background-color: #d2d27b;
    border-radius: 0 0 50vw 63%/60px;
    box-shadow: 0 6px 12px #00000066;
    position: relative
  }
  #pnContainerTopo {
    position: relative;
    width: 100%;
    height: 100%
  }
  #pnContainerTopo .logo {
    width: 80%;
    height: 200px;
    background-image: url(../imagens/solucoes/zmart_chef/logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    transition: ease .15s
  }
  #pnContainerTopo .titulo {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-family: "Roboto Condensed";
    color: #5A5E11;
    font-size: 24px;
    text-align: center
  }
  #pnContainerTopo .imagem {
    width: 500px;
    height: 420px;
    position: absolute;
    right: 0;
    top: -20px;
    opacity: 0;
    transition: ease .2s
  }
  #pgZChef_Facilidades {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 48px;
    transition: ease .15s
  }
  #pgZChef_Facilidades>.titulo {
    font-family: "Roboto Light";
    font-size: 28px;
    text-align: center;
    color: #333
  }
  #pgZChef_Facilidades>.subtitulo {
    font-family: "Roboto Condensed";
    font-size: 20px;
    text-align: center;
    color: #333
  }
  #pnFacilidades {
    display: flex;
    flex-direction: column;
    margin-top: 48px;
    font-family: "Roboto Condensed";
    color: #666
  }
  #pnFacilidades .linha {
    display: flex;
    flex-direction: column
  }
  #pnFacilidades .card {
    padding-top: 16px;
    padding-bottom: 16px;
    width: 100%;
    background-color: #fff;
    margin-bottom: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 8px #00000033;
    position: relative;
    transition: ease .3s
  }
  #pnFacilidades .card .imagem {
    width: 48px;
    height: calc(100% - 40px);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 20px;
    top: 20px
  }
  .pedidos {
    background-image: url(../imagens/solucoes/zmart_chef/pedidos.png)
  }
  .cozinha {
    background-image: url(../imagens/solucoes/zmart_chef/cozinha.png)
  }
  .organizar {
    background-image: url(../imagens/solucoes/zmart_chef/organizar.png)
  }
  .favorito {
    background-image: url(../imagens/solucoes/zmart_chef/favorito.png)
  }
  .meio_ambiente {
    background-image: url(../imagens/solucoes/zmart_chef/meio_ambiente.png)
  }
  .delivery {
    background-image: url(../imagens/solucoes/zmart_chef/delivery.png)
  }
  .balanca {
    background-image: url(../imagens/solucoes/zmart_chef/balanca.png)
  }
  .sincronismo {
    background-image: url(../imagens/solucoes/zmart_chef/sincronizacao.png)
  }
  #pnFacilidades .card .titulo {
    font-weight: 600;
    width: calc(100% - 108px);
    margin-left: 88px;
    color: #323100
  }
  #pnFacilidades .card .desc {
    width: calc(100% - 108px);
    margin-left: 88px
  }
  #pgZChef_Negocio {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 48px;
    padding-top: 32px;
    padding-bottom: 200px;
    background-color: #d9d976
  }
  #pgZChef_Negocio>.titulo {
    font-family: "Roboto Light";
    font-size: 28px;
    text-align: center;
    color: #333
  }
  #pgZChef_Negocio>.subtitulo {
    font-family: "Roboto Condensed";
    font-size: 20px;
    text-align: center;
    color: #333
  }
  #pnNegocios {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    transition: ease .15s;
    position: relative
  }
  #pnNegocios .linha {
    display: flex;
    flex-direction: column
  }
  #pnNegocios .linha .grupo {
    display: flex;
    flex-direction: row;
    margin-top: 42px
  }
  #pnNegocios .linha .grupo .item {
    width: 92.5%;
    margin-right: 2.5%
  }
  #pnNegocios .linha .grupo .item+.item {
    width: 92.5%;
    margin-left: 2.5%;
    margin-right: 0
  }
  #pnNegocios .linha .grupo .item .imagem {
    width: 100%;
    height: 52px
  }
  #pnNegocios .linha .grupo .item .titulo {
    font-family: "Roboto Condensed";
    font-size: 18px;
    text-align: center;
    margin-top: 12px
  }
  .restaurante {
    background-image: url(../imagens/solucoes/zmart_chef/restaurante.png)
  }
  .lancheria {
    background-image: url(../imagens/solucoes/zmart_chef/lancheria.png)
  }
  .bar {
    background-image: url(../imagens/solucoes/zmart_chef/bar.png)
  }
  .padaria {
    background-image: url(../imagens/solucoes/zmart_chef/padaria.png)
  }
  .pub {
    background-image: url(../imagens/solucoes/zmart_chef/pub.png)
  }
  .sorveteria {
    background-image: url(../imagens/solucoes/zmart_chef/sorveteria.png)
  }
  .cafeteria {
    background-image: url(../imagens/solucoes/zmart_chef/cafeteria.png)
  }
  .pizzaria {
    background-image: url(../imagens/solucoes/zmart_chef/pizzaria.png)
  }
  #imgPedido {
    position: absolute;
    background-image: url(../imagens/solucoes/zmart_chef/menu_principal.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 95%;
    height: 400px;
    bottom: -420px;
    z-index: 200
  }
  #pgZChef_Beneficios {
    width: 100%;
    margin-top: 240px;
  }
  #pgZChef_Beneficios>.titulo {
    font-family: "Roboto Light";
    font-size: 32px;
    text-align: center;
    margin-top: 48px;
    color: #333
  }
  #pgZChef_Beneficios .item {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
    font-family: "Roboto Condensed";
    color: #666
  }
  #pgZChef_Beneficios .item .titulo {
    width: 100%;
    font-size: 22px;
    text-align: center;
    font-weight: 600
  }
  #pgZChef_Beneficios .item .desc {
    font-size: 18px;
    margin-top: 8px;
    text-align: justify
  }
  #pgZChef_Integracao {
    width: 100%;
    margin-top: 48px;
    background-color: #f2fafd;
    padding-top: 38px;
    padding-bottom: 48px;
    position: relative
  }
  #pnCabIntegracao {
    width: 90%;
    margin-left: auto;
    margin-right: auto
  }
  #pnCabIntegracao>.imagem {
    background-image: url(../imagens/solucoes/logo_zada.png);
    height: 100px;
    transition: ease .15s
  }
  #pnCabIntegracao>.titulo {
    font-family: "Roboto Light";
    font-size: 22px;
    text-align: center;
    color: #2b7391;
    font-weight: 600;
    transition: ease .15s
  }
  #pnIntegracoes {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    transition: ease .2s
  }
  #pnIntegracoes .linha {
    display: flex;
    flex-direction: column
  }
  #pnIntegracoes .linha .grupo {
    display: flex;
    flex-direction: row;
    margin-top: 42px
  }
  #pnIntegracoes .linha .grupo .item {
    width: 92.5%;
    margin-right: 2.5%
  }
  #pnIntegracoes .linha .grupo .item+.item {
    width: 92.5%;
    margin-left: 2.5%;
    margin-right: 0
  }
  #pnIntegracoes .linha .grupo .item .imagem {
    width: 100%;
    height: 52px
  }
  #pnIntegracoes .linha .grupo .item .titulo {
    font-family: "Roboto Condensed";
    font-size: 18px;
    text-align: center;
    margin-top: 12px;
    max-width: 100%
  }
  .caixa {
    background-image: url(../imagens/solucoes/zmart_chef/caixa.png)
  }
  .relatorio {
    background-image: url(../imagens/solucoes/zmart_chef/relatorio.png)
  }
  .mapa {
    background-image: url(../imagens/solucoes/zmart_chef/mapa.png)
  }
  .estoque {
    background-image: url(../imagens/solucoes/zmart_chef/estoque.png)
  }
  .vendas {
    background-image: url(../imagens/solucoes/zmart_chef/cont_vendas.png)
  }
  .comanda {
    background-image: url(../imagens/solucoes/zmart_chef/gerenc_comanda.png)
  }
  .ped_delivery {
    background-image: url(../imagens/solucoes/zmart_chef/delivery_black.png)
  }
  .cont_ped {
    background-image: url(../imagens/solucoes/zmart_chef/cont_ped.png)
  }
  .produtos {
    background-image: url(../imagens/solucoes/zmart_chef/produtos.png)
  }
  .cartao {
    background-image: url(../imagens/solucoes/zmart_chef/cartao.png)
  }
  .clientes {
    background-image: url(../imagens/solucoes/zmart_chef/clientes.png)
  }
  .grafico {
    background-image: url(../imagens/solucoes/zmart_chef/grafico.png)
  }
  #pgZChef_Contato {
    width: 100%;
    padding-top: 64px;
    padding-bottom: 64px;
    background: linear-gradient(90deg, #3d5660 0, #436c7c 40%, #436c7c 60%, #3d5660 100%);
    color: #fff;
    font-family: "Roboto Condensed";
    transition: ease .15s;
    box-shadow: 0 4px 8px #00000066;
    text-align: center;
  }
  #pgZChef_Contato .titulo {
    width: 90%;
    font-size: 30px;
    margin: 0 auto 32px auto;
    font-weight: 700;
  }
  #pgZChef_Contato .subtitulo {
    width: 80%;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
  }
  #pgZChef_Contato .botao {
    background: #5ea7be;
    font-size: 20px;
    text-align: center;
    width: 80%;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 32px;
    cursor: pointer;
    box-shadow: 0 2px 4px #00000066;
    transition: ease .25s
  }
  #pgZChef_Contato .botao:hover {
    margin-top: 30px;
    margin-bottom: 2px;
    box-shadow: 0 4px 8px #00000066
  }
}

@media screen and (min-width:500px) {
  #pnContainerTopo .logo {
    width: 360px
  }
}

@media screen and (min-width: 600px) {
  #pgZChef_Contato .titulo {
    width: 580px
  }
  #pgZChef_Contato .subtitulo {
    width: 420px
  }
  #pgZChef_Contato .botao {
    width: 350px
  }
}

@media screen and (min-width:710px) {
  #pgZChef_Facilidades {
    width: 639px
  }
  #pnNegocios {
    margin-left: auto;
    margin-right: auto;
    align-items: center
  }
  #pnNegocios .linha {
    flex-direction: row
  }
  #pnNegocios .linha .grupo .item {
    width: 150px;
    margin-right: 0
  }
  #pnNegocios .linha .grupo .item+.item {
    width: 150px;
    margin-left: 0;
    margin-right: 0
  }
  #pgZChef_Beneficios {
    width: 660px;
    margin-left: auto;
    margin-right: auto
  }
  #pnIntegracoes {
    margin-left: auto;
    margin-right: auto;
    align-items: center
  }
  #pnIntegracoes .linha .grupo .item {
    margin-right: 0;
    margin-left: 0;
    width: 230px
  }
  #pnIntegracoes .linha .grupo .item+.item {
    margin-left: 60px;
    width: 230px
  }
}

@media screen and (min-width:940px) {
  #pgZChef_Facilidades {
    width: 860px
  }
  #pnFacilidades .linha {
    display: flex;
    flex-direction: row
  }
  #pnFacilidades .card {
    margin-right: 10px
  }
  #pnFacilidades .card+.card {
    margin-left: 10px;
    margin-right: 0
  }
  #pnCabIntegracao {
    display: flex;
    flex-direction: row;
    width: 820px
  }
  #pnCabIntegracao>.imagem {
    background-image: url(../imagens/solucoes/pc_zada.png);
    height: 140px;
    width: 300px
  }
  #pnCabIntegracao>.titulo {
    font-size: 32px;
    width: 420px;
    margin-top: 35px
  }
  #pnIntegracoes .linha {
    flex-direction: row;
    margin-top: 12px
  }
  #pnIntegracoes .linha .grupo .item,
  #pnIntegracoes .linha .grupo .item+.item {
    margin-left: 0
  }
}

@media screen and (min-width:1046px) {
  #pnContainer {
    background-color: #fff
  }
  #pnMenu {
    width: 100%;
    height: 72px;
    position: relative;
    z-index: 90;
    background-color: #153848;
    box-shadow: 0 1px 18px 0 #00000044
  }
  #pgZChef_Topo {
    padding-top: 0;
    height: 360px
  }
  #pnContainerTopo {
    width: 1020px;
    margin-left: auto;
    margin-right: auto
  }
  #pnContainerTopo .logo {
    position: absolute;
    height: 150px;
    margin: 0;
    top: 50px;
    left: 80px
  }
  #pnContainerTopo .titulo {
    position: absolute;
    width: auto;
    top: 220px;
    left: 80px
  }
  #pnContainerTopo .imagem {
    width: 500px;
    height: 420px;
    position: absolute;
    right: 0;
    top: 30px;
    opacity: 1;
    background-image: url(../imagens/solucoes/zmart_chef/menu_principal.png)
  }
  #pgZChef_Facilidades>.titulo {
    font-size: 36px;
    text-align: left;
    margin-left: 84px
  }
  #pgZChef_Facilidades>.subtitulo {
    text-align: left;
    margin-left: 84px
  }
  #pnFacilidades .card {
    box-shadow: none;
    background-color: transparent
  }
  #pgZChef_Negocio>.titulo {
    font-size: 36px
  }
  #pnNegocios {
    position: relative;
    width: 660px;
    margin-left: calc(((100% - 600px)/ 2) - 200px)
  }
  #imgPedido {
    background-image: url(../imagens/solucoes/zmart_chef/tela_pedido_final.png);
    background-size: cover;
    background-position: left;
    width: 300px;
    height: 600px;
    margin-top: 0;
    position: absolute;
    right: -45%;
    top: 60px
  }
  #pgZChef_Beneficios {
    position: relative;
    margin-left: calc((100% - 660px)/ 2 - 180px);
    margin-top: 0
  }
  #pgZChef_Beneficios>.titulo {
    font-size: 36px
  }
}

@media screen and (min-width:1250px) {
  #pnContainer {
    background: linear-gradient(90deg, #fffff3 0, #fff 20%, #fff 80%, #fffff3 100%)
  }
  #pgZChef_Beneficios {
    position: relative;
    margin-left: calc((100% - 750px)/ 2 - 240px)
  }
  #pgZChef_Beneficios>.titulo {
    font-size: 36px;
    width: 750px
  }
  #pnBeneficios {
    display: flex;
    flex-direction: row;
    width: 790px
  }
  #pnBeneficios .item {
    margin-right: 32px
  }
  #pnIntegracoes .linha .grupo+.grupo {
    margin-left: 60px
  }
  #pnIntegracoes .linha .grupo .item+.item {
    margin-left: 60px
  }
}