/* Copyright 2017 Idrees Dargahwala
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License. You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and limitations under the License. */

.mloader {
  width: 45px;
  height: 45px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; }

/* Bouncy Balls */
.bouncy {
  width: 45px;
  height: 45px;
  background: transparent;
  border-radius: 50%;
  display: inline-block; }
  .bouncy:after, .bouncy:before {
    content: "";
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 50%; }

.bouncy-balls {
  height: 0px;
  width: 0px; }
  .bouncy-balls span {
    display: block;
    height: 20px;
    width: 20px;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    top: 0px; }
    .bouncy-balls span:nth-child(1) {
      left: -40px;
      -webkit-animation: bounce 1s ease-in-out infinite;
      animation: bounce 1s ease-in-out infinite;
      background: #f44336; }
    .bouncy-balls span:nth-child(2) {
      -webkit-animation: bounce 1s ease-in-out 0.33s infinite;
      animation: bounce 1s ease-in-out 0.33s infinite;
      background: #2196f3; }
    .bouncy-balls span:nth-child(3) {
      left: 40px;
      -webkit-animation: bounce 1s ease-in-out 0.66s infinite;
      animation: bounce 1s ease-in-out 0.66s infinite;
      background: #4caf50; }

@-webkit-keyframes bounce {
  0%, 75%, 100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); }
  25% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); } }

/* Circle */
.circle {
  border-radius: 50%;
  -webkit-animation: circle-shape 800ms ease-in-out infinite;
  animation: circle-shape 800ms ease-in-out infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate; }

.c-red-500 {
  background: #f44336; }

.c-pink-500 {
  background: #e91e63; }

.c-purple-500 {
  background: #9c27b0; }

.c-deep-purple-500 {
  background: #673ab7; }

.c-indigo-500 {
  background: #3f51b5; }

.c-blue-500 {
  background: #2196f3; }

.c-light-blue-500 {
  background: #03a9f4; }

.c-cyan-500 {
  background: #00bcd4; }

.c-teal-500 {
  background: #009688; }

.c-green-500 {
  background: #4caf50; }

.c-light-green-500 {
  background: #8bc34a; }

.c-lime-500 {
  background: #cddc39; }

.c-yellow-500 {
  background: #ffeb3b; }

.c-amber-500 {
  background: #ffc107; }

.c-orange-500 {
  background: #ff9800; }

.c-deep-orange-500 {
  background: #ff5722; }

.c-brown-500 {
  background: #795548; }

.c-blue-grey-500 {
  background: #607d8b; }

.c-black {
  background: #000000; }

@-webkit-keyframes circle-shape {
  0% {
    left: 0px;
    right: 0px;
    -webkit-transform: translate(0);
    transform: translate(0); }
  50% {
    left: 0px;
    right: 10px;
    -webkit-transform: translate(30px);
    transform: translate(30px); }
  100% {
    right: 10px;
    left: 0px;
    -webkit-transform: translate(0);
    transform: translate(0); } }

@keyframes circle-shape {
  0% {
    left: 0px;
    right: 0px;
    -webkit-transform: translate(0);
    transform: translate(0); }
  50% {
    left: 0px;
    right: 10px;
    -webkit-transform: translate(30px);
    transform: translate(30px); }
  100% {
    right: 10px;
    left: 0px;
    -webkit-transform: translate(0);
    transform: translate(0); } }

/* Colorful Square */
.s-colorful {
  -webkit-animation: squarecolorful 1.6s linear infinite;
  animation: squarecolorful 1.6s linear infinite; }

@-webkit-keyframes squarecolorful {
  0% {
    background: #81d4fa;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  25% {
    background: #80cbc4;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }
  50% {
    background: #ef9a9a;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  75% {
    background: #fbc02d;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg); }
  100% {
    background: #81d4fa;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes squarecolorful {
  0% {
    background: #81d4fa;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  25% {
    background: #80cbc4;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }
  50% {
    background: #ef9a9a;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  75% {
    background: #fbc02d;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg); }
  100% {
    background: #81d4fa;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

/* Fancy Circle */
.spin-circle {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; }
  .spin-circle span {
    height: 48px;
    width: 48px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
    border: 4px solid transparent;
    opacity: 0.5;
    box-sizing: border-box; }
    .spin-circle span:nth-child(1) {
      border-top-color: #f44336;
      -webkit-animation: rotation 1s ease-in-out infinite;
      animation: rotation 1s ease-in-out infinite; }
    .spin-circle span:nth-child(2) {
      border-bottom-color: #000000;
      -webkit-animation: rotation 1s ease-in-out infinite;
      animation: rotation 1s ease-in-out infinite; }

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

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

.circle-dot {
  background: #000000;
  -webkit-animation: c-dotted 1s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
  animation: c-dotted 1s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
  border: 4px solid #ffffff;
  border-style: dotted;
  border-radius: 50%; }

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

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

.e-ring {
  width: 45px;
  height: 45px;
  border: 4px solid #0052ec;
  border-radius: 50%;
  position: relative;
  -webkit-animation: e-ring-scale 1s ease-out infinite;
  animation: e-ring-scale 1s ease-out infinite;
  margin: auto;
  position: relative; }

@-webkit-keyframes e-ring-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
    border-color: #ffeb3b; } }

@keyframes e-ring-scale {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
    border-color: #ffeb3b; } }

/* Fill Circle */
.fill-circle {
  border-radius: 50%;
  border: 12px solid #000000;
  z-index: 1;
  position: absolute;
  background: transparent;
  -webkit-animation: fill-circle 4s cubic-bezier(1, 0, 0, 1) infinite;
  animation: fill-circle 4s cubic-bezier(1, 0, 0, 1) infinite; }
  .fill-circle span {
    position: absolute;
    border: 5px solid #000000;
    background: #000000;
    border-right: transparent;
    border-left: transparent;
    border-bottom: transparent;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0%;
    -webkit-animation: inner-circle-fill 4s cubic-bezier(1, 0, 0, 1) infinite;
    animation: inner-circle-fill 4s cubic-bezier(1, 0, 0, 1) infinite;
    z-index: -99999;
    -webkit-animation-delay: 1ms;
    animation-delay: 1ms; }

@-webkit-keyframes fill-circle {
  0%, 100% {
    border-color: #ff9800; }
  50% {
    border-color: #4caf50; } }

@keyframes fill-circle {
  0%, 100% {
    border-color: #ff9800; }
  50% {
    border-color: #4caf50; } }

@-webkit-keyframes inner-circle-fill {
  0%, 100% {
    height: 0%;
    background: #ff9800;
    border-color: #ff9800; }
  50% {
    height: 100%;
    background: #4caf50;
    border-color: #4caf50; } }

@keyframes inner-circle-fill {
  0%, 100% {
    height: 0%;
    background: #ff9800;
    border-color: #ff9800; }
  50% {
    height: 100%;
    background: #4caf50;
    border-color: #4caf50; } }

/* Flip Board*/
.flip-board {
  background: #FF5722;
  -webkit-animation: flip-board 1.2s infinite ease-in-out;
  animation: flip-board 1.2s infinite ease-in-out; }

@-webkit-keyframes flip-board {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    background: #FF5722; }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    background: #FF9800; }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    background: #FF5722; } }

@keyframes flip-board {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    background: #FF5722; }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    background: #FF9800; }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    background: #FF5722; } }

/* Google Loader */
.google div {
  height: 15px;
  width: 15px;
  position: absolute;
  border-radius: 50%;
  background: #000000;
  display: inline-block;
  left: -10px;
  top: 15px; }
  .google div:first-child {
    -webkit-animation: move 1s ease-in-out infinite alternate;
    animation: move 1s ease-in-out infinite alternate;
    background: #42A5F5;
    margin-left: 0; }
  .google div:nth-child(2) {
    -webkit-animation: move 1s ease-in-out -0.25s infinite alternate;
    animation: move 1s ease-in-out -0.25s infinite alternate;
    margin-left: 17px;
    background: #D32F2F; }
  .google div:nth-child(3) {
    -webkit-animation: move 1s ease-in-out -0.5s infinite alternate;
    animation: move 1s ease-in-out -0.5s infinite alternate;
    margin-left: 35px;
    background: #fbc02d; }
  .google div:nth-child(4) {
    -webkit-animation: move 1s ease-in-out -0.75s infinite alternate;
    animation: move 1s ease-in-out -0.75s infinite alternate;
    margin-left: 54px;
    background: #009688; }

@-webkit-keyframes move {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px); } }

@keyframes move {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px); } }

.ring {
  border: 8px solid #f3f3f3;
  /* Light grey */
  border-radius: 50%;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  border-width: 8px;
  border-style: solid;
  border-top-width: 8px;
  border-top-style: solid; }

.r-red-500 {
  border-top-color: #f44336; }

.r-pink-500 {
  border-top-color: #e91e63; }

.r-purple-500 {
  border-top-color: #9c27b0; }

.r-deep-purple-500 {
  border-top-color: #673ab7; }

.r-indigo-500 {
  border-top-color: #3f51b5; }

.r-blue-500 {
  border-top-color: #2196f3; }

.r-light-blue-500 {
  border-top-color: #03a9f4; }

.r-cyan-500 {
  border-top-color: #00bcd4; }

.r-teal-500 {
  border-top-color: #009688; }

.r-green-500 {
  border-top-color: #4caf50; }

.r-light-green-500 {
  border-top-color: #8bc34a; }

.r-lime-500 {
  border-top-color: #cddc39; }

.r-yellow-500 {
  border-top-color: #ffeb3b; }

.r-amber-500 {
  border-top-color: #ffc107; }

.r-orange-500 {
  border-top-color: #ff9800; }

.r-deep-orange-500 {
  border-top-color: #ff5722; }

.r-brown-500 {
  border-top-color: #795548; }

.r-blue-grey-500 {
  border-top-color: #607d8b; }

.r-black-500 {
  border-top-color: #000000; }

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

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

.square {
  -webkit-animation: square-anim 3s ease-in-out infinite;
  animation: square-anim 3s ease-in-out infinite;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

.s-red-500 {
  background: #f44336; }

.s-pink-500 {
  background: #e91e63; }

.s-purple-500 {
  background: #9c27b0; }

.s-deep-purple-500 {
  background: #673ab7; }

.s-indigo-500 {
  background: #3f51b5; }

.s-blue-500 {
  background: #2196f3; }

.s-light-blue-500 {
  background: #03a9f4; }

.s-cyan-500 {
  background: #00bcd4; }

.s-teal-500 {
  background: #009688; }

.s-green-500 {
  background: #4caf50; }

.s-light-green-500 {
  background: #8bc34a; }

.s-lime-500 {
  background: #cddc39; }

.s-yellow-500 {
  background: #ffeb3b; }

.s-orange-500 {
  background: #ff9800; }

.s-deep-orange-500 {
  background: #ff5722; }

.s-brown-500 {
  background: #795548; }

.s-blue-grey-500 {
  background: #607d8b; }

.s-black-500 {
  background: #000000; }

.square-inside {
  width: 15px;
  height: 15px;
  margin: 0 auto;
  background: #fff;
  -webkit-animation: square-anim 3s ease-in-out infinite;
  animation: square-anim 3s ease-in-out infinite; }

@-webkit-keyframes square-anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  25% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  75% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes square-anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  25% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg); }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  75% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.sticks {
  width: 10px;
  height: 45px;
  background: #009688;
  position: absolute;
  -webkit-animation: sticks-anim 1s ease-in-out infinite;
  animation: sticks-anim 1s ease-in-out infinite;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  top: 50%;
  margin: auto;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; }
  .sticks:after, .sticks:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 45px;
    background: #009688;
    -webkit-animation: sticks-anim 1s ease-in-out infinite;
    animation: sticks-anim 1s ease-in-out infinite; }
  .sticks:before {
    right: 18px;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
  .sticks:after {
    left: 18px;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s; }

@-webkit-keyframes sticks-anim {
  0%, 100% {
    box-shadow: 0 0 0 #009688, 0 0 0 #009688; }
  50% {
    box-shadow: 0 -8px 0 #009688, 0 8px 0 #009688; } }

@keyframes sticks-anim {
  0%, 100% {
    box-shadow: 0 0 0 #009688, 0 0 0 #009688; }
  50% {
    box-shadow: 0 -8px 0 #009688, 0 8px 0 #009688; } }

/* Timer */
.timer {
  border-radius: 50%;
  border-top: solid 6px #03a9f4;
  border-bottom: solid 6px #03a9f4;
  border-left: solid 6px #03a9f4;
  border-right: solid 6px #03a9f4;
  display: inline-block;
  box-sizing: border-box;
  -webkit-animation: timer 1.5s linear infinite;
  animation: timer 1.5s linear infinite; }
  .timer:before {
    border-radius: 3px;
    content: " ";
    width: 6px;
    height: 12px;
    display: inline-block;
    box-sizing: border-box;
    background-color: #42A5F5;
    position: absolute;
    top: 5px;
    left: 16px;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation: timer-before 1s ease infinite;
    animation: timer-before 1s ease infinite; }

@-webkit-keyframes timer {
  0%, 100% {
    border-top: solid 6px #03a9f4;
    border-bottom: solid 6px #03a9f4;
    border-left: solid 6px #03a9f4;
    border-right: solid 6px #03a9f4; }
  25% {
    border-top: solid 6px #8bc34a;
    border-bottom: solid 6px #8bc34a;
    border-left: solid 6px #8bc34a;
    border-right: solid 6px #8bc34a; }
  50% {
    border-top: solid 6px #ffeb3b;
    border-bottom: solid 6px #ffeb3b;
    border-left: solid 6px #ffeb3b;
    border-right: solid 6px #ffeb3b; }
  75% {
    border-top: solid 6px #f44336;
    border-bottom: solid 6px #f44336;
    border-left: solid 6px #f44336;
    border-right: solid 6px #f44336; } }

@keyframes timer {
  0%, 100% {
    border-top: solid 6px #03a9f4;
    border-bottom: solid 6px #03a9f4;
    border-left: solid 6px #03a9f4;
    border-right: solid 6px #03a9f4; }
  25% {
    border-top: solid 6px #8bc34a;
    border-bottom: solid 6px #8bc34a;
    border-left: solid 6px #8bc34a;
    border-right: solid 6px #8bc34a; }
  50% {
    border-top: solid 6px #ffeb3b;
    border-bottom: solid 6px #ffeb3b;
    border-left: solid 6px #ffeb3b;
    border-right: solid 6px #ffeb3b; }
  75% {
    border-top: solid 6px #f44336;
    border-bottom: solid 6px #f44336;
    border-left: solid 6px #f44336;
    border-right: solid 6px #f44336; } }

@-webkit-keyframes timer-before {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  100% {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg); } }

@keyframes timer-before {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  100% {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg); } }

.double-circle {
  border-radius: 50%;
  border: 0.25rem solid #eee;
  border-top-color: #2196f3;
  -webkit-animation: spin-circle 1s infinite linear;
  animation: spin-circle 1s infinite linear;
  border-style: double;
  border-width: .5rem; }

@-webkit-keyframes spin-circle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border-top-color: #2196f3; }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-top-color: #f44336; }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-top-color: #2196f3; } }

@keyframes spin-circle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border-top-color: #2196f3; }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border-top-color: #f44336; }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border-top-color: #2196f3; } }

.bar {
  height: 4px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: #eee;
  border-radius: 20px; }

.bar:before {
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #2196f3;
  border-radius: 20px;
  -webkit-animation: bar 2s linear infinite;
  animation: bar 2s linear infinite; }

@-webkit-keyframes bar {
  0% {
    left: -200px;
    width: 30%;
    background-color: #2196f3; }
  50% {
    width: 30%;
    background-color: #f44336; }
  70% {
    width: 70%;
    background-color: #009688; }
  80% {
    left: 50%;
    background-color: #ffc107; }
  95% {
    left: 120%;
    background-color: #ff9800; }
  100% {
    left: 100%;
    background-color: #2196f3; } }

@keyframes bar {
  0% {
    left: -200px;
    width: 30%;
    background-color: #2196f3; }
  50% {
    width: 30%;
    background-color: #f44336; }
  70% {
    width: 70%;
    background-color: #009688; }
  80% {
    left: 50%;
    background-color: #ffc107; }
  95% {
    left: 120%;
    background-color: #ff9800; }
  100% {
    left: 100%;
    background-color: #2196f3; } }

.four-color:before, .four-color:after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border-style: solid;
  border-top-color: #2196f3;
  border-right-color: #f44336;
  border-bottom-color: #4caf50;
  border-left-color: #ffc107;
  content: '';
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: spin 1.5s  infinite ease-in-out;
  animation: spin 1.5s  infinite ease-in-out; }

.four-color:before {
  border-width: 2vh; }

.four-color:after {
  width: 6vh;
  height: 6vh;
  border-width: 0.4vh;
  -webkit-animation-direction: alternate-reverse;
  animation-direction: alternate-reverse; }

@keyframes spin {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
    transform: translate(-50%, -50%) rotate(0); }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg); } }

.line {
  position: absolute;
  top: 50%;
  margin-left: 10px;
  width: 60px;
  height: 4px;
  background: #f44336;
  -webkit-animation: spin 1.5s infinite ease;
  animation: spin 1.5s infinite ease;
  border-radius: 20px; }
  .line:nth-of-type(2) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
    background: #2196f3; }
  .line:nth-of-type(3) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    background: #4caf50; }
  .line:nth-of-type(4) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    background: #ffeb3b; }

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

.flying-dots span {
  display: inline-block;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  background-color: #673ab7;
  margin: 35px 5px;
  opacity: 0; }
  .flying-dots span:nth-child(1) {
    -webkit-animation: opacitychange 1s ease-in-out infinite;
    animation: opacitychange 1s ease-in-out infinite;
    background-color: #ff5722; }
  .flying-dots span:nth-child(2) {
    -webkit-animation: opacitychange 1s ease-in-out 0.33s infinite;
    animation: opacitychange 1s ease-in-out 0.33s infinite;
    background-color: #ffc107; }
  .flying-dots span:nth-child(3) {
    -webkit-animation: opacitychange 1s ease-in-out 0.66s infinite;
    animation: opacitychange 1s ease-in-out 0.66s infinite;
    background-color: #2196f3; }

@-webkit-keyframes opacitychange {
  0%, 100% {
    opacity: 0; }
  60% {
    opacity: 1; } }

@keyframes opacitychange {
  0%, 100% {
    opacity: 0; }
  60% {
    opacity: 1; } }

.oscillate {
  position: absolute;
  box-sizing: border-box;
  top: 50;
  margin-top: -10px;
  border-radius: 16px;
  width: 80px;
  height: 20px;
  padding: 4px;
  background: #eee; }
  .oscillate:before {
    content: '';
    position: absolute;
    border-radius: 16px;
    width: 20px;
    height: 12px;
    left: 0;
    background: #000000;
    -webkit-animation: oscillate 1s infinite linear;
    animation: oscillate 1s infinite linear; }

@-webkit-keyframes oscillate {
  50% {
    left: 56px;
    background: #000000; } }

@keyframes oscillate {
  50% {
    left: 56px;
    background: #000000; } }

.moving-square:before, .moving-square:after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: calc(50% - 10px);
  background-color: #2196f3;
  -webkit-animation: squaremove 1s ease-in-out infinite;
  animation: squaremove 1s ease-in-out infinite; }

.moving-square:after {
  bottom: 0;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s; }

@-webkit-keyframes squaremove {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0);
    background-color: #2196f3; }
  25% {
    -webkit-transform: translate(40px, 40px) rotate(45deg);
    transform: translate(40px, 40px) rotate(45deg);
    background-color: #4caf50; }
  50% {
    -webkit-transform: translate(0px, 80px) rotate(0deg);
    transform: translate(0px, 80px) rotate(0deg);
    background-color: #ffc107; }
  75% {
    -webkit-transform: translate(-40px, 40px) rotate(45deg);
    transform: translate(-40px, 40px) rotate(45deg);
    background-color: #f44336; } }

@keyframes squaremove {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0);
    transform: translate(0, 0) rotate(0);
    background-color: #2196f3; }
  25% {
    -webkit-transform: translate(40px, 40px) rotate(45deg);
    transform: translate(40px, 40px) rotate(45deg);
    background-color: #4caf50; }
  50% {
    -webkit-transform: translate(0px, 80px) rotate(0deg);
    transform: translate(0px, 80px) rotate(0deg);
    background-color: #ffc107; }
  75% {
    -webkit-transform: translate(-40px, 40px) rotate(45deg);
    transform: translate(-40px, 40px) rotate(45deg);
    background-color: #f44336; } }

/*# sourceMappingURL=mloaders.css.map */