.cards                  { position: relative; perspective: 800px; perspective-origin: top; min-height: 600px; }
.cards .card            { position: absolute; top: 0; left: 0; width: 300px; height: 500px; transform-origin: center center; }
.cards .card            { border-radius: 10px; transition: all 1s; perspective: 800px; perspective-origin: top; opacity: 0; backface-visibility: hidden; }
.cards .card .front     { position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 20px; overflow: hidden; background: #fff; }
.cards .card .front     { border-radius: 5px; border: 15px solid #eee; }
.cards .card .back      { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; }
.cards .card .back      { background: linear-gradient(to bottom, #873192, #532769); box-shadow: 1px 1px 5px rgba(0,0,0,1); }
.cards .card .front     { transform-style: preserve-3d; transition: all 1s; transform: rotateY(-180deg); perspective-origin: top; backface-visibility: hidden; }
.cards .card .back      { transform-style: preserve-3d; transition: all 1s; perspective-origin: top; backface-visibility: hidden; }
.cards .card .back      { font-size: 30px; color: #fff; background: #fff; background-size: 100% 100%; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); }
.cards .card.show       { opacity: 1; }
/*.cards .card .back:hover      { transition: all .1s; transform: translate(0, -50px); }*/

.cards .active          { animation: flipCard 1s; animation-fill-mode: both; }
.cards .active .front   { animation: flipCardFront 1s; box-shadow: 1px 1px 10px rgba(0,0,0,0.5); animation-fill-mode: both; }
.cards .active .back    { animation: flipCardBack 1s; animation-fill-mode: both; }

@keyframes flipCard {
    50%      { left: 0%; transform: scale(0.8) rotate(-5deg); }
    100%     { left: 50%; transform: translate(-50%, 0) scale(1) rotate(0deg); z-index: 500; }
}

@keyframes flipCardFront {
    10%      { transform: rotateY(-180deg); }
    100%     { transform: rotateY(0deg); }
}

@keyframes flipCardBack {
    10%      { transform: rotateY(0deg); }
    100%     { transform: rotateY(180deg); }
}

@media only screen and (max-width: 700px) {
    .cards .card            { transition: none; animation-duration: 0s; }
    .cards .active          { animation-duration: 0s; }
    .cards .front           { animation-duration: 0s; transition: none; }
    .cards .back            { animation-duration: 0s; transition: none; }
    .cards .active .front   { animation-duration: 0s; }
    .cards .active .back    { animation-duration: 0s; display: none; }
}