.card {
    cursor: pointer;
    /*transition effects */
    -ms-transition: -webkit-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    -o-transition: -o-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

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

.card .front,
.card .back {
    border-top: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    font-size: 4em;
    position: absolute;
    top: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card .back {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 0;
    padding-top: 8%;
}

.card .back {
    background-image: none!important;
    background-color: #fff;
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
}

.card.tourne .back {
    -ms-transform: rotateY( 0) !important;
    -webkit-transform: rotateY( 0) !important;
    -moz-transform: rotateY( 0) !important;
    -o-transform: rotateY( 0) !important;
    transform: rotateY( 0) !important;
}

.card.tourne {
    -ms-transform: rotateY( 0) !important;
    -webkit-transform: rotateY( 0) !important;
    -moz-transform: rotateY( 0) !important;
    -o-transform: rotateY( 0) !important;
    transform: rotateY( 0) !important;
}