.site-header {

	.site-branding {
		text-align: left;
	}

	.site-title {
		font-family: $heading-font;
		font-size: 2.5em;
		font-weight: 700;
		line-height: 1;
		margin: 0;
		padding: 0;

		a {
			text-decoration: none;
			color: $black-color;
			display: block;
			line-height: 1;

			&.custom-logo-link {
				padding: 0;
			}
		}
	}

	.site-description {
		margin: 0;
		padding: 0;
		font-size: 1em;
	}
}

body.search-open {

	.site-search {
		-webkit-transform: translateY(0) translate3d(0px, 0px, 0px);
		-moz-transform: translateY(0) translate3d(0px, 0px, 0px);
		transform: translateY(0) translate3d(0px, 0px, 0px);
	}
}

body.nav-open {
	overflow: hidden;

	.main-navigation {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

	.menu-toggle {

	}
}

/*--------------------------------------------------------------
# Header Default
--------------------------------------------------------------*/
.admin-bar .header-style-1 .site-header {
	top: 32px;
}

.header-default {
	.site-header {
		background: $black-color;
		width: 100%;
		position: fixed;
		height: 50px;
		line-height: 50px;
		top: 0;
		z-index: 2;

		&.has-fixed {
			position: fixed;
			height: 70px;
		}

		.header-inner {
			position: relative;
			padding: 0 ms(1);

			.header-left {
				float: left;
				width: 50px;
				height: 50px;
				line-height: 50px;
			}

			.site-branding {
				displays: inline-block;
				text-align: left;

				&:hover {
					opacity: 0.8;
				}

				img {
					display: block;
				}

				.site-title {
					float: left;

					a {
						color: $white-color;
					}
				}
				.site-description {
					color: $white-color;
					margin-left: 20px;
					float: left;
				}
			}

		}
	}
	
	.header-left {
		.menu-toggle,
		.menu-toggle-close {
			width: 50px;
			position: absolute;
			top: 0;
			left: 15px;
			@include em('font-size', 30);
			color: $white-color;
			cursor: pointer;
		}

	}

	.custom-logo {
		width: auto;
		height: 20px;
		@include em('margin-top', 14);
	}

	.main-navigation {
		-webkit-transition: all 0.35s ease;
		-ms-transition: all 0.35s ease;
		transition: all 0.35s ease;
		background: $black-color;
		position: fixed;
		height: 100%;
		width: 100%;
		max-width: 280px;
		left: 0;
		top: 0;
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%);
		z-index: 99999;

		.header-left {
			float: none;
			width: 50px;
    		height: 50px;
    		line-height: 50px;
		}

		.sub-arrow {
			display: block;
			color: #fff;
			position: absolute;
			right: 16px;
			top: 14px;
			cursor: pointer;
		}	

		ul {
			width: 100%;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		li {
			position: relative;
			text-align: center;
		}

		a {
			text-transform: uppercase;
			font-family: $heading-font;
			font-weight: 600;
			display: block;
			text-decoration: none;
			color: $white-color;
			height: 50px;
			line-height: 50px;
			padding: 0 30px;
		}

		li li a {
			height: auto;
			line-height: auto;
		}

		ul ul {
			display: none;
		}
	}



	.site-search {
		width: 100%;
		height: 100%;
		z-index: 1;
		position: fixed;
		z-index: 99;
		top: 0;
		background: $black-50;
		-webkit-transform: translateY(-100%) translate3d(0px, 0px, 0px);
		-moz-transform: translateY(-100%) translate3d(0px, 0px, 0px);
		transform: translateY(-100%) translate3d(0px, 0px, 0px);
		-webkit-transition: transform 0.3s ease 0s;
		-moz-transition: transform 0.3s ease 0s;
		transition: transform 0.3s ease 0s;

		input[type="search"] {
			color: $default-color;
		}

		.site-search-inner {
			width: 100%;
		}

		.search-inner {
			backface-visibility: hidden;
			padding: 0;
			z-index: 1;
		}

		.search-field {
			position: absolute;
			width: 96%;
			height: 100px;
			top: 20%;
			bottom: 50%;
			left: 2%;
			right: 2%;
			@include border-radius(0px);
			@include em('font-size', 30);
			text-align: center;

			&:focus {
				background: $input-bg-color;
			}

			@include placeholder-color($input-color);
		}

		.search-submit {
			display: none;
		}
			
	}

	.header-right {
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		z-index: 2;
		text-align: right;

		.search-toggle-open,
		.search-toggle-close {
			color: $white-color;
			cursor: pointer;
			@include em('font-size', 30);
			line-height: 1;
			position: fixed;
			right: 15px;
			top: 8px;
		}

		.search-toggle-open {
			@include single-transform(0deg);
		}

	}
}

/*--------------------------------------------------------------
# Header Style 2
--------------------------------------------------------------*/
.header-style-2 {
	
}

/*--------------------------------------------------------------
# Header Style 3
--------------------------------------------------------------*/
.header-style-3 {
	
}

/*--------------------------------------------------------------
# Header Style 4
--------------------------------------------------------------*/
.header-style-4 {
	
}

/*--------------------------------------------------------------
# Header Style 5
--------------------------------------------------------------*/
.header-style-5 {
	
}