.preloader{
  position:fixed;
  z-index:1000;
  top:0;
  left:0;
  background:#fff;
  width:100%;
  height:100%
}

.loaderWrapper{
  position:relative;
  top:50%;
  left:50%;
  width:54px;
  height:54px;
  -webkit-transform:translate(-50%,-50%) rotateZ(45deg);
  -moz-transform:translate(-50%,-50%) rotateZ(45deg);
  -ms-transform:translate(-50%,-50%) rotateZ(45deg);
  -o-transform:translate(-50%,-50%) rotateZ(45deg);
  transform:translate(-50%,-50%) rotateZ(45deg)
}

.loaderWrapper
.cube {
  -webkit-transform:rotateZ(45deg);
  -moz-transform:rotateZ(45deg);
  -ms-transform:rotateZ(45deg);
  transform:rotateZ(45deg);
  position:relative;
  float:left;
  width:50%;
  height:50%;
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  -ms-transform:scale(1.1);
  -o-transform:scale(1.1);
  transform:scale(1.1)
}

.loaderWrapper
.cube:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background-color:#007FFF;-webkit-animation:cubes 2.76s infinite linear both;-moz-animation:cubes 2.76s infinite linear both;-ms-animation:cubes 2.76s infinite linear both;-o-animation:cubes 2.76s infinite linear both;animation:cubes 2.76s infinite linear both;-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-o-transform-origin:100% 100%;transform-origin:100% 100%}
.loaderWrapper
.c2{-webkit-transform:scale(1.1) rotateZ(90deg);
    -moz-transform:scale(1.1) rotateZ(90deg);-ms-transform:scale(1.1) rotateZ(90deg);-o-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotateZ(90deg)}
.loaderWrapper
.c3{-webkit-transform:scale(1.1) rotateZ(180deg);-moz-transform:scale(1.1) rotateZ(180deg);-ms-transform:scale(1.1) rotateZ(180deg);-o-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotateZ(180deg)}
.loaderWrapper
.c4{-webkit-transform:scale(1.1) rotateZ(270deg);-moz-transform:scale(1.1) rotateZ(270deg);-ms-transform:scale(1.1) rotateZ(270deg);-o-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotateZ(270deg)}

.loaderWrapper
.c2:before{-webkit-animation-delay:.35s;-moz-animation-delay:.35s;-ms-animation-delay:.35s;-o-animation-delay:.35s;animation-delay:.35s}

.loaderWrapper
.c3:before {
  -webkit-animation-delay:.69s;
  -moz-animation-delay:.69s;
  -ms-animation-delay:.69s;
  -o-animation-delay:.69s;
  animation-delay:.69s
}

.loaderWrapper
.c4:before {
  -webkit-animation-delay:1.04s;
  -moz-animation-delay:1.04s;
  -ms-animation-delay:1.04s;
  -o-animation-delay:1.04s;
  animation-delay:1.04s
}

.loaded

.loaderWrapper,

.loaded

.preloader {
  visibility:hidden;opacity:0;
  -webkit-transition:ease-out .2s;
  -moz-transition:ease-out .2s;
  -o-transition:ease-out .2s;
  transition:ease-out .2s
}

@keyframes cubes {
  0%,10%{ transform:perspective(101px) rotateX(-180deg); opacity:0}
  25%,75%{transform:perspective(101px) rotateX(0); opacity:1}
  100%,90%{transform:perspective(101px) rotateY(180deg);opacity:0}
}

@-o-keyframes cubes{
  0%,10%{-o-transform:perspective(101px) rotateX(-180deg);opacity:0}
  25%,75%{-o-transform:perspective(101px) rotateX(0);opacity:1}
  100%,90%{-o-transform:perspective(101px) rotateY(180deg);opacity:0}
}

@-ms-keyframes cubes {
  0%,10%{-ms-transform:perspective(101px) rotateX(-180deg);opacity:0}
  25%,75%{-ms-transform:perspective(101px) rotateX(0);opacity:1}
  100%,90%{-ms-transform:perspective(101px) rotateY(180deg);opacity:0}
}

@-webkit-keyframes cubes {
  0%,10%{-webkit-transform:perspective(101px) rotateX(-180deg);opacity:0}
  25%,75%{-webkit-transform:perspective(101px) rotateX(0);opacity:1}
  100%,90%{-webkit-transform:perspective(101px) rotateY(180deg);opacity:0}
}

@-moz-keyframes cubes {
  0%,10%{-moz-transform:perspective(101px) rotateX(-180deg); opacity:0}25%,75%
  {-moz-transform:perspective(101px) rotateX(0);opacity:1}
  100%,90%{-moz-transform:perspective(101px) rotateY(180deg);opacity:0}
}