.l-wrapper {
   position: absolute;
   width: 100%;
   height: 300px;
   top: 30%;
   /* top: calc(50% + 250px); */
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   text-align: center;
   display: none;
   opacity: .8;
 }

 #mask {
   display: none;
   height: 100%;
   width: 100%;
   position: fixed;
   position: absolute;
   height: 1380px;
   top: 0;
   left: 0;
   opacity: 0.6;
   margin: auto;
   z-index: 10000;
   background-color: #323232;
 }

 .l-wrapper svg {
   height: 60px;
   width: 60px;
   margin: 0 2em 2em;
   overflow: visible;
   /*   border: 1px solid red; */
 }

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

 circle {
   fill: #e32519;
   fill-opacity: 0;
   -webkit-animation: opacity 1.2s linear infinite;
   animation: opacity 1.2s linear infinite;
 }

 circle:nth-child(12n + 1) {
   -webkit-animation-delay: -0.1s;
   animation-delay: -0.1s;
 }

 circle:nth-child(12n + 2) {
   -webkit-animation-delay: -0.2s;
   animation-delay: -0.2s;
 }

 circle:nth-child(12n + 3) {
   -webkit-animation-delay: -0.3s;
   animation-delay: -0.3s;
 }

 circle:nth-child(12n + 4) {
   -webkit-animation-delay: -0.4s;
   animation-delay: -0.4s;
 }

 circle:nth-child(12n + 5) {
   -webkit-animation-delay: -0.5s;
   animation-delay: -0.5s;
 }

 circle:nth-child(12n + 6) {
   -webkit-animation-delay: -0.6s;
   animation-delay: -0.6s;
 }

 circle:nth-child(12n + 7) {
   -webkit-animation-delay: -0.7s;
   animation-delay: -0.7s;
 }

 circle:nth-child(12n + 8) {
   -webkit-animation-delay: -0.8s;
   animation-delay: -0.8s;
 }

 circle:nth-child(12n + 9) {
   -webkit-animation-delay: -0.9s;
   animation-delay: -0.9s;
 }

 circle:nth-child(12n + 10) {
   -webkit-animation-delay: -1s;
   animation-delay: -1s;
 }

 circle:nth-child(12n + 11) {
   -webkit-animation-delay: -1.1s;
   animation-delay: -1.1s;
 }

 circle:nth-child(12n + 12) {
   -webkit-animation-delay: -1.2s;
   animation-delay: -1.2s;
 }

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

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

 .g-circles--v4 circle {
   fill-opacity: 1;
   fill: orange;
   -webkit-transform-origin: 60px 60px;
   -ms-transform-origin: 60px 60px;
   transform-origin: 60px 60px;
   -webkit-animation-name: opacity, colors-3, transform;
   animation-name: opacity, colors-3, transform;
 }

 @-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: scale(0.75);
     transform: scale(0.75);
   }
 }

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

 @-webkit-keyframes transform-2 {
   40% {
     -webkit-transform: scale(0.85);
     transform: scale(0.85);
   }

   60% {
     stroke-width: 20;
   }
 }

 @keyframes transform-2 {
   40% {
     -webkit-transform: scale(0.85);
     transform: scale(0.85);
   }

   60% {
     stroke-width: 20;
   }
 }