﻿
header#mainHeader {
    background: rgba(255, 255, 255, 1.0);
    width: 100%;
    padding-left: 51px;
    padding-right: 100px;

    display: grid;
    grid-template-columns: 150px auto;
    grid-template-rows: 54px 126px 14px;
    grid-template-areas:
        'secondaryMenu secondaryMenu'
        'logo mainMenu';
    column-gap: 2em;
}

/*@media (max-width: 1500px) {*/
@media (max-width: 95em) {
    header#mainHeader {
        padding-left: 18px;
        /*background: aqua;*/
        column-gap: 0.8em;
    }
}

/*@media (max-width: 1300px) {*/
@media (max-width: 80em) {
    header#mainHeader {
        grid-template-columns: 120px auto;        
        grid-template-rows: 54px 106px 8px;
        padding-right: 90px;
    }
}


/*@media (max-width: 1050px) {*/
@media (max-width: 66em) {
    header#mainHeader {
        display: flex;
        height: auto;
        padding: 5%;
        justify-content: flex-start;
        align-items: center;
    }
}

header#mainHeader .logo {
    grid-area: logo;
    border: 0px solid green;
    background-image: url('../Pix/Layout/Logo-Buergerhaus-Hemelingen.png');
    background-repeat: no-repeat;
    background-size: 150px auto;
    width: 150px;
    height: 106px;
}

@media (max-width: 80em) {
    header#mainHeader .logo {
        background-size: 120px auto;
        width: 120px;
        height: 85px;
        margin-right: 30px;
    }
}

/*@media (max-width: 1050px) {*/
@media (max-width: 66em) {
    header#mainHeader .logoPositioner {
        flex: 2 1 auto;
        display: flex;
        justify-content: center;
    }

    header#mainHeader .logoPositioner .logo {
        background-size: 120px 85px;
        width: 120px;
        height: 85px;
        position: static;
        top: auto;
        left: auto;
    }
}


