.debug {
  color: red !important;
  background: #000 !important;
  color: #0f0 !important;
  font-size: 10px !important;
  font-family: Courier !important;
  font-weight: 200 !important; }
  .debug i {
    display: block; }

html, body {
  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;
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  min-height: 100vh; }

html,
body {
  margin: 0;
  padding: 0;
  background-color: #04587f;
  height: 100%;
  width: 100%;
  font-family: 'Raleway';
  font-size: 16px;
  font-weight: 400;
  overflow: hidden; }

canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

label {
  display: block;
  margin: 5px 0;
  width: 90%;
  color: #ffffff; }

input {
  width: 100%;
  font-size: 24px;
  box-sizing: inline-block;
  padding: 5px 10px;
  margin: 0 0 10px 0;
  border: none;
  background-color: #ffffff;
  border-radius: 0;
  box-sizing: border-box; }

button {
  border: none;
  background: none; }

h1 {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  padding: 25px 0 10px;
  color: #ffffff;
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase; }

h1 i,
.stats-btn i {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  opacity: 0.8;
  padding: 8px 0 2px; }

h2 {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 24px; }

h3 {
  display: block;
  text-align: left;
  color: rgba(0, 0, 0, 0.2);
  font-size: 12px;
  margin: 10px 0 0 0;
  text-transform: uppercase;
  margin: 6px 0 3px 0;
  position: relative;
  padding: 0 0 0 15px; }

.description {
  font-size: 12px;
  opacity: 0.6; }
  .description.black {
    opacity: 1;
    color: #492911; }

a {
  text-decoration: none; }

html, body {
  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;
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  min-height: 100vh; }

html,
body {
  margin: 0;
  padding: 0;
  background-color: #04587f;
  height: 100%;
  width: 100%;
  font-family: 'Raleway';
  font-size: 16px;
  font-weight: 400;
  overflow: hidden; }

canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

label {
  display: block;
  margin: 5px 0;
  width: 90%;
  color: #ffffff; }

input {
  width: 100%;
  font-size: 24px;
  box-sizing: inline-block;
  padding: 5px 10px;
  margin: 0 0 10px 0;
  border: none;
  background-color: #ffffff;
  border-radius: 0;
  box-sizing: border-box; }

button {
  border: none;
  background: none; }

h1 {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  padding: 25px 0 10px;
  color: #ffffff;
  margin: 0;
  letter-spacing: 1px;
  text-transform: uppercase; }

h1 i,
.stats-btn i {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  opacity: 0.8;
  padding: 8px 0 2px; }

h2 {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-size: 24px; }

h3 {
  display: block;
  text-align: left;
  color: rgba(0, 0, 0, 0.2);
  font-size: 12px;
  margin: 10px 0 0 0;
  text-transform: uppercase;
  margin: 6px 0 3px 0;
  position: relative;
  padding: 0 0 0 15px; }

.description {
  font-size: 12px;
  opacity: 0.6; }
  .description.black {
    opacity: 1;
    color: #492911; }

a {
  text-decoration: none; }

#main-container {
  position: relative;
  display: block;
  width: 100%;
  height: 100%; }
  @media screen and (max-height: 1200px) and (orientation: landscape) {
    #main-container {
      max-width: 100vh;
      display: block;
      margin: 0 auto;
      overflow: hidden; } }

#mainContent {
  position: relative;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

section {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

.content {
  -webkit-overflow-scrolling: touch;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 90px 0 0; }
  .content.scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; }
  .content.full {
    padding: 90px 0 0; }
  .content.bottom {
    position: absolute;
    bottom: 25%;
    left: 5%;
    width: 90%;
    height: auto;
    padding: 0; }
  .content .content-scroll {
    display: block;
    min-height: 100%;
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 200px;
    position: relative; }
  .content .box {
    position: relative;
    width: 90%;
    margin: 0 auto;
    display: block;
    max-width: 480px; }
    .content .box.image-wrap img {
      width: 100%;
      max-width: 250px;
      margin: 10px auto;
      padding: 20px;
      display: block;
      box-sizing: border-box;
      background: #fff; }

.content-footer {
  width: 120%;
  background: #ffffff;
  bottom: 0;
  left: -10%;
  vertical-align: bottom;
  position: absolute;
  box-shadow: inset 0 0 5px #000;
  height: 100px;
  padding-top: 20px; }

.header,
.footer {
  position: absolute;
  display: block;
  right: 0;
  width: 100%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }

.header {
  height: 60px;
  top: 0;
  background-color: #079DE2;
  z-index: 1; }

.footer {
  height: 60px;
  bottom: 0;
  background-color: #079DE2; }

/* screens */
.screen,
.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

.screen {
  top: 0;
  left: -120%;
  transition: left 1s ease-out;
  -webkit-transition: left 1s ease-out;
  transition-delay: 1s;
  -webkit-transition-delay: 1s;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); }
  .screen .screenbg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 10px 0 0 rgba(0, 0, 0, 0.2);
    border-right: 5px solid #3a3a3a; }
    .screen .screenbg .title {
      display: none;
      position: absolute;
      left: 0;
      top: 30%;
      width: 100%;
      height: 20%;
      background-color: #8FC6C6; }

.screen.active {
  transition: left 1s cubic-bezier(0, 0, 0, 1.07);
  -webkit-transition: left 1s cubic-bezier(0, 0, 0, 1.07);
  transition-delay: 0;
  left: 0;
  z-index: 2; }
  .screen.active .content {
    transition: left 0s;
    transition-delay: 1s;
    left: 0; }

.overlay {
  position: absolute;
  top: -110%;
  left: 0;
  z-index: 11;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  background: #8FC6C6; }
  .overlay.open {
    transition: all 0.5s ease-in;
    top: 0%;
    z-index: 11;
    background: #0579AB; }

#menuscreen .screenbg {
  background-color: #F5F7F2; }

#menuscreen .content .levellist-wrap {
  background-color: #ffffff;
  width: 100%;
  padding: 0;
  margin: 0 0 15px;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); }

#menuscreen .content .levellist {
  position: relative;
  width: 100%;
  display: block;
  margin: 0 auto;
  padding: 0; }
  #menuscreen .content .levellist .levelbutton,
  #menuscreen .content .levellist .statsList svg {
    display: inline-block;
    list-style: none;
    width: 30%;
    padding: 0;
    margin: 0 1%; }
    #menuscreen .content .levellist .levelbutton:nth-child(1),
    #menuscreen .content .levellist .statsList svg:nth-child(1) {
      width: 0; }
      #menuscreen .content .levellist .levelbutton:nth-child(1) .button,
      #menuscreen .content .levellist .statsList svg:nth-child(1) .button {
        fill: #55c6fa; }
    #menuscreen .content .levellist .levelbutton:nth-child(2),
    #menuscreen .content .levellist .statsList svg:nth-child(2) {
      width: 0; }
      #menuscreen .content .levellist .levelbutton:nth-child(2) .button,
      #menuscreen .content .levellist .statsList svg:nth-child(2) .button {
        fill: #079de2; }
    #menuscreen .content .levellist .levelbutton:nth-child(3),
    #menuscreen .content .levellist .statsList svg:nth-child(3) {
      width: 0; }
      #menuscreen .content .levellist .levelbutton:nth-child(3) .button,
      #menuscreen .content .levellist .statsList svg:nth-child(3) .button {
        fill: #04587f; }

#menuscreen.active .content .levellist .levelbutton {
  width: 30%;
  transition: width 0.2s; }

#menuscreen.active .content .levellist.l1 .levelbutton:nth-child(1) {
  transition-delay: 1s;
  -webkit-transition-delay: 1s; }

#menuscreen.active .content .levellist.l1 .levelbutton:nth-child(2) {
  transition-delay: 1.15s;
  -webkit-transition-delay: 1.3s; }

#menuscreen.active .content .levellist.l1 .levelbutton:nth-child(3) {
  transition-delay: 1.3s;
  -webkit-transition-delay: 1.3s; }

#menuscreen.active .content .levellist.l2 .levelbutton:nth-child(1) {
  transition-delay: 1.25s;
  -webkit-transition-delay: 1.25s; }

#menuscreen.active .content .levellist.l2 .levelbutton:nth-child(2) {
  transition-delay: 1.4s;
  -webkit-transition-delay: 1.4s; }

#menuscreen.active .content .levellist.l2 .levelbutton:nth-child(3) {
  transition-delay: 1.55s;
  -webkit-transition-delay: 1.55s; }

#menuscreen.active .content .levellist.l3 .levelbutton:nth-child(1) {
  transition-delay: 1.5s;
  -webkit-transition-delay: 1s; }

#menuscreen.active .content .levellist.l3 .levelbutton:nth-child(2) {
  transition-delay: 1.65s;
  -webkit-transition-delay: 1.65s; }

#menuscreen.active .content .levellist.l3 .levelbutton:nth-child(3) {
  transition-delay: 1.8s;
  -webkit-transition-delay: 1.8s; }

img.logo {
  width: 120px;
  height: 60px;
  display: block;
  margin: 0 auto; }

form {
  display: block; }
  form label {
    display: block;
    width: 100%; }
  form input {
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0 10px;
    display: block;
    width: 100%;
    font-size: 125%;
    height: 60px;
    box-sizing: border-box;
    border: none;
    border-bottom: 4px solid #EF5B5F;
    outline: 0; }
    form input:focus {
      border-bottom: 4px solid #079DE2; }
    form input[type="radio"] {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      top: 0;
      height: 30px;
      margin: 0;
      padding: 0; }

.checkmark {
  position: absolute;
  top: 0;
  right: 0;
  height: 30px;
  width: 30px;
  border: 2px solid #492911;
  color: #492911;
  background: #F5F7F2;
  box-sizing: border-box;
  cursor: pointer; }

.btn:hover input ~ .checkmark {
  background-color: #492911; }

.btn:hover .checkmark:after {
  border-color: #F5F7F2 !important; }

.checkmark:after {
  content: "";
  position: absolute;
  display: none; }

.btn input:checked ~ .checkmark:after {
  display: block; }

.btn input:checked {
  display: block; }

.btn .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #492911;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.levelbutton .level .lv-text,
.statsList .level .lv-text,
.btn-wrap .level .lv-text {
  fill: #ffffff;
  font-size: 100px;
  text-align: left; }

.levelbutton .level .button,
.statsList .level .button,
.btn-wrap .level .button {
  stroke-width: 12;
  fill: #8FC6C6;
  stroke: #FFA500;
  stroke-dasharray: 765;
  stroke-dashoffset: 765; }

.levelbutton .level .shadow,
.statsList .level .shadow,
.btn-wrap .level .shadow {
  fill: #ccc;
  stroke-width: 12;
  stroke: #ccc;
  stroke-dasharray: 765;
  stroke-dashoffset: 765; }

.levelbutton .level .star,
.statsList .level .star,
.btn-wrap .level .star {
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  fill: rgba(0, 0, 0, 0.2);
  stroke-width: 0;
  stroke: transparent; }
  .levelbutton .level .star.active,
  .statsList .level .star.active,
  .btn-wrap .level .star.active {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    fill: #FFA500;
    stroke-width: 0;
    stroke: #FFA500; }

.levelbutton.g1 .star.active,
.levelbutton.g1 .button,
.statsList.g1 .star.active,
.statsList.g1 .button,
.btn-wrap.g1 .star.active,
.btn-wrap.g1 .button {
  fill: #55c6fa; }

.levelbutton.g2 .star.active,
.levelbutton.g2 .button,
.statsList.g2 .star.active,
.statsList.g2 .button,
.btn-wrap.g2 .star.active,
.btn-wrap.g2 .button {
  fill: #079de2; }

.levelbutton.g3 .button,
.levelbutton.g3 .star.active,
.statsList.g3 .button,
.statsList.g3 .star.active,
.btn-wrap.g3 .button,
.btn-wrap.g3 .star.active {
  fill: #04587f; }

.btn .button-icon.col-0 {
  background: #F5F7F2; }
  .btn .button-icon.col-0 .ui-svg-line {
    stroke: #492911; }

.btn .button-icon.col-1 {
  background: #8FC6C6; }

.btn .button-icon.col-close, .btn .button-icon.col-2 {
  background: #EF5B5F; }

.btn .button-icon.col-3 {
  background: #FFA500; }

.btn .button-icon.col-4 {
  background: #E9DFD0; }

.btn .button-icon.col-5 {
  background: #492911; }

.btn .button-icon.col-6 {
  background: rgba(0, 0, 0, 0.2); }

.btn .button-icon.col-7, .btn .button-icon.col-main {
  background: #079DE2; }

.btn .button-icon.col-tutorial {
  background: #3a3a3a; }

.btn .button-icon.col-lv1 {
  background: #55c6fa; }

.btn .button-icon.col-lv2 {
  background: #079de2; }

.btn .button-icon.col-lv3 {
  background: #04587f; }

#gamescreen {
  background-color: #f00f00; }

#gameTitle {
  position: absolute;
  top: -200px;
  left: 0;
  width: 100%;
  z-index: 4; }
  #gameTitle.active {
    top: 0; }
  #gameTitle .gamescorewrap {
    width: 33.33%;
    margin: 0 auto;
    box-sizing: border-box; }
    #gameTitle .gamescorewrap.bar {
      background-color: #ccc; }

#game-progressbar {
  display: block;
  width: 0;
  height: 4px;
  background-color: #8FC6C6; }

#game-score {
  display: block;
  width: 100%;
  margin: 0;
  color: #8FC6C6;
  text-align: center; }

#game-footer {
  position: absolute;
  bottom: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  left: 0;
  z-index: 10;
  transition: all 0.15s ease-in;
  -webkit-transition: all 0.15s ease-in; }
  #game-footer.hide {
    bottom: -80px; }

#quitbutton,
#replaybutton {
  width: 48%;
  display: none; }
  #quitbutton.show,
  #replaybutton.show {
    display: inline-block; }

#quitbutton {
  float: left; }

#replaybutton {
  float: right; }

#restartscreen {
  left: 0;
  opacity: 0; }
  #restartscreen #loader-1 {
    display: block;
    width: 100px;
    height: 100px;
    margin: 40% auto; }
  #restartscreen.screen .screenbg {
    background: #079DE2; }
  #restartscreen.screen .content {
    left: 0;
    color: #8FC6C6; }
  #restartscreen.screen.active {
    transition: opacity 1;
    -webkit-transition: opacity 1;
    transition-delay: 0;
    -webkit-transition-delay: 0;
    opacity: 1;
    z-index: 10; }

.loader-1 {
  display: block;
  width: 100px;
  height: 100px;
  margin: 40% auto; }

#itemList,
.statsList {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0; }
  #itemList li,
  .statsList li {
    list-style: none;
    display: block; }
  #itemList .title,
  .statsList .title {
    padding: 0 10px; }
    #itemList .title .sort,
    .statsList .title .sort {
      display: inline-block;
      width: 20%;
      margin: 0 5% 0 0;
      vertical-align: top;
      background: #079DE2; }
  #itemList.ki.he.se .title .sort,
  .statsList.ki.he.se .title .sort {
    background: #F5F7F2; }
  #itemList .btn,
  .statsList .btn {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    padding-right: 0; }
    #itemList .btn .on-close,
    .statsList .btn .on-close {
      opacity: 0; }
    #itemList .btn.open,
    .statsList .btn.open {
      background: #F5F7F2;
      height: 200px;
      padding-right: 0; }
      #itemList .btn.open .more,
      .statsList .btn.open .more {
        height: 130px; }
      #itemList .btn.open .on-open,
      .statsList .btn.open .on-open {
        opacity: 0; }
      #itemList .btn.open .on-close,
      .statsList .btn.open .on-close {
        opacity: 1; }
      #itemList .btn.open .button-icon,
      .statsList .btn.open .button-icon {
        box-shadow: none;
        transform: rotate(180deg); }
    #itemList .btn.cat-0, #itemList .btn.cat-1, #itemList .btn.cat-2,
    .statsList .btn.cat-0,
    .statsList .btn.cat-1,
    .statsList .btn.cat-2 {
      margin: 0;
      height: 0;
      overflow: hidden;
      line-height: 0; }
  #itemList.ki .btn.cat-0,
  .statsList.ki .btn.cat-0 {
    margin: 2px 0 8px;
    height: 60px; }
    #itemList.ki .btn.cat-0.open,
    .statsList.ki .btn.cat-0.open {
      height: 200px; }
  #itemList.ki #ki,
  .statsList.ki #ki {
    background: #F5F7F2; }
  #itemList.se .btn.cat-1,
  .statsList.se .btn.cat-1 {
    margin: 2px 0 8px;
    height: 60px; }
    #itemList.se .btn.cat-1.open,
    .statsList.se .btn.cat-1.open {
      height: 200px; }
  #itemList.se #se,
  .statsList.se #se {
    background: #F5F7F2; }
  #itemList.he .btn.cat-2,
  .statsList.he .btn.cat-2 {
    margin: 2px 0 8px;
    height: 60px; }
    #itemList.he .btn.cat-2.open,
    .statsList.he .btn.cat-2.open {
      height: 200px; }
  #itemList.he #he,
  .statsList.he #he {
    background: #F5F7F2; }
  #itemList .more,
  .statsList .more {
    overflow: hidden;
    height: 0;
    width: 100%;
    display: inline-block;
    padding: 0 10px;
    box-sizing: border-box; }
    #itemList .more span,
    .statsList .more span {
      display: inline-block;
      font-weight: 800;
      text-align: center;
      padding-bottom: 15px; }
      #itemList .more span.score, #itemList .more span.round, #itemList .more span.time, #itemList .more span.wort, #itemList .more span.names, #itemList .more span.cat, #itemList .more span.task, #itemList .more span.gr,
      .statsList .more span.score,
      .statsList .more span.round,
      .statsList .more span.time,
      .statsList .more span.wort,
      .statsList .more span.names,
      .statsList .more span.cat,
      .statsList .more span.task,
      .statsList .more span.gr {
        width: 33.3333%;
        line-height: 100%;
        vertical-align: top; }
      #itemList .more span.nextstar,
      .statsList .more span.nextstar {
        width: 100%; }
      #itemList .more span.names,
      .statsList .more span.names {
        font-weight: 400;
        font-size: 10px; }
  #itemList .btn-wrap,
  .statsList .btn-wrap {
    pointer-events: none;
    display: inline-block;
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    background: #F5F7F2; }
    #itemList .btn-wrap .btn-text,
    .statsList .btn-wrap .btn-text {
      height: 60px;
      padding: 16px;
      display: inline-block;
      pointer-events: none;
      box-sizing: border-box;
      vertical-align: top; }
    #itemList .btn-wrap img,
    .statsList .btn-wrap img {
      pointer-events: none;
      width: 50px;
      height: 50px;
      margin: 5px;
      display: inline-block; }
    #itemList .btn-wrap.open,
    .statsList .btn-wrap.open {
      height: 200px; }
    #itemList .btn-wrap.title,
    .statsList .btn-wrap.title {
      height: auto;
      pointer-events: none;
      background: none; }
    #itemList .btn-wrap.open span.more,
    .statsList .btn-wrap.open span.more {
      height: 130px; }
    #itemList .btn-wrap.open.img,
    .statsList .btn-wrap.open.img {
      padding: 0 0 0 20px; }
    #itemList .btn-wrap.open svg,
    .statsList .btn-wrap.open svg {
      pointer-events: none;
      width: 40px;
      height: 40px; }
      #itemList .btn-wrap.open svg path,
      #itemList .btn-wrap.open svg circle,
      #itemList .btn-wrap.open svg line,
      #itemList .btn-wrap.open svg polyline,
      #itemList .btn-wrap.open svg polygon,
      #itemList .btn-wrap.open svg ellipse,
      #itemList .btn-wrap.open svg rect,
      #itemList .btn-wrap.open svg .st0,
      #itemList .btn-wrap.open svg .st1,
      #itemList .btn-wrap.open svg .st2,
      #itemList .btn-wrap.open svg .st3,
      #itemList .btn-wrap.open svg .st4,
      #itemList .btn-wrap.open svg .st5,
      #itemList .btn-wrap.open svg .st6,
      #itemList .btn-wrap.open svg .st7,
      #itemList .btn-wrap.open svg .st8,
      .statsList .btn-wrap.open svg path,
      .statsList .btn-wrap.open svg circle,
      .statsList .btn-wrap.open svg line,
      .statsList .btn-wrap.open svg polyline,
      .statsList .btn-wrap.open svg polygon,
      .statsList .btn-wrap.open svg ellipse,
      .statsList .btn-wrap.open svg rect,
      .statsList .btn-wrap.open svg .st0,
      .statsList .btn-wrap.open svg .st1,
      .statsList .btn-wrap.open svg .st2,
      .statsList .btn-wrap.open svg .st3,
      .statsList .btn-wrap.open svg .st4,
      .statsList .btn-wrap.open svg .st5,
      .statsList .btn-wrap.open svg .st6,
      .statsList .btn-wrap.open svg .st7,
      .statsList .btn-wrap.open svg .st8 {
        pointer-events: none;
        fill: #cccccc !important;
        stroke: #CCCCCC !important; }

#itemList .btn-wrap .btn-text {
  position: absolute;
  vertical-align: top;
  top: 0;
  left: 0;
  line-height: 130%;
  padding: 10px 0 0 60px; }

.two-btn-wrap {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px 0; }

.btn {
  position: relative;
  height: 60px;
  width: 100%;
  padding: 0 65px 0 0;
  box-sizing: border-box;
  display: inline-block;
  margin: 0px 0 10px; }
  .btn svg {
    height: 60px; }
  .btn h2,
  .btn .button-icon {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); }
  .btn h2 {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 0 0;
    text-transform: uppercase;
    text-align: center;
    color: #492911;
    background-color: #F5F7F2;
    font-size: 24px; }
    .btn h2.nobg {
      background: none; }
  .btn .button-icon {
    top: 0;
    right: 0;
    position: absolute;
    height: 60px;
    width: 60px;
    background: #8FC6C6; }
    .btn .button-icon.main-col {
      background: #079DE2; }
    .btn .button-icon.sec-col {
      background: #FFA500; }
    .btn .button-icon.close-col {
      background: #EF5B5F; }
    .btn .button-icon.default-col {
      background: #079DE2; }
      .btn .button-icon.default-col .ui-svg-line {
        fill: #079DE2; }
  .btn.big {
    height: 120px; }
    .btn.big svg {
      height: 120px; }
  .btn.half-left, .btn.half-right {
    width: 48%;
    margin-right: 4%;
    height: 30px;
    padding: 0 32px 0 0; }
    .btn.half-left h2, .btn.half-right h2 {
      padding: 10px 0 0;
      font-size: 12px;
      box-shadow: none;
      text-align: center; }
    .btn.half-left .button-icon, .btn.half-right .button-icon {
      height: 30px;
      width: 30px;
      box-shadow: none; }
  .btn.half-left {
    float: left; }
  .btn.half-right {
    float: right;
    margin-right: 0%; }
  .btn.alpha {
    background: #079DE2; }
    .btn.alpha h2,
    .btn.alpha svg {
      background: none;
      color: #ffffff;
      pointer-events: none; }
  .btn.right {
    width: auto;
    float: right; }
    .btn.right h2 {
      padding-right: 20px;
      padding-left: 20px; }
  .btn:hover h2,
  .btn:hover .button-icon {
    box-shadow: none; }

.ui-svg-line {
  stroke: #F5F7F2;
  stroke-width: 2px;
  fill: none; }

.half-right .ui-svg-line,
.half-left .ui-svg-line {
  stroke-width: 2px; }

.ui-svg-form {
  stroke: #F5F7F2;
  stroke-width: 2px;
  fill: #F5F7F2; }

.svg-button {
  display: inline-block;
  width: 60px;
  height: 60px;
  z-index: 10;
  padding: 0;
  text-align: center; }
  .svg-button.small {
    width: 30px;
    height: 30px;
    background: #3a3a3a; }
  .svg-button.closebutton {
    stroke-dashoffset: 99;
    stroke-dasharray: 109;
    position: absolute;
    top: 0;
    right: 0; }
  .svg-button .line {
    fill: transparent;
    stroke: #3a3a3a;
    stroke-width: 5px; }

#mainMenu {
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 5;
  background-color: #0579AB;
  top: 0;
  right: 0;
  box-sizing: border-box;
  overflow: hidden;
  transition: all 0.4s ease-in;
  -webkit-transition: all 0.4s ease-in; }
  #mainMenu .header {
    display: none; }
  #mainMenu.hide {
    top: -60px; }
  #mainMenu.active {
    transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out;
    width: 100%;
    z-index: 12; }
    #mainMenu.active .header {
      display: block; }
  #mainMenu #mm-achievement,
  #mainMenu #mm-howto,
  #mainMenu #mm-quitgame,
  #mainMenu #mm-partner,
  #mainMenu #mm-logout,
  #mainMenu #mm-progresso,
  #mainMenu #mm-profile {
    display: none; }
  #mainMenu #mm-tutorial {
    display: none; }
  #mainMenu.gameC #mm-howto,
  #mainMenu.gameC #mm-quitgame,
  #mainMenu.gameC #mm-partner,
  #mainMenu.gameC #mm-tutorial, #mainMenu.gameB #mm-howto,
  #mainMenu.gameB #mm-quitgame,
  #mainMenu.gameB #mm-partner,
  #mainMenu.gameB #mm-tutorial, #mainMenu.gameA #mm-howto,
  #mainMenu.gameA #mm-quitgame,
  #mainMenu.gameA #mm-partner,
  #mainMenu.gameA #mm-tutorial {
    display: block; }
  #mainMenu.stateMenu #mm-howto,
  #mainMenu.stateMenu #mm-progresso,
  #mainMenu.stateMenu #mm-partner,
  #mainMenu.stateMenu #mm-logout,
  #mainMenu.stateMenu #mm-profile {
    display: block; }

#mainMenuButton {
  position: absolute;
  width: 60px;
  height: 60px;
  display: inline-block;
  right: 0;
  top: 0;
  z-index: 2;
  background: #079DE2; }
  #mainMenuButton svg {
    pointer-events: none; }
    #mainMenuButton svg .l1, #mainMenuButton svg .l2, #mainMenuButton svg .l3 {
      transition: all 0.4s ease-in;
      -webkit-transition: all 0.4s ease-in;
      fill: transparent;
      stroke: #ffffff;
      stroke-width: 2px;
      stroke-dasharray: 36;
      stroke-dasharray: 152;
      stroke-dashoffset: 725; }

.active #mainMenuButton svg .l1, .active #mainMenuButton svg .l2, .active #mainMenuButton svg .l3 {
  transition: all 0.25s ease-in;
  -webkit-transition: all 0.25s ease-in;
  stroke-dasharray: 152;
  stroke-dashoffset: 515; }

.loader-1 {
  display: none; }

.isLoading .loader-1 {
  display: block; }

#datenschutz {
  top: auto;
  bottom: 0;
  background: #ffffff;
  margin: 0;
  width: 100%;
  height: auto;
  min-height: 45px;
  max-height: 30%;
  padding-bottom: 10px; }
  #datenschutz .box {
    padding-right: 40px;
    box-sizing: border-box;
    max-height: 20px;
    overflow: hidden; }
    #datenschutz .box.readDisclamer {
      max-height: 100%; }
    #datenschutz .box p {
      margin-top: 5px; }
    #datenschutz .box span {
      display: block;
      padding-top: 5px; }
  #datenschutz.hide {
    bottom: -100%; }
  #datenschutz h1 {
    font-size: 14px;
    color: #3a3a3a; }
  #datenschutz h2 {
    font-size: 14px; }
  #datenschutz p {
    font-size: 12px; }
  #datenschutz .content {
    padding-top: 0; }

#bottomNav {
  transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
  position: fixed;
  max-width: 100%;
  width: 100vh;
  bottom: 0;
  height: 30px;
  z-index: 10; }
  #bottomNav .svg-button {
    width: 32%; }
    #bottomNav .svg-button.closebutton {
      width: 60px; }
    #bottomNav .svg-button svg {
      height: 60px; }
  #bottomNav .nav-stats-content,
  #bottomNav .nav-list-content {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  #bottomNav.nav-stats .nav-stats-content {
    display: block; }
  #bottomNav.nav-list .nav-list-content {
    display: block; }
  #bottomNav svg {
    pointer-events: none; }
  #bottomNav.hide {
    bottom: -60px; }
  #bottomNav.active {
    background-color: #0579AB; }
    #bottomNav.active .buttons {
      position: absolute;
      top: -60px; }

#profilecontent {
  padding-bottom: 40px; }
  #profilecontent .title {
    display: inline-block;
    position: relative;
    width: 100%; }

#anleitungscreen .content.anleitung3 #anleitung3 {
  max-height: 550px;
  transition: all 0.5s ease-in;
  background-color: #F5F7F2; }
  #anleitungscreen .content.anleitung3 #anleitung3 h2 {
    box-shadow: none; }

#anleitungscreen .content.anleitung2 #anleitung2 {
  max-height: 550px;
  transition: all 0.5s ease-in;
  background-color: #F5F7F2; }
  #anleitungscreen .content.anleitung2 #anleitung2 h2 {
    box-shadow: none; }

#anleitungscreen .content.anleitung1 #anleitung1 {
  max-height: 550px;
  transition: all 0.5s ease-in;
  background-color: #F5F7F2; }
  #anleitungscreen .content.anleitung1 #anleitung1 h2 {
    box-shadow: none; }

#anleitungscreen .content.anleitungStats #anleitungStats {
  max-height: 550px;
  transition: all 0.5s ease-in;
  background-color: #F5F7F2; }
  #anleitungscreen .content.anleitungStats #anleitungStats h2 {
    box-shadow: none; }

#anleitung1,
#anleitung2,
#anleitung3,
#anleitungStats {
  display: inline-block;
  width: 100%;
  height: auto;
  max-height: 70px;
  overflow: hidden;
  transition: all 0.5s ease-out;
  padding-bottom: 30px;
  box-sizing: border-box; }
  #anleitung1 img,
  #anleitung2 img,
  #anleitung3 img,
  #anleitungStats img {
    width: 80%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px; }
  #anleitung1 p,
  #anleitung2 p,
  #anleitung3 p,
  #anleitungStats p {
    width: 80%;
    display: block;
    position: relative;
    margin: 5px auto; }

#anleitung1 .btn svg {
  background-color: #55c6fa; }

#anleitung2 .btn svg {
  background-color: #079de2; }

#anleitung3 .btn svg {
  background-color: #04587f; }

#anleitungStats .btn svg {
  background-color: #FFA500; }

#message {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 99; }
  #message.show {
    background: rgba(0, 0, 0, 0.3);
    left: 0; }
    #message.show #window {
      left: 50%; }
  #message #window {
    position: absolute;
    top: 0;
    left: -100%;
    top: 50%;
    margin-left: -160px;
    margin-top: -150px;
    width: 320px;
    height: 200px;
    background: #ffffff;
    z-index: 13;
    transition: left 0.5s; }
    #message #window .content {
      padding-top: 60px; }
  #message.error #window .header {
    background: #EF5B5F; }

#message-content {
  padding: 0 20px; }

#message-title {
  padding-left: 20px;
  text-align: left; }

body::-webkit-scrollbar {
  width: 1em; }

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); }

body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey; }

.word-num-wrap {
  width: 100%;
  height: 25px;
  background: #F5F7F2;
  overflow: hidden;
  display: block;
  position: relative; }
  .word-num-wrap .word-num-progress {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background: #079DE2;
    box-sizing: border-box;
    margin: 0;
    padding: 0; }

#tutorial {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 20px solid #3a3a3a;
  box-sizing: border-box;
  z-index: 99;
  display: none; }
  #tutorial.show {
    display: block; }
  #tutorial #tutorial-title,
  #tutorial #tutorial-text {
    text-align: center;
    display: block;
    background: #3a3a3a;
    color: #fff;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box; }
  #tutorial #tutorial-title {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase; }
  #tutorial #tutorial-text {
    font-size: 16px; }
  #tutorial #tutorial-progress {
    width: 10%;
    height: 5px;
    background: #000;
    display: block;
    float: left; }
  #tutorial #button-container {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%; }
    #tutorial #button-container button {
      background: #000;
      color: #ffffff;
      display: block;
      width: auto;
      padding: 10px 20px;
      margin: 0 auto 0;
      position: relative;
      text-transform: uppercase; }

@media screen and (max-width: 450px) {
  .btn {
    margin-bottom: 5px; }
  .content-footer {
    height: 80px; } }