h2, p {
  color:#666;
  font-family:Arial, Helvetica, sans-serif;
}
a {
color: #333;
  font-family:Arial, Helvetica, sans-serif;
}
a:hover {
color: #222;
}

	/* simple */
.flip-container {
		-webkit-perspective: 1000;
		-moz-perspective: 1000;
		-ms-perspective: 1000;
		perspective: 1000;

		-ms-transform: perspective(1000px);
		-moz-transform: perspective(1000px);
  			-moz-transform-style: preserve-3d;
  			-ms-transform-style: preserve-3d;

		/*border: 1px solid #ccc;*/
}

.flip-container.flip .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}


.flip-container.flip .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 180px;
		height: 180px;
/*float: left;*/
    display: inline-block;
    /*margin:3px;*/
  	position:relative;
  	cursor:pointer;
}


.flipper {
		-webkit-transition: 0.6s;
		-webkit-transform-style: preserve-3d;
		-ms-transition: 0.6s;

		-moz-transition: 0.6s;
		-moz-transform: perspective(1000px);
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;

		transition: 0.6s;
		transform-style: preserve-3d;
    /*position:absolute;*/
  	/*top:0%;
  	left:0%;
  	margin:-4px 0 0 -4px;*/
		position: relative;

}

.front, .back {
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;

	    -webkit-transition: 0.6s;
	    -webkit-transform-style: preserve-3d;
	    -webkit-transform: rotateY(0deg);

	    -moz-transition: 0.6s;
	    -moz-transform-style: preserve-3d;
	    -moz-transform: rotateY(0deg);

	    -o-transition: 0.6s;
	    -o-transform-style: preserve-3d;
	    -o-transform: rotateY(0deg);

	    -ms-transition: 0.6s;
	    -ms-transform-style: preserve-3d;
	    -ms-transform: rotateY(0deg);

	    transition: 0.6s;
	    transform-style: preserve-3d;
	    transform: rotateY(0deg);

		position: absolute;
		top: 0;
		left: 0;

}

.front {
		-webkit-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		background: #ccc;
		/*z-index: 2;*/
    /*position:absolute;
  	left:0;
  	top:0;
  	width:100%;
  	height:100%;*/
  	/*border:1px solid #ddd;*/
  	background:url("background.png") no-repeat center center #f9f9f9;
}
.front img {
      width:  170px;
      height: 170px;
}
.back {
		/*background: #ccc;*/
    /*font-size:18px;*/
      font-weight:bold;
      font-size:1.5em;
      color:#766;
      font-family:Arial, Helvetica, sans-serif;
            	/*padding-left:5px;*/
    padding:70px 10px 10px 20px;
    text-align: left;
		-webkit-transform: rotateY(-180deg);
	    -moz-transform: rotateY(-180deg);
	    -o-transform: rotateY(-180deg);
	    -ms-transform: rotateY(-180deg);
	    transform: rotateY(-180deg);
        	/*background:url("background.png");*/
}

.cardDets {
  font-size:.6em;
  font-style: italic;
  color:#766;
  font-family:Arial, Helvetica, sans-serif;
  padding-left:5px;
  text-align: left;
}



.dot {
  position:absolute;
  left:20px;
  top:40px;
      width: 20px;
      height: 20px;
}

.TCmaroon {
  color: #87171a;
}
.TCgoldenrod {
  color: #d0a63f;
}
.TCsalmon {
  color: #d86b52;
}
.TCplum {
  color: #6d2d6c;
}
.TCnavy {
  color: #282b74;
}
.TCred {
  color: #ee2424;
}
.TCgreen {
  color: #106c37;
}
.center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}