/* --------------- navigation ---------------- */
/* === Main menu settings === */
#navigation-wrap { /* navigation menu container to edge of screen */
	background:none; /* background of whole navigation bar to the edge of the screen. Can be made same colour as #header, .navigation or none depending on effect */
	padding:0;
	margin:0;
}
.navigation { /* navigation menu container to edge of dislay area */
	margin:0; 
	z-index:500; 
	position:relative; 
	padding:0;
}
#menu-icon,
#search-icon,
#search-icon-nav { /* 'Menu' tab on mobile/tablet */
	float:right;
	position:relative;
	display:none !important;
}
.js #menu-icon,
.js #search-icon { /* If there is javascript, show 'Menu' and 'Search' tabs on mobile/tablet */
	display:block !important;
}
#menubox,
#searchbox { /* navigation menu and search field containers */
	clear:both;
	padding:10px 0; /* padding between 'Menu' and 'Search' buttons and espanded menu */
	padding:1rem 0;
}
#menubox { /* navigation menu and search field containers */
	top: 50px; /* Same as the height of the .header **header-height** */
	top: 5rem; /* Same as the height of the .header **header-height** */
	overflow-y: scroll;
	position: fixed;
	bottom: 0;
	left:0;
	width: 100%;
	height:100%;
	padding:0;
}
.fixed-header #menubox,
.fixed-header #searchbox { /* navigation menu and search field containers when header is fixed */
}
.js #menubox,
.js #searchbox { /* if there is javascript. hide the navigation menu and the search field */
	display:none; 
}


/* === Top level menu items === */
ul.nice-menu { /* navigation menu UL */
	background:#fff;  /* background of whole navigation bar */
	padding-left:0 !important; /* distance between left edge and first tab */
	margin:0;
	list-style:none;
	width:100%;
}
ul.nice-menu, 
ul.nice-menu ul,
ul.nice-menu li {
	border:none; /*reset Nice-Menus CSS*/
}
ul.nice-menu li { /* navigation menu tab container */
	margin:0; /* make -1px to prevent doubling of borders between tabs. Should be the negative of the border width*/
	position:relative;
	float:none;
}
ul.nice-menu li a,
#menu-icon,
#search-icon,
#search-icon-nav { /* navigation menu, 'Menu' and 'Search' tabs */
	background:#f7f7f7; /* background for top level tab - usually the same as the navigation background */
	border-style:solid;
	border-width:1px;
	border-color:#fefefe #cccccc #cccccc #fefefe; /* border colour on each navigation tab */
	color:#525252;  /* top level tab font color*/
	font-size:15px; /* font-size for top menu*/
	font-size:1.5rem; /* font-size for top menu*/
	padding:5px 3%; /* padding of each tab in mobile /tablet version */
	padding:0.5rem 3%; 
	font-weight:normal;
	text-decoration:none;
	display: block; /* required to makew the <a> links appear as full height tabs */
}
#menu-icon,
#search-icon,
#search-icon-nav { /* 'Menu' tab on mobile/tablet */
	background:url(../images/menu-icon.png) no-repeat center center #fff; /* background of button - same as navigation with Menu icon on top */
	border-style:solid;
	border-width:1px;
	border:none; /* border colour on Menu and Search tab */
	height:30px; /* same as the height of .logo-wrap img **header-height** (minus 2rem for padding top & bottom) */
	height:3rem; /* same as the height of .logo-wrap img **header-height** (minus 2rem for padding top & bottom) */
	width:30px;
	width:3rem;
	margin:0;
	padding:0;
	cursor:pointer;
	text-indent:-9999px;
	text-transform:capitalize; /* This forces IE7 to accept the negative text-indent */
	overflow:hidden;
}
#search-icon,
#search-icon-nav { /* 'Search' tab on mobile/tablet */
	background:url(../images/search-icon.png) no-repeat center center #fff; /* background of button - same as navigation with Search icon on top */
}
ul.nice-menu li.first a { /* use to add/remove border on first navigation tab */
}
ul.nice-menu li.last a { /* use to add/remove border on last navigation tab */
}

/* Top level menu items - hover styles */
#menu-icon:hover,
#search-icon:hover,
#search-icon-nav:hover { /* navigation menu tabs on hover */
	background-color:#fff;  /* background for top level tab on hover */
	color:#BAD200; /* top level tab font color on hover */
	border:none;
}
ul.nice-menu li a:hover,
ul.nice-menu li a.active,
ul.nice-menu li a.active:hover {
	background:#dfdfdf;  /* background for top level tab on hover */
	color:#525252; /* top level tab font color on hover */
	visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}


/* === Drop down first level === */
ul.nice-menu li.menuparent ul { /* Drop down navigation menu UL */ 
	list-style:none;
	left:0; /* IE6&7 need this to position the sublist correctly on hover*/
	top:0; /*position of first level drop down menu - height of top level menu plus height of border*/
	background:#fff;/* IE needs some sort of background on the nested ul */
	width:100%; /*width of drop down tab */
	position:relative; /* position the sublist to nearest positioned ancestor, the (ul.nice-menu li) in this case*/
}
ul.nice-menu li.menuparent ul li,
ul.nice-menu li.menuparent ul li.menuparent ul li { /* Drop down navigation tab container */ 
	border:none;  /*reset borders from ul.nice-menu li*/
	margin-top:0; /* prevents doubling of top and bottom border - should be a negative of the border width */
	width:100% !important;
}
ul.nice-menu li.menuparent ul li a,
ul.nice-menu li.menuparent ul li.menuparent ul li a { /* Drop down navigation tab */ 
	background:#f7f7f7 !important;  /* background of first level drop down menu in mobile/tablet menu */
	color:#525252 !important;  /* text colour on first level drop down menu in mobile/tablet menu */
	padding:5px 3%;  /* padding above/below and left/right on the first level drop down menu */
	padding:0.5rem 3%;  
	font-weight:normal;
	float: none;  /*reset the float from ul.nice-menu li a*/
	font-size:12px;
	font-size:1.2rem;
	text-transform:none;
}
ul.nice-menu li.menuparent ul li.active-trail a,
ul.nice-menu li.menuparent ul li.menuparent ul li.active-trail a { /* Drop down navigation active tab */ 
	background:#dfdfdf !important;  /* background of active first level drop down menu */
	color:#525252 !important; /* text colour on first level active drop down menu */
}

/* drop down first level - hover styles */
ul.nice-menu li.menuparent ul li a:hover { /* Drop down navigation tab on hover */ 
	background:#dfdfdf !important;  /* background for first level drop down menu on hover */
	color:#525252 !important; /* font colour on first level drop down menu on hover */
}
ul.nice-menu li.menuparent ul li.active-trail a:hover { /* Drop down navigation active tab on hover*/ 
	background:#dfdfdf !important;  /* background for first level drop down menu on active tab when hovering*/
	color:#525252 !important; /* font colour on first level drop down menu on hover on active tab */
}
ul.nice-menu li ul { /* first level drop down menu */
	display:block; /* Initially show first level drop down menu on mobile/tablet */
	visibility:visible;
}
ul.nice-menu li:hover ul { /* first level drop down menu on hover */
}
ul.nice-menu li.menuparent ul li ul { /* second level drop down menu*/ 
	display:none; /* Initially hide second level drop down menu */
}



/* --------------- Responsive Adjustments ---------------- */
/* Note, the CSS outside these Media Queries is used for all devices incl. mobiles */

@media only screen and (min-width: 320px) {
	/* Mobile & Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 
	/* Mobile & Small screen, retina, stuff to override above media query */

	/* Retina Icons on Menu and Search */
	#menu-icon,
	#search-icon,
	#search-icon-nav { /* 'Menu' tab on mobile/tablet */
		background:url(../images/menu-icon@2x.png) no-repeat center center #fff; /* background of button - same as navigation with Menu icon on top */
		background-size: 20px 20px;
	}
	#search-icon,
	#search-icon-nav { /* 'Search' tab on mobile/tablet */
		background:url(../images/search-icon@2x.png) no-repeat center center #fff; /* background of button - same as navigation with Search icon on top */
		background-size: 20px 20px;
	}
	#search-icon:hover,
	#search-icon-nav:hover { /* navigation menu tabs on hover */
		background-color:#fff;  /* background for top level tab on hover */
	}


}

@media only screen and (min-width: 700px) {
	/* Tablet & Medium screen, non-retina */


	/* --------------- navigation ---------------- */
	/* === Main menu settings === */
	#navigation-wrap { /* navigation menu container to edge of screen */
		padding:10px 0;
		padding:1rem 0;
	}
	.fixed-header #navigation-wrap { /* navigation menu container to edge of screen when scrolling */
		padding:0;
	}
	.navigation { /* navigation menu container to edge of dislay area */
	}
	#menu-icon,
	#search-icon,
	#search-icon-nav { /* 'Search' tab on mobile/tablet */
	}
	.js #menu-icon,
	.js #search-icon,
	.js #search-icon-nav { /* If there is javascript, show 'Menu' and 'Search' tabs on mobile/tablet */
	}
	#menubox,
	#searchbox { /* navigation menu and search field containers */
	}
	#menubox { /* navigation menu field containers */
		top: 80px; /* Same as the height of the .header **header-height** */
		top: 8rem; /* Same as the height of the .header **header-height** */
	}
	.fixed-header #menubox,
	.fixed-header #searchbox { /* navigation menu and search field containers when header is fixed */
	}
	.fixed-header #menubox { /* navigation menu containers when header is fixed */
		top: 50px; /* Same as the height of the .header **header-height** */
		top: 5rem; /* Same as the height of the .header **header-height** */
	}
	.js #menubox,
	.js #searchbox { /* if there is javascript. hide the navigation menu and the search field */
	}
	
	
	/* === Top level menu items === */
	ul.nice-menu { /* navigation menu UL */
	}
	ul.nice-menu, 
	ul.nice-menu ul,
	ul.nice-menu li {
	}
	ul.nice-menu li { /* navigation menu tab container */
	}
	ul.nice-menu li a,
	#menu-icon,
	#search-icon { /* navigation menu, 'Menu' and 'Search' tabs */
	}
	ul.nice-menu li a {/* navigation menu tabs */
	}
	ul.nice-menu li.first a { /* use to add/remove border on first navigation tab */
	}
	ul.nice-menu li.last a { /* use to add/remove border on last navigation tab */
	}
	
	/* Top level menu items - hover styles */
	ul.nice-menu li.active-trail a:hover,  /* This line and the next is needed to prevent hover errors on active tabs in Nice Menu Superfish Javascript */
	ul.nice-menu li.active-trail:hover a, 
	ul.nice-menu li a:hover, 
	ul.nice-menu li:hover a,
	#menu-icon:hover,
	#search-icon:hover { /* navigation menu tabs on hover */
	}
	ul.nice-menu li a.active:hover, 
	ul.nice-menu li.active-trail a:hover, 
	ul.nice-menu li.active-trail:hover a { /* navigation menu active tabs on hover*/ 
	}
	ul.nice-menu li a.active,
	ul.nice-menu li.active-trail a { /* navigation menu active tabs */
	}
	
	/* === Drop down first level === */
	ul.nice-menu li.menuparent ul { /* Drop down navigation menu UL */ 
	}
	ul.nice-menu li.menuparent ul li,
	ul.nice-menu li.menuparent ul li.menuparent ul li { /* Drop down navigation tab container */ 
	}
	ul.nice-menu li.menuparent ul li a,
	ul.nice-menu li.menuparent ul li.menuparent ul li a { /* Drop down navigation tab */ 
	}
	ul.nice-menu li.menuparent ul li.active-trail a,
	ul.nice-menu li.menuparent ul li.menuparent ul li.active-trail a { /* Drop down navigation active tab */ 
	}
	
	/* drop down first level - hover styles */
	ul.nice-menu li.menuparent ul li a:hover { /* Drop down navigation tab on hover */ 
	}
	ul.nice-menu li.menuparent ul li.active-trail a:hover { /* Drop down navigation active tab on hover*/ 
	}
	ul.nice-menu li ul { /* first level drop down menu */
	}
	ul.nice-menu li:hover ul { /* first level drop down menu on hover */
	}
	ul.nice-menu li.menuparent ul li ul { /* second level drop down menu*/ 
	}


}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 
	/* Tablet & Medium screen, retina, stuff to override above media query */

	/* Retina Icons on Menu and Search */
	#menu-icon,
	#search-icon,
	#search-icon-nav { /* 'Menu' tab on mobile/tablet */
		background:url(../images/menu-icon@2x.png) no-repeat center center #fff; /* background of button - same as navigation with Menu icon on top */
		background-size: 20px 20px;
	}
	#search-icon,
	#search-icon-nav { /* 'Search' tab on mobile/tablet */
		background:url(../images/search-icon@2x.png) no-repeat center center #fff; /* background of button - same as navigation with Search icon on top */
		background-size: 20px 20px;
	}
	#search-icon:hover,
	#search-icon-nav:hover { /* navigation menu tabs on hover */
		background-color:#fff;  /* background for top level tab on hover */
	}


}

@media only screen and (min-width: 1024px) { 
	/* Desktop & Large screen, non-retina */


	/* --------------- navigation ---------------- */
	/* === Main menu settings === */
	#navigation-wrap { /* navigation menu container to edge of screen */
		padding:0; /* Reset extra padding from mobile version */
		clear:none;
		float:right;
		position:relative;
	}
	.fixed-header #navigation-wrap { /* navigation menu container to edge of screen when scrolling */
	}
	.navigation { /* navigation menu container to edge of dislay area */
		float:left; /* required to make it work on IE7 */
		position:relative; /* required to make it work on IE7 */
	}
	#menu-icon, 
	#search-icon { /* 'Menu' and 'Search' tab on desktop */
		display:none !important;
	}
	.js #menu-icon,
	.js #search-icon { /* Hide 'Menu' and 'Search' tabs on desktop */
		display:none !important;
	}
	#search-icon-nav {
		display:block !important;
		width:0;
		float:right;
		position:relative;
	}
	.block-nice-menus {
		float:left;
		position:relative;
	}
	.fixed-header .block-nice-menus,
	.fixed-header #search-icon-nav {
	}
	.fixed-header #search-icon-nav {
		width:30px;
		width:3rem;
	}
	#menubox,
	#searchbox { /* navigation menu and search field containers */
		clear:both;
		display:block !important;
	}
	#menubox {
		padding:10px 0 0 0; /*adjust this to align navigation to the bottom */
		padding:1rem 0 0 0; /*adjust this to align navigation to the bottom */
		overflow: visible;
		position:relative;
		top:0;
		width:auto;
	}
	#searchbox {
		width:250px;
		float:right;
		position:relative;
		height:25px;  /* required to make it work on IE7 */
	}
	.js #menubox,
	.js #searchbox { /* if there is javascript. hide the navigation menu and the search field */
	}
	.fixed-header #menubox {
		top:0;
	}
	.fixed-header #searchbox {
		margin-top:-100px; /* Scrolls the Seachbox off the page when the page scrolls */
	}
	.drop-menu-search #searchbox {
		margin-top:0; /* makes it reappear when search icon is pressed */
	}
	
	
	/* === Top level menu items === */
	ul.nice-menu { /* navigation menu UL */
		width:auto;
		padding-left:0 !important; /* distance between left edge and first tab */
	}
	.fixed-header ul.nice-menu {
	}
	ul.nice-menu, 
	ul.nice-menu ul,
	ul.nice-menu li {
	}
	ul.nice-menu li { /* navigation menu tab container */
		float:left;
		position:relative;
	}
	ul.nice-menu li a,
	#menu-icon,
	#search-icon { /* navigation menu, 'Menu' and 'Search' tabs */
		background:#fff; /* background for top level tab - usually the same as the navigation background */
		color:#7d8286;  /* top level tab font color*/
	}
	ul.nice-menu li a {/* navigation menu tabs */
		padding:0 20px !important; /* text padding left and right of each tab */
		padding:0 2rem !important; /* text padding left and right of each tab */
		line-height:30px; /* center the text vertically - should be the same height as 'height' in 'ul.nice-menu' */
		line-height:3rem; /* center the text vertically - should be the same height as 'height' in 'ul.nice-menu' */
		border-style:solid;
		border-width:1px;
		border:none; /* border colour on each tab */
	}
	.fixed-header ul.nice-menu li a {
		line-height:30px; /* center the text vertically - should be the same height as 'height' in 'ul.nice-menu' */
		line-height:3rem; /* center the text vertically - should be the same height as 'height' in 'ul.nice-menu' */
	}
	ul.nice-menu li.first a { /* use to add/remove border on first navigation tab */
	}
	ul.nice-menu li.last a { /* use to add/remove border on last navigation tab */
	}
	
	/* Top level menu items - hover styles */
	ul.nice-menu li.active-trail a:hover,  /* This line and the next is needed to prevent hover errors on active tabs in Nice Menu Superfish Javascript */
	ul.nice-menu li.active-trail:hover a, 
	ul.nice-menu li a:hover, 
	ul.nice-menu li:hover a,
	#menu-icon:hover,
	#search-icon:hover {/* navigation menu tabs on hover */
		background:#fff;  /* background for top level tab on hover */
		color:#BAD200; /* top level tab font color on hover */
		border:none; /* border colour on each tab */
	}
	ul.nice-menu li a.active:hover, 
	ul.nice-menu li.active-trail a:hover, 
	ul.nice-menu li.active-trail:hover a { /* navigation menu active tabs on hover */
		background:#fff;  /* background for top level active tab on hover */
		color:#BAD200; /* top level active tab font color on hover */
		border:none; /* border colour on each tab */
	}
	ul.nice-menu li a.active,
	ul.nice-menu li.active-trail a { /* navigation menu active tabs */
		background:#fff;  /* background for top level active tab on hover */
		color:#BAD200; /* top level active tab font color on hover */
		border:none; /* border colour on each tab */
	}
	
	/* === Drop down first level === */
	ul.nice-menu li.menuparent ul { /* Drop down navigation menu UL */ 
		width:185px; /*width of sub list tab  - make same as 'ul.nice-menu li ul li a' below */
		width:18.5rem; /*width of sub list tab  - make same as 'ul.nice-menu li ul li a' below */
		top:30px; /*position of first level drop down menu - height of top level menu plus height of border*/
		top:3rem; /*position of first level drop down menu - height of top level menu plus height of border*/
		position:absolute; /* position the sublist to nearest positioned ancestor, the (ul.nice-menu li) in this case*/
	}
	.fixed-header ul.nice-menu li.menuparent ul {
		top:30px; /*position of first level drop down menu - height of top level menu plus height of border*/
		top:3rem; /*position of first level drop down menu - height of top level menu plus height of border*/
	}
	ul.nice-menu li.menuparent ul li,
	ul.nice-menu li.menuparent ul li.menuparent ul li { /* Drop down navigation tab container */ 
	}
	ul.nice-menu li.menuparent ul li a,
	ul.nice-menu li.menuparent ul li.menuparent ul li a { /* Drop down navigation tab */ 
		background: #f7f7f7 !important;  /* background of first level drop down menu */
		color:#333 !important; /* text colour on first level drop down menu */
		border-width:1px !important;
		border-style:solid !important;
		border-color:#ccc #aaa #aaa #ccc !important; /* border colour around tabs - same as left & right on navigation */
		border-top:none !important;
		font-size:12px;  /* font size of first level drop down menu */
		font-size:1.2rem;  /* font size of first level drop down menu */
		padding:3px 15px !important;  /* padding above/below and left/right on the first level drop down menu */
		padding:0.3rem 15px !important;  /* padding above/below and left/right on the first level drop down menu */
		line-height:18px; /* center the text vertically - should be the same height as 'height' in 'ul.nice-menu' */
		line-height:1.8rem; /* center the text vertically - should be the same height as 'height' in 'ul.nice-menu' */
	}
	ul.nice-menu li.menuparent ul li.active-trail a,
	ul.nice-menu li.menuparent ul li.menuparent ul li.active-trail a { /* Drop down navigation active tab */ 
		background: #dfdfdf !important;  /* background of active first level drop down menu */
		color:#333 !important; /* text colour on first level active drop down menu */
	}
	
	/* drop down first level - hover styles */
	ul.nice-menu li.menuparent ul li a:hover { /* Drop down navigation tab on hover */ 
		background:#dfdfdf !important;  /* background for first level drop down menu on hover */
		color:#333 !important; /* font colour on first level drop down menu on hover */
		visibility:visible;  /* makes IE7 think something changes on hover, fixes IE sticking dropdown */
	}
	ul.nice-menu li.menuparent ul li.active-trail a:hover { /* Drop down navigation active tab on hover*/ 
		background:#dfdfdf !important;  /* background for first level drop down menu on active tab when hovering*/
		color:#333 !important; /* font colour on first level drop down menu on hover on active tab */
		visibility:visible;  /* makes IE7 think something changes on hover, fixes IE sticking dropdown */
	}
	ul.nice-menu li ul { /* first level drop down menu */
		display:none;
	}
	ul.nice-menu li:hover ul { /* first level drop down menu on hover */
		display:block; /* Show first level drop down menu on hover */
	}
	ul.nice-menu li.menuparent ul li ul { /* second level drop down menu*/ 
	}


}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1024px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1024px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1024px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1024px),
only screen and (                min-resolution: 192dpi) and (min-width: 1024px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1024px) { 
	/* Desktop & Large screen, retina, stuff to override above media query */

	/* Retina Icons on Menu and Search */
	#menu-icon,
	#search-icon,
	#search-icon-nav { /* 'Menu' tab on mobile/tablet */
		background:url(../images/menu-icon@2x.png) no-repeat center center #fff; /* background of button - same as navigation with Menu icon on top */
		background-size: 20px 20px;
	}
	#search-icon,
	#search-icon-nav { /* 'Search' tab on mobile/tablet */
		background:url(../images/search-icon@2x.png) no-repeat center center #fff; /* background of button - same as navigation with Search icon on top */
		background-size: 20px 20px;
	}
	#search-icon:hover,
	#search-icon-nav:hover { /* navigation menu tabs on hover */
		background-color:#fff;  /* background for top level tab on hover */
	}

}