/*
Theme Name: Masso
Author: Fase1 Design Gráfico e Arquitetura
Description: Tema da Masso Alimentos para WordPress com base em Bootstrap 4.
Version: 0.0.1
Tags: bootstrap, fase1
*/

html {
    font-size: 62.5%;
    position: relative;
    min-height: 100%;
}

body {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #212121;
    background-color: #f5f5f5;
    font-family: "Open Sans", sans-serif;
    margin-bottom: 2.6rem;
}
body.xs-noScroll {
    overflow: hidden;
}
body:not(.home) {
    padding-left: 4rem;
    padding-top: 4.8rem;
}
@media (min-width: 768px){
    body:not(.home) {
        padding-left: 0;
        padding-top: 10rem;
    }
    body.xs-noScroll {
        overflow: auto;
    }
}
@media (min-width: 922px){
    body:not(.home) {
        padding-left: 0;
        padding-top: 12rem;
    }
}

h1, h2, h3 {
    font-family: "Crete Round", "Trebuchet MS", Helvetica, sans-serif;
}

a,
a:visited {
    color: #212121;  
}
a:hover,
a:active, 
a:focus {
    color: #fcc917;
    text-decoration: none;
}

/* NAVBAR ---------------------------------------- */
nav.navbar {
    padding: 1rem 0 .5rem 0;
    font-family: "Crete Round", "Trebuchet MS", Helvetica, sans-serif;
    font-size: 1.8rem;
    color: #212121;
    text-align: center;
    justify-content: center;
    width: 6rem;
    right: auto;
    background-color: rgba(245,245,245,.9);
}
.navbar-brand {
    margin-left: 1rem;
    padding: 0;
    height: 4rem;
    width: 4rem;
    background-image: url(../../img/masso-simbolo.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top left;
}
.navbar-logo-dummy {
    display: none;
}

.navbar-toggler > .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='%23212121' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
    width: 3.5rem;
    height: 3.5rem;
}

div#navbar-container {
    text-align: left;
    position: fixed;
    top: 9.7rem;
    left: 0;
    background-color: rgba(245,245,245,.9);
    padding: 0 2.5rem 0 1rem;
}

#menu-masso .current-menu-item {
    text-decoration: underline;
}
#menu-masso .current-menu-item > .nav-link {
    text-decoration-color: #fcc917;
}

@media only screen
and (max-width: 767px)
and (orientation: landscape){
    nav.navbar {
        text-align: right;
    }
    img.navbar-logo {
        width: auto;
        max-height: 25vh;
    }
}
    
@media (min-width: 768px){
    
    nav.navbar {
        padding-top: 1.8rem;
        margin-left: 3.5rem;
        margin-right: 2rem;
        font-size: 1.6rem;
        display: flex;
        text-align: left;
        justify-content: space-between;
        width: auto;
        right: 0;
    }
    .navbar-brand {
        margin-left: 0;
        padding: .3125rem 0 .3125rem 0;
        height: auto;
        width: auto;
        background-image: url("../../img/masso-logo-preto.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    img.navbar-logo-dummy {
        display: block;
        visibility: hidden;
        width: 100%;
        max-width: 20rem;
    }
    div#navbar-container {
        text-align: right;
        position: relative;
        top: auto;
        left: auto;
        background-color: transparent;
        padding: 0;
    }
    .home div#navbar-container {
        margin-top: -5.8rem;
    }
    .home div#navbar-container {
        display: flex;
    }
    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media (min-width: 922px){
    
    nav.navbar {
        font-size: 2rem;
    }
    img.navbar-logo-dummy {
        max-width: 22rem;
    }
}


/* HOME ---------------------------------------- */
body.home {
    overflow: hidden;
    color: #fff;
    background-color: #212121;
}

.home a,
.home a:visited {
    color: #fff;  
}

/*home navbar*/
.home nav.navbar {
    padding-top: 0;
    margin-top: 1.8rem;
    margin-left: 3.5rem;
    margin-right: 2rem;
    display: flex;
    text-align: left;
    justify-content: space-between;
    width: auto;
    right: 0;
    background-color: transparent;
    color: #fff;
}
.home .navbar-brand {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    height: auto;
    width: auto;
    background-image: url("../../img/masso-logo-branco.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}
.navbar-logo-dummy {
    display: block;
    width: 100%;
    max-width: 30rem;
    visibility: hidden;
}
.home div#navbar-container,
.home .navbar-toggler {
    display: none;
}

section#home {
    height: 100vh;
    padding: 0;
}

.fill-transp {
    fill: none;
}

.fill-content {
    fill: #fff;
}

/* SLIDESHOW */
#home-slides {
    z-index: -999;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    max-height: 100vh;
}
#home-slides .slides{
    min-width: 100vw;
    min-height: 100vh; 
}
#home-slides .slides::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    min-width: 100vw;
    min-height: 100vh;  
    opacity: .4; 
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}
#slide1::before {
    background-image: url("../../img/home-abacaxi.jpg");
}
#slide2::before {
    background-image: url("../../img/home-peperonata.jpg");
}
#slide3::before {
    background-image: url("../../img/home-melanzanata.jpg");
}

.home-chamada-container {
    text-align: right;
    position: absolute;
}
span.home-chamada {
    color: #fcc917;
    font-family: "Open Sans", sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 3.5rem;
    font-size: 5.2vh;
    line-height: 1;
}

#slide1 .home-chamada-container {
    max-width: 60%;
    top: 65%;
    right: 40%;
    padding-left: 1rem;
    margin-top: -5.3rem;
    padding-left: 1rem;
}
#slide2 .home-chamada-container {
    text-align: left;
    max-width: 53%;
    left: 47%;
    bottom: 50%;
    padding-right: 1rem;
}
#slide3 .home-chamada-container {
    text-align: left;
    max-width: 40%;
    left: 60%;
    bottom: 40%;
    padding-right: 1rem;
}

@media only screen
and (max-width: 767px)
and (orientation: landscape){
    span.home-chamada {
        font-size: 3.5rem;
        font-size: 4vw;
    }
    .home .navbar-brand {
        margin-left: 0;
    }
    .navbar-logo-dummy {
        max-width: 20rem;
    }
}

@media (min-width: 768px){
    #home-slides .slides::before {
        opacity: 1;
    }
    span.home-chamada {
        font-size: 4.5rem;
        font-size: 5.2vh;
    }
    
    #slide1 .home-chamada-container {
        max-width: 53%;
        right: 47%;
        top: 67%;
    }
    
    #slide2 .home-chamada-container {
        text-align: left;
        max-width: 53%;
        left: 47%;
        bottom: 62%;
        padding-right: 1rem;
    }
    
    #slide3 .home-chamada-container {
        text-align: left;
        max-width: 43%;
        left: 57%;
        bottom: 55%;
        padding-right: 1rem;
    }
}

/* HOME NAV */
.home-nav-buttons-row {
    margin: 0;
    background-color: #212121;
    padding: 1rem 0 .5rem 0;
    border-top: 1px solid #fcc917;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.home-nav-buttons-col {
    text-align: center;
    border-left: 1px solid #fcc917;
    border-right: 1px solid #212121;
}
.home-nav-buttons-col:first-child {
    text-align: center;
    border-left: 1px solid #212121;
}

@media (min-width: 768px){
    div.home-nav-row {
        display: none;
    }
}




/* PRODUTOS ---------------------------------------- */
h1.titulo-pagina {
    font-size: 3rem;
}

#produtos p {
    font-size: 1.4rem;
}

.produtos-intro-row {
    transition: opacity .3s ease;
}
.produtos-row {
    justify-content: center;
    width: 100vw;
    margin-left: -7rem;
    transition: opacity .3s ease;
}
.produtos-col,
.produtos-col-copy {
    max-width: 100%;
    padding: 0;
    margin-top: 4rem;
    cursor: pointer;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    transition: all .6s ease;
}
.produtos-col:last-of-type {
    margin-bottom: 2rem;
}
img.desenho-produto,
img.desenho-produto-copy {
    display: inline-block;
    z-index: -10;
    width: 6.5rem;
    vertical-align: top;
}
img.desenho-produto-copy {
    position: absolute;
}
.produto-texto {
    display: inline-block;
    width: 75%;
}
.produto-texto-copy {
    display: inline-block;
}
h3.nome-produto,
h3.nome-produto-copy {
    font-size: 3.2rem;
    font-style: italic;
    line-height: .85;
    margin-bottom: 1rem;
}
h3.nome-produto-copy {
    margin-left: 7rem;
    margin-bottom: 1.5rem;
}
#produto-abacaxi h3 > br,
#detalhes-produto-abacaxi h3 > br {
    display: none;
}


/**/
.detalhes-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
    z-index: 18;
    overflow-y: scroll;
    opacity: 0;
    transition: opacity .3s ease;
    margin-bottom: 4.2rem;
}
.detalhes-container.aberto {
    display: block;
}
.detalhes-row {
    display: none;
}
.detalhes-row.selecionado {
    display: block;
}

.produtos-col-copy.animando {
    position: absolute;
    top: 30vh;
    left: 0;
    margin-top: 1rem;
}
.produtos-col-copy.ativo {
    margin-top: 1rem;
}

.produto-imagens {
    height: 30vh;
}
.produto-imagem {
    background-size: cover;
    background-position: bottom center;
}
.produto-imagem:last-child {
    display: none;
}
.detalhes-conteudo-container {
    margin-left: 5.5rem;
    opacity: 0;
    transition: all .3s ease;
    margin-bottom: 3rem;
}
.conteudo-dicas,
.conteudo-nutri {
    margin-top: 1rem;
}
.conteudo-dicas h4,
.conteudo-nutri h4 {
    font-family: "Crete Round", "Trebuchet MS", Helvetica, sans-serif;
    font-style: italic;
    font-size: 2rem;
    border-bottom: 2px solid #fcc917;
}
.conteudo-dicas h5 {
    font-size: 1.4rem;
    font-weight: bold;
}
ol.lista-dicas {
    font-size: 1.6rem;
    font-family: "Crete Round", "Trebuchet MS", Helvetica, sans-serif;
}
.lista-dicas > li > span {
    font-family: "Open Sans", sans-serif;
    font-size: 1.4rem;
}
span.ingredientes {
    font-family: "Crete Round", "Trebuchet MS", Helvetica, sans-serif;
    font-size: 1.5rem;
}
table.tabela-nutricional {
    font-size: 1.3rem;
    margin-top: 2rem;
}
.tabela-nutricional thead {
    background-color: #fcc917;
    border: 1px solid #fcc917;
}
.tabela-nutricional th {
    padding: 0 .5rem;
    font-weight: normal;
}
.tabela-nutricional th.titulo-tabela {
    font-size: 1.4rem;
    font-weight: bold;
}
.tabela-nutricional thead tr:first-of-type th {
    padding-top: .2rem;
}
.tabela-nutricional thead tr:last-of-type th {
    padding-bottom: .2rem;
}
.tabela-nutricional td {
    border: 1px solid #fcc917;
}
.tabela-nutricional tbody tr:not(:first-of-type):not(:last-of-type) td:first-of-type {
    border-right: none;
}
.tabela-nutricional tbody tr:not(:first-of-type) td:nth-of-type(2) {
    border-left: none;
    text-align: right;
}
.tabela-nutricional tbody tr:not(:last-of-type) td:last-of-type {
    text-align: center;
}
.tabela-nutricional tbody tr:last-of-type td {
    padding: .5rem 1px;
    font-size: 1.2rem;
}
.tabela-nutricional .gordura td:first-of-type {
    padding-left: 1rem;
}
.tabela-nutricional tfoot td {
    border: none;
}
.tabela-nutricional tfoot {
    font-size: 1.1rem;
}

.fechar-row {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
}
.fechar-row.aberto {
    display: block;
}
button.fechar {
    transition: all .3s ease;
    width: 100%;
    border: none;
    padding: 1rem;
    background-color: #212121;
    color: #f5f5f5;
    font-family: "Crete Round", "Trebuchet MS", Helvetica, sans-serif;
    font-size: 1.6rem;
    cursor: pointer;
}
button.fechar:active,
button.fechar:hover {
    background-color: #fcc917;
    color: #212121;
}

#detalhes-produto-abacaxi .produto-imagens > .produto-imagem {
    background-image: url("../../img/slides/abacaxi-2.jpg");
}
#detalhes-produto-abacaxi .produto-imagens > .produto-imagem:first-child {
    background-image: url("../../img/slides/abacaxi-1.jpg");
}
#detalhes-produto-abacaxi .produto-imagens > .produto-imagem:last-child {
    background-image: url("../../img/slides/abacaxi-3.jpg");
}
#detalhes-produto-peperonata .produto-imagens > .produto-imagem {
    background-image: url("../../img/slides/peperonata-2.jpg");
}
#detalhes-produto-peperonata .produto-imagens > .produto-imagem:first-child {
    background-image: url("../../img/slides/peperonata-1.jpg");
}
#detalhes-produto-peperonata .produto-imagens > .produto-imagem:last-child {
    background-image: url("../../img/slides/peperonata-3.jpg");
}
#detalhes-produto-melanzanata .produto-imagens > .produto-imagem {
    background-image: url("../../img/slides/melanzanata-2.jpg");
}
#detalhes-produto-melanzanata .produto-imagens > .produto-imagem:first-child {
    background-image: url("../../img/slides/melanzanata-1.jpg");
}
#detalhes-produto-melanzanata .produto-imagens > .produto-imagem:last-child {
    background-image: url("../../img/slides/melanzanata-3.jpg");
}
#detalhes-produto-cipollata .produto-imagens > .produto-imagem {
    background-image: url("../../img/slides/cipollata-2.jpg");
}
#detalhes-produto-cipollata .produto-imagens > .produto-imagem:first-child {
    background-image: url("../../img/slides/cipollata-1.jpg");
}
#detalhes-produto-cipollata .produto-imagens > .produto-imagem:last-child {
    background-image: url("../../img/slides/cipollata-3.jpg");
}

@media (min-width: 576px){
    .produto-imagem:last-child {
        display: block;
    }
    table.tabela-nutricional {
        max-width: 30rem;
    }
}

@media (min-width: 768px){
    h1.titulo-pagina {
        font-size: 5rem;
    }
    .produtos-intro-row.opacity0 {
        opacity: 1;
    }
    .produtos-intro-col {
        text-align: center;
    }
    .produtos-col {
        max-width: 30%;
        min-width: 33.8rem;
        margin-bottom: 5rem;
        min-height: 15rem;
    }
    .produtos-col:nth-child(odd) {
        margin-right: 6%;
    }
    .produtos-col:last-of-type {
        margin-bottom: 5rem;
    }
    
    .produtos-row {
        margin-top: 8rem;
        width: auto;
        margin-left: -1.5rem;
    }
    .produtos-row.opacity0 {
        display: none;
    }
    .produto-texto,
    .produto-texto-copy {
        display: block;
        width: auto;
    }
    h3.nome-produto,
    h3.nome-produto-copy {
        font-size: 4.3rem;
        text-indent: -3.2rem;
    }
    img.desenho-produto {
        display: block;
        position: absolute;
        bottom: 0;
        width: auto;
    }
    #produto-abacaxi .produto-texto,
    #detalhes-produto-abacaxi .produto-texto{
        margin-left: 15rem;
    }
    #produto-abacaxi .desc-produto {
        margin-left: 1.5rem;
    }
    #produto-abacaxi h3 > br {
        display: block;
    }
    #produto-peperonata .produto-texto,
    #detalhes-produto-peperonata .produto-texto {
        margin-top: -4rem;
        margin-left: 14rem;
    }
    
    #produto-peperonata .desc-produto {
        margin-left: 8rem;
    }
    #produto-peperonata .desc-produto:first-of-type {
        margin-left: 4rem;
    }
    
    #produto-melanzanata .produto-texto,
    #detalhes-produto-melanzanata .produto-texto {
        margin-left: 15.5rem
    }
    #produto-melanzanata .nome-produto,
    #detalhes-produto-melanzanata .nome-produto {
        text-indent: -2.5rem;
    }
    
    #produto-cipollata .produto-texto,
    #detalhes-produto-cipollata .produto-texto {
        margin-top: -3rem;
        margin-left: 11rem;
    }
    #produto-cipollata .desc-produto {
        margin-left: 3rem;
    }
    #produto-cipollata .desc-produto.ultimo {
        margin-left: 4rem;
    }
    
    /**/
    .main-container {
        padding-right: 3.5rem;
        padding-left: 3.5rem;
    }
    .detalhes-container {
        display: none;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        background-color: #fff;
        z-index: 18;
        max-width: 1170px;
        border-radius: 1rem;
        margin: auto;
        margin-top: -5rem;
        margin-bottom: 4rem;
        overflow: hidden;
    }
    .detalhes-conteudo-container {
        margin-right: 5.5rem;
    }
    h3.nome-produto-copy {
        text-indent: 0;
        margin-left: 0;
    }
    .conteudo-intro {
        margin-right: 25rem;
    }
    img.desenho-produto-copy {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        height: auto;
        width: auto;
        background-color: #fff;
        z-index: 10;
    }
    .produtos-col-copy {
        transition: none;
        max-width: 100%;
        margin-left: 7rem;
        margin-right: 7rem;
        margin-bottom: 2rem;
        cursor: default;
    }
    .produtos-col-copy.ativo {
        left: 0px;
    }
    .produtos-col-copy.ativo .nome-produto {
        display: none;
    }
    .produtos-col.inativo {
        display: none;
    }
    .produto-imagens {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        height: 30rem;
    }
    .fechar-row {
        position: relative;
        max-width: 1170px;
        margin: auto;
        margin-top: 3rem;
        text-align: right;
    }
    button.fechar {
        background-color: #f5f5f5;
        color: #212121;
        padding: 0;
        padding-right: .15rem;
        width: 5rem;
        height: 5rem;
        margin-bottom: -5rem;
        margin-right: -6.5rem;
        overflow: hidden;
    }
    button.fechar:after {
        content: "\d7";
        font-size: 6rem;
        font-family: "Open Sans", sans-serif;
        font-weight: 300;
        font-style: italic;
        line-height: .75;
    }
    button.fechar:active,
    button.fechar:hover {
        background-color: #f5f5f5;
        color: #fcc917;
    }
    button.fechar span {
        display: none;
    }
}



/* FOOTER ---------------------------------------- */
footer#colophon {
    opacity: .8;
    font-family: "Open Sans", sans-serif;
    font-size: 1.1rem;
    margin-left: -4.5rem;
    height: 2.6rem;
    position: absolute;
    bottom: 0;
    width: 100%;
}
footer#colophon .row {
    justify-content: center;
}
footer#colophon .row .col-auto {
    margin-bottom: 1rem;
    padding: 0;
}
.home footer#colophon {
    display: none;
}
span#footer-note {
    margin-left: 1rem;
}
.fase1-link-col {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
a#fase1-link {
    margin-right: 1rem;
}
img#fase1-rodape {
    max-width: 5rem;
}
.home img#fase1-rodape {
    filter: invert(1);
    -webkit-filter: invert(1);
}

@media (min-width: 576px){
    .fase1-link-col {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (min-width: 768px){
    footer#colophon {
        display: block;
        margin-left: 0;
        text-align: left;
    }
    .home footer#colophon {
        position: relative;
        height: 3rem;
        margin-top: -3rem;
        display: block;
    }
    footer#colophon .row {
        justify-content: initial;
    }
    a#fase1-link {
        margin-right: 1rem;
    }
}

/* CONSTANTS ---------------------------------------- */
.opacity0 {
    opacity: 0;
}
.opacity1 {
    opacity: 1;
}