﻿.wpf-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%; /* full width across screen */
	height: 139px;
	background: #F4F8F6;
	z-index: 1000;
	border-bottom: solid 1px #ccc;
}

.wpf-header-inner {
	max-width: 1760px;
	margin: 0 auto;
	padding: 0px 20px;
	position: relative;
}

.wpf-header-logo {
	height: 90px;
	margin: 10px 0px 0px 10px;
	align-items: center;
}

	.wpf-header-logo img {
		height: 100%;
	}

.wpf-header-icons {
	position: absolute;
	right: 20px;
	bottom: 10px;
}

.wpf-header-icon {
	height: 36px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
	opacity: 0.5;
	transition: 0.25s;
}

	.wpf-header-icon:hover {
		opacity: 1;
		cursor: pointer;
	}

	.wpf-header-icon img {
		height: 100%;
	}

.wpf-header-info {
	position: absolute;
	right: 20px;
	top: 10px;
	height: calc(100% - 10px);
}

.wpf-header-info-item {
	display: inline-block;
	vertical-align: middle;
	margin-left: 20px;
}

	.wpf-header-info-item.right {
		text-align: right;
		width: calc(100% - 20px);
		padding-right: 20px;
	}

.wpf-header-menu {
	width: 100%;
	top: 0px;
	height: 20px;
}

.wpf-header-search {
	position: absolute;
	top: 10px;
	right: 10px;
}

.wpf-header .input {
	font-size: 1.2em;
	padding: 6px 20px;
	transition: 0.25s;
}

	.wpf-header .input:hover {
		background: #064E3B;
		border: solid 1px #064E3B;
		color: #fff;
		cursor: pointer;
	}

.wpf-header-clear {
	clear: both;
	height: 10px;
}

/* Spacer to push content below fixed header */
.wpf-header-height {
	height: 140px; /* adjust to match total header height (logo + menu + margin) */
	width: 100%;
}

.wpf-footer {
	text-align: center;
	padding: 20px 0px;
	border-top: solid 1px #ccc;
	margin: 0 auto;
	margin-top: 20px;
	line-height: 1.7em;
}

.wpf-footer-inner {
	max-width: 1760px; /* match your page width */
	margin: 0 auto; /* center horizontally */
	padding: 0 20px; /* some breathing room on small screens */
}

	.wpf-footer-inner .wpf-menu-list {
		justify-content: center;
	}

@media (min-width: 100px) and (max-width: 880px) {
	.wpf-header-info, .wpf-header-icons {
		display: none;
	}

	.wpf-header-logo {
		text-align: center;
	}
}
