/* Positioning & Sizing */

a#menu-button:link, a#menu-button:visited, a#menu-button:active, a#menu-button:hover, a#menu-button:focus
{
float: right;
margin: 34px 0 0 0;
font-size: 40px;
line-height: 40px;
color: #006376;
}

html.mmenu-opened, html.mmenu-opened body
{
height: 100%;
width: 100%;
overflow: hidden;
}

html.mmenu-opened body
{
position: relative;
}

.mmenu
{
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

.mmenu, .mmenu *
{
-webkit-text-size-adjust: none;
font-family: "Open Sans", tahoma, arial, sans-serif;
font-size: 12px;
font-weight: 700;
}

.mmenu ul, .mmenu li, .mmenu li > a, .mmenu li > span
{
display: block;
padding: 0;
margin: 0;
background: #333333;
}

.mmenu > ul
{
margin: 0;
background: #333333;
}

.mmenu .mmenu-hidden
{
display: none;
}

html.mmenu-opened .mmenu.mmenu-opened
{
display: block;
}

html.mmenu-opened .mmenu-page
{
box-shadow: 0 0 20px rgba( 0, 0, 0, 0.8 );
background-color: inherit;
min-height: 100%;
position: absolute;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#mmenu-blocker
{
display: none;
}

html.mmenu-opened #mmenu-blocker
{
background: rgba( 255, 255, 255, 0.1 );
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 2;
}

html.mmenu-opened .mmenu-page, html.mmenu-opened #mmenu-blocker
{
-webkit-transition: left 0.5s ease, right 0.5s ease, margin 0.5s ease;
-moz-transition: left 0.5s ease, right 0.5s ease, margin 0.5s ease;
transition: left 0.5s ease, right 0.5s ease, margin 0.5s ease;
}

html.mmenu-left.mmenu-opened .mmenu-page, html.mmenu-left.mmenu-opened #mmenu-blocker
{
margin-left: 0px;
left: 0%;
}

html.mmenu-left.mmenu-opening .mmenu-page, html.mmenu-left.mmenu-opening #mmenu-blocker
{
margin-left: 0px;
left: 100%;
}

html.mmenu-right.mmenu-opened .mmenu-page, html.mmenu-right.mmenu-opened #mmenu-blocker
{
margin-right: 0px;
right: 0%;
}

html.mmenu-right.mmenu-opening .mmenu-page, html.mmenu-right.mmenu-opening #mmenu-blocker
{
margin-right: 0px;
right: 100%;
}

/* Styling */

.mmenu
{
background: #222222;
}

.mmenu *
{
text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.mmenu li
{
border: none;
border-top: 1px solid #444;
border-bottom: 1px solid #202020;
position: relative;
}

.mmenu li:first-child
{
border-top-width: 1;
}

.mmenu li#top-home
{
border-top: 0;
}

.mmenu li#top-home a
{
padding: 3px 0 0 0;
background: url('images/menu-close-x.png') no-repeat #222222 96% 50%;
background-size: 18px;
background-position: right 16px bottom 48%;
}

.mmenu li > a, .mmenu li > span
{
text-indent: 20px;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 40px;
overflow: hidden;
}

.mmenu li > a, .mmenu li > span, .mmenu li > a:hover
{
color: #d0d0d0;
text-decoration: none;
}

.mmenu li.mmenu-selected > a, .mmenu li.mmenu-selected > span
{
background: #222222;
}

.mmenu li.mmenu-selected > a.mmenu-subopen
{
background: #222222;
}

/* Submenu - Open Link */

.mmenu a.mmenu-subopen
{
border-left: 1px solid #202020;
width: 50px;
height: 40px;
padding: 0;
position: absolute;
right: 85px;
top: 0;
z-index: 2;
}

html.mmenu-right .mmenu a.mmenu-subopen
{
right: 0;
}

.mmenu ul ul a.mmenu-subopen
{
right: 0;
}

.mmenu a.mmenu-subopen.mmenu-fullsubopen
{
width: 100%;
}

/* Submenu - Close Link */

.mmenu a.mmenu-subclose
{
background: #222;
text-indent: 40px;
padding-top: 10px;
margin-top: -10px;
}

/* Submenu - Vertical */

.mmenu.mmenu-vertical ul ul
{
display: none;
padding: 0;
}

.mmenu.mmenu-vertical li.mmenu-opened > ul
{
display: block;
}

.mmenu.mmenu-vertical ul ul li:last-child
{
border-bottom-width: 0;
}

.mmenu li ul li
{
border-top: 1px solid #006e83;
border-bottom: 1px solid #004350;
}

ul.mmenu-submenu li a:link, ul.mmenu-submenu li a:visited, ul.mmenu-submenu li a:active, ul.mmenu-submenu li a:hover, ul.mmenu-submenu li a:focus
{
color: white;
background: #006376;
}

ul.mmenu-submenu li ul li
{
border-top: 1px solid #0099b6;
border-bottom: 1px solid #006e83;
}

ul.mmenu-submenu li ul li a:link, ul.mmenu-submenu li ul li a:visited, ul.mmenu-submenu li ul li a:active, ul.mmenu-submenu li ul li a:hover, ul.mmenu-submenu li ul li a:focus
{
color: white;
background: #00859f;
}

/* Arrows */

.mmenu a.mmenu-subopen:after, .mmenu a.mmenu-subclose:before
{
content: '';
border: 4px solid #d0d0d0;
border-left: none;
border-top: none;
display: block;
width: 6px;
height: 6px;
position: absolute;
}

.mmenu a.mmenu-subopen:after
{
right: 20px;
top: 13px;
-webkit-transform: rotate( 45deg );
transform: rotate( 45deg );
}

.mmenu a.mmenu-subclose:before
{
-webkit-transform: rotate( 135deg );
transform: rotate( 135deg );
}

.mmenu.mmenu-vertical li.mmenu-opened > a.mmenu-subopen:after
{
-webkit-transform: rotate( 45deg );
transform: rotate( 45deg );
}

/* Positioning & Sizing For Larger Screens */

@media all and (min-width: 500px){

.mmenu.mmenu-vertical
{
width: 500px;
}

html.mmenu-right .mmenu.mmenu-vertical
{
left: auto;
right: 0;
}

.mmenu.mmenu-horizontal
{
width: 1000px;
}

html.mmenu-right .mmenu.mmenu-horizontal
{
left: auto;
right: -500px;
}

html.mmenu-left.mmenu-opening .mmenu-page, html.mmenu-left.mmenu-opening #mmenu-blocker
{
left: 500px;
}

html.mmenu-right.mmenu-opening .mmenu-page, html.mmenu-right.mmenu-opening #mmenu-blocker
{
right: 500px;
}

}

@media(max-width: 500px){

a#menu-button:link, a#menu-button:visited, a#menu-button:active, a#menu-button:hover, a#menu-button:focus
{
margin: 24px 0 0 0;
}

}

@media(max-width: 440px){

a#menu-button:link, a#menu-button:visited, a#menu-button:active, a#menu-button:hover, a#menu-button:focus
{
margin: 22px 0 0 0;
}

}

@media(max-width: 320px){

a#menu-button:link, a#menu-button:visited, a#menu-button:active, a#menu-button:hover, a#menu-button:focus
{
margin: 20px 0 0 0;
}

}

@media(max-width: 300px){

a#menu-button:link, a#menu-button:visited, a#menu-button:active, a#menu-button:hover, a#menu-button:focus
{
margin: 17px 0 0 0;
}

}