.menuTrigger{ 		display: none;		}
	
/************* adjust max-width as needed *****************/
@media(max-width: 600px){
	.menuTrigger{	display: table;		}
}

/*//////////////////////// Desktop state /////////////////////////////*/
.flxInitFrame>ul>li:hover>ul.ltxSubmenu,
.flxInitFrame>ul>li:hover>.nav-frame
{
		display: block;	
}

.flxInitFrame.clickOpensSubmenu>ul>li:hover>ul.ltxSubmenu,
.flxInitFrame.clickOpensSubmenu>ul>li:hover>.nav-frame
{
		display: none;	
}
.flxInitFrame.clickOpensSubmenu>ul li.displaySubmenu>ul.ltxSubmenu,
.flxInitFrame.clickOpensSubmenu>ul li.displaySubmenu>.nav-frame
{
		display: block;	
}


.btnToggle>img{
	max-height: 34px;
	width: auto;
	border: 1px solid white;
	border-color: white gray gray white;
	border-radius: 5px;
}

.btnToggle>ul.menuSymbol{
	position: relative;
	border: 1px solid white;
	border-color: white gray gray white;
	border-radius: 5px;
	padding: 3px 5px;
}
.btnToggle>ul.menuSymbol>li{
	list-style: none;
	display: block;
	float: none;
	height: 3px;
	margin: 3px auto;
	background-color: gray;
	border-radius: 2px;
}


/*//////////////////////// mobile state //////////////////////////*/
.menuTrigger .menuFrame{
	box-shadow: 2px 2px 8px gray;
	background-color: #2F415C;
	position: fixed;
	display: block;
	width: 200px;
	top: 0;
	left: -200px;
	height: 100%;
	transition: left 0.3s linear;
	}	
	
.menuTrigger .menuFrame.rightPos{
	left: auto;
	right: -200px;
	height: 100%;
	transition: right 0.3s linear;
}

.menuTrigger.showUp .menuFrame {
	left: 0;
	transition: left 0.3s linear;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 200;
	top: 0;
		
}
.menuTrigger.showUp .menuFrame.rightPos {
	left: auto;
	right: 0;
	transition: right 0.3s linear;
}


.menuTrigger .menuFrame .ltxCreateNewElement{
	display: none !important;
}
.menuTrigger .menuFrame>ul{
	display: block;
	}
	
	.menuTrigger.showUp .menuFrame a { 
		display: block;
		color: #D2D2D2;	
		margin: 2px;
		min-height: 24px;
		font-style: normal;
		font-weight: normal;
		text-decoration: none;
		text-align: left;
	}
	
	.menuTrigger.showUp .menuFrame>ul>li{
		float: none !important;
		display: block !important;
		border-top: 1px solid white;
		padding: 0 !important;
		background: transparent;
		width: auto;		
	}
	.menuTrigger.showUp .menuFrame>ul{
		display: block !important;
		padding: 0 !important;
		margin: 0 !important;
		min-width: 200px;
	}
	
	.menuTrigger.showUp .menuFrame a.menuClose {
		display: block;
		padding: 0 8px;
		text-align: right;
		text-decoration: none;
		font-weight: bold;
		background-color: #212180;
		}
	.menuTrigger.showUp .menuClose:hover{
		color: white;
	}
	
	/***************** submenu *************************************/
.menuTrigger.showUp .menuFrame li>ul,
.menuTrigger.showUp .menuFrame li>.nav-frame{
	width: 100%;
}
.menuTrigger.showUp .menuFrame li>ul,
.menuTrigger.showUp .menuFrame li>.nav-frame ul{
	margin: 0 0 0 20px;
	padding: 0;
}

 .menuTrigger.showUp .menuFrame li li{
	background-color: #595959;
	min-width: 0;
	width: 100%;
	border-top: 2px solid #3A4C62;
}

.menuTrigger .menuFrame li>div,
.menuTrigger .menuFrame li>ul{
		display: none;
		position: relative !important;
	}
	
.menuTrigger.showUp .menuFrame li.displaySubmenu>*{
	display: block;
	transition: display 0.5 linear;
	}
.menuTrigger.showUp .menuFrame li .nav-column{
	position: relative !important;
	margin: 0;
	display: block;	
	float: none;
	width: 100%;
	border: none;
	padding: 0;
}

	.menuTrigger.showUp .menuFrame li>ul>li{
		
	}
	.menuTrigger.showUp .menuFrame li>ul>li a{
		color: white;
	}