/* 
	move in the navigation
	the motion of upcoming items:
		500ms, easeOutExpo
		opacity: 0->100
*/
@-webkit-keyframes slideIn
{
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
@keyframes slideIn
{
	0%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
.slideIn
{
	-webkit-animation-name: slideIn;
	animation-name: slideIn;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
/*
	move from the left to the right in the navigation
	the motion of upcoming items:
		500ms, easeOutExpo
		opacity: 0->100
		position: from right to left, 30px->0
*/
@-webkit-keyframes slideInLeft
{
	0%
	{
		opacity: 0;
		left: 30px;
	}
	100%
	{
		opacity: 1;
		left: 0;
	}
}
@keyframes slideInLeft
{
	0%
	{
		opacity: 0;
		left: 30px;
	}
	100%
	{
		opacity: 1;
		left: 0;
	}
}
.slideInLeft
{
	-webkit-animation-name: slideInLeft;
	animation-name: slideInLeft;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
/*
	move from the right to the left in the navigation
	the motion of upcoming items:
		500ms, easeOutExpo
		opacity: 0->100
		position: from left to right, -30px->0
*/
@-webkit-keyframes slideInRight
{
	0%
	{
		opacity: 0;
		left: -30px;
	}
	100%
	{
		opacity: 1;
		left: 0;
	}
}
@keyframes slideInRight
{
	0%
	{
		opacity: 0;
		left: -30px;
	}
	100%
	{
		opacity: 1;
		left: 0;
	}
}
.slideInRight
{
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
/*
	move out the navigation
	the motion of current items:
		160ms, easeOutExpo
		opacity: 100->0
*/
@-webkit-keyframes slideOut
{
	0%
	{
		opacity: 1;
	}
	50%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 0;
	}
}
@keyframes slideOut
{
	0%
	{
		opacity: 1;
	}
	50%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 0;
	}
}
.slideOut
{
	-webkit-animation-name: slideOut;
	animation-name: slideOut;
	-webkit-animation-duration: 0.16s;
	animation-duration: 0.16s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
/*
	move from the left to the right in the navigation
	the motion of current items:
		160ms, easeOutExpo
		opacity: 100->0(80ms)
		position: from right to left, 0->-20px
*/
@-webkit-keyframes slideOutLeft
{
	0%
	{
		opacity: 1;
		left: 0;
	}
	50%
	{
		opacity: 0;
		left: -10px;
	}
	100%
	{
		opacity: 0;
		left: -20px;
	}
}
@keyframes slideOutLeft
{
	0%
	{
		opacity: 1;
		left: 0;
	}
	50%
	{
		opacity: 0;
		left: -10px;
	}
	100%
	{
		opacity: 0;
		left: -20px;
	}
}
.slideOutLeft
{
	-webkit-animation-name: slideOutLeft;
	animation-name: slideOutLeft;
	-webkit-animation-duration: 0.16s;
	animation-duration: 0.16s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
/*
	move from the right to the left in the navigation
	the motion of current items:
		160ms, easeOutExpo
		opacity: 100->0(80ms)
		position: from left to right, 0->20px
*/
@-webkit-keyframes slideOutRight
{
	0%
	{
		opacity: 1;
		left: 0;
	}
	50%
	{
		opacity: 0;
		left: 10px;
	}
	100%
	{
		opacity: 0;
		left: 20px;
	}
}
@keyframes slideOutRight
{
	0%
	{
		opacity: 1;
		left: 0;
	}
	50%
	{
		opacity: 0;
		left: 10px;
	}
	100%
	{
		opacity: 0;
		left: 20px;
	}
}
.slideOutRight
{
	-webkit-animation-name: slideOutRight;
	animation-name: slideOutRight;
	-webkit-animation-duration: 0.16s;
	animation-duration: 0.16s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
/*
	sticky nav(for fightpass pages), scroll with mouse from top to bottom
		560ms, easeOutExpo
		top: -34px->0
*/
@-webkit-keyframes scrollDown
{
	0%
	{
		top: -120px;
	}
	100%
	{
		top: 0px;
	}
}
@keyframes scrollDown
{
	0%
	{
		top: -120px;
	}
	100%
	{
		top: 0;
	}
}
.scrollDown
{
	-webkit-animation-name: scrollDown;
	animation-name: scrollDown;
	-webkit-animation-duration: 0.56s;
	animation-duration: 0.56s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
/*
	sticky nav(for fightpass pages), scroll with mouse from bottom to top
		160ms, easeOutExpo
		top: 0->34px
		(the white backgorund flashed when top set -34px, so we set top 30px to workaround)
*/
@-webkit-keyframes scrollUp
{
	0%
	{
		top: 0;
	}
	100%
	{
		top: 34px;
	}
}
@keyframes scrollUp
{
	0%
	{
		top: 0;
	}
	100%
	{
		top: 34px;
	}
}
.scrollUp
{
	-webkit-animation-name: scrollUp;
	animation-name: scrollUp;
	-webkit-animation-duration: 0.01s;
	animation-duration: 0.01s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
@-webkit-keyframes scrollUphasAlert
{
	0%
	{
		top: 0;
	}
	100%
	{
		top: 56px;
	}
}
@keyframes scrollUphasAlert
{
	0%
	{
		top: 0;
	}
	100%
	{
		top: 56px;
	}
}
.scrollUp
{
	-webkit-animation-name: scrollUp;
	animation-name: scrollUp;
	-webkit-animation-duration: 0.01s;
	animation-duration: 0.01s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
/*
	click navigation, back to top(for fightpass pages), all move away off screen
		160ms, easeOutExpo
		top: 0->-64px
*/
@-webkit-keyframes moveAwayUp
{
	0%
	{
		top: 0;
	}
	100%
	{
		top: -120px;
	}
}
@keyframes moveAwayUp
{
	0%
	{
		top: 0;
	}
	100%
	{
		top: -120px;
	}
}
.moveAwayUp
{
	-webkit-animation-name: moveAwayUp;
	animation-name: moveAwayUp;
	-webkit-animation-duration: 0.16s;
	animation-duration: 0.16s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
/*
	sticky nav(for ppv page), scroll with mouse from top to bottom
		560ms, easeOutExpo
		opaque background: 0->1
*/
@-webkit-keyframes scrollDownPPV
{
	0%
	{
		top: -86px;
		background: rgba(0, 0, 0, 0);
		border-bottom-color: rgba(35, 31, 32, 0);
	}
	100%
	{
		top: 0;
		background: rgba(0, 0, 0, 1);
		border-bottom-color: rgba(35, 31, 32, 1);
	}
}
@keyframes scrollDownPPV
{
	0%
	{
		top: -86px;
		background: rgba(0, 0, 0, 0);
		border-bottom-color: rgba(35, 31, 32, 0);
	}
	100%
	{
		top: 0;
		background: rgba(0, 0, 0, 1);
		border-bottom-color: rgba(35, 31, 32, 1);
	}
}
.scrollDownPPV
{
	-webkit-animation-name: scrollDownPPV;
	animation-name: scrollDownPPV;
	-webkit-animation-duration: 0.56s;
	animation-duration: 0.56s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
/*
	sticky nav(for ppv page), scroll with mouse from bottom to top
		560ms, easeOutExpo
		opaque background: 1->0
		top: 0->34px
*/
@-webkit-keyframes scrollUpPPV
{
	0%
	{
		top: 0;
		background: rgba(0, 0, 0, 1);
	}
	100%
	{
		top: 34px;
		background: rgba(0, 0, 0, 0);
	}
}
@keyframes scrollUpPPV
{
	0%
	{
		top: 0;
		background: rgba(0, 0, 0, 1);
	}
	100%
	{
		top: 34px;
		background: rgba(0, 0, 0, 0);
	}
}
.scrollUpPPV
{
	-webkit-animation-name: scrollUpPPV;
	animation-name: scrollUpPPV;
	-webkit-animation-duration: 0.56s;
	animation-duration: 0.56s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
@-webkit-keyframes scrollUpPPV
{
	0%
	{
		top: 0;
		background: rgba(0, 0, 0, 1);
	}
	100%
	{
		top: 34px;
		background: rgba(0, 0, 0, 0);
	}
}
@keyframes scrollUpPPVhasAlert
{
	0%
	{
		top: 0;
		background: rgba(0, 0, 0, 1);
	}
	100%
	{
		top: 56px;
		background: rgba(0, 0, 0, 0);
	}
}
.scrollUpPPVhasAlert
{
	-webkit-animation-name: scrollUpPPV;
	animation-name: scrollUpPPV;
	-webkit-animation-duration: 0.56s;
	animation-duration: 0.56s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
/*
	click navigation, back to top(for ppv page), all move away off screen
		160ms, easeOutExpo
		opaque background: 1->0
		top: 0->-34px
*/
@-webkit-keyframes moveAwayUpPPV
{
	0%
	{
		top: 0;
		background: rgba(0, 0, 0, 1);
	}
	100%
	{
		top: -86px;
		background: rgba(0, 0, 0, 0);
	}
}
@keyframes moveAwayUpPPV
{
	0%
	{
		top: 0;
		background: rgba(0, 0, 0, 1);
	}
	100%
	{
		top: -86px;
		background: rgba(0, 0, 0, 0);
	}
}
.moveAwayUpPPV
{
	-webkit-animation-name: moveAwayUpPPV;
	animation-name: moveAwayUpPPV;
	-webkit-animation-duration: 0.16s;
	animation-duration: 0.16s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

/* 
	panel sliding right on Mobile View
		560ms, easeInOutExpo
*/
@-webkit-keyframes slideInRightMobile
{
	0%
	{
		left:100%;
	}
	100%
	{
		left:0;
	}
}
@keyframes slideInRightMobile
{
	0%
	{
		left:100%;
	}
	100%
	{
		left:0;
	}
}
.slideInRightMobile
{
	-webkit-animation-name: slideInRightMobile;
	animation-name: slideInRightMobile;
	-webkit-animation-duration: 0.56s;
	animation-duration: 0.56s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(1, 0, 0, 1);
	-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
}

/* 
	panel sliding left on Mobile View
		560ms, easeInOutExpo
*/
@-webkit-keyframes slideInLeftMobile
{
	0%
	{
		left:0;
	}
	100%
	{
		left:100%;
	}
}
@keyframes slideInLeftMobile
{
	0%
	{
		left:0;
	}
	100%
	{
		left:100%;
	}
}
.slideInLeftMobile
{
	-webkit-animation-name: slideInLeftMobile;
	animation-name: slideInLeftMobile;
	-webkit-animation-duration: 0.56s;
	animation-duration: 0.56s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(1, 0, 0, 1);
	-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
}

/* 
	panel sliding top on Mobile View
		560ms, easeInOutExpo
*/
@-webkit-keyframes slideInTopMobile
{
	0%
	{
		top:100%;
	}
	100%
	{
		top:0;
	}
}
@keyframes slideInTopMobile
{
	0%
	{
		top:100%;
	}
	100%
	{
		top:0;
	}
}
.slideInTopMobile
{
	-webkit-animation-name: slideInTopMobile;
	animation-name: slideInTopMobile;
	-webkit-animation-duration: 0.56s;
	animation-duration: 0.56s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(1, 0, 0, 1);
	-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
}

/* 
	panel sliding down on Mobile View
		560ms, easeInOutExpo
*/
@-webkit-keyframes slideInDownMobile
{
	0%
	{
		top:0;
	}
	100%
	{
		top:100%;
	}
}
@keyframes slideInDownMobile
{
	0%
	{
		top:0;
	}
	100%
	{
		top:100%;
	}
}
.slideInDownMobile
{
	-webkit-animation-name: slideInDownMobile;
	animation-name: slideInDownMobile;
	-webkit-animation-duration: 0.56s;
	animation-duration: 0.56s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(1, 0, 0, 1);
	-webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
}