:root {
    --creme: #E5DDD2;
    --cinza-claro: #AEA59C;
    --cinza: #67645F;
    --cinza-escuro: #504D44;
    --chumbo: #34332F;

    --filtro: rgba(80, 77, 68, 0.85);
    --sombra: rgba(229, 221, 210, 0.3);
}

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

.krona {font-family: 'Krona One', sans-serif;}
html, body, div, ul, li, a, p, h1, h2, h3, h4, h5, h6, input, label {font-family: 'Poppins', sans-serif;}

html, body {
    font-size: 16px;

    background-color: var(--chumbo);
}

main {
    max-width: 2048px;
    width: 100%;
    
    margin: 0 auto;

    position: relative;
}
div#loading {
    width: 100%;
    height: 100vh;

    position: fixed;
    z-index: 15;
    top: 0;
    left: 0;

    background-color: var(--chumbo);

    display: none;
    justify-content: center;
    align-items: center;

    transition: all 0.5s ease-in-out;

    animation: loading 7s;
}
@keyframes loading {
    0% {
        opacity: 1;
        display: flex;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
div#loading div.container-loading {
    display: flex;
    justify-content: center;
    align-items: baseline;

    transition: all 0.5s ease-in-out;

    animation: container-loading 7s;
}
@keyframes container-loading {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(.6);
    }
}
div#loading div.container-loading img#logo-loading {
    width: auto;
    height: 4.75rem;

    transition: all 0.5s ease-in-out;

    animation: logo-loading 3s;
}
@keyframes logo-loading {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
div#loading div.container-loading p#menvy-loading {
    font-size: 3.5rem;
    color: var(--creme);

    margin-left: 1rem;

    transition: all 0.5s ease-in-out;

    animation: menvy-loading 3s;

}
@keyframes menvy-loading {
    0% {
        opacity: 0;
        margin-left: -16rem;
    }
    50% {
        opacity: 0;
        margin-left: 1rem;
    }
    100% {
        opacity: 1;
    }
}
section {
    width: 100%;
    height: 100%;
    min-height: 100vh;

    position: relative;
    z-index: 11;
    padding: 0;
}
video {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
}
@keyframes pulse {
    0% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

div.filtro {
    background-color: var(--filtro);

    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    position: relative;
    z-index: 2;
}
section div.filtro img.logo-fixo {
    width: 2rem;
    height: auto;

    position: absolute;
    top: 2rem;
    left: 2rem;

    animation: pulse 3s infinite;

    transition: all 0.5s ease-in-out;

    opacity: 0;
}
div.filtro div#card {
    width: 60%;
    height: 60vh;

    border-radius: 2rem;
    
    background-color: var(--chumbo);

    transition: all 0.5s ease-in-out;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    box-shadow: 0px 0px 2rem 0px var(--sombra);
    -webkit-box-shadow: 0px 0px 2rem 0px var(--sombra);
    -moz-box-shadow: 0px 0px 2rem 0px var(--sombra);
}
div.filtro div#card:hover {
    background-color: var(--creme);
}
div.filtro div#card div#logo-card {
    animation: pulse 3s infinite;

    transition: all 0.4s ease-in-out;
}
div.filtro div#card div#logo-card img {
    width: 4.5rem;
    height: auto;

    transition: all 0.4s ease-in-out;
}
div.filtro div#card div#logo-card span {
    color: var(--creme);
    font-size: 2rem;
    
    margin: 0 0 0 .5rem;

    transition: all 0.4s ease-in-out;
}

div.filtro div#card div#conteudo-card {
    opacity: 0;
    
    display: none;
    flex-direction: column;
    gap: 2rem;
    
    transition: all 0.4s ease-in-out;
}
div.filtro div#card div#conteudo-card div.conteudo {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}
div.filtro div#card div#conteudo-card div.conteudo div.left {
    width: 40%;
}
div.filtro div#card div#conteudo-card div.conteudo div.left h2 {
    font-size: 1rem;
    color: var(--chumbo);
    text-align: left;
    
    margin: 0 0 1rem 0;
}
div.filtro div#card div#conteudo-card div.conteudo div.left ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;

    padding: 0;
    margin: 0;
}
div.filtro div#card div#conteudo-card div.conteudo div.left ul li {
    list-style: none;
    
    font-size: 1rem;
    font-weight: 300;
    color: var(--chumbo);
    text-align: left;
    
    padding: 0;
    margin: 0;
}
div.filtro div#card div#conteudo-card div.conteudo div.left ul li a {
    font-weight: 700;
    text-decoration: none;
    color: var(--chumbo);
    
    cursor: pointer;
    
    transition: all 0.2s ease-in-out;
}
div.filtro div#card div#conteudo-card div.conteudo div.left ul li a:hover {
    color: var(--cinza);
}
div.filtro div#card div#conteudo-card div.conteudo div.right {
    width: 40%;
}
div.filtro div#card div#conteudo-card div.conteudo div.right h3 {
    font-size: 1rem;
    color: var(--chumbo);
    text-align: left;
    
    margin: 0 0 1rem 0;
}
div.filtro div#card div#conteudo-card div.conteudo div.right p {
    font-size: 1rem;
    font-weight: 300;
    color: var(--chumbo);
    text-align: left;
    
    margin: 0;
}
div.filtro div#card div#conteudo-card p.slogan {
    max-width: 30rem;
    
    font-size: 1rem;
    font-weight: 900;
    color: var(--chumbo);
    text-align: center;
    
    margin: 0;

    position: absolute;
    bottom: 3rem;
    left: calc(50% - 15rem);
}


@media (max-width: 1024px) {
    div.filtro div#card {
        width: 80%;
        height: 80vh;
    }
    div.filtro div#card div#conteudo-card div.conteudo div.left {
        width: 50%;

        padding: 3rem;
    }
    div.filtro div#card div#conteudo-card div.conteudo div.right {
        width: 50%;

        padding: 3rem;
    }
}
@media (max-width: 992px) {
    html, body {font-size: 15px;}

    div.filtro div#card div#conteudo-card div.conteudo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }
    div.filtro div#card div#conteudo-card div.conteudo div.left {
        width: 80%;

        padding: 0rem 2rem 1rem 2rem;
    }
    div.filtro div#card div#conteudo-card div.conteudo div.right {
        width: 80%;

        padding: 0rem 2rem;
    }
}
@media (max-width: 576px) {
    html, body {font-size: 14px;}

    section div.filtro img.logo-fixo {
        opacity: 1;

        left: calc(50% - 1rem);
    }
    div.filtro {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }
    div.filtro div#card {
        width: 100%;
        height: 90vh;
    
        border-radius: 2rem 2rem 0 0;

        background-color: var(--creme);
    }
    div.filtro div#card div#logo-card {
        display: none;
    }
    div.filtro div#card div#conteudo-card {
        display: flex;
        
        opacity: 1;
    }
    div.filtro div#card div#conteudo-card div.conteudo div.left ul li {
        display: flex;
        flex-direction: column;
    }
    div.filtro div#card div#conteudo-card p.slogan {
        max-width: 16rem;
        
        font-size: 1rem;
        font-weight: 900;
        color: var(--chumbo);
        text-align: center;
        
        margin: 0;
    
        position: absolute;
        top: 10%;
        left: calc(50% - 8rem);
    }
}
@media (max-width: 320px) {
    div#loading div.container-loading img#logo-loading {
        width: auto;
        height: 4.5rem;
    }
    div#loading div.container-loading p#menvy-loading {
        font-size: 3rem;
        margin-left: .75rem;
    }
    section div.filtro img.logo-fixo {
        width: 1.5rem;

        top: 1.5rem;
        left: calc(50% - (1.5rem / 2));
    }
    div.filtro div#card div#conteudo-card div.conteudo div.left {
        width: 80%;

        padding: 0rem 1rem .5rem 1rem;
    }
    div.filtro div#card div#conteudo-card div.conteudo div.right {
        width: 80%;

        padding: 0rem 1rem;
    }
    div.filtro div#card div#conteudo-card p.slogan {
        display: none;
    }
}