.preloader-fountain{
  position:absolute;
  width:70px;
  height:14px;
  margin:auto;

  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

.fountainG{
  display: inline-block;
  position: static;

  background-color:rgb(0,0,0);
  width:14px;
  height:14px;
  animation-name:bounce_fountainG;
  -o-animation-name:bounce_fountainG;
  -webkit-animation-name:bounce_fountainG;
  animation-duration:1.2s;
  -webkit-animation-duration:1.2s;
  animation-iteration-count:infinite;
  -o-animation-iteration-count:infinite;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-iteration-count:infinite;
  animation-direction:normal;
  -o-animation-direction:normal;
  -webkit-animation-direction:normal;
  -moz-animation-direction:normal;
  transform:scale(.3);
  -webkit-transform:scale(.3);
  border-radius:9px;
}

#fountainG_1{
  animation-delay:0.6s;
  -webkit-animation-delay:0.6s;
}

#fountainG_2{
  animation-delay:0.75s;
  -webkit-animation-delay:0.75s;
}

#fountainG_3{
  animation-delay:0.9s;
  -webkit-animation-delay:0.9s;
}

#fountainG_4{
  animation-delay:1.05s;
  -webkit-animation-delay:1.05s;
}



@keyframes bounce_fountainG{
  0%{
    transform:scale(1);
    background-color:rgb(0,0,0);
  }

  100%{
    transform:scale(.3);
    background-color:rgb(100,100,100);
  }
}


@-webkit-keyframes bounce_fountainG{
  0%{
    -webkit-transform:scale(1);
    background-color:rgb(0,0,0);
  }

  100%{
    -webkit-transform:scale(.3);
    background-color:rgb(50,50,50);
  }
}