/**
Pre-Loader Style
**/
#faceoff {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
}
#faceoff .preloader-section {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 1000;	
}

#pre-loader {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 90px;
	height: 70px;
	z-index:100000;
} 
#pre-loader li {
	position: absolute;
    list-style-type: none;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 100%;
    opacity: 0.5;
    -webkit-animation: wave 1800ms ease-in-out infinite;
            animation: wave 1800ms ease-in-out infinite;
}
#pre-loader li:nth-child(1) {
	-webkit-animation-delay: 100ms;
	-moz-animation-delay: 100ms;
	-o-animation-delay: 100ms;
	-ms-animation-delay: 100ms;
	animation-delay: 100ms;
}
#pre-loader li:nth-child(2) {
	-webkit-animation-delay: 200ms;
	-moz-animation-delay: 200ms;
	-o-animation-delay: 200ms;
	-ms-animation-delay: 200ms;
	animation-delay: 200ms;
}
#pre-loader li:nth-child(3) {
	-webkit-animation-delay: 300ms;
	-moz-animation-delay: 300ms;
	-o-animation-delay: 300ms;
	-ms-animation-delay: 300ms;
	animation-delay: 300ms;
}
#pre-loader li:nth-child(4) {
	-webkit-animation-delay: 400ms;
	-moz-animation-delay: 400ms;
	-o-animation-delay: 400ms;
	-ms-animation-delay: 400ms;
	animation-delay: 400ms;
}
#pre-loader li:nth-child(5) {
	-webkit-animation-delay: 600ms;
	-moz-animation-delay: 600ms;
	-o-animation-delay: 600ms;
	-ms-animation-delay: 600ms;
	animation-delay: 600ms
}
#pre-loader li:nth-child(6) {
	-webkit-animation-delay: 600ms;
	-moz-animation-delay: 600ms;
	-o-animation-delay: 600ms;
	-ms-animation-delay: 600ms;
	animation-delay: 600ms;
}
#pre-loader li:nth-child(7) {
	-webkit-animation-delay: 700ms;
	-moz-animation-delay: 700ms;
	-o-animation-delay: 700ms;
	-ms-animation-delay: 700ms;
	animation-delay: 700ms;
}
#pre-loader li:nth-child(8) {
	-webkit-animation-delay: 800ms;
	-moz-animation-delay: 800ms;
	-o-animation-delay: 800ms;
	-ms-animation-delay: 800ms;
	animation-delay: 800ms
}
#pre-loader li:nth-child(9) {
	-webkit-animation-delay: 900ms;
	-moz-animation-delay: 900ms;
	-o-animation-delay: 900ms;
	-ms-animation-delay: 900ms;
	animation-delay: 900ms;
}

  
#pre-loader:before {
	content: "";
	background: transparent;
	position: absolute;
	top: -22px;
	left: -5px;
	right: 0;
	bottom: 0;
	border-radius: 100%
}
@keyframes wave {
	0% {
	-webkit-transform: rotate(0deg) translate(0px, 50px);
	    -ms-transform: rotate(0deg) translate(0px, 50px);
  	        transform: rotate(0deg) translate(0px, 50px);
    opacity: 0.5;
  }
    
  50% {
  	-webkit-transform: rotate(180deg) translate(0px, -15px);
  	    -ms-transform: rotate(180deg) translate(0px, -15px);
  	        transform: rotate(180deg) translate(0px, -15px);
    opacity: 1.0;
  }
    
  100% {
  	-webkit-transform: rotate(360deg) translate(0px, 50px);
  	    -ms-transform: rotate(360deg) translate(0px, 50px);
  	        transform: rotate(360deg) translate(0px, 50px);
    opacity: 0.5;
  }
}
@-webkit-keyframes wave {
	0% {
	-webkit-transform: rotate(0deg) translate(0px, 50px);
	    -ms-transform: rotate(0deg) translate(0px, 50px);
  	        transform: rotate(0deg) translate(0px, 50px);
    opacity: 0.5;
  }
    
  50% {
  	-webkit-transform: rotate(180deg) translate(0px, -15px);
  	    -ms-transform: rotate(180deg) translate(0px, -15px);
  	        transform: rotate(180deg) translate(0px, -15px);
    opacity: 1.0;
  }
    
  100% {
  	-webkit-transform: rotate(360deg) translate(0px, 50px);
  	    -ms-transform: rotate(360deg) translate(0px, 50px);
  	        transform: rotate(360deg) translate(0px, 50px);
    opacity: 0.5;
  }
}