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

  .vvjr.br-576 .reveal-item {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    width: 100%;
    height: calc(var(--box-height) * 1px);
  }

  .vvjr.br-576 .back-box {
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    transition: var(--reveal-speed) var(--animation-easing);
  }

  .vvjr.br-576 .reveal-item > div {
    height: 100%;
  }

  .vvjr.br-576 .reveal-item.a-zoom .back-box {
    transform: scale(0);
  }

  .vvjr.br-576 .reveal-item.a-top .back-box {
    transform: translateY(-100%);
  }

  .vvjr.br-576 .reveal-item.a-right .back-box {
    transform: translateX(100%);
  }

  .vvjr.br-576 .reveal-item.a-bottom .back-box {
    transform: translateY(100%);
  }

  .vvjr.br-576 .reveal-item.a-left .back-box {
    transform: translateX(-100%);
  }

  .vvjr.br-576.hover .reveal-item.a-fade:hover .back-box {
    opacity: 1;
  }

  .vvjr.br-576.hover .reveal-item.a-zoom:hover .back-box {
    transform: scale(1);
    opacity: 1;
  }

  .vvjr.br-576.hover .reveal-item.a-top:hover .back-box {
    transform: translateY(0);
    opacity: 1;
  }

  .vvjr.br-576.hover .reveal-item.a-right:hover .back-box {
    transform: translateX(0);
    opacity: 1;
  }

  .vvjr.br-576.hover .reveal-item.a-bottom:hover .back-box {
    transform: translateY(0);
    opacity: 1;
  }

  .vvjr.br-576.hover .reveal-item.a-left:hover .back-box {
    transform: translateX(0);
    opacity: 1;
  }

}

@media (max-width:35.99875rem) {
  .vvjr.br-576 .reveal-inner {
    grid-template-columns: 1fr;
    gap: calc(var(--grid-gap) * 1px);
  }

  .vvjr.br-576 .reveal-item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
  }

  .vvjr.br-576 .reveal-item > *:last-child {
    align-self: stretch;
  }

  .vvjr.br-576 .reveal-item .back-box,
  .vvjr.br-576 .reveal-item .front-box {
    transform: none !important;
    opacity: 1 !important;
  }

}