/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

.cubecontainer {
  width: 300px;
  height: 300px;
  position: relative;
   margin: 70px auto 40px;
  -webkit-perspective: 2000px;
}
#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ( -300px );
  -webkit-animation: spincube 23s infinite  linear;

}
#cube:hover{
    animation-play-state: paused!important;
  }


#cube .figure{
  width: 300px;
  height: 300px;
  display: block;
  background: black;
  position: absolute;
  border: 2px solid black;
}

#cube .image {
   background: url("https://exactcubes.de/wp-content/uploads/2022/01/hsg_reftah-1.jpg");
   background-size:cover;
   opacity:1;
}


#cube .grid, #cube .grid-logo{ 
     opacity:1;
 background: url("https://exactcubes.de/wp-content/uploads/2022/01/magic-grid.png");
   background-size:cover;
}



#cube .front{ 
     -webkit-transform: rotateY(   0deg ) translateZ( 150px ); 
}

#cube .front-color  { 
    -webkit-transform: rotateY(   0deg ) translateZ( 150px ); 
   background: red;
}



#cube .back   { 
    -webkit-transform: rotateX( 180deg ) translateZ( 150px ); 
    
}

#cube .back-color  { 
    -webkit-transform: rotateX( 180deg ) translateZ( 150px ); 
    background: green;
}




   
#cube .right  { 
    -webkit-transform: rotateY(  90deg ) translateZ( 150px ); 
}

#cube .right-color  { 
    -webkit-transform: rotateY(  90deg ) translateZ( 150px ); 
    background: yellow;
}




#cube .left   { 
    -webkit-transform: rotateY( -90deg ) translateZ( 150px ); 
}

#cube .left-color  { 
    -webkit-transform: rotateY( -90deg ) translateZ( 150px );
   background: white;
}




#cube .top    { 
    -webkit-transform: rotateX(  90deg ) translateZ( 150px ); 
}

#cube .top-color    { 
    -webkit-transform: rotateX(  90deg ) translateZ( 150px ); 
    background: orange;
}



#cube .bottom { 
    -webkit-transform: rotateX( -90deg ) translateZ( 150px ); 
}

#cube .bottom-color { 
    -webkit-transform: rotateX( -90deg ) translateZ( 150px ); 
    background: blue;
}


@-webkit-keyframes spinCubeWebkit {
    0% { -webkit-transform: translateZ( -500px ) rotateX(   0deg ) rotateY(   0deg ); }
  100% { -webkit-transform: translateZ( -500px ) rotateX( 360deg ) rotateY( 360deg ); }
}

  @-webkit-keyframes spincube {
    from,to  { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16%      { -webkit-transform: rotateY(-90deg);                           }
    33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg);            }
    50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg);           }
    66%      { -webkit-transform: rotateY(90deg) rotateX(90deg);             }
    83%      { -webkit-transform: rotateX(90deg);                            }
  }


.uploads-progress {margin-top: 10px!important;}

.uploads-progress .bar {background-color: #009fe3!important;}

.show-if-value.image-wrap {max-width: 125px!important;}



/* HOUSE CUBE CSS */


/* ================================================
            variables for colors 
            BG - (Background Color)
   ================================================ */
:root {
    --BG-red: red;
    --BG-white: white;
    --BG-blue: blue;
    --BG-green: green;
    --BG-yellow: yellow;
    --BG-purple: purple;
    --BG-orange: orange;
    --BG-balck: black;
}


.cube-wrap{
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-transform: rotateX(-10deg) rotateY(10deg);
		padding-top: 160px;
	padding-bottom: 190px;
}

.cube {
    position: relative;
    width: 200px;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-animation: rotate 35s infinite linear;
    animation: rotate 35s infinite linear;
	margin: 0 auto;

}

.cube.depth { zoom: 1.4;}

/*=============== / Animation Rotation / ================ */
@keyframes rotate {

    0%,
    100% {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    25% {
        -webkit-transform: rotateY(-360deg) rotateZ(0deg);
    }

    50% {
        -webkit-transform: rotateY(-0deg) rotateZ(360deg);
    }

    65% {
        -webkit-transform: rotateY(-180deg) rotateX(0deg);
    }

    85% {
        -webkit-transform: rotateX(90deg);
    }

}

.cube-wrap:hover, .cube:hover{
    animation-play-state: paused!important;
  }

.cube div {
    position: absolute;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border: 2px solid #000000;
    border-radius: 5px;
}

.cube div span {
    height: 65px;
    width: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-style: groove;
    border-radius: 8px;
    box-shadow: 0px 0px 0px 3px rgb(0 0 0 /100%);
	border: 2px groove #7d7d7d;
    overflow: hidden;
}

.cube div.left-pane span:nth-child(5),
.cube div.right-pane span:nth-child(5) {
    background: url(./Rubik.png) center center/cover;
}

.cube div.roof-one span:nth-child(1),
.cube div.roof-one span:nth-child(2),
.cube div.roof-one span:nth-child(3),
.cube div.roof-two span:nth-child(1),
.cube div.roof-two span:nth-child(2),
.cube div.roof-two span:nth-child(3) {
    height: 44px;
}

.cube div.roof-one span:nth-child(4),
.cube div.roof-one span:nth-child(5),
.cube div.roof-one span:nth-child(6),
.cube div.roof-two span:nth-child(4),
.cube div.roof-two span:nth-child(5),
.cube div.roof-two span:nth-child(6) {
    height: 100px;
}

.cube div.roof-one,
.cube div.roof-two {
    align-items: flex-end;
}

.depth div.left-pane .inner span:nth-child(1),
.depth div.left-pane .inner span:nth-child(2),
.depth div.left-pane .inner span:nth-child(3),
.depth div.right-pane .inner span:nth-child(1),
.depth div.right-pane .inner span:nth-child(2),
.depth div.right-pane .inner span:nth-child(3) {
    height: 100px;
}

/* =======================================
           Top triangle shape 
   ======================================= */
.depth div.front-pane {
    -webkit-transform: translateZ(50px);
    -moz-transform: translateZ(50px);
    -ms-transform: translateZ(50px);
    transform: translateZ(50px);
    /* background: var(--BG-blue); */
    overflow: hidden;
}

.depth div.back-pane {
    -webkit-transform: translateZ(-150px) rotateY(180deg);
    -moz-transform: translateZ(-150px) rotateY(180deg);
    -ms-transform: translateZ(-150px) rotateY(180deg);
    transform: translateZ(-150px) rotateY(180deg);
    /* background: var(--BG-green); */
    overflow: hidden;
}

.depth div.top-pane,
.depth div.roof-one,
.depth div.roof-two {
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
    overflow: hidden;
}

.depth div.bottom-pane {
    transform: rotateX(-90deg) translateY(150px) translateZ(-66px);
    transform-origin: bottom center;
    /* background: var(--BG-orange); */
    overflow: hidden;
}

.depth div.top-pane {
    transform: rotateX(90deg) translateY(-150px) translateZ(0px);
    transform-origin: top center;
    background: var(--BG-balck);
    overflow: hidden;
}

.depth div.left-pane {
    transform: rotateY(270deg) translateX(-150px);
    transform-origin: center left;
    /* background: var(--BG-purple); */
}

.depth div.right-pane {
    transform: rotateY(90deg) translateX(150px);
    transform-origin: top right;
    /* background: var(--BG-red); */
}

.cube div.front-pane,
.cube div.back-pane,
.cube div.left-pane,
.cube div.right-pane {
    height: 135px;
}

.depth div.roof-one {
    transform: rotateX(44deg) translateY(-110px) translateZ(35px);
    height: 145px;
    /* background: var(--BG-white); */
    overflow: hidden;
}

.depth div.roof-two {
    transform: rotateX(-44deg) rotateY(180deg) translateY(-38px) translateZ(108px);
    height: 145px;
    /* background: var(--BG-orange); */
    overflow: hidden;
}

.depth div.roof-right {
    /* background: var(--BG-black); */
    top: 0px;
    left: 0px;
    height: 102px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    clip-path: polygon(50% 0%, 0 100%, 100% 100%);
    transform: rotateY(90deg) translateX(50px) translateY(-102px) translateZ(99px);
    overflow: hidden;
}

.depth div.roof-left {
    /* background: var(--BG-black); */
    top: 0px;
    right: 0px;
    height: 102px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    clip-path: polygon(50% 0%, 0 100%, 100% 100%);
    transform: rotateY(90deg) translateX(50px) translateY(-102px) translateZ(-99px);
    overflow: hidden;
}

.depth div.roof-one,
.depth div.roof-two,
.depth div.bottom-pane,
.depth div.front-pane,
.depth div.back-pane {
    background: url(./Deutsche-Bank.png) center center/cover;
}

.depth div.left-pane .inner,
.depth div.right-pane .inner {
    position: absolute;
    background: var(--BG-black);
    background: url(./Deutsche-Bank.png) center center/cover;
    height: 183%;
    top: -107px;
    clip-path: polygon(50% 0%, 100% 42%, 100% 100%, 0 100%, 0% 42%);
}

/* .depth div.left-pane span,
.depth div.right-pane span,
.depth div.front-pane span,
.depth div.back-pane span {
    box-shadow: 0px 0px 0px 4px rgb(0 0 0 /50%);
} */