div.table_cell {
	display:table-cell;
	text-align:center;
	vertical-align:bottom;
}


/*
	background-repeat:no-repeat;
	background-position: center bottom;
	-webkit-background-size:contain;
	-moz-background-size:contain;
	-o-background-size:contain;
	background-size:contain;
	*/


#PuzzleMainConteiner {
	background-color:#FECB00;
	background-image:url("../images/fond1.png");
	padding:10px;
	padding-bottom:20px;
	border-radius:12px;
	font-family: 'lobster'!important;
	letter-spacing:2px;
	text-align:center;
	margin-bottom:15px;
	margin-left:auto;margin-right:auto;
	max-width:500px;
}


#PuzzleMainConteiner, #PuzzleMainConteiner * {
	font-family: 'lobster'!important;
	letter-spacing:2px;
}

body.en #PuzzleMainConteiner {
	margin-top:-15px;
}

#PuzzleConteiner {
	margin:0px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	padding:0px;
	border:8px solid #FFFFFF;
	background:#FFFFFF;
	display:none;
  box-sizing:content-box;
  -moz-box-sizing:content-box; /* Firefox */
  -webkit-box-sizing:content-box; /* Safari */

}
/* iphone 5s */
@media only screen and (max-width: 360px), only screen and (max-device-width: 360px){
	#PuzzleConteiner {
		border-bottom:5px solid #FFFFFF;
	}
}
#PuzzleConteiner * {
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
}


/* ------------------------------------------------------------------------------------------- */
/* ------------------------------------------ loading ---------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
#PuzzleLoading {
    background-image: url("../images/loader_124x124.gif");
    background-repeat: no-repeat;
    background-position: center center;
		min-height:250px;
		min-width:124px;
		display:block;
		margin:50px;
}


/* ----------------------------------------------------------------------------------- */
/* -------------------------------- titre en haut du jeu ----------------------------- */
/* ----------------------------------------------------------------------------------- */
#PuzzleMainConteiner h3 {
	color:#FFFFFF;
	font-size:32px;
	line-height:30px;
	text-align:center;
	margin:0px;
	padding:0px;padding-top:10px;padding-bottom:16px;
	 -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.27) ;
	display:block;
	text-rendering: optimizeSpeed;
	background-color:transparent!important;
	cursor:default;
}
body.en #PuzzleMainConteiner h3 {
	font-size:40px;padding-top:5px;
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px){
	#PuzzleMainConteiner h3 {
		font-size:26px;
		line-height:26px;
		letter-spacing:1px;
	}
}
/* iphone 5s */
@media only screen and (max-width: 360px), only screen and (max-device-width: 360px){
	#PuzzleMainConteiner h3 {
		font-size:24px;
		line-height:24px;
		letter-spacing:1px;
	}
}



/* ----------------------------------------------------------------------------------- */
/* -------------------------- entete avec lapin et infobulles ------------------------ */
/* ----------------------------------------------------------------------------------- */
#PuzzleHeader {
	display:none;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	width:98%;
	height:auto;
	position:relative;
}

#PuzzleHeader img {
	display:block;
	border:none;
	margin:0px;
	padding:0px;
	text-align:center;
}



/* ----------------------------------------------------------------------------------- */
/* ------------------------------- texte des infobulles ------------------------------ */
/* ----------------------------------------------------------------------------------- */
.label {
	color:#EE1684;
	font-size:18px;
	line-height:24px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.26) ;
	text-rendering: optimizeSpeed;
	cursor:default;
}

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px){
	.label {
		font-size:16px;
		line-height:18px;
	}
}

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px){
	.label {
		font-size:13px;
		line-height:15px;
		letter-spacing:1px;
	}
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px){
	.label {
		font-size:11px;
		line-height:14px;
		letter-spacing:0px;
	}
}
@media only screen and (max-width: 420px), only screen and (max-device-width: 420px){
	.label {
		font-size:10px;
		line-height:11px;
		letter-spacing:0px;
	}
}
/* iphone 5s */
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px){
	.label {
		font-size:12px;
		line-height:14px;
		letter-spacing:0px;
	}
}


/* ----------------------------------------------------------------------------------- */
/* ----------------------- conteiner texte des infobulles  --------------------------- */
/* ----------------------------------------------------------------------------------- */
div.label_conteiner {
	position:absolute;
	text-align:center;
	box-sizing: border-box;
	display:block;
	//background: rgba(255,0,0,0.2);
}
div.label_conteiner div {
	text-align:center;
	padding:0px;margin:0px;
	display:table;
	width:100%;
	height:100%;
	vertical-align:middle;
}
div.label_conteiner p {
	text-align:center;
	padding:0px;margin:0px;
	vertical-align:middle;
	display:table-cell;
	cursor:default;
}


/* ----------------------------------------------------------------------------------- */
/* ------------------------------------- lapin --------------------------------------- */
/* ----------------------------------------------------------------------------------- */
#bunny_conteiner {
	width:24%;
}
#bunny_conteiner img {
	width:100%;
	height:auto;
	max-width:125px;
	margin-bottom:-0.5px;
}



/* ----------------------------------------------------------------------------------- */
/* ------------------------ infobulle à gauche du lapin ------------------------------ */
/* ----------------------------------------------------------------------------------- */
div#infobulle_conteiner {
	position:relative;
	vertical-align:middle;
	//background: rgba(0,0,255,0.2);
	-webkit-transform:translateZ(0); /* IPAD 1 relative > absolute bug fix */
	width:47%;
	   box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
#infobulle_conteiner img {
	width:100%;
	height:auto;
	max-width:251px;
	display:block;
}
#infobulle_conteiner div.label_conteiner {
	top:0px;
	left:0%;
	padding:1.5%;
	padding-top:1.5%;
	padding-right:12%;
	padding-bottom:4%;
}




/* ----------------------------------------------------------------------------------- */
/* ------------------------ infobulle à droite du lapin ------------------------------ */
/* ----------------------------------------------------------------------------------- */
#level_conteiner {
	position:relative;
	-webkit-transform:translateZ(0); /* IPAD 1 relative > absolute bug fix */
	padding-bottom:1.5%;
	width:28%;
	   box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
#level_conteiner.visible {
	visibility:visible;
  opacity:1;
  transition-delay:0s;
}
#level_conteiner img {
	width:100%;
	height:auto;
	max-width:168px;
}
#level_conteiner div.label_conteiner {
	top:0px;
	left:0px;
	padding:4%;
	padding-left:12%;
	padding-top:1.5%;
	
}








.sh_puzzle{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	display: inline-block;
	overflow: hidden;
	position: relative;
	padding': 0;
		
}

.sp_bg{
  position: absolute;
  overflow: hidden;
  transition: opacity 0.1s linear;
  background: rgba(0, 0, 0, 0.73);
}

.sp_bg.visible{
  opacity: 1;
  transition-delay: 0s;
}






/* ------------------------------------------------------------------------------------ */
/* ------------------------------- animation zoom in ---------------------------------- */
/* ------------------------------------------------------------------------------------ */
.animate1 {
    animation: fullScale1 0.45s;
}
.animate2 {
    animation: fullScale2 0.45s;
}


@keyframes fullScale1 {
    from{transform:scale(0.5);}  to{transform:scale(1);}
}
@keyframes fullScale2 {
    from{transform:scale(0.5);}  to{transform:scale(1);}
}




.sh_puzzle > .anim {
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}

img.imgbg {
	display:block;
	margin:0px!important;
	border:none!important;
	padding:0px!important;
}

.sp_box {
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility:hidden;
  transition:visibility 0s linear 0.5s, z-index 0s linear 0.5s, opacity 0.5s linear;
  background: rgba(0, 0, 0, 0.43);
  z-index: 0;
  position: absolute;
}
.sp_box.visible {
  visibility:visible;
  opacity:1;
  transition-delay:0s;
  z-index: 9999;
}

.sp_box > div{
  display: table;
  width: 100%;
  height: 100%;
}
.sp_box > div > div > *{
  margin: 0;
}
.sp_box > div > div {
  color: #EBEBEB;
  font-size: 46px;
  line-height: 60px;
  font-weight: bold;
  text-align: center;         
  height:100%;      
  width: 100%;  
  display: table-cell;      
  vertical-align: middle;
}



/* ----------------------------------------------------------------------------------- */
/* --------------------------- bouton rejouer / démarrer ----------------------------- */
/* ----------------------------------------------------------------------------------- */
.sp_box .retry-button, .sp_box .start-button  {
  display: inline-block;
  background: #EE1684;
  border: 4px solid #FFFFFF;
  font-size: 24px;
	letter-spacing: 3px;
  padding: 0 20px 5px;
  text-decoration: none;
  color: #FFFFFF;
  line-height: 40px;
  cursor: pointer;
  box-sizing: content-box;
	border-radius: 10px;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.36);
	-webkit-box-shadow: 3px 5px 0px 0px rgba(0,0,0,0.3) ;
  box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.3);
	margin-left:10px; /* pour compenser ombre à droite */
	cursor: pointer;
}

.no-touch .retry-button:hover, .no-touch .start-button:hover {
    background: #FFA201;
}

@media only screen and (max-width: 500px), only screen and (max-device-width: 500px){
	.sp_box .retry-button, .sp_box .start-button  {
		font-size:22px;
		line-height:28px;
		letter-spacing:1px;
		padding: 0 10px 5px;
	}
}
/* iphone 5s */
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px){
	.sp_box .retry-button, .sp_box .start-button {
			font-size:18px;
			line-height:26px;
			letter-spacing:0px;
			padding: 0 10px 5px;
	}
}


/* ----------------------------------------------------------------------------------- */
/* --------------------------------- bouton sons on/off ------------------------------ */
/* ----------------------------------------------------------------------------------- */
.soundButton {
	display:none;
	padding:4px;
	background:#0000FF;
}
.soundButton.muted {
	background:#FF0000;
}

.sp_box > div > div > iframe{
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.sp_box > div > div > iframe.bt_facebook{
  bottom: 34px;
}






/* ------------------------------------------------------------------------------------------- */
/* ---------------------------------------------- IE8 ---------------------------------------- */
/* ------------------------------------------------------------------------------------------- */
div.browser_to_old {
	display:none;
}
div.ie8 div#PuzzleMainConteiner {
	display:none!important;
}
div.ie8 div.browser_to_old {
	display:block;
	color:#FFFFFF;
	background-color:#FF0000;
	font-weight:bold;
	padding:10px;
}