@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,300,700);
*,
*:before,
*:after {
  box-sizing: border-box; }

html,
body {
  color: #919191;
  font-family: 'Open Sans', arial;
  font-size: 12px;
  height: 100%;
  margin: 0;
  min-width: 300px;
  padding: 0; }

a {
  color: inherit; }

body {
  display: flex;
  flex-direction: column; }

.content {
  flex: 1; }

.logo {
  background: url(9dd0bfa62747442e068baa826d46cb2f.png) no-repeat 50% 50%;
  background-size: auto 100%;
  display: block;
  margin: 0 auto;
  max-width: 800px;
  height: 55px; }

header {
  background: #69305a;
  height: 75px;
  padding: 10px 0; }

footer {
  background: #fff;
  display: none;
  height: 50px;
  justify-content: space-around;
  margin: -50px 0 0;
  max-width: 800px;
  overflow: hidden;
  padding: 7.5px;
  position: relative;
  width: 100%; }
  @media screen and (min-width: 800px) {
    footer {
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
      display: block;
      height: 120px;
      margin: 30px auto;
      padding: 15px; } }
  footer::before {
    background: #ccc;
    bottom: 7.5px;
    content: '';
    left: 50%;
    position: absolute;
    top: 7.5px;
    width: 1px; }
    @media screen and (min-width: 800px) {
      footer::before {
        display: none; } }
  footer .social {
    margin: 0 0 15px;
    text-align: center; }
    footer .social a {
      display: inline-block;
      height: 35px;
      margin: 0 6px;
      overflow: hidden;
      text-indent: 35px;
      width: 35px; }
      @media screen and (min-width: 400px) {
        footer .social a {
          margin: 0 10px; } }
      footer .social a.facebook {
        background: url(a1e21844b04d16572f53307b7922a1ad.jpg) no-repeat; }
      footer .social a.twitter {
        background: url(471c238ff392eb4116f23736540670e5.jpg) no-repeat; }
      footer .social a.linkedin {
        background: url(6d6dd5c6c16a25df211f870a6bafbe6f.jpg) no-repeat; }
  footer .contact {
    text-align: center; }
    footer .contact .item {
      margin: 0 6px;
      position: relative;
      text-decoration: none; }
      @media screen and (min-width: 400px) {
        footer .contact .item {
          margin: 0 10px; } }
      footer .contact .item span {
        display: none; }
      footer .contact .item::before {
        background: no-repeat;
        background-size: cover;
        content: '';
        display: inline-block;
        height: 35px;
        width: 35px; }
      footer .contact .item.tel::before {
        background-image: url(6e744b684093a0417fd3c45b12934ac5.png); }
      footer .contact .item.address::before {
        background-image: url(2174be3e6ce6f6e622036fc5ec9ab57c.png); }
      footer .contact .item.mail::before {
        background-image: url(178ebf50bfa99e921aa708830ef4a573.png); }
    @media screen and (min-width: 800px) {
      footer .contact {
        display: flex; }
        footer .contact .item {
          flex: 1;
          padding: 0 15px 0 37.5px;
          position: relative;
          text-align: left; }
          footer .contact .item span {
            display: block;
            font-size: 12px;
            font-family: arial; }
            footer .contact .item span.title {
              color: #69305a;
              font-size: 14px;
              margin-bottom: 0.3em;
              text-transform: uppercase; }
          footer .contact .item::before {
            content: '';
            height: 25px;
            left: 0;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 25px; } }

.button {
  background: #69305a;
  border: none;
  border-radius: 15px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  overflow: hidden;
  text-transform: uppercase; }
  .button:focus, .button:active {
    outline: none; }
  .button img {
    vertical-align: middle; }
  @media screen and (min-width: 800px) {
    .button {
      border-radius: 5px;
      padding: 0 30px; } }
  .button.please::after {
    background: url(e68a86f342643a9c4987f2d3d3a2ecd8.png);
    background-size: contain;
    content: '';
    display: inline-block;
    height: 1.2em;
    margin-left: 0.2em;
    vertical-align: middle;
    width: 1.2em; }

.game-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 0 0 50px;
  position: relative; }
  @media screen and (min-width: 800px) {
    .game-wrapper {
      padding: 0 15px; } }
  .game-wrapper .game-hook {
    background: #69305a;
    color: #fff;
    font-size: 11px;
    height: 30px;
    line-height: 15px;
    max-width: 800px;
    padding: 0 0 15px;
    text-align: center;
    text-transform: uppercase;
    width: 100%; }
    @media screen and (min-width: 800px) {
      .game-wrapper .game-hook {
        align-items: center;
        border-bottom: 1px solid #ccc;
        background: transparent;
        color: inherit;
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        height: 45px;
        margin: 10px 0 30px;
        padding: 15px;
        position: relative;
        text-transform: none; }
        .game-wrapper .game-hook::after {
          border-top: 8px solid #ccc;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          height: 0;
          content: '';
          left: 50%;
          position: absolute;
          top: 100%;
          transform: translateX(-50%);
          width: 0; } }
    .game-wrapper .game-hook .button {
      bottom: 10px;
      position: absolute;
      right: 15px;
      width: calc(100% - 30px); }
      @media screen and (min-width: 800px) {
        .game-wrapper .game-hook .button {
          position: static;
          width: auto; } }
    .game-wrapper .game-hook.successful .button {
      display: none; }

.board-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  width: 100%; }
  @media screen and (min-width: 800px) {
    .board-wrapper {
      flex-direction: row;
      height: calc(100vh - 340px); } }
  .board-wrapper .board {
    background: #ccc no-repeat;
    background-size: contain;
    height: calc(100vw * 0.66406);
    max-height: calc(((100vh - 155px)/ 2));
    max-width: calc(((100vh - 155px)/ 2) / 0.66406);
    min-height: 199.21875px;
    min-width: 300px;
    position: relative;
    width: 100%; }
    .board-wrapper .board::before, .board-wrapper .board::after {
      background: #fff;
      content: '';
      height: 2px;
      position: absolute;
      width: 100%; }
    .board-wrapper .board::before {
      top: 0; }
    .board-wrapper .board::after {
      bottom: 0; }
    @media screen and (min-width: 800px) {
      .board-wrapper .board {
        margin: 0 15px;
        height: calc((50vw - 30px*1.5) * 0.66406);
        max-height: calc(100vh - 340px);
        max-width: calc((((100vh - 340px)) / 0.66406)); }
        .board-wrapper .board::before, .board-wrapper .board::after {
          display: none; } }
    .board-wrapper .board-original {
      background-image: url(cb1caa0f9b9b2e87be49f1812297d380.jpg); }
    .board-wrapper .board-modified {
      background-image: url(eea23b1752db946c16e9984e2104a81e.jpg); }
    .board-wrapper .board .error {
      position: absolute; }
      .board-wrapper .board .error::before, .board-wrapper .board .error::after {
        background: #d00;
        content: '';
        display: block;
        height: 2px;
        position: absolute;
        width: 4vw;
        transform-origin: 50% 50%; }
        @media screen and (min-width: 800px) {
          .board-wrapper .board .error::before, .board-wrapper .board .error::after {
            width: 20px; } }
      .board-wrapper .board .error::before {
        transform: translateX(-50%) rotate(45deg); }
      .board-wrapper .board .error::after {
        transform: translateX(-50%) rotate(-45deg); }
  .board-wrapper .difference-wrapper {
    position: absolute; }
    .board-wrapper .difference-wrapper::before {
      border: 2px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 3px 0 rgba(17, 17, 17, 0.7), 0 0 3px 0 rgba(17, 17, 17, 0.5) inset;
      content: '';
      height: 5vw;
      left: 50%;
      opacity: 0;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 5vw; }
      @media screen and (min-width: 800px) {
        .board-wrapper .difference-wrapper::before {
          height: 30px;
          width: 30px; } }
    .board-wrapper .difference-wrapper.discovered::before {
      opacity: 1; }
    .board-wrapper .difference-wrapper .touch-area {
      position: absolute; }
    .board-wrapper .difference-wrapper.headphone {
      height: 13%;
      left: 36%;
      top: 67%;
      width: 17%; }
    .board-wrapper .difference-wrapper.mobile {
      height: 17%;
      left: 73%;
      top: 53%;
      width: 7%; }
    .board-wrapper .difference-wrapper.code {
      height: 12%;
      left: 11%;
      top: 40%;
      width: 12%; }
    .board-wrapper .difference-wrapper.coffee {
      height: 5%;
      left: 17%;
      top: 67%;
      width: 6%; }
    .board-wrapper .difference-wrapper.fruits {
      height: 7%;
      left: 60%;
      top: 0;
      width: 11%; }
    .board-wrapper .difference-wrapper.planning {
      height: 11%;
      left: 83%;
      top: 64%;
      width: 4%; }
    .board-wrapper .difference-wrapper.mail {
      height: 15%;
      left: 61%;
      top: 45%;
      width: 9%; }

.game-successful {
  position: relative; }
  .game-successful .please {
    display: none; }
  .game-successful .success-wrapper {
    background: #fff;
    animation: appear .5s forwards;
    height: calc(100% - 50px);
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%; }
    @media screen and (min-width: 800px) {
      .game-successful .success-wrapper {
        height: 100%; } }
    .game-successful .success-wrapper::before, .game-successful .success-wrapper::after {
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%; }
    .game-successful .success-wrapper::before {
      background-image: url(909066d854326feff04080ca9b9ce15a.jpg);
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100vw auto;
      z-index: 0; }
      @media screen and (min-width: 800px) {
        .game-successful .success-wrapper::before {
          background-image: url(a6210b84013bf0a1cdb9ab3e5377eb5a.jpg); } }
    .game-successful .success-wrapper::after {
      background: #fff;
      z-index: 1;
      animation-name: slide;
      animation-duration: 2s;
      animation-delay: 1.1s;
      animation-timing-function: steps(10, end);
      animation-fill-mode: forwards; }
  .game-successful .success-part {
    background-image: url(909066d854326feff04080ca9b9ce15a.jpg);
    background-repeat: no-repeat;
    background-size: 100vw auto;
    height: 100%;
    position: absolute;
    width: 10%;
    z-index: 2; }
    @media screen and (min-width: 800px) {
      .game-successful .success-part {
        background-image: url(a6210b84013bf0a1cdb9ab3e5377eb5a.jpg); } }
  .game-successful .success-part-1 {
    background-position: 0vw 0;
    left: 0vw;
    animation: bounce-in-top 0.8s 0.5s both; }
  .game-successful .success-part-2 {
    background-position: -10vw 0;
    left: 10vw;
    animation: bounce-in-top 0.8s 0.7s both; }
  .game-successful .success-part-3 {
    background-position: -20vw 0;
    left: 20vw;
    animation: bounce-in-top 0.8s 0.9s both; }
  .game-successful .success-part-4 {
    background-position: -30vw 0;
    left: 30vw;
    animation: bounce-in-top 0.8s 1.1s both; }
  .game-successful .success-part-5 {
    background-position: -40vw 0;
    left: 40vw;
    animation: bounce-in-top 0.8s 1.3s both; }
  .game-successful .success-part-6 {
    background-position: -50vw 0;
    left: 50vw;
    animation: bounce-in-top 0.8s 1.5s both; }
  .game-successful .success-part-7 {
    background-position: -60vw 0;
    left: 60vw;
    animation: bounce-in-top 0.8s 1.7s both; }
  .game-successful .success-part-8 {
    background-position: -70vw 0;
    left: 70vw;
    animation: bounce-in-top 0.8s 1.9s both; }
  .game-successful .success-part-9 {
    background-position: -80vw 0;
    left: 80vw;
    animation: bounce-in-top 0.8s 2.1s both; }
  .game-successful .success-part-10 {
    background-position: -90vw 0;
    left: 90vw;
    animation: bounce-in-top 0.8s 2.3s both; }
  .game-successful .success-part-11 {
    background-position: -100vw 0;
    left: 100vw;
    animation: bounce-in-top 0.8s 2.5s both; }
  .game-successful + footer {
    bottom: 0;
    display: flex;
    position: fixed; }
    @media screen and (min-width: 800px) {
      .game-successful + footer {
        display: block;
        position: static; } }

@keyframes appear {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes slide {
  from {
    left: 0; }
  to {
    left: 100%; } }

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@keyframes bounce-in-top {
  0% {
    transform: translateY(-100%);
    animation-timing-function: ease-in;
    opacity: 0; }
  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1; }
  55% {
    transform: translateY(-15%);
    animation-timing-function: ease-in; }
  72% {
    transform: translateY(0);
    animation-timing-function: ease-out; }
  81% {
    transform: translateY(-6%);
    animation-timing-function: ease-in; }
  90% {
    transform: translateY(0);
    animation-timing-function: ease-out; }
  95% {
    transform: translateY(-1%);
    animation-timing-function: ease-in; }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out; } }

.modal-overlay {
  background: rgba(17, 17, 17, 0.1);
  cursor: not-allowed;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  transition: 0.3s;
  top: 0;
  width: 100%;
  z-index: 100; }
  .modal-overlay.shown {
    opacity: 1; }

.modal-wrapper {
  background: #fff;
  border-radius: 5px;
  margin-left: 0;
  margin-top: -10px;
  padding: 10px;
  position: absolute;
  transition: 0.3s 0.3s margin-left, 0.3s 0.3s margin-top; }
  .modal-wrapper::after {
    background: #fff no-repeat 50% 50%;
    background-size: 75%;
    border-radius: 50%;
    box-shadow: 0 0 3px 0 rgba(17, 17, 17, 0.7);
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: 40px;
    width: 40px;
    transform: translate(40%, -40%); }
  .modal-wrapper p {
    padding-right: 15px;
    margin: 0 0 10px; }
  .modal-wrapper.mobile::after {
    background-image: url(c19a2dae66b857862baa4220340196d7.svg); }
  .shown .modal-wrapper.mobile {
    margin-left: -155px; }
  .modal-wrapper.code::after {
    background-image: url(5c7efebc737f698cbc4d2353bfdc074e.svg); }
  .shown .modal-wrapper.code {
    margin-left: -30px; }
  .modal-wrapper.mail::after {
    background-image: url(7cdbb269a0d6fb060695c227cc610597.svg); }
  .shown .modal-wrapper.mail {
    margin-left: -110px; }
  .modal-wrapper.headphone::after {
    background-image: url(d13bb1752524a9d6cc1b1aa1f12c1abd.svg); }
  .shown .modal-wrapper.headphone {
    margin-left: -30px;
    margin-top: -100px; }
  .modal-wrapper.planning::after {
    background-image: url(df0cfcf3ccf7dba42b8505c2b4296779.svg); }
  .shown .modal-wrapper.planning {
    margin-left: -185px; }
  .modal-wrapper.fruits {
    margin-top: 0; }
    .modal-wrapper.fruits::after {
      background-image: url(8849bbd61572730ddbb93019f891f2d7.svg); }
    .shown .modal-wrapper.fruits {
      margin-left: -110px; }
  .modal-wrapper.coffee {
    margin-top: 0; }
    .modal-wrapper.coffee::after {
      background-image: url(9cd957dbf4b16bccd7cb67128a260772.svg); }
    .shown .modal-wrapper.coffee {
      margin-left: -50px;
      margin-top: -50px; }

.modal-content {
  font-size: 1.2em;
  max-height: 0;
  overflow: hidden;
  transition: 0.3s width, 0.3s 0.3s max-height;
  width: 0; }
  .shown .modal-content {
    max-height: 400px;
    width: 200px; }

.modal-footer {
  align-items: center;
  display: flex;
  justify-content: space-between; }
  .modal-footer .button {
    border-radius: 4px;
    font-size: 0.9em;
    height: 25px;
    line-height: 25px;
    padding: 0 7.5px;
    text-transform: none; }
  .modal-footer a.button {
    background: #ccc;
    text-decoration: none;
    color: #444444; }
  .modal-footer .close {
    width: 25px; }