.flex-center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	flex-direction: column;
}
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 9999;
}
.preloader .line {
    height: 30px;
    background-color: #000;
    border-top: 1px solid rgb(255 255 255 / 65%);
    width: 0;
    animation: lineIn 1s linear forwards;
    z-index: 2;
}
@keyframes lineIn {
  0% {
    width: 0;
  }
  100% {
    width: 220px;
  }
}

.preloader .logo-loader {
    display: inline-block;
    opacity: 0;
    animation: logoIn 1s ease forwards;
    animation-delay: 1s;
}
@keyframes logoIn {
  0% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-5px);
    opacity: 1;
  }
}












.dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 0;
  border-radius: 50%;
  background: #FFF;
  -webkit-animation: dot-dot-dot 1.0s linear infinite;
  animation: dot-dot-dot 1.0s linear infinite;
}

.dots .dot:nth-child(2) {
  animation-delay: .2s;
}

.dots .dot:nth-child(3) {
  animation-delay: .4s;
}

@keyframes dot-dot-dot {
  0%, 60%, 100% {
    -webkit-transform: initial;
      -ms-transform: initial;
        transform: initial;
  }
  30% {
    -webkit-transform: translateY(-15px);
      -ms-transform: translateY(-15px);
        transform: translateY(-15px);
  }
}