/*
  Horizontal

  reset atom class first
  if it doesn't exist elsewhere, just remove it
*/
.flip-horizontal .fold-back-horizontal,
.flip-vertical .fold-back-vertical { transform: none; }


.mk-flipbox-holder {
  position: relative;
}
.mk-flipbox-front {
  width: 100%;
  height: 100%; 
  position: absolute;
  left: 0;
  top: 0;
  display: table;
}
.mk-flipbox-back {
  width: 100%;
  height: 100%; 
  position: absolute;
  left: 0;
  top: 0;
  display: table;
}
.Chrome .chrome-flipbox-backface-fix { 
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
.mk-flipbox-content {
  display: table-cell;
  vertical-align: middle;
}

/*
  Horizontal
 */
.flip-horizontal .mk-flipbox-back {
  -webkit-transform: rotateY(180deg); 
          transform: rotateY(180deg); 
}
.flip-horizontal:hover .mk-flipbox-front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.flip-horizontal:hover .mk-flipbox-back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

/*
  Vertical
 */
.flip-vertical .mk-flipbox-back {
  -webkit-transform: rotateX(180deg); 
          transform: rotateX(180deg); 
}

.flip-vertical:hover .mk-flipbox-front {
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}
.flip-vertical:hover .mk-flipbox-back {
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}


/*
  Button
 */
.mk-flipbox .mk-button-container {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/*
  Set line-height to remove extra height from svg container div.
*/
.front-icon { line-height: 1rem; }

.IE .mk-flipbox {
  overflow:hidden;
}