#GamesPageView {

	opacity: 0;
	overflow: hidden;

	canvas {
		@extend .absolute;
	}
	
	> div {

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

		canvas.overlay {
			opacity: 0;
		}

		.left {
			
			@extend .absolute;
			pointer-events: none;
			z-index: 20;

			img.character {
				@extend .absolute;
				z-index: 1;
			}
		}

		.right {
			
			@extend .absolute;
			z-index: 10;

			div.centered {

				@extend .absolute;
				top: 230px;
				left: 0px;
				right: 0px;
				margin: 0 auto;
				width: 445px;

				div#page-title {

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

					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

				.left-right-buttons {

					@extend .absolute;

					top: 364px;
					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;
						}
					}

				} // .gallery-buttons

				figure.thumb-outline {
					
					@extend .absolute;

					top: 81px;		
					width: 445px;
					height: 266px;
					z-index: 2;
				}

				ul.games {

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

					li.game {

						button.thumb {
							
							@extend .absolute;						
							top: 14px;
							left: 11px;
							width: 423px;
							height: 250px;
							overflow: hidden !important;

							.thumb-contents {

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

								figure {
									@extend .absolute;
								}

								figure.thumbnail {	
									width: inherit;
									height: inherit;
									z-index: 1;
								}

								figure.rollover {

									top: 250px - 60px;
									width: inherit;
									height: 60px;
									background: #c7191f;
									z-index: 2;
									opacity: 0;

									figcaption {

										@include roboto-condensed;
										font-size: 16px;
										color: #fff;
										line-height: 60px;
										vertical-align: middle;
										text-transform: uppercase;
										letter-spacing: 0.05em;
										opacity: 0;
									}
								}

							} // .thumb-contents

						} // button.thumb

						div.description {

							@extend .absolute;
							top: 354px;
							width: inherit;
							padding: 0 10px;
							z-index: 3;

							header {

								@include roboto-condensed-bold;
								-webkit-text-stroke: 0.1px;
								font-size: 16px;
								color: #fff;
								text-transform: uppercase;
								text-align: center;
								margin-bottom: 16px;
								letter-spacing: 0.08em;
							}

							.description-text {
								@include roboto;
								-webkit-text-stroke: 0.0px;
								font-size: 14px;
								color: #fff;
								text-transform: none;
								letter-spacing: 0.05em;
								line-height: 17px;
							}
						} // div.description

					}

				} // ul.games

			} // div.centered
		} // div.right

		.page-bg-container {

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

			img.bg {

				@extend .absolute;

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