/**
 * @file
 * VVJ Flipbox.
 *
 * Filename:     beon_3d_flipbox-all.css
 * Website:      https://www.flashwebcenter.com
 * Developer:    Alaa Haddad https://www.alaahaddad.com.
 */
.beon_3d_flipbox.br-all .flipbox-inner {
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--box-width) * 1px), 1fr));
  gap: calc(var(--grid-gap) * 1px);
}

.beon_3d_flipbox.br-all .flipbox-item {
  cursor: pointer;
  height: calc(var(--box-height) * 1px);
  perspective: calc(var(--box-perspective) * 1px);
}

.beon_3d_flipbox.br-all .flipbox-item-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(0);
  will-change: transform;
}

.beon_3d_flipbox.br-all.vertical .flipbox-item-inner.flipped {
  transform: rotateX(180deg);
}

.beon_3d_flipbox.br-all.horizontal .flipbox-item-inner.flipped {
  transform: rotateY(180deg);
}

.beon_3d_flipbox.br-all.vertical.hover .flipbox-item-inner:hover {
  transform: rotateX(180deg);
  transition: transform 0.6s ease-in-out;
}

.beon_3d_flipbox.br-all.horizontal.hover .flipbox-item-inner:hover {
  transform: rotateY(180deg);
  transition: transform 0.6s ease-in-out;
}

.beon_3d_flipbox.br-all .flipbox-front,
.beon_3d_flipbox.br-all .flipbox-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  box-sizing: border-box;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

.beon_3d_flipbox.br-all .flipbox-back.horizontal {
  transform: rotateY(180deg);
}

.beon_3d_flipbox.br-all .flipbox-back.vertical {
  transform: rotateX(180deg);
}