@charset "UTF-8";
/*! [replace-name] v[replace-version] */
/**
 * AU-replace - Replace a string with a string
 * http://codepen.io/jakob-e/pen/doMoML
 *
 * @author @eriksen_dk <https://twitter.com/eriksen_dk>
 *
 * @param  {string} $string  - The haystack string to be manipulated
 * @param  {string} $search  - The needle to be replace
 * @param  {string} $replace - The replacement
 *
 * @return {string}          - The manipulated string with replaced values
 */
/**
 * AU-svguri - Generate an optimized SVG data-uri
 * https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
 * http://codepen.io/jakob-e/pen/doMoML
 *
 * @author @eriksen_dk <https://twitter.com/eriksen_dk>
 *
 * @param  {string} $svg - The SVG to be converted
 *
 * @return {string}      - An optimized data-uri
 */
/**
 * AU-factorial - Returns the factorial of a non-negative integer.
 * https://github.com/terkel/mathsass
 *
 * @author Pascal Duez @pascalduez <http://pascalduez.me/>
 *
 * @param  {integer} $number - A non-negative integer.
 *
 * @return {integer}         - The factorial log
 */
/**
 * AU-pow - Returns base to the exponent power.
 * https://github.com/terkel/mathsass
 *
 * @author Pascal Duez @pascalduez <http://pascalduez.me/>
 *
 * @param  {integers} $base     - The base number
 * @param  {integers} $exponent - The exponent to which to raise base
 *
 * @return {integers}           - The result of the math
 */
/**
 * AU-color-luminance - Calculate color luminance
 *
 * https://github.com/voxpelli/sass-color-helpers/blob/master/stylesheets/color-helpers/_contrast.scss
 * Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
 * Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
 *
 * @author Pelle Wessman @voxpelli <http://kodfabrik.se/>
 *
 * @param  {string} $color - The color to calculate the luminance from
 *
 * @return {float}          - The luminance
 */
/**
 * AU-color-contrast - Get the contrast ratio of two colors and warn when it is below WCAG 2.0 AA standard 4.5:1
 *
 * https://github.com/voxpelli/sass-color-helpers/blob/master/stylesheets/color-helpers/_contrast.scss
 * Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
 * Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
 *
 * @author Pelle Wessman @voxpelli <http://kodfabrik.se/>
 *
 * @param  {string}   $foreground - Color one
 * @param  {string}   $background - Color two
 * @param  {boolean}  $silent     - If the logs get printed in the terminal
 * @param  {boolean}  $rounded    - If the value is rounded or not
 *
 * @return {integer}              - The contrast ratio
 */
/**
 * AU-color-a11y - The function to find the nearest accessible color
 *
 * https://github.com/alex-page/sass-a11ycolor
 *
 * @author Alex Page @aalexpaage <http://alexpage.com.au>
 *
 * @param  {Color}           $toMakeA11y           - The color that is to be changed
 * @param  {Color}           $background           - The background color to compare against toMakeA11y for the contrast
 * @param  {'small'|'large'} $ratioKey   ['small'] - The keyword 'small' or 'large' to set the WCAG 2.1 contrast ration or 3.0 or 4.5
 * @param  {Number}          $steps      [0.1]     - The step size our function is searching for a new color in. The bigger the number the faster the process
 *                                                    the rougher the found color.
 *
 * @return {Color}                                 - Returns the nearest accessible color
 */
/**
 * AU-color-lowest-contrast - Find the lowest contrast color
 *
 * @param  {Colors}          $colors     - The color to find the lowest contrast
 * @param  {Color}           $background - The background color to compare the colors against
 *
 * @return {Color}                       - Returns the lowest contrast color
 */
/**
 * AU-space - Mixin for setting a properties value to snap to the grid, with a fallback for REM.
 *
 * @param  {string} $property - The css property to apply the spacing ( padding, margin )
 * @param  {number} $values   - The values of the property ( 0, 20px, 1unit, 5% )
 *
 * @return {number}           - The space in px and rems
 */
/**
 * AU-clearfix - Clearing floats
 */
/**
 * AU-media - Create media queries and wraps the @content code inside of it
 *
 * @param  {keywords} $breakpoint - Either one of the following keywords: xs, sm, md, lg
 *
 * @return {string}               - The code passed in via @content wrapped inside a media query
 */
/**
 * AU-sronly - Hide an element from the screen but not a screen reader
 */
/**
 * AU-outline - Create outline based on the theme the user is using.
 *
 * @param  {keywords} $theme - `dark` or default ( `light` )
 *
 * @return {string}          - The code
 */
/**
 * AU-focus - Add the outline to focus
 */
/**
 * AU-fontgrid Mixin for setting font-size and line-height that snaps to the grid.
 *
 * @param  {keywords} $fontsize-key   -  Either one of the following keywords: xs, sm, md, lg, xl, xxl, xxxl
 * @param  {keywords} $lineheight-key -  Either one of the following keywords: heading, nospace, default
 *
 * @return {string}                   - The code; fontsize in REM, with PX fallback, and unitless line-height which matches vertical grid
*/
/**
 * AU-pixelfallback enable pixel fallbacks
 */
/**
 * AU-media Breakpoints
 */
/**
 * AU-rem value used for REM calculation
 */
/**
 * AU-unit used for all type and grid calculations
 */
/**
 * AU-font stack
 * AU-font-monospace stack
 */
/**
 * AU-fontsize-map
 *
 * Predetermined pixel sizes from a 1.25 typescale rounded to the nearest $AU-unit (vertical grid)
 */
/**
 * AU-lineheight-map
 *
 * Predetermined lineheight mapped to keyword
 */
/**
 * AU-maxwidth for line lengths (the ‘measure’)
 */
/**
 * Colors light theme
 */
/**
 * Colors dark theme
 */
/**
 * Colors system messages
 */
/**
 * AU-border-radius styles
 */
/*! [replace-name] v[replace-version] */
@media print {
		.au-body *, .au-body {
				text-shadow: none !important;
				color: #000 !important;
				background-color: transparent !important;
				-webkit-box-shadow: none !important;
				        box-shadow: none !important;
				border-color: #000 !important;
		}
		.au-body a,
		.au-body a:visited {
				text-decoration: underline;
		}
		.au-body a[href]:after {
				content: " (" attr(href) ")" !important;
				display: inline !important;
		}
		.au-body a[href^="javascript:"]:after,
		.au-body a[href^="#"]:after {
				content: "" !important;
		}
		.au-body abbr[title]:after {
				content: " (" attr(title) ")";
		}
		.au-body pre,
		.au-body blockquote {
				border: 1px solid #000;
				padding: 6px;
				page-break-inside: avoid;
		}
		.au-body thead {
				display: table-header-group;
		}
		.au-body tr,
		.au-body img {
				page-break-inside: avoid;
		}
		.au-body img {
				max-width: 100% !important;
		}
		.au-body p,
		.au-body h2,
		.au-body h3 {
				orphans: 3;
				widows: 3;
		}
		.au-body h2,
		.au-body h3 {
				page-break-after: avoid;
		}
		.au-body p a {
				word-wrap: break-word;
		}
		.au-body select {
				background: #fff !important;
		}
}
.au-body {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1.5;
		margin: 0;
		-webkit-text-size-adjust: 100%;
		   -moz-text-size-adjust: 100%;
		    -ms-text-size-adjust: 100%;
		        text-size-adjust: 100%;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		color: #313131;
		background-color: #ffffff;
}
.au-body a {
		color: #00698f;
		text-decoration: underline;
		-webkit-text-decoration-skip: ink;
		        text-decoration-skip-ink: auto;
}
.au-body a:hover {
		color: #313131;
		text-decoration: none;
}
.au-body a:focus {
		outline: 3px solid #9263DE;
		outline-offset: 2px;
}
.au-body a::-moz-focus-inner {
		border: 0;
}
.au-body {
		/**
		 * Highlighting in-page sections that are in focus
		 */
}
.au-body [tabindex="0"]:focus,
.au-body :target {
		outline: 3px solid #9263DE;
		outline-offset: 2px;
}
.au-body {
		/**
		 * `mark` styling.
		 */
}
.au-body mark {
		color: #ffffff;
		background-color: #00698f;
}
.au-body {
		/**
		 * Text selection styling
		 */
}
.au-body ::-moz-selection {
		color: #ffffff;
		background-color: rgba(0, 105, 143, 0.99);
}
.au-body ::selection {
		color: #ffffff;
		background-color: rgba(0, 105, 143, 0.99);
}
.au-body img::-moz-selection, .au-body video::-moz-selection, .au-body iframe::-moz-selection {
		background-color: rgba(0, 105, 143, 0.75);
}
.au-body img::selection,
.au-body video::selection,
.au-body iframe::selection {
		background-color: rgba(0, 105, 143, 0.75);
}
.au-body {
		/**
		 * Vertical spacing of common text elements.
		 */
}
.au-body p {
		max-width: 42em;
		margin: 0;
}
.au-body * + p {
		margin-top: 24px;
		margin-top: 1.5rem;
}
.au-body ul:not([class]),
.au-body ol:not([class]),
.au-body dl:not([class]),
.au-body pre {
		margin: 0;
}
.au-body * + ul:not([class]),
.au-body * + ol:not([class]),
.au-body * + dl:not([class]),
.au-body * + pre {
		margin-top: 24px;
		margin-top: 1.5rem;
}
.au-body ul:not([class]) > li,
.au-body ol:not([class]) > li {
		margin-top: 8px;
		margin-top: 0.5rem;
}
.au-body ul:not([class]) > li > ul:not([class]),
.au-body ul:not([class]) > li > ol:not([class]),
.au-body ol:not([class]) > li > ul:not([class]),
.au-body ol:not([class]) > li > ol:not([class]) {
		margin-top: 8px;
		margin-top: 0.5rem;
}
.au-body ul:not([class]) > ul:not([class]),
.au-body ol:not([class]) > ul:not([class]) {
		list-style-type: disc;
}
.au-body dl:not([class]) > dd {
		margin-top: 8px;
		margin-top: 0.5rem;
		padding-left: 8px;
		padding-left: 0.5rem;
		margin-left: 0;
		border-left: solid 1px;
}
.au-body dl:not([class]) > dt {
		margin-top: 24px;
		margin-top: 1.5rem;
		font-weight: bold;
}
.au-body dl:not([class]) > dt:first-of-type {
		margin-top: 0;
}
.au-body .written-by:after {
		content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHZpZXdCb3g9IjAgMCA2NTggMTgiPjx0ZXh0IHg9IjEzIiB5PSIxMyIgZm9udC1zaXplPSIxMyI+TWVzc3JzLCBEb20sIFBhZ2V5LCBUcmViLCBQYXQgYW5kIEtsZXBhcyBhcmUgcHJvdWQgdG8gcHJlc2VudCB0aGUgR09MRCBkZXNpZ24gc3lzdGVtLiAtIE1pc2NoaWVmIG1hbmFnZWQ8L3RleHQ+PC9zdmc+");
		color: #BADA55;
}
.au-body {
		/**
		 * Emphasis and alt. voice/mood/diff. from prose text.
		 */
}
.au-body em,
.au-body i {
		font-style: italic;
}
.au-body {
		/**
		 * Stong emphasis.
		 */
}
.au-body strong,
.au-body b {
		font-weight: bold;
}
.au-body {
		/**
		 * `small`: for less important information (not stylistic purposes).
		 */
}
.au-body small {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.4285714286;
}
.au-body {
		/**
		 * `s`: represents contents no longer accurate/relevant.
		 * del` & `ins`: editorial markup.
		 */
}
.au-body s,
.au-body del {
		text-decoration: line-through;
}
.au-body ins {
		text-decoration-line: underline;
		text-decoration-style: dashed;
		-webkit-text-decoration-skip: ink;
		        text-decoration-skip-ink: auto;
}
.au-body {
		/**
		 * Defining definition of a term.
		 *
		 * The paragraph, description list group, or section that is the nearest
		 * ancestor of the `dfn` element must also contain the definition(s) for the term
		 * given by the `dfn` element.
		 *
		 * Note: `abbr` can be nested inside `dfn`.
		 */
}
.au-body dfn {
		font-style: normal;
}
.au-body {
		/**
		 * Abbreviations/acronyms.
		 */
}
.au-body abbr,
.au-body abbr[title] {
		border-bottom: none;
		text-decoration: underline;
		-webkit-text-decoration: underline dotted;
		        text-decoration: underline dotted;
}
.au-body abbr[title] {
		cursor: help;
}
.au-body a abbr {
		padding-bottom: 1px;
}
.au-body {
		/**
		 * Variables, eg. as used in mathematical expressions.
		 *
		 * We also provide semantic support for nested vars, and things like indices.
		 */
}
.au-body var {
		padding: 0 1px;
		font-style: italic;
		font-family: serif;
}
.au-body var sup,
.au-body var sub {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		font-style: normal;
		padding: 0 1px;
}
.au-body {
		/**
		 * Prevent `sub` and `sup` elements from affecting the line height in
		 * all browsers.
		 * https://github.com/necolas/normalize.css/blob/master/normalize.css#L174
		 */
}
.au-body sub,
.au-body sup {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.1428571429;
		position: relative;
		vertical-align: baseline;
}
.au-body sub {
		bottom: -0.25em;
}
.au-body sup {
		top: -0.5em;
}
.au-body {
		/**
		 * Keyboard strokes.
		 * Code snippets and code blocks.
		 */
}
.au-body kbd,
.au-body code,
.au-body samp {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.4285714286;
		padding: 4px;
		padding: 0.25rem;
		font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
		display: inline-block;
		border-radius: 4px;
		background-color: rgb(244.8, 244.8, 244.8);
		color: #313131;
}
.au-body pre {
		font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.au-body pre code {
		padding: 16px;
		padding: 1rem;
		display: block;
		-moz-tab-size: 4;
		  -o-tab-size: 4;
		     tab-size: 4;
}
.au-body {
		/**
		 * Horizontal rule, used for paragraph-level thematic breaks.
		 */
}
.au-body hr {
		-webkit-box-sizing: content-box;
		        box-sizing: content-box;
		height: 0;
		overflow: visible;
		border: none;
		border-top: 1px solid rgb(127.359375, 127.359375, 127.359375);
		margin-bottom: 24px;
		margin-bottom: 1.5rem;
}
.au-body * + hr {
		margin-top: 24px;
		margin-top: 1.5rem;
}
.au-body {
		/**
		 *  Body colour schemes
		 */
}
.au-body.au-body--alt {
		background: rgb(234.6, 234.6, 234.6);
}
.au-body.au-body--alt kbd,
.au-body.au-body--alt code,
.au-body.au-body--alt samp {
		background-color: rgb(224.4, 224.4, 224.4);
}
.au-body.au-body--dark {
		background: #135E70;
		color: #ffffff;
}
.au-body.au-body--dark ::-moz-selection {
		color: #135E70;
		background-color: rgba(97, 218, 255, 0.99);
}
.au-body.au-body--dark ::selection {
		color: #135E70;
		background-color: rgba(97, 218, 255, 0.99);
}
.au-body.au-body--dark img::-moz-selection, .au-body.au-body--dark video::-moz-selection, .au-body.au-body--dark iframe::-moz-selection {
		background-color: rgba(97, 218, 255, 0.75);
}
.au-body.au-body--dark img::selection,
.au-body.au-body--dark video::selection,
.au-body.au-body--dark iframe::selection {
		background-color: rgba(97, 218, 255, 0.75);
}
.au-body.au-body--dark a {
		color: #61daff;
}
.au-body.au-body--dark a:hover {
		color: #ffffff;
}
.au-body.au-body--dark a:focus {
		outline: 3px solid #C390F9;
}
.au-body.au-body--dark a::-moz-focus-inner {
		border: 0;
}
.au-body.au-body--dark [tabindex="0"]:focus,
.au-body.au-body--dark :target {
		outline: 3px solid #C390F9;
}
.au-body.au-body--dark mark {
		background-color: #61daff;
		color: #135E70;
}
.au-body.au-body--dark hr {
		border-top-color: rgb(137, 174.5, 183.5);
}
.au-body.au-body--dark code,
.au-body.au-body--dark kbd,
.au-body.au-body--dark samp {
		color: #ffffff;
		background-color: rgb(16.041221374, 79.3618320611, 94.558778626);
}
.au-body.au-body--dark.au-body--alt {
		background: rgb(13.0824427481, 64.7236641221, 77.1175572519);
}
.au-body.au-body--dark.au-body--alt code,
.au-body.au-body--dark.au-body--alt kbd,
.au-body.au-body--dark.au-body--alt samp {
		background-color: rgb(10.1236641221, 50.0854961832, 59.6763358779);
}

body {
		background: #ffffff;
		color: #313131;
		margin: 0;
		padding: 96px 24px 32px 24px;
		padding: 6rem 1.5rem 2rem 1.5rem;
		overflow-x: hidden;
}
body:before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background: repeating-linear-gradient(-45deg, #222, #222 10px, #333 10px, #333 20px);
		padding: 24px;
		padding: 1.5rem;
		font-size: 16px;
		font-size: 1rem;
		line-height: 1;
		content: "📃 Test file";
		font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
		color: white;
}

.test-link {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.split-wrapper {
		overflow: hidden;
}

.split {
		padding: 1%;
}
.split.split--alt {
		background: rgb(234.6, 234.6, 234.6);
}
.split.split--dark {
		background: #135E70;
		color: #ffffff;
}
.split.split--dark.split--alt {
		background: rgb(13.0824427481, 64.7236641221, 77.1175572519);
}
@media (min-width: 576px) {
		.split {
				width: 48%;
				float: left;
		}
}

@media print {
		body,
		.split--dark,
		.split--alt,
		.split--alt.split--dark {
				background: transparent !important;
		}
		.split {
				padding: 0 !important;
				width: 100% !important;
		}
}
html {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.xs-only,
.sm-only,
.md-only,
.lg-only,
.xl-only {
		display: none;
}

@media (min-width: 0) {
		.xs-only {
				display: block;
		}
}
@media (min-width: 576px) {
		.xs-only {
				display: none;
		}
		.sm-only {
				display: block;
		}
}
@media (min-width: 768px) {
		.sm-only {
				display: none;
		}
		.md-only {
				display: block;
		}
}
@media (min-width: 992px) {
		.md-only {
				display: none;
		}
		.lg-only {
				display: block;
		}
}
@media (min-width: 1200px) {
		.lg-only {
				display: none;
		}
		.xl-only {
				display: block;
		}
}
.font {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.monospace {
		font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.system {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.max-width {
		max-width: 42em;
}

.borderize {
		border: none;
		border-top: 1px solid rgb(127.359375, 127.359375, 127.359375);
}

.border-radius-wrapper {
		overflow: hidden;
		margin: 0;
		padding: 0;
		list-style: none;
}

.border-radius {
		float: left;
		border-radius: 4px;
		background-color: rgb(16.041221374, 79.3618320611, 94.558778626);
		overflow: hidden;
		width: 5em;
		height: 5em;
		margin-right: 1em;
}

@media (min-width: 0) {
		.au-media:after {
				content: "xs";
				display: block;
		}
}
@media (min-width: 576px) {
		.au-media:after {
				content: "sm";
				display: block;
		}
}
@media (min-width: 768px) {
		.au-media:after {
				content: "md";
				display: block;
		}
}
@media (min-width: 992px) {
		.au-media:after {
				content: "lg";
				display: block;
		}
}

.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
}

.au-outline {
		outline: 3px solid #9263DE;
		outline-offset: 2px;
}

.au-outline.dark {
		outline: 3px solid #C390F9;
}

.au-focus:focus {
		outline: 3px solid #9263DE;
		outline-offset: 2px;
}
.au-focus::-moz-focus-inner {
		border: 0;
}

.au-focus.dark:focus {
		outline: 3px solid #C390F9;
}
.au-focus.dark::-moz-focus-inner {
		border: 0;
}

.au-fontgrid {
		background-color: rgb(244.8, 244.8, 244.8);
		margin-top: 4px;
}

.au-fontgrid-0 {
		font-size: 48px;
		font-size: 3rem;
		line-height: 1.5;
}

.au-fontgrid-1 {
		font-size: 40px;
		font-size: 2.5rem;
		line-height: 1.5;
}

.au-fontgrid-2 {
		font-size: 32px;
		font-size: 2rem;
		line-height: 1.5;
}

.au-fontgrid-3 {
		font-size: 24px;
		font-size: 1.5rem;
		line-height: 1.5;
}

.au-fontgrid-4 {
		font-size: 20px;
		font-size: 1.25rem;
		line-height: 1.6;
}

.au-fontgrid-5 {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1.5;
}

.au-fontgrid-6 {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.4285714286;
}

.lineheight-heading .au-fontgrid-0 {
		font-size: 48px;
		font-size: 3rem;
		line-height: 1.25;
}
.lineheight-heading .au-fontgrid-1 {
		font-size: 40px;
		font-size: 2.5rem;
		line-height: 1.3;
}
.lineheight-heading .au-fontgrid-2 {
		font-size: 32px;
		font-size: 2rem;
		line-height: 1.25;
}
.lineheight-heading .au-fontgrid-3 {
		font-size: 24px;
		font-size: 1.5rem;
		line-height: 1.3333333333;
}
.lineheight-heading .au-fontgrid-4 {
		font-size: 20px;
		font-size: 1.25rem;
		line-height: 1.2;
}
.lineheight-heading .au-fontgrid-5 {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1.25;
}
.lineheight-heading .au-fontgrid-6 {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.1428571429;
}

.lineheight-nospace .au-fontgrid-0 {
		font-size: 48px;
		font-size: 3rem;
		line-height: 1;
}
.lineheight-nospace .au-fontgrid-1 {
		font-size: 40px;
		font-size: 2.5rem;
		line-height: 1;
}
.lineheight-nospace .au-fontgrid-2 {
		font-size: 32px;
		font-size: 2rem;
		line-height: 1;
}
.lineheight-nospace .au-fontgrid-3 {
		font-size: 24px;
		font-size: 1.5rem;
		line-height: 1;
}
.lineheight-nospace .au-fontgrid-4 {
		font-size: 20px;
		font-size: 1.25rem;
		line-height: 1;
}
.lineheight-nospace .au-fontgrid-5 {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1;
}
.lineheight-nospace .au-fontgrid-6 {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.1428571429;
}

.au-space {
		display: block;
		position: relative;
		overflow: visible;
		padding: 1em 0;
}
.au-space:after {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 6px;
		display: block;
		content: " ";
		background-color: hotpink;
		background-color: rebeccapurple;
}
.au-space.au-space--025:after {
		width: 4px;
		width: 0.25rem;
}
.au-space.au-space--05:after {
		width: 8px;
		width: 0.5rem;
}
.au-space.au-space--075:after {
		width: 12px;
		width: 0.75rem;
}
.au-space.au-space--1:after {
		width: 16px;
		width: 1rem;
}
.au-space.au-space--15:after {
		width: 24px;
		width: 1.5rem;
}
.au-space.au-space--2:after {
		width: 32px;
		width: 2rem;
}
.au-space.au-space--nopixel:after {
		width: 2rem;
}

.au-replace:after {
		content: "We love tabs for indentation";
		display: inline;
		color: rebeccapurple;
}

.au-svguri {
		width: 24px;
		height: 24px;
		background-repeat: no-repeat;
		background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23313131' d='M1408 928v320q0 119-84.5 203.5T1120 1536H288q-119 0-203.5-84.5T0 1248V416q0-119 84.5-203.5T288 128h704q14 0 23 9t9 23v64q0 14-9 23t-23 9H288q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113V928q0-14 9-23t23-9h64q14 0 23 9t9 23zm384-864v512q0 26-19 45t-45 19-45-19l-176-176-652 652q-10 10-23 10t-23-10L695 983q-10-10-10-23t10-23l652-652-176-176q-19-19-19-45t19-45 45-19h512q26 0 45 19t19 45z'/%3E%3C/svg%3E");
}
.ie8 .au-svguri:after, .lt-ie8 .au-svguri:after {
		background: none;
		content: "⇗";
		color: #313131;
}

.au-replace:after {
		content: "We love tabs for indentation";
		display: inline;
		color: rebeccapurple;
}

.au-factorial1:after {
		content: " 1";
		display: inline;
		color: rebeccapurple;
}

.au-factorial2:after {
		content: " 2";
		display: inline;
		color: rebeccapurple;
}

.au-factorial3:after {
		content: " 6";
		display: inline;
		color: rebeccapurple;
}

.au-factorial4:after {
		content: " 24";
		display: inline;
		color: rebeccapurple;
}

.au-factorial5:after {
		content: " 120";
		display: inline;
		color: rebeccapurple;
}

.au-factorial6:after {
		content: " 720";
		display: inline;
		color: rebeccapurple;
}

.au-pow1:after {
		content: " 125";
		display: inline;
		color: rebeccapurple;
}

.au-pow2:after {
		content: " 16";
		display: inline;
		color: rebeccapurple;
}

.au-pow4:after {
		content: " 1.3195079108";
		display: inline;
		color: rebeccapurple;
}

.au-color-luminance1:after {
		content: " 0";
		display: inline;
		color: rebeccapurple;
}

.au-color-luminance2:after {
		content: " 0.0749234116";
		display: inline;
		color: rebeccapurple;
}

.au-color-luminance3:after {
		content: " 0.3465843817";
		display: inline;
		color: rebeccapurple;
}

.au-color-luminance4:after {
		content: " 1";
		display: inline;
		color: rebeccapurple;
}

.au-color-contrast1:after {
		content: " 21";
		display: inline;
		color: rebeccapurple;
}

.au-color-contrast2:after {
		content: " 4";
		display: inline;
		color: rebeccapurple;
}

.au-color-contrast3:after {
		content: " 5.3";
		display: inline;
		color: rebeccapurple;
}

.au-color-contrast4:after {
		content: " 19.6";
		display: inline;
		color: rebeccapurple;
}

.au-color-contrast5:after {
		content: " 1.1";
		display: inline;
		color: rebeccapurple;
}

.au-color-a11y1:after {
		content: " rgb(255, 162.861328125, 162.861328125)";
		display: inline;
		color: rebeccapurple;
}

.au-color-a11y2:after {
		content: " rgb(0, 217.5079345703, 0)";
		display: inline;
		color: rebeccapurple;
}

.au-color-a11y3:after {
		content: " pink";
		display: inline;
		color: rebeccapurple;
}

.au-color-a11y4:after {
		content: " rgb(180.791015625, 180.791015625, 255)";
		display: inline;
		color: rebeccapurple;
}

.au-color-a11y5:after {
		content: " rgb(79.5, 79.5, 79.5)";
		display: inline;
		color: rebeccapurple;
}

.au-color-a11y6:after {
		content: " #231284";
		display: inline;
		color: rebeccapurple;
}

.au-color-a11y7:after {
		content: " rgb(118.037109375, 118.037109375, 118.037109375)";
		display: inline;
		color: rebeccapurple;
}

.au-color-a11y8:after {
		content: " rgb(253.546875, 253.546875, 253.546875)";
		display: inline;
		color: rebeccapurple;
}

.palette {
		overflow: hidden;
}

.palette__color {
		position: relative;
		float: left;
}
.palette--9 .palette__color {
		width: 20%;
		padding-bottom: 20%;
}
.palette--4 .palette__color {
		width: 25%;
		padding-bottom: 25%;
}
.palette__color:after {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		margin-top: -1.2em;
		text-align: center;
		font-size: 12px;
		color: #fff;
		background: rgba(0, 0, 0, 0.8);
		padding: 0.5em 0;
		white-space: pre;
		overflow: auto;
}

.contrast {
		width: 100%;
}
.contrast thead:before {
		content: " ";
		display: block;
		padding-top: 16px;
		padding-top: 1rem;
}
.contrast caption {
		text-align: left;
}
.contrast td {
		width: 13.3333333333%;
		padding: 0;
}

.contrast-box {
		padding: 1em;
		text-align: center;
		font-weight: bold;
}
.contrast-box:after {
		display: block;
		height: 1.5em;
		margin-top: 1em;
		padding: 0.5em;
		color: #313131;
		background: #fff;
		border-radius: 3px;
}

.colorbox-wrapper {
		overflow: hidden;
}
.colorbox-wrapper.colorbox__8 .colorbox {
		width: 100%;
}
@media (min-width: 576px) {
		.colorbox-wrapper.colorbox__8 .colorbox {
				width: 25%;
		}
}
@media (min-width: 768px) {
		.colorbox-wrapper.colorbox__8 .colorbox {
				width: 12.5%;
		}
}
.colorbox-wrapper.colorbox__4 .colorbox {
		width: 100%;
}
@media (min-width: 576px) {
		.colorbox-wrapper.colorbox__4 .colorbox {
				width: 50%;
		}
}
@media (min-width: 768px) {
		.colorbox-wrapper.colorbox__4 .colorbox {
				width: 25%;
		}
}

.colorbox {
		float: left;
		font-size: 12px;
}
.colorbox span {
		display: block;
		background-color: rgba(255, 255, 255, 0.7);
		padding: 1em;
		margin-left: 4em;
		font-weight: bold;
		overflow: auto;
}
.colorbox span:after {
		content: "";
		display: inline;
		padding-left: 0.5em;
		font-weight: normal;
}

.colorbox__tint__name {
		border-top: 3px solid #fff;
		border-bottom: 3px solid #fff;
}

.palette__color--action {
		background-color: #00698f;
}
.palette__color--action:after {
		content: "AU-color-foreground-action\a#00698f";
}

.palette__color--focus {
		background-color: #9263DE;
}
.palette__color--focus:after {
		content: "AU-color-foreground-focus\a#9263DE";
}

.palette__color--text {
		background-color: #313131;
}
.palette__color--text:after {
		content: "AU-color-foreground-text\a#313131";
}

.palette__color--muted {
		background-color: rgb(99.453125, 99.453125, 99.453125);
}
.palette__color--muted:after {
		content: "AU-color-foreground-muted\argb(99.453125, 99.453125, 99.453125)";
}

.palette__color--border {
		background-color: rgb(127.359375, 127.359375, 127.359375);
}
.palette__color--border:after {
		content: "AU-color-foreground-border\argb(127.359375, 127.359375, 127.359375)";
}

.palette__color--background-light {
		background-color: #ffffff;
}
.palette__color--background-light:after {
		content: "AU-color-background\a#ffffff";
}

.palette__color--background {
		background-color: rgb(244.8, 244.8, 244.8);
}
.palette__color--background:after {
		content: "AU-color-background-shade\argb(244.8, 244.8, 244.8)";
}

.palette__color--background-dark {
		background-color: rgb(234.6, 234.6, 234.6);
}
.palette__color--background-dark:after {
		content: "AU-color-background-alt\argb(234.6, 234.6, 234.6)";
}

.palette__color--background-darkest {
		background-color: rgb(224.4, 224.4, 224.4);
}
.palette__color--background-darkest:after {
		content: "AU-color-background-alt-shade\argb(224.4, 224.4, 224.4)";
}

.palette--dark .palette__color--action {
		background-color: #61daff;
}
.palette--dark .palette__color--action:after {
		content: "AU-colordark-foreground-action\a#61daff";
}
.palette--dark .palette__color--focus {
		background-color: #C390F9;
}
.palette--dark .palette__color--focus:after {
		content: "AU-colordark-foreground-focus\a#C390F9";
}
.palette--dark .palette__color--text {
		background-color: #ffffff;
}
.palette--dark .palette__color--text:after {
		content: "AU-colordark-foreground-text\a#ffffff";
}
.palette--dark .palette__color--muted {
		background-color: rgb(183.9580078125, 206.5349121094, 211.9533691406);
}
.palette--dark .palette__color--muted:after {
		content: "AU-colordark-foreground-muted\argb(183.9580078125, 206.5349121094, 211.9533691406)";
}
.palette--dark .palette__color--border {
		background-color: rgb(137, 174.5, 183.5);
}
.palette--dark .palette__color--border:after {
		content: "AU-colordark-foreground-border\argb(137, 174.5, 183.5)";
}
.palette--dark .palette__color--background-light {
		background-color: #135E70;
		color: #fff;
}
.palette--dark .palette__color--background-light:after {
		content: "AU-colordark-background\a#135E70";
}
.palette--dark .palette__color--background {
		background-color: rgb(16.041221374, 79.3618320611, 94.558778626);
		color: #fff;
}
.palette--dark .palette__color--background:after {
		content: "AU-colordark-background-shade\argb(16.041221374, 79.3618320611, 94.558778626)";
}
.palette--dark .palette__color--background-dark {
		background-color: rgb(13.0824427481, 64.7236641221, 77.1175572519);
		color: #fff;
}
.palette--dark .palette__color--background-dark:after {
		content: "AU-colordark-background-alt\argb(13.0824427481, 64.7236641221, 77.1175572519)";
}
.palette--dark .palette__color--background-darkest {
		background-color: rgb(10.1236641221, 50.0854961832, 59.6763358779);
		color: #fff;
}
.palette--dark .palette__color--background-darkest:after {
		content: "AU-colordark-background-alt-shade\argb(10.1236641221, 50.0854961832, 59.6763358779)";
}

.palette__color--error {
		background-color: #d60000;
}
.palette__color--error:after {
		content: "AU-color-error\a#d60000";
}

.palette__color--success {
		background-color: #0b996c;
}
.palette__color--success:after {
		content: "AU-color-success\a#0b996c";
}

.palette__color--warning {
		background-color: #f69900;
}
.palette__color--warning:after {
		content: "AU-color-warning\a#f69900";
}

.palette__color--info {
		background-color: #00bfe9;
}
.palette__color--info:after {
		content: "AU-color-info\a#00bfe9";
}

.contrast-box--action {
		color: #00698f;
}

.contrast-box--focus {
		color: #9263DE;
}

.contrast-box--text {
		color: #313131;
}

.contrast-box--muted {
		color: rgb(99.453125, 99.453125, 99.453125);
}

.contrast-box--border {
		color: rgb(127.359375, 127.359375, 127.359375);
}

.contrast-background .contrast-box {
		background-color: #ffffff;
}
.contrast-background .contrast-box--action:after {
		border: 3px solid #0CAC78;
		content: "6.1 ✔";
}
.contrast-background .contrast-box--focus:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "4.1 !";
}
.contrast-background .contrast-box--text:after {
		border: 3px solid #0CAC78;
		content: "13 ✔";
}
.contrast-background .contrast-box--muted:after {
		border: 3px solid #0CAC78;
		content: "6 ✔";
}
.contrast-background .contrast-box--border:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "4 !";
}

.contrast-background-shade .contrast-box {
		background-color: rgb(244.8, 244.8, 244.8);
}
.contrast-background-shade .contrast-box--action:after {
		border: 3px solid #0CAC78;
		content: "5.6 ✔";
}
.contrast-background-shade .contrast-box--focus:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "3.8 !";
}
.contrast-background-shade .contrast-box--text:after {
		border: 3px solid #0CAC78;
		content: "11.9 ✔";
}
.contrast-background-shade .contrast-box--muted:after {
		border: 3px solid #0CAC78;
		content: "5.5 ✔";
}
.contrast-background-shade .contrast-box--border:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "3.7 !";
}

.contrast-background-alt .contrast-box {
		background-color: rgb(234.6, 234.6, 234.6);
}
.contrast-background-alt .contrast-box--action:after {
		border: 3px solid #0CAC78;
		content: "5.2 ✔";
}
.contrast-background-alt .contrast-box--focus:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "3.5 !";
}
.contrast-background-alt .contrast-box--text:after {
		border: 3px solid #0CAC78;
		content: "10.9 ✔";
}
.contrast-background-alt .contrast-box--muted:after {
		border: 3px solid #0CAC78;
		content: "5 ✔";
}
.contrast-background-alt .contrast-box--border:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "3.4 !";
}

.contrast-background-alt-shade .contrast-box {
		background-color: rgb(224.4, 224.4, 224.4);
}
.contrast-background-alt-shade .contrast-box--action:after {
		border: 3px solid #0CAC78;
		content: "4.7 ✔";
}
.contrast-background-alt-shade .contrast-box--focus:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "3.1 !";
}
.contrast-background-alt-shade .contrast-box--text:after {
		border: 3px solid #0CAC78;
		content: "9.9 ✔";
}
.contrast-background-alt-shade .contrast-box--muted:after {
		border: 3px solid #0CAC78;
		content: "4.6 ✔";
}
.contrast-background-alt-shade .contrast-box--border:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "3 !";
}

.contrast--dark .contrast-box--action {
		color: #61daff;
}
.contrast--dark .contrast-box--focus {
		color: #C390F9;
}
.contrast--dark .contrast-box--text {
		color: #ffffff;
}
.contrast--dark .contrast-box--muted {
		color: rgb(183.9580078125, 206.5349121094, 211.9533691406);
}
.contrast--dark .contrast-box--border {
		color: rgb(137, 174.5, 183.5);
}
.contrast--dark .contrast-background .contrast-box {
		background-color: #135E70;
}
.contrast--dark .contrast-background .contrast-box--action:after {
		border: 3px solid #0CAC78;
		content: "4.5 ✔";
}
.contrast--dark .contrast-background .contrast-box--focus:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "3 !";
}
.contrast--dark .contrast-background .contrast-box--text:after {
		border: 3px solid #0CAC78;
		content: "7.3 ✔";
}
.contrast--dark .contrast-background .contrast-box--muted:after {
		border: 3px solid #0CAC78;
		content: "4.5 ✔";
}
.contrast--dark .contrast-background .contrast-box--border:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "3.1 !";
}
.contrast--dark .contrast-background-shade .contrast-box {
		background-color: rgb(16.041221374, 79.3618320611, 94.558778626);
}
.contrast--dark .contrast-background-shade .contrast-box--action:after {
		border: 3px solid #0CAC78;
		content: "5.6 ✔";
}
.contrast--dark .contrast-background-shade .contrast-box--focus:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "3.8 !";
}
.contrast--dark .contrast-background-shade .contrast-box--text:after {
		border: 3px solid #0CAC78;
		content: "9.1 ✔";
}
.contrast--dark .contrast-background-shade .contrast-box--muted:after {
		border: 3px solid #0CAC78;
		content: "5.6 ✔";
}
.contrast--dark .contrast-background-shade .contrast-box--border:after {
		border: 3px solid #0CAC78;
		border-color: #F69900;
		content: "3.9 !";
}
.contrast--dark .contrast-background-alt .contrast-box {
		background-color: rgb(13.0824427481, 64.7236641221, 77.1175572519);
}
.contrast--dark .contrast-background-alt .contrast-box--action:after {
		border: 3px solid #0CAC78;
		content: "6.9 ✔";
}
.contrast--dark .contrast-background-alt .contrast-box--focus:after {
		border: 3px solid #0CAC78;
		content: "4.6 ✔";
}
.contrast--dark .contrast-background-alt .contrast-box--text:after {
		border: 3px solid #0CAC78;
		content: "11.2 ✔";
}
.contrast--dark .contrast-background-alt .contrast-box--muted:after {
		border: 3px solid #0CAC78;
		content: "6.9 ✔";
}
.contrast--dark .contrast-background-alt .contrast-box--border:after {
		border: 3px solid #0CAC78;
		content: "4.7 ✔";
}
.contrast--dark .contrast-background-alt-shade .contrast-box {
		background-color: rgb(10.1236641221, 50.0854961832, 59.6763358779);
}
.contrast--dark .contrast-background-alt-shade .contrast-box--action:after {
		border: 3px solid #0CAC78;
		content: "8.5 ✔";
}
.contrast--dark .contrast-background-alt-shade .contrast-box--focus:after {
		border: 3px solid #0CAC78;
		content: "5.7 ✔";
}
.contrast--dark .contrast-background-alt-shade .contrast-box--text:after {
		border: 3px solid #0CAC78;
		content: "13.7 ✔";
}
.contrast--dark .contrast-background-alt-shade .contrast-box--muted:after {
		border: 3px solid #0CAC78;
		content: "8.4 ✔";
}
.contrast--dark .contrast-background-alt-shade .contrast-box--border:after {
		border: 3px solid #0CAC78;
		content: "5.8 ✔";
}