.cube-3d-side-content {
  width: 585px;
  height: 706px;
}

.cube-3d-side > svg {
  width: calc(var(--units) * var(--width));
  height: calc(var(--units) * var(--height));
  pointer-events:none;
}
.cube-3d-side:nth-child(5) > svg,
.cube-3d-side:nth-child(6) > svg {
  width: calc(var(--units) * var(--width));
  height: calc(var(--units) * var(--width));
}

.scene-3d {
  --sc: 0;
  --sx: 0;
  --sy: 0;
  --x: 0;
  --y: 0;
  --perspective: 1000;
  --units: 0.1vmin;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: flat;
  perspective: calc(var(--units) * var(--perspective));
  margin: 0;
  padding: 0;

  transform-origin: center;

  transform: translate(var(--x), var(--y)) scale(var(--sc));
}


.scene-3d.one-column {
    --sc:1.7 !important;
}

.scene-3d * {
  /*--perspective:1000;*/
  transform-style: preserve-3d;
}

.cube-3d-side *,
.cube-3d-side *:after,
.cube-3d-side *:before {
  /*
  -webkit-image-rendering: pixelated;
          image-rendering: pixelated;
  */
  transform-style: flat;
}

.scene-3d .noback {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.scene-3d,
.scene-3d *,
.scene-3d *::selection {
  background: transparent;
}
.scene-3d,
.scene-3d *,
.scene-3d *::-moz-selection {
  background: transparent;
}
.scene-3d,
.scene-3d * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.scene-3d,
.scene-3d * {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}

.object-3d {
  --trans-dur: 1;
  --trans-del: 0;
  --x: 0;
  --y: 0;
  --z: -300;
  --tx: 0;
  --ty: 0;
  --tz: 0;
  --rx: 0;
  --ry: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  animation: none;
  transform-style: preserve-3d;
  transform-origin: center;
  transform: translate3d(
      calc(var(--units) * var(--x)),
      calc(var(--units) * var(--y)),
      calc(var(--units) * var(--z))
    )
    rotateX(calc(1deg * var(--rx))) rotateY(calc(1deg * var(--ry)));
  /*image-rendering: pixelated;*/
}

.bump-z {
  animation: bump-z 0.5s forwards !important;
}
@keyframes bump-z {
  0% {
    animation-timing-function: "ease-out";
    transform: translate3d(
      calc(var(--units) * var(--x)),
      calc(var(--units) * var(--y)),
      calc(var(--units) * var(--z))
    );
  }
  50% {
    animation-timing-function: "ease-in";
    transform: translate3d(
      calc(var(--units) * var(--x)),
      calc(var(--units) * var(--y)),
      calc(var(--units) * var(--tz))
    );
  }
  100% {
    animation-timing-function: "linear";
    transform: translate3d(
      calc(var(--units) * var(--x)),
      calc(var(--units) * var(--y)),
      calc(var(--units) * var(--z))
    );
  }
}

.cube-3d-shadow {
  position: absolute;
  --col: #000;
  --op: 1;
  --z: 0;
  width: calc(var(--units) * var(--width) * 4);
  height: calc(var(--units) * var(--height) * 4);
  transform-style: flat;
  transform:translateZ(calc(var(--units) * (var(--z) * 4)));
  filter: blur(calc(var(--units) * var(--width) * 0.5));
  pointer-events: none !important;
}

.cube-3d-shadow:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--col);
  opacity: var(--op);
  transform-style: flat;
  clip-path: polygon(
    50% 0%,
    100% 10%,
    100% 90%,
    50% 100%,
    0% 90%,
    0% 10%,
    50% 0%
  );
  pointer-events: none !important;
}

.cube-3d.hide {
  display: none !important;
}

.cube-3d {
  --width: 585;
  --height: 706;
  --offset: 0;
  --object-trx: 0;
  --object-try: 0;
  --object-rx: 0;
  --object-ry: 0;
  display: flex;
  opacity: 1;

  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  transform-style: preserve-3d;
  transform-origin: center;
  transform: rotateX(calc(1deg * var(--object-rx)))
    rotateY(calc(1deg * (var(--object-ry) - 45)));
  /*image-rendering: pixelated;*/
}

.cube-3d-side {
  --ry: 0;
  --rx: 0;
  background: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  position: absolute;
  width: calc(var(--units) * (var(--width) + var(--offset)));
  height: calc(var(--units) * (var(--height) + var(--offset)));
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  /*overflow:hidden;*/
  transform-style: preserve-3d;
  /*transform-style: flat;*/
  transform-origin: center;
  transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
    translateZ(
      calc((var(--units) * (var(--width) + var(--offset)) * 0.5) - 1px)
    );
  z-index: -1;
}

.cube-3d-side:nth-child(5),
.cube-3d-side:nth-child(6) {
  width: calc(var(--units) * (var(--width) + var(--offset)));
  height: calc(var(--units) * (var(--width) + var(--offset)));
  transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
    translateZ(
      calc((var(--units) * (var(--height) + var(--offset)) * 0.5) - 1px)
    );
}

.cube-3d-side:nth-child(1) {
  --ry: 45;
}
.cube-3d-side:nth-child(2) {
  --ry: 135;
}
.cube-3d-side:nth-child(3) {
  --ry: 225;
}
.cube-3d-side:nth-child(4) {
  --ry: 315;
}
.cube-3d-side:nth-child(5) {
  --ry: 45;
  --rx: 90;
}
.cube-3d-side:nth-child(6) {
  --ry: 45;
  --rx: -90;
}


.cube-3d-side > video, 
.cube-3d-side > img {  
  position:absolute;
  padding:0; margin:0; 
  object-fit: cover; 
  height:calc(var(--units) * var(--height)); 
  width:calc(var(--units) * var(--width));  
  pointer-events:none;
}

.cube-3d-side > video{
    background:#000;

}



.cube-3d-side:nth-child(5) > video, .cube-3d-side:nth-child(5) > img,
.cube-3d-side:nth-child(6) > video, .cube-3d-side:nth-child(6) > img { 
  padding:0; margin:0; object-fit: cover; 
  height:calc(var(--units) * var(--width)); 
  width:calc(var(--units) * var(--width));  
}

/*
.cube-3d-side > video {
  position: absolute;
  padding: 0; margin: 0;
  object-fit: cover;
  height: calc(var(--units) * var(--height));
  width: calc(var(--units) * var(--width));
  pointer-events: none;
}
*/

.cube-3d-side:nth-child(5) > video,
.cube-3d-side:nth-child(6) > video {
  position: absolute;
  padding: 0;
  margin: 0;
  object-fit: cover;
  height: calc(var(--units) * var(--width));
  width: calc(var(--units) * var(--width));
}

.cube-3d-side > picture,
.cube-3d-side > picture img {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  object-fit: cover;
  height: calc(var(--units) * var(--width));
  width: calc(var(--units) * var(--width));
  pointer-events: none;
}

.cube-3d-side:nth-child(-n + 4) > picture,
.cube-3d-side:nth-child(-n + 4) > picture img,
.cube-3d-side:nth-child(n + 6) > picture,
.cube-3d-side:nth-child(n + 6) > picture img {
  width: calc(var(--units) * var(--width));
  height: auto;
}

.cube-3d-side:nth-child(-n + 4) > picture,
.cube-3d-side:nth-child(n + 6) > picture {
  top: 0;
  left: 0;
}

.rotate-to {
  animation: rotate-to 0.5s ease-in-out forwards !important;
}
@keyframes rotate-to {
  from {
    transform: rotateX(calc(1deg * var(--object-rx)))
      rotateY(calc(1deg * (var(--object-ry) - 45)));
  }
  to {
    transform: rotateX(calc(1deg * var(--object-trx)))
      rotateY(calc(1deg * (var(--object-try) - 45)));
  }
}


.dynamic-shadow .cube-3d .cube-3d-side{
 background:black !important;
 pointer-events:none;
 
}

.dynamic-shadow {
    --op: 1;
    opacity:var(--op);
    filter:blur( calc(0.1 * var(--units) * var(--width)) ) opacity(0.5);
    perspective: calc(var(--units) * var(--perspective) * 2);
    transform:translate3d(0,0, calc(-1 * var(--units) * var(--width))) scale(1.5);
    pointer-events:none;
}





.cube-3d .hide0deg,
.cube-3d .hide90deg,
.cube-3d .hide180deg,
.cube-3d .hide270deg {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s linear, visibility 0.5s linear;
  transition: opacity 0.5s linear, visibility 0.5s linear;
}

.cube-3d[data-ry="0"] .hide0deg,
.cube-3d[data-ry="90"] .hide90deg,
.cube-3d[data-ry="180"] .hide180deg,
.cube-3d[data-ry="270"] .hide270deg {
  opacity: 0;
  visibility: hidden;
}

.cube-3d.zero-side[data-ry="0"] > .cube-3d-side:nth-child(1),
.cube-3d.zero-side[data-ry="270"] > .cube-3d-side:nth-child(2),
.cube-3d.zero-side[data-ry="180"] > .cube-3d-side:nth-child(3),
.cube-3d.zero-side[data-ry="90"] > .cube-3d-side:nth-child(4) {
  /*border:solid 1px red;*/
  z-index: 9999;
}

/* 
 *
 */
.cube-3d.zero-side {
  transform: rotateX(calc(1deg * 0)) rotateY(0deg);
}
.cube-3d.zero-side .cube-3d-side {
  transform: rotateY(calc(1deg * (var(--ry) + var(--object-ry) - 45)))
    rotateX(calc(1deg * var(--rx)))
    translateZ(
      calc((var(--units) * ((var(--width) + var(--offset)) * 0.5) - 1px))
    );
}

.cube-3d.zero-side .cube-3d-side:nth-child(5),
.cube-3d.zero-side .cube-3d-side:nth-child(6) {
  transform: rotateY(calc(1deg * (var(--ry) + var(--object-ry) - 45)))
    rotateX(calc(1deg * var(--rx)))
    translateZ(
      calc(var(--units) * ((var(--height) + var(--offset)) * 0.5) - 1px)
    );
}

.simple-cube {
  --ry: -15;
  --rx: -15;
  --height: 35vmin;
  --width: 30vmin;
  position: absolute;
  perspective: 1000px;
}

.simple-cube > div {
  transform: rotateX(calc(1deg * var(--rx))) rotateY(calc(1deg * var(--ry)));
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}

.simple-cube div {
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: center;
}

.simple-cube > div > div {
  position: absolute;
  width: var(--width);
  height: var(--height);
  border: solid calc(var(--width) * 0.02) white;
  border-radius: calc(var(--width) * 0.02);
  transform: rotateX(calc(1deg * (var(--srx)))) rotateY(calc(1deg * var(--sry)))
    translateZ(calc(var(--width) * 0.5));
  box-sizing: box-border;
  box-shadow: 0 0 calc(var(--width) * 0.33) rgba(255, 255, 255, 0.25) inset,
    0 0 calc(var(--width) * 0.33) rgba(255, 255, 255, 0.25);
}
.simple-cube > div > div:nth-child(1) {
  --sry: 0;
  --srx: 0;
}
.simple-cube > div > div:nth-child(2) {
  --sry: 90;
  --srx: 0;
}
.simple-cube > div > div:nth-child(3) {
  --sry: 180;
  --srx: 0;
}
.simple-cube > div > div:nth-child(4) {
  --sry: 270;
  --srx: 0;
}

.simple-cube > div > div:nth-child(5) {
  --sry: 0;
  --srx: 90;
}
.simple-cube > div > div:nth-child(6) {
  --sry: 0;
  --srx: 270;
}

.simple-cube > div > div:nth-child(5),
.simple-cube > div > div:nth-child(6) {
  height: var(--width);
  transform: rotateX(calc(1deg * (var(--srx)))) rotateY(calc(1deg * var(--sry)))
    translateZ(calc(var(--height) * 0.5));
}

/*
 * PREVENT SCROLL UNLESS ZOOMED IN
 */
.transition-zoomed-resize-vmin .cube-3d-side {
  /*border:solid 10px red;*/
  overflow-y: auto !important;
}

.transition-zoomed-resize-vmin .ipfs > .cube-3d-side.vid-zoom-toggle video {
  /*border:solid 10px red;*/
  display: none;
}

.cube-3d-side.scroll-fade:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background-color: var(--col);
  -webkit-mask-image: linear-gradient(transparent, black);
  mask-image: linear-gradient(transparent, black);
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.transition-zoomed-resize-vmin .ipfs > .cube-3d-side.scroll-fade:after,
.transition-zoomed-in-vmin .ipfs > .cube-3d-side.scroll-fade:after {
  opacity: 0;
}










.cube-3d.token,
.cube-3d.ticket {
    --depth:20;
}

.cube-3d.token .cube-3d-side,
.cube-3d.ticket .cube-3d-side{
  width: calc(var(--units) * (var(--width) + var(--offset)));
  height: calc(var(--units) * (var(--height) + var(--offset)));
    transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
    translateZ(
      calc((var(--units) * ( var(--dep) + var(--offset)) * 0.5) - 1px)
    );
}

.cube-3d.token .cube-3d-side:nth-child(1),
.cube-3d.token .cube-3d-side:nth-child(3),
.cube-3d.ticket .cube-3d-side:nth-child(1),
.cube-3d.ticket .cube-3d-side:nth-child(3) {
  --dep:var(--depth);
}

.cube-3d.token .cube-3d-side:nth-child(2),
.cube-3d.token .cube-3d-side:nth-child(4),
.cube-3d.ticket .cube-3d-side:nth-child(2),
.cube-3d.ticket .cube-3d-side:nth-child(4)  {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  width: calc(var(--units) * (var(--depth) + var(--offset)) - 2px);
  height: calc(var(--units) * (var(--height) + var(--offset)));
  --dep:var(--width);
}

.cube-3d.token .cube-3d-side:nth-child(5),
.cube-3d.token .cube-3d-side:nth-child(6),
.cube-3d.ticket .cube-3d-side:nth-child(5),
.cube-3d.ticket .cube-3d-side:nth-child(6) {
  height: calc(var(--units) * (var(--depth) + var(--offset)) - 2px);
  width: calc(var(--units) * (var(--width) + var(--offset)) - 2px);
  --dep:var(--height);

}


.cube-3d.ticket .cube-3d-side:nth-child(5),
.cube-3d.ticket .cube-3d-side:nth-child(6) {

  --dep:calc(var(--height) - 60 );

}

.cube-3d.ticket .cube-3d-side:nth-child(n+7) {
  width: calc(var(--units) * (var(--width) + var(--offset)) - 2px);
  height: calc(var(--units) * (var(--height) + var(--offset)));
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
    --rx:0;
    --ry:45;
}

.cube-3d.ticket .cube-3d-side:nth-child(7){--dep:calc(var(--depth) * 0.1);}
.cube-3d.ticket .cube-3d-side:nth-child(8){--dep:calc(var(--depth) * 0.2);}
.cube-3d.ticket .cube-3d-side:nth-child(9){--dep:calc(var(--depth) * 0.3);}
.cube-3d.ticket .cube-3d-side:nth-child(10){--dep:calc(var(--depth) * 0.4);}
.cube-3d.ticket .cube-3d-side:nth-child(11){--dep:calc(var(--depth) * 0.5);}
.cube-3d.ticket .cube-3d-side:nth-child(12){--dep:calc(var(--depth) * -0.4);}
.cube-3d.ticket .cube-3d-side:nth-child(13){--dep:calc(var(--depth) * -0.5);}
.cube-3d.ticket .cube-3d-side:nth-child(14){--dep:calc(var(--depth) * -0.2);}
.cube-3d.ticket .cube-3d-side:nth-child(15){--dep:calc(var(--depth) * -0.1);}




.cube-3d.zero-side.token .cube-3d-side,
.cube-3d.zero-side.ticket .cube-3d-side {
  transform: rotateY(calc(1deg * (var(--ry) + var(--object-ry) - 45)))
    rotateX(calc(1deg * var(--rx)))
    translateZ(
      calc((var(--units) * ( var(--dep) + var(--offset)) * 0.5) - 1px)
    );
}

.cube-3d.zero-side.token .cube-3d-side:nth-child(5),
.cube-3d.zero-side.token .cube-3d-side:nth-child(6),
.cube-3d.zero-side.ticket .cube-3d-side:nth-child(5),
.cube-3d.zero-side.ticket .cube-3d-side:nth-child(6) {
  transform: rotateY(calc(1deg * (var(--ry) + var(--object-ry) - 45)))
    rotateX(calc(1deg * var(--rx)))
    translateZ(
      calc((var(--units) * ( var(--dep) + var(--offset)) * 0.5) - 1px)
    );
}


.transition-zoomed-resize-vmin .cube-3d-side:nth-child(n+7)  {
    visibility:hidden;
}
.cube-3d.zero-side.ticket .cube-3d-side:nth-child(n+7) {
    visibility:hidden;
}




*[data-playbutton]:after{
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    background-image:attr(data-playbutton);
    background-size:contain;
}