body{ 
	font-family:Arial; 
	overflow:hidden; 
	margin:0;
	
	background-color:#333333;
	width:100vw;
	height:100vh;

	display:flex;
	align-items: center;
	justify-content: center;
}

#items-container{
	xborder: 1px solid grey;
	width:100vw;
	xbackground-size:cover;
	xbackground-position:center;
	text-align:center;

	display:flex;
	align-items: center;
	justify-content: center;
}

#items{
	width:50%;
	display:inline-block;
	padding-top:50px;	
	position:relative;

	display:flex;
	align-items: center;
	justify-content: center;
}

.item{
	width:450px;
	height:650px;
	xfloat:left;
	padding:50px 50px 0px 50px;

	display:flex;
	align-items: center;
	justify-content: center;
}

.wrap {
	perspective: 800px; /* 800px */
	perspective-origin: 50% 100px;	
	xperspective-origin: 50% 50%;

	display:flex;
	align-items: center;
	justify-content: center;

}

.cube {
	position: relative;
	width: 350px;
	height: 550px;
	transform-style: preserve-3d;

	
}

.cube div {
	position: absolute;
	background-color:#2b333b;
	box-shadow: 0px 0px 50px 10px rgba(255, 255, 255, 0.1),
				inset 0px 0px 50px 2px rgba(0, 0, 0,0.5);
}

.front {
	background-repeat:no-repeat;
	background-position:center;
	background-size: cover;
	ximage-rendering: crisp-edges;
	width:330px;
	height:530px;
	border: 10px solid #151a1e !important;
	-webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.back {
	width:350px;
	height:550px;
	transform: translateZ(-50px) rotateY(180deg);
}

.top {
	width:350px;
	height:50px;
	transform: rotateX(-90deg) translateY(0px);
	transform-origin: top center;
}
.bottom {
	width:350px;
	height:50px;
	transform: rotateX(90deg) translateY(0px) translateZ(-500px);
	transform-origin: bottom center;

}

.bottomShadow {
	width:380px;
	height:80px;
	transform: rotateX(90deg) translateX(-15px) translateY(15px) translateZ(-520px);
	transform-origin: bottom center;
	background-color:rgba(0,0,0,0.2) !important;
	box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.2) !important; 
	border-radius:3px;
}

.left {
	width:50px;
	height:550px;
	transform: rotateY(270deg) translateX(-50px);
	transform-origin: center left;
}

.right {
	width:50px;
	height:550px;
	transform: rotateY(-270deg) translateX(50px) translateZ(300px);
	transform-origin: top right;
}

.pixelate{
	 image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}