body{background:#fff} 

.centered-wrap{
  position:absolute;
  left:13%;
  top:78%;
  transform:translate(-50%,-50%);
}
.centered-wrap2{
  position:absolute;
  left:65%;
  top:78%;
  transform:translate(-50%,-50%);
}
.centered-wrap3{
  position:absolute;
  left:63%;
  top:76%;
  transform:translate(-50%,-50%);
}
.centered-wrap4{
  position:absolute;
  left:87%;
  top:76%;
  transform:translate(-50%,-50%);
}
.card-wrap{
  width:311px;
  height:618px;
  position:relative;
  top: 27px;
}


/* simple */
.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;

  -ms-transform: perspective(1000px);
  -moz-transform: perspective(1000px);
      -moz-transform-style: preserve-3d; 
      -ms-transform-style: preserve-3d; 
}
/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
  
  /* END: Accommodating for IE */
  .flip-container, .front, .back {

  }

  .flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;

    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
  }

  .front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

      -webkit-transition: 0.6s;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: rotateY(0deg);

      -moz-transition: 0.6s;
      -moz-transform-style: preserve-3d;
      -moz-transform: rotateY(0deg);

      -o-transition: 0.6s;
      -o-transform-style: preserve-3d;
      -o-transform: rotateY(0deg);

      -ms-transition: 0.6s;
      -ms-transform-style: preserve-3d;
      -ms-transform: rotateY(0deg);

      transition: 0.6s;
      transform-style: preserve-3d;
      transform: rotateY(0deg);

    position: absolute;
    top: 0;
    left: 0;
  }

  .front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
  }

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