* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: inherit;
}

html {
    height: 100%;
    overflow-y: scroll;
}

body {
    scroll-behavior: smooth;
    margin: 0;
    font-family: "Source Code Pro", monospace;
    font-size: 16px;
}

footer {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 4%;
}

footer > * {
    margin-right: 1.5rem;
}

footer .contato-social .fab {
    font-size: 1.5rem;
    width: auto;
}

i:hover {
    cursor: pointer;
}

input,
input:required,
input:invalid {
    outline: none;
}

main {
    margin-bottom: 10rem;
}

nav {
    height: 10vh;
    margin: 1rem 0;
}

nav .logo-feira {
    max-width: 175px;
}

nav.nav-historias {
    position: absolute;
    top: 0;
    width: 100%;
}

section {
    margin: 5% 5% 0 5%;
}

section.ultima-ed,
section.historias-edicao {
    margin: 5% 0 0 0;
}

ul li {
    list-style: none;
}

.agenda {
    min-height: 50vh;
}

.agenda-eventos {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.agenda-card {
    width: 48%;
    height: auto;
    margin: 2% 0 0 0;
}

.agenda-card-thumb {
    background-size: cover;
    width: auto;
    height: 375px;
}

.agenda-card-titulo {
    font-family: "Barlow Semi Condensed", serif;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 1.5%;
}

.agenda-titulo,
.section-tag,
.contato-tag,
.edicoes-tag,
.eventos-tag,
.historias-titulo,
.historias-cards-items-titulo,
.loja-tag,
.pdvs-tag,
.produto-preco,
.sessao-tag,
.ultima-ed-tag,
.ultima-ed-titulo-titulo,
.sobre-equipe-tag {
    font-family: "Barlow Semi Condensed", serif;
    font-weight: bold;
    text-transform: uppercase;
}

.agenda-titulo,
.section-tag,
.contato-tag,
.edicoes-tag,
.eventos-tag,
.historias-titulo,
.loja-tag,
.pdvs-tag,
.sessao-tag,
.ultima-ed-tag,
.sobre-equipe-tag {
    font-size: 1.75rem;
    padding-bottom: 1.5%;
    border-bottom: 1px solid black;
}

.area-login #login-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.area-login #login-form input {
    margin: 1rem 0;
}

.area-login #login-form span {
    font-weight: 500;
    margin-top: 3%;
}

.area-login a {
    text-decoration: underline;
}

.area-login .container-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.botao {
    font-family: "Barlow Semi Condensed", serif;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 2px;
    transition: all 0.3s ease;
    background-color: transparent;
}

.botao:hover {
    cursor: pointer;
}

.botao-assine,
.botao-compre,
.produto-preco {
    font-size: 1.25rem;
}

.botao-borda-branca {
    border: 1px solid white;
}

.botao-borda-branca:hover {
    background-color: white;
    color: black;
}

.botao-borda-preta {
    border: 1px solid black;
}

.botao-borda-preta:hover {
    background-color: black;
    color: white;
}

.carrossel-edicao,
.carrossel-index {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 80vh;
    margin: 1% 5% 5% 5%;
    background-position: center;
    background-size: cover;
}

.carrossel-edicao {
    justify-content: center;
    text-align: center;
}

.carrossel-index {
    background-image: url("../img/carrossel-1.jpg");
}

.carrossel-edicao div,
.carrossel-index div {
    width: 30%;
    margin: 5%;
    font-family: "Barlow Semi Condensed", serif;
    color: white;
    font-size: 2.5rem;
    font-weight: bolder;
    line-height: 98%;
    text-transform: uppercase;
}

.carrossel-edicao div {
    font-size: 8rem;
}


.container {
    height: 100%;
    margin: 0 5% 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contato {
    min-height: 45vh;
}

.contato-call {
    font-family: "Source Code Pro", monospace;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;

}

.contato-corpo > div {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 2%;
}

.contato-social {
    margin-top: 0.75rem;
}

.contato-social .fab {
    padding: 10px;
    width: 2.45rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid black;
    border-radius: 50%;
}

.contato-social-bw .fab {
    background: black;
    color: white;
}

.section-tag,
.contato-tag,
.edicoes-tag,
.eventos-tag,
.loja-tag,
.pdvs-tag,
.sessao-tag {
    margin-bottom: 5%;
}

.contato-texto {
    font-weight: 500;
}

.equipe {
    min-height: 75vh;
}

.edicao-carta-corpo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 2%;
    text-align: justify;
    font-weight: 500;
}

.edicao-carta-creditos {
    width: 100%;
    margin-top: 2%;
    font-weight: 500;
    font-style: italic;
    text-align: right;
}

.edicao-colaboradores-grupo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 80px 3%;
}

.edicao-colaborador {
    display: flex;
    flex-direction: column;
}

.edicoes-frame,
.edicoes-header {
    display: flex;
    justify-content: start;
    width: 100%;
}

.edicoes-frame {
    margin-bottom: 5rem;
}

.edicoes-frame > * {
    margin: 0 2% 2% 0;
}

.edicoes-frame-historias-set {
    display: flex;
    justify-content: space-between;
    align-content: start;
    flex-wrap: wrap;
}

.edicoes-frame-historias-historia {
    width: 47%;
    margin-bottom: 2%;
}

.edicoes-header {
    align-items: baseline;
    margin-bottom: 4%;
}

.edicoes-header > * {
    margin-right: 2%;
}

.edicoes-header-title,
.edicoes-header-section-first,
.edicoes-header-section,
.edicoes-titulo {
    font-family: "Barlow Semi Condensed", serif;
    font-weight: 700;
    text-transform: uppercase;
}

.edicoes-header-section-first {
    width: 25vw;
    font-size: 1.5rem;
}

.edicoes-header-section {
    width: 25vw;
    font-size: 1.25rem;
}

.edicoes-header-section-first,
.edicoes-header-title {
    padding-bottom: 10px;
    border-bottom: 1px solid black;
}

.edicoes-header-title {
    width: 60vw;
    font-size: 1.25rem;
}

.edicoes-pilula {
    margin: 0;
    font-style: italic;
    font-weight: 500;
}

.edicoes-titulo {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.edicao-index-thumb {
    max-width: 25vw;
}

.eventos-container,
.loja-container {
    width: 100%;
    min-height: 65vh;
    margin: 2rem 0;
    display: flex;
}

.evento-info,
.produto-info {
    width: 50%;
    padding: 2rem;
    background-color: #e5e2d3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.evento-info span.evento-data,
.evento-info span.evento-titulo,
.pdv-info span.pdv-nome,
.produto-info span.produto-nome {
    width: 50%;
    font-family: "Barlow Semi Condensed", serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.evento-info span.evento-data {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.evento-info .evento-inscricao,
.produto-info .produto-detalhes {
    margin-top: 1.5rem;
}

.evento-info .evento-inscricao .evento-local {
    font-weight: 700;
}

.evento-info span.evento-titulo,
.produto-info span.produto-nome {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.evento-info span.evento-descricao,
.produto-info span.produto-descricao {
    width: 55%;
    font-weight: 500;
    font-style: italic;
}

.evento-thumb,
.produto-thumb {
    width: 50%;
    background-size: cover;
    background-position: center;
}

.evento-redes {
    margin-top: 2rem;
}

.hero-historias {
    height: 100vh;
    background-position: center;
    background-size: cover;
}

.historias-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 2%;
}

.historias-cards-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    /*grid-template-areas:*/
    /*    "thumb1 thumb1 thumb2 thumb3"*/
    /*    "thumb4 thumb4 thumb5 thumb5"*/
    /*    "thumb6 thumb7 thumb7 thumb8";*/
    gap: 2%;
    margin-bottom: 50%;
}

.historias-cards-items.item:nth-child(8n - 1),
.historias-cards-items.item:nth-child(8n - 3),
.historias-cards-items.item:nth-child(8n - 4),
.historias-cards-items.item:nth-child(8n - 7) {
  grid-column: auto /span 2;
  grid-row: auto /span 1;
}

.historias-edicao {
    padding: 5% 5% 0;
    background-color: #e5e2d3;
}

.historia-busca,
.historia-busca-resultados,
.historia-tag {
    font-family: "Barlow Semi Condensed", serif;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.historias-busca,
.historias-tag {
    text-align: center;
    font-size: 1.5rem;
    padding-bottom: 2%;
    border-bottom: 1px solid black;
}

.historia-busca-resultados {
    font-weight: normal;
}

.historia-tag {
    padding: 0.5rem 1rem;
    border-radius: 2px;
    border: 1px solid black;
    margin-bottom: 2%;
}

.historias-cards-items > div {
    margin-bottom: 0.5rem;
}

.historias-cards-items-descritivo {
    font-style: italic;
    font-weight: 500;
    font-size: 0.9rem;
    width: 85%;
}

.historias-cards-items-foto img {
    max-width: 100%;
}

.historias-cards-items-tags span {
    display: inline-block;
    font-family: "Barlow Semi Condensed", serif;
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.35rem 0.5rem;
    margin-top: 0.35rem;
    border: 1px solid black;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.historias-cards-items-tags span:hover {
    color: white;
    background: black;
    cursor: pointer;
}

.historias-cards-items-titulo {
    font-size: 1.1rem;
}

.card-1 {
    grid-area: thumb1;
}

.card-2 {
    grid-area: thumb2;
}

.card-3 {
    grid-area: thumb3;
}

.card-4 {
    grid-area: thumb4;
}

.card-5 {
    grid-area: thumb5;
}

.card-6 {
    grid-area: thumb6;
}

.card-7 {
    grid-area: thumb7;
}

.card-8 {
    grid-area: thumb8;
}

.historias-carregar-mais {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30vh;
}

.historias-busca,
.historias-tag,
.historias-titulo {
    margin-bottom: 70px;
}

.historia_detalhe-corpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.05px;
    width: 90vw;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.historia_detalhe-corpo p {
    width: 43vw;
    margin: 10px 0;
}

.historia_detalhe-corpo div {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.historia_detalhe-corpo div img {
    max-width: 90vw;
    margin: 5% 0;
}

.historia_detalhe-corpo div img.historia_vertical {
    width: 44vw !important;
    height: auto !important;
}

.historia_detalhe-corpo div img.historia_horizontal {
    width: 90vw !important;
    height: auto !important;
}

.historia_detalhe-creditos {
    font-family: "Barlow Semi Condensed", serif;
    font-size: 1.15rem;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.25;
    width: 23vw;
    padding-right: 20px;
}

.historia_detalhe-citacao {
    font-family: "Barlow Semi Condensed", serif;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 10% 0;
    width: 70%;
    text-align: left;
}

.historia_detalhe-texto {
    margin: 3% 5% 0 5%;
}

.historia_detalhe-header {
    display: flex;
}

.historia_detalhe-titulo {
    font-family: "Barlow Semi Condensed", serif;
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 3rem;
    width: 43vw;
    margin-left: 5px;
}

.historia_detalhe-social {
    margin: 3% 5% 0 5%;
}

.historias-relacionadas {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10rem;
}

.historias-relacionadas div {
    width: 21vw;
}

.historia-relacionada-thumb {
    min-height: 250px;
    background-size: cover;
    background-position: center;
}

.historiarelacionada-titulo {
    font-family: "Barlow Semi Condensed", serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 5% 0 2% 0;
}

.historiarelacionada-pilula {
    font-weight: 500;
    font-style: italic;
}

.menu-basico ul {
    display: flex;
    flex-direction: row;
}

.menu-basico ul li {
    margin-left: 1.5rem;
}

.menu-busca {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #e5e2d3;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    transform: translate3d(0, -100%, 0);
    transition: transform .8s cubic-bezier(0, .52, 0, 1);
}

.menu-busca form {
    display: flex;
}

.menu-busca input[type=text],
.menu-login input[type=email],
.menu-login input[type=password],
.area-login #login-form input[type=text],
.area-login #login-form input[type=email],
.area-login #login-form input[type=password] {
    width: 40vw;
    height: 45px;
    border: 0;
    border-bottom: 1px solid black;
    margin-right: 1rem;
    padding: 0 0 10px 5px;
    font-family: "Barlow Semi Condensed", serif;
    /*font-weight: 700;*/
    font-size: 2rem;
    color: dimgray;
    background: #e5e2d3;
}

.menu-busca .fecha-menu {
    font-size: 3rem;
    position: fixed;
    top: 45;
    right: 105;
}

.menu-login .section-tag {
    width: 90%;
}

.menu-lateral {
    display: flex;
    flex-direction: column;
    width: 27%;
    height: 100vh;
    background: black;
    color: white;
    text-transform: uppercase;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;
    transform: translate3d(100%, 0, 0);
    transition: transform .8s cubic-bezier(0, .52, 0, 1);
}

.menu-aberto {
    transform: translate3d(0, 0, 0);
}

.menu-lateral ul {
    font-family: "Barlow Semi Condensed", serif;
    font-weight: bold;
}

.menu-lateral ul li a {
    color: white;
}

.menu-lateral .menu-lateral-itens-principais {
    margin-top: 40px;
    height: 45%;
    font-size: 2rem;
}

.menu-lateral .menu-lateral-itens-principais li {
    margin: 0.2rem 0 0.2rem 0;
}

/*.menu-lateral .menu-lateral-site-languages {*/
/*    height: 20%;*/
/*}*/

.menu-lateral .menu-lateral-site-languages,
.menu-lateral .menu-lateral-outros-itens {
    font-size: 1.25rem;
}

/*.menu-lateral .menu-lateral-outros-itens .redes-sociais * {*/
/*    margin: 1.75rem 1rem 0 0;*/
/*}*/

.nesta-edicao {
    display: flex;
    flex-direction: column;
    background-color: #e5e2d3;
    padding: 5% 5% 0 5%;
}

.nova-conta {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nova-conta form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.nova-conta input[type=text],
.nova-conta input[type=email],
.nova-conta input[type=password] {
    margin-top: 1rem;
    width: 40vw;
    height: 45px;
    border: 0;
    border-bottom: 1px solid black;
    padding: 0 0 10px 5px;
    font-family: "Barlow Semi Condensed", serif;
    /*font-weight: 700;*/
    font-size: 2rem;
    color: dimgray;
    background: #e5e2d3;
}

.nova-conta input[type=submit] {
    margin-top: 2rem;
}

.pdvs {
    height: 60vh;
}

.pdv-nome {
    font-size: 1.2rem;
}

.pdvs-corpo {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    font-weight: 500;
    line-height: 1.5rem;
}

.pdv-dados {
    display: flex;
    flex-direction: column;
}

.pdv-info {
    margin-bottom: 2rem;
}

.produto-compra {
    margin-top: 4rem
}

.produto-compra .produto-preco {
    margin-right: 2rem;
}

.produto-info span.produto-detalhes {
    font-weight: 500;
}

.sobre {
    min-height: 20vh;
}

.sobre-equipe-pessoas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 3%;
}

.sobre-equipe-membro {
    display: flex;
    flex-direction: column;
    max-width: 25%;
    min-width: 300px;
    padding-right: 4%;
    margin-bottom: 10%;
}

.sobre-equipe-membro > .membro-avatar,
.edicao-colaborador-foto {
    max-width: 200px;
    border-radius: 50%;
    margin-bottom: 10%;
}

.sobre-equipe-membro > .membro-bio,
.edicao-colaborador-bio {
    font-weight: 500;
}

.sobre-equipe-membro > .membro-fullname,
.edicao-colaborador-nome {
    font-family: "Source Code Pro", monospace;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1.25px;
}

.sobre-texto {
    font-family: "Source Code Pro", monospace;
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
    max-width: 67vw;
}

.ultima-ed {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 5%;
    background-color: #e5e2d3;
}

.ultima-ed > div {
    min-height: 70vh;
    width: 50%;
}

.ultima-ed-capa {
    text-align: center;
}

.ultima-ed-capa img {
    width: 100%;
    max-width: 520px;
}

.ultima-ed-dados {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 2%;
}

.ultima-ed-titulo {
    margin-bottom: 5%;
}

.ultima-ed-titulo-numero,
.ultima-ed-titulo-titulo {
    font-family: "Barlow Semi Condensed", serif;
    font-size: 7rem;
    text-transform: uppercase;
}

.ultima-ed-titulo-numero {
    font-weight: 500;
}

.ultima-ed-titulo-titulo {
    font-weight: 700;
}

.ultima-ed-descritivo {
    width: 65%;
}

.ultima-ed-resumo {
    font-weight: 500;
}

/* Media Queries */

@media only screen and (max-width: 1440px) {
    .menu-lateral {
        width: 35%;
    }
}


@media only screen and (max-width: 1280px) {
    .carrossel-edicao div,
    .carrossel-index div {
        width: 40%;
    }
}


@media only screen and (max-width: 768px) {
    footer {
        height: auto;
        flex-wrap: wrap;
    }

    footer > * {
        margin-bottom: 1rem;
    }

    footer .botao {
        order: -1;
    }

    footer span:not(span.botao) {
        width: 100%;
        text-align: center;
        margin-top: 0;
    }

    main {
        margin-bottom: 5rem;
    }

    .carrossel-edicao div,
    .carrossel-index div {
        width: 70%;
    }

    .edicao-carta-corpo {
        grid-template-columns: 1fr;
    }

    .edicao-carta-creditos {
        margin-top: 4rem;
    }

    .edicao-colaboradores-grupo {
        grid-template-columns: repeat(2, 1fr);
    }

    .historias-cards {
        display: flex;
        flex-direction: column;
    }

    .historias-cards-items {
        margin-bottom: 5%;
    }

    .historia_detalhe-header {
        flex-direction: column;
    }

    .historia_detalhe-corpo p {
        width: 80vw;
    }

    .historia_detalhe-creditos,
    .historia_detalhe-titulo {
        width: auto;
        padding: 0 5vw;
        margin-left: 0;
    }

    .historia_detalhe-titulo {
        margin-bottom: 1rem;
        order: -1;
    }

    .historia_detalhe-social {
        margin: 5% 10% 0 10%;
    }

    .menu-lateral {
        width: 65%;
    }

    .ultima-ed {
        flex-direction: column;
    }

    .ultima-ed > div {
        min-height: auto;
        width: 100%;
    }

    .ultima-ed-dados {
        margin-top: 40px;
    }

    .ultima-ed-descritivo {
        width: 100%;
    }

    .ultima-ed-resumo {
        margin-bottom: 5%;
    }

    .ultima-ed-titulo {
        margin-bottom: 0;
    }

    .ultima-ed-tag {
        margin-bottom: 5%;
    }

    .ultima-ed-titulo-numero,
    .ultima-ed-titulo-titulo {
        font-size: 4rem;
    }

}

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

    nav .logo-feira {
        max-width: 125px;
    }

    .carrossel-edicao div,
    .carrossel-index div {
        width: 100%;
    }

    .carrossel-edicao div {
        font-size: 5rem;
    }

    .edicao-colaboradores-grupo {
        grid-template-columns: 1fr;
    }

    .historia_detalhe-titulo {
        font-size: 5em;
        line-height: 0.85;
    }

    .historias-relacionadas {
        flex-direction: column;
    }

    .historias-relacionadas div {
        width: auto;
        margin-bottom: 1rem;
    }

    .menu-basico {
        font-size: 0.85rem;
    }

    .menu-busca .fecha-menu {
        font-size: 2rem;
        right: 45;
    }

    .menu-busca form {
        display: flex;
        flex-direction: column;
    }

    .menu-busca input[type="text"] {
        width: 65vw;
        font-size: 1.75rem;
        margin-right: 0;
    }

    .menu-busca input.botao {
        margin-top: 1rem;
    }

    .menu-lateral {
        width: 100%;
    }
}