/*loader css*/

#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background-color: rgba(0, 0, 0, 0.8);}
#preloader .loader-circle{
    width: 20px;
  height: 20px;
  position: absolute;
  left: -20px;
  top: 50%;
  background-color: #f1c40f;
  border-radius: 50%;
  animation: move 4s infinite cubic-bezier(.2,.64,.81,.23);
}
#preloader .loader-circle:nth-child(2) {animation-delay: 150ms;}
#preloader .loader-circle:nth-child(3) {animation-delay: 300ms;}
#preloader .loader-circle:nth-child(4) {animation-delay: 450ms;}
@keyframes move {
  0% {left: 0%;}
  75% {left:100%;}
  100% {left:100%;}
}

/*#preloader #preloader-inner {display: block; position: relative; left: 50%;top: 50%;  width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; animation: spin 2s linear infinite}
#preloader #preloader-inner:before {content: ""; position: absolute; top: 5px; left: 5px;right: 5px; bottom: 5px;border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; animation: spin 3s linear infinite}
#preloader #preloader-inner:after {content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px;  border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; animation: spin 1.5s linear infinite}
@keyframes spin {
    0% {transform:rotate(0deg)}
    to {transform: rotate(1turn)}
}*/

/*loader end*/