/*******************************************************

    ██╗  ██╗███████╗ █████╗ ██████╗ ███████╗██████╗
    ██║  ██║██╔════╝██╔══██╗██╔══██╗██╔════╝██╔══██╗
    ███████║█████╗  ███████║██║  ██║█████╗  ██████╔╝
    ██╔══██║██╔══╝  ██╔══██║██║  ██║██╔══╝  ██╔══██╗
    ██║  ██║███████╗██║  ██║██████╔╝███████╗██║  ██║
    ╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═════╝ ╚══════╝╚═╝  ╚═╝

 *******************************************************/

    #top-bar {
        background: var(--color-blue);
        height: 3rem;
        line-height: 3rem;
    }

        #top-bar .panel {
            padding: 0 calc(2*var(--grid-gutter));
        }

    .responsiville-scrollmenu-active header {
        opacity: 0.9;
        border-bottom:  0.2rem solid var(--color-gray-light);
    }

    /* Logo */

    .header-logo {
        position: relative;
    }

    .responsiville-mobimenu-open .header-logo {
        display:  none;
    }

    .responsiville-scrollmenu-enabled .header-logo img {
        position: absolute;
        top:  -0.5rem;
        left:  50%;
        transform: translateX(-50%);
    }

    .laptop .responsiville-scrollmenu-enabled .header-logo img {
        top:  -2rem;
    }

        .header-logo a,
        .header-logo h1 {
            line-height: 1;
            font-size: 2rem;
            padding: 0 !important;
            margin: 0 !important;
        }

        .header-logo a:hover {
            opacity: 1;
        }

            .header-logo img {
                max-height: 8rem;
                transition-property: max-height;
                position: absolute;
                top:  90%;
                left: 50%;
                transform: translate( -50%, -50%);
            }

            .laptop .header-logo img {
                top:  80%;
                max-height: 12rem;
            }

            .responsiville-scrollmenu-wrapper .header-logo img {
                max-height: 6rem;
            }

            .laptop .responsiville-scrollmenu-wrapper .header-logo img {
                max-height: 9rem;
            }

    .header-overlay {
        position: absolute;
        width:  100%;
        height: 100%;
        display: block;
        background: url('../img/header_overlay.png') repeat;
        opacity: 0.3;
        bottom: 0;
        left:  0;
    }

        .donate {
            position: absolute;
            top:  9rem;
            right:  var(--grid-gutter);
            background: rgba(var(--orange), 0.6);
            color: var(--color-black);
            padding: 0;
            z-index:  9;
            text-align: center;
            border-radius:  50%;
            width: 9rem;
            height: 9rem;
            line-height: 1.8rem;
            font-size: 1.3rem;
            opacity: 0.6;
        }

        .laptop .donate {
            position: fixed;
            top:  18rem;
            width: 10rem;
            height: 10rem;
            font-size: 1.6rem;
        }

        .donate:hover {
            opacity: 1;
            background: var(--color-blue);
            color: var(--color-white);
            -moz-transition: all 0.2s ease-in;
            -webkit-transition: all 0.2s ease-in;
            -o-transition: all 0.2s ease-in;
            transition: all 0.2s ease-in;
        }

            .donate div {
                position: absolute;
                top:  50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width:  100%;
            }

            .donate span {
                font-family: var(--font-icons);
                color: var(--color-red);
                display: block;
                font-size: 2.5rem;
                line-height: 3rem;
            }

            .donate:hover span {
                font-size: 3.6rem;
                -moz-transition: all 0.2s ease-in;
                -webkit-transition: all 0.2s ease-in;
                -o-transition: all 0.2s ease-in;
                transition: all 0.2s ease-in;
            }

.header-social {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    left: var(--grid-gutter) !important; 
}

.laptop .header-social {
    /*display: none;*/
    position: relative !important;
    top: auto !important;
    transform: none;
    left: auto !important;
}

.laptop .header-items .header-social {
    display: none;
}