/* 
	CSS- Datei: logo_aside.css
*/

aside div.wrapper4position {
	position: relative;
}
aside div.wrapper4position div.cube {
	position: absolute;
	width: 100%;
	height: 250px;
	background-color: gray;
	border-radius: 1vmin;
}


div.wrapper4position div.wrapperbox {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50%;
	top: 50%;
/* folgende Ausweisung wird im HTML-Dokument überschrieben (style-Element) */
	transform: translate(-45%, -35%); /* korrigierte Position für Standbilder */
	perspective: 500px;
}

.wrapper4position div.logo {
	width: 100px;
	height: 100px;
	position: absolute;
	transform-style: preserve-3d;
	transform-origin: 50% 50% 50px;
	transform: rotateX(-15deg) rotateY(30deg) rotateZ(0deg);
}

.wrapper4position div.brownbox {
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;
	background-color: rgb(32, 13, 0);
	transform: translateZ(2.5px));
}
.wrapper4position div.whitebottom {
	transform: rotateX(90deg) translateY(20px) translateZ(-40px);
	background-color: rgb(246, 246, 246);
}
.wrapper4position div.firstfloor {
	height: 85px;
	transform: rotateX(90deg) translateY(8.33333333333333px) translateZ(5px);
	background-color: rgb(246, 246, 246);
}
.wrapper4position div.brownback {
	transform: translateZ(-25px);
}
.wrapper4position div.yellowbetween {
	transform: translateZ(-12.5px);
	background-color: rgb(255, 221, 0);
}

.wrapper4position div.greybox {
	left: 18px;
	top: 18px;
	width: 32px;
	height: 32px;
	background-color: rgb(183, 190, 207);
	transform: translateZ(36.6666666666667px);
}
.wrapper4position div.greyback {
	background-color: rgb(0, 79, 159);
	transform: translateZ(10px);
}
.wrapper4position div.greytop {
	height: 40px;
	transform: rotateX(90deg) translateY(23.3333333333333px) translateZ(15.8333333333333px);
	background-color: rgb(246, 246, 246);
}

.wrapper4position div.redbox {
	left: 50px;
	top: 0;
	width: 50px;
	height: 50px;
	background-color: rgb(227, 6, 19);
	transform: translateZ(44.1666666666667px);
}

.wrapper4position div.yellowbox {
	left: 0;
	top: 50px;
	width:	50px;
	height: 50px;
	background-color: rgb(255, 221, 0);
	transform: translateZ(44.1666666666667px);
}

.wrapper4position div.lightgreybox {
	left: 50px;
	top: 50px;
	width: 50px;
	height: 50px;
	background-color: rgb(235, 233, 233);
	transform: translateZ(54.1666666666667px);
}

.wrapper4position div.bluebox {
	left: 68px;
	top: 68px;
	width: 32px;
	height: 32px;
	background-color: rgb(0, 79, 159);
	transform: translateZ(83.3333333333333px);
}
.wrapper4position div.blueback {
	background-color: rgb(183, 190, 207);
	transform: translateZ(68.3333333333333px);
}
.wrapper4position div.bluetop {
	height: 22%;
	transform: rotateX(90deg) translateY(75px) translateZ(10px);
	background-color: rgb(246, 246, 246);
}

/* aside steuern nach Auflösung */
@media only screen and (min-width: 1150px) {
	body aside {
		display: block;
		position: fixed;
		width: 75px;
		height: 75px;
		top: calc(100vh*0.85 - 75px/2);
		left: calc((100vw - 1035px)/2 - 75px/2);	
	}
	aside div.wrapper4position {
		display: block;
	}
	aside div.wrapper4position div.cube {
		height: 75px;
	}
		
	/* the Cube */	
	div.wrapper4position div.wrapperbox {
		width: 40.625px;
		height: 40.625px;
		perspective: 200px;
	}

	
	.wrapper4position div.logo {
		width: 40.625px;
		height: 40.625px;
		transform-origin: 50% 50% 20.3125px;
	}
	
	.wrapper4position div.brownbox {
		width: 40.625px;
		height: 40.625px;
	}
	.wrapper4position div.whitebottom {
		transform: rotateX(90deg) translateY(8.125px) translateZ(-16.25px);
	}
	.wrapper4position div.firstfloor {
		height: 34.53125px;
		transform: rotateX(90deg) translateY(3.38541666666668px) translateZ(2.03125px);
	}
	.wrapper4position div.brownback {
		transform: translateZ(-10.15625px);
	}
	.wrapper4position div.yellowbetween {
		transform: translateZ(-5.078125px);
	}
	
	.wrapper4position div.greybox {
		left: 7.3125px;
		top: 7.3125px;
		width: 13px;
		height: 13px;
		transform: translateZ(14.8958333333333px);
	}
	.wrapper4position div.greyback {
		transform: translateZ(4.0625px);
	}
	.wrapper4position div.greytop {
		height: 16.25px;
		transform: rotateX(90deg) translateY(9.47916666666665px) translateZ(6.43229166666665px);
	}
	
	.wrapper4position div.redbox {
		left: 20.3125px;
		top: 0;
		width: 20.3125px;
		height: 20.3125px;
		transform: translateZ(17.9427083333333px);
	}
	
	.wrapper4position div.yellowbox {
		left: 0;
		top: 20.3125px;
		width:	20.3125px;
		height: 20.3125px;
		transform: translateZ(17.9427083333333px);
	}
	
	.wrapper4position div.lightgreybox {
		left: 20.3125px;
		top: 20.3125px;
		width: 20.3125px;
		height: 20.3125px;
		transform: translateZ(22.0052083333333px);
	}
	
	.wrapper4position div.bluebox {
		left: 27.625px;
		top: 27.625px;
		width: 13px;
		height: 13px;
		transform: translateZ(33.8541666666667px);
	}
	.wrapper4position div.blueback {
		transform: translateZ(27.7604166666667px);
	}
	.wrapper4position div.bluetop {
		height: 22%;
		transform: rotateX(90deg) translateY(30.46875px) translateZ(4.0625px);
	}


}


@media only screen and (min-width: 1280px) {
	body aside {
	/*	display: block;
		position: fixed; */
		width: 150px;
		height: 150px;
		top: calc(100vh/2 - 150px/2);
		left: calc((100vw - 1085px)/2 - 150px/2);	
	}
	aside div.wrapper4position {
		display: block;
	}
	aside div.wrapper4position div.cube {
		height: 150px;
	}
	
	/* the Cube */	
	div.wrapper4position div.wrapperbox {
		width: 81.25px;
		height: 81.25px;
		perspective: 400px;
	}

	
	.wrapper4position div.logo {
		width: 81.25px;
		height: 81.25px;
		transform-origin: 50% 50% 40.625px;
	}
	
	.wrapper4position div.brownbox {
		width: 81.25px;
		height: 81.25px;
	}
	.wrapper4position div.whitebottom {
		transform: rotateX(90deg) translateY(16.25px) translateZ(-32.5px);
	}
	.wrapper4position div.firstfloor {
		height: 69.0625px;
		transform: rotateX(90deg) translateY(6.77083333333336px) translateZ(4.0625px);
	}
	.wrapper4position div.brownback {
		transform: translateZ(-20.3125px);
	}
	.wrapper4position div.yellowbetween {
		transform: translateZ(-10.15625px);
	}
	
	.wrapper4position div.greybox {
		left: 14.625px;
		top: 14.625px;
		width: 26px;
		height: 26px;
		transform: translateZ(29.7916666666667px);
	}
	.wrapper4position div.greyback {
		transform: translateZ(8.125px);
	}
	.wrapper4position div.greytop {
		height: 32.5px;
		transform: rotateX(90deg) translateY(18.9583333333333px) translateZ(12.8645833333333px);
	}
	
	.wrapper4position div.redbox {
		left: 40.625px;
		top: 0;
		width: 40.625px;
		height: 40.625px;
		transform: translateZ(35.8854166666667px);
	}
	
	.wrapper4position div.yellowbox {
		left: 0;
		top: 40.625px;
		width:	40.625px;
		height: 40.625px;
		transform: translateZ(35.8854166666667px);
	}
	
	.wrapper4position div.lightgreybox {
		left: 40.625px;
		top: 40.625px;
		width: 40.625px;
		height: 40.625px;
		transform: translateZ(44.0104166666667px);
	}
	
	.wrapper4position div.bluebox {
		left: 55.25px;
		top: 55.25px;
		width: 26px;
		height: 26px;
		transform: translateZ(67.7083333333335px);
	}
	.wrapper4position div.blueback {
		transform: translateZ(55.5208333333333px);
	}
	.wrapper4position div.bluetop {
		height: 22%;
		transform: rotateX(90deg) translateY(60.9375px) translateZ(8.125px);
	}

}

@media only screen and (min-width: 1440px) {
	body aside {
		display: block;
		position: fixed;
		width: 250px;
		height: 250px;
		top: calc(100vh/2 - 250px/2);
		left: calc((100vw - 1085px)/2 - 250px/2);	
	}
		aside div.wrapper4position div.cube {
		height: 250px;
	}
	
	/* the Cube */
	div.wrapper4position div.wrapperbox {
		width: 125px;
		height: 125px;
		perspective: 625px;
	}	
	.wrapper4position div.logo {
		width: 125px;
		height: 125px;
		transform-origin: 50% 50% 62.5px;
	}
	
	.wrapper4position div.brownbox {
		width: 125px;
		height: 125px;
	}
	.wrapper4position div.whitebottom {
		transform: rotateX(90deg) translateY(25px) translateZ(-50px);
	}
	.wrapper4position div.firstfloor {
		height: 106.25px;
		transform: rotateX(90deg) translateY(10.4166666666667px) translateZ(6.25px);
	}
	.wrapper4position div.brownback {
		transform: translateZ(-31.25px);
	}
	.wrapper4position div.yellowbetween {
		transform: translateZ(-15.625px);
	}
	
	.wrapper4position div.greybox {
		left: 22.5px;
		top: 22.5px;
		width: 40px;
		height: 40px;
		transform: translateZ(45.8333333333334px);
	}
	.wrapper4position div.greyback {
		transform: translateZ(12.5px);
	}
	.wrapper4position div.greytop {
		height: 50px;
		transform: rotateX(90deg) translateY(29.1666666666666px) translateZ(19.7916666666666px);
	}
	
	.wrapper4position div.redbox {
		left: 62.5px;
		top: 0;
		width: 62.5px;
		height: 62.5px;
		transform: translateZ(55.2083333333334px);
	}
	
	.wrapper4position div.yellowbox {
		left: 0;
		top: 62.5px;
		width:	62.5px;
		height: 62.5px;
		transform: translateZ(55.2083333333334px);
	}
	
	.wrapper4position div.lightgreybox {
		left: 62.5px;
		top: 62.5px;
		width: 62.5px;
		height: 62.5px;
		transform: translateZ(67.7083333333334px);
	}
	
	.wrapper4position div.bluebox {
		left: 85px;
		top: 85px;
		width: 40px;
		height: 40px;
		transform: translateZ(104.166666666667px);
	}
	.wrapper4position div.blueback {
		transform: translateZ(85.4166666666666px);
	}
	.wrapper4position div.bluetop {
		height: 22%;
		transform: rotateX(90deg) translateY(93.75px) translateZ(12.5px);
	}

}

@media only screen and (min-width: 1670px) {
	body aside {
		left: calc((100vw - 1150px)/2 - 250px/2);	
	}
}