html, body {
  height: 100%;
}

body {
  margin: 0;
}

.preloader {
  height: 100%;
  background-color: #FFFEFE;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}

.loader {
  color: #4E77FB;
  font-size: 2.4px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader:before,
.loader:after {
  position: absolute;
  content: '';
}

.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #FFFEFE;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.1em 5.1em;
  transform-origin: 5.1em 5.1em;
  -webkit-animation: load2 1s infinite ease 0.75s;
  animation: load2 1s infinite ease 0.75s;
}

.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: #FFFEFE;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 4.9em;
  -webkit-transform-origin: 0.1em 5.1em;
  transform-origin: 0.1em 5.1em;
  -webkit-animation: load2 1s infinite ease;
  animation: load2 1s infinite ease;
}

@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#reload {
  flex: 1;
}

.reload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 40px;
  color: #292D3C;
  font: 600 20px Arial;
}

.reload-container .subtitle {
  text-align: center;
  font-size: 16px;
  margin: 16px;
  font-weight: lighter;
  white-space: pre-wrap;
}

#languages {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex: 1;
  margin: 20px;
  color: #292D3C;
}

#languages > div {
  margin-left: 20px;
  cursor: pointer;
}
