/*
Theme Name: Tema Hotsite SP Gastronomia
Author: Governo do Estado de São Paulo
Description: Template customizado para o hotsite SP Gastronomia
Version: 1.0
Tags: SP Gastronomia
*/

/* GERAIS */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

html {
    font-family: 'Lato', sans-serif;
    font-size: 10px;
}

body {
    color: #000;
    background:  #11111a;
    overflow-x: hidden;
}

body>* {
    max-width: 1366px;
    margin: 0 auto;
    background-color: #fff;
}

a {
    transition: background-color 0.3s, color 0.5s, border 0.3s;
    text-decoration: none;
}

img {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
}

ul {
    list-style: none;
}

h1 {
    font-weight: 900;
    font-size: 4rem;
    text-align: center;
}

h2 {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 2rem;
    text-align: center;
}


/* CABEÇALHO E RODAPÉ GOVERNO */

section.govsph-topo {
    margin: 0 auto !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-top: 30px;
}

section.govsph-topo img {
    width: auto;
    max-width: none;
    max-height: none;
}

ul.govsph-links-redes-sociais {
    margin-right: 20px !important;
}

@media only screen and (min-width: 769px) {
    div#govsph-topbarGlobal div#topbarGlobal {
        margin-top: 0 !important;
        border-right: none !important;
        border-left: none !important;
    }
}

section:last-of-type {
    width: 100%;
    padding-left: 0;
    padding-bottom: 9rem;
    background-color: #f5f9fa;
}

div#govsp-footerGlobal {
    margin-top: 0;
    padding-top: 10px;
}


/* MENU  */

div.nav-menu {
    border-radius: 0 0.5rem 0.5rem 0;
    background-color: #f4f4f4ee;
    position: fixed;
    z-index: 45;
    padding: 1.5rem 1rem;
    top: 12rem;
    left: calc((100vw - 1366px)/2 - 7px);
    /*left: 0;*/
    border: none;
    width: 5.5rem;
    height: 5.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0.2rem 0.2rem 0.4rem #43241155;
    transition: width 0.3s, opacity 0.5s;
    cursor: pointer;
    opacity: 1;
    display:none;
}

div.nav-menu.desativa {
    width: 0px;
    opacity: 0;
}

div.nav-menu span {
    display: block;
    height: 0.4rem;
    background-color: #111;
    width: 100%;
    border-radius:0.2rem;
}

nav.menu-site {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 2rem;
    color: #fff;
    font-weight: 700;
    padding: 0 30% 0 8%;
    width: 100%;
    position: absolute;
    bottom: 2.5rem;
}

nav.menu-site.sticky {

}

nav.menu-site .bt-fechar {
    display: none;
}

nav.menu-site a {
    color: #fff;
    text-decoration:none;
    font-weight: 400;
    transition: color 0.3s;
}

nav.menu-site a:hover {
    color: #678f61;
}


/* CAPA */

#home {
    background-image: url(imgs/bg-home.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 763px;
    height: 76.3rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    padding-bottom: 2.5rem;
    padding-top: 4rem;
    z-index: 20;
    background-color: transparent;
}

#home .logotipo {
    display: flex;
    justify-content: center;
    width: 100%;
}

#home .conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 35%;
    min-width: 47rem;
    margin: 4rem auto 2rem auto;
    color: #fff;
    padding-bottom: 18rem;
}

#home h1 {
    text-align: center;
}

#home .separador {
    margin: 2.5rem auto;
}

#home p {
    font-weight: 900;
    text-align: center;
    font-size: 2.4rem;
    padding: 0 6rem;
}

/* GASTRONOMIA */

#gastronomia {
    background-image: url(imgs/img-gastronomia.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-top: 26.5rem;
    padding-bottom: 4.5rem;
    margin-top: -22rem;
    z-index: 10;
}

#gastronomia .conteudo {
    display: flex;
    flex-direction: column;
    margin-left: 9%;
    width: 40%;
    justify-content: center;
}

#gastronomia h1 {
    text-align: left;
    color: #76b72a;
    font-size: 5.65rem;
    line-height: 6rem;
    width: 80%;
    margin-bottom: 2.5rem;
}

#gastronomia p {
    font-size: 2.3rem;
    padding-bottom: 2rem;
}

#gastronomia a {
    width: 100%;
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.4rem;
    background-color: #93c558;
    color: #fff;
    border: solid 0.1rem #b1b1b166;
    cursor: pointer;
    height: 5rem;
    transition: all 0.5s;
    border-radius: 0.5rem;
}

#gastronomia a:hover {
    background-color: #639528;
}

/* NUMEROS */

#numeros{
    background-image: url(imgs/bg-numeros.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 8rem;
    padding-bottom: 25rem;
    z-index: 10;
    background-size: 100%;
}

#numeros h1 {
    font-size: 6.2rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 7rem;
}

#numeros .ilustra-1 {
    position: absolute;
    top: 20.5rem;
    left: 5%;
}

#numeros .ilustra-2 {
    position: absolute;
    bottom: 25rem;
    right:0;
}

#numeros .conteudo {
    z-index: 10;
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#numeros ul {
    display: flex;
    flex-wrap: wrap;
    width: 83%;
    margin: 0 0 0 auto;
    align-items: center;
    justify-content: space-between;
}

#numeros li {
    text-transform: uppercase;
    color: #fff;
    font-size: 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
    margin-top: 5rem;
}

#numeros li p {
    font-size: 3.5rem;
    line-height: 4rem;
    color: #76b72a;
    text-align: center;
    display: block;
    font-weight: 900;
    margin-bottom: 0.2rem;
}

#numeros li p strong {
    font-size: 6.5rem;
    font-weight: 900;
}

#numeros li span {
    width: 70%;
    margin: auto;
    text-align: center;
}

#numeros .separador {
    margin: 1.5rem auto 2.5rem auto;
}

#numeros .footnotes {
    width: 85%;
    display: flex;
    margin: 0 auto 0 0;
    align-items: flex-start;
    justify-content: space-between;
}

#numeros .footnotes p {
    color: #76b72a;
    font-weight: 900;
    font-size: 3.3rem;
    margin: 0 2rem; 
}

#numeros .footnotes p:first-of-type {
    text-align: right;
}

#numeros .footnotes p:last-of-type {
    text-align: left;
}

#numeros .footnotes p span {
    display: block;
    font-weight: 400;
    font-style: italic;
    font-size: 2.3rem;
    color: #fff;
    margin-top: 4rem;
}

/* INGREDIENTES */

#ingredientes{
    background-image: url(imgs/bg-ingredientes.png);
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 15rem;
    padding-bottom: 5rem;
    z-index: 20;
    background-color: transparent;
    margin-top: -17rem;
}

#ingredientes header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 83%;
    margin-bottom: 4rem;
}

#ingredientes header>div {
    width: 60%;
    margin: 0 2rem 0 0rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#ingredientes header>div div {
    margin-top: 2rem;
    margin-left: 5rem;
}

#ingredientes header>div .logo {
    margin-top: 5rem;
    margin-left: 12em;
}

#ingredientes header>div .logo img, #ingredientes header>div .ilustra img {
    width: 100%;
}

#ingredientes h1 {
    text-align: left;
    color: #76b72a;
    font-size: 5.6rem;
    line-height: 6rem;
    margin-bottom: 2.5rem;
    width: 100%;
    margin-top: 4rem;
}

#ingredientes .carousel {
    width: 103.5rem;
    margin: auto 8.5% 0 auto;
}

#ingredientes .slide {
    width: 31.3rem;
    height: 26.8rem;
    background-color: #8cc63f;
    padding: 4rem 3.5rem 3.5rem 3rem;
    color: #fff;
    margin-left:3.2rem;
}

#ingredientes .flickity-prev-next-button.previous {
    left: -60px;
}

#ingredientes .flickity-prev-next-button.next {
    right: -80px;
}

#ingredientes .flickity-button {
    position: absolute;
    background: #000;
    border: none;
    color: #fff;
    transition: all 0.3s;
}

#ingredientes .flickity-button:hover {
    background: #333;
    cursor: pointer;
    color: #ccc;
}

#ingredientes .slide h2 {
    font-weight: 900;
    text-align: left;
    margin-bottom: 1rem;
}

#ingredientes .slide p {
    font-size: 1.55rem;
    color: #fff;
    font-weight: 400;
}

#ingredientes .slide a {
    display: block;
    width: 70%;
    text-transform: uppercase;
    padding: 1.3rem 1rem 1rem;
    background-color: #4d9a10;
    margin: 3rem auto 0 auto;
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
    transition: all 0.5s;
}

#ingredientes .slide a:hover {
    background-color: #2d7a10;
}

/* ROTAS */

#rotas{
    background-image: url(imgs/bg-rotas.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-top: 6.5rem;
    padding-bottom: 3rem;
    z-index: 10;
}

#rotas h1 {
    font-size: 5.4rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 7rem;
    align-self: center;
}

#rotas h1 span {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 2.9rem;
    margin-top: 1rem;
}

#rotas .conteudo {
    width: 52%;
    color: #fff;
    font-size: 2.75rem;
    font-weight: 700;
    padding-right: 1%;
}

#rotas .conteudo p {
    width: 65%;
}

#rotas ul.rotas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 2.5rem;
}

#rotas ul.rotas>li {
    width: 30%;
}

#rotas ul.rotas h2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background-color: #006837;
    font-size: 2.75rem;
    padding: 0.5rem;   
    border-radius: 2rem;
    background-position: 90% center;
    background-repeat: no-repeat;
    text-align: left;
}

#rotas ul.rotas h2 span {
    border-radius: 1.5rem;
    border: solid 0.1rem #fff;
    padding: 1rem 2.5rem;
    width: 100%;
}

#rotas ul.rotas ul {
    font-size: 1.65rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

#rotas ul.rotas ul li {
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

#rotas ul.rotas li:nth-of-type(4) ul li:first-of-type {
    width: 80%;
}


/* CHEFS */

#chefs{
    background-image: url(imgs/bg-chefs.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2.5rem;
    z-index: 10;
    padding-left: 7%;
}

#chefs h1 {
    font-size: 4.93rem;
    font-weight: 900;
    color: #fff;
    text-align: left;
}

#chefs .separador {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#chefs h1 span {
    display: block;
}

#chefs .conteudo {
    width: 68%;
    text-transform: uppercase;
    text-align: center;
}

#chefs ul.chefs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 2.5rem;
    color:#fff;
}

#chefs ul.chefs>li {
    width: 23%;
    margin-bottom: 3rem;
    margin-left: -1rem;
}

#chefs ul.chefs li img {
    border-radius: 0.4rem;
}

#chefs ul.chefs>li:nth-of-type(4) {
    opacity: 0;
}

#chefs ul.chefs h2 {
    font-size: 1.8rem;
    margin-top: 0.5rem;
    color: #fbb03b;
}

#chefs .conteudo ul.chefs p {
    font-weight: 400;
    font-size: 1.7rem;
}

#chefs .logo {
    position: absolute;
    right: 15%;
    bottom: 6rem;
}

/* BENEFICIOS */

#beneficios {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5rem 10% 3rem 10%;
}

#beneficios ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#beneficios ul li {
    width: 19%;
    margin: 0 3% 4rem 3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#beneficios ul li p {
    font-size: 1.5rem;
    margin-top: 1.2rem;
    font-weight: bold;
}

/* OPORTUNIDADES */

#oportunidades{
    background-image: url(imgs/bg-oportunidades.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 101%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 7%;
    padding-top: 6.5rem;
    padding-bottom: 5rem;
    z-index: 10;
}

#oportunidades h1 {
    font-size: 5rem;
    color: #fff;
    font-weight: 900;
}

#oportunidades h1 span {
    display: block;
}

#oportunidades .separador {
    margin-top: 2rem;
    margin-bottom: 45rem;
}

#oportunidades .conteudo {
    display: flex;
    color: #fff;
    font-size: 2.5rem;
    align-items: flex-start;
    justify-content: space-between;
}

#oportunidades .conteudo>p {
    width: 47%;
}

#oportunidades .conteudo>div {
    width: 50%;
}

#oportunidades ul {
    display: flex;
    font-weight: 900;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

#oportunidades ul li {
    width: 33%;
    padding: 1rem 0rem 1rem 1rem;
    border-left:solid 1rem;
}

#oportunidades ul li:nth-of-type(1) {
    border-left-color: #ee9400;
}
#oportunidades ul li:nth-of-type(2) {
    border-left-color: #a7a1a5;
}
#oportunidades ul li:nth-of-type(3) {
    border-left-color: #b54123;
}

#oportunidades .conteudo .cotando p {
    font-size: 2.1rem;
    font-style: italic;
    font-weight: 400;
}

/* INSCREVA-SE */

#inscricao {
    background-image: url(imgs/bg-inscricao.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 5%;
    padding-top: 7rem;
    padding-bottom: 5rem;
    z-index: 10;
    height: auto;
    min-height: 100rem;
}

#inscricao .conteudo {
    display: flex;
    flex-direction: column;
    width: 90%;
    justify-content: center;
    height: 100%;
    align-items: center;
}

#inscricao h1 {
    text-align: center;
    color: #76b72a;
    font-size: 4.9rem;
    line-height: 6rem;
    margin-bottom: 2rem;
    width: 90%;
}

#inscricao p {
    font-size: 2.2rem;
    color: #000;
    text-align: center;
    margin: 5rem auto;
    width: 75%;
}

#inscricao iframe {
    height: 75%;
}

#inscricao form p {
    font-size: 1.66rem;
    text-transform: uppercase;
    color: #000;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    text-align: left;
    justify-content: space-between;
    margin: 5rem auto 3rem auto;
}

#inscricao form>p>span {
    font-size: 2.3rem;
    color: #222;
    text-transform: none;
    display: block;
    margin-bottom: 4rem;
    text-align: left;
    width: 90%;
}

#inscricao form p>* {
    width: 100%;
}

#inscricao form p br {
    display: none;
}

#inscricao hr {
    width: 70%;
    margin: auto;
    height: 0.2rem;
    background: #76b72a;
    border: none;
}

#inscricao input {
    font-size: 1.75rem;
    line-height: 2.5rem;
    text-transform: uppercase;
    color: #555;
    background-color: #fff;
    border: solid 0.1rem #b3c1ce;
    border-radius: 0.7rem;
    padding: 0.75rem 1rem 0.5rem 1rem;
    width: 100%;
    margin: 0.5rem 0 3rem 0;
    height: 4rem;
    font-family: 'Lato', sans-serif;
}

#inscricao textarea {
    font-size: 1.75rem;
    line-height: 2.5rem;
    text-transform: none;
    color: #555;
    background-color: #fff;
    border: solid 0.1rem #b3c1ce;
    border-radius: 0.7rem;
    padding: 0.75rem 1rem 0.5rem 1rem;
    width: 100%;
    margin: 0.5rem 0 3rem 0;
    height: 10rem;
    font-family: 'Lato', sans-serif;
}

#inscricao form p label[for='form-email'] {
    width: 55%;   
}

#inscricao form p label[for='form-tel'] {
    width: 40%;
}

#inscricao form p label[for='form-cidade'], #inscricao form p label[for='form-cep'], #inscricao form p label[for='form-facebook'], #inscricao form p label[for='form-instagram'], #inscricao form p label[for='form-prato'], #inscricao form p label[for='form-preco'] {
    width: 47.5%;
}

#inscricao form p label[for='form-foto'] {
    cursor: pointer;
    height: 7rem;
    margin-bottom: 5rem;
}

#inscricao form p label[for='form-foto'] .input-arquivo {
    display: inline-block;
    font-size: 1.3rem;
    line-height: 2.5rem;
    text-transform: uppercase;
    color: #555;
    background-color: #fff;
    border: solid 0.1rem #b3c1ce;
    border-radius: 0.7rem;
    padding: 0.75rem 1rem 0.5rem 1rem;
    width: 100%;
    margin: 0.5rem 0 3rem 0;
    height: 4rem;
    font-family: 'Lato', sans-serif;
    position: absolute;
    left: 0;
    top: 1.8rem;
    overflow: hidden;
    padding-right: 37%;
    
}

#inscricao form p label[for='form-foto'] .bt-escolher {
    display: inline-block;
    font-size: 1.75rem;
    line-height: 2.5rem;
    text-transform: uppercase;
    color: #000;
    background-color: #e3e3e3;
    border: solid 0.1rem #b3c1ce;
    border-radius: 0.7rem;
    padding: 0.75rem 1rem 0.5rem 1rem;
    margin: 0.5rem 0 3rem -5rem;
    height: 4rem;
    font-family: 'Lato', sans-serif;
    width: 35%;
    position: absolute;
    right: 0;
    top: 1.8rem;
    text-align: center;
    transition: all 0.5s;
}

#inscricao form p label[for='form-foto'] .bt-escolher:hover {
    background-color: #939393;
}

#inscricao input[type='file'] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}


#inscricao form p input[type='submit'] {
    width: 100%;
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.66rem;
    background-color: #93c558;
    padding-top: 0.5rem;
    color: #fff;
    border: solid 0.1rem #b1b1b166;
    cursor: pointer;
    margin-bottom: 0;
    height: 5rem;
    transition: all 0.5s;
}

#inscricao form p input[type='submit']:hover {
    background-color: #639528;
}

#inscricao form p .form-status {
    display: none;
}

#inscricao div.wpcf7 {
    display: flex;
    width: 60%;
    align-self: flex-end;
    right: 0;
}

#inscricao span.wpcf7-not-valid-tip {
    display: block;
    position: absolute;
    bottom: -3rem;
    right: 0;
    background: #000000aa;
    padding: 0.5rem 0.5rem 0 0.5rem;
    font-size: 1.3rem;
    font-weight: 300;
    color: #a9d46e;
    border-radius: 0.5rem;
    text-align: center;
}

#inscricao .descricao-prato span.wpcf7-not-valid-tip {
    bottom: 2rem;
}

#inscricao .foto-prato span.wpcf7-not-valid-tip {
    z-index: 10;
    width: 20rem;
    bottom: -6rem;
    left: 7rem;
}

#inscricao div.wpcf7-validation-errors, #inscricao div.wpcf7-acceptance-missing {
    display: block;
    background: #000000aa;
    border: none;
    color: #a9d46e;
    font-size: 1.5rem;
    position: absolute;
    bottom: -3rem;
    margin: 0;
    padding: 0.5rem 0.5rem 0 0.5rem;
    border-radius: 0.5rem;
}

#inscricao div.wpcf7-mail-sent-ok {
    display: block;
    background: #000000aa;
    border: none;
    color: #a9d46e;
    font-size: 2rem;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -4rem;
    margin: 0;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 0.5rem;
}

#inscricao div.wpcf7 .ajax-loader {
    background-repeat: no-repeat;
    margin: 0;
    background-size: 2rem;
    background-position: center 1rem;
    height: 5rem;
    opacity: 0.75;
    position: absolute;
    bottom: -3rem;
}


/* INTERNA */

#interna.estabelecimentos {
    width: 100%;
    padding: 10rem 5% 5rem 10%;
    background-image: url(imgs/bg-interna.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-color: #f5f9fa;
}

#interna .bt-voltar {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 2%;
    display: flex;
    font-size: 1.6rem;
    text-transform: uppercase;
    text-align: right;
    justify-content: flex-end;
    width: 25rem;
}

#interna .bt-voltar span {
    width: 49%;
    margin-right: 1rem;
    padding: 1rem;
    color: #333;
    transition: all 0.5s;
}

#interna .bt-voltar:hover span {
    color: #000;
}

#interna .bt-voltar figure {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    background-color: #3f6216;
    width: 5.5rem;
    height: 5.5rem;
    transition: all 0.5s;
}

#interna .bt-voltar:hover figure {
    background-color: #0f3206;
}

#interna .conteudo {
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#interna .conteudo .cabecalho {
    width: 64%;
    display: flex;
    align-items: flex-end;
    margin-left: 15%;
    margin-bottom: 10rem;
}

#interna .conteudo .cabecalho>a {
    width: 22rem;
    margin-right: 3rem;
}

#interna .conteudo .cabecalho h4 {
    font-weight: 900;
    font-size: 2.2rem;
    padding-bottom: 3rem;
    border-bottom: solid 0.3rem #69905b;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #2d2d2d;
}

#interna .conteudo .cabecalho p {
    font-size: 2.5rem;
    color: #2d2d2d;
    text-align: left;
}

#interna h1 {
    text-align: left;
    color: #3f6216;
    margin-bottom: 5rem;
    font-size: 4.5rem;
}

#interna .lista-estabelecimentos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

#interna .lista-estabelecimentos .item {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    border:solid 0.1rem #a7c858;
    background-color: #eeeeee;
    padding: 2rem;
    width: 48%;
    margin-bottom: 5rem;
}

#interna .lista-estabelecimentos .item .dados {
    padding: 1rem 0;
}

#interna .lista-estabelecimentos .item hr{
    background-color: #3f6216;
    height: 0.1rem;
    width: 97%;
    margin: 0 auto;
    border: none;
}

#interna .lista-estabelecimentos .item h2 {
    font-weight: normal;
    font-size: 2.4rem;
    color: #3f6216;
    margin-bottom: 1rem;
    text-align: left;
}

#interna .lista-estabelecimentos .item .endereco {
    font-size: 1.6rem;
    line-height: 1.4rem;
    color: #2d2d2d;
    margin-bottom: 1rem;
}

#interna .lista-estabelecimentos .item .links {
    margin: 1rem 0 3rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#interna .lista-estabelecimentos .item a.site {
    width: 90%;
    text-align: center;
    font-size: 1.8rem;
    color: #fff;
    background-color: #3f6216;
    border-radius: 0.7rem;
    padding: 1rem 1rem 1rem 0.75rem;
    transition: all 0.5s;
    text-transform: lowercase;
}

#interna .lista-estabelecimentos .item a.site:hover {
    background-color: #0f3206;
}

#interna .lista-estabelecimentos .item a.sociais {
    width: 50%;
    font-size: 2rem;
    color: #2d2d2d;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.3rem;
    margin-top: 1rem;
}

#interna .lista-estabelecimentos .item a.sociais figure {
    margin-right: 1rem;
}

#interna .lista-estabelecimentos .item a.sociais:first-of-type {
    border-right: solid 0.1rem #2d2d2d;
}

#interna .lista-estabelecimentos .item .prato {
    width: 100%;
    padding: 2rem;
    border-radius: 0.5rem;
    background-color: #2d2d2d;
}

#interna .lista-estabelecimentos .item .container-img-prato {
    display: flex;
    width: 100%;
    height: 22.6rem;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#interna .lista-estabelecimentos .item .container-img-prato div {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#interna .lista-estabelecimentos .item .container-img-prato div img {
    max-height: none;
}

#interna .lista-estabelecimentos .item .dados-prato {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #fff;
    margin-top: 0.75rem;
    height: auto;
}

#interna .lista-estabelecimentos .item .dados-prato h3 {
    text-align: left;
    font-size: 2rem;
    max-height: 5rem;
    font-weight: bold;
    max-width: 70%;
    overflow-y: hidden;
}

#interna .lista-estabelecimentos .item .dados-prato span {
    text-align: right;
    font-size: 2rem;
    max-height: 5rem;
    color: #eee;
    padding-left: 2rem;
    border-left: solid 2px #fff;
}

#interna .lista-estabelecimentos .item .descricao-prato {
    text-align: left;
    width: 100%;
    font-size: 1.75rem;
    margin-top: 3rem;
    color: #fff;
    font-weight: 400;
}

/* EVENTOS */

#interna.eventos {
    width: 100%;
    background-color: #fff;
    padding-top: 6rem;
}

#interna.eventos .conteudo {
    width: 100%;
    padding: 4rem 2% 5rem 10%;
    background-image: url(imgs/bg-interna-eventos.jpg);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    flex-direction: column;
    background-color: #000;
    padding-bottom: 30rem;
    align-items: flex-start;
}

#interna.eventos h1 {
    font-size: 4.2rem;
    color: #76b72a;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 0;
}

.eventos .calendario {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 1rem 1.5rem;
    background-color: #121212;
    margin-bottom: 7rem;
    width: 67.5rem;
    margin-right: 5%;
    align-self: center;
}

#interna.eventos .calendario h2.mes {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: normal;
    font-size: 3.3rem;
    color: #8cc63f;
    background: none;
    
}

.eventos .calendario .semana {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    color: #fff;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
}

.eventos .calendario .dia {
    width: 13%;
    margin-bottom: 0.7rem;
}

.eventos .calendario .semana .dia {
    width: 13%;
    padding: 0.4rem 0 0.2rem;
    background-color: #4f6c29;
}

.eventos .calendario .grade {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: 1.6rem;
}

.eventos .calendario .grade .dia {
    width: 13%;
    height: 7.3rem;
    background-color: #263317;
    color: #8cc63f;
    text-shadow: 0.2rem 0.2rem #000000aa;
    border: none;
    padding: 0.5rem 1rem;
    align-items: flex-end;
    display: flex;   
}

.eventos .calendario .grade .dia.ativo {
    color: #fff;
    text-shadow: 0.2rem 0.2rem #000000aa;
    border: solid 0.1rem #fff;
    box-shadow: inset 0.2rem 0.2rem 0.2rem #00000022;
    cursor: pointer;
    transition: all 0.5s;
}

.eventos .calendario .grade .dia.ativo:hover {
    background-color: #566347;
}

.eventos .calendario .grade .dia.vazio {
    opacity: 0;
}

#interna.eventos h2 {
    font-size: 3.8rem;
    color: #fff;
    font-weight: 400;
    text-align: left;
    background-color: #406216;
    padding: 1rem 5rem;
    width: 100%;
    text-transform: none;
    border-radius: 2rem 6rem 0 0;
}

.eventos .destaques {
    padding-top: 2.5rem;
    width: 100%;
    background-color: #111111cc;
    border-radius: 0 0 2rem 6rem;
    height: 36rem;
}

.eventos .destaques .carousel {
    width: 113rem;
    margin: 0;
    height: 100%;
}

.eventos .destaques .flickity-prev-next-button.previous {
    left: -6rem;
}

.eventos .destaques .flickity-prev-next-button.next {
    right: -4rem;
}

.eventos .destaques .flickity-prev-next-button .flickity-button-icon {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0.5rem;
}

.eventos .destaques .flickity-button {
    position: absolute;
    background: #000;
    border: none;
    color: #fff;
    transition: all 0.3s;
    width: 5.5rem;
    height: 5.5rem;
}

.eventos .destaques .flickity-button:hover {
    background: #333;
    cursor: pointer;
    color: #ccc;
}


.eventos .lista-eventos {
    display: flex;
    flex-wrap: wrap;
    padding: 4rem 5% 2rem 4%;
    justify-content: space-between;
    align-items: flex-start;
}

.eventos .lista-eventos:nth-child(5) {
    border: none;
}

.eventos .item {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 1rem;
    margin-bottom: 2.5rem;
    width: 22.5%;
    flex-grow: 1;
    max-width: 50rem;
    width: 40%;
    
}

.eventos .item>* {
    width: 75%;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 1.4rem;
    text-align: left;
}

.eventos .item h3 {
    font-size: 1.2em; /* com img */
    font-size: 1.35em;
    text-transform: uppercase;
    text-align: left;
    color: #d0e2d6;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    min-height: 4.8rem;
    text-transform: uppercase;
}

.eventos .item.destaque h3 {
    line-height: 1.2em;
    font-size: 1.7em;
    min-height: 5.6rem;
    display: flex;
    align-items: center;
    margin: auto;
}

.eventos .item p {
    margin-bottom: 0.7rem;
    color: #ddd;
    padding-right: 1.5rem;
}

.eventos .item a {
    font-size: 1.1em;
    color: #678f61;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.5s;
}

.eventos .item a:hover {
    color: #a7cfa1;
    text-decoration: underline;
}

.eventos .item .data {
    width: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 2.7rem;
    padding: 0;
    line-height: initial;
    width: 15%;
    align-items: center;
    text-transform: uppercase;
    margin-left: 3rem;
}

.eventos .item .data span:first-of-type {
    font-size: 1.65em;
    padding-bottom: 0.25rem;
    border-bottom: solid 0.1rem #fff;
}

.eventos .item .imagem {
    display: flex;
    width: 100%;
    height: 18rem;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 2rem;
    display: none; /* tira as imagem */
}

.eventos .item .imagem div {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.eventos .item .imagem div img {
    max-height: 100%;
    height: 100%;
    max-width: none;
    width: auto;
}

.eventos .item.destaque {
    width: 56.5rem;
    margin: 0;
    margin-bottom: 0rem;
    max-width: none;
    flex-grow: 1;
    height: 100%;
}

.eventos .item.destaque>* {
    font-size: 1.3rem; /* com imagem */
    font-size: 1.4rem;
    line-height: 1.9rem;
}

.eventos .item.destaque a {
    margin-top: 0.5rem;
}

.eventos .item.destaque .data {
    font-size: 2.7rem;
    line-height: initial;
}

.eventos .item.destaque .imagem {
    width: 20rem;
    margin-right: 3rem;
    margin-bottom: 0;
}

.eventos .item.destaque .infos {
    width: 55%; /* com imagem */
    width: 75%;
    margin: auto;
    padding-top: 1rem;
    height: 100%;
    justify-content: space-between;
}

.eventos .bt-veja-mais {
    font-size: 1.5rem;
    text-transform: uppercase;
    padding: 1rem 1.2rem;
    background-color: #69905b;
    color: #fff;
    margin: 1rem auto;
    width: 30rem;
    border-radius: 1.5rem;
}

.eventos .item.esconde-evento {
    display: none;
}

/* EVENTOS HOME */

#eventos {
    padding: 5rem 7.8% 5rem 5%;
    background-image: url(imgs/bg-eventos.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    z-index: 10;
    background-size: 100%;
}

#eventos h1 {
    font-size: 6.3rem;
    color: #76b72a;
    text-align:left;
    width: 75%;
    margin-bottom: 10rem;
    padding-left: 1rem;
}

#eventos .destaques {
    width: 100%;
    margin-bottom: 3rem;
}

#eventos .destaques h2 {
    font-size: 3.3rem;
    color: #fff;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 2.5rem;
    font-weight: 400;
    padding-left: 1rem;
}

#eventos .destaques .carousel {
    width: 114rem;
    margin: 0;
}

#eventos .destaques .flickity-prev-next-button.previous {
    left: -6rem;
}

#eventos .destaques .flickity-prev-next-button.next {
    right: -6rem;
}

#eventos .destaques .flickity-prev-next-button .flickity-button-icon {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0.5rem;
}

#eventos .destaques .flickity-button {
    position: absolute;
    background: #000;
    border: none;
    color: #fff;
    transition: all 0.3s;
    width: 5.5rem;
    height: 5.5rem;
}

#eventos .destaques .flickity-button:hover {
    background: #333;
    cursor: pointer;
    color: #ccc;
}

#eventos .item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 1rem;
    width: 36rem;
    flex-grow: 1;
    max-width: none;
    background-color: #cccccc64;
    padding: 3rem 2.5rem 2rem 2.5rem;
    color: #fff;
    height: 50rem;
}

#eventos .item>* {
    width: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 1.3rem;
    text-align: left; 
    height: 100%;
    justify-content: space-between;
}

#eventos .item h3 {
    font-size: 2.4em;
    text-align: left;
    color: #fff;
    min-height: 7.6rem;
    display: flex;
    align-items: center;
}

#eventos .item p {
    margin-bottom: 2rem;
    font-size: 1.6rem;
    flex-grow: 1;
    margin-top: 1.5rem;
    line-height: 2.3rem;
}

#eventos .item a {
    text-align: center;
    font-size: 1.6rem;
    color: #2d3c14;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.5s;
    border: solid 0.1rem #fff;
    padding: 0.9rem 2rem 0.8rem 2rem;
    background-color: #8cc63f;
    border-radius: 0.5rem;
    width: 60%;
    margin: auto;
}

#eventos .item a:hover {
    color: #a7cfa1;
    text-decoration: underline;
}

#eventos>a {
    width: 100%;
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2.4rem;
    background-color: #93c558;
    color: #fff;
    border: solid 0.1rem #b1b1b166;
    cursor: pointer;
    height: 5rem;
    transition: all 0.5s;
    border-radius: 0.5rem;
    margin-left: 1rem;
}

#eventos a:hover {
    background-color: #639528;
}

/* BARRA DE LOGOS */

#logotipos {
    background-color: #f5f9fa;
    padding: 5rem 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logotipos img {
    max-width: 100%;
    width: auto;
    max-height: 9rem;
}

#logotipos img[alt="Alelo"] {
    max-height: 6.5rem;
}

#logotipos img[alt="SKY"] {
    max-height: 5rem;
}

#logotipos img[alt="apaa"] {
    max-height: 6rem;
}

#logotipos>* {
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#logotipos ul li {
    width: 40%;
    text-align: center;
}

#logotipos ul.prata li:not(.titulo) {
    width: 100%;
    text-align: center;
}

#logotipos ul.bronze li:not(.titulo) {
    width: 45%;
    margin-top: -1rem;
}

#logotipos ul.apoio li:not(.titulo) {
    width: 25%;
    text-align: center;
    margin: 0 3rem;
}

#logotipos ul.apoio li:nth-of-type(2) {
    width: 20%;
    margin-left: 6rem;
}

#logotipos ul.realizacao li {
    width: 100%;
    text-align: center;
}

#logotipos .apoio {
    width: 70%;
    align-items: center;
    margin-left: -3rem;
}

#logotipos .titulo {
    width: 70%;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin: 0 auto;
    margin-bottom: 2rem;
}

#logotipos .apoio .titulo {
    padding-left: 3rem;
}

#logotipos .patrocinadores>ul {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

#logotipos .patrocinadores>ul.bronze {
    justify-content: space-around;
}



/* PAGINAÇÃO */

.navigation ul {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin: 0 auto;
}

.navigation li {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1rem;
}

.navigation li.seta a {
    border: none;
    color: #2d2d2d;
    font-weight: 700;
    font-size: 3rem;
}

.navigation li a,
.navigation li.disabled {
    border: solid 0.1rem #2d2d2d;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration:none;
    font-size: 1.8rem;
    background-color: transparent;
    color: #2d2d2d;
    border-radius: 100%;
    padding-top: 0.3rem;
}

.navigation li a:hover,
.navigation li.active a {
    background-color: #2d2d2d;
    color: #fff;
}

.navigation li.seta a:hover {
    border: none;
    background-color: transparent;
    color: #2d2d2d;
    font-weight: 700;
    font-size: 3rem;
}



/* HACKMOBILE */

.only-mobile {
    display: none !important;
}

.slider-mobile {
    display: none;
}




/* --MOBILE ---*/

@media screen and (max-width: 750px) {

    .only-mobile {
        display: flex !important;
    }

    .only-desktop {
        display: none !important;
    }

    html {
        font-size: 7px;
    }

    h1 {
        font-size: 4rem;
    }
    
    /* estilos barra gov */
    
    section.govsph-topo {
        padding-top: 0px;
    }
    
    .govsph-dropdown {
        padding: 5px 0 5px !important;
    }
    
    section.govsph-topo img {
        width: 20px;
        height: 20px;
        margin: 0 !important;
    }

    /* CAPA */

    #home {
        background-image: url(imgs/bg-home-mb.png);
        height: 100vh;
        background-size: 100%;
        padding-top: 18rem;
        z-index: 30;
        background-position: center bottom;
    }

    #home .logotipo {
        max-width: 35%;
    }

    #home .conteudo {
        max-width: 80%;
        padding-bottom: 24rem;
    }

    #home .separador {
        max-width: 55%;
    }

    /* MENU */

    div.nav-menu {
        left: 0;
        top: 12rem;
        transition: all 0.5s;
        display: flex;
    }

    nav.menu-site {
        position: fixed;
        z-index: 60;
        flex-direction: column;
        justify-content: space-around;
        max-width: 35rem;
        padding: 0.7rem 1%;
        border-radius: 0 1rem 1rem 0;
        background-color: #fffffff0; 
        margin: auto;
        left: -999px;
        transition: width 0.1s, opacity 1s;
        box-shadow: 0.2rem 0.2rem 0.4rem #43241166;
        opacity: 0;
        width: 0px;
        bottom: auto;
        top: 12rem;
        align-items: flex-start;
        font-size: 2.3rem;
        transition: all 0.5s;   
    }

    nav.menu-site.sticky {
        left: 0;
        width: 55vw;
        opacity: 1;

    }

    nav.menu-site .bt-fechar {
        display: block;
        position: absolute;
        cursor: pointer;
        top: 1rem;
        right: 1rem;
        width: 2.3rem;
        height: 2.3rem;
        background-size: 100%;
        background-position: center;
        background-image: url(imgs/bt-fechar.png);
        z-index: 40;
    }

    nav.menu-site a {
        color: #111;
        text-decoration: none;
        text-align: center;
        border-radius: 0;
        padding: 1.5rem;
        text-align: left;
        border-bottom: solid 0.1rem #11111144;
        border-left: solid 0.1rem #22222200;
        padding-left: 2.5rem;
        font-weight: 400;
        transition: border 0.5s;
        width: 95%;
    }

    nav.menu-site a:last-of-type {
        border-bottom: none
    }

    nav.menu-site a:hover {
        border-left:solid 1.6rem #222222aa;
    }

    /* GASTRONOMIA */

    #gastronomia {
        background-image: url(imgs/bg-gastronomia-mb.png);
        background-position: 15rem -1rem;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 38rem;
        padding-bottom: 0rem;
        margin-top: -15rem;
        background-size: 100%;
    }
    
    #gastronomia a {
        width: 95%;
        margin: auto;
        font-size: 2.1rem;
    }

    #gastronomia .conteudo {
        margin: auto;
        width: 90%;
    }

    #gastronomia h1 {
        text-align: center;
        font-size: 4.65rem;
        line-height: 5rem;
        width: 72%;
        margin: auto;
        margin-bottom: 3rem;
    }

    #gastronomia p {
        font-size: 1.8rem;
        line-height: 2.2rem;
        padding-bottom: 2rem;
    }

    /* NUMEROS */

    #numeros {
        background-image: url(imgs/bg-numeros-mb.jpg);
        padding-top: 5rem;
        padding-bottom: 25rem;
        z-index: 10;
        background-size: cover;
        overflow-x: hidden;
        background-attachment: scroll;
    }

    #numeros h1 {
        font-size: 4.3rem;
        max-width: 65%;
    }

    #numeros .ilustra-1 {
        top: 14.5rem;
        left: 3%;
        width: 25%;
    }

    #numeros .ilustra-2 {
        top: 14.5rem;
        right: -5%;
        width: 32%;
    }

    #numeros .conteudo {
        width: 80%;
    }

    #numeros ul {
        width: 100%;
        margin: auto;
    }

    #numeros li {
        font-size: 1.6rem;
        width: 45%;
    }

    #numeros li:nth-of-type(3) {
        order: 5;
    }
    #numeros li:nth-of-type(6) {
        order: 6;
    }

    #numeros li strong {
        font-size: 3rem;
    }
    
    #numeros li p strong {
        font-size: 4.5rem;
    }

    #numeros li strong span {
        font-size: 5rem;
    }

    #numeros li span {
        width: 85%;
    }

    #numeros .separador.only-mobile {
        width: 65%;
        margin-top: 0rem;

    }

    #numeros .separador img {
        height: 4px;
    }

    #numeros .footnotes {
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
    }

    #numeros .footnotes p {
        margin-bottom: 2.5rem;   
    }

    #numeros .footnotes p span {
        position: absolute;
        bottom: -17rem;
        width: 100%;
        font-size: 2rem;
    }

    #numeros .footnotes p:first-of-type,#numeros .footnotes p:last-of-type {
        text-align: center;
    }


    /* INGREDIENTES */

    #ingredientes {
        background-image: url(imgs/bg-ingredientes-mb.png);
        padding-top: 5rem;
        padding-bottom: 10rem;
        background-size: cover;
    }

    #ingredientes header {
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
    }

    #ingredientes header>div {
        flex-direction: column-reverse;
        width: 100%;
    }

    #ingredientes header>div .logo {
        order: 1;
        margin: 0 auto;
        z-index: 20;
    }

    #ingredientes header>div .ilustra {
        position: absolute;
        margin: 0;
        right: 0;
        max-width: 45%;
        z-index: 10;
        top: 8rem;
    }

    #ingredientes h1 {
        text-align: center;
        color: #76b72a;
        font-size: 4rem;
        margin: 0 auto;
        line-height: 4.5rem;
        margin-bottom: 2.5rem;
        width: 80%;
        margin-top: 10rem;
    }

    #ingredientes h1 span{
        display: block;
    }

    #ingredientes figure {
        max-width: 80%;
        margin: auto auto 3rem auto ;
    }

    #ingredientes .carousel {
        width: 49rem;
        margin: 0 auto;
    }

    #ingredientes .slide {
        width: 23.5rem;
        margin-left: 2rem;
        padding: 3rem 2.5rem 0.5rem 3rem;
        height: 30rem;
    }

    #ingredientes .flickity-prev-next-button.previous {
        left: 20%;
        top: 120%;
        width: 4rem;
        height: 4rem;
    }

    #ingredientes .flickity-prev-next-button.next {
        right: 20%;
        top: 120%;
        width: 4rem;
        height: 4rem;
    }

    .slider-mobile {
        display: block;
    }

    /* ROTAS */
    #rotas {
        background-image: url(imgs/bg-rotas-mb.jpg);
        background-size: cover;
        background-position: left top;
        padding-top: 3rem;
        padding-bottom: 5rem;
        background-attachment: scroll;
    }

    #rotas h1 {
        font-size: 4rem;
        margin-bottom: 4rem;
    }

    #rotas h1 span {
        font-size: 2rem;
    }

    #rotas .conteudo {
        width: 100%;
        font-size: 2.1rem;
    }

    #rotas .conteudo p {
        width: 100%;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 20;
        padding: 0 18%;
    }

    #rotas ul.rotas {
        margin: 0 auto;
        margin-top: 14.5rem;
        width: 90%;
        justify-content: space-between;
    }

    #rotas ul.rotas>li {
        width: 43%;
    }

    #rotas ul.rotas h2 {
        font-size: 2.15rem;
        background-size: 2rem;
        width: 75%;
    }

    #rotas ul.rotas h2 span {
        padding: 1rem;
    }

    #rotas ul.rotas ul {
        font-size: 1.5rem;
        font-weight: normal;
    }

    /* CHEFS */

    #chefs {
        background-image: url(imgs/bg-chefs-mb.jpg);
        background-size: cover;
        background-position: -13rem bottom;
        padding-left: 0;
        padding-bottom: 15rem;
    }

    #chefs h1 {
        font-size: 4rem;
        text-align: center;
        margin: 0 auto;
    }

    #chefs .separador {
        margin: 0 auto;
        margin-top: 2.5rem;
        margin-bottom: 4rem;
        max-width: 30%;
    }

    #chefs .conteudo {
        width: 85%;
        margin: 0 auto;
    }

    #chefs ul.chefs {
        justify-content: space-around;
        margin-top: 18rem;
    }

    #chefs ul.chefs h2 {
        font-size: 1.6rem;
    }

    #chefs .conteudo ul.chefs p {
        font-size: 1.4rem;
    }

    #chefs ul.chefs>li {
        width: 39%;
        margin: 0 2rem 2rem 2rem;
        order: 2;
    }
    
    #chefs ul.chefs>li:nth-of-type(4){
        order:7;
    }

    /*
    #chefs ul.chefs>li:nth-of-type(4), #chefs ul.chefs>li:nth-of-type(6) {
        margin-right: 0%;
    }

    #chefs ul.chefs>li:nth-of-type(1), #chefs ul.chefs>li:nth-of-type(2) {
        order:0;
    }
    */

    #chefs .logo {
        right: auto;
        bottom: auto;
        top: 20rem;
        width: 22%;
        left: calc(50% - 11%);
    }

    /* BENEFICIOS */

    #beneficios ul {
        align-items: flex-start;
        width: 100%;
        justify-content: space-between;
    }

    #beneficios ul li {
        width: 45%;
        margin: 0;
        margin-bottom: 3rem;
    }
    
    #beneficios ul li figure {
        margin: 0 4rem;
    }


    /*oportunidades */
    #oportunidades {
        background-image: url(imgs/bg-oportunidades-mb.jpg);
        background-size: 100%;
        padding: 0 6%;
        padding-top: 3rem;
        padding-bottom: 3rem;

    }

    #oportunidades .conteudo {
        flex-direction: column;
    }

    #oportunidades h1 {
        font-size: 4rem;
        width: 80%;
    }

    #oportunidades .separador {
        max-width: 30%;
        margin-bottom: 25rem;
    }

    #oportunidades .conteudo {
        font-size: 2.2rem;
    }

    #oportunidades .conteudo>p {
        width: 100%;
        text-align: center;
        margin-bottom: 3rem;
    }

    #oportunidades .conteudo>div {
        width: 100%;
    }

    #oportunidades ul li {
        font-size: 2rem;
    }

    #oportunidades .conteudo .cotando p {
        font-size: 1.75rem;
        text-align: center;
        margin: 0 auto;
        margin-top: 3rem;
        width: 90%;
    }
    
    #inscricao {
        background-image: url(imgs/bg-inscricao-mb.jpg);
        background-position: -4rem top;
        background-repeat: no-repeat;
        background-size: auto 100%;
        padding: 0 5%;
        padding-top: 3rem;
        padding-bottom: 5rem;
        background-attachment: scroll;
    }

    #inscricao .conteudo {
        margin-left: 0;
        width: 96%;
    }

    #inscricao h1 {
        font-size: 3.6rem;
        line-height: 3.8rem;
        margin-bottom: 1rem;
        width: 91%;

    }

    #inscricao p {
        font-size: 2rem;
        color: #000;
        margin: 2rem auto;
        width: 85%;
    }

    #inscricao iframe {
        height: 85%;
    }
    
    #inscricao div.wpcf7 {
        width: 100%;
    }
    
    #inscricao form>p>span {
        font-size: 2rem;
        text-align: center;
        margin: auto;
        margin-bottom: 4rem;
        width: 100%;
    }
    
    #inscricao form p {
        font-size: 1.5rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    
    #inscricao form p label[for='form-foto'] .bt-escolher {
        width: 50%;
        font-size: 1.5rem;
        padding: 0.85rem 0.5rem 0.5rem 0.5rem;
    }
    
    #inscricao input {
        margin-bottom: 2rem;
    }

    div#govsp-footerGlobal {
        padding-top: 0;
    }

    #govsp-topbarGlobal.blu-e #topbarLink a {
        font-size: 2rem;
    }
    
    /* INTERNA */
    
    #interna.estabelecimentos {
        background-image: url(imgs/bg-interna-mb.jpg);
        background-size: 115%;
        align-items: center;
        padding: 14rem 5% 5rem 5%
    }
    
    #interna .conteudo {
        width: 100%;
    }
    
    #interna .bt-voltar figure {
        width: 6.5rem;
    }
    
    #interna .conteudo .cabecalho {
        flex-direction: column;
        align-items: center;
        margin: 0;
        width: 68%;
    }
    
    #interna .conteudo .cabecalho>a {
        width: 15rem;
        margin-right: 0;
    }
    
    #interna .conteudo .cabecalho h4 {
        font-size: 3.2rem;
        margin-top: 2rem;
        padding-bottom: 0.8rem;
        border-width: 0.5rem;
    }
    
    #interna .conteudo .cabecalho p {
        font-size: 2.3rem;
        margin-bottom: 2rem;
        text-align: center;
    }
    
    #interna .conteudo .corpo {
        width: 85%;
    }
    
    #interna h1 {
        font-size: 3rem;
        text-align: center;
        margin-bottom: 3rem;
    }
    
    #interna .lista-estabelecimentos .item {
        width: 100%;
    }
    
    /* interna EVENTOS */
    
    .eventos .calendario {
        width: 90vw;
        margin: 0 auto;
        margin-bottom: 2rem;
    }
    
    #interna.eventos .conteudo {
        padding: 3rem 5% 10rem 5%;
    }
    
    #interna.eventos h1 {
        text-align: center;
        font-size: 3.5rem;
        margin-bottom: 2rem;
    }
    
    #interna.eventos .calendario h2.mes {
        font-size: 2.5rem;
    }
    
    .eventos .calendario .grade {
        font-size: 2rem;
    }
    
    .eventos .calendario .grade .dia {
        height: 5.3rem;
    }
    
    #interna.eventos h2 {
        font-size: 2.8rem;
        text-align: center;
    }
    
    .eventos .destaques {
        margin-bottom: 2rem;
    }
    
    .eventos .destaques .carousel {
        width: 35rem;
        margin: 0 auto;
        max-width: 100%;
        height: 30rem;
    }
    
    .flickity-viewport {
        height: 30rem !important;
    }
    
    .eventos .item.destaque {
        width: 33rem;
        margin: 0 1rem;
        flex-direction: row;
        height: 28rem;
    }
    
    .eventos .item.destaque .imagem {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0;
    }
    
    .eventos .item.destaque .imagem div img {
        max-height: none;
        height: auto;
        max-width: none;
        width: 100%;
    }
    
    .eventos .item .imagem div img {
        max-height: none;
        height: 100%;
        max-width: none;
        width: auto;
    }
    
    .eventos .item.destaque .infos {
        width: 80%;
        margin: 0 0 0 auto;
        justify-content: center;
    }
    
    .eventos .item h3 {
        font-size: 1.5em;
        text-align: left;
    }
    
    .eventos .item.destaque h3 {
        font-size: 1.5em;
        text-align: left;
        margin: 0;
        margin-bottom: 1rem;
    }
    
    .eventos .item.destaque p {
        text-align: left;
        font-size: 1.8rem;
        line-height: 2.2rem;
        margin-bottom: 0.8rem;
        display: block;
    }
    
    .eventos .item.destaque p:first-of-type {
        display: none;
    }
    
    .eventos .item.destaque p.data:first-of-type {
        display: flex;
        justify-content: center;
        width: 10%;
    }
    
    .eventos .item p {
        font-size: 1.2em;
    }
    
    .eventos .item.destaque a {
        margin-top: 0;
        font-size: 1.7rem;
        margin-bottom: 1rem;
        text-align: center;
    }
    
    .eventos .lista-eventos {
        padding: 2rem 0 2rem 0;
    }
    
    .eventos .item {
        width: 100%;
        flex-direction: column-reverse;
        margin-bottom: 5rem;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    
    .eventos .item .data {
        width: 20%;
        text-align: center;
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 0;
        margin-bottom: 1rem;
    }
    
    .eventos .item a {
        text-align: center;
        width: 70%;
        font-size: 1.7rem;
        color: #fff;
        background-color: #608236;
        border-radius: 1rem;
        padding: 0.5rem 0 0.4rem 0;
    }
    
    .eventos .item.destaque a {
        bottom: -2rem;
        margin: 0 0 3rem 0;
    }
    
    /* pagina de eventos na home */
    
    #eventos {
        padding: 5rem 5% 5rem 5%;
        background-image: url(imgs/bg-eventos.jpg);
        background-attachment: scroll;
        background-size: cover;
    }
    
    #eventos .destaques {
        margin-bottom: 2rem;
    }
    
    #eventos h1 {
        font-size: 3.9rem;
        color: #76b72a;
        text-align: center;
        width: 100%;
        margin-bottom: 5rem;
        padding-left: 0;
    }
    
    #eventos .destaques h2 {
        text-align: center;
        padding-left: 0;
    }

    #eventos .destaques .carousel {
        width: 35rem;
        margin: 0 auto;
        max-width: 100%;
    }

    #eventos .item {
        width: 33rem;
        margin: 0 1rem;
        flex-direction: column-reverse;
    }


    #eventos .item .infos {
        width: 100%;
    }

    #eventos .item h3 {
        font-size: 2.5em;
        text-align: center;
        margin-bottom: 0;
    }

    #eventos>a {
        margin-left: 0;
    }
    
    /* barra de logotipos */
    
    #logotipos {
        padding: 5rem 5% 2rem 5%;
    }
    
    #logotipos .patrocinadores {
        flex-direction: column;
        align-items: center;
        margin-bottom: 2rem;
    }
    
    #logotipos .patrocinadores>ul {
        width: 75%;
        margin-bottom: 4rem;
    }
    
    #logotipos .titulo {
        margin-bottom: 2rem;
        width: 100%;
        font-size: 1.75rem;
    }
    
    #logotipos .patrocinadores .titulo {
        width: 85%;
    }
    
    #logotipos .apoio {
        width: 100%;
        margin-left: 0;
        margin-bottom: 5rem;
    }
    
    #logotipos .apoio .titulo {
        padding-left: 0;
    }
    
    #logotipos ul.apoio li:not(.titulo) {
        width: 34%;
        text-align: center;
        margin: 0;
    }
    
    #logotipos ul.apoio li:nth-of-type(2) {
        width: 15%;
        margin-right: 0rem;
    }
    
    #logotipos ul.realizacao li {
        width: 70%;
        margin: 0 auto 2rem;
    }

    /* rodapé governo */

    section:last-of-type {
        padding-bottom: 10rem;
    }

}

@media screen and (min-width: 751px) and (max-width: 1250px) {

    .only-mobile {
        display: flex !important;
    }

    .only-desktop {
        display: none !important;
    }

    html {
        font-size: 10px;
    }

    h1 {
        font-size: 4rem;
    }

    /* CAPA */
    #home {
        background-image: url(imgs/bg-home-mb.png);
        height: 100vh;
        background-size: 100%;
        background-position: center -30rem;
        padding-top: 5rem;
        z-index: 30;  
    }


    #home .conteudo {
        max-width: 55%;
    }

    #home .separador {
        max-width: 55%;
    }

    /* MENU */

    div.nav-menu {
        left: 0;
        top: 12rem;
        transition: all 0.5s;
        display: flex;
    }

    nav.menu-site {
        position: fixed;
        z-index: 60;
        flex-direction: column;
        justify-content: space-around;
        max-width: 35rem;
        padding: 0.7rem 1%;
        border-radius: 0 1rem 1rem 0;
        background-color: #fffffff0; 
        margin: auto;
        left: -999px;
        transition: width 0.1s, opacity 1s;
        box-shadow: 0.2rem 0.2rem 0.4rem #43241166;
        opacity: 0;
        width: 0px;
        bottom: auto;
        top: 12rem;
        align-items: flex-start;
        font-size: 2.3rem;
        transition: all 0.5s;   
    }

    nav.menu-site.sticky {
        left: 0;
        width: 55vw;
        opacity: 1;

    }

    nav.menu-site .bt-fechar {
        display: block;
        position: absolute;
        cursor: pointer;
        top: 1rem;
        right: 1rem;
        width: 2.3rem;
        height: 2.3rem;
        background-size: 100%;
        background-position: center;
        background-image: url(imgs/bt-fechar.png);
        z-index: 40;
    }

    nav.menu-site a {
        color: #111;
        text-decoration: none;
        text-align: center;
        border-radius: 0;
        padding: 1.5rem;
        text-align: left;
        border-bottom: solid 0.1rem #11111144;
        border-left: solid 0.1rem #22222200;
        padding-left: 2.5rem;
        font-weight: 400;
        transition: border 0.5s;
        width: 95%;
    }

    nav.menu-site a:last-of-type {
        border-bottom: none
    }

    nav.menu-site a:hover {
        border-left:solid 1.6rem #222222aa;
    }

    /* GASTRONOMIA */

    #gastronomia {
        background-image: url(imgs/bg-gastronomia-mb.png);
        background-position: right bottom;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 25rem;
        padding-bottom: 5rem;
        background-size: 65%;

    }

    #gastronomia .conteudo {
        margin: auto;
        width: 90%;
    }

    #gastronomia h1 {
        text-align: left;
        font-size: 4.65rem;
        line-height: 5rem;
        width: 81%;
        margin: 0;
        margin-bottom: 3rem;
    }

    #gastronomia p {
        font-size: 1.8rem;
        line-height: 2.2rem;
        padding-bottom: 2rem;
        width: 50%;
    }

    /* NUMEROS */

    #numeros {
        background-image: url(imgs/bg-numeros-mb.jpg);
        padding-top: 5rem;
        padding-bottom: 25rem;
        z-index: 10;
        background-size: cover;
        overflow-x: hidden;
    }

    #numeros h1 {
        font-size: 4.3rem;
        max-width: 65%;
    }

    #numeros .ilustra-1 {
        top: 14.5rem;
        left: 3%;
        width: 25%;
    }

    #numeros .ilustra-2 {
        top: 14.5rem;
        right: -5%;
        width: 32%;
    }

    #numeros .conteudo {
        width: 80%;
        margin-top: 5rem;
    }

    #numeros ul {
        width: 100%;
        margin: auto;
    }

    #numeros li {
        font-size: 1.6rem;
        width: 45%;
    }

    #numeros li:nth-of-type(3) {
        order: 5;
    }
    #numeros li:nth-of-type(6) {
        order: 6;
    }

    #numeros li strong {
        font-size: 3rem;
    }

    #numeros li strong span {
        font-size: 5rem;
    }

    #numeros li span {
        width: 85%;
    }

    #numeros .separador.only-mobile {
        width: 65%;
        margin-top: 0rem;

    }

    #numeros .separador img {
        height: 4px;
    }

    #numeros .footnotes {
        flex-direction: column;
        margin: 0 auto;
        width: 70%;
    }

    #numeros .footnotes p {
        margin-bottom: 2.5rem;   
    }

    #numeros .footnotes p span {
        position: absolute;
        bottom: -17rem;
        width: 100%;
        font-size: 2rem;
    }

    #numeros .footnotes p:first-of-type,#numeros .footnotes p:last-of-type {
        text-align: center;
    }


    /* INGREDIENTES */

    #ingredientes {
        background-image: url(imgs/bg-ingredientes-mb.png);
        padding-top: 5rem;
        padding-bottom: 10rem;
        background-size: cover;
    }

    #ingredientes header {
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
    }

    #ingredientes header>div {
        flex-direction: column-reverse;
        width: 100%;
    }

    #ingredientes header>div .logo {
        order: 1;
        margin: 0 auto;
        z-index: 20;
    }

    #ingredientes header>div .ilustra {
        position: absolute;
        margin: 0;
        right: 0;
        max-width: 45%;
        z-index: 10;
        top: 8rem;
    }

    #ingredientes h1 {
        text-align: center;
        color: #76b72a;
        font-size: 4rem;
        margin: 0 auto;
        line-height: 4.5rem;
        margin-bottom: 2.5rem;
        width: 80%;
        margin-top: 10rem;
    }

    #ingredientes h1 span{
        display: block;
    }

    #ingredientes figure {
        max-width: 80%;
        margin: auto auto 3rem auto ;
    }

    #ingredientes .carousel {
        width: 49rem;
        margin: 0 auto;
    }

    #ingredientes .slide {
        width: 23.5rem;
        margin-left: 2rem;
        padding: 3rem 2.5rem 0.5rem 3rem;
    }

    #ingredientes .flickity-prev-next-button.previous {
        left: 20%;
        top: 120%;
        width: 4rem;
        height: 4rem;
    }

    #ingredientes .flickity-prev-next-button.next {
        right: 20%;
        top: 120%;
        width: 4rem;
        height: 4rem;
    }

    #ingredientes .slider-mobile {
        display: block;
    }

    /* ROTAS */
    #rotas {
        background-image: url(imgs/bg-rotas-mb.jpg);
        background-size: cover;
        background-position: left top;
        padding-top: 3rem;
    }

    #rotas h1 {
        font-size: 4rem;
        margin-bottom: 4rem;
    }

    #rotas h1 span {
        font-size: 2rem;
    }

    #rotas .conteudo {
        width: 90%;
        font-size: 2.1rem;
    }

    #rotas .conteudo p {
        width: 110%;
        text-align: center;
        position: absolute;
        left: -10%;
        right: -10%;
        z-index: 20;
        padding: 0 22%;
    }

    #rotas ul.rotas {
        margin: 0 0 0 auto;
        margin-top: 14.5rem;
        width: 80%;
    }

    #rotas ul.rotas>li {
        width: 46%;
    }

    #rotas ul.rotas h2 {
        font-size: 2.35rem;
        background-size: 2.5rem;
    }

    #rotas ul.rotas h2 span {
        padding: 1rem;
    }

    #rotas ul.rotas ul {
        font-size: 1.4rem;
    }

    /* CHEFS */

    #chefs {
        background-image: url(imgs/bg-chefs-mb.jpg);
        background-size: cover;
        background-position: right bottom;
        padding-left: 0;
        padding-bottom: 20rem;
    }

    #chefs h1 {
        font-size: 4rem;
        text-align: center;
        margin: 0 auto;
    }

    #chefs .separador {
        margin: 0 auto;
        margin-top: 2.5rem;
        margin-bottom: 4rem;
        max-width: 30%;
    }

    #chefs .conteudo {
        width: 85%;
        margin: 0 auto;
    }

    #chefs ul.chefs {
        justify-content: flex-start;
    }

    #chefs ul.chefs h2 {
        font-size: 1.3rem;
    }

    #chefs .conteudo ul.chefs p {
        font-size: 1.4rem;
    }

    #chefs ul.chefs>li {
        width: 30%;
        margin-bottom: 2rem;
        margin-right: 5%;
        order:2;
        margin-left: 0;
    }

    #chefs ul.chefs>li:nth-of-type(4), #chefs ul.chefs>li:nth-of-type(6) {
        margin-right: 0%;
    }

    #chefs ul.chefs>li:nth-of-type(1), #chefs ul.chefs>li:nth-of-type(2) {
        order:0;
    }

    #chefs ul.chefs>li:nth-of-type(4) {
        order:1;
    }

    #chefs .logo {
        right: 11%;
        bottom: auto;
        top: 28rem;
        width: 18%;
    }

    /* BENEFICIOS */

    #beneficios ul {
        align-items: flex-start;
        width: 62%;
        justify-content: space-between;
    }

    #beneficios ul li {
        width: 40%;
        margin: 0 2%;
        margin-bottom: 3rem;
    }


    /*oportunidades */
    #oportunidades {
        background-image: url(imgs/bg-oportunidades-mb.jpg);
        background-size: 100%;
        padding: 0 6%;
        padding-top: 3rem;
        padding-bottom: 3rem;
        background-position: center -10rem;

    }

    #oportunidades .conteudo {
        flex-direction: column;
    }

    #oportunidades h1 {
        font-size: 4rem;
        width: 80%;
    }

    #oportunidades .separador {
        max-width: 30%;
        margin-bottom: 32rem;
    }

    #oportunidades .conteudo {
        font-size: 2.2rem;
        width: 90%;
    }

    #oportunidades .conteudo>p {
        width: 100%;
        text-align: center;
        margin-bottom: 3rem;
    }

    #oportunidades .conteudo>div {
        width: 100%;
    }

    #oportunidades ul li {
        font-size: 2rem;
    }

    #oportunidades .conteudo .cotando p {
        font-size: 1.75rem;
        text-align: center;
        margin: 0 auto;
        margin-top: 3rem;
        width: 90%;
    }

    div#govsp-footerGlobal {
        padding-top: 0;
    }

    #govsp-topbarGlobal.blu-e #topbarLink a {
        font-size: 2rem;
    }

    /* rodapé governo */

    section:last-of-type {
        padding-bottom: 10rem;
    }

}

@media screen and (max-width: 330px) {

    html {
        font-size: 6px;
    }

    #ingredientes {
        background-size: 130%;
    }

}

@media screen and (min-width: 1600px) {

    nav.menu-site {
        bottom: 2.5rem;
    }

    #home {
        padding-top: 10rem;
    }

}