.spinner-cube-grid { width: 40px; height: 40px; }

.spinner-cube-grid .sk-cube { width: 33%; height: 33%; background-color: #333; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }

.spinner-cube-grid .sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }

.spinner-cube-grid .sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }

.spinner-cube-grid .sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }

.spinner-cube-grid .sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }

.spinner-cube-grid .sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }

.spinner-cube-grid .sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }

.spinner-cube-grid .sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; }

.spinner-cube-grid .sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }

.spinner-cube-grid .sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1); }
  35% { -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1); } }

@keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1); }
  35% { -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1); } }

.spinner-circle-line { margin: 10px auto 0; width: 70px; text-align: center; }

.spinner-circle-line > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; }

.spinner-circle-line .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }

.spinner-circle-line .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }

@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); }
  40% { -webkit-transform: scale(1); } }

@keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0);
    transform: scale(0); }
  40% { -webkit-transform: scale(1);
    transform: scale(1); } }

.spinner-circles { width: 40px; height: 40px; position: relative; text-align: center; -webkit-animation: sk-rotate 2.0s infinite linear; animation: sk-rotate 2.0s infinite linear; }

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

.dot2 { top: auto; bottom: 0; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg); } }

@keyframes sk-rotate { 100% { transform: rotate(360deg);
    -webkit-transform: rotate(360deg); } }

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

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

/* Cube */
.spinner-cube { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; }

@-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px); }
  50% { -webkit-transform: perspective(120px) rotateY(180deg); }
  100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } }

@keyframes sk-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); } }

.spinner-cubes { width: 40px; height: 40px; position: relative; }

.cube1, .cube2 { background-color: #333; width: 15px; height: 15px; position: absolute; top: 0; left: 0; -webkit-animation: sk-cubemove 1.8s infinite ease-in-out; animation: sk-cubemove 1.8s infinite ease-in-out; }

.cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }

@-webkit-keyframes sk-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 sk-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); } }

.spinner-pump { width: 40px; height: 40px; position: relative; }

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

.double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }

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

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

/* Pulsar */
.spinner-pulsar { width: 40px; height: 40px; background-color: #333; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; }

@-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1);
    opacity: 0; } }

@keyframes sk-scaleout { 0% { -webkit-transform: scale(0);
    transform: scale(0); }
  100% { -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0; } }

/* Accordion */
.spinner-accordion { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; }

.spinner-accordion > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }

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

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

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

.spinner-accordion.rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

@-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); }
  20% { -webkit-transform: scaleY(1); } }

@keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4); }
  20% { transform: scaleY(1);
    -webkit-transform: scaleY(1); } }

.no-scroll { overflow: hidden; }