:root {
  /*
   * Page Layout
   */
  --d-body-bg: var(--color-three-hover); /* Colour of area below footer */
  --d-page-content-bg: var(--color-six); /* Main content container to edge of screen */
  --d-page-col1-bg: var(--color-six);
  --d-page-col2-bg: var(--color-six); 
  --page-margin: var(--d-space-xl);
  --left-right-spacing: var(--d-vw-space-l);
  /*
   * Social Media
   */
  --d-social-media-size: 4.5rem;
  --d-social-media-color: var(--color-white);
  --d-social-media-color-hover: var(--color-white-hover);
  /*
   * Transitions
   */
  --d-transition:0.3s ease-in-out;
}
#slideshow-wrap {
  --d-slideshow-bg: var(--color-six);
  --d-slideshow-height: 50svw;
  --d-banner-height: 18rem;
}
#page-wrap {
  /**
   * Heading
   */
  --d-heading-bg: var(--color-six); /* heading background - also around open navigation and open search on mobile/tablet - DO NOT USE NONE HERE */ 
  --d-heading-padding-tb: var(--d-space-m); /* 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: 6.5rem; /* 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: 5.2rem; /* 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-nav-icon-size: 4.6rem; /* Should be same size as logo above minus the border width (0.1rem top and bottom)
  /**
   * Menu & Search Icons and Search Button itself 
   */
  --d-menu-search-bg: var(--color-four);
  --d-menu-search-border: var(--color-four); /* 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-dark-grey); /* 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-four-hover);
  --d-menu-search-border-hover: var(--color-four-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-dark-grey-hover);/* Icon color hover */
  /* Menu & Search Icons Hover*/
  --d-menu-search-bg-active: var(--color-four-hover);
  --d-menu-search-border-active: var(--color-four-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-dark-grey-hover);/* Icon color active*/
  /*
   * Navigation Mobile
   */
  --d-nav-bg: var(--color-four);/* Background for top level tab */
  --d-nav-border: var(--color-six); /* Background behind mobile navigation - gives border effect on each tab */
  --d-nav-color: var(--color-dark-grey);  /* Top level tab font color*/
  --d-nav-font-size: var(--d-font-size); /* 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-four-hover);/* Background for top level tab on hover */
  --d-nav-color-hover: var(--color-dark-grey-hover);/* Top level tab font color on hover*/
  /* Mobile Active */
  --d-nav-bg-active: var(--color-four-hover);/* Background for top level tab on active */;
  --d-nav-color-active: var(--color-dark-grey-hover);/* Top level tab font color on active*/
  /* Mobile Dropdown */
  --d-nav-drop-bg: var(--color-four);/**/
  --d-nav-drop-color: var(--color-dark-grey);  /* */
  --d-nav-drop-bg-hover: var(--color-four-hover);/**/
  --d-nav-drop-color-hover: var(--color-dark-grey-hover);/**/
  --d-nav-drop-bg-active: var(--color-four-hover);/**/;
  --d-nav-drop-color-active: var(--color-dark-grey-hover);/**/
}     

/* ------------------------------------- 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: 50svw;
    --d-banner-height: 25rem;
  }  
  #page-wrap {
    /**
     * Heading
     */
    --d-heading-padding-tb: var(--d-space-m); /* 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: 7rem; /* 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: 50svw;
    --d-banner-height: 35rem;
  }  
  #page-wrap {
    /**
     * Heading
     */
    --d-heading-padding-tb: var(--d-space-m); /* 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:10rem; /* 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-four);/**/
    --d-nav-border: var(--color-four); /* 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-four); /* left border colour on each FULL WIDTH tab - if you don't want one, use the background colour */
    --d-nav-border-right: var(--color-four); /* right border colour on each FULL WIDTH tab - if you don't want one, use the background colour  */
    --d-nav-border-bottom: var(--color-four); /* 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-dark-grey);  /* top level tab font color*/
    --d-nav-font-size: var(--d-font-size); /* 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-four-hover);/**/
    --d-nav-border-hover: var(--color-four-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-four-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-four-hover); /* right border colour on each FULL WIDTH tab - if you don't want one, use the background colour  */
    --d-nav-border-bottom-hover: var(--color-four-hover); /* bottom border colour on each INLINE tab - if you don't want one, use TRANSPARENT */
    --d-nav-color-hover: var(--color-dark-grey-hover);/**/
    /* Desktop Active */
    --d-nav-bg-active: var(--color-four-hover);/**/;
    --d-nav-border-active: var(--color-four-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-active: var(--color-four-hover); /* 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-four-hover); /* right border colour on each FULL WIDTH tab - if you don't want one, use the background colour  */
    --d-nav-border-bottom-active: var(--color-four-hover); /* bottom border colour on each INLINE tab - if you don't want one, use TRANSPARENT */
    --d-nav-color-active: var(--color-dark-grey-hover);/**/
    /* Desktop Dropdown */
    --d-nav-drop-bg: var(--color-four);/**/
    --d-nav-drop-color: var(--color-dark-grey);  /* top level tab font color*/
    --d-nav-drop-bg-hover: var(--color-four-hover);/**/
    --d-nav-drop-color-hover: var(--color-dark-grey-hover);/**/
    --d-nav-drop-bg-active: var(--color-four-hover);/**/;
    --d-nav-drop-color-active: var(--color-dark-grey-hover);/**/
  }
}
@media all and (min-width: 1281px), print {
  :root {
    /*
     * Page Layout
     */
    --left-right-spacing: var(--d-vw-space-l);
  }
  #slideshow-wrap {
    --d-slideshow-height: 50svw;
    --d-banner-height: 45rem;
  }  
  #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: 10rem; /* 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: 50svw;
    --d-banner-height: 55rem;
  }  
}