/* ====================================================
   PACE LOADER RULES
   ==================================================== */

.pace {
    /*display:none;*/
}

.loader-bar .pace,
.loader-corner .pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /*display:block;*/
}

.pace-done.loader-bar .pace,
.pace-done.loader-corner .pace,
.pace-done .pace {
    /*display:none;*/
}

/* --------- loader style: top bar ----------- */

.loader-bar .pace .pace-progress {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 3px;
  background: #fd1c36; /* more colours in style-colours.css */

  -webkit-transition: -webkit-transform .3s, width 1s;
  -moz-transition: width 1s;
  -o-transform: width 1s;
  transition: transform .3s, width 1s;

  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);

  pointer-events: none;
}

.loader-bar .pace.pace-active .pace-progress {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* --------- loader style: Top Right Corner ----------- */

.loader-corner .pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: #fd1c36; /* more colours in style-colours.css */
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
  transform: translateX(100%) translateY(-100%) rotate(45deg);
  pointer-events: none;
}

.loader-corner .pace.pace-active .pace-activity {
  -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
  transform: translateX(50%) translateY(-50%) rotate(45deg);
}

.loader-corner .pace .pace-activity::before,
.loader-corner .pace .pace-activity::after {
    position: absolute;
    bottom: 30px;
    left: 50%;
    display: block;
    border: 5px solid #fff;
    border-radius: 50%;
    content: '';
}

.loader-corner .pace .pace-activity::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-right-color: rgba(0, 0, 0, .2);
    border-left-color: rgba(0, 0, 0, .2);
    -webkit-animation: pace-rotation 3s linear infinite;
    animation: pace-rotation 3s linear infinite;
}

.loader-corner .pace .pace-activity::after {
    bottom: 50px;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    border-top-color: rgba(0, 0, 0, .2);
    border-bottom-color: rgba(0, 0, 0, .2);
    -webkit-animation: pace-rotation 1s linear infinite;
    animation: pace-rotation 1s linear infinite;
}

@-webkit-keyframes pace-rotation {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@keyframes pace-rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}