#persistent-ui {

	@extend .absolute;

	#overlay-ui {

		.left {

			@extend .absolute;
			left: 64px;

			#logo-banner {
				
				@extend .absolute;

				top: 0px;
				left: 0px;
				width: 175px;
				height: 400px;

				figure.logo { 
					
					@extend .absolute;

					top: 30px;
					left: 12px;
					width: 150px;
					height: 252px;
				}

				figcaption {  
					
					@extend .absolute;

					top: 300px;
					left: 0px;
					width: inherit;

					@include bank-gothic;

					text-transform: uppercase;
					text-align: center;				
					font-size: 21px;
					letter-spacing: -0.1em;
					color: #fff;
					line-height: 18px;
				}
				
				figure.in-3d { 
					
					@extend .absolute;

					top: 364px;
					left: 23px;
					width: 132px;
					height: 20px;
				}

				figure.bg {
					
					@extend .absolute;
					width: inherit;
					height: inherit;

					background: #cc1325;
					z-index: -1;
				}
			}

			#left-widgets-container {
				@extend .absolute;
			}

			#home-button-container {
				@extend .absolute;
				top: 17px;
			}

			#ticketing-button-container {
				@extend .absolute;
				top: 17px;
				left: 195px;
			}

			.legal {
				
				@extend .absolute;
				width: 150px;
				white-space: nowrap;
				cursor: pointer;
				
				figcaption {

					position: relative;
					display: inline-block;
					width: auto;

					@include roboto-condensed;
					font-size: 15px;
					color: #fff;
					text-transform: uppercase;

					figure {
						
						position: relative;
						display: inline-block;

						&.arrow-down {

							margin: 0 0 1px 5px;

							width: 12px;
							height: 7px;
						}

						&.arrow-right {

							margin: 0 0 0px 5px;

							width: 7px;
							height: 11px;
						}

						svg * { fill: #fff; }
					}

					a.espagnol {
						
						margin-left: 8px;
						color: #fff;

						figcaption {

							@include roboto-condensed;
							font-size: 14px;

							width: auto;
							border-bottom: 1px solid rgba(255,255,255,0);

							-webkit-transition: border 120ms ease-out;
							    -moz-transition: border 120ms ease-out;
							    -o-transition: border 120ms ease-out;
							    transition: border 120ms ease-out;
						}

						&:hover {
							
							color: #fff;
							
							figcaption { 
								border-bottom: 1px solid rgba(255,255,255,1);
							}
						}
					}
				}
			}
		}

		#social-menu {

			@extend .absolute;

			top: 20px;
			text-align: right;
			white-space: nowrap;

			button#audio-toggle {

				position: relative;
				display: inline-block;
				vertical-align: top;
				white-space: nowrap;
				overflow: hidden;
				
				width: 100px;
				height: 40px;
				margin-right: 25px;
				line-height: 40px;

				figcaption {

					@extend .absolute;
					@include roboto-condensed;
	
					width: inherit;
					height: inherit;
					font-size: 15px;
					line-height: 40px;
					text-transform: uppercase;
					text-align: right;
					color: #fff;
				}

				figcaption.on {
	
				}

				figcaption.off {
					opacity: 0;
				}
			}

			ul#social-icons {

				position: relative;
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;

				li {
					
					position: relative;
					display: inline-block;
					width: 40px;
					height: 40px;
					margin-right: -4px;

					cursor: pointer;

					button.share-button {

						position: relative;
						width: inherit;
						height: inherit;

						figure {
							@extend .absolute;
							width: inherit;
							height: inherit;
							color: #fff;
						}

						figure.icon {
							z-index: 1;
							line-height: 40px;
							text-align: center;
							vertical-align: middle;
							font-size: 20px;
						}

						figure.whiteout {
							z-index: 2;
							background: #fff;
							opacity: 0;
						}
					}
				}

			} // #social-icon
	
			div.espagnol {

				position: absolute;
				top: 48px;
				right: 0px;

				@include roboto-condensed;
				font-size: 14px;
				color: #fff;
				text-transform: uppercase;

				a {
					
					color: #fff;

					figcaption {
						
						position: relative;
						display: inline-block;
						font-weight: normal;
						width: auto;
						border-bottom: 1px solid rgba(255,255,255,0);

						-webkit-transition: border 120ms ease-out;
						    -moz-transition: border 120ms ease-out;
						    -o-transition: border 120ms ease-out;
						    transition: border 120ms ease-out;
					}

					figure {
						
						position: relative;
						display: inline-block;

						&.arrow-right {

							margin: 0 0 0px 5px;

							width: 6px;
							height: 10px;
						}

						svg * { fill: #fff; }
					}

					&:hover {
						
						color: #fff;
						
						figcaption { 
							border-bottom: 1px solid rgba(255,255,255,1);
						}
					}
				}
			}

		}

		#nav-button {

			@extend .absolute;
			width: 140px;
			height: 156px;
			opacity: 0;
			background: url('../assets/img/blank.png');

			figure.animated-shape { 

				@extend .absolute;
				top: 41px;

				figure.outer-ring { 

					@extend .absolute;
					width: 86px;
					height: 74px;

				}

				figure.inner-ring { 

					@extend .absolute;
					top: 11px;
					left: 17px;
					width: 52px;
					height: 52px;
				}

				figure.hexagons { 

					@extend .absolute;

					top: 21px;
					left: 30px;
					width: 32px;
					height: 32px;

					.hexagon {

						@extend .absolute;
						width: 17px;
						height: 15px;

						&.hexagon-0 { }
						
						&.hexagon-1 {
							top: 16px;
						}

						&.hexagon-2 {
							top: 8px;
							left: 14px;
						}
					}
				}

				svg path,stroke,rect,circle,poly {
					fill: #fff;
				}

			}

			figcaption { 
				
				@extend.absolute;
				
				top: 68px;
				left: 2px;
				width: 200px;

				@include play-bold;

				color: #fff;
				font-size: 15px;
				text-transform: uppercase;
				text-align: center;
				letter-spacing: 0.06em;
				-webkit-text-stroke: 0px;

				transform:rotate(270deg);
				-ms-transform:rotate(270deg); /* IE 9 */
				-webkit-transform:rotate(270deg); /* Opera, Chrome, and Safari */
			}

			figure.side-line {

				@extend .absolute;
				top: 75px;
				left: 120px;

				figure.bulb { 

					@extend .absolute;
					
					width: 7px;
					height: 7px;

					svg rect,poly,stroke,circle {
						fill: #fff;
					}
				}

				figure.line {

					@extend .absolute;

					width: 36px;
					height: 2px;
					top: 2px;
					left: 3px;

					background: #fff;
				}
			} 

		} // #nav-button

	}

	/* ----------------------------
		1.  Header 
	----------------------------- */

	#ui-container header {

	} // end header

	/* ----------------------------
		2.  Footer 
	----------------------------- */

	footer {

		#legal-panel-container {

			@extend .absolute;

			#legal-panel {

				@extend .absolute;
				height: 180px;
				z-index: 11;

				.legal-content {

					@extend .absolute;
					top: 40px;
					left: 68px;
					z-index: 1;

					figure.rating {
						position: relative;
						padding-right: 17px;
						float: left;
					}

					figcaption.legal-text {

						position: relative;
						float: left;
						margin-top: 0px;
						font-size: 9px;
						
						a {
							color: #fff;

							&:hover {
								color: #b3bdd1;
							}
						}
					}

				}

				.bg {
					@extend .absolute;
					z-index: 0;
					width: inherit;
					height: inherit;
					background: #727d93;
				}

			} // #legal-panel
		}

	} // end footer

}