/*------------------------------------*\
    #Fonts
\*------------------------------------*/
/**
 * The font-display descriptor determines how a font face is displayed based on
 * whether and when it is downloaded and ready to use.
 *
 * https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
 *
 * `fallback`
 * Gives the font face an extremely small block period and a short swap period.
 */
@font-face {
	font-display: fallback;
	font-family: 'national';
	font-weight: 400;
	font-style: normal;
	src: url("../fonts/national/national-lfs-book.woff2") format("woff2"), url("../fonts/national/national-lfs-book.woff") format("woff");
	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

@font-face {
	font-display: fallback;
	font-family: 'national';
	font-weight: 400;
	font-style: italic;
	src: url("../fonts/national/national-lf-bookitalic.woff2") format("woff2"), url("../fonts/national/national-lf-bookitalic.woff") format("woff");
	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

@font-face {
	font-display: fallback;
	font-family: 'national';
	font-weight: 500;
	font-style: normal;
	src: url("../fonts/national/national-lfs-semibold.woff2") format("woff2"), url("../fonts/national/national-lfs-semibold.woff") format("woff");
	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

@font-face {
	font-display: fallback;
	font-family: 'national';
	font-weight: 500;
	font-style: italic;
	src: url("../fonts/national/national-lf-semibolditalic.woff2") format("woff2"), url("../fonts/national/national-lf-semibolditalic.woff") format("woff");
	/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

/*------------------------------------*\
    #Hiding and showing inclusively
\*------------------------------------*/
[hidden],
.hidden {
	display: none !important;
}

.visually-hidden,
.visually-hidden:not(:focus):not(:active) {
	 border: 0;
	 clip: rect(0 0 0 0);
	 clip-path: inset(100%);
	 height: 1px;
	 margin: -1px;
	 overflow: hidden;
	 padding: 0;
	 position: absolute;
	 white-space: nowrap;
	 width: 1px;
 }

[hidden] + *,
.hidden + *,
.visually-hidden + * {
	margin-top: 0 !important;
}

.visible {
	 border: initial;
	 clip: auto;
	 clip-path: none;
	 height: auto;
	 margin: initial;
	 overflow: initial;
	 padding: initial;
	 position: static;
	 white-space: initial;
	 width: auto;
 }

/*------------------------------------*\
    #Box-sizing
\*------------------------------------*/
html {
	box-sizing: border-box; }

*,
*:before,
*:after {
	box-sizing: inherit;
	margin: 0;
	overflow-wrap: break-word;
	padding: 0; }

/*------------------------------------*\
    #Stack - creating vertical rhythm
\*------------------------------------*/
.stack > * + * {
	margin-top: 1em; }

br {
	margin-top: 0; }

/*------------------------------------*\
    #Containers
\*------------------------------------*/
.container {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	max-width: 58.125rem;
	width: 90vw; }
@media screen and (min-width: 48em) {
	.container {
		width: 80vw; } }

.component {
	background: #fff;
	padding: 1.25rem; }

/*------------------------------------*\
    #Body
\*------------------------------------*/
html {
	height: 100%; }

body,
html {
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	scroll-behavior: smooth; }

body {
	background: #ebe9e8;
	color: #323232;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr auto;
	font-family: "national", Arial, Helvetica, sans-serif;
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 400;
	height: 100%;
	line-height: 1.5; }

/*------------------------------------*\
    #Focus
\*------------------------------------*/
a:focus {
	background-color: #96dcbe;
	box-shadow: 0 0 0 0.1875rem #96dcbe;
	color: #373151 !important;
	outline: none; }

/*------------------------------------*\
    #Links
\*------------------------------------*/
/**
Default global link styles that do not interfere with component link styles
- see https://alexcarpenter.me/screencasts/2019/02/global-link-styles/

1. Don't rely on colour alone for styling links - see
https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F73
 */
a:not([class]),
.download-link,
.link-external,
.link-email,
.link-file,
.link-internal {
	border: 0;
	color: #373151;
	cursor: pointer;
	padding: 0.125em;
	text-decoration: underline;
	/* 1 */
	text-decoration-skip-ink: auto; }

.download-link {
	display: inline-block;
	font-size: 1.125em; }

.libraries.libraries h2 a {
	padding: 0;
	text-decoration: none;
}

.libraries.libraries h2 a:after {
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

/*------------------------------------*\
    #Typography and headings
\*------------------------------------*/
/*
 * Remove aesthetics from default styling allowing you to focus on
 * semantic hierarchy first.
 */
h1, h2, h3, h4, h5, h6, .heading {
	color: #373151;
	font: inherit;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
	margin: 0; }

h1,
.h1,
.hero__caption p,
.font-size-alpha {
	font-size: 2rem;
	line-height: 1.1; }
@media screen and (min-width: 48em) {
	.site-nav.stack {
        display:block;
   	}

	h1,
	.h1,
	.hero__caption p,
	.font-size-alpha {
		font-size: 2.3rem; } }

.font-size-beta {
	font-size: 2rem;
	line-height: 1.1; }
@media screen and (min-width: 48em) {
	.font-size-beta {
		font-size: 2rem; } }

h2,
.h2,
.font-size-gamma {
	font-size: 1.85rem;
	line-height: 1.2; }
@media screen and (min-width: 48em) {
	h2,
	.h2,
	.font-size-gamma {
		font-size: 2.05rem; } }

h3,
.h3,
.font-size-delta {
	font-size: 1.625rem;
	line-height: 1.2; }

h4,
.h4,
.font-size-epsilon {
	font-size: 1.25rem;
	line-height: 1.35; }

h5,
.h5,
.nav-list__link,
h6,
.font-size-base,
.home .hero__caption p {
	font-size: 1.125rem;
	line-height: 1.5; }

.font-size-milli, small,
.small, .component--images figcaption, .component--quotes figcaption, #cookie-banner .container, .component--downloads .clean-list li > *:not(a), .copyright, article dl.meta, .component--video figcaption,
.small-caps, ol.breadcrumbs li {
	font-size: 1rem;
	line-height: 1.4; }

/*------------------------------------*\
    #Elements
\*------------------------------------*/
.small-caps {
	letter-spacing: 0.03em;
	text-shadow: 0 0 0 #000;
	text-transform: uppercase; }

b,
strong,
.strong {
	font-weight: 500; }

span.category {
	display: block;
	font-size: 80%; }

/*------------------------------------*\
    #Breadcrumbs
\*------------------------------------*/
.breadcrumb-menu {
	background-color: #625a75;
	padding-bottom: 0.1875rem;
	padding-top: 0.1875rem; }

ol.breadcrumbs li {
	padding-right: 0.8125rem;
	position: relative; }
ol.breadcrumbs li:last-of-type {
	padding-right: 0; }
ol.breadcrumbs li:last-of-type::before, ol.breadcrumbs li:last-of-type::after {
	display: none; }

ol.breadcrumbs li a {
	color: #fff;
	display: block;
	padding: 0.125em;
	text-decoration: underline; }
ol.breadcrumbs li a:visited, ol.breadcrumbs li a:hover, ol.breadcrumbs li a:active {
	color: #fff; }

ol.breadcrumbs li span {
	display: block;
	padding: 0.125em; }

/*------------------------------------*\
    #Cluster layout primitive

    From https://absolutely.every-layout.dev/layouts/cluster/

    `.l-cluster` suits any groups of elements that differ in length and
    are liable to wrap. Buttons that appear together at the end of forms
    are ideal candidates, as well as lists of tags, keywords, or other
    meta information. Use the Cluster to align any groups of horizontally
    laid out elements to the left or right, or in the center, with even
    spacing between elements.
\*------------------------------------*/
/**
Suppress horizontal scrolling caused by the negative margin
in some circumstances.
 */
.l-cluster {
	overflow: hidden; }

/**
We use flexbox to configure the elements into clusters without having to
deal with undesirable word spaces. It also gives us control of how we align
items within the cluster, with 'align-items` and `justify-content` if desired.

1. Multiply by -1 to create negative margins to pull the items back to the
edges.
 */
.l-cluster > * {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: calc(0.625rem / 2 * -1);
	/* 1 */ }

/**
We apply an even, symmetrical margin to the elements that we wish to space
out, but halve it to to account for 'doubling up' at the edges.
 */
.l-cluster > * > * {
	margin: calc(0.625rem / 2); }

/*------------------------------------*\
    #Global footer
\*------------------------------------*/
.global-footer {
	background-color: #373151;
	color: #fff;
	grid-row-start: 2;
	grid-row-end: 3;
	line-height: normal;
	padding-bottom: 0.625rem; }

.copyright {
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding-top: 0.625rem; }

.copyright a {
	color: #fff; }

.copyright a:visited, .copyright a:hover, .copyright a:focus, .copyright a:active {
	color: #fff; }

/*------------------------------------*\
    #Global header
\*------------------------------------*/
.global-header {
	background-color: #373151;
	color: #fff;
	/*line-height: normal;*/
	padding-top: 1.25rem; }

.global-header a {
	color: inherit;
	text-decoration: none; }

.global-header__logo {
	display: inline-block; }

.global-header__logo {
	border: 0;
	height: 1.8125rem;
	position: relative;
	width: 6.5rem; }
@media screen and (min-width: 48em) {
	.global-header__logo {
		height: 2.75rem;
		width: 10.1875rem; } }
.global-header__logo::after {
	background-color: #625a75;
	bottom: -1.25rem;
	content: '';
	display: block;
	height: 0.0625rem;
	left: -50vw;
	position: absolute;
	width: 150vw; }
.global-header__logo .logo {
	box-sizing: content-box;
	color: #fff;
	left: 0;
	height: auto;
	padding: 0.125rem;
	position: absolute;
	top: 0;
	width: calc(100% - 0.25rem); }
@media screen and (min-width: 48em) {
	.global-header__logo .logo {
		max-width: none; } }

.page-header {
	background-color: #5f2db4;
	border-top: 1px solid #625a75;
	color: #fff;
	padding-bottom: 3.4375rem;
	padding-top: 3.4375rem; }
.page-header * {
	color: inherit; }
.page-header .l-sidebar .sidebar {
	-ms-flex-preferred-size: 17.5rem;
	flex-basis: 17.5rem; }
@media screen and (min-width: 40.3125em) {
	.page-header .l-sidebar .sidebar {
		-ms-flex-align: start;
		align-items: flex-start;
		border-left: solid 1px #cbc9cd;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-flow: column nowrap;
		flex-flow: column nowrap; } }
.page-header .l-sidebar .sidebar a.button {
	white-space: nowrap; }
@media screen and (min-width: 40.3125em) {
	.page-header .l-sidebar .sidebar a.button {
		margin-left: 2.5rem; } }
.page-header .l-sidebar .not-sidebar {
	min-width: calc(50% - 1.25rem); }
.page-header .l-sidebar .sidebar {
	padding-top: 0.2em; }
.page-header .button {
	box-shadow: -0.5rem 0.75rem 1.125rem 0 rgba(25, 42, 70, 0.13); }
@media screen and (min-width: 48em) {
	.page-header form {
		-ms-flex-align: end;
		align-items: flex-end;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		-ms-flex-pack: justify;
		justify-content: space-between; } }
@media screen and (min-width: 48em) {
	.page-header form > div {
		margin-top: 0; }
	.page-header form > div:not(:last-child) {
		-ms-flex: 0 1 40%;
		flex: 0 1 40%; } }
@media screen and (min-width: 64em) {
	.page-header form > div:not(:last-child) {
		-ms-flex: 0 1 42%;
		flex: 0 1 42%; } }
.page-header form > div + div {
	margin-top: 1.25rem; }
@media screen and (min-width: 48em) {
	.page-header form > div + div {
		margin-top: 0; } }
.page-header form label {
	font-weight: 400 !important; }

.page-header__title {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: column nowrap;
	flex-flow: column nowrap;
	margin-bottom: 1.5625rem;
	max-width: 48rem; }
.page-header__title h1 {
	margin-top: 1rem; }
.page-header__title span {
	-ms-flex-order: -1;
	order: -1; }

/*------------------------------------*\
    #Hero
\*------------------------------------*/
.hero {
	background-color: #5f2db4;
	color: #fff;
	padding-bottom: 3.4375rem;
	padding-top: 3.4375rem; }

.hero .container {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap; }

.hero__caption {
	-ms-flex: 1 0 100%;
	flex: 1 0 100%;
	max-width: 38.125rem; }
.hero__caption > * + * {
	margin-top: 1.25rem; }
.hero__caption h1 {
	color: inherit;
	font-weight: normal; }
.hero__caption p {
	font-weight: 500; }

.home .hero__caption h1 {
	font-weight: 500; }

.home .hero__caption p {
	font-weight: normal; }

.hero__graphic {
	display: none; }
@media screen and (min-width: 64em) {
	.hero__graphic {
		display: block;
		margin-left: auto;
		max-width: 12.5rem; } }

/*------------------------------------*\
    #Icons
\*------------------------------------*/
svg {
	height: auto;
	width: 100%; }

/* SVG icon */
.icon {
	display: inline-block;
	fill: currentColor;
	height: 0.9375em;
	margin-top: 0;
	position: relative;
	top: -0.0625em;
	vertical-align: middle;
	width: 0.9375em; }

.icon--link {
	fill: #717171;
	height: 1.3125rem;
	width: 0.625rem; }

.icon--breadcrumb {
	height: 1.625rem;
	position: absolute;
	right: -0.3125rem;
	top: 50%;
	transform: translateY(-50%);
	width: 0.8125rem; }

	/*------------------------------------*\
		#Images
	\*------------------------------------*/
img {
	/**
	   * We should be defining dimensions on images inline using the
	   * width and height attributes so that the browser can reserve space
	   * for images, which in turns saves on the number of repaints. But we still
	   * want responsive images.
	   */
	width: 100%;
	height: auto;
	vertical-align: middle; }

/*------------------------------------*\
    #Lists
\*------------------------------------*/
/**
Remove default list styles on lists with a class name (e.g. 'nav-list')
and on lists within the `nav` element
 */
nav ul,
ol[class],
ul[class] {
	list-style: none;
	padding-left: 0; }

ul:not([class]),
ol:not([class]) {
	padding-left: 1.875em; }
ul:not([class]) li,
ol:not([class]) li {
	padding-left: 1em; }
ul:not([class]) ul,
ul:not([class]) ol,
ol:not([class]) ul,
ol:not([class]) ol {
	padding-left: 1em; }
ul:not([class]) * + *,
ul:not([class]) li ul,
ul:not([class]) li ol,
ol:not([class]) * + *,
ol:not([class]) li ul,
ol:not([class]) li ol {
	margin-top: 0.5em; }

ul.columns {
	list-style: none;
	padding-left: 0; }
ul.columns li {
	padding-left: 0; }
ul.columns li + li {
	margin-top: 0.5em; }

ol:not([class]) {
	counter-reset: orderedList;
	list-style-type: none; }
ol:not([class]) > li {
	column-break-inside: avoid;
	display: block;
	position: relative; }
ol:not([class]) > li:before {
	content: counters(orderedList, ".");
	counter-increment: orderedList;
	display: block;
	font-weight: 500;
	left: -0.8em;
	position: absolute;
	top: 0; }
ol:not([class]) > li ol li {
	padding-left: 1.75em; }

/**
 Links in lists have a slightly larger font size
 */
.component--text ul a,
.component--text ol a,
ul.columns a {
	font-size: 1.125em; }

/*------------------------------------*\
    #Clean list
\*------------------------------------*/
.clean-list li {
	display: block; }

/*------------------------------------*\
    #Main
\*------------------------------------*/
main > * {
	margin-top: 1.875rem; }

main > *:last-child {
	margin-bottom: 1.875rem; }

main > .component--title + * {
	margin-top: 0; }

/*------------------------------------*\
    #Navigation
\*------------------------------------*/
.site-nav {
	-ms-flex-align: center;
	align-items: center;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-top: 0.875rem;
	padding-bottom: 1.875rem;
	padding-top: 1.5625rem; }

.site-nav .title {
	color: inherit;
	display: inline-block;
	font-weight: 500; }

.no-js [data-toggler="nav"] {
	display: none; }

.js [data-toggler="nav"] {
	margin-left: auto; }
@media screen and (min-width: 64em) {
	.js [data-toggler="nav"] {
		display: none; } }

.nav-list {
	color: #fff;
	display: -ms-flexbox;
	display: flex;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
	-ms-flex-flow: column nowrap;
	flex-flow: column nowrap;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 1.25rem;
	padding-left: 0;
	padding-top: 1.25rem;
	position: relative;
	width: 100%;
	z-index: 2; }
@media screen and (min-width: 64em) {
	.nav-list {
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		margin-right: 0;
		padding-bottom: 0;
		padding-top: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: auto; } }
.nav-list li {
	list-style: none; }
.nav-list li + li {
	margin-top: 0.75rem; }
@media screen and (min-width: 64em) {
	.nav-list li + li {
		margin-left: 1.25rem;
		margin-top: 0; } }

.js .nav-list[aria-hidden="false"] {
	display: -ms-flexbox;
	display: flex; }

.nav-list__link {
	background-color: inherit;
	color: inherit;
	display: block;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem; }
@media screen and (min-width: 64em) {
	.nav-list__link {
		padding-left: 0.25rem;
		padding-right: 0.25rem; } }

/*------------------------------------*\
    #Skip to content
\*------------------------------------*/
a.skip-to-content {
	display: inline-block;
	font-weight: 500;
	left: 0;
	padding: 0.625rem 0.75rem;
	position: absolute;
	top: 0;
	transform: translate(0, -100%);
	z-index: 900;
	transition: all 100ms ease-in-out 0ms; }

a.skip-to-content:focus {
	right: auto;
	transform: translate(0, 0); }

/*------------------------------------*\
    #Columns components
\*------------------------------------*/
.libraries .component--columns__item {
	width: 100%;
}

@media screen and (min-width: 31.25em) {
	.component--columns__wrap {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		margin-bottom: -1.25rem;
		margin-left: -0.625rem;
		margin-right: -0.625rem;
		overflow: hidden;
	}

	.libraries .component--columns__item {
		padding: 0.1875rem;
	}
}

.component--columns__item + .component--columns__item {
	margin-top: 1.25rem;
}

@media screen and (min-width: 64em) {
	.component--columns__item {
		-ms-flex: 1 0 33.333%;
		flex: 1 0 33.333%;
		max-width: 33.333%;
		padding: 0 0.625rem 1.25rem; }

	.libraries .component--columns__item {
		padding: 0.1875rem 0.625rem 1.25rem;
	}

	.component--columns__item + .component--columns__item {
		margin-top: 0;
	}
}

.libraries .component--columns__item article {
	box-shadow: 0 1px 1px 0 rgba(60,64,67,.08),
	0 1px 3px 1px rgba(60,64,67,.16);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
	font-size: 1rem;
	line-height: 1.61;
	padding: 0.9375rem;
	position: relative;
}

@media screen and (max-width: 63.9em) {
	.libraries .component--columns__item article p {
		max-width: 90%;
	}
}


.libraries .component--columns__item article:hover {
	background-color: #f8f7f7;
}

.libraries .component--columns__item article :nth-last-child(2) {
	margin-bottom: 1rem;
}

.libraries .component--columns__item article .icon--link  {
	align-self: flex-end;
	margin-top: auto;
}


/*------------------------------------*\
    #Breadcrumb styles
\*------------------------------------*/

.breadcrumb-container {

       	padding:calc(0.625rem / 2);

}

.breadcrumb-container li {

       	margin:0 calc(0.625rem / 2);
}

.breadcrumb-container svg {

       	margin: 0;
}

breadcrumb-container ol.breadcrumbs li a {
       	padding:0.05em 0.125em;
}


/*------------------------------------*\
    #Print styles
\*------------------------------------*/
@media print {
	*,
	*:before,
	*:after,
	p:first-line,
	div:first-line,
	blockquote:first-line,
	li:first-line {
		background: transparent !important;
		box-shadow: none !important;
		color: #000 !important;
		overflow: visible !important;
		position: static !important;
		text-shadow: none !important; }
	.lazy,
	.lazyload {
		display: block !important; }
	.js-object-fit,
	.responsive-wrapper,
	picture {
		padding: 0 !important; }
	.js-object-fit img,
	.responsive-wrapper img,
	picture img {
		display: block !important;
		height: auto !important;
		width: 100% !important; }
	li,
	.js-object-fit,
	.responsive-wrapper,
	picture figure,
	img {
		break-inside: avoid;
		page-break-inside: avoid;
		-webkit-column-break-inside: avoid; }
	.js-carousel > * {
		display: block !important; }
	.js-carousel ul.carousel-controls {
		display: none !important; }
	.js-carousel ul.clean-list li + li {
		margin-top: 1cm !important; }
	.global-header__logo {
		width: 4cm; }
	.page-header,
	.component,
	.search-summary {
		padding: 0; }
	.page-header {
		border: none !important; }
	.component--columns__wrap {
		display: block !important; }
	.featured-multi,
	.featured-single {
		display: inline !important; }
	.featured-single > li:only-child .figcaption__inner {
		padding-top: 0.25em !important; }
	.component--columns__item {
		display: inline-block !important;
		margin: 0 1% 1%;
		padding: 0 !important;
		width: 30%; }
	.component--split-half figure {
		display: inline-block !important;
		margin: 1%;
		width: 45%; }
	.component--collapsibles [hidden] {
		display: block !important; }
	.page-template-default .l-sidebar > div {
		display: block !important; }
	.skip-to-content,
	#cookie-banner,
	.global-header form,
	nav,
	.component--video,
	.icon-wrap,
	.related-content,
	.global-footer {
		display: none !important; }
}

.stack.card {
       	border-left:6px solid #625a75;
}
.stack.card h2 {
       	margin-right:15px;
       	font-size:1.325rem;
}
.stack.card .icon--link {
       	position:absolute;
       	top:23px;
       	right:10px;
}