/* =======================================================
 * 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
{
    color: #000000 !important;
    position: relative;
  	-webkit-perspective: 1000px;
  	-moz-perspective: 1000px;
	  -ms-perspective: 1000px;
	  -o-perspective: 1000px;
	  perspective: 1000px;
  	/*default width height*/
  	width: 255px;
  	height: 138px;
    padding-bottom: 30px;


}

.card-container .black
{
    background-color: #ccc !important;
    opacity:1;

}

.card-container .card img
{
    width: 100%;
    height: 100%;
}





.card-container .card .front h3, .back h3
{
    color: #fff;
    font-size: 18px;
    margin-right:20px;
    margin-top:20px;
    text-align: right;
    font-weight: bold;
    float:right;
}
.card-container .card .front div, .back div
{
    color: #fff;
    font-size: 14px;

    margin-right:20px;
    margin-top:-10px;
    padding:0px;
    text-align: right;

    float:right;
}

.card-container .card .overlay_text{
    position:absolute;top:0px;left:0px;width:255px;height:155px;background-color:black;opacity:0.8;padding:10px;color:white;font-weight:bold;
}


.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: block;*/
    display:none\9;
}
.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 );
}