@charset "utf-8";
body{
  background:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%), -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%);
  background:linear-gradient(45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%), linear-gradient(-45deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 52%);
  -webkit-background-size:1em 1em;
  background-size:1em 1em;
  background-color:#000;
}

.l-wrapper{
  position:absolute;
  width:480px;
  height:300px;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  text-align:center;
}

svg{
  height:120px;
  width:120px;
  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:#239aa4;
  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;
  }
}