@charset "utf-8";
/* CSS Document */
.cont1{height: 490px;}
.cont2, .cont3{height: 540px;}
.fix{position: relative;  left: -8px;  width: 183px;}
.fix2{position: relative;  left: 8px;  margin-bottom: 9px;padding:0 !important;}
.draggable{ position:relative}
[id*='txt']{  position: absolute;  height: 33px;  width: 131px;  text-align: center;  font-size: 22px;}
#txt1{top: 107px;  left: 457px;}
#txt2{  top: 161px;  left: 237px;}
#txt3{  top: 219px;  left: 457px;}
#txt4{ top: 270px;  left: 238px;}
.panel {	
	width: 200px;
	height: 182px;
	margin: 15px auto;
	position: relative;
	font-size: .8em;
	cursor: pointer;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
}

.panel .front {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 900;
	width: inherit;
	height: inherit;
/*	box-shadow: 0 1px 5px rgba(0,0,0,0.9);*/
/*	border-radius:15px; */
	
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
	transform: rotateX(0deg) rotateY(0deg);

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.panel.flip .front {
	z-index: 900;
/*	box-shadow: 0 15px 50px rgba(0,0,0,0.2);*/
/*	border-radius:15px; */
	
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.panel .back {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 800;
	width: inherit;
	height: inherit;
/*	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);*/
/*	border-radius:15px; */
	
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-179deg);
	transform: rotateY(-179deg);

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.panel.flip .back {
	z-index: 1000;
/*	background: #80868d;*/

	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
	transform: rotateX(0deg) rotateY(0deg);

/*	box-shadow: 0 15px 50px rgba(0,0,0,0.2);*/
}

/
.touched .front {
	cursor: pointer;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
.touched.flip .front {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
.touched .back {
	cursor: pointer;
	-webkit-transform: rotateX(-180deg);
	-moz-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}
.touched.flip .back {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
