/*----------menu e imagem inicial----------*/
@media (max-width: 1160px){
    .img-principal img{
        height: 100vh;
        width: 100%;
        background-position: center;
    }
}
@media (max-width: 999px){
    .nav-list{
        position: absolute;
        top: 10vh;
        margin-right: 0px;
        width: 70%;
        height: 70vh;
        background-color: #554c41;
        flex-direction: column;
        align-items: center;
        transform: translateX(170%);
    }
    .nav-list li{
        margin-left: -6vh;
        margin-top: 10vh;
    }
    .mobile-menu{
        display: block;
        float: right;
        margin-right: 10%;
    }
    .nav-list a{
        font-weight: bold;
    }
    .nav-list:hover{
        padding-bottom: -11vh;
    }
   
}
@media (max-width: 586px){
    .logo {
        display: flex;
        margin-top: 20px;
        margin-left: 20px;
        
    }
    .logo img{
        display: flex;
        margin-top: -18px;
        padding-right: 10px;
        height: 10vh;
    }
    .img-principal img{
        margin-top: 8vh;
        height: 38vh;
        width: 100%;
        background-position: center;
    }
    header div a,  header div a span{
        font-size: 8px;
    }
    .menu-principal{
        width: 100%;
        
    }
}
/*----------menu e imagem inicial----------*/
/*-------Main-sobre o projeto--------*/
@media (max-width: 662px){
    main section.sobre-projeto{
        height: 60vh;
    }
    main section.sobre-projeto h1{
        font-size: 40px;
        padding: 25px;
    }
    main section.sobre-projeto p{
        font-size: 12px;
        text-align: none;
        margin-left: 35px;
        width: 80%;
    }
    .sobre-projeto button{
        height: 6vh;
        width: 25%;
        margin-left: 65%;
        border: none;
        margin-top: 4vh;
        background-color: #F2E2CE;
    }

    main section.topicos-historicos{
        height: 44vh;
        width: 100%;
    }  
    
    .componentes-da-galeria {
        display: grid;
        grid-template-columns: 20% 20%;
        column-gap: 15vh;
        margin-top: 4vh;
    }
}
@media (max-width: 500px){
    .menu-principal{
        height: 10vh;
    }
    #galeria{
        height: 240vh;
    }
    main section.galeria {
        width: 100%;
        background-color: rgb(248, 242, 231);
    }
    .componentes-da-galeria div{
        height: 30vh;
        width: 220%; 
        margin-top: -2.5vh;
    }
    .componentes-da-galeria div img{
        height: 19vh;
        width: 92.5%;
        margin-left: 4%;
        margin-top: 4%;
    }
    main section.galeria h1{
        padding: 25px;
        font-size: 40px;
    }
    .galeria button img{
        height: 4vh;
        width: 8%;
    }
    .titulo h2{
        font-size: 7.5px;
        padding-top: 1vh;
    }
    .galeria button{
        margin-top: 45vh; 
    }

    .topicos-historicos h1 { 
        font-size: 4vh;
    }

    .topicos-historicos .thcontainer div { 
        height: 20vh;
    }
    .topicos-historicos .thcontainer div a{
        height: 10vh;
        width: 10vh;
    }
    .topicos-historicos .thcontainer div h2{
        font-size: 1.5vh;
    }
    .topicos-historicos .thcontainer div a img{
        height: 3.5vh;
    }
}
/*-------começo Main emblemas--------*/
@media (max-width: 1160px){
    section.moldura{
        margin-left: 17%;
        grid-template-columns: 45% 45%; 
        grid-template-rows: 42vh 42vh; 
    }
}
@media (max-width: 662px){
    .emblemas-componentes h1{
        font-size: 35px;
    }
    section.moldura{
        grid-template-columns: 50% 50%; 
        grid-template-rows: 18.8vh 18.8vh; 
        display: grid;
        margin-top: 20vh;
        margin-left: 7%;
    }
    .img1 img, .img2 img, .img3 img, .img4 img{
        height: 18vh;
    }
    .img1 h2, .img2 h2, .img3 h2, .img4 h2{
        font-size: 12px;
        margin-top: -16vh;
    } 
    .img1 p, .img2 p, .img3 p, .img4 p{
        font-size: 9px;
    }
    main section.emblemas{
        height: 70vh;
    }
}
/*-------começo Main rodape--------*/
@media (max-width: 662px){
    body{
        width: 100%;
    }

    main div.rodape img{
        height: 5vh;
        margin-left: 10%;
        width: 80%;
    }
   .contato{
        height: 100vh;
        width: 100%;
        display: block;
        text-align: center ;
        margin-top: -68px;
    }

    .contato a{
        font-size: 15px;
    }

    .logoC{
        padding-top: 70px;
        margin-left: -10px;
    }

    .sobreC, .contC, .redeSC{
        margin-left: -10px;
    }

    .contC p{
        margin-left:22%;
    }

    .redeSC div{
        margin-left: 26%;
    }
}
/*------Responsividade história------*/
@media (max-width: 662px){
    .hist, .container{
        height: 2440vh;
    }
    .container p{
       font-size: 12px;
    }
    .imgUm{
        height: 10vh;
        margin-left: 10%;
    }
    .imgDois{
        height: 25vh;
        margin-left: 16%;
    }
    .imgTres{
        height: 25vh;
        margin-left: 16%;
    }
    .imgQuatro, .imgQuinta{
        margin-left: 16%;
    }
    .imgQuatro{
        height: 26.7vh;
    }
    .imgQuinta{
        height: 25.5vh;
    }
    .imgSeis{
        height: 25.5vh;
    }
    .imgSete{
        height: 25.5vh;
        margin-left: 37%;
    }
    .imgOito{
        height: 23vh;
        margin-left: 7%;
    }
    .imgNove{
        height: 24vh;
        margin-left: 14%;
    }
    .imgDez{
        height: 23vh;
        width: 66%;
        margin-left: 14%;
    }
    .imgDPrimeira{
        margin-left: 16%;
    }
    .imgDPrimeira, .imgDSegunda{
        height: 13vh;
        width: 32.5%;
    }
    .imgDTerceira{
        height: 23vh;
        margin-left: 20%;
    }
    .imgDQuarta, .imgDQuinta, .imgDSexta, .imgDSetima{
        height: 10vh;
    }
    .imgDOitava, .imgDNona{
        height: 23vh;
        margin-left: 17%;
    }
    .img19{
        height: 23vh;
        margin-left: 11%;
    }
    .img20{
        height: 25vh;
        margin-left: 16%;
    }
    .img21{
        height: 14.5vh;
        margin-left: 4%;
    }
}
/*--------RESPONSIVIDADE CONTATO -----------*/
@media (max-width: 662px){


    .redes{
        width: 90%;
        margin-left: 5%;
        margin-bottom: 30%;
        height: 62vh;
    }
}
/*--------RESPONSIVIDADE ARCEVO-----------*/
@media (max-width: 662px){
    .componentes-do-acervo{
        display: grid;
        grid-template-columns: 56%;
        row-gap: 4.3%;
        margin-left:4%;
        margin-top: 44vh;
    }
    .componentes-do-acervo div{
        height: 55vh;
        width: 170%; 
        background-color: #ffffff;
        box-shadow: 0px 4px 20px 10px rgba(175, 162, 162, 0.20);
        margin-top: -38vh;
    }
    .componentes-do-acervo div img{
        height: 37vh;
        width: 95%;
        margin-left: 2.8%;
        margin-top: 2vh;
    }
    .arcevo{
        height: 3580vh;
    }
    .contatoA{
        margin-top: 2420vh;
        height: 100vh;
        width: 100%;
        display: block;
        text-align: center ;
    }
    div.imagemUm img{
        width: 80%;
        margin-left: 10%;
    }
    div.imagemDois img{
        height: 33vh;
    }
    div.imagemTres img{
        width: 88%;
        margin-left: 6%;
    }
    div.imagemQuatro img{
        height: 33vh;
    }
    div.imagemCinco img{
        height: 20vh;
    }
    div.imagemSeis img{
        width: 70%;
        margin-left: 15%;
    }
    div.imagemSete img{
        margin-left: 6%;
    }
    div.imagemOito img{
        width: 88%;
        margin-left: 7%;
    }
}
/*------Responsividades topicos------*/
@media (max-width: 662px){
    .containerParq{
        display: grid;
        grid-template-columns: 56%;
        margin-left:4%;
    }


    .containerParq div{
        height: 46vh;
        width: 170%; 
        background-color: #ffffff;
        box-shadow: 0px 4px 20px 10px rgba(175, 162, 162, 0.20);
        margin-top: -10vh;
    }


    .containerParq div img{
        height: 42vh;
        width: 95%;
        margin-left: 2.8%;
        margin-top: 2vh;
        
    }


    div.imgUm img{
        width: 80%;
        margin-left: 10%;
    }

    .containerParq div.imgUm{
        width: 140%; 
    }

    .containerParq div.imgDois{
        margin-left: -2%;
        height: 43.5vh;
    }

    div.imgDois img{
        height: 40vh;
    }

}
/*--------Responsividade -----------*/
@media (max-width: 662px){
    .res{
      width: 80%;
      height: 180vh;
    
    }
    .ep .eq .res{
        display: block;  margin-left: 19%;
    }
    .res div h4{
        margin-left: -25%;
        font-size: 30px;
    }
    .res div p{
        margin-top: 2vh;
        margin-left: 1.5%;
        font-size: 15px;
    }
    .mar{
        margin-top: 30vh;
    }
    .botton h1{
        margin-top: 120vh;
    }
    .rodap img{
        height: 5vh;
        width: 80%;
        margin-left: 9%;
    }
    .rodape{
        width: 100%;
    }
}
@media (max-width: 662px){
    .mare{
       margin-top: 280vh;
    }
    .AVP{
        margin-top: 220vh;
    }
    .PDC{
        margin-top: 160vh;
    }
}