@charset "utf-8";
/* CSS Document */
/* entire container, keeps perspective */
.flip-container {
	float: left;
	margin: 15px;
	box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.5);
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
	transform: rotateY(180deg);
}
.flip-container, .front, .back {
	width: 100px;
	height: 100px;
}
/* flip speed goes here */
.flipper {
	transition: 0.3s;
	transform-style: preserve-3d;
	position: relative;
}
/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
    color: #FFF;
}
.back-word {
    height: 90px;
    width: 90px;
    margin: 5px;
    text-align: center;
    font-size: 0;
}

.back-word:before {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.back-word b {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}
.en .back-word b {
    font-size: 12px;
}

/* Sharon fixed */
.text-Blue {
    color: #336;
}
.text-Green {
    color: #060;
}
.text-Grey {
    color: #333;
}
.text-Metal {
    color: #999;
}
.text-Black {
    color: #000;
}

.back-White {
    background-color: #FFF;
}
.back-Blue-1 {
    background-color: #0000A0;
}
.back-Blue-2 {
    background-color: #09F;
}
.back-Blue-3 {
    background-color: #6CF;
}
.back-Blue-4 {
    background-color: #06F;
}
.back-Blue-5 {
    background-color: #06C;
}
.back-Blue-6 {
    background-color: #36C;
}
.back-Blue-7 {
    background-color: #3CF;
}
.back-Blue-8 {
    background-color: #39F;
}
.back-Blue-9 {
    background-color: #006;
}
.back-Blue-10 {
    background-color: #036;
}
.back-Blue-11 {
    background-color: #39C;
}
.back-Blue-12 {
    background-color: #09C;
}
.back-Blue-13 {
    background-color: #039;
}
.back-Blue-14 {
    background-color: #069;
}
.back-Blue-15 {
    background-color: #1B96CD;
}
.back-Green-1 {
    background-color: #008000;
}
.back-Green-2 {
    background-color: #0C3;
}
.back-Green-3 {
    background-color: #6C0;
}
.back-Green-4 {
    background-color: #9F0;
}
.back-Green-5 {
    background-color: #390;
}
.back-Green-6 {
    background-color: #3C0;
}
.back-Green-7 {
    background-color: #9F3;
}
.back-Green-8 {
    background-color: #030;
}
.back-Green-9 {
    background-color: #360;
}
.back-Green-10 {
    background-color: #3F9;
}
.back-Green-11 {
    background-color: #393;
}
.back-Green-12 {
    background-color: #090;
}
.back-Green-13 {
    background-color: #0C0;
}
.back-Green-14 {
    background-color: #060;
}
.back-Green-15 {
    background-color: #9C0;
}
.back-Red-1 {
    background-color: #F00;
}
.back-Red-2 {
    background-color: #C00;
}
.back-Black {
    background-color: #000;
}
.back-Yellow-1 {
    background-color: #FC0;
}
.back-Yellow-2 {
    background-color: #C90;
}
.back-Yellow-3 {
    background-color: #960;
}
.back-Gold {
    background-color: #C93;
}
.back-Purple-1 {
    background-color: #339;
}
.back-Purple-2 {
    background-color: #CCF;
}
.back-Purple-3 {
    background-color: #4B0080;
}
.back-Orange {
    background-color: #FF6600;
}