/*preloader*/
#preloader-background {
  background: #fff none repeat scroll 0 0;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
}

#preloader-background .preloader-wrapper {
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform:  translate(-50%, -50%);
  -moz-transform:  translate(-50%, -50%);
  -ms-transform:  translate(-50%, -50%);
  -o-transform:  translate(-50%, -50%);
  transform:  translate(-50%, -50%);
}

.custom-preloader i {
    font-size: 28px;
}

.custom-preloader {
  position: relative;
  -webkit-animation-name: slide; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
  animation-name: slide;
  animation-duration: 3s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    font-size: 10px !important;
}


.custom-preloader::after, 
.custom-preloader::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #333;
  bottom: 2px;
  right: 11px;
  position: absolute;
  border-radius: 50%;
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 0.5s;
  animation-name: rotate;
  animation-duration: 0.5s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  border-bottom: 1px solid #aeaeae;
  border-top: 1px solid #8a8a8a;
}

.custom-preloader::after {
  right: 22px;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes slide {
  0%   {left:0px; top:0px; opacity:1;}
  100%  {left:100px; opacity:0.1;}
}

/* Standard syntax */
@keyframes slide {
  0%   {left:0px; top:0px; opacity:1;}
  100%  {left:100px; opacity:0.1;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes rotate {
  0%   {-webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);}
  100%  {-webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes rotate {
   0%   {-webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);}
  100%  {-webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);}
}

@media (max-width: 600px){
.custom-preloader i {
    font-size: 20px;
}

.custom-preloader::after {
  right: 15px;
}

.custom-preloader::before {
  right: 7px;
}
}