.window-3d,.window-3d__rect,.window-3d__side{backface-visibility:hidden;transform-style:preserve-3d}.window-3d{--window-3d-distance-min:.75;--window-3d-distance-max:.9;--window-3d-height:33vh;--window-3d-width:calc(var(--window-3d-height)*.66);--window-3d-depth:2em;--window-3d-skew-x:rotateX(20deg);--window-3d-skew-x-end:rotateX(10deg);--window-3d-skew-y:rotateY(-30deg);--window-3d-skew-y-end:rotateY(-10deg);height:var(--window-3d-height);max-width:100%;width:var(--window-3d-width)}.window-3d--small{--window-3d-height:50vmax}@keyframes animate-left{0%{transform:rotateY(45deg) scale3d(var(--window-3d-distance-min),var(--window-3d-distance-min),var(--window-3d-distance-min))}to{transform:rotateY(-45deg) scale3d(var(--window-3d-distance-max),var(--window-3d-distance-max),var(--window-3d-distance-max))}}@keyframes animate-right{0%{transform:rotateY(-45deg) scale3d(var(--window-3d-distance-min),var(--window-3d-distance-min),var(--window-3d-distance-min))}to{transform:rotateY(45deg) scale3d(var(--window-3d-distance-max),var(--window-3d-distance-max),var(--window-3d-distance-max))}}.window-3d--animate-left{animation:animate-left 8s ease-in-out infinite alternate}.window-3d--animate-right{animation:animate-right 6s ease-in-out infinite alternate-reverse}@keyframes skew{0%{transform:var(--window-3d-skew-x) var(--window-3d-skew-y)}to{transform:var(--window-3d-skew-x-end) var(--window-3d-skew-y-end)}}.has-window .window-3d,.window-3d--skew{animation:skew 6s ease-in-out infinite alternate-reverse}.has-window.is-left .window-3d,.window-3d--skew-right{--window-3d-skew-x:rotateX(-10deg);--window-3d-skew-x-end:rotateX(10deg);--window-3d-skew-y:rotateY(10deg);--window-3d-skew-y-end:rotateY(30deg)}.has-window.is-right .window-3d,.window-3d--skew-left{--window-3d-skew-x:rotateX(10deg);--window-3d-skew-x-end:rotateX(-10deg);--window-3d-skew-y:rotateY(-10deg);--window-3d-skew-y-end:rotateY(-30deg)}.window-3d--skew-bottom{--window-3d-skew-x:rotateX(20deg);--window-3d-skew-x-end:rotateX(10deg);--window-3d-skew-y:rotateY(-10deg);--window-3d-skew-y-end:rotateY(-30deg)}.window-3d--skew-top{--window-3d-skew-x:rotateX(-30deg);--window-3d-skew-x-end:rotateX(-10deg);--window-3d-skew-y:rotateY(10deg);--window-3d-skew-y-end:rotateY(40deg)}.window-3d__side{background-color:#b1b1b1;position:absolute}.window-3d__side--back,.window-3d__side--front{height:var(--window-3d-height);width:var(--window-3d-width)}.window-3d__side--front{background-color:#dedede;transform:translateZ(calc(var(--window-3d-depth)/2))}.window-3d__side--back{transform:rotateY(-180deg) translateZ(calc(var(--window-3d-depth)/2))}.window-3d__side--left,.window-3d__side--right{left:calc(var(--window-3d-depth)*-1/2);width:var(--window-3d-depth)}.window-3d__side--right{height:var(--window-3d-height);top:0;transform:rotateY(90deg) translateZ(var(--window-3d-width))}.window-3d__side--left{height:var(--window-3d-height);transform:rotateY(-90deg)}.window-3d__side--bottom,.window-3d__side--top{height:var(--window-3d-depth);top:calc(var(--window-3d-depth)*-1/2);width:var(--window-3d-width)}.window-3d__side--top{transform:rotateX(90deg)}.window-3d__side--bottom{transform:rotateX(-90deg) translateZ(var(--window-3d-height))}@media (min-width:768px){.window-3d{--window-3d-height:50vh;--window-3d-distance-max:.75;--window-3d-depth:3em}.window-3d--small{--window-3d-height:33vh;--window-3d-depth:4em}}@media (min-width:1024px){.window-3d{--window-3d-distance-min:.5;--window-3d-distance-max:.85;--window-3d-depth:4em}.window-3d--small{--window-3d-distance-max:.75;--window-3d-depth:3em}}