/*
https://loading.io/css/
*/
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px; }

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent; }

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s; }

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s; }

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s; }

@keyframes lds-ring {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.rotate-modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(20, 20, 20, 0.95); }
  .rotate-modal .content-wrapper {
    padding: 30px; }
    .rotate-modal .content-wrapper .content h1 {
      text-align: center;
      color: white; }
  @media screen and (orientation: portrait) {
    .rotate-modal {
      display: flex; } }

html, body {
  overflow-y: hidden; }

body {
  position: relative; }

.red {
  color: red !important; }

.dev {
  display: none;
  position: absolute;
  z-index: 1500;
  top: 1px;
  left: 0; }

.content {
  position: relative;
  padding: 0;
  margin: 0; }

.scaleable-wrapper {
  height: 100vh;
  width: 100%;
  background-color: #000000;
  overflow: hidden; }

.app {
  width: 1600px;
  height: 900px;
  padding: 0;
  margin: 0;
  position: relative;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center center;
  perspective: 600px;
  perspective-origin: 50% 40%;
  overflow: hidden;
  backface-visibility: hidden; }

.screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 1600px;
  height: 900px;
  background-size: cover;
  overflow: hidden;
  transition: transform .4s ease-out; }
  .screen.out-left {
    transform: translate3d(-100%, 0, 0); }
  .screen.out-right {
    transform: translate3d(200%, 0, 0); }

.screen-title > div {
  position: absolute;
  width: 100%;
  height: 100%; }

.screen-title .main-screen, .screen-title .screen-intro, .screen-title .second-screen {
  transition: opacity 1s; }

.screen-title .main-screen {
  opacity: 1;
  z-index: 0; }

.screen-title .button-intro {
  transform: translate3d(0, 500px, 0);
  transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.screen-title .screen-intro, .screen-title .second-screen {
  opacity: 0;
  z-index: -1; }

.screen-title .divider {
  transform: translate3d(0, -1370px, 0);
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  .screen-title .divider.ready {
    transform: translate3d(0, -470px, 0); }
  .screen-title .divider .divider-spacer {
    background-color: #6920a5;
    height: 1100px;
    width: 100%; }

.screen-title .box {
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  .screen-title .box.box-top-left {
    transition-delay: 2s; }
  .screen-title .box.box-top-right {
    transition-delay: 2.5s; }
  .screen-title .box.box-bottom-left {
    transition-delay: 3s; }
  .screen-title .box.box-bottom-right {
    transition-delay: 3.5s; }

.screen-title .site-link {
  position: absolute;
  bottom: 185px;
  left: 0;
  right: 0; }
  .screen-title .site-link a {
    color: white;
    margin: 0 auto;
    text-decoration: none;
    font-size: 38px; }

.screen-title.stage2 .divider {
  transform: translate3d(0, -200px, 0); }

.screen-title.stage2 .button-intro {
  transform: translate3d(0, 0, 0); }

.screen-title.stage2 .main-screen, .screen-title.stage2 .second-screen {
  opacity: 0;
  z-index: -1; }

.screen-title.stage2 .screen-intro {
  opacity: 1;
  z-index: 0; }

.screen-title.stage3 .divider {
  transform: translate3d(0, -980px, 0); }

.screen-title.stage3 .main-screen, .screen-title.stage3 .screen-intro {
  opacity: 0;
  z-index: -1; }

.screen-title.stage3 .second-screen {
  opacity: 1;
  z-index: 0; }

.screen-title.stage3 .box {
  transform: scale(1); }

.screen-loader {
  background-color: #3f3f40;
  display: flex;
  align-items: center;
  justify-content: center; }

.screen .text-background .content-game h2 {
  opacity: 1;
  transition: opacity 1s; }

.screen .text-background.step2 .content-game h2 {
  opacity: 0; }

.screen-client-title .text-background.step2 {
  transform: translate3d(0, 0, 0); }

.screen-my-preferences {
  position: absolute;
  top: 0;
  left: 0; }
  .screen-my-preferences .text-background {
    position: absolute;
    height: 900px;
    width: 1831px;
    background: url("/static/img/preferences_text-background.gif") no-repeat;
    background-size: 100%;
    transform: translate3d(668px, 0, 0);
    transition: transform 1s ease-in-out; }
    .screen-my-preferences .text-background .content-game {
      position: relative;
      left: 0;
      transform: translate3d(0, 0, 0);
      transition: transform 1s ease-in-out; }
      .screen-my-preferences .text-background .content-game .instruction {
        opacity: 0;
        width: 280px;
        padding: 12px 30px;
        margin: 0 0 10px 50px;
        position: relative;
        z-index: 10;
        transition: opacity 0.4s ease-in-out 1s; }
        .screen-my-preferences .text-background .content-game .instruction.visible {
          opacity: 1; }
        .screen-my-preferences .text-background .content-game .instruction p {
          color: #3aabb4;
          font-size: 32px;
          margin: 0;
          line-height: 30px; }
        .screen-my-preferences .text-background .content-game .instruction:after {
          content: url("/static/img/instruction-arrow_right.png");
          position: absolute;
          top: 20px;
          transform: translate3d(0, 0, 0);
          left: 50px;
          z-index: -1;
          transition: transform 1s;
          transition-delay: 1.3s; }
        .screen-my-preferences .text-background .content-game .instruction.visible:after {
          transform: translate3d(230px, 0, 0); }
      .screen-my-preferences .text-background .content-game .button {
        transition: transform 0.25s ease-in-out 0.75s; }
      .screen-my-preferences .text-background .content-game .list li {
        padding: 22px;
        margin-bottom: 30px;
        font-family: 'Work Sans', sans-serif;
        position: relative;
        right: 0; }
  .screen-my-preferences .text-background.step2 {
    transform: translate3d(-640px, 0, 0); }
    .screen-my-preferences .text-background.step2 .content-game {
      transform: translate3d(600px, 0, 0); }
      .screen-my-preferences .text-background.step2 .content-game h2 {
        opacity: 0; }
      .screen-my-preferences .text-background.step2 .content-game .button {
        transform: scaleX(-1); }
  .screen-my-preferences .content-game-right {
    opacity: 1;
    transition: opacity .5s; }
    .screen-my-preferences .content-game-right.feedback {
      opacity: 0; }
  .screen-my-preferences .stack-container {
    position: relative;
    height: 105px;
    display: flex;
    justify-content: space-around; }
    .screen-my-preferences .stack-container .stack-item {
      z-index: 5;
      height: 82px;
      width: 82px;
      border-radius: 82px;
      font-size: 100px;
      line-height: 75px;
      cursor: grab; }
  .screen-my-preferences .interact-zone {
    display: flex;
    margin-top: 40px; }
    .screen-my-preferences .interact-zone .interact-left #sortable .number-item {
      color: #262626;
      background-color: #fdfdfe;
      height: 82px;
      width: 82px;
      border-radius: 82px;
      font-size: 70px;
      cursor: grab; }
    .screen-my-preferences .interact-zone .interact-left #sortable .text-drop-custom {
      color: #ffffff;
      background: #ff9a31;
      font-weight: 600; }
    .screen-my-preferences .interact-zone .interact-right {
      flex-grow: 1;
      margin-left: 30px; }
      .screen-my-preferences .interact-zone .interact-right .list-item {
        height: 82px;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center; }

.screen-how-to-react {
  position: absolute;
  top: 0;
  left: 0; }
  .screen-how-to-react .text-background {
    position: absolute;
    height: 900px;
    width: 1831px;
    top: 0;
    left: 0;
    transform: translate3d(720px, 0, 0);
    background: url("/static/img/how-t-react_text-background.png") no-repeat;
    background-size: 100%;
    transition: transform 1s ease-in-out; }
    .screen-how-to-react .text-background .content-game {
      position: relative;
      left: 0;
      transform: translate3d(0, 0, 0);
      transition: transform 1s ease-in-out; }
      .screen-how-to-react .text-background .content-game .content-game-left {
        top: 130px; }
      .screen-how-to-react .text-background .content-game .instruction {
        opacity: 0;
        width: 280px;
        padding: 12px 30px;
        margin: 42px 0 10px 50px;
        position: relative;
        z-index: 10;
        transition: opacity 0.4s ease-in-out 1s; }
        .screen-how-to-react .text-background .content-game .instruction.visible {
          opacity: 1; }
        .screen-how-to-react .text-background .content-game .instruction p {
          font-size: 32px;
          margin: 0;
          line-height: 30px; }
        .screen-how-to-react .text-background .content-game .instruction:after {
          content: url("/static/img/instruction-arrow_right.png");
          position: absolute;
          top: 20px;
          left: 50px;
          z-index: -1;
          transform: translate3d(0, 0, 0);
          transition: transform 1s;
          transition-delay: 1.3s; }
        .screen-how-to-react .text-background .content-game .instruction.visible:after {
          transform: translate3d(230px, 0, 0); }
      .screen-how-to-react .text-background .content-game .button {
        transition: transform 0.25s ease-in-out 0.75s; }
      .screen-how-to-react .text-background .content-game .list-quizz li {
        cursor: pointer; }
  .screen-how-to-react .text-background.step2 {
    transform: translate3d(-640px, 0, 0); }
    .screen-how-to-react .text-background.step2 .content-game {
      transform: translate3d(550px, 0, 0); }
      .screen-how-to-react .text-background.step2 .content-game .button {
        transform: scaleX(-1); }

.screen-judgement {
  position: absolute;
  top: 0;
  left: 0; }
  .screen-judgement .text-background {
    position: absolute;
    height: 900px;
    width: 1831px;
    top: 0;
    left: 0;
    transform: translate3d(720px, 0, 0);
    background: url("/static/img/judgement_text-background.png") no-repeat;
    background-size: 100%;
    transition: transform 1s ease-in-out; }
    .screen-judgement .text-background .content-game {
      position: relative;
      transform: translate3d(0, 0, 0);
      transition: transform 1s ease-in-out; }
      .screen-judgement .text-background .content-game .content-game-left .instruction {
        opacity: 0;
        position: relative;
        z-index: 10;
        transition: opacity 0.4s ease-in-out 1s; }
        .screen-judgement .text-background .content-game .content-game-left .instruction.visible {
          opacity: 1; }
        .screen-judgement .text-background .content-game .content-game-left .instruction:after {
          content: url("/static/img/instruction-arrow_right.png");
          position: absolute;
          top: 20px;
          left: 50px;
          z-index: -1;
          transform: translate3d(0, 0, 0);
          transition: transform 1s;
          transition-delay: 1.3s; }
        .screen-judgement .text-background .content-game .content-game-left .instruction.visible:after {
          transform: translate3d(230px, 0, 0); }
      .screen-judgement .text-background .content-game .content-game-left .button {
        transition: transform 0.25s ease-in-out 0.75s; }
      .screen-judgement .text-background .content-game .content-game-right {
        perspective: 700px;
        position: absolute;
        top: 0;
        right: 0;
        transform: translate3d(180px, 0, 0);
        transition: transform 1s ease-in-out; }
        .screen-judgement .text-background .content-game .content-game-right .button a {
          background-size: 100%;
          background-repeat: no-repeat;
          background-position: center;
          display: block;
          width: 100%;
          height: 100%; }
        .screen-judgement .text-background .content-game .content-game-right .button .heart {
          background-image: url("../img/button_heart.png"); }
          .screen-judgement .text-background .content-game .content-game-right .button .heart.purple {
            background-image: url("../img/button_heart_purple.png"); }
        .screen-judgement .text-background .content-game .content-game-right .button .like {
          background-image: url("../img/button_like.png"); }
          .screen-judgement .text-background .content-game .content-game-right .button .like.purple {
            background-image: url("../img/button_like_purple.png"); }
        .screen-judgement .text-background .content-game .content-game-right .button .dislike {
          background-image: url("../img/button_dislike.png"); }
          .screen-judgement .text-background .content-game .content-game-right .button .dislike.purple {
            background-image: url("../img/button_dislike_purple.png"); }
        .screen-judgement .text-background .content-game .content-game-right .button .trash {
          background-image: url("../img/button_trash.png"); }
          .screen-judgement .text-background .content-game .content-game-right .button .trash.purple {
            background-image: url("../img/button_trash_purple.png"); }
        .screen-judgement .text-background .content-game .content-game-right .button .info-white {
          background: #ffffff;
          color: #ff9a31;
          width: 140px;
          padding: 10px;
          border-radius: 20px;
          font-family: 'Work Sans', sans-serif;
          margin-top: 10px;
          font-size: 19px;
          font-weight: 600;
          margin-left: -20px; }
      .screen-judgement .text-background .content-game .list-quizz li {
        cursor: pointer; }
  .screen-judgement .text-background.step2 {
    transform: translate3d(-1024px, 0, 0); }
    .screen-judgement .text-background.step2 .content-game {
      transform: translate3d(900px, 0, 0); }
      .screen-judgement .text-background.step2 .content-game .content-game-left .button {
        transform: scaleX(-1); }
      .screen-judgement .text-background.step2 .content-game .content-game-right {
        transform: translate3d(-80px, 0, 0); }

.screen-feedback {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.4s ease-in-out;
  z-index: 15; }
  .screen-feedback .text-background {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate3d(1620px, 0, 0);
    transition: transform 0.4s ease-in-out 0.2s; }
    .screen-feedback .text-background .text-title {
      opacity: 1;
      transition: opacity 0.4s ease-in-out 0.2s; }
  .screen-feedback .definition-section {
    opacity: 1;
    position: absolute;
    left: 800px;
    top: 0;
    transform: translate3d(0, -900px, 0);
    width: 900px;
    transition: transform 0.4s ease-in-out 0.4s; }
    .screen-feedback .definition-section #definition-title {
      font-size: 40px;
      margin-bottom: 20px; }
  .screen-feedback .best-answer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url("/static/img/best-answer-bg.png");
    padding: 30px 30px 15px 30px;
    transform: translate3d(0, 300px, 0);
    transition: transform 0.4s ease-in-out 0.4s; }
    .screen-feedback .best-answer h1 {
      font-size: 42px;
      text-align: center; }
    .screen-feedback .best-answer p {
      margin: .5em;
      font-family: 'Kalam', cursive;
      color: #ffffff;
      font-weight: 400;
      font-size: 32px;
      text-align: center;
      line-height: 36px; }
  .screen-feedback.step2 {
    top: 0;
    transform: translate3d(0, 0, 0); }
    .screen-feedback.step2 .text-background {
      transform: translate3d(1120px, 0, 0); }
  .screen-feedback.step-definition .definition-section {
    transform: translate3d(0, 150px, 0); }
  .screen-feedback.step-definition .text-background {
    transform: translate3d(0, 0, 0); }
    .screen-feedback.step-definition .text-background .text-title {
      opacity: 0; }
  .screen-feedback.step-definition.show-best-answer .best-answer {
    transform: translate3d(0, 0, 0); }
  .screen-feedback.step-definition.show-best-answer .definition-section {
    transform: translate3d(0, 50px, 0); }
    .screen-feedback.step-definition.show-best-answer .definition-section .button-feedback {
      margin-top: 25px; }
  .screen-feedback.step-outro {
    transform: translate3d(0, 0, 0); }
    .screen-feedback.step-outro .text-background {
      display: none; }

.vivi-container {
  position: absolute;
  width: 1600px;
  height: 900px;
  top: 0;
  left: 0;
  pointer-events: none; }
  .vivi-container canvas {
    position: relative;
    z-index: 300;
    pointer-events: none; }
  .vivi-container .speech-bubble {
    opacity: 0;
    position: absolute;
    display: flex;
    width: 726px;
    height: 365px;
    top: 100px;
    right: 100px;
    padding: 40px;
    align-items: center;
    justify-content: center;
    background: url("/static/img/bulle.png") no-repeat;
    background-size: contain;
    transition: opacity .5s ease-out; }
    .vivi-container .speech-bubble.speaking {
      opacity: 1; }
    .vivi-container .speech-bubble p {
      color: black;
      font-size: 2.8em; }

.test {
  color: black; }
  .test .stack-container {
    position: relative;
    width: 300px;
    height: 100px;
    font-size: 2em; }
    .test .stack-container .stack-item {
      color: black;
      cursor: grab;
      width: 300px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0; }
  .test .drop {
    width: 300px;
    height: 100px; }

.identification {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  font-family: 'Work Sans', sans-serif; }

.bubble-save .explanation {
  text-align: center; }
  .bubble-save .explanation p {
    font-family: 'Kalam', cursive;
    line-height: 1em;
    margin-top: 100px; }

.bubble-connexion {
  width: 1000px;
  height: 410px;
  background: url("/static/img/bubble-connexion.png") no-repeat center;
  background-size: 100%;
  margin: auto; }
  .bubble-connexion .bubble-block {
    width: 800px;
    height: 340px;
    margin: auto auto 80px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    .bubble-connexion .bubble-block label {
      font-family: 'Kalam', cursive; }
  .bubble-connexion a {
    font-family: 'Kalam', cursive;
    font-weight: 600;
    color: #ffffff;
    font-size: 44px; }
    .bubble-connexion a:hover {
      color: #673a96; }
  .bubble-connexion .button-submit {
    width: 160px;
    height: 160px;
    background: url("/static/img/button_validation.png") no-repeat center;
    background-size: 100%;
    border: none;
    outline: none !important;
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-iteration-count: 1; }
    .bubble-connexion .button-submit:hover {
      animation-name: rubberBand; }
    .bubble-connexion .button-submit:focus {
      box-shadow: none; }
    .bubble-connexion .button-submit:focus {
      outline: none !important;
      box-shadow: 0 0 10px #673a96; }

/* ----------- OUTRO ------------ */
.outro-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s;
  z-index: 350; }
  .outro-container .button-outro {
    position: absolute;
    top: 50px;
    right: 50px;
    pointer-events: auto; }
    .outro-container .button-outro .button-results {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 500px;
      height: 250px;
      background: url("/static/img/bulle-bleu.png") no-repeat center;
      font-family: 'Work Sans', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      color: #ffffff;
      text-decoration: none;
      font-size: 48px;
      padding-bottom: 20px; }
  .outro-container .content {
    width: 50%;
    margin: 100px auto; }
  .outro-container .outro-footer {
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    background: url("/static/img/bg-footer-outro.png") no-repeat center;
    background-size: 100%; }
    .outro-container .outro-footer p {
      padding-top: 10px;
      line-height: 110px; }
  .outro-container.outro-active {
    height: 100%;
    opacity: 1; }