@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');


/*--------------------------------------------------------------
# LETTERS Section
--------------------------------------------------------------*/

.word {
	font-family: 'Pirata One', cursive;
	color: #220AB7;
	text-align: center;
	perspective: 1000px;
}

.word span {
	
	cursor: pointer;

	display: inline-block;
	font-size: 50px;
	user-select: none;
	line-height: 0.8;
}

/* START (W)ELCOME TO MOORE MEDIA MARKETING */

.word span:nth-child(1).active {
	animation: shriCHjump 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shriCHjump {
	10%,
	35% {
		transform: scale(2, 0.2) translate(0, 0);
	}

	45%,
	50% {
		transform: scale(1) translate(0, -150px);
	}

	80% {
		transform: scale(1) translate(0, 0);
	}
}


/* END WELCOME TO MOORE MEDIA MARKETING */

/* START W(E)LCOME TO MOORE MEDIA MARKETING */

.word span:nth-child(2).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);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WE(L)COME TO MOORE MEDIA MARKETING */

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

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

	100% {
		transform: rotateY(360deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WEL(C)OME TO MOORE MEDIA MARKETING */

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

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

	90% {
		transform: translateY(-48vh) scaleY(4);
	}
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 50px;
	user-select: none;
	line-height: 0.8;
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELC(O)ME TO MOORE MEDIA MARKETING */

.word span:nth-child(5).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

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

	30%,
	60% {
		transform: rotate(-45deg);
	}
}


/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCO(M)E TO MOORE MEDIA MARKETING */

.word span:nth-child(6).active {
	animation: shriCHjump 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shriCHjump {
	10%,
	35% {
		transform: scale(2, 0.2) translate(0, 0);
	}

	45%,
	50% {
		transform: scale(1) translate(0, -150px);
	}

	80% {
		transform: scale(1) translate(0, 0);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOM(E) TO MOORE MEDIA MARKETING */

.word span:nth-child(7).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);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME (T)O MOORE MEDIA MARKETING */

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

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

	100% {
		transform: rotateY(360deg);
	}
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 50px;
	user-select: none;
	line-height: 0.8;
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME T(O) MOORE MEDIA MARKETING */

.word span:nth-child(9).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

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

	30%,
	60% {
		transform: rotate(-45deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO (M)OORE MEDIA MARKETING */

.word span:nth-child(10).active {
	animation: shriCHjump 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shriCHjump {
	10%,
	35% {
		transform: scale(2, 0.2) translate(0, 0);
	}

	45%,
	50% {
		transform: scale(1) translate(0, -150px);
	}

	80% {
		transform: scale(1) translate(0, 0);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO M(O)ORE MEDIA MARKETING */

.word span:nth-child(11).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);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MO(O)RE MEDIA MARKETING */

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

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

	100% {
		transform: rotateY(360deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOO(R)E MEDIA MARKETING */

.word span:nth-child(13).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

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

	30%,
	60% {
		transform: rotate(-45deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOOR(E) MEDIA MARKETING */

.word span:nth-child(14).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);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOORE (M)EDIA MARKETING */

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

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

	100% {
		transform: rotateY(360deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOORE M(E)DIA MARKETING */

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

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

	100% {
		transform: rotateY(360deg);
	}
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 50px;
	user-select: none;
	line-height: 0.8;
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOORE ME(D)IA MARKETING */

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

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

	100% {
		transform: rotateY(360deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOORE MEDIA MARKETING */

.word span:nth-child(18).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

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

	30%,
	60% {
		transform: rotate(-45deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOOR(E) MEDIA MARKETING */

.word span:nth-child(19).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);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MO(O)RE MEDIA MARKETING */

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

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

	100% {
		transform: rotateY(360deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOO(R)E MEDIA MARKETING */

.word span:nth-child(21).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

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

	30%,
	60% {
		transform: rotate(-45deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOOR(E) MEDIA MARKETING */

.word span:nth-child(22).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);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOORE (M)EDIA MARKETING */

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

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

	100% {
		transform: rotateY(360deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOORE M(E)DIA MARKETING */

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

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

	100% {
		transform: rotateY(360deg);
	}
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 50px;
	user-select: none;
	line-height: 0.8;
}

/* END "MOORE MEDIA MARKE*T*ING" */

/* START WELCOME TO MOO(R)E MEDIA MARKETING */

.word span:nth-child(25).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

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

	30%,
	60% {
		transform: rotate(-45deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOOR(E) MEDIA MARKETING */

.word span:nth-child(26).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);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOORE (M)EDIA MARKETING */

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

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

	100% {
		transform: rotateY(360deg);
	}
}

/* END WELCOME TO MOORE MEDIA MARKETING */

/* START WELCOME TO MOORE M(E)DIA MARKETING */

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

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

	100% {
		transform: rotateY(360deg);
	}
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 50px;
	user-select: none;
	line-height: 0.8;
}

/* END "MOORE MEDIA MARKE*T*ING" */