.page_preloader{
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
    background-color:rgb(45,45,45);
    overflow-y: hidden;
    transition: .04s;
}
.loader_word{
    font-size: 17px;
    font-family: 'Raleway', sans-serif;
    text-align: center;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
}
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background: rgba(255,10,10,1);
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
}

/*.pace{*/
/*    pointer-events: none;*/
/*    user-select: none;*/
/*    z-index: 200;*/
/*    position: fixed;*/
/*    margin: auto;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    width: 200px;*/
/*    border: 0px;*/
/*    height: 1px;*/
/*    overflow:hidden;*/
/*    background: #1b1b1b;*/
/*    transition: .2s;*/
/*}*/
/*.pace .pace-progress{*/
/*    box-sizing: border-box;*/
/*    transform: translate3d(0,0,0);*/
/*    max-width: 400px;*/
/*    position: absolute;*/
/*    z-index: 200;*/
/*    display: block;*/
/*    top: 0;*/
/*    right: 100%;*/
/*    height: 100%;*/
/*    width: 100%;*/
/*    background: rgba(255,10,10,1);*/
/*}*/
/*.pace.pace-inactive{*/
/*    display: none;*/
/*}*/

.loader_element {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
}
.loader_element:before,
.loader_element:after {
    content: "";
    grid-area: 1/1;
    margin: 0 0 15px 15px;
    --c:#0000 calc(100%/3), #880511 0 calc(2*100%/3),#0000 0;
    --c1:linear-gradient(90deg,var(--c));
    --c2:linear-gradient( 0deg,var(--c));
    background: var(--c1),var(--c2),var(--c1),var(--c2);
    background-size: 300% 4px,4px 300%;
    background-repeat: no-repeat;
    animation: l12 1s infinite linear;
}
.loader_element:after {
    margin: 15px 15px 0 0;
    transform: scale(-1,-1);
}
@keyframes l12 {
    0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
    25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
    50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
    75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
    75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
    100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
}
@media screen and (max-width: 770px){
    .pace{
        width:200px;
    }
    .pace .pace-progress{
        max-width: 200px;
    }
}