#loot-container {
    xborder:1px solid magenta;
    height:100%;
    xdisplay:flex;
    xflex-direction:column;
    xalign-items: center;
    xjustify-content:center ;
    display:flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
    z-index:2;
}

#loot-name-container {
    xborder:1px solid grey;
    xborder:1px solid orange;
    text-align: center;
    height:20%;
    xmargin-top:40px;
    padding:20px;
    width:100%;
    padding:0px 10px 0px 10px;
    transition: all 0.3s;
    
    display:flex;

    align-items: end;
    justify-content: center;

}

#loot-name {
    xborder:1px solid grey;
    xborder:1px solid orange;
    font-size:1em;
    xfont-family: Georgia, serif;
    padding:10px;
    font-family:Arial;
    color:rgb(236, 187, 139);
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.99),
                 2px 2px 0px rgba(0, 0, 0, 0.99);
}

#loot-container > .loot-item {
    xborder:1px solid white;
    height:50%;
    width:100%;
    transition: all 0.3s;
    xbackground-color:rgba(0, 0, 0, 0.2);

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

x#loot-container > .loot-item :active {
    filter:brightness(1.5);
}


.loot-item > .outer-wrap {
	perspective: 800px; /* 800px */
	perspective-origin: 50% 100px;	


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

.loot-item > .outer-wrap > .inner-wrap {
	xposition: relative;
	width: 150px;
	transform-style: preserve-3d;

    xanimation: spin 10s infinite linear;
}

.loot-item > .outer-wrap > .inner-wrap > div {
	position:absolute;
}



.loot-item > .outer-wrap > .inner-wrap > .image {
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% 100%;
	image-rendering: crisp-edges;

    width: 150px;
	height: 150px;
    ximage-rendering: pixelated;


}

.loot-item > .outer-wrap > .inner-wrap > .image { /*front */
	transform: translateZ(2px);
	xfilter: drop-shadow(0px 0px 4px rgb(57, 222, 255));
	xfilter: drop-shadow(rgba(153, 51, 255, 0.8) 0px 0px 5px);
}

.loot-item > .outer-wrap > .inner-wrap > .image.back {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	xfilter: FlipH;
	-ms-filter: "FlipH";
	transform: translateZ(-2px) rotateY(180deg) scaleX(-1);
}



.loot-item > .outer-wrap > .inner-wrap > .item-normal-glow-container {
    xborder:1px solid grey;
	width: 150px;
	height: 150px;
	transform: translateZ(0px);
    display: flex;
    align-items: center;
    justify-content:center ;
}

.loot-item > .outer-wrap > .inner-wrap > .item-normal-glow-container > .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:saturate(200%) brightness(150%) blur(3px);

    animation:enlarger 1s infinite alternate ease-in-out;
}


.loot-item > .item-bottom-shadow-container {
	margin-top:100px;	
	transform: perspective(200px) rotateX(80deg) translateZ(-10px);
	xfilter:blur(5px)
}

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

    animation:shrinker 1s infinite alternate ease-in-out;
}

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



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

@keyframes spin2 {
    0% {
        transform: rotateY(0deg);
    }

    25% {
        transform: rotateY(-80deg);
    }

    50% {
        transform: rotateY(0deg);
    }

    75% {
        transform: rotateY(80deg);
    }

    100% {
        transform: rotateY(0deg);
    }


}

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

@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); }
}