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

  .spinner{
    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0);
    margin-right: auto;
    margin-left: auto;
    border: 4px solid #FFF;
    left: 73px;
    top: 73px;
    position: absolute;
  }

  #first_spinner{
    -webkit-animation: square-3-first-animate 1s infinite ease-in-out;
    animation: square-3-first-animate 1s infinite ease-in-out;
  }

  #second_spinner{
    -webkit-animation: square-3-second 1s forwards, square-3-second-animate 1s infinite ease-in-out;
    animation: square-3-second 1s forwards, square-3-second-animate 1s infinite ease-in-out;
  }

  #third_spinner{
    -webkit-animation: square-3-third 1s forwards, square-3-third-animate 1s infinite ease-in-out;
    animation: square-3-third 1s forwards, square-3-third-animate 1s infinite ease-in-out;
  }



}

@-webkit-keyframes square-3-first-animate {
  0% { -webkit-transform: perspective(100px); }
  50% { -webkit-transform: perspective(100px) rotateY(-180deg); }
  100% { -webkit-transform: perspective(100px) rotateY(-180deg) rotateX(-180deg); }
}

@keyframes square-3-first-animate {
  0% {
    transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg);
  } 50% {
      transform: perspective(100px) rotateX(-180deg) rotateY(0deg);
      -webkit-transform: perspective(100px) rotateX(-180deg) rotateY(0deg) ;
    } 100% {
        transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
        -webkit-transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
      }
}

@-webkit-keyframes square-3-second {
  100% { width: 100px; height:100px; left: 48px; top: 48px; }
}
@keyframes square-3-second {
  100% { width: 100px; height:100px; left: 48px; top: 48px; }
}

@-webkit-keyframes square-3-second-animate {
  0% { -webkit-transform: perspective(200px); }
  50% { -webkit-transform: perspective(200px) rotateY(180deg); }
  100% { -webkit-transform: perspective(200px) rotateY(180deg) rotateX(180deg); }
}


@keyframes square-3-second-animate {
  0% {
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(200px) rotateX(0deg) rotateY(0deg);
  } 50% {
      transform: perspective(200px) rotateX(180deg) rotateY(0deg);
      -webkit-transform: perspective(200px) rotateX(180deg) rotateY(0deg) ;
    } 100% {
        transform: perspective(200px) rotateX(180deg) rotateY(180deg);
        -webkit-transform: perspective(200px) rotateX(180deg) rotateY(180deg);
      }
}


@-webkit-keyframes square-3-third {
  100% { width: 150px; height:150px; left: 23px; top: 23px;}
}
@keyframes square-3-third {
  100% { width: 150px; height:150px; left: 23px; top: 23px;}
}

@-webkit-keyframes square-3-third-animate {
  0% { -webkit-transform: perspective(300px); }
  50% { -webkit-transform: perspective(300px) rotateY(-180deg); }
  100% { -webkit-transform: perspective(300px) rotateY(-180deg) rotateX(-180deg); }
}

@keyframes square-3-third-animate {
  0% {
    transform: perspective(300px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(300px) rotateX(0deg) rotateY(0deg);
  } 50% {
      transform: perspective(300px) rotateX(-180deg) rotateY(0deg);
      -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(0deg) ;
    } 100% {
        transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
        -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
      }
}