.cssanimations body .pace .pace-progress {
  display: none;
}
.cssanimations body.pace-running {
  background-color: #f7f7f7;
  overflow: hidden!important;
}
.cssanimations body.pace-running * {
  opacity: 0!important;
}
.cssanimations body.pace-running .pace .pace-progress {
  display: block;
  background: #e6e6e6;
  position: fixed;
  z-index: -1;
  bottom: 0;
  left: 0;
  height: 10%;
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
  opacity: 1!important;
}
.cssanimations body.pace-running .pace-inactive {
  display: none;
}
.cssanimations body.pace-running .page-preloader {
  display: block!important;
  opacity: 1!important;
}
.cssanimations body.pace-running .pace.pace-active,
.cssanimations body.pace-running .page-preloader * {
  opacity: 1!important;
}
.cssanimations body.pace-running .page-preloader {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -16px;
  margin-top: -16px;
  -webkit-perspective: 400px;
  -webkit-animation: base-cycle 2s linear infinite;
  -webkit-transform-origin: 16px 16px;
  -webkit-perspective-origin: 16px 16px;
  -moz-perspective: 400px;
  -moz-animation: base-cycle 2s linear infinite;
  -moz-transform-origin: 16px 16px;
  -moz-perspective-origin: 16px 16px;
  -ms-perspective: 400px;
  perspective: 400px;
  -o-animation: base-cycle 2s linear infinite;
  animation: base-cycle 2s linear infinite;
  -ms-transform-origin: 16px 16px;
  -o-transform-origin: 16px 16px;
  transform-origin: 16px 16px;
  -ms-perspective-origin: 16px 16px;
  perspective-origin: 16px 16px;
  zoom: 3;
}
.cssanimations body.pace-running .page-preloader-b {
  width: 32px;
  height: 32px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.cssanimations body.pace-running .page-preloader-b div {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.cssanimations body.pace-running .page-preloader-sec-2 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.cssanimations body.pace-running .page-preloader-sec-3 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.cssanimations body.pace-running .page-preloader-sec-4 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
.cssanimations body.pace-running .page-preloader-sec-1 div {
  background-color: #e74c3c;
}
.cssanimations body.pace-running .page-preloader-sec-2 div {
  background-color: #f39c12;
}
.cssanimations body.pace-running .page-preloader-sec-3 div {
  background-color: #3498db;
}
.cssanimations body.pace-running .page-preloader-sec-4 div {
  background-color: #2ecc71;
}
.cssanimations body.pace-running .page-preloader-b div {
  -webkit-animation: cycle 2s ease-out infinite;
  -moz-animation: cycle 2s ease-out infinite;
  -o-animation: cycle 2s ease-out infinite;
  animation: cycle 2s ease-out infinite;
}
@-webkit-keyframes base-cycle {
  0% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes base-cycle {
  0% {
    -moz-transform: rotate(0);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes base-cycle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes cycle {
  0% {
    -webkit-transform: translateX(28px) rotateY(0deg);
  }
  60% {
    -webkit-transform: translateX(0) rotateY(0deg);
  }
  70% {
    -webkit-transform: translateX(16px) rotateY(90deg);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateX(28px) rotateY(0deg);
  }
}
@-moz-keyframes cycle {
  0% {
    -moz-transform: translateX(28px) rotateY(0deg);
  }
  60% {
    -moz-transform: translateX(0) rotateY(0deg);
  }
  70% {
    -moz-transform: translateX(16px) rotateY(90deg);
    opacity: .5;
  }
  100% {
    -moz-transform: translateX(28px) rotateY(0deg);
  }
}
@keyframes cycle {
  0% {
    transform: translateX(28px) rotateY(0deg);
  }
  60% {
    transform: translateX(0) rotateY(0deg);
  }
  70% {
    transform: translateX(16px) rotateY(90deg);
    opacity: .5;
  }
  100% {
    transform: translateX(28px) rotateY(0deg);
  }
}