.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    /*-webkit-transform: translate3d(0, -50px, 0);
      -ms-transform: translate3d(0, -50px, 0);
      transform: translate3d(0, -50px, 0);*/
    opacity: 0;
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -ms-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
    z-index: 9999;
}

    .pace.pace-active {
        opacity: .6;
        /*-webkit-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);*/
    }

    .pace .pace-progress {
        display: block;
        position: fixed;
        z-index: 2000;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        right: 100%;
        width: 100%;
        background: #1ab394;
        pointer-events: none;
        border-radius: 0;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }


        .pace .pace-progress:after {
            display: block;
            position: absolute;
            top: 0;
            left: .5rem;
            content: attr(data-progress-text);
            /*font-family: inherit;*/
            font-weight: 100;
            font-size: 6rem;
            line-height: 1;
            text-align: right;
            color: rgba(0,0,0, 0.4);
        }