/* =======================================================
 * 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
{
  	position: absolute;
  	height: 100%;
  	width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
  	-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 );
}