.site-header {
	position: relative;
	border-bottom: 1px solid #f0ede5;
	background: #fff;
	margin-bottom: 50px;
	padding: 20px 0 0;
	width: 100%;
	display: flex;
	flex-flow: row;
	flex-wrap: row wrap;
	align-items: center;
	align-items: flex-end;
	justify-content: space-between;

	@media (min-width: $breakpoint-mobile) and (max-width: $breakpoint-medium) {
		display: block;
		text-align: center;

		// .right-branding {
		// 	text-align: center;
		// }
	}

	@media (max-width: $breakpoint-mobile) {
		margin-bottom: 5px;
		padding: 0;

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

.site-description {
	font-size: 12px;
	line-height: normal;
	text-transform: uppercase;
	letter-spacing: 3px;
	display: none;
}

.site-branding {
	font-family: $font-calibri;
	display: inline-block;
	justify-content: center;
	align-items: center;
	display: flex;

	@media (max-width: $breakpoint-small) {
		flex: 100%;
		width: 100%;
	}

	@media (max-width: $breakpoint-medium) {
		flex: 100%;
		width: 100%;
	}

	margin: 0;
	margin-bottom: 5px;

	.site-logo {
		width: 75%;
		display: inline-block;

		@media (max-width: $breakpoint-medium) {
			width: 100%;
			display: block;
			text-align: left;
		}

		.site-title {
			display: inline-block;
			margin-right: 10px;
			line-height: normal;
			margin-bottom: 8px;

			a {
				text-decoration: none;
				text-transform: uppercase;
				font-size: 24px;
			}

			@media (max-width: $breakpoint-medium) {
				margin: 0;
			}
		}
	}

	// Top searchbar
	.site-search {
		display: flex;
		align-items: center;
		margin-left: 5px;

		form {
			margin-left: 13px;
			width: 80%;
			display: inline-block;

			input {
				width: auto;
			}
		}

		@extend .inputs;

		.search-field {
			border: 0px;
			background: transparent;
			font-size: 12px;

			&:focus {
				outline: none;
			}
		}

		.search-submit {
			display: none;
		}

		@media (max-width: $breakpoint-medium) {
			min-width: 175px;
		}
		@media (max-width: $breakpoint-small) {
			display: none;
		}
	}
}

@media (min-width: 640px ) {
	.long-menu .site-header {
		flex-direction: column;
		margin-top: 0;
		padding-top: 0;

		.site-logo {
			flex-direction: column;
		}

		.main-navigation,
		.menu-primary-container,
		.menu {
			width: 100%;
		}

		.menu,
		.menu > ul {
			display: flex;
			width: 100%;
		}

		.menu-item,
		.page_item {
		    flex: 1 1 auto;
		    text-align: center;

		    a {
		    	display: block;
		    }

		    .menu-item,
				.page_item {
					text-align: left;
				}

				&:first-child {
					margin-left: 0;
				}
		}

		.site-branding {
			display: flex;
			margin: 0;
			padding: 20px 0;
			flex: 100%;
			width: 100%;

			.site-logo {
				flex: 80%;
				width: 80%;
				display: block;
			}

			.site-search {
				flex: 20%;
				width: 20%;
			}
		}
	}
}
// .right-branding {
// 	text-align: right;
// 	width: 100%;
// }