:root {
  --main-color: #ffb41d;
  --main-color-hover: #f7a90a;
  --yellow: #ffcd00;
  --gold: #34b7eb;
  --main_color_hoover: #5ec3eb;
  --blue: #005d76;
  --azure-blue: #00c1ec;
  --gray: #f0f0f0;
  --gold: #d2bd57;
}

* { padding: 0; margin: 0; }

/******************************************************************************/

input, textarea, select { font-family: 'Saira', sans-serif; font-size: 1em; }
input, textarea, select { padding: 4px 5px; }
select option[disabled="disabled"] { color: #990033; }
fieldset { background: rgba(230, 230, 230, 0.25); border: 1px solid #dedede; border-radius: 5px; float: left; margin-right: 10px; padding: 5px 10px; }
fieldset legend .fa { color: #aaa; padding: 0 2px; }
fieldset legend .fa:hover { color: #444; }
ul { list-style: none; }
ul li::before {content: "•"; color: var(--main-color); display: inline-block; margin-left: -1em; width: 1em; }

.responsive-design { font-size: 1em; }

/******************************************************************************/

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: oswald; font-size: 1em; }
.custom-combobox-toggle { margin: -2px 0 0 1px; padding: 8px 2px 8px 1px; }

a[href^="tel"] { color: inherit; text-decoration: none; }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

/******************************************************************************/

.highlight { color: #ff6c08; }
.highlight2 { color: #f8e236; }
.nu { text-decoration: none; }
.nu:hover { text-decoration: underline; }
.un { text-decoration: underline; }
.un:hover { text-decoration: none; }
.nn { text-decoration: none; }
.nn:hover { text-decoration: none; }
.nc { text-decoration: none; }
.nc:hover { color: #eb2332; color: #1aa9e6; }
.ui-tooltip { background: #444; border: 0; border-radius: 2px; box-shadow: none; color: #fff; font-family: oswald; font-size: 12px; }
.hidden { display: none; }
.clear { clear: both; }
.text-shadow { text-shadow: 1px 2px 3px #222; }
.center { text-align: center; }

/******************************************************************************/
/* tlačítka */

.button-black { background: #000; border: 0; color: #fff; cursor: pointer; padding: 5px 25px; }
.button-black:hover { background: #111; }
.button-orange { background: #ff6c08; border: 0; color: #ff6c08; cursor: pointer; padding: 5px 25px; }
.button-orange:hover { background: #ff7d19; }
input[type="submit"] { background: var(--main-color); text-transform: uppercase; border: 0; cursor: pointer; padding: 10px 15px; width: 100%; }
input[type="submit"]:hover { background: var(--main-color); }

/******************************************************************************/
/* tabulka */

.table tr th, .table tr td { padding: 5px 15px; }
.table tr th, .table thead tr td, .table tr.th td { background: #81ba25; color: #fff; font-weight: bold; }

/******************************************************************************/
/* hlášky */

.msg-ok { background: #b4e3e1; color: #000; margin-bottom: 1em; padding: 5px 15px; }
.msg-error { background: #dc143c; color:  #fff; margin-bottom: 1em; padding: 5px 15px; }
.msg-ok a, .msg-error a { color: #fff; }

/******************************************************************************/
/* blok */

.wrap1 { clear: both; float: left; position: relative; width: 100%; }
.wrap2 { margin: 0 auto; position: relative; width: 1260px; }
.content { float: left; padding: 70px 0; position: relative; width: 100%; }

.wrap-title { border-bottom: 1px solid #999; width: 50%; }
.wrap-title .title { border: 1px solid #999; border-bottom: 0; display: inline-block; left: calc(100% - (1260px / 2) + 25px); padding: 3px 15px; position: relative; text-transform: uppercase; }

/******************************************************************************/
/* rychlé ikony */

.wrap-fast { border-bottom-left-radius: 3px; border-top-left-radius: 3px; padding: 0 10px 0 0; position: absolute; position: fixed; right: 0; z-index: 9; }
.wrap-fast.phone { top: 150px; }
.wrap-fast.mail { top: 200px; }
.fast-icon { background: #000; border-radius: 3px; color: #fff; padding: 12px 5px; text-align: center; width: 30px; }
.fast-text { display: none; font-size: .9em; margin: 0 0 0 10px; text-decoration: underline; }
.wrap-fast:hover { background: #fff; /* transition: all .3s 0s; */ }
.wrap-fast:hover .fast-text { display: inline-block; }

/******************************************************************************/
/* hlavička */

#head { background: #000; position: absolute; top: 0; z-index: 9; }
#head { position: fixed; }
#head.scroll { }
#head .content { font-size: 14px; padding: 0; }

/******************************************************************************/
/* logo */

#logo { color: var(--main-color); display: inline-block; font-size: 22px; margin-right: 25px; text-decoration: none; vertical-align: middle; margin-bottom: 0px; }
#logo img { height: auto; width: 200px; }

/******************************************************************************/
/* menu */

#menu { display: inline-block; line-height: 1em; margin: 0; padding: 0; width: calc(100% - 280px); text-transform: uppercase; text-align: right; }
#menu li { display: inline-block; list-style: none; margin: 0; }
#menu li::before { content: ""; display: none; }
/*#menu li:nth-last-child(2), #menu li:nth-last-child(3)  { float: right; }*/
#menu li a { color: #fff; display: block; font-size: 14px; font-weight: bold; padding: 35px 10px 35px 10px; text-align: center; text-decoration: none; }
#menu li a:hover, #menu li a.active { background: var(--main-color); color: #000; }
#menu li.icon { display: none; }

/* submenu */
#menu li ul { background: rgba(0, 0, 0, 0.95); margin: 0; padding: 0; position: absolute; visibility: hidden; z-index: 3; }
#menu li ul:hover { }
#menu li.active ul:hover { }
#menu li ul li { display: block; float: none; margin: 0; width: auto; }
#menu li ul li a { color: #fff; display: block; padding: 10px 60px 10px 20px; text-align: left; }
#menu li ul li a:link, .menu li ul li a:visited { width: auto; }
#menu li ul li a:hover, #menu li ul li a.active { background: none; border-bottom: 0; color: var(--main-color); }

/******************************************************************************/
/* odsazení */

#margin { margin-top: 84px; }

/******************************************************************************/
/* interaktivní mapa */

#imap { overflow: hidden; }
#homepage #imap .wrap2 { width: 100%; }

#wrap-map { clear: both; height: calc(100vw/1920 * 729); overflow: hidden; position: relative; width: 100%; }
#wrap-map img { height: auto; width: 100%; }

#map-img, .map-level { position: absolute; top: 0; width: 1260px; }
#homepage #map-img, .map-level { width: 100%; }
.map-level { background-position: 0 0; background-size: 100% auto; background-repeat: repeat; z-index: 2; }
.mobile.map-level { background-image: none !important; }

#map-transparency { height: auto; position: absolute; top: 0; width: 100%; z-index: 3; }

/******************************************************************************/
/* interaktivni mapa */

.imap { display: grid; max-width: 100vw; /*max-height: 100vh; */ --color-hover: var(--main-color); --color-target: transparent;}
.imap>* { grid-row: 1; grid-column: 1;}
.imap svg, .imap picture, .imap img { width: 100%; height: auto; max-width: 100%; /* max-height: 100vh; */}
.imap img { object-fit: contain;}
.imap path, .imap polyline { fill: var(--color, transparent); fill-opacity: 0.5; transition: .1s fill;}
.imap :target { --color: var(--color-target);}
.imap a:hover, .imap a.active { --color: var(--color-hover);}
.background-color, .background-color { background-color: var(--color-hover);}
.imap .vychozi-seda { --color: hsl(0deg 0% 50% / 50%);  }

.imap .volny, .imap .volna { --color-hover: #31ad12; }
.imap .prodany, .imap .prodana { --color-hover: #ff0800; }
.imap .rezervovany, .imap .rezervovana { --color-hover: #ff9a00; }

.background-color.special { --color-hover: #716f60; --color: #716f60; }

/******************************************************************************/
/* tooltip */

.tooltip { font-size: 1.25em; font-weight: 300; line-height: 1.5; margin: 0; padding: 0; }
.tooltip b { display: block; font-size: 20px; font-weight: 300; line-height: 1; margin-top: 8px; }
.tooltip .label { border-radius: 3px; color: #fff; display: inline-block; padding: 5px 15px; text-align: center; }
.tooltip div.label { display: block; margin-bottom: 5px; }

/******************************************************************************/
/* barvy */

.table-apartment tr[level="0"], .table-apartment tr.status0, .table-apartment tr.status0:hover, .table-apartment tr.level0 { background: rgba(255,8,0,0.5)!important; }
.table-apartment tr.status1:hover, .table-apartment tr.level1 { background: rgba(49,173,18,0.5); }
.table-apartment tr[level="2"], .table-apartment tr.status2, .table-apartment tr.status2:hover, .table-apartment tr.level2 { background: rgba(255,154,0,0.5)!important; }

.color.prodany, .color.prodany a { color: #ff0800; }
.color.volny, .color.volny a { color: #31ad12; }
.color.rezervovany, .color.rezervovany a { color: #ff9a00; }

.background-color.prodany, .background-color.prodana { background-color: #ff0800; }
.background-color.volny, .background-color.volna { background-color: #31ad12; }
.background-color.rezervovany, .background-color.rezervovana { background-color: #ff9a00; }

/******************************************************************************/
/* interaktivní mapa - legenda */

#homepage #imap-legend { display: none; }
/*#subpage #imap-legend { border-bottom: 1px solid #777; }*/

#imap-legend {}
#imap-legend .content { padding: 0 0 15px 0; text-align: right; }

.legend { display: inline-block; margin-right: 25px; }
.legend:last-child() { margin: 0; }
.legend .tag { border: 1px solid #444; display: inline-block; height: 15px; margin-right: 5px; width: 15px; }
.one-kk { background: #fffcdb; }
.two-kk { background: #e0f2fe; }
.three-kk { background: #fbe6f2; }
.koje { background: #c3c3c5; }

/******************************************************************************/
/* krátký text na homepage */

.hero-title { bottom: 15%; color: var(--main-color); font-size: 500%; left: 10%; padding: 10px; position: absolute; }

#short-text-on-hp {}
#short-text-on-hp .content { font-size: 40px; font-weight: bold; line-height: 1.5em; text-align: center; text-transform: uppercase; }

/******************************************************************************/
/* fotografie na homepage */

#photo-on-hp { /*background: #f1f1f1;*/ padding: 70px 0 0px; }
#photo-on-hp .content { text-align: center; }
#photo-on-hp h1 { margin-bottom: 1em; }

.photo-on-hp { display: inline-block; margin-right: 40px; margin-bottom: 40px; width: calc(25% - 40px); position: relative; }
.photo-on-hp:last-of-type, .photo-on-hp:nth-of-type(4n+0) { margin-right: 0; margin-bottom: 0; }
.photo-on-hp img { height: auto; width: 100%; }
.photo-on-hp .title { position: absolute; bottom: -50px; width: 100%; left: 0; color: var(--blue); font-size: 20px; }
.photo-on-hp .overlay { display: none; }
.photo-on-hp .overlay .download-pdf { color: var(--main-color); position: absolute; top: 30%; left: 0; right: 0; text-align: center; margin-left: auto; margin-right: auto; }
.photo-on-hp:hover .overlay { width: 100%; height: 100%; background: rgba(255, 255, 255, .7); left: 0; position: absolute; top: 0; display: block; }
.photo-on-hp:hover .title { color: var(--gold); }

/******************************************************************************/
/* obsah - homepage */

#content { background: #fff; }

#homepage #content .wrap2 { max-width: 600px; }
#subpage #content .content { /*min-height: 400px;*/ }

#breadcrumbs { margin-bottom: 1em; }
#content ul li { line-height: 1.75em; }

/******************************************************************************/
/* vizualizace */

.image-container {}
.image-container .photo { margin: 0; }
.image-container .image { display: inline-block; width: 25%; }
.image-container .image img { width: 100%; height: auto; }

/******************************************************************************/
/* fotografie */

#photogallery .content { padding: 0; }

.wrap-photo { }
.photo { display: inline-block; margin: 6px 12px 6px 0; }
/*.photo img { height: auto; width: 200px; }*/
.photo:hover img { opacity: 0.95; }

.fancybox-caption, .fancybox__caption { font-size: 1.25em; }

/******************************************************************************/
/* ikony */

#icon { background: var(--gray); }
#icon .content { padding: 75px 0 50px 0; text-align: center; }

.icon { display: inline-block; padding: 0 0 1em 0; position: relative; text-align: center; vertical-align: top; width: calc(100%/6); }
.icon .img { background-position: center top; background-repeat: 0; background-size: 100%; display: inline-block; height: 125px; width: 125px; }
.icon .img-negative { background-position: center top; background-repeat: 0; background-size: 100%; display: inline-block; height: 125px; width: 125px; display: none; }
.icon .img:hover, .icon.active .img { /*background-position: center -155px;*/ /*filter: brightness(27%) sepia(180) saturate(90) hue-rotate(19deg) invert(0);*/ }
.icon .title { display: block; font-weight: bold; margin: 1em 0 1em 0; text-transform: uppercase; color: #000; font-size: 14px; }

.icon:hover .img { display: none; }
.icon:hover .img-negative { display: inline-block; }
.icon:hover .title { color: var(--main-color); }

/******************************************************************************/
/* mapa */

#map-title { padding-top: 70px; text-align: center; }
#map-title .content { font-size: 35px; font-weight: bold; padding: 60px 0; text-align: center; text-transform: uppercase; }

#map { position: relative; text-align: center; }
#map .wrap2 { width: 100%; }
#map .content { padding: 0; }

#google-maps { }
#google-maps iframe { pointer-events: none; }

/******************************************************************************/
/* tabulka formulář */

.table-form { }
.table-form td { padding: 5px 10px 5px 0; }
.table-form td input[type="text"], .table-form td input[type="password"], .table-form td input[type="number"], .table-form td textarea, .table-form td .ui-autocomplete-input, .table-form td select { width: 300px; }
.table-form td textarea { height: 108px; }
.table-form td select.code { width: 65px; }
.table-form td input[type="text"].phone { width: 232px; }

/******************************************************************************/
/* tabulka - detail apartmánu */

.table-apartment-detail { width: 100%; }
.table-apartment-detail tr:nth-child(even) { background: #ddd; }
.table-apartment-detail tr:nth-child(odd) { background: #fff; }
.table-apartment-detail tr:hover { background: #ccc; }
.table-apartment-detail tr td { border-bottom: 1px solid #aaa; padding: 1px 15px !important; }

/******************************************************************************/
/* detail apartmánu - fotografie */

.left { float: left; padding-right: 50px; width: calc(100% - 450px); }
.right { float: right; width: 400px; }

.demand-head { background: #000; color: #fff; margin-bottom: 1em; padding: 15px; text-align: center; }
.demand-head .status { font-size: 1.5em; text-transform: uppercase; }

.contact-form.demand-form { background: #000; padding: 15px; width: calc(100% - 30px); }
.demand-form, .demand-form a { color: #fff; }

#apartment-photo { background: #ddd; text-align: center; }
#apartment-photo .main-photo { margin-bottom: 1em; }
#apartment-photo .main-photo img { height: auto; width: 50%; }

/******************************************************************************/
/* harmonogram */

#content.schedule { background-color: var(--main-color); padding-bottom: 150px; padding-top: 70px; }

.timeline { align-items: flex-end; border-top: 2px solid #fff; display: flex; justify-content: space-between; margin-top: 50px; position: relative; width: 100%; }
.event { align-items: center; background-color: #fff; border-radius: 50%; display: flex; height: 20px; justify-content: center; margin-top: -10px; width: 20px; }
.event:first-of-type { margin-left: 10%; }
.event:last-of-type { margin-right: 10%;}
.event .text { font-size: 30px; position: absolute; text-align: center; top: 25px; }
.event .text-top { bottom: 25px; font-size: 20px; position: absolute; }

/******************************************************************************/
/* kontakt */

#contact { /*background: #000;*/ }
#contact .h1 { text-align: center; }
/*#contact, #contact a, #contact .h1 { padding: 70px 0; }*/

.co1, .co2, .co3 { display: inline-block; vertical-align: top; }
.co1, .co3 { width: 25%; }
.co2 { width: calc(50% - 60px); }
.co1 .title { font-size: 2em; line-height: 1.5em; margin-bottom: 1em; text-transform: uppercase; }
.co1 img { height: auto; max-width: 327px; width: 20px; }
.co2 { vertical-align: bottom; }
.co3 { padding: 0 0 0 50px; vertical-align: bottom; padding-bottom: 10px; }
.co3 h3 { font-size: 1.5em; }

/******************************************************************************/
/* kontaktní formulář */

.contact-form { display: inline-block; position: relative; text-align: center; width: 100%; }
.contact-form .h1 { color: #fff !important; }
.contact-form table { width: 100%; }
.contact-form table input[type="text"], .contact-form table textarea { border: 1px solid var(--main-color); background: #fff; padding: 10px 4%; width: calc(92% - 2px); }
#contact table input[type="submit"] { background: var(--main-color); text-transform: uppercase; border: 0; cursor: pointer; padding: 10px 0; padding: 10px 15px; width: fit-content; margin-top: 10px; }
#contact table input[type="submit"]:hover { background: var(--main-color); }
.contact-form table textarea { height: 180px; }
.contact-form table tr td { padding: 0 0 0.75em 0; vertical-align: top; }
.contact-form table tr:last-of-type td { padding-bottom: 0; }
.mapsitna { display: none; }

/******************************************************************************/
/* patička */

#foot { background: #fff; }
#foot, #foot a { background: var(--main-color); }
#foot .content { text-align: center; }

#foot .left { float: left; width: auto; }
#foot .left img { height: 45px; }
#foot .left img:first-of-type { margin-right: 30px; }
#foot .right { float: none; margin: 0 auto;; width: 800px; margin-top: 10px;}