.l-wrapper strong{
	font-size:24px;
	color:white;
}

.l-wrapper {
  position: fixed;
  width:50%;
  min-width:170px;
  max-width:500px;
  min-height:300px;
  max-height:450px;
  top: 25px;
  right: 0;
  padding-bottom:25px;
  left: 0;
  margin: auto;
  text-align: center;
  border:3px solid white;
  z-index:9999;
  background-color:#006bba;
  border-radius:15px;
  box-shadow:5px 5px 10px gray; 
}

svg {
  height: 120px;
  width: 120px;
  margin: 20px 2em 2em;
  overflow: visible;
 
}

.g--circle {
  transform-origin: 60px 60px;
  fill: white;
  animation: opacity 1.2s linear infinite;
}
.g--circle:nth-child(12n + 1) {
  animation-delay: -0.1s;
  transform: rotate(-30deg) translate(5px, 5px) scale(0.9);
}
.g--circle:nth-child(12n + 2) {
  animation-delay: -0.2s;
  transform: rotate(-60deg) translate(5px, 5px) scale(0.9);
}
.g--circle:nth-child(12n + 3) {
  animation-delay: -0.3s;
  transform: rotate(-90deg) translate(5px, 5px) scale(0.9);
}
.g--circle:nth-child(12n + 4) {
  animation-delay: -0.4s;
  transform: rotate(-120deg) translate(5px, 5px) scale(0.9);
}
.g--circle:nth-child(12n + 5) {
  animation-delay: -0.5s;
  transform: rotate(-150deg) translate(5px, 5px) scale(0.9);
}
.g--circle:nth-child(12n + 6) {
  animation-delay: -0.6s;
  transform: rotate(-180deg) translate(5px, 5px) scale(0.9);
}
.g--circle:nth-child(12n + 7) {
  animation-delay: -0.7s;
  transform: rotate(-210deg) translate(5px, 5px) scale(0.9);
}
.g--circle:nth-child(12n + 8) {
  animation-delay: -0.8s;
  transform: rotate(-240deg) translate(5px, 5px) scale(0.9);
}
.g--circle:nth-child(12n + 9) {
  animation-delay: -0.9s;
  transform: rotate(-270deg) translate(5px, 5px) scale(0.9);
}
.g--circle:nth-child(12n + 10) {
  animation-delay: -1s;
  transform: rotate(-300deg) translate(5px, 5px) scale(0.9);
}
.g--circle:nth-child(12n + 11) {
  animation-delay: -1.1s;
  transform: rotate(-330deg) translate(5px, 5px) scale(0.9);
}
.g--circle:nth-child(12n + 12) {
  animation-delay: -1.2s;
  transform: rotate(-360deg) translate(5px, 5px) scale(0.9);
}

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

.g-circles--v2 .g--circle {
  fill-opacity: 0;
  stroke-opacity: 0;
  stroke-width: 1;
  stroke: yellowgreen;
  animation-name: opacity-stroke, colors, colors-stroke;
}
.g-circles--v2 .g--circle .u--circle {
  animation: transform-2 1.2s linear infinite;
}

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

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

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

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

@keyframes opacity {
  3% {
    fill-opacity: 1;
  }
  75% {
    fill-opacity: 0;
  }
}
@keyframes opacity-stroke {
  10% {
    stroke-opacity: 1;
  }
  85% {
    stroke-opacity: 0;
  }
}
@keyframes colors {
  0% {
    fill: yellowgreen;
  }
  10% {
    fill: gold;
  }
  75% {
    fill: crimson;
  }
}
@keyframes colors-stroke {
  0% {
    stroke: yellowgreen;
  }
  10% {
    stroke: gold;
  }
  75% {
    stroke: crimson;
  }
}
@keyframes colors-2 {
  0% {
    fill: yellow;
  }
  50% {
    fill: red;
  }
  65% {
    fill: orangered;
  }
  95% {
    fill: gold;
  }
}
@keyframes colors-3 {
  0% {
    fill: yellowgreen;
  }
  50% {
    fill: turquoise;
  }
  65% {
    fill: yellow;
  }
  95% {
    fill: orange;
  }
}
@keyframes transform {
  10% {
    transform-origin: 70px 70px;
    transform: scale(0.75);
  }
}
@keyframes transform-2 {
  40% {
    transform: scale(0.85) translate(10px, 10px);
  }
  60% {
    stroke-width: 20;
  }
}