#overlay-container {

	@extend .absolute;
	z-index: 1000;

	.overlay-view {

		@extend .fixed;

		margin-top: 0px;
		z-index: 501;

		.share-block {
			border: 2px solid rgba(255,255,255,0.5);
		}
	}

	.veil {

		@extend .fixed;
		
		width: inherit;
		height: inherit;
		background: rgba(0,0,0,0.88);
		margin-top: 0px;
		opacity: 0;
		z-index: 500;
	}

	.scrollbar {

		@extend .absolute;

		top: 92px;
		left: auto;
		right: 40px;
		width: 10px;

		.handle {

			@extend .absolute;

			width: inherit;
			height: 250px;
			background: rgba(255,255,255,0.5);

			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px; /* future proofing */
			-khtml-border-radius: 5px; /* for old Konqueror browsers */
		}

		.track {

			@extend .absolute;

			width: inherit;
			height: 100%;
		}
	}

	.share {

		position: absolute;
		float: left;
		top: 0px;
		left: 0px;
		height: 50px;
		line-height: 50px;
		vertical-align: middle;
		white-space: nowrap;
		text-align: left;
		z-index: 2;

		@include play;

		figcaption {

			position: relative;
			float: left;
			height: inherit;
			padding: 0 25px;

			color: #fff;
			background: rgba(40,33,43,0.8);
			font-size: 16px;
			text-align: center;
			text-transform: uppercase;
			letter-spacing: 0.02em;
		}

		ul.share-icons {

			position: relative;
			float: left;

			height: inherit;
			padding: 0;
			font-size: 20px;
			text-align: left;
			color: #fff;

			li.icon {

				position: relative;
				float: left;
				width: 50px;
				height: 50px;
				line-height: 50px;
				vertical-align: middle;
				text-align: center;
				cursor: pointer;
				margin-right: -4px;

				@include icons;				

				&.twitter, .social-icon.twitter { background-color: $twitterColor; }
				&.facebook, .social-icon.facebook { background-color: $facebookColor; }
				&.gplus, .social-icon.gplus { background-color: $gplusColor; }
				&.pinterest, .social-icon.pinterest { background-color: $pinterestColor; }
				&.tumblr, .social-icon.tumblr { background-color: $tumblrColor; }

				-webkit-transition: background-color 50ms ease-out;
				    -moz-transition: background-color 50ms ease-out;
				    -o-transition: background-color 50ms ease-out;
				    transition: background-color 50ms ease-out;
			}

		}
	} // end share

	// ticketing overlay -----------------------------------------------------------------------  /

	#ticketing-overlay {	
		
	}

	// partners overlay ------------------------------------------------------------------------  /

	#partners-overlay {

	}

	// photo overlay ---------------------------------------------------------------------------  /

	.photo-overlay, .gif-overlay {
		
		// position: fixed;

		.top-left {
			
			@extend .absolute;

			width: inherit;
			opacity: 0;

			.share {

			}

			.title {

			}

		}

		.image-container {
			
			@extend .absolute;
			top: 60px;
			opacity: 0;

			img {
				@extend .absolute;
				width: 100%;
				height: 100%;
			}
		}
	}

	// gif overlay -----------------------------------------------------------------------------  /

	.gif-overlay {

	}

	// video overlay ---------------------------------------------------------------------------  /

	.video-overlay {
		
		position: fixed;

		.top-left {
			
			@extend .absolute;

			width: inherit;
			opacity: 0;

			.share {

			}

			.title {

			}

		}

		.video-container {
			
			@extend .absolute;
			top: 60px;
			width: 720px;
			height: 560px;
			opacity: 0;
		}
	}

	// tickets overlay ---------------------------------------------------------------------------  /

	#TicketingOverlayView {

		@extend .fixed;

		.overlay-content {
			
			@extend .absolute;
			width: 580px;
			height: 460px;
			color: #fff;

			.close-button-container {

				@extend .absolute;
				left: auto;
				right: 0px;
			}

			.center-container {

				@extend .absolute;
				top: 56px;
				width: inherit;
				text-align: center;

				.content {

					@extend .absolute;
					width: inherit;
					z-index: 1;

					h1 {

						@include play-bold;

						font-size: 28px;
						text-align: center;
						text-transform: uppercase;

						margin: 80px auto 25px auto;
					}

					figure.header-line {

						@extend .relative;

						width: 6px;
						height: 18px;
						margin: 0 auto;

						svg * {
							fill: #fff;
						}
					}

					ul.logos {

						@extend .inline-block;
						width: 400px;
						text-align: center;
						white-space: nowrap;

						li.logo {

							@extend .inline-block;
							width: 200px;

							a {

								figure.logo-image {

									width: inherit;
									height: 150px;

								}

								figcaption {

									width: inherit;

									@include roboto-condensed;
									
									font-size: 15px;
									text-transform: none;
									text-align: center;
									padding-top: 30px;
								}
							}
						}
					}
				}

				figure.outline {

					@extend .absolute;
					width: 580px;
					height: 405px;
					z-index: 0;

					svg * {
						fill: #fff;
					}
				}
			}
		}
	}

	// interstitial overlay --------------------------------------------------------------------  /

	#InterstitialOverlayView {

		position: fixed;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		opacity: 0;
		background: #000;

		.interstitial-overlay {
			
			position: absolute;
			width: inherit;
			height: inherit;

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

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


}