.rotate-card {
    height: 286px;
}

.Card-front, .Card-back {
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    /*transition: transform 1s,visibility 0s linear 0.33s;*/
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    top: 0px;
    left: 0px;
    right: 20px;
}

.Card-back {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

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

.Card-back.flipped {
    -webkit-transform: rotateY( 0deg );
    -moz-transform: rotateY( 0deg );
    -o-transform: rotateY( 0deg );
    transform: rotateY( 0deg );
}