/* reset css */
body {
	margin:0;
	background-color:#000;
}
html,body {
	height:100%;
}
/* 1 */
body {
	display:flex;
	justify-content:space-around;
	align-content:space-around;
	flex-wrap:wrap;
}
section {
	flex:1 1 25%;
}
.rotating-plane {
	margin:auto;
	width:64px;
	height:64px;
	background-color:pink;
	animation:rotating-plane 1.2s infinite ease-in-out;
}
@keyframes rotating-plane {
	0% {
	transform:perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
	transform:perspective(120px) rotateX(-180deg) rotateY(0deg);
}
100% {
	transform:perspective(120px) rotateX(-180deg) rotateY(-180deg);
}
}/*2*/
.double-bounce {
	position:relative;
	margin:auto;
	width:64px;
	height:64px;
}
.double-bounce .child {
	width:100%;
	height:100%;
	border-radius:50%;
	background-color:pink;
	opacity:.6;
	position:absolute;
	left:0;
	top:0;
	animation:double-bounce 2s infinite ease-in-out;
}
.double-bounce .double-bounce-2 {
	animation-delay:-1s;
}
@keyframes double-bounce {
	0% {
	transform:scale(0);
}
50% {
	transform:scale(1);
}
100% {
	transform:scale(0);
}
}/*3*/
.wave {
	width:96px;
	height:64px;
	margin:auto;
}
.wave .rect {
	background-color:pink;
	height:100%;
	width:8px;
	display:inline-block;
	animation:wave-rect 1.2s infinite ease-in-out;
}
.wave .rect-1 {
	animation-delay:-1.1s;
}
.wave .rect-2 {
	animation-delay:-1s;
}
.wave .rect-3 {
	animation-delay:-0.9s;
}
.wave .rect-4 {
	animation-delay:-0.8s;
}
.wave .rect-5 {
	animation-delay:-0.7s;
}
@keyframes wave-rect {
	0% {
	transform:scaleY(.4);
}
20% {
	transform:scaleY(1);
}
40% {
	transform:scaleY(.4);
}
100% {
	transform:scaleY(.4);
}
}/*4*/
.cubes {
	width:64px;
	height:64px;
	margin:auto;
	position:relative;
}
.cubes .cube {
	width:16px;
	height:16px;
	background-color:pink;
	position:absolute;
	left:0;
	top:0;
	animation:cubes 1.8s infinite ease-in-out;
}
.cubes .cube-2 {
	animation-delay:-0.9s;
}
@keyframes cubes {
	0% {
	transform:rotate(0deg);
}
25% {
	transform:translateX(32px) rotate(-90deg) scale(.5);
}
50% {
	transform:translateX(32px) translateY(32px) rotate(-179deg);
}
50.1% {
	transform:translateX(32px) translateY(32px) rotate(-180deg);
}
75% {
	transform:translateX(0) translateY(32px) rotate(-270deg) scale(.5);
}
100% {
	transform:rotate(-360deg);
}
}/*5*/
.spinner {
	width:64px;
	height:64px;
	margin:auto;
	background-color:pink;
	border-radius:50%;
	animation:spinner 1s infinite ease-in-out;
}
@keyframes spinner {
	0% {
	transform:scale(0);
}
100% {
	transform:scale(1);
	opacity:0;
}
}/*6*/
.dots {
	width:64px;
	height:64px;
	margin:auto;
	animation:dots 2s infinite linear;
}
@keyframes dots {
	100% {
	transform:rotate(360deg);
}
}.dots .child {
	width:32px;
	height:32px;
	display:inline-block;
	background-color:pink;
	border-radius:50%;
	animation:dots-child 2s infinite ease-in-out;
}
.dots .dot-2 {
	animation-delay:-1s;
}
@keyframes dots-child {
	0% {
	transform:scale(0);
}
50% {
	transform:scale(1);
}
100% {
	transform:scale(0);
}
}/*7*/
.three-bounce {
	width:128px;
	margin:auto;
}
.three-bounce .child {
	width:32px;
	height:32px;
	background-color:pink;
	border-radius:50%;
	display:inline-block;
	animation:three-bounce 1.4s infinite ease-in-out;
}
.three-bounce .bounce-1 {
	animation-delay:-0.32s;
}
.three-bounce .bounce-2 {
	animation-delay:-0.16s;
}
@keyframes three-bounce {
	0% {
	transform:scale(0);
}
40% {
	transform:scale(1);
}
80% {
	transform:scale(0);
}
100% {
	transform:scale(0);
}
}/*8*/
.circle-bounce {
	width:64px;
	height:64px;
	margin:auto;
	position:relative;
}
.circle-bounce .child {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.circle-bounce .child:before {
	content:"";
	display:block;
	margin:0 auto;
	width:15%;
	height:15%;
	background-color:pink;
	border-radius:100%;
	animation:circle-bounce 1.2s infinite ease-in-out;
}
.circle-bounce .circle-2 {
	transform:rotate(30deg);
}
.circle-bounce .circle-2:before {
	animation-delay:-1.1s;
}
.circle-bounce .circle-3 {
	transform:rotate(60deg);
}
.circle-bounce .circle-3:before {
	animation-delay:-1.0s;
}
.circle-bounce .circle-4 {
	transform:rotate(90deg);
}
.circle-bounce .circle-4:before {
	animation-delay:-0.9s;
}
.circle-bounce .circle-5 {
	transform:rotate(120deg);
}
.circle-bounce .circle-5:before {
	animation-delay:-0.8s;
}
.circle-bounce .circle-6 {
	transform:rotate(150deg);
}
.circle-bounce .circle-6:before {
	animation-delay:-0.7s;
}
.circle-bounce .circle-7 {
	transform:rotate(180deg);
}
.circle-bounce .circle-7:before {
	animation-delay:-0.6s;
}
.circle-bounce .circle-8 {
	transform:rotate(210deg);
}
.circle-bounce .circle-8:before {
	animation-delay:-0.5s;
}
.circle-bounce .circle-9 {
	transform:rotate(240deg);
}
.circle-bounce .circle-9:before {
	animation-delay:-0.4s;
}
.circle-bounce .circle-10 {
	transform:rotate(270deg);
}
.circle-bounce .circle-10:before {
	animation-delay:-0.3s;
}
.circle-bounce .circle-11 {
	transform:rotate(300deg);
}
.circle-bounce .circle-11:before {
	animation-delay:-0.2s;
}
.circle-bounce .circle-12 {
	transform:rotate(330deg);
}
.circle-bounce .circle-12:before {
	animation-delay:-0.1s;
}
@keyframes circle-bounce {
	0% {
	transform:scale(0);
}
40% {
	transform:scale(1);
}
80% {
	transform:scale(0);
}
100% {
	transform:scale(0);
}
}/*9*/
.cube-grid {
	width:64px;
	height:64px;
	margin:auto;
}
.cube-grid .cube {
	width:33%;
	height:33%;
	background-color:pink;
	float:left;
	animation:cube-grid 1.3s infinite ease-in-out;
}
/*
	234
	123
	012 
*/
.cube-grid .cube-1 {
	animation-delay:.2s;
}
.cube-grid .cube-2 {
	animation-delay:.3s;
}
.cube-grid .cube-3 {
	animation-delay:.4s;
}
.cube-grid .cube-4 {
	animation-delay:.1s;
}
.cube-grid .cube-5 {
	animation-delay:.2s;
}
.cube-grid .cube-6 {
	animation-delay:.3s;
}
.cube-grid .cube-7 {
	animation-delay:0s;
}
.cube-grid .cube-8 {
	animation-delay:.1s;
}
.cube-grid .cube-9 {
	animation-delay:.2s;
}
@keyframes cube-grid {
	0% {
	transform:scale3D(1,1,1);
}
35% {
	transform:scale3D(0,0,1);
}
70% {
	transform:scale3D(1,1,1);
}
100% {
	transform:scale3D(1,1,1);
}
}/*8*/
.circle-opacity {
	width:64px;
	height:64px;
	margin:auto;
	position:relative;
}
.circle-opacity .child {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.circle-opacity .child:before {
	content:"";
	display:block;
	margin:0 auto;
	width:15%;
	height:15%;
	background-color:pink;
	border-radius:100%;
	animation:circle-opacity 1.2s infinite ease-in-out;
}
.circle-opacity .circle-2 {
	transform:rotate(30deg);
}
.circle-opacity .circle-2:before {
	animation-delay:-1.1s;
}
.circle-opacity .circle-3 {
	transform:rotate(60deg);
}
.circle-opacity .circle-3:before {
	animation-delay:-1.0s;
}
.circle-opacity .circle-4 {
	transform:rotate(90deg);
}
.circle-opacity .circle-4:before {
	animation-delay:-0.9s;
}
.circle-opacity .circle-5 {
	transform:rotate(120deg);
}
.circle-opacity .circle-5:before {
	animation-delay:-0.8s;
}
.circle-opacity .circle-6 {
	transform:rotate(150deg);
}
.circle-opacity .circle-6:before {
	animation-delay:-0.7s;
}
.circle-opacity .circle-7 {
	transform:rotate(180deg);
}
.circle-opacity .circle-7:before {
	animation-delay:-0.6s;
}
.circle-opacity .circle-8 {
	transform:rotate(210deg);
}
.circle-opacity .circle-8:before {
	animation-delay:-0.5s;
}
.circle-opacity .circle-9 {
	transform:rotate(240deg);
}
.circle-opacity .circle-9:before {
	animation-delay:-0.4s;
}
.circle-opacity .circle-10 {
	transform:rotate(270deg);
}
.circle-opacity .circle-10:before {
	animation-delay:-0.3s;
}
.circle-opacity .circle-11 {
	transform:rotate(300deg);
}
.circle-opacity .circle-11:before {
	animation-delay:-0.2s;
}
.circle-opacity .circle-12 {
	transform:rotate(330deg);
}
.circle-opacity .circle-12:before {
	animation-delay:-0.1s;
}
@keyframes circle-opacity {
	0% {
	opacity:0;
}
40% {
	opacity:1;
}
80% {
	opacity:0;
}
100% {
	opacity:0;
}
}/*11*/
.folding-cube {
	width:64px;
	height:64px;
	margin:auto;
	transform:rotateZ(45deg);
}
.folding-cube .cube {
	width:50%;
	height:50%;
	float:left;
	position:relative;
}
.folding-cube .cube:before {
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:pink;
	animation:folding-cube 2.4s infinite linear both;
	transform-origin:100% 100%;
}
.folding-cube .cube-2 {
	transform:rotateZ(90deg);
}
.folding-cube .cube-2:before {
	animation-delay:.3s;
}
.folding-cube .cube-3 {
	transform:rotateZ(180deg);
}
.folding-cube .cube-3:before {
	animation-delay:.6s;
}
.folding-cube .cube-4 {
	transform:rotateZ(270deg);
}
.folding-cube .cube-4:before {
	animation-delay:.9s;
}
@keyframes folding-cube {
	0% {
	transform:perspective(140px) rotateX(-180deg);
	opacity:0;
}
10% {
	transform:perspective(140px) rotateX(-180deg);
	opacity:0;
}
25% {
	transform:perspective(140px) rotateX(0deg);
	opacity:1;
}
75% {
	transform:perspective(140px) rotateX(0deg);
	opacity:1;
}
90% {
	transform:perspective(140px) rotateY(180deg);
	opacity:0;
}
100% {
	transform:perspective(140px) rotateY(180deg);
	opacity:0;
}
}