@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

/* -------- RESET --------- */
* {margin: 0; padding: 0;}
.clear {clear: both;}
.clr:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; line-height: 0;}
.clr {display: inline-block;}
.center {text-align: center;}
html[xmlns] .clr {display: block;}

html{overflow-y: scroll;}

/* -------- LAYOUT -------- */
body {
	background-color: #fff;
	color: #776a57;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#wrapper {
	position: relative;
	margin: 0 auto;
	width: 98%;
/*	max-width: 980px;*/
	max-width: 880px;
}
#header {
	position: relative;
	height: 163px;
	border-bottom: 2px solid #d0d0d0;
	font-size: 11px;
	z-index: 10;
}
#page {
	position: relative;
	margin: 10px 0 30px;
}
#footer {
	position: relative;
	padding-top: 10px;
	height: 30px;
	border-top: 2px solid #d0d0d0;
}
/* -------- HEADER -------- */
#header h1.logo {
	position: absolute;
	left: 3px;
	top: 14px;
}
#header h1.logo a {
	display: block;
	width: 204px;
	height: 138px;
	background: url(../images/hip-homes-hungary-logo.gif) left top no-repeat;
	text-indent: -999em;
}
#header h1.logo a:hover, #header h1.logo a:focus {
	outline: none;
}

#navigation-h {display: none;}
#navigation {
	position: absolute;
	right: 3px;
	bottom: 12px;
	text-transform: uppercase;
	z-index: 9999;
}
#navigation > ul {
	list-style-type: none;
}
#navigation > ul > li {
	position: relative;
	float: left;
	margin-left: 2em;
	font-size: 11pt;
	font-weight: bold;
	z-index: 9999;
}
#navigation ul li a {
	display: block;
	color: #614d42;
	text-decoration: none;
	outline: none;
}
#navigation ul li a:hover {
	color: #614d42;
	text-decoration: none;
}

#navigation ul li ul {
	list-style: none;
//	visibility: hidden;
	display: none;
	position: absolute;
	top: 15px;
	left: -5px;
	width: 200px;
	padding-top: 5px;
	background-color: #fff;
	border: 1px solid #dadada;
}
#navigation ul li:hover > ul {
	display: block;
}

#navigation ul li ul li {
	font-weight: normal;
	margin: 0 0 5px 5px;
}
#navigation ul li ul li a {
	height: 15px;
	line-height: 15px;
}
#navigation ul li ul li a:hover {
	text-decoration: none;
	color: #614d42;
}
/* --------- BODY --------- */
#page p {
	font-size: 12pt;
	margin: .75em 0;
	line-height: 1.7em;
}
#headline {
	position: relative;
	margin-bottom: 10px;
	height: 160px;
	overflow: hidden;
}
#headline div {
	position: relative;
	display: block;
	float: left;
	width: 24%;
	height: 160px;
	background-position: left top;
	background-repeat: no-repeat;
	margin-right: 10px;
}
#headline div img {
 width: 100%;
 height: auto;
}

#headline div.last {
	margin-right: 0;
}
#content h1 {
	margin: 20px 0;
	/*color: #5f4e47;*/
	font-size: 16px;
	height: 20px;
	background: url("../images/h1.gif") 0 14px repeat-x;
}
#content h1 span {
	padding-right: 10px;
	background-color: #fff;
	background-image: none;
}
#content h2 {
	color:#C0B597;
	font-size:18px;
	font-weight:bold;
	margin-bottom:1em;
	margin-top:1em;
	text-transform:uppercase;
}
#content h3 {
	color:#C0B597;
	font-size:14px;
	font-weight:bold;
	margin-bottom:0;
	margin-top:0;
	text-transform:uppercase;
}
#content p {
	text-align: justify;
}
#content a {
	color: #333333;
	text-decoration: none;	
}
#content a:hover {
	color: #333333;
	text-decoration: none;
}
#content hr {
	border:1px solid;
	color:#D0D0D0;
	height:1px;
	margin-bottom:10px;
	width:670px;
}
#content li {
	font-size:14px;
	font-weight:normal;
	line-height:1.7em;
	text-align:justify;
}
#content .services {
	margin-bottom: 20px
}
#content .services li {
	background-image:url("../images/f.gif");
	background-position:0 10px;
	background-repeat:no-repeat;
	margin-bottom:0.2em;
	padding-left:25px;
}

p.share span {
	display: block;
}
p.share a {
	position: relative;
	float: right;
	display: block;
	margin-left: 10px;
	width: 20px;
	height: 20px;
	text-indent: 999em;
	overflow: hidden;
	cursor: pointer;
}
p.share a:hover {
}
p.share a.facebook-share {
	background: url(../images/share-facebook.png) left top no-repeat;
}
p.share a.google-share {
	background: url(https://www.gstatic.com/images/icons/gplus-16.png) left top no-repeat;
}
p.share a.twitter-share {
	background: url(../images/share-twitter.gif) left top no-repeat;
}
p.share a.myspace-share {
	background: url(../images/share-myspace.gif) left top no-repeat;
}
p.share a.pinterest-share {
	background: url(../images/share-pinterest.png) left top no-repeat;
}
/* --------- INDEX -------- */
.content-index {
	float: right;
	width: 40%;
}
.content-index p {
	padding-top: 10px !important;
	padding-left: 20px !important;
	margin: 0 !important;
	text-align: right !important;
	line-height: 1.4em !important;
	font-size: 1em;
}
.recommendations {
	position: relative;
	float: left;
	width: 60%;
}
.recommendations ul {
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
	list-style-type: none;
}
.recommendations ul li {
	position: relative;
	display: block;
	float: left;
	margin: 0 2% 2% 0;
	width: 32%;
	height: auto;
	overflow: hidden;
}

.recommendations ul li:nth-of-type(3n) {
 margin: 0 0 2% 0;
}

.recommendations ul li a {
	display: block;
	width: 100%;
	height: auto;
}
.recommendations ul li a img {
	width: 100%;
	height: auto;
	display: block;
	border: none;
}
.recommendations ul li.contact a {
	background: url(../images/sq_blank_146.gif) left top no-repeat #a58a77;
	text-indent: -999em;
}
.recommendations ul li.contact a:hover {
	background: url(../images/sq_contact_146.gif) left top no-repeat #a58a77;
}

.recommendations ul li .overlay
{
 position: absolute;
 left: 0;
 bottom: -42px;
 width: 100%;
 height: 30px;
 !width: 146px;
 _width: 146px;
 !height: 42px;
 _height: 42px;
 text-align: center;
 text-transform: uppercase;
 color: #fff;
 font-size: 8pt;
 background-color: #a58a77;
 opacity: .8;
 filter: alpha(opacity=80);
 -moz-opacity: .8;
 padding: 6px;
}

/* ----- PROPERTY LIST ---- */
#prop-list {
	list-style-type: none;
	margin-top: 2em;
}
#prop-list h3 {
	text-align: left !important;
}
#prop-list .prop-item {
 margin-bottom: 2em;
}
#prop-list .prop-item h3 a {
	color: #c0b597;
	text-decoration: none;
}
#prop-list .prop-item h3 a:hover, #prop-list .prop-item h3 a:focus {
	color: #c0b597;
	text-decoration: none;
}
#prop-list .prop-item h3 a {
 border: none;
 width: 100%;
 display: block;
}
#prop-list .prop-item .more {
	display: block;
#	margin-left: 115px;
	margin-top: 5px;
}
#prop-list .prop-item .more a {
	position: relative;
	display: block;
	float: left;
	width: 68px;
	height: 26px;
	line-height: 16px;
	font-size: 10px;
	text-transform: uppercase;
	color: #fff;
	background: url(../images/more2.gif) left top no-repeat;
	text-decoration: none;
	text-indent: -999em;
}

#prop-list .prop-item .more a:hover {
	background: url(../images/more2.gif) 0px -26px no-repeat;
}

.find-on-map-button
{
 float: right;
 margin-left: 1em;
}

.find-on-map-button > a
{
 font-size: 12px;
 font-weight: bold;
 border: 1px solid #cb9;
 padding: 10px 15px;
 color: #888;
 background-color: #eee;
 text-transform: uppercase;
}

.find-on-map-button > a:hover
{
 color: #444;
 background-color: #ccc;
}

.prop-item-img
{
 float: left;
 width: 25%;
 max-width: 240px;
}

.prop-item-img img
{
 border: none;
 width: 100%;
}

.prop-item-desc
{
 float: right;
 width: 73%;
 max-width: 820px;
}

.prop-item-desc h3
{
 font-size: 1.5em !important;
}

/* ------- PROPERTIES ----- */
.headline
{
 font-size: 14px;
 text-align: justify;
 color: #fff;
 padding: 20px;
}
.headline h2 {
	background: none !important;
	font-size: 14px !important;
	color: #fff !important;
	text-transform: none !important;
	margin-bottom: 0 !important;
#	height: 20px;
}
.headline p {
	color: #604F3F;
	font-weight: bold;
	font-size: 16px !important;
}
#property-headline
{
 background-color: #cbba9c;
 margin-bottom: 1em;
}

#property-headline-logo
{
 float: left;
 margin-right: 1em;
}

.calendar
{
 border: 1px solid #d0d0d0;
}

.calendar td
{
 width: 40px;
 font-weight: bold;
 text-align: center;
 border: 1px solid #eee;
}

.calendar thead td
{
 background: #eee;
 color: #a48a76;
}

.calendar td.d0
{
 background: #a48a76;
 color: #eee;
 text-decoration: line-through;
}

.calendar td.d1
{
 background: #eee;
 color: #776a57;
}

.calendar td.da
{
 background: #fff url('../images/cal1.gif') no-repeat;
 color: #776a57;
}

.calendar td.dl
{
 background: #fff url('../images/cal0.gif') no-repeat;
 color: #776a57;
}
.rates_text
{
 margin-top: 1px;
 background-color: #cabd9b;
 font-size: 13px;
}
.padding
{
 padding: 10px;
}

div#rates
{
 float: right;
 width: 25%;
 min-width: 225px;
 margin-left: 10px;
}

div#rates > h2
{
 margin-top: 0;
}

table.rates
{
 width: 100%;
}

table.rates td
{
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 text-align: center;
 padding: 5px;
}

.link
{
 color: #000080;
}
.features ul, .services ul
{
 margin-left: 0px;
}

.features li, .services li
{
 background-image: url('../images/f.gif');
 background-repeat: no-repeat;
 padding-left: 25px;
 background-position: 0px 10px;
 margin-bottom: 0.2em;
 list-style-type: none;
}

#content .services li ul li
{
 background-image: none;
 list-style-type: disc;
 padding-left: 0;
}

#content .services li ul
{
 padding-left: 1em;
}

h1#properties,
h1.properties
{
 font-size: 18px;
 color: #604f3f;
 margin-top: 0px;
 margin-bottom: 20px;
 text-transform: uppercase;
 background: none;
}

#property-right
{
 float: right;
 width: 20%;
 margin: 0 0 2% 2em;
 text-align: right;
 min-width: 225px;
}

#property-info > dl
{
 line-height: 2em;
}

#property-info > dl > dt
{
 clear: left;
 float: left;
 font-weight: bold;
}

#property-info > dl > dd
{
 padding-left: 5.5em;
}

#property-info ul li
{
 margin-left: 1em;
}

#property-info ul li
{
 font-size: inherit;
}

.property-request
{
 margin-bottom: 2em;
}

a.property-button
{
 display: block;
 padding: .5em 0;
 text-transform: uppercase;
 clear: both !important;
 width: 100% !important;
 background-color: #cbba9c;
 color: #fff !important;
 margin-bottom: 3px;
 text-align: center;
}

.property-request > a.property-button
{
 width: 30% !important;
 min-width: 15em;
 margin: 0 auto;
 border: 2px solid #a58a75;
}

#availability-key
{
 text-align: center;
 margin-bottom: 1em;
}

#availability-key > div
{
 display: inline-block;
}

#availability-key > div
{
 margin-right: 2em;
}

#availability-key > div:last-child
{
 margin-right: 0;
}

/* --------- FORMS -------- */
input.avail, select.avail {
background:none repeat scroll 0 0 #F3F0E9;
border:0 none;
padding:2px;
}
input.contact, textarea.contact, textarea.avail {
background:none repeat scroll 0 0 #F3F0E9;
border:0 none;
padding:2px;
width:90%;
}
td.contact, td.avail {
color:#000000;
font-size:14px;
font-weight:bold;
text-transform:uppercase;
padding: 5px;
}

/* -------- FOOTER -------- */
#footer ul {
	display: block;
	list-style-type: none;
	font-size: 11px;
	text-transform: uppercase;
}
#footer ul li {
	float: left;
	height: 10px;
	margin: 0 2em 1em 0;
}
#footer ul li a {
	display: block;
	height: 10px;
	line-height: 10px;
	color: #614a3d;
	text-decoration: none;
}
#footer ul li a:hover, #footer ul li a:focus {
	color: #806e63;
	text-decoration: none;
}

a.button-link
{
 font-size: 12px;
 font-weight: bold;
 text-transform: uppercase;
 padding: 2px 10px 2px 10px;
 background-color: #cbba9c;
 color: #fff;
 margin-bottom: 15px;
 text-decoration: none;
}

.breadcrumb
{
 font-size: 12px;
 margin-bottom: 1em;
 color: #eeddbb;
}

a.breadcrumb
{
 color: #eeddbb;
 text-decoration: none;
}

/*ul#top-images{width: 100%; max-width: 980px; list-style: none;}*/
ul#top-images{width: 100%; max-width: 880px; list-style: none;}
/*ul#top-images > li{float: left; width: 180px; margin: 0 20px 20px 0;}*/
ul#top-images > li{float: left; width: 160px; margin: 0 20px 20px 0;}
ul#top-images > li:last-child{margin-right: 0;}
ul#top-images > li img{width: 100%; height: 100%;}

@media all and (max-width: 1020px)
{
 ul#top-images > li{width: 18%; margin: 0 2.5% 2.5% 0;}
 ul#top-images > li img {width: 100%; height: auto;}
}

@media all and (max-width: 767px)
{
 #navigation {font-size: 1.5em;}
 #navigation a {font-weight: normal;}
 #navigation-h {display: block; cursor: pointer; width: 50px; height: 50px; float: right; text-align: right; z-index: 9999; margin: -5px 0 0 0;}
 #navigation {text-align: center; margin: 0; position: relative; top: 15px; z-index: 9999 !important;}
 #navigation > ul {display: none; float: none; padding: 0; border-top: 1px solid #666; clear: both; background-color: #fff; box-shadow: 0 5px 10px #888; z-index: 9999;}
 #navigation > ul > li {float: none; width: 100%; text-align: center; padding: 1.7em 0 1.1em 0; margin: 0; background-color: #eee; z-index: 9999; border-bottom: 1px solid #666;}
 #navigation > ul > li > a {display: block; width: 100%; font-weight: bold;}
 #navigation > ul > li.active > a {font-weight: bold;}
 #navigation ul li ul {display: block; visibility: visible; position: relative; border: 0; left: 0; width: 100%; text-align: center; padding-top: 0; margin: 0;}
 #navigation ul li ul li {display: block; clear: both; float: none; border-bottom: 1px solid #666; padding: 1.7em 0 1.5em 0; margin: 0;}
 #navigation ul li ul li:first-child {border-top: 1px solid #666;}
 #navigation ul li.hassub {background: #eee url(../images/hassub.gif) right 20px top 30px no-repeat;}

 .recommendations {width: 50%;}
 .content-index {width: 48%; margin: 0 1%;}
 .recommendations ul li {width: 48%;}
 .recommendations ul li:nth-of-type(3n) {margin: 0 2% 2% 0;}
 .recommendations ul li:nth-of-type(2n) {margin: 0 0 2% 0;}
 .recommendations ul li#i9{display: none;}

 #header {height: 60px;}
 #header h1.logo {top: 5px;}
 #header h1.logo a {width: 260px; height: 50px; background: url(../images/hip-homes-hungary-logo-mobile.gif) left top no-repeat;}

 #footer ul li {float: none; width: 100%; text-align: center; padding: .7em 0 1em 0; border-bottom: 1px solid #d0d0d0;}
 #footer ul li a {color: #888;}

 #property-headline-logo {display: none;}
 #prop-list .prop-item h3 a {height: 250px;}

 ul#top-images > li{width: 22.5%; margin: 0 3.333333333% 3.333333333% 0;}
 ul#top-images > li img {width: 100%; height: auto;}
 ul#top-images > li:nth-child(4) {margin-right: 0;}
 ul#top-images > li:last-child {display: none;}

 div#rates {float: none; width: 100%; margin-left: 0;}
 #content h1 {background: none; font-size: 18px; text-transform: uppercase; margin-bottom: 1em !important; height: auto;}
 #content h1 span {padding-right: 0;}
}

@media all and (max-width: 640px)
{
 #property-info > dl {line-height: 1.5em;}
}

@media all and (max-width: 480px)
{
 .recommendations {width: 40%;}
 .content-index {width: 58%; margin-right: 1%;}
 .recommendations ul li {width: 100%; margin: 0 0 2% 0;}
 .recommendations ul li#i6{display: none;}
 .recommendations ul li#i7{display: none;}
 .recommendations ul li#i8{display: none;}
 #property-right {float: none; width: 100%; text-align: center; margin-left: 0;}
 .prop-item-img {width: 100%; max-width: 480px; margin-bottom: 1em;}
 .prop-item-desc {float: none; clear: both; width: 100%; max-width: 480px;}
 .prop-item-desc h3 {padding: 0 10px;}
 .prop-item-desc p {margin-top: 0em !important; text-align: left !important; padding: 0 10px;}
}

@media all and (max-width: 320px)
{
 .recommendations ul li#i6{display: block;}
}

#uc
{
 padding: 1em;
 background-color: #897475;
 color: #fff;
 margin-bottom: 1em;
 text-align: center;
 font-family: "Noto Sans", sans-serif;
 font-size: 14pt;
}

#uc p
{
 line-height: 1.5em;
 max-width: 880px;
 margin: 0 auto .5em auto;
}

#uc a
{
 color: inherit;
}