:root {
  /*
   * Page Layout
   */
  --d-body-bg: var(--color-eight); /* Colour of area below footer */
  --d-page-content-bg: var(--color-white); /* Main content container to edge of screen */
  --d-page-col1-bg: var(--color-white);
  --d-page-col2-bg: var(--color-white); 
  --page-margin: var(--d-space-ml);
  --left-right-spacing: var(--d-vw-space-l);
  /*
   * Transitions
   */
    --d-transition-base:0.3s ease-in-out;
}
#slideshow-wrap {
  --d-slideshow-bg: var(--color-white);
  --d-slideshow-height: 18rem;
  --d-banner-height: 13rem;
}
#page-wrap {
  /**
   * Heading
   */
  --d-heading-bg: var(--color-eight); /* heading background - also around open navigation and open search on mobile/tablet - DO NOT USE NONE HERE */ 
  --d-heading-padding-tb: var(--d-space-xxs); /* padding top and bottom of the header section */
  --d-heading-padding-tb-fixed: var(--d-space-xxs); /* padding top and bottom of the header section when fixed-header */
  --d-user-account-menu-font-size: var(--d-font-size-s);
  --d-user-account-menu-color: var(--color-two);
  --d-user-account-menu-padding-tb: 0.75rem;
  /* Hover */
    --d-user-account-menu-color-hover: var(--color-two-hover);
  /*
   * Logo block
   */
  --d-site-name-color: var(--color-two); 
  --d-site-name-font-size: 2.4rem;
  --d-site-name-font-size-fixed: 2.4rem; /* should be same as above */
  --d-site-slogan-color: var(--color-two); 
  --d-site-slogan-font-size: 1.1rem;
  --d-site-slogan-font-size-fixed: 1.1rem; /* Should be the same as above */
  --d-logo-height: 4.8rem; /* Always have a logo height (minimum 4.8rem) - even if there isn't a logo (in which case it should be the height of the logo text) */
  --d-logo-height-fixed: 4.8rem; /* Always have a logo height (minimum 4.8rem) - even if there isn't a logo (in which case it should be the height of the logo text) */
  /**
   * Menu & Search Icons and Search Button itself 
   */
  --d-menu-search-bg: var(--color-three);
  --d-menu-search-border: var(--color-three); /* On FULL WIDTH - always have a border color - if you don't want one, use the background colour. On INLINE there is no border */
  --d-menu-search-color: var(--color-eight); /* Icon color*/
  --d-menu-icon: url(../images/icons/menu-icon-white.svg);
  --d-search-icon: url(../images/icons/search-icon-white.svg);
  /* Menu & Search Icons Hover*/
  --d-menu-search-bg-hover: var(--color-three-hover);
  --d-menu-search-border-hover: var(--color-three-hover); /* On FULL WIDTH - always have a border color - if you don't want one, use the background colour. On INLINE there is no border */
  --d-menu-search-color-hover: var(--color-eight-hover);/* Icon color hover */
  /* Menu & Search Icons Hover*/
  --d-menu-search-bg-active: var(--color-three-hover);
  --d-menu-search-border-active: var(--color-three-hover); /* On FULL WIDTH - always have a border color - if you don't want one, use the background colour. On INLINE there is no border */
  --d-menu-search-color-active: var(--color-eight-hover);/* Icon color active*/
  /*
   * Navigation Mobile
   */
  --d-nav-bg: var(--color-white);/* Background for top level tab */
  --d-nav-border: var(--color-eight); /* Background behind mobile navigation - gives border effect on each tab */
  --d-nav-color: var(--color-grey);  /* Top level tab font color*/
  --d-nav-font-size: var(--d-font-size-base); /* Font size on mobile/tablet */
  --d-nav-padding-tb: var(--d-space-m);
  --d-nav-padding-tb-fixed: var(--d-space-m);
  --d-nav-padding-lr: var(--d-space-m);
  /* Mobile Hover */
  --d-nav-bg-hover: var(--color-very-light-grey);/* Background for top level tab on hover */
  --d-nav-color-hover: var(--color-grey-hover);/* Top level tab font color on hover*/
  /* Mobile Active */
  --d-nav-bg-active: var(--color-three);/* Background for top level tab on active */;
  --d-nav-color-active: var(--color-eight);/* Top level tab font color on active*/
  /* Mobile Dropdown */
  --d-nav-drop-bg: var(--color-white);/**/
  --d-nav-drop-color: var(--color-grey);  /* */
  --d-nav-drop-bg-hover: var(--color-very-light-grey);/**/
  --d-nav-drop-color-hover: var(--color-eight);/**/
  --d-nav-drop-bg-active: var(--color-three);/**/;
  --d-nav-drop-color-active: var(--color-eight);/**/
}
/* ------------------------------------- RESPONSIVE ADJUSTMENTS ------------------------------------- */
@media all and (min-width: 768px), print {
  :root {
    /*
     * Page Layout
     */
    --page-margin: var(--d-space-xl);
    --left-right-spacing: var(--d-vw-space-xl);
  }
  #slideshow-wrap {
    --d-slideshow-height: 45rem;
    --d-banner-height: 13rem;
  }  
  #page-wrap {
    /**
     * Heading
     */
    --d-heading-padding-tb: var(--d-space-xs); /* padding top and bottom of the header section */
    /*
     * Logo block
     */
    --d-site-name-font-size: 4rem;
    --d-site-slogan-font-size: 1.8rem;
    --d-logo-height: 5rem; /* Always have a logo height - even if there isn't a logo (in which case it should be the height of the logo text) */
  }
}
@media all and (min-width: 1025px), print {
  :root {
    /*
     * Page Layout
     */
    --page-margin: var(--d-space-xxl);
  }
  #slideshow-wrap {
    --d-slideshow-height: 55rem;
    --d-banner-height: 15rem;
  }  
  #page-wrap {
    /**
     * Heading
     */
    --d-heading-padding-tb: var(--d-space-s); /* padding top and bottom of the header section */
    /*
     * Logo block
     */
    --d-site-name-font-size: 4rem;
    --d-site-slogan-font-size: 1.8rem;
    --d-logo-height:6rem; /* Always have a logo height - even if there isn't a logo (in which case it should be the height of the logo text) */
    /*
     * Navigation Desktop
     */
    --d-nav-bg: var(--color-two);/**/
    --d-nav-border: var(--color-two); /* On FULL WIDTH - always have a border color - if you don't want one, use the background colour. On INLINE there is no border */
    --d-nav-border-left: var(--color-two); /* left border colour on each FULL WIDTH tab - if you don't want one, use the background colour */
    --d-nav-border-right: var(--color-two); /* right border colour on each FULL WIDTH tab - if you don't want one, use the background colour  */
    --d-nav-border-bottom: transparent; /* bottom border colour on each INLINE tab - if you don't want one, use TRANSPARENT */
    --d-nav-border-bottom-width: 0.2rem; /* width of bottom border on INLINE navigtion only */
    --d-nav-color: var(--color-white);  /* top level tab font color*/
    --d-nav-font-size: var(--d-font-size-base); /* Font size on mobile/tablet */
    --d-nav-padding-tb: var(--d-space-m);
    --d-nav-padding-tb-fixed: var(--d-space-m);
    --d-nav-padding-lr: var(--d-space-m);
    /* Desktop Hover*/
    --d-nav-bg-hover: var(--color-grey-hover);/**/
    --d-nav-border-hover: var(--color-two-hover); /* On FULL WIDTH - always have a border color - if you don't want one, use the background colour. On INLINE there is no border */
    --d-nav-border-left-hover: var(--color-two-hover); /* left border colour on each FULL WIDTH tab - if you don't want one, use the background colour */
    --d-nav-border-right-hover: var(--color-two-hover); /* right border colour on each FULL WIDTH tab - if you don't want one, use the background colour  */
    --d-nav-border-bottom-hover: transparent; /* bottom border colour on each INLINE tab - if you don't want one, use TRANSPARENT */
    --d-nav-color-hover: var(--color-three);/**/
    /* Desktop Active */
    --d-nav-bg-active: var(--color-two-hover);/**/;
    --d-nav-border-active: var(--color-two); /* On FULL WIDTH - always have a border color - if you don't want one, use the background colour. On INLINE there is no border */
    --d-nav-border-left-active: var(--color-grey); /* left border colour on each FULL WIDTH tab - if you don't want one, use the background colour */
    --d-nav-border-right-active: var(--color-grey); /* right border colour on each FULL WIDTH tab - if you don't want one, use the background colour  */
    --d-nav-border-bottom-active: transparent; /* bottom border colour on each INLINE tab - if you don't want one, use TRANSPARENT */
    --d-nav-color-active: var(--color-three);/**/
    /* Desktop Dropdown */
    --d-nav-drop-bg: var(--color-light-grey);/**/
    --d-nav-drop-color: var(--color-dark-grey);  /* top level tab font color*/
    --d-nav-drop-bg-hover: var(--color-light-grey-hover);/**/
    --d-nav-drop-color-hover: var(--color-dark-grey-hover);/**/
    --d-nav-drop-bg-active: var(--color-three);/**/;
    --d-nav-drop-color-active: var(--color-dark-grey);/**/
  }
}
@media all and (min-width: 1281px), print {
  :root {
    /*
     * Page Layout
     */
    --left-right-spacing: var(--d-vw-space-l);
  }
  #slideshow-wrap {
    --d-slideshow-height: 65rem;
    --d-banner-height: 18rem;
  }  
  #page-wrap {
    /**
     * Heading
     */
    --d-heading-padding-tb: var(--d-space-s); /* padding top and bottom of the header section */
    /*
     * Logo block
     */
    --d-site-name-font-size: 4rem;
    --d-site-slogan-font-size: 1.8rem;
    --d-logo-height: 6.5rem; /* Always have a logo height - even if there isn't a logo (in which case it should be the height of the logo text) */
    /*
     * Navigation Desktop
     */
    --d-nav-padding-tb: var(--d-space-m);
    --d-nav-padding-lr: var(--d-space-l);
  }
}
@media all and (min-width: 1921px), print {
  :root {
    /*
     * Page Layout
     */
    --left-right-spacing: var(--d-vw-space-m);
  }
  #slideshow-wrap {
    --d-slideshow-height: 70rem;
    --d-banner-height: 18rem;
  }  
}