:root 
        { 
                --CUBE_WIDTH:300; 
                --CUBE_HEIGHT:1100;
                --CUBE_DEPTH:300;
        }



        .CUBEX_CONTAINER.show
        {
                opacity: 1; 
                visibility: visible;
                transition: opacity 4.0s;
                margin:0 auto;
        }
        .CUBEX_CONTAINER.hide
        {
                opacity: 0; 
                visibility: hidden;  
                transition: opacity 4.0s;
        }

        @scope (.CUBEX_CONTAINER)
        {
                img { width:100px; height:auto;}

                
                :scope 
                { 
                        outline:3px solid red; 
                        position:relative;
                        /* left:40%;
                        top:5%; */
                        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
                        transform-style:preserve-3d;  

                        width:calc(var(--CUBE_WIDTH) * 1px);
                        height:calc(var(--CUBE_HEIGHT) * 1px);

                        display:grid;
                        opacity: 0; 
                        visibility: hidden;  
                        position:absolute;
                        left:35%;
                        z-index:99;
                }

                
                
                .multi_cube:hover { transform: rotateX(13deg) rotateY(-55deg) translateX(225px) translateY(-100px) scale(4) }
                .multi_cube:hover { transform: rotateX(18deg) rotateY(-55deg) translateX(125px) translateY(-100px) scale(4) }


                .CUBEX
                { 
                        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
                        transform-style:preserve-3d;

                        width:calc(var(--CUBE_WIDTH) * 1px);
                        height:calc(var(--CUBE_HEIGHT) * 1px);  
                                                              
                        background-color:#77777733;
                        background:transparent;
                }

                
                .FACE                         
                { 
                        
                        width:100%;
                        height:100%;
                        position:absolute; 
                }


                .FACE                         
                { 
                        background-color:#77777733;
                        /*
                        box-shadow:2px 2px 35px inset silver, 1px 1px 5px silver; 
                        background-color:blue;
                        background-size:100%;
                        
                        background:transparent;
                        */
                }
                .FACE.LEFT, .FACE.RIGHT { background-color:#22ff2299;}
                
                .FACE.FRONT              {                                                              transform: rotateY(0deg)        translateZ(calc((var(--CUBE_WIDTH) / 2) * 1px)); }
                .FACE.RIGHT              { height:calc(var(--CUBE_HEIGHT) * 1px);                       transform: rotateY(90deg)       translateZ(calc((var(--CUBE_WIDTH) / 2) * 1px)); }
                .FACE.BACK               {                                                              transform: rotateY(180deg)      translateZ(calc((var(--CUBE_WIDTH) / 2) * 1px)); }
                .FACE.LEFT               { height:calc(var(--CUBE_HEIGHT) * 1px);                       transform: rotateY(-90deg)      translateZ(calc((var(--CUBE_WIDTH) / 2) * 1px)); }
                .FACE.TOP                { height:calc(var(--CUBE_DEPTH) * 1px);                        transform: rotateX(90deg)       translateZ(calc((var(--CUBE_HEIGHT) / 2) * 1px)); }
                .FACE.BOTTOM             { height:calc(var(--CUBE_DEPTH) * 1px);                        transform: rotateX(-90deg)      translateZ(calc((var(--CUBE_HEIGHT) / 2) * 1px)); }
                .FACE.CARGO              {                                                              transform: rotateX(0deg)        translateZ(calc((var(--CUBE_WIDTH) / 2) * 1px)); }
                
                /* ANIMATION */  
                @keyframes cube_animation_rotate_alpha
                {
                        
                        0%    { transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg); color:blue; translate:0px;}

                        50%   { transform:rotateX(.525deg) rotateY(.125deg) rotateZ(.1deg); color:blue; translate:150px; }
                                /* rotate:.125 .125 .1 0deg;  */
                        /* to      { rotate:.125 .125 .1 360deg; color:blue;} */
                        
                        0%    { transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg); color:blue; translate:0px;}
                }
                
                @keyframes cube_animation_rotate_alpha
                {
                        
                        0%    { transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg); color:blue; translate:0px; scale:1; }

                        50%   { transform:rotateX(22.525deg) rotateY(.125deg) rotateZ(.1deg); color:blue; translate:150px;  scale:1;}
                                /* rotate:.125 .125 .1 0deg;  */
                        /* to      { rotate:.125 .125 .1 360deg; color:blue;} */
                        
                        0%    { transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg); color:blue; translate:0px; scale:1;}
                }
                
        }
        @scope (.KATE_CUBEX_CONTAINER)          
        { 
                :scope          { 
                        
        --CUBE_WIDTH:50; --CUBE_HEIGHT:50; --CUBE_DEPTH:50; display:grid; 
        visibility:visible;
        opacity:1.0; 
        grid-template-rows:1fr; grid-template-columns:1fr;
transform-style:preserve-3d; }
                .face           { background-image:url("/wp-content/plugins/WONDERMAN/assets/images/KATE.png"); }
       
       
         .CUBEX
        { 
                transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
                transform-style:preserve-3d;

                width:calc(var(--CUBE_WIDTH) * 1px);
                height:calc(var(--CUBE_HEIGHT) * 1px);  
                                                        
                background-color:#77777733;
                /* background:transparent; */

              
        }
          .multi-cube
                {
                        transform-style:preserve-3d;
                }
                
        }