/* 
HORNET RESPONSIVE DROPDOWN

Menu items now central in hover sub menu dropdown.

js adds in some classes when needed inc:
.js (html)
.fixedheader (body)
.scrollhide (#siteheader)
.small-screen .multilevel .singlelevel .showall (#ddwrapper)
.open/.closed (.dropdown)
.submenu-opened (.dropdown ul ul)
.dd-opened (.ddbutton)
.submenu-button (prepended span where ul.has-submenu)

fixed header only happens if js on.. in which case the header appears 100% anyway as headerbar is fixed.
But could remove the header .wrapper or set to max-width:100% so that it spans the window width when not set to fixed (sticky) 
.. to make header whole screen width on devices, when content remains at wrapper width. Without queries ,eg ie7 etc, the header will always be 100% even on desktop. 
*/



/*@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);*/


/*.clear{clear:both;}*/

 /* set the header styles used in both desktop and in fixed header mode on mobile */
/*.fixedheader */ .headerbar,
.site-header {
	background:#fff;
}


.site-header{
	padding:0px;
	margin:0px;
	/*font-family: Montserrat, sans-serif;*/
	-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    0px 0px 15px rgba(0, 0, 0, 0.4);  /* Firefox 3.5 - 3.6 */
	box-shadow:         0px 0px 15px rgba(0, 0, 0, 0.4);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.site-header,
.site-header a{
	color: #333;
}

/* using .wrap class from bones now 
.wrapper{
	max-width:500px; 
	margin:0 auto;
	background:#eee;}
.site-header .wrapper{background:blue;}
.inner{padding:10px;}
*/


/********
 Logo and trans changes if hidelogo set in js */

.logo{
	z-index:9991;
	height:50px;
	position:relative;
	margin-left:10px;
	float:left;}
.logo a.text{
	text-decoration:none;
	text-transform:uppercase;
	padding:13px 0px;
	display:block;
	font-size:24px;
	font-weight:400;
	color:#333;
	opacity: 1;
	-webkit-transition: opacity 0.7s ease;
	-moz-transition: opacity 0.7s ease;
	-ms-transition: opacity 0.7s ease;
	-o-transition: opacity 0.7s ease;
	transition: opacity 0.7s ease;
}
#siteheader.hidelogo .small-screen .logo a.text{
	opacity: 0;
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-ms-transition: opacity 0.2s ease-out;
	-o-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
}
.logo a:hover,
.logo a:focus{
	color:inherit;
}
/* for switching out logo text for an icon/graphic 
Add another link to logo div <a href="/" class="image"></a>
.logo a.image{
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
	display:block;
	background:#000;
	width:2px;
	height:40px;
	opacity:0;
	-webkit-transition: opacity 0.1s ease-out;
	-moz-transition: opacity 0.1s ease-out;
	-ms-transition: opacity 0.1s ease-out;
	-o-transition: opacity 0.1s ease-out;
	transition: opacity 0.1s ease-out;
}
#siteheader.hidelogo .small-screen .logo a.image{
	opacity:1;
	-webkit-transition: opacity 0.7s ease;
	-moz-transition: opacity 0.7s ease;
	-ms-transition: opacity 0.7s ease;
	-o-transition: opacity 0.7s ease;
	transition: opacity 0.7s ease;
}
*/


/* change headerbar on fixed small screen to semi trans when lower down. good idea ?? */
.fixedheader #siteheader.hidelogo .small-screen .headerbar{
	background-color: rgba( 255, 255, 255, 0.93);
	-webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, 0.2);
}
/* change headerbar color/opacity when active. .active class now added in js when dropdown open.
This can be used with above styles, so opacity isnt semi trans when dd open. */
.fixedheader #siteheader.hidelogo .small-screen .headerbar.active{
	background-color: rgba( 255, 255, 255, 1);
	-webkit-box-shadow: 0 0 0 rgba( 0, 0, 0, 0);
}

/* styles to set a central logo in the header.
Option for small screens only or always, use only one class in the header html */
.central-logo-small .logo,
.central-logo .logo{
	position:absolute;
	text-align:center;
	left:0;
	right:0;
	margin:0 auto;
	max-width:170px;
	float:none;
}

/* without js the buttons aren't shown and as logo is pos absolute, the headerbar collapses, hiding the logo, so set min height.*/
.no-js .headerbar{
	min-height:50px;
}
 
 


/**************
Construct the dropdown wrapper and its contents 
*/
.searchsubmit,
.ddwrapper,
.ddwrapper .ddbutton, 
.dropdown,
.dropdown div,
.dropdown ul,
.dropdown ul li,
.dropdown ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size:14px; 
  font-weight:400;
}


.ddwrapper{
	/*background:#999;*/
	margin:0 auto;
	width:100%;  /* do need!, can see in page load menu being thinner, before fixed js kicks in. - old notes: maybe don't need, allowing theme css to set .wrap width. .wrap is same div as ddwrapper. */
	position:relative;
	z-index:1400; /*was 9998 but covered photoswipe lightbox */
}



/* this causes a gap at bottom of header seen when fixed header on scroll 
was in orig css, clearing I think...
.ddwrapper:after,
.ddwrapper > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
*/
.dropdown {
  width: 100%;
  display:block; /* initially seen, hidden again if js present */
  background:#222222; /* rh changed from 333333, feb 17 */
	opacity:0; /*commiting to js being used here.. as it's flickery on page load, so making opacity low or 0 and then 1 when .open class added by js. this needs resetting to 1 all time after break. */
  color: #ddd;
  z-index:9990;
  clear:both; /* needed to have the dropdown sit below the floated headerbar elements */
}
.dropdown.open{
	opacity:1;
}
.dropdown ul {
  width: 100%;
  /*display: none;*/
}
.dropdown ul li {
  width: 100%;
  border-top: 1px solid rgba(120, 120, 120, 0.2);
  text-align:left;
}
.dropdown ul li a {
  width: 100%;
	-webkit-tap-highlight-color: rgba(100, 100, 100, 0.5); /* added as no focus or active states seem to trigger on iphone. */
}
.dropdown > ul > li > a {
  padding: 16px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #ddd;
  text-transform: uppercase;
}
/*.dropdown > ul > li:hover > a,*/
.dropdown > ul > li > a:focus,
.dropdown > ul > li > a:hover,
.dropdown > ul > li > a:active {
  color: #ffffff;
	/*background:#222;*/
}
/* submenus */

.dropdown ul ul li,
.dropdown li:hover > ul > li {
  height: auto;
}
.dropdown ul ul li a {
  padding: 10px 15px;
  padding-left: 25px;
  text-decoration: none;
  color: #ddd;
  /*background: #222222;*/
  /*width: 170px;*//*why? overridden below anyway*/
  /*border-bottom: 1px solid rgba(150, 150, 150, 0.15); just for decoration probably, as li already has border.. just more to remove in desktop! */
}

/*.dropdown ul ul li:last-child > a,
.dropdown ul ul li.last-item > a {
  border-bottom: 0;
}*/

/*.dropdown ul ul li:hover > a, have colour change on link hover only */
.dropdown ul ul li a:focus,
.dropdown ul ul li a:hover,
.dropdown ul ul li a:active {
  color: #ffffff; /* needed?? */
	/*background:#222;*/
}
.dropdown ul ul ul li a {
  padding-left: 35px;
}



/* hide submenus if only single level being shown */
.small-screen.singlelevel .dropdown ul li ul{display:none;}

/* dropdown box, outside ul but inside dropdown */
.dropdown .ddbox {
	padding:16px;
	border-top:1px solid rgba(120, 120, 120, 0.2);
	background:#222;
	/*color:#ffffff;*/
}

.dropdown .ddbox a{
	color:#ccc;
}


/**********************
* Dropdown buttons 
* and header links that can be of the same appearance.
*/
  

.ddwrapper .ddbutton {
  color: #333;
  cursor: pointer;
  text-transform: uppercase;
  /*background:#fff;*/
  width:50px;
  height:50px;
  z-index:9999;
  /*position:relative; declared earlier */
}

/* hide the dropdown buttons if js isn't on */
.no-js .ddbutton{display:none;}


.small-screen .submenu-button {
  position: absolute;
  z-index: 99;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  height: 46px;
  width: 46px;
  cursor: pointer;
}
/*.small-screen .submenu-button.submenu-opened {
  background: #262626;
}*/
.small-screen ul ul .submenu-button {
  height: 34px;
  width: 34px;
}


/* specific buttons , could use position abs as mobile zooming can cause floats to shift down*/
.ddwrapper .ddbutton.searchbutton{
	float:right;
}
.ddwrapper .ddbutton.menubutton{
	float:left;
	margin-right:10px; /* so a little space between button and logo/link, for clumsy fingers. */
}
/*
alt option for all buttons and links right, logo left.
.menubutton{float:right;}
.logo {float:left;}
*/

.headerbox{
	position:relative;
	height:50px;
	width:50px;
	background:transparent;
	float:right;
	z-index:9999;
}


/******************************
* Construct all the button icons 
* menu
* submenus
* search
*/

/* menu button icon */

.menubutton:after {
	position: absolute;
	top: 24px;
	right: 15px;
	display: block;
	height: 4px;
	width: 20px;
	border-top: 2px solid #333;
	border-bottom: 2px solid #333;
	content: '';
	-webkit-transition: all .05s linear;
	-moz-transition: all .05s linear;
	-ms-transition: all .05s linear;
	-o-transition: all .05s linear;
	transition: all .05s linear;
}
.menubutton:before {
	position: absolute;
	top: 18px;
	right: 15px;
	display: block;
	height: 2px;
	width: 20px;
	background: #333;
	content: '';
	-webkit-transition: all .05s linear;
	-moz-transition: all .05s linear;
	-ms-transition: all .05s linear;
	-o-transition: all .05s linear;
	transition: all .05s linear;
}
.menubutton.dd-opened:after {
	top: 24px;
	border: 0;
	height: 2px;
	width: 19px;
	background: #333;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all .20s ease;
	-moz-transition: all .20s ease;
	-ms-transition: all .20s ease;
	-o-transition: all .20s ease;
	transition: all .20s ease;
}
.menubutton.dd-opened:before {
	top: 24px;
	background: #333;
	width: 19px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: all .20s ease;
	-moz-transition: all .20s ease;
	-ms-transition: all .20s ease;
	-o-transition: all .20s ease;
	transition: all .20s ease;
}

/* submenu buttons for small screens */

.small-screen .submenu-button:after {
  position: absolute;
  top: 22px;
  right: 18px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
.small-screen .submenu-button:before {
  position: absolute;
  top: 19px;
  right: 21px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
}
.small-screen ul ul .submenu-button:before {
  top: 13px;
  right: 15px;
}
.small-screen ul ul .submenu-button:after {
  top: 16px;
  right: 12px;
}
.small-screen .submenu-button.submenu-opened:before {
  display: none;
}
.small-screen .submenu-button.submenu-opened:after {
  background: #ffffff;
}

/* search button and submit button icon */

.searchsubmit:before,
.searchbutton:before {
	position: absolute;
	top: 15px;
	right: 15px;
	display: block;
	height: 13px;
	width: 13px;
	border-radius:50%; /* fails on orig iphone, shows a square. */
	border: 2px solid #333;
	content: '';
	-webkit-transition: all .05s linear;
	-moz-transition: all .05s linear;
	-ms-transition: all .05s linear;
	-o-transition: all .05s linear;
	transition: all .05s linear;
}
.searchsubmit:after,
.searchbutton:after {
	position:absolute;
	display: block;
	height:3px;
	top: 30px;
	right:28px;
	background: #333;
	width: 7px;
	content: '';
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: all .05s linear;
	-moz-transition: all .05s linear;
	-ms-transition: all .05s linear;
	-o-transition: all .05s linear;
	transition: all .05s linear;
}

.searchbutton.dd-opened:before {
	height:2px;
	top: 23px;
	right:15px;
	width: 19px;
	background: #333;
	border-radius:0;
	border: 0 none;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: all .20s ease;
	-moz-transition: all .20s ease;
	-ms-transition: all .20s ease;
	-o-transition: all .20s ease;
	transition: all .20s ease;
}
.searchbutton.dd-opened:after {
	top: 23px;
	right:15px;
	border: 0;
	height: 2px;
	width: 19px;
	background: #333;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all .20s ease;
	-moz-transition: all .20s ease;
	-ms-transition: all .20s ease;
	-o-transition: all .20s ease;
	transition: all .20s ease;
}

/* end of css icons */



/* 
* Open and close transitions
* this is what hides the dropdowns.. need .small-screen even if using open and closed after the break, to prevent trans when moving over the break.
* needs the max height set to something way above what might be needed, just to be sure.
* then the animation goes to that point, even though it cant be seen.
* may result in slight appearance of delay on closing, but easing out and in in only to speed up, looks ok.
*/

.small-screen .closed{
	max-height:0;
	overflow-y:hidden;
	-webkit-transition: all .20s ease-out;
	-moz-transition: all .20s ease-out;
	-ms-transition: all .20s ease-out;
	-o-transition: all .20s ease-out;
	transition: all .20s ease-out;
}
.small-screen .open{
	max-height:1400px;  /* feb 17, up from 100px, ipads etc.. maybe better if make a fade in in future */
	overflow-y:hidden;
	-webkit-transition: all .20s ease-in;
	-moz-transition: all .20s ease-in;
	-ms-transition: all .20s ease-in;
	-o-transition: all .20s ease-in;
	transition: all .20s ease-in;
}




/************
SEARCH BAR 
Form styles - mobile first
Search button icon style
*/

/* search bar is much shorter, so dont make transition go further than needed. 
* Or rem below line to hide the fact that the screen shoots to the top when the search field is focused.
* (auto focused by js makes this happen as soon as search is opened! */
.small-screen .dropdown.ddsearch.open{
	/*max-height:80px;*/
	max-height:120px;/* to add more height to cover page title.*/}


.dropdown form {width:100%;display:block;}
.dropdown form .form-inner{
	/*padding:20px 15px;*/
	padding:30px 15px 45px 25px; /* made bigger to push down and cover page title.. look neater. feb 17, now added more bottom and left padding.. looks a bit better spaced. */
	}
.dropdown form input{
	padding:2px 6px;
	border:0;
	margin:0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	font-size:17px;
	line-height:40px;
	height:40px;
	color:#ddd;
}
.dropdown form input[type='text'],
.dropdown form input[type='search']{
	width:85%;
	float:left;
	background-color:transparent;
	border-bottom:1px solid rgba(120, 120, 120, 0.5);
}
.dropdown form input[type="submit"],
.dropdown form button, /* rh feb 17, added these 2 new ones, as having min-width in bones theme form buttons was effecting the search icon button in dropdown too. just thought these might be relevant at some point if add 'button' tag in dd's */
.dropdown form button[type='submit'],
.dropdown form input[type='submit']{
	width:10%;
	min-width:auto;/*added after changing for forms in main theme styles, was effecting the search icon input button in dd */
	max-width:auto;
	float:right;
	background-color:transparent;
	/*border:1px solid rgba(120, 120, 120, 0.5);*/
	text-transform:uppercase;
	vertical-align:middle;
	line-height:35px;
	font-size:14px;
	font-weight:600;
	color:#ddd;
	text-indent:-9999px;
}

/* search submit button icon */
.searchsubmit:before {
	border: 2px solid #ddd;
	top:10px;
	left:10px;
}
.searchsubmit:after {
	background: #ddd;
	top:25px;
	left:7px;
}


/*************
EXTRAS - other styles:

 alt for just show and hiding with display
  
.small-screen .closed {
	display:none;
}
.small-screen .open {
	display:block;
}
*/


/******************
* Fixed header
*******************
* only fixed if js enabled (.fixed header added by js)
* NOTE: Except now adding .fixedheader to html body, to avoid page jump on body padding applied by js.
* This results in fixed header being on when js isnt.. so inc .js class before all these styles now, to overcome that issue.

* fixes headerbar and the dropdowns, so dropdowns can be scrolled up behind the headerbar
* For momentum (iphone) smooth scrolling, set overflow y to scroll and include -webkit-overflow-scrolling: touch
* this does result in scrollbars seen on some browsers even when not needed.. less smooth scrolling seems to be preferred by some major sites.
* 100% height needed on fixed element to get menu scroll, but covers whole page, even if only a few menu items
	.. so must use .small-screen selector so it doesnt apply after the break. Could reset after the break though.
* have seen methods where js is used to get menu height and set in the dropdown container.. but think this is difficult with submenu dropdowns.
* also can set dropdown to be wider than container and have overflow hidden on container so that the scroll bar seen when using overflow y is shifted out of view. see douglas digital, june 15.
*/

.fixedheader .small-screen .dropdown { 
	position:fixed;
	overflow-y:auto;
	height:100%;
	width:100%;
	left:0;
	top:0;
	z-index:9998;
	/* use if want to have smooth scrolling and hide y scroll bar, padding shifts bar to outside of screen, only tested in chrome and iphone 5 safari.
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch; 
	box-sizing:content-box;
	padding-right:20px; 
	*/
}
.fixedheader .headerbar {
	height:auto;
	/*z-index:9999; not needed?.. in desktop this makes logo cover search bar (if search bar is near logo), so set to 9991? or remove.. seems ok at the mo. */
	position:fixed;
	left:0;
	top:0;
	margin:0;
	width:100%;
	min-width:310px;/* for mobile zoom, stop floats inside from shifting, buttons and ddboxes etc */
	/* when fixed, the site header loses its structure to allow for fixed child elements, so add the drop shadow to headerbar too*/
	-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow:    0px 0px 15px rgba(0, 0, 0, 0.4);  /* Firefox 3.5 - 3.6 */
	box-shadow:         0px 0px 15px rgba(0, 0, 0, 0.4);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */

}

.fixedheader .dropdown {
	/*padding-top:50px; 
	changed to margin so dropdown comes from under headerbar, headerbar height transition wouldnt reveal it behind and headerbar can be semi transparent.*/
	margin-top:50px;
	height:0px;
}
.fixedheader .small-screen .dropdown.ddmenu.open {
	padding-bottom:120px;
	/* now using margin on top to bring dropdowns below headerbar, the bottom items were being cut off. 
	Currently only applying to ddmenu as ddsearch doesnt need whole screen.
	Adding bottom padding to dropdown brings the border box model dropdown contents higher, allowing for space underneath when scrolled down.. 
	Added space also makes clicking bottom items easier. */
}
/* as header is no longer in flow, any margin on first object (eg.content) will not push on body.. but rather push itself and body against screen top.
* So set padding on body if using fixed header.
Make padding the same as height of header to avoid page jump on js load.
Pixels removed from flow are added back in. */
body.fixedheader {padding-top:50px;}


/************
* Scrolling down 
* class added only when fixed, hide fixed headerbar (and remnants of dropdowns behind) on scroll down page down. 
changed trans to 'top' from 'all'
*/
.fixedheader  .headerbar{
	-webkit-transition: top .20s ease-out;
	-moz-transition: top .20s ease-out;
	-ms-transition: top .20s ease-out;
	-o-transition: top .20s ease-out;
	transition: top .20s ease-out;
}
/* hiding the headerbar again .. smoother transitions using in and ease out */
.fixedheader  .scrollhide .headerbar{
	-webkit-transition: top .20s ease-in;
	-moz-transition: top .20s ease-in;
	-ms-transition: top .20s ease-in;
	-o-transition: top .20s ease-in;
	transition: top .20s ease-in;
}
/* if scrolling down, totally hide the headerbar and the remaining padding of the dropdowns.
*  padding on dropdowns needed usually so they appear straight out of bottom of headerbar, not from up higher behind. */
.fixedheader .scrollhide .small-screen .headerbar,
.fixedheader .scrollhide .small-screen .dropdown{
	top:-70px;
	overflow-y:hidden;
}
/* make dropdowns shrink away to nothing, so quicker to transition than the headerbar that's overlaying them */
.fixedheader .scrollhide .small-screen .dropdown{padding:0;}




/* trying to find a way to give user a way to unfocus hover dropdown on desktop size touch devices...
working.. this needs to be hidden completely when not on desktop width (after the break) touch devices */
.ddwrapper div.unfocus-close-hover{
	position:absolute;
	top:-500px;
	display:none;
	width:1px;
	height:1px;
	z-index:9999;
	overflow:hidden;
}



/*social links */

.dd-social-links{
	
}




/* the break between mob dropdown and desktop behavoir */

@media only screen and (min-width: 868px) { /* was 768 need more room in nav menu, posibly add shop etc */

	.ddwrapper{width:94%;} /* No it isn't.. as ho-menu is loaded after styles, the 100% overrides .wrap styles, if load styles last, the 97% wrap overrides the 100% width above for mobiles. just set all here, easier. [OLD NOTE: is now applied with bones .wrap class] */
	


/* to allow somewhere to tap off of dropdown on touch devices in desktop view, ipads etc.. as there is very little free space without link to tap on to force unfocus.. and scroll wouldnt trigger it as still focused.
so, this just gives uses an empty div that triggers unfocus js when tappped. */


.touch .ddwrapper div.unfocus-close-hover.seen{
	top:50px;
	left:0px;
	width:50px;
	height:50px;
	display:block;
	background:transparent;
}
/* this inner div maybe not needed, but better to have container that's 'relative' for the cross, before after.. some browsers may apply those to the nearest parent with 'relative.. and the close-hover needs to be absolute. 
thought may be able to use transition, but not working.. maybe due to how js adds class? the X is actually seen just as the dropdown drops, but is quick enough to not be noticed.*/
.unfocus-button{ 
	width:100%;
	height:100%;
	position:relative;
}

.ddwrapper div.unfocus-button:before {
	position:absolute;
	display: block;
	background: #eee;
	width: 19px;
	height:2px;
	top: 23px;
	right:15px;
	content: '';
	border-radius:0;
	border: 0 none;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.ddwrapper div.unfocus-button:after {
	position:absolute;
	display: block;
	background: #eee;
	width: 19px;
	height:2px;
	top: 23px;
	right:15px;
	content: '';
	border-radius:0;
	border: 0 none;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
	
	
	/******************
	* Dropdowns
	*/
	.dropdown{
		clear:none;
		background:transparent; 
		opacity:1; /* needed after being 0 opacity in mob view (when closed). */
	}
	.dropdown  ul  {
		width:auto;
		z-index:9990;
	}
	.dropdown > ul > li {
		float: left;
	}
	.dropdown > ul > li > a { /* the first tier of menu items */
		font-size:16px;
		padding-top:17px; /* to add up to 50px with the 14px font.. so same height as icons and links etc */
		padding-bottom:17px;
		font-weight:400;
	}
	.dropdown ul li {
		width: auto;
		border-top: 0px;
	}
	.dropdown ul ul li,
	.dropdown li:hover > ul > li {
		height: auto;
	}
	.dropdown ul li a,
	.dropdown ul ul li a {
		width: auto;
	}
	.dropdown ul ul li a {
		border-bottom: 1px solid rgba(150, 150, 150, 0.15);
		padding: 11px 15px;
		min-width:140px;
	}
	.dropdown ul ul li:last-child > a,
	.dropdown ul ul li.last-item > a {
		border-bottom: 0;
	}
	/*.dropdown ul ul li:hover > a,
	.dropdown ul ul li a:hover {
		color: #ffffff;
	}*/
	.dropdown ul ul ul li a {
		padding: 11px 15px;
		min-width:140px;
	}
	.dropdown ul ul {
		position: absolute;
		left: -9999px;
		/* elements need to be hidden or display:none for hover states to become taps on tablets etc. */
		visibility:hidden;
		margin:0px;
		background:#333;  /* needed to stop tiny gaps seen on ios */
	}
	.dropdown ul ul li {
		height: 0;
		-webkit-transition: all .25s ease;
		-moz-transition: all .25s ease;
		-ms-transition: all .25s ease;
		-o-transition: all .25s ease;
		transition: all .25s ease;
	}
	.dropdown li:hover > ul {
		left: auto;
		visibility:visible;
	}
	.dropdown li:hover > ul > li  {
		height: 52px; /*fixed height needed to make hover transition work, the drop down animation. */
	}
	.dropdown li:hover > ul > li:last-child {
		height:34px; /* last anchor in list has no border so make li 1px shorter, the cna set background colour to ul, as on ios oddly can get gaps appear between items */
	}
	.dropdown ul ul ul {
		margin-left: 100%;
		top: 0;
	}
	.dropdown.align-right ul ul ul {
		margin-left: 0;
		margin-right: 100%;
	}
	.dropdown ul ul li a,
	.dropdown ul ul ul li a{
		white-space: nowrap; /* to ensure the submenu items can be pushed wider than parent li */
	}
	
	
	
	
	/* top level padding for icons */
	.dropdown > ul > li.menu-item-has-children > a , /* added so a non-js-loaded-class is appyling the padding (wp class), now no jumping while wait for js to load .has-sub */
	.dropdown > ul > li.has-sub > a {
		padding-right: 30px;
	}
	/* lower level padding for icons */
	.dropdown  li.has-sub > a {
		padding-right: 40px;
	}
	
	
	/* hide dropdown buttons, not needed on desktop, js looks for the display of this to trigger mobile menu. */
	/*.js #ddbutton1{display:none;}*/
	.js .menubutton{display:none;}
	
	
	
	/* desktop first level links now need different colour to sub menus links 
	* submenu link colours set above in mobile first styles. */
	.dropdown,
	.dropdown > ul > li a{
		color:inherit;
	}
	/* had to add focus etc too, as added them on mob above (white on white bg now when desktop), prob due to wp/bones having them set to something else, so needed to reset for menus. */
	.dropdown > ul > li > a:focus,
	.dropdown > ul > li > a:hover,
	.dropdown > ul > li > a:active,
	/*.dropdown ul > li:hover > a,*/
	.dropdown ul > li a:hover
	 {
		color: #777; 
		background:transparent;
	}
	
	
	
		
	/* menu plus and minus icons*/
	
	/* the minus symbol */
	.dropdown > ul > li.has-sub > a:after { 
		position: absolute;
		top: 22px;
		right: 11px;
		width: 8px;
		height: 2px;
		display: block;
		background: #dddddd;
		content: '';
		/*rh needed only as now removing minus sign too*/
		-webkit-transition: all .25s ease;
		-moz-transition: all .25s ease;
		-ms-transition: all .25s ease;
		-o-transition: all .25s ease;
		transition: all .25s ease;
	}
	/* the vertical bar to make a minus into a plus */
	.dropdown > ul > li.has-sub > a:before { 
		position: absolute;
		top: 19px;
		right: 14px;
		display: block;
		width: 2px;
		height: 8px;
		background: #dddddd;
		content: '';
		-webkit-transition: all .25s ease;
		-moz-transition: all .25s ease;
		-ms-transition: all .25s ease;
		-o-transition: all .25s ease;
		transition: all .25s ease;
	}
	/* added :after too.
	* to remove the minus sign as well.. as on tablets with default behavious the first tap opens dropdown.. but with a minus it looks like another will close it, but it wont.
	* it will go to the actual link.. need tablet makers to build in a 'tap anywhere' to close dropdowns behaviour, should come soon, hopefully.
	* Ive built it into the js now, using blur (unfocus) when click on anywhere in content, is a good fix. */
	.dropdown > ul > li.has-sub:hover > a:after,
	.dropdown > ul > li.has-sub:hover > a:before {
		top: 23px;
		height: 0;
	}
	
	
	/* menu plus and minus icons */
	/* REMOVING ICONS IN TOP LEVEL AS DELAY IN JS LOADING MAKES NAV ITEMS JUMP
	*  Dont like the uneveness of the menu items, may add back in one day?  SHOULD CLEAN UP IF KEEPING LIKE THIS!! 
	*/
	.dropdown > ul > li.has-sub > a:after,
	.dropdown > ul > li.has-sub > a:before { display:none;}
	.dropdown > ul > li.menu-item-has-children > a,
	.dropdown > ul > li.has-sub > a {
		padding-right: 17px;
	}
	
	/* submenu plus minus icons */
	
	.dropdown ul ul li.has-sub > a:after {
		position: absolute;
		top: 16px;
		right: 11px;
		width: 8px;
		height: 2px;
		display: block;
		background: #dddddd;
		content: '';
		/*trans added as now removing minus sign too. */
		-webkit-transition: all .25s ease;
		-moz-transition: all .25s ease;
		-ms-transition: all .25s ease;
		-o-transition: all .25s ease;
		transition: all .25s ease;
	}
	.dropdown ul ul li.has-sub > a:before {
		position: absolute;
		top: 13px;
		right: 14px;
		display: block;
		width: 2px;
		height: 8px;
		background: #dddddd;
		content: '';
		-webkit-transition: all .25s ease;
		-moz-transition: all .25s ease;
		-ms-transition: all .25s ease;
		-o-transition: all .25s ease;
		transition: all .25s ease;
	}
	/*added to remove the minus sign too. */
	.dropdown ul ul > li.has-sub:hover > a:after,
	.dropdown ul ul > li.has-sub:hover > a:before {
		top: 17px;
		height: 0;
	}
	
	
	/* rh feb 17, right place to add?, want has-sub item to be highlighted when dropdown active */
	.dropdown > ul > li.has-sub:hover{
		background:#f9f9f9;
	}
	
	
	
	
	
	/*
	* Dropdown menus
	*/
	.dropdown.ddmenu{max-width:65%;/*min-width:650px;*/float:left;}
	/*.dropdown.ddmenu > ul > li {font-size:12px;}*/
	
	
	
	
	
	
	
	/*************
	* Dropdown search bar - slide in
	* when not open, everything is collapsed, no width or padding etc.
	* when open, or if no js, then width and padding etc added.
	*/
	
	
	.dropdown form .form-inner{
		padding-left: 27%; 
		padding-right:22%;
		padding-bottom:60px;
	}

	.dropdown.ddsearch {
		position:absolute;
		top:50px; /*0*/
		z-index:999;
		/*max-width:0px;*/
		right:0px;/*65 needs changing if use additional headerboxes, cart etc. */
		height:auto;
		max-height:0px;
		background:#222222; /*fff*/
		overflow:hidden;
		width:100%;
		-webkit-transition: max-height .20s ease;
		-moz-transition: max-height .20s ease;
		-ms-transition: max-height .20s ease;
		-o-transition: max-height .20s ease;
		transition: max-height .20s ease;
	}
	.dropdown form button,
	.dropdown form input {
		/*max-width:0; */
		/*padding:0;*/
		color:#eee;
	}
	
	/* adjust a few things from mobile size styles */
	.dropdown form button[type='submit'],
	.dropdown form input[type='submit']{
		font-size:16px;
		font-weight:300;
	}
	
	/* how things look when open.. or if no js, needs to be visible */
	.ddsearch.open {
		/*max-width:72%;*/
		/*max-height:80px;*/
		max-height:150px; /* made bigger so can cover the page title */
		/*overflow:visible;*/
	}
	.ddsearch form button,
	.ddsearch form input {
		/* have to use percantage padding on width.. 
		* as form collapses in width, having px width padding makes the form fields/button stack before the form div can open, therefore resuting un ugly jump */
		padding:2px 1%; 
	}
	.ddsearch.open form input[type='text'],
	.ddsearch.open form input[type='search']{
		/*max-width:92%;
		width:92%;*/
		/*border-bottom:1px solid #ccc;*/
		/*color:inherit;*/
		text-align:center;
	}
	.ddsearch.open form button[type='submit'],
	.ddsearch.open form input[type='submit']{
		/*max-width:7%;
		width:7%;*/
		/*position:relative;*/
	}
	
	
	/* NO JS
	search button icon color when no js having white dd bg */
	.no-js .dropdown form .form-inner{padding:4px 15% 7px 22%;}
	.no-js .dropdown form button,
	.no-js .dropdown form input {
		color:#333;
	}
	
	.no-js .searchsubmit:before {
		border: 2px solid #333;
	}
	.no-js .searchsubmit:after {
		background: #333;
	}
	
	.no-js .dropdown.ddsearch {
		background:#fff;
		position:static;
		top:0; 
		z-index:999;
		border-top:0px solid #ccc;
		height:auto;
		max-height:100%;
		padding:10px 0 20px;
		/*max-width:15%;*/
		/*right:50px;*/  /* allows room for a headerbox, needs changing if add multiple headerboxes, cart etc */
	}
	/* as search div is now smaller, incase menu needs space.. make the fields fit better, allow space for search button icon. */
	/*.no-js .ddsearch form input[type='text'],
	.no-js .ddsearch form input[type='search']{
		max-width:70%;
		width:70%;
	}
	.no-js .ddsearch form button[type='submit'],
	.no-js .ddsearch form input[type='submit']{
		max-width:30%;
		width:30%;
	}*/
	/* Make the menu a little smaller, may change things if lots of menu items. */
	/*.no-js .dropdown.ddmenu{
		max-width:55%;
	}*/
	
	
	
	
	
	
	/****************
	* Fixed header 
	* Use .fixedheader-fix class on html body to apply some styles before js kicks in, so avoid page jump. (also forces fixed header in desktop only)?? dont need now??
	changed trans to 'top' from 'all' due to on page load the header coming in from left animated.
	*/
	.fixedheader #siteheader { 
		position:fixed;
		left:0;
		top:0;
		margin:0;
		width:100%;
		padding:0px;
		z-index:1400; /*was 9999 but covered photoswipe lightbox */
		-webkit-transition: top .70s ease;
		-moz-transition: top .70s ease;
		-ms-transition: top .70s ease;
		-o-transition: top .70s ease;
		transition: top .70s ease;
		max-height: 150px; 
		overflow-y:visible;
	}
	.fixedheader .dropdown { 
		margin-top:0;
	}
	.fixedheader .headerbar { /* its desktop so site header is now fixed, unset headerbar */
		position:relative;
		left:auto;
		top:auto;
		margin:0;
		width:auto;
		-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);  
		-moz-box-shadow:    0px 0px 0px rgba(0, 0, 0, 0);  
		box-shadow:         0px 0px 0px rgba(0, 0, 0, 0);  
	}
	.fixedheader #siteheader.scrollhide{
		top:-100px;
		max-height:90px;
		overflow-y:hidden;
	}
	
	
	
	
	/* end fixed header */
	
	
	
	/* dropdown ddboxes */
	
	.dropdown .ddbox {
		float:left;
		border:0 none;
		font-size:14px;
		padding-top:18px; /* to add up to 50px with the font size.. so same height as icons and links etc , but may well move these depending on what used for, so could change. */
			padding-bottom:18px;
	}
	
	
	
	
	/**********************
	* Centralising
	*/
	
	/*
	* centralise dropdown menu in header
	*/
	.central-menu .dropdown.ddmenu{
		max-width:65%;
		float:none;
		margin:0 auto;
		text-align:center;
	}
	.central-menu .dropdown > ul > li {
		float: none;
		display:inline-block;
	}
	
	.central-menu .dropdown .ddbox {
		display:none;/* hide as cant get to go alongside anything, shifted to next line. */
	}
	.central-menu .dropdown > ul > li > a{
		/*padding-left:20px;
		padding-right:20px;*/
		padding-left:15px; /* as more menu items added, need more room. */
		padding-right:15px;
	}
	
	
	/* reset the logo to left, after being central in mobile first styles. */
	.central-logo-small .logo{
		text-align:left;
		margin:0;
		max-width:auto;
		position:relative;
		margin-left:10px;
		float:left;
	}
	
	
	/*
	* centralise logo in header - on desktop
	doesnt work if menu central too!
	Have also enabled the logo to be central when small using .logo class.
	*/
	
	.central-logo .logo{
		float:none;
		position:absolute;
		left:0;
		right:0;
		margin:0 auto;
	}
	.central-logo .dropdown.ddmenu{
		max-width:40%;
	}
	
	
	
	/* headerbar collapses on mobile first if logo is pos absolute.. logo then not seen.
	So setting headerbar with min height in earlier styles.. need to remove/reset here. */
	.no-js .headerbar{
		min-height:0;
	}
	
	
	
	/*}*/
	
	
	
	
	/*
	* SUB COLUMNS - WIDER DROPDOWN AREA  (DELETE TO REVERT TO USUAL ONE COLUMN)
	* Can only go 2 wide as uses float right and left margin on first li's.
	* must have the 'work_date' items first in menu order.. or whatever is being separated into a right hand column.
	* No way to separate li's without putting in another sub menu level, then would make mobile view tricky to sort out
	* Could rebuild whole thing to handle that way of doing things at some point */
	
	/* Hide the less important menu items on mobile.. as its the second column on desktop but actually loaded first */
	/* Only needed if years come first and want to hide on mob first dropdown.. sorted showing cats first now.. may need checking in other browsers though.
	.subcols .dropdown > ul > li > ul.sub-menu > li.menu-item-object-work_date{
		display:none;
	}*/
	
	
	/*@media only screen and (min-width: 768px) {*/
		
	/* make parent element non-relative position so the dropdown spans to next ancestor. */
	.subcols .dropdown > ul > li{
		position: static;
	}
	.subcols .dropdown li > ul {
		/* needed height 0 and hidden overflow so the animation is smoother, without these the ul behind the li's seems slower than menu items, looks jumpy. 
		was still jumpy, so now removed bg color of li or links, just using bg of ul now.
		height:0px;
		overflow:hidden;
		left:0;*/
		/* if put a border eg. red, at bottom of ul, still looks jumpy, but adding trans helps.
		* However, with the padding at the top of the ul on hover, the trans looks bad. 
		* So really, it's not needed. */
		/*-webkit-transition: all .25s linear;
		-moz-transition: all .25s linear;
		-ms-transition: all .25s linear;
		-o-transition: all .25s linear;
		transition: all .25s linear;*/
		
	}
	/* for showing dark bg on top link so dont hover-out mouse 
	.subcols .dropdown li.menu-item-has-children:hover{
		background:#333; } */
		
	.subcols .dropdown li:hover > ul {
		height:auto;
		padding-top:20px;
		padding-bottom:55px;
		left:0;
		/*background-color:rgba(0, 0, 0, 0.90); for trans bg */
		background:#222222; /* rh changed from 333, feb 17 */
		overflow:visible; /* only needed for 3rd level menus to be seen.. 
		if not having any, better to keep as hidden, smoother transitions.. as the ul doesnt keep up with the li's in front. 
		Or, as done here now, have trans links and only have colour on ul bg.*/
	}
	.subcols .dropdown > ul > li > ul {
		width:100%;
	}
	.subcols .dropdown > ul > li > ul > li {
		width:50%;
		/* float and margin not needed if years are before cats (orig way) */
		/*float:left;*/
		/*margin-right:2px; not neded now central..  just enough to force each down to next row*/
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		text-transform: uppercase;
		background:inherit; /* so looks better during animated opening, not words stacked on top of each other. but is this making it flicker more on page load as it all closes? seems not, but don't remember it being that flickery.. feb 2017 now.*/
		margin-top:3px; /* setting the background then covers up the divider lines, so set a bit of top margin. */
	}
	.subcols .dropdown > ul > li > ul > li a{
		-webkit-transition: all .25s linear;
		-moz-transition: all .25s linear;
		-ms-transition: all .25s linear;
		-o-transition: all .25s linear;
		transition: all .25s linear;
		/* rh added feb 17, font was too small on big screen. */
		font-size:16px;
		padding-top:18px;
		padding-bottom:18px;
	}
	.subcols .dropdown > ul > li > ul > li a:hover{
		text-indent:4px;
	}
	/* add an indicator symbol on hover */
	.subcols .dropdown > ul > li > ul > li a:before{
		content: '> ';
		visibility:hidden;
		margin-right:10px;
	}
	.subcols .dropdown > ul > li > ul > li a:hover:before{
		visibility:visible;
	}
	
/* on touch devices, iphone ipad, a big change in hover state results in needing a double tap, so no indent. .touch class added by modernizr.. Prob.
	Ok, so putting: ontouchstart='' on ddmenu div seems to have made the links trigger while showing their hover state.. nice.
	.touch .subcols .dropdown > ul > li > ul > li a:hover{
		text-indent:0px;
	}
	.touch .subcols .dropdown > ul > li > ul > li a:before{
		display:none;
	}
*/ 


/* 3 levels down ? */	
	.subcols .dropdown > ul > li > ul > li:hover > ul {
		padding:0;
		left:-10px;
		min-width:100%;
	}
	.subcols .dropdown > ul > li > ul > li:hover > ul > li > a {
		background: #444444;
	}
	.subcols .dropdown > ul > li > ul > li > a {
		margin:0 10px;
		background:transparent;
	}
	/*.subcols .dropdown > ul > li > ul.sub-menu > li.menu-item-object-work_date*/
	/*.subcols .dropdown > ul > li > ul.sub-menu > li:nth-child(n+4)*/
	/* add .menu-right class in custom wp menu, enable in screen options */
	.subcols .dropdown > ul > li > ul.sub-menu > li.menu-right{
		display:block;/* only needed as set to none in mob first */
		float:none;
		margin-left:50%;
		text-transform:inherit;
		/* if putting years before cats (orig way)
		float:right;
		margin-left:100%;*/
	}
	
	
	.subcols .dropdown ul ul li:last-child > a,
	.subcols .dropdown ul ul li.last-item > a {
	 border-bottom: 1px solid rgba(150, 150, 150, 0.15);
	}/* unable to remove the border at bottom of second column.. so adding one in to the actual last item so it matches.*/
	
	
	
	/* make dropdown span wider - inc more parent elements non-relative position so the dropdown spans wider still
	* dont use 3rd level as could be outside window! */
	.subcols.widedd .dropdown.ddmenu,
	.subcols.widedd .dropdown.ddmenu > ul{
		position: static;
	}
	.subcols.widedd .dropdown > ul > li > ul > li {
		width:35%;
		/*margin-left:15%; central itmes now */
		/*margin:0 15%; if putting years before cats (orig way)*/
	}

/* to do: maybe create menu item parent for work dates, but only use the parent in mob first, on desktop have it expand and behave as the parent ul */

}

@media only screen and (min-width:1400px) {
	/* give the top menu more space, try to stop the dropdown from being lost due to brief off-hover when moving mouse. */
	.central-menu .dropdown > ul > li > a{
		/*padding-left:20px;
		padding-right:20px;*/
		padding-left:30px; /* as more menu items added, need more room. */
		padding-right:30px;
	}
}