@font-face {
    font-family: 'bebas';
    src: url('../fonts/BebasNeue-Regular.ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'bebas-bold';
    src: url('../fonts/BebasNeue-Bold.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'barlow';
    src: url('../fonts/Barlow-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'barlow-medium';
    src: url('../fonts/Barlow-Medium.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'barlow-semi';
    src: url('../fonts/Barlow-SemiBold.ttf');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #dfddd8;
    overflow-x: hidden;
}

.body-dark {
    background-color: #D4D2CC;
}

#about p {
    margin-bottom: 2rem;
    font-family: 'barlow';
    color: #808080;
    font-size: 1rem;
    letter-spacing: 0.1rem;
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #c61025;
}

.panel {
    position: fixed;
    right: -15.625em; /*left or right and the width of your navigation panel*/
    width: 15.625em; /*should match the above value*/
}

.wrap {
    position: relative;
}

#menu {
    font-family: 'bebas';
    background-color: #c61025;
    color: #dfddd8;
}

#menu li {
    margin-bottom: 12px;
}

#menu a {
    font-size: 1.3rem;
    width: 200px;
    padding: 8px 0 8px 0;
    line-height: 1.4rem;
}

#menu {
    padding: 2rem 0 2rem 1.5rem;
}

.bg-about {
    background-color: #d3d1cc;
}

.font-bebas {
    font-family: 'bebas';
}

.font-bebas-bold {
    font-family: 'bebas-bold';
}

.font-barlow {
    font-family: 'barlow';
}

.font-barlow-medium {
    font-family: 'barlow-medium';
}

.font-barlow-semi {
    font-family: 'barlow-semi';
}

.logo-rical {
    width: 120px;
}

.bg-yellow-rice {
    background-image: url('../img/bg-yellow-rice.jpg');
    background-size: cover;
    background-position: 50% 60%;
}

.bg-yellow-rice-2 {
    background-image: url('../img/bg-yellow-rice.jpg');
    background-size: 120%;
    background-position: 50% 30%;
}

.bg-black-beans {
    background-image: url('../img/bg-black-beans.jpg');
    background-size: cover;
    background-position: 20% 60%;
}

.bg-rice {
    background-image: url('../img/bg-rice.jpg');
    background-size: 140%;
    background-position: 60% 60%;
}

.bg-raw-rice {
    background-image: url('../img/bg-raw-rice.jpg');
    background-size: 180%;
    background-position: 0% 10%;
}

.bg-raw-rice-bowl {
    background-image: url('../img/bg-raw-rice-bowl.jpg');
    background-size: 110%;
    background-position: 0% 20%;
}

.bg-colored-rice {
    background-size: 180%;
    background-position: 50% 40%;
}

.bg-policy {
    background-image: url('https://rical.estudiolab.com.br/wp-content/uploads/2026/03/1-Ji-Parana.jpg');
    background-size: 110%;
    background-position: 0% 30%;
}

.bg-denuncias {
    background-image: url('../img/bg-denuncia.jpg');
    background-size: 140%;
}

.bg-contato {
    background-image: url('https://rical.estudiolab.com.br/wp-content/uploads/2026/03/IMAGEM-OFICIAL-DA-FACHADA-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-trabalhe {
    background-image: url('https://rical.estudiolab.com.br/wp-content/uploads/2026/03/Agrupar-1-scaled.webp');
    background-size: cover;
    background-position: 0% 20%;
}

.curtain {
    background-color: black;
    opacity: 0.5;
}

.bg-video {
    background-image: url('../img/bg-video-about.jpg');
    background-size: cover;
    background-position: 0% 50%;
}

.bg-video-receita {
    background-image: url('../img/white-rice-bowl.jpg');
    background-size: cover;
    background-position: 0% 50%;
}

.input-text {
    background-color: transparent;
    border-radius: 1.2rem;
    border: 2px solid #fff;
    padding: 0.5rem;
    display: block;
    font: 'font-barlow';
}

input[type=file] {
    display: block;
    font-style: oblique;
}

input[type=file]::file-selector-button {
    display: none;
}

.error {
    display: block;
    font-family: 'barlow';
    font-style: italic;
    color: #c61025;
    padding-bottom: 8px;
}

.mensagem-enviando {
    display: block;
    font-family: 'barlow';
    font-size: 1.5rem;
    margin-top: 8px;
    font-style: italic;
    color: #172B71;
    margin-top: 18px;
}

.mensagem-sucesso {
    display: block;
    font-family: 'barlow';
    font-size: 1.5rem;
    margin-top: 8px;
    font-style: italic;
    color: #17712f;
    margin-top: 18px;
}

.mensagem-erro {
    display: block;
    font-family: 'barlow';
    font-size: 1.5rem;
    margin-top: 8px;
    font-style: italic;
    color: #c61025;
    margin-top: 18px;
}

.input-submit {
    background-color: #c61025;
    border-radius: 1.2rem;
    padding: 0.5rem;
    display: block;
    font: 'barlow';
}

.content-produto p {
    font-family: 'barlow';
    letter-spacing: 0.08rem;
    margin-bottom: 2rem;
    color: #818080;
}

.content-noticia,
.content-receita {
    font-family: 'barlow';
    font-size: 1rem;
    letter-spacing: 0.08rem;
    color: #808080
}

.content-noticia p,
.content-receita p {
    margin-top: 16px;
}

.content-noticia h1,
.content-noticia h2,
.content-noticia h3,
.content-noticia h4,
.content-receita h1,
.content-receita h2,
.content-receita h3,
.content-receita h4 {
    text-transform: uppercase;
    color: #c61025;
    font-size: 1.3rem;
    margin-top: 30px;
}

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

    #about p {
        flex: 1;
    }

    .title-news {
        min-height: 6rem;
    }

    .content-noticia h1,
    .content-noticia h2,
    .content-noticia h3,
    .content-noticia h4,
    .content-receita h1,
    .content-receita h2,
    .content-receita h3,
    .content-receita h4 {
        color: #c61025;
        font-size: 1.5rem;
    }

    .bg-black-beans {
        background-size: 120%;
        background-position: -70% 40%;
    }

    .bg-contato {
        background-size: 103%;
        background-position: 0% 0%;
    }

    .bg-denuncias {
        background-size: 100%;
        background-position: 0% 0%;
    }

    .bg-trabalhe {
        background-size: cover;
        background-position: 0% 20%;
    }

    .bg-raw-rice {
        background-size: 110%;
        background-position: 0% 20%;
    }

    .bg-rice {
        background-image: url('../img/bg-rice.jpg');
        background-size: 110%;
        background-position: 0% 60%;
    }

    .bg-colored-rice {
        background-image: url('../img/bg-colored-rice.jpg');
        background-size: 120%;
        background-position: 50% 40%;
    }
}