/*
 * Sample Customization - Start
 * Copy sample customization section to your css and override and/or add accordingly
 */

/* Drawer Color */
nav.navmenu .navmenu-drawer {
	background-color: white;
}

/* Button Size */
nav.navmenu button.navmenu-menubutton-show {
	width: 3%;
	margin: 0 1%;
}

nav.navmenu .navmenu-drawer .navmenu-drawer-header button.navmenu-menubutton-hide {
	width: 8%;
}

nav.navmenu .navmenu-drawer .navmenu-drawer-content {
	margin: 1.5vh 8%;
	padding: 0px;
}

/* Mobile/Portraitn with min width (Soft Keyboard) */
@media (max-width: 500px), screen and (orientation:portrait) {

	nav.navmenu button.navmenu-menubutton-show {
		width: 8%;
		margin: 0 1%;
	}

	nav.navmenu .navmenu-drawer .navmenu-drawer-header button.navmenu-menubutton-hide {
		width: 15%;
	}

	nav.navmenu .navmenu-drawer .navmenu-drawer-content {
		margin: 1vh 15%;
	}

}

/*
 * Sample Customization - End
 */

/*****************************************/
/* Drawer Size - no need to edit usually */
/*****************************************/

/* Drawer sizes */
nav.navmenu .navmenu-drawer {
	width: 38%;
}

/* Position value is negative drawer width */
nav.navmenu-right .navmenu-drawer-hide,
nav.navmenu-right .navmenu-drawer {
	right: -38%;
}

nav.navmenu-left .navmenu-drawer-hide,
nav.navmenu-left .navmenu-drawer {
	left: -38%;
}


/* Mobile/Portraitn with min width (Soft Keyboard) */
@media (max-width: 500px), screen and (orientation:portrait) {
	nav.navmenu .navmenu-drawer {
		width: 62%;
	}

	nav.navmenu-right .navmenu-drawer-hide,
	nav.navmenu-right .navmenu-drawer {
		right: -62%;
	}
	nav.navmenu-left .navmenu-drawer-hide,
	nav.navmenu-left .navmenu-drawer {
		left: -62%;
	}
}



/****************************************/
/* Standard CSS - no need to edit below */
/****************************************/

nav.navmenu button.navmenu-menubutton {
	background: none;
	border: none;
	cursor: pointer;
}

nav.navmenu button.navmenu-menubutton img {
	display: block;
	width: 100%;
}

nav.navmenu-left .navmenu-drawer .navmenu-drawer-header button.navmenu-menubutton-hide,
nav.navmenu-right .navmenu-drawer .navmenu-drawer-header button.navmenu-menubutton-hide {
	position:absolute;
	top: 0;
}

nav.navmenu-right .navmenu-drawer .navmenu-drawer-header button.navmenu-menubutton-hide {
	left: 0;
}

nav.navmenu-left .navmenu-drawer .navmenu-drawer-header button.navmenu-menubutton-hide {
	right: 0;
}

nav.navmenu button.navmenu-menubutton-show,
nav.navmenu button.navmenu-menubutton-hide {
	padding: 0px;
}

nav.navmenu button.navmenu-menubutton-show {
	position: fixed;
	top: 0;
}

nav.navmenu-right button.navmenu-menubutton-show {
	right: 0%;
}
nav.navmenu-left button.navmenu-menubutton-show {
	left: 0%;
}


/* Menu Drawer */
nav.navmenu div.navmenu-drawer-shadow {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.6;
	filter:alpha(opacity=60);
}

nav.navmenu .navmenu-drawer {
	position: fixed;
	top: 0;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow-y: scroll;

}

/* Drawer content */
nav.navmenu .navmenu-drawer .navmenu-drawer-header {
	display: block;
	position: sticky;
	top:0;
}

nav.navmenu .navmenu-drawer li {
	display: block;
	overflow-wrap: break-word;
}

/* Transition and right/left required always for effect */
nav.navmenu-right .navmenu-drawer-hide{
	transition: right 0.1s;
}
nav.navmenu-right .navmenu-drawer-show{
	right: 0%;
	transition: right 0.5s;
}
nav.navmenu-left .navmenu-drawer-hide{
	transition: left 0.1s;
}
nav.navmenu-left .navmenu-drawer-show{
	left: 0%;
	transition: left 0.5s;
}


/* Mobile/Portraitn with min width (Soft Keyboard) */
@media (max-width: 500px), screen and (orientation:portrait) {

	/* right/left 0% are still necessary here */
	nav.navmenu-right .navmenu-drawer-show{
		right: 0%;
	}
	nav.navmenu-left .navmenu-drawer-show{
		left: 0%;
	}


}