/*****************/
/*general styling*/
/*****************/

/*0 to 500px height*/
@media screen and (max-height: 500px) {

	/*****************/
	/*main menu panel*/
	/*****************/	

	.main-menu-wrapper{		
		top:9vh;		
	}
	
	.icon-wrapper{				
		height:10.5vh;		
	}

	.icon-wrapper > .icon-label{
		border-right:.75vh solid #444;		
	}

	.icon-wrapper:hover > .icon-label{
		border-right:.75vh solid #f26925;		
	}

	.icon-wrapper .icon-label{
		line-height:6vh;
		min-width:45vh;
		font-size:3.75vh;
		padding:2.25vh 0 2.25vh 2.25vh;
	}

	.icon-wrapper svg,
	.icon-wrapper img{
		height:6vh;
		width:6vh;		
		padding:2.25vh;   
	}

	/*****************/
	/*sub menu item*/
	/*****************/	

	.icon-wrapper:hover .sub-menu-wrapper{	
		max-width: 60vh;
	}

	/*****************/
	/*power menu panel*/
	/*****************/	
	.power-menu-wrapper{
		bottom:9vh;	
	}
}

/*500px to 1000px height*/
@media screen and (min-height: 500px) and (max-height: 1000px) {

	/*****************/
	/*main menu panel*/
	/*****************/	

	.main-menu-wrapper{		
		top:6vh;		
	}
	
	.icon-wrapper{				
		height:7vh;		
	}

	.icon-wrapper > .icon-label{
		border-right:.5vh solid #444;		
	}

	.icon-wrapper:hover > .icon-label{
		border-right:.5vh solid #f26925;
	}

	.icon-wrapper .icon-label{
		line-height:4vh;
		min-width:24vh;
		font-size:2.5vh;
		padding:1.5vh 0 1.5vh 1.5vh;
	}

	.icon-wrapper svg,
	.icon-wrapper img{
		height:4vh;
		width:4vh;		
		padding:1.5vh;   
	}

	/*****************/
	/*sub menu item*/
	/*****************/	

	.icon-wrapper:hover .sub-menu-wrapper{
		max-width: 75vh;
	}

	/*****************/
	/*power menu panel*/
	/*****************/	
	.power-menu-wrapper{
		bottom:6vh;	
	}

}

/*1000px + height*/
@media screen and (min-height: 1000px) {

/*****************/
	/*main menu panel*/
	/*****************/	

	.main-menu-wrapper{		
		top:4vh;		
	}
	
	.icon-wrapper{				
		height:4vh;		
	}

	.icon-wrapper > .icon-label{
		border-right:.25vh solid #444;		
	}

	.icon-wrapper:hover > .icon-label{
		border-right:.25vh solid #f26925;		
	}

	.icon-wrapper .icon-label{
		line-height:2vh;
		min-width:14vh;
		font-size:1.5vh;
		padding:1vh;
	}

	.icon-wrapper svg,
	.icon-wrapper img{
		height:2vh;
		width:2vh;		
		padding:1vh;   
	}

	/*****************/
	/*sub menu item*/
	/*****************/	

	.icon-wrapper:hover .sub-menu-wrapper{	
		max-width: 100vh;
	}

	/*****************/
	/*power menu panel*/
	/*****************/	
	.power-menu-wrapper{
		bottom:4vh;	
	}
		
}

/*****************/
/*main menu panel*/
/*****************/
.main-menu-panel-wrapper{
	position:absolute;
	top:0vh;
	left:0vh;
	z-index:1;

}

.menu-main-icon-wrapper{
	position:absolute;
	top:0vh;
	left:0vh;	
}

.main-menu-panel-wrapper:hover .main-menu-wrapper{
	transform:translateX(0%);
}

.main-menu-wrapper{
	position:absolute;	
	left:0vh;
	transform:translateX(-200%);
}

.menu-item-wrapper:first-child > .menu-item .icon-label{
	/*border-top-right-radius:5px;*/
}

.menu-item-wrapper:first-child > .menu-item:hover .icon-label{
	/*border-top-right-radius:0px;*/
}

.menu-item-wrapper:last-child > .menu-item .icon-label{
	/*border-bottom-right-radius:5px;*/
}

.menu-item-wrapper:last-child > .menu-item:hover .icon-label{
	/*border-bottom-right-radius:0px;*/
}

/*allow the last icon wrapper to match the submenu height*/
.main-menu-wrapper .menu-item:last-child > .icon-wrapper{		
	height:initial;
	background:none;
}

.main-menu-panel-wrapper .main-menu-icon-wrapper .menu-item:first-child > .icon-wrapper,
.main-menu-panel-wrapper .main-menu-icon-wrapper .menu-item:first-child > .icon-wrapper svg,
.power-menu-panel-wrapper .power-menu-icon-wrapper .menu-item:first-child > .icon-wrapper,
.power-menu-panel-wrapper .power-menu-icon-wrapper .menu-item:first-child > .icon-wrapper svg{
	background:none;
}

.main-menu-panel-wrapper:hover .main-menu-icon-wrapper .menu-item:first-child > .icon-wrapper,
.main-menu-panel-wrapper:hover .main-menu-icon-wrapper .menu-item:first-child > .icon-wrapper svg,
.power-menu-panel-wrapper:hover .power-menu-icon-wrapper .menu-item:first-child > .icon-wrapper,
.power-menu-panel-wrapper:hover .power-menu-icon-wrapper .menu-item:first-child > .icon-wrapper svg {
	background:#444;
}

.icon-wrapper{		
	white-space:nowrap;	
}

.icon-wrapper .icon-label,
.icon-wrapper svg,
.icon-wrapper, .sub-menu-wrapper{
	background:#444;
}

.icon-wrapper .icon-label,
.icon-wrapper svg,
.icon-wrapper img
{
	display:inline-block;
	vertical-align:middle;
}

.icon-wrapper,
.sub-menu-wrapper{
	display:inline-block;
	vertical-align:top;
	font-size: 0;
}

.icon-wrapper:hover > svg,
.icon-wrapper:hover > img,
.icon-wrapper:hover > .icon-label{
    fill:#f26925;
	color:#f26925;
	background:#222;		
}


.icon-wrapper svg,
.icon-wrapper img{	
	color:#f2f2f2;
	fill:#f2f2f2;    
}

/*****************/
/*sub menu item*/
/*****************/
.sub-menu-wrapper {
	vertical-align:top;
	z-index:-1;
	max-width:0;
	overflow:hidden;
	/*border-top-right-radius:5px;*/
	/*border-bottom-right-radius:5px;*/
	right: 0;
}


/*****************/
/*power menu panel*/
/*****************/
.power-menu-panel-wrapper{
	position:absolute;
	top:0vh;
	bottom:0vh;
	z-index:1;
}

.power-menu-panel-wrapper:hover .power-menu-wrapper{	
	transform:translateX(0%);
}

.power-menu-icon-wrapper{
	position:absolute;
	bottom:0vh;
	left:0vh;
}

.power-menu-wrapper{
	position:absolute;
	left:0vh;	
	transform:translateX(-200%);
}

.power-menu-item{
	cursor:default;	
	white-space:nowrap;	
}

.power-menu-item .icon-wrapper,
.power-menu-item .icon-label{    
    display:inline-block;
}

.power-menu-item:hover,
.power-menu-item:hover .icon-wrapper,
.power-menu-item:hover svg{
    color:#f26925;
    fill:#f26925; 
	background:#222; 
}

/*****************/
/*restriction/disable*/
/*****************/
.hg-perm-restrict > svg,
.hg-perm-restrict > svg rect,
.hg-perm-restrict > svg path,
.hg-perm-restrict > svg g,
.hg-perm-restrict > img,
.hg-perm-restrict > .icon-label,
.hg-perm-restrict:hover > svg,
.hg-perm-restrict:hover > img,
.hg-perm-restrict:hover > .icon-label{
    fill:#666 !important;
	color:#666 !important;
	background:#444 !important;		
}

/*****************/
/*animation*/
/*****************/
.main-menu-panel-wrapper div,
.power-menu-panel-wrapper div,
.main-menu-panel-wrapper svg,
.power-menu-panel-wrapper svg,
.main-menu-panel-wrapper img,
.power-menu-panel-wrapper img
{
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;    
}