.deck {
  display: table-cell;
  vertical-align: middle; 
}

/* --- CARD SETTINGS --- */

.deck>input,
.deck>u,
.deck>b {
  width: 93px;
  height: 131px;
  position: relative; border-radius:3px;
}

.deck>input {
  margin: 0 5px 10px;
  z-index: 997;
  cursor: pointer;
  opacity: 0; 
}

.deck>u,
.deck>b {
  left: -5px; /* Subtract margin value */
  margin-left: -93px; /* Subtract width value */
  display: inline-block;
  text-align: center;
  vertical-align: top;
  border-radius: 8px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* --- FRONT CONTENT --- */

.deck>u {
  font: bold 11px/1 Arial, Helvetica, sans-serif;
  color: #148;
  text-decoration: none; border:1px solid black;
}

.deck>u>img {
  display: block; 
  width: 100%; 
  height: 100%;
  border: 0px solid #ddd;
  border-radius: 3px; box-shadow: 0px 0px 10px #000;
}

.deck>u>i {
  display: block;
  margin: 1px 4px 0;
  font: 9px/.9 Arial, Helvetica, sans-serif;
  color: #a00;
}

/* --- BACK CONTENT --- */

.deck>b {
  background: url('../images/back.png') ;background-size:cover;
  border: 0px solid #f8fff9;
  box-sizing: border-box; 
}

.deck>b::before,
.deck>b::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background: none; 
  border-radius: inherit;
  opacity: .3;
}

.deck>b::after {
  background-position: calc(50% + 18px) calc(50% + 18px);
}

/* --- ANIMATION AND 3D SETTINGS --- */

.deck {
  perspective: 1500px;
}

.deck>u,
.deck>b {
  transition: all .8s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  z-index: 0;
}

.deck>input:checked + u,
.deck>input:checked + u + b {
  z-index: 100;
}

.deck>input:focus + u,
.deck>input:focus + u + b {
  transition-property:  transform, filter, box-shadow; /* Exclude z-index to immediately overlay */
  outline: 0;
  z-index: 900;
}

/* --- FRONT ANIMATION --- */

.deck>u {
  transform: translateX(160%) rotateY(-180deg);
  transform-origin: -30% center; opacity:0;
  box-shadow: 130px 30px 40px -20px rgba(0, 0, 0, 0);
  filter: brightness(3);
}

.deck>input:checked + u {
  transform: translateX(0%) rotateY(0deg);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .4); opacity:1;
  filter: brightness(1);
}

/* --- BACK ANIMATION --- */

.deck>b {
  transform: translateX(0%) rotateY(0deg);
  transform-origin: 130% center;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
  filter: brightness(1);
}

.deck>input:checked + u + b {
  transform: translateX(-160%) rotateY(180deg);
  box-shadow: 80px 10px 20px -40px rgba(0, 0, 0, 0);
  filter: brightness(0);
}

/* Edge hack - Prevent click during transition, otherwise the animation breaks. */

@supports (-ms-ime-align:auto) {
  .deck>input {
    animation: step-end .8s; // Time is the same as the main transition
  }
  .deck>u,
  .deck>b {
    cursor: pointer;
  }

  .deck>input:checked {
    animation-name: noclick1;
  }

  .deck>input:not(:checked) {
    animation-name: noclick2;
  }

  @keyframes noclick1 {
    0%   { visibility: hidden; }
    100% { visibility: visible; }
  }

  @keyframes noclick2 {
    0%   { visibility: hidden; }
    100% { visibility: visible; }
  }
}