*, *:before, *:after {
  box-sizing: border-box;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  outline: 0; }

html {
  -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  font-family: Helvetica, Sans;
  background-color: #1a2b57;
  cursor: none; }

ul {
  margin: 0;
  list-style: none;
  padding: 0; }

figure {
  margin: 0;
  padding: 0; }

a {
  text-decoration: none; }

.content.in-game {
  cursor: none; }

button {
  outline: 0;
  border: 0;
  background: none; }

.btn--primary,
.btn--secondary,
.btn--oversized {
  display: block;
  cursor: none; }

.btn--oversized {
  border: 3px solid black;
  border-radius: 15px;
  background-color: white;
  color: black;
  margin: 0 auto;
  padding: 1rem 3rem; }

.btn--primary {
  border: 3px solid black;
  border-radius: 6px;
  color: black;
  margin: 1.5rem auto 0.5rem;
  padding: 0.6rem 2.5rem; }

.btn--secondary {
  display: inline-block;
  border: 3px solid black;
  background-color: white;
  border-radius: 6px;
  color: black;
  margin-right: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.6rem 1.5rem;
  vertical-align: top;
  height: 3rem; }
  .btn--secondary .icon--refresh {
    margin-left: 1rem;
    vertical-align: middle; }

.btn--social {
  color: white;
  cursor: pointer; }
  .in-game .btn--social {
    cursor: none; }
  .btn--social.icon--twitter:before {
    font-size: 1.4rem; }

@font-face {
  font-family: 'Castledown-Heavy';
  src: url("../fonts/castledown_heavy.otf"); }

@font-face {
  font-family: 'Castledown-Regular';
  src: url("../fonts/castledown_regular.otf"); }

@font-face {
  font-family: 'pooper';
  src: url("../fonts/pooper.ttf?502xxc") format("truetype"), url("../fonts/pooper.woff?502xxc") format("woff"), url("../fonts/pooper.svg?502xxc#pooper") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'pooper' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  [class^="icon-"]:before, [class*=" icon-"]:before {
    font-size: 1.4rem; }

.icon--refresh:before {
  content: "\f021"; }

.icon--volume--up:before {
  content: "\f028"; }

.icon--question--circle:before {
  content: "\f059"; }

.icon--info--circle:before {
  content: "\f05a"; }

.icon--expand:before {
  content: "\f065"; }

.icon--compress:before {
  content: "\f066"; }

.icon--twitter:before {
  content: "\f099"; }

.icon--facebook:before {
  content: "\f09a"; }

.icon--facebook--f:before {
  content: "\f09a"; }

.icon--question:before {
  content: "\f128"; }

.icon--info:before {
  content: "\f129"; }

.icon--exclamation:before {
  content: "\f12a"; }

body {
  font-size: 16px;
  font-family: 'Castledown-Regular', 'Arial', 'Sans'; }

h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
  font-weight: normal; }

h1 {
  font-size: 15rem;
  font-family: 'Castledown-Heavy', 'Arial', 'Sans';
  margin: 1rem 0 2rem;
  text-transform: uppercase;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 4px; }

h2 {
  font-family: 'Castledown-Heavy', 'Arial', 'Sans';
  font-size: 2rem;
  margin-bottom: 1rem; }

h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem; }

p {
  font-size: 1.2rem;
  line-height: 1.8rem; }

a {
  color: black;
  text-decoration: underline;
  cursor: none; }

.credits {
  text-align: center;
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  line-height: 0.9rem; }

.btn--oversized {
  font-size: 2rem;
  font-family: 'Castledown-Heavy', 'Arial', 'Sans';
  letter-spacing: 1px; }

.btn--primary {
  font-size: 1.5rem; }

.btn--secondary {
  font-size: 1.2rem; }

.complete__heading {
  font-size: 4rem;
  line-height: 4.5rem;
  margin-bottom: 1.5rem; }

.intro__loading {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Castledown-Heavy', 'Arial', 'Sans'; }

.complete {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background-color: rgba(26, 43, 87, 0.8); }

.complete__panel {
  padding: 4rem;
  color: white;
  background-color: #1a2b57;
  border-radius: 15px;
  max-width: 1020px;
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -ms-flex-align: center; }

.panel__col--left {
  padding-right: 2rem; }

.panel__col--right {
  -webkit-flex-basis: 40%;
  -moz-flex-basis: 40%;
  flex-basis: 40%;
  -ms-flex-preferred-size: 40%;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  flex-shrink: 0;
  -ms-flex-negative: 0;
  position: relative; }

.complete__ctas {
  margin-top: 1.75rem; }

.complete__end-frame {
  width: 100%; }

.cursor {
  position: fixed;
  pointer-events: none;
  width: 400px;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0); }
  .cursor.point svg {
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform: scale(0.5) translate3d(-51%, -36%, 0) !important;
    -webkit-transform: scale(0.5) translate3d(-51%, -36%, 0) !important;
    -moz-transform: scale(0.5) translate3d(-51%, -36%, 0) !important; }
  .cursor.grab svg {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform: scale(0.5) translate3d(-50%, -50%, 0) !important;
    -webkit-transform: scale(0.5) translate3d(-50%, -50%, 0) !important;
    -moz-transform: scale(0.5) translate3d(-50%, -50%, 0) !important; }
  .cursor.hammer svg {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform: scale(0.5) translate3d(-50%, -50%, 0) !important;
    -webkit-transform: scale(0.5) translate3d(-50%, -50%, 0) !important;
    -moz-transform: scale(0.5) translate3d(-50%, -50%, 0) !important; }
  .cursor.tape svg {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform: scale(0.5) translate3d(-35%, -50%, 0) !important;
    -webkit-transform: scale(0.5) translate3d(-35%, -50%, 0) !important;
    -moz-transform: scale(0.5) translate3d(-35%, -50%, 0) !important; }
  .cursor.scissors svg {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform: scale(0.5) translate3d(-57%, -64%, 0) !important;
    -webkit-transform: scale(0.5) translate3d(-57%, -64%, 0) !important;
    -moz-transform: scale(0.5) translate3d(-57%, -64%, 0) !important; }
  .cursor.vacuum {
    width: 280px; }
    .cursor.vacuum svg {
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      transform: scale(0.5) translate3d(-80%, -70%, 0) !important;
      -webkit-transform: scale(0.5) translate3d(-80%, -70%, 0) !important;
      -moz-transform: scale(0.5) translate3d(-80%, -70%, 0) !important; }
  .cursor.firecracker {
    width: 122px; }
    .cursor.firecracker svg {
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      transform: scale(0.5) translate3d(-35%, -50%, 0) !important;
      -webkit-transform: scale(0.5) translate3d(-35%, -50%, 0) !important;
      -moz-transform: scale(0.5) translate3d(-35%, -50%, 0) !important; }
  .cursor.remote svg, .cursor.remoteOut svg {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform: scale(0.5) translate3d(-38%, -51%, 0) !important;
    -webkit-transform: scale(0.5) translate3d(-38%, -51%, 0) !important;
    -moz-transform: scale(0.5) translate3d(-38%, -51%, 0) !important; }

.hud__options,
.hud__watermark,
.hud__share {
  position: fixed;
  background-color: transparent;
  border: none;
  outline: none; }
  .hud__options path,
  .hud__watermark path,
  .hud__share path {
    fill: white; }

.hud__watermark {
  bottom: 2rem;
  left: 2rem;
  width: 7rem; }

.hud__options {
  top: 2rem;
  left: 2rem; }
  .hud__options > * {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1.2rem; }
  .hud__options .hud__info {
    width: 0.9rem; }
  .hud__options .hud__sound {
    width: 1.3rem; }
  .hud__options .hud__fullscreen {
    width: 1.1rem; }

.hud__share {
  top: 2rem;
  right: 2rem; }
  .hud__share > * {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.6rem; }

.info {
  position: fixed;
  bottom: 50px;
  right: 50px; }

.multiplier {
  display: inline-block;
  color: white;
  margin-right: 20px;
  font-size: 120px; }

.guage {
  display: inline-block;
  width: 50px;
  height: 200px;
  border: 12px solid white;
  position: relative; }

.guage__inner {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  background-color: white;
  -webkit-transition: height 60s linear;
  -moz-transition: height 60s linear;
  transition: height 60s linear; }

.intro {
  position: fixed;
  width: 100%;
  height: 100%;
  font-size: 40px;
  text-align: center;
  color: white;
  background-color: #1a2b57; }

.intro__content {
  width: 100%;
  height: 100%; }
  .intro__content.hidden {
    display: none; }

.intro__preloader {
  width: 760px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); }

.intro__screen {
  display: none; }
  .intro__screen.playing {
    display: block; }

.intro__video {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 80vw; }

.intro__text {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%); }

.intro__cta {
  opacity: 0;
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  -ms-transform: scale(0.75);
  -o-transform: scale(0.75);
  transform: scale(0.75);
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55), ease-in;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55), ease-in;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55), ease-in;
  -webkit-transition-delay: 0.1s;
  -moz-transition-delay: 0.1s;
  transition-delay: 0.1s; }
  .intro__cta.visible {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }

.intro__loading {
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  -webkit-animation: pulse 1s;
  -moz-animation: pulse 1s;
  animation: pulse 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  animation-direction: alternate; }
  .intro__loading.visible {
    opacity: 1; }

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1); }
  to {
    -webkit-transform: scale(1.2); } }

@-moz-keyframes pulse {
  from {
    -moz-transform: scale(1); }
  to {
    -moz-transform: scale(1.2); } }

@keyframes pulse {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  to {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); } }

.invite {
  position: fixed;
  width: 100%;
  height: 100%;
  color: black;
  text-align: center;
  background-color: #F5C484; }

.invite__text {
  margin-bottom: 0;
  position: absolute;
  left: 50%;
  bottom: 2rem;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 0 2rem;
  width: 100%;
  max-width: 540px; }

.invite__character {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-75%);
  -moz-transform: translateX(-50%) translateY(-75%);
  -ms-transform: translateX(-50%) translateY(-75%);
  -o-transform: translateX(-50%) translateY(-75%);
  transform: translateX(-50%) translateY(-75%);
  width: 100%;
  max-width: 500px; }

.invite__logo {
  width: 120px;
  margin: 2rem auto 0;
  display: block; }

.loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #1a2b57;
  font-size: 120px;
  color: white;
  padding: 20px;
  pointer-events: none; }

.notifications {
  position: fixed;
  right: 2rem;
  bottom: 0; }

.notification {
  position: relative;
  width: 360px;
  margin-bottom: 1rem; }

.notification__avatar {
  width: 80px;
  display: inline-block;
  vertical-align: top;
  border: 3px solid #000;
  border-radius: 10px; }

.notification__message {
  display: inline-block;
  padding: 1rem;
  background-color: #fff;
  border: 3px solid #000;
  border-radius: 0 10px 10px;
  width: 240px;
  min-height: 80px;
  margin-left: 40px;
  position: relative; }
  .notification__message span {
    position: relative; }

.notification__message__arrow {
  position: absolute;
  left: -36px;
  top: -3px;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top; }

.panel {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 43, 87, 0.9); }

.panel__content {
  text-align: center;
  color: black;
  padding: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 540px;
  background-color: rgba(255, 255, 255, 0.96);
  border-radius: 15px;
  border: 3px solid black; }

.scene {
  position: fixed;
  top: 53%;
  left: 50%; }

.click-area {
  position: absolute; }

.clickable {
  position: absolute; }
  .clickable.radio {
    top: 30%;
    left: 15%;
    width: 90px;
    pointer-events: none; }
    .point .clickable.radio {
      pointer-events: auto; }
  .clickable.hammer {
    top: 21.3%;
    left: 35.5%; }
    .clickable.hammer svg g {
      width: 60px; }
    .clickable.hammer .click-area {
      width: 100px;
      height: 66px;
      top: 30%;
      left: 28%;
      pointer-events: auto; }
  .clickable.vase {
    top: 47.8%;
    left: 28.6%;
    width: 248px;
    pointer-events: none; }
    .clickable.vase .click-area {
      width: 50px;
      height: 120px;
      top: 6%;
      left: 72%;
      pointer-events: auto; }
  .clickable.cup {
    width: 100px; }
  .clickable.balloon {
    width: 450px;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
    top: 14%;
    left: 69%; }
  .clickable.tape {
    width: 74px;
    top: 37%;
    left: 80%;
    overflow: hidden;
    pointer-events: none; }
    .clickable.tape .click-area {
      width: 90px;
      height: 65px;
      top: 0%;
      left: 0%;
      pointer-events: auto; }
  .clickable.scissors {
    width: 93px;
    top: 48%;
    left: 50%;
    pointer-events: none; }
    .clickable.scissors .click-area {
      width: 90px;
      height: 65px;
      top: 0%;
      left: 0%;
      pointer-events: auto; }
  .clickable.bowl {
    width: 276px;
    top: 10%;
    left: 38%; }
  .clickable.vacuum {
    width: 132px;
    top: 19%;
    left: 24.5%;
    pointer-events: none; }
    .clickable.vacuum .click-area {
      width: 160px;
      height: 80px;
      top: 0;
      left: -8%;
      -webkit-transform: rotate(-30deg);
      -moz-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
      -o-transform: rotate(-30deg);
      transform: rotate(-30deg);
      pointer-events: auto; }
  .clickable.firecracker {
    width: 64px;
    top: 45.3%;
    left: 80.1%;
    pointer-events: none; }
    .clickable.firecracker .click-area {
      width: 80px;
      height: 66px;
      top: 17%;
      left: -13%;
      pointer-events: auto; }
  .clickable.television {
    width: 200px;
    top: 22%;
    left: 30.9%; }
  .clickable.remote {
    width: 70px;
    top: 50%;
    left: 45%;
    pointer-events: none; }
    .clickable.remote .click-area {
      width: 70px;
      height: 50px;
      top: 0%;
      left: 0%;
      pointer-events: auto; }
  .clickable.fridge-doors {
    width: 142px;
    top: 20.15%;
    left: 26.55%; }
  .clickable.front-door {
    width: 176px;
    top: 55.4%;
    left: 35.85%;
    pointer-events: none; }
  .clickable.back-door {
    width: 201px;
    top: 2.5%;
    left: 61.2%;
    pointer-events: none; }
  .clickable.window {
    top: 25%;
    left: -3.7%;
    width: 1151px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none; }
    .clickable.window .click-area {
      width: 440px;
      height: 1010px;
      top: 1%;
      left: 42%;
      pointer-events: auto; }
  .clickable.knife {
    top: 23.6%;
    left: 12.35%;
    width: 900px;
    pointer-events: none;
    -webkit-transform: rotate(0.2deg);
    -moz-transform: rotate(0.2deg);
    -ms-transform: rotate(0.2deg);
    -o-transform: rotate(0.2deg);
    transform: rotate(0.2deg); }
    .clickable.knife .click-area {
      width: 220px;
      height: 103px;
      top: 32%;
      left: 50%;
      -webkit-transform: rotate(-30deg);
      -moz-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
      -o-transform: rotate(-30deg);
      transform: rotate(-30deg);
      pointer-events: auto; }
  .clickable.butt {
    top: 20.7%;
    left: 18.4%;
    width: 1080px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none; }
    .clickable.butt .click-area {
      width: 180px;
      height: 350px;
      top: 29%;
      left: 51%;
      pointer-events: auto; }
  .clickable.box {
    top: 35%;
    left: 69%;
    width: 500px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none; }
    .clickable.box .click-area {
      width: 380px;
      height: 540px;
      top: 21%;
      left: 5%;
      pointer-events: auto; }
  .clickable.jolly-jonathan {
    top: 25.6%;
    left: 64%;
    width: 666px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none; }
    .clickable.jolly-jonathan .pipe {
      width: 480px;
      height: 140px;
      position: absolute;
      left: 18px;
      top: 226px;
      pointer-events: auto;
      -webkit-transform: rotate(-24deg);
      -moz-transform: rotate(-24deg);
      -ms-transform: rotate(-24deg);
      -o-transform: rotate(-24deg);
      transform: rotate(-24deg); }
    .clickable.jolly-jonathan .click-area {
      width: 420px;
      height: 540px;
      top: 7%;
      left: 22%;
      pointer-events: auto; }
  .clickable.clap {
    top: 31%;
    left: 36%;
    width: 1418px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none; }
    .clickable.clap .click-area {
      width: 292px;
      height: 630px;
      top: 26%;
      left: 66%;
      pointer-events: auto; }
    .clickable.clap .briefcase {
      position: absolute;
      top: 34%;
      left: 61%;
      width: 600px;
      pointer-events: none;
      z-index: -1; }
  .clickable.eat {
    top: 8.1%;
    left: 47.4%;
    width: 1178px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none; }
    .clickable.eat .click-area {
      width: 300px;
      height: 550px;
      top: 8%;
      left: 22%;
      pointer-events: auto; }
  .clickable.horse {
    top: 52.7%;
    left: 21.8%;
    width: 1680px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none; }
    .clickable.horse .click-area {
      width: 472px;
      height: 620px;
      top: 1%;
      left: 64%;
      pointer-events: auto; }
  .clickable.worm {
    top: 28%;
    left: 37%;
    width: 540px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none; }
    .clickable.worm .click-area {
      width: 330px;
      height: 440px;
      top: 2%;
      left: 39%;
      pointer-events: auto; }