#CharactersPageView {

	opacity: 0;
	overflow: hidden;

	> div {

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

		#character-landing-container {

			@extend .absolute;
			top: 0px;
			left: 0px;
			width: inherit;
			height: inherit;
			z-index: 10;

			.characters-ui {

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

				> figcaption {

					@extend .absolute;
					width: inherit;

					@include play-bold;

					top: 185px;
					font-size: 30px;
					color: #fff;
					text-transform: uppercase;
					text-align: center;
					letter-spacing: 0.8em;
				}

				ul.character-names {
					
					@extend .absolute;
					width: 100%;
					top: auto;
					white-space: nowrap;
					text-align: center;

					pointer-events: none;

					li.character-name {

						position: relative;
						display: inline-block;
						width: 138px;
						height: 120px;
						margin: 0 25px;

						pointer-events: none;
						white-space: nowrap;

						button {

							width: inherit;
							height: inherit;
							background: url('../assets/img/blank.png');

							figure.character-icon {

								@extend .absolute;

								top: 0px;
								left: 0px;
								right: 0px;
								width: 47px;
								height: 47px;

								margin: 0 auto;

								svg * { fill: #fff; }
							}

							figure.icon-line { 

								@extend .absolute;
								top: 58px;
								left: 0px;
								right: 0px;
								width: 6px;
								height: 29px;

								margin: 0 auto;

								svg * { fill: #fff; }
							}

							figcaption {
								
								@extend .absolute;
								top: 96px;

								@include play-bold;
								width: 100%;
								font-size: 14px;
								text-transform: uppercase;
								color: #fff;
								letter-spacing: 0.1em;
								line-height: 18px;
							}
						}
					}
				}
			}

			#characters-canvas {
				@extend .absolute;
				z-index: 1;
			}

			.fallback {
				@extend .absolute;
				z-index: 2;
			}

		}

		#character-detail-container {

			@extend .absolute;
			z-index: 100;

			.characters-detail-content {

				@extend .absolute;

				.content-area {

					@extend .absolute;
					top: 390px;
					left: 0px;
					width: 1140px;
					z-index: 10;

					.text-content {

						@extend .absolute;
						left: 575px;
						width: 460px;
						height: 360px;

						.scrollbar {

							@extend .absolute;
							top: 55px;
							left: 420px;
							
							.handle { 

								@extend .absolute;				
								width: 35px;
								height: 31px;
								background: url('../assets/img/blank.png');
								z-index: 10;

								svg * { fill: #fff; }
							}

							.track {
								
								@extend .absolute;
								top: 12px - 16px;
								left: 15px;
								height: 192px + 32px;
								z-index: 2;

								figure { @extend .absolute; }

								figure.top-circle, figure.bottom-circle {
									
									width: 6px;
									height: 6px;

									svg * { fill: #fff; }
								}

								figure.top-circle {
									top: 16px;
								}

								figure.bottom-circle {
									top: 192px + 16px;
								}

								figure.track-rect {
									top: 3px + 16px;
									left: 2px;
									width: 2px;
									height: 189px;
									background: #fff;
								}
							}
						} // .scrollbar

						#character-content {

							@extend .absolute;
							z-index: 1;

							width: 400px;
							color: #fff;

							header {

								position: relative;
								width: inherit;

								@include play-bold; 

								font-size: 30px;
								letter-spacing: 0.1em;
								text-transform: uppercase;
							}

							.article-container {

								position: relative;
								width: inherit;
								height: 192px;
								margin-top: 25px;
								overflow: hidden;

								article {

									position: relative;
									width: inherit;

									@include roboto-condensed;

									font-size: 14px;
									letter-spacing: 0.06em;
									text-transform: none;

									-webkit-text-stroke: 0.0px;

									p { margin-bottom: 20px; }
								}
							}
						} // #character-content

						#download-options {

							@extend .absolute;
							top: 275px;

							li {

								position: relative;
								left: 0px;
								@include roboto-condensed;
								font-size: 14px;
								text-transform: uppercase;
								line-height: 14px;
								white-space: nowrap;
								margin-bottom: 10px;

								a { 

									color: #fff;

									figure {
										@extend .absolute;
										width: 22px;
										height: 14px;
										overflow: hidden;

										svg * { fill:#fff; }
									}

									figcaption { 
										padding-left: 30px;
									}
								}
							}

						} // #download-options

						#character-logos {

							@extend .absolute;
							top: 340px;
							white-space: nowrap;

							li.character-icon-container {
								
								position: relative;
								display: inline-block;
								margin-right: 12px;
								width: 60px;
								height: 60px;

								button { 

									position: relative;
									width: inherit;
									height: inherit;
									background: url('../assets/img/blank.png');

									.character-hover {
										position: absolute;
										top: 0px;
										left: 0px;
										opacity: 0;
										svg {
											width: 60px;
											height: 60px;
										}
									}
									.character-icon {
										position: absolute;
										top: 13px;
										left: 13px;
										width: 34px;
										height: 34px;
									}
								}
								/*svg * { fill: #fff; }*/
							}
						}

					}

				}

				img.bg {

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

					&.bg-normal { z-index: -2; }
					&.bg-hero { 
						z-index: -1;  
						opacity: 0;
					}
				}

				img.character {
					@extend .absolute;
					top: 0px;
					left: 0px;
					z-index: 1;
				}

				.character-hero {
					opacity: 0;
					visibility: hidden;
				}

				.buttons {

					z-index: 10;
					position: absolute;
					top: 0px;
					left: 0px;

					.circle-graphics {

						position: absolute;
						width: 10px;
						height: 10px;

						svg {
							width: inherit;
							height: inherit;
						}
					}

					.line-graphics {
						position: absolute;
						margin-top: 4px;
						svg {
							width: 58px;
							height: 2px;
						}
					}

					.change-container {
						position: absolute;
						.line-graphics {
							margin-left: -60px;
							svg {
								width: 58px;
								height: 2px;

								#icon {
									position: absolute;
								}
							}
						}
						.change-button {
							position: absolute;
							width: 50px;
							height: 50px;
							margin-left: -113px;
							margin-top: -23px;
						}
					}

					.play-container {
						
						@extend .absolute;
						top: 150px;
						left: 100px;

						.line-graphics {

							@extend .absolute;
							margin-left: 12px;

							svg {
								width: 58px;
								height: 2px;

								#icon {
									width: 10px;
									height: 17px;
									overflow: hidden;
								}
							}
						}

						.play-button {

							@extend .absolute;
							width: 56px;
							height: 56px;
							margin-left: 67px;
							margin-top: -23px;
						}
					}

					button {
						
						cursor: pointer;
						background: url('../assets/img/blank.png');

						figure {

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

							svg {
								width: inherit;
								height: inherit;
							}
						}

						.pulse {
							opacity: 0;
						}
					}
				}

				img.bg {

					@extend .absolute;
					z-index: -1;
				}

			} // .characters-detail-content
		}

		#character-detail-bg {
			
			@extend .absolute;
			z-index: 99;

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

		img.bg {

			@extend .absolute;
			z-index: -1;
		}
	}
}