@charset "UTF-8";
.spinner1 {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -20px;
	margin-top: -20px;
	width: 40px;
	height: 40px
}
.double-bounce1, .double-bounce2 {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #fff;
	opacity: .6;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-animation: 2s ease-in-out infinite bounce;
	animation: 2s ease-in-out infinite bounce
}
.double-bounce2 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s
}
.spinner2 {
	position: fixed!important;
	top: 50%!important;
	left: 50%!important;
	margin-left: -20px;
	margin-top: -20px;
	width: 40px;
	height: 40px
}
.container1>div, .container2>div, .container3>div {
	width: 6px;
	height: 6px;
	background-color: #fff;
	border-radius: 100%;
	position: absolute;
	-webkit-animation: 1.2s ease-in-out infinite both bouncedelay;
	animation: 1.2s ease-in-out infinite both bouncedelay
}
.spinner2 .spinner-container {
	position: absolute;
	width: 100%;
	height: 100%
}
.container2 {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg)
}
.container3 {
	-webkit-transform: rotateZ(90deg);
	transform: rotateZ(90deg)
}
.circle1 {
	top: 0;
	left: 0
}
.circle2 {
	top: 0;
	right: 0
}
.circle3 {
	right: 0;
	bottom: 0
}
.circle4 {
	left: 0;
	bottom: 0
}
.container2 .circle1 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s
}
.container3 .circle1 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s
}
.container1 .circle2 {
	-webkit-animation-delay: -.9s;
	animation-delay: -.9s
}
.container2 .circle2 {
	-webkit-animation-delay: -.8s;
	animation-delay: -.8s
}
.container3 .circle2 {
	-webkit-animation-delay: -.7s;
	animation-delay: -.7s
}
.container1 .circle3 {
	-webkit-animation-delay: -.6s;
	animation-delay: -.6s
}
.container2 .circle3 {
	-webkit-animation-delay: -.5s;
	animation-delay: -.5s
}
.container3 .circle3 {
	-webkit-animation-delay: -.4s;
	animation-delay: -.4s
}
.container1 .circle4 {
	-webkit-animation-delay: -.3s;
	animation-delay: -.3s
}
.container2 .circle4 {
	-webkit-animation-delay: -.2s;
	animation-delay: -.2s
}
.container3 .circle4 {
	-webkit-animation-delay: -.1s;
	animation-delay: -.1s
}
@-webkit-keyframes bouncedelay {
0%, 100%, 80% {
-webkit-transform:scale(0)
}
40% {
-webkit-transform:scale(1)
}
}
@keyframes bouncedelay {
0%, 100%, 80% {
transform:scale(0);
-webkit-transform:scale(0)
}
40% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
.spinner3 {
	width: 40px;
	height: 40px;
	position: relative;
	-webkit-animation: 2s linear infinite rotate;
	animation: 2s linear infinite rotate
}
.dot1, .dot2 {
	width: 60%;
	height: 60%;
	display: inline-block;
	position: absolute;
	top: 0;
	background-color: #fff;
	border-radius: 100%;
	-webkit-animation: 2s ease-in-out infinite bounce;
	animation: 2s ease-in-out infinite bounce
}
.dot2 {
	top: auto;
	bottom: 0;
	-webkit-animation-delay: -1s;
	animation-delay: -1s
}
@-webkit-keyframes rotate {
100% {
-webkit-transform:rotate(360deg)
}
}
@keyframes rotate {
100% {
transform:rotate(360deg);
-webkit-transform:rotate(360deg)
}
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform:scale(0)
}
50% {
-webkit-transform:scale(1)
}
}
@keyframes bounce {
0%, 100% {
transform:scale(0);
-webkit-transform:scale(0)
}
50% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
.spinner4 {
	width: 30px;
	height: 30px;
	background-color: #fff;
	-webkit-animation: 1.2s ease-in-out infinite rotateplane;
	animation: 1.2s ease-in-out infinite rotateplane
}
@-webkit-keyframes rotateplane {
0% {
-webkit-transform:perspective(120px)
}
50% {
-webkit-transform:perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
@keyframes rotateplane {
0% {
transform:perspective(120px) rotateX(0) rotateY(0);
-webkit-transform:perspective(120px) rotateX(0) rotateY(0)
}
50% {
transform:perspective(120px) rotateX(-180.1deg) rotateY(0);
-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0)
}
100% {
transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
}
}
.spinner5 {
	width: 32px;
	height: 32px;
	position: relative
}
.cube1, .cube2 {
	background-color: #fff;
	width: 10px;
	height: 10px;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-animation: 1.8s ease-in-out infinite cubemove;
	animation: 1.8s ease-in-out infinite cubemove
}
.cube2 {
	-webkit-animation-delay: -.9s;
	animation-delay: -.9s
}
@-webkit-keyframes cubemove {
25% {
-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)
}
50% {
-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)
}
75% {
-webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)
}
100% {
-webkit-transform:rotate(-360deg)
}
}
@keyframes cubemove {
25% {
transform:translateX(42px) rotate(-90deg) scale(.5);
-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)
}
50% {
transform:translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)
}
50.1% {
transform:translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)
}
75% {
transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5);
-webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)
}
100% {
transform:rotate(-360deg);
-webkit-transform:rotate(-360deg)
}
}
.spinner6 {
	width: 50px;
	height: 30px;
	text-align: center
}
.spinner6>div {
	background-color: #fff;
	height: 100%;
	width: 6px;
	margin-left: 2px;
	display: inline-block;
	-webkit-animation: 1.2s ease-in-out infinite stretchdelay;
	animation: 1.2s ease-in-out infinite stretchdelay
}
.spinner6 .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s
}
.spinner6 .rect3 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s
}
.spinner6 .rect4 {
	-webkit-animation-delay: -.9s;
	animation-delay: -.9s
}
.spinner6 .rect5 {
	-webkit-animation-delay: -.8s;
	animation-delay: -.8s
}
@-webkit-keyframes stretchdelay {
0%, 100%, 40% {
-webkit-transform:scaleY(.4)
}
20% {
-webkit-transform:scaleY(1)
}
}
@keyframes stretchdelay {
0%, 100%, 40% {
transform:scaleY(.4);
-webkit-transform:scaleY(.4)
}
20% {
transform:scaleY(1);
-webkit-transform:scaleY(1)
}
}
.spinner7 {
	width: 90px;
	height: 30px;
	text-align: center
}
.spinner7>div {
	background-color: #fff;
	height: 15px;
	width: 15px;
	margin-left: 3px;
	border-radius: 50%;
	display: inline-block;
	-webkit-animation: .7s ease-in-out infinite stretchdelay;
	animation: .7s ease-in-out infinite stretchdelay
}
.spinner7 .circ2 {
	-webkit-animation-delay: -.6s;
	animation-delay: -.6s
}
.spinner7 .circ3 {
	-webkit-animation-delay: -.5s;
	animation-delay: -.5s
}
.spinner7 .circ4 {
	-webkit-animation-delay: -.4s;
	animation-delay: -.4s
}
.spinner7 .circ5 {
	-webkit-animation-delay: -.3s;
	animation-delay: -.3s
}
@-webkit-keyframes stretchdelay {
0%, 100%, 40% {
-webkit-transform:translateY(-10px)
}
20% {
-webkit-transform:translateY(-20px)
}
}
@keyframes stretchdelay {
0%, 100%, 40% {
transform:translateY(-10px);
-webkit-transform:translateY(-10px)
}
20% {
transform:translateY(-20px);
-webkit-transform:translateY(-20px)
}
}