.l-wrapper {
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999999;
}

.l-wrapper-inner {
    width: 100%;
    top: 40%;
    position: fixed;
    padding: 0 100px;
    text-align: center;
}

.l-wrapper-inner svg {
    height: 120px;
    width: 120px;
    margin: 0 2em 2em;
    overflow: visible;
}

.g--circle {
    -webkit-transform-origin: 60px 60px;
    transform-origin: 60px 60px;
    fill: #ffffff;
    -webkit-animation: opacity 1.2s linear infinite;
    animation: opacity 1.2s linear infinite;
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}
.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);
}

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

.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;
}
.g-circles--v2 .g--circle .u--circle {
    -webkit-animation: transform-2 1.2s linear infinite;
    animation: transform-2 1.2s linear infinite;
}

.g-circles--v2 .g--circle:nth-child(12n + 1) .u--circle {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}
.g-circles--v2 .g--circle:nth-child(12n + 2) .u--circle {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}
.g-circles--v2 .g--circle:nth-child(12n + 3) .u--circle {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}
.g-circles--v2 .g--circle:nth-child(12n + 4) .u--circle {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}
.g-circles--v2 .g--circle:nth-child(12n + 5) .u--circle {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.g-circles--v2 .g--circle:nth-child(12n + 6) .u--circle {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}
.g-circles--v2 .g--circle:nth-child(12n + 7) .u--circle {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}
.g-circles--v2 .g--circle:nth-child(12n + 8) .u--circle {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.g-circles--v2 .g--circle:nth-child(12n + 9) .u--circle {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.g-circles--v2 .g--circle:nth-child(12n + 10) .u--circle {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
.g-circles--v2 .g--circle:nth-child(12n + 11) .u--circle {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.g-circles--v2 .g--circle:nth-child(12n + 12) .u--circle {
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
}

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

.g-circles--v4 .g--circle {
    fill-opacity: 1;
    fill: orange;
    -webkit-animation-name: opacity, colors-3;
    animation-name: opacity, colors-3;
}
.g-circles--v4 .u--circle {
    -webkit-animation: transform 1.2s linear infinite;
    animation: transform 1.2s linear infinite;
}

.g-circles--v4 .g--circle:nth-child(12n + 1) .u--circle {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}
.g-circles--v4 .g--circle:nth-child(12n + 2) .u--circle {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}
.g-circles--v4 .g--circle:nth-child(12n + 3) .u--circle {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}
.g-circles--v4 .g--circle:nth-child(12n + 4) .u--circle {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}
.g-circles--v4 .g--circle:nth-child(12n + 5) .u--circle {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
.g-circles--v4 .g--circle:nth-child(12n + 6) .u--circle {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}
.g-circles--v4 .g--circle:nth-child(12n + 7) .u--circle {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}
.g-circles--v4 .g--circle:nth-child(12n + 8) .u--circle {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.g-circles--v4 .g--circle:nth-child(12n + 9) .u--circle {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.g-circles--v4 .g--circle:nth-child(12n + 10) .u--circle {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
.g-circles--v4 .g--circle:nth-child(12n + 11) .u--circle {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.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);
    }
}
@-webkit-keyframes transform-2 {
    40% {
        -webkit-transform: scale(0.85) translate(10px, 10px);
        transform: scale(0.85) translate(10px, 10px);
    }
    60% {
        stroke-width: 20;
    }
}
@keyframes transform-2 {
    40% {
        -webkit-transform: scale(0.85) translate(10px, 10px);
        transform: scale(0.85) translate(10px, 10px);
    }
    60% {
        stroke-width: 20;
    }
}
