.site-header {

	.container {
		display: flex;
		flex: 1;
		flex-wrap: wrap;
		justify-content: flex-end;
		// align-items: center;

		.toggle-btn {
			display: none;
		}//.toggle-btn
	}//.container

	.site-branding {
		display: flex;
		flex: auto;
		flex-wrap: wrap;
		align-items: center;
		padding: 10px 0;

		&:not(.text-image) {
			flex-direction: column;
			align-items: flex-start;
		}

		&.text-image {
			
			.custom-logo-link {
				width: 60px;
			}//.custom-logo-link

			.site-title-wrap {
				padding-left: 15px;
			}//.site-title-wrap

		}//&.text-image

		.site-title {
			margin: 0;
			font-size: 2em;
			font-family: $font_secondary;
			// font-weight: 400;
			line-height: 1.3;

			a {
				color: $primary_color;
			}
		}//.site-title

		.site-description {
			margin: 0;
			font-size: 0.8888em;
			color: #999;
			line-height: 1.5em;
		}//.site-description
	}//.site-branding

	.nav-wrap {
		display: flex;
		flex: auto;
		justify-content: flex-end;
		flex-wrap: wrap;
		// align-items: flex-start;
	}//.nav-wrap

	.sticky-header {
		display: none;
	}

}//.site-header

.banner-disabled {
	
	.site-header {
		box-shadow: 0 2px 5px rgba($black_color, 0.1);
	}//.site-header

}//.banner-disabled

@include media(sm) {
	.site-header {

		.nav-wrap {
			order: 3;
			flex: initial;
		}//.nav-wrap

		.site-branding {
			padding-right: 15px;
			flex: 1;
		}//.site-branding

		.container {
			.toggle-btn-wrap {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.toggle-btn {
				// order: 2;
				display: inline-block;
				width: 20px;
				height: 20px;
				position: relative;
				cursor: pointer;
				background: none;
				border: none;
				color: inherit;
				@include box-shadow(none);
				@include border-radius(0);
				padding: 0;

				.toggle-bar {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background: $black_color;
					width: 20px;
					height: 2px;
					margin: auto;
					@include transition(all ease 0.35s);

					&:first-child {
						top: -12px;
					}

					&:last-child {
						top: 0;
						bottom: -12px;
					}
				}

				&:hover .toggle-bar {
					background: $primary_color;
				}
			}//.menu-toggle-btn
		}//.container

	}//.site-header
	
}//@include media(sm)

@include media(xs) {
	.site-header {

		.site-branding {

			.site-title {
				font-family: $font_primary;
				font-size: 1em;
			}//.site-title
		}//.site-branding

	}//.site-header
}//@include media(xs)