#logo{
  position:relative;
  width: 350px;
  height: 76px;
  top:22px;
  left:220px;
}

.hands{
  cursor:pointer;
}

img.character{
  margin-bottom:20px;
  padding-top:14px;
}

#clue{
  color:red;
  cursor:pointer;
}

#character_container{
  width: 652px;
  margin: auto;
  margin-top: 75px;
}

#hands{
  width: 652px;
  margin: auto;
  position: absolute;
  top: 168px;
  left: 60px;
}

.hands{
  margin-bottom:20px;
}

#mascotte{
  position:absolute;
  bottom:-20px;
  left:500px;
}

#pop{
  left:58px;
  bottom:100px;
  position:absolute;
}

  #pop > #content{
    position:absolute;
    margin-top:-61px;
    margin-left:25px;
    font-size:28px;
  }

#pictos{
 position:absolute;
 left:58px;
 bottom:-20px;
}

.picto{
  display:block;
  background-image:url('../ressource/img/general/sprite_picto.png');
  width:76px;
  height:81px;
  display:inline-block;
  margin-right:40px;
  cursor:pointer;
}

  #home{
    background-position:0px 0px;
  }
  #home:hover{
    background-position: 0px -80px;
    height: 77px;
  }

  #text_clue{
    background-position:-76px 0px;
  }
  #text_clue:hover{
    background-position: -76px -80px;
    height: 77px;
  }

  #replay{
    background-position:-152px 0px;
  }
  #replay:hover{
    background-position: -152px -80px;
    height: 77px;
  }
  #clue{
    background-position:-228px 0px;
  }
  #clue:hover{
    background-position: -228px -80px;
    height: 77px;
  }

.animated { 
  -webkit-transition: -webkit-transform 0.7s ease-in-out;
  -moz-transition: -webkit-transform 0.7s ease-in-out
  -ms-transition: -webkit-transform 0.7s ease-in-out;
  -o-transition: -webkit-transform 0.7s ease-in-out;
  transition: -webkit-transform 0.7s ease-in-out;
}

.bounce{
  -webkit-transform: translateY(120px);
}

.reviving{ 
  -webkit-transition: -webkit-transform 0.7s ease-in-out;
  -moz-transition: -webkit-transform 0.7s ease-in-out
  -ms-transition: -webkit-transform 0.7s ease-in-out;
  -o-transition: -webkit-transform 0.7s ease-in-out;
  transition: -webkit-transform 0.7s ease-in-out;
}

.bouncerevive{
  -webkit-transform: translateY(0px);
}



/*VIEWS*/
body{
  font-family:'Tahoma';
  color:#00858F;
  width:768px;
  height:1024px;
  background:url('../ressource/img/general/fond.png') no-repeat;
}

/* THEMES */
.theme{
  background:url('../ressource/img/theme/sprite_theme.png');
  cursor:pointer;
}
.theme:nth-child(1){
  width: 208px;
  height: 233px;
  background-position:0px 0px;
}
.theme:nth-child(1):hover{
  background-position: 0px -256px;
}
.theme:nth-child(2){
  width: 235px;
  height: 233px;
  margin-left: 48px;
  background-position: -208px 0px;
}
.theme:nth-child(2):hover{
  background-position: -208px -256px;
}
.theme:nth-child(3){
  width: 207px;
  height: 256px;
  background-position: -444px -20px;
}
.theme:nth-child(3):hover{
  background-position: -444px -271px;
}
.theme:nth-child(4){
  width: 221px;
  height: 233px;
  margin-left: 48px;
  background-position: -651px -50px;
}
.theme:nth-child(4):hover{
  background-position: -651px -300px;
}
.theme:nth-child(5){
  width: 206px;
  height: 240px;
  background-position: -873px -27px;
}
.theme:nth-child(5):hover{
  background-position: -873px -276px;
}
.theme:nth-child(6){
  margin-left: 48px;
  width: 207px;
  height: 250px;
  background-position: -1079px -13px;
}
.theme:nth-child(6):hover{
  background-position: -1079px -264px;
}


div.title{
  background-color:yellow;
  font-size:32px;
  width:492px;
  margin:auto;
  margin-top:50px;
  padding:15px;
  text-align:center;
  border-radius: 6px;
}

#container_theme{
  width:492px;
  margin:auto;
  margin-top:50px;
}

div.theme{
  width:246px;
  display:inline-block;
}

div.theme img{
  cursor:pointer;
}

/* LEVEL */
div#container_difficulties{
  margin-top: 100px;
}

div.difficulty{
  background:url('../ressource/img/general/sprite_level.png') no-repeat;
  width: 509px;
  height: 63px;
  display:block;
  margin: auto;
  margin-top: 50px;
  cursor:pointer;
}

#diff0{
  background-position: 0px 0px;
}
#diff0:hover{
  background-position: 0px -64px;
}

#diff1{
  background-position: -511px 0px;
}
#diff1:hover{
  background-position: -511px -64px;
}

#diff2{
  background-position: -1022px 0px;
}
#diff2:hover{
  background-position: -1022px -64px;
}

/*JEU*/
#conteneur_bottom{
  position: relative;
  margin-top: 225px;
}

div.charbox{
  width:163px;
  height:163px;
  margin-bottom: 24px;
  overflow:hidden;
  display:inline-block;
  vertical-align:top;
}

/*GAMEOVER*/
#return_h{
  display: block;
  background: url('../ressource/img/general/sprite_picto.png') no-repeat;
  width: 76px;
  height: 80px;
  cursor: pointer;
  background-position: -229px 0px;
  position: relative;
  margin: auto;
  margin-top: 85px;
}

#return_h:hover{
  background-position: -229px -80px;
  height: 82px;
  margin-top: 90px;
}

#cadre{
  width:476px;
  height:308px;
  background-color:white;
  opacity:0.8;
  border-radius:12px;
  position: relative;
  text-align: center;
  font-size: 34px;
  margin: auto;
  margin-top: -52px;
  padding-top: 46px;
  z-index: 20;
}

#cadre p{
  font-size:24px;
  font-weight: bold;
  line-height:0.5;
}

#cadre p:first-child{
  font-size: 28px;
  text-transform: uppercase;
  font-weight: bold;
}

#medal{
  position:relative;
  background-image:url('../ressource/img/general/medal.png');
  width:310px;
  height: 222px;
  margin:auto;
  margin-top:-185px;
  z-index:200;
}

#perso{
  position: relative;
  width: 260px;
  height: 340px;
  margin: auto;
  z-index: 30;
  margin-top: 75px;
}

#perso-win{

}