@keyframes header-enter {
	0% {
		opacity: 0;
		transform: translateX(-10vw);
	}
	50% {
		opacity: .5;
	}
	100% {
		opacity: 1;
	}
}
@keyframes header-enter-reversed {
	0% {
		opacity: 0;
		transform: translateX(10vw);
	}
	50% {
		opacity: .5;
	}
	100% {
		opacity: 1;
	}
}
@keyframes img-enter {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	70% {
		opacity: 1;
	}
	80% {
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes t-enter {
	0% {
		opacity: 0;
		transform: translateY(-10vh);
	}
	50% {
		opacity: .5;
	}
	100% {
		opacity: 1;
	}
}
.award-bar {
	transform-origin: top left;
}
@keyframes barfill {
	0% {
		opacity: 0;
		transform: scaleX(0) translateX(0%);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scaleX(1) translateX(-0);
	}
}
.tool.animate, .tools span.animate, .experience-timeline tr.animate, .mini-project.animate, .awards div.animate, #art-button.animate {
	animation: t-enter .5s 1 forwards;
}
.project.animate, .cproject.animate {
	animation: img-enter .5s 1 forwards;
}
.animatable {
	opacity: 0;
}

h2.animate,h3.animate,h4.animate,.courses > div.animate {
	animation: header-enter 1s 1 forwards;
}

.blocked-horizontal.animate, .highlight-bg.animate  {
	opacity: 1;
}
.blocked-horizontal.animate:before, .blocked-horizontal.animate:after, .highlight-bg.animate:before {
	animation: header-enter 1s 1 forwards;
}

h2.animate.reversed,h3.animate.reversed,h4.animate.reversed,.courses > div.animate.reversed, .highlight-bg.animate:after, .tools.animate, .experience-timeline.animate {
	animation: header-enter-reversed 1s 1 forwards;
}
.award-bar.animate {
	animation: barfill 1s 1 forwards;
}
.about-desc.animate, .tcourse.animate {
	animation: img-enter 1s 1 forwards;
}