#overlay-container {

	.black-fade {
		position: absolute; 
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		background: #0b0e10;
		opacity: 0.85;
		z-index: 999;
	}

	// sharing

	.share {

		position: relative;
		top: 0px;
		left: 0px;
		width: 232px;
		height: 40px;
		float: left;
		color: #fff;

		line-height: 40px;
		background-color: rgba(255, 255, 255, 0.1);
		white-space: nowrap;
		overflow: hidden;
		z-index: 2;
		opacity: 0;

		@include denise;

		div {
			height: 40px;
			line-height: 40px;
			vertical-align: middle;
		}

		.label {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 75px;
			font-size: 14px;
			letter-spacing: 0.16em;
			padding: 2px 0px 0 20px;
		}

		.share-options {

			position: absolute;
			right: 0px;
			height: inherit;
			display: block;
			padding: 0;
			font-size: 14px;

			.share-icon {

				position: relative;
				float: left;
				width: 40px;
				height: 40px;
				cursor: pointer;

				@include icons;

				-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;

			    a {

					-webkit-transition: opacity 200ms ease-out;
					    -moz-transition: opacity 200ms ease-out;
					    -o-transition: opacity 200ms ease-out;
					    transition: opacity 200ms ease-out;
			    }

			    .label {
					
					position: absolute;					
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					padding: 0;
					margin: 0;
					opacity: 1;
					z-index: 5;

					text-align: center;
			    }

				.bg {

					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					padding: 0;
					margin: 0;
					z-index: 4;

			   	 	opacity: 0.6;
				}
			}

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

		}
	} // end share

	.title {

		position: relative;
		display: inline-block;
		float: right;
		
		height: 40px;
		line-height: 36px;
		vertical-align: middle;
		opacity: 0;

		@include denise;

		font-size: 15px;
		background: url($rootDir + 'assets/img/slash.png') right center no-repeat;
		padding: 4px 14px 0 0;
		margin: 0 8px 0 0;
		letter-spacing: 0.1em;

		color: #596f72;
		text-transform: uppercase;
	}

	// default container 

	.overlay-container {

		position: relative;
		width: 100%;
		height: 100%;

		.close-button {
		
			@include denise;

			position: relative;
			display: inline-block;
			float: right;
			
			height: 40px;
			line-height: 36px;
			vertical-align: middle;

			font-size: 15px;
			background: url($rootDir + 'assets/img/x-button.png') right center no-repeat;
			padding: 4px 24px 0 0;
			letter-spacing: 0.1em;

			opacity: 0;

			&:hover {
				opacity: 1;
				cursor: pointer;
			}
		}
	}

	// 

	#VideoLightboxOverlayView {

		position: absolute;
		width: 900px;
		height: 720px;
		top: 50%;
		left: 0px;
		right: 0px;
		margin: -340px - $chromeHeight auto 0 auto;
		z-index: 9999;

		.content-container {

			position: absolute; 
			left: 0px;
			top: 40px;
			width: 900px;
			height: 720px;
			opacity: 0;
			z-index: 2;

			iframe {
				background: #000;
				border: 0 none;
			}
		}
		
	} // end VideoLightboxOverlayView

	#ImageLightboxOverlayView {

		position: absolute;
		width: 900px;
		height: 505px;
		top: 50%;
		left: 0px;
		right: 0px;
		margin: -250px - $chromeHeight auto 0 auto;
		z-index: 9999;

		.content-container {
			
			position: absolute; 
			top: 40px;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 2;

			.image {

				img {
					width: 100%;
					height: 100%;
				}
			}
		}
		
	} // end VideoLightboxOverlayView

	#SSLightboxOverlayView {

		position: absolute;
		width: 900px;
		height: 505px;
		top: 50%;
		left: 0px;
		right: 0px;
		margin: -250px - $chromeHeight auto 0 auto;
		z-index: 9999;
 
		.content-container {
			position: absolute; 
			top: 40px;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 2;

			.ss {
				overflow: hidden;
			}
		}
		
	} // end VideoLightboxOverlayView

	#TicketingOverlayView {

		position: absolute;
		width: 900px;
		height: 505px;
		top: 50%;
		left: 0px;
		right: 0px;
		z-index: 9999;
		
		.title {
			left: 0px;
		}

		.content-container {

			position: absolute; 
			top: 40px;
			width: 100%;
			height: 100%;
			opacity: 0;
			z-index: 2;

			iframe {
				background: #000;
				border: 0 none;
				margin: 0;
				padding: 0;
			}
		}
		
	} // end TicketingOverlayView



}