/* page.scss */

.page-container {
	@include change-height($page-container-height);
	@include change-overflow($page-container-overflow);
	width: auto;
	max-height: 100%;
	position: relative;
	
	
	@media (max-height: 989px){
		padding: 0 0 52px;
		height: auto !important;
		overflow: visible !important;
	}
	
	@include change-overflow($page-container-overflow);
	
	.main-container {
		@include change-display($main-container-display);
		@include change-height($main-container-height);
		width: 100%;
		overflow: auto;
		
		.main-inner-col {
			@include change-display($main-inner-col-display);
			@include change-width($main-inner-col-width);
			text-align: left;
			vertical-align: middle;
			border-bottom: 1px solid $silver;
			
			
			.main-copy {
				@include change-padding($main-copy-padding);
				display: block;
				
				
				h1 {
					@include font-size($h1-font-size);
					@include line-height($h1-line-height);
					@include change-margin($h1-margin);
					@include change-max-width($h1-max-width);
					font-weight: 900;
					color: $alizarin;
					
					.registered {
						font-size: 20px;
						font-weight: 900;
						line-height: 80px;
					}
				}
				
				p {
					@include change-margin($p-margin);
					@include change-max-width($p-max-width);
					@include font-size($p-font-size);
					@include line-height($p-line-height);
					color: $black;
					
					&.maintenance {
						display: block;
						max-width: 340px;
						font-size: 15px;
						line-height: 20px;
						font-weight: 800;
						text-transform: uppercase;
						letter-spacing: 1.2px;	
						position: relative;
						padding: 0 0 0 80px;
						
						img {
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							margin: auto;
						}
					}
					
					strong {
						font-weight: 700;
					}
					
					a {
						font-weight: 900;
						color: $alizarin;
					}
				}
			} // .main-copy
			
			&.header {
				background-image: url('https://maxons.com/images/header.png');
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}
			
			&.mobile-header {
				@include change-display($mobile-header-display);
				@include change-height($mobile-header-height);
				display: block;
				width: 100%;
				background-image: url('https://maxons.com/images/header.png');
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}
		}	// .main-inner-col
	} // .main-container
	
	.contact-container {
		@include change-padding($contact-container-padding);
		@include change-height($contact-container-height);
		@include change-margin($contact-container-margin);
		display: block;
		width: auto;
		
		.contact-outer-container {
			@include change-display($contact-outer-container-display);
			width: 100%;
			height: 100%;
			
			.contact-inner-left {
				@include change-width($contact-inner-left-width);
				@include change-display($contact-inner-left-display);
				@include change-margin($contact-inner-left-margin);
				@include change-padding($contact-inner-left-padding);
				@include change-text-align($contact-inner-left-text-align);
				vertical-align: middle;
				
				a {
					img {
						
					}
				}
			}
			
			.contact-inner-right {
				@include change-display($contact-inner-right-display);
				@include change-width($contact-inner-right-width);
				@include change-margin($contact-inner-right-margin);
				text-align: center;
				vertical-align: middle;
				
				h3 {
					@include change-padding($h3-padding);
					color: $black;
					font-size: 12px;
					line-height: 18px;
					letter-spacing: 1.2px;
					font-weight: 900;
					margin: 0;
					display: block;
					text-align: left;
				}
				
				.contact-locations {
					@include change-display($contact-locations-display);
					@include change-text-align($contact-location-text-align);
					width: 100%;
					margin: auto;
					
					.contact-location-item {
						@include change-width($contact-location-item-width);
						@include change-display($contact-location-item-display);
						@include change-margin($contact-location-item-margin);
						color: $silver;
						font-weight: 600;
						font-size: 14px;
						line-height: 20px;
						text-align: left;
						padding: 0 20px 0 0;
						
						strong {
							color: $alizarin;
							font-size: 12px;
							line-height: 18px;
							letter-spacing: 1.2px;
							font-weight: 900;
							text-transform: uppercase;
							display: block;
							width: auto;
						}
					} // .contact-location-item
				} // .contact-locations
			} // .contact-inner-right
		} // .contact-outer-container
	} // .contact-container
	
	.footer-container {
		position: fixed;
		bottom: 0px;
		left: 0;
		display: table;
		width: 100%;
		height: 52px;
		background: $alizarin;
		
		.footer-inner {
			display: table-cell;
			color: $white;
			text-align: center;
			vertical-align: middle;
			font-weight: 900;
			letter-spacing: 1.4px;
			font-size: 16px;
			
			a {
				color: $white;
				font-weight: 900;
				
				&:hover {
					color: $white;
				}
			}
		}
		
	}
}