/* Animations */
@keyframes placeCardAnim {
	0%   {transform:scale(2);}
	100% {transform:scale(1);}
 }
 .placeCardAnim{
    animation: placeCardAnim 0.3s;
}
@keyframes onLoadPlayerAnim {
	0%   {transform:scale(2.4) translate(-110px, -20px);}
	95%   {transform:scale(2.4) translate(-110px, -20px);}
	100% {transform:scale(1) translate(0, 0);}
}
.onLoadPlayerAnim {
    animation: onLoadPlayerAnim 6s;
}
@keyframes onLoadComputerAnim {
	0%   {transform:scale(2.4) translate(160px, 40px);}
	95%   {transform:scale(2.4) translate(160px, 40px);}
	100% {transform:scale(1) translate(0, 0);}
}
.onLoadComputerAnim {
    animation: onLoadComputerAnim 6s;
}
@keyframes shakeScreenAnim {
	0%   {transform:translate(0, 0);}
	1%   {transform: translate(5px, 2.5px);}
	2%   {transform: translate(-2.5px, -5px);}
	3%   {transform: translate(-7.5px, 0px);}
	4%   {transform: translate(0px, 5px);}
	5%   {transform: translate(2.5px, -2.5px);}
	6%   {transform: translate(-2.5px, 5px);}
	7%   {transform: translate(-7.5px, 2.5px);}
	8%   {transform: translate(5px, 2.5px);}
	9%   {transform: translate(-2.5px, -2.5px);}
	10%   {transform: translate(2.5px, -5px);}
	11%   {transform: translate(5px, 2.5px);}
	12%   {transform: translate(-2.5px, -5px);}
	13%   {transform: translate(-7.5px, 0px);}
	14%   {transform: translate(0px, 5px);}
	15%   {transform: translate(2.5px, -2.5px);}
	16%   {transform: translate(-2.5px, 5px);}
	17%   {transform: translate(-7.5px, 2.5px);}
	18%   {transform: translate(5px, 2.5px);}
	19%   {transform: translate(-2.5px, -2.5px);}
	20%   {transform: translate(2.5px, -5px);}
	21%   {transform: translate(5px, 2.5px);}
	22%   {transform: translate(-2.5px, -5px);}
	23%   {transform: translate(-7.5px, 0px);}
	24%   {transform: translate(0px, 5px);}
	25%   {transform: translate(2.5px, -2.5px);}
	26%   {transform: translate(-2.5px, 5px);}
	27%   {transform: translate(-7.5px, 2.5px);}
	28%   {transform: translate(5px, 2.5px);}
	29%   {transform: translate(-2.5px, -2.5px);}
	30%   {transform: translate(2.5px, -5px);}
	31%   {transform: translate(5px, 2.5px);}
	32%   {transform: translate(-2.5px, -5px);}
	33%   {transform: translate(-7.5px, 0px);}
	34%   {transform: translate(0px, 5px);}
	35%   {transform: translate(2.5px, -2.5px);}
	36%   {transform: translate(-2.5px, 5px);}
	37%   {transform: translate(-7.5px, 2.5px);}
	38%   {transform: translate(5px, 2.5px);}
	39%   {transform: translate(-2.5px, -2.5px);}
	40%   {transform: translate(2.5px, -5px);}
	41% {transform: translate(0, 0);}
	42%   {transform: translate(5px, 2.5px);}
	43%   {transform: translate(-2.5px, -5px);}
	44%   {transform: translate(-7.5px, 0px);}
	45%   {transform: translate(0px, 5px);}
	46%   {transform: translate(2.5px, -2.5px);}
	47%   {transform: translate(-2.5px, 5px);}
	48%   {transform: translate(-7.5px, 2.5px);}
	49%   {transform: translate(5px, 2.5px);}
	50%   {transform: translate(-2.5px, -2.5px);}
	51%   {transform: translate(2.5px, -5px);}
	52%   {transform:translate(0, 0);}
	53%   {transform: translate(5px, 2.5px);}
	54%   {transform: translate(-2.5px, -5px);}
	55%   {transform: translate(-7.5px, 0px);}
	56%   {transform: translate(0px, 5px);}
	57%   {transform: translate(2.5px, -2.5px);}
	58%   {transform: translate(-2.5px, 5px);}
	59%   {transform: translate(-7.5px, 2.5px);}
	60%   {transform: translate(5px, 2.5px);}
	61%   {transform: translate(-2.5px, -2.5px);}
	62%   {transform: translate(2.5px, -5px);}
	63%   {transform: translate(5px, 2.5px);}
	64%   {transform: translate(-2.5px, -5px);}
	65%   {transform: translate(-7.5px, 0px);}
	66%   {transform: translate(0px, 5px);}
	67%   {transform: translate(2.5px, -2.5px);}
	68%   {transform: translate(-2.5px, 5px);}
	69%   {transform: translate(-7.5px, 2.5px);}
	70%   {transform: translate(5px, 2.5px);}
	71%   {transform: translate(-2.5px, -2.5px);}
	72%   {transform: translate(2.5px, -5px);}
	73%   {transform: translate(5px, 2.5px);}
	74%   {transform: translate(-2.5px, -5px);}
	75%   {transform: translate(-7.5px, 0px);}
	76%   {transform: translate(0px, 5px);}
	77%   {transform: translate(2.5px, -2.5px);}
	78%   {transform: translate(-2.5px, 5px);}
	79%   {transform: translate(-7.5px, 2.5px);}
	80%   {transform: translate(5px, 2.5px);}
	81%   {transform: translate(-2.5px, -2.5px);}
	82%   {transform: translate(2.5px, -5px);}
	83%   {transform: translate(5px, 2.5px);}
	84%   {transform: translate(-2.5px, -5px);}
	85%   {transform: translate(-7.5px, 0px);}
	86%   {transform: translate(0px, 5px);}
	87%   {transform: translate(2.5px, -2.5px);}
	88%   {transform: translate(-2.5px, 5px);}
	89%   {transform: translate(-7.5px, 2.5px);}
	90%   {transform: translate(5px, 2.5px);}
	91%   {transform: translate(-2.5px, -2.5px);}
	92%   {transform: translate(2.5px, -5px);}
	93% {transform: translate(0, 0);}
	94%   {transform: translate(5px, 2.5px);}
	95%   {transform: translate(-2px, -4.5px);}
	96%   {transform: translate(-6.5px, 0px);}
	97%   {transform: translate(0px, 2.5px);}
	98%   {transform: translate(1.5px, -1px);}
	99%   {transform: translate(-0.4px, 0.6px);}
	100% {transform: translate(0, 0);}
}
.shakeScreenAnim {
    animation: shakeScreenAnim 3.25s;
}
@keyframes bigHitAnim {
	0%   {transform:translate(0, 0);}
	10%   {transform: translate(10px, 5px);}
	20%   {transform: translate(-5px, -10px);}
	30%   {transform: translate(-15px, 0px);}
	40%   {transform: translate(0px, 10px);}
	50%   {transform: translate(5px, -5px);}
	60%   {transform: translate(-5px, 10px);}
	70%   {transform: translate(-15px, 5px);}
	80%   {transform: translate(10px, 5px);}
	90%   {transform: translate(-5px, -5px);}
	100%   {transform: translate(0, 0);}
}
.bigHitAnim {
    animation: bigHitAnim 0.2s;
}
@keyframes fadeInAnim {
	0%   {opacity: 0;}
	100% {opacity: 1;}
}
.fadeInAnim {
    animation: fadeInAnim 1s;
}
@keyframes fadeOutAnim {
	0%   {opacity: 1;}
	100% {opacity: 0;}
}
.fadeOutAnim {
    animation: fadeOutAnim 1s;
}
.longFadeOutAnim {
    animation: fadeOutAnim 3s;
}
@keyframes fade {
    0% {
        opacity: 0.8;
        border-radius: 10px;
        transform: scale(1);
   }
    100% {
        opacity: 0;
        border-radius: 10px;
        transform: scale(1.15);
   }
}
@keyframes openMenuAnim {
	0%   {transform:scale(.5);}
	50%  {transform:scale(1.2);}
	100% {transform:scale(1);}
 }
 .openMenuAnim {
    animation: openMenuAnim 0.25s;
}
@keyframes triangleOpenMenuAnim {
	0%   {transform:scale(.5) rotate(150deg) translate(5px, 5px);}
	50%  {transform:scale(1.2) rotate(150deg);}
	100% {transform:scale(1) rotate(150deg);}
 }
 .triangleOpenMenuAnim {
    animation: triangleOpenMenuAnim 0.25s;
}
@keyframes easeOutAnim {
	0%   {transform:scale(1);}
	50%  {transform:scale(1.1);}
	100% {transform:scale(0);}
 }
 .easeOutAnim {
    animation: easeOutAnim 0.25s;
}
@keyframes straightEaseOutAnim {
	0%   {transform:scale(1);}
	100% {transform:scale(0);}
 }
 .straightEaseOutAnim {
    animation: straightEaseOutAnim 0.25s;
}
@keyframes zoomOutAnim {
	0% {
		transform:scale(4) rotate(-35deg);
	}
	100% {
		transform:scale(1) rotate(0deg);
	}
 }
 .zoomOutAnim {
    animation: zoomOutAnim 4s;
}

/* Tutorial Animations */
@keyframes openPackAnim {
	0%   {transform:rotate(-15deg) translate(0, 0) scale(1);}
	1%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	2%   {transform:rotate(-15deg) translate(-2.5px, -5px);}
	3%   {transform:rotate(-15deg) translate(-7.5px, 0px);}
	4%   {transform:rotate(-15deg) translate(0px, 5px);}
	5%   {transform:rotate(-15deg) translate(2.5px, -2.5px);}
	6%   {transform:rotate(-15deg) translate(-2.5px, 5px);}
	7%   {transform:rotate(-15deg) translate(-7.5px, 2.5px);}
	8%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	9%   {transform:rotate(-15deg) translate(-2.5px, -2.5px);}
	10%   {transform:rotate(-15deg) translate(2.5px, -5px);}
	11%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	12%   {transform:rotate(-15deg) translate(-2.5px, -5px);}
	13%   {transform:rotate(-15deg) translate(-7.5px, 0px);}
	14%   {transform:rotate(-15deg) translate(0px, 5px);}
	15%   {transform:rotate(-15deg) translate(2.5px, -2.5px);}
	16%   {transform:rotate(-15deg) translate(-2.5px, 5px);}
	17%   {transform:rotate(-15deg) translate(-7.5px, 2.5px);}
	18%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	19%   {transform:rotate(-15deg) translate(-2.5px, -2.5px);}
	20%   {transform:rotate(-15deg) translate(2.5px, -5px);}
	21%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	22%   {transform:rotate(-15deg) translate(-2.5px, -5px);}
	23%   {transform:rotate(-15deg) translate(-7.5px, 0px);}
	24%   {transform:rotate(-15deg) translate(0px, 5px);}
	25%   {transform:rotate(-15deg) translate(2.5px, -2.5px);}
	26%   {transform:rotate(-15deg) translate(-2.5px, 5px);}
	27%   {transform:rotate(-15deg) translate(-7.5px, 2.5px);}
	28%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	29%   {transform:rotate(-15deg) translate(-2.5px, -2.5px);}
	30%   {transform:rotate(-15deg) translate(2.5px, -5px);}
	31%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	32%   {transform:rotate(-15deg) translate(-2.5px, -5px);}
	33%   {transform:rotate(-15deg) translate(-7.5px, 0px);}
	34%   {transform:rotate(-15deg) translate(0px, 5px);}
	35%   {transform:rotate(-15deg) translate(2.5px, -2.5px);}
	36%   {transform:rotate(-15deg) translate(-2.5px, 5px);}
	37%   {transform:rotate(-15deg) translate(-7.5px, 2.5px);}
	38%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	39%   {transform:rotate(-15deg) translate(-2.5px, -2.5px);}
	40%   {transform:rotate(-15deg) translate(2.5px, -5px);}
	41% {transform:rotate(-15deg) translate(0, 0);}
	42%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	43%   {transform:rotate(-15deg) translate(-2.5px, -5px);}
	44%   {transform:rotate(-15deg) translate(-7.5px, 0px);}
	45%   {transform:rotate(-15deg) translate(0px, 5px);}
	46%   {transform:rotate(-15deg) translate(2.5px, -2.5px);}
	47%   {transform:rotate(-15deg) translate(-2.5px, 5px);}
	48%   {transform:rotate(-15deg) translate(-7.5px, 2.5px);}
	49%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	50%   {transform:rotate(-15deg) translate(-2.5px, -2.5px);}
	51%   {transform:rotate(-15deg) translate(2.5px, -5px);}
	52%   {transform:rotate(-15deg) translate(0, 0);}
	53%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	54%   {transform:rotate(-15deg) translate(-2.5px, -5px);}
	55%   {transform:rotate(-15deg) translate(-7.5px, 0px);}
	56%   {transform:rotate(-15deg) translate(0px, 5px);}
	57%   {transform:rotate(-15deg) translate(2.5px, -2.5px);}
	58%   {transform:rotate(-15deg) translate(-2.5px, 5px);}
	59%   {transform:rotate(-15deg) translate(-7.5px, 2.5px);}
	60%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	61%   {transform:rotate(-15deg) translate(-2.5px, -2.5px);}
	62%   {transform:rotate(-15deg) translate(2.5px, -5px);}
	63%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	64%   {transform:rotate(-15deg) translate(-2.5px, -5px);}
	65%   {transform:rotate(-15deg) translate(-7.5px, 0px);}
	66%   {transform:rotate(-15deg) translate(0px, 5px);}
	67%   {transform:rotate(-15deg) translate(2.5px, -2.5px);}
	68%   {transform:rotate(-15deg) translate(-2.5px, 5px);}
	69%   {transform:rotate(-15deg) translate(-7.5px, 2.5px);}
	70%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	71%   {transform:rotate(-15deg) translate(-2.5px, -2.5px);}
	72%   {transform:rotate(-15deg) translate(2.5px, -5px);}
	73%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	74%   {transform:rotate(-15deg) translate(-2.5px, -5px);}
	75%   {transform:rotate(-15deg) translate(-7.5px, 0px);}
	76%   {transform:rotate(-15deg) translate(0px, 5px);}
	77%   {transform:rotate(-15deg) translate(2.5px, -2.5px);}
	78%   {transform:rotate(-15deg) translate(-2.5px, 5px);}
	79%   {transform:rotate(-15deg) translate(-7.5px, 2.5px);}
	80%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	81%   {transform:rotate(-15deg) translate(-2.5px, -2.5px) scale(1.45);}
	82%   {transform:rotate(-15deg) translate(2.5px, -5px) scale(1.6);}
	83%   {transform:rotate(-15deg) translate(5px, 2.5px) scale(1.6);}
	84%   {transform:rotate(-15deg) translate(-2.5px, -5px) scale(1.6);}
	85%   {transform:rotate(-15deg) translate(-7.5px, 0px) scale(1.6);}
	86%   {transform:rotate(-15deg) translate(0px, 5px) scale(1.6);}
	87%   {transform:rotate(-15deg) translate(2.5px, -2.5px) scale(1.6);}
	88%   {transform:rotate(-15deg) translate(-2.5px, 5px);}
	89%   {transform:rotate(-15deg) translate(-7.5px, 2.5px);}
	90%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	91%   {transform:rotate(-15deg) translate(-2.5px, -2.5px);}
	92%   {transform:rotate(-15deg) translate(2.5px, -5px);}
	93% {transform:rotate(-15deg) translate(0, 0);}
	94%   {transform:rotate(-15deg) translate(5px, 2.5px);}
	95%   {transform:rotate(-15deg) translate(-1.7px, -2.95px);}
	96%   {transform:rotate(-15deg) translate(-2.1px, 0px);}
	97%   {transform:rotate(-15deg) translate(3px, 2.5px);}
	98%   {transform:rotate(-15deg) translate(3px, -3px);}
	99%   {transform:rotate(-15deg) translate(-4px, 5px);}
	100% {transform:rotate(-15deg) translate(4px, 3px);}
}
 .openPackAnim {
    animation: openPackAnim 1.5s;
}
@keyframes tutorialHeroAnim {
	0% {
		transform:translate(20px, -300px) scale(1.6) rotate(-4deg);
	}
	45% {
		transform:translate(45px, -300px) scale(2.7) rotate(-4deg);
	}
	50% {
		transform:translate(50px, -300px) scale(3) rotate(0deg);
	}
	80% {
		transform:translate(50px, -300px) scale(3) rotate(1deg);
	}
	90% {
		transform:translate(50px, -300px) scale(3) rotate(-1.5deg);
	}
	100% {
		transform:translate(0, 0) scale(1) rotate(0deg);
	}
 }
 .tutorialHeroAnim {
    animation: tutorialHeroAnim 8s;
}

@keyframes tutorialHoggerAnim {
	0% {
		transform:translate(0px, -750px) scale(1.5);
	}
	10% {
		transform:translate(0px, -200px) scale(1.5);
	}
	100% {
		transform:translate(0, 0) scale(1) rotate(0deg);
	}
 }
 .tutorialHoggerAnim {
    animation: tutorialHoggerAnim 0.5s;
}

@keyframes packHoverAnim {
	0% {
		width: 11%;
		height: 25%;
		transform:translate(0px, 0px) scale(1.25) rotate(0deg);
	}
	25% {
		width: 11%;
		height: 25%;
		transform:translate(-3px, 0px) scale(1.20) rotate(5deg);
	}
	50% {
		width: 11%;
		height: 25%;
		transform:translate(-3px, 0px) scale(1.25) rotate(-5deg);
	}
	75% {
		width: 11%;
		height: 25%;
		transform:translate(0px, -3px) scale(1.20) rotate(5deg);
	}
	100% {
		width: 11%;
		height: 25%;
		transform:translate(0px, 0px) scale(1.25) rotate(0deg);
	}
 }
 .packHoverAnim {
    animation: packHoverAnim 1.5s;
}

@keyframes packOpenAnim {
	0% {
		transform:translate(0px, 0px) scale(1) rotate(0deg);
	}
	35% {
		transform:translate(0px, 0px) scale(1) rotate(0deg);
	}
	40% {
		transform:translate(-3px, 0px) scale(1) rotate(0deg);
	}
	60% {
		transform:translate(40px, -3px) scale(1.6) rotate(-20deg);
	}
	80% {
		transform:translate(40px, -3px) scale(1.6) rotate(-20deg);
	}
	95% {
		transform:translate(40px, -3px) scale(1.63) rotate(-20deg);
	}
	96% {
		transform:translate(44px, -6px) scale(1.57) rotate(-20deg);
	}
	97% {
		transform:translate(36px, 4px) scale(1.61) rotate(-20deg);
	}
	98% {
		transform:translate(42px, -5px) scale(1.56) rotate(-20deg);
	}
	99% {
		transform:translate(38.5px, 2.5px) scale(1.64) rotate(-20deg);
	}
	100% {
		transform:translate(40px, -3px) scale(1.65) rotate(-20deg);
	}
 }
 .packOpenAnim {
    animation: packOpenAnim 2s;
}

@keyframes openPackShakeScreenAnim {
	0%   {transform:translate(0, 0);}
	2%   {transform: translate(-2.5px, -5px);}
	4%   {transform: translate(-7.5px, 0px);}
	6%   {transform: translate(0px, 5px);}
	8%   {transform: translate(2.5px, -2.5px);}
	10%   {transform: translate(-2.5px, 5px);}
	12%   {transform: translate(-7.5px, 2.5px);}
	14%   {transform: translate(5px, 2.5px);}
	16%   {transform: translate(-2.5px, -2.5px);}
	18%   {transform: translate(2.5px, -5px);}
	20%   {transform: translate(5px, 2.5px);}
	22%   {transform: translate(-2.5px, -5px);}
	24%   {transform: translate(-7.5px, 0px);}
	26%   {transform: translate(0px, 5px);}
	28%   {transform: translate(2.5px, -2.5px);}
	30%   {transform: translate(-2.5px, 5px);}
	32%   {transform: translate(-7.5px, 2.5px);}
	34%   {transform: translate(5px, 2.5px);}
	36%   {transform: translate(-2.5px, -2.5px);}
	38%   {transform: translate(2.5px, -5px);}
	40%   {transform: translate(5px, 2.5px);}
	42%   {transform: translate(-2.5px, -5px);}
	44%   {transform: translate(-7.5px, 0px);}
	46%   {transform: translate(0px, 5px);}
	48%   {transform: translate(2.5px, -2.5px);}
	50%   {transform: translate(-2.5px, 5px);}
	52%   {transform: translate(-7.5px, 2.5px);}
	54%   {transform: translate(5px, 2.5px);}
	56%   {transform: translate(-2.5px, -2.5px);}
	58%   {transform: translate(2.5px, -5px);}
	60%   {transform: translate(5px, 2.5px);}
	62%   {transform: translate(-2.5px, -5px);}
	64%   {transform: translate(-7.5px, 0px);}
	66%   {transform: translate(0px, 5px);}
	68%   {transform: translate(2.5px, -2.5px);}
	70%   {transform: translate(-2.5px, 5px);}
	72%   {transform: translate(-7.5px, 2.5px);}
	74%   {transform: translate(5px, 2.5px);}
	76%   {transform: translate(-2.5px, -2.5px);}
	78%   {transform: translate(2.5px, -5px);}
	80% {transform: translate(0, 0);}
	82%   {transform: translate(5px, 2.5px);}
	84%   {transform: translate(-2.5px, -5px);}
	86%   {transform: translate(-7.5px, 0px);}
	88%   {transform: translate(0px, 5px);}
	90%   {transform: translate(2.5px, -2.5px);}
	92%   {transform: translate(-2.5px, 5px);}
	94%   {transform: translate(-7.5px, 2.5px);}
	96%   {transform: translate(5px, 2.5px);}
	98%   {transform: translate(-1px, -2.5px);}
	100% {transform: translate(0, 0);}
}
.openPackShakeScreenAnim {
    animation: openPackShakeScreenAnim 0.5s;
}

@keyframes cardOnePackOpen {
	0% {
		transform:translate(350px, 300px) scale(0);
	}
	100% {
		transform:translate(0, 0) scale(1);
	}
 }
 .cardOnePackOpen {
    animation: cardOnePackOpen 0.25s;
}

@keyframes cardTwoPackOpen {
	0% {
		transform:translate(0px, 350px) scale(0);
	}
	100% {
		transform:translate(0, 0) scale(1);
	}
 }
 .cardTwoPackOpen {
    animation: cardTwoPackOpen 0.25s;
}

@keyframes cardThreePackOpen {
	0% {
		transform:translate(-350px, 300px) scale(0);
	}
	100% {
		transform:translate(0, 0) scale(1);
	}
 }
 .cardThreePackOpen {
    animation: cardThreePackOpen 0.25s;
}

@keyframes cardFourPackOpen {
	0% {
		transform:translate(300px, -300px) scale(0);
	}
	100% {
		transform:translate(0, 0) scale(1);
	}
 }
 .cardFourPackOpen {
    animation: cardFourPackOpen 0.25s;
}

@keyframes cardFivePackOpen {
	0% {
		transform:translate(-300px, -300px) scale(0);
	}
	100% {
		transform:translate(0, 0) scale(1);
	}
 }
 .cardFivePackOpen {
    animation: cardFivePackOpen 0.25s;
}

@keyframes flipAnim {
	0%   {transform:translate(0, 0);}
	10%   {transform: translate(10px, 5px);}
	20%   {transform: translate(-5px, -10px);}
	30%   {transform: translate(-15px, 0px);}
	40%   {transform: translate(0px, 10px);}
	50%   {transform: translate(5px, -5px);}
	60%   {transform: translate(-5px, 10px);}
	70%   {transform: translate(-15px, 5px);}
	80%   {transform: translate(10px, 5px);}
	90%   {transform: translate(-5px, -5px);}
	100%   {transform: translate(0, 0);}
}
.rareFlipAnim {
    animation: rareFlipAnim 0.1s;
}
.epicFlipAnim {
    animation: epicFlipAnim 0.15s;
}
.legendaryFlipAnim {
    animation: flipAnim 0.25s;
}


/* Card onPlay Anims */
@keyframes ragnarosTheFirelord {
	0%   {transform:scale(1.1) rotate(0deg);}
	10% {transform: scale(2.75) rotate(-13deg);}
	45% {transform: scale(3.2) rotate(-20deg);}
	85% {transform: scale(2.85) rotate(-20deg);}
	100%   {transform: scale(1) rotate(0deg);}
}
.ragnarosTheFirelord {
    animation: ragnarosTheFirelord 2s;
}

.theLichKingShake {
    animation: bigHitAnim 0.4s;
}
@keyframes theLichKing {
	0%   {transform:scale(2.5); opacity: 0;}
	60%   {transform:scale(2.5); opacity: 0.95;}
	100%   {transform: scale(1); opacity: 1;}
}
.theLichKing {
	animation: theLichKing 1s;
}

@keyframes stormwindChampion {
	0%   {transform:scale(1.8) rotate(0deg);}
	70%   {transform:scale(2.1) rotate(-20deg);}
	100%   {transform: scale(1) rotate(0deg);}
}
.stormwindChampion {
	animation: stormwindChampion 0.75s;
}


@keyframes deathwing {
	0%   {transform:scale(1) rotate(0deg);}
	60%   {transform:scale(10) rotate(-30deg);}
	100%   {transform: scale(1) rotate(0deg);}
}
.deathwingShake {
    animation: shakeScreenAnim 2s;
}
.deathwing {
	animation: deathwing 2s;
}

@keyframes divineShieldBreak {
	0%   {transform:scale(1);}
	80%   {transform:scale(1.2);}
	100%   {transform:scale(1.2);}
}
.divineShieldBreak {
    animation: divineShieldBreak 0.4s;
}