.preloader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	/*background: url('img/customCompanyLogo.png') 50% 50% no-repeat rgba(0, 0, 0, .91);*/
	background: rgba(0, 0, 0, .8);
}

.preloader > center{
	padding-top: 15%;
}

.preloader img{
  height: auto;
  width: auto;
  max-height: 400px;
  max-width: 400px;
}

.close-preloader{
  color: white;
  padding: 20px;
}

.dots {
  width: 10%;
  height: 5%;
  text-align: center;
  padding-top: 25%;
}
@media only screen and (max-width: 842px) {
  .preloader img{
    height: auto;
    width: 60%;
  }

}
.dots > div {
  background-color: #fff;
  height: 15px;
  width: 15px;
  margin-left:3px;
  border-radius: 50%;
  display: inline-block;
  
  -webkit-animation: stretchdelay 0.7s infinite ease-in-out;
  animation: stretchdelay 0.7s infinite ease-in-out;
}

.dots .circ2 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.dots .circ3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.dots .circ4 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.dots .circ5 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: translateY(-10px) }  
  20% { -webkit-transform: translateY(-20px) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
  } 20% {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
  }
}

.upload-loader {
  position: fixed;
  /* left: 0px; */
  /* top: 0px; */
  width: 100%;
  height: 100%;
  z-index: 9999;
  margin: 11em 16em;
}

.upload-text{
  padding-left: 20px;
  padding-right: 15px;
  color: #989898;
}

.spinner2 {
  /* width: 20%; */
  /* height: 40px; */
  /* position: relative; */
  /* padding-left: 10px; */
}

.container1 > div, .container2 > div, .container3 > div {
  width: 6px;
  height: 6px;
  background-color: #d2d6de;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner2 .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}