.pageloader{
	position: fixed;
    top: 0;
    left: 0;
	z-index: 120;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	width: 100%;
	height: 100%;
	}
	.pageloader.hide{
		animation-name: hide;
		animation-duration: 400ms;
		animation-direction: normal;
		animation-fill-mode: both;
	}
	@keyframes hide{
		0%{
			z-index:100;
			opacity:1;
		
		}
		25%{
			opacity:1;
			
		}
		98%{
			opacity:0;
			z-index:100;
			
		}
		100%{
			z-index:-10;
			opacity:0;
		}
	}
	.preloader{
		width:150px;
		height:150px;
	}
	
	#sand_bottom{
		animation: sand-bottom calc(var(--transition) * 5) linear 0ms infinite alternate both;
	}

	
	@keyframes sand-bottom {
		0%{
			transform:scaleY(0);
			transform-origin:bottom center;
		}
		100%{
			transform:scaleY(1);
			transform-origin:bottom center;
		}
	}