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