/* overlay scene (SPA) ---------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////// */

.overlay { position: fixed;
  z-index: 999;
  overflow: hidden;
  top: 0; right: 0; bottom: 0; left: 0;background: #fff;
}
[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: block; }
.overlay-div { position: absolute;
    width: 100%; max-width: 1980px;
    top: 53px; height: calc(100% - 108px);
    padding: 0;
    /* min-height: 80vh; */
    background: rgba(255,255,255, .95);
    overflow-y: scroll !important;
}

.overlay-header { position: fixed;
  width:100%; height:54px;
  top: 0; right: 0;
  background: #fff;
  padding: 4px;
  /* text-align: right; */
  z-index: 999;
}
.overlay-footer { position: fixed;
  width:100%; height:52px;
  bottom: 0; right: 0;
  background: #f4f4f4;
  padding: 2px 16px;;
  /* text-align: right; */
  z-index: 999;
}
/*
* { box-sizing: border-box; }
*/
.overlay button { cursor: pointer;
  padding: 7px 21px;
  background: #fff;
  border: 1px solid #fafafa;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
/* content elements ------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////// */
.galery-img { padding: 7px 0; }
.signle-img { position: relative; }
.img-expand, .flimg-expand { position: absolute;
  top: 0; left: 80%;
  width: 20%; height: 35px;
  padding: 16px;
  text-align: right;
  cursor: pointer;
}
.img-expand i, .flimg-expand i { color: #fff; font-size: 20px; text-shadow: 0 3px 3px rgba(0,0,0,.6); }
#gallery-carousel, #floorplans-carousel { display: none; }
#gallery-carousel button.owl-next, #gallery-carousel button.owl-prev,
#floorplans-carousel button.owl-next, #floorplans-carousel button.owl-prev { box-shadow: none; }
#gallery_owl, #florplans_owl { display: none; margin-top: 41px; }
#gallery-image-list, #floorplans-image-list { margin-top: 41px; }
.overlay .close-gallery-button { font-family: 'picomoon' !important; font-size:24px;
  background: transparent; border: none;
  padding: 10px; color: #777;
}


/* iframe | video --------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////// */
.iframe-container {
  max-width:800px; width:100%; margin: 0 auto; height:50vh; background: #fff;
}
.videoWrapper {	position: relative;
  padding-bottom: 56.25%; /* 16:9 (= 100 x 9 : 16) */
  padding-top: 25px;
  height: 0;
  top:45px; bottom: 45px;
}
.videoWrapper iframe, .videoWrapper #player { position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  max-width: 800px; max-height: 450px;
}
@media screen and (min-width: 1500px) {
  .iframe-container { max-width: 1564px; padding-left: 32px; padding-right: 32px; }
  .videoWrapper iframe, .videoWrapper #player { max-width: 1500px; max-height: 844px; }
}
/* TOP-GALery buttons ----------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////// */
.overlay .close-gallery-button { box-shadow: none; }
.overlay .close-gallery-button:hover { color: #444; }
.topgal-buttons { /* position: absolute;
    width: 580px; height: 50px;
    right: 45px; bottom: 24px;
    padding: 0; */
    z-index: 1;
    text-align: center;
}
.topgal-buttons > a > button { color: #333333 /* = rgb(51, 51, 51) */ }
.topgal-button, .topgal-gal { /* position: absolute; */
  bottom:24px; right: 24px;
  margin: 0 5px;
  font-size: 13px;
  border-radius: 4px;
  background: #f4f4f4; border: 1px solid #f4f4f4;
  padding: 5px 12px;
  /* box-shadow: 0 3px 3px rgba(0,0,0,.6) */
}
.topgal-button i, .topgal-gal i { /* ## color defined on dynamic part */
  font-size: 22px; padding-right: 9px; padding-bottom: 2px; vertical-align:middle
}
.topgal-buttons > a > button.off { color: #888; cursor: default; }
.topgal-button.off i, .topgal-gal.off, .topgal-gal.off i { color:#888; cursor: default; }
.g-btns-20- { width: 22%; margin:0; padding: 2px 12px; float: left; }
.g-btns-60- { width: 55.6%; margin:0; padding: 4px 0; float: left; }
.g-like-n-share { padding: 4px 0; font-size: 12px; font-weight: 500; color: #464646; }
.g-like-n-share a i { color: #ce0606; font-size: 22px; padding: 8px 1px 8px 12px; }
.g-like-n-share .favorite-villa { width: max-content; padding-left: 10px; }
.g-like-n-share .favorite-villa i.far { color: #646464; }
.g-like-n-share .-share-div- { padding: 9px 2px; float: left; }
@media screen and (max-width: 1199px) {
  .overlay button { padding: 7px 14px; }
  .g-btns-20- { width: 12%; }
  .g-btns-60- { width: 75.6%; }
  /* .g-like-n-share .favorite-villa { width: 44px; text-align: center; } */
  .g-like-n-share .-share-div- { width: 40px; }
}
@media screen and (max-width: 975px) {
  .overlay button { padding: 7px 7px; }
  .topgal-button, .topgal-gal { margin: 0 2px; }
  .topgal-button i, .topgal-gal i { padding-right: 7px; }
  .g-btns-20- { width: 11%; }
  .g-btns-60- { width: 77.6%; }
  /* .g-like-n-share .favorite-villa { padding-left: 12px; } */
  .g-like-n-share a i { padding: 8px 6px; }
  .g-like-n-share .-share-div- { padding: 9px 0; }
}

/* OVERIDES --------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////////// */
/* carousel buttons --- */
#gallery_owl button.owl-next, #floorplans_owl button.owl-next { right: 17px; }