/* HEADER MENU BUTTON */
#btnMainMenu
{
	bottom:0px;
	cursor:pointer;
	height:48px;
	position:absolute;
	right:10px;
	width:48px;
	z-index:2;
}

#btnMainMenu div
{
	background-color:#ffffff;
	height:2px;
	left:12px;
	position:absolute;
	right:12px;
	transition:background-color 0.25s, left 0.25s, right 0.25s, top 0.25s, transform 0.25s;
}

#btnMainMenu div:nth-child(1)
{
	top:14px;
}

#btnMainMenu div:nth-child(2)
{
	top:22px;
}

#btnMainMenu div:nth-child(3)
{
	top:30px;
}

#btnMainMenu.close div:nth-child(1)
{
	top:22px;
	transform:rotate(-45deg);
}

#btnMainMenu.close div:nth-child(2)
{
	left:24px;
	right:24px;
}

#btnMainMenu.close div:nth-child(3)
{
	top:22px;
	transform:rotate(45deg);
}

/* APP MENU */
#divAppMenu
{
	background-color:rgba(0, 0, 0, 0.25);
	height:100%;
	left:0px;
	position:fixed;
	top:0px;
	transition:opacity 0.1s;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	width:100%;
	z-index:1;
}

#divAppMenu.hide
{
	animation-duration:0.1s;
	animation-name:hideMenu;
	opacity:0;
	width:0%;
}

#divAppMenu #divMainMenu
{
	background:#ffffff;
	bottom:0px;
	box-shadow:0px 0px 7px 0px rgba(0, 0, 0, 0.5);
	max-width:420px;
	overflow-y:auto;
	padding:15px 0px 30px;
	position:absolute;
	right:0px;
	top:80px;
	transform:translateX(0px);
	transition:transform 0.2s;
	width:100%;
}

#divAppMenu.hide #divMainMenu
{
	transform:translateX(430px);
}

#divAppMenu .divMenuItem
{
	background-color:rgba(0, 0, 0, 0);
	cursor:pointer;
	font-size:14px;
	overflow:hidden;
	position:relative;
	transition:background-color 0.1s;
}

#divAppMenu .divMenuItem:hover
{
	background-color:#547736;
}

#divAppMenu .divMenuItemIcon
{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	height:24px;
	left:20px;
	position:absolute;
	top:8px;
	transition:opacity 0.1s;
	width:24px;
}

#divAppMenu .divMenuItem:hover .divMenuItemIcon
{
	opacity:0;
}

#divAppMenu .divMenuItemIconHover
{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	height:24px;
	left:20px;
	opacity:0;
	position:absolute;
	top:8px;
	transition:opacity 0.1s;
	width:24px;
}

#divAppMenu .divMenuItem:hover .divMenuItemIconHover
{
	opacity:1;
}

#divAppMenu .divMenuItemLabel
{
	color:#315a7a;
	font-weight:600;
	line-height:16px;
	padding:12px 20px 12px 60px;
	text-overflow:ellipsis;
	transition:color 0.1s;
	white-space:nowrap;
}

#divAppMenu .divMenuItem:hover .divMenuItemLabel
{
	color:#ffffff;
}

/* ANIMATIONS */
@keyframes hideMenu
{
	0%
	{
		opacity:1;
		width:100%;
	}
	1%
	{
		opacity:1;
		width:100%;
	}
	99%
	{
		opacity:0;
		width:100%;
	}
	100%
	{
		opacity:0;
		width:0%;
	}
}

/* MEDIA QUERIES */
@media (max-width: 560px)
{
	#divAppMenu
	{
		background-color:rgba(0, 0, 0, 0);
	}
	
	#divAppMenu #divMainMenu
	{
		max-width:560px;
	}

	#divAppMenu.hide #divMainMenu
	{
		transform:translateX(580px);
	}
}