/* Facebook and Instagram icons in main menu */

.menu-facebook > a,
.menu-instagram > a {
    font-size: 0 !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 5px !important;
    display: inline-flex !important;
    vertical-align: middle !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
    background-color: transparent !important;
}
/* Show social links properly in the mobile menu */
@media screen and (max-width: 899px) {

    .menu-facebook,
    .menu-instagram {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .menu-facebook::before {
        display: none !important;
    }

    .menu-facebook > a,
    .menu-instagram > a {
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-height: 24px !important;
        padding: 12px 20px 12px 50px !important;
        font-size: inherit !important;
        background-position: 18px center !important;
        background-size: 22px 22px !important;
    }
}
/* Facebook icon */
.menu-facebook > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M13.5 22v-9h3l.5-3.5h-3.5V7.3c0-1 .3-1.8 1.8-1.8H17V2.4c-.3 0-1.4-.1-2.7-.1-2.7 0-4.6 1.7-4.6 4.8v2.4H6.6V13h3.1v9h3.8Z'/%3E%3C/svg%3E") !important;
}

/* Instagram icon */
.menu-instagram > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 3.5A4.5 4.5 0 1 1 7.5 12 4.5 4.5 0 0 1 12 7.5Zm0 2A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5ZM17.8 5.6a1.1 1.1 0 1 1-1.1 1.1 1.1 1.1 0 0 1 1.1-1.1Z'/%3E%3C/svg%3E") !important;
}

/* Fine alignment on desktop */
@media screen and (min-width: 900px) {
    .menu-facebook > a,
    .menu-instagram > a {
        position: relative !important;
        top: -2px !important;
    }
}
/* Divider between Donations and social media icons */
@media screen and (min-width: 900px) {
    .menu-facebook {
        position: relative !important;
        margin-left: 20px !important;
        padding-left: 20px !important;
    }

    .menu-facebook::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 30px;
        background-color: rgba(255, 255, 255, 0.9);
    }
}