.square-4 {
  background-color: rgba(255,255,255,1);
  .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: rgba(255,255,255,0);
    margin-right: auto;
    margin-left: auto;
    border: 4px solid rgba(239,74,74,1);
    left: 37px;
    top: 37px;
    position: absolute;
  }

  #first_spinner{
    .animation(square-4-first 1s infinite);
    .animation-delay(0.5s);
  }
  #second_spinner{
    .animation(square-4-second 1s infinite);
  }
  #third_spinner{
    .animation(square-4-third 1s infinite);
    .animation-delay(0.5s);
  }
  #forth_spinner{
    .animation(square-4-forth 1s infinite);
  }
}

@-webkit-keyframes square-4-first {
  0% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
  50% {
    -ms-transform: translate(150%,150%) scale(2,2);
    -webkit-transform: translate(150%,150%) scale(2,2);
    transform: translate(150%,150%) scale(2,2);
  }

  100% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
}

@keyframes square-4-first {
  0% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
  50% {
    -ms-transform: translate(150%,150%) scale(2,2);
    -webkit-transform: translate(150%,150%) scale(2,2);
    transform: translate(150%,150%) scale(2,2);
  }

  100% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
}

@-webkit-keyframes square-4-second {
  0% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
  50% {
    -ms-transform: translate(-150%,150%) scale(2,2);
    -webkit-transform: translate(-150%,150%) scale(2,2);
    transform: translate(-150%,150%) scale(2,2);
  }
  100% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
}
@keyframes square-4-second {
  0% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
  50% {
    -ms-transform: translate(-150%,150%) scale(2,2);
    -webkit-transform: translate(-150%,150%) scale(2,2);
    transform: translate(-150%,150%) scale(2,2);
  }
  100% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
}

@-webkit-keyframes square-4-third {
  0% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
  50% {
    -ms-transform: translate(-150%,-150%) scale(2,2);
    -webkit-transform: translate(-150%,-150%) scale(2,2);
    transform: translate(-150%,-150%) scale(2,2);
  }
  100% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
}
@keyframes square-4-third {
  0% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
  50% {
    -ms-transform: translate(-150%,-150%) scale(2,2);
    -webkit-transform: translate(-150%,-150%) scale(2,2);
    transform: translate(-150%,-150%) scale(2,2);
  }
  100% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
}

@-webkit-keyframes square-4-forth {
  0% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
  50% {
    -ms-transform: translate(150%,-150%) scale(2,2);
    -webkit-transform: translate(150%,-150%) scale(2,2);
    transform: translate(150%,-150%) scale(2,2);
  }
  100% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
}
@keyframes square-4-forth {
  0% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
  50% {
    -ms-transform: translate(150%,-150%) scale(2,2);
    -webkit-transform: translate(150%,-150%) scale(2,2);
    transform: translate(150%,-150%) scale(2,2);
  }
  100% {
    -ms-transform: translate(1,1) scale(1,1);
    -webkit-transform: translate(1,1) scale(1,1);
    transform: translate(1,1) scale(1,1);
  }
}