/* Header Stylesheet */

/* Header
-------------------------------------------------------- */

header.site-header {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	width: 100%;
	z-index:9;
}

/* Header Top Bar
------------------------- */

section.header-top-bar {
	max-width:100%;
	min-width:100%;
	display:inline-block;
	position:relative;
	transition:.2s ease;
	height:44px;
}

/* --- Social Icons --- */

.top-social-icons-wrap {
	display:inline-block;
	width:240px;
	float:left;
}

.top-social-icons {
	max-width:100%;
	display:flex;
	justify-content:space-evenly;
	padding:4px 20px;
	margin:0;
}

.top-social-icons a {
	display:block;
	padding:2px 4px;
	margin:4px 8px;
	font-size:22px;
	text-align:center;
	min-width:26px;
	border-radius:5px;
	color:#fff;
}

.top-social-icons a:hover {
	background:grey;
	background:var(--bg-icon-hvr);
}

/*** Top Bar Expando Button ***/

.button-wrap {
	position:absolute;
	display:inline-block;
	padding:1px;
	height:45px;
	transition:1.4s ease-in;
}

.button-wrap:hover {
	transition:.2s ease-in;
	height:60px;
}

.popdown-button {
	position:relative;
	display:inline-block;
	border:solid 1px;
	border-radius:10px;
	margin:3px 0;
	transition:.2s ease-in;
	text-align:left;
}

/* Button in top bar */
section.header-top-bar .popdown-button {
	background:none;
	float:left;
}

section.header-top-bar  .button-wrap:hover .popdown-button {
	background:#fff;
	background:var(--bg-pdwn-btn-hvr);
	transition:.2s ease-in;
	color:#222;
	color:var(--font-pdwn-btn-hvr);
}

.btn-icon {
	font-size:20px;
	border-right:solid 1px;
	margin-top:6px;
}

.btn-icon i {
	transition:.2s ease-in-out;
	margin-top:6px;
	transform: rotate(270deg);
}

.button-wrap:hover .btn-icon i {
	transition:.2s ease-in-out;
	transform: rotate(359.99deg);
}

.popdown-button .btn-txt {
	padding-left: 6px;
	line-height:1.8;
}

.site-header ul, .hero ul,
.agent-bio-wrap ul,
.blog-expando-button ul,
.blog-loop ul {
	list-style-type:none;
	text-decoration:none;
}

/* Top Bar Popdown */

.button-wrap ul.sell-popdown,
.button-wrap ul.sell-popdown a {
	position:relative;
	display:block;
	border-radius:10px;
	top:-399px;
	transition:.3s ease-in-out;
	max-height:0;
}

.button-wrap:hover ul.sell-popdown,
.button-wrap:hover ul.sell-popdown a {
	top:0;
	max-height:100%;
	transition:.25s ease-in-out;
}

.button-wrap ul.sell-popdown {
	padding:20px;
	box-shadow:3px 3px 6px #222;
	transition:.25s ease-in-out;
	min-height:20px;
	z-index:-1;
}

.info-btn ul.sell-popdown {margin:55px 0 0 -40px;}

.info-btn:hover ul.sell-popdown {min-height:200px;}

.sales-btn {margin-left:30px;}

.sales-btn ul.sell-popdown {margin:55px 0 0 -50px;}

.sales-btn:hover ul.sell-popdown {min-height:380px;}

.sales-btn form div {margin-bottom:10px;}

.sales-btn input, .sales-btn textarea {width:160px;padding:0 10px;}

.sales-btn #submit {padding:10px 0 8px;border:none;}

.sales-btn textarea {resize:none;height:80px;padding:10px;}

.button-wrap ul.sell-popdown a {
	width: 100%;
	padding:10px;
	box-shadow:3px 3px 1px gray;
	text-align:center;
}

.button-wrap ul.sell-popdown a:hover {
	transition:.25s ease-in-out;
	box-shadow:3px 3px 6px #222;
}
	
.button-wrap ul.sell-popdown li {
	margin-top:20px;
	transition:.3s ease-in-out;
}
	
.button-wrap ul.sell-popdown li:first-of-type {
	margin-top:0;
}

/*** Tagline ***/

.site-header #tagline {
	margin:14px 0 14px 160px;
	font-weight:600;
	float:left;
	position:relative;
	display:inline-block;
}

/*** Contact Info ***/

.site-header .top-cont-info {
	margin:14px 40px 14px 0;
	float:right;
}

.site-header .top-cont-info a:hover {
	color:lightblue;
}

/*** Top Bar Media Queries ***/

@media (max-width: 1400px) {
	.site-header #tagline {margin:14px 0 14px 150px;}
	.site-header .top-cont-info {margin-right:20px;}
}

@media (max-width: 1179px) {.top-cont-email {display:none;}}

@media (max-width: 1009px) {.top-cont-phone {display:none;}}

@media (max-width: 915px) {
	.site-header #tagline {display:none;}
	.site-header nav.top-social-icons-wrap {width:160px;}
	.site-header .top-social-icons {padding:4px 0;}
	.site-header .top-social-icons a {
		font-size:16px;
		min-width:19px;
		margin:8px 2px;
	}
	.site-header .button-wrap {margin-left:2px;}
	.site-header .sales-btn {margin-left:140px;}
	.site-header .top-cont-info {margin-right:2px;}
	section.header-top-bar .popdown-button .btn-txt {font-size:90%;}
	.info-btn .sell-popdown {margin-left:-24px!important;}
	.sales-btn .sell-popdown {margin-left:-30px!important;}
}

@media (max-width: 479px) {
	.site-header nav.top-social-icons-wrap {width:90px;}
	.site-header nav.top-social-icons-wrap .first-to-go {display:none;}
}

@media (max-width: 419px) {
	.site-header nav.top-social-icons-wrap {display:none;}
}

/* Header Main (Logo, menu & Property Search Popdown)
-------------------------------------------------------- */

.header-main {
	z-index:-2;
	position:relative;
	display:flex;
	justify-content:space-between;
	height:82px;
}

/*** logo ***/

.logo-wrap {height:0;}

.logo {
	max-width:180px;
	padding:0;
	margin:16px;
	position:relative;
	display:block;
	justify-content:center;
	align-items:center;
	z-index:999;
	transition:.2s ease-in-out;
}

.logo:hover {	box-shadow:3px 3px 6px #222;}

/*** Menu ***/

.hm-icon {transform: scale(1.5);transition:.12s ease;}

.hm-icon:hover {transform: scale(1.8);transition:.12s ease;}

nav.header-menu {
	position:absolute;
	display:block;
	width:100%;
	transition:.2s ease-in-out;
	z-index:-1;
}

nav.header-menu ul {
	display:flex;
	justify-content:center;
	margin-top:20px;
	padding:0;
}

nav.header-menu li {margin:10px;}

/* Hide narrow version of Area Guide in the menu */
nav.header-menu li .area-guide-narrow {display:none;}

.menu-item-a {
	transition:.2s ease-in-out;
	color:#fff;
}

.menu-item-a:hover,
.menu-item-a:focus,
.menu-item-a.current-menu-item-a {
	text-decoration:overline;
	transition:.2s ease-in-out;
}

/* Expando Buttons */
.expando-button {
	display:block;
	margin:20px;
	max-height:40px;
}

.settings-button {
	display:none;
}

/* Expando-button wrap hovered causes button to square bottom */
.expando-button:hover .main-button,
.blog-expando-button:hover .main-button {
	border-radius:10px 10px 0 0;
}
/* Arrow pointed up when hovering over button or popdown area button */
.expando-button:hover .main-button .btn-icon i,
.blog-expando-button:hover .main-button .btn-icon i,
.questions-pyramid:hover .main-button .btn-icon i {
	transition:.2s ease-in-out;
	transform: rotate(359.9deg);
}

.hero .expando-button:hover .button-popdown,
.blog-expando-button:hover .button-popdown {
	display:block;
}

/* Delayed Popup
-------------------------------------------------------- */

.delayed-popup {
	position:absolute;
	margin:auto;
	display:none;
	overflow:hidden;
	/*margin-top:1500px;*/
}

/* Media Queries
-------------------------------------------------------- */

@media screen and (max-width: 839px) {
	.logo {width:120px!important;}
	nav.header-menu ul {justify-content:flex-start;margin-left:17%;}
	nav.header-menu li {margin:10px 7px;}
	.menu-popdown {margin-left:-8%;}
	
}

@media screen and (max-width: 796px) {
	.header-main {justify-content:space-evenly;}
	.expando-button {margin:4px 10px!important;}
	.logo {margin:2px 10px!important;}
	.hero {margin-top:-94px;}
	nav.header-menu {
		margin-top:-14px;
		height:90px!important;/* Put in @media width 715px */
		padding-top:34px;/* Put in @media width 715px */}
	nav.header-menu ul {justify-content:center;margin-left:10px;}
	.menu-popdown {top:118px;margin:0;}/* Put in @media width 715px */
}

@media (max-width:479px) {
	/* Adjust horiz position of top triangle arrow */
	.area-guide + .menu-popdown:before {left:84px;}
	.blog + .menu-popdown:before {left:164px;}
	.about + .menu-popdown:before {left:228px;}
	.contact + .menu-popdown:before {left:292px;}
	/* Rows */
	.menu-popdown-row {height:auto;margin:4px 0 0;}	
	/* Columns */
	.menu-popdown .menu-popdown-col {width:105px;padding:4px;}	
	.menu-popdown .menu-popdown-col a {font-size:10.5px;font-weight:400;}
	/* H2 within Area Guide  */
	.menu-popdown-col h2 {width:104px;font-size:14px;top:49px;}
	/* Post col */
	.menu-popdown-post-col {width:208px;}
	/* H2 within Blog menu-popdown-post */
	.menu-popdown-post-col h2 {font-size:10px;width:198px;}
	.menu-popdown-post-col p {font-size:10px;width:198px;}
	/* Image wrapper width - same as image width */
	.menu-popdown .img-wrap {width:105px;padding:0;margin:0!important;}
	/* Round left corners of image & set border line */
	.menu-popdown .img-wrap  img {
		height:73px;width:105px;margin-bottom:-3px;}
	.blog + .menu-popdown .img-wrap img {height:83px;}
	.blog + .menu-popdown li,
	.about + .menu-popdown li {margin:4px;}
	/* Link lists */
	.menu-popdown li.col-link {font-size:12px;}
	/* Blog Category buttons */
	.blog-button-wrap {padding-bottom:10px;width:312px;font-size:12px;}
	.blog-button-wrap h2 {padding:10px;}
	.blog-button-wrap ul.button-row li {padding:8px;margin:4px;}
	/* About */
	.about + .menu-popdown .img-wrap,
	.about + .menu-popdown img {height:74px;margin:}
	/* Contact */
	.contact + .menu-popdown .contact-row {width:312px;padding:4px;}
	.contact + .menu-popdown .contact-row h2 {font-size:14px;}
	.contact + .menu-popdown .contact-row p {
		margin:5px 0 0;font-size:12px;width:194px;}
	.contact + .menu-popdown .contact-row form {margin-top:20px;}
	.contact + .menu-popdown .contact-row textarea#mssg {
		height:100px;width:100%;padding:20px;}
	.contact + .menu-popdown .contact-row div {width:45%;margin-bottom:10px;}
	.contact + .menu-popdown .contact-row label {font-size:14px;}
	.contact + .menu-popdown .contact-row input {
		font-size:18px;width:138px;padding:5px 10px;}
}

@media (max-width:419px) {
	/* Invisible hover zone between popup-top & menu-bottom */
	.menu-popdown:after {height:36px;top:-34px;}
	/* Adjust horiz position of top triangle arrow */
	.area-guide + .menu-popdown:before {left:90px;}
	.about + .menu-popdown:before {left:222px;}
	.blog + .menu-popdown:before {left:162px;}
	nav.header-menu {font-size:14px;}
	nav.header-menu + li {margin:4px;}
}

@media (max-width:359px) {
	/* Adjust horiz position of top triangle arrow */
	.area-guide + .menu-popdown:before {left:87px;}
	.blog + .menu-popdown:before {left:138px;}
	.about + .menu-popdown:before {left:200px;}
	.contact + .menu-popdown:before {left:268px;}
	/* Hide wide version of Area Guide menu item */
	nav.header-menu li .area-guide-wide {display:none;}
	nav.header-menu li .area-guide-narrow {display:block;}
}

@media screen and (max-width: 329px) {
	.menu-popdown {left:-7px;}
}

/* site-header same height as img to push down content */
@media (max-width: 640px) {
	.front-hero img {height:240px;}
	.page-hero img {height:170px;}
}

@media (min-width: 641px) {
	.front-hero img {height:378px;}
	.page-hero img {height:267px;}
}

@media (min-width: 1009px) {
	.front-hero img {height:540px;}
	.page-hero img {height:382px;}
}

@media (min-width: 1441px) {
	.front-hero img {height:720px;}
	.page-hero img {height:510px;}
}