


@td_loader_size: 19px;
@td_loader_gutter:1px;

.td-lb-box {
  position: absolute;
  width: @td_loader_size;
  height: @td_loader_size;





}

.td-lb-box-1 {
  top: 0;
  left: 0;

}

.td-lb-box-2 {
  top: 0;
  left: @td_loader_size + @td_loader_gutter;
  /*background-color: #0011C3;*/
}

.td-lb-box-3 {
  top: 0;
  left: (@td_loader_size + @td_loader_gutter ) * 2;
  /*background-color: #0022C3;*/
}

.td-lb-box-4 {
  top: @td_loader_size + @td_loader_gutter;
  right: 0px;
  /*background-color: #0033C3;*/
}

.td-lb-box-5 {
  bottom: 0;
  right: 0;
  /*background-color: #0044C3;*/
}

.td-lb-box-6 {
  bottom: 0;
  left: @td_loader_size + @td_loader_gutter;
  /*background-color: #0055C3;*/
}

.td-lb-box-7 {
  bottom: 0;
  left: 0;
  /*background-color: #0066C3;*/
}

.td-lb-box-8 {
  top: @td_loader_size + @td_loader_gutter;
  left: 0;
  /*background-color: #0099C3;*/
}





/*  ----------------------------------------------------------------------------
    loader
*/

@td_gif_size: @td_loader_size * 3 + @td_loader_gutter * 2;

.td-loader-gif {

  position: absolute;
  top: 50%;
  left: 50%;
  width: @td_gif_size;
  height: @td_gif_size;
  margin-top: -@td_gif_size / 2; /* Half the height */
  margin-left: -@td_gif_size / 2; /* Half the width */

  /* responsive phone */
  @media (max-width: @responsive_p_phone_max) {
    top: 200px;
  }



  //margin: 0 auto;
  //-webkit-animation: rotateplane 2s infinite ease-in-out;
  //animation: rotateplane 2s infinite ease-in-out;



  -webkit-transition: all 400ms cubic-bezier(.55,0,.1,1);
  -moz-transition: all 400ms cubic-bezier(.55,0,.1,1);
  -o-transition: all 400ms cubic-bezier(.55,0,.1,1);
  transition: all 400ms cubic-bezier(.55,0,.1,1); /* custom */


}


// overwrites the default loader, for load more
.td-loader-gif-bottom {
  top:auto;
  bottom: 120px;

}



.td-loader-animation-start {
  opacity: 0;

  .transform (~"perspective( 600px ) scale(0.4)");
}

.td-loader-animation-mid {
  opacity: 1;
  .transform (~"perspective( 600px ) scale(1)");
}

.td-loader-animation-end {
  //.transform (~"perspective( 600px ) scale(0.4)");
  opacity: 0;
}


@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg) }
  50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) }
  100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg) }
}



