#fakeloader-overlay {
  opacity: 0;
  top: 0px;
  left: 0px;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  width: 100%;
  z-index: 9998;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear; 
}

#fakeloader-overlay.visible {
  opacity: 1; 
}

#fakeloader-overlay.hidden {
  opacity: 0;
  height: 0px;
  width: 0px;
  z-index: -10000; 
}

#fakeloader-overlay .loader-wrapper-outer {
  background-color: transparent;
  z-index: 9999;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: table;
  text-align: center;
  vertical-align: middle; 
}

#fakeloader-overlay .loader-wrapper-inner {
  display: table-cell;
  vertical-align: middle; 
}

#fakeloader-overlay .loader {
  margin: auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 8px solid rgba(255, 255, 255, 0.5);
  border-right: 8px solid rgba(255, 255, 255, 0.5);
  border-bottom: 8px solid rgba(255, 255, 255, 0.5);
  border-left: 8px solid #AAA;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: fakeloader 1.1s infinite linear;
  animation: fakeloader 1.1s infinite linear; 
}

#fakeloader-overlay .loader, #fakeloader-overlay .loader:after {

  border-radius: 50%;
  width: 50px;
  height: 50px; 
}

@-webkit-keyframes fakeloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); 
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); 
  } 
}

@keyframes fakeloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); 
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); 
  } 
}

/*================New Loader================*/

.load {
    position: relative;
    margin: 50px auto;
    width: 100px;
    height: 0px;
}

.gear {
    position: absolute;
    z-index: -10;
    width: 40px;
    height: 40px;
    animation: spin 5s infinite;
}

.two {
    left: 40px;
    width: 80px;
    height: 80px;
    animation: spin-reverse 5s infinite;
}

.three {
    top: 45px;
    left: -10px;
    width: 60px;
    height: 60px;
}

@keyframes spin {
    50% {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse {
    50% {
        transform: rotate(-360deg);
    }
}

.lil-circle {
    position: absolute;
    border-radius: 50%;
    box-shadow: inset 0 0 10px 2px gray, 0 0 50px white;
    width: 100px;
    height: 100px;
    opacity: .65;
}

.blur-circle {
    position: absolute;
    top: -19px;
    left: -19px;
}

.text {
    color: lightgray;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}