/**
 * @file
 * Views Tabs
 *
 * Filename:     vvjf-1200.css
 * Website:      https://www.flashwebcenter.com
 * Developer:    Alaa Haddad https://www.alaahaddad.com.
 */
@media (min-width:75rem) {
  .vvjf.br-1200 .flipbox-inner {
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--box-width) * 1px), 1fr));
    gap: calc(var(--grid-gap) * 1px);
  }

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

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

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

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

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

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

  .vvjf.br-1200 .flipbox-front,
  .vvjf.br-1200 .flipbox-back {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

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

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

}

@media (max-width:74.99875rem) {
  .vvjf.br-1200 .flipbox-inner {
    grid-template-columns: 1fr;
    gap: calc(var(--grid-gap) * 1px);
  }

  .vvjf.br-1200 .flipbox-item {
    height: auto;
    perspective: none !important;
  }

  .vvjf.br-1200 .flipbox-item-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100%;
  }

  .vvjf.br-1200 .flipbox-item-inner > *:last-child {
    align-self: stretch;
  }

}