:root {
    --primario: #FFC44E;
    --secundario: #134256;
    --terciario: #EC701E;
    --unnamed-color-ffffff: #FFFFFF;
}





/* BODY */

body {
    font-family: 'Poppins', sans-serif;
}

body h1 {
    font-size: 55px; 
    font-weight: 600;
}

body h3 {
    font-size: 22px;    
    font-weight: 600;
}

body h4 {
    font-size: 20px;
    font-weight: 400;
}

body h5 {
    font-size: 18px;
    font-weight: 700;
}

body h6 {
    font-size: 16px;
    font-weight: 400;
}





/* NAV */

/* MENU NAV COM LINKS */
nav {
    background: var(--secundario);
    opacity: 0.8;
}

/* LOGO DO MENU */
.logo-ceert {
    margin: 15px 50px 15px 50px;
}

/* Inspecionei apenas o item INÌCIO */
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
    color: var(--unnamed-color-ffffff);
    
}

/* Inspecionei os outros itens */
.navbar-light .navbar-nav .nav-link {
    margin: 0 10px;
    color: var(--unnamed-color-ffffff);
    font: normal normal normal 16px/19px Raleway;
}

.nav-link.active, .nav-link:hover {
    color: var(--primario) !important;
    transition: all 0.5s;
}

/* FINAL DO NAV */





/* HEADER */

.banner-bg {
    background-image: url("../img/header-fundo.png");
}

.banner-bg-degrade {
    background: transparent linear-gradient(90deg, var(--secundario) 0%, #213A6E00 100%);
}

header .wrapper div {
    height: 100vh;
}

/* TEXTO P ACIMA DO H1 */
header p {
    color: var(--unnamed-color-ffffff);
    font-size: 42px;
    font-weight: 300;
}


/* TEXTO H1 */
header h1 {
    color: var(--unnamed-color-ffffff);
}

@media screen and (min-width: 576px) and (max-width: 768px) {

    header p, header h1 {
        font-size: 1.5rem;
    }

}

@media screen and (min-width: 768px) and (max-width: 992px) {

    header p, header h1 {
        font-size: 2rem;
    }

}

@media screen and (min-width: 992px) and (max-width: 1200px) {

    header p, header h1 {
        font-size: 2.5rem;
    }

}

/* FINAL DO HEADER*/







/* INÍCIO SECTION AUTOR */

/* SECTION AUTOR */
#autor {
    padding: 60px 0 60px 0;
    background: var(--primario);
}

/* LINHA LATERAL */
.linha-autor {
    background-image: url("../img/fundo-etnico-linha.png");
    position: relative;
    width: 17px;
    height: 100%;
}

/* TEXTO DO MÁRIO */
.txt-Mário {
    line-height: 1.5;
    color: var(--secundario);
}

/* PARA O SCRIPT DA FUNÇÃO DO BOTÃO */
#mais {
    display: none;
}

/* BOTÃO */
#btnLerMais {
    margin: 25px 0 25px 0;
    color: var(--secundario);
    border-color: var(--secundario);
}

/* DIV PARA CENTRALIZAR O BOTÃO */
.btn-autor {
    text-align: center;
}

/* IMAGEM E NOME DO MÁRIO */
.img-nomeMario {
    text-align: center;
}

/* PALAVRA "POR" ANTES DO NOME DO AUTOR */
#autor p {
    font-size: 18px;
    font-weight: 300;
    color: var(--unnamed-color-ffffff);
}

/* NOME AUTOR */
#autor h5 {
    color: var(--unnamed-color-ffffff);
}

@media screen and (max-width: 992px) {     
    
    /* ROW QUE ENVOLVE O TEXTO E IMAGEM COM NOME DO AUTOR */
    .media-autor {
        display: flex;
        flex-direction: column-reverse;
    }    

    /* IMAGEM COM NOME DO AUTOR */
    .img-nomeMario {
        margin: 0 0 30px 0;
    }

    /* PADDING QUANDO RESPONSIVO */
    #autor {
        padding: 60px 0 60px 0;
    }
    
    /* DIV PARA OCULTAR COLUNA 03 NO RESPONSIVO */
    #coluna03-autor {
        display: none;
    }    
}

/* FIM DA SECTION AUTOR */





/* INÍCIO SECTION RACISMO */

/* SECTION RACISMO */
#racismo {
    padding: 90px 0 90px 0;
    position: relative;
}

/* COLUNA COM LINHA E TXT LATERAL */
#col-linhatxt {
    position: relative;
}

/* LINHA LATERAL */
.linha-racismo { 
    background-image: url("../img/fundo-etnico-linha.png");
    width: 17px;
    height: 100%;
}

/* TEXTO LATERAL COMPLETO */
.txt-lateral {
    width: 1000px;
    position: absolute;
    top: 25px;
    left: -440px;
    transform: rotate(270deg);       
}

/* TEXTO SEM A PALAVRA RACISMO */
#invisibilidade {
    font-size: 42px;
    font-weight: 300;
    color: var(--secundario);
}

/* TEXTO SÓ COM A PALAVRA RACISMO */
#txt-racismolateral {
    font-size: 42px;
    font-weight: 600;
    color: #EC701EA5;
}

/* PRIMARA IAMGEM DESCRIÇÃO */
#foto-descrição {
    margin: 0 0 30px 0;
}

/* TEXTO PRIMEIRA DESCRIÇÃO */
.txt-descrição1 h4 {
    line-height: 1.5;
    color: var(--secundario);
}

/* CAIXA PONTILHADA */
.caixa-pontilhada1 {
    line-height: 2; 
    padding: 30px;
    margin: 50px 0 0 0;
    position: relative;    
    border: 5px dashed #B9B9B9;
    border-radius: 58px 0px;
}

/* ASPAS INÍCIO COMENTÁRIO 01 */
#aspas-iníciotxt1 {
    top: 0px;
    left: 35px;
    position: absolute;
    font-size: 129px;
}

/* TEXTO ENTRE ASPAS */
.comentário1 p {
    padding: 0 70px 0 70px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: var(--terciario);
}

/* ASPAS FINAL COMENTÁRIO 01 */
#aspas-finaltxt1 {
    bottom: -85px;
    right: 35px;
    position: absolute;
    font-size: 129px;
}

/* texto segunda descrição */
.txt-descrição2 h4 {
    line-height: 1.5;
    margin: 90px 0 0 0;
    color: var(--secundario);
}

/* SEGUNDA FOTO DESCRIÇÃO */
#foto-descrição2 {
    margin: 90px 0 0 0;
    float: right;
}

/* CAIXA PONTILHADA DO SEGUNDO COMENTÁRIO */
.caixa-pontilhada2 {   
    line-height: 2; 
    padding: 30px;
    margin: 50px 0 0 0;
    position: relative;    
    border: 5px dashed #B9B9B9;
    border-radius: 58px 0px;
}

/* ASPAS INÍCIO COMENTÁRIO 02 */
#aspas-iníciotxt2 {
    top: 0px;
    left: 35px;
    position: absolute;
    font-size: 129px;
}

/* TEXTO ENTRE ASPAS */
.comentário2 p {
    padding: 0 70px 0 70px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: var(--terciario);
}

/* ASPAS FINAL COMENTÁRIO 02 */
#aspas-finaltxt2 {
    bottom: -85px;
    right: 35px;
    position: absolute;
    font-size: 129px;
}

/* TEXTO FINAL DA SECTION RACISMO */
.txt-final h4 {
    line-height: 1.5;
    margin: 50px 0 50px 0 ;
    color: var(--secundario);
}

/* PARA O SCRIPT DA FUNÇÃO DO BOTÃO */
#more {
    display: none;
}

/* BOTÃO DO TEXTO FINAL */
#btnContinuação {
    color: var(--terciario);
    border-color: var(--terciario) ;
}

/* DIV PARA ALINHAR O BOTÃO */
.btn-racismo {
    text-align: center;
}

@media screen and (min-width: 0) and (max-width: 992px) {

    /* DIV PARA CENTRALIZAR IMAGEM NO RESPONSIVO */
    .img-descrição01-centralizar {
        text-align: center;
    }  

    /* TIRAR O FLOAT DA IMAGEM PARA O RESPONSIVO */
    #foto-descrição2 {
        float: none;
    }

    /* CENTRALIZAR IMAGEM SEM O FLOAT */
    .img-descrição02-centralizar {
        text-align: center;
    }

    /* OCULTAR TERCEIRA COLUNA VAGA */
    #coluna03-racismo {
        display: none;
    }

    /* MARGIN PARA VERSÃO RESPONSIVA */
    .txt-descrição1 h4, .caixa-pontilhada1, .txt-descrição2 h4, #foto-descrição2, .caixa-pontilhada2, .txt-final h4, #btnContinuação {
        margin: 25px 0;
    }   
    
}

/* RESPONSIVIDADE TEXTO LATERAL ATÉ 768PX */
@media screen and (min-width: 0) and (max-width: 768px) {

    /* TEXTO LATERAL COMPLETO */
    .txt-lateral {
        margin: 40px 0 0 0;
        width: 80vw;
        position: absolute;
        top: -50px;
        left: 70px;
        transform: none;      
    }

    /* TEXTO COM INVISIBILIDADE */
    #invisibilidade {
        font-size: 2rem;
    }
    
    /* TEXTO SÓ COM A PALAVRA RACISMO */
    #txt-racismolateral {
        font-size: 2rem;
    }

    /* PRIMEIRA FOTO DESCRIÇÃO */
    #foto-descrição {
        margin: 80px 0 10px 0;
    }

    /* OCULTAR TERCEIRA COLUNA VAGA */
    #coluna03-racismo {
        display: none;
    }

}

/* RESPONSIVIDADE TEXTO LATERAL DE 768PX ATÉ 992PX */
@media screen and (min-width: 768px) and (max-width: 992px) {

    /* TEXTO LATERAL COMPLETO */
    .txt-lateral {
        width: 80vw;
        position: absolute;
        top: -10px;
        left: 100px;
        transform: none;      
    }

    /* TEXTO COM INVISIBILIDADE */
    #invisibilidade {
        font-size: 2.5rem;
    }
    
    /* TEXTO SÓ COM A PALAVRA RACISMO */
    #txt-racismolateral {
        font-size: 2.5rem;
    }

    /* PRIMEIRA FOTO DESCRIÇÃO */
    #foto-descrição {
        margin: 80px 0 10px 0;
    }

}

/* RESPONSIVIDADE TEXTO LATERAL DE 992PX ATÉ 1200PX */
@media screen and (min-width: 992px) and (max-width: 1200px) {

    /* TEXTO LATERAL COMPLETO */
    .txt-lateral {
        margin: 40px 0 0 0;
        width: 80vw;
        position: absolute;
        top: -50px;
        left: 150px;
        transform: none;      
    }

    /* TEXTO COM INVISIBILIDADE */
    #invisibilidade {
        font-size: 3rem;
    }
    
    /* TEXTO SÓ COM A PALAVRA RACISMO */
    #txt-racismolateral {
        font-size: 3rem;
    }

    /* PRIMEIRA FOTO DESCRIÇÃO */
    #foto-descrição {
        margin: 100px 0 0 0;
    }

    /* PRIMEIRA DESCRIÇÃO DA PÁGINA */
    .txt-descrição1 h4 {
        margin: 100px 0 0 0;
    }

}

/* FIM DA SECTION RACISMO */





/* INÍCIO DA SECTION COR */

#cor {
    position: relative;
}

/* IMAGEM DE FUNDO */
.img-fundo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -2;
    background-image: url('../img/fundo-etnico.png');
    opacity: 1;
}

/* CAMADA DE COR SOBRE IMAGEM */
.bloco-fundo {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    background-color: var(--secundario);
    opacity: 0.8;
}

/* TÍTULO */
#título {
    padding: 50px 0 0 0;
    font-size: 42px;
    font-weight: 600;
    color: var(--primario);
}

/* TEXTO PRIMEIRA, SEGUNDA E COLUNA FINAL */
#txt-col1, #txt-col2, #txt-finalcor {
    line-height: 1.5;
    padding: 50px 0 0 0;
    font-size: 20px;
    font-weight: 400;
    color: var(--unnamed-color-ffffff);
}

/* FOTO SECTION  */
#foto-descrição3 {
    padding: 30px 0 0 0;
    float: right;
}

/* CAIXA PONTILHADA */
.caixa-pontilhada3 {
    padding: 30px;
    margin: 50px 0 0 0;
    position: relative; 
    background: var(--unnamed-color-ffffff);   
    border: 5px dashed var(--primario);
    border-radius: 58px 0px;
}

/* ASPAS ANTES DO TEXTO */
#aspas-iníciotxt3 {
    top: 0px;
    left: 35px;
    position: absolute;
    font-size: 129px;
    color: var(--primario);
}

/* TEXTO ENTRE ASPAS */
.comentário3 p {
    padding: 20px 80px 20px 80px;
    font-size: 20px;
    font-weight: 700;
    line-height: 2;
    color: #213A6E;
}

/* ASPAS DEPOIS DO TEXTO */
#aspas-finaltxt3 {
    bottom: -85px;
    right: 35px;
    position: absolute;
    font-size: 129px;
    color: var(--primario);
}

/* ATRIBUTOS DO TEXTO FINAL ESTÁ EM CIMA, JUNTO COM  OS OUTROS DOIS TEXTOS */

/* PARA O SCRIPT DA FUNÇÃO DO BOTÃO */
#maistxt {
    display: none;
}

/* DIV PARA CENTRALIZAR O BOTÃO */
.btn-final {
    text-align: center;
}

/* BOTÃO SECTION RACISMO */
#btnMaistxtfinal {
    margin: 25px 0 75px 0;
    color: var(--unnamed-color-ffffff);
    border-color: var(--unnamed-color-ffffff);
}

@media screen and (max-width: 992px){ 

    /* OCULTAR COLUNAS NO RESPONSIVO */
    #coluna-cor01, #coluna-cor03 {
        display: none;
    }

    /* TIRAR O FLOAT DA IMAGEM PARA PODER CENTRALIZAR */
    #foto-descrição3 {
        float: none;
    }

    /* DIV PARA CENTRALIZAR IMAGEM */
    .img-descrição03-centralizar {
        text-align: center;
    }
}

/* FIM DA SECTION COR */





/* INÍCIO SECTION BAHIA */

/* SECTION BAHIA */
#bahia {
    margin: 0 0 60px 0;
}

/* IMAGEM CENTRAL BAHIA */
#img-sinebahia {
    margin: 0 0 50px 0;
}

#linha-txtbahia {
    position: relative;
}

/* LINHA LATERAL */
.linha-bahia {
    background-image: url("../img/fundo-etnico-linha.png");
    width: 17px;
    height: 100%;
}

/* TEXTO LATERAL COMPLETO */
.txt-lateralbahia {  
    width: 1000px;  
    position: absolute;
    top: -125px;
    left: -440px;
    transform: rotate(270deg);
}

/* TEXTO SEM A PALAVRA BAHIA */
#projetosine {
    font-size: 42px;
    font-weight: 300;
    color: var(--secundario);
}

/* TEXTO SÓ COM A PALAVRA BAHIA */
.txt-lateralbahia p {
    font-size: 42px;
    font-weight: 600;
    color: #EC701EA5;
}

/* TEXTO PRIMEIRA COLUNA */
.txt-bahia h4 {
    line-height: 1.5;
    color: var(--secundario);
}

/* GRÁFICO SINE BAHIA */
.gráfico-bahia {
    margin: 75px 0 75px 0;
    text-align: center;
}

/* DIV PARA CENTRALIZAR O BOTÃO */
.btn-sinelermais {
    text-align: center;
}

/* BOTÃO */
#btnsineLermais {
    color: var(--secundario);
    border-color: var(--secundario);

}

/* DIV PARA ALINHAR IMAGEM E TEXTO */
.imgtxt {
    text-align: center;
}

/* LEGENDAS DAS FOTOS */
#legendas {
    margin: 15px 0 0 0;
    color: #213A6E;
    font-size: 20px;
    font-weight: 700;
}

/* TIRAR O SUBLINHADO DO LINK */
a:link {
    text-decoration: none;
}

@media screen and (max-width: 992px) {
    
    #coluna-03bahia {
        display: none;
    }
    
}

@media screen and (min-width: 0px) and (max-width: 768px) {

    .txt-lateralbahia {  
        width: 60vw;
        position: absolute;
        top: -10px;
        left: 120px;
        transform: none; 
    }

    /* TEXTO SEM A PALAVRA BAHIA */
    #projetosine {
        font-size: 2rem;
    }

    /* TEXTO SÓ COM A PALAVRA BAHIA */
    .txt-lateralbahia p {
        font-size: 2rem;
    }

    /* TEXTO PRIMEIRA COLUNA */
    .txt-bahia h4 {
        margin: 70px 0 0 0;
    }
    
}

@media screen and (min-width: 768px) and (max-width: 992px) {

    .txt-lateralbahia {  
        width: 60vw;
        position: absolute;
        top: -10px;
        left: 175px;
        transform: none; 
    }

    /* TEXTO SEM A PALAVRA BAHIA */
    #projetosine {
        font-size: 2.5rem;
    }

    /* TEXTO SÓ COM A PALAVRA BAHIA */
    .txt-lateralbahia p {
        font-size: 2.5rem;
    }

    /* TEXTO PRIMEIRA COLUNA */
    .txt-bahia h4 {
        margin: 70px 0 0 0;
    }

}

@media screen and (min-width: 992px) and (max-width: 1200px) {

    .txt-lateralbahia {  
        width: 60vw;
        position: absolute;
        top: -10px;
        left: 235px;
        transform: none; 
    }

    /* TEXTO SEM A PALAVRA BAHIA */
    #projetosine {
        font-size: 3rem;
    }

    /* TEXTO SÓ COM A PALAVRA BAHIA */
    .txt-lateralbahia p {
        font-size: 3rem;
    }

    /* TEXTO PRIMEIRA COLUNA */
    .txt-bahia h4 {
        margin: 70px 0 0 0;
    }

}
 
/* FIM SECTION BAHIA */





/* INÍCIO SECTION VER MAIS */

#ver-mais {
    margin: 0 0 60px 0;
}

@media screen and (max-width: 992px) {

    /* IMAGEM COM COM TEXTO */
    .imgtxt {
        margin: 25px 0 0 0;
    }

}

/* FIM SECTION VER MAIS */





/* INÍCIO SECTION CONTATO */
#contato {
    background-color: var(--primario);
}


/* TÍTULO E OPÇÕES*/
.redes {
    padding: 35px 0 0 0;
}

/* TÍTULO REDES SOCIAIS */
#redes-sociais {
    font-size: 22px;
    font-weight: 600;
    color: var(--secundario);
}

/* OPÇÕES REDES SOCIAIS */
#contato h6 {
    color: var(--secundario);
}

/* CAMPO GERAL DO FORMULÁRIO */
.forms {
    background-color: var(--secundario);
    padding: 50px;
}

/* TEXTO ANTES DO CAMPO FORMS */
#txt-forms {
    padding: 0 0 35px 0;
    color: var(--unnamed-color-ffffff);
    font-size: 18px;
    font-weight: 300;
}

/* CAMPO DE PREENCHIMENTO */
.form-group input {
    width: 514px;
    height: 45px;
}

/* PLACEHOLDER  */
.form-group ::placeholder {
    font-size: 18px;
    font-weight: 300;
    color: #000000;
    opacity: 0.5;
}

/* BOTÃO FORMS */
#btn-forms {
    margin: 0 0 0 35px;
    font-size: 14px;
    font-weight: 600;
    width: 141px;
    height: 47px;
    color: var(--unnamed-color-ffffff);
    background-color: #0a1429;
}

@media screen and (max-width: 1400px) {        

    /* LINKS DO CONTATO */
    .redes {
        margin: 0 0 25px 0;
        text-align: center;
    }

    /* CAMPO DO FORMULÁRIO */
    .form-group input {
        width: 100%;
        height: 45px;
    }

    /* BOTÃO FORMULÁRIO */
    #btn-forms {
        margin: 35px 0 0 0;
    }
    
}

/* FIM SECTION CONTATO */






/* FOOTER */

/* FUNDO FOOTER */
footer {
    background-color: var(--primario);
}

/* TEXTO FOOTER */
footer p {
    text-align: center;
    padding: 40px;
    font-size: 16px;
    font-weight: 300;
    color: var(--secundario) ;
}

#btnLerMais.efeito {
    color: red;
    font-size: 12em;
    transition: 1s;
}

body {
    scroll-behavior: smooth;
}