/***
 * Mixins:
 */
/**
 * Pixel to rem converter:
 * Use the converter as follows: `font-size: 16 * @px2rem` to get a value in **rem**.
 *
 * Alternatively you can use `font-size: 16 * @px2em` to convert into **em**.
 */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: inherit;
  vertical-align: baseline;
}
html {
  font-size: 100%;
}
body {
  font-size: 1em;
  color: #000000;
  font-family: 'Source Sans Pro', 'Helvetica', sans-serif;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
select {
  vertical-align: middle;
}
textarea {
  width: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*
 * Normalize the behaviour of all browsers
 *
 * Instead of setting box-sizing fix on all elements we only set it on the root element
 * and tell all elements to inherit it's property from the parent
 * That way it's possible to overwrite the box-sizing anywhere while keeping proper inheritance
 */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/***
 * Helpers:
 */
/**
 * Stretch:
 * `.stretch` Define an element which stretches to the size of its parent
 *
 * 	@example
 * 	div.rel( style="background-color:#AAA; height: 25px" )
 * 		div.stretch I'm stretched to the size of my parent
 */
.stretch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/**
 * Abs:
 * `.abs` Set the element absolute to its parent
 *
 * 	@example
 * 	div.abs( style="background-color:#AAA") Absolute position
 */
.abs {
  position: absolute;
}
/**
 * Rel:
 * `.rel` Set the position relative to its parent
 *
 * 	@example
 * 	div.rel( style="background-color:#AAA") Relative position
 */
.rel {
  position: relative;
}
.vcenter {
  vertical-align: middle;
}
.hcenter {
  text-align: center;
}
/**
 * Hidden:
 * `.hidden` Hide the element
 *
 * 	@example
 * 	div.hidden I'm nowhere to be seen
 */
.hidden {
  display: none;
}
.btn {
  appearance: none;
  background-color: #d70926;
  padding: 8px 12px;
  color: #FFFFFF;
  border: none;
  font-size: 1em;
  font-weight: 200;
  display: inline-block;
  cursor: pointer;
  border-radius: 0.3125rem;
  outline: none;
  margin-top: 0.1875rem;
  margin-bottom: 0.1875rem;
}
.btn:hover {
  background-color: #f84e66;
  color: #FFFFFF;
}
.btn:focus {
  border-bottom: 2px solid #750515;
  padding-bottom: 6px;
}
.btn.disabled {
  background-color: #c4b5b7;
  cursor: default;
  color: #7d6366;
}
.btn.disabled:hover {
  color: #7d6366;
}
.btn.second {
  background-color: #c11f36;
  color: #ffffff;
  font-size: 0.8em;
}
.btn.second:hover {
  background-color: #ef0a2a;
}
img.responsive {
  max-width: 100%;
  height: auto;
}
.input {
  outline: none;
  line-height: 1.467em;
  padding: 8px 12px;
  appearance: none;
  border-radius: 0.3125rem;
  box-shadow: none;
  font-size: 1em;
  border: 2px solid #B3B3B5;
}
.dropdown {
  font-size: 1em;
  padding: 5px;
  border: 2px solid #B3B3B5;
  height: 2.6em;
  border-radius: 0.3125rem;
  background-color: #FFF;
  margin: 2px;
}
.label {
  display: block;
  font-size: 0.8em;
  font-weight: bold;
  color: #003160;
}
h1 {
  font-size: 3.125rem;
  font-weight: bold;
}
h2 {
  font-size: 2.5rem;
  font-weight: bold;
}
h3 {
  font-size: 1.875rem;
  font-weight: bold;
}
h4 {
  font-size: 1.25rem;
  font-weight: bold;
}
h5 {
  font-size: 1.125rem;
  font-weight: bold;
}
h6 {
  font-size: 1rem;
  font-weight: bold;
}
a {
  text-decoration: none;
  color: #d70926;
}
a:hover {
  color: #f84e66;
}
.row {
  display: table;
  width: 100%;
}
.row.row--fixed {
  table-layout: fixed;
}
.row.row--fixed > * {
  display: table-cell;
}
.row > * {
  display: table-cell;
}
.row > *.col-1 {
  width: 100%;
}
.row > *.col-1-2,
.row > *.col-2-4 {
  width: 50%;
}
.row > *.col-1-3 {
  width: 33.33333333%;
}
.row > *.col-2-3 {
  width: 66.66666667%;
}
.row > *.col-1-4 {
  width: 25%;
}
.row > *.col-3-4 {
  width: 75%;
}
.row > *.col-auto {
  width: auto;
}
.grid {
  margin: 0 -0.9375rem;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid > * {
  float: left;
  padding: 0 0.9375rem;
  position: relative;
  width: 100%;
}
.grid.grid--reverse > * {
  float: right;
}
.grid.grid--nogutter {
  margin: 0;
}
.grid.grid--nogutter > * {
  padding: 0;
}
.grid .small-1-1,
.grid .small-1 {
  width: 100%;
}
.grid .small-1-2,
.grid .small-2-4 {
  width: 50%;
}
.grid .small-1-3 {
  width: 33.33333333%;
}
.grid .small-2-3 {
  width: 66.66666667%;
}
.grid .small-1-4 {
  width: 25%;
}
.grid .small-3-4 {
  width: 75%;
}
@media all and (min-width: 740px) {
  .grid .medium-1-1,
  .grid .medium-1 {
    width: 100%;
  }
  .grid .medium-1-2,
  .grid .medium-2-4 {
    width: 50%;
  }
  .grid .medium-1-3 {
    width: 33.33333333%;
  }
  .grid .medium-2-3 {
    width: 66.66666667%;
  }
  .grid .medium-1-4 {
    width: 25%;
  }
  .grid .medium-3-4 {
    width: 75%;
  }
}
@media all and (min-width: 990px) {
  .grid .large-1-1,
  .grid .large-1 {
    width: 100%;
  }
  .grid .large-1-2,
  .grid .large-2-4 {
    width: 50%;
  }
  .grid .large-1-3 {
    width: 33.33333333%;
  }
  .grid .large-2-3 {
    width: 66.66666667%;
  }
  .grid .large-1-4 {
    width: 25%;
  }
  .grid .large-3-4 {
    width: 75%;
  }
}
/***
 * Responsive media container:
 */
/**
 * Responsive 4:3/16:9 media container:
 * `.responsive-media .media-4-3, .responsive-media .media-16-9` - This makes a div a container for any media element (iframe, video, ... ) that responsive scales with a fix ratio.
 * The media element needs the class `.media`. The `.responsive-media` container can have one of the following classes: `.media-4-3`, `.media-16-9` to define the fix ratio.
 *
 * 	@example
 * 	div.responsive-media.media-4-3
 * 		iframe.media(src='//www.youtube.com/embed/HhZaHf8RP6g',frameborder='0')
 */
.responsive-media {
  width: 100%;
  position: relative;
  padding-bottom: 50%;
}
.responsive-media > .media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.responsive-media.media-4-3 {
  padding-bottom: 75%;
}
.responsive-media.media-16-9 {
  padding-bottom: 56.26%;
}
/**
 * Checkbox:
 * `.block` - A label with its content displayed as a block, used primarily for checkboxes and radiobuttons
 *
 * 	@example
 * 	label.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
 * 		input(type="radio")
 * 	label.block Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
 * 		input(type="checkbox")
 */
.block {
  position: relative;
  display: block;
  margin-left: 1.2em;
}
.block input[type="radio"],
.block input[type="checkbox"] {
  position: absolute;
  top: 1px;
  left: -1.2em;
  margin: 0;
}
/***
 * Navigation:
 */
/**
 * Navigation list:
 * `.navigation` - A styling for a list of categories in a navigation
 *
 * 	@example
 * 	ol.navigation
 * 		li.active Home
 * 		li Gallery
 * 		li Blog
 */
.navigation {
  margin: 0;
  padding: 0;
  list-style: none;
}
.navigation li {
  padding: 7px 12px;
  background-color: #FFF;
  font-size: 0.9em;
}
.navigation li:hover {
  background-color: #003160;
  color: #FFF;
}
.navigation li.active {
  background-color: #bbb;
  color: #FFF;
}
/**
 * Tabbed navigation:
 * `.navigation--tabbed` - A navigation modifier for tabbed navigation
 *
 * 	@example
 * 	div
 * 		ul.navigation.navigation--tabbed
 * 			li.active Home
 * 			li Gallery
 * 			li Blog
 */
.navigation--tabbed {
  border-bottom: 1px solid #bbb;
}
.navigation--tabbed li {
  display: inline-block;
}
/**
 * Menu navigation:
 * `.menu-navigation` - A styling for a menu navigation
 *
 * 	@example
 * 	div.menu-navigation.open(style='height:150px')
 * 		div.toggle-menu Menu
 * 		ol.navigation
 * 			li.active Home
 * 			li Gallery
 * 			li Blog
 */
.menu-navigation {
  position: relative;
}
.menu-navigation .navigation {
  position: absolute;
  display: none;
  background-color: #FFF;
  z-index: 10;
  top: 20px;
  left: 0;
}
.menu-navigation.open .navigation {
  display: block;
}
/**
 * Container:
 * `.container`
 * A default container that centers its content with a max width
 *
 * 	@example
 * 	div.container.demo-bg This is a container
 */
.container {
  max-width: 993.75px;
  margin: auto;
  padding: 0 1.875rem;
}
/* Settings */
/* Helper */
.full-width {
  width: 100%;
}
.full-height {
  height: 100%;
}
.content {
  padding-top: 84px;
}
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.clearfix:after {
  content: ' ';
  display: table;
  clear: both;
}
.clear {
  clear: both;
}
.hidden {
  display: none;
}
[class^="icon-"],
[class*=" icon-"] {
  height: 1em;
  width: 1em;
  display: inline-block;
  fill: currentColor;
  transition: 0.3s transform ease;
}
[class^="icon-"].flip,
[class*=" icon-"].flip {
  transform: rotateX(180deg);
}
[class^="icon-"].icon--small,
[class*=" icon-"].icon--small {
  height: 0.75rem;
  width: 0.75rem;
}
[class^="icon-"].icon--medium,
[class*=" icon-"].icon--medium {
  height: 1.125rem;
  width: 1.125rem;
  vertical-align: middle;
}
[class^="icon-"].icon--large,
[class*=" icon-"].icon--large {
  height: 1.875rem;
  width: 1.875rem;
}
[class^="icon-"].icon--huge,
[class*=" icon-"].icon--huge {
  height: 2.875rem;
  width: 2.875rem;
}
.icon-home {
  height: 1rem !important;
  width: 1rem !important;
}
.icon-arrow-back {
  margin-bottom: 4px;
}
/* Base */
html,
body {
  font-family: "Open Sans", sans-serif;
  height: 100%;
  margin: 0;
}
h1 {
  font-size: 3.4375rem;
  font-weight: 700;
  letter-spacing: 0.01090909em;
  line-height: 1.21818182em;
  margin-bottom: 1.875rem;
}
h2 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.011em;
  line-height: 1.25em;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
h3 {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: 0.011em;
  line-height: 1.36666667em;
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem;
}
h4 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01125em;
  line-height: 1.41666667em;
}
h5 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.01111111em;
  line-height: 1.44444444em;
}
p {
  font-size: 1.125rem;
  line-height: 1.61111111em;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
p.paragraph--highlighted {
  background-color: #f3f3f2;
}
a {
  cursor: pointer;
}
video {
  padding-bottom: 0px !important;
}
/* Objects */
.hero {
  background-color: #f3f3f2;
  background-repeat: no-repeat;
  background-position-y: 30%;
  background-size: cover;
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s;
}
.hero .hero__title {
  color: white;
  position: absolute;
  right: 1.875rem;
  bottom: 4%;
  opacity: 0.8;
  text-shadow: 0px 0px 12px #333;
}
.hero .hero__copyright {
  color: white;
  position: absolute;
  right: 1.875rem;
  bottom: 3%;
  opacity: 0.8;
  text-shadow: 0px 0px 12px #333;
  font-size: 14px;
}
.hero.showing {
  opacity: 1;
  z-index: 2;
}
.hero.hero--fixed {
  height: 60vh;
  position: absolute;
  top: 84px;
}
@media all and (max-width: 740px) {
  .hero.hero--fixed {
    top: 60px;
  }
}
.hero-container .hero__forward a {
  color: white;
  position: absolute;
  bottom: 6%;
  width: 100%;
  text-align: center;
  z-index: 3;
}
.list.list--no-bullet {
  list-style: none;
}
.list.list--horizontal > li {
  float: left;
}
.list.list--text {
  list-style: disc;
  padding-left: 1.875rem;
  padding-right: 0.625rem;
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem;
}
.list.list--text li > p {
  margin: 0px;
}
.list.list--disc {
  list-style: disc;
}
.list.list--decimal {
  list-style: decimal;
}
.list.list--latin {
  list-style: lower-latin;
}
.list.list--roman {
  list-style: lower-roman;
}
.list.list--highlighted {
  background-color: #f3f3f2;
  padding-left: 2.1875rem;
  padding-right: 0.9375rem;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
}
.card {
  padding: 0.9375rem;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.27);
  margin-right: 1.875rem;
  margin-bottom: 2.25rem;
  height: 19.3125rem;
  position: relative;
  background-color: #fafafa;
  border: 2px solid #fafafa;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.card:hover {
  box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.28);
}
.card .card__content {
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;
  height: 15.5rem;
}
.card .card__title {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
.card .card__description {
  font-size: 0.875rem;
  line-height: 1.3125rem;
  margin-bottom: 1.5625rem;
  max-height: 3.75rem;
}
.card .card__action {
  position: absolute;
  right: 1rem;
  bottom: 0.875rem;
}
.card .card__copyright {
  position: absolute;
  left: 1rem;
  bottom: 0.875rem;
}
.card.card--materialpool {
  width: 12.625rem;
  display: inline-block;
  vertical-align: bottom;
}
.card.card--fileelement {
  width: 9.75rem;
  height: 14.0625rem;
  display: inline-block;
  vertical-align: bottom;
}
.card.card--fileelement:hover a {
  color: #d70926;
}
.card.card--fileelement .card__title {
  font-size: 0.9rem;
}
.card.card--fileelement .card__content {
  height: 9.875rem;
}
.card.card--fileelement .card__content > img {
  height: 5rem;
}
.card.card--selectable {
  border: #f3f3f2 solid 3px;
}
.card.card--selected {
  border: #d70926 solid 3px;
}
.card .card__description--expanded {
  max-height: none !important;
}
.card .card__description--task {
  max-height: 11.875rem !important;
}
.sidebar {
  vertical-align: top;
  background-color: #f3f3f2;
  padding: 2.25rem 0.9375rem;
  position: fixed;
  max-width: 233px;
  top: 84px;
  bottom: 0;
  overflow-y: scroll;
  z-index: 1;
  transition: top 0.3s;
}
.sidebar.-detail {
  background-color: white;
}
.sidebar--floating {
  position: inherit;
}
@media all and (max-width: 740px) {
  .sidebar {
    top: 60px;
  }
}
.label {
  font-size: 0.8125rem;
  line-height: 1.38461538em;
  display: block;
  font-weight: 400;
  color: #000000;
  margin-top: 1.5rem;
}
.input[type="text"],
.input[type="password"] {
  border: 0.05rem solid #d8d8d8;
  border-radius: 0;
  height: 3.25rem;
}
.input[type="text"].input--error,
.input[type="password"].input--error {
  border-color: #d70926;
}
.textarea {
  border: 0.05rem solid #d8d8d8;
  border-radius: 0;
  padding: 8px 12px;
}
.textarea.textarea--error {
  border-color: red;
}
.button {
  height: 2.8125rem;
  border: 0;
  background-color: #f3f3f2;
  color: #d70926;
  font-weight: 700;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}
.button:hover,
.button:active {
  background-color: #d70926;
  color: #ffffff;
}
.button-center-wrapper {
  width: 110px;
  margin: auto;
  padding: 15px;
}
.checkbox[type="checkbox"] {
  position: relative;
  top: 0.125rem;
  margin-right: 0.5rem;
}
/* Components */
.site-header {
  position: fixed;
  height: 5.25rem;
  background-color: #ffffff;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.24);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.041875em;
  line-height: 1.375em;
  top: 0px;
  z-index: 100;
  transition: height 0.3s;
}
.site-header.site-header--simple {
  box-shadow: none;
  height: 3.125rem;
  margin-bottom: 1.875rem;
}
.site-header a {
  color: #000000;
}
.site-header .logo {
  transition: transform 0.3s;
  height: 3.3125rem;
}
.site-header .logo--small {
  transition: transform 0.3s;
  height: 1.875rem;
}
.site-header .home {
  padding-right: 10px;
}
@media all and (max-width: 740px) {
  .site-header {
    height: 3.75rem;
  }
  .site-header .logo {
    transform: scale(0.5, 0.5);
  }
  .site-header span.header-text {
    display: none;
  }
}
.site-footer {
  background-color: #544b45;
  color: #ffffff;
  position: relative;
  z-index: 10;
}
.site-footer.site-footer--small {
  height: 2.8125rem;
}
.site-footer ol {
  padding: 19px 0 19px 0;
}
.navigation--dropdown {
  position: absolute;
  left: 0;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.24);
  z-index: 50;
  top: 40px;
}
.navigation--dropdown li {
  padding: 0;
}
.navigation--dropdown li a {
  padding-left: 0.4375rem;
  padding-right: 0.4375rem;
  display: block;
  height: 2.8125rem;
  line-height: 2.8125rem;
  overflow: hidden;
  white-space: nowrap;
}
.navigation--dropdown li a:hover,
.navigation--dropdown li a:focus,
.navigation--dropdown li a.active {
  background-color: #d70926;
  color: #ffffff;
  font-weight: bold;
}
.navigation--dropdown li + li {
  border-top: 0.0625rem solid #d8d8d8;
}
.navigation--megadropdown {
  position: fixed;
  top: 84px;
  left: 0;
  z-index: 50;
  width: 100%;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  overflow-y: scroll;
}
.navigation--megadropdown > div {
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.24);
  display: flex;
  flex-wrap: wrap;
  background-color: white;
}
.navigation--megadropdown > div .landscape {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0px;
  transition: filter 0.3s;
}
.navigation--megadropdown > div .landscape:hover {
  filter: brightness(80%);
}
.navigation--megadropdown > div .landscape .image {
  height: 180px;
  background-position-y: 25%;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}
.navigation--megadropdown > div .landscape .name {
  color: white;
  position: absolute;
  left: 10px;
  top: 10px;
  opacity: 0.8;
  text-shadow: 0px 0px 12px #333;
  font-weight: bold;
}
@media all and (max-width: 740px) {
  .navigation--megadropdown {
    top: 60px;
    height: calc(40vh);
  }
  .navigation--dropdown {
    top: 28px;
  }
}
.main-navigation {
  left: 1.875rem;
}
.lp-navigation {
  left: inherit;
  right: 0;
  font-weight: normal;
}
.lp-navigation > li > a {
  color: #d70926;
}
.footer-navigation {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.041875em;
  line-height: 1.5em;
}
.footer-navigation li + li {
  margin-left: 3.125rem;
}
.footer-navigation a {
  color: #ffffff;
  font-weight: bold;
  display: inline-block;
}
.footer-navigation a:hover,
.footer-navigation a:focus {
  border-bottom: 1px solid currentColor;
}
.sub-navigation {
  z-index: 10;
  position: fixed;
  top: 84px;
  transition: top 0.3s;
}
.sub-navigation > li {
  padding: 0;
  background-color: transparent;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
}
.sub-navigation > li > a {
  line-height: 2.8125rem;
  display: inline-block;
  padding-left: 1rem;
  padding-right: 1rem;
  opacity: 0.95;
  background-color: #ffffff;
}
.sub-navigation > li > a:hover,
.sub-navigation > li > a:focus,
.sub-navigation > li > a.active {
  background-color: #d70926;
  color: #ffffff;
}
.sub-navigation > li + li {
  border-left: 0.0625rem solid #d8d8d8;
}
@media all and (max-width: 740px) {
  .sub-navigation {
    top: 60px;
  }
}
.site-hero {
  margin-bottom: 5.625rem;
}
.lead {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.020625rem;
  line-height: 1.24242424em;
  font-style: italic;
  margin-bottom: 2.5rem;
}
.link.link--standalone {
  font-weight: bold;
  padding-bottom: 0.375rem;
}
.link.link--standalone:hover {
  padding-bottom: 0.25rem;
  border-bottom: 0.125rem solid #d70926;
  color: #d70926;
}
.link.link--shy {
  font-size: 0.8125rem;
  line-height: 1.38461538em;
  color: #000000;
}
.sidebar .sidebar__title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.0475rem;
  line-height: 1.375rem;
  border-bottom: 0.0625rem solid #000000;
  margin-top: 1.25rem;
  margin-bottom: 0.9375rem;
}
.sidebar .sidebar__description {
  font-size: 0.75rem;
  margin-bottom: 0.9375rem;
}
.search {
  background-color: #ffffff;
  padding: 0.3125rem;
  height: 2.1875rem;
}
.search .search__input {
  border: 0;
  font-size: 0.625rem;
  line-height: 1.5625rem;
}
.search .search__icon {
  padding-top: 0.1875rem;
}
.tag {
  border: 0.09375rem solid #544b45;
  border-radius: 0.125rem;
  display: inline-block;
  font-size: 0.8125rem;
  line-height: 1.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  color: #000000;
}
.tag.fix:hover {
  color: #000000;
  border-color: #000000;
  background-color: #ffffff;
}
.tag:hover,
.tag.hover {
  color: #ffffff;
  border-color: #000000;
  background-color: #000000;
}
.tag.active {
  background-color: #d70926;
  color: #ffffff;
  border-color: #d70926;
}
.list.list--tags > * {
  margin-right: 0.625rem;
  margin-bottom: 0.625rem;
}
.login-dialog {
  width: 28.25rem;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 6.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 2.8125rem;
  background-color: rgba(250, 250, 250, 0.95);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
}
.login-dialog .login-dialog__title {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.36666667em;
  letter-spacing: 0.011em;
}
.task-detail {
  padding-top: 6.25rem;
}
.task-detail > section {
  padding-bottom: 2.5rem;
}
.task-detail .task-detail__subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  border-bottom: black solid 0.0625rem;
  line-height: 2.25rem;
  width: 10rem;
  margin-bottom: 1.875rem;
}
.button.button--login {
  border: 0.0625rem solid #000000;
  background-color: transparent;
  color: black;
  margin-top: 2.0625rem;
  margin-bottom: 0.5rem;
}
.container.container--narrow {
  max-width: 498.75px;
}
.container.container--startpage {
  padding: 0 8.125rem;
}
.container.container--padded {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}
.title.title--login {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.36666667em;
  letter-spacing: 0.011em;
}
.label.label--error {
  margin-top: 0;
  color: #d70926;
}
.image-element {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  position: relative;
}
.image-element.-small {
  max-width: 460px;
}
.file-element {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  position: relative;
}
.file-element img {
  vertical-align: middle;
}
.file-element a {
  padding-left: 0.625rem;
  vertical-align: middle;
}
.caption {
  font-size: 0.875rem;
  line-height: 1.61111111em;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
#textcontent {
  padding-bottom: 1.875rem;
  float: left;
  font-size: 1.125rem;
  width: 100%;
  min-height: 81vh;
}
.textcontent--standard {
  width: 75% !important;
  padding-top: 3.125rem;
  padding-right: 2.5rem;
}
.textcontent--introduction {
  width: 75% !important;
  padding-top: 0px;
}
.textcontent--blog {
  width: 51.25rem !important;
}
.textcontent--full {
  width: inherit !important;
  padding-top: 3.125rem;
}
@media all and (max-width: 740px) {
  .textcontent--standard,
  .textcontent--introduction {
    width: 100% !important;
  }
}
#textcontent-overlay-shim {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  background-color: white;
  left: 0;
  top: 0;
}
#textcontent-overlay {
  position: fixed;
  max-width: 990px;
  background-color: white;
  padding: 30px;
  font-size: 1.125rem;
  line-height: 1.61111111rem;
  z-index: 10;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
}
#textcontent-overlay > div.content {
  overflow: scroll;
  max-height: 70vh;
}
#textnavigation {
  width: 25%;
  float: left;
}
#textnavigation > div.content {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  z-index: 49;
  background-color: white;
  padding-top: 0px;
}
#textnavigation > div.content > ul {
  list-style: none;
  padding: 15px 0 0 15px;
}
#textnavigation > div.content > ul > li {
  font-weight: bold;
  line-height: 17px;
  font-size: 12px;
  padding-bottom: 10px;
}
#textnavigation > div.content > ul > li > a {
  color: black;
}
#textnavigation > div.content > ul > li > a:hover {
  color: #d70926;
}
#textnavigation > div.content > ul > li.title4 {
  font-weight: normal;
}
#textnavigation > div.content > div.close-button {
  text-align: center;
  padding: 0.625rem;
  cursor: pointer;
  transform: rotate(180deg);
}
#textnavigation > div.closed > ul {
  height: 0px;
  overflow: hidden;
}
#textnavigation > div.closed > div.close-button {
  transform: rotate(0deg);
}
.textnavigation--introduction {
  padding-top: 0px !important;
}
.fixed {
  position: fixed;
  top: 155px;
  width: 14.375rem;
}
@media all and (max-width: 740px) {
  #textnavigation {
    display: none;
  }
}
/***
 * Gallery Element:
 */
.gallery {
  width: 100%;
  padding-top: 1.25rem;
  position: relative;
}
.gallery__button {
  background: #fafafa;
  color: #544b45;
  width: 4.6875rem;
  height: 4.0625rem;
  padding: 0px;
  border-radius: 3.125rem 3.125rem 0 0;
  border: none;
  text-align: center;
  font-size: 1.6875rem;
  opacity: 0.6;
}
.gallery__button:hover {
  background: #fafafa;
  color: #544b45;
  border: none;
}
.gallery__button:before {
  top: 1.5625rem;
  position: relative;
}
.gallery__image {
  margin-bottom: 4.5625rem;
}
.gallery__button--prev {
  left: -0.3125rem;
}
.gallery__button--next {
  right: -0.3125rem;
}
.pagination--gallery {
  bottom: -3.125rem;
  text-align: center;
  padding: 0;
}
.vertical_middle {
  top: 50%;
}
.rotate-90 {
  transform: rotate(90deg);
}
.rotate-180 {
  transform: rotate(180deg);
}
.rotate-270 {
  transform: rotate(270deg);
}
.lp-menu-toggler {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
  position: relative;
  top: 0.3125rem;
  color: #d70926 !important;
}
.introduction-solution .introduction-solution__subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  border-bottom: black solid 0.0625rem;
  line-height: 2.25rem;
  width: 10rem;
  margin-bottom: 1.875rem;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1em;
  font-size: 1.15em;
  border-collapse: collapse;
  border-spacing: 0;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 0.4em;
  font-size: 1.125rem;
  line-height: 1.61111111rem;
  vertical-align: top;
  border-top: 1px solid #DDD;
}
.table > thead > tr > th > ul > li,
.table > tbody > tr > th > ul > li,
.table > tfoot > tr > th > ul > li,
.table > thead > tr > td > ul > li,
.table > tbody > tr > td > ul > li,
.table > tfoot > tr > td > ul > li {
  font-size: 1.125rem;
  line-height: 1.61111111rem;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #DDD;
}
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.table-analysis {
  width: 100%;
}
.table-analysis td,
.table-analysis tr,
.table-analysis th {
  border: 1px solid #ddd;
}
.table-analysis td > p,
.table-analysis th > p {
  font-size: 0.8125rem;
  line-height: 1.25rem;
}
.table-analysis a {
  font-weight: bold;
}
.table-analysis th.diagonal-line {
  padding: 0px;
  background: linear-gradient(to bottom left, white 49.9%, lightgrey 0.1%, white 50%);
}
.table-analysis th.diagonal-line > p.text-h {
  position: relative;
  right: 5px;
  top: 5px;
  margin: 0px;
  text-align: right;
  min-height: 100px;
}
.table-analysis th.diagonal-line > p.text-v {
  position: relative;
  left: 5px;
  bottom: 5px;
  margin: 0px;
  text-align: left;
}
.footer-logo {
  padding-top: 0.5rem;
}
.footer-logo > img {
  height: 50px;
}
.footer-logo.footer-logo--small > img {
  height: 1.875rem;
}
.element ol,
.element ul {
  margin-left: 1.875rem;
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem;
}
.element ol li,
.element ul li {
  margin: 0px;
  line-height: 1.61111111rem;
  font-size: 1.125rem;
}
.element sup {
  vertical-align: super;
  font-size: smaller;
}
.video__wrapper {
  position: relative;
  margin-top: 100px;
}
.chapter a {
  color: #9c9c9c;
}
.chapter a:hover {
  color: #d70926;
}
.home {
  padding: 30px;
}
.home h1 {
  font-size: 40px;
}
.home.home--fixed {
  margin-top: 60vh;
  padding-top: 134px;
  overflow: initial;
  height: initial;
}
@media all and (max-width: 740px) {
  .home.home--fixed {
    padding-top: 110px;
  }
}
.teacher-highlight {
  padding-left: 20px;
  border-left: 5px solid #09afd7;
  padding-top: 20px;
  padding-bottom: 5px;
}
.teacher-header {
  background-color: #09afd7;
  color: white;
  font-weight: 800;
  padding: 15px;
  margin-top: 30px;
}
.preview-image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 65vh;
}
.landscapeselect {
  margin-bottom: 24px;
}
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid rgba(51, 51, 51, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1;
}
.usertask-tab.usertask-tab__tab {
  border-top: 0.0625rem solid #d8d8d8;
  border-right: 0.0625rem solid #d8d8d8;
  line-height: 1.875rem;
  display: inline-block;
  padding-left: 1rem;
  padding-right: 1rem;
  opacity: 0.95;
  background-color: #ffffff;
  cursor: pointer;
}
.usertask-tab.usertask-tab__tab:hover,
.usertask-tab.usertask-tab__tab:focus,
.usertask-tab.usertask-tab__tab.active {
  background-color: #d70926;
  color: #ffffff;
}
.usertask-tab.usertask-tab__tab.tab-landscape {
  border-left: 0.0625rem solid #d8d8d8;
}
.usertask-tab.usertask-tab__content {
  border-top: 0.0625rem solid #d8d8d8;
  padding-top: 1.875rem;
}
.content-wrapper {
  min-height: 100%;
  margin-bottom: -63px;
}
.content-wrapper.-simple {
  margin-bottom: -45px;
}
.push {
  height: 63px;
}
.push.-simple {
  height: 45px;
}
/* Trumps */
.element.paragraph--normal {
  font-size: 1.125rem;
  line-height: 1.61111111em;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
.pos-abs {
  position: absolute;
}
.pos-rel {
  position: relative;
}
.lang-navigation {
  top: 40px;
}
.padding-right {
  padding-right: 15px;
}

/*# sourceMappingURL=maps/main.css.map */