#SoundtrackPageView {

	opacity: 0;
	overflow: hidden;

	canvas {
		@extend .absolute;
	}
	
	> div {

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

		canvas.overlay {
			opacity: 0;
		}

		.centered { 

			@extend .absolute;
			width: 990px;
			height: 560px;
			top: 150px;
			left: 0px;
			right: 0px;

			.left {
				
				@extend .absolute;	
				width: 315px;

				figure.product-thumb-outline {
					
					@extend .absolute;
		
					width: 312px;
					height: 266px;
					z-index: 2;
				}		

				ul.products {

					@extend .absolute;
					width: inherit;
					z-index: 3;

					li.product {

						@extend .absolute;
						width: inherit;
						text-align: center;

						button.album-thumb {

							@extend .relative;
							margin: 8px 0 0 -2px;
							width: 290px;
							height: 250px;
							overflow: hidden !important;

							figure.thumb {
								@extend .absolute;
								width: inherit;
								height: inherit;
							}
						} // button.album-thumb

						div.album-description {

							@extend .relative;
							margin-top: 90px;
							width: inherit;
							text-align: center;
							padding: 0px 12px;

							header {

								@include roboto-condensed-bold;
								font-size: 14px;
								text-transform: uppercase;
								color: #fff;
								margin-bottom: 20px;
								letter-spacing: 0.08em;
							
								-webkit-text-stroke: 0.0px;
							}

							div.description {

								@include roboto;
								font-size: 14px;
								text-transform: none;
								color: #fff;
								margin-bottom: 31px;
								line-height: 16px;
								letter-spacing: 0.02em;

								-webkit-text-stroke: 0.0px;
							}
						} // div.album-description

						button.buy-now {

							@extend .inline-block;
							border: 2px solid #fff;
							height: 45px;
							padding: 0 50px;
							background: rgba(255,255,255,0);
							color: #fff;

							span {
								@include play-bold;
								font-size: 15px;
								text-transform: uppercase;
								text-align: center;
								line-height: 40px;
								vertical-align: middle;
								letter-spacing: 0.06em;
							}

						} // button.buy-now

					} // li.product

				} // ul.products

				.left-right-buttons {

					@extend .absolute;

					top: 286px;
					left: 0;
					right: 0;
					margin: 0 auto;
					opacity: 0;
					z-index: 20;

					width: 101px;
					height: 45px;

					cursor: pointer;

					svg * { fill: #fff; }
					svg { overflow: visible !important; }

					.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;
						}
					}

				} // .left-right-buttons

			} // .left

			.right {
				
				@extend .absolute;
				left: 410px;
				width: 580px;

				div#page-title {

					@extend .relative;
					width: inherit;
					z-index: 2;
					text-align: center;
					margin-bottom: 40px;
					float: left;

					header {
						
						@extend .relative;
						height: 43px;
						@include play-bold;
						font-size: 28px;
						text-transform: uppercase;
						white-space: nowrap;
						color: #fff;
					}

					figure {

						@extend .relative;
						width: 6px;
						height: 18px;
						margin: 0 auto;

						svg * { fill: #fff; }
					}
				} // #page-title

				div.tracks {

					@extend .relative;
					width: inherit;
					margin-bottom: 20px;
					float: left;

					ul.track-list {
						
						@extend .relative;
						width: 50%;
						float: left;

						li.track {
							
							@extend .relative;
							width: 100%;
							float: left;
							padding: 0 10px 12px 0;

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

								-webkit-text-stroke: 0.0px;
							}

						}	
					}
				}

				div.note {

					@extend .relative;
					width: inherit;
					text-align: center;
					float: left;

					span {
						@include roboto-condensed;
						line-height: 20px;
						font-size: 14px;
						color: #fff;

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

			} // div.right

		}

		.page-bg-container {

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

			img.bg {

				@extend .absolute;

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