/* Magic called, css preprocessor! */  

html,body{
  min-height: 100%;
  background: #021210;
  color :#FFF;
}

#loader{
  display: block;
  width: 120px;
  height: 75px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 6px lighten(#021210,20%);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0) skew(-30deg);
  overflow: hidden;
  &:after{
    display: block;
    position: absolute;
    content: '';
    width: 15px;
    height: 100%;
    top: -50%;
    left: 50%;
    background: #ffc033;
    animation: rdot 60s linear infinite;
    transform-origin: bottom center;

  }
  #inner{
    display: block;
    position: absolute;
    left: 5px;
    top: 5px;
    box-shadow: 5px;
    right: 5px;
    background: #021210;
    border-radius: 1px;
    height: 65px;
    z-index: 100;
    b{
      display: block;
      position: absolute;
      height: 100%;
      line-height: 62px;
      width: 100%;
      text-align: center;
      font-size: 40px;
      letter-spacing: 10px;
      padding-left: 4px;
      $shadow:'';

      $max: 15;
      $color: #BBB;
      @for $i from 0 through $max{

        @if($i == $max){
          $shadow: $shadow + '#{.25px * $i} #{.25px * $i} 0 #{$color}';
        }@else{
          $shadow: $shadow + '#{.25px * $i} #{.25px * $i} 0 #{$color},';
        }
      }
      text-shadow:#{$shadow};
    }
  }
}

@mixin running-dot-anim(){
  0%,100%{
    transform: translate3d(-50%, 0, 0) rotate(0deg);
  }
  50%{
    transform: translate3d(-50%, 0, 0) rotate(3600deg);
  }
}

@-webkit-keyframes rdot{
  @include running-dot-anim;
}
@-moz-keyframes rdot{
  @include running-dot-anim;
}
@keyframes rdot{
  @include running-dot-anim;
}