#triangles {
  position: absolute;
  height: 40%;
  width: 40%;
  top: 50%;
  left: 51%;
}

section {
  height: $section-size;
  width: $section-size;
  font-size: 400px;
}

#triangles div {
  position: absolute;
  width: 1em;
  height: 1em;
  animation-duration: 2.25s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  top: 0;
  left: 0;
  font-size: calc( 1em - 8px );
  animation-name: move2;
  animation-delay: -1s;
}

#triangles svg {
  position: absolute;
  width: 1em;
  height: 1em;
  animation-duration: 2.25s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  top: -62%;
  left: -50%;
  fill: white;
  transform: translateY(50%);
  animation-name: move;
  -webkit-filter: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.5));
}

polygon {
  filter: drop-shadow(2px 1px 2px rgba(0, 0, 0, 0.5));
}

.t1 > svg {
  animation-delay: -0.05s;
  fill: darkred !important;
}

.t2 > svg {
  animation-delay: -0.1s;
}

.t3 > svg {
  animation-delay: -0.15s;
}

.t4 > svg {
  animation-delay: -0.2s;
}

.t5 > svg {
  animation-delay: -0.25s;
  fill: darkred !important;
}

.t6 > svg {
  animation-delay: -0.3s;
  fill: darkred !important;
}

.t7 > svg {
  animation-delay: -0.35s;
  fill: darkred !important;
}

.t8 > svg {
  animation-delay: -0.4s;
}

.t9 > svg {
  animation-delay: -0.45s;
}

.t10 > svg {
  animation-delay: -0.5s;
}

.t11 > svg {
  animation-delay: -0.55s;
  fill: darkred !important;
}

.t12 > svg {
  animation-delay: -0.6s;
  fill: darkred !important;
}

.t13 > svg {
  animation-delay: -0.65s;
  fill: darkred !important;
}

.t14 > svg {
  animation-delay: -0.7s;
}

.t15 > svg {
  animation-delay: -0.75s;
}

.t16 > svg {
  animation-delay: -0.8s;
}

.t17 > svg {
  animation-delay: -0.85s;
  fill: darkred !important;
}

.t18 > svg {
  animation-delay: -0.9s;
  fill: darkred !important;
}

.t19 > svg {
  animation-delay: -0.95s;
  fill: darkred !important;
}

.t20 > svg {
  animation-delay: -1s;
}

.t21 > svg {
  animation-delay: -1.05s;
}

.t22 > svg {
  animation-delay: -1.1s;
}

.t23 > svg {
  animation-delay: -1.15s;
  fill: darkred !important;
}

.t24 > svg {
  animation-delay: -1.2s;
  fill: darkred !important;
}

.t25 > svg {
  animation-delay: -1.25s;
  fill: darkred !important;
}

.t26 > svg {
  animation-delay: -1.3s;
}

.t27 > svg {
  animation-delay: -1.35s;
}

.t28 > svg {
  animation-delay: -1.4s;
}

.t29 > svg {
  animation-delay: -1.45s;
  fill: darkred !important;
}

.t30 > svg {
  animation-delay: -1.5s;
  fill: darkred !important;
}

.t31 > svg {
  animation-delay: -1.55s;
  fill: darkred !important;
}

.t32 > svg {
  animation-delay: -1.6s;
}

.t33 > svg {
  animation-delay: -1.65s;
}

.t34 > svg {
  animation-delay: -1.7s;
}

.t35 > svg {
  animation-delay: -1.75s;
  fill: darkred !important;
}

.t36 > svg {
  animation-delay: -1.8s;
  fill: darkred !important;
}

.t37 > svg {
  animation-delay: -1.85s;
  fill: darkred !important;
}

.t38 > svg {
  animation-delay: -1.9s;
}

.t39 > svg {
  animation-delay: -1.95s;
}

.t40 > svg {
  animation-delay: -2s;
}

.t41 > svg {
  animation-delay: -2.05s;
  fill: darkred !important;
}

.t42 > svg {
  animation-delay: -2.1s;
  fill: darkred !important;
}

.t43 > svg {
  animation-delay: -2.15s;
  fill: darkred !important;
}

.t44 > svg {
  animation-delay: -2.2s;
}

.t45 > svg {
  animation-delay: -2.25s;
}

.t46 > svg {
  animation-delay: -2.3s;
}

.t47 > svg {
  animation-delay: -2.35s;
  fill: darkred !important;
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(65deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes move2 {
  0% {
    transform: translateX(calc( -.75% + 2px ));
  }
  50% {
    transform: translateX(calc( .5% - 2px ));
  }
  100% {
    transform: translateX(calc( -.75% + 2px ));
  }
}