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

/* https://davidwalsh.name/css-flip */


.flip_container 
{
	  position: relative;	
  
	/*  margin: 5px auto;	*/		
	  width: 100%;
	  
	/*  height: 320px;*/
	  
	  z-index: 1;
	  perspective: 1000;
}
								
.face 
{
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  backface-visibility: hidden; 
	background-color:white;
}


.front.face,
.back.face 
{
	  -webkit-backface-visibility: hidden;
		 backface-visibility: hidden;
	  -webkit-transition: -webkit-transform 0.3s;
		 transition: transform 0.3s;
}

.face.back 
{
	box-sizing: border-box;			  			
	font-size:12px;				  
	border:1px solid lightgrey;			  
	background-color: white; /* #aaa;*/

	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);

}		
	
.front  {position: relative;}
.back   {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	
.front.face.flipped 
{
	  -webkit-transform: rotateY(-180deg);
	   transform: rotateY(-180deg); 
}

.back.face.flipped 
{
		-webkit-transform: rotateY(0);
		transform: rotateY(0); 
}	

/*
.front.face.flipped.relative
{
	position:absolute;
}*/