@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);

/* -------------------------------------------------------------------------------------------------- general ------------------- */

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }
body {
	margin:0;
	font-family:'Open Sans',arial,helvetica,sans-serif;
	font-size:16px;
	background:#173957;
}
img { max-width:100%; height:auto; }
iframe { max-width:100%; height:auto; }

.rightimg { float:right; margin:0 0 10px 10px; max-width:50%; } 
.leftimg { float:left; margin:0 10px 10px 0; max-width:50%; } 
a { } 
a:hover { text-decoration:none; }

body > div > div { 
	max-width:1140px;
	margin:0 auto;
	padding:0 20px;
}

h1, h2, h3, h4 { margin:1em 0 0.2em; }
h1+*, h2+*, h3+*, h4+* { margin-top:0; }

	/* forms */
	.req { color:red; }
	label, input, select, textarea {
		display:block;
		margin-top:10px;
		max-width:100%;
		font-family:inherit;
		}
	input, select, textarea { padding:5px; }
	label+input, label+select, label+textarea { margin-top:5px; }

	input[type="submit"] { border:0; background:red; color:#fff; padding:10px; border-radius:10px; } 
	input[type="submit"]:hover { cursor:pointer; }

#contentBlock li { line-height:1.2em; padding-bottom:0.4em; }



/* ------------------- ------------------- */

#hpBlock1 {
	min-height:560px;
	background:url('../images/Hyatt-Regency-Scottsdale-Gainey-Ranch-Golf-Club-1280x720.jpg') center center; background-size:cover;
	text-align:center;
	}
#hpBlock1 > div {
	position:relative;
	
}
#hpBlock1 h1 {
	margin:0 auto; padding:18px; 
	width:340px;
	background:#173957; color:#ffefd1;
	font-size:31px; text-transform:uppercase; 
	font-family: 'Playfair Display', serif;
	font-weight:400; display:inline-block;
	}

.homesmart { position:absolute; top:26px; right:50%; margin-right:194px; }
.social { position:absolute; top:26px; left:50%; margin-left:194px; }
.mls { margin-top:200px; }

#hpBlock2 { background:#fff; color:#173957; }
#hpBlock2 > div { max-width:890px; min-height:280px; padding:60px 20px; position:relative; }
#hpBlock2 > div > img { position:absolute; right:0; bottom:0; }
#hpBlock2 > div > div > *:first-child { margin-top:0; }
#hpBlock2 > div > div > *:last-child { margin-bottom:0; }
#hpBlock2 a { color:#173957; text-decoration:none; }
#hpBlock2 a:hover { text-decoration:underline; }

#hpBlock2 h2 { font-size:35px; font-weight:600; }
#hpBlock2 h3 { font-size:35px; font-weight:400; }
#hpBlock2 h3 span { display:block; }
#hpBlock2 p { font-size:30px; }
#hpBlock2 p a:before { content:"\00b7"; display:inline-block; margin-right:5px; }

#footerBlock { color:#f4e7cd; font-size:18px; }
#footerBlock a { color:#f4e7cd; text-decoration:none; }
#footerBlock a:hover { text-decoration:underline; }
#footerBlock > div > p:nth-of-type(1) { float:left; }
#footerBlock > div > p:nth-of-type(2) { float:right; }

/* -------------------------------------------------------------------------------------------------- social ------------------- */

.sprite { 
	display:inline-block;
	text-indent:-9999px;
	background:url('../images/sprites.png');
	}
.sprite-facebook { background-position:0px 0px; width:21px; height:22px; } 
.sprite-facebook:hover { background-position:0px -22px; } 
.sprite-twitter { background-position:-25px 0px; width:22px; height:22px; } 
.sprite-twitter:hover { background-position:-25px -22px; } 
.sprite-youtube { background-position:-50px 0px; width:22px; height:22px; } 
.sprite-youtube:hover { background-position:-50px -22px;  } 
.sprite-linkedin { background-position:-76px 0px; width:21px; height:22px; } 
.sprite-linkedin:hover { background-position:-76px -22px; } 
.sprite-homesmart { background-position:-97px 0px; width:101px; height:32px; } 
.sprite-homesmart:hover { background-position:-97px -32px; } 
.sprite-realtor { background-position:-198px 0px; width:22px; height:26px; } 
	/* .sprite-realtor:hover { background-position:-198px -26px } */
.sprite-equal { background-position:-220px 0px; width:26px; height:26px; } 
	/* .sprite-equal:hover { background-position:-220px -26px } */
.sprite-mls { background-position:-246px 0px; width:475px; height:62px; }
.sprite-mls:hover { background-position:-246px -62px }

/* -------------------------------------------------------------------------------------------------- sidebar ------------------- */

.sidebar-main { float:left; width:100%; margin-right:-250px; } 
.sidebar-main > div { margin-right:270px; } /* 250 + 20px gutter */
.sidebar { float:left; width:250px; } 

/* -------------------------------------------------------------------------------------------------- footer ------------------- */

#footerBlock > div > div:nth-of-type(1) { float:right; }
#footerBlock > div > div:nth-of-type(2) { float:left; }

/* -------------------------------------------------------------------------------------------------- responsive ------------------- */

@media screen  and (max-height:900px){ #hpBlock1 { min-height:400px; } .mls { margin-top:100px; } }
@media screen  and (max-height:780px){ #hpBlock1 { min-height:300px; } .mls { margin-top:50px; } }

@media screen  and (max-width:970px){ #footerBlock { font-size:16px; } }
@media screen  and (max-width:880px){ #footerBlock { font-size:14px; } }

@media screen  and (max-width:830px){
	#hpBlock2 h2,
	#hpBlock2 h3 { font-size:30px; }
	#hpBlock2 p { font-size:24px; } 
}
@media screen  and (max-width:790px){
	#footerBlock { text-align:center; } 
	#footerBlock > div > p:nth-of-type(1),
	#footerBlock > div > p:nth-of-type(2) { float:none; }
	#footerBlock > div > p:nth-of-type(1) > span { display:block; margin-bottom:1em; } 
}
@media screen  and (max-width:740px){
	#hpBlock2 h2,
	#hpBlock2 h3 { font-size:24px; }
	#hpBlock2 p { font-size:18px; } 
}
@media screen  and (max-width:640px){
	.homesmart { top:90px; margin-right:-30px; } 
	.social { top:95px; margin-left:50px; } 
	
}
@media screen  and (max-width:615px){
	#hpBlock2 > div { padding-bottom:280px; text-align:center; }
	#hpBlock2 > div > img { right:50%; margin-right:-120px; }
}
@media screen  and (max-width:540px){
	.sprite-mls { background-position:-721px 0px; width:250px; height:33px; }
	.sprite-mls:hover { background-position:-721px -33px }
	#hpBlock1 { min-height:400px; }
	.mls { margin-top:150px; }
}
@media screen  and (max-width:450px){
	#footerBlock > div > p > span > span { display:block; } 
}
@media screen  and (max-width:450px){
	#hpBlock1 h1 { width:auto; padding:18px 10px; font-size:24px; }
}