body {
    background-color: #FFEEC8;
    margin: 0;
}

header {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 8vh;

    background-color: #4B2B1A;
}

a {
    display: inline-block;
}

.logo {
    text-align: center;
    display: flex;
    justify-content: center;
    margin: auto;

    width: 18vw;
}

menu {
    position: relative;
    left: 2vw;
    padding: 0;
    
    justify-content: start;
}

menu img {
    margin: 5px 0 0 0;
    padding: 0;

    width: 2vw;

    opacity: 80%;
}

main {
    width: 100%;
    margin: 0 auto 0 0;
    
}

.pag_inicial {
    position: relative;
    z-index: -1;
    text-align: center;
}

.pag_inicial .pintura {
    width: 100%;
    position: absolute;
    z-index: 1;
}

.pag_inicial .sobreposicao {
    width: 100%;
    position: relative;
    z-index: 2;
}

.text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    gap: 0;

    position: absolute;
    top: 22%;
    left: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);

    width: 65vw;
}

.frase_inicial {
    font-family: "Permanent Marker";
    color: #FFFFFF;
    font-size: 38px;
    opacity: 85%;
    margin-bottom: 0%;
}

.line {
    background-color: #FFFFFF;

    height: 0.1vh;
    width: 100%;
}


.agradecimento {
    position: absolute;
    top: 70%;
    left: 74%;
    z-index: 5;
    width: 23vw;
    text-align: end;
}

.agradecimento p {
    font-family: 'Inter';
    font-size: 13px;
    color: #FFFFFF;
}

.agradecimento span {
    font-weight: bold;
}

#PC {
    display: flex;
    flex-direction: row;
    margin-top: -4px;
    background-image: url('../assets/PC\ bg.jpg');
    width: 100%;
    height: 65vh;
}

.PC {
    display: flex;
}

.patrimonio {
    font-family: 'Inter';
    font-weight: bold;
    color: #FF9940;
    font-size: 32px;

    margin: 8vh 0 0 8vh;
}

.patrimonio1 {
    position: absolute;
    font-family: 'Inter';
    font-weight: bold;
    color: #ffffff;
    font-size: 32px;

    margin: 7.7vh 0 0 7.7vh;
}

.oqpc {
    display: flex;
    flex-direction: row;

    margin: 1vh 0 0 12vh;
}

.polygon img {
    width: 0.9vw;
    transform: rotate(60deg);
}

.oqpc h2 {
    margin: 0 0 0 0.6vw;

    font-family: 'Inter';
    font-weight: bold;
    font-size: 24px;
    color: #FFFFFF;
    opacity: 90%;
}

.oqpc span {
    color: #FF9940;
}

.frase-ma {
    display: flex;
    margin: 0 0 0 14vh;
    gap: 1vw;
}

.line1 {
    width: 1px;
    height: 13vh;
    background-color: #FF9940;

    margin-top: 1.5vh;
}

.text1 {
    font-family: 'Inter';
    font-size: 15px;
    color: #FFFFFF;
}

.autor {
    font-size: 12px;
    text-align: end;
}

.autor span {
    color: #FF9940;
    font-weight: bold;
}

.iphan {
    margin-left: 14vh;
    color: #FFFFFF;
    font-family: 'Inter';
    font-size: 14px;

    width: 35vw;
}

.iphan span {
    font-weight: bold;
}

.carrousel {
    position: absolute;
    margin-top: 5%;
    left: 50%;
}

#PCeQuilombos {
    display: flex;
    flex-direction: column;
    background-color: #FFEEC8;
    
    font-family: 'Inter';
    padding-bottom: 8vh;
}

.quilomb {
    display: flex;
    flex-direction: row;
    gap: 5vw;
}

.content1 {
    width: 40vw;
    opacity: 99%;
}

.content1 span {
    font-weight: 700;
}

.title-pc {
    text-align: center;
    margin-top: 6vh;
}

.title-pc h1 {
    font-size: 34px;
    font-weight: 800;
    color: #4B2B1A;
    text-shadow: 1px 1px #FF9940;
    margin-bottom: 0;
}

.title-pc h2 {
    font-size: 20px;
    font-weight: 700;
    color: #4B2B1A;
}

.title-pc h2 span {
    color: #FF9940;
}

.quilomb {
    margin: 2vh 0 0 6vw;
    color: #4b2b1add
}

.content1 p {
    text-align: justify;
}

.citacao1 {
    display: flex;
    flex-direction: row;
    margin-bottom: 2vh;
}

.line2 {
    width: 3px;
    height: 5vw;
    background-color: #FF9940;
}

.text2 {
    margin-left: 1vw;
}

.frase-arv {
    font-weight: 700;
    margin: 0%;

    text-align: start;
}

.origem {
    font-weight: 600;
    margin: 0;
    color:#FF9940;
}

.t {
    text-align: justify;
}

.const {
    text-align: justify;
}

.citacao2 {
    display: flex;
    flex-direction: row;
}

.line3 {
    width: 1vw;
    height: 16vh;
    background-color: #4B2B1A;
    margin-right: 1vw;
}

.video {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 580px;
}

.video p {
    width: 522px;
    margin: 2vh;
    font-size: 12px;

    text-align: center;
}

.video p span {
    font-weight: bold;
}

#Quilombo {
    width: 100%;
    height: 100vh;

    background-image: url('../assets/bg-quilombo.png');
}

.main-quilombo {
    display: flex;
    flex-direction: row;
}

.pod {
    padding: 12vh 0 0 4vw;
}

.pod iframe {
    margin: 20px 0 0 0;
    padding: 0;
    width: 600px;
    height: 250px;
}

.pod img {
    position: absolute;
    margin-left: -5vw;
}

.pod h2 {
    color: #FFBA7E;
    text-shadow: 2px 2px #4B2B1A;

    font-size: 16px;
    font-weight: 800;
    margin: 0;
    margin-top: -16px;
}

.pod p {
    color: #FFF7E7;
    font-size: 14px;
}

.quilombo {
    width: 300vw;
    text-align: center;

    margin: 23vh 4vw 0 3vw;
}

.quilombo h1 {
    color: #FFEEC8;
    font-size: 55px;
    font-weight: 900;
    text-shadow: 4px 4px #83492B;

    margin: 0;
}

.quilombo p {
    color: #FFEEC8;
    opacity: 80%;
    font-size: 14px
}

.quilombo p span {
    font-weight: bold;
} 

.reconhecimento {
    margin: 1vh 4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    
    border-radius: 7px;
    background-color: #a58c7196;
}

.reconhecimento h2 {
    padding: 4vh 4vw 0;
    font-size: 26px;
    font-weight: 700;
    margin: 0;

    color: #FFEEC8;
    text-shadow: 2px 2px #fff7e731;
}

.reconhecimento p {
    padding: 0 1vw 2vh 4vw;
    font-size: 14px;
    width: 88vw;
    text-align: justify;

    color: #FFEEC8;
    opacity: 80%;
}

.reconhecimento .s1 {
    font-weight: bold;
    color: #ed8f42;
}

.reconhecimento .s2, .s3 {
    font-weight: bold;
}

#Cultura {
    width: 100%;
    height: 70vh;
    background-image: url('../assets/PC\ bg.jpg');
}

.detalhamento {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    margin-top: -8px;
    margin-bottom: 30px;

    text-align: center;
}

.RE, .FT, .CQ, .CD {
    margin-top: 2vh;
    width: 40vw;
    background-color: #b5947096;
    border-radius: 2px;
}

.esq, .dir {
    display: flex;
    justify-content: center;
}

.detalhamento img {
    padding-top: 20px;
}

.detalhamento h2 {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 2px;
    color: #FFEEC8;
    font-weight: 600;
}

.detalhamento p {
    font-size: 14px;
    color: #FFEEC8;
    opacity: 80%;
}

/* #NegoBispo {} */

.bio {
    width: 100%;
    height: 100vh;
    background-image: url('../assets/BG\ NB.png');
}

.NB-Title {
    padding: 12vh 0 0 6vw;
}

.bio p {
    margin: 6vh 6vw;
    text-align: justify;
    width: 65vw;
    color: #FFFFFF;
    opacity: 85%;
}

.bio p span {
    font-weight: 700;
    color: #ed8f42;
}

.nb {
    display: flex;
    margin: 0;
    width: 100%;
    height: 52vh;
    background-image: url('../assets/BG-nb1.png');
}

.video1 {
    display: flex;
    flex-direction: row;
    margin: 1vh 10vw 0 10vw;
    width: 90%;
}

.video1 iframe {
    margin-top: 5vh;
    width: 70vw;
    height: 40vh;
}

.video1 span {
    font-weight: 700;
    color: #ed8f42;
}

.description {
    display: flex;
    flex-direction: column;
    margin: 23vh 2vw;
    
    width: 100%;
}

.description h2 {
    margin: 0;
    padding: 0;
    color: #FFF7E7;
    text-shadow: 3px 3px #ffba7e6d;
}

.description p {
    margin: 0;
    color: #ffffff;
    opacity: 90%;
    text-align: start;
    font-size: 13px;
}

.seq {
    background-image: url('../assets/SEQ.\ NB.png');
    margin-top: -2px;
    width: 100%;
    height: 45vh;
}

footer {
    display: flex;
    position: relative;
    width: 100%;
    /* gap: 40px; */
    
    margin-top: 24px;
    bottom: 0px;

    background: linear-gradient(0deg, rgba(53, 30, 17, 0.92) 0%, rgba(196, 184, 178, 0) 100%);
}

.rodape {
    display: flex;
    justify-content: space-between;

    margin-left: 80px;
    margin-bottom: 20px;
    width: 40vw;
}

footer p {
    color: #4B2B1A;
    font-size: 14px;

    margin-bottom: 10px;
    bottom: 10px;
}

footer a {
    color: #4B2B1A;
    text-decoration: none;

    font-size: 12px;
    margin-bottom: 4px;
}


.footer-nav {
    display: flex;
    flex-direction: column;
}

.contato-linha {
    display: flex;
    flex-direction: column;
    

    gap: 8px;
    margin-top: 8px;
}

.contato-item {
    display: flex;
    gap: 6px;
}

.contato-item img {
    width: 14px;
    height: 14px;   

}

.text5 {
    font-size: 16px;
    right: 0;
    margin-right: 48px;
    bottom: 40px;
    position: absolute;
    
    color: rgba(255, 255, 255, 0.60);
    text-align: right;
    margin-top: 5vh;
    left: 59%;
}

@media (max-width: 400px) {
    body {
        width: 400px;
        margin: 0;
        padding: 0;
    }

    .logo {
        display: flex;
        justify-content: center;
        margin: auto;
    
        width: 45vw;
    }
    
    menu {
        position: relative;
        left: 2vw;
        padding: 0;
        
        justify-content: start;
    }
    
    menu img {
        margin: -9px 0 0 5px;
        padding: 0;
    
        width: 4vw;
    
        opacity: 80%;
    }

    .text {
        display: flex;
        justify-content: center;
        justify-items: center;
        position: absolute;
        top: 40%;
        left: 50%;
        z-index: 5;
        transform: translate(-50%, -50%);
    }

    .frase_inicial {
        font-size: 12px;
        width: 74vw;

        margin-left: -15px;
    }

    .agradecimento {
        position: absolute;
        top: 80%;
        left: 20%;
        z-index: 5;
        width: 60vw;
        text-align: center;
    }
    
    .agradecimento p {
        font-family: 'Inter';
        font-size: 8px;
        color: #FFFFFF;
    }

    #PC {
        display: flex;
        flex-direction: column;
        margin-top: -4px;
        background-image: url('../assets/PC\ bg.jpg');
        height: 65vh;
    }
    
    .PC {
        display: flex;
        flex-direction: column;
    }
    
    .patrimonio {
        font-family: 'Inter';
        font-weight: bold;
        color: #ffffff;
        text-shadow: 1px 1px #FF9940;
        font-size: 16px;
    
        margin: 5vh auto 0 auto;
    }
    
    .patrimonio1 {
        display: none;
    }

    .oqpc {
        display: flex;
        flex-direction: row;
    
        margin: 1vh auto auto 10vw;
    }
    
    .polygon img {
        width: 2vw;
        margin-top: -16px;
        transform: rotate(60deg);
    }
    
    .oqpc h2 {
        margin: 0 0 0 1vw;
    
        font-family: 'Inter';
        font-weight: bold;
        font-size: 14px;
        color: #FFFFFF;
        opacity: 90%;
    }
    
    .oqpc span {
        color: #FF9940;
    }
    
    .frase-ma {
        display: flex;
        margin: 0 0 0 6.5vh;
        gap: 1vw;
    }
    
    .line1 {
        width: 1px;
        height: 8vh;
        background-color: #FF9940;
    
        margin-top: 0;
    }
    
    .text1 {
        font-family: 'Inter';
        font-size: 10px;
        color: #FFFFFF;
    }
    
    .autor {
        font-size: 8px;
        text-align: end;
    }
    
    .autor span {
        color: #FF9940;
        font-weight: bold;
    }

    .iphan {
        margin-left: 6vh;
        color: #FFFFFF;
        font-family: 'Inter';
        font-size: 10px;
        text-align: justify;
        width: 80vw;
    }
    
    .iphan span {
        font-weight: bold;
    }
    
    .carrousel {
        position: absolute;
        top: 75%;
        left: 25%;
        width: 50vw;
    }

    .title-pc h1 {
        font-size: 28px;
    }

    .title-pc h2 {
        font-size: 14px;
    }

    .quilomb {
        width: 100%;
        margin: 2vh 0 0 3vw;
        display: flex;
        flex-direction: column;
        color: #4b2b1add
    }

    .content1 {
        width: 90%;
        justify-content: center;
        margin: auto 2vw;
        font-size: 14px;
    }
    
    .content1 p {
        text-align: justify;
    }
    
    .citacao1 {
        display: flex;
        flex-direction: row;
        margin-bottom: 2vh;
    }
    
    .line2 {
        width: 3px;
        height: 15vw;
        background-color: #FF9940;
    }
    
    .text2 {
        margin-left: 2vw;
    }
    
    .frase-arv {
        font-weight: 700;
        margin: 0%;
    
        text-align: start;
    }
    
    .origem {
        font-weight: 600;
        margin: 0;
        color:#FF9940;
    }
    
    .t {
        text-align: justify;
    }
    
    .const {
        text-align: justify;
    }
    
    .citacao2 {
        display: flex;
        flex-direction: row;
    }
    
    .line3 {
        width: 1vw;
        height: 16vh;
        background-color: #4B2B1A;
        margin-right: 1vw;
    }

    .video {
        display: flex;
        flex-direction: column;
        justify-content: center;
    
        width: 100px;
    }

    .video iframe {
        width: 94vw;
        height: 30vh;
    }
    
    .video p {
        width: 88vw;
        margin: 1vh;
        font-size: 10px;
    
        text-align: center;
    }
    
    .video p span {
        font-weight: bold;
    }

    #Quilombo {
        width: 100%;
        height: 100%;
    
        background-image: url('../assets/paint.png');
    }
    
    .main-quilombo {
        display: flex;
        flex-direction: column;
    }
    
    .pod {
        padding: 12vh 0 0 4vw;
    }
    
    .pod iframe {
        margin: 3vh 0 0 0;
        padding: 0;
        width: 360px;
        height: 180px;
    }
    
    .pod img {
        position: absolute;
        margin-left: -20vw;
        width: 20vw;
    }
    
    .pod h2 {
        color: #FFBA7E;
        text-shadow: 2px 2px #4B2B1A;
    
        font-size: 14px;
        font-weight: 800;
        margin: 0;
        margin-top: -16px;
    }
    
    .pod p {
        color: #FFF7E7;
        font-size: 12px;
    }
    
    .quilombo {
        width: 98vw;
        text-align: center;

        background-color: #4b2b1ad8;
    
        margin: 2vh 0 0 1vw;
        padding: 2vh;
        border-radius: 10px;
    }
    
    .quilombo h1 {
        color: #FFEEC8;
        font-size: 52px;
        font-weight: 900;
        text-shadow: 4px 4px #83492B;
    
        margin: 0;
    }

    .bio {
        width: 100%;
        height: 1160px;
        background-image: url('../assets/BG\ NB2.png');
        background-repeat: no-repeat;

        margin: 0;
    }
    
    .NB-Title {
        padding: 12vh 0 0 6vw;
    }

    .NB-Title img {
        width: 95%;
    }
    
    .bio p {
        margin: 6vh 0vw 0vh 6vw;
        text-align: justify;
        width: 120vw;
        color: #FFFFFF;
        opacity: 85%;
    }
    
    .bio p span {
        font-weight: 700;
        color: #ed8f42;
    }
    
    .nb {
        display: flex;
        flex-direction: column;
        margin-top: -12vh;
        width: 100%;
        height: 73vh;
        background-image: url('../assets/BG-nb.png');
    }
    
    .video1 {
        display: flex;
        flex-direction: column;
        margin: 1vh 10vw 0 0vw;
        width: 100%;
    }
    
    .video1 iframe {
        margin: 8vh 0 0 14vw;
        width: 70vw;
        height: 20vh;
    }
    
    .video1 span {
        font-weight: 700;
        color: #ed8f42;
    }
    
    .description {
        display: flex;
        flex-direction: column;
        margin: 0vh 2vw;
        
        width: 100%;
    }
    
    .description h2 {
        width: 80vw;
        padding: 0;
        color: #FFF7E7;
        text-shadow: 3px 3px #ffba7e6d;
        font-size: 20px;
        margin: 8px 4px 0 8vw;
    }
    
    .description p {
        margin: 0;
        color: #ffffff;
        opacity: 90%;
        text-align: justify;
        font-size: 13px;
        margin: 8px 12vw 0 8vw;
    }
    
    .seq {
        background-image: url('../assets/BG-seq.png');
        margin-top: -2px;
        width: 100%;
        height: 102vh;
    }
}