#kontener {
	width: 100%;
	height: 100%;
	padding: 0;
	position: relative;
	overflow: hidden;
}

/* te wlasciwosci i wartosci sa konieczne, jesli nie zadeklarowano ich wczesniej lub dziedzicza inne wartosci lub nie dziedzicza ich wcale lub ... */

#kontener * {
	box-sizing: border-box;
	padding: 0;
	border: 0;
	margin: 0;
}

/* te wlasciwosci sa konieczne, jesli nie (...) */

#scena {
	--skala: 1;
	transform: scale(var(--skala));
	transition: transform .2s;
}

/* USTAW WARTOSC DLA 'transition:transform...' wg potrzeby ewentualnie USUN */
#scena {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	perspective: 222vmax;
}

/* USTAW WARTOSC DLA 'perspective' */

#rotator {
	width: 100%;
	height: 100%;
	visibility: hidden;
	transform-style: preserve-3d;
}

/* element obracany w 3D przez traqball.js */

#pudlo {
	--wA: 333;
	--wB: 222;
	--wH: 111;
	--wG: 3;
	--rotX: -15;
	--rotY: -15;
	--rotZ: 0;
	--defText: url("textures/wall_default.jpg");
}

/* wartosci startowe dla pudla w pikselach i gradusach oraz domyslna sciezka do bazowej tekstury */

#pudlo {
	width: calc(var(--wA) * 1px);
	height: calc(var(--wH) * 1px);
	position: absolute;
	top: 50%;
	left: 50%;
	visibility: hidden;
}

#pudlo {
	top: calc(50% + (var(--wH) * .5px) + (var(--wB) * .5px));
}

#pudlo {
	transform-style: preserve-3d;
	transform: translateX(-50%) translateY(-50%) rotateX(calc(var(--rotX) * 1grad)) rotateY(calc(var(--rotY) * 1grad)) rotateZ(calc(var(--rotZ) * 1grad));
	transition: transform .2s ease-out;
}

#pudlo:hover {
	cursor: grab;
}

/* SCIANKI */
#pudlo>* {
	visibility: visible;
	transform-style: preserve-3d;
	position: absolute;
	background: tan center/cover no-repeat scroll;
	box-shadow: 0 0 2px tan;
}

/* wartosc dla BACKGROUND albo tan albo red albo transparent albo... , albo cover albo contain - TO BARDZO WAZNE !!! */

/*...*/
#wall1 {
	top: calc(var(--wG) * 1px);
	bottom: 0;
	left: calc(var(--wG) * 2px);
	right: calc(var(--wG) * 2px);
	transform: translateZ(calc(var(--wB) * .5px)) rotateY(0grad);
}

/* PRZÓD-1 */
#wall6 {
	top: calc(var(--wG) * 1px);
	bottom: 0;
	left: calc(var(--wG) * 2px);
	right: calc(var(--wG) * 2px);
	transform: translateZ(calc(var(--wB) * -.5px)) rotateY(200grad);
}

/* TYŁ-6   */

#wall1::before,
#wall6::before {
	top: calc(var(--wG) * -1px);
	bottom: 0;
	left: calc(var(--wG) * -2px);
	width: calc(var(--wG) * 4px);
	background: transparent url('textures/pionB.png') top left/cover no-repeat scroll;
	position: absolute;
	content: '';
}

#wall1::after,
#wall6::after {
	top: calc(var(--wG) * -1px);
	bottom: 0;
	right: calc(var(--wG) * -2px);
	width: calc(var(--wG) * 4px);
	background: transparent url('textures/pionA.png') top right/cover no-repeat scroll;
	position: absolute;
	content: '';
}



/*...*/
#wall3 {
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(var(--wB) * 1px);
	transform: translateX(-50%) rotateY(-100grad);
}

/* LEWA-3  */
#wall4 {
	top: 0;
	bottom: 0;
	right: 0;
	width: calc(var(--wB) * 1px);
	transform: translateX(+50%) rotateY(+100grad);
}

/* PRAWA-4 */

#wall3::before,
#wall4::before {
	position: absolute;
	bottom: 100%;
	height: calc(var(--wG) * 4px);
	left: 0;
	right: 0;
	transform-origin: bottom;
	transform: rotateX(100grad);
	background: tan var(--defText) center/cover no-repeat scroll;
	box-shadow: 0 0 1px tan;
	content: '';
}

#wall3::after,
#wall4::after {
	position: absolute;
	top: 0;
	bottom: 1px;
	left: 0;
	right: 0;
	transform: translateZ(calc(var(--wG) * -4px)) rotateY(200grad);
	background: tan var(--defText) center/cover no-repeat scroll;
	box-shadow: 0 0 1px tan;
	content: '';
}

/*...*/
#wall5 {
	left: 0;
	right: 0;
	top: 100%;
	height: calc(var(--wB) * 1px);
	transform: translateY(-50%) rotateX(-100grad);
}

/* DÓŁ-5 */
#wall5::before {
	position: absolute;
	left: 2px;
	right: 2px;
	top: 0;
	height: calc(var(--wG) * 1px);
	transform: translateZ(calc((var(--wH) * -1px) + (var(--wG) * 1px)));
	background: tan;
	content: '';
}

/*...*/
#dno {
	left: 2px;
	right: 2px;
	top: 100%;
	height: calc((var(--wB) * 1px) - (var(--wG) * 1px));
	transform: translateY(-50.1%) rotateX(100grad);
	background: tan var(--defText) center/cover no-repeat scroll;
	background-image: url(/frontend/cardboard-models/textures/wall_default.jpg);
}

#dno::before {
	position: absolute;
	bottom: 100%;
	height: calc((var(--wH) * 1px) - (var(--wG) * 1px));
	left: 1px;
	right: 1px;
	transform-origin: bottom;
	transform: rotateX(-100grad) rotateY(0grad);
	background: inherit;
	content: '';
}

#dno::after {
	position: absolute;
	bottom: 0;
	height: calc((var(--wH) * 1px) - (var(--wG) * 1px));
	left: 1px;
	right: 1px;
	transform-origin: bottom;
	transform: rotateX(-100grad) rotateY(200grad);
	background: inherit;
	content: '';
}

/*...*/
#pokrywa {
	background: tan var(--defText) center/cover no-repeat scroll;
	box-shadow: 0 0 2px black, 0 0 2px black inset;
}

#pokrywa {
	top: calc(var(--wG) * 1px);
	height: calc(var(--wB) * 1px);
	left: calc(var(--wG) * 4px);
	right: calc(var(--wG) * 4px);
}

#pokrywa {
	transform-origin: top;
	transform: translateZ(calc((var(--wB) * -.5px) + (var(--wG) * .5px))) rotateX(200grad);
	transform-style: preserve-3d;
}

.white #pokrywa::before,
.white #pokrywa::after,
.white #wall2::before,
.white #wall2::after,
.white #przodek::after,
.white #przodek::before,
.white #wall8::before {
	background-image: url(/frontend/cardboard-models/textures/wall_white.jpg);
}

#pokrywa::before {
	position: absolute;
	right: 100%;
	width: calc(var(--wH) * .9px);
	top: 8px;
	bottom: 2px;
	background: inherit;
	background-position: right;
	box-shadow: inherit;
	content: '';
	background-image: url(/frontend/cardboard-models/textures/wall_default.jpg);
}

#pokrywa::before {
	border-radius: 22% 0 0 99% / 11% 0 0 33%;
	transform-origin: right;
	transform: rotateY(-22grad) rotateX(-1grad);
}

#pokrywa::after {
	position: absolute;
	left: 100%;
	width: calc(var(--wH) * .9px);
	top: 8px;
	bottom: 2px;
	background: inherit;
	background-position: left;
	box-shadow: inherit;
	content: '';
	background-image: url(/frontend/cardboard-models/textures/wall_default.jpg);
}

#pokrywa::after {
	border-radius: 0 22% 99% 0 / 0 11% 33% 0;
	transform-origin: left;
	transform: rotateY(22grad) rotateX(-1grad);
}

/*...*/
#pokrywa>#wall2 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--wG) * .5px));
	background: inherit;
}

#pokrywa>#wall7 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--wG) * -.5px)) rotateX(200grad);
	background: inherit;
}

#wall2::before,
#wall7::before {
	background: tan var(--defText) right/cover no-repeat scroll;
	border-radius: 99% 0 0 22% / 33% 0 0 11%;
}

#wall2::before {
	position: absolute;
	top: 8px;
	bottom: 2px;
	left: -1px;
	width: calc(var(--wH) * .9px);
	transform-origin: right;
	transform: translateX(-100%) rotateX(200grad) rotateY(22grad);
	content: '';
}

#wall7::before {
	position: absolute;
	top: 2px;
	bottom: 8px;
	left: -1px;
	width: calc(var(--wH) * .9px);
	transform-origin: right;
	transform: translateX(-100%) rotateX(0grad) rotateY(22grad);
	content: '';
	background-image: url(/frontend/cardboard-models/textures/wall_default.jpg);
}

#wall2::after,
#wall7::after {
	background: tan var(--defText) left/cover no-repeat scroll;
	border-radius: 0 99% 22% 0 / 0 33% 11% 0;
}

#wall2::after {
	position: absolute;
	top: 8px;
	bottom: 2px;
	right: -1px;
	width: calc(var(--wH) * .9px);
	transform-origin: left;
	transform: translateX(100%) rotateX(200grad) rotateY(-22grad);
	content: '';
}

#wall7::after {
	position: absolute;
	top: 2px;
	bottom: 8px;
	right: -1px;
	width: calc(var(--wH) * .9px);
	transform-origin: left;
	transform: translateX(100%) rotateX(0grad) rotateY(-22grad);
	content: '';
	background-image: url(/frontend/cardboard-models/textures/wall_default.jpg);
}

/*...*/
#przodek {
	background: tan var(--defText) center/cover no-repeat scroll;
	box-shadow: 0 0 2px black, 0 0 2px black inset;
}

#przodek {
	top: 0;
	bottom: 0;
	left: calc(var(--wG) * 2px);
	right: calc(var(--wG) * 2px);
}

#przodek {
	transform-origin: bottom;
	transform: translateY(calc((var(--wB) * -1px) + (var(--wH) * -1px) - (var(--wG) * -1px))) translateZ(calc((var(--wB) * -.5px) + (var(--wG) * .5px))) rotateX(1grad);
}

#przodek::before {
	position: absolute;
	right: 100%;
	width: calc(var(--wH) * .9px);
	top: 2px;
	bottom: 1px;
	background: inherit;
	box-shadow: inherit;
	content: '';
}

#przodek::before {
	border-radius: 99% 0 0 11% / 88% 0 0 11%;
	transform-origin: right;
	transform: rotateY(22grad);
	background-position: right;
}

#przodek::after {
	position: absolute;
	left: 100%;
	width: calc(var(--wH) * .9px);
	top: 2px;
	bottom: 1px;
	background: inherit;
	box-shadow: inherit;
	content: '';
}

#przodek::after {
	border-radius: 0 99% 11% 0 / 0 88% 11% 0;
	transform-origin: left;
	transform: rotateY(-22grad);
	background-position: left;
}

/*...*/
#przodek>#wall9 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--wG) * .5px));
	background: inherit;
}

#przodek>#wall8 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform-style: preserve-3d;
	transform: translateZ(calc(var(--wG) * -.5px)) rotateX(200grad);
	background: inherit;
}

#wall9::before,
#wall8::before {
	background: tan var(--defText) right/cover no-repeat scroll;
	border-radius: 11% 0 0 99% / 11% 0 0 88%;
	box-shadow: 0 0 2px black;
}

#wall9::before {
	position: absolute;
	top: 1px;
	bottom: 2px;
	left: -1px;
	width: calc(var(--wH) * .9px);
	transform-origin: right;
	transform: translateX(-100%) rotateX(200grad) rotateY(-22grad);
	content: '';
	background-image: url(/frontend/cardboard-models/textures/wall_default.jpg);
}

#wall8::before {
	position: absolute;
	top: 1px;
	bottom: 2px;
	left: -1px;
	width: calc(var(--wH) * .9px);
	transform-origin: right;
	transform: translateX(-100%) rotateX(0grad) rotateY(-22grad);
	content: '';
}

#wall9::after,
#wall8::after {
	background: tan var(--defText)) left/cover no-repeat scroll;
	border-radius: 0 11% 99% 0 / 0 11% 88% 0;
	box-shadow: 0 0 2px black;
}

#wall9::after {
	background: tan url(/frontend/cardboard-models/textures/wall_default.jpg) left/cover no-repeat scroll;
}

#wall9::after {
	position: absolute;
	top: 1px;
	bottom: 2px;
	right: -1px;
	width: calc(var(--wH) * .9px);
	transform-origin: left;
	transform: translateX(100%) rotateX(200grad) rotateY(+22grad);
	content: '';
}

#wall8::after {
	position: absolute;
	top: 1px;
	bottom: 2px;
	right: -1px;
	width: calc(var(--wH) * .9px);
	transform-origin: left;
	transform: translateX(100%) rotateX(0grad) rotateY(+22grad);
	content: '';
}

#pudlo>*>div {
	transform-style: flat;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 9px rgba(1, 1, 1, .25) inset
}

/* 'box-shadow' mozna zmodyfikowac lub usunac - w zaleznosci od efektu finalnego; tu mozna tez dodac inne wlasciwosci */

#pudlo .wall-inner {
	background: center/cover no-repeat scroll;
	box-shadow: none;
	backface-visibility: hidden;
}