Hacked By AnonymousFox

/*************************************************************************/
/* GLOBAL */
/*************************************************************************/
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    box-sizing: border-box; 
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color: white;
    width:100%;
    /*height: 100vh;*/
    margin: 0;
    padding: 0;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px); 
	
	min-width: 480px;
	min-height: 600px;
}

body, input, select, textarea { 
  font-family: "Poppins"; 
    /*font-size:12px;*/
}

.main_container { padding: 28px; color: #F79428; }
.menu_burger { float: right; width: 52px; }
.menu_burger > div { height: 17px; border-bottom: 5px solid #F79428; }
.menu_mask { display:none; position: fixed; z-index: 19; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
.menu_content { position: fixed; z-index: 20; left: 100%; height: 100%; top: 0; background-color: white; padding: 20px;}
.menu_content > div { font-family: "Poppins"; font-size: 33px; text-align: left; margin: 10px; padding: 10px; }
.menu_content  a { color: #F79428; text-decoration: none; }
.menu_content > div.menu_link { text-align: center; }
.menu_link  a { display: block; color: #F79428; font-family: 'OpenSans'; font-size: 25px; text-decoration: underline; margin-top: 40px; }
.menu_link img { margin-top: 30px; }

h1 { margin: 0; padding: 0; }

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins.eot"); /* IE9 Compat Modes */
  src: url("fonts/Poppins.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/Poppins.otf") format("opentype"), /* Open Type Font */
    url("fonts/Poppins.svg") format("svg"), /* Legacy iOS */
    url("fonts/Poppins.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/Poppins.woff") format("woff"), /* Modern Browsers */
    url("fonts/Poppins.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "OpenSans";
  src: url("fonts/OpenSans.eot"); /* IE9 Compat Modes */
  src: url("fonts/OpenSans.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/OpenSans.otf") format("opentype"), /* Open Type Font */
    url("fonts/OpenSans.svg") format("svg"), /* Legacy iOS */
    url("fonts/OpenSans.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/OpenSans.woff") format("woff"), /* Modern Browsers */
    url("fonts/OpenSans.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}


/*************************************************************************/
/* TITLE SCREEN */
/*************************************************************************/
.intro_container { font-family: "Poppins"; color: #F79428; text-align: center; margin: auto; display:none; 
  margin-top: 25%; }
.intro_welcome { font-size: 58px; font-weight: bold; }
.intro_logo { margin-top: 60px; }
.logo_icon { max-width: 500px; }
.intro_text { font-size: 42px; height: 80px; }
.start_btn { display: inline-block; margin-top: 80px; padding: 15px 30px; border-radius: 8px; 
    background-color: #F79428; color:white; 
    text-decoration: none; font-size: 33px; font-weight: bold;
    
	line-height: 38px;
}

.legalscreen_container { display: none; }
.legalscreen_container h1 { font-family: "Poppins"; font-size: 42px; font-weight: normal; text-align: left; text-transform: uppercase; }
.legalscreen_container p { font-family: "OpenSans"; font-size: 38px; color: #404040; text-align: justify; }

/*************************************************************************/
/* AVATAR SELECT */
/*************************************************************************/
.avatarscreen_container { font-family: "Poppins"; text-align: center; margin: auto; color: #F79428; display: flex; flex-direction: column; position: absolute; width: 100%; height: 100%; justify-content: center; }
.avatarscreen_container .start_btn { display: none; }
.avatar_container { margin-top: 40px; }
.avatar { display: inline-block;  margin: 20px; width: 38%; cursor: pointer; opacity: 0.5; max-width: 200px; }
.avatar.selected { opacity: 1; }
.avatarscreen_container .start_btn { margin: 40px auto; }
.avatar_btn { height: 148px; flex-shrink: 0;}
.input_name { text-align: right; margin: 0; padding: 5px; border: 0; outline: 0; width: 100%; font-size: 33px; height: 100px; }


/*************************************************************************/
/* PROFILE */
/*************************************************************************/
.profilescreen_container { margin: auto; text-align: left; }
.profilescreen_container h1 { font-family: "Poppins"; font-size: 42px; font-weight: normal; }
.profilescreen_container h2 { font-family: "Poppins"; font-size: 37px; font-weight: normal; margin-bottom: 5px; }
.profile_avatar { text-align: center; margin: 30px 0 40px; }
.profile_avatar img { height: 200px; }

.player_name { color: #404040; font-size: 33px; margin-bottom: 60px; border: 0; outline: 0;}

.gauge_name { color: #1a1a1a; font-family: "OpenSans"; font-size: 28px; margin-top: 30px;  }

.gauge { display: none; }
.gauge_elem { margin: 15px 0 25px 48px;  }
.gauge_bar_container { 
  display: inline-block; line-height: 0; padding: 4px; width: 210px; vertical-align: middle;
  border: 7px solid #F79428; border-radius: 24px; margin-right: 40px;  }
.gauge_bar {
  display: inline-block;
  border-top-left-radius: 12px; border-bottom-left-radius: 12px; width: 50%; height: 20px;
  background-color: #F79428;
}

.gauge_value  { text-align: right; display: inline-block; vertical-align: middle; font-size: 28px; font-style: italic; margin-right: 3px; }
.gauge_max_value { display: inline-block; vertical-align: middle; font-size: 28px; font-weight: bold; font-style: italic; }

.gauge_des { text-align: left; }
.gauge_arrow { display: inline-block; vertical-align: top; }
.gauge_arrow img { margin-top: 5px; }
.gauge_description { color: #808080; font-family: "OpenSans"; font-size: 25px; display: inline-block; 
  vertical-align: top; width: 85%; margin-left: 15px; margin-bottom: 40px; text-align: justify; }

/*************************************************************************/
/* MISSION SELECT */
/*************************************************************************/
.missionscreen_container { margin: auto; text-align: center; display: none; }
.missionscreen_container h1 { font-family: "Poppins"; font-size: 42px; font-weight: normal; text-align: left; }
.mission_container { margin-top: 20px; }
.mission { display: none;  cursor: pointer; opacity: 0.5; overflow: hidden; clear: both; float: left;
    width: 226px; height: 226px; border-radius: 113px; margin: 20px; border: 7px solid #F79428;
    background-position: 50% 50%; background-size: cover; overflow: visible;
}
.mission.active { opacity: 1; }
.mission.right { float: right; }
#mission_2 { border-color: #3f7bc3; }
#mission_3 { border-color: #70b7Ed; }
.mission span { position: relative; left: 250px; top: 30px; font-size: 34px; color: #1a1a1a; }
.mission.right span { left: -250px; }
.mission .soon { font-size: 24px; font-style: italic;}

/*************************************************************************/
/* GAME */
/*************************************************************************/
.game_container { display: none; 
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 28px; 
}
.game_container h1 { font-family: "Poppins"; font-size: 33px; font-weight: normal; text-align: left; text-transform: uppercase; }

.message_container { overflow: auto; font-family: "OpenSans"; font-size: 38px; clear: both; margin-top: 40px; }
.message { float: left; max-width: 80%; margin-bottom: 10px; padding: 10px 20px; line-height: 38px;
  background-color: #e6e6e6; color: black; border-radius: 15px; margin-left: 50px; border-top-left-radius: 0; }
.message_player { float: right; background-color: #F79428; color: white; margin: 10px 0 20px; 
  border-bottom-right-radius: 0; border-top-left-radius: 15px; clear: both;
 }
.message_container > img, .answer_container > img { float: left; clear: both; position: relative; top: 3px; }

.clear { clear: both; }
.choose_answer { margin: 20px 0; font-size: 38px; }

.answer_container { font-size: 38px; margin: 10px 0 20px; }
.answer { max-width: 80%; display: none; float: right; cursor: pointer; border-radius: 15px; padding: 10px 20px; margin-bottom: 10px; 
  color: white; background-color: #F79428; border-bottom-right-radius: 0; line-height: 38px; }

.message > span, .message > img { display: inline-block; margin-right: 5px; vertical-align: middle; }
.answer > span, .answer > img { display: inline-block; margin-right: 5px; vertical-align: middle; }
.answer.disabled { opacity: 0.5; cursor: default;}
img.disabled { opacity: 0.5; }
.message_top { margin-left: 83px; border-bottom-left-radius: 0; border-top-left-radius: 15px; clear: both; }
.message_tmp { display: block;  }

input[type=submit]
{
  font-family: "OpenSans"; outline: 0; border: 0;
  font-size: 38px; line-height: 38px; padding: 10px 20px; clear: both; margin-top: 40px;
  float: right; background-color: #F79428; color: white; margin: 10px 0 20px; max-width: 80%;
  border-radius: 15px; border-bottom-right-radius: 0; clear: both; 
}
.end_images { text-align: center; width: 80%; }
.end_images img { display: inline-block; vertical-align: top; margin: 60px 5px; width: 30%; }
.end_images img.img_bricoleur { width: 26%; }
.end_images img.img_mediateur { position: relative; width: 50%; margin-top: 0; }
.end_images img.img_hesitation { width: 90%; }
.end_images img.img_foule { width: 100%; margin-bottom: 0; }
.end_images img.img_parchemin { margin: 0; margin-bottom: 0; width: 100%; }
.end_images img.img_rocher { width: 100%; margin-bottom: 20px; }
.end_images img.img_end { width: 100%; margin-bottom: 20px; }

.result_container { text-align: center; }
.result_btn { margin: 20px auto; display: inline-block;  }


@keyframes blink {
  /**
   * At the start of the animation the dot
   * has an opacity of .2
   */
  0% {
    opacity: .2;
  }
  /**
   * At 20% the dot is fully visible and
   * then fades out slowly
   */
  20% {
    opacity: 1;
  }
  /**
   * Until it reaches an opacity of .2 and
   * the animation can start again
   */
  100% {
    opacity: .2;
  }
}

#message_tmp span {
  /**
   * Use the blink animation, which is defined above
   */
  animation-name: blink;
  /**
   * The animation should take 1.4 seconds
   */
  animation-duration: 1.4s;
  /**
   * It will repeat itself forever
   */
  animation-iteration-count: infinite;
  /**
   * This makes sure that the starting style (opacity: .2)
   * of the animation is applied before the animation starts.
   * Otherwise we would see a short flash or would have
   * to set the default styling of the dots to the same
   * as the animation. Same applies for the ending styles.
   */
  animation-fill-mode: both;
}

#message_tmp span:nth-child(2) {
  /**
   * Starts the animation of the third dot
   * with a delay of .2s, otherwise all dots
   * would animate at the same time
   */
  animation-delay: .2s;
}

#message_tmp span:nth-child(3) {
  /**
   * Starts the animation of the third dot
   * with a delay of .4s, otherwise all dots
   * would animate at the same time
   */
  animation-delay: .4s;
}
/*************************************************************************/
/* RESULTS */
/*************************************************************************/
.score_container { display: none; clear: both; margin-top: 40px;}
.score_container h2 { font-family: "Poppins"; font-size: 37px; font-weight: normal; margin-bottom: 5px; }

.result_img, .result_feedback, .result_message { text-align: center; }
.result_feedback { font-family: "Poppins"; font-size: 42px; color: #191919; margin-top: 40px; }
.result_message { font-family: "OpenSans"; font-size: 33px; color: #808080; margin: 40px 0; }


.score > span { display: inline-block; margin-right: 3px; }
.gauge_gain { width: 30px; text-align: center; position: relative; top: -25px; left: 136px; font-size: 25px; }
.gauge_gain.positive { color: green; }
.gauge_gain.negative { color: red; }

.end_mission { display:none; text-align: center; }