@charset "UTF-8";
/* ==========================================================================
   INUITCSS
   ========================================================================== */
/**
 * inuitcss, by @csswizardry
 *
 * github.com/inuitcss | inuitcss.com
 */
/**
 * This is an example inuitcss manifest file. DO NOT MODIFY THIS FILE DIRECTLY.
 * Instead, copy and paste it into your own CSS directory and make additions,
 * extensions, and modifications there.
 */
/**
 * CONTENTS
 *
 * SETTINGS
 * Config...............Project-level configuration and feature switches.
 * Core.................inuitcss’ core and setup settings.
 * Global...............Project-wide variables and settings.
 *
 * TOOLS
 * Font-size............A mixin which guarantees baseline-friendly line-heights.
 * Clearfix.............Micro clearfix mixin.
 * Hidden...............Mixin for hiding elements.
 * Sass MQ..............inuitcss’ default media query manager.
 *
 * GENERIC
 * Box-sizing...........Better default `box-sizing`.
 * Normalize.css........A level playing field using @necolas’ Normalize.css.
 * Reset................A tiny reset to complement Normalize.css.
 * Shared...............Sensibly and tersely share some global commonalities
 *                      (particularly useful when managing vertical rhythm).
 *
 * ELEMENTS
 * Page.................Set up our document’s default `font-size` and
 *                      `line-height`.
 * Headings.............Very minimal (i.e. only font-size information) for
 *                      headings 1 through 6.
 * Images...............Base image styles.
 * Tables...............Simple table styles.
 *
 * OBJECTS
 * Wrapper..............Page constraint object.
 * Layout...............Generic layout module.
 * Media................Image- and text-like content side by side. The
 *                      poster-child of OOCSS.
 * Flag.................Table-layout-based advancement on the Media object.
 * List-bare............Lists with no bullets or indents.
 * List-inline..........A list whose items all site in a line.
 * Box..................Simple boxing abstraction.
 * Block................Image-on-top-of-text object.
 * Ratio................A container for maintaining aspect ratio of content.
 * Crop.................Provide a cropping context for media (images, etc.).
 * Table................Classes for manipulating `table`s.
 * Pack.................Pack items into available horizontal space.
 *
 * COMPONENTS
 * Buttons..............An example button component, and how it fits into the
 *                      inuitcss framework.
 *
 * UTILITIES
 * Clearfix.............Bind our clearfix onto a utility class.
 * Widths...............Simple width helper classes.
 * Headings.............Reassigning our heading styles to helper classes.
 * Spacings.............Nudge bits of the DOM around with these spacing
 *                      classes.
 * Responsive-Spacings..Enhances the function of normal spacings for
 *                      responsive usage.
 * Print................Reset-like styles taken from the HTML5 Boilerplate.
 * Hide.................Helper classes to hide content
 */
/* ==========================================================================
   # Colors
   ========================================================================== */
/**
 *
 */
@font-face {
  font-family: 'Antarctica';
  src: url("../fonts/antarctica-beta-vf.ttf") format("truetype-variations"); }

/* roboto-mono-regular - latin */
@font-face {
  font-family: 'Roboto Mono';
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-mono-v5-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Mono"), local("RobotoMono-Regular"), url("../fonts/roboto-mono-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-mono-v5-latin-regular.woff2") format("woff2"), url("../fonts/roboto-mono-v5-latin-regular.woff") format("woff"), url("../fonts/roboto-mono-v5-latin-regular.ttf") format("truetype"), url("../fonts/roboto-mono-v5-latin-regular.svg#RobotoMono") format("svg");
  /* Legacy iOS */ }

/* roboto-mono-700 - latin */
@font-face {
  font-family: 'Roboto Mono';
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-mono-v5-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Roboto Mono Bold"), local("RobotoMono-Bold"), url("../fonts/roboto-mono-v5-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-mono-v5-latin-700.woff2") format("woff2"), url("../fonts/roboto-mono-v5-latin-700.woff") format("woff"), url("../fonts/roboto-mono-v5-latin-700.ttf") format("truetype"), url("../fonts/roboto-mono-v5-latin-700.svg#RobotoMono") format("svg");
  /* Legacy iOS */ }

/* headland-one-regular - latin */
@font-face {
  font-family: 'Headland One';
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/headland-one-v5-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Headland One"), local("HeadlandOne-Regular"), url("../fonts/headland-one-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/headland-one-v5-latin-regular.woff2") format("woff2"), url("../fonts/headland-one-v5-latin-regular.woff") format("woff"), url("../fonts/headland-one-v5-latin-regular.ttf") format("truetype"), url("../fonts/headland-one-v5-latin-regular.svg#HeadlandOne") format("svg");
  /* Legacy iOS */ }

/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
  box-sizing: border-box; }

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

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block; }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block; }

/**
 * Add the correct display in IE.
 */
template {
  display: none; }

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none; }

/* ==========================================================================
   #RESET
   ========================================================================== */
/**
 * A very simple reset that sits on top of Normalize.css.
 */
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
  margin: 0;
  padding: 0; }

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
  margin-bottom: 0; }

/**
 * Remove default table spacing.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/**
 * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
 *    on fieldsets.
 */
fieldset {
  min-width: 0;
  /* [1] */
  border: 0; }

/* ==========================================================================
   #SHARED
   ========================================================================== */
/**
 * Shared declarations for certain elements.
 */
/**
 * Always declare margins in the same direction:
 * csswizardry.com/2012/06/single-direction-margin-declarations
 */
address,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, ol, ul,
figure,
hr,
table,
fieldset {
  margin-bottom: 32px; }

/**
 * Consistent indentation for lists.
 */
dd, ol, ul {
  margin-left: 32px; }

/* ==========================================================================
   #PAGE
   ========================================================================== */
/**
 * Simple page-level setup.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */
html {
  font-size: 1.5625em;
  /* [1] */
  line-height: 1.36;
  /* [1] */
  overflow-y: scroll;
  /* [2] */
  min-height: 100%;
  /* [3] */ }

html {
  font-size: 5.20833vw;
  line-height: 1.36; }
  @media (min-width: 30.0625em) {
    html {
      font-size: 1.5625em; } }
  html.html--collaboratory {
    overflow: hidden; }

@media (max-width: 600px) {
  html {
    overflow-y: scroll; } }

/* ==========================================================================
   # UL
   ========================================================================== */
/**
 * Kirby wraps content of LI in P tags
 * This is to get rid of that
 *
 *
 */
li > p {
  margin-bottom: 0; }

/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Simple default styles for headings 1 through 6. Anything more opinionated
 * than simple font-size changes should likely be applied via classes (see:
 * http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
 */
h1 {
  font-size: 40px;
  font-size: 1.6rem;
  line-height: 1.2; }

h2 {
  font-size: 32px;
  font-size: 1.28rem;
  line-height: 1.3125; }

h3 {
  font-size: 28px;
  font-size: 1.12rem;
  line-height: 1.28571; }

h4 {
  font-size: 22px;
  font-size: 0.88rem;
  line-height: 1.36364; }

h5 {
  font-size: 22px;
  font-size: 0.88rem;
  line-height: 1.36364; }

h6 {
  font-size: 16px;
  font-size: 0.64rem;
  line-height: 1.5; }

/* ==========================================================================
   #IMAGES
   ========================================================================== */
/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 */
img {
  max-width: 100%;
  /* [1] */
  font-style: italic;
  /* [2] */
  vertical-align: middle;
  /* [3] */ }

/**
   * If a `width` and/or `height` attribute has been explicitly defined, let’s
   * not make the image fluid.
   */
img[width],
img[height] {
  max-width: none; }

/* ==========================================================================
   #TABLES
   ========================================================================== */
/**
 * 1. Ensure tables fill up as much space as possible.
 */
table {
  width: 100%;
  /* [1] */ }

/* ==========================================================================
   # A
   ========================================================================== */
/**
 * General Styles for Anchors
 *
 *
 *
 */
a {
  color: #A48545; }

/* ==========================================================================
   #PAGE
   ========================================================================== */
/**
 * Simple Body setup.
 *
 *
 *
 */
html {
  height: 100%; }

body {
  --color-ui-text: #08e600;
  --color-ui-text-opaque: #d3ffd1e6;
  --color-ui-hover: #84ff80;
  --color-ui-inactive: #e6ffe5;
  --color-ui-background: #fff;
  --color-ui-grey-dark: #747474;
  --color-ui-grey-mid: #bcbcbc;
  --color-ui-grey-light: #d9d9d9;
  --color-ui-error: #ff0a5c;
  font-family: "Antarctica";
  color: var(--color-ui-text);
  background-color: white;
  background-image: url(/assets/img/raster.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  -webkit-touch-callout: none;
  -webkit-user-select: none; }

body.body--theme2,
body.body--intro {
  --color-ui-text: #a48545;
  --color-ui-text-opaque: #a48545e6;
  --color-ui-hover: #ccb485;
  --color-ui-inactive: #f1ebdf;
  --color-ui-button: #08e600;
  background-color: white; }

.body--white {
  background-color: white; }

.body--green {
  background-color: #08e600;
  background-image: url(/assets/img/loading--48x48.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 48px; }

.body--transparent {
  background-color: transparent;
  background-image: none;
  height: 100vh;
  overflow: auto; }

.body--intro {
  display: flex;
  flex-direction: column;
  align-items: center; }

.body--intro--button {
  background-color: var(--color-ui-button);
  color: var(--color-ui-background);
  padding: 10px 32px;
  margin-top: 40px;
  border-radius: 22px;
  border: none;
  text-transform: uppercase;
  height: 45px;
  line-height: 30px;
  text-decoration: none;
  cursor: pointer;
  width: fit-content;
  width: -moz-fit-content; }
  @media (max-width: 63.99em) {
    .body--intro--button {
      position: absolute;
      bottom: 30px; } }

.body--intro--wrapper {
  display: flex;
  justify-content: center; }

.body--intro--logos {
  width: 40vw; }

/* ==========================================================================
   #Main
   ========================================================================== */
/**
 * Main Content Wrapper
 *
 *
 *
 */
main {
  margin-bottom: 64px;
  margin-top: 88px; }

/* ==========================================================================
   # Aside
   ========================================================================== */
/**
 * Home of the treenav
 *
 *
 *
 */
aside {
  width: 320px;
  margin-right: 64px;
  padding-top: 32px; }

/* ==========================================================================
   # Article
   ========================================================================== */
/**
 * Main content Column
 *
 *
 *
 */
article {
  max-width: 960px; }

/* ==========================================================================
   # Figure
   ========================================================================== */
/**
 * Kirby wraps images in figure.
 *
 *
 *
 */
figcaption {
  font-size: 16px;
  color: #A48545; }

/* ==========================================================================
   # Footer
   ========================================================================== */
/**
 * Same margins as "main", needs refactoring!
 *
 *
 *
 */
footer {
  margin-bottom: 64px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px; }

.footer__lift {
  margin-left: 384px;
  height: 32px; }

/* ==========================================================================
   #GRID
   ========================================================================== */
/**
 * This plugin provides a flexbox grid for inuitcss. Support for IE9 currently
 * prevents inuitcss from using the flexbox layout mode.
 *
 * Cells are full-width and will stack on top of each other by default:
 *
 * <div class="o-grid">
 *   <div class="o-grid__cell">
 *   </div>
 *   <div class="o-grid__cell">
 *   </div>
 * </div>
 *
 * Cells will in most cases be accompanied by utility classes that divide
 * the grid into fractions. These are provided by inuitcss:
 *
 * <div class="o-grid">
 *   <div class="o-grid__cell u-1/2">
 *   </div>
 *   <div class="o-grid__cell u-1/2">
 *   </div>
 * </div>
 *
 * Several modifier classes are provided. For example, `o-grid--auto` will
 * divide the space equally between all containing cells without the need
 * for width utility classes.
 *
 * <div class="o-grid--auto">
 *   <div class="o-grid__cell">
 *   </div>
 *   <div class="o-grid__cell">
 *   </div>
 * </div>
 */
/* The grid
   ========================================================================== */
.o-grid {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  padding: 0; }

/**
 * 1. Cells are full-width and stack on top of each other by default.
 */
.o-grid__cell {
  flex: 0 1 auto;
  width: 100%;
  /* [1] */ }

/* Gutters
   ========================================================================== */
/**
 * 1. The map $inuit-flexgrid-spacing-sizes contains a `null` key which
 *    will be our default gutter size.
 * 2. Add a negative margin on one side only. That way we aren't required to use
 *    a wrapper with the same amount of spacing, though it's common to do so.
 * 3. Neutralize the left margin on `o-grid`.
 */
.o-grid {
  /* [1] */
  margin-left: -32px;
  /* [2] */ }
  .o-grid > .o-grid__cell {
    padding-left: 32px;
    /* [3] */ }

.o-grid--tiny {
  /* [1] */
  margin-left: -6px;
  /* [2] */ }
  .o-grid--tiny > .o-grid__cell {
    padding-left: 6px;
    /* [3] */ }

.o-grid--small {
  /* [1] */
  margin-left: -12px;
  /* [2] */ }
  .o-grid--small > .o-grid__cell {
    padding-left: 12px;
    /* [3] */ }

.o-grid--large {
  /* [1] */
  margin-left: -48px;
  /* [2] */ }
  .o-grid--large > .o-grid__cell {
    padding-left: 48px;
    /* [3] */ }

.o-grid--huge {
  /* [1] */
  margin-left: -96px;
  /* [2] */ }
  .o-grid--huge > .o-grid__cell {
    padding-left: 96px;
    /* [3] */ }

.o-grid--flush {
  /* [1] */
  margin-left: 0;
  /* [2] */ }
  .o-grid--flush > .o-grid__cell {
    padding-left: 0;
    /* [3] */ }

/* Automatically size cells by distributing them equally
   ========================================================================== */
.o-grid--auto > .o-grid__cell {
  flex: 1 0 0; }

/* Horizontal alignment
   ========================================================================== */
.o-grid--left {
  justify-content: flex-start; }

.o-grid--center {
  justify-content: center; }

.o-grid--right {
  justify-content: flex-end; }

.o-grid--between {
  justify-content: space-between; }

.o-grid--around {
  justify-content: space-around; }

/* Pull behavior
   ========================================================================== */
.o-grid__cell--pull-left {
  margin-right: auto; }

.o-grid__cell--pull-right {
  margin-left: auto; }

/* Vertical alignment
   ========================================================================== */
.o-grid--top {
  align-items: flex-start; }

.o-grid--middle {
  align-items: center; }

.o-grid--bottom {
  align-items: flex-end; }

.o-grid--baseline {
  align-items: baseline; }

.o-grid--stretch {
  align-items: stretch; }

.o-grid__cell--top {
  align-self: flex-start; }

.o-grid__cell--middle {
  align-self: center; }

.o-grid__cell--bottom {
  align-self: flex-end; }

.o-grid__cell--baseline {
  align-self: baseline; }

.o-grid__cell--stretch {
  align-self: stretch; }

/* Content distribution
   ========================================================================== */
.o-grid--reverse {
  flex-direction: row-reverse; }

.o-grid--column {
  flex-direction: column; }

.o-grid--column-reverse {
  flex-direction: column-reverse; }

/* ==========================================================================
   # Ratio
   ========================================================================== */
/**
 * Create ratios based on css-vars. Works for Kirbys Blocktype Image
 * --w
 * --h
 * 
 */
.o-ratio {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h)); }

.o-ratio > img,
.o-ratio > iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0; }

.o-ratio[data-contain] > img {
  object-fit: contain; }

/* ==========================================================================
   # Wrapper for overall page container
   ========================================================================== */
/**
 * Keeps max width and margins-paddings for general responsiveness
 *
 *
 *
 */
.o-wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  max-width: 932px; }
  @media (min-width: 48.0625em) {
    .o-wrapper {
      padding-left: 32px;
      padding-right: 32px;
      max-width: 964px; } }

.o-wrapper--narrow {
  max-width: 858px; }

.o-wrapper--intro {
  padding: 60px;
  background-color: white;
  box-shadow: 0px 0px 10px #00000059;
  margin: 60px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 19px;
  max-width: 800px; }
  @media (max-width: 63.99em) {
    .o-wrapper--intro {
      position: relative; } }
  .o-wrapper--intro--desktop {
    display: flex; }
  .o-wrapper--intro--mobile {
    display: flex;
    margin: 60px 16px !important; }
    @media (min-width: 64em) {
      .o-wrapper--intro--mobile {
        display: none !important; } }

.o-wrapper--intro > .c-interactive-font {
  max-width: 425px; }
  .o-wrapper--intro > .c-interactive-font .c-interactive-font__title.flex {
    font-size: 80px !important; }

@media screen and (max-width: 600px) {
  .o-wrapper--intro > .c-interactive-font {
    max-width: 200px; } }

.o-wrapper--error {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 19px; }

.o-wrapper--inner {
  padding: 60px;
  max-width: 600px !important;
  background-color: #e42b2b; }

@media screen and (max-width: 600px) {
  .o-wrapper--intro, .o-wrapper--inner {
    padding: 20px; } }

.o-wrapper--error h1, .o-wrapper--error h2, .o-wrapper--error h3, .o-wrapper--error h4,
.o-wrapper--uc h1,
.o-wrapper--uc h2,
.o-wrapper--uc h3,
.o-wrapper--uc h4,
.o-wrapper--intro--mobile h1,
.o-wrapper--intro--mobile h2,
.o-wrapper--intro--mobile h3,
.o-wrapper--intro--mobile h4 {
  text-align: center;
  font-variation-settings: 'wght' 950;
  letter-spacing: .2;
  text-transform: uppercase;
  color: #08e600;
  font-size: 33px; }

/* ==========================================================================
   # Formfield
   ========================================================================== */
/**
 * Layout for basic Formflield Pattern like so
 *
 * <div class="o-formfield">
 *      <label>
 *          Email <abbr title="required">*</abbr>
 *      </label>
 *      <input type="email" value="" required>
 *      <span class="o-formfield__message  is-error"></span>
 *  </div>
 *
 *  [1] Honeypot-Field positioned outside viewable area to lure bots
 *
 */
.o-formfield {
  margin-bottom: 15px;
  position: relative;
  user-select: none;
  font-size: 19px;
  letter-spacing: 0.19px;
  line-height: 26px; }

.o-formfield--small {
  font-size: 15px;
  line-height: 20px; }

.o-formfield > a {
  color: var(--color-ui-text); }

.o-formfield > input,
.o-formfield--colorpicker {
  height: 55px; }

.o-formfield--small > input {
  height: 30px; }

.o-formfield > input[type='text'],
.o-formfield > input[type='number'],
.o-formfield > input[type='email'],
.o-formfield--colorpicker,
.o-formfield > textarea {
  width: 100%;
  border-style: solid;
  background-color: #fff;
  border-radius: 27px;
  border-width: 2px;
  border-color: var(--color-ui-grey-light);
  padding-left: 30px;
  color: var(--color-ui-text); }

.o-formfield--small > input[type='text'],
.o-formfield--small > input[type='number'],
.o-formfield--small > input[type='email'],
.o-formfield--colorpicker,
.o-formfield--small > textarea {
  padding-left: 15px; }

.o-formfield > input:hover,
.o-formfield--colorpicker:hover,
.o-formfield > textarea:hover {
  border-color: var(--color-ui-grey-mid); }

.o-formfield > input:focus,
.o-formfield > textarea:focus {
  outline: none;
  border-color: var(--color-ui-grey-dark); }

.o-formfield > textarea {
  min-height: 8em;
  padding-top: 14px; }

.o-formfield.has-error > input,
.o-formfield.has-error > textarea {
  border-color: #ff0a5c; }

.o-formfield__error {
  color: var(--color-ui-error);
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 15px; }
  .o-formfield__error--file {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center; }

.o-formfield__placeholder {
  position: absolute;
  padding-left: 30px;
  top: 15px; }

.o-formfield__placeholder > label {
  cursor: text; }

.o-formfield__groupitem {
  position: relative; }

/*
* File
*/
.o-formfield input[type='file'] {
  display: block;
  height: auto; }

/*
* Number
*/
.o-formfield input[type='number']::-webkit-inner-spin-button,
.o-formfield input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.o-formfield input[type=number] {
  -moz-appearance: textfield; }

/*
* Button
*/
.o-formfield input[type='submit'] {
  background-color: var(--color-ui-text);
  color: var(--color-ui-background);
  padding-right: 32px;
  padding-left: 32px;
  border-radius: 22px;
  border: none;
  text-transform: uppercase;
  height: 45px;
  cursor: pointer;
  letter-spacing: 0.4; }

.o-formfield input[type='submit'].o-formfield--secondary {
  border: 1px solid var(--color-ui-text);
  color: var(--color-ui-text);
  background-color: var(--color-ui-background); }

/*
* Checkbox
*/
.o-formfield input[type='checkbox'],
.o-formfield input[type='radio'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 32px;
  width: 32px; }

.o-formfield__checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  width: 1em;
  border-radius: 0.05em;
  border: 2px solid var(--color-ui-text);
  pointer-events: none; }

.o-formfield__checkmark:after {
  content: "";
  position: absolute;
  display: none; }

.o-formfield input[type='checkbox']:checked ~ .o-formfield__checkmark:after,
.o-formfield input[type='radio']:checked ~ .o-formfield__checkmark:after {
  display: block; }

/* Style the checkmark/indicator */
.o-formfield input[type='checkbox'] ~ .o-formfield__checkmark:after {
  left: 0.25em;
  top: -0.1em;
  width: 0.35em;
  height: 0.8em;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg); }

/* Style the checkmark/indicator */
.o-formfield input[type='radio'] ~ .o-formfield__checkmark:after {
  left: 4px;
  top: 4px;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  background-color: #A48545; }

.o-formfield__checkmark--link {
  cursor: pointer;
  text-decoration: underline; }

.o-formfield input[type='checkbox']:checked ~ .o-formfield__checkmark,
.o-formfield input[type='radio']:checked ~ .o-formfield__checkmark {
  background-color: var(--color-ui-text); }

.o-formfield__label--checkbox {
  display: inline;
  padding-left: 32px;
  cursor: pointer; }

.o-formfield__upload {
  height: 6em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-ui-inactive);
  margin-bottom: 15px;
  position: relative; }
  .o-formfield__upload img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    margin-bottom: 15px; }
    .o-formfield__upload img[src=""] {
      display: none; }

.o-formfield__upload input[type='file'] {
  display: none; }
  .o-formfield__upload input[type='file'] + label {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    cursor: pointer; }
    .o-formfield__upload input[type='file'] + label.is-selected {
      width: 1em;
      right: 10px;
      top: 10px; }
      .o-formfield__upload input[type='file'] + label.is-selected > svg {
        position: absolute;
        right: 0;
        top: 0;
        transform: rotate(45deg); }
      .o-formfield__upload input[type='file'] + label.is-selected > div {
        display: none; }
    .o-formfield__upload input[type='file'] + label > svg {
      width: 1em;
      height: auto;
      fill: var(--color-ui-text);
      margin-bottom: 10px; }
    .o-formfield__upload input[type='file'] + label > * {
      text-align: center; }

.o-formfield__seperator {
  border-bottom: 1px solid var(--color-ui-grey-light);
  margin-top: 30px;
  margin-bottom: 30px; }

/*
* Label
*/
.o-formfield__label {
  display: block; }

.o-formfield__label > abbr {
  text-decoration: none; }

.o-formfield__label > span {
  color: var(--color-ui-grey-light); }

.o-formfield > *:focus + .o-formfield__placeholder > .o-formfield__label {
  color: var(--color-ui-hover); }

.o-formfield > *:focus + .o-formfield__placeholder > .o-formfield__label > span {
  display: none; }

.o-formfield > input::placeholder,
.o-formfield > textarea::placeholder {
  opacity: 0; }

.o-formfield > input:not(:placeholder-shown) + .o-formfield__placeholder,
.o-formfield > textarea:not(:placeholder-shown) + .o-formfield__placeholder {
  display: none; }

.o-formfield--vueplaceholder > input + .o-formfield__placeholder,
.o-formfield--vueplaceholder > textarea + .o-formfield__placeholder {
  display: block !important; }

/*
* Message
*/
.o-formfield__message.is-error {
  color: var(--color-ui-error); }

.o-formfield--mandatory {
  position: absolute;
  left: -99999px; }

.o-formfield--disabled {
  pointer-events: none;
  opacity: .5; }

/* ==========================================================================
   # Collaboratory UI - Element
   ========================================================================== */
/**
 * Basic Appearance of all UI-Elements
 *
 *
 *
 */
.o-ui-element {
  display: inline-block;
  pointer-events: auto;
  width: fit-content;
  width: -moz-fit-content;
  max-width: 455px;
  background-color: var(--color-ui-background);
  color: var(--color-ui-text);
  box-shadow: 0px 0px 10px #00000059;
  border-radius: 3px;
  margin-bottom: 10px;
  min-height: 50px;
  overflow-x: hidden; }

.o-ui-element__trigger {
  min-height: 50px;
  padding-top: 11px;
  text-transform: uppercase;
  padding-left: 30px;
  padding-right: 20px;
  cursor: pointer;
  font-weight: 950;
  font-size: 25px;
  border-radius: 3px;
  font-variation-settings: 'wdth' 150, 'wght' 950;
  transition: font-size 0.3s ease-out;
  transition-property: background-color, font-size, color; }
  .o-ui-element__trigger--chat {
    position: absolute !important;
    bottom: 0;
    right: 0;
    top: auto !important;
    height: 50px;
    border-radius: 25px;
    background-color: var(--color-ui-background);
    box-shadow: 0px 0px 8px #00000033;
    margin-left: 30px;
    transition-property: width, opacity;
    transition-duration: 0.5s;
    width: 159px;
    opacity: 1;
    padding-left: 30px;
    padding-right: 30px; }

.o-ui-element--left:not(.is-expanded) .o-ui-element__trigger {
  color: var(--color-ui-background);
  background-color: var(--color-ui-text); }

.o-ui-element__trigger:hover {
  color: var(--color-ui-background);
  background-color: var(--color-ui-text); }

.is-expanded .o-ui-element__trigger:hover {
  color: var(--color-ui-text);
  transition-property: font-size; }

.o-ui-element--left:not(.is-expanded) > .o-ui-element__trigger:hover {
  background-color: var(--color-ui-background);
  color: var(--color-ui-text); }

.is-expanded > .o-ui-element__trigger {
  background-color: var(--color-ui-background);
  font-size: 33px;
  line-height: 34px; }
  .is-expanded > .o-ui-element__trigger--chat {
    width: 345px;
    opacity: 0;
    font-size: 25px; }
    .is-expanded > .o-ui-element__trigger--chat:hover {
      transition-property: width, opacity; }

.o-ui-element__trigger {
  position: sticky;
  top: 0;
  overflow-wrap: break-word; }

.o-ui-element__icon {
  display: block;
  float: right;
  fill: var(--color-ui-background);
  width: 26px;
  padding-top: 2px;
  margin-left: 20px;
  margin-right: -10px; }

.o-ui-element__trigger:hover > .o-ui-element__icon {
  fill: var(--color-ui-text); }

.o-ui-element__close {
  display: block;
  float: left;
  width: 21px;
  height: 21px;
  color: var(--color-ui-text);
  fill: var(--color-ui-text);
  opacity: 0;
  transition: none;
  padding-top: 8px; }
  .o-ui-element__close--chat {
    cursor: pointer;
    background-color: var(--color-ui-background);
    border-radius: 16px;
    padding-bottom: 8px;
    margin-left: 30px;
    margin-bottom: 15px;
    line-height: 0;
    text-align: center;
    width: 62px;
    height: auto;
    box-shadow: 0px 0px 8px #00000033;
    opacity: 0 !important;
    transition: opacity 0.3s; }
    .o-ui-element__close--chat.show {
      opacity: 1 !important; }

.o-ui-element--left .o-ui-element__close {
  float: right; }

.is-expanded .o-ui-element__close {
  opacity: 1;
  transition: opacity 0.1s ease-out 0.2s; }

.o-ui-element__content {
  padding-left: 30px;
  padding-right: 30px; }

.o-ui-element__content h1, h2, h3 {
  font-variation-settings: 'wdth' 150, 'wght' 950;
  font-size: 33;
  text-transform: uppercase;
  line-height: 34px;
  color: var(--color-ui-text); }

.o-ui-pill {
  display: inline-block; }
  .o-ui-pill > input[type="radio"], .o-ui-pill input[type="checkbox"] {
    display: none; }
    .o-ui-pill > input[type="radio"]:checked + *, .o-ui-pill input[type="checkbox"]:checked + * {
      background-color: var(--color-ui-text);
      color: #fff; }
  .o-ui-pill__inner {
    cursor: pointer;
    color: var(--color-ui-text);
    background-color: var(--color-ui-background);
    border: 2px solid var(--color-ui-text);
    border-radius: 2em;
    padding: 0.25em 1em 0.25em 1em;
    text-decoration: none; }
    .o-ui-pill__inner:hover {
      background-color: var(--color-ui-inactive); }
  .o-ui-pill.is-active {
    background-color: var(--color-ui-text);
    color: #fff; }

/* The switch - the box around the slider */
.o-ui-toggle {
  display: flex;
  align-items: center; }
  .o-ui-toggle input:checked + .o-ui-toggle__slider {
    background-color: var(--color-ui-text); }
  .o-ui-toggle input:focus + .o-ui-toggle__slider {
    box-shadow: 0 0 1px var(--color-ui-text); }
  .o-ui-toggle input:checked + .o-ui-toggle__slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px); }

.o-ui-toggle__label {
  padding-right: 10px; }

.o-ui-toggle__switch {
  position: relative;
  width: 60px;
  height: 34px;
  display: block; }

/* Hide default HTML checkbox */
.o-ui-toggle input {
  opacity: 0;
  width: 0;
  height: 0; }

/* The slider */
.o-ui-toggle__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-ui-grey-light);
  -webkit-transition: .4s;
  transition: .4s; }

.o-ui-toggle__slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s; }

/* Rounded sliders */
.o-ui-toggle__slider.round {
  border-radius: 34px; }

.o-ui-toggle__slider.round:before {
  border-radius: 50%; }

/* ==========================================================================
   #LIST-BARE
   ========================================================================== */
/**
 * Strip list-like appearance from lists by removing their bullets and any
 * indentation.
 *
 * Note: Declaring the item class might not be necessary everywhere,
 * but is for example in <dl> lists for the <dd> children.
 */
.o-list-bare {
  list-style: none;
  margin-left: 0; }

.o-list-bare__item {
  margin-left: 0; }

/* ==========================================================================
   # Collaboratory UI - Avatar
   ========================================================================== */
/**
 * Small Form to change name and color of user avatar
 *
 *
 *
 */
.c-avatar-wrapper {
  pointer-events: auto;
  opacity: 100%;
  position: relative; }

.c-avatar {
  position: fixed;
  top: calc(50% - 25px);
  left: calc(50% + 45px);
  min-width: 400px; }

.c-avatar__trigger {
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  color: blue;
  opacity: 0%;
  padding-left: 40px;
  /* enlarge clickable area to make pen clickable */
  padding-right: 40px; }

.c-avatar__content {
  padding: 30px;
  padding-top: 10px;
  position: relative; }

.c-avatar__name {
  margin-bottom: 45px;
  text-transform: uppercase;
  font-weight: 950;
  font-size: 25px;
  line-height: normal;
  font-variation-settings: 'wdth' 150, 'wght' 950;
  display: flex;
  justify-content: space-between;
  align-items: center; }

.c-avatar__close {
  padding: 0;
  cursor: pointer; }

.c-avatar__toggle {
  display: inline-block; }

.c-avatar__preview {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 15px;
  transition-property: width, height;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  margin-bottom: 2px; }

.is-expanded .c-avatar__preview {
  width: 21px;
  height: 21px; }

.c-avatar__intro {
  text-align: left;
  padding-top: 30px; }

.c-avatar__button {
  margin-bottom: 0;
  text-align: right; }

@media screen and (max-width: 700px) {
  .c-avatar {
    max-width: 90vw;
    position: static;
    min-width: 200px; }
  .c-avatar__trigger {
    margin-bottom: 70px; }
  .c-avatar__content {
    width: auto !important; } }

/* ==========================================================================
   # Header
   ========================================================================== */
/**
 * Full width header
 *
 */
.c-header {
  height: 56px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 16px;
  z-index: 20;
  display: flex;
  justify-content: center; }
  @media (min-width: 48.0625em) {
    .c-header {
      padding-left: 32px;
      padding-right: 32px;
      padding-top: 32px; } }

/* Style variants
   ========================================================================== */
/* ==========================================================================
   # Masthead
   ========================================================================== */
/**
 * Contains Logo and Main Navigation
 *
 */
.c-masthead {
  display: flex;
  align-items: center;
  line-height: 24px; }

.c-masthead__item {
  width: 32px; }

.c-masthead__item--middle {
  flex-grow: 1;
  text-align: center; }

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

.c-masthead__logo {
  font-size: 0; }

.c-masthead__logo > svg {
  height: 24px; }

/* ==========================================================================
   # Footer
   ========================================================================== */
/**
 * ???
 *
 */
.c-footer {
  margin-top: 140px; }

.c-footer__wrapper {
  display: flex;
  justify-content: center; }

.c-footer__logos {
  max-width: 60%; }

/* ==========================================================================
   # FAB
   ========================================================================== */
/**
 * Floating Action Button
 *
 * Always aligned at lower right corner.
 *
 *
 */
.c-fab {
  width: 153px;
  height: 153px;
  border-radius: 50%;
  background-color: white;
  text-decoration: none;
  position: fixed;
  right: 32px;
  bottom: 32px;
  border: solid 6px #E300A5;
  text-align: center;
  display: flex;
  align-items: center;
  box-shadow: 3px 4px 7px 0px rgba(0, 0, 0, 0.16); }

.c-fab__label {
  display: inline-block;
  flex-shrink: 0;
  text-transform: uppercase;
  color: #E300A5;
  width: 100%;
  padding-top: 12px;
  font-weight: 500; }

/* ==========================================================================
   # Layout 2cols - Pagebuilder-Block
   ========================================================================== */
/**
 * Otional Border on top of block
 *
 */
.c-layout-2cols--border {
  border-top: 1px solid #A48545;
  padding-top: 32px; }

/* ==========================================================================
   # Text - Pagebuilder-Block
   ========================================================================== */
/**
 * Otional alert style
 *
 */
.c-text {
  margin-bottom: 32px; }

.c-text--alert {
  background-color: #E300A5;
  padding: 32px;
  color: #fff; }

.c-text h1,
.c-text h2,
.c-text h3 {
  font-family: "Antarctica";
  letter-spacing: 0; }

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

/* ==========================================================================
   # Menu
   ========================================================================== */
/**
 * used in all nav-… templates
 * for now just stylin' the a
 *
 */
.c-menu__item {
  margin-right: 32px;
  margin-bottom: 10px; }

.c-menu__item > a {
  color: var(--color-ui-button);
  text-decoration: none; }

.c-menu__item.is-active > a {
  font-weight: bold; }

.c-menu__item.hover > a {
  font-weight: bold; }

/* ==========================================================================
   # Submenu
   ========================================================================== */
/**
 * or now just stylin' the a
 *
 */
.c-submenu {
  background-color: #A48545;
  border-radius: 12px;
  margin-bottom: 32px; }

.c-submenu__item {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px; }

.c-submenu__item:first-child {
  padding-left: 32px;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px; }

.c-submenu__item > a {
  text-decoration: none; }

.c-submenu__item.is-active {
  background-color: #E300A5; }

/* ==========================================================================
   # Interactive Variable Font
   ========================================================================== */
/**
 * Animated Font weight and width on mousemove
 * works with variable font only
 * based on https://codepen.io/JuanFuentes/pen/rgXKGQ
 *
 */
.c-interactive-font {
  display: none;
  max-width: 900px;
  width: 100%;
  z-index: 10; }
  @media (min-width: 64em) {
    .c-interactive-font {
      display: flex; } }

.c-interactive-font__title {
  font-weight: 100;
  line-height: 1em;
  text-align: center;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
  user-select: none;
  width: 90%; }
  @media (min-width: 64em) {
    .c-interactive-font__title {
      width: 100%; } }

.c-interactive-font__title > span {
  letter-spacing: -0.02em;
  user-select: none; }

.c-interactive-font__title.flex {
  align-items: center;
  display: flex;
  justify-content: space-between; }

/* ==========================================================================
   # Collaboratory LOGO
   ========================================================================== */
/**
 * 
 *
 *
 *
 */
.c-collaboratory-logo {
  position: absolute;
  width: 100%;
  top: 20px;
  z-index: 10; }
  .c-collaboratory-logo > * {
    margin: 0 auto;
    width: 50%;
    max-width: 425px;
    color: #a48545; }

/* ==========================================================================
   # Collaboratory
   ========================================================================== */
/**
 * Canvas Element for the 3D SPace
 *
 *
 *
 */
.c-collaboratory {
  height: 100%;
  width: 100%;
  clip-path: circle(0% at 50% 50%);
  transition: all 1.2s;
  z-index: 0; }

.c-collaboratory.is-revealed {
  clip-path: circle(100% at 50% 50%); }

.c-collaboratory.is-blurred {
  filter: blur(5px); }

/* ==========================================================================
   # Collaboratory UI
   ========================================================================== */
/**
 * Wrapper div for the view app
 *
 *
 *
 */
.c-collaboratory-ui {
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  user-select: none;
  top: 0;
  transition: transform 1300ms;
  transition-delay: 4000ms; }

.c-collaboratory-ui.is-scaled {
  transform: scale(1.3); }

.c-collaboratory-ui__pane {
  left: 20px;
  top: 85px;
  width: 70%;
  color: var(--color-ui-text);
  height: calc(100vh - 40px);
  position: absolute;
  max-width: 455px; }
  @media (min-width: 64em) {
    .c-collaboratory-ui__pane {
      left: 80px;
      top: 20px;
      width: 50%; } }

.c-collaboratory-ui__pane--flex-column {
  display: flex;
  flex-direction: column; }

.c-collaboratory-ui__pane--right {
  right: 80px;
  left: unset;
  text-align: right;
  align-items: flex-end;
  justify-content: flex-start; }

.c-collaboratory-ui__low-left-group {
  position: absolute;
  left: 20px;
  bottom: 20px; }
  .c-collaboratory-ui__low-left-group > .o-ui-element:last-child {
    margin-bottom: 0; }

.c-collaboratory-ui__low-mid-group {
  position: absolute;
  bottom: 20px;
  width: 100%;
  height: 5px;
  display: flex;
  justify-content: center; }

.c-collaboratory-ui__avatar {
  position: absolute;
  top: 43.5%;
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center; }

@media screen and (max-width: 700px) {
  .c-collaboratory-ui__pane--right {
    top: 80px;
    right: 20px;
    width: 90vw;
    z-index: inherit; } }

/* ==========================================================================
   # Hambuer
   ========================================================================== */
/**
 * Animated Hamburger Icon
 * works togehter with hamburger.js
 */
.c-hamburger {
  cursor: pointer;
  background-color: var(--color-ui-button);
  transition: background-color 0.3s ease-out;
  box-shadow: 0px 0px 10px #00000059;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 50; }

.c-hamburger:hover {
  background-color: var(--color-ui-background); }

.c-hamburger__bar,
.c-hamburger__bar::after,
.c-hamburger__bar::before {
  background: var(--color-ui-background);
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  width: 32px; }

.c-hamburger__bar::after {
  margin-top: -10px;
  background: var(--color-ui-background); }

.c-hamburger__bar::before {
  margin-top: 10px;
  background: var(--color-ui-background); }

.c-hamburger:hover > .c-hamburger__bar {
  background: var(--color-ui-button); }

.c-hamburger:hover > .c-hamburger__bar::after {
  background: var(--color-ui-button); }

.c-hamburger:hover > .c-hamburger__bar::before {
  background: var(--color-ui-button); }

.c-hamburger.is-expanded {
  background: transparent;
  box-shadow: none; }

.c-hamburger.is-expanded > .c-hamburger__bar {
  background: transparent; }

.c-hamburger.is-expanded > .c-hamburger__bar::after,
.c-hamburger.is-expanded > .c-hamburger__bar::before {
  background: var(--color-ui-button);
  margin-top: 0; }

.c-hamburger.is-expanded > .c-hamburger__bar::after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.c-hamburger.is-expanded > .c-hamburger__bar::before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

/* ==========================================================================
   # Slideout
   ========================================================================== */
/**
 * Slides out from the left on click of hamburger
 *
 *
 *
 */
.c-slideout {
  background: white;
  background: linear-gradient(90deg, white 0%, white 80%, rgba(255, 255, 255, 0) 100%);
  height: 100vh;
  left: -100vw;
  overflow: auto;
  padding-top: 30px;
  padding-bottom: 50px;
  position: fixed;
  top: 0;
  transition: all 300ms ease-in-out;
  width: 100vw;
  z-index: 40; }

.c-slideout h1 {
  color: var(--color-ui-button);
  font-size: 24px;
  font-weight: bold;
  text-align: start; }

.c-slideout h2 {
  font-size: 24px;
  font-weight: bold; }

.c-slideout h1, .c-slideout h2, .c-slideout h3, .c-slideout h4 {
  text-align: start;
  font-variation-settings: 'wght' 400; }

.c-slideout.is-expanded {
  background: #fff;
  left: 0; }

.c-slideout__contentwrapper {
  display: grid;
  grid-template-columns: 0.6fr 1.5fr;
  grid-template-rows: 1fr;
  gap: 0 30px; }
  @media (max-width: 1020px) {
    .c-slideout__contentwrapper {
      display: flex;
      flex-direction: column;
      width: 90vw;
      margin-left: auto;
      margin-right: auto; } }

.c-slideout__navigation {
  grid-column: 1;
  display: flex;
  justify-content: center;
  margin-left: 15px; }
  @media (max-width: 1020px) {
    .c-slideout__navigation {
      justify-content: flex-start;
      margin: 0; } }

.c-slideout__content {
  grid-column: 2;
  max-width: 625px; }

.c-slideout__content p {
  color: #a48545;
  font-size: 19px; }

.c-slideout__wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 90px; }

.c-slideout__logo {
  width: 30%; }

/* ==========================================================================
   # Starwars
   ========================================================================== */
/**
 * 3D Transformed Scollable Text - StarWars-Style
 * https://css-tricks.com/snippets/css/star-wars-crawl-text/
 *
 *
 */
.c-starwars {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh; }

.c-starwars__wrapper {
  /* Flexbox to center the entire element on the screen */
  display: flex;
  justify-content: center;
  /* This is a magic number based on the context in which this snippet is used and effects the perspective */
  height: 400px;
  /* This sets allows us to transform the text on a 3D plane, and is somewhat a magic number */
  perspective: 400px;
  /* The rest is totally up to personal styling preferences */
  font-size: 18px;
  font-variation-settings: 'wdth' 250;
  letter-spacing: 0.02em;
  line-height: 1.5em;
  min-width: 120%; }
  @media (min-width: 64em) {
    .c-starwars__wrapper {
      font-size: 25px;
      max-width: 1000px;
      min-width: auto; } }

.c-starwars__crawl {
  /* Position the element so we can adjust the top property in the animation */
  position: relative;
  /* Making sure the text is fully off the screen at the start and end of the animation */
  top: -100px;
  /* Defines the skew origin at the very center when we apply transforms on the animation */
  transform-origin: 50% 100%;
  /* The element starts below the screen */
  top: 70vh;
  /* Rotate the text 20 degrees but keep it close to the viewer */
  transform: rotateX(20deg); }

.c-starwars__crawl > img {
  display: inline-block;
  margin-top: 32px; }

.c-starwars__fade {
  background-image: url(/assets/img/starwars-fade-bg.png);
  left: 0;
  height: 250px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 8; }

@keyframes crawl {
  0% {
    /* The element starts below the screen */
    top: 40vh;
    /* Rotate the text 20 degrees but keep it close to the viewer */
    transform: rotateX(20deg) translateZ(0); }
  100% {
    /* This is a magic number, but using a big one to make sure the text is fully off the screen at the end */
    top: -6000px;
    /* Slightly increasing the rotation at the end and moving the text far away from the viewer */
    transform: rotateX(20deg) translateZ(-2500px); } }

/* ==========================================================================
   # Collaboratory UI - UserList
   ========================================================================== */
/**
 * List of Users Currently Online
 *
 *
 *
 */
.c-userlist.is-expanded {
  min-height: 150px; }

.c-userlist__content {
  padding-left: 30px;
  padding-right: 30px;
  text-align: left; }

.c-userlist__list {
  margin-top: 30px;
  margin-bottom: 30px;
  max-height: 331px;
  overflow-y: auto; }

.c-userlist__listitem {
  min-height: 55px;
  padding-top: 2px;
  padding-left: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-ui-grey-mid);
  display: flex;
  align-items: center;
  min-width: 365px; }

.c-userlist__listitem:first-child {
  border-top: 1px solid var(--color-ui-grey-mid); }

.c-userlist__color {
  display: inline-block;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin-right: 15px; }

.c-userlist__username {
  display: inline-block; }

/* ==========================================================================
   # Paper-Canvas
   ========================================================================== */
/**
 * 
 * 
 *
 */
.c-paper-canvas {
  height: 100vh;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 30; }

/* ==========================================================================
   # X (Close Icon)
   ========================================================================== */
/**
 * Static Icon
 * 
 */
.c-x {
  cursor: pointer;
  height: 26px;
  right: 16px;
  position: fixed;
  top: 16px;
  width: 32px;
  z-index: 50; }
  @media (min-width: 48.0625em) {
    .c-x {
      right: 32px;
      top: 32px; } }

.c-x__bar,
.c-x__bar::after,
.c-x__bar::before {
  background: #E300A5;
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  transition: all 300ms ease-in-out;
  width: 32px;
  margin-top: 0; }

.c-x__bar {
  margin-top: 10px;
  background: transparent; }

.c-x__bar::after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.c-x__bar::before {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

/* ==========================================================================
   # Collapsible UI
   ========================================================================== */
/**
 * Basic Collapsible
 *
 *
 *
 */
.c-collapsible {
  transition-property: all;
  transition-duration: .3s; }

.c-collapsible__trigger {
  transition: all;
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-family: inherit;
  font-style: inherit;
  text-align: inherit;
  font-weight: 950;
  font-size: 25px;
  font-variation-settings: 'wdth' 150, 'wght' 950;
  color: inherit;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
  cursor: pointer; }

.c-collapsible__trigger.is-open {
  font-size: 33px;
  line-height: 30px; }

.c-collapsible__content {
  overflow: hidden; }

.c-collapsible__content.is-closed {
  width: 0; }

.c-collapsible__content-inner {
  height: auto;
  text-align: left; }

/* ==========================================================================
   # Colorpicker
   ========================================================================== */
/**
 * Custom Colorpicker as Radio-Group
 *
 *
 */
.c-colorpicker {
  margin-bottom: 15px;
  position: relative;
  user-select: none;
  min-height: 55px;
  width: 100%;
  border-style: solid;
  background-color: #fff;
  border-radius: 27px;
  border-width: 2px;
  border-color: var(--color-ui-grey-light);
  text-align: center;
  padding-top: 9px;
  padding-left: 9px;
  color: var(--color-ui-text); }

.c-colorpicker input[type='radio'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 32px;
  width: 32px;
  z-index: 1; }

.c-colorpicker:hover {
  border-color: var(--color-ui-grey-mid); }

.c-colorpicker__color {
  display: inline-block;
  margin-right: 7px;
  margin-bottom: 7px; }

.c-colorpicker__preview {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%; }
  .c-colorpicker__preview:after {
    border-width: 0;
    transition: all 0.1s ease-in-out;
    box-sizing: border-box; }

.c-colorpicker__color:hover .c-colorpicker__preview:after {
  content: '';
  display: block;
  border: 2px solid white;
  border-radius: 50%;
  width: 75%;
  height: 75%;
  top: 25%;
  position: absolute;
  left: 25%;
  margin-top: -4px;
  margin-left: -4px; }

.c-colorpicker__color.is-selected .c-colorpicker__preview:after {
  content: '';
  display: block;
  border: 4px solid white;
  border-radius: 50%;
  width: 75%;
  height: 75%;
  top: 25%;
  position: absolute;
  left: 25%;
  margin-top: -4px;
  margin-left: -4px; }

.c-colorpicker__label {
  display: none !important; }

/* ==========================================================================
   # Collaboratory UI - Toast
   ========================================================================== */
/**
 * Toast
 *
 *
 *
 */
.c-toast-wrapper {
  position: absolute;
  bottom: 0; }

.c-toast {
  border-top: 5px solid var(--color-ui-text);
  position: relative;
  width: 100%; }

.c-toast__body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 19px; }
  .c-toast__body img {
    margin-bottom: 30px;
    width: 75%; }
  .c-toast__body p {
    margin-bottom: 0; }

.c-toast__close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 17px;
  cursor: pointer; }

.c-toast__close > svg {
  fill: var(--color-ui-grey-mid); }

/* ==========================================================================
   # Collaboratory UI - Theme Switcher
   ========================================================================== */
/**
 * Just a Button to switch the theme (you guessed it!)
 *
 */
.c-theme-switcher {
  --c-color-background: #fff;
  --c-color-half: #a48545;
  height: 50px;
  width: 50px;
  background-color: var(--c-color-background);
  overflow: hidden;
  cursor: pointer; }

.c-theme-switcher:hover {
  background-color: var(--c-color-half); }

.c-collaboratory-ui--theme2 .c-theme-switcher {
  --c-color-background: #fff;
  --c-color-half: #08e600; }

.c-theme-switcher__half {
  width: 50%;
  height: 100%;
  background-color: var(--c-color-half); }

.c-theme-switcher:hover > .c-theme-switcher__half {
  background-color: var(--c-color-background); }

/* ==========================================================================
   # Collaboratory UI - Navigator
   ========================================================================== */
/**
 * Just a Button to navigate back or home, open the menu and stuff
 *
 */
.c-navigator {
  height: 50px;
  width: 50px;
  background-color: var(--color-ui-text);
  position: fixed;
  left: 20px;
  top: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.3s ease-out; }

.c-navigator:hover {
  background-color: var(--color-ui-background); }

.c-navigator__icon > svg {
  fill: var(--color-ui-background); }

.c-navigator:hover > .c-navigator__icon > svg {
  fill: var(--color-ui-text); }

.c-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 60;
  background-color: white;
  opacity: 0.95; }
  @media (min-width: 64em) {
    .c-modal {
      width: 100vw;
      height: 100vh; } }

.c-modal--transparent {
  background-color: rgba(255, 255, 255, 0.95);
  opacity: 1; }

.c-modal--zine {
  background-color: white;
  opacity: 1;
  z-index: 5; }
  .c-modal--zine .c-modal__content {
    margin-top: 70px;
    height: calc(100vh - 70px);
    width: calc(100vw - 80px); }

.c-modal.is-revealed {
  clip-path: circle(100% at 50% 50%);
  transition: all 1.2s; }

.c-modal.is-concealed {
  clip-path: circle(0% at 50% 50%);
  transition: all 1.2s; }

.c-modal__content {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent; }
  @media (min-width: 64em) {
    .c-modal__content {
      width: 100vw;
      height: 100vh; } }

.c-modal__close {
  position: absolute;
  top: 33px;
  right: 33px;
  width: 21px;
  height: 21px;
  color: var(--color-ui-text);
  fill: var(--color-ui-text);
  cursor: pointer; }

.c-modal-dsg {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.9); }
  .c-modal-dsg__content {
    background-color: var(--color-ui-background);
    box-shadow: 0px 0px 10px #00000059;
    max-width: 50vw;
    max-height: 80vh;
    padding: 30px;
    position: relative;
    overflow: scroll; }
    .c-modal-dsg__content__close {
      position: absolute;
      top: 30px;
      right: 30px;
      width: 1em;
      height: 1em; }
      .c-modal-dsg__content__close > svg {
        width: 100%;
        height: 100%;
        fill: var(--color-ui-text); }
    .c-modal-dsg__content__text {
      color: var(--color-ui-text2); }

.c-picturemodal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 60;
  background-color: rgba(255, 255, 255, 0.9); }

.c-picturemodal__close {
  position: absolute;
  width: 21px;
  height: 21px;
  color: var(--color-ui-text);
  fill: var(--color-ui-text);
  cursor: pointer;
  top: 33px;
  right: 33px;
  z-index: inherit; }

.c-picturemodal__button {
  color: var(--color-ui-text) !important;
  height: 21px !important;
  width: auto !important; }

.c-picturemodal__button--prev {
  left: 20px !important;
  right: auto !important; }

.c-picturemodal__button--next {
  right: 20px !important;
  left: auto !important; }

.c-picturemodal__content {
  width: 625px;
  height: calc(100vh - 82px);
  margin: 41px auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; }

.c-picturemodal__image {
  overflow: hidden;
  max-height: 80%; }

.c-picturemodal__image img {
  max-height: 100%;
  width: 100%;
  object-fit: contain; }

.c-picturemodal__wrapper {
  margin-top: 25px;
  height: fit-content;
  height: -moz-fit-content; }

.c-picturemodal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px; }

.c-picturemodal__category {
  color: var(--color-ui-text);
  background-color: var(--color-ui-background);
  border: 2px solid var(--color-ui-text);
  border-radius: 2em;
  padding: 0.25em 1em 0.25em 1em;
  width: fit-content;
  width: -moz-fit-content;
  text-decoration: none;
  margin-bottom: 25px;
  display: inline-block; }

/* ==========================================================================
   # Hambuer
   ========================================================================== */
/**
 * Animated hamburgler Icon
 * works togehter with hamburgler.js
 */
.c-hamburgler {
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-color: var(--color-ui-text);
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease-out; }

.c-hamburgler:hover {
  background-color: var(--color-ui-background); }

.c-hamburgler__bar, .c-hamburgler__bar::after, .c-hamburgler__bar::before {
  background: var(--color-ui-background);
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  width: 32px; }

.c-hamburgler__bar::after {
  margin-top: -10px;
  background: var(--color-ui-background); }

.c-hamburgler__bar::before {
  margin-top: 10px;
  background: var(--color-ui-background); }

.c-hamburgler:hover > .c-hamburgler__bar {
  background: var(--color-ui-text); }

.c-hamburgler:hover > .c-hamburgler__bar::after {
  background: var(--color-ui-text); }

.c-hamburgler:hover > .c-hamburgler__bar::before {
  background: var(--color-ui-text); }

/* ==========================================================================
   # Collaboratory UI - Sharing
   ========================================================================== */
.c-sharing {
  display: flex;
  align-items: center;
  cursor: pointer; }

.c-sharing__content {
  display: inline-block;
  padding-left: 30px;
  padding-right: 30px; }

.c-sharing__list {
  max-height: 331px;
  overflow-y: auto;
  display: flex;
  justify-content: space-between; }

.c-sharing__listitem {
  color: var(--color-ui-text);
  text-decoration: none; }

.c-sharing__button {
  height: 50px;
  width: 50px;
  padding: 12px; }
  .c-sharing__button svg {
    height: 100%;
    width: 100%; }
  .c-sharing__button path {
    fill: var(--color-ui-text); }

/* ==========================================================================
   # Collaboratory UI - Chat
   ========================================================================== */
.c-chat {
  overflow: visible;
  margin-top: auto;
  margin-bottom: 0;
  background-color: transparent;
  box-shadow: none; }

.c-chat__content {
  height: 0;
  width: 455px !important;
  display: flex;
  overflow: visible !important; }

.c-chat__content__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: calc(50vh + 50px); }

.c-chat__notifier {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: #FF1B00;
  opacity: 0%;
  transform: translate(50%, -50%);
  z-index: 1000;
  transition: all 0.3s; }

.c-chat__notifier--visible {
  opacity: 100%; }

.c-chat__notification {
  color: var(--color-ui-background) !important;
  background-color: var(--color-ui-text) !important; }

.c-chat__list {
  padding-left: 45px;
  padding-right: 0;
  padding-bottom: 5px;
  margin-top: 0;
  flex: 1;
  /* Allows the message area to expand with viewport height */
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  user-select: text;
  -webkit-mask-image: linear-gradient(0deg, black 0%, black calc(50vh - 40px), rgba(0, 0, 0, 0) 50vh); }

.c-chat__listitem {
  min-height: fit-content;
  min-height: -moz-fit-content;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 12px;
  padding: 15px;
  box-shadow: 0px 0px 8px #00000033;
  border-radius: 8px;
  width: 75%; }

.c-chat__listitem__lead {
  display: flex;
  margin-bottom: 0.2em; }

.c-chat__listitem--others {
  background-color: #ffffffe6; }

.c-chat__listitem--my {
  background-color: var(--color-ui-text-opaque);
  align-self: end; }
  .c-chat__listitem--my > .c-chat__listitem__lead {
    display: none; }
  .body--theme2 .c-chat__listitem--my .c-chat__message {
    color: var(--color-ui-inactive); }

.c-chat__listitem:first-of-type {
  margin-top: auto; }

.c-chat__color {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin-right: 10px;
  padding-right: 15px; }

.c-chat__color--default {
  background-color: #08e600; }

.c-chat__color--input {
  margin-top: 0; }

.c-chat__username {
  display: inline;
  color: #bcbcbc;
  margin-right: 10px; }

.c-chat__message {
  color: var(--color-ui-text);
  word-break: break-word;
  text-align: start;
  flex-shrink: 0; }

.c-chat__input {
  display: flex;
  align-items: center;
  padding-left: 30px;
  padding-right: 0;
  margin-bottom: 0;
  position: relative;
  background: transparent;
  opacity: 0; }
  .is-expanded .c-chat__input {
    opacity: 1; }

.c-chat__inputmessage {
  padding-right: 80px;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  min-height: 55px !important;
  transition: height 0.3s;
  box-shadow: 0px 0px 10px #00000059;
  resize: none; }
  .c-chat__inputmessage:focus {
    border-color: var(--color-ui-text) !important; }

.c-chat__placeholder {
  position: absolute;
  padding-left: 30px;
  top: 19px;
  color: var(--color-ui-grey-light);
  pointer-events: none; }

.c-chat__button {
  height: 30px;
  width: 30px;
  border: none;
  cursor: pointer;
  position: absolute;
  bottom: 12px;
  right: 15px; }
  .c-chat__button > svg {
    fill: var(--color-ui-text); }

.c-collaboratory-lenbachhaus-logo {
  z-index: 55;
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-image: url(/assets/img/lbh_logo--vertikal.svg);
  background-repeat: no-repeat;
  height: 133px;
  width: 15px; }

/* ==========================================================================
   # Screen
   ========================================================================== */
/**
 * 
 *
 */
.c-screen {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 3; }
  @media (min-width: 64em) {
    .c-screen {
      width: 100vw;
      height: 100vh; } }
  .c-screen__inner {
    margin: 21vh auto;
    height: 41%;
    background: var(--color-ui-grey-mid);
    position: relative;
    overflow: hidden; }
    .c-screen__inner > img {
      height: 100%;
      width: auto; }
    .c-screen__inner > div iframe {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      border: 0; }

/* ==========================================================================
   # Screen
   ========================================================================== */
/**
 * 
 *
 */
.Cookie--lbh {
  position: absolute !important;
  top: 0;
  background: var(--color-ui-background); }
  .Cookie--lbh > * {
    position: absolute !important;
    top: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    text-align: center; }
  .Cookie--lbh__buttons {
    display: flex;
    justify-content: center; }

.c-modulepreview__header {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.c-modulepreview__title {
  max-width: 80%;
  align-items: center; }

.c-modulepreview__title:hover {
  background-color: var(--color-ui-background) !important; }

.c-modulepreview__close {
  width: 21px;
  height: 21px;
  color: var(--color-ui-text);
  fill: var(--color-ui-text);
  cursor: pointer;
  margin-right: 30px; }

.c-modulepreview__back {
  color: var(--color-ui-text);
  fill: var(--color-ui-text);
  cursor: pointer;
  margin-top: 15px; }

.c-modulepreview__back > svg {
  height: 15px;
  margin-right: 5px; }

.c-modulepreview__content {
  overflow-wrap: break-word; }

.c-sound {
  pointer-events: auto;
  height: 50px;
  width: 50px;
  background-color: var(--color-ui-background); }

.c-sound__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--color-ui-background);
  border: none;
  cursor: pointer; }

.c-sound__icon path {
  fill: var(--color-ui-text); }

/*
    .c-sound {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        pointer-events: auto;
        bottom: $c-collaboratory-ui-padding;
        left: $c-collaboratory-ui-padding;
        height: $global-ui-element-height;
        width: $global-ui-element-height;
        background-color: var(--color-ui-background);
        border: 1px var(--color-ui-text) solid;
        border-radius: 50%;
    }
    .c-sound__icon {
        width: 50%;
        height: auto;
        fill: var(--color-ui-text);
    }
*/
.c-zoom {
  pointer-events: auto;
  height: 50px;
  width: 50px;
  background-color: var(--color-ui-background);
  display: block; }

.c-zoom__button {
  width: 100%;
  height: 100%;
  background-color: var(--color-ui-background);
  border: none;
  cursor: pointer; }

.c-zoom__button.is-zoomed {
  background-color: var(--color-ui-text); }
  .c-zoom__button.is-zoomed > .c-zoom__icon {
    fill: var(--color-ui-background); }

.c-zoom__icon {
  fill: var(--color-ui-text); }

.c-zinemoduleread {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  background-color: white;
  padding-left: 80px;
  padding-right: 80px;
  padding-top: 120px;
  padding-bottom: 30px;
  overflow: scroll; }

.c-zinemoduleread.is-reading {
  z-index: 300;
  padding-top: 30px; }

.c-zinemoduleread__close {
  position: absolute;
  width: 21px;
  height: 21px;
  color: var(--color-ui-text);
  fill: var(--color-ui-text);
  cursor: pointer;
  top: 33px;
  right: 33px;
  z-index: inherit; }

.c-zinemoduleread__button {
  color: var(--color-ui-text) !important;
  height: 21px !important;
  width: auto !important; }

.c-zinemoduleread__button--prev {
  left: 80px !important;
  right: auto !important; }

.c-zinemoduleread__button--next {
  right: 80px !important;
  left: auto !important; }

.c-zinemoduleread__intro {
  max-width: 750px;
  width: 50%;
  min-height: 160px;
  color: #a48545; }

.c-zinemoduleread__zines {
  margin-left: 0 !important; }

.c-zinemoduleread__zinecover {
  width: 340px;
  display: inline-block;
  margin-right: 30px;
  margin-bottom: 45px;
  cursor: pointer; }

.c-zinemoduleread__spread {
  height: calc(100vh - 82px);
  max-width: 986px;
  margin: 41px auto;
  text-align: center; }

.c-zinemoduleread__apect-ratio {
  height: 0;
  overflow: hidden;
  padding-top: 70.73171%;
  position: relative; }

.c-zinemoduleread__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain; }

.c-zinemoduleread__content.is-cover {
  background-position: right; }

.c-zinemoduleread__content.is-backside {
  background-position: left; }

.c-zinemoduleread__contentoverlay {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
  width: 50%;
  height: 100%;
  z-index: 999; }

.c-zinemoduleread__footer {
  text-align: left; }

.c-zinemoduleread__credits {
  width: calc(50% - 40px);
  position: absolute;
  left: 20px;
  bottom: 20px;
  background-color: white;
  font-size: 10px;
  text-align: left;
  padding: 10px;
  border-radius: 5px; }

/* ==========================================================================
   # Crembach - Introduce
   ========================================================================== */
.c-crembachmoduleintroduce {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000000 !important;
  background: #cd0000;
  background: linear-gradient(122deg, #cd0000 0%, #bff4fd 32%, #29fff2 54%, #bff4fd 100%);
  background: conic-gradient(from 67.14deg at 33.02% 18.33%, #BFF4FD -3.72deg, #DBF2FF 71.25deg, #D2DFFF 71.38deg, #CFDFFE 135deg, #CD0000 234.38deg, #29FFF2 320.87deg, #BFF4FD 356.28deg, #DBF2FF 431.25deg); }
  .c-crembachmoduleintroduce__aligner {
    max-width: 588px;
    max-height: 70vh;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 4px 27px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    display: flex;
    flex-direction: column; }
  .c-crembachmoduleintroduce__head {
    padding: 17px 47px 19px 32px; }
  .c-crembachmoduleintroduce__title {
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    font-size: 24px !important;
    line-height: 28px; }
  .c-crembachmoduleintroduce__author {
    font-family: Arial;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px; }
  .c-crembachmoduleintroduce__text {
    margin-right: 20px;
    padding: 0 27px 44px 32px;
    font-family: 'Roboto Mono';
    font-size: 14px;
    line-height: 18px;
    overflow: auto;
    flex: 1;
    scrollbar-color: #B61111 transparent; }

.c-crembachmoduleintroduce__text::-webkit-scrollbar {
  width: 7px;
  background: transparent; }

.c-crembachmoduleintroduce__text::-webkit-scrollbar-thumb {
  background: #B61111;
  border-radius: 0; }

/* ==========================================================================
   # Crembach - Introduce
   ========================================================================== */
.c-crembachmodulewords {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  color: #000000 !important;
  background: #dfff61;
  background: linear-gradient(122deg, #dfff61 0%, #d1e8eb 22%, #c8beff 40%, #dfff61 67%, #d1e8eb 100%);
  background: conic-gradient(from 85.02deg at 69.56% 56.22%, #DFFF61 -26.25deg, #D1E8EB 83.76deg, #C8BEFF 174.14deg, #DFFF61 333.75deg, #D1E8EB 443.76deg); }
  .c-crembachmodulewords.intro {
    background: #dfff61;
    background: linear-gradient(122deg, #dfff61 0%, #d1e8eb 22%, #c8beff 40%, #dfff61 67%, #d1e8eb 100%);
    background: conic-gradient(from 202.91deg at 71.15% 53.11%, #DFFF61 -26.25deg, #D1E8EB 151.87deg, #DFFF61 333.75deg, #D1E8EB 511.87deg); }
  .c-crembachmodulewords__start {
    background: rgba(255, 255, 255, 0.38);
    box-shadow: 0px 1px 16px 1px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    width: 280px;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    font-size: 21px;
    line-height: 28px;
    letter-spacing: 0em;
    text-align: center;
    padding: 30px;
    cursor: pointer; }
  .c-crembachmodulewords__aligner {
    width: 100%;
    max-height: 70vh;
    display: flex;
    position: relative; }
  .c-crembachmodulewords__content {
    padding-left: 50px;
    padding-right: 50px;
    width: 65vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    user-select: text; }
  .c-crembachmodulewords__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column; }
  .c-crembachmodulewords__item {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 4px 27px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    padding: 20px 15px;
    margin: 10px 20px;
    font-size: 24px;
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.8s; }
    .c-crembachmodulewords__item.show {
      opacity: 1; }
    .c-crembachmodulewords__item.middle {
      align-self: center; }
    .c-crembachmodulewords__item.right {
      align-self: flex-end; }
    .c-crembachmodulewords__item.left {
      align-self: flex-start; }
  .c-crembachmodulewords__hint {
    font-family: Roboto Mono;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 131.69%;
    text-align: center;
    color: #000000;
    margin-top: 33px;
    opacity: 0;
    transition: opacity 0.8s; }
    .c-crembachmodulewords__hint.show {
      opacity: 1; }
  .c-crembachmodulewords__mouse {
    width: 35vw;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; }
    .intro .c-crembachmodulewords__mouse {
      align-items: inherit; }
  .c-crembachmodulewords__ctrl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
  .c-crembachmodulewords__hint-mouse {
    background-image: url(/assets/img/crembach-icon-mouse.svg);
    background-size: contain;
    width: 47px;
    height: 65px;
    margin-bottom: 26px; }
  .c-crembachmodulewords__hint-bubble {
    background-image: url(/assets/img/crembach-icon-bubble.svg);
    border-radius: 50%;
    width: 172px;
    height: 172px;
    background: #B1A4FF;
    filter: blur(4px);
    margin-bottom: 40px;
    transition: 1s filter linear;
    cursor: pointer; }
    .c-crembachmodulewords__hint-bubble:active {
      filter: blur(29px); }
  .c-crembachmodulewords__hint-text {
    font-family: Roboto Mono;
    font-style: normal;
    font-size: 18px;
    line-height: 131.69%;
    text-align: center;
    color: #000000;
    max-width: 270px; }

/* ==========================================================================
   # Crembach - Swing
   ========================================================================== */
.c-crembachmoduleswing {
  width: 100vw;
  height: 100vh;
  color: #000000 !important;
  background: #ffe8d3;
  background: linear-gradient(122deg, #ffe8d3 0%, #ff89a5 32%, #fdffaf 54%, #ffe8d3 100%);
  background: conic-gradient(from 45.47deg at 33.51% 46.39%, #FFE8D3 0deg, #FF89A5 180deg, #FDFFAF 226.87deg, #FFE8D3 360deg);
  transition: background 0.3s linear; }

.c-crembachmoduleswing.is-success {
  background: #ffe8d3;
  background: linear-gradient(122deg, #ffe8d3 0%, #ff89a5 32%, #fdffaf 54%, #ffe8d3 100%);
  background: conic-gradient(from 13.66deg at 49.51% 32.17%, #FFE8D3 0deg, #FF89A5 180deg, #FDFFAF 226.87deg, #FFE8D3 360deg); }

.c-crembachmoduleswing.is-failure {
  background: #ffe8d3;
  background: linear-gradient(122deg, #ffe8d3 0%, #ff89a5 32%, #fdffaf 54%, #ffe8d3 100%);
  background: conic-gradient(from -44.72deg at 88.85% 81.94%, #FFE8D3 0deg, #FF89A5 180deg, #FDFFAF 226.87deg, #FFE8D3 360deg); }

.c-crembachmoduleswing.is-swinging {
  background: #ffe8d3;
  background: linear-gradient(122deg, #ffe8d3 0%, #ff89a5 32%, #fdffaf 54%, #ffe8d3 100%);
  background: conic-gradient(from 18.77deg at 47.19% 38.44%, #FFE8D3 0deg, #FDFFAF 9.37deg, #FFE8D3 360deg); }

.c-crembachmoduleswing__matter {
  width: 100%;
  height: 100%; }

.c-crembachmoduleswing__bar {
  width: 100vw;
  height: 300vh;
  position: absolute;
  left: 0;
  background: linear-gradient(180deg, #FF9A7A 33.73%, #BB9F0C 58.85%, #EF662C 66.02%);
  transform-origin: top center;
  top: -100vh; }

.c-crembachmoduleswing__start {
  position: absolute;
  left: calc(33vw - 140px);
  top: calc(46vh - 140px);
  border-radius: 50%;
  width: 280px;
  height: 280px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0px 1px 16px 1px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial;
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  padding: 30px;
  cursor: pointer; }

.c-crembachmoduleswing__start.is-success {
  left: calc(50vw - 140px);
  top: calc(32vh - 140px); }

.c-crembachmoduleswing__start.is-failure {
  left: calc(89vw - 140px);
  top: calc(82vh - 140px); }

.c-crembachmoduleswing__footer {
  position: absolute;
  bottom: 60px;
  font-family: Roboto Mono;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: 0em;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column; }

.c-crembachmoduleswing__prompt {
  display: inline-block;
  max-width: 840px;
  margin-bottom: 20px;
  margin-right: 60px;
  margin-left: 60px; }

.c-crembachmoduleswing__controls {
  display: block;
  max-width: 840px; }

.c-crembachmoduleswing__controls > svg {
  margin: 0 10px;
  opacity: 0.6;
  cursor: pointer; }

.c-crembachmoduleswing__swingleft {
  transform: rotateZ(180deg); }

.c-crembachmoduleswing__swingleft.is-down,
.c-crembachmoduleswing__swingright.is-down {
  opacity: 1; }

/* ==========================================================================
   # Crembach - Safe Space
   ========================================================================== */
.c-crembachmodulesafe {
  width: 100vw;
  height: 100vh;
  color: #000000 !important;
  background: #d4ebe9;
  background: linear-gradient(122deg, #d4ebe9 0%, #5182ff 32%, #d4ebe9 54%);
  background: conic-gradient(from 141.78deg at 16.81% 54.5%, #D4EBE9 0deg, #5182FF 281.25deg, #D4EBE9 360deg); }

.c-crembachmodulesafe__start {
  position: absolute;
  left: calc(50vw - 140px);
  top: calc(50vh - 140px);
  border-radius: 50%;
  width: 280px;
  height: 280px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0px 1px 16px 1px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial;
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  padding: 30px;
  cursor: pointer; }

.c-crembachmodulesafe__create {
  position: absolute;
  left: calc(50vw - 140px);
  top: calc(50vh - 140px);
  border-radius: 50%;
  width: 280px;
  height: 280px;
  background: #000000;
  color: #ffffff !important;
  box-shadow: 0px 1px 16px 1px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: center;
  padding: 30px;
  cursor: pointer;
  outline-offset: 34px;
  outline: 19px solid black; }

.c-crembachmodulesafe__formwrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  font-family: Roboto Mono;
  font-style: normal;
  font-weight: normal;
  font-size: 16px; }

.c-crembachmodulesafe__form {
  min-width: 692px;
  display: flex;
  flex-direction: column; }
  .c-crembachmodulesafe__form input, .c-crembachmodulesafe__form textarea {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #A5A5A5;
    box-sizing: border-box;
    border-radius: 24px;
    line-height: 21px;
    padding: 17px 32px;
    width: 100%; }
  .c-crembachmodulesafe__form textarea {
    height: 6em; }

.c-crembachmodulesafe__form__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
  z-index: 99999;
  position: relative; }
  .c-crembachmodulesafe__form__name > label {
    padding-bottom: 1em; }

.c-crembachmodulesafe__form__description {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  position: relative; }
  .c-crembachmodulesafe__form__description > label {
    padding-bottom: 1em; }

.c-crembachmodulesafe__form__button {
  position: absolute;
  cursor: pointer;
  bottom: 0;
  right: -320px;
  width: 233px;
  font-family: Arial;
  font-style: normal;
  font-size: 18px;
  line-height: 21px;
  text-transform: uppercase;
  border-radius: 24px;
  color: #fff;
  background: black;
  border: none;
  padding: 5px 0 5px 0; }

.c-crembachmodulesafe__paper {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; }

/* ==========================================================================
   # Bild und Text
   ========================================================================== */
.c-btmodule {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  color: #000000 !important;
  background: white;
  background-image: url(/assets/img/raster.png);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding-left: 80px;
  padding-right: 80px; }
  .c-btmodule__dl-button {
    background-color: var(--color-ui-text);
    color: var(--color-ui-background);
    padding-right: 32px;
    padding-left: 32px;
    border-radius: 22px;
    text-transform: uppercase;
    height: 45px;
    display: inline-block;
    line-height: 2.5em !important;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 0.4 !important;
    margin-top: 1em; }
  .c-btmodule__aligner {
    border-radius: 8px;
    display: flex;
    align-items: end;
    width: 1760px;
    padding-top: 80px;
    padding-bottom: 20px; }
  .c-btmodule__left {
    width: 33%; }
  .c-btmodule__middle {
    width: 66%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    margin-right: 40px; }
  .c-btmodule__right {
    width: 33%; }
  .c-btmodule__content {
    background: #fff;
    box-shadow: 0px 0px 10px #00000029;
    flex-grow: 1;
    padding: 30px;
    color: var(--color-ui-text);
    margin-bottom: 20px; }
    .c-btmodule__content__hl {
      font-size: 25px;
      padding-bottom: 20px; }
    .c-btmodule__content__image {
      padding-bottom: 20px; }
      .c-btmodule__content__image > img {
        max-height: 30vh; }
      .c-btmodule__content__image__caption {
        letter-spacing: -0.07px;
        color: #BCBCBC78;
        font-size: 13px; }
  .c-btmodule__progressbar {
    box-shadow: 0px 0px 10px #00000059;
    border-radius: 35px;
    background: #0000FF;
    width: 80%;
    height: 1em;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    display: flex; }
    .c-btmodule__progressbar__stream {
      flex: 1;
      position: relative; }
      .c-btmodule__progressbar__stream:first-child {
        border-right: 3px solid #fff; }
      .c-btmodule__progressbar__stream:last-child {
        border-left: 3px solid #fff; }
    .c-btmodule__progressbar__progress {
      position: absolute;
      width: 33%;
      height: 100%;
      background-color: #08e600;
      z-index: 0;
      transition: width 0.3s; }
  .c-btmodule__bubbles__item {
    transition: opacity 0.8s;
    display: block; }
    .c-btmodule__bubbles__item.inactive > div {
      background-color: lightgreen;
      pointer-events: none; }
    .c-btmodule__bubbles__item.inactive:after {
      background-color: lightgreen !important; }
  .c-btmodule__bubbles--questions .c-btmodule__bubbles__item:last-child:after {
    width: 23px;
    height: 26px;
    content: '';
    display: block;
    float: left;
    margin-left: 40px;
    margin-bottom: 10px;
    background-color: #a48545;
    -webkit-mask-image: url(/assets/img/bt-bubble-hook.svg);
    mask-image: url(/assets/img/bt-bubble-hook.svg); }
  .c-btmodule__bubbles--questions .c-btmodule__bubbles__point {
    clear: left;
    background-color: #a48545; }
  .c-btmodule__bubbles__completed {
    box-shadow: 0px 0px 10px #00000059;
    border-radius: 35px;
    font-size: 25px;
    color: #fff;
    padding: 20px;
    margin-top: 20px;
    background: #0000FF;
    float: left;
    cursor: pointer;
    transition: background-color 0.3s; }
    .c-btmodule__bubbles__completed:hover {
      background: #08e600; }
  .c-btmodule__bubbles--answers .c-btmodule__bubbles__item:last-child:after, .c-btmodule__bubbles--share .c-btmodule__bubbles__item:last-child:after, .c-btmodule__bubbles--poll .c-btmodule__bubbles__item:last-child:after, .c-btmodule__bubbles--hash .c-btmodule__bubbles__item:last-child:after {
    width: 23px;
    height: 26px;
    content: '';
    display: block;
    float: right;
    margin-right: 40px;
    margin-bottom: 10px;
    transform: scaleX(-1);
    background-color: #0000F6;
    transition: background-color 0.3s;
    -webkit-mask-image: url(/assets/img/bt-bubble-hook.svg);
    mask-image: url(/assets/img/bt-bubble-hook.svg); }
  .c-btmodule__bubbles--answers .c-btmodule__bubbles__item:last-child:hover:after, .c-btmodule__bubbles--share .c-btmodule__bubbles__item:last-child:hover:after, .c-btmodule__bubbles--poll .c-btmodule__bubbles__item:last-child:hover:after, .c-btmodule__bubbles--hash .c-btmodule__bubbles__item:last-child:hover:after {
    background: #08e600; }
  .c-btmodule__bubbles--answers .c-btmodule__bubbles__point, .c-btmodule__bubbles--share .c-btmodule__bubbles__point, .c-btmodule__bubbles--poll .c-btmodule__bubbles__point, .c-btmodule__bubbles--hash .c-btmodule__bubbles__point {
    float: right;
    clear: right;
    background-color: #0000F6; }
  .c-btmodule__bubbles__point {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #A48545; }
  .c-btmodule__bubble--question {
    box-shadow: 0px 0px 10px #00000059;
    border-radius: 35px;
    font-size: 22px;
    color: #fff;
    padding: 25px;
    margin-top: 20px;
    background-color: #a48545;
    transition: all 0.3s; }
  .c-btmodule__bubble--answer, .c-btmodule__bubble--poll, .c-btmodule__bubble--share, .c-btmodule__bubble--hash {
    box-shadow: 0px 0px 10px #00000059;
    border-radius: 35px;
    font-size: 22px;
    color: #fff;
    padding: 25px;
    margin-top: 20px;
    background: #0000FF;
    cursor: pointer;
    transition: background-color 0.3s; }
    .c-btmodule__bubble--answer:hover, .c-btmodule__bubble--poll:hover, .c-btmodule__bubble--share:hover, .c-btmodule__bubble--hash:hover {
      background: #08e600; }
      .c-btmodule__bubble--answer:hover:after, .c-btmodule__bubble--poll:hover:after, .c-btmodule__bubble--share:hover:after, .c-btmodule__bubble--hash:hover:after {
        background: #08e600; }
  .c-btmodule__title {
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    font-size: 24px !important;
    line-height: 28px; }
  .c-btmodule__text {
    margin-right: 20px;
    padding: 0 27px 44px 32px;
    font-family: 'Roboto Mono';
    font-size: 14px;
    line-height: 18px;
    overflow: auto;
    flex: 1;
    scrollbar-color: #B61111 transparent; }

/* ==========================================================================
   # Collaboratory UI - EMOJIPICKER
   ========================================================================== */
.c-emoji {
  position: absolute;
  z-index: 1;
  width: 100%;
  bottom: 65px; }

.c-emoji__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column; }

.c-emoji-invoker {
  width: 1.5rem;
  height: 1.5rem;
  bottom: -63px;
  right: 58px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10;
  position: absolute; }

.c-emoji-invoker > svg {
  fill: #d9d9d9; }

.c-emoji-picker {
  margin-top: auto;
  max-height: 9.8rem;
  padding: 15px;
  margin-left: 30px;
  box-sizing: border-box;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0px 0px 10px #00000059;
  overflow: scroll; }

.c-emoji-picker__search {
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 30px;
  padding-bottom: 15px;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  background: rgba(255, 255, 255, 0.85); }
  .c-emoji-picker__search > div {
    margin-bottom: 0; }

.c-emoji-picker__search > input {
  flex: 1; }

.c-emoji__list {
  padding-bottom: 50px;
  text-align: left; }

.c-emoji__emojis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.c-emoji__emojis:after {
  content: "";
  flex: auto; }

.c-emoji__emojis span {
  padding: 0.2rem;
  cursor: pointer;
  border-radius: 5px; }

.c-emoji-picker .emojis span:hover {
  cursor: pointer; }

/* ==========================================================================
   #CLEARFIX
   ========================================================================== */
/**
 * Attach our clearfix mixin to a utility class.
 */
.u-clearfix:after {
  content: "" !important;
  display: block !important;
  clear: both !important; }

/* ==========================================================================
   #WIDTHS
   ========================================================================== */
/**
 * inuitcss generates a series of utility classes that give a fluid width to
 * whichever element they’re applied, e.g.:
 *
 *   <img src="" alt="" class="u-1/2" />
 *
 * These classes are most commonly used in conjunction with our layout system,
 * e.g.:
 *
 *   <div class="o-layout__item  u-1/2">
 *
 * By default, inuitcss will also generate responsive variants of each of these
 * classes by using your Sass MQ configuration, e.g.:
 *
 *   <div class="o-layout__item  u-1/1  u-1/2@tablet  u-1/3@desktop">
 *
 * Optionally, inuitcss can generate offset classes which can push and pull
 * elements left and right by a specified amount, e.g.:
 *
 *   <div class="o-layout__item  u-2/3  u-pull-1/3">
 *
 * This is useful for making very granular changes to the rendered order of
 * items in a layout.
 *
 * N.B. This option is turned off by default.
 */
/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in
 * your markup:
 *
 * <div class="u-7/12">
 *
 * The following will generate widths helper classes based on the fractions
 * defined in the `$inuit-fractions` list.
 */
.u-1\/1 {
  width: 100% !important; }

.u-1\/2 {
  width: 50% !important; }

.u-2\/2 {
  width: 100% !important; }

.u-1\/3 {
  width: 33.33333% !important; }

.u-2\/3 {
  width: 66.66667% !important; }

.u-3\/3 {
  width: 100% !important; }

.u-1\/4 {
  width: 25% !important; }

.u-2\/4 {
  width: 50% !important; }

.u-3\/4 {
  width: 75% !important; }

.u-4\/4 {
  width: 100% !important; }

.u-1\/5 {
  width: 20% !important; }

.u-2\/5 {
  width: 40% !important; }

.u-3\/5 {
  width: 60% !important; }

.u-4\/5 {
  width: 80% !important; }

.u-5\/5 {
  width: 100% !important; }

/**
 * If we’re using Sass-MQ, automatically generate grid system(s) for each of our
 * defined breakpoints, and give them a Responsive Suffix, e.g.:
 *
 * <div class="u-3/12@mobile">
 */
@media (min-width: 30.0625em) {
  .u-1\/1\@mobile {
    width: 100% !important; }
  .u-1\/2\@mobile {
    width: 50% !important; }
  .u-2\/2\@mobile {
    width: 100% !important; }
  .u-1\/3\@mobile {
    width: 33.33333% !important; }
  .u-2\/3\@mobile {
    width: 66.66667% !important; }
  .u-3\/3\@mobile {
    width: 100% !important; }
  .u-1\/4\@mobile {
    width: 25% !important; }
  .u-2\/4\@mobile {
    width: 50% !important; }
  .u-3\/4\@mobile {
    width: 75% !important; }
  .u-4\/4\@mobile {
    width: 100% !important; }
  .u-1\/5\@mobile {
    width: 20% !important; }
  .u-2\/5\@mobile {
    width: 40% !important; }
  .u-3\/5\@mobile {
    width: 60% !important; }
  .u-4\/5\@mobile {
    width: 80% !important; }
  .u-5\/5\@mobile {
    width: 100% !important; } }

@media (min-width: 48.0625em) {
  .u-1\/1\@tablet {
    width: 100% !important; }
  .u-1\/2\@tablet {
    width: 50% !important; }
  .u-2\/2\@tablet {
    width: 100% !important; }
  .u-1\/3\@tablet {
    width: 33.33333% !important; }
  .u-2\/3\@tablet {
    width: 66.66667% !important; }
  .u-3\/3\@tablet {
    width: 100% !important; }
  .u-1\/4\@tablet {
    width: 25% !important; }
  .u-2\/4\@tablet {
    width: 50% !important; }
  .u-3\/4\@tablet {
    width: 75% !important; }
  .u-4\/4\@tablet {
    width: 100% !important; }
  .u-1\/5\@tablet {
    width: 20% !important; }
  .u-2\/5\@tablet {
    width: 40% !important; }
  .u-3\/5\@tablet {
    width: 60% !important; }
  .u-4\/5\@tablet {
    width: 80% !important; }
  .u-5\/5\@tablet {
    width: 100% !important; } }

@media (min-width: 64em) {
  .u-1\/1\@desktop {
    width: 100% !important; }
  .u-1\/2\@desktop {
    width: 50% !important; }
  .u-2\/2\@desktop {
    width: 100% !important; }
  .u-1\/3\@desktop {
    width: 33.33333% !important; }
  .u-2\/3\@desktop {
    width: 66.66667% !important; }
  .u-3\/3\@desktop {
    width: 100% !important; }
  .u-1\/4\@desktop {
    width: 25% !important; }
  .u-2\/4\@desktop {
    width: 50% !important; }
  .u-3\/4\@desktop {
    width: 75% !important; }
  .u-4\/4\@desktop {
    width: 100% !important; }
  .u-1\/5\@desktop {
    width: 20% !important; }
  .u-2\/5\@desktop {
    width: 40% !important; }
  .u-3\/5\@desktop {
    width: 60% !important; }
  .u-4\/5\@desktop {
    width: 80% !important; }
  .u-5\/5\@desktop {
    width: 100% !important; } }

@media (min-width: 80em) {
  .u-1\/1\@wide {
    width: 100% !important; }
  .u-1\/2\@wide {
    width: 50% !important; }
  .u-2\/2\@wide {
    width: 100% !important; }
  .u-1\/3\@wide {
    width: 33.33333% !important; }
  .u-2\/3\@wide {
    width: 66.66667% !important; }
  .u-3\/3\@wide {
    width: 100% !important; }
  .u-1\/4\@wide {
    width: 25% !important; }
  .u-2\/4\@wide {
    width: 50% !important; }
  .u-3\/4\@wide {
    width: 75% !important; }
  .u-4\/4\@wide {
    width: 100% !important; }
  .u-1\/5\@wide {
    width: 20% !important; }
  .u-2\/5\@wide {
    width: 40% !important; }
  .u-3\/5\@wide {
    width: 60% !important; }
  .u-4\/5\@wide {
    width: 80% !important; }
  .u-5\/5\@wide {
    width: 100% !important; } }

/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Redefine all of our basic heading styles against utility classes so as to
 * allow for double stranded heading hierarchy, e.g. we semantically need an H2,
 * but we want it to be sized like an H1:
 *
 *   <h2 class="u-h1"></h2>
 *
 */
.u-h1 {
  font-size: 40px !important;
  font-size: 1.6rem !important;
  line-height: 1.2 !important; }

.u-h2 {
  font-size: 32px !important;
  font-size: 1.28rem !important;
  line-height: 1.3125 !important; }

.u-h3 {
  font-size: 28px !important;
  font-size: 1.12rem !important;
  line-height: 1.28571 !important; }

.u-h4 {
  font-size: 22px !important;
  font-size: 0.88rem !important;
  line-height: 1.36364 !important; }

.u-h5 {
  font-size: 22px !important;
  font-size: 0.88rem !important;
  line-height: 1.36364 !important; }

.u-h6 {
  font-size: 16px !important;
  font-size: 0.64rem !important;
  line-height: 1.5 !important; }

/* ==========================================================================
   #SPACINGS
   ========================================================================== */
/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left-large {}
 *   .u-margin-right-small {}
 *   .u-padding {}
 *   .u-padding-right-none {}
 *   .u-padding-horizontal {}
 *   .u-padding-vertical-small {}
 */
.u-padding {
  padding: 32px !important; }

.u-padding-tiny {
  padding: 6px !important; }

.u-padding-small {
  padding: 12px !important; }

.u-padding-large {
  padding: 48px !important; }

.u-padding-huge {
  padding: 96px !important; }

.u-padding-none {
  padding: 0 !important; }

.u-padding-top {
  padding-top: 32px !important; }

.u-padding-top-tiny {
  padding-top: 6px !important; }

.u-padding-top-small {
  padding-top: 12px !important; }

.u-padding-top-large {
  padding-top: 48px !important; }

.u-padding-top-huge {
  padding-top: 96px !important; }

.u-padding-top-none {
  padding-top: 0 !important; }

.u-padding-right {
  padding-right: 32px !important; }

.u-padding-right-tiny {
  padding-right: 6px !important; }

.u-padding-right-small {
  padding-right: 12px !important; }

.u-padding-right-large {
  padding-right: 48px !important; }

.u-padding-right-huge {
  padding-right: 96px !important; }

.u-padding-right-none {
  padding-right: 0 !important; }

.u-padding-bottom {
  padding-bottom: 32px !important; }

.u-padding-bottom-tiny {
  padding-bottom: 6px !important; }

.u-padding-bottom-small {
  padding-bottom: 12px !important; }

.u-padding-bottom-large {
  padding-bottom: 48px !important; }

.u-padding-bottom-huge {
  padding-bottom: 96px !important; }

.u-padding-bottom-none {
  padding-bottom: 0 !important; }

.u-padding-left {
  padding-left: 32px !important; }

.u-padding-left-tiny {
  padding-left: 6px !important; }

.u-padding-left-small {
  padding-left: 12px !important; }

.u-padding-left-large {
  padding-left: 48px !important; }

.u-padding-left-huge {
  padding-left: 96px !important; }

.u-padding-left-none {
  padding-left: 0 !important; }

.u-padding-horizontal {
  padding-left: 32px !important;
  padding-right: 32px !important; }

.u-padding-horizontal-tiny {
  padding-left: 6px !important;
  padding-right: 6px !important; }

.u-padding-horizontal-small {
  padding-left: 12px !important;
  padding-right: 12px !important; }

.u-padding-horizontal-large {
  padding-left: 48px !important;
  padding-right: 48px !important; }

.u-padding-horizontal-huge {
  padding-left: 96px !important;
  padding-right: 96px !important; }

.u-padding-horizontal-none {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.u-padding-vertical {
  padding-top: 32px !important;
  padding-bottom: 32px !important; }

.u-padding-vertical-tiny {
  padding-top: 6px !important;
  padding-bottom: 6px !important; }

.u-padding-vertical-small {
  padding-top: 12px !important;
  padding-bottom: 12px !important; }

.u-padding-vertical-large {
  padding-top: 48px !important;
  padding-bottom: 48px !important; }

.u-padding-vertical-huge {
  padding-top: 96px !important;
  padding-bottom: 96px !important; }

.u-padding-vertical-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

.u-margin {
  margin: 32px !important; }

.u-margin-tiny {
  margin: 6px !important; }

.u-margin-small {
  margin: 12px !important; }

.u-margin-large {
  margin: 48px !important; }

.u-margin-huge {
  margin: 96px !important; }

.u-margin-none {
  margin: 0 !important; }

.u-margin-top {
  margin-top: 32px !important; }

.u-margin-top-tiny {
  margin-top: 6px !important; }

.u-margin-top-small {
  margin-top: 12px !important; }

.u-margin-top-large {
  margin-top: 48px !important; }

.u-margin-top-huge {
  margin-top: 96px !important; }

.u-margin-top-none {
  margin-top: 0 !important; }

.u-margin-right {
  margin-right: 32px !important; }

.u-margin-right-tiny {
  margin-right: 6px !important; }

.u-margin-right-small {
  margin-right: 12px !important; }

.u-margin-right-large {
  margin-right: 48px !important; }

.u-margin-right-huge {
  margin-right: 96px !important; }

.u-margin-right-none {
  margin-right: 0 !important; }

.u-margin-bottom {
  margin-bottom: 32px !important; }

.u-margin-bottom-tiny {
  margin-bottom: 6px !important; }

.u-margin-bottom-small {
  margin-bottom: 12px !important; }

.u-margin-bottom-large {
  margin-bottom: 48px !important; }

.u-margin-bottom-huge {
  margin-bottom: 96px !important; }

.u-margin-bottom-none {
  margin-bottom: 0 !important; }

.u-margin-left {
  margin-left: 32px !important; }

.u-margin-left-tiny {
  margin-left: 6px !important; }

.u-margin-left-small {
  margin-left: 12px !important; }

.u-margin-left-large {
  margin-left: 48px !important; }

.u-margin-left-huge {
  margin-left: 96px !important; }

.u-margin-left-none {
  margin-left: 0 !important; }

.u-margin-horizontal {
  margin-left: 32px !important;
  margin-right: 32px !important; }

.u-margin-horizontal-tiny {
  margin-left: 6px !important;
  margin-right: 6px !important; }

.u-margin-horizontal-small {
  margin-left: 12px !important;
  margin-right: 12px !important; }

.u-margin-horizontal-large {
  margin-left: 48px !important;
  margin-right: 48px !important; }

.u-margin-horizontal-huge {
  margin-left: 96px !important;
  margin-right: 96px !important; }

.u-margin-horizontal-none {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.u-margin-vertical {
  margin-top: 32px !important;
  margin-bottom: 32px !important; }

.u-margin-vertical-tiny {
  margin-top: 6px !important;
  margin-bottom: 6px !important; }

.u-margin-vertical-small {
  margin-top: 12px !important;
  margin-bottom: 12px !important; }

.u-margin-vertical-large {
  margin-top: 48px !important;
  margin-bottom: 48px !important; }

.u-margin-vertical-huge {
  margin-top: 96px !important;
  margin-bottom: 96px !important; }

.u-margin-vertical-none {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

/* ==========================================================================
   #RESPONSIVE-SPACINGS
   ========================================================================== */
/**
 * Utility classes enhancing the normal spacing classes by adding responsiveness
 * to them. By default, there are not responsive spacings defined. You can
 * generate responsive spacings by adding entries to the following three Sass
 * maps, e.g.:
 *
 *   $inuit-responsive-spacing-directions: (
 *     null: null,
 *     bottom: bottom,
 *   );
 *
 *   $inuit-responsive-spacing-properties: (
 *     "margin": "margin",
 *   );
 *
 *   $inuit-responsive-spacing-sizes: (
 *     "-small": $inuit-global-spacing-unit-small,
 *   );
 *
 * This would bring us the following classes:
 *
 *   .u-margin-small@mobile {}
 *   .u-margin-small@tablet {}
 *   .u-margin-small@desktop {}
 *   .u-margin-small@wide {}
 *   .u-margin-bottom-small@mobile {}
 *   .u-margin-bottom-small@tablet {}
 *   .u-margin-bottom-small@desktop {}
 *   .u-margin-bottom-small@wide {}
 *
 * You can change the generated CSS classes by further extending the Sass maps.
 * If you want every ‘normal’ spacing (those from `utilities.spacings`) also as
 * a responsive version, you can just mirror the ‘normal’ spacings:
 *
 *   $inuit-responsive-spacing-directions: $inuit-spacing-directions !default;
 *
 *   $inuit-responsive-spacing-properties: $inuit-spacing-properties !default;
 *
 *   $inuit-responsive-spacing-sizes: $inuit-spacing-sizes !default;
 *
 * BUT BE AWARE: This can generate a huge chunk of extra CSS, depending on the
 * amount of breakpoints you defined. So please check your CSS’ output and
 * filesize!
 */
/* stylelint-disable max-nesting-depth */
/* stylelint-enable max-nesting-depth */
/* ==========================================================================
   #PRINT
   ========================================================================== */
/**
 * Very crude, reset-like styles taken from the HTML5 Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles
 * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282
 */
@media print {
  /**
   * 1. Black prints faster: http://www.sanbeiji.com/archives/953
   */
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* [1] */
    box-shadow: none !important;
    text-shadow: none !important; }
  a,
  a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  /**
   * Don’t show links that are fragment identifiers, or use the `javascript:`
   * pseudo protocol.
   */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""; }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  /**
   * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }
  h2,
  h3 {
    page-break-after: avoid; } }

/* ==========================================================================
   #HIDE
   ========================================================================== */
/**
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.u-hidden-visually {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important; }

/**
 * Hide visually and from screen readers.
 */
.u-hidden {
  display: none !important; }

/* ==========================================================================
   #FONTS UTILITIES
   ========================================================================== */
/**
  * 
  *
  *
  */
.u-fontsize--x-small {
  font-size: 0.6rem; }

.u-fontsize--small {
  font-size: 0.8rem; }

.u-font--headline {
  font-family: "Antarctica";
  letter-spacing: 0; }

.u-font-global-nav {
  font-size: 25px;
  font-variation-settings: 'wdth' 150, 'wght' 950; }

.u-font-global-nav--open {
  font-size: 33px;
  font-variation-settings: 'wdth' 150, 'wght' 950; }

.u-font-text-regular {
  font-size: 19px;
  letter-spacing: 0.19px;
  line-height: 26px; }

.u-font-small {
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 20px; }

/***********************
* COLORS
***********************/
.u-font-color-text {
  color: #08e600; }

.u-font-color-text-hover {
  color: #84ff80; }

.u-font-color-text-inactive {
  color: #e6ffe5; }

.u-font-color-text2 {
  color: #a48545; }

.u-font-color-text-hover2 {
  color: #ccb485; }

.u-font-color-text-inactive2 {
  color: #f1ebdf; }

.u-font-color-grey-mid {
  color: #bcbcbc; }

.u-font-color-grey-dark {
  color: #747474; }

.u-font-color-grey-light {
  color: #d9d9d9; }

/* ==========================================================================
   # Icon
   ========================================================================== */
/**
 * Sizing Utlilities for SVG-Icons
 * 
 *
 */
.u-icon {
  fill: #A48545;
  margin-right: 12px;
  height: 32px;
  width: 32px; }

/* ==========================================================================
   #Disabled
   ========================================================================== */
/**
  * Universal class to disable UI elements
  *
  * 1. reset cursor and disable click and hover events.
  */
.u-opacity-zero {
  opacity: 0 !important; }

.u-disabled {
  pointer-events: none;
  /* [1] */
  opacity: 0.3; }

@media (max-width: 63.99em) {
  .u-hiddenmobile {
    display: none; } }

@media (min-width: 64em) {
  .u-hiddendesktop {
    display: none; } }

/* ==========================================================================
   #Pointer Events
   ========================================================================== */
/**
  * Universal class to en-/disable pointer events
  *
  * 
  */
.u-pointer-events-enable {
  pointer-events: all; }

.u-pointer-events-disable {
  pointer-events: none; }

.u-pointer-events-enable-href > a {
  pointer-events: all !important; }

/* ==========================================================================
   # UI-SPACINGS
   ========================================================================== */
/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-ui-margin-top {}
 *   .u-ui-padding-left-l {}
 *   .u-ui-margin-right-s {}
 *   .u-ui-padding {}
 *   .u-ui-padding-right-none {}
 *   .u-ui-padding-horizontal {}
 *   .u-ui-padding-vertical-s {}
 */
.u-ui-padding {
  padding: 15px; }

.u-ui-padding-xs {
  padding: 5px; }

.u-ui-padding-s {
  padding: 10px; }

.u-ui-padding-m {
  padding: 15px; }

.u-ui-padding-l {
  padding: 30px; }

.u-ui-padding-xl {
  padding: 45px; }

.u-ui-padding-xxl {
  padding: 60px; }

.u-ui-padding-top {
  padding-top: 15px; }

.u-ui-padding-top-xs {
  padding-top: 5px; }

.u-ui-padding-top-s {
  padding-top: 10px; }

.u-ui-padding-top-m {
  padding-top: 15px; }

.u-ui-padding-top-l {
  padding-top: 30px; }

.u-ui-padding-top-xl {
  padding-top: 45px; }

.u-ui-padding-top-xxl {
  padding-top: 60px; }

.u-ui-padding-right {
  padding-right: 15px; }

.u-ui-padding-right-xs {
  padding-right: 5px; }

.u-ui-padding-right-s {
  padding-right: 10px; }

.u-ui-padding-right-m {
  padding-right: 15px; }

.u-ui-padding-right-l {
  padding-right: 30px; }

.u-ui-padding-right-xl {
  padding-right: 45px; }

.u-ui-padding-right-xxl {
  padding-right: 60px; }

.u-ui-padding-bottom {
  padding-bottom: 15px; }

.u-ui-padding-bottom-xs {
  padding-bottom: 5px; }

.u-ui-padding-bottom-s {
  padding-bottom: 10px; }

.u-ui-padding-bottom-m {
  padding-bottom: 15px; }

.u-ui-padding-bottom-l {
  padding-bottom: 30px; }

.u-ui-padding-bottom-xl {
  padding-bottom: 45px; }

.u-ui-padding-bottom-xxl {
  padding-bottom: 60px; }

.u-ui-padding-left {
  padding-left: 15px; }

.u-ui-padding-left-xs {
  padding-left: 5px; }

.u-ui-padding-left-s {
  padding-left: 10px; }

.u-ui-padding-left-m {
  padding-left: 15px; }

.u-ui-padding-left-l {
  padding-left: 30px; }

.u-ui-padding-left-xl {
  padding-left: 45px; }

.u-ui-padding-left-xxl {
  padding-left: 60px; }

.u-ui-padding-horizontal {
  padding-left: 15px;
  padding-right: 15px; }

.u-ui-padding-horizontal-xs {
  padding-left: 5px;
  padding-right: 5px; }

.u-ui-padding-horizontal-s {
  padding-left: 10px;
  padding-right: 10px; }

.u-ui-padding-horizontal-m {
  padding-left: 15px;
  padding-right: 15px; }

.u-ui-padding-horizontal-l {
  padding-left: 30px;
  padding-right: 30px; }

.u-ui-padding-horizontal-xl {
  padding-left: 45px;
  padding-right: 45px; }

.u-ui-padding-horizontal-xxl {
  padding-left: 60px;
  padding-right: 60px; }

.u-ui-padding-vertical {
  padding-top: 15px;
  padding-bottom: 15px; }

.u-ui-padding-vertical-xs {
  padding-top: 5px;
  padding-bottom: 5px; }

.u-ui-padding-vertical-s {
  padding-top: 10px;
  padding-bottom: 10px; }

.u-ui-padding-vertical-m {
  padding-top: 15px;
  padding-bottom: 15px; }

.u-ui-padding-vertical-l {
  padding-top: 30px;
  padding-bottom: 30px; }

.u-ui-padding-vertical-xl {
  padding-top: 45px;
  padding-bottom: 45px; }

.u-ui-padding-vertical-xxl {
  padding-top: 60px;
  padding-bottom: 60px; }

.u-ui-margin {
  margin: 15px; }

.u-ui-margin-xs {
  margin: 5px; }

.u-ui-margin-s {
  margin: 10px; }

.u-ui-margin-m {
  margin: 15px; }

.u-ui-margin-l {
  margin: 30px; }

.u-ui-margin-xl {
  margin: 45px; }

.u-ui-margin-xxl {
  margin: 60px; }

.u-ui-margin-top {
  margin-top: 15px; }

.u-ui-margin-top-xs {
  margin-top: 5px; }

.u-ui-margin-top-s {
  margin-top: 10px; }

.u-ui-margin-top-m {
  margin-top: 15px; }

.u-ui-margin-top-l {
  margin-top: 30px; }

.u-ui-margin-top-xl {
  margin-top: 45px; }

.u-ui-margin-top-xxl {
  margin-top: 60px; }

.u-ui-margin-right {
  margin-right: 15px; }

.u-ui-margin-right-xs {
  margin-right: 5px; }

.u-ui-margin-right-s {
  margin-right: 10px; }

.u-ui-margin-right-m {
  margin-right: 15px; }

.u-ui-margin-right-l {
  margin-right: 30px; }

.u-ui-margin-right-xl {
  margin-right: 45px; }

.u-ui-margin-right-xxl {
  margin-right: 60px; }

.u-ui-margin-bottom {
  margin-bottom: 15px; }

.u-ui-margin-bottom-xs {
  margin-bottom: 5px; }

.u-ui-margin-bottom-s {
  margin-bottom: 10px; }

.u-ui-margin-bottom-m {
  margin-bottom: 15px; }

.u-ui-margin-bottom-l {
  margin-bottom: 30px; }

.u-ui-margin-bottom-xl {
  margin-bottom: 45px; }

.u-ui-margin-bottom-xxl {
  margin-bottom: 60px; }

.u-ui-margin-left {
  margin-left: 15px; }

.u-ui-margin-left-xs {
  margin-left: 5px; }

.u-ui-margin-left-s {
  margin-left: 10px; }

.u-ui-margin-left-m {
  margin-left: 15px; }

.u-ui-margin-left-l {
  margin-left: 30px; }

.u-ui-margin-left-xl {
  margin-left: 45px; }

.u-ui-margin-left-xxl {
  margin-left: 60px; }

.u-ui-margin-horizontal {
  margin-left: 15px;
  margin-right: 15px; }

.u-ui-margin-horizontal-xs {
  margin-left: 5px;
  margin-right: 5px; }

.u-ui-margin-horizontal-s {
  margin-left: 10px;
  margin-right: 10px; }

.u-ui-margin-horizontal-m {
  margin-left: 15px;
  margin-right: 15px; }

.u-ui-margin-horizontal-l {
  margin-left: 30px;
  margin-right: 30px; }

.u-ui-margin-horizontal-xl {
  margin-left: 45px;
  margin-right: 45px; }

.u-ui-margin-horizontal-xxl {
  margin-left: 60px;
  margin-right: 60px; }

.u-ui-margin-vertical {
  margin-top: 15px;
  margin-bottom: 15px; }

.u-ui-margin-vertical-xs {
  margin-top: 5px;
  margin-bottom: 5px; }

.u-ui-margin-vertical-s {
  margin-top: 10px;
  margin-bottom: 10px; }

.u-ui-margin-vertical-m {
  margin-top: 15px;
  margin-bottom: 15px; }

.u-ui-margin-vertical-l {
  margin-top: 30px;
  margin-bottom: 30px; }

.u-ui-margin-vertical-xl {
  margin-top: 45px;
  margin-bottom: 45px; }

.u-ui-margin-vertical-xxl {
  margin-top: 60px;
  margin-bottom: 60px; }