html{
	 -webkit-font-smoothing:subpixel-antialiased;
 	 -webkit-font-smoothing: antialiased;
}

.Bild{
	width: 100%; 
}

/* –––––––––––––––––––––––––––– Cube –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

#WrapperCube{
	position: relative; width: 60vh; top: 0; height: 60vh; left: 350px;
 	perspective: 2500px;
 	z-index: 5;
}

#Cube{
	position: absolute; height: 40vh; max-height: 600px; width: 40vh; max-width: 600px; top: 10vh; left: 10vh;
    transform-style: preserve-3d;
    cursor: grab;
     user-select: none;
}

#CubeFilm{
	width: 100%;

}

.SeiteA{
    position: absolute; width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; 
}

.SeiteB{
    position: absolute; width: 100%; height: 100%;
	background: RGBA(0, 0, 0, 0.5);
	border-radius: 20px;
}

.SeiteC{
    position: absolute; width: 100%; height: 100%;
    /*pointer-events: none;*/
 	border: 2px solid #dd0000;
 	border-radius: 20px;
 	 -webkit-backface-visibility: hidden;
}

.Play{
	width: 10%; margin-left: 40%;
	cursor: pointer;
}

#Seite1a {
    transform: translate3d(0, 0, 24vh);
    /*filter: blur(2px);*/
  }
#Seite2a {
    transform: rotateY(90deg) translate3d(0, 0, 24vh);
  }
#Seite3a {
    transform: rotateY(90deg) rotateX(90deg) translate3d(0, 0, 24vh);;
  }
#Seite4a {
    transform: rotateY(180deg) translate3d(0, 0, 24vh);
  }
#Seite5a {
    transform: rotateY(-90deg) translate3d(0, 0, 24vh);
  }
#Seite6a {
    transform: rotateX(-90deg) translate3d(0, 0, 24vh);
  }

.CubeBild{
	width: 100%;
	transform: scale3d(1, 1, 1);
}

/* –––––––––––––––––––––––––––– Innenwürfel ––––––––––––––––––––––––––––––––– */

#Seite1b {
    transform: translate3d(0, 0, 23.92vh);
  }
#Seite2b {
    transform: rotateY(90deg) translate3d(0, 0, 23.92vh);
  }
#Seite3b {
    transform: rotateY(90deg) rotateX(90deg) translate3d(0, 0, 23.92vh);
  }
#Seite4b {
    transform: rotateY(180deg) translate3d(0, 0, 23.92vh);
  }
#Seite5b {
    transform: rotateY(-90deg) translate3d(0, 0, 23.92vh);
  }
#Seite6b {
    transform: rotateX(-90deg) translate3d(0, 0, 23.92vh);
  }
  
/* –––––––––––––––––––––––––––– Textwürfel mit Kante––––––––––––––––––––––––––––––––– */
  
#Seite1c {
    transform: translate3d(0, 0, 26.4vh);
  }
#Seite2c {
    transform: rotateY(90deg) translate3d(0, 0, 26.4vh);
  }
#Seite3c {
    transform: rotateY(90deg) rotateX(90deg) translate3d(0, 0, 26.4vh);
  }
#Seite4c {
    transform: rotateY(180deg) translate3d(0, 0, 26.4vh);
  }
#Seite5c {
    transform: rotateY(-90deg) translate3d(0, 0, 26.4vh);
  }
#Seite6c {
    transform: rotateX(-90deg) translate3d(0, 0, 26.4vh);
  }