@charset "utf-8";

:root {
  --lv-perspective: 1000px;
  --lv-max-height: 60dvh;
  --lv-max-width: 500px;
  --lv-max-width-horizontal: 700px;
  --lv-white: white;
  --lv-gray: gray;
}

.laxxview {
  position: relative;
  margin: auto;
  background: radial-gradient(rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  background-position: center;
  background-size: 100% 85%;
  background-repeat: no-repeat;
  perspective: var(--lv-perspective);
  -webkit-perspective: var(--lv-perspective);
  -ms-perspective: var(--lv-perspective);
}

.laxxview-container,
.laxxview-inner,
.laxxview-front,
.laxxview-back,
.laxxview-base,
.laxxview-layer,
.laxxview img,
.laxxview video {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
}

.laxxview-container {
  position: relative;
  touch-action: none;
  -webkit-touch-action: none;
  -ms-touch-action: none;
  z-index: 1;
  transition: box-shadow 0.4s ease;
}

.laxxview-container:hover {
  z-index: 100;
  cursor: grab;
}

.laxxview-base,
.laxxview-front,
.laxxview-back,
.laxxview-left,
.laxxview-right,
.laxxview-top,
.laxxview-bottom,
.laxxview-layer,
.laxxview img,
.laxxview video {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

.laxxview-inner {
  min-width: fit-content;
  transition: transform 1s, translate 1s, box-shadow 0.5s;
  -webkit-transition: transform 1s, translate 1s, box-shadow 0.5s;
  -moz-transition: transform 1s, translate 1s, box-shadow 0.5s;
  -o-transition: transform 1s, translate 1s, box-shadow 0.5s;
  pointer-events: auto;
}
.laxxview-inner:hover {
  box-shadow: 0 0 25px #080, 0 0 100px #060;
}

.laxxview-front {
  position: relative;
  pointer-events: all !important;
}

.laxxview-back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  pointer-events: all !important;
}

.laxxview img,
.laxxview video {
  max-height: var(--lv-max-height);
  max-width: var(--lv-max-width);
}

.laxxview-horizontal img,
.laxxview-horizontal video {
  max-height: var(--lv-max-height);
  max-width: var(--lv-max-width-horizontal) !important;
}

.laxxview-base {
  position: relative;
  width: 100%;
  pointer-events: none !important;
}

.laxxview-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none !important;
}

.laxxview-5pt .laxxview-inner {
  transform: translateZ(-5px);
}

.laxxview-10pt .laxxview-inner {
  transform: translateZ(-10px);
}

.laxxview-15pt .laxxview-inner {
  transform: translateZ(-15px);
}

.laxxview-20pt .laxxview-inner {
  transform: translateZ(-20px);
}

.laxxview-25pt .laxxview-inner {
  transform: translateZ(-25px);
}

.laxxview-30pt .laxxview-inner {
  transform: translateZ(-30px);
}

.laxxview-5pt .laxxview-left,
.laxxview-5pt .laxxview-right,
.laxxview-10pt .laxxview-left,
.laxxview-10pt .laxxview-right,
.laxxview-15pt .laxxview-left,
.laxxview-15pt .laxxview-right,
.laxxview-20pt .laxxview-left,
.laxxview-20pt .laxxview-right,
.laxxview-25pt .laxxview-left,
.laxxview-25pt .laxxview-right,
.laxxview-30pt .laxxview-left,
.laxxview-30pt .laxxview-right {
  position: absolute;
  top: 0;
  background-color: var(--lv-white);
  height: 100%;
}

.laxxview-5pt .laxxview-left,
.laxxview-5pt .laxxview-right {
  width: 5px;
}

.laxxview-10pt .laxxview-left,
.laxxview-10pt .laxxview-right {
  width: 10px;
}

.laxxview-15pt .laxxview-left,
.laxxview-15pt .laxxview-right {
  width: 15px;
}

.laxxview-20pt .laxxview-left,
.laxxview-20pt .laxxview-right {
  width: 20px;
}

.laxxview-25pt .laxxview-left,
.laxxview-25pt .laxxview-right {
  width: 25px;
}

.laxxview-30pt .laxxview-left,
.laxxview-30pt .laxxview-right {
  width: 30px;
}

.laxxview-5pt .laxxview-left {
  right: auto;
  transform: rotateY(-90deg) translateZ(2.5px) translateX(2.5px);
}

.laxxview-5pt .laxxview-right {
  right: 0;
  transform: rotateY(90deg) translateZ(2.5px) translateX(-2.5px);
}

.laxxview-10pt .laxxview-left {
  transform: rotateY(-90deg) translateZ(5px) translateX(5px);
}

.laxxview-10pt .laxxview-right {
  right: 0;
  transform: rotateY(90deg) translateZ(5px) translateX(-5px);
}

.laxxview-15pt .laxxview-left {
  transform: rotateY(-90deg) translateZ(7.5px) translateX(7.5px);
}

.laxxview-15pt .laxxview-right {
  right: 0;
  transform: rotateY(90deg) translateZ(7.5px) translateX(-7.5px);
}

.laxxview-20pt .laxxview-left {
  transform: rotateY(-90deg) translateZ(10px) translateX(10px);
}

.laxxview-20pt .laxxview-right {
  right: 0;
  transform: rotateY(90deg) translateZ(10px) translateX(-10px);
}

.laxxview-25pt .laxxview-left {
  transform: rotateY(-90deg) translateZ(12.5px) translateX(12.5px);
}

.laxxview-25pt .laxxview-right {
  right: 0;
  transform: rotateY(90deg) translateZ(12.5px) translateX(-12.5px);
}

.laxxview-30pt .laxxview-left {
  transform: rotateY(-90deg) translateZ(15px) translateX(15px);
}

.laxxview-30pt .laxxview-right {
  right: 0;
  transform: rotateY(90deg) translateZ(15px) translateX(-15px);
}

.laxxview-5pt .laxxview-top,
.laxxview-5pt .laxxview-bottom,
.laxxview-10pt .laxxview-top,
.laxxview-10pt .laxxview-bottom,
.laxxview-15pt .laxxview-top,
.laxxview-15pt .laxxview-bottom,
.laxxview-20pt .laxxview-top,
.laxxview-20pt .laxxview-bottom,
.laxxview-25pt .laxxview-top,
.laxxview-25pt .laxxview-bottom,
.laxxview-30pt .laxxview-top,
.laxxview-30pt .laxxview-bottom {
  position: absolute;
  width: 100%;
  background-color: var(--lv-gray);
}

.laxxview-5pt .laxxview-top,
.laxxview-5pt .laxxview-bottom {
  height: 5px;
}

.laxxview-10pt .laxxview-top,
.laxxview-10pt .laxxview-bottom {
  height: 10px;
}

.laxxview-15pt .laxxview-top,
.laxxview-15pt .laxxview-bottom {
  height: 15px;
}

.laxxview-20pt .laxxview-top,
.laxxview-20pt .laxxview-bottom {
  height: 20px;
}

.laxxview-25pt .laxxview-top,
.laxxview-25pt .laxxview-bottom {
  height: 25px;
}

.laxxview-30pt .laxxview-top,
.laxxview-30pt .laxxview-bottom {
  height: 30px;
}

.laxxview-5pt .laxxview-top {
  top: 0;
  transform: rotateX(90deg) translateZ(2.5px) translateY(2.5px);
}

.laxxview-5pt .laxxview-bottom {
  bottom: 0;
  transform: rotateX(-90deg) translateZ(2.5px) translateY(-2.5px);
}

.laxxview-10pt .laxxview-top {
  top: 0;
  transform: rotateX(90deg) translateZ(5px) translateY(5px);
}

.laxxview-10pt .laxxview-bottom {
  bottom: 0;
  transform: rotateX(-90deg) translateZ(5px) translateY(-5px);
}

.laxxview-15pt .laxxview-top {
  top: 0;
  transform: rotateX(90deg) translateZ(7.5px) translateY(7.5px);
}

.laxxview-15pt .laxxview-bottom {
  bottom: 0;
  transform: rotateX(-90deg) translateZ(7.5px) translateY(-7.5px);
}

.laxxview-20pt .laxxview-top {
  top: 0;
  transform: rotateX(90deg) translateZ(10px) translateY(10px);
}

.laxxview-20pt .laxxview-bottom {
  bottom: 0;
  transform: rotateX(-90deg) translateZ(10px) translateY(-10px);
}

.laxxview-25pt .laxxview-top {
  top: 0;
  transform: rotateX(90deg) translateZ(12.5px) translateY(12.5px);
}

.laxxview-25pt .laxxview-bottom {
  bottom: 0;
  transform: rotateX(-90deg) translateZ(12.5px) translateY(-12.5px);
}

.laxxview-30pt .laxxview-top {
  top: 0;
  transform: rotateX(90deg) translateZ(15px) translateY(15px);
}

.laxxview-30pt .laxxview-bottom {
  bottom: 0;
  transform: rotateX(-90deg) translateZ(15px) translateY(-15px);
}

.laxxview-front .layer-1 {
  transform: translate3d(0, 0, 5px) !important;
}

.laxxview-front .layer-2 {
  transform: translate3d(0, 0, 10px) !important;
}

.laxxview-front .layer-3 {
  transform: translate3d(0, 0, 15px) !important;
}

.laxxview-front .layer-4 {
  transform: translate3d(0, 0, 20px) !important;
}

.laxxview-front .layer-5 {
  transform: translate3d(0, 0, 25px) !important;
}

.laxxview-front .layer-6 {
  transform: translate3d(0, 0, 30px) !important;
}

.laxxview-front .layer-7 {
  transform: translate3d(0, 0, 35px) !important;
}

.laxxview-front .layer-8 {
  transform: translate3d(0, 0, 40px) !important;
}

.laxxview-front .layer-9 {
  transform: translate3d(0, 0, 45px) !important;
}

.laxxview-front .layer-10 {
  transform: translate3d(0, 0, 50px) !important;
}

.laxxview-back .layer-1 {
  transform: scale(0.995) translate3d(0, 0, 5px);
}

.laxxview-back .layer-2 {
  transform: scale(0.99) translate3d(0, 0, 10px);
}

.laxxview-back .layer-3 {
  transform: scale(0.985) translate3d(0, 0, 15px);
}

.laxxview-back .layer-4 {
  transform: scale(0.98) translate3d(0, 0, 20px);
}

.laxxview-back .layer-5 {
  transform: scale(0.975) translate3d(0, 0, 25px);
}

.laxxview-back .layer-6 {
  transform: scale(0.97) translate3d(0, 0, 30px);
}

.laxxview-front .layer-glass {
  transform: translate3d(0, 0, 6px);
  opacity: 0.15;
}

.laxxview-front .layer-shadow {
  transform: translate3d(0, 0, 7px);
  opacity: 0.66;
}

.laxxview-back .layer-frame-back {
  transform: translate3d(0, 0, -10px);
}

.laxxview-back .layer-mini {
  transform: translate3d(0, 0, -5px);
}

.laxxview-back .layer-glass {
  transform: translate3d(0, 0, -4px);
  opacity: 0.15;
}

.laxxview-back .layer-shadow {
  transform: translate3d(0, 0, -3px);
  opacity: 0.66;
}

.layer-mini img {
  transform: scale(0.99, 0.995);
}

.matte,
.chrome,
.glossy,
.mirror,
.refractor,
.glass {
  pointer-events: all !important;
  overflow: hidden;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  -moz-mask-mode: alpha;
  mask-size: cover;
  -webkit-mask-size: cover;
  -moz-mask-size: cover;
}

.matte::after,
.glossy::after,
.chrome::after,
.mirror::after,
.refractor::after,
.glass::after {
  content: "";
  position: absolute;
  top: calc(var(--y, 0) * 1px - 700px);
  left: calc(var(--x, 0) * 1px - 700px);
  width: 1400px;
  height: 1400px;
  background-size: cover;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
}

.matte::after {
  top: calc(var(--y, 0) * 1px - 300px);
  left: calc(var(--x, 0) * 1px - 300px);
  width: 600px;
  height: 600px;
  background: radial-gradient(white, transparent 70%);
  opacity: 0.5;
}

.glossy::after {
  background-image: url("../img/laxxview-cards/effects/chrome.jpg");
  mix-blend-mode: multiply;
  -webkit-mix-blend-mode: multiply;
  -moz-mix-blend-mode: multiply;
  opacity: 0.5;
}

.chrome::after {
  background-image: url("../img/laxxview-cards/effects/chrome.jpg");
  mix-blend-mode: multiply;
  opacity: 0.75;
}

.mirror::after {
  background-image: url("../img/laxxview-cards/effects/mirror.jpg");
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
}

.refractor::after {
  background-image: url("../img/laxxview-cards/effects/refractor.jpg");
  mix-blend-mode: color-dodge;
  -webkit-mix-blend-mode: color-dodge;
  -moz-mix-blend-mode: color-dodge;
  transform: scale(1.25);
  opacity: 0.75;
}

.glass::after {
  background-image: url("../img/laxxview-cards/effects/reflection.jpg");
}

.watermark {
  position: absolute;
  top: 0;
  mix-blend-mode: overlay;
}

@media only screen and (max-width: 768px) {
  .laxxview img,
  .laxxview video {
    width: 100%;
  }
}