.container-flipper {
  text-align: center;
  max-width: 320px;
  width: 100%;
  -webkit-perspective: 1200;
  perspective: 1200;
  -moz-transform: perspective(1200px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flipper {
  position: relative;
  max-width: 320px;
  height: 202px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: .7s linear;
  -moz-transition: .7s linear;
  -o-transition: .7s linear;
  transition: .7s linear;
}

.f-front,
.f-back {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  /* padding: 40px 20px 20px; */
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.f-front {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /* background: white; */
}

.f-front img {
  width: 100%;
  max-height: 100%;
}

.f-back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  /* background: #DCB8B2; */
  color: #000000;
}

.container-flipper.showBack .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}