/*-=-=-=-=-=-=-=-=-=-=- */
/* Flip Panel */
/*-=-=-=-=-=-=-=-=-=-=- */

.panel {
  margin: 0 auto;
  height: 333px;
  position: relative;
  perspective:  600px;
}

.panel .front,
.panel .back {
  text-align: center;
}

.panel .front {
  height: 332px;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 900;
  text-align: center;
  transform: rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-perspective: 0;
  -webkit-backface-visibility: hidden;
  transition: all .4s ease-in-out;
}

.panel .back {
  height: 332px;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1000;
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-perspective: 0;
  -webkit-backface-visibility: hidden;
  transition: all .4s ease-in-out;
}
.panel.fliphorizontal .front {
  z-index: 900;
  transform: rotateY(180deg);
}
.panel.fliphorizontal .back {
  z-index: 1000;
  transform: rotateX(0deg) rotateY(0deg);
}
.box1{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 20px;
}
.box2{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 20px;
}

@media print {
  /* backface-visibility isn't supported in print. */
  .panel .back { display: none; }
  .panel .front { display: block; }
  .panel.fliphorizontal .back { display: block; }
  .panel.fliphorizontal .front { display: none; }

}