article.l-wrapper {
  display: none;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
}

article.l-wrapper.on {
  display: block;
}

article.l-wrapper svg {
  height: 120px;
  width: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: visible;
  /*   border: 1px solid red; */
}

article.l-wrapper .g-circles {
  -webkit-transform: scale(0.9) translate(7px, 7px);
          transform: scale(0.9) translate(7px, 7px);
}

article.l-wrapper .g--circle {
  -webkit-transform-origin: 60px 60px;
          transform-origin: 60px 60px;
  fill: dodgerblue;
  -webkit-animation: opacity 1.2s linear infinite;
          animation: opacity 1.2s linear infinite;
}

article.l-wrapper .g--circle:nth-child(12n + 1) {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
  -webkit-transform: rotate(-30deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-30deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g--circle:nth-child(12n + 2) {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
  -webkit-transform: rotate(-60deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-60deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g--circle:nth-child(12n + 3) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
  -webkit-transform: rotate(-90deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-90deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g--circle:nth-child(12n + 4) {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
  -webkit-transform: rotate(-120deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-120deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g--circle:nth-child(12n + 5) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
  -webkit-transform: rotate(-150deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-150deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g--circle:nth-child(12n + 6) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
  -webkit-transform: rotate(-180deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-180deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g--circle:nth-child(12n + 7) {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
  -webkit-transform: rotate(-210deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-210deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g--circle:nth-child(12n + 8) {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
  -webkit-transform: rotate(-240deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-240deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g--circle:nth-child(12n + 9) {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
  -webkit-transform: rotate(-270deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-270deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g--circle:nth-child(12n + 10) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  -webkit-transform: rotate(-300deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-300deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g--circle:nth-child(12n + 11) {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
  -webkit-transform: rotate(-330deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-330deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g--circle:nth-child(12n + 12) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
  -webkit-transform: rotate(-360deg) translate(5px, 5px) scale(0.9);
          transform: rotate(-360deg) translate(5px, 5px) scale(0.9);
}

article.l-wrapper .g-circles--v1 .g--circle {
  fill-opacity: 0;
  -webkit-animation-name: opacity;
          animation-name: opacity;
}

article.l-wrapper .g-circles--v2 .g--circle {
  fill-opacity: 0;
  stroke-opacity: 0;
  stroke-width: 1;
  stroke: yellowgreen;
  -webkit-animation-name: opacity-stroke, colors, colors-stroke;
          animation-name: opacity-stroke, colors, colors-stroke;
}

article.l-wrapper .g-circles--v2 .g--circle .u--circle {
  -webkit-animation: transform-2 1.2s linear infinite;
          animation: transform-2 1.2s linear infinite;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 1) .u--circle {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 2) .u--circle {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 3) .u--circle {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 4) .u--circle {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 5) .u--circle {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 6) .u--circle {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 7) .u--circle {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 8) .u--circle {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 9) .u--circle {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 10) .u--circle {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 11) .u--circle {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}

article.l-wrapper .g-circles--v2 .g--circle:nth-child(12n + 12) .u--circle {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}

article.l-wrapper .g-circles--v3 .g--circle {
  fill-opacity: 1;
  -webkit-animation-name: opacity, colors;
          animation-name: opacity, colors;
}

article.l-wrapper .g-circles--v4 .g--circle {
  fill-opacity: 1;
  fill: orange;
  -webkit-animation-name: opacity, colors-3;
          animation-name: opacity, colors-3;
}

article.l-wrapper .g-circles--v4 .u--circle {
  -webkit-animation: transform 1.2s linear infinite;
          animation: transform 1.2s linear infinite;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 1) .u--circle {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 2) .u--circle {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 3) .u--circle {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 4) .u--circle {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 5) .u--circle {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 6) .u--circle {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 7) .u--circle {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 8) .u--circle {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 9) .u--circle {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 10) .u--circle {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 11) .u--circle {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}

article.l-wrapper .g-circles--v4 .g--circle:nth-child(12n + 12) .u--circle {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}

@-webkit-keyframes opacity {
  3% {
    fill-opacity: 1;
  }
  75% {
    fill-opacity: 0;
  }
}

@keyframes opacity {
  3% {
    fill-opacity: 1;
  }
  75% {
    fill-opacity: 0;
  }
}

@-webkit-keyframes opacity-stroke {
  10% {
    stroke-opacity: 1;
  }
  85% {
    stroke-opacity: 0;
  }
}

@keyframes opacity-stroke {
  10% {
    stroke-opacity: 1;
  }
  85% {
    stroke-opacity: 0;
  }
}

@-webkit-keyframes colors {
  0% {
    fill: yellowgreen;
  }
  10% {
    fill: gold;
  }
  75% {
    fill: crimson;
  }
}

@keyframes colors {
  0% {
    fill: yellowgreen;
  }
  10% {
    fill: gold;
  }
  75% {
    fill: crimson;
  }
}

@-webkit-keyframes colors-stroke {
  0% {
    stroke: yellowgreen;
  }
  10% {
    stroke: gold;
  }
  75% {
    stroke: crimson;
  }
}

@keyframes colors-stroke {
  0% {
    stroke: yellowgreen;
  }
  10% {
    stroke: gold;
  }
  75% {
    stroke: crimson;
  }
}

@-webkit-keyframes colors-2 {
  0% {
    fill: yellow;
  }
  50% {
    fill: red;
  }
  65% {
    fill: orangered;
  }
  95% {
    fill: gold;
  }
}

@keyframes colors-2 {
  0% {
    fill: yellow;
  }
  50% {
    fill: red;
  }
  65% {
    fill: orangered;
  }
  95% {
    fill: gold;
  }
}

@-webkit-keyframes colors-3 {
  0% {
    fill: yellowgreen;
  }
  50% {
    fill: turquoise;
  }
  65% {
    fill: yellow;
  }
  95% {
    fill: orange;
  }
}

@keyframes colors-3 {
  0% {
    fill: yellowgreen;
  }
  50% {
    fill: turquoise;
  }
  65% {
    fill: yellow;
  }
  95% {
    fill: orange;
  }
}

@-webkit-keyframes transform {
  10% {
    -webkit-transform-origin: 70px 70px;
            transform-origin: 70px 70px;
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}

@keyframes transform {
  10% {
    -webkit-transform-origin: 70px 70px;
            transform-origin: 70px 70px;
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}
/*# sourceMappingURL=loading.css.map */