@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
.loaderFadeOut {
  opacity: 0;
  transition: opacity 1s;
}
.loading.container {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000;
  background: #fcfcfc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading.container .content {
  text-align: center;
}
.loading.container .content .branding {
  width: 140px;
  margin: auto;
  animation: fadeInDown 0.3s ease;
}
.loading.container .content .branding .logo {
  height: 70px;
}
.loading.container .content .branding .logo-floating {
  max-width: 70px;
  margin: auto;
}
.loading.container .content .branding .logo-floating__logo {
  width: 65px;
}
.loading.container .content .branding .logo-floating__logo--bounce-up {
  animation: bounce-up 0.75s;
  animation-timing-function: ease-in-out;
  transform-origin: 50%;
  animation-iteration-count: infinite;
}
@keyframes bounce-up {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}
.loading.container .content .branding .logo-floating__shadow {
  margin-top: 10px;
  display: flex;
}
.loading.container .content .branding .logo-floating__shadow--shadow-stretch {
  animation: shadow-stretch 0.75s ease-in-out;
  transform-origin: 50%;
  animation-iteration-count: infinite;
}
@keyframes shadow-stretch {
  0% {
    transform: scaleX(0.85);
    opacity: 0.2;
  }
  50% {
    transform: scaleX(0.75);
    opacity: 0.15;
  }
  100% {
    transform: scaleX(0.85);
    opacity: 0.2;
  }
}
.loading.container .loading-bar {
  width: 100%;
  position: fixed;
  top: 0;
}
@keyframes loader {
  0% {
    width: 0;
  }
  4% {
    width: 10%;
  }
  7% {
    width: 24%;
  }
  10% {
    width: 41%;
  }
  12% {
    width: 50%;
  }
  14% {
    width: 52%;
  }
  16% {
    width: 60%;
  }
  18% {
    width: 76%;
  }
  20% {
    width: 86%;
  }
  100% {
    width: 98%;
  }
}
.loading.container .loading-bar .bar {
  overflow: hidden;
  width: 100%;
}
.loading.container .loading-bar .bar span {
  display: block;
}
.loading.container .loading-bar .progress {
  animation: loader 12s ease forwards;
  background: linear-gradient(270deg, #d71939 0%, #ffb961 27.07%, #00857b 53.59%, #1099fc 77.35%, #716bf1 100%);
  padding: 3px;
  border-radius: 3px;
}