/*------------------------------------------------------------------
# [Animations]
------------------------------------------------------------------*/

.keyframes (feature-animation-spotify; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-86.5%);
	}
	55% {
		.translate(0,-86.5%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (feature-animation-beatport; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-84%);
	}
	55% {
		.translate(0,-84%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (feature-animation-artist; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-92%);
	}
	55% {
		.translate(0,-92%);
	}
	90% {
		.translate(0,0%);
	}
});

/*.keyframes (feature-animation-festival; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-92%);
	}
	55% {
		.translate(0,-92%);
	}
	90% {
		.translate(0,0%);
	}
});*/

.keyframes (feature-animation-country; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-85.5%);
	}
	55% {
		.translate(0,-85.5%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (feature-animation-genre; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-86%);
	}
	55% {
		.translate(0,-86%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (feature-animation-audience; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-52%);
	}
	55% {
		.translate(0,-52%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (feature-animation-label; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-83.5%);
	}
	55% {
		.translate(0,-83.5%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-artist; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-94%);
	}
	55% {
		.translate(0,-94%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-festival; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-91.5%);
	}
	55% {
		.translate(0,-91.5%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-audience; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-70%);
	}
	55% {
		.translate(0,-70%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-compare-artists; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-89%);
	}
	55% {
		.translate(0,-89%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-label; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-92%);
	}
	55% {
		.translate(0,-92%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-beatport; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-90%);
	}
	55% {
		.translate(0,-90%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-artist-chart; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-87%);
	}
	55% {
		.translate(0,-87%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-festival-chart; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-93%);
	}
	55% {
		.translate(0,-93%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-artist-spotify; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-91.6%);
	}
	55% {
		.translate(0,-91.6%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-spotify-chart; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-93%);
	}
	55% {
		.translate(0,-93%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-beatport-chart; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-85%);
	}
	55% {
		.translate(0,-85%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-country; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-91%);
	}
	55% {
		.translate(0,-91%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-genre; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-92%);
	}
	55% {
		.translate(0,-92%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (paywall-animation-label-chart; {
	0% {
		.translate(0,0%);
	}
	45% {
		.translate(0,-92%);
	}
	55% {
		.translate(0,-92%);
	}
	90% {
		.translate(0,0%);
	}
});

.keyframes (fade-in-out-tooltip; {
	0% {
		.font-size(12);
		.opacity(0);
		.prevent-click();
		display: block;
		width: auto;
	}
	20% {
		.font-size(12);
		.prevent-click();
		.opacity(1);
	}
	80% {
		.font-size(12);
		.prevent-click();
		.opacity(1);
	}
	99% {
		.font-size(12);
		.prevent-click();
		.opacity(0);
		width: auto;
		height: auto;
	}
	100% {
		.font-size(0);
		display: none;
		height: 0;
		width: 0;
	}
});

.keyframes (fade-in-out-share; {
	0% {
		.font-size(12);
		.opacity(0);
		.prevent-click();
		display: block;
	}
	20% {
		.font-size(12);
		.prevent-click();
		.opacity(1);
	}
	80% {
		.font-size(12);
		.prevent-click();
		.opacity(1);
	}
	99% {
		.font-size(12);
		.prevent-click();
		.opacity(0);
	}
	100% {
		.font-size(0);
		display: none;
	}
});

.keyframes (fade-in-out; {
	0% {
		.opacity(0);
		.prevent-click();
	}
	20% {
		.prevent-click();
		.opacity(1);
	}
	80% {
		.prevent-click();
		.opacity(1);
	}
	99% {
		.prevent-click();
		.opacity(0);
	}
	100% {
		.opacity(0);
		display: none;
	}
});

.keyframes (transition-color-in; {
	0% {
		background-color: rgba(246,246,245,0);
	}
	1% {
		background-color: rgba(246,246,245,0);
	}
	100% {
		background-color: rgba(246,246,245,1);
	}
});

.keyframes (transition-color-out; {
	0% {
		background-color: rgba(246,246,245,1);
	}
	1% {
		background-color: rgba(246,246,245,1);
	}
	100% {
		background-color: rgba(246,246,245,0);
	}
});

.keyframes (transition-slide-in; {
	0% {
		.translate(110%,0);
		display: none;
	}
	1% {
		.translate(110%,0);
		display: block;
	}
	100% {
		.translate(0%,0);
		display: block;
	}
});

.keyframes (transition-slide-out; {
	0% {
		.translate(0%,0);
		display: block;
	}
	99% {
		.translate(110%,0);
		display: block;
	}
	100% {
		.translate(110%,0);
		display: none;
	}
});

.keyframes (transition-slide-up; {
	0% {
		display: none;
		.translate(0%,100%);
	}
	1% {
		display: flex;
		.translate(0%,100%);
	}
	100% {
		display: flex;
		.translate(0%,0%);
	}
});

.keyframes (transition-slide-down; {
	0% {
		.translate(0,0);
	}
	99% {
		.translate(0,100%);
	}
	100% {
		display: none;
		.translate(0,100%);
	}
});

.keyframes (fade-in; {
	0% {
		.opacity(0);
	}
	99% {
		.opacity(1);
	}
	100% {
		.opacity(1);
	}
});

.keyframes (fade-in-block; {
	0% {
		.opacity(0);
		display: block;
	}
	99% {
		.opacity(1);
		display: block;
	}
	100% {
		.opacity(1);
		display: block;
	}
});

.keyframes (fade-out; {
	0% {
		.opacity(1);
	}
	99% {
		.opacity(0);
	}
	100% {
		.opacity(0);
	}
});

.keyframes (genre-slide-in; {
	0% {
		.translate(-101%,0);
		display: none;
	}
	1% {
		.translate(-101%,0);
		display: block;
	}
	100% {
		.translate(0%,0);
		display: block;
	}
});

.keyframes (cta-search-label-animation; {
	0% {
		content: "Pretty much every Artist on the planet";
		.opacity(0);
	}
	5% {
		content: "Pretty much every Artist on the planet";
		.opacity(1);
	}
	20% {
		content: "Pretty much every Artist on the planet";
		.opacity(1);
	}
	25% {
		content: "Pretty much every Artist on the planet";
		.opacity(0);
	}
	26% {
		content: "Every single one of them";
		.opacity(0);
	}
	30% {
		content: "Every single one of them";
		.opacity(1);
	}
	45% {
		content: "Every single one of them";
		.opacity(1);
	}
	50% {
		content: "Every single one of them";
		.opacity(0);
	}
	51% {
		content: "Where to tonight?";
		.opacity(0);
	}
	55% {
		content: "Where to tonight?";
		.opacity(1);
	}
	70% {
		content: "Where to tonight?";
		.opacity(1);
	}
	75% {
		content: "Where to tonight?";
		.opacity(0);
	}
	76% {
		content: "Search among 5000 Festivals worldwide";
		.opacity(0);
	}
	80% {
		content: "Search among 5000 Festivals worldwide";
		.opacity(1);
	}
	95% {
		content: "Search among 5000 Festivals worldwide";
		.opacity(1);
	}
	100% {
		content: "Search among 5000 Festivals worldwide";
		.opacity(0);
	}
});

.keyframes (cta-search-animation; {
	0% {
		content: "Search Artist";
		width: 0%;
	}
	5% {
		content: "Search Artist";
		width: 100%;
	}
	20% {
		content: "Search Artist";
		width: 100%;
	}
	25% {
		content: "Search Artist";
		width: 0%;
	}
	26% {
		content: "Search Place";
		width: 0%;
	}
	30% {
		content: "Search Place";
		width: 100%;
	}
	45% {
		content: "Search Place";
		width: 100%;
	}
	50% {
		content: "Search Place";
		width: 0%;
	}
	51% {
		content: "Search Event";
		width: 0%;
	}
	55% {
		content: "Search Event";
		width: 100%;
	}
	70% {
		content: "Search Event";
		width: 100%;
	}
	75% {
		content: "Search Event";
		width: 0%;
	}
	76% {
		content: "Search Festival";
		width: 0%;
	}
	80% {
		content: "Search Festival";
		width: 100%;
	}
	95% {
		content: "Search Festival";
		width: 100%;
	}
	100% {
		content: "Search Festival";
		width: 0%;
	}
});

.keyframes (blink-text-cursor; {
	0% {
		border-right: 2px solid @red;
	}
	100% {
		border-right: 2px solid transparent;
	}
});

.keyframes (line-out-in; {
	0% {
		left: 0%;
		width: 99%;
	}
	50% {
		left: 99%;
		width: 0%;
	}
	51% {
		left: 0%;
		width: 0%;
	}
	100% {
		left: 0%;
		width: 99%;
	}
});

.keyframes (pulsate; {
	0% {
		transform: scaleY(1);
		transform-origin: 50% 50%;
	}
	
	50% {
		transform: scaleY(0.5);
		transform-origin: 50% 50%;
	}
	
	100% {
		transform: scaleY(1);
		transform-origin: 50% 50%;
	}
});

.keyframes (pulsate-out; {
	0% {
		transform: scaleY(inherit);
		transform-origin: 50% 50%;
	}
	
	100% {
		transform: scaleY(0);
		transform-origin: 50% 50%;
	}
});

.keyframes (rubberband; {
	from {
		transform: scale3d(1, 1, 1);
	}

	30% {
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		transform: scale3d(.95, 1.05, 1);
	}

	75% {
		transform: scale3d(1.05, .95, 1);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
});

.keyframes (jello; {
	11.1% {
	transform: none
	}
	22.2% {
	transform: skewX(-12.5deg) skewY(-12.5deg)
	}
	33.3% {
	transform: skewX(6.25deg) skewY(6.25deg)
	}
	44.4% {
	transform: skewX(-3.125deg) skewY(-3.125deg)
	}
	55.5% {
	transform: skewX(1.5625deg) skewY(1.5625deg)
	}
	66.6% {
	transform: skewX(-0.78125deg) skewY(-0.78125deg)
	}
	77.7% {
	transform: skewX(0.390625deg) skewY(0.390625deg)
	}
	88.8% {
	transform: skewX(-0.1953125deg) skewY(-0.1953125deg)
	}
	100% {
	transform: none
	}
});

.keyframes (notification-inner-ani; {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
});

.keyframes (notification-hide; {
	0% {
		max-height: 300px;
	}
	100% {
		max-height: 0px;
	}
});

.keyframes (notification-ani; {
	0% {
		max-height: 0px;
	}
	10% {
		max-height: 300px;
	}
	100% {
		max-height: 300px;
	}
	//90% {
	//	max-height: 300px;
	//}
	//100% {
	//	max-height: 0px;
	//}
});