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

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

	/*****************/
	/*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: 568px) and (max-height: 1080px) {

	/*****************/
	/*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: 1080px) {

/*****************/
	/*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:2vh;
		padding:1vh;
	}

	.icon-wrapper svg,
	.icon-wrapper img{
		height:4vh;
		width:4vh;		
		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-wrapper > .menu-item > .icon-wrapper > svg{
	display:none;
}

.main-menu-wrapper > .menu-item > .icon-wrapper > .icon-label{
	font-weight:bold;
	margin:2vh 0vh;
}

.sub-menu-wrapper > .menu-item{
	display: inline-block;
    vertical-align: middle;
}

.sub-menu-wrapper .menu-item .icon-wrapper > div,
.sub-menu-wrapper .menu-item .icon-wrapper > img,
.sub-menu-wrapper .menu-item .icon-wrapper > svg{
	display:block;
	text-align:center;
	margin:auto;
}


.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{
	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 {
	
}

/*****************/
/*power menu panel*/
/*****************/
.power-menu-panel-wrapper, 
.main-content, 
.main-menu-icon-wrapper{
	display:none;
}

/*****************/
/*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;    
}