#menu {
    position: fixed;
    bottom: 0;
    width: calc(100% - 24px);
    padding: 12px;
    display: grid;
    align-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    border-top: 1px solid rgba(182, 182, 182, 0.33);
    background: #fff;
}

#menu img {
    width: 26px;
    /*filter: brightness(0) saturate(100%) invert(43%) sepia(46%) saturate(5231%) hue-rotate(173deg) brightness(98%) contrast(101%);*/
}

#menu a {
    /*padding: 6px;*/
    border-radius: 12px;
    font-size: 0.85em;
}

.menu-topo {
    display: grid;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 12px;
    grid-template-columns: 36px 1fr 36px;
    justify-items: center;
    background: #fff;
}

.menu-topo a {
    line-height: 0;
}

.menu-topo h4 {
    color: var(--cor2);
}

.menu-topo img {
    width: 32px;
}

.menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menu-fill {
    opacity: 0;
    transition: 0.5s;
    position: absolute;
}

.menu-link.ativo .menu-fill {
    opacity: 1;
}