.barra-fixa{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 45px;
    font-size: 12px;
    background: #f2f2f2;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
    z-index: 9999;
}
.barra-fixa .flex{
    height: 45px;
    gap: 1em;
}
.barra-fixa .flex > div{
    white-space: nowrap;
}
.barra-fixa img,
.barra-fixa img{
    max-width: 16px;
    max-height: 16px;
    vertical-align: middle;
    margin-top: -2px;
}
.barra-fixa .redes{
    display: inline-block;
    vertical-align: middle;
}
.barra-fixa .redes a{
    display: inline-block;
    width: 24px;
    height: 24px;
    text-align: center;
    color: var(--mc);
    background: var(--m);
    border-radius: 100px;
}
.barra-fixa .redes a:hover{
    background: var(--mh);
}
.barra-fixa .redes a img{
    position: relative;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    max-width: 14px;
    max-height: 14px;
    vertical-align: middle;
    margin-top: -2px;
    filter: brightness(0) invert(1);
}
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
    .barra-fixa{
        display: none;
    }
}

header{
    margin-top: 45px;
    padding: 2em;
    text-align: center;
    background: #f2f2f2;
    /*border-top: 4px solid  #ccc;
    border-left: 4px solid  #ccc;
    border-right: 4px solid  #ccc;*/
}
header img{
    width: 100%;
    max-width: 223px;
}
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
    header{
        margin-top: 0;
    }
}