/**********************
 *CSS Animations by:
 *http://codepen.io/vivinantony
***********************/

.spinner1 {
width: 40px;
height: 40px;
position: relative;
}

.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
 @-webkit-keyframes 
bounce {
 0%, 100% {
-webkit-transform: scale(0.0)
}
 50% {
-webkit-transform: scale(1.0)
}
}

@keyframes 
bounce {
 0%, 100% {
 transform: scale(0.0);
 -webkit-transform: scale(0.0);
}
50% {
 transform: scale(1.0);
 -webkit-transform: scale(1.0);
}
}

.spinner2 {
width: 40px;
height: 40px;
position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.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: -1.0s;
animation-delay: -1.0s;
}

.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}

.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}

.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}

.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}

.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}

.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}

.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}

.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
 @-webkit-keyframes 
bouncedelay {
 0%, 80%, 100% {
-webkit-transform: scale(0.0)
}
 40% {
-webkit-transform: scale(1.0)
}
}
 @keyframes 
bouncedelay {
 0%, 80%, 100% {
 transform: scale(0.0);
 -webkit-transform: scale(0.0);
}
40% {
 transform: scale(1.0);
 -webkit-transform: scale(1.0);
}
}

.spinner3 {
width: 40px;
height: 40px;
position: relative;
-webkit-animation: rotate 2.0s infinite linear;
animation: rotate 2.0s infinite linear;
}

.dot1, .dot2 {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #fff;
border-radius: 100%;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}

.dot2 {
top: auto;
bottom: 0px;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
 @-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.0)
}
 50% {
-webkit-transform: scale(1.0)
}
}
 @keyframes 
bounce {
 0%, 100% {
 transform: scale(0.0);
 -webkit-transform: scale(0.0);
}
50% {
 transform: scale(1.0);
 -webkit-transform: scale(1.0);
}
}

.spinner4 {
width: 30px;
height: 30px;
background-color: #fff;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
 @-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(0deg) rotateY(0deg);
 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
 transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
 -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
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: cubemove 1.8s infinite ease-in-out;
animation: cubemove 1.8s infinite ease-in-out;
}

.cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
 @-webkit-keyframes 
cubemove {
 25% {
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
}
 50% {
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
}
 75% {
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
}
 100% {
-webkit-transform: rotate(-360deg)
}
}
 @keyframes 
cubemove {
 25% {
 transform: translateX(42px) rotate(-90deg) scale(0.5);
 -webkit-transform: translateX(42px) rotate(-90deg) scale(0.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(0px) translateY(42px) rotate(-270deg) scale(0.5);
 -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.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: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner6 .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.spinner6 .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.spinner6 .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.spinner6 .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
 @-webkit-keyframes 
stretchdelay {
 0%, 40%, 100% {
-webkit-transform: scaleY(0.4)
}
 20% {
-webkit-transform: scaleY(1.0)
}
}
 @keyframes 
stretchdelay {
 0%, 40%, 100% {
 transform: scaleY(0.4);
 -webkit-transform: scaleY(0.4);
}
20% {
 transform: scaleY(1.0);
 -webkit-transform: scaleY(1.0);
}
}

.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: stretchdelay 0.7s infinite ease-in-out;
animation: stretchdelay 0.7s infinite ease-in-out;
}

.spinner7 .circ2 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}

.spinner7 .circ3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}

.spinner7 .circ4 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}

.spinner7 .circ5 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
 @-webkit-keyframes 
stretchdelay {
 0%, 40%, 100% {
-webkit-transform: translateY(-10px)
}
 20% {
-webkit-transform: translateY(-20px)
}
}
 @keyframes 
stretchdelay {
 0%, 40%, 100% {
 transform: translateY(-10px);
 -webkit-transform: translateY(-10px);
}
20% {
 transform: translateY(-20px);
 -webkit-transform: translateY(-20px);
}
}