#masthead.style3 {
	#middle-bar {
		background: @header-bg;
		.row {
			justify-content: space-between;
			align-items: center;
		}
	}
	#site-branding {
		padding: 5px 0; 
		text-align: center;
		max-width: 180px;
		.custom-logo {
			max-height: 100px;
			width: auto; 
		}
		.site-title {
			text-align: center;
			margin-bottom: 0;
			a {
				color: @primary-text;
				font-size: 42px;
				font-weight: 800;
				text-decoration: none; 
				&:hover {
					color: @header-text;
				}
			}
		}
	}
	
	.social-menu-wrapper {
		display: inline-block;
		padding: 5px;
		max-width: 250px;
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			height: 35px;
			text-align: right;
			li {
				display: inline;
				a {
					display: inline-block;
					height: 35px;
					width: 35px;
					overflow: hidden;
					background: @header-lighter;
					border-radius: 50%;
					&::selection {
						color: @header-lighter;
					}
					&:after {
						padding: 4px 9px;
						color: @header-text;
					}
					&:focus {
						outline: solid 1px @primary;
					}
				}
			}
		}
		a:hover {
			&:after {
				color: @primary;
			}
		}
		
	}
	
	#top-search {
		text-align: right;
		max-width: 150px;
	}
	.search-form {
		display: inline-block;
		text-align: right;
		button, input[type=submit] {
			display: none;
		}
		input[type=search] {
			font-size: 14px;
			border: dotted 2px @header-lighter;
			background: @header-lighter;
			color: @header-text;
			&:focus {
				outline: @primary solid 1px;
			}
		}
		input[type=search]::placeholder { 
			color: @header-text;
			opacity: 0.6;
		}
	}
	
}


#site-navigation {
	text-align: center;
	a {
		color: @header-text;
		padding: 16px 12px;
		font-size: 14px;
		border-bottom: solid 2px transparent;
		&:hover { //reverse colors
			border-bottom: solid 2px @header-text;
		}
		&:focus {
			outline: solid 1px @primary;
		}
	}
	ul {
		justify-content: left;
		align-items: center;
		flex-wrap: wrap;
	}
	ul.sub-menu {
		width: 200px;
		background: #fff;
		border: solid 1px #eee;
		border-bottom: none;
		border-top: none;
		box-shadow: none;
		flex-wrap: wrap;
		text-align: left;
		font-size: 13px;
		box-shadow: none;
		a {
			color: #444;
			font-size: 13px;
		}
		li {
			border-bottom: solid 1px #eee;
			a {
				padding: 6px 15px;
				text-transform: none;
				&:hover {
					background: @primary;
					color: @primary-text;
				}
			}
			&:hover, &.focus {
				ul.sub-menu { // LEVEL 3
					left: 100%;
					border-left: none;
					border-top: none;
					font-size: 12px;
				}
			}
		}
		ul ul {
			display: none; //hide 4th level onwards.
		}
	}
}

@media screen and (max-width: 1200px) {
	#site-navigation {
		width: 100%;
		ul { justify-content: center; }
		order: 5;
		min-width: 100%;
	}
}