/**
* https://codepen.io/rachsmith/pen/BNKJme
*/

.rotating-text {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

.rotating-word {
	position: absolute;
	opacity: 0;
}

@media (max-width: 319px) {
	.rotating-text {
		width: 240px;
		font-size: 17px;
	}
}

@media (min-width: 320px) {
	.rotating-text {
		width: 270px;
		font-size: 20px;
	}
}

@media (min-width: 480px) {
	.rotating-text {
		width: 340px;
		font-size: 25px;
	}
}

@media (min-width: 768px) {
	.rotating-text {
		width: 550px;
		font-size: 40px;
	}
}

@media (min-width: 992px) {
	.rotating-text {
		width: 700px;
		font-size: 50px;
	}
}

@media (min-width: 1200px) {
	.rotating-text {
		width: 820px;
		font-size: 60px;
	}
}

.rotating-letter {
	display: inline-block;
	position: relative;
	float: left;
	transform: translateZ(25px);
	transform-origin: 50% 50% 25px;
}

.rotating-letter.rotating-out {
	transform: rotateX(90deg);
	transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.rotating-letter.rotating-behind {
	transform: rotateX(-90deg);
}

.rotating-letter.rotating-in {
	transform: rotateX(0deg);
	transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}