:root {
    --menuHomebar-background: linear-gradient(to right, rgba(51,51,51,0.24) 0%,rgba(51,51,51,0) 100%);
    --menuButton-color: rgba(255,255,2551,1);
    --hambuger-menu-color: rgba(255,255,2551,1);
}

.slideout-menu {
    position: absolute;
    top: 0px;
    left: -1080px;
    width: 1080px;
    height: 600px;
    z-index: 6;
    color: #fff;
}

.slideout-menu h3 {
    position: relative;
    color: #fff;
}

#menuActivator
{
    display: block; position: fixed; left: 0; top: 0; background: transparent; color: #000; width: 100px; height: 100%; z-index: 12; cursor: pointer;
}

#menuDismissArea
{
    display: block; position: absolute; right: 0; top: 0; background: rgba(0,0,0,0.7); color: #000; width: 100px; height: 100%; z-index: 9; cursor: pointer;
}
#menuDismissAreaContainer
{
position: relative; width: 100px; height: 100px;
}

#menuDismissButtonContainer
{
    position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0px; background: rgba(255,0,0,0);
}

#menuDismissButton
{
    text-transform: uppercase; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 1px; line-height: 9px; color: rgba(255,255,255,0); text-align: center;
}

#menuIcon
{
    display: block; position: fixed; left: 0; top: 0;  color: #000; width: 100px; height: 100px; z-index: 11;
}
#menuIconContainer
{
    position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0px; background: rgba(255,0,0,0);
}

#menuButtonContainer
{
    position: relative; width: 100px; height: 100px;
}

#hamburgerContainer
{
    position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0px; background: rgba(255,0,0,0);
}

.hamburger-menu
{
    width:30px;
    height:5px;
    background-color: var(--hambuger-menu-color);
    border-radius:5px;
    position:relative;
}

.hamburger-menu:after, .hamburger-menu:before
{
    content: '';
    width: 100%;
    height:5px;
    background-color: var(--hambuger-menu-color);
    position:absolute;
    border-radius:5px;
}

.hamburger-menu:after
{
    top:10px;
}

.hamburger-menuHighlight
{
    background-color: #000!important;
}

.hamburger-menuHighlight:after, .hamburger-menuHighlight:before
{
    background-color: #000!important;
}

#hamburgerText
{
    position: absolute; bottom: 0; text-transform: uppercase; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 8.7px; font-weight: 700; letter-spacing: 1px; line-height: 9px;
}

#menuHomebar
{
    display: block; position: fixed; left: 0; top: 0; background: var(--menuHomebar-background); color: #FFF; width: 100px; height: 100%; z-index: 7;
}

.menuHomebarHighlight
{
    background: rgba(28,168,221,1)!important;
}

#menuButton
{
    display: block; position: fixed; left: 0; top: 100px; background: transparent; color: var(--menuButton-color); width: 100px; height: 100px; z-index: 8;
}

.menuButtonHighlight
{
    color: #000!important;
}

#menuBG
{
    width: calc(100% - 100px); height: 100%; background: #252830;
}

#menuContainer
{
    padding: 0 200px 0 200px; overflow-y: auto; height:100%
}


#menuHeader
{
    display: block; position: relative; left: 0; top: 0; background: #252830; width: auto; height: 100px; padding: 30px 100px 80px 0;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 30px;
}

#menuFooter
{
    display: block; position: absolute; left: 0; bottom: 0; background: #252830; width: calc(100% - 150px); height: auto; padding: 30px 100px 30px 200px;
    font-size: 10px;
}

#menuHR
{
    width: 100%; height: 1px; margin: 30px 0 10px 0; border-top: 1px solid; border-color: rgba(255,255,255,.2);
}

#menuContainer h3 a:link	{ color: rgba(28,168,221,1) }
#menuContainer h3 a:visited { color: rgba(28,168,221,1) }
#menuContainer h3 a:hover { color: rgba(28,168,221,1) }

#menuContainer a:link	{ color: #fff; }
#menuContainer a:visited { color: #fff; }
#menuContainer a:hover { color: #fff; }