/**********************
 *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);
}
}