.btn-group-wraper {
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-button {
  display: none;
}
html,
body {
  height: 100%;
  overflow: hidden !important;
}
body {
  margin: 0;
  padding: 0;
  background-color: black;
  overflow: hidden !important;
}
#main {
  margin: 0;
  padding: 0;
  background-color: black;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
#debugText {
  color: red;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
}
.btn-group-wraper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}
.face-buttons {
  position: absolute;
  z-index: 9;
  top: 75%;
}
.button {
  text-align: center;
  display: inline-block;
  padding: 8px 25px;
  //border: 2px solid #00a2ff;
  background: rgba(26, 141, 214, 0);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  cursor: pointer;
  letter-spacing: 2px;
  position: relative;
  overflow: hidden;
  margin: 0 10px;
  outline: none;
}
/*.button:before {
  content: "";
  position: absolute;
  height: 150px;
  width: 50px;
  background: #fff;
  left: -55px;
  top: -40px;
  transform: rotate(37deg);
  transition: all 0.3s;
  opacity: 0.3;
}
*/
.button:hover:before {
  left: 95%;
}
.file-button {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 9;
}
#container {
  width: 100%;
  height: 100%;
  position: relative;
}
#shape {
  position: relative;
  margin: 0 auto;
  top: calc(50% - 300px / 2);
  width: 300px;
  height: 300px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  transition: all 2s;
}
#shape:active {
  cursor: grabbing !important;
}
#shape:active a {
  cursor: grabbing !important;
}
#shape.notTransition {
  transition: all 0s;
}
#shape.Transition {
  transition: all 1s;
}
#shape.notAllTransition {
  transition: none !important;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateX(0) rotateY(0);
  }
  to {
    -webkit-transform: rotateX(360deg) rotateY(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotateX(0) rotateY(0);
  }
  to {
    -moz-transform: rotateX(360deg) rotateY(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotateX(0) rotateY(0);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
#shape > div {
  position: absolute;
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  transition: opacity 0.3s ease-in-out;
}
#shape > div > .face-legend {
  display: none;
  font-size: 200px;
  position: absolute;
  opacity: 0.3;
  color: #000000;
  width: 100%;
  text-align: center;
  top: calc(50% - 130px);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
#shape > div > div {
  width: calc(100% / +3);
  height: 300px/3;
  border: 1px solid black;
  box-sizing: border-box;
  transition: transform 0.3s ease-in-out;
  opacity: 0.7;
}
#shape > div > div .subCubeText {
  font: 400 6px Arial;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  line-height: 1;
  display: block;
  padding: 3px;
  color: hsl(245, 81%, 31%);
}
#shape > div > div.hovered {
  z-index: 5;
  opacity: 1 !important;
}
#shape > div > div.hovered a {
  pointer-events: all !important;
}
#shape > div > div:hover {
  transition: all 0.3s ease-in-out;
}
#shape a {
  pointer-events: none;
  text-decoration: none;
  text-align: center;
  width: 100%;
  height: 100%;
  display: block;
  user-drag: none;
  user-select: none;
  -moz-user-select: none !important;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
#shape .ft {
  -webkit-transform: translateZ(150px);
  -moz-transform: translateZ(150px);
  transform: translateZ(150px);
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  transition: transform 2s;
}
#shape .rt {
  -webkit-transform: rotateY(90deg) translateZ(150px);
  -moz-transform: rotateY(90deg) translateZ(150px);
  transform: rotateY(90deg) translateZ(150px);
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  transition: transform 2s;
}
#shape .bk {
  -webkit-transform: rotateY(180deg) translateZ(150px);
  -moz-transform: rotateY(180deg) translateZ(150px);
  transform: rotateY(180deg) translateZ(150px);
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  transition: transform 2s;
}
#shape .lt {
  -webkit-transform: rotateY(270deg) translateZ(150px);
  -moz-transform: rotateY(270deg) translateZ(150px);
  transform: rotateY(270deg) translateZ(150px);
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  transition: transform 2s;
}
#shape .tp {
  -webkit-transform: rotateX(90deg) translateZ(150px);
  -moz-transform: rotateX(90deg) translateZ(150px);
  transform: rotateX(90deg) translateZ(150px);
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  transition: transform 2s;
}
#shape .bm {
  -webkit-transform: rotateX(270deg) rotateY(0deg) translateZ(150px);
  -moz-transform: rotateX(270deg) rotateY(0deg) translateZ(150px);
  transform: rotateX(270deg) rotateY(0deg) translateZ(150px);
  -webkit-transition: -webkit-transform 2s;
  -moz-transition: -moz-transform 2s;
  transition: transform 2s;
}
/*transitions*/
#shape.fast-show-front {
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  transition: all 1s linear;
  transform: rotateY(0) !important;
}
#shape.show-front {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  transition: all 2s;
  transform: rotateY(0) !important;
}
#shape.show-left {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  transition: all 2s;
  transform: rotateY(90deg) !important;
}
#shape.show-right {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  transition: all 2s;
  transform: rotateY(-90deg) !important;
}
#shape.show-top {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  transition: all 2s;
  transform: rotateX(-90deg) !important;
}
#shape.show-bottom {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  transition: all 2s;
  transform: rotateX(90deg) !important;
}
#shape.show-back {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  transition: all 2s;
  transform: rotateY(180deg) !important;
}
/*animations*/
#shape.spin {
  -webkit-animation: spin 8s infinite linear;
  -moz-animation: spin 8s infinite linear;
  animation: spin 8s infinite linear;
  animation-play-state: running;
  -moz-animation-play-state: running;
  -webkit-animation-play-state: running;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}
#shape.spin.stop {
  animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
#shape.spin.stop2 {
  animation-name: lol;
}
.cubeContainer {
  height: 100%;
  -webkit-perspective: 1350px;
  -moz-perspective: 1350px;
  perspective: 1350px;
  transition: all 1s linear;
}
.controlsContainer {
  position: absolute;
  top: 100px;
  right: 61px;
  z-index: 20;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
}
.controls {
  width: 200px;
  height: 130px;
  min-height: 130px;
  position: relative;
}
.controls .btn {
  border: 2px solid #00a2ff;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  position: absolute;
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.controls .btn:hover {
  background-color: #333333;
}
.controls .btn:hover svg {
  fill: white;
}
.controls svg {
  fill: #00a2ff;
}
.controls .btnTop {
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.controls .btnRight {
  right: 0;
  bottom: 0;
}
.controls .btnBottom {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.controls .btnLeft {
  left: 0;
  bottom: 0;
}
.sprite {
  transition: all 0.3s ease-in-out !important;
  background-color: #6199f6 !important;
}
.sprite.hovered {
  background-image: url("img/CubePictures/Icons/1_1.png");
  transition: all 0.3s ease-in-out !important;
}
.sprite.s-6-9 {
  background-image: url("img/CubePictures/Icons/6_9.png");
  background-size: contain;
}
.sprite.s-6-9.hovered,
.sprite.s-6-9 .subCubeText {
  background-image: url("img/CubePictures/6_9.jpg");
}
.sprite.s-6-9 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-5-9 {
  background-image: url("img/CubePictures/Icons/5_9.png");
  background-size: contain;
}
.sprite.s-5-9.hovered,
.sprite.s-5-9 .subCubeText {
  background-image: url("img/CubePictures/5_9.jpg");
}
.sprite.s-5-9 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-4-9 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-4-9.hovered,
.sprite.s-4-9 .subCubeText {
  background-image: url("#");
}
.sprite.s-4-9 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-3-9 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-3-9.hovered,
.sprite.s-3-9 .subCubeText {
  background-image: url("#");
}
.sprite.s-3-9 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-2-9 {
  background-image: url("img/CubePictures/Icons/2-7.png");
  background-size: contain;
}
.sprite.s-2-9.hovered,
.sprite.s-2-9 .subCubeText {
  background-image: url("img/CubePictures/2_7.jpg");
}
.sprite.s-2-9 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-1-9 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-1-9.hovered,
.sprite.s-1-9 .subCubeText {
  background-image: url("#");
}
.sprite.s-1-9 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-6-8 {
  background-image: url("img/CubePictures/Icons/6_8.png");
  background-size: contain;
}
.sprite.s-6-8.hovered,
.sprite.s-6-8 .subCubeText {
  background-image: url("img/CubePictures/6_8.jpg");
}
.sprite.s-6-8 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-5-8 {
  background-image: url("img/CubePictures/Icons/5_8.png");
  background-size: contain;
}
.sprite.s-5-8.hovered,
.sprite.s-5-8 .subCubeText {
  background-image: url("img/CubePictures/5_8.jpg");
}
.sprite.s-5-8 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-4-8 {
  background-image: url("img/CubePictures/Icons/4_8.png");
  background-size: contain;
}
.sprite.s-4-8.hovered,
.sprite.s-4-8 .subCubeText {
  background-image: url("img/CubePictures/4_8.jpg");
}
.sprite.s-4-8 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-3-8 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-3-8.hovered,
.sprite.s-3-8 .subCubeText {
  background-image: url("#");
}
.sprite.s-3-8 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-2-8 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-2-8.hovered,
.sprite.s-2-8 .subCubeText {
  background-image: url("#");
}
.sprite.s-2-8 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-1-8 {
  background-image: url("img/CubePictures/Icons/1_5.png");
  background-size: contain;
}
.sprite.s-1-8.hovered,
.sprite.s-1-8 .subCubeText {
  background-image: url("img/CubePictures/1_5.gif");
}
.sprite.s-1-8 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-6-7 {
  background-image: url("img/CubePictures/Icons/6_7.png");
  background-size: contain;
}
.sprite.s-6-7.hovered,
.sprite.s-6-7 .subCubeText {
  background-image: url("img/CubePictures/Icons/6_7.png");
}
.sprite.s-6-7 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-5-7 {
  background-image: url("img/CubePictures/Icons/5_7.png");
  background-size: contain;
}
.sprite.s-5-7.hovered,
.sprite.s-5-7 .subCubeText {
  background-image: url("img/CubePictures/5_7.jpg");
}
.sprite.s-5-7 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-4-7 {
  background-image: url("img/CubePictures/Icons/4_7.png");
  background-size: contain;
}
.sprite.s-4-7.hovered,
.sprite.s-4-7 .subCubeText {
  background-image: url("img/CubePictures/4_7.jpg");
}
.sprite.s-4-7 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-3-7 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-3-7.hovered,
.sprite.s-3-7 .subCubeText {
  background-image: url("#");
}
.sprite.s-3-7 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-2-7 {
  background-image: url("img/CubePictures/Icons/2_6.png");
  background-size: contain;
}
.sprite.s-2-7.hovered,
.sprite.s-2-7 .subCubeText {
  background-image: url("img/CubePictures/2_7.gif");
}
.sprite.s-2-7 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-1-7 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-1-7.hovered,
.sprite.s-1-7 .subCubeText {
  background-image: url("#");
}
.sprite.s-1-7 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-6-6 {
  background-image: url("img/CubePictures/Icons/6_6.png");
  background-size: contain;
}
.sprite.s-6-6.hovered,
.sprite.s-6-6 .subCubeText {
  background-image: url("img/CubePictures/Icons/6_6.png");
}
.sprite.s-6-6 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-5-6 {
  background-image: url("img/CubePictures/Icons/5_6.png");
  background-size: contain;
}
.sprite.s-5-6.hovered,
.sprite.s-5-6 .subCubeText {
  background-image: url("#");
}
.sprite.s-5-6 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-4-6 {
  background-image: url("img/CubePictures/Icons/4_6.png");
  background-size: contain;
}
.sprite.s-4-6.hovered,
.sprite.s-4-6 .subCubeText {
  background-image: url("img/CubePictures/4_6.jpg");
}
.sprite.s-4-6 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-3-6 {
  background-image: url("img/CubePictures/Icons/2_5.png");
  background-size: contain;
}
.sprite.s-3-6.hovered,
.sprite.s-3-6 .subCubeText {
  background-image: url("img/CubePictures/3_6.gif");
}
.sprite.s-3-6 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-2-6 {
  background-image: url("img/CubePictures/Icons/2_4.png");
  background-size: contain;
}
.sprite.s-2-6.hovered,
.sprite.s-2-6 .subCubeText {
  background-image: url("img/CubePictures/2_6.gif");
}
.sprite.s-2-6 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-1-6 {
  background-image: url("img/CubePictures/Icons/1_4.png");
  background-size: contain;
}
.sprite.s-1-6.hovered,
.sprite.s-1-6 .subCubeText {
  background-image: url("img/CubePictures/1_6.gif");
}
.sprite.s-1-6 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-6-5 {
  background-image: url("img/CubePictures/Icons/6_5.png");
  background-size: contain;
}
.sprite.s-6-5.hovered,
.sprite.s-6-5 .subCubeText {
  background-image: url("img/CubePictures/Icons/6_6.png");
}
.sprite.s-6-5 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-5-5 {
  background-image: url("img/CubePictures/Icons/5_5.png");
  background-size: contain;
}
.sprite.s-5-5.hovered,
.sprite.s-5-5 .subCubeText {
  background-image: url("#");
}
.sprite.s-5-5 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-4-5 {
  background-image: url("img/CubePictures/Icons/4_5.png");
  background-size: contain;
}
.sprite.s-4-5.hovered,
.sprite.s-4-5 .subCubeText {
  background-image: url("img/CubePictures/4_5.jpg");
}
.sprite.s-4-5 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-3-5 {
  background-image: url("img/CubePictures/Icons/2_3.png");
  background-size: contain;
}
.sprite.s-3-5.hovered,
.sprite.s-3-5 .subCubeText {
  background-image: url("img/CubePictures/3_5.gif");
}
.sprite.s-3-5 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-2-5 {
  background-image: url("img/CubePictures/Icons/2_4.png");
  background-size: contain;
}
.sprite.s-2-5.hovered,
.sprite.s-2-5 .subCubeText {
  background-image: url("img/CubePictures/2_5.gif");
}
.sprite.s-2-5 .subCubeText {
  opacity: 0 !important;
}
/*.sprite.s-1-5 {
  background-image: url("img/CubePictures/Icons/1_5.png");
  background-size: contain;
}
.sprite.s-1-5.hovered,
.sprite.s-1-5 .subCubeText {
  background-image: url("img/CubePictures/Icons/1_5.jpg");
}*/
.sprite.s-1-5 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-6-4 {
  background-image: url("img/CubePictures/Icons/6_4.png");
  background-size: contain;
}
.sprite.s-6-4.hovered,
.sprite.s-6-4 .subCubeText {
  background-image: url("img/CubePictures/6_4.jpg");
}
.sprite.s-6-4 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-5-4 {
  background-image: url("img/CubePictures/Icons/5_4.png");
  background-size: contain;
}
.sprite.s-5-4.hovered,
.sprite.s-5-4 .subCubeText {
  background-image: url("img/CubePictures/5_4.jpg");
}
.sprite.s-5-4 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-4-4 {
  background-image: url("img/CubePictures/Icons/4_4.png");
  background-size: contain;
}
.sprite.s-4-4.hovered,
.sprite.s-4-4 .subCubeText {
  background-image: url("img/CubePictures/4_4.jpg");
}
.sprite.s-4-4 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-3-4 {
  background-image: url("img/CubePictures/Icons/2_2.png");
  background-size: contain;
}
.sprite.s-3-4.hovered,
.sprite.s-3-4 .subCubeText {
  background-image: url("img/CubePictures/Icons/2_2.png");
}
.sprite.s-3-4 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-2-4 {
  background-image: url("img/CubePictures/Icons/2_4.png");
  background-size: contain;
}
.sprite.s-2-4.hovered,
.sprite.s-2-4 .subCubeText {
  background-image: url("img/CubePictures/2_4.gif");
}
.sprite.s-2-4 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-1-4 {
  background-image: url("img/CubePictures/Icons/1_3.png");
  background-size: contain;
}
.sprite.s-1-4.hovered,
.sprite.s-1-4 .subCubeText {
  background-image: url("img/CubePictures/1_4.gif");
}
.sprite.s-1-4 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-6-3 {
  background-image: url("img/CubePictures/Icons/6_3.png");
  background-size: contain;
}
.sprite.s-6-3.hovered,
.sprite.s-6-3 .subCubeText {
  background-image: url("img/CubePictures/6_3.jpg");
}
.sprite.s-6-3 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-5-3 {
  background-image: url("img/CubePictures/Icons/5_3.png");
  background-size: contain;
}
.sprite.s-5-3.hovered,
.sprite.s-5-3 .subCubeText {
  background-image: url("img/CubePictures/Icons/5_3.png");
}
.sprite.s-5-3 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-4-3 {
  background-image: url("img/CubePictures/Icons/4_3.png");
  background-size: contain;
}
.sprite.s-4-3.hovered,
.sprite.s-4-3 .subCubeText {
  background-image: url("img/CubePictures/4_3.gif");
}
.sprite.s-4-3 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-3-3 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-3-3.hovered,
.sprite.s-3-3 .subCubeText {
  background-image: url("#");
}
.sprite.s-3-3 .subCubeText {
  opacity: 0 !important;
} /*
.sprite.s-2-3 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-2-3.hovered,
.sprite.s-2-3 .subCubeText {
  background-image: url("#");
}
.sprite.s-2-3 .subCubeText {
  opacity: 0!important;
}*/
.sprite.s-1-3 {
  background-image: url("img/CubePictures/Icons/dvc-industry-demo.webp");
  background-size: contain;
}
.sprite.s-1-3.hovered,
.sprite.s-1-3 .subCubeText {
  background-image: url("img/CubePictures/dvc-industry-demo-hovered.webp");
}
.sprite.s-1-3 .subCubeText {
  opacity: 0!important;
}
.sprite.s-6-2 {
  background-image: url("img/CubePictures/Icons/6_2.png");
  background-size: contain;
}
.sprite.s-6-2.hovered,
.sprite.s-6-2 .subCubeText {
  background-image: url("img/CubePictures/6_2.jpg");
}
.sprite.s-6-2 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-5-2 {
  background-image: url("img/CubePictures/Icons/5_2.png");
  background-size: contain;
}
.sprite.s-5-2.hovered,
.sprite.s-5-2 .subCubeText {
  background-image: url("img/CubePictures/5_2.jpg");
}
.sprite.s-5-2 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-4-2 {
  background-image: url("img/CubePictures/Icons/4_2.png");
  background-size: contain;
}
.sprite.s-4-2.hovered,
.sprite.s-4-2 .subCubeText {
  background-image: url("img/CubePictures/4_2.gif");
}
.sprite.s-4-2 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-3-2 {
  background-image: url("img/CubePictures/Icons/3_1.png");
  background-size: contain;
}
.sprite.s-3-2.hovered,
.sprite.s-3-2 .subCubeText {
  background-image: url("img/CubePictures/3_2.gif");
}
.sprite.s-3-2 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-2-2 {
  background-image: url("img/CubePictures/Icons/2_1.png");
  background-size: contain;
}
.sprite.s-2-2.hovered,
.sprite.s-2-2 .subCubeText {
  background-image: url("img/CubePictures/2_2.gif");
}
.sprite.s-2-2 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-1-2 {
  background-image: url("img/CubePictures/Icons/1_2.png");
  background-size: contain;
}
.sprite.s-1-2.hovered,
.sprite.s-1-2 .subCubeText {
  background-image: url("img/CubePictures/1_2.gif");
}
.sprite.s-1-2 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-6-1 {
  background-image: url("img/CubePictures/Icons/6_1.png");
  background-size: contain;
}
.sprite.s-6-1.hovered,
.sprite.s-6-1 .subCubeText {
  background-image: url("img/CubePictures/6_1.jpg");
}
.sprite.s-6-1 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-5-1 {
  background-image: url("img/CubePictures/Icons/5_1.png");
  background-size: contain;
}
.sprite.s-5-1.hovered,
.sprite.s-5-1 .subCubeText {
  background-image: url("img/CubePictures/5_1.jpg");
}
.sprite.s-5-1 .subCubeText {
  opacity: 0 !important;
}
.sprite.s-4-1 {
  background-image: url("img/CubePictures/Icons/4_1.png");
  background-size: contain;
}
.sprite.s-4-1.hovered,
.sprite.s-4-1 .subCubeText {
  background-image: url("img/CubePictures/4_1.gif");
}
.sprite.s-4-1 .subCubeText {
  opacity: 0 !important;
} /*
.sprite.s-3-1 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-3-1.hovered,
.sprite.s-3-1 .subCubeText {
  background-image: url("#");
}
.sprite.s-3-1 .subCubeText {
  opacity: 0!important;
}*/ /*
.sprite.s-2-1 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-2-1.hovered,
.sprite.s-2-1 .subCubeText {
  background-image: url("#");
}
.sprite.s-2-1 .subCubeText {
  opacity: 0!important;
}*/
.sprite.s-1-1 {
  background-image: url("#");
  background-size: contain;
}
.sprite.s-1-1.hovered,
.sprite.s-1-1 .subCubeText {
  background-image: url("#");
}
.sprite.s-1-1 .subCubeText {
  opacity: 0 !important;
}
@media all and (max-width: 992px) {
  .cubeContainer {
    transform: scale(0.6);
  }
  #container {
    position: initial;
  }
  .controlsContainer {
    top: auto;
    right: 15px;
    bottom: 70px;
  }
  .controls {
    width: 110px;
    height: 73px;
    min-height: 73px;
    position: relative;
  }
  .controls .btn {
    width: 30px;
    height: 30px;
  }
  .btn-group-wraper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .button {
    font-size: 17px;
    padding: 4px 7px;
    min-width: 35px;
    min-height: 35px;
  }
  .face-buttons {
    /*right: calc(50% - 150px);*/
    text-align: center;
    top: 65%;
    bottom: 200px;
    z-index: -1;
  }
  .face-buttons .button {
    margin: 0px 6px;
    padding: 4px 9px;
  }
  .file-button {
    right: calc(50% - 155px);
    font-size: 11px;
    padding: 7px 9px;
    z-index: 999;
    min-height: auto;
  }
}
/*   @media all and (max-width: 350px){
    .cubeContainer{
      transform: scale(0.5);
      transform-origin: 0 0;
      -webkit-perspective: 4000px!important;
      perspective: 4000px!important;
      width: calc(~"100 / 5 * 10%");
      height: calc(~"100 / 5 * 10%");
    }
  } */