@charset "utf-8";
/* CSS Document */

body {background: #111;margin:0;padding:33px 0 0 0; justify-content: center;height:100%;background-size: cover;background-image: url(../img/back.png);background-repeat: no-repeat;}
#content{width: 1280px; margin-left: auto; margin-right: auto;display:flex;height: 720px;
    box-shadow: 0 0 1px #fff, 0 0 22px #fff, 0 0 44px #fff, 0 0 88px #fff;}

#controls {display:none;position: absolute;margin-top:-33px;margin-left: 1093px;}
#control_up,#control_down,#control_left,#control_right{width:70px;height:54px;position:absolute;}
	#control_up {margin:-172px 0 0 37px;}
	#control_down {margin:-75px 0 0 37px;}
	#control_left {margin:-125px 0 0 -22px;}
	#control_right{margin:-125px 0 0 95px;}
#control_space{width:125px;height:55px;position:absolute;margin:-7px 0 0 10px;}
	
#footer {position: absolute;bottom: 0;left:0;right:0;color: #fff;font-size: 0.8em;padding:10px;margin-bottom: 11px;text-align: left;overflow-x: hidden;height: 60px;}
#footer a {color:#fff;}
#footer p {margin-left:44px;}

#content_footer img {width:31px;}
#content_footer {position:absolute;bottom:0;width:100%;}
.box{position: absolute;top: 50%;left: 1%;transform: translate(-50%, -50%);width: 33px;height: 33px;background: #111; box-sizing: border-box;overflow: hidden;box-shadow: 0 0px 10px rgb(255, 255, 255, .3);color: white;padding: 1px;border-radius:5px;}
.box:before{content: '';position:absolute;top:0;left:-100%;width:100%;height:100%;background: rgba(255,255,255,0.1);transition:0.5s;pointer-events: none;}
.box:hover{cursor:pointer;}
.box .content{position:absolute;text-align:center;border-radius:5px;}
.box span{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: block;box-sizing: border-box;}
.box span:nth-child(1){transform:rotate(0deg);}
.box span:nth-child(2){transform:rotate(90deg);}
.box span:nth-child(3){transform:rotate(180deg);}
.box span:nth-child(4){transform:rotate(270deg);}
.box span:before{content: '';position: absolute;width:100%;height: 2px;background: #fff;animation: animate 7s linear infinite;}
@keyframes animate {0% {transform:scaleX(0);transform-origin: left;}50%{transform:scaleX(1);transform-origin: left;}50.1%{transform:scaleX(1);transform-origin: right;}100%{transform:scaleX(0);transform-origin: right;}}
@keyframes animate2 {0%,50% {opacity:.07;}25%{opacity:.01;}51%{opacity:0;}}


#home {position:absolute;width:1280px;height:720px;background-image: url(../img/back_home_2.png); background-repeat: no-repeat; background-position: 50% 50%; animation: animatedBackground 44s linear infinite alternate;}

@keyframes animatedBackground {
  0% {
    background-position: 50% 50%;
  }
  25% {
    background-position: 10% 25%;
  }
  50% {
    background-position: 5% 75%;
  }	
  70% {
    background-position: 40% 45%;
  }
  80% {
    background-position: 80% 90%;
  }		
  100% {
    background-position: 50% 100%;
  }	
}

.logo_re {position: absolute; bottom: 0; margin-bottom: 22px; margin-left: auto; margin-right: auto;
    width: 58px; right: 0; left: 0;text-align: center;}

#game {opacity:0;display:inline-flex;max-height:720px;}
.progression {position:absolute;height:700px;padding:10px;z-index: 1;}	
#game {display:none;}
	
#options {display:none;position:absolute;width:500px;height:400px;background:rgb(0,0,0,0.77);border-radius:11px;z-index: 99999;
    color: #fff; margin-left: 370px; margin-top: 90px; padding: 60px 0 0 0;box-shadow: 0 0 5px #ffe, 0 0 25px #fff, 0 0 50px #fff, 0 0 50px #fff;}
#options span {width: 150px;text-align: right;display: inline-block;height: 55px;vertical-align: middle;}
.options-details{display: inline-block; width: 300px;height: 55px;}	
#aff_droite,#aff_gauche {width: 70px;float: left;}
#aff_droite:hover,#aff_gauche:hover {cursor:pointer;}
#aff_gauche {margin-left: 11px;}	
	
.keys{position: absolute;
    width: 50px;
    height: 50px;
    background: #ff0;
    z-index: 99;}
	
	
#credits:hover{cursor:pointer;}
#intro,#credits-view {opacity:0;display:none;position: absolute;
  height: 720px;
  width: 1280px;
  margin: auto auto;
  overflow: hidden;
  background-image: url(../img/book-intro.png);
  background-repeat: no-repeat;	
 }

.intro-content {display:block;padding:70px 180px;font-size:1em;width:1280px;}
.intro-title,.intro-texte {display:block;max-width: 400px;}
.intro-title{font-size: 1.3em;font-weight: 700;margin-bottom: 22px;}
.intro-texte{text-align: justify;font-size:1.1em;}

.btn_action {margin-top: 10%;display: block;position:absolute;width:100%;text-align:center;}
a.btn_new:hover {cursor:pointer;}
a.btn_new
{
  position: relative;
  display: inline-block;
  padding: 11px 22px;
  width:121px;
  margin: 0 20px;
  color: #fff;
  background:rgb(0,0,0,0.7);
  font-size: 0.88em;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  letter-spacing: 4px;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
a.btn_new:hover
{
  background: #fff;
  color: #333;
  box-shadow: 0 0 5px #fff,
        0 0 25px #fff,
        0 0 50px #fff,
        0 0 200px #fff;
}
a.btn_new span
{
  position: absolute;
  display: block;
}
a.btn_new span:nth-child(1)
{
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  animation: animate1 1s linear infinite;
}
@keyframes animate1
{
  0%
  {
    left: -100%;
  }
  50%, 100%
  {
    left: 100%;
  }
}
a.btn_new span:nth-child(2)
{
  top: -100px;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #fff);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
@keyframes animate2
{
  0%
  {
    top: -100%;
  }
  50%, 100%
  {
    top: 100%;
  }
}
a.btn_new span:nth-child(3)
{
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #fff);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;

}
@keyframes animate3
{
  0%
  {
    right: -100%;
  }
  50%, 100%
  {
    right: 100%;
  }
}
a.btn_new span:nth-child(4)
{
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #fff);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate4
{
  0%
  {
    bottom: -100%;
  }
  50%, 100%
  {
    bottom: 100%;
  }
}
	
.container {display:inline-flex;position:relative;overflow:hidden;}
	
	
.msg_help {display:none;font-size:1.3em;position: absolute;background: rgba(0,0,0,0.4);padding: 10px;top: 88%;width: 100%;margin-left: auto;text-align: center;color: #fff;}
#help_livre,#help_priere {color:#bbb;}
.msg_dialogue {display: none;font-size:1.3em;position: absolute;background: rgba(0,0,0,0.6);padding: 10px;top: 65%;width: 70%;text-align: center; color: #fff;height: auto;z-index: 5;left: 15%;border-radius: 20px;}

	
#sagesse_container {background: rgba(0,0,0,0.44);padding: 7px;border-radius: 10px;}	
#chakras_container {height: 395px;margin-bottom: 60px;margin-top: 22px;background: rgba(0,0,0,0.44);border-radius:10px;}
#objets_container {display:inline-flex;}
#option-menu {margin-left: auto; width: 70px; display: block;margin-right: auto;}
#option-menu:hover {cursor:pointer;}
	
.progression span {color:#fff;text-shadow: -2px -1px 4px #000; margin-left: 5px;margin-top: -1px;position: absolute;font-size: 0.85em;}
.sagesse, .perseverance, .concentration {
  height:13px;
  padding: 3px;
  margin-top:5px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.sagesse,.perseverance,.concentration {margin-bottom:6px;}

.sagesse-bar,.perseverance-bar,.concentration-bar {	
  height: 13px;
  background-color: #ee303c;  
  border-radius: 3px; 
  transition: 2.2s linear;  
  max-width:100%;
  transition-property: width, background-color;    
}

.sagesse-striped .sagesse-bar { 	
  background-color: #f1f1f1; 
  width: 0%; 
  background-image: linear-gradient(
        45deg, rgb(204,204,204) 25%, 
        transparent 45%, transparent 50%, 
        rgb(204,204,204) 50%, rgb(204,204,204) 75%,
        transparent 75%, transparent); 
}
	
.perseverance-striped .perseverance-bar { 	
  background-color: #81d052; 
  width: 0%; 
  background-image: linear-gradient(
        45deg, rgb(86,196,37) 25%, 
        transparent 25%, transparent 50%, 
        rgb(86,196,37) 50%, rgb(86,196,37) 75%,
        transparent 75%, transparent); 
}
	
.concentration-striped .concentration-bar { 	
  background-color: #FCBC51; 
  width: 0%; 
  background-image: linear-gradient(
        45deg, rgb(252,163,17) 25%, 
        transparent 25%, transparent 50%, 
        rgb(252,163,17) 50%, rgb(252,163,17) 75%,
        transparent 75%, transparent); 
}	

#chakras {z-index:2;}
#chakras-humain{position:absolute;left:15px;z-index:0;}	
#chakras1 {display:none;position: absolute;left: 0;margin: 326px 0px 0px 10px;cursor:pointer;}
#chakras2 {display:none;position: absolute;left: 0;margin: 274px 0px 0px 10px;cursor:pointer;}	
#chakras3 {display:none;position: absolute;left: 0;margin: 222px 0px 0px 10px;cursor:pointer;}	
#chakras4 {display:none;position: absolute;left: 0;margin: 170px 0px 0px 10px;cursor:pointer;}	
#chakras5 {display:none;position: absolute;left: 0;margin: 118px 0px 0px 10px;cursor:pointer;}	
#chakras6 {display:none;position: absolute;left: 0;margin: 66px 0px 0px 10px;cursor:pointer;}	
#chakras7 {display:none;position: absolute;left: 0;margin: 14px 0px 0px 10px;cursor:pointer;}	
	
#chakras1-h {display:none;position: absolute;left: 0;margin: 236px 0px 0px 61px;}
#chakras2-h {display:none;position: absolute;left: 0;margin: 194px 0px 0px 55px;}	
#chakras3-h {display:none;position: absolute;left: 0;margin: 164px 0px 0px 56px;}	
#chakras4-h {display:none;position: absolute;left: 0;margin: 113px 0px 0px 57px;}	
#chakras5-h {display:none;position: absolute;left: 0;margin: 64px 0px 0px 62px;}	
#chakras6-h {display:none;position: absolute;left: 0;margin: 42px 0px 0px 81px;}	
#chakras7-h {display:none;position: absolute;left: 0;margin: 18px 0px 0px 85px;}		
	
#objets_container img {width:67px;height:51px;padding:0;display:block;opacity:0.5;}
#obj12{margin-top: -22px;margin-left: -17px;}
#obj13{margin-left: -17px;}

.sound_btn:hover{cursor:pointer;}
#sound_on,#sound_off {display:block;right: 0;bottom: 0;margin: 0px 10px 25px;}
#sound_off {display:none;}
	
.tact_btn:hover{cursor:pointer;}
#tactile_off,#tactile_on {display:block;right: 0;bottom: 0;margin: 0px 10px 25px;}
#tactile_on {display:none;}

	
.btn_close_chakra {position:absolute;cursor:pointer;right:0;margin:20px 10px 0px 0px;}	

.hide {
  display: none;
}
	
.page_chakra { 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: auto auto;
  overflow: hidden;
}	

.animate_close {z-index:10; animation: animation_closebook 1s ease;}	
.animate_content { z-index:10; animation: animation_chakra 1s ease-in;}
.fadeIn {
  z-index: 10;
}

@-moz-keyframes animation_chakra {0% {transform: scale(0.001, 0.01);opacity: 0.2;}  44% {transform: scale(0.02, 0.5);opacity: 0.4;}	
  55% {transform: scale(0.09, 0.9);opacity: 0.7;} 100% {transform: scale(1, 1);opacity:1;}}	
@-webkit-keyframes animation_chakra {0% {transform: scale(0.001, 0.01);opacity: 0.2;}  44% {transform: scale(0.02, 0.5);opacity: 0.4;}	
  55% {transform: scale(0.09, 0.9);opacity: 0.7;} 100% {transform: scale(1, 1);opacity:1;}}
@-o-keyframes animation_chakra {0% {transform: scale(0.001, 0.01);opacity: 0.2;}  44% {transform: scale(0.02, 0.5);opacity: 0.4;}	
  55% {transform: scale(0.09, 0.9);opacity: 0.7;} 100% {transform: scale(1, 1);opacity:1;}}
@keyframes animation_chakra {0% {transform: scale(0.001, 0.01);opacity: 0.2;}  44% {transform: scale(0.02, 0.05);opacity: 0.4;}	
  55% {transform: scale(0.09, 0.9);opacity: 0.7;} 100% {transform: scale(1, 1);opacity:1;}}

	
@-moz-keyframes animation_closebook {0% {transform: scale(1, 1);opacity:1;}	 44% {transform: scale(0.09, 0.9);opacity: 0.7;}	
  55% {transform: scale(0.02, 0.5);opacity: 0.4;}	100% {transform: scale(0.001, 0.01); opacity: 0;display:none;}}		
@-webkit-keyframes animation_closebook {0% {transform: scale(1, 1);opacity:1;}	 44% {transform: scale(0.09, 0.9);opacity: 0.7;}	
  55% {transform: scale(0.02, 0.5);opacity: 0.4;}	100% {transform: scale(0.001, 0.01); opacity: 0;display:none;}}		
@-o-keyframes animation_closebook {0% {transform: scale(1, 1);opacity:1;}	 44% {transform: scale(0.09, 0.9);opacity: 0.7;}	
  55% {transform: scale(0.02, 0.5);opacity: 0.4;}	100% {transform: scale(0.001, 0.01); opacity: 0;display:none;}}	
@keyframes animation_closebook {0% {transform: scale(1, 1);opacity:1;}	 44% {transform: scale(0.09, 0.9);opacity: 0.7;}	
  55% {transform: scale(0.02, 0.05);opacity: 0.4;}	100% {transform: scale(0.001, 0.01); opacity: 0;display:none;}}	
	
	
 .let-it-snow { width: 100%;height: 100%; background: rgba(255,255,255,0.2);position:absolute;display:none;}	
 .let-it-snow2 { width: 100%;height: 100%; margin-left:233px;position:absolute;display:none;}