#loading{
	position: fixed;

	height: 100vh;
	width: 100vw;
	//max-width: 400px;

	right: 0px;
	bottom:-100vh;
	//opacity: 0.0;

	z-index: 500;

    // background:  url('svg/illustrations/login.svg');
    // background-size: cover !important;
    // background-position: center !important;
    // background-repeat: no-repeat !important;

    //border: 0.5px solid red;



	&::before{
		position: absolute;
		content: '';
		top:  0px;
		left: 0px;

		width: 400%;
		height: 400%;
		background: linear-gradient(270deg, #0072FF, #00C6FF);	

	    background-size: 400% 400%;
	    opacity: 1 !important;

	    -webkit-animation: AnimationName 4s ease infinite;
	    -moz-animation: AnimationName 4s ease infinite;
	     animation: AnimationName 4s ease infinite;
	}	

   @include align-center;

	& .icon{
		position: relative;
		display: block;
		margin: auto;
		margin-top: 16px;
		width: 200px;
		height: 200px;

		  background:  url('svg/illustrations/gosive-logo-white.svg');
	      background-size: cover !important;
	      background-position: center !important;
	      background-repeat: no-repeat !important;

		//@include pulse-center;
		//border: 0.5px solid red;
	}
	
	& .title{
		position: relative;
		display: block;
		width: calc(100% - 16px);
		margin: auto;
		margin-top: 16px;
		@include font(34, $c-w);
		text-align: center;

		//border: 0.5px solid green;		
	}

	& .des{
		position: relative;
		display: block;
		width: calc(100% - 16px);
		margin: auto;
		margin-top: 16px;
		@include font(body1, $c-w);
		text-align: center;
		//border: 0.5px solid green;		
	}

}



@keyframes AnimationName{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}