.box {
  position: absolute; 
  width: 100%;
  top:20%;
}
.box .front, .box .back {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  text-align: center;
  /* background: #f6f6f6;
  border: 0 1px 1px;
  border-style: solid;
  border-color: transparent #fff #f2f2f2;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), inset 1px 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.1); */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.5s ease-in-out;
}
.box .front {
  z-index: 900;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
      text-align: -webkit-center;
}
.box .back {
  z-index: 800;
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
      text-align: -webkit-center;
}

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

.flip >.front > #pin > .display > .dots > .dot {
    display: none;
}

.flip .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  z-index: 1000;
}