@charset "utf-8";

html,
body {
    width: 100%;
    height: 100%;
}

/* body { display: flex; align-items: center; justify-content: center; } */
svg {
    overflow: visible !important;
    width: 150px;
    height: 175px;
    top: 50%;
    left: 50%;
    position: absolute;
}

svg g {
    animation: slide 2s linear infinite;
}

svg g:nth-child(2) {
    animation-delay: 0.5s;
}

svg g:nth-child(2) path {
    animation-delay: 0.5s;
    stroke-dasharray: 0px 158px;
    stroke-dashoffset: 1px;
}

svg path {
    stroke: url(#gradient);
    stroke-width: 20px;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 0 157px;
    stroke-dashoffset: 0;
    animation: escalade 2s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}

.preloader {
    background: rgba(255, 255, 255, .99);
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 13000
}

.preloader_image {
    background: url(../img/preloader.gif) 50% 50% no-repeat;
    height: 256px;
    left: 50%;
    margin: -128px 0 0 -128px;
    position: absolute;
    top: 50%;
    width: 256px
}

@keyframes slide {
    0% {
        transform: translateY(-50px);
    }

    100% {
        transform: translateY(50px);
    }
}

@keyframes escalade {
    0% {
        stroke-dasharray: 0 157px;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 156px 157px;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 156px 157px;
        stroke-dashoffset: -156px;
    }
}