

.loader {
	color: #fff;
	position: fixed;
	box-sizing: border-box;
	left: -9999px;
	top: -9999px;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: 999999
}

.loader:after,
.loader:before {
	box-sizing: border-box;
	display: none
}

.loader.is-active {
	background: white;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0
}

.loader.is-active:after,
.loader.is-active:before {
	display: block
}

.loader-music:after,
.loader-music:before {
	background-size: 100% 100% !important;
	background: url("/assets/img/ched_logo.png") bottom center no-repeat;
	content: "";
	position: fixed;
	width: 240px;
	height: 240px;
	top: 50%;
	left: 50%;
	margin: -120px 0 0 -120px;
	border-radius: 50%;
	text-align: center;
	line-height: 240px;
	color: #fff;
	font-size: 40px;
	font-family: Helvetica, Arial, sans-serif;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
	letter-spacing: -1px
}

.loader-music:after {
	backface-visibility: hidden
}

.loader-music[data-hey-oh]:after,
.loader-music[data-hey-oh]:before {
	box-shadow: 0 0 0 10px
}

.loader-music[data-hey-oh]:before {
	/* background-color: #fff;
	color: #000; */
	animation: coinBack 2.5s linear infinite, oh 5s 1.25s linear infinite both
}

.loader-music[data-hey-oh]:after {
	/* background-color: #000; */
	animation: coin 2.5s linear infinite, hey 5s linear infinite both
}

.loader-music[data-no-cry]:after,
.loader-music[data-no-cry]:before {
	background: linear-gradient(45deg, #009b3a 50%, #fed100 51%);
	box-shadow: 0 0 0 10px #000
}

.loader-music[data-no-cry]:before {
	animation: coinBack 2.5s linear infinite, cry 5s 1.25s linear infinite both
}

.loader-music[data-no-cry]:after {
	animation: coin 2.5s linear infinite, no 5s linear infinite both
}

.loader-music[data-we-are]:before {
	animation: coinBack 2.5s linear infinite, theWorld 5s 1.25s linear infinite both;
	background: radial-gradient(ellipse at center, #4ecdc4 0, #556270)
}

.loader-music[data-we-are]:after {
	animation: coin 2.5s linear infinite, weAre 5s linear infinite both;
	background: radial-gradient(ellipse at center, #26d0ce 0, #1a2980)
}

.loader-music[data-rock-you]:before {
	animation: coinBack 2.5s linear infinite, rockYou 5s 1.25s linear infinite both;
	background: #444
}

.loader-music[data-rock-you]:after {
	animation: coin 2.5s linear infinite, weWill 5s linear infinite both;
	background: #96281b
}

@keyframes coin {
	to {
		transform: rotateY(359deg)
	}
}

@keyframes coinBack {
	0% {
		transform: rotateY(180deg)
	}
	50% {
		transform: rotateY(1turn)
	}
	to {
		transform: rotateY(180deg)
	}
}

/* @keyframes hey {
	0% {
		content: "Hey!"
	}
	50% {
		content: "Let's!"
	}
	to {
		content: "Hey!"
	}
} */

/* @keyframes oh {
	0% {
		content: "Oh!"
	}
	50% {
		content: "Go!"
	}
	to {
		content: "Oh!"
	}
} */
/* 
@keyframes no {
	0% {
		content: "No..."
	}
	50% {
		content: "no"
	}
	to {
		content: "No..."
	}
} */
/* 
@keyframes cry {
	0% {
		content: "woman"
	}
	50% {
		content: "cry!"
	}
	to {
		content: "woman"
	}
}

@keyframes weAre {
	0% {
		content: "We are"
	}
	50% {
		content: "we are"
	}
	to {
		content: "We are"
	}
}

@keyframes theWorld {
	0% {
		content: "the world,"
	}
	50% {
		content: "the children!"
	}
	to {
		content: "the world,"
	}
}

@keyframes weWill {
	0% {
		content: "We will,"
	}
	50% {
		content: "rock you!"
	}
	to {
		content: "We will,"
	}
}

@keyframes rockYou {
	0% {
		content: "we will"
	}
	50% {
		content: "\1F918"
	}
	to {
		content: "we will"
	}
} */

