@keyframes showCard
{
	0%
	{
		clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
	}
	
	50%
	{
		top:-252px;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		z-index:101;
	}
	
	100%
	{
		top:0px;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		z-index:101;
	}
}

@keyframes hideCard
{
	0%
	{
		
		top:0px;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		z-index:101;
	}
	
	50%
	{
		top:-252px;
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		z-index:101;
	}
	
	100%
	{
		top:0px;
		clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
		z-index:50;
	}
}

@keyframes showSlideUp
{
	0%
	{
		/* clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); */
		clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
		transform: translateY(360px);
	}
	100% 
	{
		/* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		transform: translateY(0px);
    
    }
}

@keyframes hideSlideDown
{
	0%
	{
		/* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		transform: translateY(0px);
	}
	100% 
	{
		/* clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); */
		clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
		transform: translateY(360px);
    }
}
@keyframes scrollDivToLeft
{
	0%
	{
		transform: translateX(-100%);
	}
	100%
	{
		transform: translateX(100%);
	}
}
@keyframes movePlayButton
{
	0%
	{
		transform: translateX(0);
	}
	37.5%
	{
		transform: translateX(-101%) scale(0,0) rotateY(90deg);
		display:none;
	}
	50%
	{
		transform: translateX(101%) scale(0,0) rotateY(180deg);
		display:none;
	}
	62.5%
	{
		transform: translateX(101%) scale(0,0) rotateY(270deg);
		display:block;
	}
	100%
	{
		transform: translateX(0) scale(1,1) rotateY(360deg);
	}
}