@-moz-keyframes gauge-loader {
  0% {
    -moz-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  10% {
    -moz-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  20% {
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  24% {
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  40% {
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  54% {
    -moz-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  56% {
    -moz-transform: rotate(78deg);
    transform: rotate(78deg);
  }
  58% {
    -moz-transform: rotate(73deg);
    transform: rotate(73deg);
  }
  60% {
    -moz-transform: rotate(75deg);
    transform: rotate(75deg);
  }
  62% {
    -moz-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  70% {
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  80% {
    -moz-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  83% {
    -moz-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  86% {
    -moz-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  89% {
    -moz-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  100% {
    -moz-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}
@-webkit-keyframes gauge-loader {
  0% {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  10% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  20% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  24% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  40% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  54% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  56% {
    -webkit-transform: rotate(78deg);
    transform: rotate(78deg);
  }
  58% {
    -webkit-transform: rotate(73deg);
    transform: rotate(73deg);
  }
  60% {
    -webkit-transform: rotate(75deg);
    transform: rotate(75deg);
  }
  62% {
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  70% {
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  80% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  83% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  86% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  89% {
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  100% {
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}
@keyframes gauge-loader {
  0% {
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
  10% {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  20% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  24% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  40% {
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  54% {
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  56% {
    -moz-transform: rotate(78deg);
    -ms-transform: rotate(78deg);
    -webkit-transform: rotate(78deg);
    transform: rotate(78deg);
  }
  58% {
    -moz-transform: rotate(73deg);
    -ms-transform: rotate(73deg);
    -webkit-transform: rotate(73deg);
    transform: rotate(73deg);
  }
  60% {
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -webkit-transform: rotate(75deg);
    transform: rotate(75deg);
  }
  62% {
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  70% {
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
  80% {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  83% {
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  86% {
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  89% {
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
  }
  100% {
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}
/* :not(:required) hides this rule from IE9 and below */
.gauge-loader:not(:required) {
  background: dodgerblue;
  -moz-border-radius-topleft: 32px;
  -webkit-border-top-left-radius: 32px;
  border-top-left-radius: 32px;
  -moz-border-radius-topright: 32px;
  -webkit-border-top-right-radius: 32px;
  border-top-right-radius: 32px;
  display: inline-block;
  width: 64px;
  height: 32px;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
}
.gauge-loader:not(:required)::before {
  -moz-animation: gauge-loader 3000ms infinite ease;
  -webkit-animation: gauge-loader 3000ms infinite ease;
  animation: gauge-loader 3000ms infinite ease;
  background: white;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  content: '';
  position: absolute;
  left: 30px;
  top: 5.33333px;
  width: 4px;
  height: 26.66667px;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.gauge-loader:not(:required)::after {
  content: '';
  background: white;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  position: absolute;
  left: 25.6px;
  top: 25.6px;
  width: 12.8px;
  height: 12.8px;
}

/*==================================
             Form Loading
==================================*/
.loading-back
{
  margin: 0;
  padding: 0;
  inset: 0;
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #f4f5f7;
  z-index: 9;
}

.loading
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}

.loading > div
{
  margin: 20px 50px;
}
.bars
{
  position: relative;
  height: 100px;
  width: 170px;
}
.bars__bar
{
  position: absolute;
  top: 40%;
  bottom: 40%;
  width: 7%;
  background-color: #1976d2;
  animation: bars 1.5s infinite ease-out;
}
.bars__bar--alt
{
  background-color: rgba(254, 254, 254, 0.4);
}
.bars__bar--0
{
  left: 0%;
  animation-delay: 0s;
}
.bars__bar--0--alt
{
  left: 0%;
  animation-delay: 0.5s;
}
.bars__bar--1
{
  left: 18.6%;
  animation-delay: 0.1s;
}
.bars__bar--1--alt
{
  left: 18.6%;
  animation-delay: 0.6s;
}
.bars__bar--2
{
  left: 37.2%;
  animation-delay: 0.2s;
}
.bars__bar--2--alt
{
  left: 37.2%;
  animation-delay: 0.7s;
}
.bars__bar--3
{
  left: 55.8%;
  animation-delay: 0.3s;
}
.bars__bar--3--alt
{
  left: 55.8%;
  animation-delay: 0.8s;
}
.bars__bar--4
{
  left: 74.4%;
  animation-delay: 0.4s;
}
.bars__bar--4--alt
{
  left: 74.4%;
  animation-delay: 0.9s;
}
.bars__bar--5
{
  left: 93%;
  animation-delay: 0.5s;
}
.bars__bar--5--alt
{
  left: 93%;
  animation-delay: 1s;
}

@keyframes bars
{
  0%, 60%
  {
    top: 40px;
    bottom: 40px;
  }
  20%
  {
    top: 0;
    bottom: 40px;
  }
  40%
  {
    top: 40px;
    bottom: 0;
  }
}

@media screen and (mix-width: 480px)
{
  .loading
  {
    display: none;
  }  
}

/*==================================
             Top Page Loading
==================================*/
.circle *
{
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-image: url(https://hack.lenotta.com/wp-content/uploads/2014/07/outerRing.svg);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  margin: auto;
}
.circle .inner
{
  background-size: 80px 80px;
  border-radius: 50%;
  background-image: url(https://hack.lenotta.com/wp-content/uploads/2014/07/circleFull.svg);
  -webkit-animation: cw 1.5s infinite;
  animation: cw 1.5s infinite;
}
.circle .middle
{
  background-size: 144px 144px;
  background-image: url(https://hack.lenotta.com/wp-content/uploads/2014/07/ring.svg);
  -webkit-animation: ccw 3s linear infinite;
  animation: cw 3s linear infinite;
}
.circle .outer
{
  -webkit-animation: cw 6s linear infinite;
  animation: cw 6s linear infinite;
}

@-webkit-keyframes cw
{
  0%
  {
    -webkit-transform: rotate(0deg);
  }
  100%
  {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes cw
{
  0%
  {
    transform: rotate(0deg);
  }
  100%
  {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes ccw
{
  0%
  {
    -webkit-transform: rotate(0deg);
  }
  100%
  {
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes ccw
{
  0%
  {
    transform: rotate(0deg);
  }
  100%
  {
    transform: rotate(-360deg);
  }
}
