#mainMenu {

    padding:0;
    text-align: center;
    z-index: 4000;
    background-color: var( --pageBackground );
    font-size: 1.25vw;
    text-transform: uppercase;
    width:90vw;
    margin: 2vw auto 1vw auto;

}

#mainMenu > li {

    display: inline-block;
    list-style-type: none;
    position: relative;
    z-index: 5000;
    width: var( --mainMenuItemWidth  );
}

/* #mainMenu .sub {

    list-style-type: none;
    margin: 0;
    min-width: 160px;
    padding:0;
    position: absolute;
    text-align: left;
    z-index: 5001;

} */

/* #mainMenu .sub.switchedOn {

    display: block;

}

#mainMenu .sub.switchedOff {

    display: none;

} */

#mainMenu.breakPointMobile {

    border: 1px solid var( --pageText );
    width: 80vw;
    position: fixed;
    text-align: left;
    top:0;
    left:-120vw;
    /* filter: drop-shadow(2px 2px 2px var( --colourControls ) ); */
    z-index: 5001;
    display: block;
    height: auto;
    font-size: 4vh;

}

#mainMenu.breakPointMobile.switchedOff  {

    left:-120vw;

}

#mainMenu.breakPointMobile.switchedOn   {

    left:0vw;

}

/* #mainMenu.breakPointMobile .sub {

    position: relative;
    width: 80vw;
    z-index:6000;
    display: none;

}

#mainMenu.breakPointMobile > li.hasSub:hover > .sub {

    height:auto;

} 

#mainMenu.breakPointMobile .sub.switchedOff {

    display: none;

}

#mainMenu.breakPointMobile .sub.switchedOn {

    display: block;
    
} */


#mainMenu.breakPointMobile > li {

    display:block;
    margin: 2vh; 

}

/* #mainMenu.breakPointMobile .sub li {

    margin: var( --sitePaddingMobile );    

} */

#mobileHeader {

    background-color: var( --pageBackground );
/*     position: fixed;
    top:0px;
    left:0px; */
    z-index: 3000;
    width:100%;
    height: var( --mobileMenuHeaderSize );
    

}

#menuMobileOpen,
#menuMobileClose {

    position: fixed;
    right: var( --siteMarginMobile  );
    top: 15px;
    vertical-align: middle;
    width: var( --mobileMenuIconSize );
    height: var( --mobileMenuIconSize );
    cursor: pointer;
    z-index: 3100;
    /* background-color: var( --pageBackground ); */

}

.menuSubOpen,
.menuSubClose {

    position: absolute;
    top: calc( var( --mobileMenuIconSize ) * 0.075 );
    right:0;
    width: calc( var( --mobileMenuIconSize ) * 0.66 );
    height: calc( var( --mobileMenuIconSize ) * 0.66 );
    cursor: pointer;
    z-index: 4600;
    background-color: var( --pageBackground );

}

#mobileHeader.switchedOff,
#menuMobileOpen.switchedOff,
#menuMobileClose.switchedOff,
.menuSubOpen.switchedOff,
.menuSubClose.switchedOff {

    display: none;

}

#mobileHeader.switchedOn,
#menuMobileOpen.switchedOn,
#menuMobileClose.switchedOn {

    display: block;

}

.menuSubOpen.switchedOn,
.menuSubClose.switchedOn {

    display: inline-block;

}