html, body, div, span, applet, object, iframe, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, label, legend, p, blockquote, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: "KV-semibolditalic";
  vertical-align: baseline; }

body {
  touch-action:none;
  line-height: 1;
  color: black;
  background: white; }

:focus {
  outline: 0; }

table {
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.2);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 20px; }

caption, th, td {
  text-align: left;
  font-weight: normal; }

fieldset, img {
  border: 0; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal; }

ol, ul {
  list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

blockquote:before, blockquote:after, q:before, q:after {
  content: ""; }

blockquote, q {
  quotes: "" ""; }

abbr, acronym {
  border: 0; }

* {
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

@font-face {
  font-family: "KV";
  src: url("../fonts/JosefinSans.ttf"); }
@font-face {
  font-family: "KV-bold";
  src: url("../fonts/JosefinSans-Bold.ttf"); }
@font-face {
  font-family: "KV-light";
  src: url("../fonts/JosefinSans-Light.ttf"); }
@font-face {
  font-family: "KV-semibolditalic";
  src: url("../fonts/JosefinSans-SemiBoldItalic.ttf"); }
#container {
  background-color: #003359;
  color: #fff;
  overflow: hidden;
  font-family: "KV-semibolditalic";
  /*, Helvetica;*/
  line-height: 1.5em;
  width: 1024px;
  height: 768px;
  -webkit-touch-callout: none;
  /* disable the IOS popup when long-press on a link */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

header {
  z-index: 1;
  height: 70px;
  width: 100%;
  padding-top: 1px;
  background-image: url(../img/header.svg);
  background-repeat: no-repeat;
  background-position: left top, left bottom;
  background-size: contain;
  overflow: hidden;
  position: absolute; }

#presentation {
  width: 8192px;
  margin-left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }
  #presentation.on-question-1 {
    -webkit-transform: translate3d(-1024px, 0, 0);
            transform: translate3d(-1024px, 0, 0); }
  #presentation.on-end {
    -webkit-transform: translate3d(-2048px, 0, 0);
            transform: translate3d(-2048px, 0, 0); }

label {
  cursor: pointer; }

section {
  width: 1024px;
  height: 610px;
  padding-top: 70px;
  float: left;
  text-align: center;
  background-image: url(../img/background.jpg);
  background-size: 100%;
  margin-top: 70px;
  height: 630px; }
  section .arrow {
    width: 90.5px;
    height: 86px;
    -webkit-mask: url(../img/icons/button_weiter.svg);
            mask: url(../img/icons/button_weiter.svg);
    -webkit-mask: url(../img/icons/button_weiter.svg);
            mask: url(../img/icons/button_weiter.svg);
    background-color: white;
    float: left;
    margin-top: 130px;
    margin-left: 22px; }
    section .arrow.disabled {
      background-color: rgba(255, 255, 255, 0.3); }
  section.toggled > * {
    opacity: 0; }
  section p {
    margin-left: 110px;
    margin-right: 40px;
    text-align: left;
    line-height: 36px;
    font-size: 30px;
    margin-bottom: 1em; }
  section#intro p {
    width: 810px;
    margin: 1em auto;
    line-height: 36px;
    font-size: 30px; }
  section#intro .arrow {
    margin: 1em auto;
    background-image: url(../img/button_start.svg);
    background-repeat: no-repeat; }

.next_overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 70px;
  background: rgba(0, 0, 0, 0.4);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-flex-direction: column;
          flex-direction: column;
  font-size: 2em; }

.next_overlay.enabled {
  opacity: 1;
  visibility: visible; }

.next {
  margin: 20px auto; }

h1, h2 {
  margin: 0 0 0.8em;
  font-size: 60px;
  line-height: 72.5px;
  font-family: "KV-semibolditalic"; }

.active {
  font-family: "KV-bold"; }

.active.correct {
  	/*color: #39B54A;
      font-family: "KV-bold";*/ }

.selectable .active {
  background-color: rgba(193, 39, 45, 0.9); }

.selectable .active.correct {
  background-color: rgba(57, 181, 74, 0.9); }

h2 {
  margin-top: 2em; }

section#end p {
  text-align: center; }

/* iPads (landscape) ----------- */
/* iPads (portrait) ----------- */
.letter {
  position: relative;
  padding-bottom: 70px;
  text-align: left; }

.letter-container {
  position: relative;
  margin: auto;
  width: 80%;
  height: 630px;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }
  .letter-container img {
    width: 100%; }
  .letter-container .selectric .label,
  .letter-container .selectric .button {
    height: 25px;
    line-height: 28px; }
  .letter-container .selectric-wrapper {
    -webkit-transform: translateZ(0);
            transform: translateZ(0); }
  .letter-container .selectric-input {
    display: none; }
  .letter-container .selectric-lettergap--valid .selectric, .letter-container .selectric-lettergap--valid .selectric .label, .letter-container .selectric-lettergap--valid .selectric .button {
    background-color: #7eb584; }
  .letter-container .selectric-lettergap--valid .selectric .label,
  .letter-container .selectric-lettergap--valid .selectric .button:after {
    color: white; }
  .letter-container .selectric-lettergap--valid .selectric .button:after {
    border-top-color: white; }
  .letter-container .selectric-lettergap--invalid .selectric, .letter-container .selectric-lettergap--invalid .selectric .label, .letter-container .selectric-lettergap--invalid .selectric .button {
    background-color: #cc7b7b; }
  .letter-container .selectric-lettergap--invalid .selectric .label,
  .letter-container .selectric-lettergap--invalid .selectric .button:after {
    color: white; }
  .letter-container .selectric-lettergap--invalid .selectric .button:after {
    border-top-color: white; }

.selectric-lettergap {
  position: absolute;
  left: 100px; }

.selectric-lettergap--1 {
  top: 404px; }

.selectric-lettergap--2 {
  top: 457px; }

.selectric-lettergap--3 {
  top: 587px;
  left: 390px; }

.selectric-lettergap--4 {
  top: 760px; }

/*# sourceMappingURL=style.css.map */