/* General Styles */

.toggleMenu { display: none; }

nav#primary-nav {
	clear: both;
	border-top: 1px solid #292933;
}

nav#primary-nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

nav#primary-nav li { float: left; }

nav#primary-nav > li {
	display: block;
}

nav#primary-nav .nav a {

	padding: 15px 14px;
	display: block;
	text-decoration: none !important; 
	cursor: pointer;
	box-sizing: border-box;

}

nav#primary-nav li:hover {
	color: #F16529;
}

nav#primary-nav li ul a {

	color: #cbd8e0 !important;
	text-transform: none;
	display: inline-block;
}

nav#primary-nav li ul a span.arrow {
	width: 20px;
	height: 20px;
	background: url(../images/arrow.png) no-repeat;
	background-size: contain;
	display: inline-block;
	float: left;
	margin-right: 5px;
}

nav#primary-nav li ul li a {
	padding: 10px 15px 10px 10px;
	min-height: 0;
}

#nav-overlay { display: none; }

/* Desktop specific styles */

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

	#close-menu { display: none !important; }

	nav#primary-nav > ul > li > a {
		font-family: 'Asap', helvetica, arial, sans-serif;
		font-size: 1.1em;
		font-weight: 700;
		color: #fff;
		text-transform: uppercase;
		text-decoration: none;
		padding: 15px 14px;
		display: block;
	}
	
	nav#primary-nav > ul > li > a:hover { color: #868689; }

	nav#primary-nav > ul li:first-of-type {
		margin-left: 0;
	}
	
	nav#primary-nav > ul.nav > li:first-of-type > a {
		padding-left: 0;
	}
	
	nav#primary-nav .nav li .parent {
		background-image: url(../images/menu-arrow-down-red.png);
		background-repeat: no-repeat;
		background-position: 95% center;
		padding-right: 30px;
	}
	
	nav#primary-nav .nav-wrap {
		padding: 10px 20px;
		min-width: 450px;
		border-top: 10px solid #dd2c3a;
		border-bottom: 10px solid #dd2c3a;
		background-color: #fff;
	}
	
	nav#primary-nav .nav-wrap-colour {
		min-width: 600px;
	}

	.nav-wrap span.menu-active {
		display: block;
		width: 0; 
		height: 0; 
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 15px solid #dd2c3a;
		position: absolute;
		top: -15px;
		left: 10%;
		margin-left: -15px;
	}
	
	nav#primary-nav ul ul { 
		margin: 2%;
		padding: 0;
		width: 46%;
		box-sizing: border-box;
		float: left;
	}
	
	nav#primary-nav .nav-wrap-colour ul {
		width: 31%;
		margin: 1%;
	}

	nav li .nav-wrap {
		position: absolute;
		left: -999em;
		z-index:9999;
	}	
	
	nav li:hover .nav-wrap { left: auto; }
	
	nav#primary-nav li ul li {
		float: none;
	}
	
	nav#primary-nav .nav-wrap a {
		padding: 7px 0;
		color: #1b1b23 !important;
		font-weight: 400;
		font-family: 'Asap', helvetica, arial, sans-serif;
		font-size: 0.9em;
	}
	
	nav#primary-nav .nav-wrap a:hover {
		color: #1b1b23 !important;
		text-decoration: underline !important;
	}
	
}

/* Colour Nav Span */

.nav-wrap-colour li span {
	border-radius: 50%;
	width: 8px;
	height: 8px;
	display: inline-block;
	margin: 0 8px 0 0;
}

.nav-wrap-colour li a.air-blue span { background-color: #4da8c2; }
.nav-wrap-colour li a.black span { background-color: #0d0d10; }
.nav-wrap-colour li a.blush-pink span { background-color: #db77aa; }
.nav-wrap-colour li a.brick span { background-color: #bd684e; }
.nav-wrap-colour li a.brown span { background-color: #443c3a; }
.nav-wrap-colour li a.burnt-orange span { background-color: #f87719; }
.nav-wrap-colour li a.deep-red span { background-color: #b42f41; }
.nav-wrap-colour li a.estate-blue span { background-color: #132e55; }
.nav-wrap-colour li a.fog span { background-color: #a3a5a1; }
.nav-wrap-colour li a.forest-green span { background-color: #60684b; }
.nav-wrap-colour li a.frost-green span { background-color: #8aa198; }
.nav-wrap-colour li a.graphite span { background-color: #424548; }
.nav-wrap-colour li a.greenland-green span { background-color: #81886d; }
.nav-wrap-colour li a.ice-blue span { background-color: #5c98d9; }
.nav-wrap-colour li a.lake-blue span { background-color: #025b80; }
.nav-wrap-colour li a.leaf-green span { background-color: #396a2c; }
.nav-wrap-colour li a.mud span { background-color: #54533d; }
.nav-wrap-colour li a.navy span { background-color: #213055; }
.nav-wrap-colour li a.ocean-green span { background-color: #006c5d; }
.nav-wrap-colour li a.ochre span { background-color: #cfa923; }
.nav-wrap-colour li a.ox-red span { background-color: #8c2b34; }
.nav-wrap-colour li a.peach-pink span { background-color: #e36174; }
.nav-wrap-colour li a.purple span { background-color: #480c9a; }
.nav-wrap-colour li a.putty span { background-color: #b8bca1; }
.nav-wrap-colour li a.royal-blue span { background-color: #3d4ca4; }
.nav-wrap-colour li a.salvia span { background-color: #4b7d47; }
.nav-wrap-colour li a.sky-blue span { background-color: #a2babf; }
.nav-wrap-colour li a.tan span { background-color: #897551; }
.nav-wrap-colour li a.teal-green span { background-color: #14b596; }
.nav-wrap-colour li a.un-blue span { background-color: #097ce0; }
.nav-wrap-colour li a.uncle-blue span { background-color: #346694; }
.nav-wrap-colour li a.warm-yellow span { background-color: #cfa923; }
.nav-wrap-colour li a.plum span { background-color: #482337; }
.nav-wrap-colour li a.birch-green span { background-color: #d1b400; }

.nav-wrap-colour li a.black-and-ox-red span { background: url(../images/icons/colours/black-and-ox-red.gif) 50% 50% no-repeat; }
.nav-wrap-colour li a.burnt-orange-and-deep-red span { background: url(../images/icons/colours/burnt-orange-and-deep-red.gif) 50% 50% no-repeat; }
.nav-wrap-colour li a.forest-green-and-ox-red span { background: url(../images/icons/colours/forest-green-and-ox-red.gif) 50% 50% no-repeat; }
.nav-wrap-colour li a.frost-green-and-peach-pink span { background: url(../images/icons/colours/frost-green-and-peach-pink.gif) 50% 50% no-repeat; }
.nav-wrap-colour li a.graphite-and-un-blue span { background: url(../images/icons/colours/graphite-and-un-blue.gif) 50% 50% no-repeat; }
.nav-wrap-colour li a.leaf-green-and-burnt-orange span { background: url(../images/icons/colours/leaf-green-and-burnt-orange.gif) 50% 50% no-repeat; }
.nav-wrap-colour li a.navy-and-warm-yellow span { background: url(../images/icons/colours/navy-and-warm-yellow.gif) 50% 50% no-repeat; }
.nav-wrap-colour li a.ox-red-and-royal-blue span { background: url(../images/icons/colours/ox-red-and-royal-blue.gif) 50% 50% no-repeat; }
.nav-wrap-colour li a.royal-blue-and-ox-red span { background: url(../images/icons/colours/royal-blue-and-ox-red.gif) 50% 50% no-repeat; }
.nav-wrap-colour li a.un-blue-and-navy span { background: url(../images/icons/colours/un-blue-and-navy.gif) 50% 50% no-repeat; }
.nav-wrap-colour li a.purple-and-violet span { background: url(../images/icons/colours/purple-and-violet.gif) 50% 50% no-repeat; }

/* Making the menu responsive */

@media screen and (max-width: 767px) {
	
	/* Prevent body scrolling when fixed menu active */
	
	.no-scroll { overflow: hidden; position: fixed; top: 0; left: 0; max-width: 100%; }
	
	.toggleMenu {
		display: inline-block;
		position: absolute;
		z-index: 9996;
		border: 0;
		top: 70px;
		right: 10px;
		background: url(../images/menu.png) no-repeat;
		background-image: url(../images/menu.svg), none;
		background-repeat: no-repeat;
		background-color: #15151b;
		width: 28px;
		height: 28px;
		overflow: hidden;
		text-indent: -9999px;
	}
	
	#close-menu {
		display: inline-block !important;
		clear: both;
		width: auto;
		background-color: #272732;
		font-family: 'Asap', helvetica, arial, sans-serif;
		color: #fff !important;
		margin-left: 3%;
	}
	
	#close-menu:before {
	  font-family: "FontAwesome";
	  content: "\f00d";
	  margin-right: .53em;
	  margin-left: 2px;
	  font-weight: 400;
	 }	
	
	nav#primary-nav {
		z-index: 9998;
		top: 0;
		border-top: 0;
		position: absolute;
		width:100%;
		margin-top:0;
	}
	
	nav#primary-nav li .nav-wrap {
		position: absolute;
		left: -999em;
		z-index:9998;
		display: none;
	}

	nav#primary-nav li.hover ul { left: auto; display: block; }
	
	nav#primary-nav li ul li,
	nav#primary-nav li ul li,
	nav#primary-nav,
	nav#primary-nav li  { float:none; }


	nav#primary-nav li ul a {
		margin: 0px;
	}	

	.nav {
		margin-bottom:0;
		text-align:left;
		background: #1b1b23;
		top: 0;
		position: fixed;
		padding: 0;
		width: 84%;
		color: #fff;
		height: 100%;
		overflow: auto;
		display: none;
		font-size: 0.9em;
	}
	
	#nav-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 9997;
		background: rgba(27,27,35,0.6);
		top: 0;
	}
	
	nav#primary-nav .nav > li > a {
		color: #fff !important;
		font-family: 'Asap', helvetica, arial, sans-serif;
		font-size: 1em;
		font-weight: 700;
		text-transform: uppercase;
	}
	
	nav#primary-nav a {
  		margin-right:0;
	}
	
	nav#primary-nav ul ul a {
		background-color:#fff;
		color: #dd2c3a !important;
		padding: 10px 15px !important;
		font-weight: 400;
		font-family: 'Asap', helvetica, arial, sans-serif;
		font-size: 1.1em;
	}
	
	nav#primary-nav ul .nav-wrap {
		padding: 15px 0;
		background-color: #fff;
		margin: 0 0 0 3%;
	}	
	
	nav#primary-nav ul ul {
		display: block;
		margin: 0;
		width: 100%;
		float: none;
	}
	
	nav#primary-nav ul .nav-wrap-colour ul {
		width: 100%;
	}
	
	nav#primary-nav li.hover .nav-wrap,
	nav#primary-nav li li.hover .nav-wrap {
	 	position: static;
		display: block;
	}
	
	/* Style dropdowns */
	.nav > li a { padding-left: 15px; box-sizing: border-box; width: 100%; }
	.nav > li:last-of-type { border-bottom: 0; }
	
	.nav li .parent {
    	background-image: url(../images/menu-arrow-right.png);
    	background-repeat: no-repeat;
    	background-position: 96% center;
    	padding-right: 30px;
	}
	.nav li.hover .parent {
		background-image:url(../images/menu-arrow-down.png);
	}
	
	/* Colour Nav */
	
	.nav-wrap-colour li span {
		width: 15px;
		height: 15px;
		margin-right: 15px;
		position: relative;
		top: 3px;
	}


}