.square-8 {
  background-color: #2c3e50;
  .site-loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 50px;
    margin-top: -25px;
    margin-left: -25px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: square-8-loading-center-absolute 1.5s infinite;
    animation: square-8-loading-center-absolute 1.5s infinite;
  }

  .spinner{
    width: 25px;
    height: 25px;
    background-color: #FFF;
    float: left;

  }

  #spinner_one {
    -webkit-animation: square-8-one 1.5s infinite;
    animation: square-8-one 1.5s infinite;
  }
  #spinner_two {
    -webkit-animation: square-8-two 1.5s infinite;
    animation: square-8-two 1.5s infinite;
  }
  #spinner_three {
    -webkit-animation: square-8-three 1.5s infinite;
    animation: square-8-three 1.5s infinite;
  }
  #spinner_four {
    -webkit-animation: square-8-four 1.5s infinite;
    animation: square-8-four 1.5s infinite;
  }


}

@-webkit-keyframes square-8-loading-center-absolute {
  100% { -webkit-transform: rotate(-45deg); }

}

@keyframes square-8-loading-center-absolute {
  100% {
    transform:  rotate(-45deg);
    -webkit-transform:  rotate(-45deg);
  }
}


@-webkit-keyframes square-8-one {
  25% { -webkit-transform: translate(0,-50px) rotate(-180deg); }
  100% { -webkit-transform: translate(0,0) rotate(-180deg); }

}

@keyframes square-8-one {
  25% {
    transform: translate(0,-50px) rotate(-180deg);
    -webkit-transform: translate(0,-50px) rotate(-180deg);
  }
  100% {
    transform: translate(0,0) rotate(-180deg);
    -webkit-transform: translate(0,0) rotate(-180deg);
  }
}


@-webkit-keyframes square-8-two {
  25% { -webkit-transform: translate(50px,0) rotate(-180deg); }
  100% { -webkit-transform: translate(0,0) rotate(-180deg); }
}

@keyframes square-8-two {
  25% {
    transform: translate(50px,0) rotate(-180deg);
    -webkit-transform: translate(50px,0) rotate(-180deg);
  }
  100% {
    transform: translate(0,0) rotate(-180deg);
    -webkit-transform: translate(0,0) rotate(-180deg);
  }
}

@-webkit-keyframes square-8-three {
  25% { -webkit-transform: translate(-50px,0) rotate(-180deg); }
  100% { -webkit-transform: translate(0,0) rotate(-180deg); }
}

@keyframes square-8-three {
  25% {
    transform:  translate(-50px,0) rotate(-180deg);
    -webkit-transform:  translate(-50px,0) rotate(-180deg);
  }
  100% {
    transform: translate(0,0) rotate(-180deg);
    -webkit-transform: rtranslate(0,0) rotate(-180deg);
  }
}


@-webkit-keyframes square-8-four {
  25% { -webkit-transform: translate(0,50px) rotate(-180deg); }
  100% { -webkit-transform: translate(0,0) rotate(-180deg); }
}

@keyframes square-8-four {
  25% {
    transform: translate(0,50px) rotate(-180deg);
    -webkit-transform: translate(0,50px) rotate(-180deg);
  }
  100% {
    transform: translate(0,0) rotate(-180deg);
    -webkit-transform: translate(0,0) rotate(-180deg);
  }
}