#wrapper { 

	#twitter-container {

		@extend .absolute;
		top: 43px;
		left: 196px;

		.logo {

			@extend .absolute;
			top: 2px;
			width: 35px;
			height: 35px;

			svg {
				@extend .absolute;
				* { fill: #fff; }
				overflow: visible;
			}
		}

		#tweets {

			@extend .absolute;
			top: 0px;
			left: 58px;
			width: 280px;
			height: 40px;

			.tweet {
				
				@extend .absolute;
				width: inherit;
				height: inherit;

				@include roboto-condensed;

				font-size: 13px;
				text-transform: uppercase;
				line-height: 14px;
				vertical-align: middle;
				color: #fff;
			}

		} // #tweets
	}

	.quote-rotator-widget {

		@extend .absolute;

		top: 113px;
		left: 196px;
		width: 280px;

		li.quote {
			
			@extend .absolute;

			width: inherit;
			text-transform: uppercase;
			text-align: center;
			color: #fff;
			letter-spacing: 0.08em;

			figure.quote-mark {

				svg  {
					
					position: relative !important;
					width: 8px !important;
					height: 6px !important;

					* { fill: #fff; }
				}
			}

			figure.top-quote {

				@extend .absolute;
				
				top: -4px;
				left: 0px;
			}

			figure.bottom-quote {

				position: relative !important;
				text-align: right;
				margin: -10px 0 8px 0px;

				svg {
					display: inline-block !important;
				}
			}

			.top {
				
				@extend .relative;
				top: 0px;

				@include play-bold;
				font-size: 19px;
				letter-spacing: 0em;
				line-height: 17px;
				padding: 0px 20px !important;
				white-space: nowrap;

				span.quote {

				}
			}

			.bottom {
				
				@extend .relative;
				@include roboto-condensed;
				font-size: 13px;
				line-height: 13px;
				padding: 0px 20px !important;
				letter-spacing: 0.05em;
				white-space: nowrap;

				span.author {

				}

				span.company {

				}
			}
		}
	}

	.zip-code-ticket-widget {
		
		@extend .absolute;
		
		top: 460px;

		color: #fff;
		text-transform: uppercase;
		
		figcaption { 

			@extend .absolute;
			@include play-bold;

			font-size: 18px;
			letter-spacing: 0.03em;
			white-space: nowrap;
		}

		figure.outline { 
		
			@extend .absolute;

			top: 28px;
			width: 245px;
			height: 49px;

			svg rect, path, polygon {
				fill: #fff;
			}
		}

		input { 

			@extend .absolute;
			
			top: 28px;
			width: 230px;
			height: 49px;
			padding: 0 20px;

			@include roboto-condensed;
			line-height: 49px;
			color: #fff;
			font-size: 15px;
			letter-spacing: 0.08em;
			text-transform: uppercase;
		}

		button.submit { 
			figure.arrow { }
		}
	}

	.countdown-clock-widget {

		@extend .absolute;

		top: 432px;

		color: #fff;
		text-transform: uppercase;
		
		.labels {

			@extend .absolute;
			
			top: 0px;
			left: 6px;
			white-space: nowrap;

			figcaption {

				@include play;

				display: inline-block;
				width: 57px;
				text-align: center;
				font-size: 12px;
				letter-spacing: 0.08em;
				text-transform: uppercase;
			}

			figcaption.days { }
			figcaption.hours { }
			figcaption.mins { }
		}

		.time-values {
		
			@extend .absolute;

			top: 20px;
			left: 6px;
			white-space: nowrap;

			figcaption {

				@include play-bold;
				-webkit-text-stroke: 0px;

				display: inline-block;
				width: 57px;
				text-align: center;
				font-size: 18px;
				text-transform: uppercase;
				line-height: 48px;
				vertical-align: middle;
			}
			
			figcaption.days { }
			figcaption.hours { }
			figcaption.mins { }
		}

		figure.outline {

			top: 14px;
			width: 248px;
			height: 58px;

			@extend .absolute;

			svg rect, path, polygon {
				fill: #fff;
			}
		}
	}

	.promos-widget {

		@extend .absolute;

		top: 513px;

		color: #fff;
		text-transform: uppercase;

		svg * { 
			fill: #fff;
		}
		
		.promos {
			
			@extend .absolute;

			top: 6px;
			left: 10px;
			width: 227px;
			height: 88px;
			overflow: hidden;
			z-index: 5;

			li.promo-item {
				
				@extend .absolute;
				width: inherit;
				height: inherit;
				
				button {

					@extend .absolute;
					width: inherit;
					height: inherit;
					
					figure.play-icon {

						@extend .absolute;
						top: 27px;
						left: 12px;

						figure.icon {
				
							@extend .absolute;

							top: 12px;
							left: 15px;
							width: 9px;
							height: 12px;
							z-index: 3;

							svg rect, path, polygon {
								fill: #fff;
							}
						}

						figure.ring, figure.circle { 

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

							svg rect, path, polygon {
								fill: #fff;
							}
						}

						figure.circle {
							opacity: 0;
						}
					}
					
					figcaption { 

						@extend .absolute;

						width: inherit;
						height: inherit;

						@include play-bold;

						color: #fff;
						font-size: 12px;
						letter-spacing: 0.06em;
						text-transform: uppercase;
						text-align: left;
						line-height: 88px;
						z-index: 1;

						padding-left: 61px;
					} 

					figure.promo-background { 

						@extend .absolute;
						z-index: 0;
		
						figure.flicker {
							@extend .absolute;
							width: 100%;
							height: 100%;
							background: rgba(255,255,255,0.6);
							opacity: 0;
							z-index: 2;
						}

						img { 
							position: relative;
							z-index: 1;
						}
					}
				}
			}

		} // .promos

		nav.controls {

			@extend .absolute;
			top: 107px;
			left: 3px;

			button {

				@extend .absolute;

				width: 32px;
				height: 24px;

				figure.arrow {
					@extend .absolute;
					width: 10px;
					height: 10px;
					top: 7px;
					left: 10px;
					z-index: 2;
				}

				figure.circle {
					@extend .absolute;
					top: 0px;
					left: 4px;
					width: 24px;
					height: 24px;
					opacity: 0;
					z-index: 1;
				}

				figure.outline {
					@extend .absolute;
					width: inherit;
					height: inherit;
				}
			}

			button.left-arrow {
				figure.arrow { }
			}

			button.right-arrow {
				left: 27px;
			}
		}

		& > figure.outline { 
			
			width: 249px;
			height: 110px;
			top: -5px;
			left: -1px;

			@extend .absolute;

			svg rect, path, polygon {
				fill: #fff;
			}
		}
	}

}