/*import url('https://fonts.googleapis.com/css?family=Anton|Roboto');*/

.snillrik_anim_logo {
	font-family: 'Anton', sans-serif;
	perspective: 20px; 
	perspective-origin: 10px 2px;
	display: inline-block;
	text-decoration: none;
	height: 20px;
}

.snillrik_anim_logo span {
	cursor: pointer;
	display: inline-block;
	font-size: inherit;
	user-select: none;
	line-height: .8;
	color: #fdb813;
}

.snillrik_anim_logo span:nth-child(1).active, .snillrik_anim_logo span:nth-child(6).active {
	animation: balance 1.5s ease-out;
	transform-origin: 0% 100% 0px;
}

@keyframes balance {
	0%, 100% {
		transform: rotate(0deg);
	}
	
	30%, 60% {
		transform: rotate(-45deg);
	}
}

.snillrik_anim_logo span:nth-child(2).active, .snillrik_anim_logo span:nth-child(7).active  {
	animation: shrinkjump 1s ease-in-out;
	transform-origin: bottom center;
}


@keyframes shrinkjump {
	10%, 35% {
		transform: scale(1.5, .2) translate(0, 0);
	}
	
	45%, 50% {
		transform: scale(1) translate(0, -10px);
	}
	
	80% {
		transform: scale(1) translate(0, 0);
	}
}

.snillrik_anim_logo span:nth-child(3).active, .snillrik_anim_logo span:nth-child(8).active  {
	animation: falling 2s ease-out;
	transform-origin: bottom center;
}

@keyframes falling {
	12% {
		transform: rotateX(240deg);
	}
	
	24% {
		transform: rotateX(150deg);
	}
	
	36% {
		transform: rotateX(200deg);
	}
	
	48% {
		transform: rotateX(175deg);
	}
	
	60%, 85% {
		transform: rotateX(180deg);
	}
	
	100% {
		transform: rotateX(0deg);
	}
}

.snillrik_anim_logo span:nth-child(4).active {
	animation: rotate 1s ease-out;
}

@keyframes rotate {
	20%, 80% {
		transform: rotateY(180deg);
	}
	
	100% {
		transform: rotateY(360deg);
	}
}

.snillrik_anim_logo span:nth-child(5).active {
	animation: toplong 1.5s linear;
}

@keyframes toplong {
	10%, 40% {
		transform: translateY(-2vh) scaleY(1);
	}
	
	90% {
		transform: translateY(-2vh) scaleY(4);
	}
}