@keyframes slideUpFadeIn {
    0% {
		top: 0px;
        opacity: 0;
		width: 50px;
		height: 50px;
    }
	
	    50% {
		top: -30px;
		opacity: 1;
		width: 200px;
		height: 200px;
    }
    100% {
		top: -50px;
		width: 130px;
		height: 130px;
    }
}




    

@keyframes shakeBox {
    0%   { transform: translate(0,0); filter: drop-shadow(0 0 0px #CCFFE5) drop-shadow(0 0 0px #64D898);}
    20%  { transform: translate(-6px,6px); filter: drop-shadow(0 0 3px #CCFFE5) drop-shadow(0 0 6px #64D898);}
    40%  { transform: translate(6px,-3px); filter: drop-shadow(0 0 6px #CCFFE5) drop-shadow(0 0 12px #64D898);}
    60%  { transform: translate(-4px,5px); filter: drop-shadow(0 0 6px #CCFFE5) drop-shadow(0 0 18px #64D898);}
    80%  { transform: translate(4px,-4px); filter: drop-shadow(0 0 8px #CCFFE5) drop-shadow(0 0 16px #64D898); top: 0px;}
    100% { transform: translate(0,0); filter: drop-shadow(0 0 8px #CCFFE5) drop-shadow(0 0 20px #64D898); top: 30px;}
}


#cll-lootbox-btn{
		margin: 16px auto;
	align-content: center;
		  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
	grid-row: 3;
	width: 100%;
	height: 60px;
	background: linear-gradient(45deg, #00846E, #00F067);
	font-weight: 600;
	color: white;
	border: 0;
	border-radius: 16px;
}

#cll-lootbox-btn:hover{
background: linear-gradient(45deg, #4129FF, #ADA2FF);
}

#cll-box-image.disabled{
	opacity: 0.6;
}

#cll-lootbox-btn.disabled {

    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

.cll-lootbox-container{
    display: flex;
	width: 100%;
	height: 65vh;
	margin: 0;
    align-items: end;
    justify-content: space-evenly;
	border-radius: 16px;
}

#cll-lootbox-result{
			  display: flex;
	flex-direction: column;
	justify-content: end;
}

#cll-lootbox-cooldown{
		display: block;
	text-align: center;
	color: white;
	font-size: 10pt;
	width: 100%;
}

.meow_error{
	display: block;
	text-align: center;
	color: white;
	font-size: 12pt;
}

.meow_bonus{
	display: block;
	text-align: center;
	color: white;
	font-size: 24pt;
}

.meow_award,
.meow_award-main{
	display: inline-block;
	text-align: center;
	color: white;
	font-size: 16pt;
}


.meow_award_image{
	max-width: 200px;
	display: block;
	margin-top: 10px;
	
}

.cll-lootbox-stack {
    position: relative;
    width: 230px;
    height: 230px;
    margin: 0 auto;
}

#cll-box-image {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0;
    transition: all 0.3s ease-in-out;
    animation: slideDown 0.8s cubic-bezier(0.1, -0.6, 0.2, 0) forwards;
}

#cll-reward-image {
    position: absolute;
    top: 0px;
    left: 50%;
    max-height: 130px;
    display: none;
    z-index: 10;
	filter: drop-shadow(0 0 6px #CCFFE5) drop-shadow(0 0 18px #64D898);
}

img.coin-icon{
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 2px;
}

#cll-reward-text{
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
}



#cll-reward-image.animate-reveal {
	transform: translateX(-50%);
    animation: slideUpFadeIn 0.6s cubic-bezier(0.1, -0.6, 0.2, 0) forwards;
}



#cll-box-image.shake {
    animation: shakeBox 0.5s ease-in-out;
}

.lootbox-clock{
	font-size: 10pt;
	font-weight: 300;
}


@media only screen and (max-width: 768px){
#cll-box-image {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0;
    transition: all 0.3s ease-in-out;
}