/* ==========================================================================
	PAGE LOADING EFFECT
	========================================================================== */
	#loader-wrapper{
		display: none;
	}

	.js{
		
		#loader-wrapper{
			display: block; 
			position: fixed;
			top: 0;
			left: 0; 
			overflow: hidden;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 10000;

			.loading-logo{
				@include animation( pageloading 1s linear infinite );
				position: absolute;
				left: 50%;				
				top: 50%;
				@include transform( translate( -50%, -50% ) );
				opacity: 1;
				height: auto;
				max-width: 80%;					
			}

			@include box-shadow( 0 0 80px rgba(0,0,0,0.2) );
		}

		.rt-loading{
			overflow-y: scroll;
		}	

		.rt-loading #loader-wrapper{
			opacity: 1;
			@include transition(  height .75s ease 0.1s);
		}

		.rt-loaded #loader-wrapper{
			opacity: 1;
			height: 0%;
			@include transition( height .75s ease 0.2s);


			.loading-logo{
				opacity: 0;
				@include transition( opacity 0.2s ease 0);			
			}			
		}		

		.pace {
			-webkit-pointer-events: none;
			pointer-events: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			user-select: none;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 10001;
		}

		.rt-loaded .pace{
			display: none;
		}

		.pace.pace-active {
			-webkit-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		.pace .pace-progress {
			display: block;
			position: fixed;
			z-index: 2000;
			bottom: 0;
			right: 100%;
			width: 100%;
			height: 4px;
			pointer-events: none;
		}		

		.rt-leaving{

			overflow-x: hidden;

			#container{
			@include filter( grayscale(1) );
			opacity: 0.7;
			@include transition( filter 1s, opacity 5s);	
			}
		}


	}