@font-face {
  font-family: 'OpenSans';
  src: url('../fonts/OpenSans-Bold-webfont.eot');
  src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Bold-webfont.woff') format('woff'), url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSans';
  src: url('../fonts/OpenSans-ExtraBold-webfont.eot');
  src: url('../fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-ExtraBold-webfont.woff') format('woff'), url('../fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('../fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold') format('svg');
  font-weight: bold;
  font-style: normal;
}
* {
  font-family: 'OpenSans';
}
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  background-color: transparent;
}
html,
body {
  -webkit-font-smoothing: antialiased;
  color: #FFF;
  padding: 0;
  margin: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  outline: 0;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-text-size-adjust: none;
  -webkit-overflow-scrolling: touch;
  width: 1920px;
  height: 1080px;
}
.nw {
  white-space: nowrap;
}
#game {
  background: #000 url("../images/background.jpg") no-repeat center center;
  background-size: cover;
  width: 1920px;
  height: 1080px;
  position: relative;
}
#title {
  position: absolute;
  left: 658px;
  top: 34px;
}
.screen {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
}
.screen.disabled {
  pointer-events: none;
}
.pomme-mask {
  display: inline-block;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.action-button {
  position: absolute;
  width: 86px;
  height: 86px;
  -webkit-border-radius: 43px;
  -moz-border-radius: 43px;
  border-radius: 43px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
  -webkit-transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.action-button::after {
  content: "\00a0";
  position: absolute;
  left: -15px;
  top: -15px;
  width: 116px;
  height: 116px;
  -webkit-border-radius: 58px;
  -moz-border-radius: 58px;
  border-radius: 58px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: solid 12px rgba(255, 252, 170, 0.8);
  box-sizing: border-box;
}
.action-button:active {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
.action-button .icon,
.action-button span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.action-button span {
  display: inline-block;
  font-size: 38px;
}
.action-button-wrapper {
  width: 86px;
  height: 86px;
}
.action-button-wrapper .action-button {
  left: 0;
  top: 0;
}
#screen-1 {
  background: transparent url("../images/layout-screen-1.png") no-repeat center center;
  background-size: 1920px 1080px;
}
#screen-1 .flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: white;
  opacity: 0;
}
#screen-1 .camera-border {
  position: absolute;
  left: 185px;
  top: 208px;
  width: 605px;
  height: 605px;
  border: 16px solid rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
}
#screen-1 .camera-container {
  position: absolute;
  left: 205px;
  top: 228px;
}
#screen-1 .camera-container canvas {
  width: 565px;
  height: 565px;
}
#screen-1 .camera-container .flash {
  width: 565px;
  height: 565px;
}
#screen-1 #record-button-wrapper {
  position: absolute;
  left: 424px;
  top: 728px;
  width: 126px;
  height: 126px;
  -webkit-animation: pulse 5s 0s ease;
  -moz-animation: pulse 5s 0s ease;
  -ms-animation: pulse 5s 0s ease;
  animation: pulse 5s 0s ease;
  animation-iteration-count: infinite;
}
#screen-1 #record-button-wrapper #record-button {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 126px;
  height: 126px;
  -webkit-border-radius: 63px;
  -moz-border-radius: 63px;
  border-radius: 63px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #ed1c24;
  box-sizing: border-box;
  -webkit-transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#screen-1 #record-button-wrapper #record-button::after {
  content: "\00a0";
  position: absolute;
  left: -15px;
  top: -15px;
  width: 156px;
  height: 156px;
  -webkit-border-radius: 78px;
  -moz-border-radius: 78px;
  border-radius: 78px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: solid 12px rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
}
#screen-1 #record-button-wrapper #record-button:active {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
#screen-1 #zoom-in {
  left: 1751px;
  top: 410px;
}
#screen-1 #zoom-out {
  left: 1751px;
  top: 573px;
}
#screen-1 #next-wrapper {
  display: inline-block;
  position: absolute;
  left: 1751px;
  top: 787px;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation: pulse 5s 0s ease;
  -moz-animation: pulse 5s 0s ease;
  -ms-animation: pulse 5s 0s ease;
  animation: pulse 5s 0s ease;
  animation-iteration-count: infinite;
}
#screen-1 #main-image {
  display: inline-block;
  position: absolute;
  left: 1268px;
  top: 450px;
  width: 260px;
  height: 290px;
  overflow: hidden;
}
#screen-1 #main-image #camera-image-receiver {
  position: absolute;
}
#screen-1 #main-image #drag-area {
  display: inline-block;
  position: absolute;
  width: 260px;
  height: 290px;
}
#screen-1 #main-image .flash {
  width: 260px;
  height: 290px;
}
#screen-1 .pomme-mask {
  left: 1171px;
  top: 300px;
}
#screen-1 #pomme-arrow {
  display: inline-block;
  position: absolute;
  left: 1545px;
  top: 295px;
  z-index: 2;
  pointer-events: none;
}
#screen-1 .pommes-library-item {
  display: inline-block;
  position: absolute;
  left: 1270px;
  top: 510px;
  width: 94px;
  height: 104px;
  box-sizing: border-box;
  -webkit-transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#screen-1 .pommes-library-item .content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: inline-block;
  border: 6px solid #ed1c24;
  overflow: hidden;
  -webkit-border-radius: 44px;
  -moz-border-radius: 44px;
  border-radius: 44px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), border 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), border 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), border 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), border 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), border 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#screen-1 .pommes-library-item .content img {
  width: 100%;
  height: 100%;
}
#screen-1 .pommes-library-item.active .content {
  border: 6px solid #fff;
}
#screen-1 .pommes-library-item.position-0 {
  transform: rotate(35deg) translate(-235px) rotate(-35deg);
}
#screen-1 .pommes-library-item.position-1 {
  transform: rotate(5deg) translate(-235px) rotate(-5deg);
}
#screen-1 .pommes-library-item.position-2 {
  transform: rotate(-25deg) translate(-235px) rotate(25deg);
}
#screen-1 .pommes-library-item.position-3 {
  transform: rotate(-55deg) translate(-235px) rotate(55deg);
}
#screen-1 .pommes-library-item.position-4 {
  transform: rotate(-85deg) translate(-235px) rotate(85deg);
}
#screen-1 .pommes-library-item.hidden {
  pointer-events: none;
}
#screen-1 .pommes-library-item.hidden .content {
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
  opacity: 0;
  pointer-events: none;
}
#screen-1 .pommes-library-item:active .content {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    -o-transform: scale(0.85);
    transform: scale(0.85);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
#screen-2 {
  background: transparent url("../images/layout-screen-2.png") no-repeat center center;
  background-size: 1920px 1080px;
}
#screen-2 #display-canvas {
  position: absolute;
  left: 321px;
  top: 366px;
  width: 260px;
  height: 290px;
}
#screen-2 .pomme-mask {
  left: 224px;
  top: 216px;
}
#screen-2 #prev {
  left: 40px;
  top: 40px;
}
#screen-2 #keyboard {
  position: absolute;
  left: 1220px;
  top: 415px;
  width: 445px;
  height: 455px;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}
#screen-2 #keyboard #keyboard-1 {
  left: 20px;
  top: 20px;
}
#screen-2 #keyboard #keyboard-2 {
  left: 170px;
  top: 20px;
}
#screen-2 #keyboard #keyboard-3 {
  left: 330px;
  top: 20px;
}
#screen-2 #keyboard #keyboard-4 {
  left: 20px;
  top: 180px;
}
#screen-2 #keyboard #keyboard-5 {
  left: 170px;
  top: 180px;
}
#screen-2 #keyboard #keyboard-6 {
  left: 330px;
  top: 180px;
}
#screen-2 #keyboard #keyboard-7 {
  left: 20px;
  top: 340px;
}
#screen-2 #keyboard #keyboard-8 {
  left: 170px;
  top: 340px;
}
#screen-2 #keyboard #keyboard-9 {
  left: 330px;
  top: 340px;
}
#screen-2 #validated-checkmark {
  position: absolute;
  left: 1325px;
  top: 528px;
  width: 219px;
  height: 219px;
  pointer-events: none;
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#screen-2 #validated-checkmark.hidden {
  opacity: 0;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}
.invalid {
  -webkit-animation: shake 0.5s 0s linear;
  -moz-animation: shake 0.5s 0s linear;
  -ms-animation: shake 0.5s 0s linear;
  animation: shake 0.5s 0s linear;
}
@keyframes shake {
  8%,
  41% {
    -webkit-transform: translate(-25px, 0);
    -moz-transform: translate(-25px, 0);
    -ms-transform: translate(-25px, 0);
    -o-transform: translate(-25px, 0);
    transform: translate(-25px, 0);
  }
  25%,
  58% {
    -webkit-transform: translate(25px, 0);
    -moz-transform: translate(25px, 0);
    -ms-transform: translate(25px, 0);
    -o-transform: translate(25px, 0);
    transform: translate(25px, 0);
  }
  75% {
    -webkit-transform: translate(-12px, 0);
    -moz-transform: translate(-12px, 0);
    -ms-transform: translate(-12px, 0);
    -o-transform: translate(-12px, 0);
    transform: translate(-12px, 0);
  }
  92% {
    -webkit-transform: translate(12px, 0);
    -moz-transform: translate(12px, 0);
    -ms-transform: translate(12px, 0);
    -o-transform: translate(12px, 0);
    transform: translate(12px, 0);
  }
  0%,
  100% {
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    transform: translate(0px, 0);
  }
}
/*# sourceMappingURL=styles.css.map */