.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  z-index: 99999;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #f8f7f7;
  position: fixed;
  z-index: 99999;
  top: 68px;
  right: 100%;
  width: 100%;
  height: 2px;
}

.pace .pace-progress:after {
  display: block;
  position: absolute;
  top: 100%;
  right: .5rem;
  content: attr(data-progress-text);
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  font-size: 5rem;
  line-height: 1;
  text-align: right;
  color: #f8f7f7;
}

.shadow1{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #22bae1;
  z-index: 99998;
  top:0px;
  left: 0px;
}

.shadow2{
  position: fixed;
  width: 100%;
  height: 80px;
  background-color: #f8f7f7;
  z-index: 99998;
  bottom: -moz-calc(100% - 80px);
  bottom: calc(100% - 80px);
  left: 0px;
  display: none;
}

@media (min-width: 645px) {
  .home .pace .pace-progress {
    background-color: #f8f7f7;
    position: fixed;
    z-index: 99999;
    top: 418px;
    right: 100%;
    width: 100%;
    height: 2px;
  }

  .home .shadow2{
    position: fixed;
    width: 100%;
    height: 420px;
    background-color: #f8f7f7;
    z-index: 99998;
    bottom: -moz-calc(100% - 420px);
    bottom: calc(100% - 420px);
    left: 0px;
    display: none;
  }
}