// styles

#AboutView {

	// vars

	$blue: #247893;
	$darkBlue: #135460;
	$text: #8e979f;

	//

	width: 100%;
	height: 100%;
	overflow: hidden;

	.about-background {
		position: absolute;
		top: 0px; // $headerHeight;
		left: 0;
		z-index: -9999;

		.about-background-img {
			opacity: 0;
		}
	}

	.about-left {

		position: absolute;
		top: 0px;
		left: 250px;

		@include denise;

		.about-header {

			position: absolute;
			top: 90px;
			width: 135px;
			letter-spacing: 1px;

			.about-title {
				
				@include trajan;

				font-size: 32px;
				position: absolute;
				top: 0px;
				right: 0px;
				white-space: nowrap;
			}

			.about-title-line {
				background: #941821;
				position: absolute;
				width: 40px;
				height: 3px;
				top: 70px;
				left: 22px;
			}
		}

		.about-nav {

			position: absolute;
			top: 140px;
			left: 0px;

			margin-left: -36px;

			.about-nav-item {
				
				position: relative;
				width: 165px;
				height: 30px;

				font-size: 22px;
				-webkit-font-smoothing: antialiased;

				color: $white;
				cursor: pointer;
				text-align: right;
				letter-spacing: 0.05em;
				line-height: 30px;

				&:not(:last-child) {
					margin-right: 1px;
				}

				.selected a {
					color: $white;
				}

				a { 
					color: $darkBlue;

					-webkit-transition: color 200ms ease-in-out;
					  -moz-transition: color 200ms ease-in-out;
					  -o-transition: color 200ms ease-in-out;
					  transition: color 200ms ease-in-out;
				}

				.about-nav-arrow {

					@include icons;
					font-size: 15px;
					color: #fff;
					position: absolute;
					margin-right: -25px;
					right: 0px;
					top: 3px;
					opacity: 0;
				}

				.about-nav-text {

					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					margin-left: 0px;

					.tickets, .coming-soon { 
						position: absolute;
						top: 0px;
						right: 0px;
						width: 100%;
						height: 30px;
						text-transform: uppercase;
					}

					.coming-soon {
						display: none;
						color: $white;
					}
				}

				.about-nav-background {
					background: url($rootDir + 'assets/img/about/subnav_bg.png') left top no-repeat;
					height: 30px;
					width: 165px;
					position: absolute;
					top: 0;
					left: 23px;
					z-index: -1;
					opacity: 0;
				}
			}
		}

		.about-nav-border {
			clear: both;
			background: #333333;
			height: 530px;
			width: 1px;
			position: absolute;
			left: 150px;
			z-index: -10;
		}

		.about-subnav-arrowTop, .about-subnav-arrowBottom {
			@include icons;
			font-size: 12px;
			border-radius: 50%;
			width: 22px;
			height: 22px; 
			padding: 4px 7px;
			background: #3b494d;
			position: absolute;
			left: 110px;
			cursor: pointer;
			opacity: 0;
		}

		.about-subnav-arrowTop {
			top: 195px;
		}

		.about-subnav-arrowBottom {
			top: 440px;
		}

		.about-subnav-topbar, .about-subnav-bottombar {
			background: #374448;
			height: 1px;
			width: 142px;
			position: absolute;
			opacity: 0;
			left: -4px;
		}

		.about-subnav-topbar {
			top: 225px;
		}

		.about-subnav {

			float: right;
			position: absolute;
			top: 235px;
			left: -38px;

			.about-subnav-item {

				font-size: 14px;
				color: $blue;
				cursor: pointer;
				margin-bottom: 5px;
				position: relative;
				text-align: right;
				letter-spacing: 1px;
				width: 165px;

				&.selected {
					color: $white;
				}

				&:not(:last-child) {
					margin-right: 1px;
				}

				.about-subnav-text {
					margin-left: 20px;
					padding-top: 2px;
				}

				.about-subnav-background {
					background: url($rootDir + 'assets/img/about/subnav_bg.png') left top no-repeat;
					height: 30px;
					width: 4px;
					position: absolute;
					top: 0;
					left: 172px;
					z-index: -1;
				}
			}
		}
	}

	.about-content {

		position: absolute;
		top: 80px;
		left: 410px;
		@include denise;
		letter-spacing: 1px;

		#about-wrapper {
			/*height: 100px;*/
		}
		
		.about-story-header {

			position: absolute;
			top: 37px;

			.about-download {
				position: absolute;
				top: 3px;
				left: 141px;
				color: #3b494d;
				font-size: 12px;
				letter-spacing: 2px;
				white-space: nowrap;

				.about-production { 
					position: absolute;
					top: 9px;
					left: 63px;
					//left: 80px;
					width: 150px;
					font-size: 15px;
					letter-spacing: 1px;

					.about-download-arrow {
						@include icons;
						font-size: 12px;
						float: left;
						background: #3B494D;
						background: #941821;
						width: 16px;
						height: 20px;
						padding: 3px 5px;
						//opacity: 0.6;
					}

					.about-download-text {
						position: absolute;
						color: #e7f1ee;
						top: 0;
						left: 0;
						top: 2px;
						left: 20px;
					}
				}
			}
		}

		.about-content-header {
			position: absolute;
			top: 10px;
			width: 500px;
		}

		.about-content-title {

			@include trajan; 

			font-size: 30px;
			color: $white;
			position: absolute;
			white-space: nowrap;
			top: 0;
			left: 0;
		}

		.about-content-text {
			/*position: absolute;*/

			@include denise;
			
			position:relative; 
			width: 370px; 
			height: 360px; 
			margin-top: 90px;

			color: $text;
			font-size: 18px;
			letter-spacing: 0.03em;
			line-height: 21px;

			overflow: auto;

			p {
				margin: 0 0 14px 0;
				padding: 0;
			}
		}
	}


	.about-quote-text {

		position: absolute;
		right: 100px;
		bottom: 120px;
		width: 36%;

		@include trajan;

		font-size: 18px;
		line-height: 22px;
		text-align: right;
		color: $text;
		opacity: 0.7;

		.quoted-by {
			
			position: relative;

			@include denise;
			font-size: 13px;
			line-height: 21px;
			padding: 3px 0 0 4px;
			vertical-align: middle;
			letter-spacing: 0.08em;
			white-space: nowrap;
			-webkit-font-smoothing: antialiased;
		}
	}

	.about-pendant {

		position: absolute;
		top: 80px;
		left: 353px;
		width: 55px;
		height: 55px;

		background: url($rootDir + 'assets/img/emblem.svg') no-repeat center center;
		background-size: contain;

		opacity: 0.2;
	}

	.disabled {
		pointer-events: none;
		a {
			color: $darkBlue;
		}
	}
}