#tridiv {
  perspective: 500px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 100%;
  scale: 2;
  pointer-events: none;
  @media (width < 992px) {
    overflow: visible;
    scale: 1;
  }
}
.face {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}



.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="cuboid"] .ft, [class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 100%;
}
/* .cub-1 styles */
.cub-1 {
  transform:translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:16em;
  height:9em;
  margin:-4.5em 0 0 -8em;
  animation: rotateXAnim 3s ease forwards;
}
.cub-1 .ft {
  transform:translateZ(0.125em);
}
.cub-1 .bk {
  transform:translateZ(-0.125em) rotateY(180deg);
  background:url('/assets/img/back.webp');
}
.cub-1 .rt, .cub-1 .lt {
  width:.25em;
  height:9em;
}
.cub-1 .tp, .cub-1 .bm {
  width:16em;
  height:.25em;
}
.cub-1 .face {
  background-color:#a6a6a6;
}
.cub-1 .ft {
  background:url('/assets/img/screen.webp');
}
/* .cub-2 styles */
.cub-2 {
  transform:translate3D(0em, 4.5em, 4.55em) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:16em;
  height:9em;
  margin:-4.5em 0 0 -8em;
  
}
.cub-2 .ft {
  transform:translateZ(0.1em);
}
.cub-2 .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.cub-2 .rt, .cub-2 .lt {
  width:0.2em;
  height:9em;
}
.cub-2 .tp, .cub-2 .bm {
  width:16em;
  height:0.2em;
}
.cub-2 .face {
  background-color:#a6a6a6;
}
.cub-2 .ft {
  background:url('/assets/img/keyboard.webp');
}

  .mouseMoveOrbit{
    transition: all .1s ease;
  transform: rotatex(calc(var(--x) * 0.0deg)) rotatey(calc(var(--y) * -0.1deg));
  @media (width < 992px) {
    transform: rotatex(calc(var(--x) * 0.0deg)) rotatey(calc(var(--y) * -0.0deg));
    animation: rotateYAnim 10s linear infinite;
  }

}

@keyframes rotateXAnim {
  0%{
    transform-origin:bottom;
    rotate: x -90deg;
  }
  100%{
    transform-origin:bottom;
    rotate: x 20deg;
  }
}
@keyframes rotateYAnim {
  0%{
    transform-origin:bottom;
    rotate: y 0deg;
  }
  100%{
    transform-origin:bottom;
    rotate: y 360deg;
  }
}

.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }    
}



.splash-screen{
  position:fixed;
  top:0;
  left:0;
  background:linear-gradient(0deg, var(--PrimaryColor) 0%, var(--PrimaryColorLite) 100%);
  height: 100vh;
  width: 100%;
  text-align:center;
  align-content:center;
  z-index: 1031;
  & img{
    scale:5;
    position:absolute;
    transition: all 1s ease;
    animation:animate 2s ease forwards;
    animation-delay:1s;
  }
}

@keyframes animate {
  from{
    top:50%;
    left:50%;
    scale:5;
  }
  to{
    top:calc(var(--top)*1px);
    left:calc(var(--left)*1px);
    scale:1;
  }
}

@keyframes hide-anim{
  0%{opacity:1;}
  99%{
    
    opacity:0;
  }
  100%{
    display:none;  
  }
  
}


.hide{
 animation:hide-anim .3s ease forwards;
}