/* Responsive top menubar */
.et-mcr-hmenuCtr
{
	/* Size of icon to be rendered alongside the menu item. */
	--hmenu-itemicon: 18px;
	/* Size of the menu-item's text. */
	--hmenu-textsize: 14px;
}

.et-mcr-hmenuCtr
{
	--hmenu-menuicon: calc(var(--hmenu-itemicon) * 1.5);
}


/* Menu-item container. */
.et-mcr-hmenuItemCtr
{
	font-weight: bold;
	font-size:16px;
	float: left;
	display: block;
}

/* Menu-item */
.et-mcr-hmenuItem
{
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: var(--hmenu-itemicon);
	padding-right: var(--hmenu-itemicon);
	cursor: pointer;	
    text-decoration: none;	
}

.et-mcr-hmenuItemIcon
{
	height: var(--hmenu-itemicon);
	width: var(--hmenu-itemicon);
	vertical-align: top;
}

.et-mcr-hmenuItemText
{
	text-align: left;
	font-size: var(--hmenu-textsize);
	user-select: none;
}

.et-mcr-hmenuItemButton
{
	padding: 0px 0px 0px 2px;
	cursor: pointer;
    text-decoration: none;	
	color: transparent;
	font-size: calc(var(--hmenu-itemicon) + 4px);
	line-height: calc(var(--hmenu-itemicon) + 4px);
	vertical-align: top;
}

a.et-mcr-hmenuItem
{
}

a.et-mcr-hmenuItem:hover 
{
	color: #FFFFFF;
	background-color: #7D9FAF;
}

.et-mcr-hmenuItemCtr a.et-corg-CurrPage
{
  background-color: #04AA6D;
  color: white;
}

/* No menu icon until device width is too less to render full menu. */
.et-mcr-opMenu
{
}

/* Hide the menu icon by default. */
.et-mcr-hmenuCtr a.et-mcr-opMenu
{
  display: none;
}

@media screen and (max-width: 600px) 
{
	.et-mcr-opMenu
	{
		padding-top: 5px;
		padding-bottom: 5px;
		background: transparent url('et-mcr-horstripes.png') no-repeat center center;
		width: var(--hmenu-menuicon);	 
		height: var(--hmenu-menuicon);
		background-size: var(--hmenu-menuicon);
	}

	/* Increase separation between control buttons */
	.et-mcr-hmenuItemCtr
	{
		padding-top: calc(var(--hmenu-itemicon)/2);
		padding-bottom: calc(var(--hmenu-itemicon)/2);
	}

	/* Increase separation between share buttons. */
	.et-mcr-hmenuItemButton
	{
		padding-left: var(--hmenu-itemicon);
	}

	/* Show the menu icon  for small screens. */
	.et-mcr-hmenuCtr a.et-mcr-opMenu 
	{
		float: right;
		display: block;
	}

	.et-mcr-hmenuCtr.et-menu-activate
	{
		position: relative;
	}

	/* Show menu icon to the top-right of the screen. */
	.et-mcr-hmenuCtr.et-menu-activate .et-mcr-opMenu
	{
		position: absolute;
		right: 0;
		top: 0;
	}

  	/* Hide all menu buttons except the first menu item.
	 * They show up later when Javascript injects et-menu-activate classname
	 * on the menu container.
	 */
	.et-mcr-hmenuCtr .et-mcr-hmenuItemCtr:not(:first-child)
	{
		display: none;
	}

	/* All buttons must stack one below other to the left of the screen. */
	.et-mcr-hmenuCtr.et-menu-activate .et-mcr-hmenuItemCtr 
	{
		float: none;
		display: block;
		text-align: left;
	}
}