/*
 * Header for site
 *
 */
header.site {
	@include transition(all .15s ease);
	top: 0;
	left: 0;
	background: $flat-gray-light;
	color: $flat-gray-light;
	width: 100%;
	z-index: 9999;

	/*
	 *	Mobile Link On Top
	 *
	 */
	.mobile-phone-link {
		@include transition(all .15s ease);
		display: block;
		background: $flat-blue;
		color: white;
		font-size: .75em;
		line-height: 1.4;
		text-align: center;
		padding: 1em;

		@include media($medium-screen) {
			display: none;
		}

		&:active,
		&:hover {
			background: $flat-green;
		}
	}

	/*
	 *	Top Tagline
	 *
	 */
	.top-tagline {
		background: #050505;
		color: #888;
		font-size: .85em;
		font-style: italic;
		line-height: 40px;
		text-align: center;
		margin-bottom: 0;
	}

	/*
	 *	Logo & Phone
	 *
	 */
	.logo-and-phone {
		background: #2f2f2f;
		@include linear-gradient(#2f2f2f, #000);
		color: #828282;
		line-height: 1;
		border-top: 1px solid #3f3f3f;
		border-bottom: 1px solid #3f3f3f;
		// font-family: 'Oxygen', sans-serif;
		font-family: $accent-font-family;

		img {
			display: block;
			float: left;
			padding: .5em;
		}

		.emblem {
			display: none;
			background: #2f2f2f;
			border-left: 1px solid #3f3f3f; 
			border-right: 1px solid #3f3f3f; 

			@include media($medium-screen) {
				display: block;
			}
		}

		.text {
			display: block;
			float: none;
			margin: 0 auto;

			@include media($medium-screen) {
				float: left;
			}
		}

		a.telephone {
			display: none;
			float: right;
			color: #ccc;
			font-size: 1.6em;
			text-align: right;
			text-shadow: 1px 1px 4px #000; 
			margin-top: 20px;

			span {
				display: block;
				font-size: .5em;
			}

			@include media($medium-screen) {
				display: block;
			}

			@include media($large-screen) {
				font-size: 1.8em;
			}
		}
	}

	/*
	 *	Navigation
	 *
	 */
	nav {
		background: #2f2f2f;
		@include linear-gradient(#191919, #0d0d0d);
		font-family: $accent-font-family;
		border-bottom: 4px solid #fff;

		li {
			float: left;
			display: none;
			text-transform: uppercase;
			line-height: 40px;
			padding: 0 1em;

			@include media($medium-screen) {
				display: block;
			}

			a {
				@include transition(all .5s ease);
				color: #656565;

				&:hover {
					color: #63c9e0;
				}
			}

			&.current-menu-item {
				a {
					color: #63c9e0;
				}
			}
		}

		/*
		 *	MENU Trigger
		 */
		a.sliding-menu-trigger {
			cursor: pointer;
			display: block;
			float: right;
			color: $flat-gray-dark;
			font-size: 1.5em;
			text-transform: uppercase;
			margin-left: 10px;

			i {
				color: lighten($flat-gray, 5);
			}

			&:hover { 
				color: $flat-yellow;
				
				i {
					color: $flat-yellow;
				}
			}

			@include media($medium-screen) {
				display: none;
			}
		}
	}

	/*
	 *	MENU Trigger
	 */
	a.sliding-menu-trigger {
		cursor: pointer;
		display: block;
		float: right;
		color: $flat-gray-dark;
		font-size: 1.5em;
		text-transform: uppercase;
		margin-left: 10px;

		i {
			color: lighten($flat-gray, 5);
		}

		&:hover { 
			color: $flat-yellow;
			
			i {
				color: $flat-yellow;
			}
		}

		@include media($large-screen) {
			display: none;
		}
	}
}

/*
 *	Scroll Off Top
 *
 */
header.site.beyond-mark-01 {

	.logo-and-links {
		line-height: 50px;

		// Shrink Logo
		.company-logo img {
			height: 50px;
			padding: 7px 0;
		}

		// Shrink Buttons
		button {
			padding: .45em .5em;
		}

		// Change MENU Color
		.sliding-menu-trigger {
			color: $flat-yellow;

			i {
				color: $flat-yellow;
			}
		}
	}
}

/*
 *	Hide Sub Header
 *
 */
header.site.beyond-mark-02 .login-links {
	line-height: 0;
	padding: 0 1em;
}