@import url(https://fonts.googleapis.com/css?family=Raleway:400,700%7CRoboto:400,400i,500&display=swap);
/*
---
name: Colors
template: colors
tag:
 - variable
 - color
colors:
 - variable: "body"
   description: "The main background color"
   value: "#FFF"
 - variable: "text"
   description: "The default text color on the body"
   value: "#202023"
 - variable: "text-gray"
   description: "The default color for grayed-out text (e. g. for disabled items or subcaptions)"
   value: "#6A6A6A"
 - variable: "text-inverted"
   description: "The default inverted text color on the body"
   value: "#FFF"
 - variable: "action"
   description: "The main action color used for links and buttons"
   value: "#3031FE"
 - variable: "line"
   description: "The default color for lines (e. g. border lines)"
   value: "#e0e0e0"
 - variable: "success"
   description: "The color for positive feedback (e. g. confirmation messages)"
   value: "#00A685"
 - variable: "error"
   description: "The color for negative feedback (e. g. error messages)"
   value: "#DC153A"
---

Color variables that are used throughout the library are defined in the `theme.colors` hash.
By default, the following keys are defined:
*/
/*
---
name: Global settings
template: variables
tag:
 - variable
variables:
 - name: "text-line-height"
   description: "The line height of the body"
   default: "1.5rem"
 - name: "text-font"
   description: "The `font-family` to be used for regular text"
   default: "'Roboto', serif"
 - name: "heading-font"
   description: "The `font-family` to be used for headings (and possibly subcaptions)"
   default: "'Roboto', serif"
 - name: "text-rendering"
   description: "The `text-rendering` of the body"
   default: "optimizeLegibility"
 - name: "transition-duration"
   description: "The duration of the slide transitions"
   default: "0.3s"
 - name: "border-radius"
   description: "The default radius for borders"
   default: "2px"
---

The `theme.settings` hash defines several global settings for text formatting and styling:
*/
/*
---
name: Global Reset
category: Globals/Reset
tag:
 - reset
---

The lernetz css library has a set of reset style to have the same behaviour on every browser.
Furthermore this reset sets some global variables like:
 * body font-families
 * body line-height
 * body text-rendering
 * :root font-size for proper rem conversion
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: inherit;
  font-weight: inherit;
  vertical-align: baseline;
}
:root {
  font-size: 16px;
}
html {
  font-size: 100%;
}
body {
  line-height: 1.5rem;
  color: #202023;
  font-family: 'Roboto' , serif;
  text-rendering: optimizeLegibility;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
select {
  vertical-align: middle;
}
textarea {
  width: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  display: block;
}
ul,
ol {
  margin-left: 1.25rem;
}
.abs-layout {
  position: relative;
}
.abs-layout.-stretch {
  width: 100%;
  height: 100%;
}
.abs-layout > .item {
  position: absolute;
}
.abs-layout > .item.-top {
  top: 0;
}
.abs-layout > .item.-right {
  right: 0;
}
.abs-layout > .item.-bottom {
  bottom: 0;
}
.abs-layout > .item.-left {
  left: 0;
}
.abs-layout > .item.-vcenter {
  top: 50%;
  transform: translateY(-50%);
}
.abs-layout > .item.-hcenter {
  left: 50%;
  transform: translateX(-50%);
}
.abs-layout > .item.-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.abs-layout > .item.-stretch {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.abs-layout > .item.-z1 {
  z-index: 1;
}
.abs-layout > .item.-z2 {
  z-index: 2;
}
.abs-layout > .item.-z3 {
  z-index: 3;
}
.abs-layout > .item.-z4 {
  z-index: 4;
}
.abs-layout > .item.-z5 {
  z-index: 5;
}
.abs-layout > .item.-z6 {
  z-index: 6;
}
.abs-layout > .item.-z7 {
  z-index: 7;
}
.abs-layout > .item.-z8 {
  z-index: 8;
}
.abs-layout > .item.-z9 {
  z-index: 9;
}
.abs-layout > .item.-z10 {
  z-index: 10;
}
.border-style.-top {
  border-top-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
}
.border-style.-right {
  border-right-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
}
.border-style.-bottom {
  border-bottom-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
}
.border-style.-left {
  border-left-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
}
.border-style.-all {
  border-style: solid;
  border-width: 1px;
  border-color: #e0e0e0;
}
.border-style.-round {
  border-radius: 50%;
}
.button-style {
  appearance: none;
  background: transparent;
  border: none;
  display: inline-block;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
}
.button-style.-nowrap {
  white-space: nowrap;
}
.button-style.-action {
  background-color: #3031fe;
  color: #fff;
}
.button-style.-disabled {
  cursor: default;
}
.button-style.-main {
  color: #a04;
  background-color: #fff;
  padding: 0.5rem 1rem;
  border: 0.0625rem solid #a04;
  font-family: "Roboto";
  font-size: 1.125rem;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}
.button-style.-main.-hover:hover {
  color: #fff;
  background-color: #a04;
}
.button-style.-icons {
  color: #a04;
}
.button-style.-icons.-hover:hover {
  color: #90003a;
  background-color: inherit;
}
.button-style.-hover {
  transition: all 0.1s;
}
.button-style.-hover:hover {
  color: #fff;
  background-color: #a04;
}
.button-style.-inline {
  display: inline-block;
}
.color-box.-body {
  background-color: #fff;
  color: #202023;
}
.color-box.-action {
  background-color: #3031fe;
  color: #fff;
}
.color-box.-white {
  background-color: #fff;
  color: #000;
}
.color-box.-black {
  background-color: #000;
  color: #fff;
}
.color-box.-gray,
.composite-article.-grouped > .content {
  background-color: #ebebeb;
  color: #202023;
}
.color-box.-blue-footer {
  background-color: #361d2e;
  color: #fff;
}
.display-responsive.-hide-phone-only {
  display: initial;
}
@media all and (max-width: 599px) {
  .display-responsive.-hide-phone-only {
    display: none;
  }
}
.display-responsive.-show-phone-only {
  display: none;
}
@media all and (max-width: 599px) {
  .display-responsive.-show-phone-only {
    display: initial;
  }
}
.display-responsive.-hide-tablet-portrait-up {
  display: initial;
}
@media all and (min-width: 600px) {
  .display-responsive.-hide-tablet-portrait-up {
    display: none;
  }
}
.display-responsive.-show-tablet-portrait-up {
  display: none;
}
@media all and (min-width: 600px) {
  .display-responsive.-show-tablet-portrait-up {
    display: initial;
  }
}
.display-responsive.-hide-tablet-landscape-up {
  display: initial;
}
@media all and (min-width: 900px) {
  .display-responsive.-hide-tablet-landscape-up {
    display: none;
  }
}
.display-responsive.-show-tablet-landscape-up {
  display: none;
}
@media all and (min-width: 900px) {
  .display-responsive.-show-tablet-landscape-up {
    display: initial;
  }
}
.display-responsive.-hide-desktop-up {
  display: initial;
}
@media all and (min-width: 1200px) {
  .display-responsive.-hide-desktop-up {
    display: none;
  }
}
.display-responsive.-show-desktop-up {
  display: none;
}
@media all and (min-width: 1200px) {
  .display-responsive.-show-desktop-up {
    display: initial;
  }
}
.display-responsive.-hide-big-desktop-up {
  display: initial;
}
@media all and (min-width: 1800px) {
  .display-responsive.-hide-big-desktop-up {
    display: none;
  }
}
.display-responsive.-show-big-desktop-up {
  display: none;
}
@media all and (min-width: 1800px) {
  .display-responsive.-show-big-desktop-up {
    display: initial;
  }
}
.element-layout {
  margin-left: auto;
  margin-right: auto;
}
.element-layout:not(.-fullwidth ) {
  max-width: 48.75rem;
}
.element-layout.-extended {
  max-width: 58.75rem;
}
.element-layout.-padded {
  padding-left: 1rem;
  padding-right: 1rem;
}
.element-layout.-padded:not(.-fullwidth ) {
  max-width: 50.75rem;
}
.element-layout.-padded.-extended {
  max-width: 50.75rem;
}
.element-layout + .element-layout {
  margin-top: 1rem;
}
.fixed-layout {
  position: fixed;
}
.fixed-layout.-top {
  top: 0;
}
.fixed-layout.-bottom {
  bottom: 0;
}
.fixed-layout.-left {
  left: 0;
}
.fixed-layout.-right {
  right: 0;
}
.fixed-page-layout > .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3.125rem;
}
.fixed-page-layout > .header.-small {
  height: 1.875rem;
}
.fixed-page-layout > .header.-hide {
  transform: translateY(-100%);
}
.fixed-page-layout > .sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 14.5625rem;
}
.fixed-page-layout > .sidebar.-small {
  width: 3.125rem;
}
.fixed-page-layout > .sidebar.-big {
  width: 23.75rem;
}
.fixed-page-layout > .sidebar.-margin-top {
  top: 3.125rem;
}
.fixed-page-layout > .sidebar.-margin-top-small {
  top: 1.875rem;
}
.fixed-page-layout > .sidebar.-left {
  left: 0;
}
.fixed-page-layout > .sidebar.-left.-hide {
  transform: translateX(-100%);
}
.fixed-page-layout > .sidebar.-right {
  right: 0;
}
.fixed-page-layout > .sidebar.-right.-hide {
  transform: translateX(100%);
}
.fixed-page-layout > .content.-margin-right {
  margin-right: 14.5625rem;
}
.fixed-page-layout > .content.-margin-left {
  margin-left: 14.5625rem;
}
.fixed-page-layout > .content.-margin-right-small {
  margin-right: 3.125rem;
}
.fixed-page-layout > .content.-margin-left-small {
  margin-left: 3.125rem;
}
.fixed-page-layout > .content.-margin-right-big {
  margin-right: 23.75rem;
}
.fixed-page-layout > .content.-margin-left-big {
  margin-left: 23.75rem;
}
.fixed-page-layout > .content.-margin-top {
  margin-top: 3.125rem;
}
.fixed-page-layout > .content.-margin-top-small {
  margin-top: 1.875rem;
}
.flex-layout {
  display: flex;
}
.flex-layout.-inline {
  display: flex-inline;
}
.flex-layout.-wrap {
  flex-wrap: wrap;
}
.flex-layout.-row {
  flex-wrap: nowrap;
}
.flex-layout.-row > .item {
  flex: 1 1 auto;
}
.flex-layout.-column {
  flex-direction: column;
}
.flex-layout.-center {
  justify-content: center;
  align-items: center;
  align-content: center;
}
.flex-layout.-baseline {
  align-items: baseline;
}
.flex-layout.-left {
  justify-content: flex-start;
}
.flex-layout.-right {
  justify-content: flex-end;
}
.flex-layout.-top {
  align-content: flex-start;
}
.flex-layout.-bottom {
  align-content: flex-end;
}
.flex-layout.-v-center {
  align-content: center;
}
.flex-layout.-v-space-between {
  align-content: space-between;
}
.flex-layout.-v-space-around {
  align-content: space-around;
}
.flex-layout.-h-center {
  justify-content: center;
}
.flex-layout.-h-space-between {
  justify-content: space-between;
}
.flex-layout.-h-space-around {
  justify-content: space-around;
}
.flex-layout.-items-top {
  align-items: flex-start;
}
.flex-layout.-items-bottom {
  align-items: flex-end;
}
.flex-layout.-items-center {
  align-items: center;
}
.flex-layout.-items-stretch {
  align-items: flex-stretch;
}
.flex-layout > .item.-stretch {
  align-self: stretch;
}
.flex-layout > .item.-top {
  align-self: flex-start;
}
.flex-layout > .item.-center {
  align-self: center;
}
.flex-layout > .item.-bottom {
  align-self: flex-end;
}
.flex-layout > .item.-content {
  flex: none;
}
.flex-layout > .item.-grow {
  flex-grow: 1;
}
.flex-layout > .item.-shrink {
  flex-shrink: 1;
}
.flex-layout > .item.-no-grow {
  flex-grow: 0;
}
.flex-layout > .item.-no-shrink {
  flex-shrink: 0;
}
.grid-layout {
  display: flex;
  flex-wrap: wrap;
}
.grid-layout.-gutter {
  margin: -0.625rem -0.9375rem;
}
.grid-layout.-gutter > .item {
  padding: 0.625rem 0.9375rem;
}
.grid-layout.-reverse {
  flex-direction: row-reverse;
}
.grid-layout > .item.-w1 {
  flex: 0 0 100%;
  max-width: 100%;
}
.grid-layout > .item.-w1-2 {
  flex: 0 0 50%;
  max-width: 50%;
}
.grid-layout > .item.-w1-3 {
  flex: 0 0 33.333333333333336%;
  max-width: 33.333333333333336%;
}
.grid-layout > .item.-w2-3 {
  flex: 0 0 66.66666666666667%;
  max-width: 66.66666666666667%;
}
.grid-layout > .item.-w1-4 {
  flex: 0 0 25%;
  max-width: 25%;
}
.grid-layout > .item.-w3-4 {
  flex: 0 0 75%;
  max-width: 75%;
}
@media all and (max-width: 599px) {
  .grid-layout > .item.-phone-only-1 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .grid-layout > .item.-phone-only-1-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout > .item.-phone-only-1-3 {
    flex: 0 0 33.333333333333336%;
    max-width: 33.333333333333336%;
  }
  .grid-layout > .item.-phone-only-2-3 {
    flex: 0 0 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
  .grid-layout > .item.-phone-only-1-4 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout > .item.-phone-only-3-4 {
    flex: 0 0 75%;
    max-width: 75%;
  }
}
@media all and (min-width: 600px) {
  .grid-layout > .item.-tablet-portrait-up-1 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .grid-layout > .item.-tablet-portrait-up-1-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout > .item.-tablet-portrait-up-1-3 {
    flex: 0 0 33.333333333333336%;
    max-width: 33.333333333333336%;
  }
  .grid-layout > .item.-tablet-portrait-up-2-3 {
    flex: 0 0 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
  .grid-layout > .item.-tablet-portrait-up-1-4 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout > .item.-tablet-portrait-up-3-4 {
    flex: 0 0 75%;
    max-width: 75%;
  }
}
@media all and (min-width: 900px) {
  .grid-layout > .item.-tablet-landscape-up-1 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .grid-layout > .item.-tablet-landscape-up-1-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout > .item.-tablet-landscape-up-1-3 {
    flex: 0 0 33.333333333333336%;
    max-width: 33.333333333333336%;
  }
  .grid-layout > .item.-tablet-landscape-up-2-3 {
    flex: 0 0 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
  .grid-layout > .item.-tablet-landscape-up-1-4 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout > .item.-tablet-landscape-up-3-4 {
    flex: 0 0 75%;
    max-width: 75%;
  }
}
@media all and (min-width: 1200px) {
  .grid-layout > .item.-desktop-up-1 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .grid-layout > .item.-desktop-up-1-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout > .item.-desktop-up-1-3 {
    flex: 0 0 33.333333333333336%;
    max-width: 33.333333333333336%;
  }
  .grid-layout > .item.-desktop-up-2-3 {
    flex: 0 0 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
  .grid-layout > .item.-desktop-up-1-4 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout > .item.-desktop-up-3-4 {
    flex: 0 0 75%;
    max-width: 75%;
  }
}
@media all and (min-width: 1800px) {
  .grid-layout > .item.-big-desktop-up-1 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .grid-layout > .item.-big-desktop-up-1-2 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout > .item.-big-desktop-up-1-3 {
    flex: 0 0 33.333333333333336%;
    max-width: 33.333333333333336%;
  }
  .grid-layout > .item.-big-desktop-up-2-3 {
    flex: 0 0 66.66666666666667%;
    max-width: 66.66666666666667%;
  }
  .grid-layout > .item.-big-desktop-up-1-4 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout > .item.-big-desktop-up-3-4 {
    flex: 0 0 75%;
    max-width: 75%;
  }
}
._z-1 {
  z-index: 1;
}
._z-2 {
  z-index: 2;
}
._z-3 {
  z-index: 3;
}
._z-4 {
  z-index: 4;
}
._z-5 {
  z-index: 5;
}
._z-6 {
  z-index: 6;
}
._absolute {
  position: absolute;
}
._relative {
  position: relative;
}
._fixed {
  position: fixed;
}
._sticky {
  position: sticky;
}
._static {
  position: static;
}
._block {
  display: block;
}
._inline-block {
  display: inline-block;
}
._inline {
  display: inline;
}
._flex {
  display: flex;
}
._inline-flex {
  display: inline-flex;
}
._table {
  display: table;
}
._table-row {
  display: table-row;
}
._table-cell {
  display: table-cell;
}
._hidden {
  display: none   !important;
}
._visible {
  visibility: visible;
}
._invisible {
  visibility: hidden;
}
.image-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}
.image-responsive.-full {
  width: 100%;
}
.image-responsive.-inset {
  max-height: 100%;
}
@media all and (max-width: 599px) {
  .max-width-layout {
    max-width: 23.4375rem;
  }
}
@media all and (min-width: 600px) {
  .max-width-layout {
    max-width: 48rem;
  }
}
@media all and (min-width: 900px) {
  .max-width-layout {
    max-width: 64rem;
  }
}
@media all and (min-width: 1200px) {
  .max-width-layout {
    max-width: 90rem;
  }
}
.max-width-layout.-center {
  margin-left: auto;
  margin-right: auto;
}
.media-responsive {
  width: 100%;
  position: relative;
  padding-bottom: 100%;
}
.media-responsive.-media-1-1 {
  padding-bottom: 100%;
}
.media-responsive.-media-4-3 {
  padding-bottom: 75%;
}
.media-responsive.-media-16-9 {
  padding-bottom: 56.25%;
}
.media-responsive > .media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.overflow-text {
  overflow: hidden;
  position: relative;
}
.overflow-text:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 2.1875rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%);
}
.shadow-box {
  box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.17);
}
.shadow-box.-inset {
  box-shadow: inset 0px 1px 6px 0px rgba(0,0,0,0.17);
}
.shadow-box.-zero {
  box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.17);
}
.spacer-box.-m-top-xxs {
  margin-top: 0.125rem;
}
.spacer-box.-p-top-xxs {
  padding-top: 0.125rem;
}
.spacer-box.-m-right-xxs {
  margin-right: 0.125rem;
}
.spacer-box.-p-right-xxs {
  padding-right: 0.125rem;
}
.spacer-box.-m-bottom-xxs {
  margin-bottom: 0.125rem;
}
.spacer-box.-p-bottom-xxs {
  padding-bottom: 0.125rem;
}
.spacer-box.-m-left-xxs {
  margin-left: 0.125rem;
}
.spacer-box.-p-left-xxs {
  padding-left: 0.125rem;
}
.spacer-box.-m-h-xxs {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.spacer-box.-m-v-xxs {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.spacer-box.-m-xxs {
  margin: 0.125rem 0.125rem;
}
.spacer-box.-m-between-v-xxs + .spacer-box.-m-between-v-xxs {
  margin-top: 0.125rem;
}
.spacer-box.-m-between-h-xxs + .spacer-box.-m-between-h-xxs {
  margin-left: 0.125rem;
}
.spacer-box.-p-h-xxs {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.spacer-box.-p-v-xxs {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.spacer-box.-p-xxs {
  padding: 0.125rem 0.125rem;
}
.spacer-box.-m-top-xs {
  margin-top: 0.3rem;
}
.spacer-box.-p-top-xs {
  padding-top: 0.3rem;
}
.spacer-box.-m-right-xs {
  margin-right: 0.3rem;
}
.spacer-box.-p-right-xs {
  padding-right: 0.3rem;
}
.spacer-box.-m-bottom-xs {
  margin-bottom: 0.3rem;
}
.spacer-box.-p-bottom-xs {
  padding-bottom: 0.3rem;
}
.spacer-box.-m-left-xs {
  margin-left: 0.3rem;
}
.spacer-box.-p-left-xs {
  padding-left: 0.3rem;
}
.spacer-box.-m-h-xs {
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}
.spacer-box.-m-v-xs {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
.spacer-box.-m-xs {
  margin: 0.3rem 0.3rem;
}
.spacer-box.-m-between-v-xs + .spacer-box.-m-between-v-xs {
  margin-top: 0.3rem;
}
.spacer-box.-m-between-h-xs + .spacer-box.-m-between-h-xs {
  margin-left: 0.3rem;
}
.spacer-box.-p-h-xs {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}
.spacer-box.-p-v-xs {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.spacer-box.-p-xs {
  padding: 0.3rem 0.3rem;
}
.spacer-box.-m-top-s {
  margin-top: 0.9rem;
}
.spacer-box.-p-top-s {
  padding-top: 0.9rem;
}
.spacer-box.-m-right-s {
  margin-right: 0.9rem;
}
.spacer-box.-p-right-s {
  padding-right: 0.9rem;
}
.spacer-box.-m-bottom-s {
  margin-bottom: 0.9rem;
}
.spacer-box.-p-bottom-s {
  padding-bottom: 0.9rem;
}
.spacer-box.-m-left-s {
  margin-left: 0.9rem;
}
.spacer-box.-p-left-s {
  padding-left: 0.9rem;
}
.spacer-box.-m-h-s {
  margin-left: 0.9rem;
  margin-right: 0.9rem;
}
.spacer-box.-m-v-s {
  margin-top: 0.9rem;
  margin-bottom: 0.9rem;
}
.spacer-box.-m-s {
  margin: 0.9rem 0.9rem;
}
.spacer-box.-m-between-v-s + .spacer-box.-m-between-v-s {
  margin-top: 0.9rem;
}
.spacer-box.-m-between-h-s + .spacer-box.-m-between-h-s {
  margin-left: 0.9rem;
}
.spacer-box.-p-h-s {
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}
.spacer-box.-p-v-s {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.spacer-box.-p-s {
  padding: 0.9rem 0.9rem;
}
.spacer-box.-m-top {
  margin-top: 1rem;
}
.spacer-box.-p-top {
  padding-top: 1rem;
}
.spacer-box.-m-right {
  margin-right: 1rem;
}
.spacer-box.-p-right {
  padding-right: 1rem;
}
.spacer-box.-m-bottom {
  margin-bottom: 1rem;
}
.spacer-box.-p-bottom {
  padding-bottom: 1rem;
}
.spacer-box.-m-left {
  margin-left: 1rem;
}
.spacer-box.-p-left {
  padding-left: 1rem;
}
.spacer-box.-m-h {
  margin-left: 1rem;
  margin-right: 1rem;
}
.spacer-box.-m-v {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.spacer-box.-m {
  margin: 1rem 1rem;
}
.spacer-box.-m-between-v + .spacer-box.-m-between-v {
  margin-top: 1rem;
}
.spacer-box.-m-between-h + .spacer-box.-m-between-h {
  margin-left: 1rem;
}
.spacer-box.-p-h {
  padding-left: 1rem;
  padding-right: 1rem;
}
.spacer-box.-p-v {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.spacer-box.-p {
  padding: 1rem 1rem;
}
.spacer-box.-m-top-l {
  margin-top: 2rem;
}
.spacer-box.-p-top-l {
  padding-top: 2rem;
}
.spacer-box.-m-right-l {
  margin-right: 2rem;
}
.spacer-box.-p-right-l {
  padding-right: 2rem;
}
.spacer-box.-m-bottom-l,
.composite-article > .content {
  margin-bottom: 2rem;
}
.spacer-box.-p-bottom-l {
  padding-bottom: 2rem;
}
.spacer-box.-m-left-l {
  margin-left: 2rem;
}
.spacer-box.-p-left-l {
  padding-left: 2rem;
}
.spacer-box.-m-h-l {
  margin-left: 2rem;
  margin-right: 2rem;
}
.spacer-box.-m-v-l {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.spacer-box.-m-l {
  margin: 2rem 2rem;
}
.spacer-box.-m-between-v-l + .spacer-box.-m-between-v-l {
  margin-top: 2rem;
}
.spacer-box.-m-between-h-l + .spacer-box.-m-between-h-l {
  margin-left: 2rem;
}
.spacer-box.-p-h-l,
.composite-article > .content,
.foldable-element > .content {
  padding-left: 2rem;
  padding-right: 2rem;
}
.spacer-box.-p-v-l,
.composite-article.-grouped > .content {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.spacer-box.-p-l,
.foldable-element.-video > .content {
  padding: 2rem 2rem;
}
.spacer-box.-m-top-xl {
  margin-top: 4rem;
}
.spacer-box.-p-top-xl {
  padding-top: 4rem;
}
.spacer-box.-m-right-xl {
  margin-right: 4rem;
}
.spacer-box.-p-right-xl {
  padding-right: 4rem;
}
.spacer-box.-m-bottom-xl {
  margin-bottom: 4rem;
}
.spacer-box.-p-bottom-xl {
  padding-bottom: 4rem;
}
.spacer-box.-m-left-xl {
  margin-left: 4rem;
}
.spacer-box.-p-left-xl {
  padding-left: 4rem;
}
.spacer-box.-m-h-xl {
  margin-left: 4rem;
  margin-right: 4rem;
}
.spacer-box.-m-v-xl {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.spacer-box.-m-xl {
  margin: 4rem 4rem;
}
.spacer-box.-m-between-v-xl + .spacer-box.-m-between-v-xl {
  margin-top: 4rem;
}
.spacer-box.-m-between-h-xl + .spacer-box.-m-between-h-xl {
  margin-left: 4rem;
}
.spacer-box.-p-h-xl {
  padding-left: 4rem;
  padding-right: 4rem;
}
.spacer-box.-p-v-xl {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.spacer-box.-p-xl {
  padding: 4rem 4rem;
}
.spacer-box.-m-top-xxl {
  margin-top: 8rem;
}
.spacer-box.-p-top-xxl {
  padding-top: 8rem;
}
.spacer-box.-m-right-xxl {
  margin-right: 8rem;
}
.spacer-box.-p-right-xxl {
  padding-right: 8rem;
}
.spacer-box.-m-bottom-xxl {
  margin-bottom: 8rem;
}
.spacer-box.-p-bottom-xxl {
  padding-bottom: 8rem;
}
.spacer-box.-m-left-xxl {
  margin-left: 8rem;
}
.spacer-box.-p-left-xxl {
  padding-left: 8rem;
}
.spacer-box.-m-h-xxl {
  margin-left: 8rem;
  margin-right: 8rem;
}
.spacer-box.-m-v-xxl {
  margin-top: 8rem;
  margin-bottom: 8rem;
}
.spacer-box.-m-xxl {
  margin: 8rem 8rem;
}
.spacer-box.-m-between-v-xxl + .spacer-box.-m-between-v-xxl {
  margin-top: 8rem;
}
.spacer-box.-m-between-h-xxl + .spacer-box.-m-between-h-xxl {
  margin-left: 8rem;
}
.spacer-box.-p-h-xxl {
  padding-left: 8rem;
  padding-right: 8rem;
}
.spacer-box.-p-v-xxl {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.spacer-box.-p-xxl {
  padding: 8rem 8rem;
}
.spacer-box.-auto {
  margin-left: auto;
  margin-right: auto;
}
.svg-icon {
  fill: currentColor;
  display: block;
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
}
.svg-icon.-inline {
  display: inline-block;
}
.svg-icon.-scale {
  width: 100%;
  height: 100%;
}
.text-style.-center {
  text-align: center;
}
.text-style.-right {
  text-align: right;
}
.text-style.-bold {
  font-weight: 700;
}
.text-style.-medium {
  font-weight: 500;
}
.text-style.-inverted {
  color: #fff;
}
.text-style.-indent-1 {
  padding-left: 1.875rem;
}
.text-style.-indent-2 {
  padding-left: 3.75rem;
}
.text-style.-indent-3 {
  padding-left: 5.625rem;
}
.text-style.-indent-4 {
  padding-left: 7.5rem;
}
.text-style.-indent-5 {
  padding-left: 9.375rem;
}
.text-style.-indent-6 {
  padding-left: 11.25rem;
}
.text-style.-h1 {
  color: #a04;
  font-family: Raleway;
  font-size: 2.75rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.23;
  letter-spacing: normal;
}
.text-style.-h2 {
  color: #a04;
  font-family: "Raleway";
  font-size: 1.875rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
}
.text-style.-h3 {
  color: #202023;
  font-family: "Raleway";
  font-size: 1.625rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: normal;
}
.text-style.-h4,
.foldable-element > .toggler > .buttontext {
  color: #202023;
  font-family: "Raleway";
  font-size: 1.3125rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.48;
  letter-spacing: normal;
}
.text-style.-header-title {
  color: #a04;
  font-family: "Raleway";
  font-size: 1.25rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0.53px;
  text-align: center;
}
.text-style.-footer-title {
  color: #fff;
  font-family: "Raleway";
  font-size: 1.125rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}
.text-style.-intro {
  color: #202023;
  font-family: "Roboto";
  font-size: 1.75rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
}
.text-style.-normal,
.foldable-element.-video > .toggler > .buttontext {
  color: #202023;
  font-family: "Roboto";
  font-size: 1.3125rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.62;
  letter-spacing: normal;
}
.text-style.-normal p + p,
.foldable-element.-video > .toggler > .buttontext p + p {
  margin-top: 0.75rem;
}
.text-style.-caption {
  color: #361d2e;
  font-family: "Roboto";
  font-size: 1rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: center;
}
.text-style.-card-title {
  color: #a04;
  font-family: "Raleway";
  font-size: 1.125rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
}
.text-style.-link {
  cursor: pointer;
  color: #a04;
  transition: all 0.1s;
}
.text-style.-link:hover {
  color: #90003a;
}
.text-style.-underline {
  text-decoration: underline;
}
.text-style.-action {
  color: #a04;
}
.text-style.-white {
  color: #fff;
}
.text-style.-i {
  color: #361d2e;
  font-family: "Roboto";
  font-size: 1.125rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: italic;
  line-height: 1.33;
  letter-spacing: normal;
}
.text-style.-b {
  font-weight: bold;
}
.text-style.-u {
  text-decoration: underline;
}
.text-style.-a:link {
  text-decoration: underline;
}
.text-style.-a:hover {
  color: #361d2e;
}
.text-style.-a-footer {
  cursor: pointer;
}
.text-style.-a-footer:hover {
  text-decoration: underline;
}
.text-style.-list {
  margin-left: 2rem;
}
.transform-style.-rot90 {
  transform: rotate(90deg);
}
.transform-style.-rot180 {
  transform: rotate(180deg);
}
.transform-style.-rot270 {
  transform: rotate(270deg);
}
.transform-style.-flipX {
  transform: scaleX(-1);
}
.transform-style.-flipY {
  transform: scaleY(-1);
}
.transition-style {
  transition-property: all;
  transition-duration: 0.3s;
}
.transition-style.-slow {
  transition-duration: 0.6s;
}
.transition-style.-fast {
  transition-duration: 0.15s;
}
.evaluation-feedback.-bg-20.-correct {
  background: rgba(0,136,0,0.2);
}
.evaluation-feedback.-bg-20.-incorrect {
  background: rgba(204,0,0,0.2);
}
.evaluation-feedback.-border.-correct {
  border-color: #080;
}
.evaluation-feedback.-border.-incorrect {
  border-color: #c00;
}
.evaluation-feedback.-fg.-correct {
  color: #080;
}
.evaluation-feedback.-fg.-incorrect {
  color: #c00;
}
.burger-menu-icon {
  display: inline-block;
}
.burger-menu-icon.-close > .top {
  transform: translateY(8px) rotateZ(45deg);
}
.burger-menu-icon.-close > .bot {
  transform: translateY(-8px) rotateZ(-45deg);
}
.burger-menu-icon.-close > .mid {
  opacity: 0;
  transform: translateX(10px);
}
.burger-menu-icon > .line {
  height: 3px;
  width: 24px;
  background-color: currentColor;
}
.burger-menu-icon > .line + .line {
  margin-top: 5px;
}
.carousel-box {
  position: relative;
  z-index: 0;
}
.carousel-box > .content {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.carousel-box > .dots {
  position: absolute;
  width: 100%;
  bottom: 0.9rem;
  z-index: 1;
}
.carousel-box > .dots > div > .dot {
  border: solid 1px rgba(255,255,255,0.25);
  height: 16px;
  width: 16px;
  border-radius: 50%;
  margin: 0 3px;
  cursor: pointer;
}
.carousel-box > .dots > div > .dot.-active {
  background-color: rgba(255,255,255,0.75);
}
.carousel-box > .dots > div > .dot:not(.-disabled):hover {
  background-color: #fff;
}
.carousel-box > .dots > div > .dot.-disabled {
  cursor: default;
  cursor: unset;
}
.carousel-box > .nav {
  position: absolute;
  user-select: none;
  background-color: #fff;
  top: 50%;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  opacity: 0.25;
}
.carousel-box > .nav.-left {
  left: 0.9rem;
}
.carousel-box > .nav.-right {
  right: 0.9rem;
}
.carousel-box > .nav.-disabled {
  cursor: default;
  cursor: unset;
}
.carousel-box > .nav:hover:not(.-disabled) {
  opacity: 1;
}
.collapse-box {
  display: flex;
  max-height: 20px;
  overflow: hidden;
}
.crossfade-box {
  transition: height 0.4s;
}
.crossfade-box > .front {
  position: absolute;
  width: 100%;
  transition: opacity 0s;
  z-index: 2;
}
.crossfade-box > .front.-do-transition {
  transition: opacity 0.4s;
  opacity: 0;
}
.crossfade-box > .back {
  position: absolute;
  width: 100%;
  z-index: -1;
}
/*
---
name: DropDown
category: UI/DropDown
tag:
 - component
 - dropdown
compile: true
---

A dropdown list to select one option out of many in the list.

## Example
```jade
div(view='DropDown',items='[[ [ { "label":"option 1", "value":1 }, { "label":"option 2", "value":2 }, { "label":"option 3", "value":3 } ] ]]')
```
*/
.drop-down:not(.-open ) > .list {
  display: none;
}
.drop-down.-float {
  position: relative;
}
.drop-down.-float > .list {
  position: absolute;
  z-index: 1000;
}
.drop-down.-float > .list.-v-t-l {
  bottom: 100%;
}
.drop-down.-float > .list.-v-t-r {
  right: 0;
  bottom: 100%;
}
.drop-down.-float > .list.-h-t-r {
  right: 0;
  bottom: 100%;
  transform: translate(100%, 100%);
}
.drop-down.-float > .list.-h-b-r {
  right: 0;
  bottom: 0;
  transform: translate(100%, 0%);
}
.drop-down.-float > .list.-v-b-r {
  right: 0;
}
.drop-down.-float > .list.-h-t-l {
  top: 0;
  transform: translate(-100%, 0);
}
.drop-down.-float > .list.-h-b-l {
  bottom: 0;
  transform: translate(-100%, 0);
}
.drag-drop-question .drag {
  background: #d0d0d0;
}
.drag-drop-question .drag:not(.-disabled):hover {
  cursor: pointer;
}
.drag-drop-question .drop {
  margin: 0.9rem;
  padding: 1rem;
}
.drag-drop-question .drop:not(.-base) {
  background: #f8f8f8;
  border: solid 2px transparent;
}
.drag-drop-question .drop:not(.-base):not(.-disabled):hover {
  background: #f2f2f2;
  cursor: pointer;
}
.drag-drop-question .drop:not(.-base):not(.-disabled).-selected {
  background: #ececec;
  border: dotted 2px #444;
}
.HotSpotQuiz {
  position: relative;
  display: inline-block;
}
.HotSpotQuiz > .hotSpotAreas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.HotSpotQuiz > .hotSpotAreas .area {
  position: absolute;
}
.HotSpotQuiz > .spots > .spot {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.2);
}
.text-selection .button-style {
  user-select: none;
}
.text-selection .button-style.-disabled,
.text-selection .button-style.-disabled:hover {
  cursor: default;
  cursor: unset;
}
.text-selection .category,
.text-selection .part {
  border: solid 2px transparent;
  border-radius: 2px;
}
.text-selection .category.-default,
.text-selection .part.-default {
  background-color: #c1b7ae;
}
.text-selection .category.-turquoise,
.text-selection .part.-turquoise {
  background-color: #40e0d0;
}
.text-selection .category.-brown,
.text-selection .part.-brown {
  background-color: #a52a2a;
}
.text-selection .category.-yellow,
.text-selection .part.-yellow {
  background-color: #ff0;
}
.text-selection .category.-green,
.text-selection .part.-green {
  background-color: #008000;
}
.text-selection .category.-orange,
.text-selection .part.-orange {
  background-color: #ffa500;
}
.text-selection .category.-violet,
.text-selection .part.-violet {
  background-color: #ee82ee;
}
.text-selection .category.-red,
.text-selection .part.-red {
  background-color: #f00;
}
.text-selection .category {
  font-size: 133%;
  user-select: none;
}
.text-selection .category.-selected:not(.-disabled) {
  box-shadow: 0 0 5px rgba(0,0,0,0.66);
}
.text-selection .part {
  margin: 1px -1px;
}
.text-selection .part.-punctuation.-postfix {
  margin-left: -4px;
}
.text-selection .part.-punctuation.-prefix {
  margin-right: -4px;
}
.tooltip-box {
  overflow: hidden;
}
.tooltip-box .tooltip {
  display: inline-block;
  background-color: rgba(0,0,0,0.66);
  border-radius: 2px;
  box-shadow: 0 1px 6px #000;
  padding: 12px;
  color: #fff;
  transform: translate(-50%, -100%);
  max-width: 66%;
}
.answer-element {
  white-space: initial;
}
.composite-article > .toggler .text-style {
  white-space: initial;
}
.composite-article .element-layout.-read:first-child {
  padding-top: 0;
}
.composite-article.-fold-open {
  border-bottom: 0.0625rem solid #ebebeb;
}
.composite-article.-fold-open > .content {
  border-left: 0.375rem solid #a04;
}
.composite-article.-fold-close {
  border-bottom: 0.0625rem solid #ebebeb;
}
.composite-article.-fold-close > .content {
  display: none;
}
@media print {
  .composite-article.-fold-close > .content {
    display: inherit;
  }
}
.composite-article.-grouped > .content .text-style.-h1 {
  color: #770030;
}
.composite-article.-grouped > .content .text-style.-normal {
  color: #770030;
}
.composite-article.-grouped > .toggler {
  display: none;
}
.cover-image {
  height: 55vh;
  background-size: cover;
  background-position: center;
}
.element-layout {
  margin-left: auto;
  margin-right: auto;
}
.element-layout + .element-layout {
  margin-top: 2rem;
}
.element-layout.-read {
  max-width: 49.6875rem;
}
@media screen and (max-width: 820px) {
  .element-layout.-read {
    max-width: 88vw;
  }
}
.element-layout.-read:first-child {
  padding-top: 2rem;
}
.element-layout.-extended {
  max-width: 60rem;
}
@media screen and (max-width: 1000px) {
  .element-layout.-extended {
    max-width: 88vw;
  }
}
.element-layout.-full {
  width: 100%;
}
.element-layout.-full.-image > .image-responsive {
  width: 100%;
}
.element-layout.-full + .element-layout {
  margin-top: 5rem;
}
.exam-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feedback-chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.625rem;
  background-color: #fff;
}
.feedback-container {
  min-height: 3.75rem;
}
.feedback-container > .button {
  position: absolute;
  z-index: 1;
  transform: translateY(-50%);
}
.feedback-container > .feedback.-positive {
  background-color: #dcf3d6;
}
.feedback-container > .feedback.-negative {
  background-color: #ffdbd8;
}
.feedback-container > .feedback.-neutral {
  background-color: #f1f1f1;
}
.feedback-data {
  width: 100%;
  color: #c2c2c2;
}
.feedback-data .svg {
  background-color: #f1f1f1;
}
.feedback-data .bar {
  fill: #c2c2c2;
}
.feedback-data .bar.-selected {
  fill: #a04;
}
.feedback-data .domain-x .domain {
  stroke: transparent;
}
.feedback-data .domain-x .tick line {
  stroke: transparent;
}
@media print {
  .fixed-page-layout > .header {
    display: none;
  }
}
.foldable-element {
  border-bottom: 0.0625rem solid #ebebeb;
}
.foldable-element.-folded > .content {
  display: none;
}
@media print {
  .foldable-element.-folded > .content {
    display: inherit;
  }
}
.foldable-element > .content {
  border-left: 0.375rem solid #a04;
  margin-bottom: 1.625rem;
}
.foldable-element > .content.-image {
  margin-bottom: 0;
  padding-bottom: 1.625rem;
}
.foldable-element > .toggler {
  cursor: pointer;
}
.foldable-element.-video {
  border-bottom: 0;
}
.foldable-element.-video > .content {
  background-color: rgba(170,0,68,0.25);
  border-left: 0;
  margin-bottom: 0;
}
.header-line {
  position: fixed;
  top: 3.125rem;
  height: 0.25rem;
  width: 100%;
  margin-top: 0.0625rem;
}
.header-line > .module {
  height: 100%;
}
.header-line > .module > .percent {
  height: 100%;
  background-color: #a04;
}
@media print {
  .header-line {
    display: none;
  }
}
.input-slider {
  -webkit-appearance: none;
  width: 100%;
  margin: 5px 0;
}
.input-slider:focus {
  outline: none;
}
.input-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.25rem;
  cursor: pointer;
  background: #ebebeb;
  border-radius: 0.125rem;
  border: 0;
}
.input-slider::-webkit-slider-thumb {
  border: 0;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  background: #a04;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.5rem;
}
.input-slider:focus::-webkit-slider-runnable-track {
  background: rgba(228,228,228,0.7);
}
.input-slider::-moz-range-track {
  width: 100%;
  height: 0.25rem;
  cursor: pointer;
  box-shadow: none;
  background: #ebebeb;
  border-radius: 0.125rem;
  border: 0;
}
.input-slider::-moz-range-thumb {
  box-shadow: 0;
  border: 0;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  background: #a04;
  cursor: pointer;
}
.input-slider::-ms-track {
  width: 100%;
  height: 0.25rem;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.input-slider::-ms-fill-lower {
  background: #ebebeb;
  border: 0;
  border-radius: 0.25rem;
  box-shadow: 0;
}
.input-slider::-ms-fill-upper {
  background: #ebebeb;
  border: 0;
  border-radius: 0.25rem;
  box-shadow: 0;
}
.input-slider::-ms-thumb {
  box-shadow: 0;
  border: 0;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  background: #a04;
  cursor: pointer;
  height: 0.375rem;
}
.input-slider:focus::-ms-fill-lower {
  background: #ebebeb;
}
.input-slider:focus::-ms-fill-upper {
  background: #ebebeb;
}
.input-textarea {
  border: 1px solid #c2c2c2;
  min-height: 7.5rem;
  outline: none;
  resize: none;
}
.language-switcher > .language {
  display: inline-block;
  transition: all 0.2s ease-in-out;
  margin-left: 0.625rem;
}
.language-switcher > .language.-active {
  font-weight: bold;
  transform: scale(1.2);
  color: #90003a;
  border-bottom: 1px solid #90003a;
}
.language-switcher > .language:hover {
  transform: scale(1.2);
}
.navigation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.navigation-item > .text {
  transition: transform 0.2s, color 0.2s;
}
.navigation-item:hover > .text {
  color: #770030;
}
@media print {
  .page-footer {
    display: none;
  }
}
.progress-bar {
  height: 0.75rem;
  width: 5rem;
  border-radius: 9px;
  background-color: #ebebeb;
}
.progress-bar.-small {
  width: 2.5rem;
}
.progress-bar > .progress {
  height: 100%;
  border-radius: 9px;
  background-color: #a04;
}
.question-answer {
  padding-left: 0.4375rem;
  padding-right: 0.4375rem;
}
.question-answer.-correct {
  background-color: #dcf3d6;
}
.question-answer.-wrong {
  background-color: #ffdbd8;
}
.sidebar {
  overflow-x: auto;
}
@media print {
  .sidebar {
    display: none;
  }
}
.tooltip-element .wrapper {
  position: relative;
}
.tooltip-element .wrapper > .image {
  width: 100%;
  height: auto;
}
.tooltip-element .wrapper > .areas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.tooltip-element .wrapper > .areas > .tip {
  position: absolute;
}
.tooltip-element .wrapper > .areas > .tip > .content {
  background-color: rgba(32,32,35,0.8);
  color: #fff;
  visibility: hidden;
  position: absolute;
  width: 22.5rem;
  z-index: 10;
}
.tooltip-element .wrapper > .areas > .tip > .content.-show {
  visibility: visible;
}
.unit-duration {
  border-top: 0.125rem solid #c2c2c2;
  border-bottom: 0.125rem solid #c2c2c2;
  padding: 0.5rem 0;
}
.unit-preview-card {
  width: 18.625rem;
  height: 26.25rem;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15);
  position: relative;
  font-family: "Roboto";
  font-size: 0.875rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.57;
  letter-spacing: normal;
  margin-bottom: 2.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.unit-preview-card > .content.-padded {
  padding-left: 1.5625rem;
  padding-right: 1.5625rem;
}
.unit-preview-card > .title {
  margin-top: 1.5625rem;
}
.unit-preview-card > .description {
  margin-top: 0.5rem;
  color: #202023;
}
.unit-preview-card > .footer {
  position: absolute;
  width: 100%;
  bottom: 1.5625rem;
  color: #a0a0a4;
}
.unit-preview-card.-hover {
  box-shadow: 0 2px 16px 1px rgba(107,107,107,0.3);
}
.unit-preview-card.-hover > .title {
  color: #361d2e;
}
.up-down-arrow {
  width: 1.5625rem;
  height: 1.5625rem;
  position: relative;
}
.up-down-arrow > .bar {
  width: 1rem;
  height: 0.1875rem;
  background-color: currentColor;
  position: absolute;
  top: 50%;
  border-radius: 0.125rem;
  transition: transform 0.3s;
}
.up-down-arrow > .bar.-left {
  left: 0;
  transform: rotate(45deg);
}
.up-down-arrow > .bar.-right {
  right: 0;
  transform: rotate(-45deg);
}
.up-down-arrow.-up > .bar.-left {
  transform: rotate(-45deg);
}
.up-down-arrow.-up > .bar.-right {
  transform: rotate(45deg);
}
.video-responsive {
  width: 100%;
}
@media print {
  .-dont-print {
    display: none;
  }
}
@media print {
  * {
    color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}