/* Absolute Center CSS Spinner */
.loading > div{
    position: fixed;
    z-index: 9999;
    height: 29px;
    width: 75px;
    overflow: show;
    margin: auto;
    top: 20%;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 10px;
}

/* Transparent Overlay */
.loading {
  z-index: 999999999;
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,1);
  -webkit-transition: all .5s ease;
}

.LoadingHide{ 
   height:0px;
   top:-175px; 
}

.LoadingTop{
  height:5px;
  background-color: rgba(255,255,255,0);
}

#spinningSquaresG{
position:relative;
width:75px;
height:75px}

.spinningSquaresG{
position:absolute;
top:0;
background-color:#000000;
width:29px;
height:29px;
-webkit-animation-name:bounce_spinningSquaresG;
-webkit-animation-duration:0.7s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
}

#spinningSquaresG_1{
left:0;
-moz-animation-delay:0.28s;
-webkit-animation-delay:0.28s;
-ms-animation-delay:0.28s;
-o-animation-delay:0.28s;
animation-delay:0.28s;
}

#spinningSquaresG_2{
left:30px;
-moz-animation-delay:0.35s;
-webkit-animation-delay:0.35s;
-ms-animation-delay:0.35s;
-o-animation-delay:0.35s;
animation-delay:0.35s;
}

#spinningSquaresG_3{
left:60px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}

#spinningSquaresG_4{
left:90px;
-moz-animation-delay:0.49s;
-webkit-animation-delay:0.49s;
-ms-animation-delay:0.49s;
-o-animation-delay:0.49s;
animation-delay:0.49s;
}

#spinningSquaresG_5{
left:120px;
-moz-animation-delay:0.56s;
-webkit-animation-delay:0.56s;
-ms-animation-delay:0.56s;
-o-animation-delay:0.56s;
animation-delay:0.56s;
}

#spinningSquaresG_6{
left:150px;
-moz-animation-delay:0.63s;
-webkit-animation-delay:0.63s;
-ms-animation-delay:0.63s;
-o-animation-delay:0.63s;
animation-delay:0.63s;
}

#spinningSquaresG_7{
left:180px;
-moz-animation-delay:0.7s;
-webkit-animation-delay:0.7s;
-ms-animation-delay:0.7s;
-o-animation-delay:0.7s;
animation-delay:0.7s;
}

#spinningSquaresG_8{
left:210px;
-moz-animation-delay:0.77s;
-webkit-animation-delay:0.77s;
-ms-animation-delay:0.77s;
-o-animation-delay:0.77s;
animation-delay:0.77s;
}

@-moz-keyframes bounce_spinningSquaresG{
0%{
-moz-transform:scale(1);
background-color:#000000;
}

100%{
-moz-transform:scale(.3) rotate(90deg);
background-color:#FFFFFF;
}

}

@-webkit-keyframes bounce_spinningSquaresG{
0%{
-webkit-transform:scale(1);
background-color:#000000;
}

100%{
-webkit-transform:scale(.3) rotate(90deg);
background-color:#FFFFFF;
}

}

@-ms-keyframes bounce_spinningSquaresG{
0%{
-ms-transform:scale(1);
background-color:#000000;
}

100%{
-ms-transform:scale(.3) rotate(90deg);
background-color:#FFFFFF;
}

}

@-o-keyframes bounce_spinningSquaresG{
0%{
-o-transform:scale(1);
background-color:#000000;
}

100%{
-o-transform:scale(.3) rotate(90deg);
background-color:#FFFFFF;
}

}

@keyframes bounce_spinningSquaresG{
0%{
transform:scale(1);
background-color:#000000;
}

100%{
transform:scale(.3) rotate(90deg);
background-color:#FFFFFF;
}

}