/** ----------  HAMBURGER MENU  ---------- **/

/*STYLE */

.hamburger_overlay {
background-color: #ffffff;
}

.hamburger_overlay .button {
background-color: /*<menuText>*/;
color: #ffffff;
}

/*----------------------------------------------------------------------
Layout Functions
------------------------------------------------------------------------*/
.hide-overlay .hamburger_overlay {
display: none;
}

.hamburger_overlay .overlay-content {
box-sizing: border-box;
padding: 80px 20px 20px 20px;
}

.hamburger-menu-header {
position: fixed;
height:60px;
border-bottom: 1px solid black;
background-color:white;
width: 100%;
top:0;
left:0;
z-index: 260;

}

.hamburger_overlay .buttons-container {
position: fixed;
right: 18px;
top: 16px;
height:60px; width: 60px;
}

.hamburger_overlay .button {
margin-left: 10px;
display: inline-block;
padding: 0px 12px;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
font-size: 25px;
line-height: 36px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
}
.hide-overlay {
height: auto;
overflow-y: scroll;
}
.show-overlay {
height: 100%;
overflow-y: hidden;
}

html, body {
height: 100%;
/* If omited, background page would keep on scrolling after the overlay one reaches its limit. */
}

.hamburger_overlay {
position: fixed;
/* You can use either this combination */
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Or the following one, depending on your need. In this case, I wanted the overlay to slouch back to the left, so it has to be of a fixed width. As long as overlay covers the whole page, it does the trick.
*/

/*top: 0; left: 0; right: 0; bottom: 0;*/
}

.hamburger_overlay .overlay-content {
height: 100%;
overflow: scroll;
overflow-x: hidden;
}