#mainMenu {

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

}

#mainMenu > li {

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

}

#mainMenu > li:first-of-type {

    text-align: left;
    padding-left: 2vw;

}

#mainMenu > li:nth-of-type( 2 ) {

    padding-right: 3.5vw;

}

#mainMenu > li:nth-of-type( 4 ) {

    padding-left: 8.75vw;

}

#mainMenu > li:last-of-type {

    text-align: right;
    padding-right: 2vw;
    
}

/* mobile */

#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: 5vw;

}

#mainMenu.breakPointMobile > li {

    width:100%;
    text-align: left;
    padding-left: 0;
    padding-right: 0;

}

#mainMenu.breakPointMobile.switchedOff  {

    left:-120vw;

}

#mainMenu.breakPointMobile.switchedOn   {

    left:0vw;

}

#mainMenu.breakPointMobile > li {

    display:block;
    margin: 2vh; 

}

#mobileHeader {

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

}

#menuMobileOpen,
#menuMobileClose {

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

}

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

    display: none;

}

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

    display: block;

}

.menuSubOpen.switchedOn,
.menuSubClose.switchedOn {

    display: inline-block;

}