body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #fafafa;
}

.loading.build-logo circle {
  animation: nodes 6s linear infinite;
}

.loading.build-logo .house {
  animation: house 6s ease infinite;
}

.loading.build-logo .circut {
  animation: circut 6s cubic-bezier(.7, .1, .1, .9) infinite;
}

@keyframes house {
  0% { stroke-dashoffset: -50; stroke-dasharray: 50 50; }
  45% { stroke-dashoffset: -100; }
  50% { stroke: #00AB6F; }
  60% { stroke: #ffffff; }
  75% { stroke: #00AB6F; }
  80% { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: -130; stroke-dasharray: 50 50; }
}

@keyframes circut {
  0% { stroke-dasharray: 20 20; stroke-dashoffset: -20; }
  13% { stroke-dashoffset: -20; }
  50% { stroke-dashoffset: -40; stroke: #00AB6F; }
  60% { stroke: #ffffff; }
  70% { stroke: #00AB6F; }
  85% { stroke-dashoffset: -40; }
  100% { stroke-dashoffset: -60; stroke-dasharray: 20 20; }
}

@keyframes nodes {
  0% { stroke-dasharray: 0 4; }
  25% { stroke-dasharray: 0 4; }
  35% { stroke-dasharray: 4 0; stroke: #00AB6F; }
  41% { fill: none; }
  42% { fill: #00AB6F; }
  55% { fill: none; stroke: #00AB6F; }
  65% { fill: #ffffff; stroke: #ffffff; }
  75% { stroke: #00AB6F; fill: none; stroke-dasharray: 4 0; }
  85% { fill: #00AB6F; stroke: #00AB6F; }
  93% { fill: none; stroke-dasharray: 4 0; stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -4; stroke-dasharray: 0 4; }
}

.build-logo circle:nth-child(1n) { animation-delay: calc(1 * -6s * 0.009); }
.build-logo circle:nth-child(2n) { animation-delay: calc(2 * -6s * 0.009); }
.build-logo circle:nth-child(3n) { animation-delay: calc(3 * -6s * 0.009); }
.build-logo circle:nth-child(4n) { animation-delay: calc(4 * -6s * 0.009); }
.build-logo circle:nth-child(5n) { animation-delay: calc(5 * -6s * 0.009); }
.build-logo circle:nth-child(6n) { animation-delay: calc(6 * -6s * 0.009); }
.build-logo circle:nth-child(7n) { animation-delay: calc(7 * -6s * 0.009); }
.build-logo circle:nth-child(8n) { animation-delay: calc(8 * -6s * 0.009); }
.build-logo circle:nth-child(9n) { animation-delay: calc(9 * -6s * 0.009); }
.build-logo circle:nth-child(10n) { animation-delay: calc(10 * -6s * 0.009); }
.build-logo circle:nth-child(11n) { animation-delay: calc(11 * -6s * 0.009); }
.build-logo circle:nth-child(12n) { animation-delay: calc(12 * -6s * 0.009); }
.build-logo circle:nth-child(13n) { animation-delay: calc(13 * -6s * 0.009); }
.build-logo circle:nth-child(14n) { animation-delay: calc(14 * -6s * 0.009); }