.square-7 {
  background-color: #e74c3c;
  .site-loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100px;
    width: 100px;
    margin-top: -50px;
    margin-left: -50px;
  }

  .spinner{
    width: 25px;
    height: 25px;
    background-color: #FFF;
    margin-right: 50px;
    float: left;
    margin-bottom: 50px;
  }
  .spinner:nth-child(2n+0) {
    margin-right: 0;
  }
  #spinner_one {
    .animation(square-7-one 2s infinite);
  }
  #spinner_two {
    .animation(square-7-two 2s infinite);
  }
  #spinner_three {
    .animation(square-7-three 2s infinite);
  }
  #spinner_four {
    .animation(square-7-four 2s infinite);
  }

}

@-webkit-keyframes square-7-one {
  25% { -webkit-transform: translate(75px,0) rotate(-90deg) scale(0.5); }
  50% { -webkit-transform: translate(75px,75px) rotate(-180deg); }
  75% { -webkit-transform:  translate(0,75px) rotate(-270deg) scale(0.5); }
  100% { -webkit-transform: rotate(-360deg); }
}

@keyframes square-7-one {
  25% {
    transform: translate(75px,0) rotate(-90deg) scale(0.5);
    -webkit-transform: translate(75px,0) rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translate(75px,75px) rotate(-180deg);
    -webkit-transform: translate(75px,75px) rotate(-180deg);
  }
  75% {
    transform: translate(0,75px) rotate(-270deg) scale(0.5);
    -webkit-transform: translate(0,75px) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}


@-webkit-keyframes square-7-two {
  25% { -webkit-transform: translate(0,75px) rotate(-90deg) scale(0.5); }
  50% { -webkit-transform: translate(-75px,75px) rotate(-180deg); }
  75% { -webkit-transform:  translate(-75px,0) rotate(-270deg) scale(0.5); }
  100% { -webkit-transform: rotate(-360deg); }
}

@keyframes square-7-two {
  25% {
    transform: translate(0,75px) rotate(-90deg) scale(0.5);
    -webkit-transform: translate(0,75px) rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translate(-75px,75px) rotate(-180deg);
    -webkit-transform: translate(-75px,75px) rotate(-180deg);
  }
  75% {
    transform: translate(-75px,0) rotate(-270deg) scale(0.5);
    -webkit-transform: translate(-75px,0) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

@-webkit-keyframes square-7-three {
  25% { -webkit-transform: translate(0,-75px)  rotate(-90deg) scale(0.5); }
  50% { -webkit-transform: translate(75px,-75px) rotate(-180deg); }
  75% { -webkit-transform:  translate(75px,0) rotate(-270deg) scale(0.5); }
  100% { -webkit-transform: rotate(-360deg); }
}

@keyframes square-7-three {
  25% {
    transform: translate(0,-75px)  rotate(-90deg) scale(0.5);
    -webkit-transform: translate(0,-75px)  rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translate(75px,-75px) rotate(-180deg);
    -webkit-transform: translate(75px,-75px) rotate(-180deg);
  }
  75% {
    transform:  translate(75px,0) rotate(-270deg) scale(0.5);
    -webkit-transform: translate(75px,0) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}


@-webkit-keyframes square-7-four {
  25% { -webkit-transform: translate(-75px,0)  rotate(-90deg) scale(0.5); }
  50% { -webkit-transform: translate(-75px,-75px) rotate(-180deg); }
  75% { -webkit-transform:  translate(0,-75px) rotate(-270deg) scale(0.5); }
  100% { -webkit-transform: rotate(-360deg); }
}

@keyframes square-7-four {
  25% {
    transform: translate(-75px,0)  rotate(-90deg) scale(0.5);
    -webkit-transform: translate(-75px,0)  rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translate(-75px,-75px) rotate(-180deg);
    -webkit-transform: translate(-75px,-75px) rotate(-180deg);
  }
  75% {
    transform: translate(0,-75px) rotate(-270deg) scale(0.5);
    -webkit-transform: translate(0,-75px) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}