#AboutPageView {

	opacity: 0;
	overflow: hidden;

	canvas {
		@extend .absolute;
	}
	
	> div {

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

		canvas.overlay {
			opacity: 0;
		}

		.story {

			@extend .absolute;
			z-index: 10;

			.text-content {

				@extend .absolute;
				width: 425px;
				height: 355px;

				.scrollbar {

					@extend .absolute;
					top: 98px;
					left: 365px;
					
					.handle { 

						@extend .absolute;				
						width: 35px;
						height: 31px;

						svg * { fill: #fff; }
					}

					.track {
						
						@extend .absolute;
						top: 12px - 16px;
						left: 15px;
						height: 218px + 32px;

						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: 218px + 16px;
						}

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

				#story-content {

					@extend .absolute;
					z-index: 1;

					width: 365px;
					color: #fff;

					header {

						position: relative;
						width: inherit;

						@include play-bold; 

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

					a.production-notes {

						position: relative;
						width: inherit;

						cursor: pointer;

						figcaption {
							
							float: left;

							@include roboto-condensed;
							font-size: 16px;
							color: #fff;
							text-transform: uppercase;
							letter-spacing: 0.08em;
							padding-bottom: 0px;
							margin: 20px 0px 22px 0px;
							border-bottom: 1px solid rgba(255,255,255,1);

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

							&:hover {
								border-bottom: 1px solid rgba(255,255,255,0);
							}
						}
					}

					.article-container {

						position: relative;
						width: inherit;
						height: 245px;
						overflow: hidden;

						article {

							position: relative;
							width: inherit;

							@include roboto-condensed;

							font-size: 14px;
							line-height: 18px;
							letter-spacing: 0.05em;
							text-transform: none;

							-webkit-text-stroke: 0.0px !important;

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

		} // .story

		img.character {

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

			pointer-events: none;
		}

		.about-bg-container {

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

			img.bg {

				@extend .absolute;

				width: inherit;
				height: inherit;
			}
		}
	}
}