/* https://www.iconfinder.com/iconsets/popular-services-brands */

html { height: 100%; }
body { height: 100%; }
a:hover { text-decoration: none; }
a.anchor { display: block; position: relative; top: -87px; visibility: hidden; }

#map { height: 100%; width: 100%; }
#frontend { height: 100%; }
#frontend > header { background: #fff; box-shadow: 0 0 5px #666; height:50px; position: fixed; top: 0; width: 100%; z-index: 10; }
#frontend > header > section { height: 50px; }
#frontend > header > section > .container { height: 100%; }
#frontend > header > section > .container > #logo { background: url('../images/logo-horcon.jpg') no-repeat; background-size: contain; display: block; float: left; height: 40px; position: absolute; top: 5px; width:200px; z-index: 2; }
#frontend > header > section > .container > #account { border: solid 1px red; display: none; float: right; height: 100%; }
#frontend > header > section > .container > #nav { background: transparent; color: #000; font-size: 32px; height: 50px; padding-top: 4px; position: absolute; right: 0; text-align: center; top: 0; width: 50px; }
#frontend > header > section > .container > #nav > i { cursor: pointer; }
#frontend > header > section > .container > #nav.active { background: #eee; color: #0079BD; box-shadow: 0 0 5px #666 inset; }
#frontend > header > nav { background: #eee; bottom: 0; display: none; height: calc(100% - 50px); position: fixed; width: 100%; }
#frontend > header > nav > .container { height: 100%; position: relative; }
#frontend > header > nav > .container > ul { height: 100%; margin: 40px 0 0 0; padding: 0; width: 100%; }
#frontend > header > nav > .container > ul > li { color: #666; cursor: pointer; display: block; }
#frontend > header > nav > .container > ul > li > a { color: inherit; cursor: inherit; display: block; font-family: 'Oswald', sans-serif; font-size: 14px; height: 100%; padding: 6px 20px; text-align: center; text-decoration: none; text-transform: uppercase; }
#frontend > header > nav > .container > ul > li:hover { color: #0079BD; }
#frontend > header > nav > .container > ul > li.active { border-bottom-color: #0079BD; color: #0079BD; cursor: default; font-weight: bold; }
#frontend > header > nav > .container > #social { background: #0079BD; padding: 4px 0 0 0; position: absolute; right: 0; text-align: center; top: 0; width: 100%; }
#frontend > header > nav > .container > #social > a { background-repeat: no-repeat; display: inline-block; height: 32px; width: 32px; }
#frontend > header > nav > .container > #social > a + a { margin-left: 3px; }
#frontend > header > nav > .container > #social > a.facebook { background-image: url(../images/icons/social/facebook.svg); }
#frontend > header > nav > .container > #social > a.instagram { background-image: url(../images/icons/social/instagram.svg); }
#frontend > header > nav > .container > #social > a.twitter { background-image: url(../images/icons/social/twitter.svg); }
#frontend > header > nav > .container > #social > a.youtube { background-image: url(../images/icons/social/youtube.svg); }
#frontend > section { margin: 50px auto 100px auto; }
#frontend > section > #content { padding-top: 20px; }
#frontend > section > #content #title { color: #fff; font-size: 24px; line-height: 24px; padding: 10px; text-shadow: 0 2px 3px #000; }
#frontend > #bg { background: url('../images/bg.jpg') no-repeat center; background-size: cover; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: -1; }
#frontend > #fix { background: #0079BD; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 9 !important; }

.properties {}
.properties .property { background: #fff; border: solid 1px #ccc; margin-bottom: 40px; padding: 20px; position: relative; }
.properties .property > .image { background: #eee center center no-repeat; background-size: cover; box-shadow: 0 2px 5px #999; cursor: pointer; display: block; height: 200px; width: 100%; }
.properties .property > .detail { overflow: hidden; padding-top: 20px; }
.properties .property > .detail > .header > .tag { background: #07c; border-radius: 5px; color: #fff; display: inline-block; padding: 0 5px; }
.properties .property > .detail > .header > .name { color: #07c; display: block; font-size: 24px; font-weight: bold; line-height: 24px; }
.properties .property > .detail > .description { overflow: hidden; padding-bottom: 20px; }
.properties .property > .detail > .rooms { margin-top: 10px; }
.properties .property > .detail > .rooms > .title { color: #07c; font-size: 20px; font-weight: 100; }
.properties .property > .detail > .rooms > .room { background: #eee center center no-repeat; background-size: cover; border: solid 4px #fff; box-shadow: 0 2px 5px #999; cursor: pointer; display: inline-block; height: 80px; margin-right: 10px; width: 80px; }
.properties .property:hover { background: #f9f9f9; }

#detail { background: #fff; border: solid 1px #ccc; position: relative; }
#detail > aside { background: #f9f9f9; padding: 20px; width: 100%; }
#detail > aside > .profile { color: #666; }
#detail > aside > .profile > .box { padding: 5px 0; }
#detail > aside > .profile > .box > .image { background: #eee center center no-repeat; background-size: cover; border: solid 8px #fff; border-radius: 100px; box-shadow: 0 2px 5px #999; height: 200px; margin: 0 auto; width: 200px; }
#detail > aside > .profile > .box > .name { font-size: 20px; font-weight: bold; padding: 10px 0 5px 0; text-align: center; }
#detail > aside > .profile > .box > .email { color: #07c; text-align: center; }
#detail > aside > .profile > .box > .phones > div { font-size: 16px; }
#detail > aside > .profile > .box > .social > a { background-repeat: no-repeat; display: inline-block; height: 24px; width: 24px; }
#detail > aside > .profile > .box > .social > a + a { margin-left: 3px; }
#detail > aside > .profile > .box > .social > a.facebook { background-image: url(../images/icons/social/facebook.svg); }
#detail > aside > .profile > .box > .social > a.instagram { background-image: url(../images/icons/social/instagram.svg); }
#detail > aside > .profile > .box > .social > a.twitter { background-image: url(../images/icons/social/twitter.svg); }
#detail > aside > .profile > .box > .social > a.youtube { background-image: url(../images/icons/social/youtube.svg); }
#detail > aside > .profile > .box > .location > #map-container { background: #eee; border: solid 1px #ccc; height: 350px; margin-top: 10px; position: relative; }
#detail > aside > .profile > .box + .box { border-top: dotted 1px #666; }
#detail > aside > .contact { background: #f2f1f0; border: solid 1px #ccc; margin-top: 10px; padding: 10px; }
#detail > aside > .contact > .box { padding: 5px 0; }
#detail > aside > .contact > .box > .label { font-size: 11px; font-weight: 900; }
#detail > aside > .contact > .box > .label.required:after { color: #07c; content: "*"; font-size: 13px; }
#detail > aside > .contact > .box > .input { color: #07c; font-size: 14px; padding: 5px; width: 100%; }
#detail > aside > .contact > .box > .button { background: #07c; color: #fff; text-transform: uppercase; }
#detail > .property { background: #fff; }
#detail > .property > .header > .slide { border-bottom: solid 1px #ccc; box-shadow: none; height: 300px; }
#detail > .property > .detail { padding: 20px; }
#detail > .property > .detail > .short-description { color: #07c; }
#detail > .property > .detail > .box { background: #fff3cd; border: solid 1px #ffeeba; color: #856404; padding: 10px; }
#detail > .property > .detail > .box.parking { background: #cce5ff; border-color: #b8daff; color: #004085; }
#detail > .property > .detail > .box.restriction { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }
#detail > .property > .detail > .box.rooms { background: #f9f9f9; border-color: #eee; color: #333; }
#detail > .property > .detail > .rooms > table { font-size: 12px; width: 100%; }
#detail > .property > .detail > .rooms > table .name { background: #07c; border-radius: 3px; color: #fff; font-size: 14px; padding: 2px 5px; }
#detail > .property > .detail > .rooms > table .main { padding: 10px 0; vertical-align: top; width: 80px; }
#detail > .property > .detail > .rooms > table .main > .image { background: #eee center center no-repeat; background-size: cover; border: solid 4px #fff; box-shadow: 0 2px 5px #999; cursor: pointer; display: block; height: 80px; width: 80px; }
#detail > .property > .detail > .rooms > table .detail { padding: 10px; vertical-align: top; }
#detail > .property > .detail > .rooms > table .detail > .box { padding-bottom: 10px; }
#detail > .property > .detail > .rooms > table .detail > .box > strong:after { content: ":"; }
#detail > .property > .detail > .rooms > table .detail > .box + .box { border-top: dashed 1px #666; padding-top: 10px; }
#detail > .property > .detail > .rooms > table .images { padding: 10px 0; vertical-align: bottom; }
#detail > .property > .detail > .rooms > table .images a { display: inline-block; margin-right: 10px; padding: 0; position: relative; }
#detail > .property > .detail > .rooms > table .images a:before { background: url(../images/icons/gallery.svg) rgba(0, 0, 0, .8) no-repeat center center; background-size: 24px 24px; content: ""; display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }
#detail > .property > .detail > .rooms > table .images a:hover:before { display: block; }
#detail > .property > .detail > .rooms > table .images img { background-size: cover; border: solid 3px #fff; box-shadow: 0 2px 5px #999; cursor: pointer; display: inline-block; height: 50px; width: 50px; }
#detail > .property > .detail > div > .title { font-size: 20px; font-weight: bold; }
#detail > .property > .detail > div + div { margin-top: 20px; }

.albums .album { background: #fff; border: solid 1px #ccc; margin-bottom: 40px; padding: 20px; position: relative; }
.albums .album > .image { background: #eee center center no-repeat; background-size: cover; box-shadow: 0 2px 5px #999; cursor: pointer; display: block; height: 200px; width: 100%; }
.albums .album > .detail { overflow: hidden; padding-top: 20px; }
.albums .album > .detail > .header > .tag { background: #07c; border-radius: 5px; color: #fff; display: inline-block; padding: 0 5px; }
.albums .album > .detail > .header > .name { color: #07c; display: block; font-size: 24px; font-weight: bold; line-height: 24px; }
.videos .video { background: #fff; border: solid 1px #ccc; margin-bottom: 40px; padding: 20px; position: relative; }
.videos .video > .iframe { box-shadow: 0 2px 5px #999; display: block; height: 300px; width: 100%; }
.videos .video > .detail { overflow: hidden; padding-top: 20px; }
.videos .video > .detail > .header > .name { color: #07c; display: block; font-size: 24px; font-weight: bold; line-height: 24px; }
.videos .video > .detail > .content { color: #666; padding-top: 20px; }

#detail > .album { padding: 20px; }
#detail > .album > .detail { border-bottom: dotted 1px #ccc; margin-bottom: 20px; }
#detail > .album > .detail > .tag { background: #07c; border-radius: 5px; color: #fff; display: inline-block; padding: 0 5px; }
#detail > .album > .detail > .name { color: #07c; display: block; font-size: 24px; font-weight: bold; line-height: 24px; }
#detail > .album > .detail > .description { overflow: hidden; padding-bottom: 20px; }
#detail > .album > .gallery { text-align: center; }
#detail > .album > .gallery a { display: inline-block; margin: 0 10px 20px 0; padding: 0; position: relative; }
#detail > .album > .gallery a:before { background: url(../images/icons/gallery.svg) rgba(0, 0, 0, .8) no-repeat center center; background-size: 24px 24px; content: ""; display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }
#detail > .album > .gallery a:hover:before { display: block; }
#detail > .album > .gallery img { background-size: cover; border: solid 5px #fff; box-shadow: 0 2px 5px #999; cursor: pointer; display: inline-block; height: 200px; width: 200px; }

#page { background: rgba(255, 255, 255, 1); border: solid 1px #ccc; padding: 20px 40px; }

#slide { box-shadow: 0 2px 5px #000; height: 300px; }
.slide { background: #000; position: relative; }
.slide > ul { bottom: 5px; margin-bottom: 0; padding: 0; position: absolute; text-align: center; width: 100%; z-index: 1; }
.slide > ul > li { background: #333; border-radius: 8px; cursor: pointer; display: inline-block; height: 16px; list-style: none; width: 16px; }
.slide > ul > li + li { margin-left: 5px; }
.slide > ul > li.active { background: #0061AA; cursor: default; }
.slide > ul > li.thumbnail { background: #fff no-repeat center; background-size: contain; border: solid 3px #fff; border-radius: 0; height: 50px; width: 50px; }
.slide > ul > li.thumbnail.active { border-color: #ff0; box-shadow: 0 2px 5px #000; }
.slide > div.items > div { background: center no-repeat; background-size: cover; display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.slide > div.items > div.active { display: block; }

.slide > .items .property > .name { color: #fff; font-size: 32px; font-weight: bold; line-height: 35px; padding: 10px 0; text-shadow: 0 2px 5px #000; }
.slide > .items .property > .address { background: rgba(0, 0, 0, .5); border-radius: 3px; color: #fff; display: inline-block; font-size: 14px; padding: 0 10px; text-shadow: 0 2px 5px #000; }
.slide > .items .property > .button { background: #07c; border: solid 2px #fff; color: #fff; display: block; font-size: 16px; padding: 10px 20px; width: 120px; }

.empty { background: #fff3cd; border-radius: 5px; color: #856404; padding: 10px; }