/* prettier-ignore */
/* @import url(https://fonts.googleapis.com/css?family=Muli:400,600,700); */

html,
body {
  height: 100%;
}

body {
  background-color: #f5f7f9;
  /* color: #6c6c6c;
  font: 300 1em/1.5em 'Muli', sans-serif; */
  margin: 0;
  position: relative;
}

.cloading h1 {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 2.9rem;
  margin: 0 0 1.1em;
}

/* HELPERS */
.cloading .ltext-center {
  text-align: center;
}

/* GRID */
.cloading .lcontainer {
  /* font-family: Muli, sans-serif; */
  left: 50%;
  position: absolute;
  top: 45%;
  transform: translate(-50%, -50%);
}

/* PROGRESS */
.cloading .lprogress {
  background-color: #e5e9eb;
  height: 0.25em;
  position: relative;
  width: 24em;
}
.cloading .lprogress-bar {
  animation-duration: 5s;
  animation-name: width;
  background-color: #635ca2;
  /* background-image: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  ); */
  background-size: 24em 0.25em;
  height: 100%;
  position: relative;
}
.cloading .lprogress-shadow {
  background-image: linear-gradient(to bottom, #eaecee, transparent);
  height: 4em;
  position: absolute;
  top: 100%;
  transform: skew(45deg);
  transform-origin: 0 0;
  width: 100%;
}

/* ANIMATIONS */
@keyframes width {
  0%,
  100% {
    transition-timing-function: cubic-bezier(0.1, 0.07, 0.9, 0.01);
  }
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}