@charset "UTF-8";
/************************ Dark Theme Colours */
/* General */
/* Buttons */
/* Scroll Bars */
/* Tables */
/* Discourse inspired dropdowns */
/************************ Hacks */
img[alt="Entroware"], img[alt="Entroware logo"], img[src="/images/people/nophoto.svg"] { filter: invert(1); }

.site-header { background: #87A556 !important; }

.sidebar-link:hover, .sidebar-link:focus { background-color: #78934A !important; }

.toc { background-color: #303030 !important; }

blockquote a { color: #87A556; }

input { background-color: #303030; }

/************************ Manual toggle in footer */
#str-light { display: inline; }

#str-dark { display: none; }

/* Not applicable if browser auto supports this */
@media (prefers-color-scheme: dark) { #dark-toggle { display: none; } }

/* Libraries */
/*! Bootstrap Reboot v4.1.3 (https://getbootstrap.com/) Copyright 2011-2018 The Bootstrap Authors Copyright 2011-2018 Twitter, Inc. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) */
*, ::after, ::before { box-sizing: border-box; }

html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; }

@-ms-viewport { width: device-width; }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }

body { margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; }

[tabindex="-1"]:focus { outline: 0 !important; }

hr { box-sizing: content-box; height: 0; overflow: visible; }

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; }

p { margin-top: 0; margin-bottom: 1rem; }

abbr[data-original-title], abbr[title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; }

address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }

dl, ol, ul { margin-top: 0; margin-bottom: 1rem; }

ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }

dt { font-weight: 700; }

dd { margin-bottom: .5rem; margin-left: 0; }

blockquote { margin: 0 0 1rem; }

dfn { font-style: italic; }

b, strong { font-weight: bolder; }

small { font-size: 80%; }

sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }

sub { bottom: -.25em; }

sup { top: -.5em; }

a { color: #007bff; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; }

a:hover { color: #0056b3; text-decoration: underline; }

a:not([href]):not([tabindex]) { color: inherit; text-decoration: none; }

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { color: inherit; text-decoration: none; }

a:not([href]):not([tabindex]):focus { outline: 0; }

code, kbd, pre, samp { font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size: 1em; }

pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; }

figure { margin: 0 0 1rem; }

img { vertical-align: middle; border-style: none; }

svg { overflow: hidden; vertical-align: middle; }

table { border-collapse: collapse; }

caption { padding-top: .75rem; padding-bottom: .75rem; color: #6c757d; text-align: left; caption-side: bottom; }

th { text-align: inherit; }

label { display: inline-block; margin-bottom: .5rem; }

button { border-radius: 0; }

button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }

button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }

button, input { overflow: visible; }

button, select { text-transform: none; }

[type=reset], [type=submit], button, html [type=button] { -webkit-appearance: button; }

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { padding: 0; border-style: none; }

input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; }

input[type=date], input[type=datetime-local], input[type=month], input[type=time] { -webkit-appearance: listbox; }

textarea { overflow: auto; resize: vertical; }

fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }

legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; }

progress { vertical-align: baseline; }

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; }

[type=search] { outline-offset: -2px; -webkit-appearance: none; }

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }

output { display: inline-block; }

summary { display: list-item; cursor: pointer; }

template { display: none; }

[hidden] { display: none !important; }

/*! Bootstrap Grid v4.1.3 (https://getbootstrap.com/) Copyright 2011-2018 The Bootstrap Authors Copyright 2011-2018 Twitter, Inc. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */
@-ms-viewport { width: device-width; }

html { box-sizing: border-box; -ms-overflow-style: scrollbar; }

*, ::after, ::before { box-sizing: inherit; }

.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

@media (min-width: 576px) { .container { max-width: 540px; } }

@media (min-width: 768px) { .container { max-width: 720px; } }

@media (min-width: 992px) { .container { max-width: 960px; } }

@media (min-width: 1200px) { .container { max-width: 1140px; } }

.container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }

.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }

.no-gutters { margin-right: 0; margin-left: 0; }

.no-gutters > .col, .no-gutters > [class*=col-] { padding-right: 0; padding-left: 0; }

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }

.col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }

.col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }

.col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }

.col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }

.col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }

.col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }

.col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }

.col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }

.col-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }

.col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }

.col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }

.col-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }

.col-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }

.col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

.order-first { -ms-flex-order: -1; order: -1; }

.order-last { -ms-flex-order: 13; order: 13; }

.order-0 { -ms-flex-order: 0; order: 0; }

.order-1 { -ms-flex-order: 1; order: 1; }

.order-2 { -ms-flex-order: 2; order: 2; }

.order-3 { -ms-flex-order: 3; order: 3; }

.order-4 { -ms-flex-order: 4; order: 4; }

.order-5 { -ms-flex-order: 5; order: 5; }

.order-6 { -ms-flex-order: 6; order: 6; }

.order-7 { -ms-flex-order: 7; order: 7; }

.order-8 { -ms-flex-order: 8; order: 8; }

.order-9 { -ms-flex-order: 9; order: 9; }

.order-10 { -ms-flex-order: 10; order: 10; }

.order-11 { -ms-flex-order: 11; order: 11; }

.order-12 { -ms-flex-order: 12; order: 12; }

.offset-1 { margin-left: 8.333333%; }

.offset-2 { margin-left: 16.666667%; }

.offset-3 { margin-left: 25%; }

.offset-4 { margin-left: 33.333333%; }

.offset-5 { margin-left: 41.666667%; }

.offset-6 { margin-left: 50%; }

.offset-7 { margin-left: 58.333333%; }

.offset-8 { margin-left: 66.666667%; }

.offset-9 { margin-left: 75%; }

.offset-10 { margin-left: 83.333333%; }

.offset-11 { margin-left: 91.666667%; }

@media (min-width: 576px) { .col-sm { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-sm-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-sm-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-sm-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-sm-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-sm-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-sm-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-sm-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-sm-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-sm-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-sm-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-sm-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-sm-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-sm-first { -ms-flex-order: -1; order: -1; } .order-sm-last { -ms-flex-order: 13; order: 13; } .order-sm-0 { -ms-flex-order: 0; order: 0; } .order-sm-1 { -ms-flex-order: 1; order: 1; } .order-sm-2 { -ms-flex-order: 2; order: 2; } .order-sm-3 { -ms-flex-order: 3; order: 3; } .order-sm-4 { -ms-flex-order: 4; order: 4; } .order-sm-5 { -ms-flex-order: 5; order: 5; } .order-sm-6 { -ms-flex-order: 6; order: 6; } .order-sm-7 { -ms-flex-order: 7; order: 7; } .order-sm-8 { -ms-flex-order: 8; order: 8; } .order-sm-9 { -ms-flex-order: 9; order: 9; } .order-sm-10 { -ms-flex-order: 10; order: 10; } .order-sm-11 { -ms-flex-order: 11; order: 11; } .order-sm-12 { -ms-flex-order: 12; order: 12; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.333333%; } .offset-sm-2 { margin-left: 16.666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.333333%; } .offset-sm-5 { margin-left: 41.666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.333333%; } .offset-sm-8 { margin-left: 66.666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.333333%; } .offset-sm-11 { margin-left: 91.666667%; } }

@media (min-width: 768px) { .col-md { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-md-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-md-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-md-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-md-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-md-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-md-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-md-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-md-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-md-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-md-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-md-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-md-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-md-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-md-first { -ms-flex-order: -1; order: -1; } .order-md-last { -ms-flex-order: 13; order: 13; } .order-md-0 { -ms-flex-order: 0; order: 0; } .order-md-1 { -ms-flex-order: 1; order: 1; } .order-md-2 { -ms-flex-order: 2; order: 2; } .order-md-3 { -ms-flex-order: 3; order: 3; } .order-md-4 { -ms-flex-order: 4; order: 4; } .order-md-5 { -ms-flex-order: 5; order: 5; } .order-md-6 { -ms-flex-order: 6; order: 6; } .order-md-7 { -ms-flex-order: 7; order: 7; } .order-md-8 { -ms-flex-order: 8; order: 8; } .order-md-9 { -ms-flex-order: 9; order: 9; } .order-md-10 { -ms-flex-order: 10; order: 10; } .order-md-11 { -ms-flex-order: 11; order: 11; } .order-md-12 { -ms-flex-order: 12; order: 12; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.333333%; } .offset-md-2 { margin-left: 16.666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.333333%; } .offset-md-5 { margin-left: 41.666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.333333%; } .offset-md-8 { margin-left: 66.666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.333333%; } .offset-md-11 { margin-left: 91.666667%; } }

@media (min-width: 992px) { .col-lg { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-lg-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-lg-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-lg-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-lg-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-lg-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-lg-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-lg-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-lg-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-lg-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-lg-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-lg-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-lg-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-lg-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-lg-first { -ms-flex-order: -1; order: -1; } .order-lg-last { -ms-flex-order: 13; order: 13; } .order-lg-0 { -ms-flex-order: 0; order: 0; } .order-lg-1 { -ms-flex-order: 1; order: 1; } .order-lg-2 { -ms-flex-order: 2; order: 2; } .order-lg-3 { -ms-flex-order: 3; order: 3; } .order-lg-4 { -ms-flex-order: 4; order: 4; } .order-lg-5 { -ms-flex-order: 5; order: 5; } .order-lg-6 { -ms-flex-order: 6; order: 6; } .order-lg-7 { -ms-flex-order: 7; order: 7; } .order-lg-8 { -ms-flex-order: 8; order: 8; } .order-lg-9 { -ms-flex-order: 9; order: 9; } .order-lg-10 { -ms-flex-order: 10; order: 10; } .order-lg-11 { -ms-flex-order: 11; order: 11; } .order-lg-12 { -ms-flex-order: 12; order: 12; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.333333%; } .offset-lg-2 { margin-left: 16.666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.333333%; } .offset-lg-5 { margin-left: 41.666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.333333%; } .offset-lg-8 { margin-left: 66.666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.333333%; } .offset-lg-11 { margin-left: 91.666667%; } }

@media (min-width: 1200px) { .col-xl { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-xl-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; } .col-xl-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-xl-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-xl-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-xl-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-xl-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-xl-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-xl-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-xl-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-xl-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-xl-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-xl-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-xl-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .order-xl-first { -ms-flex-order: -1; order: -1; } .order-xl-last { -ms-flex-order: 13; order: 13; } .order-xl-0 { -ms-flex-order: 0; order: 0; } .order-xl-1 { -ms-flex-order: 1; order: 1; } .order-xl-2 { -ms-flex-order: 2; order: 2; } .order-xl-3 { -ms-flex-order: 3; order: 3; } .order-xl-4 { -ms-flex-order: 4; order: 4; } .order-xl-5 { -ms-flex-order: 5; order: 5; } .order-xl-6 { -ms-flex-order: 6; order: 6; } .order-xl-7 { -ms-flex-order: 7; order: 7; } .order-xl-8 { -ms-flex-order: 8; order: 8; } .order-xl-9 { -ms-flex-order: 9; order: 9; } .order-xl-10 { -ms-flex-order: 10; order: 10; } .order-xl-11 { -ms-flex-order: 11; order: 11; } .order-xl-12 { -ms-flex-order: 12; order: 12; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.333333%; } .offset-xl-2 { margin-left: 16.666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.333333%; } .offset-xl-5 { margin-left: 41.666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.333333%; } .offset-xl-8 { margin-left: 66.666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.333333%; } .offset-xl-11 { margin-left: 91.666667%; } }

.d-none { display: none !important; }

.d-inline { display: inline !important; }

.d-inline-block { display: inline-block !important; }

.d-block { display: block !important; }

.d-table { display: table !important; }

.d-table-row { display: table-row !important; }

.d-table-cell { display: table-cell !important; }

.d-flex { display: -ms-flexbox !important; display: flex !important; }

.d-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }

@media (min-width: 576px) { .d-sm-none { display: none !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-block { display: block !important; } .d-sm-table { display: table !important; } .d-sm-table-row { display: table-row !important; } .d-sm-table-cell { display: table-cell !important; } .d-sm-flex { display: -ms-flexbox !important; display: flex !important; } .d-sm-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } }

@media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-inline { display: inline !important; } .d-md-inline-block { display: inline-block !important; } .d-md-block { display: block !important; } .d-md-table { display: table !important; } .d-md-table-row { display: table-row !important; } .d-md-table-cell { display: table-cell !important; } .d-md-flex { display: -ms-flexbox !important; display: flex !important; } .d-md-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } }

@media (min-width: 992px) { .d-lg-none { display: none !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-block { display: block !important; } .d-lg-table { display: table !important; } .d-lg-table-row { display: table-row !important; } .d-lg-table-cell { display: table-cell !important; } .d-lg-flex { display: -ms-flexbox !important; display: flex !important; } .d-lg-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } }

@media (min-width: 1200px) { .d-xl-none { display: none !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-block { display: block !important; } .d-xl-table { display: table !important; } .d-xl-table-row { display: table-row !important; } .d-xl-table-cell { display: table-cell !important; } .d-xl-flex { display: -ms-flexbox !important; display: flex !important; } .d-xl-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } }

@media print { .d-print-none { display: none !important; } .d-print-inline { display: inline !important; } .d-print-inline-block { display: inline-block !important; } .d-print-block { display: block !important; } .d-print-table { display: table !important; } .d-print-table-row { display: table-row !important; } .d-print-table-cell { display: table-cell !important; } .d-print-flex { display: -ms-flexbox !important; display: flex !important; } .d-print-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } }

.flex-row { -ms-flex-direction: row !important; flex-direction: row !important; }

.flex-column { -ms-flex-direction: column !important; flex-direction: column !important; }

.flex-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; }

.flex-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; }

.flex-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; }

.flex-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; }

.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; }

.flex-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; }

.flex-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; }

.flex-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; }

.flex-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; }

.flex-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; }

.justify-content-start { -ms-flex-pack: start !important; justify-content: flex-start !important; }

.justify-content-end { -ms-flex-pack: end !important; justify-content: flex-end !important; }

.justify-content-center { -ms-flex-pack: center !important; justify-content: center !important; }

.justify-content-between { -ms-flex-pack: justify !important; justify-content: space-between !important; }

.justify-content-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; }

.align-items-start { -ms-flex-align: start !important; align-items: flex-start !important; }

.align-items-end { -ms-flex-align: end !important; align-items: flex-end !important; }

.align-items-center { -ms-flex-align: center !important; align-items: center !important; }

.align-items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; }

.align-items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; }

.align-content-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; }

.align-content-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; }

.align-content-center { -ms-flex-line-pack: center !important; align-content: center !important; }

.align-content-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; }

.align-content-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; }

.align-content-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; }

.align-self-auto { -ms-flex-item-align: auto !important; align-self: auto !important; }

.align-self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; }

.align-self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; }

.align-self-center { -ms-flex-item-align: center !important; align-self: center !important; }

.align-self-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; }

.align-self-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; }

@media (min-width: 576px) { .flex-sm-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-sm-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-sm-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-sm-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-sm-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-sm-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-sm-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-sm-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-sm-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-sm-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-sm-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-sm-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-sm-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-sm-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-sm-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-sm-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-sm-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-sm-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-sm-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-sm-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-sm-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-sm-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-sm-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-sm-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-sm-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-sm-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-sm-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-sm-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-sm-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-sm-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-sm-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-sm-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-sm-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-sm-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } }

@media (min-width: 768px) { .flex-md-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-md-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-md-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-md-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-md-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-md-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-md-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-md-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-md-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-md-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-md-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-md-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-md-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-md-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-md-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-md-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-md-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-md-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-md-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-md-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-md-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-md-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-md-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-md-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-md-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-md-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-md-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-md-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-md-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-md-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-md-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-md-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-md-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-md-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } }

@media (min-width: 992px) { .flex-lg-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-lg-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-lg-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-lg-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-lg-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-lg-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-lg-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-lg-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-lg-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-lg-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-lg-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-lg-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-lg-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-lg-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-lg-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-lg-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-lg-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-lg-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-lg-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-lg-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-lg-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-lg-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-lg-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-lg-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-lg-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-lg-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-lg-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-lg-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-lg-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-lg-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-lg-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-lg-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-lg-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-lg-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } }

@media (min-width: 1200px) { .flex-xl-row { -ms-flex-direction: row !important; flex-direction: row !important; } .flex-xl-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-xl-row-reverse { -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .flex-xl-column-reverse { -ms-flex-direction: column-reverse !important; flex-direction: column-reverse !important; } .flex-xl-wrap { -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .flex-xl-nowrap { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .flex-xl-wrap-reverse { -ms-flex-wrap: wrap-reverse !important; flex-wrap: wrap-reverse !important; } .flex-xl-fill { -ms-flex: 1 1 auto !important; flex: 1 1 auto !important; } .flex-xl-grow-0 { -ms-flex-positive: 0 !important; flex-grow: 0 !important; } .flex-xl-grow-1 { -ms-flex-positive: 1 !important; flex-grow: 1 !important; } .flex-xl-shrink-0 { -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } .flex-xl-shrink-1 { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .justify-content-xl-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-xl-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-xl-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-xl-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-xl-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-xl-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-xl-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-xl-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-xl-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-xl-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-content-xl-start { -ms-flex-line-pack: start !important; align-content: flex-start !important; } .align-content-xl-end { -ms-flex-line-pack: end !important; align-content: flex-end !important; } .align-content-xl-center { -ms-flex-line-pack: center !important; align-content: center !important; } .align-content-xl-between { -ms-flex-line-pack: justify !important; align-content: space-between !important; } .align-content-xl-around { -ms-flex-line-pack: distribute !important; align-content: space-around !important; } .align-content-xl-stretch { -ms-flex-line-pack: stretch !important; align-content: stretch !important; } .align-self-xl-auto { -ms-flex-item-align: auto !important; align-self: auto !important; } .align-self-xl-start { -ms-flex-item-align: start !important; align-self: flex-start !important; } .align-self-xl-end { -ms-flex-item-align: end !important; align-self: flex-end !important; } .align-self-xl-center { -ms-flex-item-align: center !important; align-self: center !important; } .align-self-xl-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; } .align-self-xl-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; } }

/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }

.slick-list:focus { outline: none; }

.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; }

.slick-track:before, .slick-track:after { content: ""; display: table; }

.slick-track:after { clear: both; }

.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }

[dir="rtl"] .slick-slide { float: right; }

.slick-slide img { display: block; }

.slick-slide.slick-loading img { display: none; }

.slick-slide.dragging img { pointer-events: none; }

.slick-initialized .slick-slide { display: block; }

.slick-loading .slick-slide { visibility: hidden; }

.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

@media (max-width: 767px) { .slick-dots { flex-wrap: wrap; margin: 15px auto; align-items: center; justify-content: center; width: calc(100% - 80px); } }

@media (max-width: 475px) { .slick-dots { min-width: calc(100% - (100vw / 4)); max-width: calc(100% - (100vw / 4)); } .slick-prev, .slick-dots, .slick-next { margin: 15px 0; } .slick-dots button { margin: 0 1px 2px; min-width: calc(100vw / 7); max-width: calc(100vw / 7); } .slick-next, .slick-prev { max-width: calc(100vw / 8); min-width: calc(100vw / 8); } }

@font-face { font-family: "Ubuntu-Embed"; src: url("/assets/fonts/Ubuntu-R.ttf"); }

@font-face { font-family: "Ubuntu-Embed"; src: url("/assets/fonts/Ubuntu-B.ttf"); font-weight: bold; font-style: normal; }

/* Theme */
/*************************** Common Colours (See also: themes/*.scss) */
/* Footer */
/* Misc */
/* Alert Colours (taken from GTK theme) */
/************************ Dimensions */
/************************ Bootstrap Grid */
/************************ Animations */
/************************ Fonts */
body, button, input { font-family: "Ubuntu", "Ubuntu-Embed", "Roboto", "Oxygen", "Cantarell", "Fira Sans", "Droid Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; color: white; }

body { background: #222222; color: white; }

a { color: #758A53; /* Generally a FontAwesome icon */ }

a:hover, a:focus { color: #44522E; }

a:hover svg path, a:focus svg path { fill: #44522E; }

a svg { height: 16px; width: 16px; position: relative; top: -1px; }

a svg path { fill: #758A53; }

::selection { background: #87A556; color: white; }

hr { border: none; border-top: 1px solid #A9A9A9; }

code { font-family: "Ubuntu Mono", monospace; color: #87A556; }

/* Slight override on Bootstrap Grid */
@media screen and (max-width: 767px) { .container { max-width: 991px; } }

/************************ Generic markdown content */
content { margin-bottom: 60px; }

content img { max-width: 100%; }

content h1, content h2, content h3, content h4, content h5 { margin-top: 1em; }

content .btn { display: inline-block; margin-top: 0px; margin-bottom: 10px; }

content > .content { margin: 40px 0; }

/************************ Push footer to the bottom */
body { display: flex; flex-direction: column; min-height: 100vh; min-width: 320px; }

footer { margin-top: auto; }

/************************ Text class helpers */
.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }

.monospace-font { font-family: "Ubuntu Mono", monospace; font-size: 16px; }

/************************ Markdown */
blockquote { background-color: #616161; border-left: 2px solid #D4D3D0; padding: 10px; padding-left: 45px; position: relative; }

blockquote p { margin: 0; }

blockquote p + p { margin-top: 10px; }

blockquote:before { content: "❝"; color: #D4D3D0; font-size: 40px; position: absolute; left: 15px; top: 0px; }

blockquote ul { margin: 10px 0; padding-left: 15px; }

pre { display: block; background-color: #616161; color: white; padding: 15px; margin: 15px 0; white-space: pre-wrap; }

pre code { color: white; }

p.center { text-align: center; }

p.center img { margin: 10px auto; /* Caption */ }

p.center img + strong { display: block; font-size: 0.9em; }

p.small img { max-width: 600px; }

kbd { border-radius: 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #fff inset; background: #303030; border: 1px solid #A9A9A9; color: white; display: inline-block; font-size: 0.8em; line-height: 1.4; margin: 0 0.1em; padding: 0.1em 0.5em; }

/* Table of Contents */
.toc { background: #616161; border: 1px solid #D4D3D0; display: inline-block; padding: 0.5em; margin: 0 0 1em; /* Position anchors a bit lower so the header doesn't overlay */ }

.toc ul { margin: 0; }

.toc ~ h1, .toc ~ h2, .toc ~ h3, .toc ~ h4, .toc ~ h5 { margin-top: -70px; padding-top: 70px; }

.toc ~ h1:target, .toc ~ h2:target, .toc ~ h3:target, .toc ~ h4:target, .toc ~ h5:target { animation: flash-text 3s ease-out; }

@keyframes flash-text { from { color: #87A556; } }

.site-header { background: #87A556; position: fixed; top: 0; left: 0; right: 0; height: 60px; width: 100%; padding: 5px 0; font-size: 14px; box-shadow: 0px 0px 10px #9fb876; z-index: 100; }

#site-header-block { height: 60px; padding: 5px 0; margin-bottom: 15px; }

.nav { display: flex; flex-direction: row; list-style: none; padding: 0; margin: 0; }

.nav-logo { display: block; width: 48px; height: 48px; overflow: hidden; margin-right: 10px; }

.nav-logo:hover img { transition: transform 0.3s ease-in-out; transform: rotate(120deg); }

.nav-logo:focus { outline: 2px solid #abc087; }

.nav-logo img { height: 48px; width: 48px; }

.primary-nav { display: flex; flex-direction: row; list-style: none; padding: 0; }

.nav-push-right { margin-left: auto; }

.nav-btn { display: block; color: white; cursor: pointer; padding: 15px; position: relative; }

.nav-btn.active { background: #93af66; }

.nav-btn:hover, .nav-btn:focus { background: #9fb876; color: white; text-decoration: none; }

.nav-btn:hover svg path, .nav-btn:focus svg path { fill: white; }

.nav-btn:active { background: #abc087; outline-color: #abc087; }

.nav-btn svg { height: 20px; width: auto; }

.nav-btn svg path { fill: white; }

/* Language Picker */
.nav-i18n { display: block; color: white; padding: 15px; }

#i18n-chooser-mobile img, #i18n-chooser-mobile svg, .nav-i18n-btn img, .nav-i18n-btn svg { display: inline-block; vertical-align: middle; }

#i18n-chooser-mobile img, .nav-i18n-btn img { height: auto; width: 16px; }

#i18n-chooser-mobile svg, .nav-i18n-btn svg { height: 10px; width: auto; }

#i18n-chooser-mobile { text-transform: uppercase; }

#i18n-chooser:checked ~ ul .i18n-dropdown { display: flex; }

#i18n-chooser:checked ~ ul .i18n-btn, #i18n-chooser:checked ~ ul #i18n-chooser-mobile { background: #222222; color: white; padding-bottom: 20px; }

#i18n-chooser:checked ~ ul .i18n-btn svg path, #i18n-chooser:checked ~ ul #i18n-chooser-mobile svg path { fill: white; }

.i18n-dropdown { display: none; background: #222222; border: 1px solid #383838; box-shadow: 0 12px 12px rgba(0, 0, 0, 0.15); position: absolute; top: 56px; right: 15px; margin: auto; list-style: none; padding: 0; flex-wrap: wrap; flex-direction: column; }

.i18n-dropdown li { width: 150px; max-width: 90vw; }

.i18n-dropdown li .nav-btn { color: white; }

.i18n-dropdown li .nav-btn.checked { background: #93af66; color: white; }

.i18n-dropdown li .nav-btn.checked svg path { fill: white; }

.i18n-dropdown li .nav-btn.checked::after { content: " "; background: white; border-radius: 50%; position: absolute; height: 10px; width: 10px; top: 20px; right: 20px; font-size: 20px; line-height: 20px; }

.i18n-dropdown li .nav-btn:hover, .i18n-dropdown li .nav-btn:focus { background: #9fb876; color: white; text-decoration: none; }

.i18n-dropdown li .nav-btn:hover svg path, .i18n-dropdown li .nav-btn:focus svg path { fill: white; }

/* Mobile only */
.mobile-only { display: none; }

@media screen and (max-width: 1199px) { .site-header > .container { max-width: none; } }

@media screen and (min-width: 866px) and (max-width: 1060px) { .nav-btn { padding: 10px 0.75vw; margin: 5px 0; } .i18n-dropdown { right: 15px; } .i18n-dropdown li a { margin: 0; } .i18n-btn { display: none; } #i18n-chooser-mobile { display: block; } }

@media screen and (max-width: 865px) { .mobile-only { display: block; } .mobile-only-toggle { display: block; } .mobile-hidden { display: none; } .primary-nav { display: none; background: #222222; border: 1px solid #383838; box-shadow: 0 12px 12px rgba(0, 0, 0, 0.15); position: fixed; top: 60px; left: 15px; right: 15px; margin: auto; flex-wrap: wrap; } .primary-nav li { position: relative; width: 50%; } .primary-nav li a { color: white; } .primary-nav li a.active { color: white; } .primary-nav li a.active::after { content: " "; position: absolute; background: white; border-radius: 50%; height: 10px; width: 10px; top: 20px; right: 20px; font-size: 20px; line-height: 20px; } #primary-mobile-only-toggle:checked ~ .primary-nav { display: flex; } #primary-mobile-only-toggle:checked ~ li #primary-nav-mobile { background: #222222; padding-bottom: 20px; } #primary-mobile-only-toggle:checked ~ li #primary-nav-mobile svg path { fill: white; } /* Show full language text, not shortened locale code */ #i18n-chooser-mobile { display: none; } .i18n-btn { display: block; } }

.site-footer { background: #3C3B37; color: white; font-size: 14px; padding: 15px 0; }

.site-footer a { cursor: pointer; color: #DED9CB; }

.site-footer p { margin: 5px 0; }

.site-footer p.dim, .site-footer p.dim a { color: #999999; }

.site-footer .site-chooser-wrapper { display: block; margin-top: 10px; }

.site-footer .site-chooser { display: inline-block; padding: 10px; }

.site-footer .site-chooser.active { background: #494843; }

.site-footer .site-chooser:hover, .site-footer .site-chooser:focus { background: #57554f; text-decoration: none; }

.site-footer .site-chooser:active { background: #64625c; }

.footer-links a { display: inline-flex; padding: 2px 10px; text-decoration: none; /* External links */ }

.footer-links a:hover span, .footer-links a:focus span { text-decoration: underline; }

.footer-links a + a { border-left: 1px solid #DED9CB; }

.footer-links a svg { height: 12px; width: auto; margin: auto 5px; }

.footer-links a svg:first-child { margin-left: 0; }

.footer-links a svg:last-child { margin-right: 0; }

.footer-links a svg path { fill: #DED9CB; }

.footer-links a.link-with-icon svg { height: 16px; }

.social-links { margin: 10px 0; }

.social-links a { background: #21211f; display: inline-block; padding: 1px; margin: 0 2px; }

.social-links a svg { height: 30px; width: 30px; }

.social-links a svg path { fill: #DED9CB; }

.social-links a:hover, .social-links a:focus { background: #494843; }

.social-links a:hover svg path, .social-links a:focus svg path { fill: #DED9CB; }

.social-links a:active { background: #64625c; }

@media screen and (max-width: 991px) { .site-footer .container { max-width: none; } .site-footer .container .text-right { margin-top: 5px; text-align: center; } .site-footer .container .site-chooser-wrapper { margin-top: 15px; text-align: center; } }

table { margin: 15px 0; width: 100%; }

tr { font-size: 0.9em; border-bottom: 1px solid #C9C6C3; background-color: #323232; }

tr:first-child, tr:nth-child(2n+3) { background-color: #222222; }

th { width: 8em; text-align: left; }

th, td { border-spacing: 0; border-collapse: collapse; padding: 8px; }

th code, td code { color: unset; font-size: 16px; word-wrap: anywhere; }

/* Table classes */
.split-long-lines { word-wrap: anywhere; }

table.transparent tr { background: transparent !important; border: none; }

table.icons { text-align: center; }

table.icons th { text-align: center; }

table.icons svg, table.icons img { max-height: 200px; max-width: 200px; }

table.icons td { padding-top: 0; padding-bottom: 0; }

@media (max-width: 575px) { table.icons svg, table.icons img { max-height: 30vh; max-width: 30vw; } }

/* Used for Raspberry Pi Compatibility table */
.table-yes-no svg { margin: auto; height: 20px; width: 20px; }

.table-yes-no .yes, .table-yes-no .no, .table-yes-no .partial { text-align: center; }

.table-yes-no .yes { background-color: #005810; }

.table-yes-no .yes svg path { fill: #00be23; }

.table-yes-no .partial { background-color: #FECF1E; }

.table-yes-no .partial svg path { fill: #000; }

.table-yes-no .no { background-color: #C03831; }

.table-yes-no .no svg path { fill: #fff; }

/************************ Buttons */
button, .btn { background: linear-gradient(black, #262626); border: 1px solid #A9A9A9; color: white; cursor: pointer; border-radius: 8px; padding: 6px 12px; text-decoration: none; }

button:focus, button:hover, button:active, .btn:focus, .btn:hover, .btn:active { border: 1px solid #D4D3D0; color: white; outline: 0; text-decoration: none; }

button:focus svg path, button:hover svg path, button:active svg path, .btn:focus svg path, .btn:hover svg path, .btn:active svg path { fill: white; }

button:active, .btn:active { background: linear-gradient(#262626, #0F0F0F); }

button img, .btn img { float: left; width: 16px; height: 16px; margin-right: 4px; }

button svg path, .btn svg path { fill: white; }

a.btn { /* Slightly more padding for anchors that look like buttons */ padding: 8px 12px; }

/* Alternate button themes */
button.inverted, .btn.inverted, button.green, .btn.green, button.yellow, .btn.yellow, button.red, .btn.red { border-color: transparent; color: white; }

button.inverted svg path, .btn.inverted svg path, button.green svg path, .btn.green svg path, button.yellow svg path, .btn.yellow svg path, button.red svg path, .btn.red svg path { fill: white; }

button.inverted:focus, button.inverted:hover, .btn.inverted:focus, .btn.inverted:hover, button.green:focus, button.green:hover, .btn.green:focus, .btn.green:hover, button.yellow:focus, button.yellow:hover, .btn.yellow:focus, .btn.yellow:hover, button.red:focus, button.red:hover, .btn.red:focus, .btn.red:hover { fill: white; }

button.inverted:active, .btn.inverted:active, button.green:active, .btn.green:active, button.yellow:active, .btn.yellow:active, button.red:active, .btn.red:active { color: white; }

/* Button Theme - Header/Footer */
button.inverted, .btn.inverted { background: linear-gradient(#585858, #3C3B37); }

button.inverted:active, .btn.inverted:active { background: linear-gradient(#3C3B37, #585858); }

/* Button Theme - Green */
button.green, .btn.green { background: linear-gradient(#87A556, #6F8647); }

button.green:active, .btn.green:active { background: linear-gradient(#6F8647, #87A556); }

/* Button Theme - Yellow */
button.yellow, .btn.yellow { background: linear-gradient(#FBB24C, #F8970D); }

button.yellow:active, .btn.yellow:active { background: linear-gradient(#F8970D, #FBB24C); }

/* Button Theme - Red */
button.red, .btn.red { background: linear-gradient(#ED5E5A, #C03831); }

button.red:active, .btn.red:active { background: linear-gradient(#C03831, #ED5E5A); }

/* Button Theme - Dropdown */
button.dropdown { color: #DED9CB; }

button.dropdown:hover { color: white; }

/* Components */
.grid-container { margin: 15px 0; }

.grid-item { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid #D4D3D0; outline-color: #87A556; color: white; width: 100%; min-height: 175px; vertical-align: top; padding: 15px 30px; margin: 15px 0; text-align: left; transition-property: fill, color, border-color, background; transition-duration: 0.3s; transition-timing-function: ease-in-out; }

.grid-item h4, .grid-item p { margin-bottom: 5px; }

.grid-item:hover, .grid-item:focus { border-color: #87A556; text-decoration: none; }

.grid-item:hover svg path, .grid-item:focus svg path { fill: #87A556; }

.grid-item:active { background: #87A556; color: white; transition: none; }

.grid-item:active img { filter: brightness(5); }

.grid-item:active svg path { fill: white; transition: none; }

.grid-item:active h4, .grid-item:active p { color: white; }

.grid-icon { margin-right: 15px; }

.grid-icon img, .grid-icon svg { height: auto; width: 64px; }

.grid-icon svg path { fill: #A9A9A9; transition: fill 0.3s ease-in-out; }

.grid-details { width: 100%; }

.col.sidebar { position: relative; max-width: 320px; padding: 15px; padding-right: 0; margin-right: 20px; }

@media screen and (min-width: 767px) { .sidebar-wrapper { position: sticky; top: 90px; } }

.sidebar-border { content: " "; position: absolute; border-right: 1px solid #D4D3D0; top: 0; bottom: 0; right: 0; }

.sidebar-title, .sidebar-link { overflow: hidden; white-space: nowrap; }

.sidebar-title { font-size: 16px; font-weight: 500; padding: 5px 0; }

.sidebar-link { cursor: pointer; display: flex; padding: 5px 0; border-bottom: 1px solid #D4D3D0; padding-left: 10px; font-size: 15px; }

.sidebar-link img { height: 24px; width: auto; }

.sidebar-link span { margin: 0 5px; }

.sidebar-link:hover, .sidebar-link:focus { background: #cedbb9; color: white; text-decoration: none; }

.sidebar-link:hover svg path, .sidebar-link:focus svg path { fill: white; }

.sidebar-link:active { background: #abc087; color: white; outline-color: #abc087; transition: none; }

.sidebar-link:active span { color: white; transition: none; }

.sidebar-link.active { background-color: #93af66; }

.sidebar-link.active span { color: white; }

.sidebar-link + .sidebar-title { padding-top: 30px; }

.sidebar-toggle { cursor: pointer; position: absolute; top: 0; bottom: 0; right: -25px; height: 20px; width: 20px; margin: auto; z-index: 1; }

.sidebar-toggle svg { height: 20px; width: 20px; }

.sidebar-toggle svg path { fill: #A9A9A9; }

.sidebar-toggle:hover ~ .sidebar-border { border-color: #87A556 !important; }

.sidebar-toggle:hover svg path { fill: #87A556; }

/****************************************
/* Collapse to maximize screen estate
****************************************/
.sidebar { transition: max-width 0.3s ease-in-out; max-width: 300px; }

.sidebar-title, .sidebar-link { transition: opacity 0.3s ease-in-out; opacity: 1; }

.sidebar-toggle svg { transition: transform 0.3s ease-in-out; transform: rotate(0deg); }

.sidebar-border { transition: border-color 0.3s ease-in-out; }

#sidebar-collapsed:checked ~ .sidebar { max-width: 0px; }

#sidebar-collapsed:checked ~ .sidebar .sidebar-title, #sidebar-collapsed:checked ~ .sidebar .sidebar-link { opacity: 0; }

#sidebar-collapsed:checked ~ .sidebar .sidebar-toggle svg { transform: rotate(180deg); }

#sidebar-collapsed:checked ~ .sidebar .sidebar-border { border-color: #D4D3D0; }

#sidebar-invisible { display: none; }

/****************************************
/* Floating collapsable sidebar on mobile/small screens
****************************************/
@media (max-width: 767px) { .sidebar-container { /* Simulate .no-gutters */ margin: 0; /****/ } .sidebar-container .col { padding-left: 0; padding-right: 0; } .sidebar-container .page-header { padding-left: 45px; } .col.sidebar { position: fixed; top: 60px; height: calc(100vh - 60px); background: #303030; z-index: 1; border: 1px solid #D4D3D0; overflow: auto; padding-bottom: 60px; } .sidebar-wrapper { position: relative; top: unset; padding-left: 30px; height: calc(100vh - 60px); } .sidebar-toggle { top: 0; left: 5px; bottom: 0; right: unset; } .sidebar-toggle svg path { fill: #D4D3D0; } .page-content.page-has-sidebar { margin-left: 45px; margin-right: 30px; } #sidebar-collapsed:checked ~ .sidebar { max-width: 30px; overflow: hidden; } #sidebar-collapsed:not(:checked) ~ #sidebar-invisible { display: block; } #sidebar-collapsed:checked ~ #sidebar-invisible { display: none; } /* Allows user to click off the sidebar to close */ #sidebar-invisible { display: block; background: rgba(0, 0, 0, 0.1); position: fixed; left: 0; top: 60px; right: 0; bottom: -20px; } }

/* Prevent sidebar stickiness when scrolling down */
@media (max-height: 767px) { .sidebar-wrapper { position: relative; top: 0; } }

/* Layouts */
.download-title { font-size: 24px; font-weight: normal; text-align: center; }

.download-subtitle { font-size: 20px; font-weight: normal; text-align: center; margin: 15px 0 0; }

.download-back { display: flex; position: absolute; left: 0; top: 0; bottom: 0; margin-left: 30px; transition: transform 0.3s ease-in-out; }

.download-back svg { height: 48px; width: 48px; margin: auto; }

.download-back svg path { fill: #A9A9A9; transition: fill 0.3s ease-in-out; }

.download-back:hover, .download-back:focus { outline: none; transform: translateX(-5px); }

.download-back:hover svg path, .download-back:focus svg path { fill: #D4D3D0; }

/* Progress Indicators */
.progress-indicator { cursor: default; display: block; text-align: center; flex-direction: column; }

.progress-indicator .dot { background: #222222; border: 1px solid #D4D3D0; border-radius: 50%; display: inline-block; position: relative; height: 20px; width: 20px; margin: 0 5px; }

.progress-indicator .dot::before { content: ""; position: absolute; top: 0; bottom: 0; left: -15px; right: -15px; margin: auto; border-bottom: 1px solid #D4D3D0; height: 1px; z-index: -1; }

.progress-indicator .dot:first-child::before { left: 0; }

.progress-indicator .dot:last-child::before { right: 0; }

.progress-indicator .dot.active { border-color: #87A556; background: #87A556; }

.progress-indicator .dot.current { animation: current-dot 1s ease-in-out infinite; }

@keyframes current-dot { 0% { background: #87A556;
    border-color: #87A556; }
  50% { background: #87A556;
    border-color: #87A556; }
  100% { background: #87A556;
    border-color: #87A556; } }

/* Download Grid */
.grey-text { color: #D4D3D0; font-weight: 400; }

.prerelease { color: #C03831; }

.arch-links-box { display: flex; flex-direction: column; }

.arch-links-box a { display: inline-block; margin: 15px 0; margin-right: auto; }

.arch-links-box a:first-child { margin-top: auto; }

.arch-links-box a:last-child { margin-bottom: auto; }

/* Download Details */
.download-details { display: flex; padding: 0px 15px; width: 760px; margin: 15px auto; }

.download-details th { text-align: right; width: 200px; max-width: 100%; }

/* Download Table */
.download-all-table { table-layout: fixed; margin: 0; margin-bottom: 50px; }

.download-all-table .server img { height: 24px; width: 24px; }

@media screen and (max-width: 991px) { .download-all-table .server span { display: none; } }

.download-table-btn svg { height: 24px; width: 24px; }

.download-table-btn svg path { fill: #87A556; }

.download-table-btn:hover svg path, .download-table-btn:focus svg path { fill: #87A556; }

.download-table-btn + .download-table-btn { margin-left: 5px; }

/* Download Thank You Page */
.download-thanks { border-top: 1px solid #A9A9A9; margin: 30px 0; padding-top: 30px; }

.download-thanks:first-child { border: none; margin-top: 0; }

.download-thanks div > img { max-width: 100%; }

.download-thanks .btn + .btn { margin: 0 5px; }

#post-download-link .retry { font-size: 0.9em; }

.choose-alt-download svg { height: 20px; width: 20px; }

@media (max-width: 991px) { .download-details { width: calc(100% - 30px); } }

@media (max-width: 767px) { .download-thanks div > img { margin: auto; } .download-details tbody { width: 100%; } .download-details tr { display: flex; flex-direction: column; text-align: center; } .download-details th { text-align: center; width: unset; padding: 10px 0 0; } }

@media (max-width: 575px) { .download-thanks div > img { margin: auto; max-width: 30vw; } .grid-item { flex-direction: column; text-align: center; } .grid-icon { margin: 0; } .grid-details { margin-top: 15px; } }

/* Common across blog pages */
.blog-column { margin-bottom: 60px; }

@media screen and (max-width: 991px) { #blog-sidebar { display: none; } }

@media screen and (min-width: 992px) { .blog-left-border { border-left: 1px solid #A9A9A9; } .blog-left-border .date { display: block; color: #D4D3D0; } }

.latest-feed { float: right; }

.latest-feed svg { height: 24px; width: 24px; }

.latest-feed svg path { fill: #E19424; }

.twitter-timeline { width: 100% !important; }

.twitter-timeline > svg { height: 20px; width: 20px; vertical-align: middle; }

/* Index specific */
.post-card { display: block; padding: 15px; width: 100%; margin: 15px 0; box-shadow: 0 0 5px #A9A9A9; transition: box-shadow 0.3s ease-in-out; }

.post-card:hover, .post-card:focus { text-decoration: none; box-shadow: 0 0 10px #D4D3D0; }

.post-card.old { display: none; }

#show-old-posts { display: block; cursor: pointer; color: #758A53; text-align: center; }

#show-old-posts:hover, #show-old-posts:focus { color: #44522E; }

.post-card-excerpt { color: #D4D3D0; font-style: italic; }

.post-card-read-more { margin-top: 10px; }

.blog-archive ul { margin-bottom: 0; }

/* Metadata - used on both index and post page */
.blog-metadata { color: #D4D3D0; margin: 10px 0; font-size: 14px; }

.blog-metadata span { border-right: 1px solid #A9A9A9; padding-right: 5px; }

.blog-metadata span + span { margin-left: 5px; }

.blog-metadata span:last-child { border-right: none; }

.post-category { /* Unknown category class */ color: #EDEDED; }

.post-category svg { height: 16px; width: 16px; margin-right: 0px; position: relative; top: -1px; }

.post-category svg path { fill: #D4D3D0; }

.post-category.release { color: #87A556; }

.post-category.release svg path { fill: #87A556; }

.post-category.dev { color: #C03831; }

.post-category.dev svg path { fill: #C03831; }

/* Post page specific */
.post-outdated { background: #FEFECD; color: #000; padding: 15px; margin: 15px 0; }

.post-outdated svg { height: 16px; width: 16px; margin-right: 5px; }

/* Partials */
.jumbotron { background-color: #616161; background-image: url(/images/ubuntu-mate/logo-white.svg); background-size: 200px; background-position: bottom -70px right -70px; background-repeat: no-repeat; border: 2px solid #A9A9A9; padding: 30px; margin: 15px 0; width: 100%; }

.alert { display: block; padding: 15px; margin: 15px 0; /* Default style: Generic */ background-color: #616161; color: #EDEDED; /* Styles */ }

.alert.warning { background-color: #FEFECD; color: #000; }

.alert.error { background-color: #E43E32; color: #FFF; }

.alert svg { height: 20px; width: 20px; vertical-align: middle; }

.alert p { margin: 10px 0; }

.alert p:last-child { margin-bottom: 0; }

.youtube-embed { max-width: 100%; }

.blog-comments { margin: 30px 0; padding: 30px 0; border-top: 1px solid #A9A9A9; }

.blog-comment-empty { padding: 15px 0; }

.feature-grid { display: flex; flex-direction: column; width: 100%; /* Optional / Live Session Info */ }

.feature-grid .key { color: #EDEDED; margin: 30px 0; }

.feature-grid .key p { margin: 0; }

.feature-grid .key-hover { color: #EDEDED; cursor: help; }

.feature-vendor { display: flex; flex-direction: row; position: relative; padding: 15px 0; padding-bottom: 10px; }

.feature-vendor::after, .feature-vendor:first-child::before { display: block; content: " "; background: linear-gradient(to right, transparent, #87A556, transparent); position: absolute; bottom: -5px; height: 5px; width: 100%; }

.feature-vendor:first-child::before { top: -5px; bottom: initial; }

.vendor-details { width: 33%; }

.vendor-details > img { height: 64px; width: auto; }

.vendor-features { display: flex; flex-wrap: wrap; width: 66%; }

.vendor-features .feature { display: inline-flex; flex-direction: column; align-content: center; justify-content: center; text-align: center; width: 33%; min-height: 120px; transition: background 0.3s ease-in-out; }

.vendor-features .feature img { display: block; height: 64px; width: auto; margin-left: auto; margin-right: auto; }

.vendor-features .feature > span { display: block; font-size: 18px; padding: 5px 10px; width: 100%; /* External link SVG */ }

.vendor-features .feature > span svg { height: 12px; width: 12px; margin-left: 5px; }

.vendor-features .feature > span svg path { fill: #87A556; }

.vendor-features .feature code { font-size: 20px; }

.vendor-features .feature:hover, .vendor-features .feature:focus { background-color: rgba(84, 84, 84, 0.5); }

.vendor-features .feature:hover span svg path, .vendor-features .feature:focus span svg path { fill: #87A556; }

.vendor-features .feature *:first-child { margin-top: auto; }

.vendor-features .feature *:last-child { margin-bottom: auto; }

.vendor-features .feature:nth-child(odd) { background-color: rgba(97, 97, 97, 0.5); }

.vendor-features .feature:nth-child(even) { background-color: rgba(97, 97, 97, 0.25); }

.vendor-features .feature.filtered { opacity: 0.1; }

.feature-page .content { margin: 20px 0; }

.feature-filters { background: #222222; position: sticky; top: 235px; padding: 10px 0 0px; z-index: 50; box-shadow: 0px 2px 5px #222222; }

.feature-filters label + label { margin: 0 15px; }

.feature-filters select { margin: 0 5px; }

.feature-filters select:disabled { opacity: 0.25; }

.feature-filters select, .feature-filters input { vertical-align: middle; }

@media screen and (max-width: 991px), (max-height: 767px) { .feature-filters { top: 158px; } }

@media screen and (max-width: 991px), (max-height: 575px) { .feature-filters { position: static; margin: 15px 0; } }

@media screen and (max-width: 991px) { .feature-vendor { flex-direction: column; } .vendor-details { display: flex; flex-direction: row-reverse; justify-content: left; align-items: center; width: 100%; } .vendor-details h4 { margin: 0; margin-left: 5px; } .vendor-features { margin: 10px 0; width: 100%; } .vendor-features .feature { width: 25%; } }

@media screen and (max-width: 767px) { .vendor-features .feature { width: 33%; } .feature-filters { display: flex; font-size: 0.8em; } .feature-filters select { margin: 0; } }

@media screen and (max-width: 575px) { .vendor-features .feature { width: 50%; background-color: rgba(97, 97, 97, 0.5); } }

/************************ Highlights - Feature Pages */
.feature-highlight { display: flex; flex-direction: row; margin: 30px 0 60px; }

.feature-highlight.reverse { flex-direction: row-reverse; }

.feature-highlight.reverse .highlight-text { text-align: right; }

.feature-highlight picture { margin: auto; }

.feature-highlight .highlight-picture img { max-width: 100%; box-shadow: 0px 5px 15px 5px #4A4A4A; margin: auto; }

.feature-highlight .highlight-text { margin-top: 50px; }

.feature-highlight .highlight-text h1 { font-size: 30px; font-weight: 300; }

.feature-highlight .highlight-text h3 { font-size: 20px; font-weight: 400; margin: 30px 0; }

.feature-highlight .highlight-text p { font-size: 18px; font-weight: 400; margin: 30px 0; }

.feature-mini { display: flex; flex-direction: row; text-align: center; margin: 30px 0; }

.feature-mini .feature { flex: 1 0 33%; position: relative; }

.feature-mini img { margin: auto; max-width: calc(100% - 30px); box-shadow: 5px 5px 5px #4A4A4A; }

.feature-mini .hover { opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; position: absolute; left: 15px; }

.feature-mini img:not(.hover):hover + .hover, .feature-mini .hover:hover { opacity: 1; visibility: visible; }

.feature-mini h3 { font-size: 24px; font-weight: 300; margin: 10px 0; }

.feature-mini p { font-size: 18px; margin: 10px auto; max-width: calc(100% - 30px); }

@media screen and (max-width: 767px) { .feature-highlight, .feature-highlight.reverse { flex-direction: row; flex-wrap: wrap; margin: 30px 0; } .feature-highlight .highlight-text, .feature-highlight.reverse .highlight-text { margin-top: 15px; text-align: center; } .feature-highlight .highlight-text h3, .feature-highlight .highlight-text p, .feature-highlight.reverse .highlight-text h3, .feature-highlight.reverse .highlight-text p { margin: 15px 0; } .feature-mini { flex-direction: column; margin-top: 0; } .feature-mini .feature { margin-top: 30px; } .feature-mini .feature:first-child { margin-top: 0; } }

.catalogue-group { margin-top: 15px; }

.catalogue-group + .catalogue-group { margin-top: 30px; }

.catalogue-item { border-top: 1px solid #A9A9A9; margin-top: 15px; padding: 15px 0; }

.catalogue-item .product-price { color: #87A556; }

.catalogue-item .product-image, .catalogue-item .product-image img { max-height: 300px; max-width: 300px; }

.catalogue-item .product-image { display: flex; }

.catalogue-item .product-image img { margin: auto; }

.catalogue-item .product-description { padding: 15px; }

.catalogue-item .product-description h3 { margin: 0; }

@media (max-width: 767px) { .catalogue-group { text-align: center; } .catalogue-item .product-image { margin: 0 auto; } }

.team-members { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

.team-members .member { display: flex; flex-direction: column; width: 200px; margin-bottom: 20px; }

.member-name { text-align: center; margin: 10px 0 0; }

.member-desc { font-size: 0.8em; text-align: center; opacity: 0.5; }

.member-avatar, .member > a { border-radius: 50%; height: 150px; width: 150px; margin: 0px auto; object-fit: cover; }

.member-roles { text-align: center; margin: 5px auto; }

.member-roles img { cursor: help; height: 24px; width: 24px; margin: 0 2px; }

.member.compact { padding: 15px; margin: 2px; }

.member.compact:nth-child(odd) { background-color: rgba(97, 97, 97, 0.5); }

.member.compact:nth-child(even) { background-color: rgba(97, 97, 97, 0.25); }

@media (max-width: 767px) { .member-avatar, .member > a { height: 75px; width: 75px; } .team-members .member { width: 33%; } }

@media (max-width: 575px) { .team-members .member { width: 50%; } }

.milestone-timeline { display: flex; flex-direction: row; }

.milestone-sidebar { width: 200px; background: url(/images/history/motif.jpg) repeat -250px 0px; min-height: 200px; background-size: 480px; }

.milestone-article { padding: 15px 0 15px 30px; width: calc(100% - 200px); }

.milestone-article h2 { position: absolute; left: 30px; margin-top: 15px; font-size: 1.25em; color: #A9A9A9; }

.milestone-article h2:first-child { margin-top: 30px; }

.milestone-article h3 { margin-top: 30px; }

.milestone-image { float: right; margin-left: auto; max-height: 250px; max-width: 250px; }

@media (max-width: 767px) { .milestone-sidebar { display: none; } .milestone-article { width: 100%; padding: 0; } .milestone-article h2 { position: static; left: unset; margin-top: 30px; position: static; background: url(/images/history/motif.jpg) repeat 0px 100px; background-size: 500px; padding: 10px 15px; margin: 30px -15px 15px; } .milestone-article h2:first-child { margin-top: 0; } .milestone-article h3 { margin-top: 10px; } }

@media (max-width: 575px) { .milestone-image { float: none; text-align: center; margin: 15px auto; } }

.testimonial-quotes { display: flex; flex-direction: column; margin-bottom: 30px; }

.testimonial-quote { display: flex; flex-direction: row; width: 800px; max-width: 100%; margin: 15px auto; }

.testimonial-quote .quote-block { width: calc(100% - 120px - 50px); }

.testimonial-quote .avatar { border-radius: 50%; display: inline-block; margin: auto; margin-right: 30px; vertical-align: middle; height: 120px; width: 120px; }

.testimonial-quote .quote { background: #616161; border: 2px solid #A9A9A9; border-radius: 10px; margin: 5px; display: inline-block; position: relative; vertical-align: top; width: 100%; }

.testimonial-quote .quote svg { position: absolute; height: 40px; width: 40px; left: -32px; top: 0; bottom: 0; margin: auto; transform: rotate(180deg); }

.testimonial-quote .quote svg path { stroke: #A9A9A9; stroke-width: 4px; fill: #616161; stroke-dasharray: 0, 110, 50; }

.testimonial-quote .author { display: block; font-size: 0.8em; opacity: 0.5; text-align: right; }

.testimonial-videos { display: flex; flex-direction: row; flex-wrap: wrap; }

.testimonial-video { padding: 15px; width: 33%; }

.testimonial-video .video { height: 250px; width: 100%; margin: 0; }

.testimonial-video .subject { display: block; opacity: 0.5; margin: 0 0 15px; font-style: italic; font-size: 0.9em; }

.testimonial-video .author { margin: 10px 0 5px; }

.testimonial-video .quote { width: 100%; }

@media (max-width: 767px) { .testimonial-quote { flex-direction: column; } .testimonial-quote .avatar { margin: auto; } .testimonial-quote .quote-block { width: 100%; } .testimonial-quote .quote-block svg { display: none; } .testimonial-video { width: 100%; } }

#results-container { margin: 15px 0; padding: 0; }

#results-container li { list-style: none; margin: 0; }

#results-container li a { padding-left: 20px; background: url("/images/Ambiant-MATE/text-x-generic.svg") no-repeat 0px center; }

.app-directory .name { font-weight: 600; min-width: 30%; }

.app-directory img { max-height: 24px; max-width: 24px; vertical-align: middle; }

.app-directory span { vertical-align: middle; }

.no-url { color: #A9A9A9; }

.page-has-sidebar hr { margin: 30px 0; }

/* Partials (Includes) */
.banner { background-color: #A9A9A9; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 30px 0; width: 100%; /* Variants */ }

.banner.large { min-height: 640px; }

.banner.white-text { color: white; }

.banner-inner { margin: auto; }

.banner-image { display: block; height: auto; width: 100%; max-width: 300px; margin-left: auto; padding: 15px; vertical-align: middle; }

.banner-text { display: inline-block; font-size: 24px; max-width: 767px; margin: auto; vertical-align: middle; }

.banner-text h1, .banner-text h2, .banner-text h3 { font-weight: 400; }

.banner-text p { font-weight: 300; }

.banner-text a { display: inline-block; color: white; font-size: 0.8em; padding: 6px 16px; }

/* Pages utilising a banner at the top, like the home page */
.page.has-banner .banner { margin-top: -15px; }

@media (max-width: 991px) { .banner-inner img { max-width: 250px; } .banner-image { padding: 0; } .banner-text { font-size: 20px; padding-right: 15px; } }

@media (max-width: 767px) { .banner { padding: 15px 0; text-align: center; } .banner-inner img { margin: auto; } .banner-text { display: block; padding: 0 15px; } }

.categories { display: flex; padding: 0; margin-bottom: 30px; flex-direction: row; align-content: center; justify-content: center; position: sticky; top: 60px; background: #222222; box-shadow: 0px 10px 20px #222222; z-index: 10; }

.category-item { display: inline-flex; flex-direction: column; align-content: center; border-bottom: 2px solid transparent; border-radius: 2px; position: relative; text-align: center; padding: 15px; width: 175px; transition: background-color 0.3s ease-in-out; outline: none; }

.category-item::after { content: " "; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; border-bottom: 1px solid #D4D3D0; width: 50px; transition: width 0.3s ease-in-out, border-bottom-color 0.3s ease-in-out; }

.category-item:hover, .category-item:focus { background-color: rgba(97, 97, 97, 0.5); }

.category-item:active { background-color: #616161; }

.category-item:active::after { border-bottom-color: #EDEDED; }

.category-item:hover, .category-item:focus, .category-item.active { text-decoration: none; }

.category-item:hover .category-name, .category-item:focus .category-name, .category-item.active .category-name { color: #87A556; }

.category-item:hover::after, .category-item:focus::after, .category-item.active::after { width: 150px; }

.category-item.active .category-name { color: #87A556; }

.category-item.active::after { color: #87A556; border-width: 2px; border-bottom-color: #87A556; }

.category-icon { height: 100%; width: auto; height: 80px; max-width: 80px; margin: auto; object-fit: cover; }

.category-name { color: #EDEDED; font-size: 18px; margin: auto; margin-top: 10px; transition: color 0.3s ease-in-out; }

@media screen and (max-width: 991px), (max-height: 767px) { .category-item { padding: 5px; padding-bottom: 15px; margin-top: 10px; width: auto; flex: 1 0 0; } .category-item:hover::after, .category-item:focus::after, .category-item.active::after { width: 100%; } .category-icon { max-height: 40px; max-width: 40px; } .category-name { font-size: 16px; line-height: 1; } }

@media screen and (max-width: 991px), (max-height: 575px) { .categories { flex-wrap: wrap; position: static; top: 0; } }

@media (max-width: 575px) { .category-item { flex: 1 0 33%; } }

/* Galleries ("Carousels") are powered by Slick.js */
/* Outer */
.gallery { position: relative; display: flex; flex-wrap: wrap; max-width: 720px; margin: 30px auto; }

.gallery button { font-size: 0; padding: 0; height: 15px; width: 30px; }

.gallery button.slick-prev, .gallery button.slick-next { position: absolute; top: 0; bottom: 70px; font-size: 16px; margin: auto; height: 35px; width: 35px; z-index: 1; }

.slick-list { cursor: grab; box-shadow: 0px 0px 5px; }

.slick-list:active { cursor: grabbing; }

.slick-arrow { display: block; }

.slick-prev { order: 2; left: -50px; }

.slick-next { order: 4; right: -50px; }

.slick-dots { display: flex; order: 3; flex-wrap: wrap; list-style: none; padding: 0; margin: 15px auto; }

.slick-dots button { border: none; background: rgba(97, 97, 97, 0.5); margin: 0 2px; }

.slick-active > button { background: #87A556; color: white; }

.slick-active > button:hover, .slick-active > button:focus, .slick-active > button:active { color: white; }

@media (max-width: 767px) { .slick-prev { left: 0; min-width: 0; } .slick-next { right: 0; min-width: 0; } }

/* Inner */
.gallery-caption { font-size: 15px; text-align: center; padding: 15px 0; }

#PayPal { margin: 15px 0; }

#PayPal .well { background: #616161; border-radius: 10px; padding: 30px; }

#PayPal .form-group { display: flex; flex-direction: row; }

#PayPal label { display: block; margin: 4px 0; }

#PayPal label input[type=radio] { vertical-align: middke; margin-right: 5px; }

#PayPal button { margin: 10px 0; }

#PayPal var { font-style: normal; }

/* Highlight video as used on the About page */
#highlight-video { min-height: 412px; max-width: 66%; }

#highlight-selection { text-align: center; padding: 5px 0; }

@media (max-width: 991px) { #highlight-video { max-width: 100%; min-height: 256px; } }

@media (max-width: 767px) { #highlight-video { max-width: 100%; min-height: 0; } }

/* Known Issues table */
.known-issues { table-layout: fixed; }

.known-issues thead tr { text-align: center; }

.known-issues .column-problem { min-width: 20vw; }

.known-issues .component-icon { height: 24px; width: 24px; vertical-align: middle; }

.known-issues .issue-no-link { opacity: 0.5; }