/*************************************************************************
 * CSS based dropdown menu
 ************************************************************************/

/* reset */
.dropdown-menu ul.menu,
.dropdown-menu ul.menu ul,
.dropdown-menu ul.menu li {
	z-index: 500;
}

/* first level are inline and always visible */

.dropdown-menu .menu-block-wrapper > ul.menu > li {
	display: inline-block;
	vertical-align: top;
}

.dropdown-menu .menu-block-wrapper > ul.menu li {
	position: relative;
}

/* second level */
.dropdown-menu .menu-block-wrapper > ul.menu > li > ul.menu {
	position: absolute;
	left: 0;
	top: 100%;
}

/* Move the last dropdown so that it doesn't go outside the screen */
.dropdown-menu .menu-block-wrapper > ul.menu > li:last-child > ul.menu {
	left: auto;
	right: 0;
}

/* ...but not if it's the only one */
.dropdown-menu .menu-block-wrapper > ul.menu > li:first-child > ul.menu {
	left: 0;
	right: auto;
}

/* rest */
.dropdown-menu .menu-block-wrapper > ul.menu > li li > ul.menu {
	position: absolute;
	left: 100%;
	top: 0;
}

.dropdown-menu .menu-block-wrapper > ul.menu ul.menu {
	display: block;
	visibility: hidden;
	opacity: 0;
	transition: all .4s ease-out;
	transition-delay: .2s;
}

.dropdown-menu ul.menu li:hover > ul.menu {
	visibility: visible;
	opacity: 1;
}

.dropdown-menu ul.menu li a,
.dropdown-menu ul.menu li span {
	white-space: nowrap;
}

/* marker arrows */ 
/* top level (menu goes down) */ 
.dropdown-menu ul.menu > li.expanded > span:after,
.dropdown-menu ul.menu > li.expanded > a:after {
	content: '';

	display: inline-block;
	vertical-align: middle;

	margin: 0.375em 0 0 0.1875em;

	width: 0;
	height: 0;

	border-width: 0.375em;
	border-style: solid;
	border-color: #000000 transparent transparent transparent;
}

/* sublevel (menu goes right) */ 
.dropdown-menu ul.menu ul.menu > li.expanded > span:after,
.dropdown-menu ul.menu ul.menu > li.expanded > a:after {
	content: '';

	display: inline-block;
	vertical-align: middle;

	margin: -0.1875em 0 0 0.1875em;

	width: 0;
	height: 0;

	border-width: 0.375em;
	border-style: solid;
	border-color: transparent transparent transparent #000000;
}

/*************************************************************************
 * Toggle
 ************************************************************************/

.mobile-toggle {
	display: none;
}