@font-face {
	src: url('fonts/Motto-Regular.eot') format('embedded-opentype'),
	url('fonts/Motto-Regular.woff') format('woff'),
	url('fonts/Motto-Regular.woff2') format('woff2');
	font-family: 'Motto';
}

body, html {
	background: #000000;
	font-family: Motto, sans-serif;
	font-size: 64pt;
	line-height: 100pt;
	color: #ffff00;
	-webkit-font-feature-settings:"liga","kern";
}

.animate span{
	display: block;
	position: relative;
	text-align: center;
}

.animate.backwards > span{
	animation: animateBackwards 1s ease-in-out 
forwards;
}
.animate.forwards > span{
	animation: animateForwards 1s ease-in-out 
forwards;
}

.animate.mixed > span:nth-child(even){
	animation: animateBackwards 1s ease-in-out 
forwards;
}
.animate.mixed > span:nth-child(odd){
	animation: animateForwards 1s ease-in-out 
forwards;
}

@keyframes animateForwards {
	from { top: 0; transform: rotate(0deg); }
	to { top: .9em; transform: rotate(-10deg); }
}
@keyframes animateBackwards {
	from { top: 0; transform: rotate(0deg); }
	to { top: 1em; transform: rotate(15deg); }
}