#page_loading_animation {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    position: fixed;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: all ease-in .3s;
    left: 0;
}
#page_loading_animation {
    display: flex;
    pointer-events: all;
    z-index: 99;
    opacity: 1;
}
body.loading {
	overflow: hidden;
	height: 100vh;
}

.box{
	background-color: transparent;
	position: relative;
	border-radius: 5px;
}
.box svg path{
	fill: transparent;
	stroke-width: 3px;
	stroke: var(--wr-main-color);
}
.box .desc{
	text-align: center;
	font-size: 3em;
	font-weight: 800;
	color: #fff;
	opacity: 0;
    animation: desc_animation 3s;
    bottom: -90px;
    left: 0px;
    right: 0px;
    position: absolute;
    animation-fill-mode: forwards;
}

.desc div{
	width: 100%;
}
svg g:nth-child(1) path{
    animation: logo_animation_1 5s infinite;
}
svg g:nth-child(2) path{
    animation: logo_animation_2 3s infinite;
}
svg g:nth-child(3) path{
    animation: logo_animation_3 3s infinite;
}

#page_loading_animation .product-name{
	font-size: 1.3rem;
}

#page_loading_animation .brand-name{
	font-style: italic;
	font-size: 1rem;
}

a{
	color: #fff;
	text-decoration: none;
}

@keyframes logo_animation{

}



@keyframes logo_animation_1{
    0%, 80% {
        stroke-dasharray: 750;
        stroke-dashoffset: 100;
    }
    40% {
        stroke-dasharray: 50;
        stroke-dashoffset: 500;
    }
}
@keyframes logo_animation_2{
    0%, 60% {
        stroke-dasharray: 750;
        stroke-dashoffset: 100;
    }
    30% {
        stroke-dasharray: 50;
        stroke-dashoffset: 500;
    }
}
@keyframes logo_animation_3{
    0%, 100% {
        stroke-dasharray: 750;
        stroke-dashoffset: 100;
    }
    50% {
        stroke-dasharray: 50;
        stroke-dashoffset: 500;
    }
}

@keyframes desc_animation{
	66%{
		opacity: 0;
    	bottom: -90px;
	}
	100%{
		opacity: 1;
		bottom: -40px;
	}
}