:root {

	--container-width: 1400px;
	--container-width-small:94%;
	--container-width-medium:94%;
}


body {
  overflow:hidden;	
}

.landing_loader {
  position:fixed;
  background-color:var(--bg-primary);
  width:100%;
  height:100%;
  z-index:999;
  left:0;
  right:0;
  top:0;
  bottom:0;  
animation-name: hideLoader;
  animation-duration: 2.5s;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
}

@keyframes hideLoader {
  to {
    opacity: 0;
  }
}
.scene {

  position: absolute;
  left: 0; 
  top:30%;
  right: 0;
  margin-left: auto; 
  margin-right: auto; 
  width: 100px;
  transform: translate(-50%, -50%);
}

/*--------------- Cube ---------------*/
.cube {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 2;
  transform: rotateX(-36deg) rotateY(45deg);
  transform-style: preserve-3d;
}

.cube_count_1 {
  z-index: 2;
  left: 50px;
  animation: cube 2s 1s ease infinite;
}
.cube_count_1 .cube__face {
  animation-delay: 1s;
}


.cube__face {
  width: 100px;
  height: 100px;
  position: absolute;
  background: #c38d5e;
  background-image:url(https://i.ibb.co/fVxfRgxZ/logo.png);
  background-size:60px auto;
  background-position:center center;
  background-repeat:no-repeat;
  border: 6px solid #141617;
}

.cube__face--front {
  box-shadow: inset -6px -6px 0 0 #141617;
  animation: cube-face-front 2s ease infinite;
}

.cube__face--right {
  animation: cube-face-right 2s ease infinite;
}

.cube__face--back {
  animation: cube-face-back 2s ease infinite;
}

.cube__face--left {
  box-shadow: inset 6px -6px 0 0 #141617;
  animation: cube-face-left 2s ease infinite;
}

.cube__face--top {
  box-shadow: inset -6px 6px 0 0 #141617;
  animation: cube-face-top 2s ease infinite;
}

.cube__face--front {
  transform: rotateY(0deg) translateZ(50px);
}

.cube__face--right {
  transform: rotateY(90deg) translateZ(50px);
}

.cube__face--back {
  transform: rotateY(180deg) translateZ(50px);
}

.cube__face--left {
  transform: rotateY(-90deg) translateZ(50px);
}

.cube__face--top {
  transform: rotateX(90deg) translateZ(50px);
}

.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

/*--------------- Animation ---------------*/
@keyframes cube {
  0% {
    transform: rotateX(-36deg) rotateY(45deg) rotateZ(0);
  }
  100% {
    transform: rotateX(-126deg) rotateY(0deg) rotateZ(-45deg);
  }
}
@keyframes cube-face-front {
  0% {
    box-shadow: inset -6px -6px 0 0 #141617;
  }
  100% {
    box-shadow: inset 0 0 0 0 #141617;
  }
}
@keyframes cube-face-right {
  0% {
    box-shadow: inset 0 0 0 0 #141617;
  }
  50% {
    box-shadow: inset 0 0 0 0 #141617;
  }
  100% {
    box-shadow: inset 6px -6px 0 0 #141617;
  }
}
@keyframes cube-face-back {
  0% {
    box-shadow: inset 0 0 0 0 #141617;
  }
  100% {
    box-shadow: inset -6px -6px 0 0 #141617;
  }
}
@keyframes cube-face-left {
  0% {
    box-shadow: inset 6px -6px 0 0 #141617;
  }
  100% {
    box-shadow: inset 0 0 0 0 #141617;
  }
}
@keyframes cube-face-top {
  0% {
    box-shadow: inset -6px 6px 0 0 #141617;
  }
  50% {
    box-shadow: inset 0 0 0 0 #141617;
  }
  100% {
    box-shadow: inset 6px -6px 0 0 #141617;
  }
}