.preload {
    width:100%;
    height:100%;
    z-index: 99999;
    background: #282828!important;
    position: fixed;
}

.preload svg {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.stroke-still {
    stroke: #232323;
}

.stroke-animation {
    -webkit-animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
    animation: stroke-spacing 1.2s ease-in, stroke-color 4.8s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

@-webkit-keyframes stroke-spacing {
    0% {
        stroke-dasharray: 0 200;
    }
    45% {
        stroke-dashoffset: 0;
        stroke-dasharray: 200 200;
    }
    90% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
    100% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
}

@keyframes stroke-spacing {
    0% {
        stroke-dasharray: 0 200;
    }
    45% {
        stroke-dashoffset: 0;
        stroke-dasharray: 200 200;
    }
    90% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
    100% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
}

@-webkit-keyframes stroke-color {
    0% {
        stroke: #FFCC29;
    }
    24% {
        stroke: #f9cf4f;
    }
    25% {
        stroke: #c7a02c;
    }
    49% {
        stroke: #f9cf4f;
    }
    50% {
        stroke: #c7a748;
    }
    74% {
        stroke: #a2801b;
    }
    75% {
        stroke: #c7a748;
    }
    99% {
        stroke: #caa842;
    }
}

@keyframes stroke-color {
    0% {
        stroke: #FFCC29;
    }
    24% {
        stroke: #f9cf4f;
    }
    25% {
        stroke: #c7a02c;
    }
    49% {
        stroke: #f9cf4f;
    }
    50% {
        stroke: #c7a748;
    }
    74% {
        stroke: #a2801b;
    }
    75% {
        stroke: #c7a748;
    }
    99% {
        stroke: #caa842;
    }
}