@import url(http://fonts.googleapis.com/css?family=Dosis:300,400);
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg); }

  48% {
    -webkit-transform: translate(0, 0) rotate(0deg); }

  49% {
    -webkit-transform: translate(2px, 1px) rotate(0deg); }

  51% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg); }

  52% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg); }

  53% {
    -webkit-transform: translate(0px, 2px) rotate(0deg); }

  54% {
    -webkit-transform: translate(1px, -1px) rotate(1deg); }

  55% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg); }

  56% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg); }

  57% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg); }

  58% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg); }

  59% {
    -webkit-transform: translate(2px, 2px) rotate(0deg); }

  60% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg); }

  61% {
    -webkit-transform: translate(0, 0) rotate(0deg); } }

html, body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  height: 100%;
  min-height: 100%; }
/* background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
    */

body {
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 300;
  text-align: center; }
  body.loadingAd {
    position: relative; }
    body.loadingAd:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      display: block;
      background: url("../img/WhiteTransBg.png") repeat 0 0; }
    body.loadingAd:after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1001;
      display: block;
      background: url("../img/LoadingOnWhite.gif") no-repeat center center; }
  body.overlay {
    overflow: hidden;
    width: 100%; }
    body.overlay:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      bottom: 0;
      z-index: 1000;
      display: block;
      width: 100%;
      background: #fff;
      opacity: 0.8;
      transition: left 0.5s; }
    body.overlay:after {
      content: attr(data-overlay-text);
      display: block;
      width: 100%;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      padding: 0 10px;
      position: absolute;
      top: 100px;
      left: 100%;
      z-index: 1001;
      color: #118e00;
      font-size: 700%;
      transition: left 0.5s; }
    body.overlay.slideIn:before {
      left: 0; }
    body.overlay.slideIn:after {
      left: 0; }
  body .iapOverlay, body .resetOverlay {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    background: url("../img/TransBg.png") repeat 0 0; }
    body .iapOverlay h1, body .resetOverlay h1 {
      margin-bottom: 0;
      color: #ffc446;
      font-size: 250%; }
    body .iapOverlay p, body .resetOverlay p {
      display: block;
      margin: 0 0 10px 0;
      padding: 10px;
      font-size: 120%;
      line-height: 130%;
      color: #fff; }
    body .iapOverlay [data-type="iapClose"], body .iapOverlay .resetClose, body .resetOverlay [data-type="iapClose"], body .resetOverlay .resetClose {
      display: block;
      width: 25px;
      height: 25px;
      border-radius: 100%;
      text-indent: -10000px;
      position: absolute;
      top: 20px;
      right: 10px;
      background: #ffae00 url("../img/CloseIcon.png") no-repeat 5px 5px;
      background-size: 15px auto; }
    body .iapOverlay .button, body .resetOverlay .button {
      margin: 0 10px; }
      body .iapOverlay .button + .button, body .resetOverlay .button + .button {
        margin-top: 20px; }
    body .iapOverlay ul:empty, body .resetOverlay ul:empty {
      height: 32px;
      background: url("../img/Loading.gif") no-repeat center 0; }
    body .iapOverlay ul li a, body .resetOverlay ul li a {
      display: -moz-inline-box;
      -moz-box-orient: vertical;
      display: inline-block;
      vertical-align: top;
      *display: inline;
      *vertical-align: auto;
      padding: 10px;
      width: 250px;
      border-radius: 10px;
      margin-bottom: 15px;
      background-color: #ffae00;
      text-decoration: none; }
      body .iapOverlay ul li a strong, body .resetOverlay ul li a strong {
        display: -moz-inline-box;
        -moz-box-orient: vertical;
        display: inline-block;
        vertical-align: top;
        *display: inline;
        *vertical-align: auto;
        padding-left: 25px;
        background: url("../img/JokerIcon.png") no-repeat 0 0;
        background-size: 20px auto;
        font-size: 160%;
        color: #4a2600; }
        body .iapOverlay ul li a strong.larger, body .resetOverlay ul li a strong.larger {
          padding-left: 40px;
          background-size: 32px auto;
          font-size: 200%; }
        body .iapOverlay ul li a strong.largest, body .resetOverlay ul li a strong.largest {
          padding-left: 50px;
          background-size: 40px auto;
          font-size: 240%; }
      body .iapOverlay ul li a span, body .resetOverlay ul li a span {
        display: block;
        margin: 3px 0;
        color: #fff;
        font-size: 140%; }
      body .iapOverlay ul li a em, body .resetOverlay ul li a em {
        display: block;
        font-size: 120%;
        color: #4a2600;
        font-style: normal; }
      body .iapOverlay ul li a.loading span, body .resetOverlay ul li a.loading span {
        background: url("../img/IapLoading.gif") no-repeat center 0;
        text-indent: -10000px;
        height: 40px; }
      body .iapOverlay ul li a.loading em, body .resetOverlay ul li a.loading em {
        display: none; }
  body .resetOverlay h1 {
    margin-top: 50px; }
  body ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  body .hide {
    display: none !important; }
  body .audiojs {
    display: none; }
  body header section.level {
    font-size: 160%; }
    body header section.level strong {
      display: -moz-inline-box;
      -moz-box-orient: vertical;
      display: inline-block;
      vertical-align: top;
      *display: inline;
      *vertical-align: auto;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      vertical-align: middle;
      background-color: #0c6900;
      width: 25px;
      height: 25px;
      margin-top: -5px;
      line-height: 25px;
      color: #fff;
      border-radius: 100%; }
    body header section.level.twoDigit strong {
      width: 35px; }
    body header section.level.threeDigit strong {
      width: 55px; }
  body header section.images {
    margin-top: 10px; }
    body header section.images ul li {
      display: -moz-inline-box;
      -moz-box-orient: vertical;
      display: inline-block;
      vertical-align: top;
      *display: inline;
      *vertical-align: auto;
      width: 145px;
      height: 145px;
      overflow: hidden;
      position: relative; }
      body header section.images ul li span {
        display: block;
        width: 145px;
        height: 145px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: url("../img/Circle.png") no-repeat 0 0;
        background-size: 145px auto; }
      body header section.images ul li img {
        width: 143px;
        margin-left: 1px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1; }
        body header section.images ul li img.small {
          max-width: 90px;
          margin-top: 10px;
          margin-left: -45px;
          left: 50%; }
      body header section.images ul li + li {
        margin-left: 4px; }
    body header section.images ul.big li {
      width: 200px;
      height: 200px; }
      body header section.images ul.big li span {
        width: 200px;
        height: 200px;
        background-size: 200px auto; }
      body header section.images ul.big li img {
        width: 198px; }
  body .button {
    display: block;
    padding: 10px;
    background-color: #19b300;
    border-bottom: 1px solid #117500;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 160%; }
    body .button:hover {
      background-color: #29d50d; }
    body .button.red {
      background-color: #a30000;
      border-bottom: 1px solid #630000; }
      body .button.red:hover {
        background-color: #be0000; }
    body .button.grey {
      background-color: #777777;
      border-bottom: 1px solid #333333; }
      body .button.grey:hover {
        background-color: #8e8e8e; }
  body article {
    display: block;
    padding: 10px; }
    body article.startscreen h1, body article.endscreen h1 {
      display: block;
      width: 150px;
      height: 150px;
      margin: 10px auto;
      text-indent: -10000px;
      background-repeat: no-repeat;
      background-size: 150px auto; }
    body article.startscreen h2, body article.endscreen h2 {
      font-size: 200%;
      margin-bottom: 10px; }
    body article.startscreen .button, body article.endscreen .button {
      margin-bottom: 15px; }
    body article.startscreen fieldset.difficulty, body article.endscreen fieldset.difficulty {
      border: 0;
      color: #333;
      font-size: 150%; }
      body article.startscreen fieldset.difficulty label, body article.startscreen fieldset.difficulty span, body article.endscreen fieldset.difficulty label, body article.endscreen fieldset.difficulty span {
        display: -moz-inline-box;
        -moz-box-orient: vertical;
        display: inline-block;
        vertical-align: top;
        *display: inline;
        *vertical-align: auto;
        vertical-align: middle; }
      body article.startscreen fieldset.difficulty input, body article.endscreen fieldset.difficulty input {
        margin-left: 10px; }
    body article.endscreen h1 {
      margin: 10px auto;
      width: 100px;
      height: 100px;
      background-size: 100px auto; }
    body article.endscreen .hint {
      font-size: 140%; }
    body article section.fill, body article section.answer {
      margin-top: 20px; }
      body article section.fill ul, body article section.answer ul {
        margin-left: -5px; }
        body article section.fill ul li, body article section.answer ul li {
          display: -moz-inline-box;
          -moz-box-orient: vertical;
          display: inline-block;
          vertical-align: top;
          *display: inline;
          *vertical-align: auto;
          vertical-align: middle;
          margin: 0 0 5px 5px; }
          body article section.fill ul li span, body article section.fill ul li a, body article section.answer ul li span, body article section.answer ul li a {
            border-radius: 5px;
            display: block;
            width: 40px;
            height: 40px;
            background-color: #eee;
            border-top: 1px solid #999;
            border-bottom: 1px solid #fff;
            text-decoration: none;
            color: #333;
            font-size: 190%;
            line-height: 40px;
            cursor: default;
            font-weight: 400;
            transition: background-color 0.5s; }
            body article section.fill ul li span:not(.empty), body article section.fill ul li a:not(.empty), body article section.answer ul li span:not(.empty), body article section.answer ul li a:not(.empty) {
              background-color: #666;
              border-top: 1px solid #fff;
              border-bottom: 1px solid #333;
              color: #fff;
              cursor: pointer;
              /*
              &:hover {
              	background-color: #e7e7e7;
              }
              */ }
          body article section.fill ul li.spacebar span.empty, body article section.answer ul li.spacebar span.empty {
            border: 0;
            background: none; }
          body article section.fill ul li.filled span, body article section.fill ul li.filled a, body article section.answer ul li.filled span, body article section.answer ul li.filled a {
            background-color: #6cc332;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #215200;
            color: #fff; }
          body article section.fill ul li.clear, body article section.answer ul li.clear {
            margin-left: 20px; }
            body article section.fill ul li.clear span, body article section.fill ul li.clear a, body article section.answer ul li.clear span, body article section.answer ul li.clear a {
              background-color: red !important;
              border-top: 1px solid #fff;
              border-bottom: 1px solid #215200;
              margin-top: -3px;
              color: #fff; }
    body article section.fill ul li span {
      width: 25px;
      height: 25px;
      line-height: 25px;
      font-size: 160%; }
    body article section.fill ul li.last {
      position: relative;
      cursor: pointer; }
      body article section.fill ul li.last:after {
        content: 'x';
        position: absolute;
        top: -10px;
        right: -10px;
        display: block;
        width: 20px;
        border-radius: 100%;
        background-color: #a30000;
        color: #fff;
        text-align: center;
        font-weight: bold;
        line-height: 20px; }
    body article section.fill ul li.withJoker:after {
      display: none; }
    body article section.fill ul li.withJoker span, body article section.fill ul li.withJoker a {
      color: #4f2700;
      background-color: #ffae00;
      border-bottom: 1px solid #744f00; }
    body article section.fill ul.wrong li span, body article section.fill ul.wrong li a {
      color: #fff;
      background-color: #930000;
      border-bottom: 1px solid #4b0000; }
    body article section.helper {
      display: block;
      margin-top: 20px; }
      body article section.helper ul li {
        display: -moz-inline-box;
        -moz-box-orient: vertical;
        display: inline-block;
        vertical-align: top;
        *display: inline;
        *vertical-align: auto; }
        body article section.helper ul li a, body article section.helper ul li span {
          display: -moz-inline-box;
          -moz-box-orient: vertical;
          display: inline-block;
          vertical-align: top;
          *display: inline;
          *vertical-align: auto;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          height: 34px;
          border-radius: 5px;
          text-decoration: none;
          white-space: nowrap;
          color: #fff; }
        body article section.helper ul li.joker a {
          border-bottom: 1px solid #744f00;
          padding: 0 10px 0 40px;
          margin-right: 15px;
          font-size: 220%;
          color: #4f2700;
          background: #ffae00 url("../img/JokerIcon.png") no-repeat 4px 1px;
          background-size: 29px auto; }
          body article section.helper ul li.joker a em {
            font-style: normal; }
          body article section.helper ul li.joker a span.addJokers {
            display: none; }
          body article section.helper ul li.joker a:not(.disabled) {
            -webkit-animation-name: shake;
            -webkit-animation-duration: 5s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-delay: 0s; }
          body article section.helper ul li.joker a.addJokers {
            background-color: #7ace47; }
            body article section.helper ul li.joker a.addJokers span.numJokers {
              display: none; }
            body article section.helper ul li.joker a.addJokers span.addJokers {
              display: -moz-inline-box;
              -moz-box-orient: vertical;
              display: inline-block;
              vertical-align: top;
              *display: inline;
              *vertical-align: auto;
              font-size: 70%;
              line-height: 180%;
              color: #333; }
            body article section.helper ul li.joker a.addJokers.disabled {
              position: relative;
              cursor: default;
              background-color: #d2ecc2;
              border-bottom: 1px solid #a7db87; }
              body article section.helper ul li.joker a.addJokers.disabled span.addJokers {
                color: #add992; }
                body article section.helper ul li.joker a.addJokers.disabled span.addJokers em {
                  position: absolute;
                  display: block;
                  width: 100%;
                  margin-left: -40px;
                  font-size: 140%;
                  color: #333; }
        body article section.helper ul li.ask {
          white-space: nowrap; }
          body article section.helper ul li.ask span {
            width: 34px;
            color: #fff;
            font-weight: 300;
            font-size: 130%;
            line-height: 160%;
            cursor: pointer; }
            body article section.helper ul li.ask span[data-socialplatform] {
              position: relative;
              text-indent: -10000px; }
              body article section.helper ul li.ask span[data-socialplatform]:after {
                position: absolute;
                left: 0;
                bottom: -11px;
                display: block;
                width: 100%;
                text-align: center;
                color: #45619c;
                text-indent: 0;
                font-size: 50%;
                font-weight: 400;
                line-height: 100%; }
            body article section.helper ul li.ask span[data-socialplatform="facebook"] {
              background: #45619c url("../img/AskFacebookIcon.png") no-repeat 5px 5px;
              background-size: 24px auto; }
              body article section.helper ul li.ask span[data-socialplatform="facebook"]:after {
                content: 'Facebook';
                color: #45619c; }
            body article section.helper ul li.ask span[data-socialplatform="whatsapp"] {
              position: relative;
              background: #14990a url("../img/AskWhatsappIcon.png") no-repeat 6px 5px;
              background-size: 24px auto;
              text-indent: -10000px; }
              body article section.helper ul li.ask span[data-socialplatform="whatsapp"]:after {
                content: 'WhatsApp';
                color: #14990a; }
          body article section.helper ul li.ask.wording {
            margin-top: 3px;
            text-align: right;
            font-size: 90%;
            text-transform: uppercase;
            font-weight: 400;
            color: #666; }
        body article section.helper ul li + li {
          margin-left: 5px; }

@media only screen and (min-width: 641px) {
  body header section.images {
    margin-top: 40px; }
    body header section.images ul li {
      width: 230px;
      height: 230px; }
      body header section.images ul li span {
        width: 230px;
        height: 230px;
        background-size: 230px auto; }
      body header section.images ul li img {
        width: 228px; }
        body header section.images ul li img.small {
          max-width: 150px;
          margin-top: 30px;
          margin-left: -75px;
          left: 50%; }
      body header section.images ul li + li {
        margin-left: 10px; }
  body article .button {
    max-width: 60%;
    margin: 0 auto;
    font-size: 200%; }
  body article section.fill, body article section.answer {
    margin-top: 40px; }
    body article section.fill ul, body article section.answer ul {
      margin-left: -10px; }
      body article section.fill ul li, body article section.answer ul li {
        margin: 0 0 10px 10px; }
        body article section.fill ul li span, body article section.fill ul li a, body article section.answer ul li span, body article section.answer ul li a {
          display: block;
          width: 40px;
          height: 40px; }
        body article section.fill ul li.filled span, body article section.fill ul li.clear span, body article section.fill ul li a:not(.empty), body article section.answer ul li.filled span, body article section.answer ul li.clear span, body article section.answer ul li a:not(.empty) {
          width: 60px;
          height: 60px;
          line-height: 60px; }
        body article section.fill ul li.clear, body article section.answer ul li.clear {
          margin-left: 40px; } }