body {
  background: #333;
}


#react-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
}

#react-inner {
  position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 50%;
    border: 3px solid #61dafb;

    @include transform(rotate(120deg));
}

#react-innerdot {
  position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
/* border: 3px solid #61dafb; */
background: #61dafb;
margin-top: -15px;
margin-left: -15px;
}

#react {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 50px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  animation: spin 10s linear infinite;
  z-index: 11;
  
  &:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 50%;
    border: 3px solid #61dafb;
    @include transform(rotate(-120deg));

  }
  
  &:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 50%;
    border: 3px solid #61dafb;
  }
}

// Bourbon mixins
@include keyframes(spin) {
  0% { 
    @include transform(rotate(0deg));
  }
  100% {
    @include transform(rotate(360deg));
  }
}

@include keyframes(spin-reverse) {
  0% { 
    @include transform(rotate(0deg));
  }
  100% {
    @include transform(rotate(-360deg));
  }
}