#main-nav {

	@extend .absolute;
	overflow: hidden;

	#close-button-container {
		position: absolute;
		top: 17px;
	}

	nav.main-nav-buttons {

		@extend .absolute;

		button {
			
			position: absolute;
			width: 200px;
			height: 178px;
			overflow: visible;

			.hexagon {
				@extend .absolute;
				width: 200px;
				height: 178px;
			}
			.fill {
				
				@extend .absolute;
				width: inherit;
				height: inherit;

				opacity: 0;
				polygon {
					fill: #fff;
				}
			}
			p {
				@include play;	
				color: #fff;
				text-transform: uppercase;
				position: absolute;
				left: 0;
				right: 0;
				margin: auto auto;
				font-size: 16px;
				font-weight: bold;
				letter-spacing: 1px;
			}
			.text {
				top: 77px;
			}
			.comingsoon {
				position: absolute;
				top: 70px;
				line-height: 16px;
				opacity: 0;
			}
			.bg {
				background-size: contain;
				background-repeat: no-repeat;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				opacity: 0;
			}
		}
		.button-1, .button-5, .button-8 {
			top: 176px;
		}
		.button-2, .button-6 {
			top: 88px;
		}
		.button-3, .button-7 {
			top: 264px;
		}
		.button-2, .button-3 {
			left: 148px;
		}
		.button-4, .button-5 {
			left: 296px;
		}
		.button-6, .button-7 {
			left: 444px;
		}
		.button-8 {
			left: 592px;
		}
	}

	.shapes-container {
		@extend .absolute;
	}

	.promos-container {

		@extend .absolute;
		top: 0px;
		left: 65px;

		.promos-widget {
			top: 0px;
			left: 0px;
		}
	}

	.bottom-left {
		
		@extend .absolute;
		left: 65px;

		img.logo {
			@extend .absolute;
		}

		figure.in3d {

			@extend .absolute;
			top: 167px;
			left: 59px;
			width: 176px;
			height: 27px;
		}
	}

	.bottom-left {
		@extend .absolute;
	}

	.baymax {
		position: absolute;
		top: 0px;
		right: 0px;

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

		figure.ss {
			@extend .absolute;
			top: 37px;
			left: 212px;
			z-index: 2;
		}
	}

	img.bg {

		@extend .absolute;
	}
}