:root {
    --corNivel1: #2B1B14;
    --corNivel2: #5A3B2E;
    --corNivel3: #8B6A55;
    --corNivel4: #C9B19C;
    --corNivel5: #F3E7D6;
}

* {
    font-family: 'Averta', sans-serif;
	padding: 0; margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {scroll-behavior: smooth;}

body {font-size: 18px;}

p {line-height: 0.9cm; margin-bottom: 12px;}

a {text-decoration: none; color: var(--corNivel1);}

small {text-align: center; color: white; margin: auto;}

h1 {text-align: center; color: var(--corNivel1);}

button {
    background-color: var(--corNivel1); padding: 10px 15px; border-radius: 8px; color: white; font-size: 18px; border: 0px; cursor: pointer;
}
button:hover {background-color: var(--corNivel2);}

input, textarea {
    border: 1px solid var(--corNivel1); border-radius: 8px; padding: 10px 15px; font-size: 18px; width: 100%;
}



.conteudoDentroDiv {
    width: 75%; margin: auto; 
}

.barraSuperior {
    color: white; padding: 15px 0px; background-color: var(--corNivel1); width: 100%; position: sticky; top: 0; z-index: 999999;
}

.divsUltimasRezenhas {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;

    border-radius: 8px;
    font-size: 16px;
}
.divsUltimasRezenhas > a > div {
    border: 1px solid var(--corNivel4); border-radius: 8px; cursor: pointer;
}
.divsUltimasRezenhas > a > div:hover {
    background-color: var(--corNivel4);
}
.divsUltimasRezenhas .divImg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 230px;
    border-radius: 8px;
}
.divsUltimasRezenhas .pequenoTexto, .divsUltimasRezenhas .divDataPub {
    opacity: 0.6; font-size: 14px;
}

.barraCorNivel1 {background-color: var(--corNivel1);}
.barraCorNivel2 {background-color: var(--corNivel2);}
.barraCorNivel3 {background-color: var(--corNivel3);}
.barraCorNivel4 {background-color: var(--corNivel4);}
.barraCorNivel5 {background-color: var(--corNivel5);}


.corBranco {color: white;}

.textoCentro {text-align: center;}

#divIconeMenu {cursor: pointer; display: none;}
#divMenu nav {margin: auto;}
#divMenu nav ul {
    display: flex; justify-content: center; gap: 5px; align-items: center;
}
#divMenu nav ul li {
    color: white; padding: 10px; cursor: pointer; margin: auto; list-style: none;
}
#divMenu nav ul li:hover {
    background-color: var(--corNivel5); color: var(--corNivel1);
}
#divMenu nav ul li:hover img {
    filter: invert(0%) sepia(4%) saturate(20%) hue-rotate(334deg) brightness(104%) contrast(100%);
}


.barraBanner {height: 400px; background-color: var(--corNivel2);}

.padding5 {padding: 5px;}
.padding10 {padding: 10px;}
.padding15 {padding: 15px;}


.displayFlex {display: flex;}
.displayFlexCentro {align-items: center;}
.displayFlexJustCentro {justify-content: center;}
.displayFlexSpaceBetween {justify-content: space-between;}
.displayFlexSpaceAround {justify-content: space-around;}
.flexGrow1 {flex-grow: 1;}
.gap5 {gap: 5px;}
.gap10 {gap: 10px;}



.svg20 { height: 20px; width: 20px; text-align: center; vertical-align: top; }
.svg25 { height: 25px; width: 25px; text-align: center; vertical-align: top; }
.svg30 { height: 30px; width: 30px; text-align: center; vertical-align: top; }
.svg50 { height: 50px; width: 50px; text-align: center; vertical-align: top; }
.svg100 { height: 100px; width: 100px; text-align: center; vertical-align: top; }
.svgBranco { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
.svgPreto { filter: invert(0%) sepia(4%) saturate(20%) hue-rotate(334deg) brightness(104%) contrast(100%); }




.textoDuasColunas {
    column-count: 2;
    column-gap: 50px;
    text-align: justify;
    
    column-rule: 1px solid #ccc; 
}



/* Extra extra large (telas enormes) */
@media (min-width: 1201px) {
    
}

/* Extra large (desktops grandes) */
@media (max-width: 1200px) {
    .divsUltimasRezenhas .divImg {
        height: 200px;
    }
    .barraBanner {height: 350px;}
}

/* Large (laptops) */
@media (max-width: 992px) {
    .divsUltimasRezenhas .divImg {
        height: 150px;
    }
    .conteudoDentroDiv {
        width: 85%;
    }
    .barraBanner {height: 300px;}
}

/* Medium (tablets) */
@media (max-width: 768px) {
    .textoDuasColunas {
        column-count: 1;
    }
    .divsUltimasRezenhas {
        display: block;
    }
    .divsUltimasRezenhas > a > div {
        margin-bottom: 20px;
    }
    .divsUltimasRezenhas .divImg {
        height: 300px;
    }
    .conteudoDentroDiv {
        width: 92%;
    }
    .barraBanner {height: 230px;}
}

/* Small (landscape phones) */
@media (max-width: 576px) {
    .divsUltimasRezenhas .divImg {
        height: 200px;
    }
    .barraBanner {height: 190px;}
}