/* *********************************************************** */
/*                                                             */
/*                This file should not be changed.             */
/*      If changes are required - override in styles.css       */
/*                                                             */
/* *********************************************************** */

/* Set transitions */
#menu-icon,
#menubox-wrap,
#menubox,
.dropdown-menu-wrap,
.arrow  {
  transition: all var(--d-transition-base) !important;
}

/* MOBILE SMALL - Non-Retina - (0-321px) */
/* Stop the Body Scrolling when menu open - doesn't work on mobile. Can put on the html element, but that causes the page to scroll to the top automatically - not good. Haven't seen a better alternative yet. */
body.menu-open {
  overflow-y: hidden;
  position: relative;
}
/* set-up window for menu to appear inside */
#menubox-wrap {
  --d-menubox-wrap-height: calc(100svh - (var(--d-toolbar-height) + var(--d-toolbar-tray-height) + var(--d-admin-height) + var(--d-heading-height-total))); 
  margin-left: calc(var(--d-space-xxs) * -1); /* to display the focus outline */
  margin-right: calc(var(--d-space-xxs) * -1); /* to display the focus outline */
}
nav.menu--main {
  margin-left: var(--d-space-xxs); /* to display the focus outline */
  margin-right: var(--d-space-xxs); /* to display the focus outline */
}

/* --------------- navigation ---------------- */
/* === Menu/Search Icon === */
.menu-icons-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
}
#menu-icon,
#search-icon,
#search-icon-nav { /* Menu/Search button on mobile/tablet */
  position: relative;
}
#menu-icon,
#search-icon { /* Menu/Search button on mobile/tablet */
  margin:0;
  padding:0 !important;
  background-color:var(--d-menu-search-bg);
  border:solid 0.1rem var(--d-menu-search-border); /* Always have a border color - if you don't want one, colour it the same as the background */
  height:4.6rem; 
  width:4.6rem;
  margin-left: 0.5rem;
}
#menu-icon,
#search-icon,
#search-icon-nav {
  display:none !important; /* Initially hide icons - don't want to see them if no javascript plus hide search button in navigation bar on mobile and tablet */
  color: transparent !important; /* Prevents colour flashing on hover/focus */
}
.js #menu-icon,
.js #search-icon {
  display:block !important; /* If there is javascript, show 'Menu' and 'Search' icons */
}
/* hover */
#menu-icon:hover,
#menu-icon:focus,
#search-icon:hover,
#search-icon:focus { /* navigation menu/search icons on hover */
  background-color:var(--d-menu-search-bg-hover);
  border-color:var(--d-menu-search-border-hover);
}
/* aria-expanded/active */
#menu-icon[aria-expanded="true"],
#search-icon[aria-expanded="true"] { /* navigation menu/search iconss on active */
  background-color:var(--d-menu-search-bg-active);
  border-color:var(--d-menu-search-border-active);
}
/* Menu/Search Icons */
/* Common */
#menu-icon .line,
#search-icon .circle, 
#search-icon .line,
#search-icon-nav .circle, 
#search-icon-nav .line {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0.2rem;
  display: block;
  transform-origin: center;
}
#menu-icon .line, 
#search-icon .line, 
#search-icon-nav .line {
  background-color: var(--d-menu-search-color);
  height: 0.2rem;
  margin: auto;
}
/* Menu Icon */
#menu-icon .line {
  transition: margin-bottom 150ms ease-in 150ms, margin-top 150ms ease-in 150ms, transform 150ms ease-in, opacity 0ms 150ms, background-color 150ms ease-in;
  width: 60%;
}
#menu-icon .line-1 {
  margin-top: 30%;
}
#menu-icon .line-3 {
  margin-bottom: 30%;
}
/* Hover */
#menu-icon:hover .line, 
#menu-icon:focus .line, 
#menu-icon .line:hover, 
#menu-icon .line:focus,
#menu-icon[aria-expanded="true"]:hover .line, 
#menu-icon[aria-expanded="true"]:focus .line, 
#menu-icon[aria-expanded="true"] .line:hover, 
#menu-icon[aria-expanded="true"] .line:focus, 
#search-icon:hover .line, 
#search-icon:focus .line, 
#search-icon .line:hover, 
#search-icon .line:focus,
#search-icon[aria-expanded="true"]:hover .line, 
#search-icon[aria-expanded="true"]:focus .line, 
#search-icon[aria-expanded="true"] .line:hover, 
#search-icon[aria-expanded="true"] .line:focus {
  background-color: var(--d-menu-search-color-hover);
}
/* aria-expanded/active  */
#menu-icon[aria-expanded="true"] .line,
#search-icon[aria-expanded="true"] .line {
  background-color: var(--d-menu-search-color-active);
}
#menu-icon[aria-expanded="true"] .line {
  transition: margin-bottom 150ms ease-in, margin-top 150ms ease-in, transform 150ms ease-in 150ms, opacity 0ms 150ms, background-color 150ms ease-in;
}
#menu-icon[aria-expanded="true"] .line-1 {
  margin-top: calc(50% - 0.1rem); /* 50% minus half of line height */
  transform: rotate(45deg);
}
#menu-icon[aria-expanded="true"] .line-2 {
  opacity:0;
}
#menu-icon[aria-expanded="true"] .line-3 {
  margin-bottom: calc(50% - 0.1rem);
  transform: rotate(-45deg);
}
/* Search Icon */
#search-icon .circle,
#search-icon-nav .circle{
  border: 0.2rem solid var(--d-menu-search-color);
  height: 30%;
  width: 30%;
  border-radius: 50%;
  margin-left: 25%;
  margin-top: 25%;
  transform: rotate(-45deg);
  transition: all 150ms ease-in 50ms, border-radius 150ms ease-in, border-color 150ms ease-in, background-color 150ms ease-in;
}
#search-icon .line,
#search-icon-nav .line {
  width: 70%;
  transform: rotate(45deg);
  clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 60% 100%);
  transition: width 150ms ease-in, background-color 150ms ease-in, clip-path 150ms ease-in 100ms;
}
/* hover */
#search-icon:hover .circle, 
#search-icon:focus .circle, 
#search-icon .circle:hover, 
#search-icon .circle:focus {
  border-color: var(--d-menu-search-color-hover);
}
#search-icon[aria-expanded="true"]:hover .circle, 
#search-icon[aria-expanded="true"]:focus .circle, 
#search-icon[aria-expanded="true"] .circle:hover, 
#search-icon[aria-expanded="true"] .circle:focus {
  background-color: var(--d-menu-search-color-hover);
}
/* aria-expanded */
#search-icon[aria-expanded="true"] .circle,
#search-icon-nav[aria-expanded="true"] .circle {
  border-width: 0px;  
  height: 0.2rem;
  width: 60%;
  background-color: var(--d-menu-search-color-active);
  border-radius: 0.2rem;
  margin-top: calc(50% - 0.1rem); /* 50% minus half of line height */
  margin-left: 20%;
  transition: all 150ms ease-in, border-radius 150ms ease-in 50ms, border-color 150ms ease-in, background-color 150ms ease-in;
}
#search-icon[aria-expanded="true"] .line,
#search-icon-nav[aria-expanded="true"] .line {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  width: 60%;
}
/* === Main menu settings === */
.inline-searchbox-menubox-wrap {
  flex-basis: 100%;
}
#menubox-wrap {
  display: block !important;
  max-height: var(--d-menubox-wrap-height) !important;
}
/*#main-navigation,
#searchbox {
  background-color: var(--d-heading-bg);
}*/ /* It should use the HEader background colour */
#main-navigation,
#searchbox .search-block-form form {
  padding-top: var(--d-heading-padding-tb); 
  padding-bottom: var(--d-heading-padding-tb); 
}
#searchbox {
  display: block !important;
}
.js body:not(.menu-open) #menubox-wrap,
.js body:not(.search-open) #searchbox {
  max-height: 0 !important;
  overflow: hidden;
}
.js .menu-open #menubox-wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
.js .search-open #searchbox {
  max-height: 10rem;
  overflow: hidden;
}

/* === Top level menu items === */
nav.menu--main {
  background-color: var(--d-nav-border); /* Use this to colour background behind mobile navigation - gives border effect on each tab */
}
nav.menu--main ul.menu { /* navigation menu UL */
  background-color:transparent;  /* background of whole navigation bar - should be transparent*/
}
nav.menu--main ul.menu, 
nav.menu--main ul.menu ul,
nav.menu--main ul.menu li {
  list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); /* This is for IE 10, 11 and Edge to prevent bullets from appearing */
}
nav.menu--main ul.menu li { /* navigation menu tab container */
  position:relative;
  line-height: 1;
}
/* === Top level menu items === */
nav.menu--main ul.menu li > a,
/* Child Trigger */
.js nav.menu--main ul.menu li > .dropdown-trigger,
.js nav.menu--main ul.menu li > .dropdown-trigger .arrow,
/* Search Icon in Nav */
#search-icon-nav { /* navigation menu, 'Menu' and 'Search' tabs */
  text-decoration:none;
  line-height: 1.2;
  display: block; /* required to make the <a> links appear as full height tabs */
  font-size: var(--d-nav-font-size);
  font-weight:500;
  padding:var(--d-nav-padding-tb) var(--d-nav-padding-lr); /* padding of each tab in mobile /tablet version */
  background-color: var(--d-nav-bg); 
  color:var(--d-nav-color);  /* top level tab font color*/
}
/* Search Icon in Nav */
#search-icon-nav .circle {
  border-color: var(--d-nav-color)
}
#search-icon-nav .line {
  background-color: var(--d-nav-color)
}
nav.menu--main ul.menu li a {
  margin-bottom: 0.1rem; /* Gap below each navigtion tab. To colour this gap, colour background of nav.menu--main */
}
.js nav.menu--main > ul.menu > li.expanded > a {
  width: calc((100% - (var(--d-nav-padding-lr) * 2)) - (var(--d-nav-font-size) + (var(--d-nav-padding-lr) * 2))); /* Set width of link if there are children. Width is 100% minus LR Padding both sides minus width of dropdown-trigger */
}
.js nav.menu--main ul.menu li > .dropdown-trigger { /* navigation menu child trigger */
  border-left: 0.1rem solid var(--d-nav-border); 
}
.js nav.menu--main ul.menu li > .dropdown-trigger .arrow { /* navigation menu, 'Menu' and 'Search' tabs */
  padding:0;
}
/* hover */
nav.menu--main ul.menu li > a:hover,
nav.menu--main ul.menu li > a:focus,
nav.menu--main ul.menu li:hover > a,
nav.menu--main ul.menu li:focus > a,
/* child trigger hover */
.js nav.menu--main ul.menu li > .dropdown-trigger:hover,
.js nav.menu--main ul.menu li > .dropdown-trigger:focus,
.js nav.menu--main ul.menu li > .dropdown-trigger:hover .arrow,
.js nav.menu--main ul.menu li > .dropdown-trigger:focus .arrow,
/* Search Icon in Nav */
#search-icon-nav:hover,
#search-icon-nav:focus,
#search-icon-nav[aria-expanded="true"]:hover,
#search-icon-nav[aria-expanded="true"]:focus {
  background-color:var(--d-nav-bg-hover); /* background for top level tab on hover */
  color: var(--d-nav-color-hover);  /* top level tab font color on hover*/
}
/* Search Icon in Nav */
#search-icon-nav:hover .circle,
#search-icon-nav:focus .circle,
#search-icon-nav .circle:hover,
#search-icon-nav .circle:focus {
  border-color: var(--d-nav-color-hover)
}
#search-icon-nav:hover .line,
#search-icon-nav:focus .line,
#search-icon-nav[aria-expanded="true"]:hover .line,
#search-icon-nav[aria-expanded="true"]:focus .line,
#search-icon-nav .line:hover,
#search-icon-nav .line:focus,
#search-icon-nav[aria-expanded="true"] .line:hover,
#search-icon-nav[aria-expanded="true"] .line:focus,
#search-icon-nav[aria-expanded="true"]:hover .circle,
#search-icon-nav[aria-expanded="true"]:focus .circle,
#search-icon-nav[aria-expanded="true"] .circle:hover,
#search-icon-nav[aria-expanded="true"] .circle:focus {
  background-color: var(--d-nav-color-hover)
}
/* active */
nav.menu--main ul.menu li.active > a,
nav.menu--main ul.menu li.active > a:hover,
nav.menu--main ul.menu li.active > a:focus,
nav.menu--main ul.menu li > a.is-active,
nav.menu--main ul.menu li > a.is-active:hover,
nav.menu--main ul.menu li > a.is-active:focus,
nav.menu--main ul.menu li > a:hover.is-active,
nav.menu--main ul.menu li > a:focus.is-active,
/* child trigger active */
.js nav.menu--main ul.menu li.active > .dropdown-trigger,
.js nav.menu--main ul.menu li.active > .dropdown-trigger:hover,
.js nav.menu--main ul.menu li.active > .dropdown-trigger:focus,
.js nav.menu--main ul.menu li.active > .dropdown-trigger .arrow,
.js nav.menu--main ul.menu li.active > .dropdown-trigger:hover .arrow,
.js nav.menu--main ul.menu li.active > .dropdown-trigger:focus .arrow,
/* Search trigger in Nav */
#search-icon-nav[aria-expanded="true"] {
  background-color:var(--d-nav-bg-active); /* background for top level tab on active */
  color: var(--d-nav-color-active);  /* top level tab font color on active*/
}
/* Search Icon in Nav */
#search-icon-nav[aria-expanded="true"] .circle,
#search-icon-nav[aria-expanded="true"] .line {
  background-color: var(--d-nav-color-active)
}

/* === Child Trigger === */
nav.menu--main ul.menu li > .dropdown-trigger {
  display: none;
}
.js nav.menu--main ul.menu li > .dropdown-trigger {
  position:absolute !important;
  top:0;
  right:0;
  cursor:pointer;
  display:block;
  /* reset Visually Hidden on mobile */
  overflow: visible;
  clip: auto;
  width: calc(var(--d-nav-font-size) + var(--d-nav-padding-lr) + var(--d-nav-padding-lr));
  height: auto;
}

.js nav.menu--main ul.menu li > .dropdown-trigger .arrow {
  transform: rotate(0deg);
  display:block;
}
.js nav.menu--main ul.menu li > .dropdown-trigger[aria-expanded="true"] .arrow {
  transform: rotate(90deg);
}
/* === Drop down first level === */
nav.menu--main ul.menu li ul { /* Drop down navigation menu UL */ 
  width:100%; /*width of drop down tab */
  position:relative; /* position the sublist to nearest positioned ancestor, the (nav.menu--main ul.menu li) in this case*/
  overflow: hidden; /* hide part of UL while animation is occuring */
}
nav.menu--main ul.menu li ul li,
nav.menu--main ul.menu li ul li ul li { /* Drop down navigation tab container */ 
  width:100% !important;
  margin-top:0;
}
nav.menu--main ul.menu li ul { /* first level drop down menu */
  display:block; /* Initially show first level drop down menu on mobile/tablet */
  visibility:visible;
}
nav.menu--main ul.menu li ul li ul { /* second level drop down menu*/ 
  display:none; /* Initially hide second level drop down menu */
}
/* === Drop down first level === */
nav.menu--main ul.menu li ul li > a,
.js nav.menu--main ul.menu li ul li > .dropdown-trigger,
.js nav.menu--main ul.menu li ul li > .dropdown-trigger .arrow  { /* Drop down navigation tab */ 
  background-color:var(--d-nav-drop-bg); 
  color: var(--d-nav-drop-color);
  font-weight:300;
}
/* hover */
nav.menu--main ul.menu li ul li > a:hover,
nav.menu--main ul.menu li ul li > a:focus,
/* child trigger hover */
.js nav.menu--main ul.menu li ul li > .dropdown-trigger:hover,
.js nav.menu--main ul.menu li ul li > .dropdown-trigger:focus,
.js nav.menu--main ul.menu li ul li > .dropdown-trigger:hover .arrow,
.js nav.menu--main ul.menu li ul li > .dropdown-trigger:focus .arrow {
  background-color:var(--d-nav-bg-hover);  /* background for first level drop down menu on hover */
  color: var(--d-nav-color-hover); /* font colour on first level drop down menu on hover */
}
/* active */
nav.menu--main ul.menu li ul li > a.is-active,
nav.menu--main ul.menu li ul li > a.is-active:hover,
nav.menu--main ul.menu li ul li > a.is-active:focus,
/* child trigger active */
.js nav.menu--main ul.menu li ul li.active > .dropdown-trigger,
.js nav.menu--main ul.menu li ul li.active > .dropdown-trigger:hover,
.js nav.menu--main ul.menu li ul li.active > .dropdown-trigger:focus,
.js nav.menu--main ul.menu li ul li.active > .dropdown-trigger .arrow,
.js nav.menu--main ul.menu li ul li.active > .dropdown-trigger:hover .arrow,
.js nav.menu--main ul.menu li ul li.active > .dropdown-trigger:focus .arrow { /* Drop down navigation tab on active */ 
  background-color:var(--d-nav-drop-bg-active); /* background on active */
  color: var(--d-nav-drop-color-active);  /* Tab font color on active */
}
/* === Drop down second level === */
nav.menu--main ul.menu li ul li ul,
.js nav.menu--main ul.menu li ul li ul { /* Drop down navigation tab container */ 
  display:none !important; /* hides second level drop down */
}

/* Open Mobile Menu animation */
@keyframes openmenu {
  from {
    display: block;
    max-height: 0;
  }
  to {
    max-height: calc((var(--menu-height) * 1.2) * (var(--d-nav-font-size) + var(--d-nav-padding-tb) + var(--d-nav-padding-tb) + (0.1rem * var(--menu-height)) )); 
  }
}
@keyframes closemenu {
  from {
    max-height: calc((var(--menu-height) + 1.2) * (var(--d-nav-font-size) + var(--d-nav-padding-tb) + var(--d-nav-padding-tb) + (0.1rem * var(--menu-height)) )); 
  }
  to {
    max-height: 0;
    display: none;
  }
}
button.dropdown-trigger + ul.dropdown-menu {
  animation: closemenu 0.05s; /* Call the Keyframe above and run over 0.15s */
  animation-fill-mode: forwards; /* When the animation ends, keep the settings on the last animation frame */
}
button.dropdown-trigger[aria-expanded="true"] + ul.dropdown-menu {
  animation: openmenu 0.5s; /* Call the Keyframe above and run over 0.5s */
  animation-fill-mode: forwards; /* When the animation ends, keep the settings on the last animation frame */
}

/* ------------------------------------- RESPONSIVE ADJUSTMENTS ------------------------------------- */
@media all and (min-width: 768px) {
  /* TABLET - Non-Retina - (768px-1024px) */
  
}
@media
only screen and (min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and (min-resolution: 192dpi) and (min-width: 768px),
only screen and (min-resolution: 2dppx) and (min-width: 768px) { 
  /* TABLET - Retina - (768px-1024px) */
  
}
@media all and (min-width: 1025px), print {
  /* DESKTOP SMALL - Non-Retina - (1025px-1280px) */
  
  /* Reset from Mobile */
  /* Reset stop the Body Scrolling when menu open from mobile */
  body.menu-open {
    overflow-y: visible;
  }
  /* Reset window for menu to appear inside */
  #menubox-wrap {
    --d-menubox-wrap-height: 100%; 
    margin-left: 0; /* to display the focus outline */
    margin-right: 0; /* to display the focus outline */
  }
  nav.menu--main {
    margin-left: 0; /* to display the focus outline */
    margin-right: 0; /* to display the focus outline */
  }
  
  /* --------------- navigation ---------------- */  
  #menu-icon, 
  .js #menu-icon,
  #search-icon,
  .js #search-icon { /* Hide 'Menu' and 'Search' tabs on desktop */
    display:none !important;
  }
  #search-icon-nav { /* Show search icon in navigaion bar */
    display:block !important;
  }
/* Search Icon */
  #search-icon-nav .circle{
    height: 21%;
    width: 21%;
    margin-left: 31%;
    margin-top: 31%;
  }
  #search-icon-nav .line {
    width: 46%;
  }
  /* aria-expanded */
  #search-icon-nav[aria-expanded="true"] .circle {
    width: 46%;
    margin-left: 27%;
  }
  #search-icon-nav[aria-expanded="true"] .line {
    width: 46%;
  }
  
  
  /* === Main menu settings === */
  .inline-searchbox-menubox-wrap {
    flex-basis: auto;
  }
  #menubox-wrap #main-navigation {
    padding-top: 0; 
    padding-bottom: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
  }
  #menubox-wrap.menubox-inline #main-navigation {
    justify-content: flex-end;
  }
  #search-icon-nav { /* 'Menu' tab on mobile/tablet */
    background-color: var(--d-nav-bg); 
    color:var(--d-nav-color);  /* top level tab font color*/
    height:calc((var(--d-nav-font-size) * 1.2) + (var(--d-nav-padding-tb) * 2) + var(--d-nav-border-bottom-width)); 
    width:calc((var(--d-nav-font-size) * 1.2) + (var(--d-nav-padding-tb) * 2));
    padding:var(--d-nav-padding-tb) 0; /* padding of each tab in mobile /tablet version */
  }
  #searchbox.searchbox-header {
    width:250px;
  }
  .fixed-header #searchbox.searchbox-header {
    margin-top:-100px !important; /* Scrolls the Seachbox off the page when the page scrolls */
  }
  #main-navigation {
    background-color: transparent; /* reset backgound below navigation on mobile/tablet - should be transparent */
  }
  .js body.menu-open #menubox-wrap,
  .js body:not(.menu-open) #menubox-wrap {
    max-height: 100% !important; /* Reset from Mobile */
    overflow: visible !important; /* Reset from Mobile */
  }
  /* === Top level menu items === */
  nav.menu--main {
    background-color: transparent; /* Reset from mobile - should be transparent*/
  }
  nav.menu--main ul.menu { /* navigation menu UL */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  /* Top level menu items */
  .region-navigation-full-width #menubox-wrap { /* Whole Navigation Bar to the edge of the screen. */
    background-color:var(--d-nav-bg); 
  }
  .js nav.menu--main ul.menu li.expanded > a {
    width: auto;/* Reset from mobile */
  }
  .fixed-header nav.menu--main ul.menu li > a,
  .fixed-header #search-icon-nav {
    padding-top: var(--d-nav-padding-tb-fixed);
    padding-bottom: var(--d-nav-padding-tb-fixed);
  }
  /* === Full-width Navigation === */
  .fullwidth-searchbox-menubox-wrap .navigation-wrap {
    background-color: var(--d-nav-bg); /* Background colour - only on full width menu */
  }
  .region-navigation-full-width nav.menu--main > ul.menu { /* navigation menu */
    border-left: 0.1rem solid var(--d-nav-border-right); /* left border colour on first tab - opposite of below*/
    border-right: 0.1rem solid var(--d-nav-border-left); /* right border colour on last tab - opposite of below */
  }
  .region-navigation-full-width nav.menu--main ul.menu li > a,
  .menubox-full-width #search-icon-nav { /* navigation menu, 'Menu' and 'Search' tabs */
    border: 0.1rem solid var(--d-nav-border);
    border-left-color: var(--d-nav-border-left); /* left border colour on each tab */
    border-right-color: var(--d-nav-border-right); /* right border colour on each tab */
    margin-bottom: 0; /* reset from mobile */
  }
  /* hover */
  .region-navigation-full-width nav.menu--main ul.menu li > a:hover,
  .region-navigation-full-width nav.menu--main ul.menu li > a:focus, 
  .menubox-full-width #search-icon-nav:hover,
  .menubox-full-width #search-icon-nav:focus {
    border-color: var(--d-nav-border-hover);
    border-left-color: var(--d-nav-border-left-hover); /* left border colour on each tab on hover */
    border-right-color: var(--d-nav-border-right-hover); /* right border colour on each tab on hover */
  }
  /* active */
  .region-navigation-full-width nav.menu--main ul.menu li.active > a,
  .region-navigation-full-width nav.menu--main ul.menu li.active > a:hover,
  .region-navigation-full-width nav.menu--main ul.menu li.active > a:focus,
  .region-navigation-full-width nav.menu--main ul.menu li > a.is-active,
  .region-navigation-full-width nav.menu--main ul.menu li > a.is-active:hover,
  .region-navigation-full-width nav.menu--main ul.menu li > a.is-active:focus,
  .menubox-full-width #search-icon-nav[aria-expanded="true"] {
    border-color: var(--d-nav-border-active);
    border-left-color: var(--d-nav-border-left-active); /* left border colour on each tab on active */
    border-right-color: var(--d-nav-border-right-active); /* right border colour on each tab on active */
  }
  /* === Inline Navigation === */
  /* Top level menu items */
  .region-navigation-inline nav.menu--main ul.menu li > a,
  .menubox-inline #search-icon-nav {/* navigation menu tabs */
    background-color:transparent;  /* background for top level tab on hover */
    border-bottom: var(--d-nav-border-bottom-width) solid var(--d-nav-border-bottom); /* bottom border colour on each tab */
    margin-bottom: 0; /* reset from mobile */
  }
  /* hover */
  .region-navigation-inline nav.menu--main ul.menu li > a:hover,
  .region-navigation-inline nav.menu--main ul.menu li > a:focus, 
  .menubox-inline #search-icon-nav:hover,
  .menubox-inline #search-icon-nav:focus {
    background-color:transparent;  /* background for top level tab on hover */
    border-bottom-color:var(--d-nav-border-bottom-hover); /* bottom border colour on each tab on hover */
  }
  /* active */
  .region-navigation-inline nav.menu--main ul.menu li.active > a,
  .region-navigation-inline nav.menu--main ul.menu li.active > a:hover,
  .region-navigation-inline nav.menu--main ul.menu li.active > a:focus,
  .region-navigation-inline nav.menu--main ul.menu li > a.is-active,
  .region-navigation-inline nav.menu--main ul.menu li > a.is-active:hover,
  .region-navigation-inline nav.menu--main ul.menu li > a.is-active:focus,
  .menubox-inline #search-icon-nav[aria-expanded="true"] {
    background-color:transparent;  /* background for top level tab on active */
    border-bottom-color:var(--d-nav-border-bottom-active); /* bottom border colour on active */
  }
  /* === Child Trigger === */
  .js nav.menu--main ul.menu li .dropdown-trigger {
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: var(--d-nav-padding-lr);
    height: 1px;
    padding-left:0;
    padding-right:0;
    border-left: none;
  }
  .js nav.menu--main ul.menu li .dropdown-trigger.visually-hidden.focusable:active, 
  .js nav.menu--main ul.menu li .dropdown-trigger.visually-hidden.focusable:focus,
  .js nav.menu--main ul.menu li .dropdown-trigger.visually-hidden.focusable[aria-expanded="true"] {
    overflow: visible;
    clip: auto;
    height: auto;
  }
  .js .region-navigation-inline nav.menu--main ul.menu li .dropdown-trigger.visually-hidden.focusable,
  .js .region-navigation-inline nav.menu--main ul.menu li .dropdown-trigger.visually-hidden.focusable:active, 
  .js .region-navigation-inline nav.menu--main ul.menu li .dropdown-trigger.visually-hidden.focusable:focus,
  .js .region-navigation-inline nav.menu--main ul.menu li .dropdown-trigger.visually-hidden.focusable .arrow,
  .js .region-navigation-inline nav.menu--main ul.menu li .dropdown-trigger.visually-hidden.focusable:active .arrow, 
  .js .region-navigation-inline nav.menu--main ul.menu li .dropdown-trigger.visually-hidden.focusable:focus .arrow{
    background-color:transparent;  /* background for top level tab on active */
  }
  
  
  /* === Drop down first level === */
  nav.menu--main ul.menu ul {
    overflow: visible; /* reset from mobile */
    z-index: 1; /* make sure it always appears on top */
  }
  nav.menu--main ul.menu li ul { /* Drop down navigation menu UL */ 
    width:22rem; /*width of sub list tab  - make same as 'nav.menu--main ul.menu li ul li a' below */
    position:absolute; /* position the sublist to nearest positioned ancestor, the (nav.menu--main ul.menu li) in this case*/
  }
  .region-navigation-full-width nav.menu--main ul.menu li ul li > a,
  .region-navigation-full-width nav.menu--main ul.menu li ul li ul li > a,
  .region-navigation-inline nav.menu--main ul.menu li ul li > a,
  .region-navigation-inline nav.menu--main ul.menu li ul li ul li > a { /* Drop down navigation tab */ 
    border: none !important;
  }
  nav.menu--main ul.main-menu li ul { /* first level drop down menu */
    animation: closemenu 0s;/* Call the Keyframe above and run over 0s - anything more causes flashing */
    animation-fill-mode: forwards; /* When the animation ends, keep the settings on the last animation frame */
  }
  nav.menu--main ul.main-menu > li:hover > ul,
  .js nav.menu--main ul.main-menu > li:hover > ul { /* first level drop down menu on hover */
    animation: openmenu 0.5s; /* Call the Keyframe above and run over 0.5s */
    animation-fill-mode: forwards; /* When the animation ends, keep the settings on the last animation frame */
  }

  /* Drop down navigation tab */ 
  .region-navigation-full-width nav.menu--main ul.menu li ul li > a,
  .region-navigation-full-width nav.menu--main ul.menu li ul li ul li > a,
  .region-navigation-inline nav.menu--main ul.menu li ul li > a,
  .region-navigation-inline nav.menu--main ul.menu li ul li ul li > a,
  .fixed-header nav.menu--main ul.menu li ul li > a,
  .fixed-header nav.menu--main ul.menu li ul li ul li > a {
    background-color:var(--d-nav-drop-bg); 
    color: var(--d-nav-drop-color);  
    padding:var(--d-space-s) var(--d-space-m) !important;  /* padding on the first level drop down menu */
    margin-bottom: 1px;
    /*font-weight: 300;*/
  }
  /* hover */
  .region-navigation-full-width nav.menu--main ul.menu li ul li > a:hover,
  .region-navigation-full-width nav.menu--main ul.menu li ul li > a:focus,
  .region-navigation-inline nav.menu--main ul.menu li ul li > a:hover,
  .region-navigation-inline nav.menu--main ul.menu li ul li > a:focus { 
    background-color:var(--d-nav-drop-bg-hover); /* background on hover */
    color: var(--d-nav-drop-color-hover);  /* Tab font color on hover*/
  }
  /* active */
  .region-navigation-full-width nav.menu--main ul.menu li ul li > a.is-active:hover,
  .region-navigation-full-width nav.menu--main ul.menu li ul li > a.is-active:focus, 
  .region-navigation-inline nav.menu--main ul.menu li ul li > a.is-active:hover,
  .region-navigation-inline nav.menu--main ul.menu li ul li > a.is-active:focus, 
  .region-navigation-full-width nav.menu--main ul.menu li ul li.active > a:hover, 
  .region-navigation-full-width nav.menu--main ul.menu li ul li.active > a:focus, 
  .region-navigation-inline nav.menu--main ul.menu li ul li.active > a:hover, 
  .region-navigation-inline nav.menu--main ul.menu li ul li.active > a:focus, 
  .region-navigation-full-width nav.menu--main ul.menu li ul li > a.is-active,
  .region-navigation-full-width nav.menu--main ul.menu li ul li.active > a, 
  .region-navigation-inline nav.menu--main ul.menu li ul li > a.is-active,
  .region-navigation-inline nav.menu--main ul.menu li ul li.active > a { 
    background-color:var(--d-nav-drop-bg-active); /* background on active */
    color: var(--d-nav-drop-color-active);  /* Tab font color on active */
  }
  
}
@media
only screen and (min-device-pixel-ratio: 2) and (min-width: 1025px),
only screen and (min-resolution: 192dpi) and (min-width: 1025px),
only screen and (min-resolution: 2dppx) and (min-width: 1025px) { 
  /* DESKTOP SMALL - Retina - (1025px-1280px) */
  
}
@media all and (min-width: 1281px), print {
  /* DESKTOP - Non-Retina - (1281px-1920px) */
  
}
@media
only screen and (min-device-pixel-ratio: 2) and (min-width: 1281px),
only screen and (min-resolution: 192dpi) and (min-width: 1281px),
only screen and (min-resolution: 2dppx) and (min-width: 1281px) { 
  /* DESKTOP - Retina - (1281px-1920px) */
  
}
@media all and (min-width: 1921px), print {
  /* DESKTOP LARGE - Non-Retina - (1921px and larger) */
  
}
@media
only screen and (min-device-pixel-ratio: 2) and (min-width: 1921px),
only screen and (min-resolution: 192dpi) and (min-width: 1921px),
only screen and (min-resolution: 2dppx) and (min-width: 1921px) { 
  /* DESKTOP LARGE - Retina - (1921px and larger) */
  
}