@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_game.jpg);
	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:17px;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% 25%; 
	animation: animatedBackground 44s linear infinite alternate;
	}

@keyframes animatedBackground {
  0% {
    background-position: 50% 25%;
  }
  25% {
    background-position: 20% 25%;
  }
  50% {
    background-position: 10% 65%;
  }	
  70% {
    background-position: 40% 55%;
  }
  80% {
    background-position: 80% 90%;
  }		
  100% {
    background-position: 60% 100%;
  }	
}

.logo_title {}
.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: 45px;margin-top:-15px;vertical-align: middle;}
.options-line {}
.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,#map3msg,#map4msg{opacity:0;display:none;position: absolute;
  height: 720px;
  width: 1280px;
  margin: auto auto;
  overflow: hidden;
  background-image: url(../img/fd_page.png);
  background-repeat: no-repeat;	
 }
#map3msg {z-index:999;  background-image: url(../img/fd_page_eth.png);}
#map4msg {z-index:999;  background-image: url(../img/fd_page_e.png);}

.intro-content,.map3-content {display:block;padding:120px 160px;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;}

	
#exploration_container {background: rgba(0,0,0,0.44);padding: 7px;border-radius: 10px;min-width:145px;}	
#map_container {height: 245px;margin-bottom: 13px;margin-top: 22px;padding-top:9px;background: rgba(0,0,0,0.5);border-radius:10px;opacity:0;}
#objets_container {display:inline-flex;}
#option-menu {margin-left: 48px; margin-top: 11px;width: 70px; display: block;}
#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;}
.exploration, .volonte {
  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);
}
.exploration,.volonte {margin-bottom:6px;}

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

.exploration-striped .exploration-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); 
}
	
.volonte-striped .volonte-bar { 	
  background-color: #BF9B30; 
  width: 0%; 
  background-image: linear-gradient(
        45deg, rgb(205,170,65) 25%, 
        transparent 25%, transparent 50%, 
        rgb(205,170,65) 50%, rgb(205,170,65) 75%,
        transparent 75%, transparent); 
}

#map{width:138px; height:206px;background-size: cover;background-image: url(../img/map_item.png);
    background-repeat: no-repeat;margin-left: auto;margin-right: auto;display: block;border-radius: 5px;}
#map_position {width: 6px;height: 6px;background: #f00;z-index: 99;position: relative;left: 48%;top: 48%;border-radius: 6px; display: block;animation-duration: 3s;animation-name: map_indicator;animation-iteration-count: infinite; transition: none;
}
@keyframes map_indicator {0%   { background: #f00; } 50%  {background: #fff; }100% { background: #f00; }
}

#map_templeair, #map_templefeu, #map_templeeau, #map_templeterre 
{width: 4px;height: 4px;background: #ff0;z-index: 99;position: absolute;border-radius: 6px; display: none;}

#map_templeair {left: 136px;top: 148px;}
#map_templefeu {left: 110px;top: 294px;} 
#map_templeeau {left: 40px;top: 268px;}
#map_templeterre  {left: 91px;top: 117px;}

#map_ia1, #map_ia2, #map_ia3, #map_ia4,#map_if1, #map_if2, #map_if3, #map_if4,#map_ie1, #map_ie2, #map_ie3, #map_ie4,#map_it1, #map_it2, #map_it3, #map_it4 
{width: 2px;height: 2px;background: #fff;z-index: 99;position: relative;border-radius: 2px; display: none;animation-duration: 5s;animation-name: indices_indicator;animation-iteration-count: infinite; transition: none;}
@keyframes indices_indicator {0%   { background: #fff; } 50%  {background: #fff;opacity:0.1; }100% { background: #fff; }
}
#map_ia1 {left:107px;top:99px;} 
#map_ia2 {left:119px;top:74px;} 
#map_ia3 {left:111px;top:143px;}
#map_ia4 {left:116px;top:-2px;}
#map_if1 {left:61px;top:122px;}
#map_if2 {left:41px;top:148px;} 
#map_if3 {left:37px;top:122px;}
#map_if4 {left:126px;top:13px;}
#map_ie1 {left:27px;top:-8px;}
#map_ie2 {left:12px;top:82px;} 
#map_ie3 {left:17px;top:113px;} 
#map_ie4 {left:57px;top:165px;}
#map_it1 {left:42px;top:11px;} 
#map_it2 {left:23px;top:54px;} 
#map_it3 {left:97px;top:22px;}
#map_it4 {left:49px;top:57px;}

#objets_container img {width:67px;height:51px;padding:0;display:block;opacity:0.5;}
#obj12{margin-top: -33px;margin-left: -17px;}
#obj13{margin-left: -17px;}
#obj14{margin-left: -117px;margin-top:37px;position:relative;}
.obj_txt{font-size:1.2em;display:none;position: absolute;background: rgb(0,0,0,0.4);color: #fff;padding: 13px;border-radius: 7px;z-index: 9999;
	left: 200px;top: 520px;width: 800px;}
.elementfinal {width: 138px;display: block;opacity:0;margin-bottom: 55px; padding: 10px;margin-top: 10px;height:140px;background: rgba(0,0,0,0.5);border-radius: 10px;background-image: url(../img/ether_item.png);
    background-position: center;background-repeat: no-repeat;}
.elementfinal_container {display: inline-flex;height: 138px;width:138px;position: absolute;border: 0px;}
#elementfinal1 {background-image: url(../img/ether_1.png);background-position: center;background-repeat: no-repeat;opacity:0;}
#elementfinal2 {background-image: url(../img/ether_2.png);background-position: center;background-repeat: no-repeat;opacity:0;}
#elementfinal3 {background-image: url(../img/ether_3.png);background-position: center;background-repeat: no-repeat;opacity:0;}
#elementfinal4 {background-image: url(../img/ether_4.png);background-position: center;background-repeat: no-repeat;opacity:0;}

.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;}
#map_off,#map_on,#temple_on,#temple_off,#indices_on,#indices_off {display:block;right: 0;bottom: 0;margin: 0px 10px 25px;}
#map_off,#temple_on,#indices_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;}}	
	
#accesporte {background: rgba(0,0,0,0.77);position: absolute;width: 100%;height: 100%;z-index: 999;display:none;}


.puzzle {
	width: 90vw;
	max-width: 500px;
    margin: 0 auto;
	padding: 1.4em;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: .5em;
	position: relative;
	overflow: hidden;
}

.puzzle::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40%;
	transform: rotate(-15deg) scale(2);
}

.puzzle > * {
	z-index: 1;
}

.grid {
	grid-column-end: span 3;
	display: grid;
	grid-gap: 2px;
	grid-template-areas:
		"A B C"
		"D E F"
		"G H I";
	background: rgba(0,0,0,0.7);
	box-shadow:inset 0 0 4em 0.6em #000;
}

.tile,
.answer {
	height: 0;
	padding-bottom: 100%;
	grid-area: var(--area, auto);
	border: none;
	background-size: 300%;
	background: url(../img/puzzle_porte_est.jpg);
}

.tile {
	cursor: pointer;background-size: 300% !important;
}

.tile--empty {
	cursor: auto;
}

.tile:focus {
	outline: 3px solid hsl(360, 98%, 42%);z-index:99;
}

.tile[disabled] {
	cursor: not-allowed;
}

.answer {
	grid-column-end: span 1;
	width: 160px;
	justify-self: flex-end;
	background-size: 100%;
	box-shadow: inset 0px 0px 22px 0.6em #000;
    border-radius: 33px;
    display: block;
	margin : 0 -105%;
	position: relative;
}

.tile--empty { background: transparent; background-image: none !important; }
.tile--1 { background-position: top left; }
.tile--2 { background-position: top center; }
.tile--3 { background-position: top right; }
.tile--4 { background-position: center left; }
.tile--5 { background-position: center; }
.tile--6 { background-position: center right; }
.tile--7 { background-position: bottom left; }
.tile--8 { background-position: bottom center; }

@keyframes popIn {
	from {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transform: scale(0.6);
		transition: opacity, scale, 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}
}