/*.loadscreen-bar{
	position:absolute;top:0;left:0;
	width:0;height:4px;
	background:#f8dc5d;
	animation-name: load-bar;
    animation-delay: .2s;
    animation-duration: 4s;
    animation-fill-mode: forwards;
	animation-timing-function: linear;
}*/

.bar1, .bar2, .bar3, .bar4{
	position:fixed;
	background:#e83e8c;
    animation-delay: .2s;
    animation-duration: 4s;
    animation-fill-mode: forwards;
	animation-timing-function: linear;
}
.bar1{animation-name: load-bar;top:0;left:0;width:0;height:4px;}
.bar2{animation-name: load-bar;bottom:0;right:0;width:0;height:4px;}

.bar3{animation-name: load-bar2;bottom:0;left:0;width:4px;height:0;}
.bar4{animation-name: load-bar2;top:0;right:0;width:4px;height:0;}


.loadscreen{
    position: fixed;
    background: white;
    width: 100%;
    height: 100%;
    z-index: 1001;
    cursor: none;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: load;
    animation-delay: 4.5s;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}
.loadscreen .obj{
    display: inline-block;
    animation-name: loadtext;
    animation-fill-mode: forwards;
    animation-duration: 3s;
}
@keyframes load{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
        z-index: 0;
		display:hidden;
    }
}
@keyframes loadtext{
    0%{opacity: 0;width: 0;}
    100%{opacity: 1;width: 85px;}
}
@keyframes load-bar{
	0%{
		width:0;
	}
	100%{
		width:100%;
	}
}
@keyframes load-bar2{
	0%{
		height:0;
	}
	100%{
		height:100%;
	}
}