.triangles
  .tri.invert
  .tri.invert
  .tri
  .tri.invert
  .tri.invert
  .tri
  .tri.invert
  .tri
  .tri.invert

@import "bourbon";

$anim-speed: 750ms;
$tricolor: #215A6D;
$triw: 30px;
$trih: $triw*.9;
$bodycolor: #e4e4e5;

@include keyframes(pulse) {
  0% {
    opacity: 1;
  }
  16.666%{
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

body {
  background: $bodycolor;
}

.triangles {
  @include transform( translate(-50%, -50%) );
  height: $trih * 3;
  width: $triw * 3;
  position: absolute;
  left: 50%;
  top: 50%;
}
.tri {
  position: absolute;
  @include animation(pulse $anim-speed ease-in infinite);
  border: {
    top: $trih solid $tricolor;
    left: $triw/2 solid transparent;
    right: $triw/2 solid transparent;
    bottom: 0px;
  }
  &.invert {
    border: {
      top: 0px;
      bottom: $trih solid $tricolor;
      left: $triw/2 solid transparent;
      right: $triw/2 solid transparent;
    }
  }
  &:nth-child(1) {
    left: $triw;
  }
  &:nth-child(2) {
    left: $triw/2;
    top: $trih;
    @include animation-delay($anim-speed/6*-1);
  }
  &:nth-child(3) {
    left: $triw;
    top: $trih;
  }
  &:nth-child(4) {
    left: $triw*1.5;
    top: $trih;
    @include animation-delay($anim-speed/6*-5);
  }
  &:nth-child(5) {
    top:$trih*2;
    @include animation-delay($anim-speed/6*-2);
  }
  &:nth-child(6) {
    top:$trih*2;
    left: $triw/2;
    @include animation-delay($anim-speed/6*-2);
  }
  &:nth-child(7) {
    top:$trih*2;
    left: $triw;
    @include animation-delay($anim-speed/6*-3);
  }
  &:nth-child(8) {
    top:$trih*2;
    left: $triw*1.5;
    @include animation-delay($anim-speed/6*-4);
  }
  &:nth-child(9) {
    top:$trih*2;
    left: $triw*2;
    @include animation-delay($anim-speed/6*-4);
  }
}