// preloader

#initial-preloader {

	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #65738b;
	background-size: cover;
	opacity: 0;
	overflow: hidden;

	.centered {

		@extend .absolute;

		top: 50%;
		left: 50%;
		margin: -155px 0 0 -155px;
		width: 310px;
		height: 310px;		
		z-index: 10;

		color: #fff;

		figure.ss-intro {

			@extend .absolute;
			top: -42px;
			left: -45px;
			margin: 0 auto;
			width: 400px;
			height: 400px;
			z-index: 3;
		}

		figure.ss-driveby {

			@extend .absolute;
			top: -42px;
			left: -45px;
			margin: 0 auto;
			width: 400px;
			height: 400px;
			z-index: 3;
		}

		figure.ss-outro {

			@extend .absolute;
			right: 0px;
			margin: 0 0 0 0px;
			width: 275px;
			height: 275px;
			z-index: 3;
		}

		figcaption.percent-loaded {

			@extend.absolute;
			@include roboto-condensed;

			top: 105px;
			width: inherit;
			font-size: 24px;
			color: #99a2b2;
			text-align: center;
			z-index: 2;
		}

		figure.circle-loader {
			@extend .absolute;
			z-index: 100;
		}

		figure.circle {

			@extend .absolute;
			width: 310px;
			height: 310px;
			z-index: 1;

			svg * {
				fill: #f9f9f9;
			}
		}
	}

	.zoom-image {

		@extend .absolute;
		display: none;
		top: 50%;
		left: 50%;
		width: 1100px;
		height: 874px;
		margin: -437px 0 0 -550px;
		z-index: 20;

		img {
			@extend .absolute;
		}

		img.blur { z-index: 2; opacity:0; }
		img.normal { z-index: 1; }
	}

	

	div.interstitial {
	
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 200;
		background: #000;
		opacity: 0;

		video {
			@extend .absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.skip-button-container {
			@extend .absolute;
			z-index: 2;
		}	
	}

	figure.white-overlay {

		position: fixed;
		display: none;
		width: 100%;
		height: 100%;
		z-index: 100;
		background: #e0e1e8;
	}

	figure.spotlight {

		position: absolute;
		top: 50%;
		left: 50%;
		width: 1276px;
		height: 972px;
		margin: -486px 0 0 -638px;
		z-index: 1;
	}

	figure.bg {

		position: absolute;
		top: 0px;
		left: 0px;
		width: inherit;
		height: inherit;
		opacity: 0;

		background-image: url('../assets/img/preloader/bg.jpg');
		background-size: cover;
	}

}