/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

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

@font-face {
  font-family: 'latoregular';
  src: url("../fonts/lato-regular-webfont.eot");
  src: url("../fonts/lato-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-regular-webfont.woff2") format("woff2"), url("../fonts/lato-regular-webfont.woff") format("woff"), url("../fonts/lato-regular-webfont.ttf") format("truetype"), url("../fonts/lato-regular-webfont.svg#latoregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'latoblack';
  src: url("../fonts/lato-black-webfont.eot");
  src: url("../fonts/lato-black-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/lato-black-webfont.woff2") format("woff2"), url("../fonts/lato-black-webfont.woff") format("woff"), url("../fonts/lato-black-webfont.ttf") format("truetype"), url("../fonts/lato-black-webfont.svg#latoblack") format("svg");
  font-weight: normal;
  font-style: normal; }
.hide {
  display: none; }

.block {
  display: block; }

.inline-block {
  display: inline-block; }

.left {
  float: left; }

.right {
  float: right; }

.clear {
  clear: both; }

.clearfix:after {
  content: "";
  display: table;
  clear: both; }

.center {
  margin-left: auto;
  margin-right: auto; }

.absolute-center, .full-wrapper .content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.full, .full-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

@keyframes wrong-answer {
  0% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); }
  10% {
    -webkit-transform: translate(-10px, 0);
    -moz-transform: translate(-10px, 0);
    -o-transform: translate(-10px, 0);
    transform: translate(-10px, 0); }
  30% {
    -webkit-transform: translate(10px, 0);
    -moz-transform: translate(10px, 0);
    -o-transform: translate(10px, 0);
    transform: translate(10px, 0); }
  50% {
    -webkit-transform: translate(-10px, 0);
    -moz-transform: translate(-10px, 0);
    -o-transform: translate(-10px, 0);
    transform: translate(-10px, 0); }
  70% {
    -webkit-transform: translate(10px, 0);
    -moz-transform: translate(10px, 0);
    -o-transform: translate(10px, 0);
    transform: translate(10px, 0); }
  80% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); } }
* {
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

body {
  font-family: "latoregular", sans-serif;
  min-width: 1024px;
  min-height: 720px;
  line-height: 1.3;
  color: #0047a4;
  background-color: #333; }

p {
  font-size: 1.7rem;
  line-height: 1.35;
  margin-bottom: 0.8em; }

.full-wrapper {
  -webkit-transition: opacity 350ms;
  -moz-transition: opacity 350ms;
  -o-transition: opacity 350ms;
  transition: opacity 350ms;
  overflow: hidden;
  min-width: 1024px;
  min-height: 720px; }
  .full-wrapper .content {
    width: 900px; }

.pattern-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f55258;
  background-image: url("../img/03_bg_pattern.svg"); }

.ripple-card {
  position: relative;
  padding: 20px;
  background-color: #cee4ed; }
  .ripple-card:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 21px;
    bottom: 100%;
    left: 0;
    background-repeat: repeat-x;
    background-position: center bottom;
    background-image: url("../img/04_ripple_card.svg"); }
  .ripple-card.answer--correct {
    background-color: #d7f0eb; }
    .ripple-card.answer--correct:before {
      background-image: url("../img/05_ripple_correct.svg"); }
  .ripple-card.answer--timeover {
    background-color: #ffedeb; }
    .ripple-card.answer--timeover:before {
      background-image: url("../img/06_ripple_timeover.svg"); }
  .ripple-card.answer--wrong {
    background-color: #ffeaed; }
    .ripple-card.answer--wrong:before {
      background-image: url("../img/07_ripple_wrong.svg"); }

.button {
  display: inline-block;
  border-radius: 25px;
  padding: 0 30px;
  height: 50px;
  font-size: 2.0rem;
  line-height: 50px;
  text-decoration: none;
  color: #ffffff; }
  .button.button--start {
    background-color: #f55258; }
  .button.button--continue {
    background-color: #0047a4; }
  .button.button--true, .button.button--false {
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    border: 2px solid;
    background-color: transparent;
    line-height: 46px; }
    .button.button--true:hover, .button.button--true.active, .button.button--false:hover, .button.button--false.active {
      color: #ffffff; }
    .button.button--true.disabled, .button.button--false.disabled {
      -webkit-transition: opacity 350ms;
      -moz-transition: opacity 350ms;
      -o-transition: opacity 350ms;
      transition: opacity 350ms;
      opacity: 0.3;
      cursor: default;
      background-color: transparent !important; }
    .button.button--true.active, .button.button--false.active {
      cursor: default; }
  .button.button--true {
    color: #00a88f; }
    .button.button--true:hover, .button.button--true.active, .button.button--true:active {
      background-color: #00a88f; }
    .button.button--true.disabled {
      color: #00a88f !important; }
  .button.button--false {
    color: #f55258; }
    .button.button--false:hover, .button.button--false.active, .button.button--false:active {
      background-color: #f55258; }
    .button.button--false.disabled {
      color: #f55258 !important; }

.intro-logo {
  -webkit-transition: all 1000ms;
  -moz-transition: all 1000ms;
  -o-transition: all 1000ms;
  transition: all 1000ms;
  -webkit-transform: translate(calc(-50% - 5px), -50%);
  -moz-transform: translate(calc(-50% - 5px), -50%);
  -o-transform: translate(calc(-50% - 5px), -50%);
  transform: translate(calc(-50% - 5px), -50%);
  position: absolute;
  top: 50%;
  left: 50%; }

.intro-card {
  -webkit-transition: all 1000ms ease-in-out;
  -moz-transition: all 1000ms ease-in-out;
  -o-transition: all 1000ms ease-in-out;
  transition: all 1000ms ease-in-out;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; }

.intro-text {
  width: 475px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  text-align: center; }
  .intro-text .button {
    margin-top: 15px; }
  .intro-text p {
    font-size: 3.6rem; }

.quiz-header {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 130px;
  padding: 0 40px;
  background-color: #cee4ed;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }

.quiz-step-container {
  font-size: 0;
  white-space: nowrap; }

.quiz-step {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-left: 13px;
  margin-right: 13px;
  background-repeat: no-repeat;
  background-image: url("../img/08_steps.svg"); }
  .quiz-step.quiz-step--correct {
    background-position: -28px 0; }
  .quiz-step.quiz-step--timeover {
    background-position: -56px 0; }
  .quiz-step.quiz-step--wrong {
    background-position: -84px 0; }

.question-clock {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 100%;
  border: 2px solid; }
  .question-clock .clock-marker {
    position: absolute;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    top: -3px;
    left: -3px; }
  .question-clock img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }

.question-container {
  -webkit-transition: visibility 0s 600ms;
  -moz-transition: visibility 0s 600ms;
  -o-transition: visibility 0s 600ms;
  transition: visibility 0s 600ms;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  counter-reset: questions; }
  .question-container:before {
    content: "";
    position: absolute;
    top: 130px;
    left: 0;
    width: 100%;
    height: calc(100% - 130px);
    background-color: #fff; }

.question {
  position: absolute;
  top: 130px;
  left: 0;
  width: 100%;
  height: calc(100% - 130px);
  background-color: #fff;
  padding: 70px 40px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate(100%, 20%) rotate(30deg);
  -moz-transform: translate(100%, 20%) rotate(30deg);
  -o-transform: translate(100%, 20%) rotate(30deg);
  transform: translate(100%, 20%) rotate(30deg);
  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  -o-transform-origin: bottom left;
  transform-origin: bottom left; }
  .question.onscreen {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none; }
  .question.wrong-answer {
    -webkit-animation: wrong-answer 400ms ease-in-out;
    -moz-animation: wrong-answer 400ms ease-in-out;
    -o-animation: wrong-answer 400ms ease-in-out;
    animation: wrong-answer 400ms ease-in-out; }
  .question p {
    counter-increment: questions;
    font-size: 3.6em; }
    .question p:before {
      content: counter(questions) ". "; }
  .question .button {
    margin-right: 15px; }

.answer-card {
  position: absolute;
  bottom: 0;
  left: -20px;
  width: calc(100% + 20px * 2);
  padding: 30px 60px;
  opacity: 0;
  -webkit-transition: -webkit-transform 350ms, opacity 350ms;
  -moz-transition: -moz-transform 350ms, opacity 350ms;
  -o-transition: -o-transform 350ms, opacity 350ms;
  transition: transform 350ms, opacity 350ms;
  -webkit-transform: translate(0%, 100%) rotate(15deg);
  -moz-transform: translate(0%, 100%) rotate(15deg);
  -o-transform: translate(0%, 100%) rotate(15deg);
  transform: translate(0%, 100%) rotate(15deg);
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left; }
  .answer-card:after {
    content: "";
    display: table;
    clear: both; }
  .answer-card.active {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
    opacity: 1; }
  .answer-card .button {
    float: right;
    width: 150px; }
  .answer-card .answer-container {
    float: left;
    width: 100%;
    margin-left: -100px;
    margin-right: -150px;
    padding-left: 120px;
    padding-right: 190px; }

.answer {
  display: none; }
  .answer.current {
    display: block; }

.answer-result {
  display: block;
  width: 100px;
  float: left; }
  .answer-result span {
    display: none;
    text-align: center;
    font-size: 2.0rem; }
    .answer-result span:before {
      content: "";
      display: block;
      width: 62px;
      height: 62px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 5px;
      background-repeat: no-repeat;
      background-image: url("../img/10_answer.svg"); }
  .answer-result .result--correct {
    color: #00a88f; }
    .answer-result .result--correct:before {
      background-position: 0px 0; }
    .answer--correct .answer-result .result--correct {
      display: block; }
  .answer-result .result--timeover {
    color: #f9915d; }
    .answer-result .result--timeover:before {
      background-position: -62px 0; }
    .answer--timeover .answer-result .result--timeover {
      display: block; }
  .answer-result .result--wrong {
    color: #f55258; }
    .answer-result .result--wrong:before {
      background-position: -124px 0; }
    .answer--wrong .answer-result .result--wrong {
      display: block; }

.outcome-illustrations {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  top: 0; }

.outcome-image {
  position: absolute;
  left: 50%;
  bottom: -25px;
  -webkit-transition: all 400ms 1000ms cubic-bezier(0.53, 1.53, 0.81, 1);
  -moz-transition: all 400ms 1000ms cubic-bezier(0.53, 1.53, 0.81, 1);
  -o-transition: all 400ms 1000ms cubic-bezier(0.53, 1.53, 0.81, 1);
  transition: all 400ms 1000ms cubic-bezier(0.53, 1.53, 0.81, 1); }
  .outcome-image.outcome-image--success {
    -webkit-transform: translate(-25%, 20%) rotate(90deg);
    -moz-transform: translate(-25%, 20%) rotate(90deg);
    -o-transform: translate(-25%, 20%) rotate(90deg);
    transform: translate(-25%, 20%) rotate(90deg);
    -webkit-transform-origin: 25% 93%;
    -moz-transform-origin: 25% 93%;
    -o-transform-origin: 25% 93%;
    transform-origin: 25% 93%; }
    .outcome-image.outcome-image--success.active {
      -webkit-transform: translate(-25%, 0);
      -moz-transform: translate(-25%, 0);
      -o-transform: translate(-25%, 0);
      transform: translate(-25%, 0); }
  .outcome-image.outcome-image--average {
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    -o-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    -webkit-transform-origin: 50% 90%;
    -moz-transform-origin: 50% 90%;
    -o-transform-origin: 50% 90%;
    transform-origin: 50% 90%; }
    .outcome-image.outcome-image--average .image--arm-right, .outcome-image.outcome-image--average .image--arm-left {
      position: absolute;
      top: 35%;
      -webkit-transition: all 250ms;
      -moz-transition: all 250ms;
      -o-transition: all 250ms;
      transition: all 250ms; }
    .outcome-image.outcome-image--average .image--arm-right {
      -webkit-transform: rotate(-25deg);
      -moz-transform: rotate(-25deg);
      -o-transform: rotate(-25deg);
      transform: rotate(-25deg);
      -webkit-transform-origin: 94% 68%;
      -moz-transform-origin: 94% 68%;
      -o-transform-origin: 94% 68%;
      transform-origin: 94% 68%;
      right: 67%; }
    .outcome-image.outcome-image--average .image--arm-left {
      -webkit-transform: rotate(25deg);
      -moz-transform: rotate(25deg);
      -o-transform: rotate(25deg);
      transform: rotate(25deg);
      -webkit-transform-origin: 6% 68%;
      -moz-transform-origin: 6% 68%;
      -o-transform-origin: 6% 68%;
      transform-origin: 6% 68%;
      left: 60%; }
    .outcome-image.outcome-image--average.active {
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      transform: translate(-50%, 0); }
      .outcome-image.outcome-image--average.active .image--arm-right, .outcome-image.outcome-image--average.active.active .image--arm-left {
        -webkit-transition: all 450ms 350ms cubic-bezier(0.53, 1.53, 0.81, 1);
        -moz-transition: all 450ms 350ms cubic-bezier(0.53, 1.53, 0.81, 1);
        -o-transition: all 450ms 350ms cubic-bezier(0.53, 1.53, 0.81, 1);
        transition: all 450ms 350ms cubic-bezier(0.53, 1.53, 0.81, 1); }
      .outcome-image.outcome-image--average.active .image--arm-right {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg); }
      .outcome-image.outcome-image--average.active .image--arm-left {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg); }
  .outcome-image.outcome-image--fail {
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    -o-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    -webkit-transform-origin: 50% 90%;
    -moz-transform-origin: 50% 90%;
    -o-transform-origin: 50% 90%;
    transform-origin: 50% 90%; }
    .outcome-image.outcome-image--fail.active {
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      transform: translate(-50%, 0); }

.outcome-text {
  display: none;
  text-align: center;
  margin-top: 60px; }
  .outcome-text.active {
    display: block; }
  .outcome-text h4 {
    margin-bottom: 0.15em;
    font-size: 3.6rem;
    font-family: "latoblack", sans-serif; }
  .outcome-text .quiz-result {
    display: block;
    margin-bottom: 0.7em;
    font-size: 3.6rem; }
  .outcome-text p {
    line-height: 1.5; }

.sound-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden; }

.fake-title {
  position: absolute;
  display: block;
  font-family: "latoblack", sans-serif;
  font-size: 1px; }
  .fake-title:before {
    content: "."; }

.state--loading {
  opacity: 0; }
.state--loading .intro-card {
  opacity: 0; }

.state--intro .intro-card {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }
.state--intro .intro-logo {
  -webkit-transform: translate(calc(-50% - 5px), calc(-50% - 150px));
  -moz-transform: translate(calc(-50% - 5px), calc(-50% - 150px));
  -o-transform: translate(calc(-50% - 5px), calc(-50% - 150px));
  transform: translate(calc(-50% - 5px), calc(-50% - 150px)); }

.state--in-game .intro-card {
  -webkit-transform: translateY(-200%);
  -moz-transform: translateY(-200%);
  -o-transform: translateY(-200%);
  transform: translateY(-200%); }
.state--in-game .question-container {
  -webkit-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  transition-delay: 400ms;
  visibility: visible; }
.state--in-game .question {
  -webkit-transition: all 650ms;
  -moz-transition: all 650ms;
  -o-transition: all 650ms;
  transition: all 650ms; }

.state--outcome .intro-card {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }
.state--outcome .intro-logo {
  -webkit-transform: translate(calc(-50% - 5px), 150%);
  -moz-transform: translate(calc(-50% - 5px), 150%);
  -o-transform: translate(calc(-50% - 5px), 150%);
  transform: translate(calc(-50% - 5px), 150%); }
.state--outcome .question-container {
  -webkit-transition-delay: 660ms;
  -moz-transition-delay: 660ms;
  -o-transition-delay: 660ms;
  transition-delay: 660ms;
  visibility: hidden; }