#onload-box{
	width: 100%;
	height: 100%;
	display: block;
	background: #f5f5f5;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
}

.demoItem{
	width:calc(33.3% - 10px);
	height:170px;
	margin:5px 0;
	display:flex;
	justify-content:center;
	align-items:center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
}

.demoItem .container{
	width:30px;
	height:30px;
	position:relative
}

.demoItem .container .shape-1{background-color:#1875e5}
.demoItem .container .shape-2{background-color:#c5523f}
.demoItem .container .shape-3{background-color:#499255}
.demoItem .container .shape-4{background-color:#f2b736}

@-webkit-keyframes Animation2Shape1{
	0%{
		-webkit-transform:translate(0,0);
		transform:translate(0,0)
	}
	100%{
		-webkit-transform:translate(20px,20px);
		transform:translate(20px,20px)
	}
}
@keyframes Animation2Shape1{
	0%{
		-webkit-transform:translate(0,0);
		transform:translate(0,0)
	}
	100%{
		-webkit-transform:translate(20px,20px);
		transform:translate(20px,20px)
	}
}
@keyframes Animation2Shape2{
	0%{
		-webkit-transform:translate(0,0);
		transform:translate(0,0)
	}
	100%{
		-webkit-transform:translate(-20px,20px);
		transform:translate(-20px,20px)
	}
	
}
@-webkit-keyframes Animation2Shape2{
	0%{
		-webkit-transform:translate(0,0);
		transform:translate(0,0)
	}
	100%{
		-webkit-transform:translate(-20px,20px);
		transform:translate(-20px,20px)
	}
}
@keyframes Animation2Shape3{
	0%{
		-webkit-transform:translate(0,0);
		transform:translate(0,0)
	}
	100%{
		-webkit-transform:translate(20px,-20px);
		transform:translate(20px,-20px)
	}
}
@-webkit-keyframes Animation2Shape3{
	0%{
		-webkit-transform:translate(0,0);
		transform:translate(0,0)
	}
	100%{
		-webkit-transform:translate(20px,-20px);
		transform:translate(20px,-20px)
	}
}
@keyframes Animation2Shape4{
	0%{
		-webkit-transform:translate(0,0);
		transform:translate(0,0)
	}
	100%{
		-webkit-transform:translate(-20px,-20px);
		transform:translate(-20px,-20px)
	}
}
@-webkit-keyframes Animation2Shape4{
	0%{
		-webkit-transform:translate(0,0);
		transform:translate(0,0)
	}
	100%{
		-webkit-transform:translate(-20px,-20px);
		transform:translate(-20px,-20px)
	}
}
@keyframes Animation2Container{
	0%{
		transform:rotate(0)
	}
	100%{
		transform:rotate(360deg)
	}
}
@-webkit-keyframes Animation2Container{
	0%{
		transform:rotate(0)
	}
	100%{
		transform:rotate(360deg)
	}
}
.google-animation-2{
	-webkit-animation:Animation2Container 1s ease infinite;
	animation:Animation2Container 1s ease infinite
}
.google-animation-2 .shape{
	width:10px;
	height:10px;
	border-radius:50%;
	position:absolute
}
.google-animation-2 .shape-1{
	left:0;
	-webkit-animation:Animation2Shape1 .5s ease infinite alternate;
	animation:Animation2Shape1 .5s ease infinite alternate
}
.google-animation-2 .shape-2{
	right:0;
	-webkit-animation:Animation2Shape2 .5s ease infinite alternate;
	animation:Animation2Shape2 .5s ease infinite alternate
}
.google-animation-2 .shape-3{
	bottom:0;
	-webkit-animation:Animation2Shape3 .5s ease infinite alternate;
	animation:Animation2Shape3 .5s ease infinite alternate
}
.google-animation-2 .shape-4{
	right:0;
	bottom:0;
	-webkit-animation:Animation2Shape4 .5s ease infinite alternate;
	animation:Animation2Shape4 .5s ease infinite alternate
}