@media screen and (min-width: 951px) {
    .menuBtn {
        display:none;
    }
}


@media screen and (max-width: 950px) {
    body.menuOpen {
        position:fixed;
        width:100%;
    }    
    .menuBtn {
        position:absolute;
        top:0;
        right: 0;
        z-index:2;
        cursor:pointer;
        font-size: 10px;
        text-align: center;
        padding-right: var(--gutter-left);
        display: flex; 
        flex-direction: column;
        justify-content: center;
        height: var(--header-height);
    }
    .menuBtn svg {
        fill: none;
        stroke: currentColor;
        margin-bottom: .2em;
    }
    #menuCloseBtn {
        display:none;
    }
    .cross {
        display:none;
    }
    .cross + #menuCloseBtn {
        display:flex;
    }
    #header #topMenu {
        position:fixed;
        top:var(--header-height);
        left: var(--gutter-left);
        right: var(--gutter-left);
        height:calc(100% - var(--header-height));
        z-index:5;
        overflow-y:auto;
        opacity:0;
        visibility:hidden;
        transition: opacity .5s;
        background: #fff;
    }
    #header.open #topMenu {
        opacity:1;
    }
    #header.visible #topMenu {
        visibility:visible;
    }
}