/* HOME PAGE PAGE LAYER ELEMENTS ----------------------------------------------------- */

#HomePageView {
	
	.page-content {
		
		.top-content {

			@extend .absolute;
			overflow: hidden;

			#characters-viewer {

				@extend .absolute;
				width: 1140px;

				.scalable-content {

					@extend .absolute;
					width: inherit;

					#character-overlay {

						@extend .absolute;
						z-index: 20;

						.character-over {

							@extend .absolute;

							figure.spinning-circle {

								@extend .absolute;

								top: -22px;
								left: -26px;
								width: 48px;
								height: 48px;

								svg * {
									fill: #fff;
								}
							}

							figure.line {

								@extend .absolute;
								
								top: -1px;
								left: 20px;
								width: 90px;
								height: 2px;

								background: #fff;
							}

							figure.circle {
								
								@extend .absolute;

								top: -3px;
								left: 110px;
								width: 6px;
								height: 6px;

								svg circle {
									fill: #fff;
								}
							}

							figcaption.name { 

								@extend .absolute;

								top: -17px;
								left: 125px;

								@include play-bold;

								font-size: 28px;
								text-transform: uppercase;
								color: #fff;
								letter-spacing: 0.05em;

								-webkit-text-stroke: 0px;

								white-space: nowrap;
							}

							figure.pop-spinner {

								@extend .absolute;
								top: -82px;
								left: -80px;
								width: 165px;
								height: 165px;
								z-index: 1;

								display: none;
							}

							.bio-details {

								@extend .absolute;
								top: 20px;
								left: 130px;
								
								figure.arrow {

									@extend .absolute;

									top: 0px;
									left: 0px;
									width: 18px;
									height: 12px;
								}

								figcaption.bio {

									@extend .absolute;

									top: 0px;
									left: 0px;
									width: 280px;

									@include roboto-condensed;

									font-size: 14px;
									text-transform: none;
									line-height: 16px;
									vertical-align: middle;
									letter-spacing: 0.05em;
									color: #fff;

									-webkit-text-stroke: 0.2px;
								}
							}

							button.hit-area {

								@extend .absolute;
								background: url('../assets/img/blank.png');
								top: -20px;
								left: -20px;
								z-index: 100;
							}

							.rollover {

								@extend .absolute;
								z-index: 5;
								display: none;

								img.character-popout {

									@extend .absolute;
									top: -250px;
									left: -400px;
									z-index: 5;
								}

								img.character-circle {

									@extend .absolute;
									top: -62px;
									left: -62px;
									z-index: 4;
								}

								div.loading {

									@extend .absolute;
									top: 92px;
									left: -39px;
									opacity: 0;

									figure {
										@extend .absolute;
									}

									figure.side-bar {
										
										width: 2px;
										height: 8px;
										background: #fff;

										&.left-bar {
											top: 0px;
											left: 0px;
										}

										&.right-bar {
											top: 0px;
											left: 76px;
										}
									}

									figure.load-bar {

										top: 1px;
										left: 5px;
										width: 68px;
										height: 6px;
										background: #fff;
										z-index: 1;

										&.load-percentage {
											background: #c7191f;
											z-index: 2;
										}	
									}
								}

							}
						}
					}

					#characters {

						@extend .absolute;
						top: 20px;
						z-index: 1;

						li.character {

							@extend .absolute;

							width: 1140px;
							height: 880px;
							opacity: 0;

							.loader { }

							figure.character-image { 
							
								@extend .absolute;
								width: inherit;
								height: inherit;
								z-index: 2;

								img {
									@extend .absolute;
								}
							}

							figure.spotlight {

								@extend .absolute;
								top: -46px;
								left: -68px;
								width: 1276px;
								height: 972px;
								z-index: 0;
							}
						}

					} // #characters

					#characters-pagination {
		
						@extend .absolute;
						top: 850px;
						white-space: nowrap;
						z-index: 10;
						opacity: 0;

						li {

							display: inline-block;
							position: relative;
							width: 14px;
							height: 20px;

							&.selected {
								button figure.over {
									opacity: 1;
								}
							}

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

								&:hover {
									figure.over {
										opacity: 1;
									}
								}

								figure {
									@extend .absolute;
									top: 5px;
									left: 2px;
									width: 10px;
									height: 10px;								
								}

								figure.outline {

									z-index: 1;

									svg * {
										fill: #fff;
									}
								}

								figure.over {

									z-index: 2;
									opacity: 0;

									-webkit-transition: opacity 120ms ease-out;
									   -moz-transition: opacity 120ms ease-out;
									   -o-transition: opacity 120ms ease-out;
									   transition: opacity 120ms ease-out;

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

					} // #characters-pagination

					.spotlight {
						@extend .absolute;
						left: -90px;
						opacity: 0;
					}

				} // .scalable-content

				#character-controls {

					@extend .absolute;
					
					width: 101px;
					height: 45px;
					top: 453px;
					left: 1038px;
					z-index: 10;
					opacity: 0;

					cursor: pointer;

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

					.button-outlines { 

						@extend .absolute;
						width: inherit;
						height: inherit;
					}
					
					.left-arrow, .right-arrow {
						
						@extend .absolute;

						width: 50px;
						height: 45px;

						figure.arrow {

							@extend .absolute;
							z-index: 2;

							svg {

								@extend .absolute;

								top: 15px;
								left: 19px;
								width: 14px;
								height: 17px;							
							}
						}

						figure.circle {

							@extend .absolute;
							left: 3px;
							z-index: 1;
							
							svg {

								@extend .absolute;
								
								width: 46px;
								height: 46px;
								opacity: 0;

								circle {
									fill: #fff;
								}
							}
						}
					}

					.left-arrow { }

					.right-arrow { 
						
						left: 50px;

						figure.circle {
							left: 2px;
						}
					}
				}

			} // #character-viewer		
			
			#character-veil { 

				@extend .absolute;
				z-index: 2;

				img { 

					@extend .absolute;
					
					width: inherit;
					height: inherit;
				}
			}

		} // .top-content

		.bottom-content {

			@extend .absolute;

			border-top: 7px solid #fff;
			height: 930px;
			z-index: 10;
			background: #cc1325	;

			#grid-container {

				@extend .absolute;

				top: 0px;
				width: 1140px;
				z-index: 2;

				#grid-content {

					@extend .absolute;

					top: 0px;
					width: inherit;
					opacity: 0;
					
					ul#grid-pagination {

						@extend .absolute;
						white-space: nowrap;
						opacity: 0;

						li.pagination-item {

							position: relative;
							display: inline-block;
							width: 21px;
							height: 18px;

							button { 

								width: inherit;
								height: inherit;

								figure { 

									@extend .absolute;

									width: inherit;
									height: inherit;
								}

								figure.filled { opacity:0; }
								figure.outline { }
							}
						}
					}

					ul#grid {

						@extend .absolute;

						top: 40px;
						width: inherit;
						height: 855px;
						
						li.grid-item { 
							
							@extend .absolute;
							width: 285px;
							height: 285px;
							overflow: hidden;
							opacity: 0;

							div.share-container {

								.share-block {

									@extend .absolute;
									top: 238px;
									right: 10px;
									left: auto;
									width: 135px;
									height: 38px;
									border: 2px solid rgba(255, 255, 255, .5);
									z-index: 2;
									cursor: pointer;

									.text {
										position: absolute;
										top: 0px;
										left: 0;
										right: 0;
										margin: auto auto;
										width: 100%;
										text-align: center;
										@include roboto-condensed;
										font-size: 15px;
										height: 38px;
										line-height: 38px;
										vertical-align: middle;
										color: #fff;
										text-transform: uppercase;
									}
									ul {

										@extend .absolute;
	
										top: -2px;
										left: -4px;
										width: inherit;
										height: inherit;
										text-align: center;
										white-space: nowrap;

										li {
											
											position: relative;
											display: inline-block;
											width: 27px;
											height: inherit;
											margin-right: -4px;
											opacity: 0;

											cursor: pointer;

											button {

												figure {

													width: inherit;
													height: inherit;
													line-height: 40px;
													text-align: center;
													vertical-align: middle;
													font-size: 14px;

													color: #fff;
												}
											}
											.whiteout {
												@extend .absolute;
												background: #fff;
												width: 100%;
												height: 100%;
												opacity: 0;
											}
										}

									} 
								}
							}

							ul.share-options {

								@extend .absolute;

								top: 238px;
								right: 18px;
								text-align: right;
								white-space: nowrap;
								overflow: hidden;
								opacity: 1;
								z-index: 2;

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

									cursor: pointer;

									button {

										figure {

											width: inherit;
											height: inherit;
											line-height: 32px;
											text-align: center;
											vertical-align: middle;
											font-size: 18px;

											color: #fff;
										}
									}
								}

							} // .share-options

							button {

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

								.highlight {
									z-index: 10;
								}

								figure { 

									@extend .absolute;	
									z-index: 1;	

									svg rect, path, polygon {
										fill: #fff !important;
									}						
								}
								
								figure.video-play-group {

									top: 100px;
									left: 90px;
									width: 104px;
									height: 86px;
									opacity: 0;

									figure.video-play-icon { 
										top: 24px;
										left: 42px;
										width: 21px;
										height: 35px;
									}

									figure.video-ring-icon { 
										width: 104px;
										height: 86px;
									}
								}

								figure.quote {

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

									figure.top-quote { 

										top: 20px;
										left: 17px;
										width: 17px;
										height: 13px;
									}

									figure.bottom-quote { 

										top: 255px;
										left: 253px;
										width: 17px;
										height: 13px;
									}

									figcaption {

										@extend .absolute;
										width: 100%;
										z-index: 2;

										@include play;

										color: #fff;
										font-size: 18px;
										letter-spacing: 0.07em;

										h2 { 
											@include play-bold;
											font-size: 24px;
										}
									}
								}
								
								figure.item-bg { 

									width: inherit;
									height: inherit;
									z-index: 0;

									// red gradient

									background: #ab1f24; /* Old browsers */
									background: -moz-linear-gradient(top, #ab1f24 0%, #b03438 100%); /* FF3.6+ */
									background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ab1f24), color-stop(100%,#b03438)); /* Chrome,Safari4+ */
									background: -webkit-linear-gradient(top, #ab1f24 0%,#b03438 100%); /* Chrome10+,Safari5.1+ */
									background: -o-linear-gradient(top, #ab1f24 0%,#b03438 100%); /* Opera 11.10+ */
									background: -ms-linear-gradient(top, #ab1f24 0%,#b03438 100%); /* IE10+ */
									background: linear-gradient(to bottom, #ab1f24 0%,#b03438 100%); /* W3C */
									filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ab1f24', endColorstr='#b03438',GradientType=0 ); /* IE6-9 */
								}
								
								figure.thumb, figure.animated { 

									width: inherit;
									height: inherit;
									z-index: 0;

									img {
										width: inherit;
										height: auto;
									}
								}

								figure.animated {
									z-index: 1;
								}
							}
						}

					}
				}

			} // #grid-container

			.legal {

				top: 800px;
				right: 0px;
				width: 300px;
				margin: 0 auto;
				text-align: center;
				z-index: 1;

				figcaption {
					
					display: block;
					text-align: center;

					&.legal-text {
						position: relative;
						width: inherit;	
					}

					&.espagnol { 

						position: relative;
						width: inherit;	

						@include roboto-condensed;
						font-size: 14px;
						margin-top: 0px;
					}
				}
			}

		} // .bottom-content

	}

}

/* HOME PAGE UI LAYER ELEMENTS ------------------------------------------------------- */

#ui-container {
	
	#home-left-widgets {
		
		@extend .absolute;

		.promos-widget {

		}

		.zip-code-ticket-widget {

		}

		.countdown-clock-widget {

		}
		
	}
}