.loader-progress-bar {
  width: 181px;
  height: 1.4em;
  border-radius: 0.5em;
  border: 2px solid;
  color: #ffffff;
}
.loader-progress-bar {
  filter: drop-shadow(0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5));
}
.loader-progress-bar:before,
.loader-progress-bar:after {
  content: '';
  top: 0.2em;
  left: 0.2em;
  right: 0.2em;
  bottom: 0.2em;
  border-radius: 0.25em;
  display: block;
  position: absolute;
  overflow: hidden;
}
.loader-progress-bar:after {
  right: 100%;
  -webkit-animation: loaderBarInfinite 1.1s infinite linear,
    loaderBarScroll 1.1s linear forwards;
  animation: loaderBarInfinite 1.1s infinite linear,
    loaderBarScroll 1.1s linear forwards;
  box-shadow: inset 0 0.5em 0.5em rgba(255, 255, 255, 0.25),
    inset 0 -0.5em 0.5em rgba(255, 255, 255, 0.5);
  background-image: repeating-linear-gradient(
    45deg,
    #fff 0px,
    #fff 4px,
    #ffffff90 5px,
    #ffffff90 9px
  );
  background-size: 26px 13px;
}
[class*='loader'] {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@-webkit-keyframes loaderBarInfinite {
  from {
    background-position: 104px 0;
  }
  to {
    background-position: -104px 0;
  }
}

@keyframes loaderBarInfinite {
  from {
    background-position: 104px 0;
  }
  to {
    background-position: -104px 0;
  }
}
@-webkit-keyframes loaderBarScroll {
  to {
    right: 2%;
  }
}
@keyframes loaderBarScroll {
  to {
    right: 2%;
  }
}

.fade-in-bottom {
  -webkit-animation: fade-in-bottom 1.5s cubic-bezier(0.39, 0.575, 0.565, 1)
    infinite alternate;
  animation: fade-in-bottom 1.5s cubic-bezier(0.39, 0.575, 0.565, 1) infinite
    alternate;
}
@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.fade-out {
  -webkit-animation: fade-out 0.2s 1.1s forwards;
  animation: fade-out 0.2s 1.1s forwards;
}
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}

.banner--clone {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.banner--stick {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}

.banner--unstick {
  /* Not required to use, but could be useful to have */
}