.cabecalho {
    color: var(--branco);

    width: 100%;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: left;

    padding-top: .75rem;
    padding-bottom: .65rem;
 
}

.cabecalho__logo {
    margin-bottom: 1rem;
    align: left;
}

.logomarca {
    max-width: 50%;
    position:  absolute;
    left: 10%;
    top:  12%;
}
#menu {
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    min-height: 14%;
    padding-bottom: 0%;
    margin: 0;
    background-color: white;
    width: 100%;
}
    ul.menu1 {
        margin-left: 25%;
        margin-right: 5%;
        padding: 0;
    }
    li.menu1 {
        margin-top:  2%;
        padding: 0;
    }
.cabecalho__navegacao {
    text-align: right;
	margin-right: 7.0rem;
    margin-left:  12.0rem;
}

.cabecalho__link {
    font-size: 0.9rem;
    display: inline-grid;
    margin-bottom: 1.5rem;
    margin-left: 1.2rem;
}
/* Galeria de SLIDES automático */
.galeria {
    position: relative;
    overflow: hidden;
    height: 600vw;
    height: 100%;
     display: flex;
    flex-direction: column;
    align-items: center;
}

.foto {
    position: absolute;
    margin-top: 3rem;
    width: 1400px;
    max-width: 100%;   /* Máximo da largura da imagem */               
    max-height: 100%;  
    min-height: 100%;
    opacity: 0;
    animation-name: animacao;
    animation-duration: 10s;
    animation-iteration-count: infinite;


}


@keyframes animacao {
    60% { 
        opacity: 3;
    transform:scale(1.1,1.1);
    
}
50% {
    opacity: 3;  

}

.foto:nth-child(1){

}
.foto:nth-child(2){
    animation-delay: 6s;
}
.foto:nth-child(3){
    animation-delay: 15s;
}
.foto:nth-child(4){
    animation-delay: 1s;
}
.cabecalho__link:hover {
    color: #0000CD;
}

.area {
    background-color: #1381d1;
    height: 2rem;
    text-align: center;
    align-items: center;
    font-weight: bold;
    width: 15rem;
    color:  white;
    border-radius: 10px;
}

.area:hover {
    color: white;
}

@media screen and (min-width: 1024px) {
    .cabecalho 
        flex-direction: row;
        justify-content: space-between;

        border: none;
    

    } 

