/* villa-css -------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////// */

/* overides over main template
--------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////// */

/* MENU COLORS ----------------------------------------------------------------- */
.desktop-menu-main-li a span { color: #333; }
.desktop-menu-main-li-btn a span { color: #333; }
.desktop-menu-main-li-ham a span { color: #333; }
.desktop-menu-main-li-btn a { border: 1px solid #777; }
#mobi-menu a#open-menu { color: #ce0606; text-shadow: none; }
/* SEARH BAR (autocomplete) COLORS --------------------------------------------- */
#header-left input, #header-left input:focus {
  border-bottom: 1px solid #464646; color: #464646;
}
      /* drow menu black
      a.parent-menu-gx, a:hover.parent-menu-gx { color: #333 !important; }
      */
      /* special paddings for template
      ## is on pi-template already
      ##
      .almost-fullwidth { padding: 7px 35px; }
      */
      /* Logo of unique-villas
      ## will change -> by png image ---
      ## so will be depricated in a few days --- */
      .unique-villas { color: #ce0606;  /* ## CSS COLOR RED */
        font-weight: 700; font-style: italic; font-size: 1.4em;
        padding-top: 12px; padding-bottom: 12px;
      }
      .unique-villas span { color: #777; font-weight: 300; }


/* sections css
--------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////// */

/* HERO
--------------------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////// */
/* grid structure -------------------------------------------------------------- */
.row.display-flex { display: flex; flex-wrap: wrap; }
.row.display-flex > [class*='col-'] { flex-grow: 1; padding-bottom: 32px;}
.div50 { height: calc(50% - 6px) !important; background: #bbb; }
.div50 img { width:100%;  height:100%;
    object-fit: cover; overflow: hidden;
}
.only-sm-n-xs { display: none; }
.margin-div50-no1st { margin-top: 12px; }
.div33 { height: calc(33% - 7px) !important;
  background: #f6f6f6; color: #464646;
  text-align: center;
  padding-top: 20%; line-height: 32px;
  font-size: 14px; font-weight: 900;
}
.div33 i { font-size: 56px; color: #999; }
.div33 a > i { color: #d00; }
.div33-active i { color: #d00; }
.margin-div33-no1st { margin-top: 13px; }
.hero-buttons a:hover { text-decoration: none; }
.row.no-gutter { margin-left: 0; margin-right: 0; }
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 6px;
  padding-left: 6px;
}


/* main image ------------------------------------------------------------------ */
.big-image { overflow: hidden; }
.hero-image { width:100%; height:100%;
    object-fit: cover;
    overflow: hidden;
}
/* buttons
-------------------------------------------------------------------------------- */
button.open-overlay { position: absolute;  bottom:45px; right: 20px;
  font-size: 13px; color: #464646; background: #fff;
  border-radius: 4px; border: 1px solid #fff;
  padding: 5px 12px;
  /* box-shadow: 0 3px 3px rgba(0,0,0,.6) */
}
button.open-overlay i { font-size: 22px; padding-right: 9px; padding-bottom: 2px; vertical-align: middle }

/* like (favorites) and share
-------------------------------------------------------------------------------- */
#like-n-share { position: absolute;
  left: 18px; top:12px; width: 80px; height: 32px;
}
#like-n-share a:hover, #like-n-share a:active { text-decoration: none; }
.favorite-villa, .share-villa-link { float: left; width: 34px; }
.favorite-villa a i, .share-villa-link a i { font-size: 22px; color: #fffc; }
.favorite-villa a i.is_favorite { color: #ce0606;  /* ## COLOR: RED ## */
  text-shadow: 0 3px 3px rgba(0,0,0,.6);
}

@media screen and (max-width: 991px) {
  #pi-hero.almost-fullwidth { position: relative; width: 100%;
    padding-right: 0 !important; padding-left: 0 !important;
  }
  #pi-hero .row.no-gutter [class*="col-"],
  #pi-hero .row.no-gutter [class*="col-"]:not(:first-child),
  #pi-hero .row.no-gutter [class*="col-"]:not(:last-child) {
    padding-right: 0; padding-left: 0;
  }
  #pi-hero .row.display-flex > [class*="col-"] { flex-grow: 1; padding-bottom: 0; }
  .sub-images { width: 100%; margin-top: calc(50vh + 3px); }
  .sub-images .div50 { float:left; width: calc(33.333% - 7px) !important; margin-bottom: 14px; }
  .sub-images .div50 img { width:100%;
      object-fit: cover; overflow: hidden; height: auto;
  }
  .margin-div50-no1st { margin-top: 0; margin-left: 10px; }
  .hero-buttons { background: #f6f6f6; margin-top: -3px; }
  .hero-buttons .div33 { height: 64px !important; width: 33.333% !important; float: left;
    background: #f6f6f6; color: #464646;
    text-align: center; line-height: 26px;
    padding-top: 0px;  padding-bottom: 12px;
    font-size: 14px; font-weight: 900;
    margin-top: 16px !important; margin-bottom: 16px !important;
  }
  .div33 i { font-size: 44px; }
  .margin-div33-no1st { margin-top: 0; margin-left: 0; border-left: 1px solid #ddd0d0; }
  .only-sm-n-xs { display: block; }
  .big-image { position: absolute; top: 0;
    height: 50vh;
  }
  .big-image button { display: none; }
}

/* inquire bar
--------------------------------------------------------------------------------
////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////// */

/* bar structure
-------------------------------------------------------------------------------- */
#inquire-bar { background: #fff; min-height:72px;
  z-index: 88; /* 98 */
}
.from-price { text-align: center; /* right */
  font-size: 10px; font-weight: 400;
}
.from-price .curr { font-size: 24px; font-weight: 700; }
.from-price .price { font-size: 24px; font-weight: 700; }
.from-price .onRequest { font-size: 24px; font-weight: 300; }
@media screen and (min-width: 1200px) and (max-width: 1299px) {
  #inquire-bar i.holder--icon { display: none;}
}
@media screen and (min-width: 992px) and (max-width: 1124px) {
  #inquire-bar i.holder--icon { display: none;}
}
@media screen and (max-width: 991px) {
  #inquire-bar { display: none; }
}
/* bottom bar on mobile
-------------------------------------------------------------------------------- */
.mobile-bottom-overlay { position: fixed;
  width:100%; height:52px;
  bottom: 0; right: 0;
  background: #fff; /* f4f4f4; */
  padding: 2px 16px;;
  /* text-align: right; */
  z-index: 999;
}
@media screen and (min-width: 992px) {
  .mobile-bottom-overlay { display: none; }
}
/* logo on inquire bar(s) ------------------------------------------------------ */
.unique-villas-logo { padding: 0 !important; }
#inquire-bar .unique-villas-logo img { height: 36px; margin-top: 12px; }
.mobile-bottom-overlay .unique-villas-logo img { height: 28px; margin-top: 12px; }

/* controls overides
 * NOTE: villa, premium and resort are sharing the same pi-controls-villa.css
-------------------------------------------------------------------------------- */
.holder--icon { color: #ce0606; }  /* ## CSS COLOR RED */
/* media queries for mobile displays
-------------------------------------------------------------------------------- */

/* media queries for big|huge displays
-------------------------------------------------------------------------------- */