@font-face{
    font-family:"Big Noodle Titling Oblique";
    src: url('http://chazu.arkku.net/files/font/big_noodle_titling_oblique.ttf');
}

body{ 
	font-family:Arial; 
	overflow-x:hidden; 
	margin:0;
	padding:0px;
    xbackground-color:#404040;
	background-color:rgba(0,0,0,0.8);
	}

a, a:visited { color:#0000EE; }
a:hover { color:#8080ff; }
a:active{ color:#EE0000; }

#content{	
	xborder:1px solid red;
	}

#topArea{
	max-width:1000px;
	width:100%;
	margin: auto auto;	
	padding:5px;
	text-align:center;
	}
	


#items-container{
    xborder:1px solid cyan;
	width:100vw;
	min-height:450px;
	padding:0px;
	margin:0px;
	xbackground-color:rgba(0,0,0,0.8);
	text-align:center;
	xbox-shadow: inset 0px 0px 50px 10px rgba(0, 0, 0, 0.7);
	xborder:50px solid rgba(0,0,0,0.9);
	border-left:none;
	border-right:none;
	}

#itemsElem {
    xborder:1px solid green;
	display:inline-block;
	}

.item {
	width:150px;
	height:200px;
	xfloat:left;
	padding:50px;
	}

#bottom-surface-container {
	position:absolute;
	max-width:250px;
	width:100%;
    text-align:center;
	}	

#bottom-surface {
    
	}
	
#bottom-surface-top {
	xmax-width:630px;
	width:70%;
	height:250px;
	margin: 105px auto auto 0px;
	display:inline-block;
    xposition:absolute;
	background-color:rgba(204, 51, 51,.8);
    xbackground:#5cae56;
	xtransform: perspective(200px) rotateX(80deg) translateZ(2px);
    

	transform: perspective(400px) rotateX(80deg) translateZ(-10px) translateY(-50px);
	xborder:2px solid rgba(204, 51, 51,0.2);
	xbox-shadow: inset 0px 0px 30px 10px rgba(0, 0, 0, 0.7);
	}	

#bottom-surface-bot {
    position:absolute;
	background-color:#602020;
	opacity:0.8;
	max-width:214px;
	width:100%;
	height:20px;
	margin: 0px 0px 0px -107px;
	
    display:inline-block;
	bottom:81px;
	xbox-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.7);	
	}

.imageWall {
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% 100%;
	image-rendering: crisp-edges;
	}


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

.cube {
	xposition: relative;
	width: 150px;
	transform-style: preserve-3d;
	}

.cube div {
	position: absolute;
	}

.front {
	width: 150px;
	height: 150px;
	transform: translateZ(2px);
	}

.back {
	width: 150px;
	height: 150px;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
	transform: translateZ(-2px) rotateY(180deg) scaleX(-1);
	}

.item-normal-glow-container{
	width: 150px;
	height: 150px;
	transform: translateZ(0px);
	}

.item-normal-glow {
	width: 1px;
	height: 1px;
	border-radius:50%;
	box-shadow: 0px 0px 50px 30px rgba(0, 172, 230, 0.7);
	top: 50%;
	left: 50%;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%); 
	filter: blur(3px);
	}

.item-bottom-shadow-container {
	margin-top:80%;	
	transform: perspective(200px) rotateX(80deg) translateZ(-10px);
	}

.item-bottom-shadow {
	width: 100px;
	height: 100px;
	border-radius:50%;
	background-color:rgba(0,0,0,0.5);
	margin: auto auto;
	}

.flip {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
	}


@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
	}

@keyframes hopper {
	from { transform: translateY(0px); }
	to { transform: translateY(-5px); }
	}

@keyframes shrinker {
	from { transform: scale(1.0, 1.0) }
	to { transform: scale(0.96, 0.96); }
	}

@keyframes enlarger {
	from { transform: scale(0.5, 0.5) }
	to { transform: scale(1.5, 1.5); }
	}

.cube {
	animation:spin 6s infinite linear;
	}

.wrap {
	animation:hopper 1s infinite alternate ease-in-out;
	}

.item-normal-glow{
	animation:enlarger 1s infinite alternate ease-in-out;
	}


.item-bottom-shadow{
	animation:shrinker 1s infinite alternate ease-in-out;
	}


.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+                           */
	
	}

#btn-reload{
	display:block;
    position:fixed;
	left:0;
	right:0;
    bottom:0;
	xmax-width:200px;
	width:95vw;
	height:15vh;
	margin:auto auto;

	xwidth:350px;
	box-shadow: 2px 2px 4px #000000;
	xbackground-color: #aa093c;
	xbackground-color:#1f7a1f;
	background-color:rgba(204, 51, 51,.7);
	
	
	
    border: none;   
    padding: 15px 15px;
	margin-bottom:10px;
	xmargin-left:5px;
	xmargin-right:5px;
    text-align: center;
    text-decoration: none;
    font-size: 45px;
	font-family:"Big Noodle Titling Oblique";
	color: #efdfc2;
	letter-spacing:1px;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	transition: background-color 0.05s;
}	

#btn-reload:hover {
	xbackground-color: #cf1751;
	xcolor:#f5ead6;	
}

#btn-reload:active {
	
	background-color:#910833;
	background-color:rgba(204, 51, 51,.4);
	color:#e5c99a;
	}
	
#btn-reload:focus {outline:0;}	

#bottom-text{
	text-align:center;
    background-color:rgba(0,0,0,0.8);
    color:grey;
}

#bottom-text a{
    color:#5cae56;
}

#item-name-container {
    xborder:1px solid orange;
    background-color:rgba(0,0,0,0.4);
	xbackground-color:rgba(255,255,255,0.1);
    padding: 20px 0px 20px 0px;
    
    font-family: 'Vollkorn', serif;
    color:white; /* 996600 */
    font-size:30px;
    font-weight:100;
	xfont-family:"Big Noodle Titling Oblique";
    
    /* offset-x | offset-y | blur-radius | color */
/*text-shadow: 0px 0px 50px red,
            0px 0px 6px white; */
    text-shadow:0px 0px 50px white,
                1px 1px 1px black;
    
    
    
    
    
}

/* mobiel screen size */
@media screen and (max-width:620px) {
	#bottom-text {
		display:none;
	}
	
	
}