.redirect {
  height: -webkit-calc(100vh - 375px);
  height: -moz-calc(100vh - 375px);
  height: calc(100vh - 375px);
  min-height: 300px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.redirect h1 {
  display: block;
  width: 100%;
}

.loader,
.bar {
  width: 120px;
  height: 20px;
}

.loader {
  position: relative;
  margin: 0 auto;
  left: -10px;
}

.bar {
  position: absolute;
  display: flex;
  align-items: center;
}
.bar::before,
.bar::after {
  content: "";
  position: absolute;
  display: block;
  width: 14px;
  height: 14px;
  background: #fff;
  background: #a2c037;
  opacity: 0;
  box-shadow: 1px 1px 4px rgba(0,0,0,.15);
  border-radius: 2px;
  animation: slideleft 3s ease-in-out infinite;
}

.bar1::before { animation-delay: 0.00s }
.bar1::after  { animation-delay: 0.3s }
.bar2::before { animation-delay: 0.60s }
.bar2::after  { animation-delay: 0.90s }
.bar3::before { animation-delay: 1.20s }
.bar3::after  { animation-delay: 1.50s }

@keyframes slideleft {
  10% { opacity: 0; transform: scale(0); left: 0 }
  50% { opacity: 1; transform: scale(1) }
  90% { opacity: 0; transform: scale(0); left: 100% }
}