.popover-blanker {
	background: rgba(32,32,32,0.8);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	z-index: 1023;
}

.menu-icon,
.search-icon
{
	position: relative;
}

.nav-extra {
	display: none;
	z-index: 1024;
	position: absolute;
	width: 300px;
	height: auto;
	background: white;
	box-shadow: 0 2px 2px rgba(0,0,0,0.5);
}

.nav-extra.visible {
	display: block;
}

.nav-extra::before,
.search-popover::before {
	content: '';
	width: 20px;
	height: 20px;
	position: absolute;
	top: -10px;
	right: 13px;
	background: white;
	-webkit-transform: rotateZ(45deg);
	-moz-transform: rotateZ(45deg);
	-ms-transform: rotateZ(45deg);
	-o-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
}

.nav-extra .nav-extra-content {
	padding: 10px 20px;
}

.nav-extra ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-extra ul li {
	padding: 10px 0;
}

.nav-extra ul li a {
	text-transform: uppercase;
	font-weight: lighter;
	text-decoration: none;
}

/* hide the JS-duplicated menu entries in the normal display case*/
.nav-extra .main-nav-duplicate {
	display: none;
}

.search-popover {
	display: none;
	z-index: 1024;
	position: absolute;
	width: 300px;
	height: auto;
	background: white;
	box-shadow: 0 2px 2px rgba(0,0,0,0.5);
}

.search-popover.visible {
	display: block;
}

.search-popover .search-popover-content {
	padding: 20px;
}

.search-popover .search-popover-content .search-field {
	margin-bottom: 0;
}


@media only screen 
and (max-width : 640px) {

	.nav-extra {
		width: auto;
		left: 0px;
	}
	
	.search-popover {
		width: auto;
		left: 20px;
	}


	/* show the JS-duplicated main nav items */
	.nav-extra .main-nav-duplicate {
		display: block;
	}

}