/*  Sticky styles  */
.js #header-wrap,
.js.scroll-up #header-wrap,
.js .search-open #header-wrap {
  position:sticky;
  left:0;
  top: 0;
}
.js #header-wrap {
  z-index:501;
  top: -30rem; /* this to create a starting height for the animation */
  height: calc(var(--d-heading-height-total) + var(--d-navigation-height)); /* this needs a height to stop the jumping effect in Chrome */
}
.js.scroll-up #header-wrap,
.js .search-open #header-wrap {
  top: calc(var(--d-toolbar-height) + var(--d-toolbar-tray-height) + var(--d-admin-height));
}
/* Header Styles */
#header,
.fixed-header #header {
  box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
  position: relative;
  z-index: 501;
  background-color:var(--d-heading-bg); /* Header Background Colour*/
}
.header {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: center;
  padding-top: var(--d-heading-padding-tb);
  padding-bottom: var(--d-heading-padding-tb);
}
.fixed-header .header { /* header container to edge of display area */
  padding-top: var(--d-heading-padding-tb-fixed);
  padding-bottom: var(--d-heading-padding-tb-fixed);
}
.region-header {
  overflow: hidden; /* This is to make the navigation work on mobile and tablet */
}
/*#header-top-wrap,*/
#header-top-wrap {
  position: relative;
}
#header-top-wrap .header-top-content{
  max-height: 5rem; /* to allow CSS transitions */
  top:0; /* Position in view */
  overflow: visible;
}
.fixed-header #header-top-wrap .header-top-content {
  max-height: 0; /* when scrolled, CSS transitions to 0px in height */
  top:-10rem; /* Move to a position off screen */
  overflow: hidden;
}
.header-top,
.header-top-content {
  position: relative; /* This is to contain the searchbox within the header */
}
/* Logo / Name / Slogan */
#block-designit-branding {
  margin: 0;
}
#block-designit-branding .brand-logo-block { /* This is to contain the brand box within the header */
  z-index: 1000;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: center;
}
.logo-wrap { /* logo container */
  line-height: 1;
}
.logo-wrap img {
  height:var(--d-logo-height);
  padding-right:var(--d-space-s);
}
.fixed-header .logo-wrap img {
  height:var(--d-logo-height-fixed);
}
a.brand-logo-block:hover,
a.brand-logo-block:focus,
a.brand-logo-block:active { /* link inside logo container */
  text-decoration:none;
}
.site-name { /* Site name */
  color:var(--d-site-name-color) !important;
  font-size:var(--d-site-name-font-size);
  font-weight:500;
  line-height: 1;
}
.fixed-header .site-name { /* Site name */
  font-size:var(--d-site-name-font-size-fixed);
}
.site-slogan { /* Site slogan */
  color:var(--d-site-slogan-color);
  font-size:var(--d-site-slogan-font-size);
  line-height: 1.4;
  font-style: italic;
}
.fixed-header .site-slogan { /* Site slogan */
  font-size:var(--d-site-slogan-font-size-fixed);
}

/* ------------------------------------- RESPONSIVE ADJUSTMENTS ------------------------------------- */
@media all and (min-width: 768px), print {
  /* TABLET - Non-Retina - (768px-1024px) */

  /* --------------- Header styles ---------------- */
  #header-top-wrap, /* This is to contain the logged in user in the header */
  .header-top, /* This is to contain the logged in user in the header */
  .header-top-content, /* This is to contain the logged in user in the header */
  .header .relative { /* This is to contain the searchbox within the header */
    overflow: visible;
  }
  .logo-wrap img {
    padding-right:var(--d-space-l);
  }
}
@media all and (min-width: 1025px), print {
  /* DESKTOP SMALL - Non-Retina - (1025px-1280px) */

  /* --------------- Header styles ---------------- */
  /* #header-wrap Height - needed to prevent jumping */
  #page-wrap.header-top-used {
    /* #block-useraccountmenu doesn't add any additional vertial height to #header-wrap on desktop */
    --d-user-account-menu-height: 0rem;
  }
  #page-wrap.navigation-full-width {
    --d-navigation-height: calc(var(--d-nav-padding-tb) + var(--d-nav-font-size) + var(--d-nav-padding-tb) + 2px);
  }
  #header {
    box-shadow: none;
  }
  .region-header {
    overflow: visible; /* reset from mobile and tablet */
  }
  .header {
    flex-wrap: nowrap;
    align-items: flex-end;
  }
}