/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/application/application.sass ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";

/**
 * Foundation for Sites
 * Version 6.7.5
 * https://get.foundation
 * Licensed under MIT Open Source
 */
@media print, screen and (min-width: 40em) {
  .reveal.large, .reveal.small, .reveal.tiny, .reveal {
    right: auto;
    left: auto;
    margin: 0 auto;
  }
}
body {
  position: relative;
  -webkit-text-size-adjust: none;
}

blockquote, p, figure,
ul, ol, li, dl, dt, dd {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul, ol {
  list-style: none;
}

button {
  padding: 0;
  border: 0;
  cursor: pointer;
}

i, cite, em, var, address, dfn {
  font-style: normal;
}

i {
  display: inline-block;
}

div:focus {
  outline: none;
}

img {
  color: #999;
  font-size: 12px;
  line-height: 14px;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

script ~ img, script + iframe[src*=googleads] {
  position: absolute;
  bottom: 0;
  left: 0;
}

input[type=search] {
  -webkit-appearance: none;
}

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

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

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: 0;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

[data-whatintent=mouse] *, [data-whatintent=mouse] *:focus,
[data-whatintent=touch] *,
[data-whatintent=touch] *:focus,
[data-whatinput=mouse] *,
[data-whatinput=mouse] *:focus,
[data-whatinput=touch] *,
[data-whatinput=touch] *:focus {
  outline: none;
}

[draggable=false] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

.foundation-mq {
  font-family: "small=0em&medium=40em&large=60em&xlarge=90em";
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

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

body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.15;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
}

textarea {
  height: auto;
  min-height: 50px;
  border-radius: 8px;
}

select {
  box-sizing: border-box;
  width: 100%;
  border-radius: 8px;
}

.map_canvas img,
.map_canvas embed,
.map_canvas object,
.mqa-display img,
.mqa-display embed,
.mqa-display object {
  max-width: none !important;
}

button {
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  line-height: 1;
  cursor: auto;
}
[data-whatinput=mouse] button {
  outline: 0;
}

pre {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

.is-visible {
  display: block !important;
}

.is-hidden {
  display: none !important;
}

.grid-container {
  padding-right: 1rem;
  padding-left: 1rem;
  max-width: 74rem;
  margin-left: auto;
  margin-right: auto;
}
@media print, screen and (min-width: 40em) {
  .grid-container {
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-container {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
.grid-container.fluid {
  padding-right: 1rem;
  padding-left: 1rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media print, screen and (min-width: 40em) {
  .grid-container.fluid {
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-container.fluid {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
.grid-container.full {
  padding-right: 0;
  padding-left: 0;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.grid-x {
  display: flex;
  flex-flow: row wrap;
}

.cell {
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
.cell.auto {
  flex: 1 1 0;
}
.cell.shrink {
  flex: 0 0 auto;
}

.grid-x > .auto {
  width: auto;
}
.grid-x > .shrink {
  width: auto;
}

.grid-x > .small-shrink, .grid-x > .small-full, .grid-x > .small-1, .grid-x > .small-2, .grid-x > .small-3, .grid-x > .small-4, .grid-x > .small-5, .grid-x > .small-6, .grid-x > .small-7, .grid-x > .small-8, .grid-x > .small-9, .grid-x > .small-10, .grid-x > .small-11, .grid-x > .small-12 {
  flex-basis: auto;
}

@media print, screen and (min-width: 40em) {
  .grid-x > .medium-shrink, .grid-x > .medium-full, .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12 {
    flex-basis: auto;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-x > .large-shrink, .grid-x > .large-full, .grid-x > .large-1, .grid-x > .large-2, .grid-x > .large-3, .grid-x > .large-4, .grid-x > .large-5, .grid-x > .large-6, .grid-x > .large-7, .grid-x > .large-8, .grid-x > .large-9, .grid-x > .large-10, .grid-x > .large-11, .grid-x > .large-12 {
    flex-basis: auto;
  }
}
@media screen and (min-width: 90em) {
  .grid-x > .xlarge-shrink, .grid-x > .xlarge-full, .grid-x > .xlarge-1, .grid-x > .xlarge-2, .grid-x > .xlarge-3, .grid-x > .xlarge-4, .grid-x > .xlarge-5, .grid-x > .xlarge-6, .grid-x > .xlarge-7, .grid-x > .xlarge-8, .grid-x > .xlarge-9, .grid-x > .xlarge-10, .grid-x > .xlarge-11, .grid-x > .xlarge-12 {
    flex-basis: auto;
  }
}
.grid-x > .small-12, .grid-x > .small-11, .grid-x > .small-10, .grid-x > .small-9, .grid-x > .small-8, .grid-x > .small-7, .grid-x > .small-6, .grid-x > .small-5, .grid-x > .small-4, .grid-x > .small-3, .grid-x > .small-2, .grid-x > .small-1 {
  flex: 0 0 auto;
}

.grid-x > .small-1 {
  width: 8.3333333333%;
}

.grid-x > .small-2 {
  width: 16.6666666667%;
}

.grid-x > .small-3 {
  width: 25%;
}

.grid-x > .small-4 {
  width: 33.3333333333%;
}

.grid-x > .small-5 {
  width: 41.6666666667%;
}

.grid-x > .small-6 {
  width: 50%;
}

.grid-x > .small-7 {
  width: 58.3333333333%;
}

.grid-x > .small-8 {
  width: 66.6666666667%;
}

.grid-x > .small-9 {
  width: 75%;
}

.grid-x > .small-10 {
  width: 83.3333333333%;
}

.grid-x > .small-11 {
  width: 91.6666666667%;
}

.grid-x > .small-12 {
  width: 100%;
}

@media print, screen and (min-width: 40em) {
  .grid-x > .medium-auto {
    flex: 1 1 0;
    width: auto;
  }
  .grid-x > .medium-12, .grid-x > .medium-11, .grid-x > .medium-10, .grid-x > .medium-9, .grid-x > .medium-8, .grid-x > .medium-7, .grid-x > .medium-6, .grid-x > .medium-5, .grid-x > .medium-4, .grid-x > .medium-3, .grid-x > .medium-2, .grid-x > .medium-1, .grid-x > .medium-shrink {
    flex: 0 0 auto;
  }
  .grid-x > .medium-shrink {
    width: auto;
  }
  .grid-x > .medium-1 {
    width: 8.3333333333%;
  }
  .grid-x > .medium-2 {
    width: 16.6666666667%;
  }
  .grid-x > .medium-3 {
    width: 25%;
  }
  .grid-x > .medium-4 {
    width: 33.3333333333%;
  }
  .grid-x > .medium-5 {
    width: 41.6666666667%;
  }
  .grid-x > .medium-6 {
    width: 50%;
  }
  .grid-x > .medium-7 {
    width: 58.3333333333%;
  }
  .grid-x > .medium-8 {
    width: 66.6666666667%;
  }
  .grid-x > .medium-9 {
    width: 75%;
  }
  .grid-x > .medium-10 {
    width: 83.3333333333%;
  }
  .grid-x > .medium-11 {
    width: 91.6666666667%;
  }
  .grid-x > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-x > .large-auto {
    flex: 1 1 0;
    width: auto;
  }
  .grid-x > .large-12, .grid-x > .large-11, .grid-x > .large-10, .grid-x > .large-9, .grid-x > .large-8, .grid-x > .large-7, .grid-x > .large-6, .grid-x > .large-5, .grid-x > .large-4, .grid-x > .large-3, .grid-x > .large-2, .grid-x > .large-1, .grid-x > .large-shrink {
    flex: 0 0 auto;
  }
  .grid-x > .large-shrink {
    width: auto;
  }
  .grid-x > .large-1 {
    width: 8.3333333333%;
  }
  .grid-x > .large-2 {
    width: 16.6666666667%;
  }
  .grid-x > .large-3 {
    width: 25%;
  }
  .grid-x > .large-4 {
    width: 33.3333333333%;
  }
  .grid-x > .large-5 {
    width: 41.6666666667%;
  }
  .grid-x > .large-6 {
    width: 50%;
  }
  .grid-x > .large-7 {
    width: 58.3333333333%;
  }
  .grid-x > .large-8 {
    width: 66.6666666667%;
  }
  .grid-x > .large-9 {
    width: 75%;
  }
  .grid-x > .large-10 {
    width: 83.3333333333%;
  }
  .grid-x > .large-11 {
    width: 91.6666666667%;
  }
  .grid-x > .large-12 {
    width: 100%;
  }
}
@media screen and (min-width: 90em) {
  .grid-x > .xlarge-auto {
    flex: 1 1 0;
    width: auto;
  }
  .grid-x > .xlarge-12, .grid-x > .xlarge-11, .grid-x > .xlarge-10, .grid-x > .xlarge-9, .grid-x > .xlarge-8, .grid-x > .xlarge-7, .grid-x > .xlarge-6, .grid-x > .xlarge-5, .grid-x > .xlarge-4, .grid-x > .xlarge-3, .grid-x > .xlarge-2, .grid-x > .xlarge-1, .grid-x > .xlarge-shrink {
    flex: 0 0 auto;
  }
  .grid-x > .xlarge-shrink {
    width: auto;
  }
  .grid-x > .xlarge-1 {
    width: 8.3333333333%;
  }
  .grid-x > .xlarge-2 {
    width: 16.6666666667%;
  }
  .grid-x > .xlarge-3 {
    width: 25%;
  }
  .grid-x > .xlarge-4 {
    width: 33.3333333333%;
  }
  .grid-x > .xlarge-5 {
    width: 41.6666666667%;
  }
  .grid-x > .xlarge-6 {
    width: 50%;
  }
  .grid-x > .xlarge-7 {
    width: 58.3333333333%;
  }
  .grid-x > .xlarge-8 {
    width: 66.6666666667%;
  }
  .grid-x > .xlarge-9 {
    width: 75%;
  }
  .grid-x > .xlarge-10 {
    width: 83.3333333333%;
  }
  .grid-x > .xlarge-11 {
    width: 91.6666666667%;
  }
  .grid-x > .xlarge-12 {
    width: 100%;
  }
}
.grid-margin-x:not(.grid-x) > .cell {
  width: auto;
}

.grid-margin-y:not(.grid-y) > .cell {
  height: auto;
}

.grid-margin-x {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-x {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-margin-x {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}
.grid-margin-x > .cell {
  width: calc(100% - 0.5rem);
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-x > .cell {
    width: calc(100% - 1rem);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-margin-x > .cell {
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
.grid-margin-x > .auto {
  width: auto;
}
.grid-margin-x > .shrink {
  width: auto;
}
.grid-margin-x > .small-1 {
  width: calc(8.3333333333% - 0.5rem);
}
.grid-margin-x > .small-2 {
  width: calc(16.6666666667% - 0.5rem);
}
.grid-margin-x > .small-3 {
  width: calc(25% - 0.5rem);
}
.grid-margin-x > .small-4 {
  width: calc(33.3333333333% - 0.5rem);
}
.grid-margin-x > .small-5 {
  width: calc(41.6666666667% - 0.5rem);
}
.grid-margin-x > .small-6 {
  width: calc(50% - 0.5rem);
}
.grid-margin-x > .small-7 {
  width: calc(58.3333333333% - 0.5rem);
}
.grid-margin-x > .small-8 {
  width: calc(66.6666666667% - 0.5rem);
}
.grid-margin-x > .small-9 {
  width: calc(75% - 0.5rem);
}
.grid-margin-x > .small-10 {
  width: calc(83.3333333333% - 0.5rem);
}
.grid-margin-x > .small-11 {
  width: calc(91.6666666667% - 0.5rem);
}
.grid-margin-x > .small-12 {
  width: calc(100% - 0.5rem);
}
@media print, screen and (min-width: 40em) {
  .grid-margin-x > .auto {
    width: auto;
  }
  .grid-margin-x > .shrink {
    width: auto;
  }
  .grid-margin-x > .small-1 {
    width: calc(8.3333333333% - 1rem);
  }
  .grid-margin-x > .small-2 {
    width: calc(16.6666666667% - 1rem);
  }
  .grid-margin-x > .small-3 {
    width: calc(25% - 1rem);
  }
  .grid-margin-x > .small-4 {
    width: calc(33.3333333333% - 1rem);
  }
  .grid-margin-x > .small-5 {
    width: calc(41.6666666667% - 1rem);
  }
  .grid-margin-x > .small-6 {
    width: calc(50% - 1rem);
  }
  .grid-margin-x > .small-7 {
    width: calc(58.3333333333% - 1rem);
  }
  .grid-margin-x > .small-8 {
    width: calc(66.6666666667% - 1rem);
  }
  .grid-margin-x > .small-9 {
    width: calc(75% - 1rem);
  }
  .grid-margin-x > .small-10 {
    width: calc(83.3333333333% - 1rem);
  }
  .grid-margin-x > .small-11 {
    width: calc(91.6666666667% - 1rem);
  }
  .grid-margin-x > .small-12 {
    width: calc(100% - 1rem);
  }
  .grid-margin-x > .medium-auto {
    width: auto;
  }
  .grid-margin-x > .medium-shrink {
    width: auto;
  }
  .grid-margin-x > .medium-1 {
    width: calc(8.3333333333% - 1rem);
  }
  .grid-margin-x > .medium-2 {
    width: calc(16.6666666667% - 1rem);
  }
  .grid-margin-x > .medium-3 {
    width: calc(25% - 1rem);
  }
  .grid-margin-x > .medium-4 {
    width: calc(33.3333333333% - 1rem);
  }
  .grid-margin-x > .medium-5 {
    width: calc(41.6666666667% - 1rem);
  }
  .grid-margin-x > .medium-6 {
    width: calc(50% - 1rem);
  }
  .grid-margin-x > .medium-7 {
    width: calc(58.3333333333% - 1rem);
  }
  .grid-margin-x > .medium-8 {
    width: calc(66.6666666667% - 1rem);
  }
  .grid-margin-x > .medium-9 {
    width: calc(75% - 1rem);
  }
  .grid-margin-x > .medium-10 {
    width: calc(83.3333333333% - 1rem);
  }
  .grid-margin-x > .medium-11 {
    width: calc(91.6666666667% - 1rem);
  }
  .grid-margin-x > .medium-12 {
    width: calc(100% - 1rem);
  }
}
@media print, screen and (min-width: 60em) {
  .grid-margin-x > .auto {
    width: auto;
  }
  .grid-margin-x > .shrink {
    width: auto;
  }
  .grid-margin-x > .small-1 {
    width: calc(8.3333333333% - 2rem);
  }
  .grid-margin-x > .small-2 {
    width: calc(16.6666666667% - 2rem);
  }
  .grid-margin-x > .small-3 {
    width: calc(25% - 2rem);
  }
  .grid-margin-x > .small-4 {
    width: calc(33.3333333333% - 2rem);
  }
  .grid-margin-x > .small-5 {
    width: calc(41.6666666667% - 2rem);
  }
  .grid-margin-x > .small-6 {
    width: calc(50% - 2rem);
  }
  .grid-margin-x > .small-7 {
    width: calc(58.3333333333% - 2rem);
  }
  .grid-margin-x > .small-8 {
    width: calc(66.6666666667% - 2rem);
  }
  .grid-margin-x > .small-9 {
    width: calc(75% - 2rem);
  }
  .grid-margin-x > .small-10 {
    width: calc(83.3333333333% - 2rem);
  }
  .grid-margin-x > .small-11 {
    width: calc(91.6666666667% - 2rem);
  }
  .grid-margin-x > .small-12 {
    width: calc(100% - 2rem);
  }
  .grid-margin-x > .medium-auto {
    width: auto;
  }
  .grid-margin-x > .medium-shrink {
    width: auto;
  }
  .grid-margin-x > .medium-1 {
    width: calc(8.3333333333% - 2rem);
  }
  .grid-margin-x > .medium-2 {
    width: calc(16.6666666667% - 2rem);
  }
  .grid-margin-x > .medium-3 {
    width: calc(25% - 2rem);
  }
  .grid-margin-x > .medium-4 {
    width: calc(33.3333333333% - 2rem);
  }
  .grid-margin-x > .medium-5 {
    width: calc(41.6666666667% - 2rem);
  }
  .grid-margin-x > .medium-6 {
    width: calc(50% - 2rem);
  }
  .grid-margin-x > .medium-7 {
    width: calc(58.3333333333% - 2rem);
  }
  .grid-margin-x > .medium-8 {
    width: calc(66.6666666667% - 2rem);
  }
  .grid-margin-x > .medium-9 {
    width: calc(75% - 2rem);
  }
  .grid-margin-x > .medium-10 {
    width: calc(83.3333333333% - 2rem);
  }
  .grid-margin-x > .medium-11 {
    width: calc(91.6666666667% - 2rem);
  }
  .grid-margin-x > .medium-12 {
    width: calc(100% - 2rem);
  }
  .grid-margin-x > .large-auto {
    width: auto;
  }
  .grid-margin-x > .large-shrink {
    width: auto;
  }
  .grid-margin-x > .large-1 {
    width: calc(8.3333333333% - 2rem);
  }
  .grid-margin-x > .large-2 {
    width: calc(16.6666666667% - 2rem);
  }
  .grid-margin-x > .large-3 {
    width: calc(25% - 2rem);
  }
  .grid-margin-x > .large-4 {
    width: calc(33.3333333333% - 2rem);
  }
  .grid-margin-x > .large-5 {
    width: calc(41.6666666667% - 2rem);
  }
  .grid-margin-x > .large-6 {
    width: calc(50% - 2rem);
  }
  .grid-margin-x > .large-7 {
    width: calc(58.3333333333% - 2rem);
  }
  .grid-margin-x > .large-8 {
    width: calc(66.6666666667% - 2rem);
  }
  .grid-margin-x > .large-9 {
    width: calc(75% - 2rem);
  }
  .grid-margin-x > .large-10 {
    width: calc(83.3333333333% - 2rem);
  }
  .grid-margin-x > .large-11 {
    width: calc(91.6666666667% - 2rem);
  }
  .grid-margin-x > .large-12 {
    width: calc(100% - 2rem);
  }
}
@media screen and (min-width: 90em) {
  .grid-margin-x > .xlarge-auto {
    width: auto;
  }
  .grid-margin-x > .xlarge-shrink {
    width: auto;
  }
  .grid-margin-x > .xlarge-1 {
    width: calc(8.3333333333% - 2rem);
  }
  .grid-margin-x > .xlarge-2 {
    width: calc(16.6666666667% - 2rem);
  }
  .grid-margin-x > .xlarge-3 {
    width: calc(25% - 2rem);
  }
  .grid-margin-x > .xlarge-4 {
    width: calc(33.3333333333% - 2rem);
  }
  .grid-margin-x > .xlarge-5 {
    width: calc(41.6666666667% - 2rem);
  }
  .grid-margin-x > .xlarge-6 {
    width: calc(50% - 2rem);
  }
  .grid-margin-x > .xlarge-7 {
    width: calc(58.3333333333% - 2rem);
  }
  .grid-margin-x > .xlarge-8 {
    width: calc(66.6666666667% - 2rem);
  }
  .grid-margin-x > .xlarge-9 {
    width: calc(75% - 2rem);
  }
  .grid-margin-x > .xlarge-10 {
    width: calc(83.3333333333% - 2rem);
  }
  .grid-margin-x > .xlarge-11 {
    width: calc(91.6666666667% - 2rem);
  }
  .grid-margin-x > .xlarge-12 {
    width: calc(100% - 2rem);
  }
}

.grid-padding-x .grid-padding-x {
  margin-right: -0.25rem;
  margin-left: -0.25rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-x .grid-padding-x {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-padding-x .grid-padding-x {
    margin-right: -1rem;
    margin-left: -1rem;
  }
}
.grid-container:not(.full) > .grid-padding-x {
  margin-right: -0.25rem;
  margin-left: -0.25rem;
}
@media print, screen and (min-width: 40em) {
  .grid-container:not(.full) > .grid-padding-x {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-container:not(.full) > .grid-padding-x {
    margin-right: -1rem;
    margin-left: -1rem;
  }
}
.grid-padding-x > .cell {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-x > .cell {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-padding-x > .cell {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

.small-up-1 > .cell {
  width: 100%;
}

.small-up-2 > .cell {
  width: 50%;
}

.small-up-3 > .cell {
  width: 33.3333333333%;
}

.small-up-4 > .cell {
  width: 25%;
}

.small-up-5 > .cell {
  width: 20%;
}

.small-up-6 > .cell {
  width: 16.6666666667%;
}

.small-up-7 > .cell {
  width: 14.2857142857%;
}

.small-up-8 > .cell {
  width: 12.5%;
}

@media print, screen and (min-width: 40em) {
  .medium-up-1 > .cell {
    width: 100%;
  }
  .medium-up-2 > .cell {
    width: 50%;
  }
  .medium-up-3 > .cell {
    width: 33.3333333333%;
  }
  .medium-up-4 > .cell {
    width: 25%;
  }
  .medium-up-5 > .cell {
    width: 20%;
  }
  .medium-up-6 > .cell {
    width: 16.6666666667%;
  }
  .medium-up-7 > .cell {
    width: 14.2857142857%;
  }
  .medium-up-8 > .cell {
    width: 12.5%;
  }
}
@media print, screen and (min-width: 60em) {
  .large-up-1 > .cell {
    width: 100%;
  }
  .large-up-2 > .cell {
    width: 50%;
  }
  .large-up-3 > .cell {
    width: 33.3333333333%;
  }
  .large-up-4 > .cell {
    width: 25%;
  }
  .large-up-5 > .cell {
    width: 20%;
  }
  .large-up-6 > .cell {
    width: 16.6666666667%;
  }
  .large-up-7 > .cell {
    width: 14.2857142857%;
  }
  .large-up-8 > .cell {
    width: 12.5%;
  }
}
@media screen and (min-width: 90em) {
  .xlarge-up-1 > .cell {
    width: 100%;
  }
  .xlarge-up-2 > .cell {
    width: 50%;
  }
  .xlarge-up-3 > .cell {
    width: 33.3333333333%;
  }
  .xlarge-up-4 > .cell {
    width: 25%;
  }
  .xlarge-up-5 > .cell {
    width: 20%;
  }
  .xlarge-up-6 > .cell {
    width: 16.6666666667%;
  }
  .xlarge-up-7 > .cell {
    width: 14.2857142857%;
  }
  .xlarge-up-8 > .cell {
    width: 12.5%;
  }
}
.grid-margin-x.small-up-1 > .cell {
  width: calc(100% - 0.5rem);
}

.grid-margin-x.small-up-2 > .cell {
  width: calc(50% - 0.5rem);
}

.grid-margin-x.small-up-3 > .cell {
  width: calc(33.3333333333% - 0.5rem);
}

.grid-margin-x.small-up-4 > .cell {
  width: calc(25% - 0.5rem);
}

.grid-margin-x.small-up-5 > .cell {
  width: calc(20% - 0.5rem);
}

.grid-margin-x.small-up-6 > .cell {
  width: calc(16.6666666667% - 0.5rem);
}

.grid-margin-x.small-up-7 > .cell {
  width: calc(14.2857142857% - 0.5rem);
}

.grid-margin-x.small-up-8 > .cell {
  width: calc(12.5% - 0.5rem);
}

@media print, screen and (min-width: 40em) {
  .grid-margin-x.small-up-1 > .cell {
    width: calc(100% - 1rem);
  }
  .grid-margin-x.small-up-2 > .cell {
    width: calc(50% - 1rem);
  }
  .grid-margin-x.small-up-3 > .cell {
    width: calc(33.3333333333% - 1rem);
  }
  .grid-margin-x.small-up-4 > .cell {
    width: calc(25% - 1rem);
  }
  .grid-margin-x.small-up-5 > .cell {
    width: calc(20% - 1rem);
  }
  .grid-margin-x.small-up-6 > .cell {
    width: calc(16.6666666667% - 1rem);
  }
  .grid-margin-x.small-up-7 > .cell {
    width: calc(14.2857142857% - 1rem);
  }
  .grid-margin-x.small-up-8 > .cell {
    width: calc(12.5% - 1rem);
  }
  .grid-margin-x.medium-up-1 > .cell {
    width: calc(100% - 1rem);
  }
  .grid-margin-x.medium-up-2 > .cell {
    width: calc(50% - 1rem);
  }
  .grid-margin-x.medium-up-3 > .cell {
    width: calc(33.3333333333% - 1rem);
  }
  .grid-margin-x.medium-up-4 > .cell {
    width: calc(25% - 1rem);
  }
  .grid-margin-x.medium-up-5 > .cell {
    width: calc(20% - 1rem);
  }
  .grid-margin-x.medium-up-6 > .cell {
    width: calc(16.6666666667% - 1rem);
  }
  .grid-margin-x.medium-up-7 > .cell {
    width: calc(14.2857142857% - 1rem);
  }
  .grid-margin-x.medium-up-8 > .cell {
    width: calc(12.5% - 1rem);
  }
}
@media print, screen and (min-width: 60em) {
  .grid-margin-x.small-up-1 > .cell {
    width: calc(100% - 2rem);
  }
  .grid-margin-x.medium-up-1 > .cell {
    width: calc(100% - 2rem);
  }
  .grid-margin-x.small-up-2 > .cell {
    width: calc(50% - 2rem);
  }
  .grid-margin-x.medium-up-2 > .cell {
    width: calc(50% - 2rem);
  }
  .grid-margin-x.small-up-3 > .cell {
    width: calc(33.3333333333% - 2rem);
  }
  .grid-margin-x.medium-up-3 > .cell {
    width: calc(33.3333333333% - 2rem);
  }
  .grid-margin-x.small-up-4 > .cell {
    width: calc(25% - 2rem);
  }
  .grid-margin-x.medium-up-4 > .cell {
    width: calc(25% - 2rem);
  }
  .grid-margin-x.small-up-5 > .cell {
    width: calc(20% - 2rem);
  }
  .grid-margin-x.medium-up-5 > .cell {
    width: calc(20% - 2rem);
  }
  .grid-margin-x.small-up-6 > .cell {
    width: calc(16.6666666667% - 2rem);
  }
  .grid-margin-x.medium-up-6 > .cell {
    width: calc(16.6666666667% - 2rem);
  }
  .grid-margin-x.small-up-7 > .cell {
    width: calc(14.2857142857% - 2rem);
  }
  .grid-margin-x.medium-up-7 > .cell {
    width: calc(14.2857142857% - 2rem);
  }
  .grid-margin-x.small-up-8 > .cell {
    width: calc(12.5% - 2rem);
  }
  .grid-margin-x.medium-up-8 > .cell {
    width: calc(12.5% - 2rem);
  }
  .grid-margin-x.large-up-1 > .cell {
    width: calc(100% - 2rem);
  }
  .grid-margin-x.large-up-2 > .cell {
    width: calc(50% - 2rem);
  }
  .grid-margin-x.large-up-3 > .cell {
    width: calc(33.3333333333% - 2rem);
  }
  .grid-margin-x.large-up-4 > .cell {
    width: calc(25% - 2rem);
  }
  .grid-margin-x.large-up-5 > .cell {
    width: calc(20% - 2rem);
  }
  .grid-margin-x.large-up-6 > .cell {
    width: calc(16.6666666667% - 2rem);
  }
  .grid-margin-x.large-up-7 > .cell {
    width: calc(14.2857142857% - 2rem);
  }
  .grid-margin-x.large-up-8 > .cell {
    width: calc(12.5% - 2rem);
  }
}
@media screen and (min-width: 90em) {
  .grid-margin-x.xlarge-up-1 > .cell {
    width: calc(100% - 2rem);
  }
  .grid-margin-x.xlarge-up-2 > .cell {
    width: calc(50% - 2rem);
  }
  .grid-margin-x.xlarge-up-3 > .cell {
    width: calc(33.3333333333% - 2rem);
  }
  .grid-margin-x.xlarge-up-4 > .cell {
    width: calc(25% - 2rem);
  }
  .grid-margin-x.xlarge-up-5 > .cell {
    width: calc(20% - 2rem);
  }
  .grid-margin-x.xlarge-up-6 > .cell {
    width: calc(16.6666666667% - 2rem);
  }
  .grid-margin-x.xlarge-up-7 > .cell {
    width: calc(14.2857142857% - 2rem);
  }
  .grid-margin-x.xlarge-up-8 > .cell {
    width: calc(12.5% - 2rem);
  }
}
.small-margin-collapse {
  margin-right: 0;
  margin-left: 0;
}
.small-margin-collapse > .cell {
  margin-right: 0;
  margin-left: 0;
}
.small-margin-collapse > .small-1 {
  width: 8.3333333333%;
}
.small-margin-collapse > .small-2 {
  width: 16.6666666667%;
}
.small-margin-collapse > .small-3 {
  width: 25%;
}
.small-margin-collapse > .small-4 {
  width: 33.3333333333%;
}
.small-margin-collapse > .small-5 {
  width: 41.6666666667%;
}
.small-margin-collapse > .small-6 {
  width: 50%;
}
.small-margin-collapse > .small-7 {
  width: 58.3333333333%;
}
.small-margin-collapse > .small-8 {
  width: 66.6666666667%;
}
.small-margin-collapse > .small-9 {
  width: 75%;
}
.small-margin-collapse > .small-10 {
  width: 83.3333333333%;
}
.small-margin-collapse > .small-11 {
  width: 91.6666666667%;
}
.small-margin-collapse > .small-12 {
  width: 100%;
}
@media print, screen and (min-width: 40em) {
  .small-margin-collapse > .medium-1 {
    width: 8.3333333333%;
  }
  .small-margin-collapse > .medium-2 {
    width: 16.6666666667%;
  }
  .small-margin-collapse > .medium-3 {
    width: 25%;
  }
  .small-margin-collapse > .medium-4 {
    width: 33.3333333333%;
  }
  .small-margin-collapse > .medium-5 {
    width: 41.6666666667%;
  }
  .small-margin-collapse > .medium-6 {
    width: 50%;
  }
  .small-margin-collapse > .medium-7 {
    width: 58.3333333333%;
  }
  .small-margin-collapse > .medium-8 {
    width: 66.6666666667%;
  }
  .small-margin-collapse > .medium-9 {
    width: 75%;
  }
  .small-margin-collapse > .medium-10 {
    width: 83.3333333333%;
  }
  .small-margin-collapse > .medium-11 {
    width: 91.6666666667%;
  }
  .small-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 60em) {
  .small-margin-collapse > .large-1 {
    width: 8.3333333333%;
  }
  .small-margin-collapse > .large-2 {
    width: 16.6666666667%;
  }
  .small-margin-collapse > .large-3 {
    width: 25%;
  }
  .small-margin-collapse > .large-4 {
    width: 33.3333333333%;
  }
  .small-margin-collapse > .large-5 {
    width: 41.6666666667%;
  }
  .small-margin-collapse > .large-6 {
    width: 50%;
  }
  .small-margin-collapse > .large-7 {
    width: 58.3333333333%;
  }
  .small-margin-collapse > .large-8 {
    width: 66.6666666667%;
  }
  .small-margin-collapse > .large-9 {
    width: 75%;
  }
  .small-margin-collapse > .large-10 {
    width: 83.3333333333%;
  }
  .small-margin-collapse > .large-11 {
    width: 91.6666666667%;
  }
  .small-margin-collapse > .large-12 {
    width: 100%;
  }
}
@media screen and (min-width: 90em) {
  .small-margin-collapse > .xlarge-1 {
    width: 8.3333333333%;
  }
  .small-margin-collapse > .xlarge-2 {
    width: 16.6666666667%;
  }
  .small-margin-collapse > .xlarge-3 {
    width: 25%;
  }
  .small-margin-collapse > .xlarge-4 {
    width: 33.3333333333%;
  }
  .small-margin-collapse > .xlarge-5 {
    width: 41.6666666667%;
  }
  .small-margin-collapse > .xlarge-6 {
    width: 50%;
  }
  .small-margin-collapse > .xlarge-7 {
    width: 58.3333333333%;
  }
  .small-margin-collapse > .xlarge-8 {
    width: 66.6666666667%;
  }
  .small-margin-collapse > .xlarge-9 {
    width: 75%;
  }
  .small-margin-collapse > .xlarge-10 {
    width: 83.3333333333%;
  }
  .small-margin-collapse > .xlarge-11 {
    width: 91.6666666667%;
  }
  .small-margin-collapse > .xlarge-12 {
    width: 100%;
  }
}

.small-padding-collapse {
  margin-right: 0;
  margin-left: 0;
}
.small-padding-collapse > .cell {
  padding-right: 0;
  padding-left: 0;
}

@media print, screen and (min-width: 40em) {
  .medium-margin-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .medium-margin-collapse > .cell {
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (min-width: 40em) {
  .medium-margin-collapse > .small-1 {
    width: 8.3333333333%;
  }
  .medium-margin-collapse > .small-2 {
    width: 16.6666666667%;
  }
  .medium-margin-collapse > .small-3 {
    width: 25%;
  }
  .medium-margin-collapse > .small-4 {
    width: 33.3333333333%;
  }
  .medium-margin-collapse > .small-5 {
    width: 41.6666666667%;
  }
  .medium-margin-collapse > .small-6 {
    width: 50%;
  }
  .medium-margin-collapse > .small-7 {
    width: 58.3333333333%;
  }
  .medium-margin-collapse > .small-8 {
    width: 66.6666666667%;
  }
  .medium-margin-collapse > .small-9 {
    width: 75%;
  }
  .medium-margin-collapse > .small-10 {
    width: 83.3333333333%;
  }
  .medium-margin-collapse > .small-11 {
    width: 91.6666666667%;
  }
  .medium-margin-collapse > .small-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 40em) {
  .medium-margin-collapse > .medium-1 {
    width: 8.3333333333%;
  }
  .medium-margin-collapse > .medium-2 {
    width: 16.6666666667%;
  }
  .medium-margin-collapse > .medium-3 {
    width: 25%;
  }
  .medium-margin-collapse > .medium-4 {
    width: 33.3333333333%;
  }
  .medium-margin-collapse > .medium-5 {
    width: 41.6666666667%;
  }
  .medium-margin-collapse > .medium-6 {
    width: 50%;
  }
  .medium-margin-collapse > .medium-7 {
    width: 58.3333333333%;
  }
  .medium-margin-collapse > .medium-8 {
    width: 66.6666666667%;
  }
  .medium-margin-collapse > .medium-9 {
    width: 75%;
  }
  .medium-margin-collapse > .medium-10 {
    width: 83.3333333333%;
  }
  .medium-margin-collapse > .medium-11 {
    width: 91.6666666667%;
  }
  .medium-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 60em) {
  .medium-margin-collapse > .large-1 {
    width: 8.3333333333%;
  }
  .medium-margin-collapse > .large-2 {
    width: 16.6666666667%;
  }
  .medium-margin-collapse > .large-3 {
    width: 25%;
  }
  .medium-margin-collapse > .large-4 {
    width: 33.3333333333%;
  }
  .medium-margin-collapse > .large-5 {
    width: 41.6666666667%;
  }
  .medium-margin-collapse > .large-6 {
    width: 50%;
  }
  .medium-margin-collapse > .large-7 {
    width: 58.3333333333%;
  }
  .medium-margin-collapse > .large-8 {
    width: 66.6666666667%;
  }
  .medium-margin-collapse > .large-9 {
    width: 75%;
  }
  .medium-margin-collapse > .large-10 {
    width: 83.3333333333%;
  }
  .medium-margin-collapse > .large-11 {
    width: 91.6666666667%;
  }
  .medium-margin-collapse > .large-12 {
    width: 100%;
  }
}
@media screen and (min-width: 90em) {
  .medium-margin-collapse > .xlarge-1 {
    width: 8.3333333333%;
  }
  .medium-margin-collapse > .xlarge-2 {
    width: 16.6666666667%;
  }
  .medium-margin-collapse > .xlarge-3 {
    width: 25%;
  }
  .medium-margin-collapse > .xlarge-4 {
    width: 33.3333333333%;
  }
  .medium-margin-collapse > .xlarge-5 {
    width: 41.6666666667%;
  }
  .medium-margin-collapse > .xlarge-6 {
    width: 50%;
  }
  .medium-margin-collapse > .xlarge-7 {
    width: 58.3333333333%;
  }
  .medium-margin-collapse > .xlarge-8 {
    width: 66.6666666667%;
  }
  .medium-margin-collapse > .xlarge-9 {
    width: 75%;
  }
  .medium-margin-collapse > .xlarge-10 {
    width: 83.3333333333%;
  }
  .medium-margin-collapse > .xlarge-11 {
    width: 91.6666666667%;
  }
  .medium-margin-collapse > .xlarge-12 {
    width: 100%;
  }
}

@media print, screen and (min-width: 40em) {
  .medium-padding-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .medium-padding-collapse > .cell {
    padding-right: 0;
    padding-left: 0;
  }
}

@media print, screen and (min-width: 60em) {
  .large-margin-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .large-margin-collapse > .cell {
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (min-width: 60em) {
  .large-margin-collapse > .small-1 {
    width: 8.3333333333%;
  }
  .large-margin-collapse > .small-2 {
    width: 16.6666666667%;
  }
  .large-margin-collapse > .small-3 {
    width: 25%;
  }
  .large-margin-collapse > .small-4 {
    width: 33.3333333333%;
  }
  .large-margin-collapse > .small-5 {
    width: 41.6666666667%;
  }
  .large-margin-collapse > .small-6 {
    width: 50%;
  }
  .large-margin-collapse > .small-7 {
    width: 58.3333333333%;
  }
  .large-margin-collapse > .small-8 {
    width: 66.6666666667%;
  }
  .large-margin-collapse > .small-9 {
    width: 75%;
  }
  .large-margin-collapse > .small-10 {
    width: 83.3333333333%;
  }
  .large-margin-collapse > .small-11 {
    width: 91.6666666667%;
  }
  .large-margin-collapse > .small-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 60em) {
  .large-margin-collapse > .medium-1 {
    width: 8.3333333333%;
  }
  .large-margin-collapse > .medium-2 {
    width: 16.6666666667%;
  }
  .large-margin-collapse > .medium-3 {
    width: 25%;
  }
  .large-margin-collapse > .medium-4 {
    width: 33.3333333333%;
  }
  .large-margin-collapse > .medium-5 {
    width: 41.6666666667%;
  }
  .large-margin-collapse > .medium-6 {
    width: 50%;
  }
  .large-margin-collapse > .medium-7 {
    width: 58.3333333333%;
  }
  .large-margin-collapse > .medium-8 {
    width: 66.6666666667%;
  }
  .large-margin-collapse > .medium-9 {
    width: 75%;
  }
  .large-margin-collapse > .medium-10 {
    width: 83.3333333333%;
  }
  .large-margin-collapse > .medium-11 {
    width: 91.6666666667%;
  }
  .large-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 60em) {
  .large-margin-collapse > .large-1 {
    width: 8.3333333333%;
  }
  .large-margin-collapse > .large-2 {
    width: 16.6666666667%;
  }
  .large-margin-collapse > .large-3 {
    width: 25%;
  }
  .large-margin-collapse > .large-4 {
    width: 33.3333333333%;
  }
  .large-margin-collapse > .large-5 {
    width: 41.6666666667%;
  }
  .large-margin-collapse > .large-6 {
    width: 50%;
  }
  .large-margin-collapse > .large-7 {
    width: 58.3333333333%;
  }
  .large-margin-collapse > .large-8 {
    width: 66.6666666667%;
  }
  .large-margin-collapse > .large-9 {
    width: 75%;
  }
  .large-margin-collapse > .large-10 {
    width: 83.3333333333%;
  }
  .large-margin-collapse > .large-11 {
    width: 91.6666666667%;
  }
  .large-margin-collapse > .large-12 {
    width: 100%;
  }
}
@media screen and (min-width: 90em) {
  .large-margin-collapse > .xlarge-1 {
    width: 8.3333333333%;
  }
  .large-margin-collapse > .xlarge-2 {
    width: 16.6666666667%;
  }
  .large-margin-collapse > .xlarge-3 {
    width: 25%;
  }
  .large-margin-collapse > .xlarge-4 {
    width: 33.3333333333%;
  }
  .large-margin-collapse > .xlarge-5 {
    width: 41.6666666667%;
  }
  .large-margin-collapse > .xlarge-6 {
    width: 50%;
  }
  .large-margin-collapse > .xlarge-7 {
    width: 58.3333333333%;
  }
  .large-margin-collapse > .xlarge-8 {
    width: 66.6666666667%;
  }
  .large-margin-collapse > .xlarge-9 {
    width: 75%;
  }
  .large-margin-collapse > .xlarge-10 {
    width: 83.3333333333%;
  }
  .large-margin-collapse > .xlarge-11 {
    width: 91.6666666667%;
  }
  .large-margin-collapse > .xlarge-12 {
    width: 100%;
  }
}

@media print, screen and (min-width: 60em) {
  .large-padding-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .large-padding-collapse > .cell {
    padding-right: 0;
    padding-left: 0;
  }
}

@media screen and (min-width: 90em) {
  .xlarge-margin-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .xlarge-margin-collapse > .cell {
    margin-right: 0;
    margin-left: 0;
  }
}
@media screen and (min-width: 90em) {
  .xlarge-margin-collapse > .small-1 {
    width: 8.3333333333%;
  }
  .xlarge-margin-collapse > .small-2 {
    width: 16.6666666667%;
  }
  .xlarge-margin-collapse > .small-3 {
    width: 25%;
  }
  .xlarge-margin-collapse > .small-4 {
    width: 33.3333333333%;
  }
  .xlarge-margin-collapse > .small-5 {
    width: 41.6666666667%;
  }
  .xlarge-margin-collapse > .small-6 {
    width: 50%;
  }
  .xlarge-margin-collapse > .small-7 {
    width: 58.3333333333%;
  }
  .xlarge-margin-collapse > .small-8 {
    width: 66.6666666667%;
  }
  .xlarge-margin-collapse > .small-9 {
    width: 75%;
  }
  .xlarge-margin-collapse > .small-10 {
    width: 83.3333333333%;
  }
  .xlarge-margin-collapse > .small-11 {
    width: 91.6666666667%;
  }
  .xlarge-margin-collapse > .small-12 {
    width: 100%;
  }
}
@media screen and (min-width: 90em) {
  .xlarge-margin-collapse > .medium-1 {
    width: 8.3333333333%;
  }
  .xlarge-margin-collapse > .medium-2 {
    width: 16.6666666667%;
  }
  .xlarge-margin-collapse > .medium-3 {
    width: 25%;
  }
  .xlarge-margin-collapse > .medium-4 {
    width: 33.3333333333%;
  }
  .xlarge-margin-collapse > .medium-5 {
    width: 41.6666666667%;
  }
  .xlarge-margin-collapse > .medium-6 {
    width: 50%;
  }
  .xlarge-margin-collapse > .medium-7 {
    width: 58.3333333333%;
  }
  .xlarge-margin-collapse > .medium-8 {
    width: 66.6666666667%;
  }
  .xlarge-margin-collapse > .medium-9 {
    width: 75%;
  }
  .xlarge-margin-collapse > .medium-10 {
    width: 83.3333333333%;
  }
  .xlarge-margin-collapse > .medium-11 {
    width: 91.6666666667%;
  }
  .xlarge-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media screen and (min-width: 90em) {
  .xlarge-margin-collapse > .large-1 {
    width: 8.3333333333%;
  }
  .xlarge-margin-collapse > .large-2 {
    width: 16.6666666667%;
  }
  .xlarge-margin-collapse > .large-3 {
    width: 25%;
  }
  .xlarge-margin-collapse > .large-4 {
    width: 33.3333333333%;
  }
  .xlarge-margin-collapse > .large-5 {
    width: 41.6666666667%;
  }
  .xlarge-margin-collapse > .large-6 {
    width: 50%;
  }
  .xlarge-margin-collapse > .large-7 {
    width: 58.3333333333%;
  }
  .xlarge-margin-collapse > .large-8 {
    width: 66.6666666667%;
  }
  .xlarge-margin-collapse > .large-9 {
    width: 75%;
  }
  .xlarge-margin-collapse > .large-10 {
    width: 83.3333333333%;
  }
  .xlarge-margin-collapse > .large-11 {
    width: 91.6666666667%;
  }
  .xlarge-margin-collapse > .large-12 {
    width: 100%;
  }
}
@media screen and (min-width: 90em) {
  .xlarge-margin-collapse > .xlarge-1 {
    width: 8.3333333333%;
  }
  .xlarge-margin-collapse > .xlarge-2 {
    width: 16.6666666667%;
  }
  .xlarge-margin-collapse > .xlarge-3 {
    width: 25%;
  }
  .xlarge-margin-collapse > .xlarge-4 {
    width: 33.3333333333%;
  }
  .xlarge-margin-collapse > .xlarge-5 {
    width: 41.6666666667%;
  }
  .xlarge-margin-collapse > .xlarge-6 {
    width: 50%;
  }
  .xlarge-margin-collapse > .xlarge-7 {
    width: 58.3333333333%;
  }
  .xlarge-margin-collapse > .xlarge-8 {
    width: 66.6666666667%;
  }
  .xlarge-margin-collapse > .xlarge-9 {
    width: 75%;
  }
  .xlarge-margin-collapse > .xlarge-10 {
    width: 83.3333333333%;
  }
  .xlarge-margin-collapse > .xlarge-11 {
    width: 91.6666666667%;
  }
  .xlarge-margin-collapse > .xlarge-12 {
    width: 100%;
  }
}

@media screen and (min-width: 90em) {
  .xlarge-padding-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .xlarge-padding-collapse > .cell {
    padding-right: 0;
    padding-left: 0;
  }
}

.small-offset-0 {
  margin-left: 0%;
}

.grid-margin-x > .small-offset-0 {
  margin-left: calc(0% + 0.5rem / 2);
}

.small-offset-1 {
  margin-left: 8.3333333333%;
}

.grid-margin-x > .small-offset-1 {
  margin-left: calc(8.3333333333% + 0.5rem / 2);
}

.small-offset-2 {
  margin-left: 16.6666666667%;
}

.grid-margin-x > .small-offset-2 {
  margin-left: calc(16.6666666667% + 0.5rem / 2);
}

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

.grid-margin-x > .small-offset-3 {
  margin-left: calc(25% + 0.5rem / 2);
}

.small-offset-4 {
  margin-left: 33.3333333333%;
}

.grid-margin-x > .small-offset-4 {
  margin-left: calc(33.3333333333% + 0.5rem / 2);
}

.small-offset-5 {
  margin-left: 41.6666666667%;
}

.grid-margin-x > .small-offset-5 {
  margin-left: calc(41.6666666667% + 0.5rem / 2);
}

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

.grid-margin-x > .small-offset-6 {
  margin-left: calc(50% + 0.5rem / 2);
}

.small-offset-7 {
  margin-left: 58.3333333333%;
}

.grid-margin-x > .small-offset-7 {
  margin-left: calc(58.3333333333% + 0.5rem / 2);
}

.small-offset-8 {
  margin-left: 66.6666666667%;
}

.grid-margin-x > .small-offset-8 {
  margin-left: calc(66.6666666667% + 0.5rem / 2);
}

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

.grid-margin-x > .small-offset-9 {
  margin-left: calc(75% + 0.5rem / 2);
}

.small-offset-10 {
  margin-left: 83.3333333333%;
}

.grid-margin-x > .small-offset-10 {
  margin-left: calc(83.3333333333% + 0.5rem / 2);
}

.small-offset-11 {
  margin-left: 91.6666666667%;
}

.grid-margin-x > .small-offset-11 {
  margin-left: calc(91.6666666667% + 0.5rem / 2);
}

@media print, screen and (min-width: 40em) {
  .medium-offset-0 {
    margin-left: 0%;
  }
  .grid-margin-x > .medium-offset-0 {
    margin-left: calc(0% + 1rem / 2);
  }
  .medium-offset-1 {
    margin-left: 8.3333333333%;
  }
  .grid-margin-x > .medium-offset-1 {
    margin-left: calc(8.3333333333% + 1rem / 2);
  }
  .medium-offset-2 {
    margin-left: 16.6666666667%;
  }
  .grid-margin-x > .medium-offset-2 {
    margin-left: calc(16.6666666667% + 1rem / 2);
  }
  .medium-offset-3 {
    margin-left: 25%;
  }
  .grid-margin-x > .medium-offset-3 {
    margin-left: calc(25% + 1rem / 2);
  }
  .medium-offset-4 {
    margin-left: 33.3333333333%;
  }
  .grid-margin-x > .medium-offset-4 {
    margin-left: calc(33.3333333333% + 1rem / 2);
  }
  .medium-offset-5 {
    margin-left: 41.6666666667%;
  }
  .grid-margin-x > .medium-offset-5 {
    margin-left: calc(41.6666666667% + 1rem / 2);
  }
  .medium-offset-6 {
    margin-left: 50%;
  }
  .grid-margin-x > .medium-offset-6 {
    margin-left: calc(50% + 1rem / 2);
  }
  .medium-offset-7 {
    margin-left: 58.3333333333%;
  }
  .grid-margin-x > .medium-offset-7 {
    margin-left: calc(58.3333333333% + 1rem / 2);
  }
  .medium-offset-8 {
    margin-left: 66.6666666667%;
  }
  .grid-margin-x > .medium-offset-8 {
    margin-left: calc(66.6666666667% + 1rem / 2);
  }
  .medium-offset-9 {
    margin-left: 75%;
  }
  .grid-margin-x > .medium-offset-9 {
    margin-left: calc(75% + 1rem / 2);
  }
  .medium-offset-10 {
    margin-left: 83.3333333333%;
  }
  .grid-margin-x > .medium-offset-10 {
    margin-left: calc(83.3333333333% + 1rem / 2);
  }
  .medium-offset-11 {
    margin-left: 91.6666666667%;
  }
  .grid-margin-x > .medium-offset-11 {
    margin-left: calc(91.6666666667% + 1rem / 2);
  }
}
@media print, screen and (min-width: 60em) {
  .large-offset-0 {
    margin-left: 0%;
  }
  .grid-margin-x > .large-offset-0 {
    margin-left: calc(0% + 2rem / 2);
  }
  .large-offset-1 {
    margin-left: 8.3333333333%;
  }
  .grid-margin-x > .large-offset-1 {
    margin-left: calc(8.3333333333% + 2rem / 2);
  }
  .large-offset-2 {
    margin-left: 16.6666666667%;
  }
  .grid-margin-x > .large-offset-2 {
    margin-left: calc(16.6666666667% + 2rem / 2);
  }
  .large-offset-3 {
    margin-left: 25%;
  }
  .grid-margin-x > .large-offset-3 {
    margin-left: calc(25% + 2rem / 2);
  }
  .large-offset-4 {
    margin-left: 33.3333333333%;
  }
  .grid-margin-x > .large-offset-4 {
    margin-left: calc(33.3333333333% + 2rem / 2);
  }
  .large-offset-5 {
    margin-left: 41.6666666667%;
  }
  .grid-margin-x > .large-offset-5 {
    margin-left: calc(41.6666666667% + 2rem / 2);
  }
  .large-offset-6 {
    margin-left: 50%;
  }
  .grid-margin-x > .large-offset-6 {
    margin-left: calc(50% + 2rem / 2);
  }
  .large-offset-7 {
    margin-left: 58.3333333333%;
  }
  .grid-margin-x > .large-offset-7 {
    margin-left: calc(58.3333333333% + 2rem / 2);
  }
  .large-offset-8 {
    margin-left: 66.6666666667%;
  }
  .grid-margin-x > .large-offset-8 {
    margin-left: calc(66.6666666667% + 2rem / 2);
  }
  .large-offset-9 {
    margin-left: 75%;
  }
  .grid-margin-x > .large-offset-9 {
    margin-left: calc(75% + 2rem / 2);
  }
  .large-offset-10 {
    margin-left: 83.3333333333%;
  }
  .grid-margin-x > .large-offset-10 {
    margin-left: calc(83.3333333333% + 2rem / 2);
  }
  .large-offset-11 {
    margin-left: 91.6666666667%;
  }
  .grid-margin-x > .large-offset-11 {
    margin-left: calc(91.6666666667% + 2rem / 2);
  }
}
@media screen and (min-width: 90em) {
  .xlarge-offset-0 {
    margin-left: 0%;
  }
  .grid-margin-x > .xlarge-offset-0 {
    margin-left: calc(0% + 2rem / 2);
  }
  .xlarge-offset-1 {
    margin-left: 8.3333333333%;
  }
  .grid-margin-x > .xlarge-offset-1 {
    margin-left: calc(8.3333333333% + 2rem / 2);
  }
  .xlarge-offset-2 {
    margin-left: 16.6666666667%;
  }
  .grid-margin-x > .xlarge-offset-2 {
    margin-left: calc(16.6666666667% + 2rem / 2);
  }
  .xlarge-offset-3 {
    margin-left: 25%;
  }
  .grid-margin-x > .xlarge-offset-3 {
    margin-left: calc(25% + 2rem / 2);
  }
  .xlarge-offset-4 {
    margin-left: 33.3333333333%;
  }
  .grid-margin-x > .xlarge-offset-4 {
    margin-left: calc(33.3333333333% + 2rem / 2);
  }
  .xlarge-offset-5 {
    margin-left: 41.6666666667%;
  }
  .grid-margin-x > .xlarge-offset-5 {
    margin-left: calc(41.6666666667% + 2rem / 2);
  }
  .xlarge-offset-6 {
    margin-left: 50%;
  }
  .grid-margin-x > .xlarge-offset-6 {
    margin-left: calc(50% + 2rem / 2);
  }
  .xlarge-offset-7 {
    margin-left: 58.3333333333%;
  }
  .grid-margin-x > .xlarge-offset-7 {
    margin-left: calc(58.3333333333% + 2rem / 2);
  }
  .xlarge-offset-8 {
    margin-left: 66.6666666667%;
  }
  .grid-margin-x > .xlarge-offset-8 {
    margin-left: calc(66.6666666667% + 2rem / 2);
  }
  .xlarge-offset-9 {
    margin-left: 75%;
  }
  .grid-margin-x > .xlarge-offset-9 {
    margin-left: calc(75% + 2rem / 2);
  }
  .xlarge-offset-10 {
    margin-left: 83.3333333333%;
  }
  .grid-margin-x > .xlarge-offset-10 {
    margin-left: calc(83.3333333333% + 2rem / 2);
  }
  .xlarge-offset-11 {
    margin-left: 91.6666666667%;
  }
  .grid-margin-x > .xlarge-offset-11 {
    margin-left: calc(91.6666666667% + 2rem / 2);
  }
}
.grid-y {
  display: flex;
  flex-flow: column nowrap;
}
.grid-y > .cell {
  height: auto;
  max-height: none;
}
.grid-y > .auto {
  height: auto;
}
.grid-y > .shrink {
  height: auto;
}
.grid-y > .small-shrink, .grid-y > .small-full, .grid-y > .small-1, .grid-y > .small-2, .grid-y > .small-3, .grid-y > .small-4, .grid-y > .small-5, .grid-y > .small-6, .grid-y > .small-7, .grid-y > .small-8, .grid-y > .small-9, .grid-y > .small-10, .grid-y > .small-11, .grid-y > .small-12 {
  flex-basis: auto;
}
@media print, screen and (min-width: 40em) {
  .grid-y > .medium-shrink, .grid-y > .medium-full, .grid-y > .medium-1, .grid-y > .medium-2, .grid-y > .medium-3, .grid-y > .medium-4, .grid-y > .medium-5, .grid-y > .medium-6, .grid-y > .medium-7, .grid-y > .medium-8, .grid-y > .medium-9, .grid-y > .medium-10, .grid-y > .medium-11, .grid-y > .medium-12 {
    flex-basis: auto;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-y > .large-shrink, .grid-y > .large-full, .grid-y > .large-1, .grid-y > .large-2, .grid-y > .large-3, .grid-y > .large-4, .grid-y > .large-5, .grid-y > .large-6, .grid-y > .large-7, .grid-y > .large-8, .grid-y > .large-9, .grid-y > .large-10, .grid-y > .large-11, .grid-y > .large-12 {
    flex-basis: auto;
  }
}
@media screen and (min-width: 90em) {
  .grid-y > .xlarge-shrink, .grid-y > .xlarge-full, .grid-y > .xlarge-1, .grid-y > .xlarge-2, .grid-y > .xlarge-3, .grid-y > .xlarge-4, .grid-y > .xlarge-5, .grid-y > .xlarge-6, .grid-y > .xlarge-7, .grid-y > .xlarge-8, .grid-y > .xlarge-9, .grid-y > .xlarge-10, .grid-y > .xlarge-11, .grid-y > .xlarge-12 {
    flex-basis: auto;
  }
}
.grid-y > .small-12, .grid-y > .small-11, .grid-y > .small-10, .grid-y > .small-9, .grid-y > .small-8, .grid-y > .small-7, .grid-y > .small-6, .grid-y > .small-5, .grid-y > .small-4, .grid-y > .small-3, .grid-y > .small-2, .grid-y > .small-1 {
  flex: 0 0 auto;
}
.grid-y > .small-1 {
  height: 8.3333333333%;
}
.grid-y > .small-2 {
  height: 16.6666666667%;
}
.grid-y > .small-3 {
  height: 25%;
}
.grid-y > .small-4 {
  height: 33.3333333333%;
}
.grid-y > .small-5 {
  height: 41.6666666667%;
}
.grid-y > .small-6 {
  height: 50%;
}
.grid-y > .small-7 {
  height: 58.3333333333%;
}
.grid-y > .small-8 {
  height: 66.6666666667%;
}
.grid-y > .small-9 {
  height: 75%;
}
.grid-y > .small-10 {
  height: 83.3333333333%;
}
.grid-y > .small-11 {
  height: 91.6666666667%;
}
.grid-y > .small-12 {
  height: 100%;
}
@media print, screen and (min-width: 40em) {
  .grid-y > .medium-auto {
    flex: 1 1 0;
    height: auto;
  }
  .grid-y > .medium-12, .grid-y > .medium-11, .grid-y > .medium-10, .grid-y > .medium-9, .grid-y > .medium-8, .grid-y > .medium-7, .grid-y > .medium-6, .grid-y > .medium-5, .grid-y > .medium-4, .grid-y > .medium-3, .grid-y > .medium-2, .grid-y > .medium-1, .grid-y > .medium-shrink {
    flex: 0 0 auto;
  }
  .grid-y > .medium-shrink {
    height: auto;
  }
  .grid-y > .medium-1 {
    height: 8.3333333333%;
  }
  .grid-y > .medium-2 {
    height: 16.6666666667%;
  }
  .grid-y > .medium-3 {
    height: 25%;
  }
  .grid-y > .medium-4 {
    height: 33.3333333333%;
  }
  .grid-y > .medium-5 {
    height: 41.6666666667%;
  }
  .grid-y > .medium-6 {
    height: 50%;
  }
  .grid-y > .medium-7 {
    height: 58.3333333333%;
  }
  .grid-y > .medium-8 {
    height: 66.6666666667%;
  }
  .grid-y > .medium-9 {
    height: 75%;
  }
  .grid-y > .medium-10 {
    height: 83.3333333333%;
  }
  .grid-y > .medium-11 {
    height: 91.6666666667%;
  }
  .grid-y > .medium-12 {
    height: 100%;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-y > .large-auto {
    flex: 1 1 0;
    height: auto;
  }
  .grid-y > .large-12, .grid-y > .large-11, .grid-y > .large-10, .grid-y > .large-9, .grid-y > .large-8, .grid-y > .large-7, .grid-y > .large-6, .grid-y > .large-5, .grid-y > .large-4, .grid-y > .large-3, .grid-y > .large-2, .grid-y > .large-1, .grid-y > .large-shrink {
    flex: 0 0 auto;
  }
  .grid-y > .large-shrink {
    height: auto;
  }
  .grid-y > .large-1 {
    height: 8.3333333333%;
  }
  .grid-y > .large-2 {
    height: 16.6666666667%;
  }
  .grid-y > .large-3 {
    height: 25%;
  }
  .grid-y > .large-4 {
    height: 33.3333333333%;
  }
  .grid-y > .large-5 {
    height: 41.6666666667%;
  }
  .grid-y > .large-6 {
    height: 50%;
  }
  .grid-y > .large-7 {
    height: 58.3333333333%;
  }
  .grid-y > .large-8 {
    height: 66.6666666667%;
  }
  .grid-y > .large-9 {
    height: 75%;
  }
  .grid-y > .large-10 {
    height: 83.3333333333%;
  }
  .grid-y > .large-11 {
    height: 91.6666666667%;
  }
  .grid-y > .large-12 {
    height: 100%;
  }
}
@media screen and (min-width: 90em) {
  .grid-y > .xlarge-auto {
    flex: 1 1 0;
    height: auto;
  }
  .grid-y > .xlarge-12, .grid-y > .xlarge-11, .grid-y > .xlarge-10, .grid-y > .xlarge-9, .grid-y > .xlarge-8, .grid-y > .xlarge-7, .grid-y > .xlarge-6, .grid-y > .xlarge-5, .grid-y > .xlarge-4, .grid-y > .xlarge-3, .grid-y > .xlarge-2, .grid-y > .xlarge-1, .grid-y > .xlarge-shrink {
    flex: 0 0 auto;
  }
  .grid-y > .xlarge-shrink {
    height: auto;
  }
  .grid-y > .xlarge-1 {
    height: 8.3333333333%;
  }
  .grid-y > .xlarge-2 {
    height: 16.6666666667%;
  }
  .grid-y > .xlarge-3 {
    height: 25%;
  }
  .grid-y > .xlarge-4 {
    height: 33.3333333333%;
  }
  .grid-y > .xlarge-5 {
    height: 41.6666666667%;
  }
  .grid-y > .xlarge-6 {
    height: 50%;
  }
  .grid-y > .xlarge-7 {
    height: 58.3333333333%;
  }
  .grid-y > .xlarge-8 {
    height: 66.6666666667%;
  }
  .grid-y > .xlarge-9 {
    height: 75%;
  }
  .grid-y > .xlarge-10 {
    height: 83.3333333333%;
  }
  .grid-y > .xlarge-11 {
    height: 91.6666666667%;
  }
  .grid-y > .xlarge-12 {
    height: 100%;
  }
}

.grid-padding-y .grid-padding-y {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-y .grid-padding-y {
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-padding-y .grid-padding-y {
    margin-top: -1rem;
    margin-bottom: -1rem;
  }
}
.grid-padding-y > .cell {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
@media print, screen and (min-width: 40em) {
  .grid-padding-y > .cell {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-padding-y > .cell {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.grid-margin-y {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y {
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-margin-y {
    margin-top: -1rem;
    margin-bottom: -1rem;
  }
}
.grid-margin-y > .cell {
  height: calc(100% - 0.5rem);
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .cell {
    height: calc(100% - 1rem);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-margin-y > .cell {
    height: calc(100% - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
.grid-margin-y > .auto {
  height: auto;
}
.grid-margin-y > .shrink {
  height: auto;
}
.grid-margin-y > .small-1 {
  height: calc(8.3333333333% - 0.5rem);
}
.grid-margin-y > .small-2 {
  height: calc(16.6666666667% - 0.5rem);
}
.grid-margin-y > .small-3 {
  height: calc(25% - 0.5rem);
}
.grid-margin-y > .small-4 {
  height: calc(33.3333333333% - 0.5rem);
}
.grid-margin-y > .small-5 {
  height: calc(41.6666666667% - 0.5rem);
}
.grid-margin-y > .small-6 {
  height: calc(50% - 0.5rem);
}
.grid-margin-y > .small-7 {
  height: calc(58.3333333333% - 0.5rem);
}
.grid-margin-y > .small-8 {
  height: calc(66.6666666667% - 0.5rem);
}
.grid-margin-y > .small-9 {
  height: calc(75% - 0.5rem);
}
.grid-margin-y > .small-10 {
  height: calc(83.3333333333% - 0.5rem);
}
.grid-margin-y > .small-11 {
  height: calc(91.6666666667% - 0.5rem);
}
.grid-margin-y > .small-12 {
  height: calc(100% - 0.5rem);
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .auto {
    height: auto;
  }
  .grid-margin-y > .shrink {
    height: auto;
  }
  .grid-margin-y > .small-1 {
    height: calc(8.3333333333% - 1rem);
  }
  .grid-margin-y > .small-2 {
    height: calc(16.6666666667% - 1rem);
  }
  .grid-margin-y > .small-3 {
    height: calc(25% - 1rem);
  }
  .grid-margin-y > .small-4 {
    height: calc(33.3333333333% - 1rem);
  }
  .grid-margin-y > .small-5 {
    height: calc(41.6666666667% - 1rem);
  }
  .grid-margin-y > .small-6 {
    height: calc(50% - 1rem);
  }
  .grid-margin-y > .small-7 {
    height: calc(58.3333333333% - 1rem);
  }
  .grid-margin-y > .small-8 {
    height: calc(66.6666666667% - 1rem);
  }
  .grid-margin-y > .small-9 {
    height: calc(75% - 1rem);
  }
  .grid-margin-y > .small-10 {
    height: calc(83.3333333333% - 1rem);
  }
  .grid-margin-y > .small-11 {
    height: calc(91.6666666667% - 1rem);
  }
  .grid-margin-y > .small-12 {
    height: calc(100% - 1rem);
  }
  .grid-margin-y > .medium-auto {
    height: auto;
  }
  .grid-margin-y > .medium-shrink {
    height: auto;
  }
  .grid-margin-y > .medium-1 {
    height: calc(8.3333333333% - 1rem);
  }
  .grid-margin-y > .medium-2 {
    height: calc(16.6666666667% - 1rem);
  }
  .grid-margin-y > .medium-3 {
    height: calc(25% - 1rem);
  }
  .grid-margin-y > .medium-4 {
    height: calc(33.3333333333% - 1rem);
  }
  .grid-margin-y > .medium-5 {
    height: calc(41.6666666667% - 1rem);
  }
  .grid-margin-y > .medium-6 {
    height: calc(50% - 1rem);
  }
  .grid-margin-y > .medium-7 {
    height: calc(58.3333333333% - 1rem);
  }
  .grid-margin-y > .medium-8 {
    height: calc(66.6666666667% - 1rem);
  }
  .grid-margin-y > .medium-9 {
    height: calc(75% - 1rem);
  }
  .grid-margin-y > .medium-10 {
    height: calc(83.3333333333% - 1rem);
  }
  .grid-margin-y > .medium-11 {
    height: calc(91.6666666667% - 1rem);
  }
  .grid-margin-y > .medium-12 {
    height: calc(100% - 1rem);
  }
}
@media print, screen and (min-width: 60em) {
  .grid-margin-y > .auto {
    height: auto;
  }
  .grid-margin-y > .shrink {
    height: auto;
  }
  .grid-margin-y > .small-1 {
    height: calc(8.3333333333% - 2rem);
  }
  .grid-margin-y > .small-2 {
    height: calc(16.6666666667% - 2rem);
  }
  .grid-margin-y > .small-3 {
    height: calc(25% - 2rem);
  }
  .grid-margin-y > .small-4 {
    height: calc(33.3333333333% - 2rem);
  }
  .grid-margin-y > .small-5 {
    height: calc(41.6666666667% - 2rem);
  }
  .grid-margin-y > .small-6 {
    height: calc(50% - 2rem);
  }
  .grid-margin-y > .small-7 {
    height: calc(58.3333333333% - 2rem);
  }
  .grid-margin-y > .small-8 {
    height: calc(66.6666666667% - 2rem);
  }
  .grid-margin-y > .small-9 {
    height: calc(75% - 2rem);
  }
  .grid-margin-y > .small-10 {
    height: calc(83.3333333333% - 2rem);
  }
  .grid-margin-y > .small-11 {
    height: calc(91.6666666667% - 2rem);
  }
  .grid-margin-y > .small-12 {
    height: calc(100% - 2rem);
  }
  .grid-margin-y > .medium-auto {
    height: auto;
  }
  .grid-margin-y > .medium-shrink {
    height: auto;
  }
  .grid-margin-y > .medium-1 {
    height: calc(8.3333333333% - 2rem);
  }
  .grid-margin-y > .medium-2 {
    height: calc(16.6666666667% - 2rem);
  }
  .grid-margin-y > .medium-3 {
    height: calc(25% - 2rem);
  }
  .grid-margin-y > .medium-4 {
    height: calc(33.3333333333% - 2rem);
  }
  .grid-margin-y > .medium-5 {
    height: calc(41.6666666667% - 2rem);
  }
  .grid-margin-y > .medium-6 {
    height: calc(50% - 2rem);
  }
  .grid-margin-y > .medium-7 {
    height: calc(58.3333333333% - 2rem);
  }
  .grid-margin-y > .medium-8 {
    height: calc(66.6666666667% - 2rem);
  }
  .grid-margin-y > .medium-9 {
    height: calc(75% - 2rem);
  }
  .grid-margin-y > .medium-10 {
    height: calc(83.3333333333% - 2rem);
  }
  .grid-margin-y > .medium-11 {
    height: calc(91.6666666667% - 2rem);
  }
  .grid-margin-y > .medium-12 {
    height: calc(100% - 2rem);
  }
  .grid-margin-y > .large-auto {
    height: auto;
  }
  .grid-margin-y > .large-shrink {
    height: auto;
  }
  .grid-margin-y > .large-1 {
    height: calc(8.3333333333% - 2rem);
  }
  .grid-margin-y > .large-2 {
    height: calc(16.6666666667% - 2rem);
  }
  .grid-margin-y > .large-3 {
    height: calc(25% - 2rem);
  }
  .grid-margin-y > .large-4 {
    height: calc(33.3333333333% - 2rem);
  }
  .grid-margin-y > .large-5 {
    height: calc(41.6666666667% - 2rem);
  }
  .grid-margin-y > .large-6 {
    height: calc(50% - 2rem);
  }
  .grid-margin-y > .large-7 {
    height: calc(58.3333333333% - 2rem);
  }
  .grid-margin-y > .large-8 {
    height: calc(66.6666666667% - 2rem);
  }
  .grid-margin-y > .large-9 {
    height: calc(75% - 2rem);
  }
  .grid-margin-y > .large-10 {
    height: calc(83.3333333333% - 2rem);
  }
  .grid-margin-y > .large-11 {
    height: calc(91.6666666667% - 2rem);
  }
  .grid-margin-y > .large-12 {
    height: calc(100% - 2rem);
  }
}
@media screen and (min-width: 90em) {
  .grid-margin-y > .xlarge-auto {
    height: auto;
  }
  .grid-margin-y > .xlarge-shrink {
    height: auto;
  }
  .grid-margin-y > .xlarge-1 {
    height: calc(8.3333333333% - 2rem);
  }
  .grid-margin-y > .xlarge-2 {
    height: calc(16.6666666667% - 2rem);
  }
  .grid-margin-y > .xlarge-3 {
    height: calc(25% - 2rem);
  }
  .grid-margin-y > .xlarge-4 {
    height: calc(33.3333333333% - 2rem);
  }
  .grid-margin-y > .xlarge-5 {
    height: calc(41.6666666667% - 2rem);
  }
  .grid-margin-y > .xlarge-6 {
    height: calc(50% - 2rem);
  }
  .grid-margin-y > .xlarge-7 {
    height: calc(58.3333333333% - 2rem);
  }
  .grid-margin-y > .xlarge-8 {
    height: calc(66.6666666667% - 2rem);
  }
  .grid-margin-y > .xlarge-9 {
    height: calc(75% - 2rem);
  }
  .grid-margin-y > .xlarge-10 {
    height: calc(83.3333333333% - 2rem);
  }
  .grid-margin-y > .xlarge-11 {
    height: calc(91.6666666667% - 2rem);
  }
  .grid-margin-y > .xlarge-12 {
    height: calc(100% - 2rem);
  }
}

.grid-frame {
  overflow: hidden;
  position: relative;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100vw;
}

.cell .grid-frame {
  width: 100%;
}

.cell-block {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.cell-block-y {
  overflow-y: auto;
  max-height: 100%;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.cell-block-container {
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.cell-block-container > .grid-x {
  max-height: 100%;
  flex-wrap: nowrap;
}

@media print, screen and (min-width: 40em) {
  .medium-grid-frame {
    overflow: hidden;
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100vw;
  }
  .cell .medium-grid-frame {
    width: 100%;
  }
  .medium-cell-block {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .medium-cell-block-container {
    display: flex;
    flex-direction: column;
    max-height: 100%;
  }
  .medium-cell-block-container > .grid-x {
    max-height: 100%;
    flex-wrap: nowrap;
  }
  .medium-cell-block-y {
    overflow-y: auto;
    max-height: 100%;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
@media print, screen and (min-width: 60em) {
  .large-grid-frame {
    overflow: hidden;
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100vw;
  }
  .cell .large-grid-frame {
    width: 100%;
  }
  .large-cell-block {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .large-cell-block-container {
    display: flex;
    flex-direction: column;
    max-height: 100%;
  }
  .large-cell-block-container > .grid-x {
    max-height: 100%;
    flex-wrap: nowrap;
  }
  .large-cell-block-y {
    overflow-y: auto;
    max-height: 100%;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
@media screen and (min-width: 90em) {
  .xlarge-grid-frame {
    overflow: hidden;
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100vw;
  }
  .cell .xlarge-grid-frame {
    width: 100%;
  }
  .xlarge-cell-block {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .xlarge-cell-block-container {
    display: flex;
    flex-direction: column;
    max-height: 100%;
  }
  .xlarge-cell-block-container > .grid-x {
    max-height: 100%;
    flex-wrap: nowrap;
  }
  .xlarge-cell-block-y {
    overflow-y: auto;
    max-height: 100%;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
.grid-y.grid-frame {
  overflow: hidden;
  position: relative;
  flex-wrap: nowrap;
  align-items: stretch;
  height: 100vh;
  width: auto;
}
@media print, screen and (min-width: 40em) {
  .grid-y.medium-grid-frame {
    overflow: hidden;
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    height: 100vh;
    width: auto;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-y.large-grid-frame {
    overflow: hidden;
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    height: 100vh;
    width: auto;
  }
}
@media screen and (min-width: 90em) {
  .grid-y.xlarge-grid-frame {
    overflow: hidden;
    position: relative;
    flex-wrap: nowrap;
    align-items: stretch;
    height: 100vh;
    width: auto;
  }
}

.cell .grid-y.grid-frame {
  height: 100%;
}
@media print, screen and (min-width: 40em) {
  .cell .grid-y.medium-grid-frame {
    height: 100%;
  }
}
@media print, screen and (min-width: 60em) {
  .cell .grid-y.large-grid-frame {
    height: 100%;
  }
}
@media screen and (min-width: 90em) {
  .cell .grid-y.xlarge-grid-frame {
    height: 100%;
  }
}

.grid-margin-y {
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y {
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-margin-y {
    margin-top: -1rem;
    margin-bottom: -1rem;
  }
}
.grid-margin-y > .cell {
  height: calc(100% - 0.5rem);
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .cell {
    height: calc(100% - 1rem);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}
@media print, screen and (min-width: 60em) {
  .grid-margin-y > .cell {
    height: calc(100% - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}
.grid-margin-y > .auto {
  height: auto;
}
.grid-margin-y > .shrink {
  height: auto;
}
.grid-margin-y > .small-1 {
  height: calc(8.3333333333% - 0.5rem);
}
.grid-margin-y > .small-2 {
  height: calc(16.6666666667% - 0.5rem);
}
.grid-margin-y > .small-3 {
  height: calc(25% - 0.5rem);
}
.grid-margin-y > .small-4 {
  height: calc(33.3333333333% - 0.5rem);
}
.grid-margin-y > .small-5 {
  height: calc(41.6666666667% - 0.5rem);
}
.grid-margin-y > .small-6 {
  height: calc(50% - 0.5rem);
}
.grid-margin-y > .small-7 {
  height: calc(58.3333333333% - 0.5rem);
}
.grid-margin-y > .small-8 {
  height: calc(66.6666666667% - 0.5rem);
}
.grid-margin-y > .small-9 {
  height: calc(75% - 0.5rem);
}
.grid-margin-y > .small-10 {
  height: calc(83.3333333333% - 0.5rem);
}
.grid-margin-y > .small-11 {
  height: calc(91.6666666667% - 0.5rem);
}
.grid-margin-y > .small-12 {
  height: calc(100% - 0.5rem);
}
@media print, screen and (min-width: 40em) {
  .grid-margin-y > .auto {
    height: auto;
  }
  .grid-margin-y > .shrink {
    height: auto;
  }
  .grid-margin-y > .small-1 {
    height: calc(8.3333333333% - 1rem);
  }
  .grid-margin-y > .small-2 {
    height: calc(16.6666666667% - 1rem);
  }
  .grid-margin-y > .small-3 {
    height: calc(25% - 1rem);
  }
  .grid-margin-y > .small-4 {
    height: calc(33.3333333333% - 1rem);
  }
  .grid-margin-y > .small-5 {
    height: calc(41.6666666667% - 1rem);
  }
  .grid-margin-y > .small-6 {
    height: calc(50% - 1rem);
  }
  .grid-margin-y > .small-7 {
    height: calc(58.3333333333% - 1rem);
  }
  .grid-margin-y > .small-8 {
    height: calc(66.6666666667% - 1rem);
  }
  .grid-margin-y > .small-9 {
    height: calc(75% - 1rem);
  }
  .grid-margin-y > .small-10 {
    height: calc(83.3333333333% - 1rem);
  }
  .grid-margin-y > .small-11 {
    height: calc(91.6666666667% - 1rem);
  }
  .grid-margin-y > .small-12 {
    height: calc(100% - 1rem);
  }
  .grid-margin-y > .medium-auto {
    height: auto;
  }
  .grid-margin-y > .medium-shrink {
    height: auto;
  }
  .grid-margin-y > .medium-1 {
    height: calc(8.3333333333% - 1rem);
  }
  .grid-margin-y > .medium-2 {
    height: calc(16.6666666667% - 1rem);
  }
  .grid-margin-y > .medium-3 {
    height: calc(25% - 1rem);
  }
  .grid-margin-y > .medium-4 {
    height: calc(33.3333333333% - 1rem);
  }
  .grid-margin-y > .medium-5 {
    height: calc(41.6666666667% - 1rem);
  }
  .grid-margin-y > .medium-6 {
    height: calc(50% - 1rem);
  }
  .grid-margin-y > .medium-7 {
    height: calc(58.3333333333% - 1rem);
  }
  .grid-margin-y > .medium-8 {
    height: calc(66.6666666667% - 1rem);
  }
  .grid-margin-y > .medium-9 {
    height: calc(75% - 1rem);
  }
  .grid-margin-y > .medium-10 {
    height: calc(83.3333333333% - 1rem);
  }
  .grid-margin-y > .medium-11 {
    height: calc(91.6666666667% - 1rem);
  }
  .grid-margin-y > .medium-12 {
    height: calc(100% - 1rem);
  }
}
@media print, screen and (min-width: 60em) {
  .grid-margin-y > .auto {
    height: auto;
  }
  .grid-margin-y > .shrink {
    height: auto;
  }
  .grid-margin-y > .small-1 {
    height: calc(8.3333333333% - 2rem);
  }
  .grid-margin-y > .small-2 {
    height: calc(16.6666666667% - 2rem);
  }
  .grid-margin-y > .small-3 {
    height: calc(25% - 2rem);
  }
  .grid-margin-y > .small-4 {
    height: calc(33.3333333333% - 2rem);
  }
  .grid-margin-y > .small-5 {
    height: calc(41.6666666667% - 2rem);
  }
  .grid-margin-y > .small-6 {
    height: calc(50% - 2rem);
  }
  .grid-margin-y > .small-7 {
    height: calc(58.3333333333% - 2rem);
  }
  .grid-margin-y > .small-8 {
    height: calc(66.6666666667% - 2rem);
  }
  .grid-margin-y > .small-9 {
    height: calc(75% - 2rem);
  }
  .grid-margin-y > .small-10 {
    height: calc(83.3333333333% - 2rem);
  }
  .grid-margin-y > .small-11 {
    height: calc(91.6666666667% - 2rem);
  }
  .grid-margin-y > .small-12 {
    height: calc(100% - 2rem);
  }
  .grid-margin-y > .medium-auto {
    height: auto;
  }
  .grid-margin-y > .medium-shrink {
    height: auto;
  }
  .grid-margin-y > .medium-1 {
    height: calc(8.3333333333% - 2rem);
  }
  .grid-margin-y > .medium-2 {
    height: calc(16.6666666667% - 2rem);
  }
  .grid-margin-y > .medium-3 {
    height: calc(25% - 2rem);
  }
  .grid-margin-y > .medium-4 {
    height: calc(33.3333333333% - 2rem);
  }
  .grid-margin-y > .medium-5 {
    height: calc(41.6666666667% - 2rem);
  }
  .grid-margin-y > .medium-6 {
    height: calc(50% - 2rem);
  }
  .grid-margin-y > .medium-7 {
    height: calc(58.3333333333% - 2rem);
  }
  .grid-margin-y > .medium-8 {
    height: calc(66.6666666667% - 2rem);
  }
  .grid-margin-y > .medium-9 {
    height: calc(75% - 2rem);
  }
  .grid-margin-y > .medium-10 {
    height: calc(83.3333333333% - 2rem);
  }
  .grid-margin-y > .medium-11 {
    height: calc(91.6666666667% - 2rem);
  }
  .grid-margin-y > .medium-12 {
    height: calc(100% - 2rem);
  }
  .grid-margin-y > .large-auto {
    height: auto;
  }
  .grid-margin-y > .large-shrink {
    height: auto;
  }
  .grid-margin-y > .large-1 {
    height: calc(8.3333333333% - 2rem);
  }
  .grid-margin-y > .large-2 {
    height: calc(16.6666666667% - 2rem);
  }
  .grid-margin-y > .large-3 {
    height: calc(25% - 2rem);
  }
  .grid-margin-y > .large-4 {
    height: calc(33.3333333333% - 2rem);
  }
  .grid-margin-y > .large-5 {
    height: calc(41.6666666667% - 2rem);
  }
  .grid-margin-y > .large-6 {
    height: calc(50% - 2rem);
  }
  .grid-margin-y > .large-7 {
    height: calc(58.3333333333% - 2rem);
  }
  .grid-margin-y > .large-8 {
    height: calc(66.6666666667% - 2rem);
  }
  .grid-margin-y > .large-9 {
    height: calc(75% - 2rem);
  }
  .grid-margin-y > .large-10 {
    height: calc(83.3333333333% - 2rem);
  }
  .grid-margin-y > .large-11 {
    height: calc(91.6666666667% - 2rem);
  }
  .grid-margin-y > .large-12 {
    height: calc(100% - 2rem);
  }
}
@media screen and (min-width: 90em) {
  .grid-margin-y > .xlarge-auto {
    height: auto;
  }
  .grid-margin-y > .xlarge-shrink {
    height: auto;
  }
  .grid-margin-y > .xlarge-1 {
    height: calc(8.3333333333% - 2rem);
  }
  .grid-margin-y > .xlarge-2 {
    height: calc(16.6666666667% - 2rem);
  }
  .grid-margin-y > .xlarge-3 {
    height: calc(25% - 2rem);
  }
  .grid-margin-y > .xlarge-4 {
    height: calc(33.3333333333% - 2rem);
  }
  .grid-margin-y > .xlarge-5 {
    height: calc(41.6666666667% - 2rem);
  }
  .grid-margin-y > .xlarge-6 {
    height: calc(50% - 2rem);
  }
  .grid-margin-y > .xlarge-7 {
    height: calc(58.3333333333% - 2rem);
  }
  .grid-margin-y > .xlarge-8 {
    height: calc(66.6666666667% - 2rem);
  }
  .grid-margin-y > .xlarge-9 {
    height: calc(75% - 2rem);
  }
  .grid-margin-y > .xlarge-10 {
    height: calc(83.3333333333% - 2rem);
  }
  .grid-margin-y > .xlarge-11 {
    height: calc(91.6666666667% - 2rem);
  }
  .grid-margin-y > .xlarge-12 {
    height: calc(100% - 2rem);
  }
}

.grid-frame.grid-margin-y {
  height: calc(100vh + 0.5rem);
}
@media print, screen and (min-width: 40em) {
  .grid-frame.grid-margin-y {
    height: calc(100vh + 1rem);
  }
}
@media print, screen and (min-width: 60em) {
  .grid-frame.grid-margin-y {
    height: calc(100vh + 2rem);
  }
}
@media screen and (min-width: 90em) {
  .grid-frame.grid-margin-y {
    height: calc(100vh + 2rem);
  }
}

@media print, screen and (min-width: 40em) {
  .grid-margin-y.medium-grid-frame {
    height: calc(100vh + 1rem);
  }
}
@media print, screen and (min-width: 60em) {
  .grid-margin-y.large-grid-frame {
    height: calc(100vh + 2rem);
  }
}
@media screen and (min-width: 90em) {
  .grid-margin-y.xlarge-grid-frame {
    height: calc(100vh + 2rem);
  }
}
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

p {
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
}

em,
i {
  font-style: italic;
  line-height: inherit;
}

strong,
b {
  font-weight: bold;
  line-height: inherit;
}

small {
  font-size: 87.5%;
  line-height: inherit;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 100;
  color: inherit;
  text-rendering: optimizeLegibility;
}
h1 small, .h1 small,
h2 small, .h2 small,
h3 small, .h3 small,
h4 small, .h4 small,
h5 small, .h5 small,
h6 small, .h6 small {
  line-height: 0;
  color: inherit;
}

h1, .h1 {
  font-size: 1.375rem;
  line-height: 1.8;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h2, .h2 {
  font-size: 1.125rem;
  line-height: 1.8;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h3, .h3 {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h4, .h4 {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h5, .h5 {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h6, .h6 {
  font-size: 0.875rem;
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

@media print, screen and (min-width: 40em) {
  h1, .h1 {
    font-size: 2rem;
    line-height: 1.5;
  }
  h2, .h2 {
    font-size: 1.375rem;
  }
  h3, .h3 {
    font-size: 1.125rem;
    line-height: 1.8;
  }
}
@media print, screen and (min-width: 60em) {
  h1, .h1 {
    font-size: 2.625rem;
  }
  h2, .h2 {
    font-size: 2rem;
    line-height: 1.5;
  }
  h3, .h3 {
    font-size: 1.375rem;
  }
  h4, .h4 {
    font-size: 1.125rem;
    line-height: 1.8;
  }
}
a {
  line-height: inherit;
  color: #06c;
  text-decoration: none;
  cursor: pointer;
}
a:hover, a:focus {
  color: #09f;
}
a img {
  border: 0;
}

hr {
  clear: both;
  max-width: 74rem;
  height: 0;
  margin: 1rem 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #e6e8e5;
  border-left: 0;
}

ul,
ol,
dl {
  margin-bottom: 0;
  list-style-position: outside;
  line-height: 1.8;
}

li {
  font-size: inherit;
}

ul {
  margin-left: 0;
  list-style-type: none;
}

ol {
  margin-left: 0;
}

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

dl {
  margin-bottom: 1rem;
}
dl dt {
  margin-bottom: 1rem;
  font-weight: bold;
}

blockquote {
  margin: 0 0 0;
  padding: 0;
  border-left: none;
}
blockquote, blockquote p {
  line-height: 1.8;
  color: #666;
}

abbr, abbr[title] {
  border-bottom: 1px dotted #333;
  cursor: help;
  text-decoration: none;
}

figure {
  margin: 0;
}

kbd {
  margin: 0;
  padding: 0.125rem 0.25rem 0;
  background-color: #f8f8f8;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  color: #333;
  border-radius: 8px;
}

.subheader {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: normal;
  line-height: 1.8;
  color: #666;
}

.lead {
  font-size: 125%;
  line-height: 1.6;
}

.stat {
  font-size: 2.5rem;
  line-height: 1;
}
p + .stat {
  margin-top: -1rem;
}

ul.no-bullet, ol.no-bullet {
  margin-left: 0;
  list-style: none;
}

.cite-block, cite {
  display: block;
  color: #666;
  font-size: 0.8125rem;
}
.cite-block:before, cite:before {
  content: "";
}

.code-inline, code {
  border: 1px solid #e6e8e5;
  background-color: #f8f8f8;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  font-weight: normal;
  color: #333;
  display: inline;
  max-width: 100%;
  word-wrap: break-word;
  padding: 0.125rem 0.3125rem 0.0625rem;
}

.code-block {
  border: 1px solid #e6e8e5;
  background-color: #f8f8f8;
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  font-weight: normal;
  color: #333;
  display: block;
  overflow: auto;
  white-space: pre;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

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

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

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

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

@media print, screen and (min-width: 40em) {
  .medium-text-left {
    text-align: left;
  }
  .medium-text-right {
    text-align: right;
  }
  .medium-text-center {
    text-align: center;
  }
  .medium-text-justify {
    text-align: justify;
  }
}
@media print, screen and (min-width: 60em) {
  .large-text-left {
    text-align: left;
  }
  .large-text-right {
    text-align: right;
  }
  .large-text-center {
    text-align: center;
  }
  .large-text-justify {
    text-align: justify;
  }
}
@media screen and (min-width: 90em) {
  .xlarge-text-left {
    text-align: left;
  }
  .xlarge-text-right {
    text-align: right;
  }
  .xlarge-text-center {
    text-align: center;
  }
  .xlarge-text-justify {
    text-align: justify;
  }
}
.show-for-print {
  display: none !important;
}

@media print {
  * {
    background: transparent !important;
    color: black !important;
    print-color-adjust: economy;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .show-for-print {
    display: block !important;
  }
  .hide-for-print {
    display: none !important;
  }
  table.show-for-print {
    display: table !important;
  }
  thead.show-for-print {
    display: table-header-group !important;
  }
  tbody.show-for-print {
    display: table-row-group !important;
  }
  tr.show-for-print {
    display: table-row !important;
  }
  td.show-for-print {
    display: table-cell !important;
  }
  th.show-for-print {
    display: table-cell !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  pre,
  blockquote {
    border: 1px solid #666;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  .print-break-inside {
    page-break-inside: auto;
  }
}
[type=text], [type=password], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=email], [type=number], [type=search], [type=tel], [type=time], [type=url], [type=color],
textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 2.6125rem;
  margin: 0 0 0;
  padding: 0.4375rem 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.8;
  color: #666;
  transition: border-color 0.25s ease-in-out;
  appearance: none;
}
[type=text]:focus, [type=password]:focus, [type=date]:focus, [type=datetime]:focus, [type=datetime-local]:focus, [type=month]:focus, [type=week]:focus, [type=email]:focus, [type=number]:focus, [type=search]:focus, [type=tel]:focus, [type=time]:focus, [type=url]:focus, [type=color]:focus,
textarea:focus {
  outline: none;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: none;
  transition: border-color 0.25s ease-in-out;
}

textarea {
  max-width: 100%;
}
textarea[rows] {
  height: auto;
}

input:disabled, input[readonly],
textarea:disabled,
textarea[readonly] {
  background-color: #fff;
  cursor: not-allowed;
}

[type=submit],
[type=button] {
  appearance: none;
  border-radius: 4px;
}

input[type=search] {
  box-sizing: border-box;
}

::placeholder {
  color: #999;
}

[type=file],
[type=checkbox],
[type=radio] {
  margin: 0 0 0;
}

[type=checkbox] + label,
[type=radio] + label {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
[type=checkbox] + label[for],
[type=radio] + label[for] {
  cursor: pointer;
}

label > [type=checkbox],
label > [type=radio] {
  margin-right: 0;
}

[type=file] {
  width: 100%;
}

label {
  display: block;
  margin: 0;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5;
  color: #333;
}
label.middle {
  margin: 0 0 0;
  line-height: 1.15;
  padding: 0.0625rem 0;
}

.help-text {
  margin-top: 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: #333;
}

.input-group {
  display: flex;
  width: 100%;
  margin-bottom: 0;
  align-items: stretch;
}
.input-group > :first-child, .input-group > :first-child.input-group-button > * {
  border-radius: 4px 0 0 4px;
}
.input-group > :last-child, .input-group > :last-child.input-group-button > * {
  border-radius: 0 4px 4px 0;
}

.input-group-button a,
.input-group-button input,
.input-group-button button,
.input-group-button label, .input-group-button, .input-group-field, .input-group-label {
  margin: 0;
  white-space: nowrap;
}

.input-group-label {
  padding: 0 1rem;
  border: 1px solid #e6e8e5;
  background: #f8f8f8;
  color: #333;
  text-align: center;
  white-space: nowrap;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.input-group-label:first-child {
  border-right: 0;
}
.input-group-label:last-child {
  border-left: 0;
}

.input-group-field {
  border-radius: 0;
  flex: 1 1 0px;
  min-width: 0;
}

.input-group-button {
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  display: flex;
  flex: 0 0 auto;
}
.input-group-button a,
.input-group-button input,
.input-group-button button,
.input-group-button label {
  align-self: stretch;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1rem;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  max-width: 100%;
  margin-bottom: 0;
}

.fieldset {
  margin: 1.125rem 0;
  padding: 1.25rem;
  border: 1px solid #e6e8e5;
}
.fieldset legend {
  margin: 0;
  margin-left: -0.1875rem;
  padding: 0 0.1875rem;
}

select {
  height: 2.6125rem;
  margin: 0 0 0;
  padding: 0.4375rem 1rem;
  appearance: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.8;
  color: #666;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28153, 204, 0%29"></polygon></svg>');
  background-origin: content-box;
  background-position: right 0 center;
  background-repeat: no-repeat;
  background-size: 9px 6px;
  padding-right: 0;
  transition: border-color 0.25s ease-in-out;
}
@media screen and (min-width: 0\0 ) {
  select {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==");
  }
}
select:focus {
  outline: none;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: none;
  transition: border-color 0.25s ease-in-out;
}
select:disabled {
  background-color: #fff;
  cursor: not-allowed;
}
select::-ms-expand {
  display: none;
}
select[multiple] {
  height: auto;
  background-image: none;
}
select:not([multiple]) {
  padding-top: 0;
  padding-bottom: 0;
}

.is-invalid-input:not(:focus) {
  border-color: #fce3e3;
  background-color: #fffcfc;
}
.is-invalid-input:not(:focus)::placeholder {
  color: #fce3e3;
}

.is-invalid-label {
  color: #fce3e3;
}

.form-error {
  display: none;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.75rem;
  font-weight: bold;
  color: #fce3e3;
}
.form-error.is-visible {
  display: block;
}

.button {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 11px 1rem;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  font-family: inherit;
  font-size: 1rem;
  -webkit-appearance: none;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}
[data-whatinput=mouse] .button {
  outline: 0;
}
.button.tiny {
  font-size: 0.75rem;
}
.button.small {
  font-size: 0.875rem;
}
.button.large {
  font-size: 1.125rem;
}
.button.expanded {
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}
@media print, screen and (max-width: 39.99875em) {
  .button.small-only-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (min-width: 40em) and (max-width: 59.99875em) {
  .button.medium-only-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (max-width: 59.99875em) {
  .button.medium-down-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (min-width: 40em) {
  .button.medium-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (min-width: 60em) and (max-width: 89.99875em) {
  .button.large-only-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (max-width: 89.99875em) {
  .button.large-down-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (min-width: 60em) {
  .button.large-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
@media screen and (min-width: 90em) {
  .button.xlarge-only-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
.button.xlarge-down-expanded {
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}
@media screen and (min-width: 90em) {
  .button.xlarge-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
.button, .button.disabled, .button[disabled], .button.disabled:hover, .button[disabled]:hover, .button.disabled:focus, .button[disabled]:focus {
  background-color: #06c;
  color: #fff;
}
.button:hover, .button:focus {
  background-color: #0057ad;
  color: #fff;
}
.button.white, .button.white.disabled, .button.white[disabled], .button.white.disabled:hover, .button.white[disabled]:hover, .button.white.disabled:focus, .button.white[disabled]:focus {
  background-color: #fff;
  color: #333;
}
.button.white:hover, .button.white:focus {
  background-color: white;
  color: #333;
}
.button.light-gray, .button.light-gray.disabled, .button.light-gray[disabled], .button.light-gray.disabled:hover, .button.light-gray[disabled]:hover, .button.light-gray.disabled:focus, .button.light-gray[disabled]:focus {
  background-color: #f8f8f8;
  color: #333;
}
.button.light-gray:hover, .button.light-gray:focus {
  background-color: #f9f9f9;
  color: #333;
}
.button.medium-gray, .button.medium-gray.disabled, .button.medium-gray[disabled], .button.medium-gray.disabled:hover, .button.medium-gray[disabled]:hover, .button.medium-gray.disabled:focus, .button.medium-gray[disabled]:focus {
  background-color: #e6e8e5;
  color: #333;
}
.button.medium-gray:hover, .button.medium-gray:focus {
  background-color: #ebedea;
  color: #333;
}
.button.dark-gray, .button.dark-gray.disabled, .button.dark-gray[disabled], .button.dark-gray.disabled:hover, .button.dark-gray[disabled]:hover, .button.dark-gray.disabled:focus, .button.dark-gray[disabled]:focus {
  background-color: #666;
  color: #fff;
}
.button.dark-gray:hover, .button.dark-gray:focus {
  background-color: #858585;
  color: #fff;
}
.button.gray, .button.gray.disabled, .button.gray[disabled], .button.gray.disabled:hover, .button.gray[disabled]:hover, .button.gray.disabled:focus, .button.gray[disabled]:focus {
  background-color: #999;
  color: #333;
}
.button.gray:hover, .button.gray:focus {
  background-color: #adadad;
  color: #333;
}
.button.black, .button.black.disabled, .button.black[disabled], .button.black.disabled:hover, .button.black[disabled]:hover, .button.black.disabled:focus, .button.black[disabled]:focus {
  background-color: #333;
  color: #fff;
}
.button.black:hover, .button.black:focus {
  background-color: #5c5c5c;
  color: #fff;
}
.button.sofatutor-green, .button.sofatutor-green.disabled, .button.sofatutor-green[disabled], .button.sofatutor-green.disabled:hover, .button.sofatutor-green[disabled]:hover, .button.sofatutor-green.disabled:focus, .button.sofatutor-green[disabled]:focus {
  background-color: #9c0;
  color: #333;
}
.button.sofatutor-green:hover, .button.sofatutor-green:focus {
  background-color: #c2ff0a;
  color: #333;
}
.button.sofatutor-dark-green, .button.sofatutor-dark-green.disabled, .button.sofatutor-dark-green[disabled], .button.sofatutor-dark-green.disabled:hover, .button.sofatutor-dark-green[disabled]:hover, .button.sofatutor-dark-green.disabled:focus, .button.sofatutor-dark-green[disabled]:focus {
  background-color: #690;
  color: #333;
}
.button.sofatutor-dark-green:hover, .button.sofatutor-dark-green:focus {
  background-color: #96e000;
  color: #333;
}
.button.primary, .button.primary.disabled, .button.primary[disabled], .button.primary.disabled:hover, .button.primary[disabled]:hover, .button.primary.disabled:focus, .button.primary[disabled]:focus {
  background-color: #06c;
  color: #fff;
}
.button.primary:hover, .button.primary:focus {
  background-color: #0a85ff;
  color: #fff;
}
.button.primary-bright, .button.primary-bright.disabled, .button.primary-bright[disabled], .button.primary-bright.disabled:hover, .button.primary-bright[disabled]:hover, .button.primary-bright.disabled:focus, .button.primary-bright[disabled]:focus {
  background-color: #09f;
  color: #333;
}
.button.primary-bright:hover, .button.primary-bright:focus {
  background-color: #33adff;
  color: #333;
}
.button.secondary, .button.secondary.disabled, .button.secondary[disabled], .button.secondary.disabled:hover, .button.secondary[disabled]:hover, .button.secondary.disabled:focus, .button.secondary[disabled]:focus {
  background-color: #ccc;
  color: #333;
}
.button.secondary:hover, .button.secondary:focus {
  background-color: #d6d6d6;
  color: #333;
}
.button.success, .button.success.disabled, .button.success[disabled], .button.success.disabled:hover, .button.success[disabled]:hover, .button.success.disabled:focus, .button.success[disabled]:focus {
  background-color: #d6eb99;
  color: #333;
}
.button.success:hover, .button.success:focus {
  background-color: #deefad;
  color: #333;
}
.button.warning, .button.warning.disabled, .button.warning[disabled], .button.warning.disabled:hover, .button.warning[disabled]:hover, .button.warning.disabled:focus, .button.warning[disabled]:focus {
  background-color: #fdeb99;
  color: #333;
}
.button.warning:hover, .button.warning:focus {
  background-color: #fdefad;
  color: #333;
}
.button.alert, .button.alert.disabled, .button.alert[disabled], .button.alert.disabled:hover, .button.alert[disabled]:hover, .button.alert.disabled:focus, .button.alert[disabled]:focus {
  background-color: #fce3e3;
  color: #333;
}
.button.alert:hover, .button.alert:focus {
  background-color: #fde9e9;
  color: #333;
}
.button.yellow, .button.yellow.disabled, .button.yellow[disabled], .button.yellow.disabled:hover, .button.yellow[disabled]:hover, .button.yellow.disabled:focus, .button.yellow[disabled]:focus {
  background-color: #fbcd00;
  color: #333;
}
.button.yellow:hover, .button.yellow:focus {
  background-color: #ffd930;
  color: #333;
}
.button.purple, .button.purple.disabled, .button.purple[disabled], .button.purple.disabled:hover, .button.purple[disabled]:hover, .button.purple.disabled:focus, .button.purple[disabled]:focus {
  background-color: #7900b5;
  color: #fff;
}
.button.purple:hover, .button.purple:focus {
  background-color: #a500f7;
  color: #fff;
}
.button.orange, .button.orange.disabled, .button.orange[disabled], .button.orange.disabled:hover, .button.orange[disabled]:hover, .button.orange.disabled:focus, .button.orange[disabled]:focus {
  background-color: #e9a033;
  color: #333;
}
.button.orange:hover, .button.orange:focus {
  background-color: #edb35c;
  color: #333;
}
.button.red, .button.red.disabled, .button.red[disabled], .button.red.disabled:hover, .button.red[disabled]:hover, .button.red.disabled:focus, .button.red[disabled]:focus {
  background-color: #e93333;
  color: #fff;
}
.button.red:hover, .button.red:focus {
  background-color: #ed5c5c;
  color: #fff;
}
.button.light-red, .button.light-red.disabled, .button.light-red[disabled], .button.light-red.disabled:hover, .button.light-red[disabled]:hover, .button.light-red.disabled:focus, .button.light-red[disabled]:focus {
  background-color: #e66;
  color: #333;
}
.button.light-red:hover, .button.light-red:focus {
  background-color: #f18585;
  color: #333;
}
.button.light-blue, .button.light-blue.disabled, .button.light-blue[disabled], .button.light-blue.disabled:hover, .button.light-blue[disabled]:hover, .button.light-blue.disabled:focus, .button.light-blue[disabled]:focus {
  background-color: #33a0c4;
  color: #333;
}
.button.light-blue:hover, .button.light-blue:focus {
  background-color: #58b5d4;
  color: #333;
}
.button.transparent-white, .button.transparent-white.disabled, .button.transparent-white[disabled], .button.transparent-white.disabled:hover, .button.transparent-white[disabled]:hover, .button.transparent-white.disabled:focus, .button.transparent-white[disabled]:focus {
  background-color: rgba(255, 255, 255, 0);
  color: #333;
}
.button.transparent-white:hover, .button.transparent-white:focus {
  background-color: rgba(255, 255, 255, 0);
  color: #333;
}
.button.hollow, .button.hollow:hover, .button.hollow:focus, .button.hollow.disabled, .button.hollow.disabled:hover, .button.hollow.disabled:focus, .button.hollow[disabled], .button.hollow[disabled]:hover, .button.hollow[disabled]:focus {
  background-color: transparent;
}
.button.hollow, .button.hollow.disabled, .button.hollow[disabled], .button.hollow.disabled:hover, .button.hollow[disabled]:hover, .button.hollow.disabled:focus, .button.hollow[disabled]:focus {
  border: 1px solid #06c;
  color: #06c;
}
.button.hollow:hover, .button.hollow:focus {
  border-color: #003366;
  color: #003366;
}
.button.hollow.white, .button.hollow.white.disabled, .button.hollow.white[disabled], .button.hollow.white.disabled:hover, .button.hollow.white[disabled]:hover, .button.hollow.white.disabled:focus, .button.hollow.white[disabled]:focus {
  border: 1px solid #fff;
  color: #fff;
}
.button.hollow.white:hover, .button.hollow.white:focus {
  border-color: gray;
  color: gray;
}
.button.hollow.light-gray, .button.hollow.light-gray.disabled, .button.hollow.light-gray[disabled], .button.hollow.light-gray.disabled:hover, .button.hollow.light-gray[disabled]:hover, .button.hollow.light-gray.disabled:focus, .button.hollow.light-gray[disabled]:focus {
  border: 1px solid #f8f8f8;
  color: #f8f8f8;
}
.button.hollow.light-gray:hover, .button.hollow.light-gray:focus {
  border-color: #7c7c7c;
  color: #7c7c7c;
}
.button.hollow.medium-gray, .button.hollow.medium-gray.disabled, .button.hollow.medium-gray[disabled], .button.hollow.medium-gray.disabled:hover, .button.hollow.medium-gray[disabled]:hover, .button.hollow.medium-gray.disabled:focus, .button.hollow.medium-gray[disabled]:focus {
  border: 1px solid #e6e8e5;
  color: #e6e8e5;
}
.button.hollow.medium-gray:hover, .button.hollow.medium-gray:focus {
  border-color: #717a6c;
  color: #717a6c;
}
.button.hollow.dark-gray, .button.hollow.dark-gray.disabled, .button.hollow.dark-gray[disabled], .button.hollow.dark-gray.disabled:hover, .button.hollow.dark-gray[disabled]:hover, .button.hollow.dark-gray.disabled:focus, .button.hollow.dark-gray[disabled]:focus {
  border: 1px solid #666;
  color: #666;
}
.button.hollow.dark-gray:hover, .button.hollow.dark-gray:focus {
  border-color: #333333;
  color: #333333;
}
.button.hollow.gray, .button.hollow.gray.disabled, .button.hollow.gray[disabled], .button.hollow.gray.disabled:hover, .button.hollow.gray[disabled]:hover, .button.hollow.gray.disabled:focus, .button.hollow.gray[disabled]:focus {
  border: 1px solid #999;
  color: #999;
}
.button.hollow.gray:hover, .button.hollow.gray:focus {
  border-color: #4d4d4d;
  color: #4d4d4d;
}
.button.hollow.black, .button.hollow.black.disabled, .button.hollow.black[disabled], .button.hollow.black.disabled:hover, .button.hollow.black[disabled]:hover, .button.hollow.black.disabled:focus, .button.hollow.black[disabled]:focus {
  border: 1px solid #333;
  color: #333;
}
.button.hollow.black:hover, .button.hollow.black:focus {
  border-color: #1a1a1a;
  color: #1a1a1a;
}
.button.hollow.sofatutor-green, .button.hollow.sofatutor-green.disabled, .button.hollow.sofatutor-green[disabled], .button.hollow.sofatutor-green.disabled:hover, .button.hollow.sofatutor-green[disabled]:hover, .button.hollow.sofatutor-green.disabled:focus, .button.hollow.sofatutor-green[disabled]:focus {
  border: 1px solid #9c0;
  color: #9c0;
}
.button.hollow.sofatutor-green:hover, .button.hollow.sofatutor-green:focus {
  border-color: #4d6600;
  color: #4d6600;
}
.button.hollow.sofatutor-dark-green, .button.hollow.sofatutor-dark-green.disabled, .button.hollow.sofatutor-dark-green[disabled], .button.hollow.sofatutor-dark-green.disabled:hover, .button.hollow.sofatutor-dark-green[disabled]:hover, .button.hollow.sofatutor-dark-green.disabled:focus, .button.hollow.sofatutor-dark-green[disabled]:focus {
  border: 1px solid #690;
  color: #690;
}
.button.hollow.sofatutor-dark-green:hover, .button.hollow.sofatutor-dark-green:focus {
  border-color: #334d00;
  color: #334d00;
}
.button.hollow.primary, .button.hollow.primary.disabled, .button.hollow.primary[disabled], .button.hollow.primary.disabled:hover, .button.hollow.primary[disabled]:hover, .button.hollow.primary.disabled:focus, .button.hollow.primary[disabled]:focus {
  border: 1px solid #06c;
  color: #06c;
}
.button.hollow.primary:hover, .button.hollow.primary:focus {
  border-color: #003366;
  color: #003366;
}
.button.hollow.primary-bright, .button.hollow.primary-bright.disabled, .button.hollow.primary-bright[disabled], .button.hollow.primary-bright.disabled:hover, .button.hollow.primary-bright[disabled]:hover, .button.hollow.primary-bright.disabled:focus, .button.hollow.primary-bright[disabled]:focus {
  border: 1px solid #09f;
  color: #09f;
}
.button.hollow.primary-bright:hover, .button.hollow.primary-bright:focus {
  border-color: #004d80;
  color: #004d80;
}
.button.hollow.secondary, .button.hollow.secondary.disabled, .button.hollow.secondary[disabled], .button.hollow.secondary.disabled:hover, .button.hollow.secondary[disabled]:hover, .button.hollow.secondary.disabled:focus, .button.hollow.secondary[disabled]:focus {
  border: 1px solid #ccc;
  color: #ccc;
}
.button.hollow.secondary:hover, .button.hollow.secondary:focus {
  border-color: #666666;
  color: #666666;
}
.button.hollow.success, .button.hollow.success.disabled, .button.hollow.success[disabled], .button.hollow.success.disabled:hover, .button.hollow.success[disabled]:hover, .button.hollow.success.disabled:focus, .button.hollow.success[disabled]:focus {
  border: 1px solid #d6eb99;
  color: #d6eb99;
}
.button.hollow.success:hover, .button.hollow.success:focus {
  border-color: #81a220;
  color: #81a220;
}
.button.hollow.warning, .button.hollow.warning.disabled, .button.hollow.warning[disabled], .button.hollow.warning.disabled:hover, .button.hollow.warning[disabled]:hover, .button.hollow.warning.disabled:focus, .button.hollow.warning[disabled]:focus {
  border: 1px solid #fdeb99;
  color: #fdeb99;
}
.button.hollow.warning:hover, .button.hollow.warning:focus {
  border-color: #c7a404;
  color: #c7a404;
}
.button.hollow.alert, .button.hollow.alert.disabled, .button.hollow.alert[disabled], .button.hollow.alert.disabled:hover, .button.hollow.alert[disabled]:hover, .button.hollow.alert.disabled:focus, .button.hollow.alert[disabled]:focus {
  border: 1px solid #fce3e3;
  color: #fce3e3;
}
.button.hollow.alert:hover, .button.hollow.alert:focus {
  border-color: #d81717;
  color: #d81717;
}
.button.hollow.yellow, .button.hollow.yellow.disabled, .button.hollow.yellow[disabled], .button.hollow.yellow.disabled:hover, .button.hollow.yellow[disabled]:hover, .button.hollow.yellow.disabled:focus, .button.hollow.yellow[disabled]:focus {
  border: 1px solid #fbcd00;
  color: #fbcd00;
}
.button.hollow.yellow:hover, .button.hollow.yellow:focus {
  border-color: #7e6700;
  color: #7e6700;
}
.button.hollow.purple, .button.hollow.purple.disabled, .button.hollow.purple[disabled], .button.hollow.purple.disabled:hover, .button.hollow.purple[disabled]:hover, .button.hollow.purple.disabled:focus, .button.hollow.purple[disabled]:focus {
  border: 1px solid #7900b5;
  color: #7900b5;
}
.button.hollow.purple:hover, .button.hollow.purple:focus {
  border-color: #3d005b;
  color: #3d005b;
}
.button.hollow.orange, .button.hollow.orange.disabled, .button.hollow.orange[disabled], .button.hollow.orange.disabled:hover, .button.hollow.orange[disabled]:hover, .button.hollow.orange.disabled:focus, .button.hollow.orange[disabled]:focus {
  border: 1px solid #e9a033;
  color: #e9a033;
}
.button.hollow.orange:hover, .button.hollow.orange:focus {
  border-color: #80520e;
  color: #80520e;
}
.button.hollow.red, .button.hollow.red.disabled, .button.hollow.red[disabled], .button.hollow.red.disabled:hover, .button.hollow.red[disabled]:hover, .button.hollow.red.disabled:focus, .button.hollow.red[disabled]:focus {
  border: 1px solid #e93333;
  color: #e93333;
}
.button.hollow.red:hover, .button.hollow.red:focus {
  border-color: #800e0e;
  color: #800e0e;
}
.button.hollow.light-red, .button.hollow.light-red.disabled, .button.hollow.light-red[disabled], .button.hollow.light-red.disabled:hover, .button.hollow.light-red[disabled]:hover, .button.hollow.light-red.disabled:focus, .button.hollow.light-red[disabled]:focus {
  border: 1px solid #e66;
  color: #e66;
}
.button.hollow.light-red:hover, .button.hollow.light-red:focus {
  border-color: #991111;
  color: #991111;
}
.button.hollow.light-blue, .button.hollow.light-blue.disabled, .button.hollow.light-blue[disabled], .button.hollow.light-blue.disabled:hover, .button.hollow.light-blue[disabled]:hover, .button.hollow.light-blue.disabled:focus, .button.hollow.light-blue[disabled]:focus {
  border: 1px solid #33a0c4;
  color: #33a0c4;
}
.button.hollow.light-blue:hover, .button.hollow.light-blue:focus {
  border-color: #1a5062;
  color: #1a5062;
}
.button.hollow.transparent-white, .button.hollow.transparent-white.disabled, .button.hollow.transparent-white[disabled], .button.hollow.transparent-white.disabled:hover, .button.hollow.transparent-white[disabled]:hover, .button.hollow.transparent-white.disabled:focus, .button.hollow.transparent-white[disabled]:focus {
  border: 1px solid rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0);
}
.button.hollow.transparent-white:hover, .button.hollow.transparent-white:focus {
  border-color: rgba(128, 128, 128, 0);
  color: rgba(128, 128, 128, 0);
}
.button.clear, .button.clear:hover, .button.clear:focus, .button.clear.disabled, .button.clear.disabled:hover, .button.clear.disabled:focus, .button.clear[disabled], .button.clear[disabled]:hover, .button.clear[disabled]:focus {
  border-color: transparent;
  background-color: transparent;
}
.button.clear, .button.clear.disabled, .button.clear[disabled], .button.clear.disabled:hover, .button.clear[disabled]:hover, .button.clear.disabled:focus, .button.clear[disabled]:focus {
  color: #06c;
}
.button.clear:hover, .button.clear:focus {
  color: #003366;
}
.button.clear.white, .button.clear.white.disabled, .button.clear.white[disabled], .button.clear.white.disabled:hover, .button.clear.white[disabled]:hover, .button.clear.white.disabled:focus, .button.clear.white[disabled]:focus {
  color: #fff;
}
.button.clear.white:hover, .button.clear.white:focus {
  color: gray;
}
.button.clear.light-gray, .button.clear.light-gray.disabled, .button.clear.light-gray[disabled], .button.clear.light-gray.disabled:hover, .button.clear.light-gray[disabled]:hover, .button.clear.light-gray.disabled:focus, .button.clear.light-gray[disabled]:focus {
  color: #f8f8f8;
}
.button.clear.light-gray:hover, .button.clear.light-gray:focus {
  color: #7c7c7c;
}
.button.clear.medium-gray, .button.clear.medium-gray.disabled, .button.clear.medium-gray[disabled], .button.clear.medium-gray.disabled:hover, .button.clear.medium-gray[disabled]:hover, .button.clear.medium-gray.disabled:focus, .button.clear.medium-gray[disabled]:focus {
  color: #e6e8e5;
}
.button.clear.medium-gray:hover, .button.clear.medium-gray:focus {
  color: #717a6c;
}
.button.clear.dark-gray, .button.clear.dark-gray.disabled, .button.clear.dark-gray[disabled], .button.clear.dark-gray.disabled:hover, .button.clear.dark-gray[disabled]:hover, .button.clear.dark-gray.disabled:focus, .button.clear.dark-gray[disabled]:focus {
  color: #666;
}
.button.clear.dark-gray:hover, .button.clear.dark-gray:focus {
  color: #333333;
}
.button.clear.gray, .button.clear.gray.disabled, .button.clear.gray[disabled], .button.clear.gray.disabled:hover, .button.clear.gray[disabled]:hover, .button.clear.gray.disabled:focus, .button.clear.gray[disabled]:focus {
  color: #999;
}
.button.clear.gray:hover, .button.clear.gray:focus {
  color: #4d4d4d;
}
.button.clear.black, .button.clear.black.disabled, .button.clear.black[disabled], .button.clear.black.disabled:hover, .button.clear.black[disabled]:hover, .button.clear.black.disabled:focus, .button.clear.black[disabled]:focus {
  color: #333;
}
.button.clear.black:hover, .button.clear.black:focus {
  color: #1a1a1a;
}
.button.clear.sofatutor-green, .button.clear.sofatutor-green.disabled, .button.clear.sofatutor-green[disabled], .button.clear.sofatutor-green.disabled:hover, .button.clear.sofatutor-green[disabled]:hover, .button.clear.sofatutor-green.disabled:focus, .button.clear.sofatutor-green[disabled]:focus {
  color: #9c0;
}
.button.clear.sofatutor-green:hover, .button.clear.sofatutor-green:focus {
  color: #4d6600;
}
.button.clear.sofatutor-dark-green, .button.clear.sofatutor-dark-green.disabled, .button.clear.sofatutor-dark-green[disabled], .button.clear.sofatutor-dark-green.disabled:hover, .button.clear.sofatutor-dark-green[disabled]:hover, .button.clear.sofatutor-dark-green.disabled:focus, .button.clear.sofatutor-dark-green[disabled]:focus {
  color: #690;
}
.button.clear.sofatutor-dark-green:hover, .button.clear.sofatutor-dark-green:focus {
  color: #334d00;
}
.button.clear.primary, .button.clear.primary.disabled, .button.clear.primary[disabled], .button.clear.primary.disabled:hover, .button.clear.primary[disabled]:hover, .button.clear.primary.disabled:focus, .button.clear.primary[disabled]:focus {
  color: #06c;
}
.button.clear.primary:hover, .button.clear.primary:focus {
  color: #003366;
}
.button.clear.primary-bright, .button.clear.primary-bright.disabled, .button.clear.primary-bright[disabled], .button.clear.primary-bright.disabled:hover, .button.clear.primary-bright[disabled]:hover, .button.clear.primary-bright.disabled:focus, .button.clear.primary-bright[disabled]:focus {
  color: #09f;
}
.button.clear.primary-bright:hover, .button.clear.primary-bright:focus {
  color: #004d80;
}
.button.clear.secondary, .button.clear.secondary.disabled, .button.clear.secondary[disabled], .button.clear.secondary.disabled:hover, .button.clear.secondary[disabled]:hover, .button.clear.secondary.disabled:focus, .button.clear.secondary[disabled]:focus {
  color: #ccc;
}
.button.clear.secondary:hover, .button.clear.secondary:focus {
  color: #666666;
}
.button.clear.success, .button.clear.success.disabled, .button.clear.success[disabled], .button.clear.success.disabled:hover, .button.clear.success[disabled]:hover, .button.clear.success.disabled:focus, .button.clear.success[disabled]:focus {
  color: #d6eb99;
}
.button.clear.success:hover, .button.clear.success:focus {
  color: #81a220;
}
.button.clear.warning, .button.clear.warning.disabled, .button.clear.warning[disabled], .button.clear.warning.disabled:hover, .button.clear.warning[disabled]:hover, .button.clear.warning.disabled:focus, .button.clear.warning[disabled]:focus {
  color: #fdeb99;
}
.button.clear.warning:hover, .button.clear.warning:focus {
  color: #c7a404;
}
.button.clear.alert, .button.clear.alert.disabled, .button.clear.alert[disabled], .button.clear.alert.disabled:hover, .button.clear.alert[disabled]:hover, .button.clear.alert.disabled:focus, .button.clear.alert[disabled]:focus {
  color: #fce3e3;
}
.button.clear.alert:hover, .button.clear.alert:focus {
  color: #d81717;
}
.button.clear.yellow, .button.clear.yellow.disabled, .button.clear.yellow[disabled], .button.clear.yellow.disabled:hover, .button.clear.yellow[disabled]:hover, .button.clear.yellow.disabled:focus, .button.clear.yellow[disabled]:focus {
  color: #fbcd00;
}
.button.clear.yellow:hover, .button.clear.yellow:focus {
  color: #7e6700;
}
.button.clear.purple, .button.clear.purple.disabled, .button.clear.purple[disabled], .button.clear.purple.disabled:hover, .button.clear.purple[disabled]:hover, .button.clear.purple.disabled:focus, .button.clear.purple[disabled]:focus {
  color: #7900b5;
}
.button.clear.purple:hover, .button.clear.purple:focus {
  color: #3d005b;
}
.button.clear.orange, .button.clear.orange.disabled, .button.clear.orange[disabled], .button.clear.orange.disabled:hover, .button.clear.orange[disabled]:hover, .button.clear.orange.disabled:focus, .button.clear.orange[disabled]:focus {
  color: #e9a033;
}
.button.clear.orange:hover, .button.clear.orange:focus {
  color: #80520e;
}
.button.clear.red, .button.clear.red.disabled, .button.clear.red[disabled], .button.clear.red.disabled:hover, .button.clear.red[disabled]:hover, .button.clear.red.disabled:focus, .button.clear.red[disabled]:focus {
  color: #e93333;
}
.button.clear.red:hover, .button.clear.red:focus {
  color: #800e0e;
}
.button.clear.light-red, .button.clear.light-red.disabled, .button.clear.light-red[disabled], .button.clear.light-red.disabled:hover, .button.clear.light-red[disabled]:hover, .button.clear.light-red.disabled:focus, .button.clear.light-red[disabled]:focus {
  color: #e66;
}
.button.clear.light-red:hover, .button.clear.light-red:focus {
  color: #991111;
}
.button.clear.light-blue, .button.clear.light-blue.disabled, .button.clear.light-blue[disabled], .button.clear.light-blue.disabled:hover, .button.clear.light-blue[disabled]:hover, .button.clear.light-blue.disabled:focus, .button.clear.light-blue[disabled]:focus {
  color: #33a0c4;
}
.button.clear.light-blue:hover, .button.clear.light-blue:focus {
  color: #1a5062;
}
.button.clear.transparent-white, .button.clear.transparent-white.disabled, .button.clear.transparent-white[disabled], .button.clear.transparent-white.disabled:hover, .button.clear.transparent-white[disabled]:hover, .button.clear.transparent-white.disabled:focus, .button.clear.transparent-white[disabled]:focus {
  color: rgba(255, 255, 255, 0);
}
.button.clear.transparent-white:hover, .button.clear.transparent-white:focus {
  color: rgba(128, 128, 128, 0);
}
.button.disabled, .button[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}
.button.dropdown::after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4em;
  content: "";
  border-bottom-width: 0;
  border-color: #fff transparent transparent;
  position: relative;
  top: 0.4em;
  display: inline-block;
  float: right;
  margin-left: 1rem;
}
.button.dropdown.hollow::after, .button.dropdown.clear::after {
  border-top-color: #06c;
}
.button.dropdown.hollow.white::after, .button.dropdown.clear.white::after {
  border-top-color: #fff;
}
.button.dropdown.hollow.light-gray::after, .button.dropdown.clear.light-gray::after {
  border-top-color: #f8f8f8;
}
.button.dropdown.hollow.medium-gray::after, .button.dropdown.clear.medium-gray::after {
  border-top-color: #e6e8e5;
}
.button.dropdown.hollow.dark-gray::after, .button.dropdown.clear.dark-gray::after {
  border-top-color: #666;
}
.button.dropdown.hollow.gray::after, .button.dropdown.clear.gray::after {
  border-top-color: #999;
}
.button.dropdown.hollow.black::after, .button.dropdown.clear.black::after {
  border-top-color: #333;
}
.button.dropdown.hollow.sofatutor-green::after, .button.dropdown.clear.sofatutor-green::after {
  border-top-color: #9c0;
}
.button.dropdown.hollow.sofatutor-dark-green::after, .button.dropdown.clear.sofatutor-dark-green::after {
  border-top-color: #690;
}
.button.dropdown.hollow.primary::after, .button.dropdown.clear.primary::after {
  border-top-color: #06c;
}
.button.dropdown.hollow.primary-bright::after, .button.dropdown.clear.primary-bright::after {
  border-top-color: #09f;
}
.button.dropdown.hollow.secondary::after, .button.dropdown.clear.secondary::after {
  border-top-color: #ccc;
}
.button.dropdown.hollow.success::after, .button.dropdown.clear.success::after {
  border-top-color: #d6eb99;
}
.button.dropdown.hollow.warning::after, .button.dropdown.clear.warning::after {
  border-top-color: #fdeb99;
}
.button.dropdown.hollow.alert::after, .button.dropdown.clear.alert::after {
  border-top-color: #fce3e3;
}
.button.dropdown.hollow.yellow::after, .button.dropdown.clear.yellow::after {
  border-top-color: #fbcd00;
}
.button.dropdown.hollow.purple::after, .button.dropdown.clear.purple::after {
  border-top-color: #7900b5;
}
.button.dropdown.hollow.orange::after, .button.dropdown.clear.orange::after {
  border-top-color: #e9a033;
}
.button.dropdown.hollow.red::after, .button.dropdown.clear.red::after {
  border-top-color: #e93333;
}
.button.dropdown.hollow.light-red::after, .button.dropdown.clear.light-red::after {
  border-top-color: #e66;
}
.button.dropdown.hollow.light-blue::after, .button.dropdown.clear.light-blue::after {
  border-top-color: #33a0c4;
}
.button.dropdown.hollow.transparent-white::after, .button.dropdown.clear.transparent-white::after {
  border-top-color: rgba(255, 255, 255, 0);
}
.button.arrow-only::after {
  top: -0.1em;
  float: none;
  margin-left: 0;
}

a.button:hover, a.button:focus {
  text-decoration: none;
}

.accordion {
  margin-left: 0;
  background: #fff;
  list-style-type: none;
}
.accordion[disabled] .accordion-title {
  cursor: not-allowed;
}

.accordion-item:first-child > :first-child {
  border-radius: 8px 8px 0 0;
}
.accordion-item:last-child > :last-child {
  border-radius: 0 0 8px 8px;
}

.accordion-title {
  position: relative;
  display: block;
  padding: 1rem;
  border: 0;
  border-bottom: 0;
  font-size: 1rem;
  line-height: 1;
  color: #333;
}
:last-child:not(.is-active) > .accordion-title {
  border-bottom: 0;
  border-radius: 0 0 8px 8px;
}
.accordion-title:hover, .accordion-title:focus {
  background-color: #fff;
}

.accordion-content {
  display: none;
  padding: 1rem 1rem 0;
  border: 0;
  border-bottom: 0;
  background-color: #fff;
  color: #333;
}
:last-child > .accordion-content:last-child {
  border-bottom: 0;
}

.accordion-menu li {
  width: 100%;
}
.accordion-menu a {
  padding: 0.7rem 1rem;
}
.accordion-menu .is-accordion-submenu a {
  padding: 0.7rem 1rem;
}
.accordion-menu .nested.is-accordion-submenu {
  margin-right: 0;
  margin-left: 1rem;
}
.accordion-menu.align-right .nested.is-accordion-submenu {
  margin-right: 1rem;
  margin-left: 0;
}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
  position: relative;
}
.accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
  content: "";
  border-bottom-width: 0;
  border-color: #06c transparent transparent;
  position: absolute;
  top: 50%;
  margin-top: -3px;
  right: 1rem;
}
.accordion-menu.align-left .is-accordion-submenu-parent > a::after {
  right: 1rem;
  left: auto;
}
.accordion-menu.align-right .is-accordion-submenu-parent > a::after {
  right: auto;
  left: 1rem;
}
.accordion-menu .is-accordion-submenu-parent[aria-expanded=true] > a::after {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}

.is-accordion-submenu-parent {
  position: relative;
}

.has-submenu-toggle > a {
  margin-right: 40px;
}

.submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.submenu-toggle::after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
  content: "";
  border-bottom-width: 0;
  border-color: #06c transparent transparent;
  top: 0;
  bottom: 0;
  margin: auto;
}

.submenu-toggle[aria-expanded=true]::after {
  transform: scaleY(-1);
  transform-origin: 50% 50%;
}

.submenu-toggle-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.callout {
  position: relative;
  margin: 0;
  padding: 1rem;
  border: 0;
  border-radius: 0;
  background-color: white;
  color: #333;
}
.callout > :first-child {
  margin-top: 0;
}
.callout > :last-child {
  margin-bottom: 0;
}
.callout.white {
  background-color: white;
  color: #333;
}
.callout.light-gray {
  background-color: #f8f8f8;
  color: #333;
}
.callout.medium-gray {
  background-color: #e6e8e5;
  color: #333;
}
.callout.dark-gray {
  background-color: #666666;
  color: #fff;
}
.callout.gray {
  background-color: #999999;
  color: #333;
}
.callout.black {
  background-color: #333333;
  color: #fff;
}
.callout.sofatutor-green {
  background-color: #99cc00;
  color: #333;
}
.callout.sofatutor-dark-green {
  background-color: #669900;
  color: #333;
}
.callout.primary {
  background-color: #0066cc;
  color: #fff;
}
.callout.primary-bright {
  background-color: #0099ff;
  color: #333;
}
.callout.secondary {
  background-color: #cccccc;
  color: #333;
}
.callout.success {
  background-color: #d6eb99;
  color: #333;
}
.callout.warning {
  background-color: #fdeb99;
  color: #333;
}
.callout.alert {
  background-color: #fce3e3;
  color: #333;
}
.callout.yellow {
  background-color: #fbcd00;
  color: #333;
}
.callout.purple {
  background-color: #7900b5;
  color: #fff;
}
.callout.orange {
  background-color: #e9a033;
  color: #333;
}
.callout.red {
  background-color: #e93333;
  color: #fff;
}
.callout.light-red {
  background-color: #ee6666;
  color: #333;
}
.callout.light-blue {
  background-color: #33a0c4;
  color: #333;
}
.callout.transparent-white {
  background-color: rgba(255, 255, 255, 0);
  color: #333;
}
.callout.small {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.callout.large {
  padding-top: 3rem;
  padding-right: 3rem;
  padding-bottom: 3rem;
  padding-left: 3rem;
}

.card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-bottom: 0;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  color: #333;
}
.card > :last-child {
  margin-bottom: 0;
}

.card-divider {
  display: flex;
  flex: 0 1 auto;
  padding: 16px;
  background: #f8f8f8;
}
.card-divider > :last-child {
  margin-bottom: 0;
}

.card-section {
  flex: 1 0 auto;
  padding: 16px;
}
.card-section > :last-child {
  margin-bottom: 0;
}

.card-image {
  min-height: 1px;
}

.close-button {
  position: absolute;
  z-index: 10;
  color: #fff;
  cursor: pointer;
}
[data-whatinput=mouse] .close-button {
  outline: 0;
}
.close-button:hover, .close-button:focus {
  color: #333;
}
.close-button.small {
  right: 0.66rem;
  top: 0.33em;
  font-size: 1.5em;
  line-height: 1;
}

.close-button.medium, .close-button {
  right: 1rem;
  top: 0.5rem;
  font-size: 2em;
  line-height: 1;
}

.dropdown-pane {
  position: absolute;
  z-index: 10;
  display: none;
  width: 300px;
  padding: 1rem;
  visibility: hidden;
  border: 1px solid #e6e8e5;
  border-radius: 8px;
  background-color: #fff;
  font-size: 1rem;
}
.dropdown-pane.is-opening {
  display: block;
}
.dropdown-pane.is-open {
  display: block;
  visibility: visible;
}

.dropdown-pane.tiny {
  width: 100px;
}

.dropdown-pane.small {
  width: 200px;
}

.dropdown-pane.large {
  width: 400px;
}

.label {
  display: inline-block;
  padding: 0 0.25rem;
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  background: #06c;
  color: #fff;
}
.label.white {
  background: #fff;
  color: #fff;
}
.label.light-gray {
  background: #f8f8f8;
  color: #fff;
}
.label.medium-gray {
  background: #e6e8e5;
  color: #fff;
}
.label.dark-gray {
  background: #666;
  color: #fff;
}
.label.gray {
  background: #999;
  color: #fff;
}
.label.black {
  background: #333;
  color: #fff;
}
.label.sofatutor-green {
  background: #9c0;
  color: #fff;
}
.label.sofatutor-dark-green {
  background: #690;
  color: #fff;
}
.label.primary {
  background: #06c;
  color: #fff;
}
.label.primary-bright {
  background: #09f;
  color: #fff;
}
.label.secondary {
  background: #ccc;
  color: #fff;
}
.label.success {
  background: #d6eb99;
  color: #fff;
}
.label.warning {
  background: #fdeb99;
  color: #fff;
}
.label.alert {
  background: #fce3e3;
  color: #fff;
}
.label.yellow {
  background: #fbcd00;
  color: #fff;
}
.label.purple {
  background: #7900b5;
  color: #fff;
}
.label.orange {
  background: #e9a033;
  color: #fff;
}
.label.red {
  background: #e93333;
  color: #fff;
}
.label.light-red {
  background: #e66;
  color: #fff;
}
.label.light-blue {
  background: #33a0c4;
  color: #fff;
}
.label.transparent-white {
  background: rgba(255, 255, 255, 0);
  color: #fff;
}

.media-object {
  display: flex;
  margin-bottom: 1rem;
  flex-wrap: nowrap;
}
.media-object img {
  max-width: none;
}
@media print, screen and (max-width: 39.99875em) {
  .media-object.stack-for-small {
    flex-wrap: wrap;
  }
}

.media-object-section {
  flex: 0 1 auto;
}
.media-object-section:first-child {
  padding-right: 1rem;
}
.media-object-section:last-child:not(:nth-child(2)) {
  padding-left: 1rem;
}
.media-object-section > :last-child {
  margin-bottom: 0;
}
@media print, screen and (max-width: 39.99875em) {
  .stack-for-small .media-object-section {
    padding: 0;
    padding-bottom: 1rem;
    flex-basis: 100%;
    max-width: 100%;
  }
  .stack-for-small .media-object-section img {
    width: 100%;
  }
}
.media-object-section.main-section {
  flex: 1 1 0px;
}

.orbit {
  position: relative;
}

.orbit-container {
  position: relative;
  height: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}

.orbit-slide {
  width: 100%;
  position: absolute;
}
.orbit-slide.no-motionui.is-active {
  top: 0;
  left: 0;
}

.orbit-figure {
  margin: 0;
}

.orbit-image {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.orbit-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
  color: #333;
}

.orbit-next, .orbit-previous {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  padding: 1rem;
  color: #fff;
}
[data-whatinput=mouse] .orbit-next, [data-whatinput=mouse] .orbit-previous {
  outline: 0;
}
.orbit-next:hover, .orbit-previous:hover, .orbit-next:active, .orbit-previous:active, .orbit-next:focus, .orbit-previous:focus {
  background-color: none;
}

.orbit-previous {
  left: 0;
}

.orbit-next {
  left: auto;
  right: 0;
}

.orbit-bullets {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}
[data-whatinput=mouse] .orbit-bullets {
  outline: 0;
}
.orbit-bullets button {
  width: 1rem;
  height: 1rem;
  margin: 0.1rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
}
.orbit-bullets button:hover {
  background-color: #fff;
}
.orbit-bullets button.is-active {
  background-color: #fff;
}

.progress {
  height: 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  background-color: #e6e8e5;
}
.progress.white .progress-meter {
  background-color: #fff;
}
.progress.light-gray .progress-meter {
  background-color: #f8f8f8;
}
.progress.medium-gray .progress-meter {
  background-color: #e6e8e5;
}
.progress.dark-gray .progress-meter {
  background-color: #666;
}
.progress.gray .progress-meter {
  background-color: #999;
}
.progress.black .progress-meter {
  background-color: #333;
}
.progress.sofatutor-green .progress-meter {
  background-color: #9c0;
}
.progress.sofatutor-dark-green .progress-meter {
  background-color: #690;
}
.progress.primary .progress-meter {
  background-color: #06c;
}
.progress.primary-bright .progress-meter {
  background-color: #09f;
}
.progress.secondary .progress-meter {
  background-color: #ccc;
}
.progress.success .progress-meter {
  background-color: #d6eb99;
}
.progress.warning .progress-meter {
  background-color: #fdeb99;
}
.progress.alert .progress-meter {
  background-color: #fce3e3;
}
.progress.yellow .progress-meter {
  background-color: #fbcd00;
}
.progress.purple .progress-meter {
  background-color: #7900b5;
}
.progress.orange .progress-meter {
  background-color: #e9a033;
}
.progress.red .progress-meter {
  background-color: #e93333;
}
.progress.light-red .progress-meter {
  background-color: #e66;
}
.progress.light-blue .progress-meter {
  background-color: #33a0c4;
}
.progress.transparent-white .progress-meter {
  background-color: rgba(255, 255, 255, 0);
}

.progress-meter {
  position: relative;
  display: block;
  width: 0%;
  height: 100%;
  background-color: #9c0;
  border-radius: 8px;
}

.progress-meter-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  border-radius: 8px;
}

.sticky-container {
  position: relative;
}

.sticky {
  position: relative;
  z-index: 0;
  transform: translate3d(0, 0, 0);
}

.sticky.is-stuck {
  position: fixed;
  z-index: 5;
  width: 100%;
}
.sticky.is-stuck.is-at-top {
  top: 0;
}
.sticky.is-stuck.is-at-bottom {
  bottom: 0;
}

.sticky.is-anchored {
  position: relative;
  right: auto;
  left: auto;
}
.sticky.is-anchored.is-at-bottom {
  bottom: 0;
}

html.is-reveal-open {
  position: fixed;
  width: 100%;
  overflow-y: hidden;
}
html.is-reveal-open.zf-has-scroll {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
html.is-reveal-open body {
  overflow-y: hidden;
}

.reveal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999999;
  display: none;
  background-color: rgba(51, 51, 51, 0.45);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.reveal {
  z-index: 1000000;
  backface-visibility: hidden;
  display: none;
  padding: 2rem;
  border: 0;
  border-radius: 8px;
  background-color: #fff;
  position: relative;
  top: 100px;
  margin-right: auto;
  margin-left: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
[data-whatinput=mouse] .reveal {
  outline: 0;
}
@media print, screen and (min-width: 40em) {
  .reveal {
    min-height: 0;
  }
}
.reveal .column {
  min-width: 0;
}
.reveal > :last-child {
  margin-bottom: 0;
}
@media print, screen and (min-width: 40em) {
  .reveal {
    width: 74rem;
    max-width: 864px;
  }
}
.reveal.collapse {
  padding: 0;
}
@media print, screen and (min-width: 40em) {
  .reveal.tiny {
    width: 30%;
    max-width: 864px;
  }
}
@media print, screen and (min-width: 40em) {
  .reveal.small {
    width: 50%;
    max-width: 864px;
  }
}
@media print, screen and (min-width: 40em) {
  .reveal.large {
    width: 90%;
    max-width: 864px;
  }
}
.reveal.full {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  margin-left: 0;
  border: 0;
  border-radius: 0;
}
@media print, screen and (max-width: 39.99875em) {
  .reveal {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100%;
    margin-left: 0;
    border: 0;
    border-radius: 0;
  }
}
.reveal.without-overlay {
  position: fixed;
}

.title-bar {
  padding: 2.165rem;
  background: #333;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.title-bar .menu-icon {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.title-bar-left,
.title-bar-right {
  flex: 1 1 0px;
}

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

.title-bar-title {
  display: inline-block;
  vertical-align: middle;
  font-weight: normal;
}

.has-tip {
  position: relative;
  display: inline-block;
  border-bottom: 0;
  font-weight: normal;
  cursor: auto;
}

.tooltip {
  position: absolute;
  top: calc(100% + 13.856px);
  z-index: 1200;
  max-width: 528px;
  padding: 16px;
  border-radius: 8px;
  background-color: rgba(51, 51, 51, 0.9);
  font-size: 12px;
  color: #fff;
}
.tooltip::before {
  position: absolute;
}
.tooltip.bottom::before {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px;
  content: "";
  border-top-width: 0;
  border-color: transparent transparent rgba(51, 51, 51, 0.9);
  bottom: 100%;
}
.tooltip.bottom.align-center::before {
  left: 50%;
  transform: translateX(-50%);
}
.tooltip.top::before {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px;
  content: "";
  border-bottom-width: 0;
  border-color: rgba(51, 51, 51, 0.9) transparent transparent;
  top: 100%;
  bottom: auto;
}
.tooltip.top.align-center::before {
  left: 50%;
  transform: translateX(-50%);
}
.tooltip.left::before {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px;
  content: "";
  border-right-width: 0;
  border-color: transparent transparent transparent rgba(51, 51, 51, 0.9);
  left: 100%;
}
.tooltip.left.align-center::before {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
.tooltip.right::before {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px;
  content: "";
  border-left-width: 0;
  border-color: transparent rgba(51, 51, 51, 0.9) transparent transparent;
  right: 100%;
  left: auto;
}
.tooltip.right.align-center::before {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}
.tooltip.align-top::before {
  bottom: auto;
  top: 10%;
}
.tooltip.align-bottom::before {
  bottom: 10%;
  top: auto;
}
.tooltip.align-left::before {
  left: 10%;
  right: auto;
}
.tooltip.align-right::before {
  left: auto;
  right: 10%;
}

.hide {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

@media print, screen and (max-width: 39.99875em) {
  .hide-for-small-only {
    display: none !important;
  }
}

@media screen and (max-width: 0em), screen and (min-width: 40em) {
  .show-for-small-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 40em) {
  .hide-for-medium {
    display: none !important;
  }
}

@media screen and (max-width: 39.99875em) {
  .show-for-medium {
    display: none !important;
  }
}

@media print, screen and (min-width: 40em) and (max-width: 59.99875em) {
  .hide-for-medium-only {
    display: none !important;
  }
}

@media screen and (max-width: 39.99875em), screen and (min-width: 60em) {
  .show-for-medium-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 60em) {
  .hide-for-large {
    display: none !important;
  }
}

@media screen and (max-width: 59.99875em) {
  .show-for-large {
    display: none !important;
  }
}

@media print, screen and (min-width: 60em) and (max-width: 89.99875em) {
  .hide-for-large-only {
    display: none !important;
  }
}

@media screen and (max-width: 59.99875em), screen and (min-width: 90em) {
  .show-for-large-only {
    display: none !important;
  }
}

@media screen and (min-width: 90em) {
  .hide-for-xlarge {
    display: none !important;
  }
}

@media screen and (max-width: 89.99875em) {
  .show-for-xlarge {
    display: none !important;
  }
}

@media screen and (min-width: 90em) {
  .hide-for-xlarge-only {
    display: none !important;
  }
}

@media screen and (max-width: 89.99875em) {
  .show-for-xlarge-only {
    display: none !important;
  }
}

.show-for-sr,
.show-on-focus {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.show-on-focus:active, .show-on-focus:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

.show-for-landscape,
.hide-for-portrait {
  display: block !important;
}
@media screen and (orientation: landscape) {
  .show-for-landscape,
  .hide-for-portrait {
    display: block !important;
  }
}
@media screen and (orientation: portrait) {
  .show-for-landscape,
  .hide-for-portrait {
    display: none !important;
  }
}

.hide-for-landscape,
.show-for-portrait {
  display: none !important;
}
@media screen and (orientation: landscape) {
  .hide-for-landscape,
  .show-for-portrait {
    display: none !important;
  }
}
@media screen and (orientation: portrait) {
  .hide-for-landscape,
  .show-for-portrait {
    display: block !important;
  }
}

.show-for-dark-mode {
  display: none;
}

.hide-for-dark-mode {
  display: block;
}

@media screen and (prefers-color-scheme: dark) {
  .show-for-dark-mode {
    display: block !important;
  }
  .hide-for-dark-mode {
    display: none !important;
  }
}
.show-for-ie {
  display: none;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .show-for-ie {
    display: block !important;
  }
  .hide-for-ie {
    display: none !important;
  }
}
.show-for-sticky {
  display: none;
}

.is-stuck .show-for-sticky {
  display: block;
}

.is-stuck .hide-for-sticky {
  display: none;
}

.font-wide {
  letter-spacing: 0.25rem;
}

.font-normal {
  font-weight: normal;
}

.font-bold {
  font-weight: bold;
}

.font-italic {
  font-style: italic !important;
}

.align-left {
  justify-content: flex-start;
}

.align-right {
  justify-content: flex-end;
}

.align-center {
  justify-content: center;
}

.align-justify {
  justify-content: space-between;
}

.align-spaced {
  justify-content: space-around;
}

.align-left.vertical.menu > li > a {
  justify-content: flex-start;
}

.align-right.vertical.menu > li > a {
  justify-content: flex-end;
}

.align-center.vertical.menu > li > a {
  justify-content: center;
}

.align-top {
  align-items: flex-start;
}

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

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

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

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

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

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

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

.align-center-middle {
  justify-content: center;
  align-items: center;
  align-content: center;
}

.small-order-1 {
  order: 1;
}

.small-order-2 {
  order: 2;
}

.small-order-3 {
  order: 3;
}

.small-order-4 {
  order: 4;
}

.small-order-5 {
  order: 5;
}

.small-order-6 {
  order: 6;
}

@media print, screen and (min-width: 40em) {
  .medium-order-1 {
    order: 1;
  }
  .medium-order-2 {
    order: 2;
  }
  .medium-order-3 {
    order: 3;
  }
  .medium-order-4 {
    order: 4;
  }
  .medium-order-5 {
    order: 5;
  }
  .medium-order-6 {
    order: 6;
  }
}
@media print, screen and (min-width: 60em) {
  .large-order-1 {
    order: 1;
  }
  .large-order-2 {
    order: 2;
  }
  .large-order-3 {
    order: 3;
  }
  .large-order-4 {
    order: 4;
  }
  .large-order-5 {
    order: 5;
  }
  .large-order-6 {
    order: 6;
  }
}
@media screen and (min-width: 90em) {
  .xlarge-order-1 {
    order: 1;
  }
  .xlarge-order-2 {
    order: 2;
  }
  .xlarge-order-3 {
    order: 3;
  }
  .xlarge-order-4 {
    order: 4;
  }
  .xlarge-order-5 {
    order: 5;
  }
  .xlarge-order-6 {
    order: 6;
  }
}
.flex-container {
  display: flex;
}

.flex-child-auto {
  flex: 1 1 auto;
}

.flex-child-grow {
  flex: 1 0 auto;
}

.flex-child-shrink {
  flex: 0 1 auto;
}

.flex-dir-row {
  flex-direction: row;
}

.flex-dir-row-reverse {
  flex-direction: row-reverse;
}

.flex-dir-column {
  flex-direction: column;
}

.flex-dir-column-reverse {
  flex-direction: column-reverse;
}

@media print, screen and (min-width: 40em) {
  .medium-flex-container {
    display: flex;
  }
  .medium-flex-child-auto {
    flex: 1 1 auto;
  }
  .medium-flex-child-grow {
    flex: 1 0 auto;
  }
  .medium-flex-child-shrink {
    flex: 0 1 auto;
  }
  .medium-flex-dir-row {
    flex-direction: row;
  }
  .medium-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }
  .medium-flex-dir-column {
    flex-direction: column;
  }
  .medium-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }
}
@media print, screen and (min-width: 60em) {
  .large-flex-container {
    display: flex;
  }
  .large-flex-child-auto {
    flex: 1 1 auto;
  }
  .large-flex-child-grow {
    flex: 1 0 auto;
  }
  .large-flex-child-shrink {
    flex: 0 1 auto;
  }
  .large-flex-dir-row {
    flex-direction: row;
  }
  .large-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }
  .large-flex-dir-column {
    flex-direction: column;
  }
  .large-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 90em) {
  .xlarge-flex-container {
    display: flex;
  }
  .xlarge-flex-child-auto {
    flex: 1 1 auto;
  }
  .xlarge-flex-child-grow {
    flex: 1 0 auto;
  }
  .xlarge-flex-child-shrink {
    flex: 0 1 auto;
  }
  .xlarge-flex-dir-row {
    flex-direction: row;
  }
  .xlarge-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }
  .xlarge-flex-dir-column {
    flex-direction: column;
  }
  .xlarge-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }
}
.accordion {
  padding-bottom: 16px;
  border-bottom: 1px solid #e6e8e5;
}
.accordion + .accordion .accordion-item:first-of-type {
  border-top: 0;
}

.accordion-item {
  margin-top: 16px;
  border-top: 1px solid #e6e8e5;
}
.accordion-item .accordion-content {
  padding-left: 24px;
}
.accordion-item .accordion-content--exp {
  padding-left: 16px;
}
.accordion-item .accordion-content--cc-elv {
  padding-left: 16px;
}
.accordion-item .subheader {
  margin-bottom: 0;
  padding-left: 24px;
  font-size: 16px;
}
.accordion-item.is-active .accordion-title::before {
  width: 10px;
  margin-top: 9px;
  border-color: #ccc transparent transparent;
  content: "";
}

.accordion-title {
  padding: 16px 16px 0 24px;
  line-height: 1.5;
}
.accordion-title::before {
  position: absolute;
  left: 0;
  display: block;
  margin-top: 5px;
  border-width: 7px;
  border-color: transparent transparent transparent #ccc;
  border-style: solid;
  border-radius: 2px;
  content: "";
}

#js-spass-card-error, #js-spass-paypal-error, #js-spass-amazon-pay-error {
  color: #e93333;
}

.button {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.button:not(.medium-gray):not(.white):not(.trial-button) {
  font-weight: bold;
}
.button.medium-gray, .button.white {
  color: #666;
}
.button.medium-gray:hover, .button.white:hover {
  background-color: #f8f8f8;
}
.button.primary:hover {
  background-color: #09f;
}
.button.green {
  background-color: #690;
}
.button.green:hover {
  background-color: #85ad33;
}
.button.dark-gray:hover {
  background-color: #ccc;
}
.button.white {
  border: 1px solid #e6e8e5;
}
.button.yellow:hover {
  background-color: #fcd733;
}
.button.orange {
  color: #fff;
}
.button.orange:hover, .button.orange:focus {
  color: #fff;
}
.button.transparent-white {
  border: 1px solid #e6e8e5;
  color: #fff;
}
.button.transparent-white:hover, .button.transparent-white:focus {
  background-color: #666;
  color: #fff;
}
.button.tiny {
  padding: 5px 0.5rem;
}
.button.small {
  padding: 0.5rem 1rem;
}
.button.medium {
  padding: 12px 1rem;
}
.button.large {
  padding: 14px 1.5rem;
}
.button.rounded {
  border-radius: 999px;
}
@media only screen and (max-width: 959px) {
  .button.small-for-mobile {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 639px) {
  .button.small-for-phone {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

.button-detail {
  position: absolute;
  bottom: -9px;
  left: 50%;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  padding: 4px 8px;
  transform: translateX(-50%);
  border-radius: 10px;
  background-color: #333;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}
.button-detail .icons-arrow {
  border-width: 3px;
}
.button-detail .icons-arrow--up-white {
  margin-bottom: 3px;
}
.button-detail:hover {
  background-color: #999;
}
.button-detail:focus {
  outline: none;
}

a.button.medium-gray:hover, a.button.white:hover {
  color: #666;
}
a.button-detail:hover {
  color: #fff;
}

.button-uncover-password {
  position: relative;
  width: 40px;
  height: 40px;
}
.button-uncover-password .icon {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.button-gray-light {
  border: 1px solid #ddd;
  background-color: #e6e8e5;
  color: #666;
  font-weight: 300;
}
.button-gray-light:hover:not(.is-inactive) {
  color: #333;
}
.button-gray-light:disabled:hover {
  color: #666;
}

.button.has-tip {
  cursor: pointer;
}

.free-teacher-paywall-button {
  background: conic-gradient(from 238deg at 74% 0%, #e3b500, #e4b600, #fbcd00);
}
.free-teacher-paywall-button i {
  margin-top: -4px;
  margin-right: 4px;
}
@media only screen and (max-width: 959px) {
  .free-teacher-paywall-button.small-for-mobile i {
    font-size: 16px;
  }
}

.callout--has-icon .h5, .callout--has-icon .text-small {
  padding-left: 32px;
}
.callout__content {
  padding-right: 16px;
  padding-left: 16px;
}
.callout__content .h5, .callout__content .text-small {
  padding-left: 32px;
}
.callout__content .h5 {
  display: block;
}
.callout__icon {
  position: absolute;
  width: 24px;
  height: 24px;
}
.callout__icon--success {
  background-image: url(/packs/static/images/icons_24/check_green-51de8aefa67dc2be3deb.svg);
}
.callout__icon--success-white {
  background-image: url(/packs/static/images/icons_24/check_white-beeaa29192f5eff11cf6.svg);
}
.callout__icon--warning {
  background-image: url(/packs/static/images/icons_24/warning_sign-0bc632e02a9f9696096b.svg);
}
.callout__icon--alert {
  background-image: url(/packs/static/images/icons_24/stop_sign-44c28dec37ad25c1ffa0.svg);
}
.callout .grid-container, .callout .cell {
  position: relative;
}
.callout .h5 {
  margin-bottom: 0;
}
.callout .info-close {
  position: absolute;
  top: 0;
  right: 0;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .callout__content {
    padding-left: 0;
  }
  body.is-responsive .callout__button-cell {
    margin-top: 8px;
    text-align: center;
  }
  body.is-responsive .callout .info-close {
    right: 16px;
  }
}

.card .icon--arrow-simple {
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -8px;
}
.card--borderless {
  border: 0;
}
.card--no-padding {
  padding: 0;
}
.card--shadowless {
  box-shadow: none;
}
.card--coloured-bg.light-gray {
  background-color: #f8f8f8;
}
.card--coloured-bg.deep-orange {
  background-color: #e35b00;
}
.card--coloured-bg.orange {
  background-color: #e38800;
  color: #fff;
}
.card--border-top {
  border-radius: 8px;
  border-top-width: 8px;
  border-top-style: solid;
}
.card--border-top.green {
  border-top-color: #9c0;
}
.card__title {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  display: block;
  max-height: 6.5em;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.571428;
}
.card__title--hyphenated {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
.card__link {
  display: inline-block;
}
.card__image-wrapper {
  position: relative;
}
.card__image-wrapper::after {
  content: "";
  display: block;
  clear: both;
}
.card__image-wrapper .sprites-content-structure-play, .card__image-wrapper .video-count-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
}
.card__image-wrapper .sprites-content-structure-play {
  display: none;
  margin-top: -16px;
  margin-left: -16px;
}
.card__image-wrapper .video-count-pill {
  margin-top: -48px;
  margin-left: -48px;
}
.card__image-wrapper::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  content: "";
}
.card:hover .card__image-wrapper::after {
  display: block;
}
.card:hover .sprites-content-structure-play {
  display: block;
}
.card:hover .icon--arrow-simple {
  color: #690;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .card .video-count-pill {
    margin-top: -24px;
    margin-left: -24px;
  }
  body.is-responsive .card:hover .card__image-wrapper::after,
  body.is-responsive .card:hover .sprites-content-structure-play {
    display: none;
  }
  body.is-responsive .card__title {
    max-height: 5em;
  }
}

.card-section {
  position: relative;
}
.card-section--no-padding {
  padding: 0;
}
.card-section__button {
  float: right;
}

.card-divider.green {
  background-color: #9c0;
}
.card-divider.dark-green {
  background-color: #690;
  color: #fff;
}

.profile-card__link {
  display: inline-block;
  padding-right: 4px;
  border-right: 1px solid #ccc;
}
.profile-card__link a {
  color: #999;
}
.profile-card__link:first-of-type {
  padding-left: 0;
}
.profile-card__link:last-of-type {
  padding-right: 0;
  border: 0;
}
.profile-card__name {
  font-weight: bold;
}
.profile-card__role {
  text-transform: uppercase;
}
.profile-card--small p, .profile-card--medium p {
  line-height: 1.5;
}
.profile-card--small {
  text-align: center;
}

.gamification-postcard {
  position: relative;
  min-height: 272px;
  margin-bottom: 16px;
}
.gamification-postcard__text-area {
  padding-right: 1rem;
  border-right: 3px solid #fcf8e6;
}
.gamification-postcard__title {
  padding: 0;
  text-transform: uppercase;
}
.gamification-postcard__text {
  margin-top: 10px;
  color: #666;
}
.gamification-postcard__hint {
  width: 84%;
  margin-top: 22px;
  color: #999;
}
.gamification-postcard__hint-icon {
  margin-top: 20px;
}
.gamification-postcard__stamp {
  width: 128px;
  height: 128px;
  margin: 0 16px;
}
.gamification-postcard__adress-field {
  margin-top: 30px;
  border-top: 1px solid #fcf8e6;
}
.gamification-postcard__address-line {
  height: 30px;
  border-bottom: 1px solid #fcf8e6;
  color: #999;
  line-height: 30px;
}
.gamification-postcard__address-line:last-child {
  border-bottom: 1px solid #fcf8e6;
}
.gamification-postcard__address-line b {
  color: #333;
}
.gamification-postcard .button-detail .is-closed {
  display: none;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .gamification-postcard {
    overflow: inherit;
  }
  body.is-responsive .gamification-postcard.is-minimized .gamification-postcard__text, body.is-responsive .gamification-postcard.is-minimized .is-opened {
    display: none;
  }
  body.is-responsive .gamification-postcard.is-minimized .is-closed {
    display: inline-block;
  }
  body.is-responsive .gamification-postcard__adress-field, body.is-responsive .gamification-postcard__hint {
    margin-top: 10px;
  }
  body.is-responsive .gamification-postcard__text-area {
    display: flex;
    flex-direction: column-reverse;
    padding-right: 0;
    border-right: 0;
  }
  body.is-responsive .gamification-postcard__stamp {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
  body.is-responsive .gamification-postcard__text {
    margin-top: 20px;
  }
  body.is-responsive .gamification-postcard__hint {
    width: auto;
  }
  body.is-responsive .gamification-postcard__title {
    padding-top: 30px;
  }
}

.close-button {
  padding: 0 6px;
  border-radius: 50%;
}
.close-button--circle {
  background-color: #666;
}

[type=text], [type=password], [type=email], [type=tel], [type=search], [type=number], select, .stripe-card-element {
  max-height: 40px;
}

[type=text]:hover:not(:disabled), [type=password]:hover:not(:disabled), [type=date]:hover:not(:disabled), [type=email]:hover:not(:disabled), [type=tel]:hover:not(:disabled), [type=search]:hover:not(:disabled), [type=number]:hover:not(:disabled), textarea:hover:not(:disabled), .stripe-card-element:hover:not(:disabled) {
  border: 1px solid #999;
}
[type=text]:focus, [type=password]:focus, [type=date]:focus, [type=email]:focus, [type=tel]:focus, [type=search]:focus, [type=number]:focus, textarea:focus, .stripe-card-element:focus {
  outline: none;
  background-color: #f8f8f8;
}
[type=text]:disabled, [type=password]:disabled, [type=date]:disabled, [type=email]:disabled, [type=tel]:disabled, [type=search]:disabled, [type=number]:disabled, textarea:disabled, .stripe-card-element:disabled {
  opacity: 0.6;
}
[type=text].error, .error [type=text], .is-error [type=text], [type=password].error, .error [type=password], .is-error [type=password], [type=date].error, .error [type=date], .is-error [type=date], [type=email].error, .error [type=email], .is-error [type=email], [type=tel].error, .error [type=tel], .is-error [type=tel], [type=search].error, .error [type=search], .is-error [type=search], [type=number].error, .error [type=number], .is-error [type=number], textarea.error, .error textarea, .is-error textarea, .stripe-card-element.error, .error .stripe-card-element, .is-error .stripe-card-element {
  border: 1px solid #f49999;
  background-color: #fce3e3;
}
.error [type=text].input-group-field, .is-error [type=text].input-group-field, .error [type=password].input-group-field, .is-error [type=password].input-group-field, .error [type=date].input-group-field, .is-error [type=date].input-group-field, .error [type=email].input-group-field, .is-error [type=email].input-group-field, .error [type=tel].input-group-field, .is-error [type=tel].input-group-field, .error [type=search].input-group-field, .is-error [type=search].input-group-field, .error [type=number].input-group-field, .is-error [type=number].input-group-field, .error textarea.input-group-field, .is-error textarea.input-group-field, .error .stripe-card-element.input-group-field, .is-error .stripe-card-element.input-group-field {
  border-radius: 4px;
}

select {
  padding-right: 36px;
  border: 1px solid #9c0;
  background-position: right -18px center;
  background-size: 12px 8px;
}
select:hover {
  background-color: #d6eb99;
  cursor: pointer;
}

textarea, .stripe-card-element {
  border: 1px solid #ccc;
  border-radius: 4px;
}

.stripe-card-element {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 10px 16px;
  transition: border-color 0.25s ease-in-out;
  background-color: #fff;
  color: #666;
  font-family: inherit;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.8;
  -webkit-box-sizing: border-box;
  -webkit-transition: border-color 0.25s ease-in-out;
  -webkit-appearance: none;
}
.stripe-card-element.invalid, .stripe-card-element.StripeElement--invalid {
  border: 1px solid #f49999;
  background-color: #fce3e3;
}

.payment-form .form-error-text {
  margin-top: 4px;
}

.input-group > :first-child,
.input-group > :last-child {
  border-radius: 4px;
}
.input-group > :first-child {
  margin-right: 8px;
}

.form-select {
  position: relative;
  padding-right: 56px;
  border: 1px solid #e6e8e5;
  background: url(/packs/static/images/form/select-0b190088b5aa575f7f51.svg) right center no-repeat;
  background-color: #fff;
}
.form-select:hover {
  border: 1px solid #999;
  background: url(/packs/static/images/form/select_hover-3209188bd0b6d850f4c6.svg) right center no-repeat;
  background-color: #fff;
}
.grid-cell .form-select {
  width: 100%;
}
.form-select--inverted-colors {
  background: url(/packs/static/images/form/select_hover-3209188bd0b6d850f4c6.svg) right center no-repeat;
}
.form-select--inverted-colors:hover {
  background: url(/packs/static/images/form/select-0b190088b5aa575f7f51.svg) right center no-repeat;
}

.input-helper-text {
  margin-bottom: 6px;
}

.input-notification-text {
  color: #476b00;
}

.form-error-text {
  color: #e30000;
  line-height: 1.4;
}

.form-checkbox-slide {
  position: relative;
  display: block;
  margin-top: 20px;
  padding-left: 56px;
}
.form-checkbox-slide__label {
  color: #666;
  line-height: 1.6;
  cursor: pointer;
}
.form-checkbox-slide__label::before {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 48px;
  height: 24px;
  background: url(/packs/static/images/form/checkbox_slide_off-b006c727c6a6d94f19b9.svg) center center no-repeat;
  background-size: contain;
  content: "";
}
.form-checkbox-slide__input {
  position: absolute;
  left: 0;
  cursor: pointer;
  opacity: 0;
}
body:not(.is-mobile-app):not(.vocabulary-trainer-page) .form-checkbox-slide__input:hover + .form-checkbox-slide__label::before {
  background: url(/packs/static/images/form/checkbox_slide_off-b006c727c6a6d94f19b9.svg) center center no-repeat;
  background-size: contain;
}
.form-checkbox-slide__input:focus + .form-checkbox-slide__label {
  color: #333;
}
.form-checkbox-slide__input:checked + .form-checkbox-slide__label::before {
  background: url(/packs/static/images/form/checkbox_slide_on-6fc924d2f65851b2a6dc.svg) center center no-repeat;
  background-size: contain;
}
body:not(.is-mobile-app):not(.vocabulary-trainer-page) .form-checkbox-slide__input:checked:hover + .form-checkbox-slide__label::before {
  background: url(/packs/static/images/form/checkbox_slide_on_hover-46ba23be952b4c404ef3.svg) center center no-repeat;
  background-size: contain;
}

.form-checkbox, .form-radio {
  position: relative;
  display: inline-block;
}
.form-checkbox__input, .form-radio__input {
  position: absolute;
  opacity: 0;
}
.form-checkbox__label, .form-radio__label {
  width: 100%;
  padding-left: 31px;
  color: #666;
  cursor: pointer;
}
.form-checkbox__label::before, .form-radio__label::before {
  position: absolute;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.form-checkbox.is-error .form-checkbox__label::before, .is-error .form-checkbox .form-checkbox__label::before {
  background: url(/packs/static/images/form/checkbox_error-3549bf12f8efd3427f6a.svg) center center no-repeat;
  background-size: contain;
}
.form-checkbox__label::before {
  left: 0;
  background: url(/packs/static/images/form/checkbox_unselected-9fe01d69396b14911574.svg) center center no-repeat;
  background-size: contain;
  content: "";
}
@media (hover: hover) {
  .form-checkbox__input:hover + .form-checkbox__label::before {
    background: url(/packs/static/images/form/checkbox_hover-1089006cdaa4fb4413e6.svg) center center no-repeat;
    background-size: contain;
  }
}
.form-checkbox__input:focus + .form-checkbox__label::before {
  background: url(/packs/static/images/form/checkbox_focus-7f9105c06e1a086e7b6b.svg) center center no-repeat;
  background-size: contain;
}
.form-checkbox__input:checked + .form-checkbox__label::before {
  background: url(/packs/static/images/form/checkbox_selected-a368f6a56cd3ea417b1f.svg) center center no-repeat;
  background-size: contain;
}

.form-radio.is-error .form-radio__label::before, .is-error .form-radio .form-radio__label::before {
  background: url(/packs/static/images/form/radio_error-37e5923dea78d8ee2ebf.svg) center center no-repeat;
  background-size: contain;
}
.form-radio--outlined {
  border: 1px solid #e6e8e5;
  border-radius: 4px;
  background-color: #fff;
}
.form-radio--outlined:focus-within {
  background-color: #f8f8f8;
}
.form-radio--outlined.is-error, .is-error .form-radio--outlined {
  border: 1px solid #f49999;
  background-color: #fce3e3;
}
.form-radio--outlined .form-radio__label {
  padding: 7px 8px 7px 39px;
}
.form-radio--outlined .form-radio__label::before {
  left: 8px;
}
.form-radio__label::before {
  left: 0;
  background: url(/packs/static/images/form/radio_unselected-5a4ee6060b3913798268.svg) center center no-repeat;
  background-size: contain;
  content: "";
}
.form-radio__input:hover + .form-radio__label::before {
  background: url(/packs/static/images/form/radio_hover-43208941cddba73b4564.svg) center center no-repeat;
  background-size: contain;
}
.form-radio__input:focus + .form-radio__label::before {
  background: url(/packs/static/images/form/radio_focus-771b9a1023e91b27bee0.svg) center center no-repeat;
  background-size: contain;
}
.form-radio__input:checked + .form-radio__label::before {
  background: url(/packs/static/images/form/radio_selected-a644b305e6372a6398f7.svg) center center no-repeat;
  background-size: contain;
}

.form-radio-tabs {
  margin-top: 24px;
  margin-bottom: -1px;
}
.form-radio-tabs::after {
  content: "";
  display: block;
  clear: both;
}
.form-radio-tabs__item {
  position: relative;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  min-width: 100px;
  margin-right: 2px;
  margin-bottom: -1px;
  padding: 15px 20px;
  float: left;
  background-color: #f8f8f8;
  cursor: pointer;
}
.form-radio-tabs__item.is-active {
  border: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  background-color: #fff;
  z-index: 1;
}
.form-radio-tabs__item:hover:not(.is-active) {
  background-color: #ddd;
}
.form-radio-tabs__content {
  position: relative;
  left: -16px;
  box-sizing: content-box;
  width: 100%;
  margin-bottom: 32px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}
.form-radio-tabs__content .form-select {
  padding-right: 0;
}
.form-radio-tabs__content .icon-spinner {
  display: none;
  height: 240px;
}

.mandate-permit-authorization-text {
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 11px;
  line-height: 1.6;
}

.info-divider {
  width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
  border-top: 1px solid #ddd;
}
.info-divider::after {
  content: "";
  display: block;
  clear: both;
}

@media only screen and (max-width: 959px) {
  body.is-responsive .form-select {
    height: 50px;
    padding-left: 10px;
    background: url(/packs/static/images/form/select_big-5504849f88908008c0d8.svg) right center no-repeat;
    background-color: #fff;
  }
  body.is-responsive .form-select:hover {
    background: url(/packs/static/images/form/select_big_hover-0e5cd57e9317b20711ec.svg) right center no-repeat;
    background-color: #fff;
  }
  body.is-responsive .form-radio-tabs__content {
    left: -17px;
    border-radius: 0;
  }
  body.is-responsive .form-radio-tabs__item {
    min-width: inherit;
    padding-right: 16px;
    padding-left: 16px;
  }
  body.is-responsive .form-radio-tabs__label {
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-top: 32px;
    padding-left: 0;
  }
  body.is-responsive .form-radio-tabs__label::before {
    top: 0;
    left: 50%;
    margin-left: -12px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .form-radio-tabs__content {
    border-color: #e6e8e5;
  }
  body.is-responsive .form-radio-tabs__item {
    padding-right: 8px;
    padding-left: 8px;
  }
}

.label {
  line-height: 1.7;
}
.label--full-width {
  width: 100%;
}
.label--capitalized {
  text-transform: uppercase;
}
.label.sofatutor-green:hover {
  background-color: #690;
  color: #fff;
}
.label.medium-gray {
  color: #666;
}
.label.deep-orange {
  background-color: #e35b00;
}

.info-bullet-list, .info-benefits-list, .info-label-list {
  font-size: 16px;
  line-height: 1.6;
}

.info-bullet-list {
  padding-left: 10px;
  color: #9c0;
  list-style: disc;
}
.info-bullet-list > li {
  margin-left: 20px;
  padding-bottom: 8px;
}
.info-bullet-list a, .info-bullet-list span {
  font-size: 16px;
}
.info-bullet-list span {
  color: #666;
}
.info-bullet-list a {
  word-wrap: break-word;
}
.info-bullet-list.grid-margin-x {
  padding-left: 32px;
}

.info-benefits-list {
  color: #666;
}
.info-benefits-list::after {
  content: "";
  display: block;
  clear: both;
}
.info-benefits-list > li {
  position: relative;
  padding-bottom: 16px;
}
.info-benefits-list > li:last-of-type {
  padding-bottom: 0;
}
.info-benefits-list .sprites-layouts-benefit_bulletpoint, .info-benefits-list .sprites-layouts-stop_sign {
  position: absolute;
  top: 2px;
  left: 0;
}
.info-benefits-list .sprites-layouts-benefit_bulletpoint {
  background-size: contain;
}
.info-benefits-list .info-benefits-list-text {
  display: block;
  padding-left: 30px;
}
.info-benefits-list .info-benefits-list-text b {
  color: #333;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .info-benefits-list > li:not(:last-of-type) {
    padding-bottom: 10px;
  }
}

.info-summary-list--borders {
  border-top: 1px solid #ddd;
}
.info-summary-list--borders > li {
  margin-top: 2px;
  padding-bottom: 7px;
  border-bottom: 1px solid #ddd;
}
.info-summary-list--more-icon > li {
  position: relative;
}
.info-summary-list--more-icon > li > a {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -14px;
  padding-right: 22px;
}
.info-summary-list--more-icon .h5, .info-summary-list--more-icon p {
  padding-right: 75px;
}
.info-summary-list__text {
  color: #ccc;
  font-size: 11px;
  vertical-align: middle;
}
.info-summary-list__text:hover, .hovers-sprite:hover .info-summary-list__text {
  color: #666;
}
.info-summary-list__icon-more {
  vertical-align: middle;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .info-summary-list {
    margin-bottom: 20px;
  }
  body.is-responsive .info-summary-list--borders li:last-child {
    border-bottom: 0;
  }
}

.info-label-list {
  padding-bottom: 10px;
  color: #666;
  overflow: hidden;
}
.info-label-list + .info-label-list {
  padding-top: 10px;
}
.info-label-list dt {
  padding-right: 5px;
  float: left;
  clear: left;
  font-weight: bold;
}
.info-label-list dd {
  float: left;
}

.list-box {
  margin: 20px -10px 0;
}
.list-box .grid-column-6 {
  min-height: 0;
}
.list-box.is-expanded {
  max-height: none !important;
}
.list-box .info-box {
  position: relative;
  height: 180px;
  margin-bottom: 20px;
}
.list-box .account-delete-button {
  bottom: 20px;
}
.list-box__title {
  position: absolute;
  padding-top: 0;
  color: #333;
  cursor: pointer;
}
.list-box__title:hover .icons-raquo::after {
  color: #999;
}
.list-box__title-text {
  display: inline-block;
  max-width: 405px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.list-box__title-text:hover {
  text-decoration: underline;
}
.list-box__figure {
  position: absolute;
  top: 56px;
  left: 26px;
  display: block;
  color: #fff;
  cursor: pointer;
  z-index: 3;
}
.list-box__figure--overlapped::before, .list-box__figure--overlapped::after {
  position: absolute;
  width: 170px;
  height: 100px;
  border: 1px solid #ddd;
  background-color: #fff;
  content: "";
}
.list-box__figure--overlapped::before {
  top: -3px;
  left: -3px;
  z-index: -1;
}
.list-box__figure--overlapped::after {
  top: -6px;
  left: -6px;
  z-index: -2;
}
.list-box__figure--overlapped .list-box__video-count {
  left: 58px;
  padding-right: 10px;
  padding-left: 10px;
}
.list-box__figure--overlapped .list-box__image {
  border: 1px solid #ddd;
}
.list-box__image {
  display: block;
  width: 170px;
  height: 100px;
}
.list-box__video-count {
  position: absolute;
  top: 25px;
  left: 62px;
  padding: 11px 4px 9px;
  border-radius: 5px;
  font-weight: bold;
  line-height: 13px;
  text-align: center;
}
.list-box__video-count b {
  display: block;
  font-size: 19px;
}
.list-box__video-count span {
  position: relative;
  font-size: 9px;
  font-weight: normal;
}
.list-box__text, .list-box__likes {
  font-family: Helvetica, Arial, sans-serif;
  color: #666;
  line-height: 19px;
}
.list-box__text {
  position: absolute;
  top: 50px;
  left: 210px;
  width: 229px;
  height: 75px;
  padding-right: 20px;
  font-size: 14px;
  overflow: hidden;
}
.list-box__text--centered {
  top: 52px;
}
.list-box__text--centered > p {
  min-height: 56px;
}
.list-box__likes {
  position: absolute;
  bottom: 17px;
  left: 210px;
  font-size: 11px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .list-box {
    margin-right: 0;
    margin-left: 0;
    padding: 0 30px;
  }
  body.is-responsive .list-box .grid-column-6 {
    padding: 0;
  }
  body.is-responsive .list-box .account-delete-button {
    right: 20px;
  }
  body.is-responsive .list-box__text {
    width: auto;
  }
  body.is-responsive .list-box__footer {
    padding-top: 5px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .list-box {
    max-height: 620px;
    padding: 0;
  }
  body.is-responsive .list-box .info-box {
    height: auto;
    padding: 26px 20px;
  }
  body.is-responsive .list-box .bg-black-transparent {
    top: 50%;
    left: 50%;
    margin-top: -26px;
    margin-left: -27px;
  }
  body.is-responsive .list-box__likes {
    display: none;
  }
  body.is-responsive .list-box__figure {
    position: relative;
    top: 0;
    left: 0;
    width: 265px;
    margin: 0 auto;
  }
  body.is-responsive .list-box__figure::before, body.is-responsive .list-box__figure::after {
    width: auto;
    height: auto;
  }
  body.is-responsive .list-box__figure::before {
    right: 0;
    bottom: 3px;
  }
  body.is-responsive .list-box__figure::after {
    right: 3px;
    bottom: 6px;
  }
  body.is-responsive .list-box__image {
    width: 100%;
  }
  body.is-responsive .list-box__title {
    position: relative;
    top: 0;
    left: 0;
  }
  body.is-responsive .list-box__title {
    margin-top: 20px;
  }
}

.list-video-meta {
  margin-top: 10px;
  padding: 0;
}
.list-video-meta .icons-meta-nav, .list-video-meta__title {
  min-width: 55%;
}
.list-video-meta .video-list-search {
  border: 1px solid #e6e8e5;
  border-radius: 2px;
}
.list-video-meta .video-list-search-no-results {
  display: block;
}
.list-video-meta .is-highlighted {
  background-color: #fefe9f;
  vertical-align: top;
}
.list-video-meta .sprites-layouts-watched {
  margin-right: 3px;
  vertical-align: middle;
}
.list-video-meta .sprites-layouts-duration {
  margin-right: 3px;
  vertical-align: text-top;
}
.list-video-meta .sprites-layouts-worksheet {
  margin-right: 3px;
  vertical-align: text-bottom;
}
.list-video-meta .sprites-layouts-question_icon, .list-video-meta .sprites-layouts-test_icon {
  margin-right: 3px;
  vertical-align: sub;
}
.list-video-meta .sprites-information-features--screenshot_test {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  background-color: #fff;
  background-size: contain;
}
.list-video-meta .account-delete-button {
  top: 50%;
  margin-top: -15px;
}
.list-video-meta .exercise-state {
  display: inline-block;
  margin-right: 4px;
  vertical-align: top;
}
.list-video-meta .rating-stars__icon {
  font-size: 16px;
}
.list-video-meta__item {
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
  border-bottom: 1px solid #ddd;
  text-align: left;
  cursor: pointer;
}
.list-video-meta__item.on-touch-hover {
  background-color: #f8f8f8;
}
.list-video-meta__item .sprites-layouts-view_list {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -6px;
}
.list-video-meta__item .icons-meta-nav {
  padding-left: 15px;
  font-size: 12px;
}
.list-video-meta__item .likes-count {
  width: 20px;
  line-height: 12px;
}
.list-video-meta__item--secondary {
  background-color: #f8f8f8;
}
.list-video-meta__item--secondary .h5 {
  font-weight: lighter;
}
.list-video-meta__image {
  width: 80px;
  height: 45px;
  border: 1px solid #ddd;
}
.list-video-meta__link {
  display: block;
  padding: 16px 32px 16px 16px;
}
.list-video-meta__link::after {
  content: "";
  display: block;
  clear: both;
}
.list-video-meta__text {
  display: inline-block;
  vertical-align: top;
}
.list-video-meta__title {
  display: inline-block;
  margin: 0 15px 8px;
  color: #333;
  line-height: 18px;
  hyphens: auto;
}
.list-video-meta__icon {
  display: inline-block;
  margin-right: 10px;
}
.list-video-meta__icon i {
  vertical-align: text-top;
}
.list-video-meta.has-hidden-items .list-video-meta__item--secondary {
  display: none;
}
.list-video-meta .expanded.button {
  border-right: 0;
  border-left: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  font-weight: 600;
}
.list-video-meta .expanded.button .icon {
  color: #06c;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .list-video-meta {
    border-top: 0;
  }
  body.is-responsive .list-video-meta__no-results {
    height: 200px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .list-video-meta .content-page-meta {
    display: none;
  }
  body.is-responsive .list-video-meta .sprites-layouts-view_list {
    right: 16px;
  }
  body.is-responsive .list-video-meta .account-delete-button {
    right: 20px;
  }
  body.is-responsive .list-video-meta__text {
    width: 63%;
  }
  body.is-responsive .list-video-meta__title {
    word-wrap: break-word;
  }
}

.list-icon::after {
  content: "";
  display: block;
  clear: both;
}
.list-icon--horizontal {
  margin-bottom: 32px;
  text-align: center;
}
.list-icon--horizontal .list-icon__item svg {
  height: 128px;
  width: 128px;
}
.list-icon--vertical {
  margin-bottom: 32px;
}
.list-icon--vertical .list-icon__headline {
  padding: 0;
}
.list-icon--vertical .list-icon__text {
  min-height: 63px;
}
.list-icon--vertical .list-icon__item {
  margin-bottom: 32px;
}
.list-icon--vertical .list-icon__item svg {
  position: relative;
  top: -6px;
  height: 96px;
  width: 96px;
  float: right;
}
.list-icon__headline {
  display: block;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .list-icon {
    max-width: 560px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  body.is-responsive .list-icon--vertical .list-icon__text {
    min-height: 0;
  }
  body.is-responsive .list-icon--vertical .list-icon__item svg {
    height: 128px;
    width: 128px;
    float: none;
  }
  body.is-responsive .list-icon__item {
    margin-bottom: 32px;
  }
  body.is-responsive .list-icon__item:first-child {
    padding-top: 0;
  }
  body.is-responsive .list-icon .grid-column-1 {
    display: none;
  }
}

.list-level--horizontal .list-level__item {
  display: inline-block;
  margin-right: 5px;
}
.list-level--vertical {
  width: 120px;
}
.list-level--vertical .list-level__item {
  display: block;
  margin-top: 5px;
}
.list-level__link {
  display: block;
  min-width: 20px;
  height: 30px;
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 3px;
  background-color: #ddd;
  color: #666;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.list-level__link.is-current, .list-level__link:hover {
  color: #fff;
}
.list-level__link.is-inactive {
  cursor: default;
  opacity: 0.5;
}
.list-level__link--green:hover.is-inactive, .list-level__link--orange:hover.is-inactive, .list-level__link--yellow:hover.is-inactive, .list-level__link--blue:hover.is-inactive {
  background-color: #ddd;
  color: #666;
}
.list-level__link--green:hover, .list-level__link--green.is-current {
  background-color: #690;
  color: #fff;
}
.list-level__link--orange:hover, .list-level__link--orange.is-current {
  background-color: #f47000;
  color: #fff;
}
.list-level__link--yellow:hover, .list-level__link--yellow.is-current {
  background-color: #ddbc00;
  color: #fff;
}
.list-level__link--blue:hover, .list-level__link--blue.is-current {
  background-color: #33a0c4;
  color: #fff;
}
.list-level__link--black:hover, .list-level__link--black.is-current, .list-level__link--gray:hover, .list-level__link--gray.is-current {
  background-color: #666;
  color: #fff;
}

.list-block-link__item {
  position: relative;
  height: 50px;
  border-top: 1px solid #e6e8e5;
}
.list-block-link__item:hover, .list-block-link__item:active {
  background-color: #f8f8f8;
}
.list-block-link__item .sprites-layouts-view_list {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -5px;
}
.list-block-link__link {
  display: block;
  line-height: 50px;
}
.list-block-link + .button-white {
  display: none;
  width: 50%;
  margin: 20px auto;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .list-block-link__item {
    height: auto;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .list-block-link__item {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  body.is-responsive .list-block-link__link {
    line-height: normal;
  }
}

.list-highlighted-box {
  margin-top: 32px;
}
.list-highlighted-box--accordion {
  padding: 0;
  border: 0;
  background: transparent;
}
.list-highlighted-box--accordion .list-highlighted-box__item {
  background-color: #fff;
}
.list-highlighted-box--accordion .list-highlighted-box__item .icon {
  margin-top: -12px;
  transition: transform 0.3s linear 0s;
  color: #ccc;
}
.list-highlighted-box--accordion .list-highlighted-box__item.is-active .icon {
  transform: rotate(45deg);
}
.list-highlighted-box--accordion .list-highlighted-box__item:first-child {
  margin: 0;
}
.list-highlighted-box--accordion .list-highlighted-box__title {
  padding: 12px 56px 12px 24px;
}
.list-highlighted-box__item-header {
  position: relative;
  padding: 0;
  border-radius: 8px;
}
.list-highlighted-box__item-header::before {
  display: none;
}
.list-highlighted-box__item-content {
  padding: 16px 16px 16px 24px;
  border-radius: 8px;
}
.list-highlighted-box__item-content h5 {
  margin-bottom: 16px;
}
.list-highlighted-box__item-content h5:not(:first-child) {
  margin-top: 32px;
}
.list-highlighted-box__item-markup p, .list-highlighted-box__item-markup li {
  color: #999;
}
.list-highlighted-box__item-markup p:not(:last-child), .list-highlighted-box__item-markup li:not(:last-child) {
  margin-bottom: 8px;
}
.list-highlighted-box__item {
  position: relative;
  border: 1px solid #e1e1e1;
  border-left: 8px solid #9c0;
  border-radius: 8px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.list-highlighted-box__item:not(:first-child) {
  margin-top: 16px;
}
.list-highlighted-box__item.on-touch-hover {
  border-left-color: #690;
  background: #f8f8f8;
}
.list-highlighted-box__item.on-touch-hover .icon--arrow-simple {
  color: #690;
}
.list-highlighted-box__item .icon, .list-highlighted-box__item .icon--arrow-simple {
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -8px;
}
.list-highlighted-box__title {
  position: relative;
  display: block;
  margin-bottom: 0;
  padding: 32px 64px 32px 24px;
  color: #333;
  z-index: 1;
}
.list-highlighted-box__title:hover, .list-highlighted-box__title:focus {
  color: #333;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .list-highlighted-box {
    margin-top: 16px;
  }
  body.is-responsive .list-highlighted-box__item:not(:first-child) {
    margin-top: 8px;
  }
  body.is-responsive .list-highlighted-box__title {
    padding: 20px 36px 20px 16px;
    font-size: 16px;
    line-height: 1.6;
  }
}

.cards-list {
  margin-top: 24px;
}
.cards-list::after {
  content: "";
  display: block;
  clear: both;
}
.cards-list .card {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: transform 0.35s ease-in-out;
}
.cards-list .card.on-touch-hover {
  transform: scale(1.025);
}
.cards-list__item {
  float: left;
}
.cards-list--horizontal-mobile .icon.icon--arrow-simple {
  display: none;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .cards-list {
    margin-top: 16px;
  }
  body.is-responsive .cards-list .card:hover {
    transform: none;
  }
  body.is-responsive .cards-list--horizontal-mobile .cards-list__item {
    width: 100%;
  }
  body.is-responsive .cards-list--horizontal-mobile .cards-list__item:not(:first-child) {
    margin-top: 8px;
    margin-left: 0;
  }
  body.is-responsive .cards-list--horizontal-mobile .card {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    flex-direction: row;
  }
  body.is-responsive .cards-list--horizontal-mobile .card.on-touch-hover {
    background: #f8f8f8;
  }
  body.is-responsive .cards-list--horizontal-mobile .card-section {
    display: inline-block;
    width: calc(100% - 126px);
    height: 80px;
    padding: 8px;
    padding-right: 40px;
  }
  body.is-responsive .cards-list--horizontal-mobile .card__image {
    display: inline-block;
    width: 126px;
    height: 80px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
  }
  body.is-responsive .cards-list--horizontal-mobile .card__image-wrapper {
    display: inline-block;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
  }
  body.is-responsive .cards-list--horizontal-mobile .icon--arrow-simple {
    display: inline-block;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .cards-list--horizontal-mobile .icon--arrow-simple {
    right: 8px;
  }
}

.level-cards-list {
  list-style: none;
}
.level-cards-list__item {
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.25);
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  position: relative;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background-color: #fff;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.level-cards-list__item.is-active {
  background: #9c0;
}
.level-cards-list__item.is-active .level-cards-list__link,
.level-cards-list__item.is-active .level-cards-list__link span {
  color: #fff;
}
.level-cards-list__item:nth-child(n+7) {
  margin-top: 24px;
}
.level-cards-list__item.on-touch-hover {
  background: #d6eb99;
}
.level-cards-list__item--all-class .level-cards-list__link span {
  font-size: 32px;
  line-height: 1.625;
  text-transform: capitalize;
}
.level-cards-list__item--algebra .level-cards-list__link {
  padding-top: 42px;
  padding-bottom: 42px;
}
.level-cards-list__link {
  display: block;
  padding-top: 16px;
  padding-bottom: 16px;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.625;
  text-transform: uppercase;
}
.level-cards-list__link:hover {
  color: #9c0;
}
.level-cards-list__link:focus {
  color: #9c0;
}
.level-cards-list__item--reception .level-cards-list__link, .level-cards-list__link span {
  display: block;
  color: #333;
  font-size: 48px;
  font-weight: 300;
  line-height: 1.083335;
  text-transform: capitalize;
}
.level-cards-list--with-subject .level-cards-list__item--all-class .level-cards-list__link {
  position: relative;
  padding: 50px 16px 16px;
  line-height: 22px;
}
.level-cards-list--with-subject .level-cards-list__item--all-class .level-cards-list__link span {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  line-height: 1.625;
  text-transform: uppercase;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .level-cards-list__item:nth-child(n+7) {
    margin-top: 16px;
  }
  body.is-responsive .level-cards-list__item--all-class .level-cards-list__link span {
    font-size: 24px;
    line-height: 1.416667;
  }
  body.is-responsive .level-cards-list__item--algebra .level-cards-list__link {
    padding-top: 33px;
    padding-bottom: 33px;
  }
  body.is-responsive .level-cards-list__link {
    font-size: 14px;
  }
  body.is-responsive .level-cards-list__item--reception .level-cards-list__link, body.is-responsive .level-cards-list__link span {
    font-size: 32px;
  }
  body.is-responsive .level-cards-list--with-subject .level-cards-list__item--all-class .level-cards-list__link {
    padding: 36px 16px 16px;
    font-size: 12px;
    line-height: 18px;
  }
  body.is-responsive .level-cards-list--with-subject .level-cards-list__item--all-class .level-cards-list__link span {
    top: 20px;
    font-size: 9px;
    line-height: 1.625;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .level-cards-list__item:nth-child(n+4):not(.sofaheld-teacher-level-selection__list-item) {
    margin-top: 8px;
  }
  body.is-responsive .level-cards-list__item--all-class .level-cards-list__link span {
    font-size: 16px;
    line-height: 1.625;
  }
  body.is-responsive .level-cards-list__item--algebra .level-cards-list__link {
    padding-top: 29px;
    padding-bottom: 29px;
  }
  body.is-responsive .level-cards-list__link {
    font-size: 12px;
  }
  body.is-responsive .level-cards-list__item--reception .level-cards-list__link, body.is-responsive .level-cards-list__link span {
    font-size: 24px;
  }
  body.is-responsive .level-cards-list--with-subject .level-cards-list__item span {
    line-height: 37px;
  }
  body.is-responsive .level-cards-list--with-subject .level-cards-list__item--all-class .level-cards-list__link {
    padding: 36px 16px 16px;
    font-size: 12px;
    line-height: 18px;
  }
  body.is-responsive .level-cards-list--with-subject .level-cards-list__item--all-class .level-cards-list__link span {
    top: 22px;
    line-height: 1.625;
  }
}

.icons-meta-nav {
  position: relative;
  padding-left: 20px;
  color: #999;
  font-size: 13px;
  font-weight: normal;
}
.icons-meta-nav::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.icons-meta-nav.likes-count::before {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/likes.svg") center center no-repeat;
  top: 2px;
  width: 13px;
  height: 11px;
}
.icons-meta-nav.video-duration::before {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/duration.svg") center center no-repeat;
  width: 11px;
  height: 11px;
}

.list-bubble {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-right: auto;
  margin-left: auto;
}
.list-bubble:not(.list-bubble--small) {
  width: 768px;
}
.list-bubble--small .list-bubble__item {
  width: 120px;
  height: 120px;
}
.list-bubble--small .list-bubble__item .h2 {
  font-size: 28px;
}
.list-bubble--small .list-bubble__item .list-bubble__text {
  font-size: 12px;
}
.list-bubble__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  border-radius: 150px;
  background-color: #fff;
}
.list-bubble__item--video .list-bubble__title {
  color: #690;
}
.list-bubble__item--test .list-bubble__title {
  color: #c9a400;
}
.list-bubble__item--worksheet .list-bubble__title {
  color: #e66;
}
.list-bubble__item--help .list-bubble__title {
  color: #e35b00;
}
.list-bubble__title, .list-bubble__text {
  margin-bottom: 0;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .list-bubble:not(.list-bubble--small) {
    align-content: space-between;
    width: 376px;
    height: 376px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .list-bubble:not(.list-bubble--small) {
    width: 310px;
    height: 310px;
  }
  body.is-responsive .list-bubble--small {
    width: 286px;
  }
  body.is-responsive .list-bubble--small .list-bubble__item {
    width: 64px;
    height: 64px;
  }
  body.is-responsive .list-bubble--small .list-bubble__text {
    font-size: 8px;
    line-height: 1.4;
  }
  body.is-responsive .list-bubble--small .h2 {
    font-size: 14px;
  }
}

.box-feature-content .list-video-meta__link {
  padding-right: 160px;
}
.box-feature-content .list-video-meta__image {
  margin: 0;
}
.box-feature-content .list-video-meta__bookmark {
  position: absolute;
  top: 50%;
  left: auto;
  right: 48px;
  margin-top: -12px;
}
.box-feature-content .list-video-meta__text {
  width: calc(100% - 88px);
}

.video-icons {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 12px;
}
.video-icons * {
  display: flex;
  align-items: center;
}
.video-icons .icon {
  margin-right: 4px;
}
.video-icons div:not(:last-child) {
  margin-right: 8px;
}

.video-levels {
  font-family: Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  margin-bottom: 4px;
}
.video-levels__text {
  width: max-content;
  height: min-content;
  padding-right: 4px;
  padding-left: 3px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #999;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.background-color-sofatutor-green {
  background-color: #9c0;
  color: white;
}

.background-color-sofatutor-green-l2 {
  background-color: #c2e066;
  color: black;
}

.background-color-green-l2 {
  background-color: #66d366;
  color: black;
}

.background-color-blue-l2 {
  background-color: #66b8d2;
  color: black;
}

.background-color-indigo-l2 {
  background-color: #6694d3;
  color: black;
}

.background-color-deep-blue-l2 {
  background-color: #7866d3;
  color: black;
}

.background-color-purple-l2 {
  background-color: #af66d3;
  color: black;
}

.background-color-purple-l3 {
  background-color: #c999e1;
  color: black;
}

.background-color-raspberry-l2 {
  background-color: #da66a9;
  color: black;
}

.background-color-raspberry-l3 {
  background-color: #e699c6;
  color: black;
}

.background-color-red-l2 {
  background-color: #e66;
  color: black;
}

.background-color-red-l3 {
  background-color: #f49999;
  color: black;
}

.background-color-deep-orange-l2 {
  background-color: #ee9d66;
  color: black;
}

.background-color-deep-orange-l3 {
  background-color: #f4bd99;
  color: black;
}

.background-color-orange-l2 {
  background-color: #eeb866;
  color: black;
}

.background-color-orange-l3 {
  background-color: #f4cf99;
  color: black;
}

.background-color-amber-l2 {
  background-color: #eed366;
  color: black;
}

.background-color-amber-l3 {
  background-color: #f4e199;
  color: black;
}

.background-color-lime-l2 {
  background-color: #ee6;
  color: black;
}

.background-color-lime-l3 {
  background-color: #f4f499;
  color: black;
}

.background-color-lime-l4 {
  background-color: #fcfce6;
  color: black;
}

.background-color-orange-l4 {
  background-color: #fcf3e6;
  color: black;
}

.background-color-yellow-l2 {
  background-color: #fde166;
  color: black;
}

.background-color-metal-gray-l2 {
  background-color: #a1b2bc;
  color: black;
}

.background-color-yellow-gray-l2 {
  background-color: #e6e8e5;
  color: black;
}

.background-color-gray-scale-l2 {
  background-color: #ccc;
  color: black;
}

.background-color-pink {
  background-color: #da66a9;
  color: black;
}

.background-color-secondary-gray {
  background-color: #ccc;
  color: black;
}

.background-color-dark-gray {
  background-color: #666;
  color: white;
}

.progress--contrast .progress-meter {
  background-color: #0088b5;
}
.progress--small {
  height: 8px;
}

.progress-meter {
  z-index: 1;
}
.progress-meter--divider, .progress-meter--yellow {
  position: relative;
  top: -16px;
}
.progress-meter--divider {
  width: 20%;
  height: 16px;
  float: left;
  border-right: 1px solid #fff;
  z-index: 1;
}
.progress-meter--yellow {
  background-color: #fbcd00;
  z-index: 0;
}
.progress-meter.in-progress {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.space-top-8 {
  margin-top: 8px;
}

.space-right-8 {
  margin-right: 8px;
}

.space-left-8 {
  margin-left: 8px;
}

.space-sides-8 {
  margin-right: 8px;
  margin-left: 8px;
}

.space-8 {
  margin-bottom: 8px;
}

@media only screen and (max-width: 959px) {
  .space-top-tablet-8 {
    margin-top: 8px;
  }
  .space-right-tablet-8 {
    margin-right: 8px;
  }
  .space-left-tablet-8 {
    margin-left: 8px;
  }
  .space-sides-tablet-8 {
    margin-right: 8px;
    margin-left: 8px;
  }
  .space-tablet-8 {
    margin-bottom: 8px;
  }
}
@media only screen and (max-width: 639px) {
  .space-top-phone-8 {
    margin-top: 8px;
  }
  .space-right-phone-8 {
    margin-right: 8px;
  }
  .space-left-phone-8 {
    margin-left: 8px;
  }
  .space-sides-phone-8 {
    margin-right: 8px;
    margin-left: 8px;
  }
  .space-phone-8 {
    margin-bottom: 8px;
  }
  .line-height-phone-8 {
    line-height: 8px;
  }
}
.space-top-16 {
  margin-top: 16px;
}

.space-right-16 {
  margin-right: 16px;
}

.space-left-16 {
  margin-left: 16px;
}

.space-sides-16 {
  margin-right: 16px;
  margin-left: 16px;
}

.space-16 {
  margin-bottom: 16px;
}

@media only screen and (max-width: 959px) {
  .space-top-tablet-16 {
    margin-top: 16px;
  }
  .space-right-tablet-16 {
    margin-right: 16px;
  }
  .space-left-tablet-16 {
    margin-left: 16px;
  }
  .space-sides-tablet-16 {
    margin-right: 16px;
    margin-left: 16px;
  }
  .space-tablet-16 {
    margin-bottom: 16px;
  }
}
@media only screen and (max-width: 639px) {
  .space-top-phone-16 {
    margin-top: 16px;
  }
  .space-right-phone-16 {
    margin-right: 16px;
  }
  .space-left-phone-16 {
    margin-left: 16px;
  }
  .space-sides-phone-16 {
    margin-right: 16px;
    margin-left: 16px;
  }
  .space-phone-16 {
    margin-bottom: 16px;
  }
  .line-height-phone-16 {
    line-height: 16px;
  }
}
.space-top-24 {
  margin-top: 24px;
}

.space-right-24 {
  margin-right: 24px;
}

.space-left-24 {
  margin-left: 24px;
}

.space-sides-24 {
  margin-right: 24px;
  margin-left: 24px;
}

.space-24 {
  margin-bottom: 24px;
}
@media only screen and (max-width: 959px) {
  .space-24 {
    margin-bottom: 12px;
  }
}

@media only screen and (max-width: 959px) {
  .space-top-tablet-24 {
    margin-top: 24px;
  }
  .space-right-tablet-24 {
    margin-right: 24px;
  }
  .space-left-tablet-24 {
    margin-left: 24px;
  }
  .space-sides-tablet-24 {
    margin-right: 24px;
    margin-left: 24px;
  }
  .space-tablet-24 {
    margin-bottom: 24px;
  }
}
@media only screen and (max-width: 639px) {
  .space-top-phone-24 {
    margin-top: 24px;
  }
  .space-right-phone-24 {
    margin-right: 24px;
  }
  .space-left-phone-24 {
    margin-left: 24px;
  }
  .space-sides-phone-24 {
    margin-right: 24px;
    margin-left: 24px;
  }
  .space-phone-24 {
    margin-bottom: 24px;
  }
  .line-height-phone-24 {
    line-height: 24px;
  }
}
.space-top-32 {
  margin-top: 32px;
}

.space-right-32 {
  margin-right: 32px;
}

.space-left-32 {
  margin-left: 32px;
}

.space-sides-32 {
  margin-right: 32px;
  margin-left: 32px;
}

.space-32 {
  margin-bottom: 32px;
}
@media only screen and (max-width: 959px) {
  .space-32 {
    margin-bottom: 16px;
  }
}

@media only screen and (max-width: 959px) {
  .space-top-tablet-32 {
    margin-top: 32px;
  }
  .space-right-tablet-32 {
    margin-right: 32px;
  }
  .space-left-tablet-32 {
    margin-left: 32px;
  }
  .space-sides-tablet-32 {
    margin-right: 32px;
    margin-left: 32px;
  }
  .space-tablet-32 {
    margin-bottom: 32px;
  }
}
@media only screen and (max-width: 639px) {
  .space-top-phone-32 {
    margin-top: 32px;
  }
  .space-right-phone-32 {
    margin-right: 32px;
  }
  .space-left-phone-32 {
    margin-left: 32px;
  }
  .space-sides-phone-32 {
    margin-right: 32px;
    margin-left: 32px;
  }
  .space-phone-32 {
    margin-bottom: 32px;
  }
  .line-height-phone-32 {
    line-height: 32px;
  }
}
.space-top-40 {
  margin-top: 40px;
}

.space-right-40 {
  margin-right: 40px;
}

.space-left-40 {
  margin-left: 40px;
}

.space-sides-40 {
  margin-right: 40px;
  margin-left: 40px;
}

.space-40 {
  margin-bottom: 40px;
}
@media only screen and (max-width: 959px) {
  .space-40 {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 959px) {
  .space-top-tablet-40 {
    margin-top: 40px;
  }
  .space-right-tablet-40 {
    margin-right: 40px;
  }
  .space-left-tablet-40 {
    margin-left: 40px;
  }
  .space-sides-tablet-40 {
    margin-right: 40px;
    margin-left: 40px;
  }
  .space-tablet-40 {
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 639px) {
  .space-top-phone-40 {
    margin-top: 40px;
  }
  .space-right-phone-40 {
    margin-right: 40px;
  }
  .space-left-phone-40 {
    margin-left: 40px;
  }
  .space-sides-phone-40 {
    margin-right: 40px;
    margin-left: 40px;
  }
  .space-phone-40 {
    margin-bottom: 40px;
  }
  .line-height-phone-40 {
    line-height: 40px;
  }
}
.space-top-64 {
  margin-top: 64px;
}

.space-right-64 {
  margin-right: 64px;
}

.space-left-64 {
  margin-left: 64px;
}

.space-sides-64 {
  margin-right: 64px;
  margin-left: 64px;
}

.space-64 {
  margin-bottom: 64px;
}
@media only screen and (max-width: 959px) {
  .space-64 {
    margin-bottom: 32px;
  }
}

@media only screen and (max-width: 959px) {
  .space-top-tablet-64 {
    margin-top: 64px;
  }
  .space-right-tablet-64 {
    margin-right: 64px;
  }
  .space-left-tablet-64 {
    margin-left: 64px;
  }
  .space-sides-tablet-64 {
    margin-right: 64px;
    margin-left: 64px;
  }
  .space-tablet-64 {
    margin-bottom: 64px;
  }
}
@media only screen and (max-width: 639px) {
  .space-top-phone-64 {
    margin-top: 64px;
  }
  .space-right-phone-64 {
    margin-right: 64px;
  }
  .space-left-phone-64 {
    margin-left: 64px;
  }
  .space-sides-phone-64 {
    margin-right: 64px;
    margin-left: 64px;
  }
  .space-phone-64 {
    margin-bottom: 64px;
  }
  .line-height-phone-64 {
    line-height: 64px;
  }
}
.space-sides-auto {
  margin-right: auto;
  margin-left: auto;
}

.reveal--iframe {
  padding: 0;
}
.reveal--iframe .close-container {
  height: 40px;
  background-color: #9c0;
}
.reveal--iframe .close-container .info-close {
  top: 8px;
  right: 8px;
}
.reveal.tiny {
  max-width: 288px;
}
.reveal.small {
  max-width: 480px;
}
.reveal.large {
  max-width: 864px;
}
.reveal:not(.reveal--iframe).small, .reveal:not(.reveal--iframe).tiny, .reveal:not(.reveal--iframe).large {
  margin-bottom: 64px;
}
.reveal:not(.reveal--iframe).tiny {
  padding: 16px;
}
.reveal:not(.reveal--iframe).small {
  padding: 24px;
}
.reveal:not(.reveal--iframe).small .info-divider {
  margin-right: -24px;
  margin-left: -24px;
}
.reveal .h3 {
  text-align: center;
}
.reveal .info-divider {
  width: auto;
}
@media only screen and (max-width: 959px) {
  .reveal.small {
    width: 75%;
  }
}
@media only screen and (max-width: 639px) {
  .reveal.small, .reveal.tiny, .reveal.large {
    width: 90%;
    height: auto;
    min-height: auto;
    margin: auto auto 64px;
    border-radius: 8px;
  }
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-weight: 100;
}
h1 b, h2 b, h3 b, h4 b, .h1 b, .h2 b, .h3 b, .h4 b {
  font-weight: bold;
}

h1, .h1 {
  text-align: center;
}
h1 i, h1 b, h1 span, .h1 i, .h1 b, .h1 span {
  vertical-align: middle;
}
.content-header--left h1, .content-header--onlychild h1, .content-header--left .h1, .content-header--onlychild .h1 {
  margin-bottom: 0;
  padding-bottom: 32px;
  text-align: left;
}
.content-header--onlychild h1, .content-header--onlychild .h1 {
  padding-top: 32px;
}

h5, .h5 {
  font-weight: bold;
}

p {
  color: #666;
}
p a {
  color: #06c;
  text-decoration: underline;
}
p a:hover {
  color: #09f;
}

b.h1, b.h2, b.h3, b.h4, b.h5, b.h6 {
  font-weight: bold;
}

.subheader, blockquote {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.8;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .subheader, body.is-responsive blockquote {
    font-size: 16px;
  }
}

.subheader--small {
  font-size: 14px;
}

blockquote {
  font-style: italic;
}
.app-quote-bubble--green blockquote {
  color: #333;
}
blockquote.abstract {
  margin-bottom: -13px;
  padding: 33px 0 23px;
  border-bottom: 1px solid #ddd;
  font-style: normal;
}
blockquote.abstract + p {
  padding-top: 39px;
}

.text-small.dark-gray, .text-xsmall.dark-gray, .text-xxsmall.dark-gray {
  color: #666;
}
.text-small.white, .text-xsmall.white, .text-xxsmall.white {
  color: #fff;
}
.text-small.white a, .text-xsmall.white a, .text-xxsmall.white a {
  color: #fff;
  text-decoration: underline;
}
.text-small.white a:hover, .text-xsmall.white a:hover, .text-xxsmall.white a:hover {
  color: #e6e8e5;
}
.text-small.gray, .text-xsmall.gray, .text-xxsmall.gray {
  color: #999;
}

.text-small {
  font-size: 14px;
  line-height: 1.7;
}

.text-xsmall {
  font-size: 12px;
}
.text-xsmall:not(.form-error-text) {
  line-height: 20px;
}

.text-xxsmall {
  font-size: 10px;
  line-height: 1.6;
}

.font-pacifico-headline {
  font-family: "Pacifico", regular;
  color: #9c0;
}
.font-pacifico-headline--medium {
  font-size: 24px;
}
.font-pacifico-headline--large {
  font-size: 32px;
}

.link-text {
  color: #06c;
  cursor: pointer;
}
.link-text:hover {
  color: #09f;
}

.link-to-top {
  font-family: Helvetica, Arial, sans-serif;
  position: relative;
  display: block;
  margin-top: -26px;
  padding-right: 18px;
  padding-bottom: 8px;
  color: #999;
  font-size: 11px;
  line-height: 140%;
  text-align: right;
}
.link-to-top::after {
  position: absolute;
  bottom: 12px;
  right: 0;
  display: block;
  border-width: 6px;
  border-color: transparent transparent #aaa transparent;
  border-style: solid;
  border-radius: 2px;
  content: "";
}
.link-to-top:focus {
  color: #999;
}
.link-to-top:hover {
  color: #666;
  text-decoration: underline;
}
.link-to-top:hover::after {
  border-color: transparent transparent #666;
}

.loading-ellipsis {
  position: relative;
  display: none;
  width: 64px;
  height: 46px;
  margin: 0 auto 8px;
}
.loading-ellipsis .circle {
  position: absolute;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #06c;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loading-ellipsis .circle:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.loading-ellipsis .circle:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.loading-ellipsis .circle:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.loading-ellipsis .circle:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
.tooltip {
  background-color: rgba(51, 51, 51, 0.9);
  line-height: 20px;
}
.tooltip.top::before {
  border-color: rgba(51, 51, 51, 0.9) transparent transparent;
}
.tooltip.bottom::before {
  border-color: transparent transparent rgba(51, 51, 51, 0.9);
}
.tooltip.medium {
  top: auto;
  max-width: 250px;
}
.tooltip.white {
  border: 1px solid #e6e8e5;
  background-color: #fff;
  color: #333;
  box-shadow: 0 8px 24px -12px rgba(51, 51, 51, 0.25);
}
.tooltip.white.top::before {
  top: 99%;
  border-color: #fff transparent transparent;
  z-index: 2;
}
.tooltip.white.top::after {
  position: absolute;
  top: 100%;
  bottom: auto;
  position: absolute;
  border: inset 16px;
  border-top-style: solid;
  border-color: #e6e8e5 transparent transparent;
  content: "";
}
.tooltip.white.top.align-center::after {
  left: 50%;
  transform: translateX(-50%);
}
.tooltip.white.top.align-left::after {
  right: auto;
  left: 10%;
}
.tooltip.white.bottom {
  box-shadow: 0 -8px 24px -12px rgba(51, 51, 51, 0.25);
}
.tooltip.white.bottom::before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%);
  border-color: transparent transparent rgba(255, 255, 255, 0.9);
  z-index: 2;
}
.tooltip.white.bottom::after {
  position: absolute;
  bottom: 101%;
  left: 50%;
  transform: rotate(180deg) translateX(50%);
  border: inset 16px;
  border-top-style: solid;
  border-color: #e6e8e5 transparent transparent;
  content: "";
}
.tooltip.white.bottom.align-right::before {
  right: 0;
  left: auto;
}
.tooltip.white.bottom.align-right::after {
  right: 16px;
  left: auto;
  transform: translateX(0) rotate(180deg);
}
@media only screen and (max-width: 639px) {
  body.is-responsive .tooltip.medium {
    max-width: 50%;
  }
  body.is-responsive .tooltip.registry {
    left: 50% !important;
    width: 80%;
    transform: translate(-50%, 0);
  }
  body.is-responsive .tooltip.success-proof {
    left: 50% !important;
    max-width: 300px;
    width: 80%;
    transform: translate(-50%, 0);
  }
}

.slide-in-down.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: translateY(-100%);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}

.slide-in-down.mui-enter.mui-enter-active {
  transform: translateY(0);
}

.slide-in-left.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: translateX(-100%);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}

.slide-in-left.mui-enter.mui-enter-active {
  transform: translateX(0);
}

.slide-in-up.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: translateY(100%);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}

.slide-in-up.mui-enter.mui-enter-active {
  transform: translateY(0);
}

.slide-in-right.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: translateX(100%);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}

.slide-in-right.mui-enter.mui-enter-active {
  transform: translateX(0);
}

.slide-out-down.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: translateY(0);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}

.slide-out-down.mui-leave.mui-leave-active {
  transform: translateY(100%);
}

.slide-out-right.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: translateX(0);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}

.slide-out-right.mui-leave.mui-leave-active {
  transform: translateX(100%);
}

.slide-out-up.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: translateY(0);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}

.slide-out-up.mui-leave.mui-leave-active {
  transform: translateY(-100%);
}

.slide-out-left.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: translateX(0);
  transition-property: transform, opacity;
  backface-visibility: hidden;
}

.slide-out-left.mui-leave.mui-leave-active {
  transform: translateX(-100%);
}

.fade-in.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  opacity: 0;
  transition-property: opacity;
}

.fade-in.mui-enter.mui-enter-active {
  opacity: 1;
}

.fade-out.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  opacity: 1;
  transition-property: opacity;
}

.fade-out.mui-leave.mui-leave-active {
  opacity: 0;
}

.hinge-in-from-top.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateX(-90deg);
  transform-origin: top;
  transition-property: transform, opacity;
  opacity: 0;
}

.hinge-in-from-top.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-in-from-right.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateY(-90deg);
  transform-origin: right;
  transition-property: transform, opacity;
  opacity: 0;
}

.hinge-in-from-right.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-in-from-bottom.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateX(90deg);
  transform-origin: bottom;
  transition-property: transform, opacity;
  opacity: 0;
}

.hinge-in-from-bottom.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-in-from-left.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateY(90deg);
  transform-origin: left;
  transition-property: transform, opacity;
  opacity: 0;
}

.hinge-in-from-left.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-in-from-middle-x.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateX(-90deg);
  transform-origin: center;
  transition-property: transform, opacity;
  opacity: 0;
}

.hinge-in-from-middle-x.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-in-from-middle-y.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotateY(-90deg);
  transform-origin: center;
  transition-property: transform, opacity;
  opacity: 0;
}

.hinge-in-from-middle-y.mui-enter.mui-enter-active {
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-out-from-top.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  transform-origin: top;
  transition-property: transform, opacity;
  opacity: 1;
}

.hinge-out-from-top.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(90deg);
  opacity: 0;
}

.hinge-out-from-right.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  transform-origin: right;
  transition-property: transform, opacity;
  opacity: 1;
}

.hinge-out-from-right.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(90deg);
  opacity: 0;
}

.hinge-out-from-bottom.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  transform-origin: bottom;
  transition-property: transform, opacity;
  opacity: 1;
}

.hinge-out-from-bottom.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0;
}

.hinge-out-from-left.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  transform-origin: left;
  transition-property: transform, opacity;
  opacity: 1;
}

.hinge-out-from-left.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0;
}

.hinge-out-from-middle-x.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  transform-origin: center;
  transition-property: transform, opacity;
  opacity: 1;
}

.hinge-out-from-middle-x.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateX(90deg);
  opacity: 0;
}

.hinge-out-from-middle-y.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: perspective(2000px) rotate(0deg);
  transform-origin: center;
  transition-property: transform, opacity;
  opacity: 1;
}

.hinge-out-from-middle-y.mui-leave.mui-leave-active {
  transform: perspective(2000px) rotateY(90deg);
  opacity: 0;
}

.scale-in-up.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: scale(0.5);
  transition-property: transform, opacity;
  opacity: 0;
}

.scale-in-up.mui-enter.mui-enter-active {
  transform: scale(1);
  opacity: 1;
}

.scale-in-down.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: scale(1.5);
  transition-property: transform, opacity;
  opacity: 0;
}

.scale-in-down.mui-enter.mui-enter-active {
  transform: scale(1);
  opacity: 1;
}

.scale-out-up.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: scale(1);
  transition-property: transform, opacity;
  opacity: 1;
}

.scale-out-up.mui-leave.mui-leave-active {
  transform: scale(1.5);
  opacity: 0;
}

.scale-out-down.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: scale(1);
  transition-property: transform, opacity;
  opacity: 1;
}

.scale-out-down.mui-leave.mui-leave-active {
  transform: scale(0.5);
  opacity: 0;
}

.spin-in.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: rotate(-0.75turn);
  transition-property: transform, opacity;
  opacity: 0;
}

.spin-in.mui-enter.mui-enter-active {
  transform: rotate(0);
  opacity: 1;
}

.spin-out.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: rotate(0);
  transition-property: transform, opacity;
  opacity: 1;
}

.spin-out.mui-leave.mui-leave-active {
  transform: rotate(0.75turn);
  opacity: 0;
}

.spin-in-ccw.mui-enter {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: rotate(0.75turn);
  transition-property: transform, opacity;
  opacity: 0;
}

.spin-in-ccw.mui-enter.mui-enter-active {
  transform: rotate(0);
  opacity: 1;
}

.spin-out-ccw.mui-leave {
  transition-duration: 500ms;
  transition-timing-function: linear;
  transform: rotate(0);
  transition-property: transform, opacity;
  opacity: 1;
}

.spin-out-ccw.mui-leave.mui-leave-active {
  transform: rotate(-0.75turn);
  opacity: 0;
}

.slow {
  transition-duration: 750ms !important;
}

.fast {
  transition-duration: 250ms !important;
}

.linear {
  transition-timing-function: linear !important;
}

.ease {
  transition-timing-function: ease !important;
}

.ease-in {
  transition-timing-function: ease-in !important;
}

.ease-out {
  transition-timing-function: ease-out !important;
}

.ease-in-out {
  transition-timing-function: ease-in-out !important;
}

.bounce-in {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
}

.bounce-out {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
}

.bounce-in-out {
  transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
}

.short-delay {
  transition-delay: 300ms !important;
}

.long-delay {
  transition-delay: 700ms !important;
}

.shake {
  animation-name: shake-7;
}
@keyframes shake-7 {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    transform: translateX(7%);
  }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    transform: translateX(-7%);
  }
}

.spin-cw {
  animation-name: spin-cw-1turn;
}
@keyframes spin-cw-1turn {
  0% {
    transform: rotate(-1turn);
  }
  100% {
    transform: rotate(0);
  }
}

.spin-ccw {
  animation-name: spin-ccw-1turn;
}
@keyframes spin-ccw-1turn {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-1turn);
  }
}

.wiggle {
  animation-name: wiggle-7deg;
}
@keyframes wiggle-7deg {
  40%, 50%, 60% {
    transform: rotate(7deg);
  }
  35%, 45%, 55%, 65% {
    transform: rotate(-7deg);
  }
  0%, 30%, 70%, 100% {
    transform: rotate(0);
  }
}

.shake,
.spin-cw,
.spin-ccw,
.wiggle {
  animation-duration: 500ms;
}

.infinite {
  animation-iteration-count: infinite;
}

.slow {
  animation-duration: 750ms !important;
}

.fast {
  animation-duration: 250ms !important;
}

.linear {
  animation-timing-function: linear !important;
}

.ease {
  animation-timing-function: ease !important;
}

.ease-in {
  animation-timing-function: ease-in !important;
}

.ease-out {
  animation-timing-function: ease-out !important;
}

.ease-in-out {
  animation-timing-function: ease-in-out !important;
}

.bounce-in {
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
}

.bounce-out {
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
}

.bounce-in-out {
  animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
}

.short-delay {
  animation-delay: 300ms !important;
}

.long-delay {
  animation-delay: 700ms !important;
}

@font-face {
  font-family: "sofatutor-icons";
  src: url(/packs/static/dist/sofatutor-icons-a38db63e6601493999bf.woff2?c43c796cc877807981aaa3ee7faba850) format("woff2"), url(/packs/static/dist/sofatutor-icons-fd89d5bef32eed6c3fd4.woff?c43c796cc877807981aaa3ee7faba850) format("woff");
}
.icon {
  color: inherit;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
}
.icon::before {
  display: inline-block;
  width: 1em;
  font-family: "sofatutor-icons";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: inherit;
  text-transform: none;
  speak: never;
  vertical-align: top;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon--small {
  font-size: 16px;
}
.icon--big {
  font-size: 32px;
}
.icon--rotate-down {
  transform: rotate(90deg);
}
.icon--rotate-left {
  transform: rotate(180deg);
}
.icon--rotate-up {
  transform: rotate(270deg);
}
.icon.white {
  color: #fff;
}
.icon.light-gray {
  color: #f8f8f8;
}
.icon.medium-gray {
  color: #e6e8e5;
}
.icon.dark-gray {
  color: #666;
}
.icon.gray {
  color: #999;
}
.icon.black {
  color: #333;
}
.icon.sofatutor-green {
  color: #9c0;
}
.icon.sofatutor-dark-green {
  color: #690;
}
.icon.primary {
  color: #06c;
}
.icon.primary-bright {
  color: #09f;
}
.icon.secondary {
  color: #ccc;
}
.icon.success {
  color: #d6eb99;
}
.icon.warning {
  color: #fdeb99;
}
.icon.alert {
  color: #fce3e3;
}
.icon.yellow {
  color: #fbcd00;
}
.icon.purple {
  color: #7900b5;
}
.icon.orange {
  color: #e9a033;
}
.icon.red {
  color: #e93333;
}
.icon.light-red {
  color: #e66;
}
.icon.light-blue {
  color: #33a0c4;
}
.icon.transparent-white {
  color: rgba(255, 255, 255, 0);
}

.icon--admin::before {
  content: "\f101";
}

.icon--arrow-circle::before {
  content: "\f102";
}

.icon--arrow-simple::before {
  content: "\f103";
}

.icon--arrow-solid::before {
  content: "\f104";
}

.icon--arrow-thin::before {
  content: "\f105";
}

.icon--backButton::before {
  content: "\f106";
}

.icon--basic-exercise::before {
  content: "\f107";
}

.icon--blue-ribbon::before {
  content: "\f108";
}

.icon--book-with-lens::before {
  content: "\f109";
}

.icon--bookmarks-add::before {
  content: "\f10a";
}

.icon--bookmarks-check::before {
  content: "\f10b";
}

.icon--books::before {
  content: "\f10c";
}

.icon--challenge-button-background::before {
  content: "\f10d";
}

.icon--chart::before {
  content: "\f10e";
}

.icon--chat::before {
  content: "\f10f";
}

.icon--checkmark::before {
  content: "\f110";
}

.icon--circle-checkmark-green::before {
  content: "\f111";
}

.icon--circle-checkmark::before {
  content: "\f112";
}

.icon--circle-close-red::before {
  content: "\f113";
}

.icon--circle-close::before {
  content: "\f114";
}

.icon--circle-empty-borderless::before {
  content: "\f115";
}

.icon--circle-empty::before {
  content: "\f116";
}

.icon--circle-menu::before {
  content: "\f117";
}

.icon--circle-plus::before {
  content: "\f118";
}

.icon--circle-warning-yellow::before {
  content: "\f119";
}

.icon--close::before {
  content: "\f11a";
}

.icon--cogs::before {
  content: "\f11b";
}

.icon--document::before {
  content: "\f11c";
}

.icon--download::before {
  content: "\f11d";
}

.icon--drag::before {
  content: "\f11e";
}

.icon--edit::before {
  content: "\f11f";
}

.icon--exercise::before {
  content: "\f120";
}

.icon--eye-closed::before {
  content: "\f121";
}

.icon--eye::before {
  content: "\f122";
}

.icon--feedback::before {
  content: "\f123";
}

.icon--feedbackButton::before {
  content: "\f124";
}

.icon--fullscreen::before {
  content: "\f125";
}

.icon--grid-menu::before {
  content: "\f126";
}

.icon--hd::before {
  content: "\f127";
}

.icon--heart-in-bubble::before {
  content: "\f128";
}

.icon--heart::before {
  content: "\f129";
}

.icon--info::before {
  content: "\f12a";
}

.icon--learning-text::before {
  content: "\f12b";
}

.icon--lightbulb::before {
  content: "\f12c";
}

.icon--list-menu::before {
  content: "\f12d";
}

.icon--list::before {
  content: "\f12e";
}

.icon--lock-locked::before {
  content: "\f12f";
}

.icon--lock-open::before {
  content: "\f130";
}

.icon--mail::before {
  content: "\f131";
}

.icon--menu::before {
  content: "\f132";
}

.icon--microphone::before {
  content: "\f133";
}

.icon--minus-white::before {
  content: "\f134";
}

.icon--minus::before {
  content: "\f135";
}

.icon--notification::before {
  content: "\f136";
}

.icon--padlock-close::before {
  content: "\f137";
}

.icon--padlock-open::before {
  content: "\f138";
}

.icon--pause::before {
  content: "\f139";
}

.icon--phone::before {
  content: "\f13a";
}

.icon--plane::before {
  content: "\f13b";
}

.icon--play-solid::before {
  content: "\f13c";
}

.icon--player-play::before {
  content: "\f13d";
}

.icon--plus::before {
  content: "\f13e";
}

.icon--pommes-info::before {
  content: "\f13f";
}

.icon--pommes-thinking::before {
  content: "\f140";
}

.icon--pommes-with-binoculars::before {
  content: "\f141";
}

.icon--print::before {
  content: "\f142";
}

.icon--questionMark::before {
  content: "\f143";
}

.icon--replay::before {
  content: "\f144";
}

.icon--search-page::before {
  content: "\f145";
}

.icon--search::before {
  content: "\f146";
}

.icon--share::before {
  content: "\f147";
}

.icon--shine::before {
  content: "\f148";
}

.icon--sofa::before {
  content: "\f149";
}

.icon--sorting::before {
  content: "\f14a";
}

.icon--star-half::before {
  content: "\f14b";
}

.icon--star-label::before {
  content: "\f14c";
}

.icon--star::before {
  content: "\f14d";
}

.icon--stop-sign::before {
  content: "\f14e";
}

.icon--teacher::before {
  content: "\f14f";
}

.icon--thumbsup::before {
  content: "\f150";
}

.icon--trash::before {
  content: "\f151";
}

.icon--trophy::before {
  content: "\f152";
}

.icon--turtle::before {
  content: "\f153";
}

.icon--upload::before {
  content: "\f154";
}

.icon--video-and-learning-text::before {
  content: "\f155";
}

.icon--video-duration-orange::before {
  content: "\f156";
}

.icon--video-duration::before {
  content: "\f157";
}

.icon--video-help::before {
  content: "\f158";
}

.icon--video-play::before {
  content: "\f159";
}

.icon--video::before {
  content: "\f15a";
}

.icon--worksheet-solid::before {
  content: "\f15b";
}

.icon--worksheet::before {
  content: "\f15c";
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/packs/static/open-sans/open-sans-v34-latin-300-c93abfae8b4c45ec0929.woff2) format("woff2"), url(/packs/static/open-sans/open-sans-v34-latin-300-fbaa05ad22cd4594290a.woff) format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/packs/static/open-sans/open-sans-v34-latin-regular-a1535f451fb7bb98f526.woff2) format("woff2"), url(/packs/static/open-sans/open-sans-v34-latin-regular-7958f4e4a2bb8025ef86.woff) format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/packs/static/open-sans/open-sans-v34-latin-italic-80a88fd1b15e99551462.woff2) format("woff2"), url(/packs/static/open-sans/open-sans-v34-latin-italic-acfa2365a94366a6d762.woff) format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/packs/static/open-sans/open-sans-v34-latin-600-7ef3bbc98d285227e83a.woff2) format("woff2"), url(/packs/static/open-sans/open-sans-v34-latin-600-f031bf84d9797276192c.woff) format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/packs/static/open-sans/open-sans-v34-latin-600italic-9934eba5db905a32086d.woff2) format("woff2"), url(/packs/static/open-sans/open-sans-v34-latin-600italic-3df643644255156ee7ba.woff) format("woff");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/packs/static/open-sans/open-sans-v34-latin-700-b245bc85ddeedb27a549.woff2) format("woff2"), url(/packs/static/open-sans/open-sans-v34-latin-700-2867e720135399c4b665.woff) format("woff");
}
@font-face {
  font-family: "Grundschrift";
  font-style: normal;
  font-weight: normal;
  src: url(/packs/static/grundschrift/Grundschrift-Regular-09f324b3b89b9628c77c.woff2) format("woff2"), url(/packs/static/grundschrift/Grundschrift-Regular-5b1c2d5ad14b76f1b58f.woff) format("woff"), url(/packs/static/grundschrift/Grundschrift-Regular-8dd37bd5413e0a83f351.otf) format("opentype");
}
@font-face {
  font-family: "Grundschrift";
  font-style: normal;
  font-weight: bold;
  src: url(/packs/static/grundschrift/Grundschrift-Bold-8b908f1538011245cb56.woff2) format("woff2"), url(/packs/static/grundschrift/Grundschrift-Bold-143ec391467ed19e01b4.woff) format("woff"), url(/packs/static/grundschrift/Grundschrift-Bold-8eed85191a485d9ba6e1.otf) format("opentype");
}
@font-face {
  font-family: "Grundschrift-EN";
  font-style: normal;
  font-weight: normal;
  src: url(/packs/static/grundschrift_en/Grundschrift-EN-Regular-adb754c515445b8f2d23.woff2) format("woff2"), url(/packs/static/grundschrift_en/Grundschrift-EN-Regular-5233a3fe6a9ee9403c4e.woff) format("woff"), url(/packs/static/grundschrift_en/Grundschrift-EN-Regular-e056c79920ba381a15e8.ttf) format("truetype");
}
@font-face {
  font-family: "Grundschrift-EN";
  font-style: normal;
  font-weight: bold;
  src: url(/packs/static/grundschrift_en/Grundschrift-EN-Bold-26239d25743b8dcdca78.woff2) format("woff2"), url(/packs/static/grundschrift_en/Grundschrift-EN-Bold-a67a9d3e4d44e9868ea4.woff) format("woff"), url(/packs/static/grundschrift_en/Grundschrift-EN-Bold-e73ca8ad39d89c000993.ttf) format("truetype");
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(/packs/static/fredoka/Fredoka-50f40ec2af67f453010a.woff2) format("woff2");
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/packs/static/fredoka/Fredoka-50f40ec2af67f453010a.woff2) format("woff2");
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/packs/static/fredoka/Fredoka-50f40ec2af67f453010a.woff2) format("woff2");
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/packs/static/fredoka/Fredoka-50f40ec2af67f453010a.woff2) format("woff2");
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/packs/static/fredoka/Fredoka-50f40ec2af67f453010a.woff2) format("woff2");
}
/*!
* animate.css - https://animate.style/
* Version - 4.1.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2020 Animate.css
*/
:root {
  --animate-duration:1s;
  --animate-delay:1s;
  --animate-repeat:1;
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}

.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}

.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}

.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}

.animate__animated.animate__delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}

.animate__animated.animate__delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}

.animate__animated.animate__delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}

.animate__animated.animate__delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}

.animate__animated.animate__faster {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}

.animate__animated.animate__fast {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}

.animate__animated.animate__slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}

.animate__animated.animate__slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}

@media (prefers-reduced-motion: reduce), print {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
  .animate__animated[class*=Out] {
    opacity: 0;
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 53%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  0%, 20%, 53%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shakeX {
  0%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  0%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}

@-webkit-keyframes shakeY {
  0%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  0%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
    transform: translate3d(-25%, 0, 0) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
    transform: translate3d(-15%, 0, 0) rotate(-3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
    transform: translate3d(-5%, 0, 0) rotate(-1deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
    transform: translate3d(-25%, 0, 0) rotate(-5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    transform: translate3d(20%, 0, 0) rotate(3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
    transform: translate3d(-15%, 0, 0) rotate(-3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    transform: translate3d(10%, 0, 0) rotate(2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
    transform: translate3d(-5%, 0, 0) rotate(-1deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  0%, 11.1%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  0%, 11.1%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}

@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}

@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}

@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}

@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}

@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}

@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0) scale(0.7);
    transform: translateX(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}

@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0) scale(0.7);
    transform: translateY(0) scale(0.7);
    opacity: 0.7;
  }
  to {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInDown {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInRight {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes bounceInUp {
  0%, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeInTopLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInTopLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}

@-webkit-keyframes fadeInTopRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInTopRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}

@-webkit-keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}

@-webkit-keyframes fadeInBottomRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes fadeInBottomRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes fadeOutTopLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}

@-webkit-keyframes fadeOutTopRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}

@-webkit-keyframes fadeOutBottomRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}

@-webkit-keyframes fadeOutBottomLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateX(-5deg);
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-20deg);
    transform: perspective(400px) rotateY(-20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotateY(-5deg);
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOutRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes lightSpeedOutLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  0% {
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  0% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes rotateOut {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

@-webkit-keyframes jackInTheBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    transform: translate3d(-100%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg);
  }
}
@keyframes rollOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    transform: translate3d(100%, 0, 0) rotate(120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInDown {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

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

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

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

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

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

/* Slider */
.slick-loading .slick-list {
  background: #fff url(/packs/static/slick-carousel/slick/ajax-loader-fb6f3c230cb846e25247.gif) center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  src: url(/packs/static/slick-carousel/slick/fonts/slick-a4e97f5a2a64f0ab1323.eot);
  src: url(/packs/static/slick-carousel/slick/fonts/slick-a4e97f5a2a64f0ab1323.eot?#iefix) format("embedded-opentype"), url(/packs/static/slick-carousel/slick/fonts/slick-295183786cd8a1389865.woff) format("woff"), url(/packs/static/slick-carousel/slick/fonts/slick-c94f7671dcc99dce43e2.ttf) format("truetype"), url(/packs/static/slick-carousel/slick/fonts/slick-2630a3e3eab21c607e21.svg#slick) format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}
[dir=rtl] .slick-prev {
  left: auto;
  right: -25px;
}
.slick-prev:before {
  content: "←";
}
[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}
[dir=rtl] .slick-next {
  left: -25px;
  right: auto;
}
.slick-next:before {
  content: "→";
}
[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

.box-panel {
  position: relative;
  border-radius: 8px;
  border-top-width: 8px;
  border-top-style: solid;
  background-color: #fff;
}
.box-panel--green {
  border-top-color: #9c0;
}
.box-panel--green .box-panel__headline {
  margin-top: -1px;
  background-color: #9c0;
  color: #333;
}
.box-panel--red {
  border-top-color: #e93333;
}
.box-panel--orange {
  border-top-color: #fbcd00;
  background-color: #fdeb99;
}
.box-panel--deep-orange {
  border-top-color: #e35b00;
  background-color: #fde166;
}
.box-panel--light-orange {
  border-top-color: #e35b00;
  background-color: #fdeb99;
}
.box-panel--dark-green {
  border-top-color: #690;
}
.box-panel--dark-green .box-panel__headline {
  margin-top: -1px;
  background-color: #690;
  color: #fff;
}
.box-panel--gray {
  border-top-color: #ddd;
  background-color: #f8f8f8;
}
.box-panel--lime {
  border-top-color: #e3e300;
}
.box-panel__headline {
  margin-bottom: 0;
  padding-bottom: 8px;
  padding-left: 30px;
}
.box-panel__content {
  position: relative;
  padding: 20px 30px;
  word-wrap: break-word;
}
.box-panel__content--highlight {
  border-bottom: 1px solid #e6e8e5;
  background-color: #f8f8f8;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .box-panel--small .box-panel__headline.h3 {
    padding-left: 20px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .box-panel--small .box-panel__headline.h3 {
    padding-right: 20px;
  }
}

.box-content-area {
  position: relative;
  padding: 20px 40px 40px;
}
.box-content-area .sprites-layouts-lightbulb {
  margin-right: 10px;
}
.box-content-area--highlighted {
  border: 1px solid #f4cf99;
  border-radius: 4px;
  background-color: #fcf8e6;
}
.box-content-area__text, .box-content-area__list {
  margin-top: 20px;
  border-bottom: 1px solid #e6e8e5;
}
.box-content-area__text, .box-content-area__list-item {
  border-top: 1px solid #e6e8e5;
}
.box-content-area__list .h5, .box-content-area__text .h5 {
  margin-bottom: 0;
}
.box-content-area__text {
  padding-top: 10px;
  padding-bottom: 10px;
}
.box-content-area__list-item {
  position: relative;
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  cursor: pointer;
}
.box-content-area__list-item .is-hidden-list {
  margin-top: 20px;
}
.box-content-area__list-item.is-minimized .sprites-layouts-view_list {
  display: block;
}
.box-content-area__list-item.is-minimized .sprites-layouts-view_list_open {
  display: none;
}
.box-content-area__list-item.is-minimized .is-hidden-list {
  display: none;
}
.box-content-area__list-item .sprites-layouts-view_list {
  position: absolute;
  top: 50%;
  right: 10px;
  display: none;
  margin-top: -6px;
}
.box-content-area__list-item .sprites-layouts-view_list_open {
  position: absolute;
  top: 21px;
  right: 10px;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .box-content-area--highlighted {
    padding-right: 20px;
    padding-left: 20px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
}

.info-tabs.two-tabs .info-tab {
  width: 50%;
}

.info-tab {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  margin-right: 2px;
  margin-left: 2px;
  border-top: 4px solid #aaa;
  background-color: #ccc;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.info-tab:first-of-type {
  margin-left: 0;
}
.info-tab:last-of-type {
  margin-right: 0;
}
.info-tab.is-current, .info-tab.is-current:hover {
  border-top: 4px solid #9c0;
  background-color: #fff;
}
.info-tab.is-current a, .info-tab.is-current:hover a {
  background: none;
  color: #333;
}
.info-tab:hover {
  border-top: 4px solid #5c7a00;
  background-color: #690;
}
.info-tab a {
  display: block;
  padding: 12px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0%, transparent 10px);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.info-tab-contents {
  background-color: #fff;
}
.info-tab-contents.no-tabs {
  border-top: 4px solid #9c0;
}

.info-box {
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #e6e8e5;
  border-radius: 5px;
}
.info-box--fff {
  background-color: #fff;
}
.info-box--f8 {
  background-color: #f8f8f8;
}
.info-box--shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.grid-row {
  width: 100%;
  max-width: 1184px;
  margin: 0 auto;
}
.grid-row::after {
  content: "";
  display: block;
  clear: both;
}
.grid-row--collapsed::after {
  content: "";
  display: block;
  clear: both;
}
.grid-row--collapsed .grid-column {
  padding: 0;
}

.grid-cell::after {
  content: "";
  display: block;
  clear: both;
}
.grid-cell > div:first-of-type {
  padding-left: 0;
}
.grid-cell > div:last-of-type {
  padding-right: 0;
}

.grid-column-12, .grid-column-11, .grid-column-10, .grid-column-9, .grid-column-8, .grid-column-7, .grid-column-6, .grid-column-5, .grid-column-4, .grid-column-3, .grid-column-2, .grid-column-1 {
  position: relative;
  box-sizing: border-box;
  padding: 0 10px;
  float: left;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .grid-column-12, body.is-responsive .grid-column-11, body.is-responsive .grid-column-10, body.is-responsive .grid-column-9, body.is-responsive .grid-column-8, body.is-responsive .grid-column-7, body.is-responsive .grid-column-6, body.is-responsive .grid-column-5, body.is-responsive .grid-column-4, body.is-responsive .grid-column-3, body.is-responsive .grid-column-2, body.is-responsive .grid-column-1 {
    width: 100%;
  }
}

.grid-column-1 {
  width: 8.3333333333%;
  min-height: 1px;
}
.grid-column-2 {
  width: 16.6666666667%;
  min-height: 1px;
}
.grid-column-3 {
  width: 25%;
  min-height: 1px;
}
.grid-column-4 {
  width: 33.3333333333%;
  min-height: 1px;
}
.grid-column-5 {
  width: 41.6666666667%;
  min-height: 1px;
}
.grid-column-6 {
  width: 50%;
  min-height: 1px;
}
.grid-column-7 {
  width: 58.3333333333%;
  min-height: 1px;
}
.grid-column-8 {
  width: 66.6666666667%;
  min-height: 1px;
}
.grid-column-9 {
  width: 75%;
  min-height: 1px;
}
.grid-column-10 {
  width: 83.3333333333%;
  min-height: 1px;
}
.grid-column-11 {
  width: 91.6666666667%;
  min-height: 1px;
}
.grid-column-12 {
  width: 100%;
  min-height: 0;
}
.grid-column--centered {
  margin-right: auto;
  margin-left: auto;
  float: none;
  clear: both;
}

@media only screen and (max-width: 959px) {
  body.is-responsive .grid-row {
    width: 100%;
    min-width: 320px;
    max-width: 960px;
  }
  body.is-responsive .grid-row img {
    max-width: 100%;
    height: auto;
  }
}

.green-gradient {
  background: linear-gradient(#9c0, #690);
}

.yellow-gradient {
  background: linear-gradient(#fde166, #fcd733);
}

.red-gradient {
  background: linear-gradient(#e66, #e93333);
}

.blue-gradient {
  background: linear-gradient(#0088b5, #004cb5);
}

.is-hidden {
  display: none;
}

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

.horizontal-top::after {
  content: "";
  display: block;
  clear: both;
}
.horizontal-top > li {
  float: left;
  vertical-align: top;
}

.horizontal-middle > li {
  display: inline-block;
  vertical-align: middle;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.bg-black-transparent {
  background-color: rgba(0, 0, 0, 0.8);
}

.ajaxForm {
  position: relative;
  bottom: 0;
}

.hidden {
  display: none;
}

.clear {
  clear: both;
}

.center {
  margin: auto;
}

.circle {
  border-radius: 50%;
}

.vertical-align-middle {
  display: inline-block;
  vertical-align: middle;
}

.info-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background-image: url("/assets/application/layouts/close.svg");
  cursor: pointer;
}
.info-close:hover {
  background-image: url("/assets/application/layouts/close_hover.svg");
}

.sprites-layouts-duration_white {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/duration_white-4714fc9bdc5077208ab6.svg) center center no-repeat;
  height: 11px;
  width: 11px;
}

.sprites-layouts-learning_text {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/learning_text-460264bd3364c231ec4c.svg) center center no-repeat;
  height: 11px;
  width: 11px;
}

.sprites-layouts-search {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/search-9aabd725be14174e30c5.svg) center center no-repeat;
  height: 14px;
  width: 14px;
}
.sprites-layouts-search:hover, .hovers-sprite:hover .sprites-layouts-search {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/search_hover-8133d3abd8b1c0a7ea73.svg) center center no-repeat;
}

.sprites-layouts-video_active {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/video_active-7aa63167f21d9ecdf964.svg) center center no-repeat;
  height: 16px;
  width: 16px;
}

.sprites-layouts-close {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/close-b568ad768fbc07917d19.svg) center center no-repeat;
  height: 16px;
  width: 16px;
}
.sprites-layouts-close:hover, .hovers-sprite:hover .sprites-layouts-close {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/close_hover-64c0dcb4dbbd88a60f71.svg) center center no-repeat;
}

.sprites-layouts-de {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/de-b50c05d95ad68daf3e06.svg) center center no-repeat;
  height: 16px;
  width: 16px;
}
.sprites-layouts-de:hover, .hovers-sprite:hover .sprites-layouts-de {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/de_hover-4974120c6a8cf2877417.svg) center center no-repeat;
}

.sprites-layouts-en {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/en-e7517af814a40a2f918d.svg) center center no-repeat;
  height: 16px;
  width: 16px;
}
.sprites-layouts-en:hover, .hovers-sprite:hover .sprites-layouts-en {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/en_hover-505f1d7a312b2eedef55.svg) center center no-repeat;
}

.sprites-layouts-more {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/more-fb5c972986ca7c7a23cd.svg) center center no-repeat;
  height: 16px;
  width: 16px;
}
.sprites-layouts-more:hover, .hovers-sprite:hover .sprites-layouts-more {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/more_hover-a5612d8ed0bd7453427f.svg) center center no-repeat;
}

.sprites-layouts-question_mark {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/question_mark-bc5281122a228cf36f5b.svg) center center no-repeat;
  height: 16px;
  width: 16px;
}
.sprites-layouts-question_mark:hover, .hovers-sprite:hover .sprites-layouts-question_mark {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/question_mark_hover-47a6d2375dd50c2aef0f.svg) center center no-repeat;
}

.sprites-layouts-video {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/video-54c3c23b4f2b3cd2bf65.svg) center center no-repeat;
  height: 16px;
  width: 16px;
}
.sprites-layouts-video:hover, .hovers-sprite:hover .sprites-layouts-video {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/video_hover-efefa4540b45f9cbe2c5.svg) center center no-repeat;
}

.sprites-layouts-benefit_bulletpoint {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/benefit_bulletpoint-5ac0b85230bdac2fe773.svg) center center no-repeat;
  height: 20px;
  width: 20px;
}

.sprites-layouts-stop_sign {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/stop_sign-661abb6a8b8f767a8682.svg) center center no-repeat;
  height: 20px;
  width: 20px;
}

.sprites-layouts-bonus {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/bonus-2da3dd903b27d450f5e5.svg) center center no-repeat;
  height: 32px;
  width: 32px;
}

.sprites-layouts-arrow_down {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/arrow_down-afe0017870c457de0ee6.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-arrow_down_light {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/arrow_down_light-c20bebee0fd6c9afb15a.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-arrow_right {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/arrow_right-c619a5bcc27b98382bb2.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-arrow_up {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/arrow_up-7b3d15c44e54e692fbae.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-collapse_button {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/collapse_button-c49f6d5d39989bc6c00f.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-down_pointing_bracket {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/down_pointing_bracket-67dac81e7acf804deabd.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-dropdown {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/dropdown-17faf0cf6f2b4a402a62.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-dropdown_green {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/dropdown_green-3c2e77a7e0c4681ce404.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-email {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/email-1d43f1c7a681ba7d83e6.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-email_white {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/email_white-2ca45fcc6c776fa18072.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-expand_button {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/expand_button-d2bfc1d88f5cd7cb5f64.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-headline_video {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/headline_video-b72e25cbddd691f28801.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-hotline {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/hotline-11a8847db55dc027127c.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-hotline_white {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/hotline_white-f84d62fc131695dea603.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-learning_text {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/learning_text-460264bd3364c231ec4c.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-lightbulb {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/lightbulb-3b4568117331775f93a9.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-lock {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/lock-5ed425d37bdaae439194.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-more_button {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/more_button-3c2990a8d1b2c4d29004.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-more_button_open {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/more_button_open-d2bfc1d88f5cd7cb5f64.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-pause {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/pause-1a53e017c90d03df22e2.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-play {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/play-d6b7494751883e3e6300.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-test {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/test-eabc43ecbf25bbd67f0b.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-tooltip_n {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/tooltip_n-186691ced435d0107c86.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-upload {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/upload-60d8aef7c11dae2c2674.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-videohint {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/videohint-57a717ef8de9e8b4dcad.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-watched_active {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/watched_active-e741ab65cb14ba1e289a.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-worksheets_icon {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/worksheets_icon-56a246a7332787b933a4.svg) center center no-repeat;
  display: inline-block;
}

.sprites-layouts-download {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/download-63376d8e37249b83b338.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-download.on-touch-hover, .on-touch-hover .sprites-layouts-download {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/download_hover-690ac2ad92935f785e52.svg) center center no-repeat;
}

.sprites-layouts-likes {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/likes-5cbaf49e53a2ada22336.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-likes.on-touch-hover, .on-touch-hover .sprites-layouts-likes {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/likes_hover-492522c3d4756ddd5801.svg) center center no-repeat;
}

.sprites-layouts-link_arrow {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/link_arrow-c2428bb50d38a7aec844.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-link_arrow.on-touch-hover, .on-touch-hover .sprites-layouts-link_arrow {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/link_arrow_hover-ba3924139a6d41d76f4d.svg) center center no-repeat;
}

.sprites-layouts-mail {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/mail-60e9fbc98b40fca88c50.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-mail.on-touch-hover, .on-touch-hover .sprites-layouts-mail {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/mail_hover-8187bc2af0559e93280a.svg) center center no-repeat;
}

.sprites-layouts-next {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/next-f0941e847c757e96e48b.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-next.on-touch-hover, .on-touch-hover .sprites-layouts-next {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/next_hover-479b802fd36f8c635ac9.svg) center center no-repeat;
}

.sprites-layouts-orbit_arrow_next {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/orbit_arrow_next-b87c8df9495cf9370276.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-orbit_arrow_next.on-touch-hover, .on-touch-hover .sprites-layouts-orbit_arrow_next {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/orbit_arrow_next_hover-88f1154330ebf5806279.svg) center center no-repeat;
}

.sprites-layouts-orbit_arrow_prev {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/orbit_arrow_prev-f92447fbc8577443806e.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-orbit_arrow_prev.on-touch-hover, .on-touch-hover .sprites-layouts-orbit_arrow_prev {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/orbit_arrow_prev_hover-6ef3beeb6b24f9672e02.svg) center center no-repeat;
}

.sprites-layouts-prev {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/prev-a6061de3cdc92bcfa362.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-prev.on-touch-hover, .on-touch-hover .sprites-layouts-prev {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/prev_hover-39979bff95a1088ad752.svg) center center no-repeat;
}

.sprites-layouts-print {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/print-303a4fe5578ea1514416.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-print.on-touch-hover, .on-touch-hover .sprites-layouts-print {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/print_hover-da072e3ec91a4ce56e58.svg) center center no-repeat;
}

.sprites-layouts-question_icon {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/question_icon-27c176f2754b2401efe1.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-question_icon.on-touch-hover, .on-touch-hover .sprites-layouts-question_icon {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/question_icon_hover-1770e525b93d9e674e80.svg) center center no-repeat;
}

.sprites-layouts-test_icon {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/test_icon-75ed2600b900cea67c1f.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-test_icon.on-touch-hover, .on-touch-hover .sprites-layouts-test_icon {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/test_icon_hover-a7a79423cf5b733427f9.svg) center center no-repeat;
}

.sprites-layouts-view_list_open {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/view_list_open-fdaaf5ed50c1da01b97b.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-view_list_open.on-touch-hover, .on-touch-hover .sprites-layouts-view_list_open {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/view_list_open_hover-cff6e1d63e4ccc799522.svg) center center no-repeat;
}

.sprites-layouts-view_list {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/view_list-fe95c432ec5cae24d1d5.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-view_list.on-touch-hover, .on-touch-hover .sprites-layouts-view_list {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/view_list_hover-a99d2eb7babf28dcb571.svg) center center no-repeat;
}

.sprites-layouts-watched {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/watched-d0689f721771f3619983.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-watched.on-touch-hover, .on-touch-hover .sprites-layouts-watched {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/watched_hover-bace4d54ca5bb789024b.svg) center center no-repeat;
}

.sprites-layouts-worksheet {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/worksheet-739cb33ac2edde88b163.svg) center center no-repeat;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-worksheet.on-touch-hover, .on-touch-hover .sprites-layouts-worksheet {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/worksheet_hover-df96b7a8ab1a18710533.svg) center center no-repeat;
}

.sprites-layouts-features_videos {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/features/videos-eabcb0b51254ac02b615.svg) center center no-repeat;
  display: inline-block;
  width: 64px;
  height: 64px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-features_videos.on-touch-hover, .on-touch-hover .sprites-layouts-features_videos {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/features/videos_hover-42867673d306d53c231d.svg) center center no-repeat;
}

.sprites-layouts-features_tests {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/features/tests-2a052967ae470a205112.svg) center center no-repeat;
  display: inline-block;
  width: 64px;
  height: 64px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-features_tests.on-touch-hover, .on-touch-hover .sprites-layouts-features_tests {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/features/tests_hover-142e4237c257d4ae5a42.svg) center center no-repeat;
}

.sprites-layouts-features_chat {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/features/chat-56e7833e5bbbdf040ef9.svg) center center no-repeat;
  display: inline-block;
  width: 64px;
  height: 64px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-features_chat.on-touch-hover, .on-touch-hover .sprites-layouts-features_chat {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/features/chat_hover-2866b73b6e65858f2e76.svg) center center no-repeat;
}

.sprites-layouts-features_worksheets {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/features/worksheets-5a4f84f6dd2cf2940b80.svg) center center no-repeat;
  display: inline-block;
  width: 64px;
  height: 64px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.sprites-layouts-features_worksheets.on-touch-hover, .on-touch-hover .sprites-layouts-features_worksheets {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/features/worksheets_hover-382f9f6b8440400fb0b1.svg) center center no-repeat;
}

.sprites-layouts-arrow_down, .sprites-layouts-arrow_up, .sprites-layouts-collapse_button, .sprites-layouts-down_pointing_bracket, .sprites-layouts-expand_button, .sprites-layouts-more_button_open {
  width: 12px;
  height: 7px;
}
.sprites-layouts-arrow_down_light {
  width: 14px;
  height: 8px;
}
.sprites-layouts-arrow_right {
  width: 7px;
  height: 11px;
}
.sprites-layouts-dropdown, .sprites-layouts-dropdown_green {
  width: 8px;
  height: 6px;
}
.sprites-layouts-headline_video {
  width: 53px;
  height: 36px;
}
.sprites-layouts-hotline, .sprites-layouts-hotline_white, .sprites-layouts-email {
  width: 28px;
  height: 28px;
}
.sprites-layouts-lightbulb {
  width: 48px;
  height: 48px;
}
.sprites-layouts-lock {
  width: 10px;
  height: 14px;
}
.sprites-layouts-learning_text, .sprites-layouts-more_button {
  width: 7px;
  height: 12px;
}
.sprites-layouts-pause, .sprites-layouts-play, .sprites-layouts-test {
  width: 48px;
  height: 48px;
}
.sprites-layouts-tooltip_n {
  width: 12px;
  height: 20px;
}
.sprites-layouts-tooltip_w {
  width: 20px;
  height: 12px;
}
.sprites-layouts-upload {
  width: 10px;
  height: 11px;
}
.sprites-layouts-videohint {
  width: 20px;
  height: 13px;
}
.sprites-layouts-watched_active {
  width: 15px;
  height: 11px;
}
.sprites-layouts-worksheets_icon {
  width: 46px;
  height: 56px;
}
.sprites-layouts-download, .sprites-layouts-print {
  width: 14px;
  height: 16px;
}
.sprites-layouts-likes {
  width: 13px;
  height: 11px;
}
.sprites-layouts-link_arrow {
  width: 4px;
  height: 7px;
}
.sprites-layouts-mail {
  width: 18px;
  height: 16px;
}
.sprites-layouts-next, .sprites-layouts-prev {
  width: 22px;
  height: 42px;
}
.sprites-layouts-orbit_arrow_next, .sprites-layouts-orbit_arrow_prev {
  width: 33px;
  height: 33px;
}
.sprites-layouts-question_icon, .sprites-layouts-test_icon {
  width: 15px;
  height: 14px;
}
.sprites-layouts-stop_sign {
  background-size: contain;
}
.sprites-layouts-view_list_open {
  width: 11px;
  height: 7px;
}
.sprites-layouts-view_list {
  width: 7px;
  height: 11px;
}
.sprites-layouts-watched {
  width: 15px;
  height: 11px;
}
.sprites-layouts-worksheet {
  width: 14px;
  height: 16px;
}

.sprites-subjects-16 {
  height: 16px;
  width: 16px;
  display: inline-block;
  vertical-align: middle;
}
.sprites-subjects-16--biologie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/biologie-69ad6ef4ce2d316a0013.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--chemie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/chemie-2dbc0f1d136814ef5e3f.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--deutsch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/deutsch-15cefb7e067d484ef054.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--geographie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/geographie-9eaab7f734c1463a7448.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--geschichte {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/geschichte-22ea46bc0e7267a74494.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--lern-und-arbeitstechniken {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/lern-und-arbeitstechniken-2e595c1b89047cff08c0.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--kreativitaet-und-bewegung {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/kreativitaet-und-bewegung-4ab3cae0aed495e3f57c.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--mathematik, .sprites-subjects-16--maths, .sprites-subjects-16--math {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/mathematik-1239cd8763870a2bb148.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--musik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/musik-487b087d9179592253f5.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--physik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/physik-2b754047259609f8ab03.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--sachunterricht, .sprites-subjects-16--science, .sprites-subjects-16--mensch-und-umwelt {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/sachunterricht-3e2bc2a60e763927660f.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--englisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/englisch-c57d2bba0deb44db156c.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--franzoesisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/franzoesisch-9186cb803297806ab114.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--latein {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/latein-d4a185b9fac4598f3518.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--spanisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/spanisch-8881245e375c11bb57fd.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--deutsch-als-zweitsprache {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/deutsch-als-zweitsprache-07e6cc3b06dd5b53aaba.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--english-language-arts, .sprites-subjects-16--english {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/english-language-arts-fb38962a73f7f9b08f48.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-16--social-studies, .sprites-subjects-16--pshe {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/16/social-studies-363ed8c415a434a0c762.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-24 {
  height: 24px;
  width: 24px;
  display: inline-block;
  vertical-align: middle;
}
.sprites-subjects-24--biologie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/biologie-f95d71133c37de7dab55.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--chemie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/chemie-cc856a4028ef75f94e68.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--deutsch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/deutsch-1940cedfbfc7625464ab.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--geographie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/geographie-63a1bde3b6a159ca5d76.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--geschichte {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/geschichte-9b6f2b2e8ef092df5c15.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--lern-und-arbeitstechniken {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/lern-und-arbeitstechniken-791b349259aaa583dcbe.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--kreativitaet-und-bewegung {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/kreativitaet-und-bewegung-9b9cb58247c4276d1ae8.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--mathematik, .sprites-subjects-24--maths, .sprites-subjects-24--math {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/mathematik-fc31334fc8ca64e66a5b.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--musik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/musik-49488ae2d14abdb6de4d.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--physik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/physik-38ba320ab63701ce0c51.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--sachunterricht, .sprites-subjects-24--science, .sprites-subjects-24--mensch-und-umwelt {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/sachunterricht-6771f893da91831ac66a.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--englisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/englisch-b88afc44e520a55b34ae.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--franzoesisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/franzoesisch-fc1d7696d341b896c458.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--latein {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/latein-d7f58bf8f576b90f5945.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--spanisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/spanisch-99e826d871e32c47cf40.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--deutsch-als-zweitsprache {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/deutsch-als-zweitsprache-54bcf877cbb0d34ba416.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--english-language-arts, .sprites-subjects-24--english {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/english-language-arts-7ca31caaec2ab4c8eb95.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-24--social-studies, .sprites-subjects-24--pshe {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/24/social-studies-4c1251e4d9a7f6b80b82.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-32 {
  height: 32px;
  width: 32px;
  display: inline-block;
  vertical-align: middle;
}
.sprites-subjects-32--biologie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/biologie-fc28d6531acad82196fe.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--chemie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/chemie-fffb30cbde1e1db14277.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--deutsch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/deutsch-0ce02f33954c7e941a6f.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--geographie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/geographie-fb753ee81797aa94f13f.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--geschichte {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/geschichte-7e7e89b157fc89371161.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--lern-und-arbeitstechniken {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/lern-und-arbeitstechniken-d80e2bcb034991dd1f94.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--kreativitaet-und-bewegung {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/kreativitaet-und-bewegung-fbe07549b3418f805a0e.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--mathematik, .sprites-subjects-32--maths, .sprites-subjects-32--math {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/mathematik-032d1d93426d05bc06d0.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--musik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/musik-8b25e659ccea46fc697b.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--physik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/physik-593d2ae8a168828c9785.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--sachunterricht, .sprites-subjects-32--science, .sprites-subjects-32--mensch-und-umwelt {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/sachunterricht-131695cff8e9fae20145.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--englisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/englisch-97b815a7004a9bc68ebb.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--franzoesisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/franzoesisch-e1f2a04a17bd155b8dc8.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--latein {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/latein-e64090d3d043bc293f69.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--spanisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/spanisch-f8cd9f4eca1943a9cf3c.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--deutsch-als-zweitsprache {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/deutsch-als-zweitsprache-070e748e0d89e6ba7b21.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--english-language-arts, .sprites-subjects-32--english {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/english-language-arts-4d16412722ed354c295f.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-32--social-studies, .sprites-subjects-32--pshe {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/32/social-studies-15ce72aae5e513eac177.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-48 {
  height: 48px;
  width: 48px;
  display: inline-block;
  vertical-align: middle;
}
.sprites-subjects-48--biologie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/biologie-cdea7294bcf871ae540e.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--chemie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/chemie-da22ddb2c9c38627a525.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--deutsch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/deutsch-6dc5ec741580bdd022df.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--geographie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/geographie-ab04a6bcb7138dd8b40b.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--geschichte {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/geschichte-dbf5b0cf1f7401411b34.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--lern-und-arbeitstechniken {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/lern-und-arbeitstechniken-f677b6a005e0ef52f30c.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--kreativitaet-und-bewegung {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/kreativitaet-und-bewegung-96027f125ce7893368cf.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--mathematik, .sprites-subjects-48--maths, .sprites-subjects-48--math {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/mathematik-df417f9cfbadf33b9316.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--musik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/musik-5de04941a6c9eac14418.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--physik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/physik-7a0312abf755a44eb61f.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--sachunterricht, .sprites-subjects-48--science, .sprites-subjects-48--mensch-und-umwelt {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/sachunterricht-607f347a8a7b8001a9a2.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--englisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/englisch-7cb9202b5de7c3809588.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--franzoesisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/franzoesisch-18cfbd77bf6cb8bd4a5b.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--latein {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/latein-a0fa4eb9f0ccda30872d.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--spanisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/spanisch-e5360a68f2a16d4d0381.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--deutsch-als-zweitsprache {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/deutsch-als-zweitsprache-3dba7aecd7c7579d8915.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--english-language-arts, .sprites-subjects-48--english {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/english-language-arts-cdcf9f2a200c90a35383.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-48--social-studies, .sprites-subjects-48--pshe {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/48/social-studies-ab3455af6fdab75437d9.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-64 {
  height: 64px;
  width: 64px;
  display: inline-block;
  vertical-align: middle;
}
.sprites-subjects-64--biologie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/biologie-b56e89e98985e44a9d92.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--chemie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/chemie-b411fd756d5067ed2029.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--deutsch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/deutsch-93e9c92a9546f6640e49.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--geographie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/geographie-aa064c1ea07ba37224ab.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--geschichte {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/geschichte-051a3018ea8e47ca4b6c.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--lern-und-arbeitstechniken {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/lern-und-arbeitstechniken-aa2777acd02617caf423.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--kreativitaet-und-bewegung {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/kreativitaet-und-bewegung-89655024cc11a82d80c2.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--mathematik, .sprites-subjects-64--maths, .sprites-subjects-64--math {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/mathematik-f3b711c33779f5778796.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--musik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/musik-c9aa0d5eab99968f1663.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--physik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/physik-153aa6b701ab577f76fc.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--sachunterricht, .sprites-subjects-64--science, .sprites-subjects-64--mensch-und-umwelt {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/sachunterricht-1338f7d92bad5a63c0d5.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--englisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/englisch-441ddd0e734276cf20d9.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--franzoesisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/franzoesisch-a2c8c32b2af477380b17.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--latein {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/latein-8ca743fea4b786c56371.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--spanisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/spanisch-2394164e50dfcb3eedf1.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--deutsch-als-zweitsprache {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/deutsch-als-zweitsprache-fd63f01278166cd2bfe5.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--english-language-arts, .sprites-subjects-64--english {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/english-language-arts-192bdea54f3f3e8a2a27.svg) center center no-repeat;
  background-size: contain;
}
.sprites-subjects-64--social-studies, .sprites-subjects-64--pshe {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64/social-studies-5f281884c2b3541b2f07.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-biologie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/biologie-e18fd0fc83e08fab3a03.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-chemie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/chemie-b94298c49a81e5aca9bf.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-deutsch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/deutsch-8fc9e320e3ae743d0dc5.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-geographie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/geographie-b81669b892e1a3473a96.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-geschichte {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/geschichte-cf84323d159415b3ce49.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-lern-und-arbeitstechniken {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/lern-und-arbeitstechniken-c77ca9a04a0f6be8d504.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-kreativitaet-und-bewegung {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/kreativitaet-und-bewegung-5d6ee04700e399368a7b.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-mathematik, .sprites-subjects-maths, .sprites-subjects-math {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/mathematik-41f7f0bba2a5de5bf330.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-musik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/musik-6ef55d8e0190d28ecf59.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-physik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/physik-c34223b8e51376791c99.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-sachunterricht, .sprites-subjects-science, .sprites-subjects-mensch-und-umwelt {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/sachunterricht-876e8bf5076fbe538ff4.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-englisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/englisch-737c5b74fda8aa149793.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-franzoesisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/franzoesisch-2cf64b3532d44c85a7cb.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-latein {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/latein-e30de181c65e157e7157.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-spanisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/spanisch-82a875090b31f4019ea2.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-deutsch-als-zweitsprache {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/deutsch-als-zweitsprache-d96819f5f2826cc091de.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-english-language-arts, .sprites-subjects-english {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/english-language-arts-2f6f3a5b3c4c18ddd6bd.svg) center center no-repeat;
  background-size: contain;
}

.sprites-subjects-social-studies, .sprites-subjects-pshe {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/social-studies-63c83ba633e7d76698fa.svg) center center no-repeat;
  background-size: contain;
}

.sprites-videos-check {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/videos/check-da8c405141250d5eae1d.svg) center center no-repeat;
  height: 17px;
  width: 17px;
}

.sprites-videos-likes_active {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/videos/likes_active-da051bebc3c265d4fd91.svg) center center no-repeat;
  height: 17px;
  width: 17px;
}

.sprites-videos-likes {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/videos/likes-635a4920bcdf5f97b81f.svg) center center no-repeat;
  height: 17px;
  width: 17px;
}
.sprites-videos-likes:hover, .hovers-sprite:hover .sprites-videos-likes {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/videos/likes_hover-310f05116ce1f3042ea6.svg) center center no-repeat;
}

.sprites-videos-avatar {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/videos/avatar-9ccfbf4df88597c39cba.svg) center center no-repeat;
  height: 45px;
  width: 45px;
}

.sprites-videos-redaktion {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/videos/redaktion-b6440933d1aa0245a63a.svg) center center no-repeat;
  height: 46px;
  width: 46px;
}

.sprites-videos-team {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/videos/team-dc937420c44f9288edc3.svg) center center no-repeat;
  height: 46px;
  width: 46px;
}

.sprites-videos-tutor {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/videos/tutor-e9295df3c168ba916375.svg) center center no-repeat;
  height: 46px;
  width: 46px;
}

.sprites-videos-url {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/videos/url-0ef04eafc40002644dcd.svg) center center no-repeat;
  height: 52px;
  width: 52px;
}

.sprites-feature-types--exercises {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/exercises-adc4f42c65f22eff8f5d.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--help-24h {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/help-24h-203da4da11b78e44f941.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--topics {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/topics-4c1f5c2da5691f591a5c.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--videos {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/videos-21d642dcf8892e823b3a.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--videos_and_learning_texts {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/videos_and_learning_texts-70346fdc7068d4986078.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--learning_texts {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/learning_texts-1ef6fce2f239397e357e.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--worksheets {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/worksheets-5d6a877d5c1a296a6aeb.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--exercises_rounded {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/exercises_rounded-c8ada11aaccc16f671c1.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--chat {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/chat-06dec15c9f979001fd65.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--tests {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/tests-a5982b0210689c7f05e4.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--sofaheld {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/sofaheld-b12efa917a2453047411.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--class_tests {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/class_tests-e8054b9c05a76e51669e.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--vocabulary_trainer {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/vocabulary_trainer-18ba8d09a97e6cb49dc2.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-feature-types--bookr {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/layouts/feature_types/bookr-35d00bcc3e31f623130f.svg) center center no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain;
}

.sprites-user-role {
  display: inline-block;
  width: 46px;
  height: 46px;
}
.sprites-user-role--editorial {
  background: rgba(1, 1, 1, 0) url("/assets/application/users/editorial.svg") center center no-repeat;
}
.sprites-user-role--editorial_en {
  background: rgba(1, 1, 1, 0) url("/assets/application/users/editorial_en.svg") center center no-repeat;
}
.sprites-user-role--team {
  background: rgba(1, 1, 1, 0) url("/assets/application/users/team.svg") center center no-repeat;
}
.sprites-user-role--tutor {
  background: rgba(1, 1, 1, 0) url("/assets/application/users/tutor.svg") center center no-repeat;
}

.sprites-nav--chat {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/nav/chat.svg") center center no-repeat;
  display: inline-block;
  width: 129px;
  height: 109px;
  cursor: pointer;
}
.sprites-nav--chat:hover, .hovers-sprite:hover .sprites-nav--chat {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/nav/chat_hover.svg") center center no-repeat;
}

.sprites-nav--tests {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/nav/tests.svg") center center no-repeat;
  display: inline-block;
  width: 129px;
  height: 109px;
  cursor: pointer;
}
.sprites-nav--tests:hover, .hovers-sprite:hover .sprites-nav--tests {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/nav/tests_hover.svg") center center no-repeat;
}

.sprites-nav--videos {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/nav/videos.svg") center center no-repeat;
  display: inline-block;
  width: 129px;
  height: 109px;
  cursor: pointer;
}
.sprites-nav--videos:hover, .hovers-sprite:hover .sprites-nav--videos {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/nav/videos_hover.svg") center center no-repeat;
}

.sprites-nav--sofaheld {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/nav/sofaheld.svg") center center no-repeat;
  display: inline-block;
  width: 129px;
  height: 109px;
  cursor: pointer;
}
.sprites-nav--sofaheld:hover, .hovers-sprite:hover .sprites-nav--sofaheld {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/nav/sofaheld_hover.svg") center center no-repeat;
}

.sprites-nav--worksheets {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/nav/worksheets.svg") center center no-repeat;
  display: inline-block;
  width: 129px;
  height: 109px;
  cursor: pointer;
}
.sprites-nav--worksheets:hover, .hovers-sprite:hover .sprites-nav--worksheets {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/nav/worksheets_hover.svg") center center no-repeat;
}

.sprites-account-cross {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/account/cross-56c4c3bb929851035d36.svg) center center no-repeat;
  height: 10px;
  width: 10px;
}

.sprites-account-edit {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/account/edit-0c8afc56e2d8438a53bd.svg) center center no-repeat;
  height: 11px;
  width: 11px;
}
.sprites-account-edit:hover, .hovers-sprite:hover .sprites-account-edit {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/account/edit_hover-6981e5eee8823acdcbe2.svg) center center no-repeat;
}

.sprites-account-close {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/account/close-aac12dc0485c28cdaf25.svg) center center no-repeat;
  height: 16px;
  width: 16px;
}

.sprites-account-info_small {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/account/info_small-c18a8bfaeba2b14364a8.svg) center center no-repeat;
  height: 16px;
  width: 16px;
}
.sprites-account-info_small:hover, .hovers-sprite:hover .sprites-account-info_small {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/account/info_small_hover-05cef431f1a18a719b12.svg) center center no-repeat;
}

.sprites-account-add {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/account/add-e23f3854c1367f8aa62e.svg) center center no-repeat;
  height: 20px;
  width: 20px;
}

.sprites-account-info {
  display: inline-block;
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/account/info-15fa73ef65fd1c810157.svg) center center no-repeat;
  height: 24px;
  width: 24px;
}
.sprites-account-info:hover, .hovers-sprite:hover .sprites-account-info {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/account/info_hover-66a1199feed5f0035c4a.svg) center center no-repeat;
}

.sprites-account-like {
  background: rgba(1, 1, 1, 0) url("/assets/application/account/like.svg") center center no-repeat;
  display: inline-block;
}

.sprites-account-check {
  background: rgba(1, 1, 1, 0) url("/assets/application/account/check.svg") center center no-repeat;
  display: inline-block;
}

.sprites-account-completed {
  background: rgba(1, 1, 1, 0) url("/assets/application/account/completed.svg") center center no-repeat;
  display: inline-block;
}

.sprites-account-like {
  width: 17px;
  height: 16px;
}
.sprites-account-check, .sprites-account-completed {
  width: 13px;
  height: 10px;
}

.banner-feedback {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  position: relative;
  padding: 20px 20px 20px 55px;
}
.banner-feedback--approved {
  background-color: #d6eb99;
}
.banner-feedback--approved .banner-feedback__icon {
  background: url("/assets/application/layouts/flash_messages/notice.svg") no-repeat center center;
}
.banner-feedback--error {
  background-color: #f4cf99;
}
.banner-feedback--warning {
  background-color: #fdeb99;
}
.banner-feedback--warning .banner-feedback__icon {
  background: url("/assets/application/layouts/flash_messages/warning.svg") no-repeat center center;
}
.banner-feedback--flash-sticky {
  padding: 15px 0;
}
.banner-feedback--flash-sticky .grid-container {
  position: relative;
}
.banner-feedback--flash-sticky .banner-feedback__headline {
  padding-left: 36px;
  font-size: 14px;
}
.banner-feedback--flash-sticky .banner-feedback__icon {
  top: 0;
  left: 16px;
}
.banner-feedback__icon {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 24px;
  height: 24px;
  background-size: cover !important;
}
.banner-feedback__headline {
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
}
.banner-feedback__text {
  font-size: 14px;
  line-height: 22px;
}
.banner-feedback__link {
  font-size: 14px;
}
.banner-feedback__close-button {
  position: absolute;
  top: 0;
  right: 12px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .banner-feedback--flash-sticky .banner-feedback__headline {
    padding-left: 34px;
  }
  body.is-responsive .banner-feedback--flash-sticky .banner-feedback__icon {
    left: 32px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .banner-feedback__icon {
    left: 16px;
  }
  body.is-responsive .banner-feedback__close-button {
    display: none;
  }
}

/* #COMPONENTS */
.autocomplete-suggestions {
  width: 300px;
  margin-top: 3px;
  float: none;
  border-radius: 4px;
  background-color: #fff;
  color: #666;
  font-size: 13px;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  overflow: auto;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .autocomplete-suggestions {
    width: 240px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .autocomplete-suggestions {
    left: 0;
    width: 100%;
    margin-top: 8px;
    border-radius: 0;
  }
}

.autocomplete-selected {
  background-color: #9c0;
  color: #fff;
}
.autocomplete-selected.autocomplete-suggestion::before {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/search_suggestion_hover.svg") center center no-repeat;
}
.autocomplete-selected.autocomplete-suggestion::after {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/view_list_active.svg") center center no-repeat;
}
.autocomplete-selected.autocomplete-suggestion strong {
  color: #fff;
}

.autocomplete-suggestion {
  padding: 13px 10px;
}
.autocomplete-suggestion:not(:first-child) {
  border-top: 1px solid #e6e8e5;
}
.autocomplete-suggestion:hover {
  background-color: #9c0;
  color: #fff;
}
.autocomplete-suggestion:hover::before {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/search_suggestion_hover.svg") center center no-repeat;
}
.autocomplete-suggestion:hover::after {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/view_list_active.svg") center center no-repeat;
}
.autocomplete-suggestion:hover strong {
  color: #fff;
}
.autocomplete-suggestion::before {
  position: relative;
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/search_suggestion.svg") center center no-repeat;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  margin-bottom: -5px;
  content: "";
}
.autocomplete-suggestion::after {
  position: absolute;
  right: 10px;
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/view_list.svg") center center no-repeat;
  display: inline-block;
  width: 16px;
  height: 11px;
  content: "";
}
.autocomplete-suggestion strong {
  color: #333;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .autocomplete-suggestion {
    padding: 13px 20px;
  }
  body.is-responsive .autocomplete-suggestion::after {
    right: 20px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .autocomplete-suggestion {
    padding: 18px 20px;
  }
}

.conversion-benefits::after {
  content: "";
  display: block;
  clear: both;
}
.conversion-benefits__list {
  display: inline-block;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.conversion-benefits__item {
  margin: 0 5px;
  padding-bottom: 0 !important;
}
.conversion-benefits__button {
  display: inline-block;
  width: 160px;
}

.browser-not-supported {
  padding: 64px;
  background-color: #fff;
}
.browser-not-supported__image {
  background: rgba(1, 1, 1, 0) url("/assets/application/characters/kapu.svg") center center no-repeat;
  width: 146px;
  height: 234px;
}
.browser-not-supported__icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  vertical-align: bottom;
}
.browser-not-supported__icon--chrome {
  background: rgba(1, 1, 1, 0) url("/assets/application/shared/browsers/chrome.svg") center center no-repeat;
}
.browser-not-supported__icon--firefox {
  background: rgba(1, 1, 1, 0) url("/assets/application/shared/browsers/firefox.svg") center center no-repeat;
}
.browser-not-supported__icon--edge {
  background: rgba(1, 1, 1, 0) url("/assets/application/shared/browsers/edge.svg") center center no-repeat;
}
.browser-not-supported__icon--android {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/shared/browsers/android-6c8e1bbf8209fd21bb94.svg) center center no-repeat;
}
.browser-not-supported__icon--ios {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/shared/browsers/ios-b76d9005362e2c490b41.svg) center center no-repeat;
}
.browser-not-supported__icon--ios, .browser-not-supported__icon--android {
  width: 48px;
  height: 48px;
  vertical-align: middle;
}
.browser-not-supported__icon, .browser-not-supported span {
  display: inline-block;
}
@media only screen and (max-width: 639px) {
  .browser-not-supported {
    padding: 32px;
  }
  .browser-not-supported__image {
    margin-top: 0;
    margin-bottom: 16px;
  }
  .browser-not-supported h2 {
    font-size: 28px;
  }
}

.shared-nav-feature-icons {
  display: table;
  padding-bottom: 25px;
  margin: 0 auto;
}
.shared-nav-feature-icons > li {
  display: table-cell;
}
.shared-nav-feature-icons .is-active-feature > a {
  color: #333;
}
.shared-nav-feature-icons__link {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  display: block;
  width: 140px;
  margin-top: 15px;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  line-height: 140%;
  text-align: center;
}
.shared-nav-feature-icons__link:focus {
  color: #666;
}
.shared-nav-feature-icons__link:hover {
  color: #333;
}
.shared-nav-feature-icons__link > i {
  display: block;
  margin: 0 auto;
}

.nav-features {
  padding-bottom: 64px;
  border-top: 1px solid #e6e8e5;
  border-bottom: 1px solid #e6e8e5;
  text-align: center;
}
.nav-features__headline {
  margin-top: 64px;
  margin-bottom: 32px;
}
.nav-features__list {
  display: inline-block;
  width: auto;
  overflow: hidden;
}
.nav-features__item {
  display: inline-block;
  width: 130px;
  cursor: pointer;
  vertical-align: top;
}
.nav-features__link:hover .h5 {
  color: #333;
}
.nav-features__icon {
  width: 97.5px;
  height: 82.5px;
  margin-bottom: 8px;
  background-size: cover !important;
}
.nav-features .info-benefits-list > li {
  padding-bottom: 0;
}
.nav-features .h5 {
  display: block;
  color: #666;
  font-weight: bold;
}
.nav-features .conversion-benefits {
  margin: 40px 10px 10px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .nav-features {
    padding-bottom: 32px;
  }
  body.is-responsive .nav-features__headline {
    margin-top: 32px;
    margin-bottom: 16px;
  }
  body.is-responsive .nav-features__item {
    width: 121px;
  }
  body.is-responsive .nav-features .conversion-benefits__button {
    display: block;
    width: 140px;
    margin: 40px auto 0;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .nav-features.has-odd-items .nav-features__item:first-of-type {
    width: 100%;
  }
  body.is-responsive .nav-features__item {
    width: 40%;
    margin-top: 20px;
  }
  body.is-responsive .nav-features .conversion-benefits__list {
    display: none;
  }
}

.page-flash-messages.is-notice {
  background-color: #d6eb99;
}
.page-flash-messages.is-warning {
  background-color: #fdeb99;
}
.page-flash-messages.is-error {
  background-color: #fce3e3;
}
.page-flash-messages .flash-message {
  padding-left: 34px;
}
.page-flash-messages .flash-message::before {
  left: 0;
}
.page-flash-messages .flash-message::before .flash-message__close {
  right: 0;
}

.flash-message {
  position: relative;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  padding: 15px 100px 15px 44px;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}
.flash-message::before {
  position: absolute;
  top: 13px;
  left: 10px;
  width: 24px;
  height: 24px;
  background-size: cover !important;
  content: "";
}
.flash-message.alert {
  text-align: left;
}
.flash-message--notice {
  background-color: #d6eb99;
}
.flash-message--notice::before {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/flash_messages/notice.svg") center center no-repeat;
}
.flash-message--warning, .flash-message--sticky-warning {
  background-color: #fdeb99;
}
.flash-message--warning::before, .flash-message--sticky-warning::before {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/flash_messages/warning.svg") center center no-repeat;
}
.flash-message--error {
  background-color: #fce3e3;
}
.flash-message--error::before {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/flash_messages/error.svg") center center no-repeat;
}
.flash-message__close {
  position: absolute;
  top: 13px;
  right: 0;
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/flash_messages/close.svg") center center no-repeat;
  display: block;
  width: 24px;
  height: 24px;
  text-indent: -99px;
  cursor: pointer;
  overflow: hidden;
}
.flash-message__close:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/flash_messages/close_hover.svg") center center no-repeat;
}
body.is-responsive .flash-message {
  padding-right: 0;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .flash-message__close {
    display: none;
  }
}

.homework-chat {
  position: fixed;
  right: 64px;
  bottom: 32px;
  cursor: pointer;
  z-index: 9998;
}
.homework-chat__slide {
  width: 256px;
  border-left: 8px solid transparent;
  background: linear-gradient(#99cfe1, #99cfe1) padding-box, linear-gradient(#0088b5, #004cb5);
  text-align: left;
  white-space: nowrap;
  z-index: 2;
}
.homework-chat__icon {
  position: absolute;
  right: -32px;
  bottom: 0;
  padding: 16px;
  border-radius: 50%;
  color: #fff;
}
.homework-chat__flyout {
  width: 224px;
  cursor: auto;
}
.homework-chat__cookie-flyout {
  width: 306px;
}
.homework-chat__cookie-flyout-text {
  margin-bottom: 16px;
  color: #999;
}
.homework-chat__cookie-flyout-image {
  position: absolute;
  bottom: 290px;
  left: 50%;
  width: 150px;
  height: 88px;
  transform: translateX(-50%);
  background-image: url("/assets/application/characters/chat_character.svg");
  background-repeat: no-repeat;
  z-index: 2;
}
.homework-chat__close {
  top: -30px;
  right: 0;
}
.homework-chat__flyout-header {
  background-color: #99cfe1;
}
.homework-chat__flyout-header.card-section {
  padding-top: 24px;
  padding-bottom: 24px;
}
.homework-chat__flyout-title {
  font-size: 16px;
}
.homework-chat__subject-list-container {
  padding: 0 16px 16px;
}
.homework-chat__notification {
  display: none;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .homework-chat {
    right: 40px;
    bottom: 16px;
    z-index: 9999;
  }
  body.is-responsive .homework-chat.is-active {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
  }
  body.is-responsive .homework-chat__slide {
    width: 0;
  }
  body.is-responsive .homework-chat__flyout, body.is-responsive .homework-chat__flyout-card, body.is-responsive .homework-chat__cookie-flyout {
    height: 100%;
  }
  body.is-responsive .homework-chat__flyout, body.is-responsive .homework-chat__cookie-flyout {
    width: 100%;
  }
  body.is-responsive .homework-chat__flyout-card {
    border-radius: 0;
  }
  body.is-responsive .homework-chat__close {
    top: 8px;
    right: 8px;
    z-index: 2;
  }
  body.is-responsive .homework-chat__notification {
    position: absolute;
    bottom: 40px;
    left: 16px;
    padding: 4px 8px;
    border-radius: 50%;
    background-color: #ff5c26;
    color: #fff;
    z-index: 2;
  }
  body.is-responsive .homework-chat .card-section {
    flex: 0 0 auto;
  }
}

.ps .ps__thumb-x,
.ps .ps__thumb-y {
  background-color: #9c0;
}
.ps .ps__rail-x:hover > .ps__thumb-x,
.ps .ps__rail-x:focus > .ps__thumb-x,
.ps .ps__rail-y:hover > .ps__thumb-y,
.ps .ps__rail-y:focus > .ps__thumb-y {
  background-color: #9c0;
}
.ps.scrollbar--visible {
  padding-right: 16px;
}
.ps.scrollbar--visible > .ps__rail-x,
.ps.scrollbar--visible > .ps__rail-y {
  opacity: 1;
}

.locale-popup {
  top: 177px !important;
  height: 550px;
}
.locale-popup__container {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: fit-content;
  transform: translate(-50%, -50%);
}
.locale-popup__headline {
  width: max-content;
  margin: 8px 0 32px;
  text-align: center;
}
.locale-popup__select {
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  text-align-last: start;
}
.locale-popup__select a {
  color: #333;
}
.locale-popup__select a:hover {
  text-decoration: underline;
}
.locale-popup__select:last-child {
  margin-bottom: 8px;
}
.locale-popup__select--flag img {
  width: 36px;
  height: auto;
}
.locale-popup__select--country {
  min-width: fit-content;
  margin-left: 16px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .locale-popup {
    top: 194px !important;
    height: 500px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .locale-popup {
    top: 60px !important;
  }
  body.is-responsive .locale-popup__select--country {
    margin: 8px 0 8px 16px;
  }
}

.popup-delete {
  text-align: center;
}
.popup-delete .medium {
  display: inline-block;
  min-width: 200px;
  margin-top: 40px;
}
.popup-delete .dark-gray {
  margin-right: 10px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .popup-delete .primary {
    margin-top: 8px;
  }
  body.is-responsive .popup-delete .dark-gray {
    margin-right: 0;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .popup-delete .medium {
    width: 260px;
    margin-right: auto;
    margin-left: auto;
  }
  body.is-responsive .popup-delete .dark-gray {
    order: 2;
    margin-top: 10px;
  }
  body.is-responsive .popup-delete__footer {
    display: flex;
    flex-direction: column;
  }
}

.teacher-box-popup__button {
  float: right;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .teacher-box-popup__button {
    display: block;
    margin-right: auto;
    margin-left: auto;
    float: none;
  }
}

.onboarding-source-popup {
  width: 100%;
  height: 80%;
}
.onboarding-source-popup iframe {
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .onboarding-source-popup {
    height: 72%;
  }
  body.is-responsive .onboarding-source-popup:lang(en) {
    height: 90%;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .onboarding-source-popup {
    width: 90%;
    height: 90%;
  }
}

.exit-intent {
  width: 540px;
  border-radius: 8px;
  background-color: #fff;
}
.exit-intent__header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: 365px;
  background-image: url("/assets/application/shared/exit_intent/purple_bg.svg");
  color: #fff;
  text-align: center;
}
.exit-intent__header::after {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 67px;
  height: 156px;
  transform: translate(-50%, -50%);
  background-image: url("/assets/application/shared/exit_intent/rocket.svg");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}
.exit-intent__header-text {
  position: relative;
  padding: 72px 32px 53px;
  overflow: hidden;
}
.exit-intent__header-text::before {
  position: absolute;
  bottom: -21px;
  left: 4px;
  width: 101%;
  height: 50px;
  transform: rotate(-8deg);
  background: #fff;
  content: "";
  z-index: 0;
}
.exit-intent__header-text::after {
  position: absolute;
  bottom: -21px;
  left: -6px;
  width: 101%;
  height: 50px;
  transform: rotate(8deg);
  background: #fff;
  content: "";
  z-index: 0;
}
.exit-intent__subheadline {
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
  padding: 0 61px;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  line-height: 28px;
  text-align: center;
}
.exit-intent__subheadline::before {
  position: absolute;
  top: 1px;
  left: 33px;
  width: 24px;
  height: 24px;
  background-image: url("/assets/application/arrows/arrow_circle_green.svg");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}
.exit-intent__headline-box {
  padding-top: 40px;
  padding-bottom: 40px;
}
.exit-intent__content {
  position: relative;
  padding: 20px;
  text-align: center;
}
.exit-intent__content p {
  margin: 8px 0 18px;
}
.exit-intent__content .button.large {
  display: inline-block;
  font-weight: normal;
}
.exit-intent__link {
  display: inline-block;
  margin-top: 10px;
}
.exit-intent__footer {
  padding: 0 32px 32px;
  text-align: center;
}

.mobile-exit-intent {
  color: #fff;
  overflow: hidden;
}
.mobile-exit-intent.reveal.small {
  height: 560px;
  padding: 0;
}
.mobile-exit-intent__header {
  height: 360px;
  padding: 32px;
  background: url("/assets/application/shared/exit_intent/purple_bg.svg") no-repeat center center;
}
.mobile-exit-intent__header-text {
  width: 320px;
}
.mobile-exit-intent__headline {
  font-size: 22px;
  line-height: 1.8;
  text-align: left;
}
.mobile-exit-intent__subheadline {
  color: #fff;
  font-weight: bold;
  line-height: 1.5;
}
.mobile-exit-intent__list {
  position: relative;
  padding-left: 32px;
}
.mobile-exit-intent__list::after {
  position: absolute;
  bottom: -20px;
  right: -140px;
  width: 161px;
  height: 230px;
  transform: rotate(20deg);
  background-image: url("/assets/application/shared/exit_intent/rocket.svg");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}
.mobile-exit-intent__list li:nth-child(4) {
  position: relative;
}
.mobile-exit-intent__list li:nth-child(4)::after {
  position: absolute;
  left: 156px;
  width: 50px;
  height: 24px;
  background-image: url("/assets/application/layouts/new.svg");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
}
.mobile-exit-intent__content {
  padding-top: 32px;
}
.mobile-exit-intent__link {
  padding: 20px 32px;
  font-size: 14px;
}
@media only screen and (max-width: 639px) {
  .mobile-exit-intent.reveal.small {
    height: 450px;
  }
  .mobile-exit-intent__header {
    height: 250px;
    padding: 16px;
  }
  .mobile-exit-intent__headline {
    width: 250px;
    font-size: 18px;
    line-height: 1.7;
  }
  .mobile-exit-intent__list {
    padding-left: 0;
  }
  .mobile-exit-intent__list::after {
    right: -30px;
    bottom: -30px;
    transform: scale(0.7) rotate(20deg);
  }
  .mobile-exit-intent__list li:nth-child(4)::after {
    left: 148px;
    z-index: 1;
  }
  .mobile-exit-intent__list i {
    margin-right: 8px;
  }
  .mobile-exit-intent__list p {
    margin: 12px 0;
  }
  .mobile-exit-intent__list li {
    font-size: 14px;
  }
  .mobile-exit-intent__content {
    height: 200px;
    padding-top: 16px;
  }
  .mobile-exit-intent__link {
    display: block;
    padding: 0 16px;
  }
}

.interest-exit-intent {
  width: 608px;
  border-radius: 8px;
  background-color: #f8f8f8;
}
.interest-exit-intent__header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: auto;
  padding: 32px 0;
  background-image: url("/assets/application/shared/exit_intent/background_green.svg");
  color: #fff;
}
.interest-exit-intent__content {
  padding: 32px 32px 16px;
  text-align: left;
}
.interest-exit-intent .info-bullet-list {
  padding-left: 0;
}
.interest-exit-intent .trust-icon__image {
  margin: auto auto 8px;
}
.interest-exit-intent .trust-icon__text {
  width: 136px;
  margin: auto;
}
.interest-exit-intent .text-small {
  display: block;
}

.price__side > div:first-child {
  padding-top: 6px;
}
.price__side > div:last-child {
  padding-bottom: 5px;
}
.price__side--right {
  text-align: right;
}
.price__side--left {
  text-align: left;
}
.price__text {
  font-family: Helvetica, Arial, sans-serif;
  color: #666;
  font-size: 12px;
  line-height: 1;
}
.price__amount {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin-right: 5px;
  margin-left: 5px;
  font-size: 60px;
  font-weight: 100;
  line-height: 1;
}
.pricing-page.locale-us .price__cent, .pricing-page.locale-uk .price__cent, .cancellation-flow-price-box--premium .price__cent, .pricing-plan--premium .price__cent, .pricing-page.locale-us .price__currency, .pricing-page.locale-uk .price__currency, .cancellation-flow-price-box--premium .price__currency, .pricing-plan--premium .price__currency, .pricing-page.locale-us .price__amount, .pricing-page.locale-uk .price__amount, .cancellation-flow-price-box--premium .price__amount, .pricing-plan--premium .price__amount {
  font-weight: bold;
}
.price__cent, .price__currency {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 22px;
}
.price__cent {
  line-height: 1;
}
.price__cent .price__currency {
  display: inline-block;
  margin-left: 0;
}
.price > .grid-x {
  justify-content: center;
}

.shared-feature-question {
  position: relative;
  width: 940px;
  min-height: 400px;
  padding-bottom: 12px;
  background-color: #fff;
}
.shared-feature-question::after {
  content: "";
  display: block;
  clear: both;
}
.shared-feature-question .h3 {
  margin-bottom: 16px;
  padding-top: 32px;
}
.shared-feature-question .app-popup-warning {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  display: none;
  position: absolute;
  right: 20px;
  bottom: 75px;
  width: 232px;
  padding: 20px 20px 20px 50px;
  border: 1px solid #fff;
  border-radius: 5px;
  background-color: #fdeb99;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.shared-feature-question .app-popup-warning::before {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 24px;
  height: 24px;
  background: url("/assets/application/popups/icon_warning.svg") no-repeat center center;
  content: "";
}
.shared-feature-question .app-popup-warning::after {
  position: absolute;
  bottom: -11px;
  right: 49px;
  width: 20px;
  height: 11px;
  background: url("/assets/application/popups/flyout_hint_bottom.svg") no-repeat center center;
  content: "";
}
.shared-feature-question .banner-feedback {
  display: none;
}
.shared-feature-question .banner-feedback--approved {
  border-bottom: 1px solid #d6eb99;
}
.shared-feature-question .banner-feedback--warning {
  border-bottom: 1px solid #fbcd00;
}
.shared-feature-question__content {
  max-width: 780px;
  margin: 0 auto;
}
.shared-feature-question__content--truncated {
  margin-top: 30px;
  font-size: 13px;
  font-weight: normal;
}
.shared-feature-question__footer {
  position: relative;
  max-width: 780px;
  min-height: 81px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #fff;
}
.shared-feature-question__footer .submit-question {
  float: right;
}
.shared-feature-question__footer .next-video-button {
  display: none;
  float: right;
}
.shared-feature-question__image-container {
  text-align: center;
}
.shared-feature-question__image {
  display: inline-block;
  margin-bottom: 30px;
  padding: 10px;
  border: 1px #e6e8e5 solid;
  border-radius: 4px;
  background-color: #fff;
}
.shared-feature-question__answers {
  display: inline-block;
  width: 100%;
  min-height: 200px;
  vertical-align: top;
}
.shared-feature-question__answers.is-enabled li:hover {
  background-color: #e6e8e5;
  cursor: pointer;
}
.shared-feature-question__answers.is-enabled li:hover::before {
  background: url("/assets/application/tests/icon_check_black.svg") no-repeat center center #e6e8e5;
}
.shared-feature-question__answers.is-enabled .is-preselected {
  background-color: #e6e8e5;
  box-shadow: none;
  cursor: pointer;
}
.shared-feature-question__answers.is-enabled .is-preselected::before {
  background: url("/assets/application/tests/icon_check_black.svg") no-repeat center center #e6e8e5;
}
.shared-feature-question__answers-item {
  position: relative;
  min-height: 70px;
  margin-bottom: 10px;
  padding: 16px 16px 16px 50px;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  line-height: 36px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  cursor: default;
}
.shared-feature-question__answers-item::before {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 4px;
  background: #fff;
  box-shadow: #999 0 1px 3px inset, #fff 0 1px;
  content: "";
}
.shared-feature-question__answers-item.is-correct {
  border: 1px solid #9c0;
  background-color: #d6eb99;
  box-shadow: none;
}
.shared-feature-question__answers-item.is-correct::before {
  border: 2px solid #9c0;
  background: url("/assets/application/tests/icon_check_black.svg") no-repeat center center #fff;
  box-shadow: none;
}
.shared-feature-question__answers-item.is-wrong {
  border: 1px solid #fbcd00;
  background-color: #fdeb99;
  box-shadow: none;
}
.shared-feature-question__answers-item.is-wrong::before {
  border: 2px solid #fbcd00;
  background: url("/assets/application/tests/icon_check_black.svg") no-repeat center center #fff;
  box-shadow: none;
}
.shared-feature-question .try-again-link {
  font-family: Helvetica, Arial, sans-serif;
  display: none;
}
.shared-feature-question .try-again-link::before {
  display: inline-block;
  width: 12px;
  height: 13px;
  margin: 0 10px -2px 0;
  background: url("/assets/application/tests/reset_arrow.svg") no-repeat center center;
  content: "";
}
body.is-elementary .shared-feature-question .h3:lang(de), body.is-elementary .shared-feature-question__answers-item:lang(de), body.is-elementary .shared-feature-question .banner-feedback__headline:lang(de), body.is-elementary .shared-feature-question .banner-feedback__text:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}
body.is-elementary .shared-feature-question .h3:lang(en), body.is-elementary .shared-feature-question__answers-item:lang(en), body.is-elementary .shared-feature-question .banner-feedback__headline:lang(en), body.is-elementary .shared-feature-question .banner-feedback__text:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}
body.is-elementary .shared-feature-question__answers-item, body.is-elementary .shared-feature-question .banner-feedback__headline {
  font-size: 18px;
}
body.is-elementary .shared-feature-question .h3 {
  font-size: 24px;
}
body.is-elementary .shared-feature-question .banner-feedback__text {
  font-size: 16px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .shared-feature-question__content, body.is-responsive .shared-feature-question__footer {
    padding-right: 24px;
    padding-left: 24px;
  }
  body.is-responsive .shared-feature-question__footer .button {
    width: 100%;
  }
  body.is-responsive .shared-feature-question__footer .button.medium {
    margin-bottom: 16px;
  }
}

.rating-stars {
  display: flex;
}
.rating-stars__star {
  display: flex;
  cursor: pointer;
}
.rating-stars__star:not(:last-child) {
  padding-right: 4px;
}
.rating-stars__icon {
  color: #999;
}
.rating-stars__icon.is-active {
  color: #e3b500;
}
.rating-stars__icon.is-clicked, .rating-stars__icon.is-hovered {
  color: #9c0;
}
.rating-stars__icon.icon--star-half {
  position: relative;
}
.rating-stars__icon.icon--star-half::before {
  position: relative;
  z-index: 1;
}
.rating-stars__icon.icon--star-half::after {
  position: absolute;
  left: 0;
  color: #999;
  font-family: "sofatutor-icons";
  font-style: normal;
  font-weight: normal;
  content: "\e80c";
  vertical-align: top;
}
.rating-stars__icon.icon--star-half.is-clicked::after, .rating-stars__icon.icon--star-half.is-hovered::after {
  color: #9c0;
}

.content-item-state-icon {
  margin-right: 8px;
  border-radius: 50%;
  background-color: #fff;
}
.content-item-state-icon--complete {
  color: #9c0;
}
.content-item-state-icon--incomplete {
  color: #fbcd00;
}
.content-item-state-icon--default {
  color: #e6e8e5;
}
.content-item-state-icon--hint {
  color: #06c;
}
.content-item-state-icon.icon--star {
  margin-right: 4px;
}
@media only screen and (min-width: 960px) {
  .content-item-state-icon {
    margin-right: 16px;
  }
}
@media only screen and (max-width: 959px) {
  .content-item-state-icon {
    font-size: 16px;
  }
}

.side-notice {
  position: fixed;
  right: -355px;
  width: 351px;
  transition: right 0.4s linear 0s, top 0.4s linear 0s;
  border: 1px solid #e6e8e5;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.05);
  z-index: 100;
}
.side-notice div:first-of-type {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top: 0;
}
.side-notice div:last-of-type {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.side-notice.is-unlocked {
  right: 10px;
}
.side-notice.is-hidden {
  display: none;
}
.side-notice .info-close {
  top: 7px;
}
.side-notice__item {
  display: none;
  width: 100%;
  border-top: 1px solid #e6e8e5;
}
.side-notice__item:nth-child(2), .side-notice__item:nth-child(3) {
  display: list-item;
}
.side-notice.is-opened .side-notice__item {
  display: list-item;
}
.side-notice.is-opened .side-notice__footer {
  display: none;
}
.side-notice__header {
  padding: 13px 20px 12px;
  color: #999;
  font-size: 11px;
  line-height: 13px;
}
.side-notice__content {
  display: block;
  position: relative;
  padding: 15px 20px;
}
.side-notice__content:hover {
  background-color: #f8f8f8;
  cursor: pointer;
}
.side-notice__content:hover .gamification-notes__text-wrap::after {
  font-weight: normal;
}
.side-notice__content:last-of-type {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.side-notice__content .sprites-layouts-view_list {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -5px;
}
.side-notice__image {
  width: 96px;
  margin-right: 12px;
}
.side-notice__text-wrap {
  display: inline-block;
  width: 180px;
  vertical-align: top;
}
.side-notice__headline {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  display: block;
  padding-bottom: 3px;
  color: #333;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
}
.side-notice__text {
  font-family: Helvetica, Arial, sans-serif;
  color: #666;
  font-size: 12px;
  line-height: 16px;
}
.side-notice__button {
  width: 100%;
}
.side-notice__button .sprites-layouts-arrow_down {
  margin-right: 5px;
}
.side-notice__footer {
  padding: 20px;
  border-top: 1px solid #e6e8e5;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .side-notice {
    top: -355px;
    right: 0;
    width: 100%;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  body.is-responsive .side-notice.is-unlocked {
    position: absolute;
    top: 60px;
  }
  body.is-responsive .side-notice__button {
    font-size: 16px;
  }
  body.is-responsive .side-notice__content {
    padding: 16px 8px;
  }
  body.is-responsive .side-notice__image {
    width: 48px;
    margin-right: 8px;
    vertical-align: top;
  }
  body.is-responsive .side-notice__text-wrap {
    width: 70%;
    vertical-align: middle;
  }
  body.is-responsive .side-notice__headline {
    font-size: 16px;
  }
  body.is-responsive .side-notice__text {
    color: #ccc;
    font-size: 14px;
    line-height: 22px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-mobile-app.is-responsive .side-notice.is-unlocked {
    position: absolute;
    top: 0;
  }
}

.swipe-carousel {
  position: relative;
}
.swipe-carousel > div > ul > li {
  opacity: 0;
  transition: opacity 0.6s ease 0s;
}

.swipe-carousel-prev {
  position: absolute;
  top: 90px;
  left: -50px;
  cursor: pointer;
}

.swipe-carousel-next {
  position: absolute;
  top: 90px;
  right: -50px;
  cursor: pointer;
}

.swipe-carousel-nav {
  margin: 0 auto;
  text-align: center;
}

.swipe-carousel-nav-item {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 2px;
  border-radius: 10px;
  background-color: #ccc;
  box-shadow: inset 0 1px 1px 0 #aaa;
  cursor: pointer;
}
.swipe-carousel-nav-item.is-current {
  border: 2px solid #999;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: inset 0 1px 1px 0 #ccc;
  cursor: default;
}

.tabs {
  position: relative;
}
.tabs__titles-outer-wrapper {
  position: relative;
  top: 1px;
  z-index: 1;
}
.tabs__titles-outer-wrapper.has-nav .owl-stage-outer {
  margin: 0 50px;
  z-index: 1;
}
.tabs__titles-outer-wrapper.has-nav + .tabs__content {
  border-radius: 4px;
}
.tabs__titles::after {
  content: "";
  display: block;
  clear: both;
}
.tabs__title {
  position: relative;
  z-index: 0;
  float: left;
  white-space: nowrap;
  background: #cccec9;
  border-style: solid;
  border-width: 4px 0 0;
  border-color: #ccc #cccec9;
  margin-right: 3px;
}
.tabs__title > a {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  border-style: solid;
  border-width: 0 1px 0;
  border-color: #ccc #cccec9;
  font-size: 14px;
  font-weight: bold;
  display: block;
  padding: 10px 20px 12px;
  color: #fff;
  text-transform: uppercase;
}
.tabs__title.is-active, .tabs__title:hover {
  background: #f8f8f8;
  border-color: #9c0 #e6e8e5;
}
.tabs__title.is-active a, .tabs__title:hover a {
  color: #333;
  border-color: #9c0 #e6e8e5;
}
.tabs__content {
  border: 1px solid #e6e8e5;
  border-radius: 0 4px 4px;
  background: #f8f8f8;
  color: #333;
}
.tabs__panel {
  display: none;
  padding: 28px 19px 18px 19px;
}
.tabs__panel.is-active {
  display: block;
}
.tabs .owl-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}
.tabs .owl-prev, .tabs .owl-next {
  width: 45px;
  height: 35px;
  margin-top: 0;
  border: solid 1px #e6e8e5;
  border-radius: 0;
  background-color: #fff;
  text-indent: -999em;
}
.tabs .owl-prev:hover, .tabs .owl-next:hover {
  background-color: #f8f8f8;
}
.tabs .owl-prev {
  float: left;
  background: url("/assets/application/arrows/arrow_left.svg") no-repeat center center;
}
.tabs .owl-next {
  float: right;
  background: url("/assets/application/arrows/arrow_right.svg") no-repeat center center;
}

.tracking-consent-popup {
  overflow-y: visible;
}
.tracking-consent-popup p {
  color: #333;
}
.tracking-consent-popup.reveal {
  margin-top: 224px;
}
.tracking-consent-popup::before {
  display: block;
  width: 213px;
  height: 120px;
  margin: -120px auto 0;
  transform: scaleX(-1);
  background: url("/assets/application/characters/cookie_monster.svg") no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
}
.tracking-consent-popup__headline {
  display: block;
  margin-bottom: 16px;
}
.tracking-consent-popup__description {
  margin-bottom: 32px;
}
.tracking-consent-popup__description p + p {
  margin-top: 16px;
}
.tracking-consent-popup__description a {
  color: #333;
}
.tracking-consent-popup__description.small-size-truncated {
  position: relative;
  max-height: 185px;
  margin-bottom: 8px;
  overflow: hidden;
}
.tracking-consent-popup__description.small-size-truncated::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, 0) 40%, #fff);
  content: "";
  pointer-events: none;
}
.tracking-consent-popup__actions-consent-text {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  width: 86%;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 20px;
  gap: 4px;
}
.tracking-consent-popup__actions-instruction {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.tracking-consent-popup__actions-consent-icon {
  grid-column: 1/2;
}
.tracking-consent-popup__actions-consent-icon p {
  grid-column: 2/3;
}
.tracking-consent-popup__actions-consent-icon--hidden i {
  visibility: hidden;
}
.tracking-consent-popup__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tracking-consent-popup__actions-button {
  margin-bottom: 14px;
  margin-left: 16px;
}
.tracking-consent-popup__actions-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 10px auto;
  gap: 8px;
  color: #06c;
  text-decoration: underline;
  font-size: 14px;
}
.tracking-consent-popup__actions-links a:not(:last-child) {
  margin-right: 16px;
}
.tracking-consent-popup__actions-links .js-customize {
  cursor: pointer;
}
.tracking-consent-popup__trust-badges {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 12px 0;
}
.tracking-consent-popup__trust-badges--ekomi {
  margin-bottom: 12px;
}
.tracking-consent-popup--dach {
  position: absolute;
  top: unset !important;
  bottom: -410px;
  left: 0 !important;
  right: 0 !important;
}
.tracking-consent-popup--dach .h3 {
  padding: 0 12px;
}
.tracking-consent-popup--dach .button {
  width: 400px;
  margin-bottom: 0;
  padding: 15px 24px;
  font-size: 18px;
  font-weight: 700;
}
.tracking-consent-popup--dach .tracking-consent-popup__actions-consent-text--accept {
  margin: 8px auto 0;
  padding: 0 54px;
}
.tracking-consent-popup--dach .tracking-consent-popup__actions-consent-text--reject {
  margin-top: 8px;
  padding: 0 54px;
}
.tracking-consent-popup--dach .tracking-consent-popup__actions-instruction {
  margin: 40px 170px;
  font-size: 14px;
  font-weight: 400;
}
.tracking-consent-popup--dach .tracking-consent-popup__actions-links {
  flex-direction: row;
  justify-content: center;
  gap: 24px;
  font-size: 14px;
}
@media only screen and (max-width: 959px) {
  .tracking-consent-popup.reveal {
    margin-top: 192px;
  }
  .tracking-consent-popup__description p {
    font-size: 14px;
  }
  .tracking-consent-popup__headline {
    font-size: 18px;
  }
  .tracking-consent-popup__actions {
    flex-direction: column;
    align-items: center;
    width: auto;
    margin: 0 auto;
  }
  .tracking-consent-popup__actions-button {
    width: 100%;
    margin-bottom: 16px;
    margin-left: 0;
  }
  .tracking-consent-popup__actions-consent-text {
    width: 90%;
    font-size: 12px;
  }
  .tracking-consent-popup__actions-links {
    justify-content: space-between;
    margin-right: 0;
  }
  .tracking-consent-popup__actions-links a {
    margin-right: 0;
  }
  .tracking-consent-popup--dach {
    bottom: -500px;
  }
  .tracking-consent-popup--dach .button {
    width: 480px;
  }
  .tracking-consent-popup--dach .tracking-consent-popup__actions-instruction {
    margin: 40px 0;
  }
  .tracking-consent-popup--dach .tracking-consent-popup__actions-consent-text {
    font-size: 14px;
  }
  .tracking-consent-popup--dach .tracking-consent-popup__actions-consent-text--accept, .tracking-consent-popup--dach .tracking-consent-popup__actions-consent-text--reject {
    width: 100%;
    padding: 0;
  }
}
@media only screen and (max-width: 639px) {
  .tracking-consent-popup {
    padding: 16px;
    max-width: 337px !important;
  }
  .tracking-consent-popup.reveal {
    margin-top: 64px;
  }
  .tracking-consent-popup::before {
    display: none;
  }
  .tracking-consent-popup__headline {
    font-size: 18px;
  }
  .tracking-consent-popup__actions, .tracking-consent-popup__actions-button {
    font-size: 14px;
  }
  .tracking-consent-popup__description.small-size-truncated {
    position: relative;
    max-height: 192px;
    margin-bottom: 8px;
    overflow: hidden;
  }
  .tracking-consent-popup__description.small-size-truncated::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0) 40%, #fff);
    content: "";
  }
  .tracking-consent-popup__actions-consent-text {
    align-items: start;
  }
  .tracking-consent-popup__actions-consent-text--accept {
    margin: 24px auto;
  }
  .tracking-consent-popup__actions {
    width: 100%;
  }
  .tracking-consent-popup--dach {
    bottom: -450px;
    width: 95% !important;
    max-width: 100% !important;
    padding: 14px;
  }
  .tracking-consent-popup--dach .button {
    width: 280px;
  }
  .tracking-consent-popup--dach .h3 {
    padding: 0;
  }
  .tracking-consent-popup--dach .h3 b {
    font-size: 16px;
  }
  .tracking-consent-popup--dach .tracking-consent-popup__actions-instruction {
    margin: 32px 0;
    font-size: 12px;
  }
  .tracking-consent-popup--dach .tracking-consent-popup__description p {
    font-size: 12px;
  }
  .tracking-consent-popup--dach .tracking-consent-popup__description p + p {
    margin-top: 0;
  }
  .tracking-consent-popup--dach .tracking-consent-popup__actions-consent-text {
    font-size: 12px;
  }
}
@media only screen and (max-height: 530px) {
  .tracking-consent-popup--dach {
    bottom: -650px;
  }
}

.continue-learning-popup {
  text-align: center;
  overflow-y: visible;
}
.continue-learning-popup.reveal {
  margin-top: 112px;
}
.continue-learning-popup__headline, .continue-learning-popup__text {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 18px;
}
.continue-learning-popup__headline {
  display: block;
  margin-bottom: 8px;
}
.continue-learning-popup__text {
  margin-bottom: 32px;
  font-weight: 300;
}
.continue-learning-popup__actions {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.continue-learning-popup__actions-button {
  width: 208px;
}
.continue-learning-popup::before {
  background: rgba(1, 1, 1, 0) url("/assets/application/characters/squirrel.svg") center center no-repeat;
  display: block;
  width: 175px;
  height: 146px;
  margin-top: -96px;
  margin-right: auto;
  margin-bottom: 40px;
  margin-left: auto;
  background-size: contain;
  content: "";
}
@media only screen and (max-width: 639px) {
  .continue-learning-popup__actions {
    flex-direction: column;
    margin: 0;
  }
  .continue-learning-popup__actions-button {
    width: 100%;
  }
  .continue-learning-popup__actions-button:first-child:not(:only-child) {
    margin-bottom: 16px;
  }
  .continue-learning-popup::before {
    margin-bottom: 24px;
  }
}

.tracking-consent-customization-popup {
  overflow-y: visible;
}
.tracking-consent-customization-popup.reveal {
  margin-top: 224px;
}
.tracking-consent-customization-popup::before {
  display: block;
  width: 213px;
  height: 120px;
  margin: -120px auto 0;
  background: url("/assets/application/characters/cookie_monster.svg") no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
}
.tracking-consent-customization-popup__actions {
  display: flex;
}
.tracking-consent-customization-popup__actions-button {
  margin-left: 16px;
}
.tracking-consent-customization-popup__actions-links {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.tracking-consent-customization-popup__actions-links a:not(:last-child) {
  margin-right: 16px;
}
.tracking-consent-customization-popup__form {
  display: flex;
  flex-wrap: wrap;
  margin: 24px -16px;
}
.tracking-consent-customization-popup__form-item {
  width: 50%;
  padding: 8px 16px;
}
.tracking-consent-customization-popup__form-item.is-active .tracking-consent-customization-popup__form-description-link {
  color: #666;
  font-weight: 700;
}
.tracking-consent-customization-popup__form-item.is-active .icon--arrow-solid {
  transform: rotate(270deg);
}
.tracking-consent-customization-popup__form-item.is-disabled .form-checkbox {
  opacity: 0.6;
}
.tracking-consent-customization-popup__form-item.is-disabled .form-checkbox__label {
  cursor: not-allowed;
}
.tracking-consent-customization-popup__form-description-link {
  display: block;
  padding-left: 32px;
}
.tracking-consent-customization-popup__form-description-link .icon {
  font-size: 8px;
}
.tracking-consent-customization-popup__form-description {
  display: none;
  margin-top: 8px;
}
@media only screen and (max-width: 959px) {
  .tracking-consent-customization-popup.reveal {
    margin-top: 192px;
  }
  .tracking-consent-customization-popup__actions {
    flex-direction: column-reverse;
    align-items: center;
    width: 384px;
    margin: 0 auto;
  }
  .tracking-consent-customization-popup__actions-button {
    width: 100%;
    margin-bottom: 16px;
    margin-left: 0;
  }
  .tracking-consent-customization-popup__actions-links {
    justify-content: space-between;
    margin-right: 0;
  }
  .tracking-consent-customization-popup__actions-links a {
    margin-right: 0;
  }
  .tracking-consent-customization-popup__form {
    margin: 16px 0;
  }
  .tracking-consent-customization-popup__form-item {
    width: 100%;
    padding: 8px 0;
  }
}
@media only screen and (max-width: 639px) {
  .tracking-consent-customization-popup {
    padding: 16px;
  }
  .tracking-consent-customization-popup.reveal {
    margin-top: 64px;
  }
  .tracking-consent-customization-popup::before {
    display: none;
  }
  .tracking-consent-customization-popup__actions, .tracking-consent-customization-popup__actions-button {
    font-size: 14px;
  }
  .tracking-consent-customization-popup__text.small-size-truncated {
    position: relative;
    max-height: 192px;
    margin-bottom: 8px;
    overflow: hidden;
  }
  .tracking-consent-customization-popup__text.small-size-truncated::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0) 40%, #fff);
    content: "";
  }
  .tracking-consent-customization-popup__actions {
    width: 100%;
  }
  .tracking-consent-customization-popup__form-description {
    padding-left: 32px;
  }
}

.teacher-feature-popup {
  padding: 0;
  overflow-y: visible;
}
.teacher-feature-popup .grid-container {
  padding: 0 !important;
  border-radius: 8px;
}
.teacher-feature-popup.reveal {
  margin-top: 184px;
}
.teacher-feature-popup.reveal.large {
  width: 100%;
  max-width: 956px;
}
.teacher-feature-popup__title-section {
  display: block;
  padding-top: 40px;
  padding-left: 40px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background-color: #fcf3e6;
  text-align: left;
}
.teacher-feature-popup__title-section br {
  display: none;
}
.teacher-feature-popup__subheadline {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  width: 80%;
  font-size: 18px;
}
.teacher-feature-popup__image {
  width: 335px;
  height: 430px;
  text-align: center;
  overflow: hidden;
}
.teacher-feature-popup__info-section {
  margin: 40px 0;
  padding: 0 32px;
}
.teacher-feature-popup__description .sprites-layouts-benefit_bulletpoint {
  flex-shrink: 0;
  margin-top: 10px;
}
.teacher-feature-popup__text {
  padding-bottom: 24px;
  padding-left: 8px;
}
.teacher-feature-popup__text:last-of-type {
  padding-bottom: 0;
}
.teacher-feature-popup__text span {
  display: block;
  color: #666;
  font-size: 16px;
}
.teacher-feature-popup__button {
  margin-left: 28px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .teacher-feature-popup.reveal {
    margin-top: 192px;
  }
  body.is-responsive .teacher-feature-popup.reveal.large {
    width: 100%;
    max-width: 576px;
  }
  body.is-responsive .teacher-feature-popup__title-section {
    height: 248px;
    padding-left: 32px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    overflow: hidden;
  }
  body.is-responsive .teacher-feature-popup__title-section br {
    display: block;
  }
  body.is-responsive .teacher-feature-popup__title-section p.h2 {
    font-size: 32px;
  }
  body.is-responsive .teacher-feature-popup__subheadline {
    font-size: 18px;
  }
  body.is-responsive .teacher-feature-popup__image {
    padding-right: 24px;
  }
  body.is-responsive .teacher-feature-popup__description .sprites-layouts-benefit_bulletpoint {
    margin-top: 6px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .teacher-feature-popup.reveal.large {
    width: 100%;
    max-width: 320px;
  }
  body.is-responsive .teacher-feature-popup__title-section {
    height: 152px;
    padding-top: 16px;
    padding-left: 16px;
  }
  body.is-responsive .teacher-feature-popup__info-section {
    margin: 24px 0;
    padding: 0 16px;
  }
  body.is-responsive .teacher-feature-popup p.h2 {
    font-size: 22px;
  }
  body.is-responsive .teacher-feature-popup__subheadline {
    display: none;
  }
  body.is-responsive .teacher-feature-popup__text span {
    display: block;
    color: #666;
    font-size: 14px;
  }
  body.is-responsive .teacher-feature-popup__description .sprites-layouts-benefit_bulletpoint {
    margin-top: 3px;
  }
  body.is-responsive .teacher-feature-popup__description b {
    font-size: 16px;
  }
  body.is-responsive .teacher-feature-popup__description p {
    font-size: 14px;
  }
}

.teacher-school-selection-popup {
  max-width: 716px;
  padding: 90px 72px 54px 60px;
  overflow-y: visible;
}
.teacher-school-selection-popup__headline {
  font-weight: bold;
}
.teacher-school-selection-popup__subheadline {
  margin-bottom: 32px;
}
.teacher-school-selection-popup__image {
  position: absolute;
  top: -48px;
  left: 50%;
  width: 200px;
  transform: translateX(-50%);
}
.teacher-school-selection-popup__cancel-button {
  margin-right: 16px;
}
.teacher-school-selection-popup__school-search-label {
  display: inline;
  margin-right: 8px;
}
.teacher-school-selection-popup__button-container {
  display: flex;
  justify-content: flex-end;
}
@media only screen and (max-width: 959px) {
  .teacher-school-selection-popup {
    width: 90%;
    padding: 32px;
  }
}
@media only screen and (max-width: 639px) {
  .teacher-school-selection-popup {
    width: 100%;
    max-width: auto;
    padding: 16px;
    overflow-y: auto;
  }
  .teacher-school-selection-popup__headline {
    margin-bottom: 16px;
    font-size: 22px;
  }
  .teacher-school-selection-popup__subheadline {
    margin-bottom: 32px;
    font-size: 18px;
  }
  .teacher-school-selection-popup__image {
    position: relative;
    top: 0;
  }
  .teacher-school-selection-popup__school-search-label {
    display: block;
    margin: 0 0 16px;
  }
  .teacher-school-selection-popup__button-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
  }
  .teacher-school-selection-popup__cancel-button {
    margin-right: 0;
  }
  .teacher-school-selection-popup__cancel-button, .teacher-school-selection-popup__save-button {
    width: 120px;
    margin-top: 32px;
  }
}

.pac-container {
  z-index: 10000000;
}

.box-trial-30-days {
  width: 100%;
  background-color: #fffae6;
  text-align: center;
}
.box-trial-30-days .button-yellow {
  display: inline-block;
  font-size: 17px;
  font-weight: normal;
}
.box-trial-30-days--expanded {
  padding-top: 64px;
  padding-bottom: 64px;
}
.box-trial-30-days--expanded .subheader {
  margin-bottom: 32px;
}
.box-trial-30-days--expanded .list-bubble {
  margin-bottom: 32px;
}
.box-trial-30-days--expanded .button-yellow {
  margin: 10px auto 0;
}
.box-trial-30-days--thin {
  padding-top: 24px;
  padding-bottom: 24px;
}
.box-trial-30-days--thin .list-bubble--small {
  width: 515px;
}
.box-trial-30-days--thin .box-trial-30-days__bar-text {
  vertical-align: middle;
}
.box-trial-30-days--thin .text-small {
  display: block;
}
.box-trial-30-days__button {
  margin-left: 10px;
}
.box-trial-30-days__list {
  display: inline-block;
  vertical-align: middle;
}
.box-trial-30-days__bar-text {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  display: inline-block;
  padding-right: 10px;
  color: #333;
  font-size: 18px;
  font-weight: 100;
  line-height: 1.5;
  text-align: left;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .box-trial-30-days__button {
    display: block;
    width: 240px;
    margin-right: auto;
    margin-left: auto;
  }
  body.is-responsive .box-trial-30-days__headline {
    margin-bottom: 8px;
  }
  body.is-responsive .box-trial-30-days--expanded {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  body.is-responsive .box-trial-30-days--thin {
    height: auto;
    padding: 32px 0;
  }
  body.is-responsive .box-trial-30-days--thin .button-yellow, body.is-responsive .box-trial-30-days--thin .box-trial-30-days__bar-text {
    display: block;
  }
  body.is-responsive .box-trial-30-days--thin .list-bubble {
    margin-top: 24px;
  }
  body.is-responsive .box-trial-30-days--thin .button-yellow {
    margin-top: 32px;
    margin-right: auto;
    margin-left: auto;
  }
  body.is-responsive .box-trial-30-days--thin .box-trial-30-days__bar-text {
    padding-right: 0;
    text-align: center;
  }
  body.is-responsive .box-trial-30-days--thin .box-trial-30-days__bar-text br {
    display: none;
  }
  body.is-responsive .box-trial-30-days--thin .text-small {
    margin-top: 8px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .box-trial-30-days--expanded {
    padding-bottom: 40px;
  }
  body.is-responsive .box-trial-30-days--expanded .box-trial-30-days__headline {
    font-size: 24px;
  }
  body.is-responsive .box-trial-30-days--expanded .list-bubble__item {
    width: 147px;
    height: 147px;
  }
  body.is-responsive .box-trial-30-days--expanded .list-bubble__item:last-of-type .h2 {
    padding-top: 25px;
  }
  body.is-responsive .box-trial-30-days--expanded .list-bubble__item:last-of-type .h5 {
    display: block;
    padding: 0 5px;
  }
}

.trial-flow {
  display: none;
}
.trial-flow__overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 2;
}
.trial-flow__popup {
  border-radius: 8px;
  background-color: #fff;
  z-index: 3;
}
.trial-flow.shows-popup {
  display: block;
  /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */
}
.trial-flow.shows-popup + .trial-flow__overlay {
  display: block;
}
.trial-flow.shows-popup + .trial-flow__overlay--split {
  left: auto;
  width: 50%;
  margin-right: 16px;
}
.trial-flow.shows-popup--test .trial-flow__popup, .trial-flow.shows-popup--worksheet .trial-flow__popup, .trial-flow.shows-popup--chat .trial-flow__popup {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
}
.trial-flow.shows-popup--video .trial-flow__popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.trial-flow.shows-popup--video .trial-flow__popup--split, .trial-flow.shows-popup--worksheet .trial-flow__popup--split, .trial-flow.shows-popup--test .trial-flow__popup--split, .trial-flow.shows-popup--chat .trial-flow__popup--split {
  position: absolute;
  top: 50%;
  left: 74%;
  width: 400px;
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 959px) {
  body.is-responsive .trial-flow .tipsy {
    display: none !important;
  }
  body.is-responsive .trial-flow.shows-popup .trial-flow__popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    transform: translate(0, 0);
  }
  body.is-responsive .trial-flow.shows-popup .trial-flow__popup--split {
    position: relative;
    top: 24px;
    left: 50%;
    width: 400px;
    transform: translate(-50%, -100%);
  }
  body.is-responsive .trial-flow.shows-popup + .trial-flow__overlay--split {
    width: 100%;
    height: 390px;
    left: 0;
    top: 0;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .trial-flow.shows-popup .trial-flow__popup--split {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    padding: 0;
    width: 90%;
    transform: translate(-50%, -50%);
  }
}

.trial-flow-phone-popup {
  margin-top: 8px;
  margin-bottom: 16px;
  text-align: center;
}
.trial-flow-phone-popup.trial-flow__popup--split {
  margin-top: 0;
}
.trial-flow-phone-popup__title {
  margin-bottom: 8px;
  color: #3c3c3c;
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
}
.trial-flow-phone-popup__text {
  color: #666;
  font-size: 14px;
}
.trial-flow-phone-popup__footer {
  position: relative;
  height: 160px;
  background: #9c0;
  text-align: center;
}
.trial-flow-phone-popup__footer svg {
  position: absolute;
  top: 10px;
  right: 40%;
  height: 170px;
}
.trial-flow-phone-popup__button {
  position: relative;
  top: 56px;
  left: 20%;
  width: 144px;
  padding: 12px 5px;
  font-size: 16px;
  font-weight: normal !important;
}
.trial-flow-phone-popup .icon--close {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #666;
  font-size: 18px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .trial-flow-phone-popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
  }
  body.is-responsive .trial-flow-phone-popup__text {
    width: 100%;
  }
}

.trial-flow-popup {
  width: 720px;
}
.trial-flow-popup__content {
  padding: 32px 32px 8px;
}
.trial-flow-popup__headline, .trial-flow-popup__footer, .trial-flow-popup__subheadline {
  text-align: center;
}
.trial-flow-popup__headline {
  padding-top: 0;
  font-weight: bold;
}
.trial-flow-popup__subheadline {
  margin-right: auto;
  margin-bottom: 16px;
  margin-left: auto;
}
.trial-flow-popup__inset {
  padding: 24px 24px 21px;
  border-radius: 8px;
  background-color: #f8f8f8;
}
.trial-flow-popup__footer .text-small {
  margin-bottom: 16px;
}
.trial-flow-popup__footer .h4 {
  font-weight: 300;
}
.trial-flow-popup__footer .h6 {
  font-style: italic;
}
.trial-flow-popup__footer span {
  font-weight: 400;
}
.trial-flow-popup__yeti {
  height: 107px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: #9c0;
}
.trial-flow-popup__yeti .h5 span {
  font-weight: 400;
}
.trial-flow-popup__yeti svg {
  position: absolute;
  bottom: -10px;
  left: -10px;
}
.trial-flow-popup__yeti .grid-x {
  height: 100%;
}
.trial-flow-popup__trial-hint {
  font-family: Helvetica, Arial, sans-serif;
  color: #333;
  font-style: italic;
  font-weight: normal;
}
.trial-flow-popup .info-bullet-list {
  padding-left: 0;
  color: #9c0;
  text-align: left;
}
.trial-flow-popup .info-bullet-list li {
  padding-bottom: 0;
}
.trial-flow-popup .button {
  margin-top: 16px;
  font-weight: normal;
}
.trial-flow-popup__button-close {
  padding: 8px;
  float: right;
  cursor: pointer;
}
.trial-flow-popup .icons-quotes--green-left, .trial-flow-popup .icons-quotes--green-right {
  display: inline-block;
  background-repeat: no-repeat;
}
.trial-flow-popup .icons-quotes--green-left {
  width: 25px;
  height: 20px;
}
.trial-flow-popup .icons-quotes--green-right {
  width: 15px;
  height: 15px;
}
.trial-flow-popup .trust-icon__image {
  display: block;
  width: 128px;
  margin-right: auto;
  margin-left: auto;
}
.trial-flow-popup .trust-icon__text {
  font-style: normal;
  font-weight: bold;
  text-align: center;
}
.trial-flow-popup .text-xsmall {
  padding-top: 4px;
}
@media only screen and (max-width: 639px) {
  .trial-flow-popup__subheadline {
    max-width: 265px;
    margin-bottom: 16px;
  }
  .trial-flow-popup__inset {
    background-position: right -40px bottom -40px;
    background-color: #f8f8f8;
    background-size: 55%;
    background-image: url("/assets/application/illustrations/mountain.svg");
    background-repeat: no-repeat;
  }
  .trial-flow-popup__footer .h6 br {
    display: none;
  }
  .trial-flow-popup .info-bullet-list {
    margin-bottom: 24px;
  }
  .trial-flow-popup .trust-icon__image {
    width: auto;
  }
}

@media only screen and (max-width: 959px) {
  .videos-stage > .trial-flow .trial-flow-phone-popup,
  .videos-stage > .trial-flow .trial-flow-popup {
    position: absolute;
    width: auto;
    margin: 16px;
    border-radius: 8px;
  }
  .videos-stage > .trial-flow.shows-popup + .trial-flow__overlay {
    display: block;
  }
}

.video-bookmark-button {
  display: flex;
  align-items: center;
  color: #666;
}
.video-bookmark-button__text {
  line-height: 2;
}
.video-bookmark-button.button {
  padding: 0 4px;
}
.video-bookmark-button .icon {
  margin-left: -4px;
  color: #9c0;
}

.deeplinks {
  position: relative;
  padding-top: 32px;
  padding-bottom: 32px;
  background-color: #e6e8e5;
}
.deeplinks__headline {
  margin-bottom: 32px;
}
.deeplinks__link {
  width: 220px;
  color: #666;
  font-size: 12px;
  line-height: 17px;
}
.deeplinks__link:hover, .deeplinks__link:focus {
  color: #999;
}
.deeplinks__box .h5 {
  margin-bottom: 20px;
  padding-top: 40px;
  padding-bottom: 15px;
  border-bottom: 4px solid #9c0;
}
.deeplinks__list {
  height: auto;
  max-height: 43px;
  overflow: hidden;
}
.deeplinks__list--content-page {
  columns: 4;
}
.deeplinks__list.is-opened {
  max-height: none;
}
.deeplinks__list-item {
  margin-bottom: 5px;
  line-height: initial;
  hyphens: auto;
}
.deeplinks__more {
  margin-top: 20px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.deeplinks__more-link {
  color: #06c;
  cursor: pointer;
}
.deeplinks__more-link:hover {
  color: #09f;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .deeplinks {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  body.is-responsive .deeplinks .grid-column-4 {
    width: 33.3%;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .deeplinks .grid-column-4 {
    width: 100%;
  }
}

.school-directory-expired-license-popup {
  position: relative;
  max-width: 863px;
  margin-top: 64px;
  padding-top: 40px;
  overflow-y: visible;
}
.school-directory-expired-license-popup__illustration {
  position: absolute;
  top: -180px;
  left: 50%;
  width: 250px;
  transform: translateX(-50%);
}
.school-directory-expired-license-popup__subline {
  font-weight: bold;
}
.school-directory-expired-license-popup__checkbox-label::before {
  top: 20px;
  left: -190px;
}
.school-directory-expired-license-popup__voucher-form {
  display: flex;
  align-items: center;
  justify-content: center;
}
.school-directory-expired-license-popup__input {
  display: inline-block;
  max-width: 328px;
  margin-right: 8px;
}
@media only screen and (max-width: 959px) {
  .school-directory-expired-license-popup {
    max-width: 90%;
  }
}
@media only screen and (max-width: 639px) {
  .school-directory-expired-license-popup {
    max-width: 100%;
    margin-top: 0;
    padding: 20px;
    overflow-y: scroll;
  }
  .school-directory-expired-license-popup__checkbox-label::before {
    top: 21px;
    left: -120px;
  }
  .school-directory-expired-license-popup__illustration {
    position: relative;
    top: 0;
  }
  .school-directory-expired-license-popup__headline {
    margin-top: 20px;
    font-size: 18px;
  }
  .school-directory-expired-license-popup__subline {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: normal;
  }
  .school-directory-expired-license-popup__voucher-form {
    display: block;
  }
  .school-directory-expired-license-popup__input {
    width: 100%;
    margin-bottom: 12px;
  }
  .school-directory-expired-license-popup .button {
    width: 100%;
  }
  .school-directory-expired-license-popup__accept-terms-button {
    margin-bottom: 16px;
  }
  .school-directory-expired-license-popup__logout-button {
    margin-right: 0;
  }
  .school-directory-expired-license-popup__redeem-voucher-container .button {
    width: auto;
  }
  .school-directory-expired-license-popup__redeem-voucher-container .sprites-layouts-hotline {
    scale: 0.7;
  }
}

.teacher-premium-blocked-popup {
  padding-top: 40px;
  overflow-y: visible;
}
.teacher-premium-blocked-popup__illustration {
  position: absolute;
  top: -76px;
  left: 50%;
  width: 145px;
  transform: translateX(-50%);
}
.teacher-premium-blocked-popup__subline {
  font-weight: bold;
}
.teacher-premium-blocked-popup__support-phone, .teacher-premium-blocked-popup__support-email {
  display: inline-block;
  color: #666;
  vertical-align: middle;
}
.teacher-premium-blocked-popup__support-phone a, .teacher-premium-blocked-popup__support-email a {
  color: #666;
}
@media only screen and (max-width: 959px) {
  .teacher-premium-blocked-popup {
    max-width: 90%;
  }
}
@media only screen and (max-width: 639px) {
  .teacher-premium-blocked-popup {
    max-width: 100%;
    margin-top: 0;
    padding: 20px;
    overflow-y: scroll;
  }
  .teacher-premium-blocked-popup__illustration {
    position: relative;
    top: 0;
  }
  .teacher-premium-blocked-popup .button {
    width: 100%;
  }
}

.teacher-premium-label {
  display: inline-block;
  margin-left: 8px;
  padding: 0 16px;
  border-radius: 16px;
  background: conic-gradient(from 238deg at 74% 0%, #e3b500, #e4b600, #fbcd00);
  color: #fff;
  font-weight: bold;
}
.teacher-premium-label i {
  vertical-align: baseline;
}
@media only screen and (max-width: 639px) {
  .teacher-premium-label {
    margin-left: 0;
  }
}

.teacher-premium-star {
  padding: 8px;
  border-radius: 100%;
  background: conic-gradient(from 238deg at 74% 0%, #e3b500, #e4b600, #fbcd00);
}
.teacher-premium-star--page-header {
  left: 30px;
  padding: 4px;
  position: absolute;
  top: 32px;
}

.free-teacher-upselling-popup {
  position: relative;
  overflow-y: visible;
}
.free-teacher-upselling-popup__banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: #fdeb99;
}
.free-teacher-upselling-popup__banner-headline {
  display: inline-block;
  font-weight: bold;
}
.free-teacher-upselling-popup__banner-label {
  display: inline-block;
}
.free-teacher-upselling-popup__banner-content {
  margin: 40px 0 24px;
}
.free-teacher-upselling-popup__content {
  margin-top: 150px;
}
.free-teacher-upselling-popup__container {
  margin-bottom: -120px;
}
.free-teacher-upselling-popup__trial-button .button {
  width: 100%;
}
.free-teacher-upselling-popup .teacher-offers-card-features-list {
  max-height: 500px;
  grid-column-gap: 16px;
}
@media only screen and (max-width: 959px) {
  .free-teacher-upselling-popup .teacher-offers-card-features-list {
    max-height: 520px;
  }
}
@media only screen and (max-width: 639px) {
  .free-teacher-upselling-popup {
    overflow-y: auto;
  }
  .free-teacher-upselling-popup__banner {
    border-radius: 0;
  }
  .free-teacher-upselling-popup__banner-content {
    margin: 16px;
  }
  .free-teacher-upselling-popup__container {
    margin: 0 0 16px;
  }
  .free-teacher-upselling-popup .teacher-offers-card-features-list {
    max-height: none;
  }
  .free-teacher-upselling-popup .teacher-offers-card-features-list__item:not(:nth-child(-n+5)) {
    display: none;
  }
  .free-teacher-upselling-popup .teacher-offers-card__link {
    display: none;
  }
}
.free-teacher-upselling-popup button.has-tip {
  display: inline-block !important;
}

.premium-feature-tooltip {
  z-index: 1000000;
}

.teacher-offers-price {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin-left: 24px;
}
.teacher-offers-price__text {
  margin-bottom: 8px;
  color: #666;
  font-weight: bold;
}
.teacher-offers-price__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 32px;
  border-radius: 23px;
  background-color: #e3b500;
  color: #fff;
  font-weight: bold;
}
.teacher-offers-price__old {
  margin-left: 16px;
  color: #e35b00;
  font-size: 32px;
  font-weight: lighter;
  text-decoration: line-through;
}
.teacher-offers-price__current {
  margin-left: 16px;
  color: #690;
  font-size: 42px;
  font-weight: bold;
}
@media only screen and (max-width: 959px) {
  .teacher-offers-price {
    justify-content: center;
    margin-left: 0;
    text-align: center;
  }
  .teacher-offers-price__current {
    margin-left: 0;
  }
  .teacher-offers-price__old {
    margin-right: 80px;
  }
}

.school-directory-new-school-year-update-popup {
  position: relative;
  padding: 64px;
  overflow: visible;
}
.school-directory-new-school-year-update-popup__illustration {
  position: absolute;
  top: -40px;
  left: 342px;
  width: 184px;
}
.school-directory-new-school-year-update-popup__title {
  margin-bottom: 32px;
  font-weight: bold;
  text-align: center;
}
.school-directory-new-school-year-update-popup__list {
  font-weight: bold;
}
.school-directory-new-school-year-update-popup .callout.warning {
  background-color: #fcf8e6;
}
.school-directory-new-school-year-update-popup__cancel-button {
  margin-right: 32px;
}
.school-directory-new-school-year-update-popup__start-button {
  margin-left: 32px;
}
@media only screen and (max-width: 959px) {
  .school-directory-new-school-year-update-popup {
    padding: 32px;
  }
  .school-directory-new-school-year-update-popup__illustration {
    top: -55px;
    left: 300px;
  }
}
@media only screen and (max-width: 639px) {
  .school-directory-new-school-year-update-popup {
    padding: 16px;
    overflow: auto;
  }
  .school-directory-new-school-year-update-popup__illustration {
    position: unset;
    margin-bottom: 16px;
  }
  .school-directory-new-school-year-update-popup__cancel-button {
    margin-right: 0;
  }
  .school-directory-new-school-year-update-popup__start-button {
    margin-bottom: 24px;
    margin-left: 0;
  }
}

.teacher-offers-card-features-list {
  flex-direction: column;
  font-size: 98%;
}
.teacher-offers-teacher-card .teacher-offers-card-features-list {
  max-height: 400px;
}
.teacher-offers-school-card .teacher-offers-card-features-list {
  max-height: 500px;
  grid-column-gap: 32px;
}
.teacher-offers-card-features-list__item {
  margin-bottom: 24px;
  color: #666;
}
.teacher-offers-card-features-list__item:not(:first-of-type) {
  align-items: center;
}
.teacher-offers-card-features-list__item svg {
  display: block;
  width: 40px;
  height: 40px;
  margin-right: 16px;
}
@media only screen and (max-width: 959px) {
  .teacher-offers-teacher-card .teacher-offers-card-features-list {
    max-height: 424px;
  }
  .teacher-offers-school-card .teacher-offers-card-features-list {
    max-height: none;
  }
}
@media only screen and (max-width: 639px) {
  .teacher-offers-teacher-card .teacher-offers-card-features-list {
    max-height: none;
  }
}

.secondary-exercises-popup {
  position: relative;
  transform: translateY(300px);
  font-weight: bold;
  overflow: visible;
}
.secondary-exercises-popup:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}
.secondary-exercises-popup:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}
.secondary-exercises-popup.reveal.small {
  padding: 0;
}
.secondary-exercises-popup__circle {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -65%);
  border-radius: 50%;
  background-color: #fdeb99;
  z-index: -1;
}
.secondary-exercises-popup__image {
  position: relative;
  top: 10px;
  transform: scale(1.2);
}
.secondary-exercises-popup__left-ribbon, .secondary-exercises-popup__right-ribbon {
  display: block;
  position: absolute;
  top: -20px;
  width: 83px;
  height: 65px;
  background-image: url("/assets/application/popups/ribbon.svg");
  z-index: -1;
}
.secondary-exercises-popup__left-ribbon {
  top: -20px;
  left: 6px;
  transform: translateX(-100%);
}
.secondary-exercises-popup__right-ribbon {
  top: -24px;
  right: 6px;
  transform: rotate(180deg) translateX(-100%);
}
.secondary-exercises-popup__ribbon {
  position: absolute;
  top: -50px;
  left: -55%;
  width: 105%;
  padding: 12px;
  transform: translate(50%, 50%);
  background-color: #e35b00;
  color: #fff;
  font-size: 25px;
  box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.75);
}
.secondary-exercises-popup__content {
  padding: 50px 64px 16px;
  border-radius: 8px;
  background-color: #fff;
}
.secondary-exercises-popup__text {
  font-size: 22px;
}
@media only screen and (max-width: 639px) {
  .secondary-exercises-popup.reveal.small {
    width: 80%;
    transform: translateY(185px);
  }
  .secondary-exercises-popup__left-ribbon {
    top: -14px;
    left: 40px;
    transform: translateX(-100%) scale(0.8);
  }
  .secondary-exercises-popup__right-ribbon {
    top: -17px;
    right: 40px;
    transform: rotate(180deg) translateX(-100%) scale(0.8);
  }
  .secondary-exercises-popup__content {
    padding: 42px 16px 16px;
  }
  .secondary-exercises-popup__text {
    font-size: 18px;
  }
}
@media only screen and (max-width: 639px) {
  .secondary-exercises-popup__content {
    padding: 90px 64px 16px;
  }
}

.listening-comprehension-popup {
  position: relative;
  transform: translateY(160px);
  font-weight: bold;
  overflow: visible;
}
.listening-comprehension-popup:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}
.listening-comprehension-popup:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}
.listening-comprehension-popup.reveal.small {
  padding: 0;
}
.listening-comprehension-popup__circle {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -65%);
  border-radius: 50%;
  background-color: #fdeb99;
  z-index: -1;
}
.listening-comprehension-popup__image {
  position: relative;
  top: -7px;
  transform: scale(0.8);
}
.listening-comprehension-popup__left-ribbon, .listening-comprehension-popup__right-ribbon {
  display: block;
  position: absolute;
  top: -20px;
  width: 83px;
  height: 65px;
  background-image: url("/assets/application/popups/ribbon.svg");
  z-index: -1;
}
.listening-comprehension-popup__left-ribbon {
  top: -20px;
  left: 6px;
  transform: translateX(-100%);
}
.listening-comprehension-popup__right-ribbon {
  top: -24px;
  right: 6px;
  transform: rotate(180deg) translateX(-100%);
}
.listening-comprehension-popup__ribbon {
  position: absolute;
  top: -50px;
  left: -55%;
  width: 105%;
  padding: 12px;
  transform: translate(50%, 50%);
  background-color: #e35b00;
  color: #fff;
  font-size: 25px;
  box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.75);
}
.listening-comprehension-popup__content {
  padding: 50px 64px 16px;
  border-radius: 8px;
  background-color: #fff;
}
.listening-comprehension-popup__text {
  font-size: 22px;
}
@media only screen and (max-width: 639px) {
  .listening-comprehension-popup.reveal.small {
    width: 80%;
  }
  .listening-comprehension-popup__left-ribbon {
    top: -14px;
    left: 40px;
    transform: translateX(-100%) scale(0.8);
  }
  .listening-comprehension-popup__right-ribbon {
    top: -17px;
    right: 40px;
    transform: rotate(180deg) translateX(-100%) scale(0.8);
  }
  .listening-comprehension-popup__content {
    padding: 42px 16px 16px;
  }
  .listening-comprehension-popup__text {
    font-size: 18px;
  }
}

.medals-difficulty-popup {
  position: relative;
  transform: translateY(160px);
  font-weight: bold;
  overflow: visible;
}
.medals-difficulty-popup:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}
.medals-difficulty-popup:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}
.medals-difficulty-popup.reveal.small {
  padding: 0;
}
.medals-difficulty-popup--carousel {
  top: 100px !important;
}
.medals-difficulty-popup__circle {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -65%);
  border-radius: 50%;
  background-color: #33a0c4;
  background-image: url("/assets/application/popups/medals_difficulty_popup/circle_background.png");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}
.medals-difficulty-popup__left-ribbon, .medals-difficulty-popup__right-ribbon {
  display: block;
  position: absolute;
  top: -20px;
  width: 83px;
  height: 65px;
  background-image: url("/assets/application/popups/ribbon.svg");
  z-index: -1;
}
.medals-difficulty-popup__left-ribbon {
  top: -20px;
  left: 6px;
  transform: translateX(-100%);
}
.medals-difficulty-popup__right-ribbon {
  top: -24px;
  right: 6px;
  transform: rotate(180deg) translateX(-100%);
}
.medals-difficulty-popup__ribbon {
  position: absolute;
  top: -50px;
  left: -55%;
  width: 105%;
  padding: 12px;
  transform: translate(50%, 50%);
  background-color: #e35b00;
  color: #fff;
  font-size: 25px;
  box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.75);
}
.medals-difficulty-popup__content {
  padding: 50px 60px 16px;
  border-radius: 8px;
  background-color: #fff;
}
.medals-difficulty-popup__text {
  font-size: 22px;
  text-align: left;
}
.medals-difficulty-popup__list {
  padding-left: 2rem;
  list-style-type: disc;
}
.medals-difficulty-popup__confetti {
  position: absolute;
  bottom: 0;
  left: -20px;
  width: 500px !important;
  height: 550px !important;
}
@media only screen and (max-width: 639px) {
  .medals-difficulty-popup.reveal.small {
    width: 80%;
  }
  .medals-difficulty-popup--carousel {
    top: 80px !important;
  }
  .medals-difficulty-popup--carousel.reveal.small {
    width: 95%;
  }
  .medals-difficulty-popup__left-ribbon {
    top: -14px;
    left: 40px;
    transform: translateX(-100%) scale(0.8);
  }
  .medals-difficulty-popup__right-ribbon {
    top: -17px;
    right: 40px;
    transform: rotate(180deg) translateX(-100%) scale(0.8);
  }
  .medals-difficulty-popup__content {
    padding: 42px 16px 16px;
  }
  .medals-difficulty-popup__text {
    font-size: 18px;
  }
  .medals-difficulty-popup__confetti {
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 100% !important;
    height: 200% !important;
  }
}

.medals-difficulty-popup-carousel {
  padding: 16px 64px;
  border-radius: 8px;
  background-color: #fff;
  font-size: 22px;
}
.medals-difficulty-popup-carousel__image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
}
.medals-difficulty-popup-carousel__image img {
  height: 130px;
}
.medals-difficulty-popup-carousel__slide-4 img, .medals-difficulty-popup-carousel__slide-5 img {
  height: 90%;
}
.medals-difficulty-popup-carousel__prev, .medals-difficulty-popup-carousel__next {
  position: absolute;
  bottom: 16px;
}
.medals-difficulty-popup-carousel__prev {
  left: 10%;
}
.medals-difficulty-popup-carousel__next {
  right: 10%;
}
.medals-difficulty-popup-carousel .slick-dots {
  position: static;
}
.medals-difficulty-popup-carousel .slick-dots li button::before {
  font-size: 12px;
}
.medals-difficulty-popup-carousel .slick-dots li.slick-active button::before {
  color: #06c;
}
@media only screen and (max-width: 639px) {
  .medals-difficulty-popup-carousel {
    padding: 16px 16px 24px;
    font-size: 18px;
  }
  .medals-difficulty-popup-carousel__slide-4 img, .medals-difficulty-popup-carousel__slide-5 img {
    height: 90%;
  }
  .medals-difficulty-popup-carousel__prev {
    left: 16px;
  }
  .medals-difficulty-popup-carousel__next {
    right: 16px;
  }
  .medals-difficulty-popup-carousel .slick-dots {
    margin-top: 16px;
  }
  .medals-difficulty-popup-carousel .slick-dots li {
    width: 10px;
  }
}

.schoolbook-mapping-popup {
  padding: 0;
}
.schoolbook-mapping-popup .grid-container {
  padding: 0;
}
.schoolbook-mapping-popup__title-section {
  padding: 3.5rem 2rem 2.5rem;
}
.schoolbook-mapping-popup__button-group {
  margin-top: 6rem;
}
.schoolbook-mapping-popup__info {
  margin-top: 2rem;
  font-size: 0.875rem;
}
.schoolbook-mapping-popup__image-section {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background: #fcfce6;
}
.schoolbook-mapping-popup__image-section i {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  cursor: pointer;
  color: #999;
}
@media only screen and (max-width: 959px) {
  .schoolbook-mapping-popup__headline {
    font-size: 2rem;
  }
  .schoolbook-mapping-popup__button-group {
    margin-top: 2rem;
  }
  .schoolbook-mapping-popup__open-button {
    width: 20.75rem;
  }
  .schoolbook-mapping-popup__image-section {
    padding: 2rem 2rem 4rem;
  }
  .schoolbook-mapping-popup__title-section {
    padding: 2rem;
  }
}
@media only screen and (max-width: 639px) {
  .schoolbook-mapping-popup__button-group {
    margin-top: 8rem;
    display: grid;
  }
  .schoolbook-mapping-popup__button-group .button {
    width: 100%;
  }
  .schoolbook-mapping-popup__skip-button {
    margin-top: 1rem;
  }
  .schoolbook-mapping-popup__headline {
    font-size: 1.375rem;
  }
  .schoolbook-mapping-popup__subheadline {
    font-size: 0.875rem;
  }
  .schoolbook-mapping-popup__info {
    margin-top: 1rem;
  }
}

.sofabuddy-consent-popup {
  max-width: 57.875rem !important;
  padding: 0;
}
.sofabuddy-consent-popup__subheadline {
  display: inline;
}
.sofabuddy-consent-popup__info-label {
  background-color: #e9e6f8;
}
.sofabuddy-consent-popup__info-label-text {
  font-size: 0.75rem;
}
.sofabuddy-consent-popup__title-section {
  padding: 3.5rem 2rem 2.5rem;
}
.sofabuddy-consent-popup__button-group {
  margin-top: 1.5rem;
}
.sofabuddy-consent-popup__image-section {
  display: flex;
  align-items: center;
  background: #fcfce6;
}
.sofabuddy-consent-popup__image {
  padding: 1rem;
}
.sofabuddy-consent-popup__tooltip {
  display: inline !important;
}
.sofabuddy-consent-popup__features {
  margin-left: 1rem;
  color: #666;
  font-size: 0.875rem;
  line-height: 1.8;
  list-style-type: disc;
}
.sofabuddy-consent-popup__accept-button {
  width: 15.5rem;
}
@media only screen and (max-width: 959px) {
  .sofabuddy-consent-popup {
    width: 72%;
  }
  .sofabuddy-consent-popup__title-section {
    padding-top: 1.5rem;
  }
  .sofabuddy-consent-popup__features {
    margin-left: 0.5rem;
  }
  .sofabuddy-consent-popup__accept-button {
    width: 18.5rem;
  }
}
@media only screen and (max-width: 639px) {
  .sofabuddy-consent-popup__headline {
    font-size: 2rem;
  }
  .sofabuddy-consent-popup__button-group {
    gap: 1rem;
    width: 100%;
  }
  .sofabuddy-consent-popup__button-group .button {
    width: 100%;
  }
}

.tooltip {
  z-index: 99999999;
}

.gamification-page .info-tab {
  position: relative;
}
.gamification-page .info-tab .gamification-counter {
  top: -8px;
  right: -5px;
  z-index: 2;
}

.gamification {
  background-color: #fcf8e6;
}
.gamification__tab.is-current a {
  background-color: #66b8d2;
}
.gamification__tab.is-current:hover a {
  background-color: #66b8d2;
  cursor: default;
}

.gamification-new-icon {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  font-size: 9px;
  line-height: 28px;
  text-transform: uppercase;
  text-align: center;
}

.gamification-banner {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  font-size: 24px;
  font-weight: 100;
  line-height: 50px;
  text-align: center;
}
.gamification-banner--awards {
  background-image: url("/assets/application/account/gamification/award_banner.svg");
}
.gamification-banner--challenges {
  background-image: url("/assets/application/account/gamification/challenges_banner.svg");
}
@media only screen and (max-width: 639px) {
  body.is-responsive .gamification-banner--awards {
    background-image: url("/assets/application/account/gamification/award_banner_mobile.svg");
  }
  body.is-responsive .gamification-banner--challenges {
    background-image: url("/assets/application/account/gamification/challenges_banner_mobile.svg");
  }
}

.gamification-awards {
  position: relative;
  padding-top: 32px;
  padding-bottom: 180px;
  overflow: hidden;
}
.gamification-awards__background {
  position: absolute;
  left: 0;
  right: 0;
  transition: top 0.2s ease 0s;
  background-repeat: no-repeat;
  background-position-x: center;
  content: "";
  z-index: -1;
}
.gamification-awards__background--top {
  top: 50px;
  height: 380px;
  background-image: url("/assets/application/account/gamification/awards/background-top.svg");
}
.gamification-awards__background--bottom {
  height: 222px;
  background-image: url("/assets/application/account/gamification/awards/background-bottom.svg");
}
.gamification-awards .gamification-banner {
  position: relative;
  margin-bottom: 32px;
  z-index: 1;
}

.gamification-card {
  position: relative;
  margin-bottom: 16px;
}
.gamification-card__title {
  padding-top: 0;
  text-transform: uppercase;
}
.gamification-card__status {
  font-family: Helvetica, Arial, sans-serif;
  padding-top: 8px;
  color: #ccc;
  font-size: 14px;
}
.gamification-card__image {
  width: 128px;
  height: 128px;
}
.gamification-card .media-object {
  padding: 24px;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .gamification-card__image {
    width: 96px;
    height: 96px;
  }
}

.gamification-header__banner {
  position: relative;
  height: 412px;
  background-position: center bottom;
  background-color: #66b8d2;
  background-repeat: no-repeat;
  background-image: url("/assets/application/account/gamification/lernsafari/header-bg.svg");
  background-size: contain;
  text-align: center;
}
.gamification-header--learning-safari-finished {
  background-image: url("/assets/application/account/gamification/lernsafari/header-bg-finished.svg");
}
.gamification-header__headline {
  display: inline-block;
  padding-top: 40px;
  color: #005f7f;
  font-size: 42px;
  line-height: 140%;
  text-transform: uppercase;
  text-align: center;
}
.gamification-header__headline:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}
.gamification-header__headline:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}
.gamification-header__info {
  position: absolute;
  margin-top: 43px;
  margin-left: 10px;
}
.gamification-header__info .app-tooltip__flyout {
  top: 32px;
  right: 0;
  width: 200px;
  text-align: left;
  white-space: normal;
}
.gamification-header__info .app-tooltip__flyout::before {
  top: -10px;
  right: 5px;
  height: 10px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .gamification-header__info {
    right: 10px;
    margin-top: 10px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .gamification-header__banner {
    background-size: 222%;
    -ms-background-position-y: -328px;
  }
}

.gamification-content {
  font-family: Helvetica, Arial, sans-serif;
  padding-bottom: 40px;
  font-size: 14px;
  line-height: 1.6;
}
.gamification-content__headline {
  margin-top: 40px;
  margin-bottom: 20px;
  padding-top: 0;
  text-align: center;
}
.gamification-content__info {
  position: absolute;
  margin-top: 3px;
  margin-left: 10px;
}
.gamification-content__info .app-tooltip__flyout {
  top: 32px;
  right: 0;
  width: 200px;
  font-weight: normal;
  text-align: left;
  white-space: normal;
}
.gamification-content__info .app-tooltip__flyout::before {
  top: -10px;
  right: 5px;
  height: 10px;
}
.gamification-content .card-section {
  padding: 30px;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .gamification-content .card-section {
    padding-right: 16px;
    padding-left: 16px;
  }
}

.gamification-progress__title {
  padding: 0;
  text-align: center;
}
.gamification-progress__subtitle {
  color: #666;
  text-align: center;
}

.gamification-lernsafari-progress-card .card {
  background-color: #fffae6;
}
.gamification-lernsafari-progress-card .card__header {
  height: 56px;
  background-color: #fcd733;
}
.gamification-lernsafari-progress-card .card__header span {
  position: relative;
  display: inline-block;
}
.gamification-lernsafari-progress-card .card__header .icon {
  color: #fffae6;
  font-size: 56px;
}
.gamification-lernsafari-progress-card .card__header strong {
  position: absolute;
  top: 18px;
  left: 40%;
  color: #e38800;
  font-size: 22px;
  font-weight: bold;
}
.gamification-lernsafari-progress-card .card .card-section h5 {
  font-weight: lighter;
}
.gamification-lernsafari-progress-card .card .card-section h5 b {
  color: #e38800;
}
.gamification-lernsafari-progress-card .card .card-section .progress {
  width: 128px;
  margin: 0 auto 4px;
  background-color: #f4cf99;
}
.gamification-lernsafari-progress-card .card .card-section .progress-meter {
  background-color: #e38800;
}
.gamification-lernsafari-progress-card .card .card-section__headline {
  margin-bottom: 0;
  color: #e38800;
  font-weight: bold;
}

.gamification-lernsafari-bar__content {
  display: inline-block;
  vertical-align: bottom;
}
.gamification-lernsafari-bar__logo {
  background: rgba(1, 1, 1, 0) url("/assets/application/account/gamification/lernsafari/logo.svg") center center no-repeat;
  width: 51px;
  height: 63px;
  margin-right: 4px;
  margin-bottom: -27px;
}
.gamification-lernsafari-bar__link {
  display: block;
  font-size: 14px;
}
.gamification-lernsafari-bar__link:lang(de) {
  font-family: "Grundschrift", "Open Sans", Helvetica, Arial, sans-serif;
}
.gamification-lernsafari-bar__link:lang(en) {
  font-family: "Grundschrift-EN", "Open Sans", Helvetica, Arial, sans-serif;
}
.gamification-lernsafari-bar .progress {
  display: inline-block;
  width: 128px;
  height: 8px;
  margin: 0;
  background-color: #f4cf99;
}
.gamification-lernsafari-bar .progress-meter {
  transition: width 2s ease-out;
  background-color: #e38800;
}
.gamification-lernsafari-bar span {
  position: relative;
  display: inline-block;
}
.gamification-lernsafari-bar span .icon {
  color: #fcd733;
}
.gamification-lernsafari-bar span strong {
  position: absolute;
  top: 7px;
  left: 40%;
  color: #e38800;
  font-size: 10px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .gamification-lernsafari-bar {
    display: flex;
  }
  body.is-responsive .gamification-lernsafari-bar__logo {
    margin-bottom: -15px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .gamification-lernsafari-bar {
    position: relative;
    display: block;
    margin-left: 0;
  }
  body.is-responsive .gamification-lernsafari-bar__content {
    display: flex;
    align-items: baseline;
    padding: 3px 6px;
    border-radius: 4px;
    background-color: #fffae6;
  }
  body.is-responsive .gamification-lernsafari-bar__logo {
    display: none;
  }
  body.is-responsive .gamification-lernsafari-bar__link {
    margin-right: 5px;
  }
  body.is-responsive .gamification-lernsafari-bar__link::after {
    content: ":";
  }
  body.is-responsive .gamification-lernsafari-bar .progress {
    width: 100%;
  }
  body.is-responsive .gamification-lernsafari-bar span {
    margin-left: 5px;
  }
}

.gamification-counter {
  position: absolute;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e35b00;
  color: #fff;
  font-size: 9px;
  line-height: 16px;
  text-align: center;
}
.gamification-counter[data-total-count="0"], .gamification-counter[data-level-count="0"], .gamification-counter[data-feature-count="0"] {
  display: none;
}

.icons-arrow {
  display: inline-block;
  border-width: 7px;
  border-style: solid;
  border-radius: 2px;
  border-color: transparent;
}
.icons-arrow--down-gray-999 {
  border-top-color: #999;
}
.icons-arrow--right-gray-999 {
  border-left-color: #999;
}
.icons-arrow--down-white {
  border-top-color: #fff;
}
.icons-arrow--up-white {
  border-bottom-color: #fff;
}
.icons-arrow--down-blue {
  border-top-color: #06c;
}

.icons-raquo::after {
  color: #ccc;
  font-size: 16px;
  font-weight: normal;
  content: "»";
}
.icons-raquo:hover::after {
  color: #999;
}

.icons-close {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: #999;
  font-size: 13px;
  font-weight: 100;
  line-height: 16px;
}
.icons-close:hover {
  background-color: #666;
}
.icons-close::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  color: #fff;
  text-align: center;
  content: "×";
}

.icons-level {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
  display: inline-block;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.icons-level--24 {
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  line-height: 24px;
  border-radius: 3px;
  font-size: 14px;
}
.icons-level--24 .icons-level--wide, .locale-us .icons-level--24, .locale-uk .icons-level--24 {
  font-size: 13px;
}

.icons-level--32 {
  min-width: 32px;
  height: 32px;
  padding: 0 3px 0 5px;
  line-height: 32px;
  border-radius: 4px;
  font-size: 15px;
}
.icons-level--32 .icons-level--wide {
  font-size: 14px;
}

.icons-level--40 {
  min-width: 40px;
  height: 40px;
  padding: 0 5px 0 8px;
  border-radius: 5px;
  font-size: 19px;
  line-height: 40px;
}
.icons-level--40:hover, .icons-level--40.is-current {
  box-shadow: 0 0 0 2px #fff;
}

.icons-level--wide {
  padding: 0 10px;
}

.icons-bg-black {
  background-color: #666;
}

.icons-bg-gray {
  background-color: #ccc;
}

.icons-bg-yellow {
  background-color: #c9a400;
}

.icons-bg-green {
  background-color: #690;
}

.icons-bg-orange {
  background-color: #e35b00;
}

.icons-bg-blue {
  background-color: #33a0c4;
}

.icons-bg-purple {
  background-color: #9433c4;
}

.icons-level--inverted {
  background-color: #ccc;
}
.icons-level--inverted.icons-bg-black:hover, .icons-level--inverted.icons-bg-black.is-current {
  background-color: #666;
}
.icons-level--inverted.icons-bg-gray:hover, .icons-level--inverted.icons-bg-gray.is-current {
  background-color: #666;
}
.icons-level--inverted.icons-bg-yellow:hover, .icons-level--inverted.icons-bg-yellow.is-current {
  background-color: #e3b500;
}
.icons-level--inverted.icons-bg-green:hover, .icons-level--inverted.icons-bg-green.is-current {
  background-color: #690;
}
.icons-level--inverted.icons-bg-orange:hover, .icons-level--inverted.icons-bg-orange.is-current {
  background-color: #e35b00;
}
.icons-level--inverted.icons-bg-blue:hover, .icons-level--inverted.icons-bg-blue.is-current {
  background-color: #33a0c4;
}
.icons-level--inverted.icons-bg-purple:hover, .icons-level--inverted.icons-bg-purple.is-current {
  background-color: #9433c4;
}
.icons-level--inverted.is-inactive, .icons-level--inverted.is-disabled {
  background-color: #e6e8e5;
}
.icons-level--inverted.is-inactive:hover, .icons-level--inverted.is-disabled:hover {
  background-color: #e6e8e5;
}

.icons-quotes {
  position: relative;
  display: block;
  width: 24px;
  height: 20px;
  background-repeat: no-repeat;
}
.icons-quotes--green-left {
  background-image: url("/assets/application/icons/open-quote-green.svg");
}
.icons-quotes--green-right {
  background-image: url("/assets/application/icons/close-quote-green.svg");
}
.icons-quotes--green-left-en {
  margin-bottom: 12px;
  margin-left: 40px;
  background-image: url("/assets/application/icons/open-quote-green-usa.svg");
}
.icons-quotes--green-right-en {
  background-image: url("/assets/application/icons/close-quote-green-usa.svg");
}
.icons-quotes--white-left {
  margin-bottom: 12px;
  margin-left: 40px;
  background-image: url("/assets/application/icons/open-quote-white.svg");
}
.icons-quotes--white-right {
  background-image: url("/assets/application/icons/close-quote-white.svg");
}
.icons-quotes:last-of-type {
  width: 14px;
  height: 12px;
  display: inline;
  padding-left: 14px;
  margin-right: -14px;
}

.icon-info {
  background-image: url("/assets/classes/info-icon.svg");
  width: 24px;
  height: 24px;
}
.icon-info:hover {
  background-image: url("/assets/classes/info-icon-dark.svg");
}

.biologie.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/biologie.svg") center center no-repeat;
  background-size: contain;
}
a:hover .biologie.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/biologie.svg") center center no-repeat;
  background-size: contain;
}

.chemie.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/chemie.svg") center center no-repeat;
  background-size: contain;
}
a:hover .chemie.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/chemie.svg") center center no-repeat;
  background-size: contain;
}

.deutsch.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/deutsch.svg") center center no-repeat;
  background-size: contain;
}
a:hover .deutsch.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/deutsch.svg") center center no-repeat;
  background-size: contain;
}

.geographie.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/geographie.svg") center center no-repeat;
  background-size: contain;
}
a:hover .geographie.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/geographie.svg") center center no-repeat;
  background-size: contain;
}

.geschichte.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/geschichte.svg") center center no-repeat;
  background-size: contain;
}
a:hover .geschichte.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/geschichte.svg") center center no-repeat;
  background-size: contain;
}

.lern-und-arbeitstechniken.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/lern-und-arbeitstechniken.svg") center center no-repeat;
  background-size: contain;
}
a:hover .lern-und-arbeitstechniken.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/lern-und-arbeitstechniken.svg") center center no-repeat;
  background-size: contain;
}

.kreativitaet-und-bewegung.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/kreativitaet-und-bewegung.svg") center center no-repeat;
  background-size: contain;
}
a:hover .kreativitaet-und-bewegung.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/kreativitaet-und-bewegung.svg") center center no-repeat;
  background-size: contain;
}

.mathematik.icon24, .icon24.mathematics {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/mathematik.svg") center center no-repeat;
  background-size: contain;
}
a:hover .mathematik.icon24, a:hover .icon24.mathematics {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/mathematik.svg") center center no-repeat;
  background-size: contain;
}

.musik.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/musik.svg") center center no-repeat;
  background-size: contain;
}
a:hover .musik.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/musik.svg") center center no-repeat;
  background-size: contain;
}

.physik.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/physik.svg") center center no-repeat;
  background-size: contain;
}
a:hover .physik.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/physik.svg") center center no-repeat;
  background-size: contain;
}

.sachunterricht.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/sachunterricht.svg") center center no-repeat;
  background-size: contain;
}
a:hover .sachunterricht.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/sachunterricht.svg") center center no-repeat;
  background-size: contain;
}

.englisch.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/englisch.svg") center center no-repeat;
  background-size: contain;
}
a:hover .englisch.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/englisch.svg") center center no-repeat;
  background-size: contain;
}

.franzoesisch.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/franzoesisch.svg") center center no-repeat;
  background-size: contain;
}
a:hover .franzoesisch.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/franzoesisch.svg") center center no-repeat;
  background-size: contain;
}

.latein.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/latein.svg") center center no-repeat;
  background-size: contain;
}
a:hover .latein.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/latein.svg") center center no-repeat;
  background-size: contain;
}

.spanisch.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/spanisch.svg") center center no-repeat;
  background-size: contain;
}
a:hover .spanisch.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/spanisch.svg") center center no-repeat;
  background-size: contain;
}

.deutsch-als-zweitsprache.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/deutsch-als-zweitsprache.svg") center center no-repeat;
  background-size: contain;
}
a:hover .deutsch-als-zweitsprache.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/deutsch-als-zweitsprache.svg") center center no-repeat;
  background-size: contain;
}

.english-language-arts.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/english-language-arts.svg") center center no-repeat;
  background-size: contain;
}
a:hover .english-language-arts.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/english-language-arts.svg") center center no-repeat;
  background-size: contain;
}

.social-studies.icon24 {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/social-studies.svg") center center no-repeat;
  background-size: contain;
}
a:hover .social-studies.icon24 {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/social-studies.svg") center center no-repeat;
  background-size: contain;
}

a.biologie.icon24, a.biologie .icon24 {
  cursor: pointer;
}
a.biologie.icon24:hover, a.biologie .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/biologie.svg") center center no-repeat;
}

a.chemie.icon24, a.chemie .icon24 {
  cursor: pointer;
}
a.chemie.icon24:hover, a.chemie .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/chemie.svg") center center no-repeat;
}

a.deutsch.icon24, a.deutsch .icon24 {
  cursor: pointer;
}
a.deutsch.icon24:hover, a.deutsch .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/deutsch.svg") center center no-repeat;
}

a.geographie.icon24, a.geographie .icon24 {
  cursor: pointer;
}
a.geographie.icon24:hover, a.geographie .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/geographie.svg") center center no-repeat;
}

a.geschichte.icon24, a.geschichte .icon24 {
  cursor: pointer;
}
a.geschichte.icon24:hover, a.geschichte .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/geschichte.svg") center center no-repeat;
}

a.lern-und-arbeitstechniken.icon24, a.lern-und-arbeitstechniken .icon24 {
  cursor: pointer;
}
a.lern-und-arbeitstechniken.icon24:hover, a.lern-und-arbeitstechniken .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/lern-und-arbeitstechniken.svg") center center no-repeat;
}

a.kreativitaet-und-bewegung.icon24, a.kreativitaet-und-bewegung .icon24 {
  cursor: pointer;
}
a.kreativitaet-und-bewegung.icon24:hover, a.kreativitaet-und-bewegung .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/kreativitaet-und-bewegung.svg") center center no-repeat;
}

a.mathematik.icon24, a.icon24.mathematics, a.mathematik .icon24, a.mathematics .icon24 {
  cursor: pointer;
}
a.mathematik.icon24:hover, a.icon24.mathematics:hover, a.mathematik .icon24:hover, a.mathematics .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/mathematik.svg") center center no-repeat;
}

a.musik.icon24, a.musik .icon24 {
  cursor: pointer;
}
a.musik.icon24:hover, a.musik .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/musik.svg") center center no-repeat;
}

a.physik.icon24, a.physik .icon24 {
  cursor: pointer;
}
a.physik.icon24:hover, a.physik .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/physik.svg") center center no-repeat;
}

a.sachunterricht.icon24, a.sachunterricht .icon24 {
  cursor: pointer;
}
a.sachunterricht.icon24:hover, a.sachunterricht .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/sachunterricht.svg") center center no-repeat;
}

a.englisch.icon24, a.englisch .icon24 {
  cursor: pointer;
}
a.englisch.icon24:hover, a.englisch .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/englisch.svg") center center no-repeat;
}

a.franzoesisch.icon24, a.franzoesisch .icon24 {
  cursor: pointer;
}
a.franzoesisch.icon24:hover, a.franzoesisch .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/franzoesisch.svg") center center no-repeat;
}

a.latein.icon24, a.latein .icon24 {
  cursor: pointer;
}
a.latein.icon24:hover, a.latein .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/latein.svg") center center no-repeat;
}

a.spanisch.icon24, a.spanisch .icon24 {
  cursor: pointer;
}
a.spanisch.icon24:hover, a.spanisch .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/spanisch.svg") center center no-repeat;
}

a.deutsch-als-zweitsprache.icon24, a.deutsch-als-zweitsprache .icon24 {
  cursor: pointer;
}
a.deutsch-als-zweitsprache.icon24:hover, a.deutsch-als-zweitsprache .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/deutsch-als-zweitsprache.svg") center center no-repeat;
}

a.english-language-arts.icon24, a.english-language-arts .icon24 {
  cursor: pointer;
}
a.english-language-arts.icon24:hover, a.english-language-arts .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/english-language-arts.svg") center center no-repeat;
}

a.social-studies.icon24, a.social-studies .icon24 {
  cursor: pointer;
}
a.social-studies.icon24:hover, a.social-studies .icon24:hover {
  height: 24px;
  width: 24px;
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/24/social-studies.svg") center center no-repeat;
}

.icon24 {
  display: block;
  color: #fff;
  line-height: 0.8;
  text-align: center;
  width: 24px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: bold;
  height: 24px;
  line-height: 24px;
}
.icon24 span {
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
}
.icon24.is-current {
  margin: -2px 0 !important;
  border: 2px solid #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.icon24.is-inactive, .icon24.is-disabled {
  opacity: 0.4;
}
.icon24.yellow {
  background-color: #e6bd1a;
  background-image: linear-gradient(#e9c433, #e3b500);
}
.icon24.green {
  background-color: #80b300;
  background-image: linear-gradient(#9c0, #690);
}
.icon24.orange {
  background-color: #e66c1a;
  background-image: linear-gradient(#e97c33, #e35b00);
}
.icon24.blue {
  background-color: #4daccb;
  background-image: linear-gradient(#66b8d2, #33a0c4);
}
.icon24.gray {
  background-color: #a6aaa1;
  background-image: linear-gradient(#b3b6ae, #999d94);
}
.icon24.purple {
  background-color: #bc80da;
  background-image: linear-gradient(#c999e1, #af66d3);
}
.icon24.purple span:first-of-type {
  display: block;
  position: relative;
  top: 0;
  left: -1px;
  padding-top: 0;
  font-size: 12px;
  text-transform: none;
}
.icon24.purple span:first-of-type:first-letter {
  font-size: 13.4831460674px;
}

a.icon24, a .icon24 {
  cursor: pointer;
}
a.icon24.yellow, a .icon24.yellow {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon24.yellow:hover, a .icon24.yellow:hover {
  background: #b08f00;
}
a.icon24.green, a .icon24.green {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon24.green:hover, a .icon24.green:hover {
  background: #587600;
}
a.icon24.orange, a .icon24.orange {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon24.orange:hover, a .icon24.orange:hover {
  background: #ca5100;
}
a.icon24.blue, a .icon24.blue {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon24.blue:hover, a .icon24.blue:hover {
  background: #1c8dff;
}
a.icon24.gray, a .icon24.gray {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon24.gray:hover, a .icon24.gray:hover {
  background: #8c9187;
}
a.icon24.purple, a .icon24.purple {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon24.purple:hover, a .icon24.purple:hover {
  background: #8b5c8b;
}

.icon32 {
  display: block;
  color: #fff;
  line-height: 0.8;
  text-align: center;
  width: 32px;
  border-radius: 3px;
  font-size: 8px;
}
.icon32 span {
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
}
.icon32.is-current {
  margin: -2px 0 !important;
  border: 2px solid #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.icon32.is-inactive, .icon32.is-disabled {
  opacity: 0.4;
}
.icon32 span {
  font-size: 16px;
  height: 25.6px;
  padding-top: 6.4px;
}
.icon32.yellow {
  background-color: #e6bd1a;
  background-image: linear-gradient(#e9c433, #e3b500);
  height: 28px;
  padding-top: 4px;
  font-size: 6.4px;
  text-transform: uppercase;
}
.icon32.green {
  background-color: #80b300;
  background-image: linear-gradient(#9c0, #690);
  height: 28px;
  padding-top: 4px;
  font-size: 6.4px;
  text-transform: uppercase;
}
.icon32.orange {
  background-color: #e66c1a;
  background-image: linear-gradient(#e97c33, #e35b00);
  height: 28px;
  padding-top: 4px;
  font-size: 6.4px;
  text-transform: uppercase;
}
.icon32.blue {
  background-color: #4daccb;
  background-image: linear-gradient(#66b8d2, #33a0c4);
  height: 28px;
  padding-top: 4px;
  font-size: 6.4px;
  text-transform: uppercase;
}
.icon32.gray {
  background-color: #a6aaa1;
  background-image: linear-gradient(#b3b6ae, #999d94);
  height: 28px;
  padding-top: 4px;
  font-size: 6.4px;
  text-transform: uppercase;
}
.icon32.purple {
  background-color: #bc80da;
  background-image: linear-gradient(#c999e1, #af66d3);
  height: 26.6666666667px;
  padding-top: 5.3333333333px;
}
.icon32.purple span:first-of-type {
  display: block;
  position: relative;
  top: 0;
  left: -1px;
  padding-top: 0;
  font-size: 16px;
  text-transform: none;
}
.icon32.purple span:first-of-type:first-letter {
  font-size: 17.9775280899px;
}

a.icon32, a .icon32 {
  cursor: pointer;
}
a.icon32.yellow, a .icon32.yellow {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon32.yellow:hover, a .icon32.yellow:hover {
  background: #b08f00;
}
a.icon32.green, a .icon32.green {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon32.green:hover, a .icon32.green:hover {
  background: #587600;
}
a.icon32.orange, a .icon32.orange {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon32.orange:hover, a .icon32.orange:hover {
  background: #ca5100;
}
a.icon32.blue, a .icon32.blue {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon32.blue:hover, a .icon32.blue:hover {
  background: #1c8dff;
}
a.icon32.gray, a .icon32.gray {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon32.gray:hover, a .icon32.gray:hover {
  background: #8c9187;
}
a.icon32.purple, a .icon32.purple {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
a.icon32.purple:hover, a .icon32.purple:hover {
  background: #8b5c8b;
}

a:hover .icon24.yellow {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
  background: #b08f00;
}
a:hover .icon24.green {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
  background: #587600;
}
a:hover .icon24.orange {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
  background: #ca5100;
}
a:hover .icon24.blue {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
  background: #1c8dff;
}
a:hover .icon24.gray {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
  background: #8c9187;
}
a:hover .icon24.purple {
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
  background: #8b5c8b;
}

.icons-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.icon-spinner {
  width: 100%;
  background: url("/assets/application/shared/spinner/spinner_green.svg") center center no-repeat;
}

.icon-videos-worksheet {
  position: relative;
  margin-right: 10px;
  vertical-align: middle;
}
.icon-videos-worksheet > img {
  position: absolute;
  top: 14px;
  left: 6px;
  width: 34px;
  height: 22px;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .icon-videos-worksheet {
    margin-right: 5px;
  }
}

.icon-encircled-plus {
  width: 32px;
  height: 32px;
  background: url("/assets/application/account/activity/encircled-plus.svg") center center no-repeat;
}
.icon-encircled-plus:hover {
  background: url("/assets/application/account/activity/encircled-plus-hover.svg") center center no-repeat;
}

.icon-gray-plus {
  width: 12px;
  height: 12px;
  background: url("/assets/application/icons/gray-plus.svg");
}

#lightbox-overlay, #lightbox-without-plugin-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(51, 51, 51, 0.45);
  z-index: 1000005;
}

#lightbox, #lightbox-without-plugin {
  position: absolute;
  left: 50%;
  display: none;
  transform: translate(-50%);
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 5px #333;
  z-index: 1000006;
}
@media only screen and (max-width: 639px) {
  body.is-responsive #lightbox, body.is-responsive #lightbox-without-plugin {
    right: 10px;
    left: 10px !important;
    transform: none;
    background-color: #fff;
  }
  body.is-responsive #lightbox.full-screen, body.is-responsive #lightbox-without-plugin.full-screen {
    right: 0;
    left: 0 !important;
    height: 100%;
  }
}

.simple-lightbox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000007;
}
.simple-lightbox__overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.simple-lightbox__popup {
  position: fixed;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  z-index: 1000008;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .simple-lightbox__popup {
    position: fixed;
    top: 0 !important;
    right: 0;
    left: 0 !important;
    border-radius: 0;
    transform: none !important;
  }
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h2 + h3 {
  margin: 64px 0 0;
}
.markdown h4,
.markdown h5,
.markdown h6 {
  margin: 32px 0 0;
}
.markdown > h1:first-child,
.markdown > h2:first-child,
.markdown > h3:first-child,
.markdown > p:first-child {
  margin-top: 0;
}
.markdown img {
  display: block;
  max-width: 100%;
  margin: auto;
  padding: 8px 0;
}
.markdown p,
.markdown ol,
.markdown ul {
  margin-top: 32px;
  margin-bottom: 0;
}
.markdown p > ul, .markdown p ol,
.markdown ol > ul,
.markdown ol ol,
.markdown ul > ul,
.markdown ul ol {
  margin-top: 0;
}
.markdown p + p,
.markdown p + ol,
.markdown p + ul,
.markdown ol + p,
.markdown ol + ol,
.markdown ol + ul,
.markdown ul + p,
.markdown ul + ol,
.markdown ul + ul {
  margin-top: 24px;
}
.markdown ul, .markdown ol {
  padding-left: 30px;
  font-size: 16px;
}
.markdown ul li, .markdown ol li {
  padding-bottom: 7px;
}
.markdown ul a, .markdown ol a {
  color: #06c;
  cursor: pointer;
  text-decoration: underline;
}
.markdown ul a:hover, .markdown ol a:hover {
  color: #09f;
}
.markdown p {
  position: relative;
}
.markdown ul {
  color: #333;
  list-style: disc;
}
.markdown ol {
  color: #333;
  list-style: decimal;
}
.markdown i, .markdown em {
  font-style: italic;
}
.markdown textarea {
  box-sizing: border-box;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid #aaa;
  color: #666;
  font-size: 16px;
  line-height: 1.6;
  box-shadow: 0 4px 4px 0 #e6e8e5 inset;
  resize: none;
}
.markdown .markdown-table-container {
  margin-top: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.markdown table {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  border: solid 1px #e6e8e5;
  background-color: #fff;
  font-size: 14px;
}
.markdown table caption {
  padding: 8px;
  caption-side: bottom;
}
.markdown table thead tr,
.markdown table tbody tr:not(:last-child) {
  border-bottom: solid 1px #e6e8e5;
}
.markdown table th,
.markdown table td {
  padding: 8px 16px;
}
.markdown table th p,
.markdown table td p {
  color: #333;
}
.markdown table th:not(:first-child),
.markdown table td:not(:first-child) {
  border-left: solid 1px #e6e8e5;
}
.markdown table th {
  background: #f8f8f8;
  text-align: left;
  vertical-align: top;
}
.markdown table ol,
.markdown table ul {
  padding-left: 8px;
  list-style-type: disc;
}
.markdown.has-smaller-headlines h1 {
  font-size: 32px;
}
.markdown.has-smaller-headlines h2 {
  font-size: 24px;
}
.markdown.has-smaller-headlines h3 {
  font-size: 20px;
}
.markdown.has-smaller-headlines h4 {
  font-size: 16px;
}
.markdown .markdown-video img {
  width: 320px;
}
.markdown .markdown-video::before, .markdown .markdown-video::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  content: "";
}
.markdown .markdown-video::before {
  background: url("/assets/application/layouts/play.svg") top left;
  background-size: contain;
  z-index: 2;
}
.markdown .markdown-video::after {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.8);
}
@media only screen and (max-width: 959px) {
  body.is-responsive .markdown h1,
  body.is-responsive .markdown h2,
  body.is-responsive .markdown h3 {
    margin: 32px 0 0;
  }
  body.is-responsive .markdown h4,
  body.is-responsive .markdown h5,
  body.is-responsive .markdown h6 {
    margin: 16px 0 0;
  }
  body.is-responsive .markdown img {
    padding: 16px 0;
  }
  body.is-responsive .markdown iframe {
    width: 100%;
  }
  body.is-responsive .markdown ol,
  body.is-responsive .markdown ul {
    font-size: 14px;
    line-height: 1.6;
  }
  body.is-responsive .markdown p {
    margin: 16px 0 0;
  }
  body.is-responsive .markdown p + p,
  body.is-responsive .markdown p + ul,
  body.is-responsive .markdown p + ol {
    margin-top: 16px;
  }
}

body {
  min-width: 960px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive {
    min-width: 640px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive {
    min-width: 360px;
  }
}

.page-content > .content {
  padding-bottom: 80px;
}

.content-header {
  border-bottom: 1px solid #e6e8e5;
  background-color: #f8f8f8;
}

.site-nav-header {
  border-bottom: 4px solid #9c0;
  background-color: #fff;
}

.content-footer {
  border-top: 1px solid #ccc;
  background-color: #f8f8f8;
  box-shadow: 0 3px 3px -3px #ccc inset;
}

@media print {
  .page-header, .page-footer {
    display: none;
  }
}
.warnings {
  border-top: 61px solid #3c3c3c;
}
.warnings--dach {
  border-top: 61px solid #fff;
}

.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #3c3c3c;
  z-index: 9999;
}
.page-header__logo {
  display: inline-block;
  width: 141px;
  height: 60px;
  margin-right: 20px;
  transition: width 0.6s ease 0s;
  background-size: cover;
  font-size: 0;
  vertical-align: middle;
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/sofatutor_logo_de.svg") left center no-repeat;
}
.page-header__logo:not(span):hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/sofatutor_logo_de_hover.svg") left center no-repeat;
}
.locale-ch .page-header__logo {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/sofatutor_logo_ch.svg") left center no-repeat;
  width: 125px;
}
.locale-ch .page-header__logo:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/sofatutor_logo_ch_hover.svg") left center no-repeat;
}
.locale-at .page-header__logo {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/sofatutor_logo_at.svg") left center no-repeat;
  width: 124px;
}
.locale-at .page-header__logo:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/sofatutor_logo_at_hover.svg") left center no-repeat;
}
.locale-uk .page-header__logo {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/sofatutor_logo_uk.svg") left center no-repeat;
  width: 164px;
}
.locale-uk .page-header__logo:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/sofatutor_logo_uk_hover.svg") left center no-repeat;
}
.page-header__logo.winter {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/winter_theme/sofatutor_logo_de_winter.svg") left center no-repeat;
  width: 152px;
}
.locale-ch .page-header__logo.winter {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/winter_theme/sofatutor_logo_ch_winter.svg") left center no-repeat;
  width: 125px;
}
.locale-ch .page-header__logo.winter:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/sofatutor_logo_ch_hover_winter.svg") left center no-repeat;
}
.locale-at .page-header__logo.winter {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/winter_theme/sofatutor_logo_at_winter.svg") left center no-repeat;
  width: 124px;
}
.locale-at .page-header__logo.winter:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/sofatutor_logo_at_hover_winter.svg") left center no-repeat;
}
.page-header__logo.spring {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/spring_theme/sofatutor_logo_de_spring.svg") left center no-repeat;
  width: 152px;
}
.locale-ch .page-header__logo.spring {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/spring_theme/sofatutor_logo_ch_spring.svg") left center no-repeat;
}
.locale-ch .page-header__logo.spring:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/spring_theme/sofatutor_logo_ch_hover_spring.svg") left center no-repeat;
}
.locale-at .page-header__logo.spring {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/spring_theme/sofatutor_logo_at_spring.svg") left center no-repeat;
}
.locale-at .page-header__logo.spring:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/spring_theme/sofatutor_logo_at_hover_spring.svg") left center no-repeat;
}
.page-header__button {
  display: block;
  height: 29px;
  padding: 0 17px;
  border: 1px solid #666;
  border-radius: 3px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
}
.page-header__menu {
  position: absolute;
  top: 20px;
  right: 10px;
  display: none;
  width: 24px;
  cursor: pointer;
}
.page-header__menu .gamification-counter {
  top: -8px;
  right: -8px;
}
.page-header__menu span {
  position: relative;
  display: block;
  width: 100%;
  height: 3px;
  transition: transform 0.3s;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 2px 10px 0 0.3;
}
.page-header__menu span + span {
  margin-top: 4px;
}
.page-header__menu.is-open span:nth-child(1) {
  animation: ease 0.7s top forwards;
}
.page-header__menu.is-open span:nth-child(2) {
  animation: ease 0.7s scaled forwards;
}
.page-header__menu.is-open span:nth-child(3) {
  animation: ease 0.7s bottom forwards;
}
.page-header__menu.is-open .gamification-counter {
  display: none;
}
.page-header__menu.is-closed span:nth-child(1) {
  animation: ease 0.7s top-2 forwards;
}
.page-header__menu.is-closed span:nth-child(2) {
  animation: ease 0.7s scaled-2 forwards;
}
.page-header__menu.is-closed span:nth-child(3) {
  animation: ease 0.7s bottom-2 forwards;
}
.page-header__submenu::after {
  position: absolute;
  top: 20px;
  right: 10px;
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/menu_close.svg") center center no-repeat;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  transition: transform 0.3s linear 0s;
  background-size: cover;
  content: "";
}
.page-header__submenu:hover::after {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/menu_close_hover.svg") center center no-repeat;
  background-size: cover;
}
.page-header__submenu.is-open::after {
  transform: rotate(0);
}
.page-header__submenu.is-open .gamification-counter {
  display: none;
}
.page-header__submenu .gamification-counter {
  right: 50%;
  margin-right: -68px;
}
.locale-us .page-header__submenu .gamification-counter, .locale-uk .page-header__submenu .gamification-counter {
  margin-right: -61px;
}
.page-header__submenu-link {
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
  display: block;
  margin: 0;
  padding: 15px;
  border-top: 1px solid #333;
  color: #ccc;
  font-size: 13px;
  cursor: pointer;
}
.page-header__submenu-link:hover {
  background-color: #333;
  color: #ccc;
}
.page-header__submenu-link .subject-icon-border {
  fill: #999;
}
.page-header--white {
  transition: top 0.3s ease-out;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
.page-header--white .page-header__menu span {
  background: #666;
}
.page-header--white .page-header__logo:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/white_nav_bar/sofatutor_logo_dark_green.svg") left center no-repeat;
}
.locale-ch .page-header--white .page-header__logo:hover:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/white_nav_bar/sofatutor_logo_dark_green_ch.svg") left center no-repeat;
}
.locale-at .page-header--white .page-header__logo:hover:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/white_nav_bar/sofatutor_logo_dark_green_at.svg") left center no-repeat;
}
.page-header--white .page-header__logo.winter:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/winter_theme/sofatutor_logo_de_hover_winter.svg") left center no-repeat;
}
.locale-ch .page-header--white .page-header__logo.winter:hover:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/winter_theme/sofatutor_logo_ch_hover_winter.svg") left center no-repeat;
}
.locale-at .page-header--white .page-header__logo.winter:hover:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/winter_theme/sofatutor_logo_at_hover_winter.svg") left center no-repeat;
}
.page-header--white .page-header__logo.spring:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/spring_theme/sofatutor_logo_de_hover_spring.svg") left center no-repeat;
}
.locale-ch .page-header--white .page-header__logo.spring:hover:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/spring_theme/sofatutor_logo_ch_hover_spring.svg") left center no-repeat;
}
.locale-at .page-header--white .page-header__logo.spring:hover:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/spring_theme/sofatutor_logo_at_hover_spring.svg") left center no-repeat;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .page-header {
    position: fixed;
  }
  body.is-responsive .page-header__logo {
    width: 28px;
    margin-right: 8px;
  }
  body.is-responsive .page-header__logo:lang(en-GB) {
    width: 32px;
  }
  body.is-responsive .page-header__button {
    height: 33px;
    margin-top: 12px;
    margin-bottom: 12px;
    line-height: 33px;
  }
  body.is-responsive .page-header__button::before {
    top: 9px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .page-header {
    position: relative;
    margin-top: -60px;
  }
  body.is-responsive .page-header__logo {
    display: inline-block;
    margin-right: 0;
  }
  body.is-responsive .page-header__logo.winter {
    width: 152px !important;
  }
  body.is-responsive .page-header__logo.spring {
    width: 152px !important;
  }
  body.is-responsive .page-header__logo--expanded {
    width: 141px;
  }
  body.is-responsive .page-header__logo--expanded:lang(en-GB) {
    width: 170px;
  }
  body.is-responsive .page-header__logo--animated {
    animation-name: expand-logo;
    animation-delay: 1500ms;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }
  body.is-responsive .page-header__logo--animated:lang(en-GB) {
    animation-name: expand-logo-uk;
  }
  body.is-responsive .page-header__list, body.is-responsive .page-header__item {
    display: inline-block;
  }
  body.is-responsive .page-header__item {
    margin-left: 16px;
    font-size: 14px;
    font-weight: 600;
  }
  body.is-responsive .page-header__item a, body.is-responsive .page-header__item a:visited, body.is-responsive .page-header__item a:hover, body.is-responsive .page-header__item a:active {
    color: #fff;
  }
  body.is-responsive .page-header__menu {
    display: block;
  }
  body.is-responsive .page-header--white {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-top: unset;
  }
}

.page-header-main__nav {
  padding-left: 10px;
  float: left;
  text-align: center;
}
.page-header-main__nav--dach-quiz {
  float: none;
}
.page-header-main__nav--dach-quiz .page-header-main__logo {
  float: none;
}
.page-header-main__logo {
  float: left;
}
.page-header-main__learning-group-button {
  position: absolute;
  top: 16px;
  left: 16px;
}
.page-header-main__learning-group-button.button.small {
  padding: 8px;
}
.page-header-main__list {
  float: left;
}
.page-header-main__list--phones {
  display: none;
  width: 100%;
}
.page-header-main__list--phones .information-page-features__title {
  margin-bottom: 0;
}
.page-header-main__list--white .page-header-main__item {
  background-color: unset;
}
.page-header-main__list--white .page-header-main__link {
  color: #333;
  text-shadow: none;
}
.page-header-main__list--white .page-header-main__link:hover {
  color: #666;
}
.page-header-main__item {
  position: relative;
  float: left;
  background-color: #3c3c3c;
  z-index: 1;
}
.page-header-main__item--profile-switch {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  background-color: #333;
  cursor: pointer;
}
.page-header-main__item--login {
  display: none;
}
.page-header-main__item--trial-period-hotline .phone-icon {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/hotline_trial_period.svg") center center no-repeat;
  width: 24px;
  height: 24px;
  margin-right: 4px;
  background-size: contain;
}
.page-header-main__item--trial-period-hotline a {
  color: #9c0;
}
.page-header-main__item--trial-period-hotline a:focus, .page-header-main__item--trial-period-hotline a:hover {
  color: #9c0;
}
.page-header-main__link {
  display: block;
  padding: 22px 8px;
  color: #f8f8f8;
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
  text-shadow: 0 1px 1px #333;
  cursor: pointer;
}
.page-header-main__link:hover {
  color: #999;
}
.page-header-main__link .gamification-counter {
  right: 50%;
  margin-right: -48px;
}
.locale-us .page-header-main__link .gamification-counter, .locale-uk .page-header-main__link .gamification-counter {
  margin-right: -61px;
}
.page-header-main__link--arrow {
  position: relative;
}
.page-header-main__link--arrow::after {
  position: absolute;
  top: 50%;
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/subjects_menu_toggle.svg") center center no-repeat;
  width: 8px;
  height: 7px;
  margin-top: -3px;
  content: "";
}
@media only screen and (max-width: 959px) {
  body.is-responsive .page-header-main__link {
    padding-right: 10px;
  }
  body.is-responsive .page-header-main__link--arrow::after {
    display: none;
  }
  body.is-responsive .page-header-main__list--white.page-header-main__list--phones .page-header-main__link {
    background-color: #fff;
    border-top: 1px solid #e6e8e5;
  }
  body.is-responsive .page-header-main__list--white.page-header-main__list--white.page-header-main__list--phones {
    overflow-y: scroll;
    max-height: 90vh;
  }
  body.is-responsive .page-header-main__list--white .page-header__submenu::after {
    background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/white_nav_bar/menu_close.svg") center center no-repeat;
  }
  body.is-responsive .page-header-main__list--white .page-header__submenu:hover::after {
    background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/menu_close_hover.svg") center center no-repeat;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .page-header-main__nav {
    width: 100%;
    padding-left: 0;
    float: none;
    text-align: center;
  }
  body.is-responsive .page-header-main__logo {
    float: none;
  }
  body.is-responsive .page-header-main__logo--experiment-v3 {
    text-align: left;
  }
  body.is-responsive .page-header-main__list {
    display: none;
  }
  body.is-responsive .page-header-main__list--phones {
    display: block;
  }
  body.is-responsive .page-header-main__list--default {
    display: none;
  }
  body.is-responsive .page-header-main__item {
    float: none;
  }
  body.is-responsive .page-header-main__item--login {
    display: block;
  }
  body.is-responsive .page-header-main__link {
    padding: 15px 0;
    border-top: 1px solid #333;
    background-color: #333;
    font-size: 16px;
    font-weight: normal;
  }
  body.is-responsive .page-header-main__link:hover {
    background-color: #333;
  }
}

.page-header-sub-nav {
  padding-right: 10px;
  float: right;
  text-align: right;
}
.page-header-sub-nav__logged-in {
  position: relative;
  margin-left: 5px;
  color: #999;
  font-size: 14px;
  line-height: 120%;
}
.page-header-sub-nav__logged-in .page-header-sub-nav__dropdown {
  top: 45px;
}
.page-header-sub-nav__list {
  display: table-row;
  height: 60px;
}
.page-header-sub-nav__list--white .page-header-login__link {
  color: #333;
  font-weight: 700;
}
.page-header-sub-nav__list--white .page-header-login__link:hover {
  background-color: #e6e8e5;
}
.page-header-sub-nav__list--white .page-header-login__link:hover, .page-header-sub-nav__list--white .page-header-login__link:focus {
  color: #333;
}
.page-header-sub-nav__list--white .page-header-hotline {
  color: #666;
}
.page-header-sub-nav__item {
  display: table-cell;
  vertical-align: middle;
}
.page-header-sub-nav__item:not(:first-of-type) {
  padding-left: 10px;
}
.page-header-sub-nav__item .button {
  margin-right: 8px;
}
.page-header-sub-nav__dropdown {
  position: absolute;
  top: 65px;
  right: -15px;
  border-radius: 5px;
  box-shadow: 0 0 10px #666;
  z-index: 9999;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .page-header-sub-nav {
    display: none;
  }
}

.page-header-hotline, .page-header-trial-period-hotline, .page-header-envelope {
  position: relative;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  padding-right: 15px;
  padding-left: 48px;
  color: #999;
  font-size: 9px;
  font-weight: 600;
  line-height: 120%;
  text-transform: uppercase;
  text-align: left;
}
.page-header-hotline__support-hotline, .page-header-trial-period-hotline__support-hotline, .page-header-envelope__support-hotline {
  margin-top: 1px;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: -1px;
}
.page-header-hotline a, .page-header-trial-period-hotline a, .page-header-envelope a {
  color: inherit;
}

@media only screen and (max-width: 959px) {
  body.is-responsive .page-header-hotline, body.is-responsive .page-header-envelope {
    display: none;
  }
}

.page-header-hotline {
  padding-left: 40px;
}
.page-header-hotline::before {
  position: absolute;
  top: 18px;
  left: 10px;
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/hotline.svg") center center no-repeat;
  width: 24px;
  height: 24px;
  background-size: cover;
  content: "";
}

.page-header-trial-period-hotline::before {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/hotline_trial_period.svg") center center no-repeat;
  width: 24px;
  height: 24px;
  background-size: cover;
  content: "";
}
.page-header-trial-period-hotline__support-hotline {
  color: #9c0;
  line-height: 1.2;
}

.page-header-envelope a {
  font-size: 13px;
  font-weight: bold;
  text-transform: lowercase;
}
.page-header-envelope::before {
  position: absolute;
  left: 18px;
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/envelope.svg") center center no-repeat;
  width: 24px;
  height: 24px;
  content: "";
}

.page-header-flyout {
  position: absolute;
  top: 65px;
  left: 50%;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 10px #999;
}
.page-header-flyout::after {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -12px;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #fff;
  border-left: 12px solid transparent;
  content: "";
}
.page-header-flyout__container {
  max-height: calc(100vh - 64px);
  overflow: auto;
}
.page-header-flyout__title, .page-header-flyout__subtitle {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: block;
  padding: 40px 32px 16px;
  background-color: #fff;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  line-height: 140%;
  text-align: left;
}
.page-header-flyout__subtitle {
  padding: 0 32px 8px;
  font-weight: 300;
}
.page-header-flyout__content {
  padding: 0 16px 8px;
  text-align: left;
}
.page-header-flyout__item {
  position: relative;
}
.page-header-flyout__item:not(:last-child) {
  border-bottom: 1px solid #ccc;
}
.page-header-flyout__item .gamification-counter {
  top: 12px;
  left: 57px;
}
.page-header-flyout__item--schools a, .page-header-flyout__item--teachers a {
  font-weight: 700;
}
.page-header-flyout__link {
  font-family: Helvetica, Arial, sans-serif;
  display: block;
  padding: 8px;
  color: #333;
  font-size: 13px;
  line-height: 1.85;
  text-align: left;
  cursor: pointer;
}
.page-header-flyout__link:focus {
  color: #333;
}
.page-header-flyout__link:hover {
  background-color: #f8f8f8;
  color: #333;
}
.page-header-flyout--features {
  width: 625px;
  margin-left: -150px;
  background-color: #fff;
}
.page-header-flyout--features .page-header-flyout__container {
  padding-top: 32px;
  padding-bottom: 32px;
}
.page-header-flyout--features::after {
  left: 24%;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .page-header-flyout--features {
    margin-left: -150px;
  }
  body.is-responsive .page-header-flyout--features::after {
    left: 25%;
  }
}
.page-header-flyout--small {
  width: 224px;
}
.page-header-flyout--infos {
  margin-left: -120px;
}
.page-header-flyout--infos .page-header-flyout__content {
  padding-top: 16px;
  padding-bottom: 16px;
}
.page-header-flyout--infos .page-header-flyout__content .page-header-flyout__item:first-of-type {
  border-top: 1px solid #ccc;
}
.page-header-flyout--infos .page-header-flyout__content .page-header-flyout__item:last-of-type {
  border-bottom: 1px solid #ccc;
}

.feature-icon-list {
  margin-bottom: 16px;
  text-align: left;
}
.feature-icon-list__icon {
  width: 64px;
  height: 64px;
}
.feature-icon-list__link {
  position: relative;
  padding: 16px 64px 16px 32px;
}
.feature-icon-list__link:hover {
  background-color: #f8f8f8;
}
.feature-icon-list__link:hover .icon--arrow-simple {
  color: #690;
}
.feature-icon-list__link .icon--arrow-simple {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
}
.feature-icon-list__title {
  color: #333;
}

.information-content__item {
  margin-bottom: 10px;
}
.information-content__item:hover {
  background: #f8f8f8;
}
.information-content .card-section {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #333;
  font-size: 14px;
  font-weight: bold;
}

.page-header-teacher-box {
  position: relative;
  cursor: pointer;
}
.page-header-teacher-box__link {
  position: relative;
  color: #999;
}
.page-header-teacher-box__dropdown {
  display: none;
  width: 250px;
  margin-left: -125px;
  color: #333;
  font-size: 14px;
  line-height: 140%;
  text-align: left;
}
.page-header-teacher-box__dropdown p {
  padding: 20px 50px 0 30px;
}
.locale-us .page-header-teacher-box__dropdown p, .locale-uk .page-header-teacher-box__dropdown p {
  padding: 20px 50px 20px 30px;
}
.page-header-teacher-box__dropdown .button {
  margin: 20px 20px 30px;
}
.page-header-teacher-box__dropdown .button:lang(en) {
  margin: 20px 0 30px;
}
.page-header-teacher-box__dropdown ul:lang(en) {
  padding: 0 20px;
}
.page-header-teacher-box__dropdown li:last-child .page-header-teacher-box__dropdown-link {
  border-bottom: 1px solid #ccc;
}
.page-header-teacher-box__dropdown > ul {
  margin-top: 20px;
  margin-bottom: 20px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .page-header-teacher-box__link {
    width: 0;
    text-indent: 99999px;
    white-space: nowrap;
    overflow: hidden;
  }
}

.page-header-teacher-box {
  margin-left: 15px;
}
.page-header-teacher-box__icon {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/inbox.svg") center center no-repeat;
  display: block;
  width: 27px;
  height: 26px;
}
.page-header-teacher-box__dropdown-link {
  position: relative;
  display: block;
  margin: 0 30px;
  padding: 5px;
  border-top: 1px solid #ccc;
  color: #333;
  font-size: 13px;
  cursor: pointer;
}
.page-header-teacher-box__dropdown-link:focus {
  color: #333;
}
.page-header-teacher-box__dropdown-link:hover {
  background-color: #f8f8f8;
  color: #333;
}
.page-header-teacher-box__dropdown-link > svg, .page-header-teacher-box__dropdown-link > span {
  vertical-align: middle;
}

.page-header-password-forgotten {
  font-size: 12px;
  font-weight: normal;
  text-align: right;
}
.page-header-password-forgotten__link {
  font-family: Helvetica, Arial, sans-serif;
  color: #06c;
}
.page-header-password-forgotten__link:hover {
  color: #09f;
}

.js-dropdown-toggle:hover {
  z-index: 2;
}

.turbolinks-progress-bar {
  background: #9c0;
  z-index: 999999;
}

@keyframes expand-logo {
  100% {
    width: 141px;
  }
}
@keyframes expand-logo-uk {
  100% {
    width: 170px;
  }
}
@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 7px;
    transform: rotate(0);
  }
  100% {
    top: 7px;
    transform: rotate(45deg);
  }
}
@keyframes top-2 {
  0% {
    top: 7px;
    transform: rotate(45deg);
  }
  50% {
    top: 7px;
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}
@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: 7px;
    transform: rotate(0);
  }
  100% {
    bottom: 7px;
    transform: rotate(135deg);
  }
}
@keyframes bottom-2 {
  0% {
    bottom: 7px;
    transform: rotate(135deg);
  }
  50% {
    bottom: 7px;
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(0);
  }
}
@keyframes scaled {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes scaled-2 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
.page-header-login {
  position: relative;
}
.page-header-login__link {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #fff;
  font-size: 14px;
}
.page-header-login__link:hover {
  background-color: #666;
}
.page-header-login__link:hover, .page-header-login__link:focus {
  color: #fff;
}
.page-header-login__dropdown {
  display: none;
  width: 352px;
  margin-left: -320px;
}
.page-header-login__dropdown::after {
  left: 310px;
}
.page-header-login__dropdown.login-failed {
  display: block;
}
.page-header-login__dropdown.login-failed .error {
  font-family: Helvetica, Arial, sans-serif;
  padding: 0 5px 10px;
  color: #e30000;
  font-size: 12px;
  font-weight: normal;
  line-height: 120%;
}
.page-header-login__dropdown.login-failed input[type=text], .page-header-login__dropdown.login-failed input[type=password] {
  background-color: #fce3e3;
}
.page-header-login__dropdown.login-failed input[type=text].page-header-student-code__text-field {
  background-color: #fff;
}
.page-header-login__form {
  padding: 18px 32px 30px;
  text-align: left;
}
.page-header-login__form label {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
  line-height: 140%;
}
.page-header-login__form .password {
  margin-top: 15px;
}
.page-header-login__form .button {
  width: 100%;
  margin-top: 15px;
}
.page-header-login .voucher-info-box {
  display: flex;
  margin: 8px -30px;
  padding: 16px;
  background-color: #fff;
}
.page-header-login .voucher-info-box__icon {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/flash_messages/warning.svg") center center no-repeat;
  flex: 1 0 auto;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.page-header-login .voucher-info-box__link {
  display: block;
  font-size: 12px;
}

.student-code-box {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 24px 32px;
  background-color: #fcf3e6;
  text-align: left;
}
.student-code-box__title {
  font-size: 16px;
  font-weight: 300;
}
.student-code-box__label {
  padding: 16px 0 8px;
  font-weight: bold;
}
.student-code-box__text-field {
  margin-right: 8px;
}
.student-code-box__button {
  background: #b64900;
}
.student-code-box__button:hover {
  background: #e35b00;
}
.flex-container > .student-code-box__button {
  width: 64px;
  padding: 10px 16px;
}

.page-header-search {
  margin-left: 15px;
  float: left;
}
.page-header-search__form {
  position: relative;
  display: inline-block;
  margin-top: 15px;
}
.page-header-search__input {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-transition: width 0.5s ease;
  -moz-transition: width 0.5s ease;
  transition: width 0.5s ease;
  width: 160px;
  height: 30px;
  padding: 5px 25px 5px 10px;
  border: 1px solid #333;
  border-radius: 4px;
  background-color: #333;
  color: #ccc;
  font-size: 14px;
  line-height: 1.9;
}
.page-header-search__input:hover {
  background-color: #666;
}
.page-header-search__input:focus {
  width: 300px;
  background-color: #f8f8f8;
  color: #333;
  box-shadow: 0 3px 3px 0 #ddd inset;
}
.page-header-search__input:focus + .page-header-search__button {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/search_button_focus.svg") center center no-repeat;
  width: 16px;
  height: 16px;
  background-size: contain;
}
.page-header-search__input::placeholder {
  color: #ccc;
}
.page-header-search__input::-ms-clear {
  display: none;
}
.page-header-search__button {
  position: absolute;
  top: 7px;
  right: 10px;
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/search_button.svg") center center no-repeat;
  width: 16px;
  height: 16px;
  background-size: contain;
  cursor: pointer;
}
.page-header-search__clear {
  position: absolute;
  top: 7px;
  right: 10px;
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/search_clear.svg") center center no-repeat;
  width: 16px;
  height: 16px;
  background-size: contain;
  cursor: pointer;
}
.page-header-search__clear:hover {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/search_clear_hover.svg") center center no-repeat;
  width: 16px;
  height: 16px;
  background-size: contain;
}
.page-header-search__close {
  position: absolute;
  top: 0;
  right: 15px;
  padding: 10px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
}
.page-header-search--white .page-header-search__button {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/white_nav_bar/search_green_button.svg") center center no-repeat;
  background-size: contain;
}
.page-header-search--white .page-header-search__input {
  border: 1px solid #ccc;
  background-color: #f8f8f8;
  color: #999;
}
.page-header-search--white .page-header-search__input:hover {
  border: 1px solid #690;
}
.page-header-search--white .page-header-search__input:focus {
  background-color: #fff;
  color: #333;
  box-shadow: 0 3px 3px 0 #ddd inset;
}
.page-header-search--white .page-header-search__input:focus + .page-header-search__button {
  background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/white_nav_bar/search_green_button.svg") center center no-repeat;
  background-size: contain;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .page-header-search__form {
    margin-top: 12px;
  }
  body.is-responsive .page-header-search__input {
    height: 40px;
  }
  body.is-responsive .page-header-search__input:focus {
    width: 240px;
  }
  body.is-responsive .page-header-search__input:focus + .page-header-search__button {
    width: 22px;
    height: 22px;
  }
  body.is-responsive .page-header-search__button {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px;
    height: 22px;
  }
  body.is-responsive .page-header-search__clear {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 24px;
    height: 24px;
  }
  body.is-responsive .page-header-search__clear:hover {
    width: 24px;
    height: 24px;
  }
  body.is-responsive .page-header-search__overlay {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .page-header-search {
    width: 100%;
    height: 0;
    margin-left: 0;
  }
  body.is-responsive .page-header-search__form {
    display: block;
    margin-top: -50px;
    padding-right: 120px;
    padding-left: 10px;
    background-color: #333;
  }
  body.is-responsive .page-header-search__form.is-minimized {
    display: none;
  }
  body.is-responsive .page-header-search__form .page-header-search__button {
    right: 130px;
  }
  body.is-responsive .page-header-search__input {
    width: 100%;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    font-size: initial;
  }
  body.is-responsive .page-header-search__input:focus {
    width: 100%;
  }
  body.is-responsive .page-header-search__input::placeholder {
    color: #666;
  }
  body.is-responsive .page-header-search__icon {
    position: absolute;
    top: 19px;
    left: 10px;
    background: rgba(1, 1, 1, 0) url("/assets/application/layouts/page_header/search_phone.svg") center center no-repeat;
    width: 24px;
    height: 24px;
  }
  body.is-responsive .page-header-search__icon--right-aligned {
    top: 16px;
    right: 56px;
    left: auto;
  }
  body.is-responsive .page-header-search__clear {
    right: 130px;
  }
  body.is-responsive .page-header-search--white .page-header-search__icon {
    color: #666;
  }
  body.is-responsive .page-header-search--white .page-header-search__form {
    background-color: #fff;
  }
}

.subject-cards-list {
  margin: -8px -16px;
}
.subject-cards-list__cell {
  padding: 8px 16px;
}
.subject-cards-list__title {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: bold;
}
.subject-cards-list__title--small {
  font-size: 12px;
}
.subject-cards-list__icon {
  margin-right: auto;
  margin-left: auto;
}
.subject-cards-list__card {
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  height: 100%;
  padding: 0 16px 16px;
  text-align: center;
  cursor: pointer;
}
.subject-cards-list__card.on-touch-hover {
  background-color: #d6eb99;
}
.subject-cards-list__card.is-checked {
  background-color: #9c0;
}
.subject-cards-list__card.is-checked .sprites-subjects-biologie {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/biologie_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-chemie {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/chemie_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-deutsch {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/deutsch_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-geographie {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/geographie_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-geschichte {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/geschichte_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-lern-und-arbeitstechniken {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/lern-und-arbeitstechniken_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-kreativitaet-und-bewegung {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/kreativitaet-und-bewegung_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-mathematik, .subject-cards-list__card.is-checked .sprites-subjects-math, .subject-cards-list__card.is-checked .sprites-subjects-maths {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/mathematik_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-musik {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/musik_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-physik {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/physik_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-sachunterricht, .subject-cards-list__card.is-checked .sprites-subjects-mensch-und-umwelt, .subject-cards-list__card.is-checked .sprites-subjects-science {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/sachunterricht_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-englisch {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/englisch_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-franzoesisch {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/franzoesisch_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-latein {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/latein_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-spanisch {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/spanisch_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-deutsch-als-zweitsprache {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/deutsch-als-zweitsprache_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-english-language-arts, .subject-cards-list__card.is-checked .sprites-subjects-english {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/english-language-arts_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .sprites-subjects-social-studies, .subject-cards-list__card.is-checked .sprites-subjects-pshe {
  background: rgba(1, 1, 1, 0) url("/assets/application/subject_icons/64_new/social-studies_white.svg") center center no-repeat;
  background-size: contain;
}
.subject-cards-list__card.is-checked .subject-cards-list__title {
  color: #fff;
}
.subject-cards-list__ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  padding: 2px;
  border-radius: 8px 8px 0 0;
  background-color: #e35b00;
  color: #fff;
  font-size: 12px;
}
.subject-cards-list--dark .subject-cards-list__card {
  border: 0;
  background: #333;
}
.subject-cards-list--dark .subject-cards-list__title {
  color: #fff;
  line-height: 12px;
}
.subject-cards-list--small {
  margin: -4px;
}
.subject-cards-list--small .subject-cards-list__card {
  height: 80px;
  padding: 0;
}
.subject-cards-list--small .subject-cards-list__cell {
  padding: 4px;
}
.subject-cards-list--small .subject-cards-list__title {
  font-size: 10px;
}
.subject-cards-list--small .subject-cards-list__icon {
  width: 48px;
  height: 48px;
  margin-top: 2px;
  margin-bottom: 2px;
}
.subject-cards-list--flat {
  margin: -8px;
}
.subject-cards-list--flat .sprites-subjects-biologie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/biologie_white-1886ebfdc6a077ad4d31.svg) center center no-repeat;
  background-color: #00b500;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-chemie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/chemie_white-2d117eee93289f02957b.svg) center center no-repeat;
  background-color: #c10070;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-deutsch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/deutsch_white-2ec34bb4bf3f313e2ffa.svg) center center no-repeat;
  background-color: #e97c33;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-deutsch-als-zweitsprache {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/deutsch-als-zweitsprache_white-d96819f5f2826cc091de.svg) center center no-repeat;
  background-color: #99e199;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-geographie {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/geographie_white-fda919489bfed77feb80.svg) center center no-repeat;
  background-color: #e30000;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-geschichte {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/geschichte_white-00af996a22496465b78f.svg) center center no-repeat;
  background-color: #e38800;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-lern-und-arbeitstechniken {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/lern-und-arbeitstechniken_white-6e85dab980cc4517d6a8.svg) center center no-repeat;
  background-color: #e3e300;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-kreativitaet-und-bewegung {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/kreativitaet-und-bewegung_white-e749308a9f1860a5e8ae.svg) center center no-repeat;
  background-color: #e9a033;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-mathematik, .subject-cards-list--flat .sprites-subjects-math, .subject-cards-list--flat .sprites-subjects-maths {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/mathematik_white-f7075fe52b0c2024a404.svg) center center no-repeat;
  background-color: #3370c4;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-musik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/musik_white-d8d489aa1936a173215d.svg) center center no-repeat;
  background-color: #e38800;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-physik {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/physik_white-2ea43e33535a12379eef.svg) center center no-repeat;
  background-color: #7900b5;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-sachunterricht, .subject-cards-list--flat .sprites-subjects-mensch-und-umwelt, .subject-cards-list--flat .sprites-subjects-science {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/sachunterricht_white-319a5c4a96c0563792e5.svg) center center no-repeat;
  background-color: #00b500;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-englisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/englisch_white-737c5b74fda8aa149793.svg) center center no-repeat;
  background-color: #e93333;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-franzoesisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/franzoesisch_white-2cf64b3532d44c85a7cb.svg) center center no-repeat;
  background-color: #e3e300;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-latein {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/latein_white-0ff1ffab005b8f7ceedb.svg) center center no-repeat;
  background-color: #e35b00;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-spanisch {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/spanisch_white-82a875090b31f4019ea2.svg) center center no-repeat;
  background-color: #004cb5;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-english-language-arts, .subject-cards-list--flat .sprites-subjects-english {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/english-language-arts_white-0c5a47fbbf106427e63a.svg) center center no-repeat;
  background-color: #e97c33;
  background-size: contain;
}
.subject-cards-list--flat .sprites-subjects-social-studies, .subject-cards-list--flat .sprites-subjects-pshe {
  background: rgba(1, 1, 1, 0) url(/packs/static/assets/images/application/subject_icons/64_new/social-studies_white-31be7359c29de1a09a68.svg) center center no-repeat;
  background-color: #e30000;
  background-size: contain;
}
.subject-cards-list--flat .subject-cards-list__cell {
  padding: 8px;
}
.subject-cards-list--flat .subject-cards-list__card {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 32px;
  border: 0;
  background-color: #f8f8f8;
  box-shadow: none;
}
.subject-cards-list--flat .subject-cards-list__card.on-touch-hover {
  background-color: #d6eb99;
}
.subject-cards-list--flat .subject-cards-list__icon {
  width: 88px;
  height: 88px;
  margin-bottom: 16px;
  border-radius: 8px;
}
.subject-cards-list--flat .subject-cards-list__title {
  font-size: 16px;
}
.subject-cards-list--flat .subject-cards-list__title--small {
  font-size: 14px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .subject-cards-list {
    margin: -8px;
  }
  body.is-responsive .subject-cards-list__cell {
    padding: 8px;
  }
  body.is-responsive .subject-cards-list--small .subject-cards-list__cell {
    padding: 4px;
  }
  body.is-responsive .subject-cards-list--flat .subject-cards-list__card {
    padding: 32px 0 16px;
  }
  body.is-responsive .subject-cards-list--flat .subject-cards-list__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
  }
  body.is-responsive .subject-cards-list__ribbon {
    font-size: 10px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .subject-cards-list {
    margin: -4px;
  }
  body.is-responsive .subject-cards-list__cell {
    padding: 4px;
  }
  body.is-responsive .subject-cards-list__card {
    padding: 0 8px 8px;
  }
  body.is-responsive .subject-cards-list--dark {
    margin: 12px;
  }
  body.is-responsive .subject-cards-list--flat {
    margin: -8px;
  }
  body.is-responsive .subject-cards-list__ribbon {
    height: 18px;
    padding: 0;
  }
  body.is-responsive .subject-cards-list__ribbon .subject-cards-list__cell {
    padding: 8px;
  }
  body.is-responsive .subject-cards-list--white {
    margin: 0 12px 12px;
  }
}

.toggle-subjects-menu {
  position: relative;
}
.toggle-subjects-menu .page-header-main__link {
  padding-right: 20px;
}
.toggle-subjects-menu .page-header-main__link::after {
  right: 5px;
}

.page-header-subjects-menu {
  position: absolute;
  top: 64px;
  left: -136px;
  display: none;
  width: 352px;
  background-color: #fff;
  text-align: left;
  z-index: 9999;
}
.page-header-subjects-menu .page-header-flyout__container {
  padding: 32px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .page-header-subjects-menu {
    left: -16px;
  }
  body.is-responsive .page-header-subjects-menu::after {
    left: 48px;
  }
}

.page-header-user {
  padding-right: 15px;
}
.page-header-user .page-header-main__link--arrow::after {
  right: -13px;
}
.page-header-user .icons-user-avatar {
  display: block;
  background: #f8f8f8;
}
.page-header-user__link {
  display: block;
}
.page-header-user__link:hover {
  color: #999;
}
.page-header-user__link .gamification-counter {
  top: -7px;
  left: -5px;
}

.page-header-user-menu {
  text-align: center;
}
.page-header-user-menu--dropdown {
  right: -4px;
  left: auto;
  width: 240px;
  border-radius: 8px;
}
.page-header-user-menu--dropdown::after {
  right: 24px;
  left: auto;
  margin: 0;
  border-bottom-color: #9c0;
}
.page-header-user-menu__free-teacher-upgrade-button {
  width: 189px;
  height: 36px;
  border-radius: 4px;
  background: conic-gradient(from 239deg at 76.11% 0%, #E3B500 0deg, #FBCD00 360deg);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -10px;
}
.page-header-user-menu__free-teacher-upgrade-button h6 {
  font-size: 12px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 639px) {
  .page-header-user-menu__free-teacher-upgrade-button {
    margin-left: 60px;
    margin-bottom: 16px;
    width: 56%;
  }
  .page-header-user-menu__free-teacher-upgrade-button h6 {
    font-size: 13px;
  }
}
.page-header-user-menu--wide {
  width: 296px;
}
.page-header-user-menu--teacher-premium::after {
  border-bottom-color: #F1D901;
}
.page-header-user-menu__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 16px;
  background: #9c0;
}
.page-header-user-menu__header--learning-group {
  background: #eeb866;
}
.page-header-user-menu__header--teacher-premium {
  background: conic-gradient(from 135deg at 50% 60%, #CCA302, #F1D901);
}
@media only screen and (max-width: 639px) {
  .page-header-user-menu__header--teacher-premium .page-header-user-menu__header-text h4 {
    margin: -30px;
    text-align: center;
  }
  .page-header-user-menu__header--teacher-premium .page-header-user-menu__feedback-button.button.transparent-white {
    margin-left: 96px;
  }
  .page-header-user-menu__header--teacher-premium .page-header-user-menu__header-avatar img {
    margin-top: 10px;
    margin-left: 10px;
  }
}
.page-header-user-menu__header--teacher-premium .page-header-user-menu__feedback-button.button.transparent-white:hover, .page-header-user-menu__header--teacher-premium .page-header-user-menu__feedback-button.button.transparent-white:focus {
  background-color: rgba(200, 159, 0, 0.63);
}
.page-header-user-menu__header--teacher-premium-label__image {
  position: relative;
  top: -10px;
}
@media only screen and (max-width: 639px) {
  .page-header-user-menu__header--teacher-premium-label__image {
    top: 25px;
    width: 80px;
    margin-left: -60px;
  }
}
.page-header-user-menu--dropdown .page-header-user-menu__header {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  flex-direction: column;
  padding: 24px 24px;
}
.page-header-user-menu__header button i {
  margin-bottom: 4px;
}
@media only screen and (max-width: 639px) {
  .page-header-user-menu__header button {
    margin-left: 60px;
  }
}
.page-header-user-menu__header-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
}
.page-header-user-menu--dropdown .page-header-user-menu__header-avatar img {
  width: 128px;
  height: 128px;
}
.page-header-user-menu__header-text {
  position: relative;
  margin-top: 8px;
  padding: 0 16px;
  color: #fff;
}
.page-header-user-menu__header-text h4 {
  margin: 0;
  font-weight: 500;
  font-weight: bold;
}
@media only screen and (min-width: 960px) {
  .page-header-user-menu__header-text h4 {
    font-weight: bold;
  }
}
.page-header-user-menu__header-text h5 {
  margin-bottom: 16px;
}
.page-header-user-menu--mobile .page-header-user-menu__header-text {
  width: calc(100% - 64px);
  margin-top: 0;
  margin-left: 16px;
  padding-left: 0;
  text-align: left;
}
.page-header-user-menu--mobile .page-header-user-menu__header-text h5 {
  margin: 0;
}
.page-header-user-menu__edit-profile-button {
  position: absolute;
  top: 4px;
  right: -8px;
}
.page-header-user-menu__edit-profile-button:hover, .page-header-user-menu__edit-profile-button:focus {
  background-color: initial;
}
.page-header-user-menu--dropdown .page-header-user-menu__edit-profile-button {
  right: -8px;
}
.page-header-user-menu__switch-profile-button {
  margin-top: 8px;
  margin-left: 64px;
}
.page-header-user-menu--dropdown .page-header-user-menu__switch-profile-button {
  margin: 0;
}
.page-header-user-menu__controls {
  padding: 16px;
  background: #fff;
}
.page-header-user-menu--dropdown .page-header-user-menu__controls {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 24px;
}
.page-header-user-menu__controls-list {
  display: flex;
  flex-direction: column;
}
.page-header-user-menu__controls-list--playful {
  flex-direction: row;
  flex-wrap: wrap;
}
.page-header-user-menu__controls-item {
  text-align: left;
}
.page-header-user-menu__controls-item:not(:first-child):not(.page-header-user-menu__controls-item--submenu) {
  border-top: 1px solid #e6e8e5;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item:not(:first-child):not(.page-header-user-menu__controls-item--submenu) {
  border: 0;
}
.page-header-user-menu__controls-item--submenu .page-header-mobile-subject-list__container {
  margin-top: 0;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .page-header-user-menu__controls-item--submenu .page-header-mobile-subject-list__container {
    padding-bottom: 16px;
  }
}
.page-header-user-menu--mobile .page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item, .page-header-user-menu--wide .page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item {
  width: 33.333333%;
}
.page-header-user-menu--mobile .page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item--submenu, .page-header-user-menu--wide .page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item--submenu {
  width: 100%;
}
.page-header-user-menu--mobile .page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item:nth-child(-n+4):not(.page-header-user-menu__controls-item--submenu), .page-header-user-menu--wide .page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item:nth-child(-n+4):not(.page-header-user-menu__controls-item--submenu) {
  order: -1;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item {
  width: 50%;
  border: 0;
}
.page-header-user-menu__controls-item-link {
  position: relative;
  display: flex;
  padding: 8px;
  color: #666;
}
.page-header-user-menu__controls-item-link:hover {
  color: #999;
}
.page-header-user-menu__controls-item-link.is-open .icon.secondary {
  transform: rotate(-90deg);
}
.page-header-user-menu__controls-item-link .icon.secondary {
  transition: transform 0.3s linear 0s;
}
.page-header-user-menu__controls-item-link .gamification-counter {
  top: 12px;
  right: 8px;
  font-weight: bold;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-link {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  flex-direction: column;
  align-items: center;
  font-weight: 300;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-link:hover {
  color: #666;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-link .gamification-counter {
  top: 16px;
  right: auto;
  left: 16px;
}
.page-header-user-menu--mobile .page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-link {
  font-size: 14px;
}
.page-header-user-menu--wide .page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-link {
  font-size: 12px;
}
.page-header-user-menu__controls-item-title {
  display: flex;
  flex-grow: 1;
  align-items: center;
}
.page-header-user-menu__controls-item-title .icon {
  margin-left: auto;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-title .icon {
  margin-left: 4px;
}
.page-header-user-menu__controls-item-icon {
  margin-right: 8px;
}
.page-header-user-menu__controls-item-icon svg {
  height: 40px;
}
.page-header-user-menu__controls-item-icon--blue {
  color: #33a0c4;
}
.page-header-user-menu__controls-item-icon--deep-orange {
  color: #e97c33;
}
.page-header-user-menu__controls-item-icon--green {
  color: #9c0;
}
.page-header-user-menu__controls-item-icon--lime {
  color: #e3e300;
}
.page-header-user-menu__controls-item-icon--purple {
  color: #7900b5;
}
.page-header-user-menu__controls-item-icon--red {
  color: #e66;
}
.page-header-user-menu__controls-item-icon--raspberry {
  color: #da66a9;
}
.page-header-user-menu__controls-item-icon--yellow {
  color: #fbcd00;
}
.page-header-user-menu__controls-item-icon--orange {
  color: #e38800;
}
.page-header-user-menu__controls-item-icon--light-green {
  color: #005b00;
}
.page-header-user-menu__controls-item-icon--bulb {
  height: 80px;
}
.page-header-user-menu--mobile .page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon {
  padding: 20px;
  font-size: 40px;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon {
  margin: 0 0 4px;
  padding: 16px;
  border-radius: 50%;
  font-size: 32px;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon svg {
  height: 40px;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--blue {
  background: #e6f3f8;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--blue:hover {
  background: #33a0c4;
  color: #fff;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--deep-orange {
  background: #fcefe6;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--deep-orange:hover {
  background: #e97c33;
  color: #fff;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--green {
  background: #f5fae6;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--green:hover {
  background: #9c0;
  color: #fff;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--lime {
  background: #fcfce6;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--lime:hover {
  background: #e3e300;
  color: #fff;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--purple {
  background: #f2e6f8;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--purple:hover {
  background: #7900b5;
  color: #fff;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--red {
  background: #fce6e6;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--red:hover {
  background: #e66;
  color: #fff;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--raspberry {
  background: #f9e6f1;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--raspberry:hover {
  background: #da66a9;
  color: #fff;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--yellow {
  background: #fffae6;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--yellow:hover {
  background: #fbcd00;
  color: #fff;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--orange {
  background: #fcf3e6;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--orange:hover {
  background: #e38800;
  color: #fff;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--light-green {
  background: #f5fae6;
}
.page-header-user-menu__controls-list--playful .page-header-user-menu__controls-item-icon--light-green:hover {
  background: #d6eb99;
  color: #fff;
}
.page-header-user-menu__settings-list {
  padding-left: 32px;
  list-style-type: disc;
}
.page-header-user-menu__feedback-button.button.transparent-white:hover, .page-header-user-menu__feedback-button.button.transparent-white:focus {
  background-color: #690;
}
.page-header-user-menu__notification-bubble {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: auto 8px;
  background-color: #e30000;
}

.b2t-flyout-infopage__title {
  margin: 0 auto;
  padding: 32px 0;
  border-bottom: 1px solid #e6e8e5;
  background-color: #f8f8f8;
  font-size: 22px;
}
.b2t-flyout-infopage__cards {
  display: flex;
  flex-direction: column;
  padding: 30px 16px;
  gap: 10px;
}
.b2t-flyout-infopage__card-item {
  margin: 0 auto;
  padding: 8px 0;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  color: #3c3c3c;
  font-weight: 700;
  line-height: 28px;
  list-style: none;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.05);
}
.b2t-flyout-infopage__card-item:hover {
  color: #3c3c3c;
}

.page-header-flyout--b2t-subnav .page-header-flyout__title {
  padding: 38px 18px 8px;
  font-weight: 400;
  text-align: center;
}
.page-header-flyout--b2t-subnav .page-header-flyout__link {
  text-align: left;
}

.multiprofile-banner-extension {
  justify-content: space-between;
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px;
  border-radius: 0 0 16px 16px;
  background-color: #fbcd00;
}
.multiprofile-banner-extension__icon {
  gap: 16px;
}
.multiprofile-banner-extension__icon span {
  margin-right: 42px;
  font-size: 14px;
}
@media only screen and (max-width: 959px) {
  .multiprofile-banner-extension {
    margin: 0 auto;
    max-width: 560px;
  }
}
@media only screen and (max-width: 639px) {
  .multiprofile-banner-extension {
    padding: 8px 12px;
    max-width: 295px;
  }
  .multiprofile-banner-extension__icon {
    gap: 8px;
  }
  .multiprofile-banner-extension__icon span {
    font-size: 12px;
  }
  .multiprofile-banner-extension span {
    margin-right: 0;
  }
}

.page-footer {
  padding: 40px 0 30px;
  background-color: #fff;
}
.page-footer__logo-link {
  display: block;
  float: left;
}
.page-footer__logo-image {
  margin-top: 25px;
}
.page-footer__logo-image--efre {
  width: 173px;
  height: 50px;
}
.page-footer__logo-image--climate-neutral {
  width: 197px;
  height: 44px;
}
.page-footer .shared-hotline-button {
  background-color: #f8f8f8;
}
.page-footer .shared-hotline-button .title {
  color: #333;
  font-size: 16px;
  font-weight: bold;
}
.page-footer .shared-hotline-button--email a.second-title {
  color: #fff;
}
.page-footer .shared-limited-support-note {
  background-color: #9c0;
}
.page-footer a {
  color: #333;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .page-footer .grid-column-2 {
    width: 31%;
    padding: 0 2%;
  }
  body.is-responsive .page-footer .page-footer-nav--platform,
  body.is-responsive .page-footer .page-footer-nav--help,
  body.is-responsive .page-footer .page-footer-nav--info {
    display: none;
  }
}
body.is-responsive .page-footer__logo-image {
  margin-top: 32px;
}
body.is-responsive .page-footer__logo-image--efre {
  width: 142px;
  height: 41px;
}
body.is-responsive .page-footer__logo-image--climate-neutral {
  width: 161px;
  height: 36px;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .page-footer {
    display: none;
  }
  body.is-responsive .page-footer__logo-image {
    margin: 0 24px;
  }
  body.is-responsive .page-footer__logo-image--efre {
    width: 48px;
    height: 32px;
  }
  body.is-responsive .page-footer__logo-image--climate-neutral {
    width: 32px;
    height: 37px;
  }
}
@media only screen and (max-width: 959px) {
  body.locale-us.is-responsive .page-footer .grid-column-2,
  body.locale-us.is-responsive .page-footer .grid-column-3, body.locale-uk.is-responsive .page-footer .grid-column-2,
  body.locale-uk.is-responsive .page-footer .grid-column-3 {
    width: 25%;
  }
  body.locale-us.is-responsive .page-footer .grid-column-4, body.locale-uk.is-responsive .page-footer .grid-column-4 {
    width: 43%;
  }
}

.page-footer-mobile {
  display: none;
  background-color: #fff;
}
.page-footer-mobile .page-footer-bottom-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 72px;
  background-color: #f8f8f8;
}
.page-footer-mobile__nav {
  padding: 20px 0 0;
  background-color: #fff;
}
.page-footer-mobile__nav > a {
  color: #333 !important;
}
.page-footer-mobile .shared-hotline-button {
  margin: 20px 0;
  background-color: #f8f8f8;
  text-align: left;
}
.page-footer-mobile__item {
  margin-top: 10px;
}
.page-footer-mobile__item--mobile {
  display: none;
}
.page-footer-mobile__list li a {
  color: #333 !important;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .page-footer-mobile {
    display: block;
  }
  body.is-responsive .page-footer-mobile .shared-hotline-button {
    margin: 20px auto;
  }
  body.is-responsive .page-footer-mobile .phone-number {
    font-size: 20px;
  }
  body.is-responsive .page-footer-mobile__hotline {
    background: #f8f8f8;
  }
  body.is-responsive .page-footer-mobile__hotline .grid-column-12 {
    padding: 0;
  }
  body.is-responsive .page-footer-mobile__hotline .shared-limited-support-note {
    top: 0;
    width: 100%;
    border-radius: 0;
  }
  body.is-responsive .page-footer-mobile .page-footer-mobile-follow-us {
    margin-top: 10px;
  }
  body.is-responsive .page-footer-mobile .page-footer-mobile-follow-us > li {
    margin-right: 30px;
  }
  body.is-responsive .page-footer-mobile .page-footer-mobile-follow-us > li:last-child {
    margin-right: 0;
  }
  body.is-responsive .page-footer-mobile .page-footer-mobile-follow-us > li > a {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 100%;
    background-color: #999;
  }
  body.is-responsive .page-footer-mobile .page-footer-mobile-follow-us > li > a:hover {
    background-color: #ccc;
  }
  body.is-responsive .page-footer-mobile .page-footer-mobile-follow-us > li > a::before {
    position: absolute;
    content: "";
  }
}
body.is-responsive--desktop .page-footer-mobile__item--mobile {
  display: block;
}

.page-footer-nav {
  position: relative;
}

.page-footer-title {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  display: block;
  color: #333;
  font-size: 13px;
  font-weight: bold;
  line-height: 120%;
  text-transform: uppercase;
}

.page-footer-list {
  margin-top: 15px;
  font-size: 13px;
  line-height: 120%;
}
.page-footer-list > li {
  display: block;
  padding-bottom: 13px;
}
.page-footer-list > li.page-footer-pricing a {
  color: #06c;
}
.page-footer-list > li.page-footer-pricing a:hover {
  color: #c2e066;
}
@media only screen and (max-width: 959px) {
  .page-footer-list > li > a {
    color: #333;
  }
}

.page-footer-top {
  background-color: #f8f8f8;
}
.page-footer-top .seo-links-container {
  margin-top: 0;
  padding: 32px 0 24px;
}
.page-footer-top .seo-links-container__list-item {
  width: 33%;
  padding-bottom: 8px;
}
.page-footer-top .seo-links-container__list-item a {
  color: #333;
}
.page-footer-top .seo-links-container__list-item a:hover {
  color: #09f;
}
.page-footer-top .seo-links-container__text {
  display: inline;
  color: #666;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .page-footer-top .seo-links-container__list-item {
    width: 33%;
  }
  body.is-responsive .page-footer-top .seo-links-container__text {
    color: #666;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .page-footer-top .seo-links-container {
    padding-bottom: 16px;
  }
  body.is-responsive .page-footer-top .seo-links-container__list-item {
    width: 100%;
    padding-bottom: 16px;
    text-align: center;
  }
}

.page-footer-nav--hotline,
.page-footer--sofatutor {
  float: right;
}

.page-footer-hotline {
  width: 300px;
  float: right;
}

.page-footer-bottom {
  padding-bottom: 18px;
  background-color: #f8f8f8;
}
@media only screen and (max-width: 639px) {
  .page-footer-bottom {
    display: none;
  }
}

.page-footer-follow-us {
  margin-top: 20px;
  float: left;
}
.page-footer-follow-us > li {
  margin-right: 5px;
}
.page-footer-follow-us > li > a {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 100%;
  background-color: #999;
}
.page-footer-follow-us > li > a:hover {
  background-color: #ccc;
}
.page-footer-follow-us > li > a::before {
  position: absolute;
  content: "";
}

.page-footer-facebook::before {
  top: 6px;
  left: 9px;
  width: 8px;
  height: 16px;
  background: url("/assets/application/layouts/page_footer/fb_light.svg") center center no-repeat;
}
@media only screen and (max-width: 639px) {
  .page-footer-facebook::before {
    top: 6px;
    left: 12px;
    width: 15px;
    height: 31px;
    background-size: cover;
  }
}

.page-footer-twitter::before {
  top: 7px;
  left: 7px;
  width: 16px;
  height: 14px;
  background: url("/assets/application/layouts/page_footer/twitter_light.svg") center center no-repeat;
}
@media only screen and (max-width: 639px) {
  .page-footer-twitter::before {
    top: 8px;
    left: 8px;
    width: 26px;
    height: 26px;
    background-size: cover;
  }
}

.page-footer-pinterest::before {
  top: 6px;
  left: 6px;
  width: 16px;
  height: 16px;
  background: url("/assets/application/layouts/page_footer/pinterest_light.svg") center center no-repeat;
}
@media only screen and (max-width: 639px) {
  .page-footer-pinterest::before {
    top: 5px;
    left: 5px;
    width: 32px;
    height: 32px;
    background-size: cover;
  }
}

.page-footer-instagram::before {
  top: 6px;
  left: 6px;
  width: 16px;
  height: 16px;
  background: url("/assets/application/layouts/page_footer/instagram_light.svg") center center no-repeat;
}
@media only screen and (max-width: 639px) {
  .page-footer-instagram::before {
    top: 6px;
    left: 6px;
    width: 30px;
    height: 30px;
    background-size: cover;
  }
}

.page-footer-linkedin::before {
  top: 6px;
  left: 6px;
  width: 16px;
  height: 16px;
  background: url("/assets/application/layouts/page_footer/linkedin_light.svg") center center no-repeat;
}
@media only screen and (max-width: 639px) {
  .page-footer-linkedin::before {
    top: 7px;
    left: 8px;
    width: 26px;
    height: 26px;
    background-size: cover;
  }
}

.page-footer-locale-links {
  margin-top: 26px;
  margin-left: 30px;
  float: left;
}
.page-footer-locale-links__item {
  margin-right: 15px;
}
.page-footer-locale-links .js-cross-domain {
  display: block;
  color: #333;
  font-size: 13px;
  font-weight: normal;
  line-height: 1;
}
.page-footer-locale-links .js-cross-domain:hover {
  color: #666;
  cursor: pointer;
}
.page-footer-locale-links .js-cross-domain > img {
  padding-right: 2px;
  float: left;
}
@media only screen and (max-width: 639px) {
  .page-footer-locale-links {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    float: none;
    margin: 15px 30px;
  }
  .page-footer-locale-links .js-cross-domain {
    font-size: 14px;
  }
  .page-footer-locale-links__item:first-child {
    grid-column: span 2;
  }
  .page-footer-locale-links__item:nth-child(2), .page-footer-locale-links__item:nth-child(3) {
    grid-column: span 1;
  }
  .page-footer-locale-links__item:nth-child(4), .page-footer-locale-links__item:nth-child(5) {
    grid-column: span 1;
  }
}

script + img {
  position: absolute;
}

script + iframe[src*=googleads] {
  position: absolute;
  bottom: 0;
  left: 0;
}

.page-footer--us .page-footer-nav, .page-footer--uk .page-footer-nav {
  min-height: initial;
}
.page-footer--us .page-footer-list > li, .page-footer--uk .page-footer-list > li {
  margin-right: 40px;
}
.page-footer--us .page-footer-title a, .page-footer--uk .page-footer-title a {
  color: #e6e8e5;
}
.page-footer--us .page-footer-title a:hover, .page-footer--uk .page-footer-title a:hover {
  color: #fff;
}

.school-footer {
  padding-top: 48px;
  padding-bottom: 48px;
  background: linear-gradient(to top right, #068bac, #99cc00);
  overflow: hidden;
}
.school-footer .grid-x {
  position: relative;
}
.school-footer__header {
  margin-bottom: 32px;
}
.school-footer__headline {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  color: #fff;
  font-size: 32px;
  text-align: left;
}
.school-footer__headline b {
  vertical-align: inherit;
}
.school-footer__info {
  margin-bottom: 32px;
}
.school-footer__underline {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin-bottom: 16px;
  color: #fff;
  font-size: 16px;
}
.school-footer__image {
  position: absolute;
  bottom: -48px;
  right: 16px;
  width: 288px;
  height: 368px;
  background: url("/assets/application/characters/teacher.svg") no-repeat;
  background-size: contain;
}
.school-footer__buttons {
  display: flex;
}
.school-footer__buttons .button {
  font-weight: bold;
}
.school-footer__buttons .button:first-child:not(:only-child) {
  margin-right: 16px;
}
.school-footer__buttons .button.hollow:hover {
  border-color: #fff;
}
.school-footer__buttons:not(:last-child) {
  margin-bottom: 32px;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .school-footer__image {
    right: -120px;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .school-footer__buttons {
    flex-direction: column-reverse;
  }
  body.is-responsive .school-footer__buttons .button:first-child:not(:only-child) {
    margin-top: 16px;
    margin-right: 0;
  }
}

.page-banners .error-page, .has-no-page-banner .page-banners {
  display: none;
}
@media only screen and (max-width: 959px) {
  body.is-responsive.has-no-page-banner .page-banners {
    display: block;
  }
}
.page-banners--sticky {
  position: sticky;
  top: 60px;
  z-index: 3007;
}
@media only screen and (max-width: 639px) {
  .page-banners--sticky {
    top: 0;
  }
}

.page-banner {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  position: relative;
  display: block;
  padding: 0.5rem 0;
  background-color: #e6f3f8;
  color: #333;
}
.page-banner:hover {
  color: #333;
}
.page-banner__close-icon i {
  position: absolute;
  top: 13px;
  right: 13px;
  cursor: pointer;
  z-index: 2;
}
.pricing-page .page-banner {
  cursor: default;
  pointer-events: none;
}
.page-banner__icon {
  width: 64px;
  height: 64px;
  background-size: contain;
  vertical-align: middle;
}
.page-banner__text {
  font-weight: normal;
  z-index: 2;
}
.page-banner__content {
  position: relative;
  margin-top: 16px;
  margin-bottom: 16px;
}
.page-banner__headline {
  margin-bottom: 0;
  padding-top: 0;
  color: #333;
  font-weight: normal;
}
.page-banner__headline--blue, .page-banner__headline span {
  color: #06c;
}
.page-banner__headline br {
  display: none;
}
.page-banner__pricing-arrow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translateX(-50%) rotate(90deg);
  background: url(/packs/static/assets/images/application/arrows/arrow_circle_yellow-e6a7d1b86d6a2f123b4d.svg) center center no-repeat;
  background-size: contain;
  z-index: 3;
}
.page-banner__cta-arrow {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: url(/packs/static/assets/images/application/arrows/arrow_circle_blue-9e0717c6beaa48e5ee6f.svg) center center no-repeat;
  background-size: contain;
}
.page-banner__countdown {
  display: none;
  width: 170px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 2px;
}
.page-banner__countdown::after {
  content: "";
  display: block;
  clear: both;
}
.page-banner__countdown-title {
  display: none;
  margin-bottom: 0;
  text-align: center;
}
.page-banner__countdown-item {
  position: relative;
  display: inline-block;
  width: 42px;
  float: left;
  text-align: center;
  z-index: 1;
}
.page-banner__countdown-item .h5 {
  display: block;
  margin-top: 4px;
  margin-bottom: 0;
  margin-left: 8px;
  color: #fff;
  letter-spacing: 8px;
  line-height: 1;
}
.page-banner__countdown-item::before, .page-banner__countdown-item::after {
  position: absolute;
  width: 16px;
  height: 24px;
  border-radius: 2px;
  background-color: #333;
  content: "";
  z-index: -1;
}
.page-banner__countdown-item::before {
  left: 4px;
}
.page-banner__countdown-item::after {
  top: 0;
  left: 22px;
}
.page-banner__countdown-item > i {
  position: absolute;
  top: 2px;
  right: -2px;
}
.page-banner__countdown-date {
  color: #333;
  line-height: 1;
}
.page-banner__last-sale {
  width: 100%;
  color: #e35b00;
  text-align: center;
  text-transform: uppercase;
}
.page-banner__last-sale-title {
  margin-bottom: 0;
  font-weight: 100;
}
.page-banner__last-sale-text {
  margin-bottom: 0;
  font-weight: bold;
}
.page-banner__button {
  white-space: nowrap;
  z-index: 2;
}
.page-banner__side-content {
  position: relative;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.page-banner.has-countdown .page-banner__content {
  margin-top: 8px;
  margin-bottom: 8px;
}
.page-banner.has-countdown .page-banner__countdown-title {
  display: block;
}
.page-banner.has-countdown .page-banner__button {
  display: block;
  margin: 4px auto 0;
}
.page-banner.has-countdown .page-banner__last-sale {
  margin-top: 2px;
}
.page-banner.has-countdown .page-banner__last-sale-title, .page-banner.has-countdown .page-banner__last-sale-text {
  display: inline-block;
  line-height: 1;
}
.page-banner.has-countdown .page-banner__last-sale-title {
  font-weight: bold;
}
.page-banner.has-countdown .page-banner__last-sale-text {
  font-size: 14px;
}
.page-banner .media-object-section {
  margin-top: auto;
  margin-bottom: auto;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .page-banner__countdown {
    height: 26px;
  }
  body.is-responsive .page-banner__countdown .page-banner__countdown-date {
    display: none;
  }
  body.is-responsive .page-banner__content {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  body.is-responsive .page-banner__headline br {
    display: block;
  }
  body.is-responsive .page-banner--default-pricing .page-banner__content, body.is-responsive .page-banner--gewinnspiel .page-banner__content {
    margin: 0 auto;
  }
  body.is-responsive .page-banner--student-with-expired-link .page-banner__text {
    font-size: 12px;
  }
  body.is-responsive .page-banner--student-with-expired-link .page-banner__text br {
    display: none;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .page-banner.has-countdown .page-banner__last-sale, body.is-responsive .page-banner.has-countdown .page-banner__countdown-title {
    display: none;
  }
  body.is-responsive .page-banner__icon {
    width: 48px;
    height: 48px;
  }
  body.is-responsive .page-banner__icon span {
    font-size: 8px;
  }
  body.is-responsive .page-banner .media-object-section:first-child {
    padding-right: 8px;
  }
}

/* stylelint-disable max-nesting-depth */
/* stylelint-disable selector-class-pattern */
/* stylelint-disable block-no-empty */
.page-banner--default {
  border-bottom: solid #99cfe1;
  background-color: linear-gradient(270deg, #e6f3f8 0%, #99cfe1 100%);
}
.page-banner--default-dach, .page-banner--b2t-discount-banner, .page-banner--startchancen {
  padding-bottom: 0;
  background-color: #fcf8e6;
}
.page-banner--default-dach .icon--star, .page-banner--b2t-discount-banner .icon--star, .page-banner--startchancen .icon--star {
  display: inline-block;
  margin: 0 -2px 4px;
  color: #fbcd00;
  font-size: 20px;
}
.page-banner--default-dach .page-banner__button-container, .page-banner--b2t-discount-banner .page-banner__button-container, .page-banner--startchancen .page-banner__button-container {
  padding-bottom: 8px;
}
.page-banner--default-dach .page-banner__button, .page-banner--b2t-discount-banner .page-banner__button, .page-banner--startchancen .page-banner__button {
  padding: 16px 24px;
  font-size: 18px;
}
.page-banner--default-dach .page-banner__fineprint, .page-banner--b2t-discount-banner .page-banner__fineprint, .page-banner--startchancen .page-banner__fineprint {
  width: 200px;
  color: #666;
}
.page-banner--b2t-discount-banner {
  padding: 16px 0 24px 8px;
}
.page-banner--b2t-discount-banner .page-banner__button-container {
  padding-bottom: 0;
}
.page-banner--b2t-discount-banner .page-banner__button {
  padding: 16px;
}
.page-banner--b2t-discount-banner .page-banner__image {
  margin: 0 8px 0 -18px;
}
.page-banner--b2t-discount-banner .page-banner__headline {
  display: block;
}
.page-banner--b2t-discount-banner .page-banner__headline span {
  color: #06c;
}
.page-banner--sales, .page-banner--unassigned-video {
  border-bottom: solid #e9a033;
  background-color: #f4cf99;
  background-image: linear-gradient(270deg, #f4cf99 0%, #e9a033 100%);
}
.page-banner--profile-switch-parents, .page-banner--profile-switch-parents-learning-groups {
  border-bottom: solid #c2e066;
  background-color: #d6eb99;
  background-image: linear-gradient(270deg, #c2e066 0%, #d6eb99 100%);
}
.page-banner--default-pricing, .page-banner--gewinnspiel {
  border-bottom: solid #e3e300;
  background-color: #f4f499;
  background-image: linear-gradient(270deg, #f4f499 0%, #e9e933 100%);
}
.page-banner--learning-groups-welcome-banner {
  height: 200px;
  border-bottom: 0;
  background-image: url("/assets/learning_groups/learning_groups_welcome_banner_desktop.svg");
  background-size: cover;
  background-position-x: center;
}
.page-banner--learning-groups-welcome-banner .learning-groups-welcome-banner__headline {
  margin-top: 64px;
  margin-left: 48px;
}
@media only screen and (max-width: 959px) {
  .page-banner--learning-groups-welcome-banner {
    height: 180px;
    background-image: url("/assets/learning_groups/learning_groups_welcome_banner_tablet.svg");
  }
}
@media only screen and (max-width: 639px) {
  .page-banner--learning-groups-welcome-banner {
    height: 120px;
    background-image: url("/assets/learning_groups/learning_groups_welcome_banner_mobile.svg");
  }
  .page-banner--learning-groups-welcome-banner .learning-groups-welcome-banner__headline {
    margin-top: 42px;
    margin-left: 8px;
    font-size: 16px;
  }
}
.page-banner--promote-teacher-premium-to-free-teacher {
  overflow: hidden;
  border: 0;
  background-color: #fcf8e6;
}
.page-banner--promote-teacher-premium-to-free-teacher:focus, .page-banner--promote-teacher-premium-to-free-teacher:hover {
  color: #333;
}
.page-banner--promote-teacher-premium-to-free-teacher .media-object-section:first-of-type {
  position: relative;
  width: 128px;
  margin-right: 54px;
}
.page-banner--promote-teacher-premium-to-free-teacher .media-object-section:first-of-type img {
  position: absolute;
  top: -48px;
  width: 124px;
}
@media only screen and (max-width: 639px) {
  .page-banner--promote-teacher-premium-to-free-teacher .teacher-premium-label {
    display: none;
  }
  .page-banner--promote-teacher-premium-to-free-teacher .media-object-section:first-of-type {
    order: 1;
  }
}
.page-banner--promote-learning-assessment-for-paid-teachers {
  background-color: #e6f3f8;
  padding-bottom: 0;
}
.page-banner--promote-learning-assessment-for-paid-teachers i {
  color: #06c;
}
@media only screen and (max-width: 639px) {
  .page-banner--promote-learning-assessment-for-paid-teachers .media-object-section:first-of-type {
    margin-left: -25px;
  }
}
.page-banner--default, .page-banner--free-trial, .page-banner--learning-group-students, .page-banner--student-with-active-link, .page-banner--student-with-expired-link, .page-banner--register-with-campaign-banner, .page-banner--teachers {
  padding-top: 12px;
  border-color: #99cfe1;
  background-color: #e6edf8;
  background-image: linear-gradient(270deg, #e6f3f8 0%, #99cfe1 100%);
}
.page-banner--default .page-banner__content, .page-banner--free-trial .page-banner__content, .page-banner--learning-group-students .page-banner__content, .page-banner--student-with-active-link .page-banner__content, .page-banner--student-with-expired-link .page-banner__content, .page-banner--register-with-campaign-banner .page-banner__content, .page-banner--teachers .page-banner__content {
  margin: 0;
}
.page-banner--default-pricing, .page-banner--gewinnspiel, .page-banner--teachers {
  position: relative;
}
.page-banner--default-pricing .page-banner__icon, .page-banner--gewinnspiel .page-banner__icon, .page-banner--teachers .page-banner__icon {
  position: relative;
  width: 100px;
  height: 96px;
  background: url(/packs/static/assets/images/application/characters/lina_discount_dynamic-48ef62f036786120146d.png) center center no-repeat;
  background-size: contain;
}
.page-banner--default-pricing .page-banner__percentage, .page-banner--gewinnspiel .page-banner__percentage, .page-banner--teachers .page-banner__percentage {
  position: absolute;
  top: 44%;
  left: 48%;
  color: #fff;
  font-size: 24px;
  font-style: normal;
}
.page-banner--former-user .page-banner__icon {
  width: 65px;
}
.page-banner--former-user .page-banner__percentage {
  position: absolute;
  top: 47%;
  left: 48%;
  color: #fff;
  font-size: 15px;
  font-style: normal;
}
.page-banner--sales .page-banner__icon, .page-banner--profile-switch-parents .page-banner__icon, .page-banner--profile-switch-parents-learning-groups .page-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.page-banner--sales .page-banner__icon h3, .page-banner--profile-switch-parents .page-banner__icon h3, .page-banner--profile-switch-parents-learning-groups .page-banner__icon h3 {
  margin-bottom: 0;
  font-weight: bold;
}
.page-banner--sales .page-banner__icon span, .page-banner--profile-switch-parents .page-banner__icon span, .page-banner--profile-switch-parents-learning-groups .page-banner__icon span {
  margin-bottom: 3px;
  font-size: 12px;
}
.page-banner--default .page-banner__content, .page-banner--default-pricing .page-banner__content, .page-banner--gewinnspiel .page-banner__content, .page-banner--teachers .page-banner__content {
  margin: 0 auto;
}
.page-banner--default .page-banner__icon {
  width: 96px;
  height: 96px;
  transform: scaleX(-1);
  border-radius: 50%;
  background: url(/packs/static/assets/images/application/characters/lina-224b8133c28f5018b3e0.svg) center center no-repeat;
  background-color: #e6f3f8;
  background-size: 80px;
}
.page-banner--student-with-active-link .page-banner__content, .page-banner--register-with-campaign-banner .page-banner__content {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.page-banner--student-with-active-link .page-banner__icon, .page-banner--register-with-campaign-banner .page-banner__icon {
  width: 90px;
  height: 68px;
  background: url(/packs/static/assets/images/application/layouts/banners/hessen_bib_portal_logo-a7dd48fa445eb6215cd5.png) center center no-repeat;
  background-size: contain;
}
.page-banner--student-with-active-link .page-banner__text {
  font-size: 12px;
}
.page-banner--student-with-active-link .page-banner__text span {
  color: #06c;
}
.page-banner--register-with-campaign-banner .page-banner__headline {
  font-size: 20px;
}
.page-banner--register-with-campaign-banner .page-banner__headline span {
  color: #333;
  text-decoration: underline;
}
.page-banner--register-with-campaign-banner .page-banner__text {
  font-size: 18px;
}
.page-banner--register-with-campaign-banner .page-banner__text span {
  color: #06c;
}
.page-banner--student-with-expired-link .page-banner__content {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.page-banner--student-with-expired-link .page-banner__icon {
  width: 90px;
  height: 68px;
  background: url(/packs/static/assets/images/application/layouts/banners/professor_pinguin-b998ed86a92fb32e63c8.svg) center center no-repeat;
}
.page-banner--student-with-expired-link .page-banner__text {
  font-size: 14px;
}
.page-banner--free-trial .page-banner__icon {
  width: 95px;
  background: url(/packs/static/assets/images/application/layouts/banners/kid-ea551deab7db68d98fb4.png) center center no-repeat;
  background-size: contain;
}
.page-banner--profile-switch-parents .page-banner__icon, .page-banner--profile-switch-parents-learning-groups .page-banner__icon {
  background: url(/packs/static/assets/images/application/characters/people/parent-33b8c3cf180706bd6ed5.svg) center center no-repeat;
  background-color: #fff;
  background-size: contain;
}
.page-banner--vocabulary-trainer-english {
  background-color: #e6edf8;
}
.page-banner--vocabulary-trainer-english .page-banner__icon {
  background: url(/packs/static/assets/images/application/vocabulary_trainer/banner_blobby_english-4206ffff8aebb25cc59e.svg) no-repeat;
}
.page-banner--vocabulary-trainer-french {
  background-color: #f2e6f8;
}
.page-banner--vocabulary-trainer-french .page-banner__icon {
  background: url(/packs/static/assets/images/application/vocabulary_trainer/banner_blobby_french-95ebd3464f60ca22cce7.svg) no-repeat;
}
.page-banner--vocabulary-trainer-spanish {
  background-color: #fcefe6;
}
.page-banner--vocabulary-trainer-spanish .page-banner__icon {
  background: url(/packs/static/assets/images/application/vocabulary_trainer/banner_blobby_spanish-7cf6df22afb0e53886a7.svg) no-repeat;
}
.page-banner--vocabulary-trainer-english, .page-banner--vocabulary-trainer-french, .page-banner--vocabulary-trainer-spanish {
  padding-bottom: 0;
  border-bottom: 0;
  border-radius: 8px;
  overflow: hidden;
}
.page-banner--vocabulary-trainer-english--small, .page-banner--vocabulary-trainer-french--small, .page-banner--vocabulary-trainer-spanish--small {
  border-radius: 12px;
}
.page-banner--vocabulary-trainer-english .page-banner__content, .page-banner--vocabulary-trainer-french .page-banner__content, .page-banner--vocabulary-trainer-spanish .page-banner__content {
  margin-top: 8px;
  margin-bottom: 0;
  padding-left: 0;
}
.page-banner--vocabulary-trainer-english .page-banner__content--small, .page-banner--vocabulary-trainer-french .page-banner__content--small, .page-banner--vocabulary-trainer-spanish .page-banner__content--small {
  width: 56px;
  height: 65px;
}
.page-banner--vocabulary-trainer-english .media-object-section, .page-banner--vocabulary-trainer-french .media-object-section, .page-banner--vocabulary-trainer-spanish .media-object-section {
  margin-top: 0;
  padding-right: 0;
}
.page-banner--vocabulary-trainer-english .media-object-section:last-of-type, .page-banner--vocabulary-trainer-french .media-object-section:last-of-type, .page-banner--vocabulary-trainer-spanish .media-object-section:last-of-type {
  margin-top: 16px;
}
.page-banner--vocabulary-trainer-english .page-banner__icon, .page-banner--vocabulary-trainer-french .page-banner__icon, .page-banner--vocabulary-trainer-spanish .page-banner__icon {
  width: 110px;
  height: 118px;
  margin-left: 0;
  background-size: contain;
}
.page-banner--vocabulary-trainer-english .page-banner__sticker, .page-banner--vocabulary-trainer-french .page-banner__sticker, .page-banner--vocabulary-trainer-spanish .page-banner__sticker {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background: url("/assets/application/vocabulary_trainer/banner_sticker_new.svg") no-repeat center center/contain;
  background-size: contain;
}
@media only screen and (max-width: 959px) {
  .page-banner--vocabulary-trainer-english .page-banner__content, .page-banner--vocabulary-trainer-french .page-banner__content, .page-banner--vocabulary-trainer-spanish .page-banner__content {
    margin-bottom: 0;
  }
  .page-banner--vocabulary-trainer-english .grid-container, .page-banner--vocabulary-trainer-french .grid-container, .page-banner--vocabulary-trainer-spanish .grid-container {
    padding: 0;
  }
  .page-banner--vocabulary-trainer-english .grid-container .page-banner__content, .page-banner--vocabulary-trainer-french .grid-container .page-banner__content, .page-banner--vocabulary-trainer-spanish .grid-container .page-banner__content {
    margin-bottom: 0;
  }
  .page-banner--vocabulary-trainer-english .grid-container .page-banner__content .page-banner__icon, .page-banner--vocabulary-trainer-french .grid-container .page-banner__content .page-banner__icon, .page-banner--vocabulary-trainer-spanish .grid-container .page-banner__content .page-banner__icon {
    width: 90px;
    height: 118px;
  }
}
.page-banner--learning-group-students {
  padding: 0;
}
.page-banner--learning-group-students .page-banner__content {
  margin: 8px 0 0;
}
.page-banner--learning-group-students .page-banner__icon {
  width: 127px;
  height: 132px;
  background: url(/packs/static/assets/images/application/layouts/banners/blobby_with_friends-22301a8d38ae49880ace.svg) center center no-repeat;
  background-size: contain;
}
.page-banner--unassigned-video .page-banner__content {
  margin: 0;
}
.page-banner--unassigned-video .page-banner__icon {
  width: 95px;
  height: 92px;
  background: url(/packs/static/assets/images/application/characters/affe-d19d7349bac472092faf.png) center center no-repeat;
  background-size: contain;
}
.page-banner--unassigned-video .grid-container.media-object {
  align-items: center;
  height: 100%;
}
.page-banner--unassigned-video .page-banner__headline {
  font-weight: 100;
}
.page-banner--unassigned-video .page-banner__content {
  margin: 0;
  padding-top: 20px;
  padding-left: 80px;
}
.page-banner--unassigned-video .page-banner__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 101px;
}
.page-banner--unassigned-video .media-object-section:last-child {
  margin: 0;
  padding-left: 24px;
}
@media only screen and (max-width: 639px) {
  .page-banner--unassigned-video {
    height: 64px;
  }
  .page-banner--unassigned-video .page-banner__content {
    padding-top: 0;
    padding-left: 35px;
  }
  .page-banner--unassigned-video .page-banner__image {
    left: -12px;
    width: 60px;
  }
  .page-banner--unassigned-video .page-banner__headline {
    font-size: 18px;
  }
  .page-banner--unassigned-video .media-object-section:last-child {
    padding-left: 12px;
  }
}
@media only screen and (max-width: 959px) {
  body.is-responsive .page-banner--default-dach > .grid-container, body.is-responsive .page-banner--b2t-discount-banner > .grid-container {
    padding-left: 8px;
  }
  body.is-responsive .page-banner--default-dach .icon--star, body.is-responsive .page-banner--b2t-discount-banner .icon--star {
    font-size: 16px;
  }
  body.is-responsive .page-banner--default-dach .page-banner__headline, body.is-responsive .page-banner--b2t-discount-banner .page-banner__headline {
    font-size: 18px;
  }
  body.is-responsive .page-banner--default-dach .page-banner__subheadline, body.is-responsive .page-banner--b2t-discount-banner .page-banner__subheadline {
    width: 240px;
    line-height: 24px;
    font-size: 14px;
  }
  body.is-responsive .page-banner--default-dach .page-banner__image, body.is-responsive .page-banner--b2t-discount-banner .page-banner__image {
    margin-left: 0;
    width: 120px;
  }
  body.is-responsive .page-banner--default-dach .page-banner__button, body.is-responsive .page-banner--b2t-discount-banner .page-banner__button {
    padding: 11px 1rem;
    font-size: 16px;
  }
  body.is-responsive .page-banner--default-dach .page-banner__text, body.is-responsive .page-banner--b2t-discount-banner .page-banner__text {
    width: 225px;
  }
  body.is-responsive .page-banner--b2t-discount-banner {
    padding: 16px 0 24px 24px;
  }
  body.is-responsive .page-banner--b2t-discount-banner .grid-container {
    padding-right: 16px;
  }
  body.is-responsive .page-banner--b2t-discount-banner .page-banner__headline {
    color: #06c;
  }
  body.is-responsive .page-banner--b2t-discount-banner .page-banner__text {
    width: 244px;
  }
  body.is-responsive .page-banner--b2t-discount-banner .page-banner__image {
    margin: 0 8px 0 0;
    width: 90px;
  }
  body.is-responsive .page-banner--campaign .page-banner__text, body.is-responsive .page-banner--sales .page-banner__text {
    display: none;
  }
  body.is-responsive .page-banner--free-trial .page-banner__headline br {
    display: none;
  }
  body.is-responsive .page-banner--default-pricing .page-banner__content, body.is-responsive .page-banner--gewinnspiel .page-banner__content, body.is-responsive .page-banner--teachers .page-banner__content {
    margin: 0 auto;
  }
  body.is-responsive .page-banner--student-with-expired-link .page-banner__text {
    font-size: 12px;
  }
  body.is-responsive .page-banner--student-with-expired-link .page-banner__text br {
    display: none;
  }
}
@media only screen and (max-width: 639px) {
  body.is-responsive .page-banner--sales .page-banner__headline, body.is-responsive .page-banner--former-user .page-banner__headline, body.is-responsive .page-banner--default-pricing .page-banner__headline, body.is-responsive .page-banner--gewinnspiel .page-banner__headline, body.is-responsive .page-banner--teachers .page-banner__headline {
    font-size: 14px;
  }
  body.is-responsive .page-banner--free-trial .page-banner__headline br {
    display: block;
  }
  body.is-responsive .page-banner--default .page-banner__headline {
    margin-left: 0.5rem;
  }
  body.is-responsive .page-banner--default .page-banner__icon {
    width: 74px;
    height: 74px;
    background-size: 62px;
  }
  body.is-responsive .page-banner--default-dach, body.is-responsive .page-banner--b2t-discount-banner {
    padding-bottom: 12px;
  }
  body.is-responsive .page-banner--default-dach .icon--star, body.is-responsive .page-banner--b2t-discount-banner .icon--star {
    font-size: 12px;
  }
  body.is-responsive .page-banner--default-dach .page-banner__headline, body.is-responsive .page-banner--b2t-discount-banner .page-banner__headline {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
  }
  body.is-responsive .page-banner--default-dach .page-banner__headline span, body.is-responsive .page-banner--b2t-discount-banner .page-banner__headline span {
    color: #06c;
  }
  body.is-responsive .page-banner--default-dach .page-banner__subheadline, body.is-responsive .page-banner--b2t-discount-banner .page-banner__subheadline {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #333;
    margin-left: 2px;
  }
  body.is-responsive .page-banner--default-dach .page-banner__subheadline span, body.is-responsive .page-banner--b2t-discount-banner .page-banner__subheadline span {
    color: #06c;
  }
  body.is-responsive .page-banner--default-dach .page-banner__image, body.is-responsive .page-banner--b2t-discount-banner .page-banner__image {
    margin-right: 6px;
    margin-left: 3px;
    width: 96px;
  }
  body.is-responsive .page-banner--default-dach .page-banner__text, body.is-responsive .page-banner--b2t-discount-banner .page-banner__text {
    padding-left: 8px;
    margin: 0;
    width: 220px;
  }
  body.is-responsive .page-banner--default-dach .page-banner__cta-arrow, body.is-responsive .page-banner--b2t-discount-banner .page-banner__cta-arrow {
    width: 32px;
    height: 32px;
  }
  body.is-responsive .page-banner--default-dach .page-banner__button, body.is-responsive .page-banner--b2t-discount-banner .page-banner__button {
    width: 100%;
  }
  body.is-responsive .page-banner--b2t-discount-banner .page-banner__text {
    margin-bottom: 16px;
    padding-left: 0;
    max-width: 240px;
  }
  body.is-responsive .page-banner--b2t-discount-banner .page-banner__image {
    margin: -8px 3px 0 4px;
    width: 90px;
  }
  body.is-responsive .page-banner--default-pricing .page-banner__icon, body.is-responsive .page-banner--teachers .page-banner__icon {
    width: 84px;
    height: 74px;
  }
  body.is-responsive .page-banner--default-pricing .page-banner__percentage, body.is-responsive .page-banner--teachers .page-banner__percentage {
    font-size: 20px;
  }
  body.is-responsive .page-banner--default-pricing .page-banner__last-sale-subtitle, body.is-responsive .page-banner--teachers .page-banner__last-sale-subtitle {
    width: 100%;
    color: #e35b00;
    text-transform: uppercase;
  }
  body.is-responsive .page-banner--gewinnspiel {
    padding: 20px 0;
  }
  body.is-responsive .page-banner--gewinnspiel .page-banner__icon {
    width: 62px;
    height: 44px;
  }
  body.is-responsive .page-banner--gewinnspiel .page-banner__percentage {
    font-size: 14px;
  }
  body.is-responsive .page-banner--unassigned-video .page-banner__icon {
    width: 65px;
    height: 62px;
  }
  body.is-responsive .page-banner--free-trial .page-banner__icon, body.is-responsive .page-banner--former-user .page-banner__icon {
    width: 70px;
  }
  body.is-responsive .page-banner--free-trial .page-banner__percentage, body.is-responsive .page-banner--former-user .page-banner__percentage {
    position: absolute;
    top: 44%;
    left: 48%;
  }
  body.is-responsive .page-banner--profile-switch-parents .page-banner__cta-arrow, body.is-responsive .page-banner--profile-switch-parents-learning-groups .page-banner__cta-arrow {
    position: absolute;
    top: auto;
    bottom: 0;
    right: 13px;
  }
  body.is-responsive .page-banner--register-with-campaign-banner .page-banner__headline {
    font-size: 1.125rem;
  }
  body.is-responsive .page-banner--register-with-campaign-banner .page-banner__text {
    font-size: 1rem;
  }
}

.page-banner--survey {
  border-bottom: solid #e9a033;
  background-color: #f4e199;
}
.page-banner--survey .grid-container {
  margin: 16px auto;
}
.page-banner--survey .page-banner__cta {
  justify-content: flex-end;
}
.page-banner--survey .icon--circle-close {
  color: #555;
}
@media only screen and (max-width: 639px) {
  .page-banner--survey .grid-container {
    margin: 0 auto;
  }
  .page-banner--survey .page-banner__cta {
    justify-content: space-around;
  }
  .page-banner--survey .page-banner__cta-arrow {
    position: relative;
    top: 0;
    right: 0;
    transform: translateY(0);
  }
}

.dev-banner {
  width: 100%;
  background-color: #fbcd00;
  color: #333;
  padding: 8px 24px;
}
.dev-banner__content {
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}

.banner-extension {
  height: 40px;
  background-color: #33a0c4;
  color: #fff;
  text-align: center;
}
.banner-extension .icon--star {
  display: inline-block;
  margin: 0 -2px 4px;
  color: #fde166;
  font-size: 20px;
}
.banner-extension .h5 {
  display: inline-block;
  margin-left: 8px;
  padding-top: 8px;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .banner-extension {
    height: 36px;
  }
  body.is-responsive .banner-extension .h5 {
    padding-top: 10px;
    font-size: 12px;
  }
}

.global-banner-frame__container {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  padding: 16px;
  transition: background-color 1s;
}
.global-banner-frame__container .icon--star {
  display: inline-block;
  margin: 0 -2px 4px;
  color: #fbcd00;
  font-size: 20px;
}
.global-banner-frame__content {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  padding: 4px 8px;
  border-bottom: unset;
  border-radius: 22px;
  background: #fffae6;
  background-image: unset;
  box-shadow: 6px 6px 15px 0 rgba(0, 0, 0, 0.1);
}
.global-banner-frame__content-footer-banner-exp {
  display: block;
  margin: 0 auto;
  padding: 4px 8px;
  border-bottom: unset;
  background: #fffae6;
}
.global-banner-frame__content-footer-banner-exp .icon--star {
  display: inline-block;
  margin: 0 -2px 4px;
  color: #fbcd00;
  font-size: 18px;
}
.global-banner-frame__content-footer-banner-exp--v2 {
  background: #e6f8e6;
}
.global-banner-frame__text-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
}
.global-banner-frame__image {
  padding: 12px 20px;
}
.global-banner-frame__image--v2 {
  padding: 2px 20px;
}
.global-banner-frame__headline, .global-banner-frame__subheadline {
  color: #333;
}
.global-banner-frame__headline--v2, .global-banner-frame__subheadline--v2 {
  margin-top: 6px;
}
.global-banner-frame--welcome {
  background: linear-gradient(90deg, #009100 0.09%, #9c0 99.93%);
}
.global-banner-frame--information-videos {
  background: #cdf0cd;
}
.global-banner-frame--information-tests {
  background: #fef5cc;
}
.global-banner-frame--information-vocabulary_trainer {
  background: #f2e6f8;
}
.global-banner-frame--information-sofaheld, .global-banner-frame--information-chat {
  background: #99cfe1;
}
.global-banner-frame--information-worksheets {
  background: #f6d9ad;
}
.global-banner-frame--information-mathematik {
  background: #ccdbf0;
}
.global-banner-frame--information-deutsch {
  background: #f6d9ad;
}
.global-banner-frame--information-englisch {
  background: #f9cccc;
}
.global-banner-frame--information-physik {
  background: #e4ccf0;
}
.global-banner-frame--information-biologie {
  background: #ccf0cc;
}
.global-banner-frame--information-chemie {
  background: #f2cce2;
}
.global-banner-frame--information-franzoesisch {
  background: #f6f6ad;
}
@media only screen and (max-width: 959px) {
  .global-banner-frame__container .icon--star {
    font-size: 16px;
  }
  .global-banner-frame__content {
    padding: 10px;
  }
  .global-banner-frame__headline {
    margin-bottom: 2px;
  }
  .global-banner-frame__headline--v2 {
    font-size: 12px;
  }
  .global-banner-frame__headline span {
    color: #06c;
  }
  .global-banner-frame__text {
    padding: 24px 0;
  }
  .global-banner-frame__subheadline {
    line-height: 24px;
    font-size: 14px;
  }
  .global-banner-frame__image {
    padding-right: 16px;
  }
}
@media only screen and (max-width: 639px) {
  .global-banner-frame__container {
    padding: 16px 12px;
  }
  .global-banner-frame__container--floating-banner {
    position: fixed;
    top: 45px;
    left: 0;
    right: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s linear 0s;
    z-index: 9998;
  }
  .global-banner-frame__container--floating-banner .global-banner-frame__content {
    padding: 24px 0 8px 0;
    border-radius: 0;
  }
  .global-banner-frame__container--floating-banner .global-banner-frame__headline {
    font-size: 16px;
    margin-bottom: 0;
  }
  .global-banner-frame__container--floating-banner .global-banner-frame__button i {
    font-size: 20px;
  }
  .global-banner-frame__content {
    padding-top: 8px;
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
  }
  .global-banner-frame__text {
    padding-top: 16px;
    padding-bottom: 8px;
  }
  .global-banner-frame__headline {
    font-size: 20px;
  }
  .global-banner-frame__image {
    padding: 0;
    min-width: 100px;
  }
  .global-banner-frame__image--v2 {
    min-width: 70px;
    height: 78px;
    margin-right: 8px;
  }
  .global-banner-frame__button {
    width: 100%;
  }
  .global-banner-frame__button--v1, .global-banner-frame__button--v2 {
    width: 90%;
    margin-left: 30px;
    margin-bottom: 18px;
  }
}

.profile-popup {
  padding: 128px 0 0;
  background: rgba(51, 51, 51, 0.9);
  z-index: 2147483641;
}
@media only screen and (max-width: 639px) {
  body.is-responsive .profile-popup {
    padding-top: 64px;
  }
}

.warnings {
  position: relative;
  margin-top: -1px;
  background-color: #fdeb99;
  color: #fff;
  text-align: left;
  z-index: 9999;
}
.warnings .grid-column-12 {
  min-height: 0;
}

.warnings-content {
  padding: 16px 0;
}

.warnings-title {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  color: #333;
}

.warnings-text {
  font-size: 14px;
  line-height: 24px;
}
.warnings-text__greetings {
  margin-top: 28px;
}

.warning-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  background: url("/assets/application/icons/warning-yellow.svg");
  background-repeat: no-repeat;
}

.warnings-message {
  display: inline-block;
  padding-left: 34px;
  vertical-align: top;
}

.shared-hotline-button {
  position: relative;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  display: block;
  width: 100%;
  padding: 10px 16px;
  border-radius: 5px;
  background-color: #555;
  line-height: 120%;
  z-index: 1;
}
.shared-hotline-button:lang(en) {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  line-height: 1.2;
}
.shared-hotline-button:lang(en) a.second-title {
  font-size: 16px;
  font-weight: bold;
}
.shared-hotline-button.is-light-version {
  background-color: #e6e8e5;
}
.shared-hotline-button.is-light-version .shared-hotline-button__contact a {
  color: #666;
}
.shared-hotline-button.is-light-version span {
  color: #666;
}
@media only screen and (max-width: 959px) {
  .shared-hotline-button.is-light-version .shared-hotline-button__contact--hotline, .shared-hotline-button.is-light-version .shared-hotline-button__contact--email {
    font-size: 16px;
  }
}
.shared-hotline-button .title {
  display: block;
  font-size: 12px;
  font-weight: normal;
}
.shared-hotline-button a {
  color: #333;
}
.shared-hotline-button__contact {
  padding-top: 8px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  pointer-events: auto;
}
.shared-hotline-button__contact--hotline {
  padding-bottom: 8px;
  font-size: 21px;
}
.shared-hotline-button__contact--email {
  padding-bottom: 8px;
  font-size: 19px;
}
.shared-hotline-button__contact .sprites-layouts-email, .shared-hotline-button__contact .sprites-layouts-hotline {
  margin-right: 8px;
}
.shared-hotline-button .office-hours, .shared-hotline-button .rate {
  display: inline-block;
  color: #333;
  font-size: 10px;
  text-transform: uppercase;
}
.shared-hotline-button .rate {
  font-weight: normal;
}
@media only screen and (max-width: 959px) {
  body.is-responsive .shared-hotline-button .shared-hotline-button__contact {
    pointer-events: inherit;
  }
}

.shared-limited-support-note {
  position: relative;
  top: -3px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 100%;
  padding: 8px 10px 5px;
  background-color: #9c0;
  font-size: 11px;
  line-height: 110%;
  text-align: right;
  box-shadow: 0 7px 5px #7aa300 inset;
}

.visual-highlights {
  display: flex;
  margin: 32px 0 8px;
  border-radius: 32px;
}
.visual-highlights__info {
  background: #e6f3f8;
  color: #333;
}
.visual-highlights__important {
  background: #fdeb99;
  color: #885200;
}
.visual-highlights__subtle {
  background: #fff;
  color: #ddd;
  border: 1px solid #ddd;
}
.visual-highlights__icon {
  margin: 20px 0 20px 20px;
  color: #002e6d;
}
.visual-highlights__icon--info {
  width: 24px;
  height: 24px;
  background: url("/assets/application/layouts/info.svg") no-repeat;
}
.visual-highlights__icon--important {
  width: 24px;
  height: 24px;
  background: url("/assets/application/layouts/important.svg") no-repeat;
}
.visual-highlights__icon--subtle {
  width: 24px;
  height: 24px;
  background: url("/assets/application/layouts/subtle.svg") no-repeat;
}
.visual-highlights__text {
  align-self: center;
  padding: 16px 56px 16px 16px;
}
.visual-highlights__text p {
  margin: 0;
  color: #333;
}

.visual-highlights + .visual-highlights {
  margin-top: 8px;
}

.quiz-section {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  padding: 32px;
  border: 1px solid #e1e1e1;
  border-radius: 16px;
  background-color: #fff;
  margin-top: 32px;
  color: #006d91;
  display: flex;
  flex-direction: column;
}
.quiz-section__subheadline {
  font-weight: 700;
  margin: 0 0 24px;
}
.quiz-section__subheadline p {
  color: #333;
  font-size: 16px;
  margin-top: 0;
}
.quiz-section__option {
  display: flex;
  width: 100%;
  margin: 4px 0;
  padding: 16px 8px;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  background: #fff;
}
.quiz-section__option p {
  padding-left: 8px;
  margin: inherit;
}
.quiz-section__option--green {
  background-color: #f5fae6;
}
.quiz-section__option--red {
  background-color: #fce6e6;
}
.quiz-section__label::before {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  content: "";
}
.quiz-section__form {
  display: flex;
  flex-direction: column;
}
.quiz-section__question-counter {
  padding: 16px 0;
  color: #333;
  text-align: center;
}
.quiz-section__button {
  margin-left: auto;
}

.visual-hint {
  background-color: rgba(153, 207, 225, 0.35);
  border: 1px solid rgba(153, 207, 225, 0.4);
  border-radius: 4px;
  color: #666;
  padding: 4px 2px;
}
.visual-hint:hover, .visual-hint:focus {
  background-color: rgba(153, 207, 225, 0.6);
  border: 1px solid #66b8d2;
  color: #333;
  cursor: pointer;
}
.visual-hint.hover {
  background-color: #00526d;
  border: 1px solid #00526d;
  color: #fff;
}
.visual-hint-text {
  background-color: #E9F8FE;
  border: 1px solid #E9F8FE;
  border-radius: 8px;
  filter: drop-shadow(0 0 2px rgba(51, 51, 51, 0.16));
  padding: 16px 24px !important;
}
.visual-hint-text::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 20px;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #E9F8FE transparent;
}
.visual-hint-text p {
  margin: inherit;
}
@media only screen and (max-width: 959px) {
  .visual-hint-text p {
    margin: 0 !important;
  }
}

.orbit.image-gallery {
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  max-width: 550px;
}
.orbit.image-gallery .orbit-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  justify-content: center;
}
.orbit.image-gallery .orbit-previous, .orbit.image-gallery .orbit-next {
  color: #333;
  cursor: pointer;
}
.orbit.image-gallery .orbit-slide {
  display: flex;
  padding: 0 2.5rem;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 100%;
  justify-content: center;
}
.orbit.image-gallery .orbit-slide.is-active {
  position: relative;
  visibility: visible;
}
.orbit.image-gallery .orbit-slide:not(.is-active) {
  visibility: hidden;
}
.orbit.image-gallery .orbit-slide img {
  width: 100%;
  object-fit: cover;
  padding: 0;
}
.orbit.image-gallery .orbit-figure {
  display: grid !important;
}
.orbit.image-gallery .orbit-caption {
  position: relative !important;
  bottom: auto !important;
  grid-row: 2;
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  background-color: #fff;
}
.orbit.image-gallery .orbit-bullets {
  margin-top: 1rem;
}
.orbit.image-gallery .orbit-bullets button {
  width: 4rem;
  height: 4rem;
  border-radius: 0;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
}
.orbit.image-gallery .orbit-bullets button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}
.orbit.image-gallery .orbit-bullets button.is-active {
  border: 2px solid #666;
}

.nested-accordion {
  margin-top: 32px;
}
.nested-accordion__item {
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
}
.nested-accordion__item .icon--plus {
  display: block !important;
}
.nested-accordion__item .icon--minus {
  display: none !important;
}
.nested-accordion__item.is-active .icon--minus {
  display: block !important;
}
.nested-accordion__item.is-active .icon--plus {
  display: none !important;
}
.nested-accordion__title, .nested-accordion__content {
  padding: 16px 32px;
  color: #666;
}
.nested-accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nested-accordion__title:hover {
  color: #666;
}
.nested-accordion__title .h4, .nested-accordion__title .h4 p {
  margin: 0 !important;
}
.nested-accordion__title .h4.strong {
  font-weight: bold;
}
.nested-accordion__content {
  padding-top: 0;
}

.teacher-feedback-popup {
  max-width: 756px;
  padding: 24px;
  overflow-y: visible;
}
.teacher-feedback-popup__illustration {
  position: absolute;
  top: -64px;
  left: 50%;
  width: 200px;
  transform: translateX(-50%);
}
.teacher-feedback-popup__headline {
  margin: 48px 0 16px;
  font-weight: bold;
}
.teacher-feedback-popup__submit-button {
  float: right;
}
.teacher-feedback-popup__support-text i {
  margin-bottom: 4px;
}
@media only screen and (max-width: 639px) {
  .teacher-feedback-popup__illustration {
    position: relative;
    top: 0;
    display: block;
    width: 164px;
    margin-top: 16px;
  }
  .teacher-feedback-popup__headline {
    margin: 16px 0;
  }
  .teacher-feedback-popup__submit-button {
    float: none;
  }
}

.content-audio-player {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.content-audio-player .controls {
  display: flex;
  align-items: center;
}
.content-audio-player .play-button, .content-audio-player .pause-button, .content-audio-player .replay-button {
  width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  background-size: contain;
}
.content-audio-player .play-button.hidden, .content-audio-player .pause-button.hidden, .content-audio-player .replay-button.hidden {
  display: none;
}
.content-audio-player .play-button {
  background-image: url(/packs/static/assets/images/audio_player/play-b625e245e284179e171a.svg);
}
.content-audio-player .play-button:hover {
  background-image: url(/packs/static/assets/images/audio_player/play-hover-526abb1e850e253ac433.svg);
}
.content-audio-player .pause-button {
  background-image: url(/packs/static/assets/images/audio_player/pause-000c42fe631476f14147.svg);
}
.content-audio-player .pause-button:hover {
  background-image: url(/packs/static/assets/images/audio_player/pause-hover-1a295bb160a885bfaa54.svg);
}
.content-audio-player .replay-button {
  background-image: url(/packs/static/assets/images/audio_player/replay-c703fcfa875be46b36a7.svg);
}
.content-audio-player .replay-button:hover {
  background-image: url(/packs/static/assets/images/audio_player/replay-hover-32c4cc6566a7f3c7524c.svg);
}
.content-audio-player .current-time {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 14px;
}
.content-audio-player .progress-bar {
  width: 100%;
  position: relative;
}
.content-audio-player .progress-bar .time-popup {
  display: none;
  position: absolute;
  top: -49px;
  background-image: url(/packs/static/assets/images/audio_player/pop-up-53bbb5a9578cd9414fec.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 58px;
  height: 73px;
  color: white;
  text-align: center;
  padding-top: 20px;
  font-size: 12px;
}
.content-audio-player .progress-bar .time-popup span {
  position: absolute;
  top: 10px;
  left: 18px;
}
.content-audio-player .progress-bar .progress-input {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  background: #e6e8e5;
  outline: none;
  border-radius: 5px;
}
.content-audio-player .progress-bar .progress-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: url(/packs/static/assets/images/audio_player/drag-9ea2b73a9e1690098f79.svg);
  background-size: contain;
  cursor: pointer;
}
.content-audio-player .progress-bar .progress-input:hover::-webkit-slider-thumb {
  background: url(/packs/static/assets/images/audio_player/drag-hover-2dfc4c370c41b01de2c5.svg);
  background-size: contain;
}

.pdf-card {
  border: 1px solid #dadce0;
  background-color: #fff;
  border-radius: 21px;
  display: flex;
}
.pdf-card .pdf-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.pdf-card .pdf-content .pdf-icon {
  width: 80px;
  height: 80px;
  background: url(/packs/static/assets/images/pdf/logo-f35ca148a6bb38b8f21a.svg) no-repeat center;
}
.pdf-card .pdf-content .pdf-details {
  display: flex;
  flex-direction: row;
  width: 86%;
  justify-content: space-between;
  padding-right: 15px;
}
.pdf-card .pdf-content .pdf-details .pdf-name {
  font-size: 15px;
  font-weight: 500;
}
.pdf-card .pdf-content .pdf-details .pdf-download a {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  font-size: 14px;
  color: #1a73e8;
}
.pdf-card .pdf-content .pdf-details .pdf-download a:hover .download-icon {
  background: url(/packs/static/assets/images/pdf/download-icon-hover-d423ba80f9cb1be89bd4.svg) no-repeat center;
}
.pdf-card .pdf-content .pdf-details .pdf-download a .download-icon {
  width: 25px;
  height: 20px;
  background: url(/packs/static/assets/images/pdf/download-icon-5f70f934c90d39b8b33a.svg) no-repeat center;
}

@media (max-width: 768px) {
  .pdf-card .pdf-content {
    flex-direction: row;
  }
  .pdf-card .pdf-content .pdf-details {
    flex-direction: column;
    align-items: flex-start;
    padding-right: 0;
  }
  .pdf-card .pdf-content .pdf-details .pdf-name {
    margin-bottom: 2px;
    font-size: 14px;
    padding-right: 20px;
  }
  .pdf-card .pdf-content .pdf-details .pdf-download a {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    font-size: 12px;
  }
}
.kids-nps-survey-popup {
  position: relative;
  width: 592px;
  margin-top: 224px;
  padding: 24px;
  overflow-y: visible;
}
.kids-nps-survey-popup__headline {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  margin-bottom: 16px;
  color: #fff;
}
.kids-nps-survey-popup__step:not(:first-of-type) {
  display: none;
}
.kids-nps-survey-popup__options-list {
  display: flex;
  margin-right: -8px;
  margin-bottom: 16px;
  margin-left: -8px;
}
.kids-nps-survey-popup__options-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 112px;
  padding-right: 8px;
  padding-left: 8px;
  text-align: center;
}
.kids-nps-survey-popup__options-item.is-active .kids-nps-survey-popup__options-item-image-wrapper {
  background: #f8f8f8;
  box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.5);
}
.kids-nps-survey-popup__options-item-image {
  width: 64px;
  height: 64px;
}
.kids-nps-survey-popup__options-item-image-wrapper {
  padding: 16px;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  border-radius: 4px;
  background: #e6e8e5;
  cursor: pointer;
}
.kids-nps-survey-popup__options-item-image-wrapper:hover, .kids-nps-survey-popup__options-item-image-wrapper:focus {
  background: #f8f8f8;
  box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.5);
}
.kids-nps-survey-popup__actions button {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.kids-nps-survey-popup__final-step-image {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 32px;
}
.kids-nps-survey-popup__overlay {
  background: rgba(51, 51, 51, 0.9);
}
@media only screen and (max-width: 639px) {
  body.is-responsive .kids-nps-survey-popup {
    width: 304px;
    height: auto;
    min-height: auto;
    margin-top: 176px;
    margin-right: auto;
    margin-left: auto;
    padding: 24px 16px;
    border-radius: 8px;
  }
  body.is-responsive .kids-nps-survey-popup__options-list {
    margin-right: -4px;
    margin-left: -4px;
  }
  body.is-responsive .kids-nps-survey-popup__options-item {
    width: 56px;
    padding-right: 4px;
    padding-left: 4px;
  }
  body.is-responsive .kids-nps-survey-popup__options-item-image-wrapper {
    padding: 16px 8px;
  }
  body.is-responsive .kids-nps-survey-popup__options-item-image {
    width: 32px;
    height: 32px;
  }
  body.is-responsive .kids-nps-survey-popup__final-step-image {
    width: 96px;
    height: 96px;
  }
}

.nps-popup__step:not(:first-of-type) {
  display: none;
}

.student-feedback-popup {
  position: relative;
  width: 559px;
  height: 429px;
  margin-top: 224px;
  padding: 24px;
  overflow-y: visible;
}
.student-feedback-popup__header-image-background {
  position: absolute;
  top: -125px;
  left: 154.5px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: #fff;
  z-index: -1;
}
.student-feedback-popup__header-image {
  position: absolute;
  left: -26px;
  height: 165px;
}
.student-feedback-popup__question {
  margin-top: 77px;
}
.student-feedback-popup__headline {
  text-align: center;
}
.student-feedback-popup__step:not(:first-of-type) {
  display: none;
}
.student-feedback-popup__options-list {
  display: flex;
  justify-content: center;
  margin-right: -8px;
  margin-bottom: 16px;
  margin-left: -8px;
}
.student-feedback-popup__options-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 112px;
  padding-right: 8px;
  padding-left: 8px;
  text-align: center;
}
.student-feedback-popup__options-item.is-active .student-feedback-popup__options-item-image-wrapper {
  background: #f8f8f8;
  box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.5);
}
.student-feedback-popup__options-item-image {
  width: 64px;
  height: 64px;
}
.student-feedback-popup__options-item-image-wrapper {
  padding: 16px;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  border-radius: 4px;
  background: #e6e8e5;
  cursor: pointer;
}
.student-feedback-popup__options-item-image-wrapper:hover, .student-feedback-popup__options-item-image-wrapper:focus {
  background: #f8f8f8;
  box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.5);
}
.student-feedback-popup__actions button {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.student-feedback-popup__final-step-image {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 32px;
}
.student-feedback-popup__overlay {
  background: rgba(51, 51, 51, 0.9);
}
@media only screen and (max-width: 639px) {
  body.is-responsive .student-feedback-popup {
    width: 304px;
    height: auto;
    min-height: auto;
    margin-top: 176px;
    margin-right: auto;
    margin-left: auto;
    padding: 24px 16px;
    border-radius: 8px;
  }
  body.is-responsive .student-feedback-popup__options-list {
    margin-right: -4px;
    margin-left: -4px;
  }
  body.is-responsive .student-feedback-popup__options-item {
    width: 56px;
    padding-right: 4px;
    padding-left: 4px;
  }
  body.is-responsive .student-feedback-popup__options-item-image-wrapper {
    padding: 16px 8px;
  }
  body.is-responsive .student-feedback-popup__options-item-image {
    width: 32px;
    height: 32px;
  }
  body.is-responsive .student-feedback-popup__final-step-image {
    width: 96px;
    height: 96px;
  }
}
/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/components/molecules/grid_card/component.sass ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
.grid-card__card-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem;
}
.grid-card__image-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 7.5rem;
}
.grid-card__card-image {
  max-height: 100%;
}
.grid-card__card-title {
  margin-bottom: 4px;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/components/molecules/list_card/component.sass ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
.list-card {
  padding: 0.25rem;
  border: 0.0625rem solid;
  border-radius: 0.5rem;
  background-color: #fff;
  cursor: pointer;
}
.list-card__image-container {
  height: 100%;
  border-radius: 0.5rem;
}
.list-card__image {
  width: 8.875rem;
  max-width: 7.3rem;
  height: 4.375rem;
  border-radius: 0.5rem;
}
@media only screen and (max-width: 639px) {
  .list-card__image {
    height: 2.375rem;
    width: 5.375rem;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/components/user_notifications/user_notifications.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.user-notifications-container {
  position: absolute;
  right: 0;
  min-width: 200px;
}
.user-notifications-container .user-notification {
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.25);
  width: max-content;
  margin-bottom: 8px;
  padding: 16px;
  float: right;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  text-align: left;
}
.user-notifications-container .user-notification__text {
  font-weight: bold;
}
.user-notifications-container .user-notification__text .red {
  color: #e30000;
}
.user-notifications-container.with-notifications .user-notification {
  cursor: pointer;
}

.icon.icon--notification {
  position: relative;
  color: #9c0;
  cursor: pointer;
}
.icon.icon--notification .new {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e30000;
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/Dropdown/Dropdown.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
.dropdown-container {
  position: relative;
}

.dropdown-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0.5rem 1rem;
  border: 1px solid #a1b2bc;
  border-radius: 8px;
  background-color: #fff;
}
.dropdown-button__img, .dropdown-button__img--open {
  width: 7px;
  height: 7px;
  transition: transform 0.5s ease-in-out;
  filter: invert(0.5);
}
.dropdown-button__img--open, .dropdown-button__img--open--open {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  width: 100%;
  border-radius: 0.25rem;
  background-color: #fff;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.position-bottom-left {
  top: 100%;
  left: 0;
}

.dropdown-list {
  list-style-type: none;
  padding: 0;
}

.dropdown-item {
  font-family: Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  padding: 0.75rem;
  cursor: pointer;
}
.dropdown-item:hover {
  background-color: #f0f3ed;
}

.selected-item {
  background-color: #f0f3ed;
}

.dropdown-image {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: #9ca3af;
  object-fit: cover;
}
/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/slick-carousel/slick/slick.css ***!
  \*************************************************************************************************************************************************************************************************/
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

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

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/slick-carousel/slick/slick-theme.css ***!
  \*******************************************************************************************************************************************************************************************************/
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url(/packs/static/slick-carousel/slick/ajax-loader-fb6f3c230cb846e25247.gif) center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url(/packs/static/slick-carousel/slick/fonts/slick-a4e97f5a2a64f0ab1323.eot);
    src: url(/packs/static/slick-carousel/slick/fonts/slick-a4e97f5a2a64f0ab1323.eot?#iefix) format('embedded-opentype'), url(/packs/static/slick-carousel/slick/fonts/slick-295183786cd8a1389865.woff) format('woff'), url(/packs/static/slick-carousel/slick/fonts/slick-c94f7671dcc99dce43e2.ttf) format('truetype'), url(/packs/static/slick-carousel/slick/fonts/slick-2630a3e3eab21c607e21.svg#slick) format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/organisms/FeaturedCarousel/FeaturedCarousel.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
.featured-carousel__item__title {
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
}
.featured-carousel__item img {
  width: 100%;
}
.featured-carousel__item__subtitle {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-align: center;
}
.featured-carousel .slick-dots li {
  margin: 0;
}
.featured-carousel .slick-dots button::before {
  color: #e6e8e5;
  font-size: 10px;
  opacity: 1;
}
.featured-carousel .slick-dots .slick-active > button::before {
  color: #9c0;
  font-size: 12px;
}
@media only screen and (max-width: 639px) {
  .featured-carousel {
    bottom: 0;
  }
}
/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/atoms/ShineEffect/ShineEffect.sass ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
.shine-container {
  position: absolute;
  width: 100%;
  max-width: inherit;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.shine-container__effect {
  position: absolute;
  top: -20%;
  left: -20%;
  height: 150%;
  animation: shine 1800ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  z-index: 2;
}

@keyframes shine {
  0% {
    left: 0;
  }
  40% {
    left: 120%;
  }
  70% {
    left: 120%;
  }
  100% {
    left: -20%;
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/application/_colors.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************/

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/ProgressBar/ProgressBar.sass ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.progress-bar {
  position: relative;
}
.progress-bar h3 {
  margin: 0;
  padding-right: 16px;
  font-weight: bold;
  text-align: left;
}
.progress-bar .progress-animated {
  width: 0;
  animation: progress-animation 1s ease-in-out forwards;
}
.progress-bar .background-progress-meter {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 14px;
  background-color: #66b8d3;
}
.progress-bar .glitter {
  position: absolute;
  z-index: 3;
}
.progress-bar .glitter:nth-child(1) {
  top: 90%;
  left: 5%;
}
.progress-bar .glitter:nth-child(2) {
  top: 80%;
  left: 45%;
}
.progress-bar .glitter:nth-child(3) {
  top: -90%;
  left: 65%;
}
.progress-bar .glitter:nth-child(4) {
  top: -50%;
  left: 90%;
}

@keyframes progress-animation {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/SpeechBubble/SpeechBubble.sass ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.wrapper {
  position: relative;
  z-index: 1;
}
.wrapper__cover {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  animation: slide 2s ease-in-out;
  animation-fill-mode: forwards;
  background-color: #fff;
}

.triangle {
  position: absolute;
  top: 48%;
  left: 0;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.triangle__dynamic-triangle {
  top: auto;
  bottom: -16px;
  left: auto;
  transition: left 0.3s ease;
}
.triangle__dynamic-triangle--with-shadow {
  filter: drop-shadow(0 4px 4px #ececec);
}
.triangle__dynamic-triangle--bottom-center {
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
}
.triangle__dynamic-triangle--bottom-left {
  left: 20px;
  transform: rotate(-90deg);
}
.triangle__dynamic-triangle--bottom-right {
  right: 20px;
  transform: rotate(-90deg);
}
.triangle__dynamic-triangle--top-center {
  top: -16px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}
.triangle__dynamic-triangle--top-left {
  top: -16px;
  left: 20px;
  transform: rotate(90deg);
}
.triangle__dynamic-triangle--top-right {
  top: -16px;
  right: 20px;
  transform: rotate(90deg);
}
.triangle__dynamic-triangle--right-center {
  top: 50%;
  right: -16px;
  left: auto;
  transform: translateY(-50%) rotate(180deg);
}
.triangle__dynamic-triangle--left-center {
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
}

.speech-bubble {
  border-radius: 8px;
  text-align: center;
}
.speech-bubble--small {
  padding: 8px 16px;
  font-size: 16px;
}
.speech-bubble--large {
  padding: 4px 18px;
  font-size: 26px;
  line-height: 1.5;
}
@media only screen and (max-width: 639px) {
  .speech-bubble--large {
    font-size: 18px;
  }
  .speech-bubble--top {
    top: 19px;
  }
}

@keyframes slide {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./app/javascript/UIComponents/molecules/HoverBadge/HoverBadge.sass ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.hover-badge {
  display: block;
  position: relative;
  width: fit-content;
}
.hover-badge__circle-wrapper {
  display: flex;
  position: absolute;
  bottom: 16px;
  left: 50%;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  transform: translateX(-50%);
  background-color: #fff;
  z-index: 0;
}
.hover-badge__circle-wrapper, .hover-badge__circle {
  border-radius: 50%;
}
.hover-badge__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 134px;
  height: 134px;
  background-repeat: no-repeat;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
}
.hover-badge__text {
  position: relative;
  width: fit-content;
  padding: 4px;
  transition: opacity 0.2s ease-in-out;
  border-radius: 4px;
  box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.1);
  opacity: 0;
}
.hover-badge__circle-wrapper:hover + .hover-badge__text {
  opacity: 1;
}
.hover-badge__circle {
  background-image: url(/packs/static/practice_topics/piggy_bank-7cd9b9ec7b7ec05dd355.svg);
  background-position: center bottom 28px;
  background-size: 100px;
  color: #00445b;
  font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
}
.hover-badge--pommes-welt .hover-badge__circle, .hover-badge--pommes-welt .hover-badge__text {
  background-color: #d4f9d4;
}
.hover-badge--assessment-test .hover-badge__circle, .hover-badge--assessment-test .hover-badge__text {
  background-color: #ffe892;
}
.hover-badge--printables .hover-badge__circle, .hover-badge--printables .hover-badge__text {
  background-color: #d4e3fb;
}

practice-topics-banner-header--touch-device .hover-badge__text {
  display: none;
}

/*# sourceMappingURL=application-d3413aaf.css.map*/