body{
    height: 100%;
    margin:0;
    padding:0;
  }
  #loading-wrap{
    background:rgba(0,0,0,0.03);
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
  }
  .loading{
    position: fixed;
    left:50%;
    margin-left:-70px;
    top:40%;
  }
  .loading h2{
    text-align:center;
  }
  .loading span {
    display: inline-block;
    vertical-align: middle;
    width: .6em;
    height: .6em;
    margin: .19em;
    background: #C5362F;
    border-radius: .6em;
    -webkit-animation: loading 1s infinite alternate;
            animation: loading 1s infinite alternate;
  }

  /*
  * Dots Colors
  * Smarter targeting vs nth-of-type?
  */
  .loading span:nth-of-type(2) {
    background: #c5362fe3;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
  .loading span:nth-of-type(3) {
    background: #c5362fb5;
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }
  .loading span:nth-of-type(4) {
    background: #c5362f8a;
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
  }
  .loading span:nth-of-type(5) {
    background: #c5362f59;
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
  }
  .loading span:nth-of-type(6) {
    background: #c5362f33;
    -webkit-animation-delay: 1.0s;
            animation-delay: 1.0s;
  }
  .loading span:nth-of-type(7) {
    background: #c5362f14;
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
  }

  /*
  * Animation keyframes
  * Use transition opacity instead of keyframes?
  */
  @-webkit-keyframes loading {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes loading {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }