/* https://github.com/codezero-be/responsive-nav */

.nav-lock-scroll {overflow: hidden;}

.nav {
	order:3;
	top:0; /* these top bottom left and right values position the menu when small screen sizes are used */
	bottom:0;
	left:0;
	right:0; 
	margin-left:auto;  /* The margin left, right and bottom position the nav at top of the div */
	margin-right:10vw;
	margin-bottom:auto;
	color: white;
	font-weight:bold;
	text-decoration: none;
	z-index:900;
	overflow-x:hidden;
	overflow-y:auto;
	transition: all ease-in-out 2s !important;
	border-radius:.5rem;
	background-color:rgba(162,154,154,0.10);
}

.nav ul {
	display:block;
	position:relative;
/*	zoom:1;  value of 1 is normal so not needed. Also not supported yet by all browsers apparently*/
	list-style-type:none;
	margin:0 0 0 1.5rem;
	padding-left:0; /*stops the list from indenting */
}

.nav a, .nav a:hover, .nav a:active, .nav a:visited {display: contents;position: relative;}

@media only screen and (min-width: 960px) {

.nav {display:block; position:relative; bottom:auto; overflow: visible;}

.nav ul li {
	position:relative;
	white-space: nowrap;
	margin-top:0;
	vertical-align:top;
	width:8.3rem;  /* important for keeping the menu items at right width */
	text-align: justify;
}

.nav > ul > li {display: inline-block;}

.nav ul ul {
	display: none;
	position: relative;  
	top: 100%;
	padding-left:0;
	z-index: 901;
}

.nav ul ul ul {
	top: -1.8rem;
	bottom:-1.8rem;
	left: 100%;
	position: relative;  
	z-index: 902;
	min-width:12rem;
}

.nav ul ul ul li {
	position:relative;
	white-space:nowrap;
	margin-top:0;
	vertical-align:top;
	min-width:12rem !important;  /* important for keeping the menu items at right width */
	text-align: left;
}

.nav-no-js .nav li:hover > ul {display: block;}

}

@media only screen and (min-width: 959px) { /* this is to do with working with browsers where there is no java enabled (or visa versa!) */

.nav-no-js .nav-button:hover + .nav,
.nav-no-js .nav:hover,
.nav-no-js .nav-button:hover + .nav + .nav-close,
.nav-no-js .nav:hover + .nav-close {
	display: block;
}
}