/* message des cartes TAROT PENSEES BONHEUR*/


.card76{margin: 10px auto;  max-width: 85%; transition: transform .4s; /* Animation */  }
.card76:hover{ 	-webkit-transform: scale(1.1);	transform: scale(1.1); }


h6.heading{ display: block; margin: auto; padding: 5px;  
			border-top: 1px solid #FFF07A; border-bottom: 1px solid #DB9D3A; width: 99%; }
h6.heading:hover{ display: block; 
			border-top: 1px solid #DB9D3A; border-bottom: 1px solid #FFF07A; 
			 }
.btn-back {
	float: right; right: 30px; 
	margin-top: -42px; 
	display: block; 
	background-image: linear-gradient(#007BFF, #0050A8);
	color: #FFF; 
	padding:5px; 
	border-radius: 3px; 
	}

img.tarotMin{		
width:124px; 	/* miniature :3 */
	margin-right: 20px; 
   z-index:10;
   transition: transform .4s; /* Animation */
}

#shadowing
{
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #FFFFEA;
	z-index:10;
	opacity:0.5;
	/*filter: alpha(opacity=0);*/
}

#shuffle {
    display: block; 
	width: 95%; 
	height: 100%; 
	margin: 0 auto; 
}

#shuffle > div{
	 float: left;
	 display: block; width: 75px; margin-right: -5px; 
	 /*width: 100px; pour les aligner l'une a coté de l'autre*/
	 -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
#shuffle > div:hover{ z-index: 55; }

#newSceneCard{
					
							  

			   
			
					 
									 
								 
				 
	display: block; 
	width: 372px;  height: 579px;
 
	position: absolute; 
	margin: -6% 33%; 
	transform: translate(6%, -33%);
	/*margin-top: -6%; margin-left: 26%;  
	*/
	z-index: 100; 
	
 
}


.number1{

	position: relative; 
	margin-top: 2px;
	padding-top: 2px; 	
	margin-left: -50px; 
	color: #fff; 
	font-weight: 600; 
	z-index: 10;  
    
}


.number2{
	position: absolute; 
	margin-top: 18px; 
	margin-left: 300px; 
	color: #fff; font-size: 12px;
	font-weight: 600; 
	z-index: 55; 
    
}

#melanger{
	position: relative; 
	text-decoration: underline; margin: 15px; 
}
.close{
	position: absolute; 
	font-size:1em; font-weight: 400; 
	margin-left: 128px; 
	padding: 5px; 
	background-color: #FFFFB4;
	border: 1px solid #C48B2E; 
	
	margin-top: 20px; 
	z-index: 55;  
}

.message{
position: absolute; 
top: 42%; 
transform: translateY(-42%); 
padding:15px;
	z-index: 1000; 
width: 370px; 

	font-size: 1.50em; 
	
	line-height:1.75em; 
	text-align: center; 
	color: #992044; 
	
}

#shuffle div img.cPetit{
	
	width:100%; 
	float: left;  
    line-height: 55px;
    text-align: center;
    color: #fff;
    margin: 6px;
	transition: transform .4s; /* Animation */

}

  
					 
					 
 
  


div img.cPetit:hover, img.tarotMin:hover{
	-webkit-transform: scale(1.1);
	transform: scale(1.1); 
}

/*flip image*/
.scene {
																   
	 
   background-color: transparent; border-style : none;
   width: 372px;
  height: 579px;
  margin: 0 auto;
  perspective: 600px;
  
}

.cardTarot {
width: 100%;
  height: 579px;
  margin: 0 auto;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
   background-color: transparent; border-style : none;

}

.cardTarot.is-flipped, .findWord.flipped{
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
}


.Back {
  transform: rotateY(180deg);
}

/*--  end carte tarot ---*/

						   
@media screen and (min-width: 360px) and (max-width: 767px) {
	
.card__face .Back{
	width: 98%; margin: 0 auto;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden; 
	} /*fix chrome*/
	
.melange{margin: 0 auto; position: relative;}
/*
.cardTarot { left: -100px; }
.message { left:-100px; }
*/


#newSceneCard{
	margin: -6px auto; 
	transform: translate(6px, -1%);
	z-index: 100; 
	
}

#shuffle{ width: 100%; left: 0;}
}