/* @import url(fonts/nunito/stylesheet.css); */

#pre-loader {
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100vh;
  width: 100vw;
  /* background-color: #ededed; */
  background: linear-gradient(#bcdff6, #d2e9f9);
  z-index: 1600;
  overflow: hidden;
  font-family: sans-serif;
}

.loading-text {
  width: calc(10rem + 5vw);
  height: calc(10rem + 5vw);
  line-height: calc(10rem + 5vw);
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: calc(-5rem - 2.5vw) 0 0 calc(-5rem - 2.5vw);
  font-size: calc(1rem + 1vw);
  font-weight: 600;
  color: #212529;
}

.load-animation-1,
.load-animation-2 {
  position: absolute;
  z-index: 100;
  top: 50%;
  left: 50%;
  margin: calc(-5rem - 2.5vw) 0 0 calc(-5rem - 2.5vw);
  width: calc(10rem + 5vw);
  height: calc(10rem + 5vw);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border: solid 0.5rem;
  border-top-color: #009dd9;
  border-left-color: #eecd00;
  border-bottom-color: #212529;
  border-right-color: #1eaf38;
  animation: loading-animation-forwards 3s;
  -webkit-animation: loading-animation-forwards 3s;
  animation-iteration-count: infinite;
  animation-delay: 500ms;
}

.load-animation-2 {
  animation: loading-animation-reverse 3s;
  -webkit-animation: loading-animation-reverse 3s;
  animation-iteration-count: infinite;
  animation-delay: 500ms;
}

@keyframes loading-animation-forwards {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
    -webkit-transform: rotate3d(1, 1, 1, 0deg);
    -moz-transform: rotate3d(1, 1, 1, 0deg);
    -ms-transform: rotate3d(1, 1, 1, 0deg);
    -o-transform: rotate3d(1, 1, 1, 0deg);
  }

  100% {
    transform: rotate3d(1, 1, 1, 360deg);
    -webkit-transform: rotate3d(1, 1, 1, 360deg);
    -moz-transform: rotate3d(1, 1, 1, 360deg);
    -ms-transform: rotate3d(1, 1, 1, 360deg);
    -o-transform: rotate3d(1, 1, 1, 360deg);
  }
}

@keyframes loading-animation-reverse {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
    -webkit-transform: rotate3d(1, 1, 1, 0deg);
    -moz-transform: rotate3d(1, 1, 1, 0deg);
    -ms-transform: rotate3d(1, 1, 1, 0deg);
    -o-transform: rotate3d(1, 1, 1, 0deg);
  }

  100% {
    transform: rotate3d(1, 1, 1, -360deg);
    -webkit-transform: rotate3d(1, 1, 1, -360deg);
    -moz-transform: rotate3d(1, 1, 1, -360deg);
    -ms-transform: rotate3d(1, 1, 1, -360deg);
    -o-transform: rotate3d(1, 1, 1, -360deg);
  }
}

@media screen and (min-width: 520px) {
  .loading-text,
  .load-animation-1,
  .load-animation-2 {
    width: 186px;
    height: 186px;
    margin: -93px 0 0 -93px;
    line-height: 186px;
    font-size: 1.25rem;
  }
}

.bouncing-1 {
  animation: bounce-animator-1 0.5s;
  -webkit-animation: bounce-animator-1 0.5s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  display: inline-block;
}

.bouncing-2 {
  animation: bounce-animator-1 0.5s;
  -webkit-animation: bounce-animator-1 0.5s;
  animation-delay: 0.4s;
  animation-iteration-count: infinite;
  display: inline-block;
}

.bouncing-3 {
  animation: bounce-animator-1 0.5s;
  -webkit-animation: bounce-animator-1 0.5s;
  animation-delay: 0.8s;
  animation-iteration-count: infinite;
  display: inline-block;
}

@keyframes bounce-animator-1 {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }

  40% {
    transform: translateY(-1rem);
    -webkit-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    -ms-transform: translateY(-1rem);
    -o-transform: translateY(-1rem);
  }

  60% {
    transform: translateY(-0.25rem);
    -webkit-transform: translateY(-0.25rem);
    -moz-transform: translateY(-0.25rem);
    -ms-transform: translateY(-0.25rem);
    -o-transform: translateY(-0.25rem);
  }
}

@keyframes bounce-animator-2 {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }

  40% {
    transform: translateY(-1rem);
    -webkit-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    -ms-transform: translateY(-1rem);
    -o-transform: translateY(-1rem);
  }

  60% {
    transform: translateY(-0.25rem);
    -webkit-transform: translateY(-0.25rem);
    -moz-transform: translateY(-0.25rem);
    -ms-transform: translateY(-0.25rem);
    -o-transform: translateY(-0.25rem);
  }
}

@keyframes bounce-animator-3 {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }

  40% {
    transform: translateY(-1rem);
    -webkit-transform: translateY(-1rem);
    -moz-transform: translateY(-1rem);
    -ms-transform: translateY(-1rem);
    -o-transform: translateY(-1rem);
  }

  60% {
    transform: translateY(-0.25rem);
    -webkit-transform: translateY(-0.25rem);
    -moz-transform: translateY(-0.25rem);
    -ms-transform: translateY(-0.25rem);
    -o-transform: translateY(-0.25rem);
  }
}