/* ======================================================= 
 * FlipCard.css for FlipCard.js v 1.3.0
 * By Pingmin Tech
 *
 * Copyright (c) 2014, Pingmin Tech. All rights reserved.
 * Released under CodeCanyon License http://codecanyon.net/
 *
 * ======================================================= */
.card-container
{
    position: relative;
  	-webkit-perspective: 1000px;
  	-moz-perspective: 1000px;
	  -ms-perspective: 1000px; 
	  -o-perspective: 1000px;
	  perspective: 1000px;
  	/*default width height*/
  	width: 200px; 
  	height: 200px;
}
.card-container .card
{
  	position: relative;
  	width: 100%;
  	height: 100%;
    padding: 0;
    margin: 0;
  	-webkit-transition-property: -webkit-transform;
  	-webkit-transition-duration: 500ms;
  	-webkit-transform-style: preserve-3d;
  	-webkit-transform-origin: 50% 50%;
  	-webkit-transition-timing-function: ease;
  	-moz-transition-property: -moz-transform;
  	-moz-transition-duration: 500ms;
  	-moz-transform-style: preserve-3d;
  	-moz-transform-origin: 50% 50%;
  	-moz-transition-timing-function: ease;
  	-ms-transition-property: -ms-transform;
  	-ms-transition-duration: 500ms;
  	-ms-transform-style: preserve-3d;
  	-ms-transform-origin: 50% 50%;
  	-ms-transition-timing-function: ease;
  	-o-transition-property: -o-transform;
  	-o-transition-duration: 500ms;
  	-o-transform-style: preserve-3d;
  	-o-transform-origin: 50% 50%;
  	-o-transition-timing-function: ease;
  	transition-property: transform;
  	transition-duration: 500ms;
  	transform-style: preserve-3d;
  	transform-origin: 50% 50%;
  	transition-timing-function: ease;
}
.notransition{
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}
.card-container .card .front,
.card-container .card .back
{
color: #fff;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%;
  	-webkit-backface-visibility: hidden;
  	-moz-backface-visibility: hidden;
  	-ms-backface-visibility: hidden;
  	-o-backface-visibility: hidden;
  	backface-visibility: hidden;
}
.card-container .card .back
{
    /*visibility: hidden;*/
    display: none;
}
.card-container .card .back,
.card-container .card .back-y
{
    -webkit-transform: rotateY( -180deg );
    -moz-transform: rotateY( -180deg );
    -ms-transform: rotateY( -180deg );
    -o-transform: rotateY( -180deg );
    transform: rotateY( -180deg );
}
.card-container .card .back-x
{
  	-webkit-transform: rotateX( -180deg );
  	-moz-transform: rotateX( -180deg );
  	-ms-transform: rotateX( -180deg );
  	-o-transform: rotateX( -180deg );
  	transform: rotateX( -180deg );
}
.card-container.flipped-lr .card {
	  -webkit-transform: rotateY( 180deg );
  	-moz-transform: rotateY( 180deg );
  	-ms-transform: rotateY( 180deg );
  	-o-transform: rotateY( 180deg );
  	transform: rotateY( 180deg );
}
.card-container.flipped-rl .card {
	  -webkit-transform: rotateY( -180deg );
  	-moz-transform: rotateY( -180deg );
  	-ms-transform: rotateY( -180deg );
  	-o-transform: rotateY( -180deg );
  	transform: rotateY( -180deg );
}
.card-container.flipped-tb .card {
  	-webkit-transform: rotateX( -180deg );
  	-moz-transform: rotateX( -180deg );
  	-ms-transform: rotateX( -180deg );
  	-o-transform: rotateX( -180deg );
  	transform: rotateX( -180deg );
}
.card-container.flipped-bt .card {
  	-webkit-transform: rotateX( 180deg );
  	-moz-transform: rotateX( 180deg );
  	-ms-transform: rotateX( 180deg );
  	-o-transform: rotateX( 180deg );
  	transform: rotateX( 180deg );
}
/**ie10**/
.card-container .ie10 {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}
.card-container .ie10 .front,
.card-container .ie10 .back
{
    transition-property: transform;
    transition-duration: 500ms;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transition-timing-function: ease;
}
.flipped-lr .ie10,
.flipped-rl .ie10,
.flipped-tb .ie10,
.flipped-bt .ie10
{
    transform: none !important;
}
/**initial state for front**/
.card-container .ie10 .front-y
{
    transform: perspective(1000px) rotateY(0deg);
}
.card-container .ie10 .front-x
{
    transform: perspective(1000px) rotateX(0deg);
}
/*.card-container .ie10 .back,*/
.card-container .ie10 .back-y
{
    transform: perspective(1000px) rotateY( -180deg );
}
.card-container .ie10 .back-y-r
{
    transform: perspective(1000px) rotateY( 180deg );
}
.card-container .ie10 .back-x
{
    transform: perspective(1000px) rotateX( -180deg );
}
.card-container .ie10 .back-x-r
{
    transform: perspective(1000px) rotateX( 180deg );
}
/*front-y back-y*/
.flipped-lr .ie10 .front {
    transform: perspective(1000px) rotateY( 180deg ); 
}
.flipped-lr .ie10 .back {
    transform: perspective(1000px) rotateY( 0deg );
}
/*front-y back-y-r*/
.flipped-rl .ie10 .front {
    transform: perspective(1000px) rotateY( -180deg ); 
}
.flipped-rl .ie10 .back {
    transform: perspective(1000px) rotateY( 0deg );
}
/*front-x back-x*/
.flipped-tb .ie10 .front {
    transform: perspective(1000px) rotateX( 180deg ); 
}
.flipped-tb .ie10 .back {
    transform: perspective(1000px) rotateX( 0deg ); 
}
/*front-x back-x-r*/
.flipped-bt .ie10 .front {
    transform: perspective(1000px) rotateX( -180deg ); 
}
.flipped-bt .ie10 .back {
    transform: perspective(1000px) rotateX( 0deg );
}
.card-container
{
	width: 200px;
	height: 200px;
	float:left;
	margin: 0 10px 10px 0;
}
.group1 .card-container
{
	margin-left: 200px;
}
.dual
{
	width: 95%;
height: 158px;
}
.card img
{
}
.front h3, .back h3
{
	color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    padding: 20px;
    padding-bottom: 10px;
    text-align: center;
}
.orange 
{
	background-color: #84bd00 !important;
}
.yellow 
{
	background-color: #F8CA4D !important;
}
.gray 
{
	background-color: #91AA9D !important;
}
.green 
{
}
.blue 
{
	background-color: #2F3440 !important;
}
.front {
		-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.back {
		-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.fliptitle {
	background: #FFF;
	display: block;
	color: #000;
}