// 1: Responsive menu styling

.slideout-menu {
	display: none;
	overflow-y: auto;
	position: fixed;
	
    top: 0; right: 0; bottom: 0;
	
    width: 256px;
	z-index: 0;
    
	-webkit-overflow-scrolling: touch;
}

.slideout-panel {
    background: $color-white-100;
    position:relative;
    z-index: 1;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
}

.slideout-open #menu.slideout-menu {
    display: block;
}

#menu {
    box-sizing: border-box;
    padding: 24px;
}

.fixed {
    backface-visibility: hidden;
    position: fixed;
    transition: transform 300ms ease;
    z-index: 2;
}

.fixed-open {
  transform: translate3d(0px, 0px, 0px);
}

.toggle-button {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 46px;
    padding: 0;
    margin: 15px 0 0 0;
}