.boxart-demo-grid{margin-top:.5rem}.boxart-demo__panel{overflow:hidden;padding-bottom:.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.boxart-stage{cursor:-webkit-grab;cursor:grab;-ms-touch-action:none;touch-action:none}.boxart-stage,.boxart,.boxart__side,.boxart__side img{-ms-touch-action:none;touch-action:none}@media(pointer: coarse){.boxart-demo__panel{-ms-scroll-chaining:none;overscroll-behavior:contain}}.boxart-stage--dragging{cursor:-webkit-grabbing;cursor:grabbing}.boxart-demo__panel-hitbox{position:absolute;border-radius:.5rem;border:2px dashed rgba(0,0,0,0);pointer-events:none;-webkit-transition:border-color 120ms ease;transition:border-color 120ms ease}.boxart-demo__panel:hover .boxart-demo__panel-hitbox{border-color:hsla(0,0%,100%,.22)}.boxart-demo__panel--dragging .boxart-demo__panel-hitbox{border-color:hsla(0,0%,100%,.38)}.boxart-stage--motion{-webkit-box-reflect:unset}.boxart-stage--motion .boxart__side{-webkit-box-shadow:none;-moz-box-shadow:none;-o-box-shadow:none;-ms-box-shadow:none;box-shadow:none}.boxart-demo__title{margin-top:0;margin-bottom:.5rem;text-align:center;color:#fff}.boxart-demo-grid .boxart-wrapper--l,.boxart-demo-grid .boxart-wrapper--r{float:none;width:auto;margin-left:0;margin-right:0}@media(max-width: 37.4rem){.boxart-demo__panel{padding-bottom:0}}.boxart-stage{-webkit-box-reflect:below -120px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(#ffffff));display:block;left:50%;margin:20px 0 0 -300px;-webkit-perspective:700px;-moz-perspective:700px;-ms-perspective:700px;-o-perspective:700px;perspective:700px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;-o-perspective-origin:50% 50%;-ms-perspective-origin:50% 50%;perspective-origin:50% 50%;position:relative;width:600px;height:600px}.boxart-stage__target{position:absolute;top:0;bottom:0;left:0;right:0}.boxart-wrapper{border-radius:8px;padding:16px;padding-bottom:250px}.boxart-wrapper--l{background:#001;background:rgba(0,0,17,.5333333333)}.boxart-wrapper--r{background:#110;background:rgba(17,17,0,.5333333333)}@media(min-width: 768px){.boxart-wrapper--l,.boxart-wrapper--r{width:49%}.boxart-wrapper--l{float:left;margin-right:1%}.boxart-wrapper--r{float:right;margin-left:1%}}.boxart{will-change:transform;margin-top:-177px;margin-left:-125px;position:absolute;top:50%;left:50%;-webkit-transform:rotate3d(1, 0, 0, -40deg);-moz-transform:rotate3d(1, 0, 0, -40deg);-ms-transform:rotate3d(1, 0, 0, -40deg);-o-transform:rotate3d(1, 0, 0, -40deg);transform:rotate3d(1, 0, 0, -40deg);-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;width:250px;height:355px}.boxart__side{margin:0;padding:0;border:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;-webkit-box-shadow:inset 0 0 15px rgba(0,0,0,.7);-moz-box-shadow:inset 0 0 15px rgba(0,0,0,.7);-o-box-shadow:inset 0 0 15px rgba(0,0,0,.7);-ms-box-shadow:inset 0 0 15px rgba(0,0,0,.7);box-shadow:inset 0 0 15px rgba(0,0,0,.7);display:block;margin-top:0;margin-left:0;overflow:hidden;position:absolute;top:50%;left:50%;-webkit-transform-style:flat;-moz-transform-style:flat;-o-transform-style:flat;transform-style:flat}.boxart__side img{display:block;margin:0;padding:0;border:0;border-radius:0px;width:100%;height:100%;z-index:10}.boxart__side--front,.boxart__side--back{width:250px;height:355px;margin-top:-177px;margin-left:-125px}.boxart-wrapper--r .boxart__side--front,.boxart-wrapper--r .boxart__side--back{width:272px;margin-left:-136px}.boxart__side--front{-webkit-transform:translate3d(0px, 0px, 25px);-moz-transform:translate3d(0px, 0px, 25px);-o-transform:translate3d(0px, 0px, 25px);transform:translate3d(0px, 0px, 25px)}.boxart__side--back{-webkit-transform:rotateY(180deg) translate3d(0px, 0px, 25px);-moz-transform:rotateY(180deg) translate3d(0px, 0px, 25px);-o-transform:rotateY(180deg) translate3d(0px, 0px, 25px);-transform:rotateY(180deg) translate3d(0px, 0px, 25px)}.boxart__side--top,.boxart__side--bottom{width:250px;height:50px;margin-top:-177px;margin-left:-125px}.boxart-wrapper--r .boxart__side--top,.boxart-wrapper--r .boxart__side--bottom{width:272px;margin-left:-136px}.boxart__side--top{-webkit-transform:rotateX(90deg) translate3d(0px, 0px, 25px);-moz-transform:rotateX(90deg) translate3d(0px, 0px, 25px);-o-transform:rotateX(90deg) translate3d(0px, 0px, 25px);-transform:rotateX(90deg) translate3d(0px, 0px, 25px)}.boxart__side--bottom{-webkit-transform:rotateX(-90deg) translate3d(0px, 0px, 330px);-moz-transform:rotateX(-90deg) translate3d(0px, 0px, 330px);-o-transform:rotateX(-90deg) translate3d(0px, 0px, 330px);-transform:rotateX(-90deg) translate3d(0px, 0px, 330px)}.boxart__side--left,.boxart__side--right{width:50px;height:355px;margin-top:-177px;margin-left:-125px}.boxart-wrapper--r .boxart__side--left,.boxart-wrapper--r .boxart__side--right{margin-left:-136px}.boxart__side--left{-webkit-transform:rotateY(-90deg) translate3d(0px, 0px, 25px);-moz-transform:rotateY(-90deg) translate3d(0px, 0px, 25px);-o-transform:rotateY(-90deg) translate3d(0px, 0px, 25px);-transform:rotateY(-90deg) translate3d(0px, 0px, 25px)}.boxart__side--right{-webkit-transform:rotateY(90deg) translate3d(0px, 0px, 225px);-moz-transform:rotateY(90deg) translate3d(0px, 0px, 225px);-o-transform:rotateY(90deg) translate3d(0px, 0px, 225px);-transform:rotateY(90deg) translate3d(0px, 0px, 225px)}.boxart-wrapper--r .boxart__side--right{-webkit-transform:rotateY(90deg) translate3d(0px, 0px, 247px);-moz-transform:rotateY(90deg) translate3d(0px, 0px, 247px);-o-transform:rotateY(90deg) translate3d(0px, 0px, 247px);-transform:rotateY(90deg) translate3d(0px, 0px, 247px)}/* Built with Synticore Website Compiler 1.1.4 */
/*# sourceMappingURL=interactive-3d-boxart.min.css.map */