/**
 * Mobile header alignment.
 *
 * Keeps the desktop/tablet social and search controls vertically aligned.
 * On phones, keeps the menu on the left, centers the brand in the viewport,
 * aligns the search control on the right and hides only the social links.
 */
@media only screen and (min-width: 768px) {
    #fl-top-bar .social-icons {
        display: flex;
        align-items: center;
        height: 80px;
        overflow: visible;
    }

    #fl-top-bar .social-icons ul {
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #fl-top-bar .social-icons ul li,
    #fl-top-bar .social-icons ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        line-height: 1;
    }

    #fl-top-bar .search-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        line-height: 1;
        text-align: center;
    }
}

@media only screen and (max-width: 767.98px) {
    #fl-top-bar .fl-container {
        height: 80px;
    }

    #fl-top-bar .social-icons {
        display: none;
    }

    #top-logo {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 50%;
        float: none;
        max-width: calc(100% - 140px);
        margin: 0;
        transform: translateX(-50%);
    }

    #top-logo a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
    }

    #top-logo img {
        display: block;
        max-width: 100%;
        margin: 0;
    }

    #fl-top-bar .drawer-icon,
    #fl-top-bar .search-icon {
        position: relative;
        z-index: 2;
    }

    #fl-top-bar .search-icon {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 80px;
        font-size: 20px;
        line-height: 1;
        text-align: center;
    }
}