body > header {
  position: relative;
  z-index: 9999; /* higher than overlay */
}
.container {
  border-bottom-style: solid;
  border-width: 1px;
  border-color: #3b444b
}

/* ====== HIDE VIDEO.JS UI ====== */
#vjs_video_3 .vjs-big-play-button,
#vjs_video_3 .vjs-control-bar,
#vjs_video_3 .vjs-title-bar,
#vjs_video_3 .vjs-error-display,
#vjs_video_3 .vjs-modal-dialog,
#vjs_video_3 .vjs-poster {
  display: none !important;
  pointer-events: none !important;
}

/* Disable clicks on video itself */
#vjs_video_3 video,
#vjs_video_3 .vjs-tech {
  pointer-events: none !important;
}

#text_1>div {
  border-width: 0 !important
}

.bttn {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: white;
  color: black;
  font-family: 'Josefin Sans', sans-serif !important;
  font-weight: 300;
  font-size: 16px;
  padding: 12px 24px;
  border: solid;
  border-width: 1px;
  border-color: #000;
  cursor: pointer
}

@media screen and (max-width:600px) {
  .bttn {
    top: 40%;
    left: 75%;
    font-size: 13px
  }
}


.column-p-img {
  float: left;
  width: 50%;
  margin-top: 13px
}

.column-p {
  float: left;
  width: 50%;
  padding-left: 3em
}

.row:after {
  content: "";
  display: table;
  clear: both
}

@media screen and (max-width:600px) {
  .column-p {
    width: 100%;
    padding-left: 0
  }

  .column-p-img {
    width: 100%
  }
}

.gallery-overlay.fullscreen-gallery-overlay .image-caption-wrapper {
  background-image: none !important
}

.image-caption {
  display: table;
  margin: 0 auto;
  padding: 5px;
  color: white !important;
  font-weight: bold !important;
  opacity: .95
}

@media screen and (max-width:600px) {
  .image-caption {
    color: black !important
  }
}

body {
  font-family: lato;
  font-weight: 300;
  overflow-x: hidden;
  position: relative;
  z-index: 0
}
body.page-13924974::before {
    background: url("https://format.creatorcdn.com/3d5eb850-2535-4fff-8148-7ec80c868272/0/0/0/0,0,1920,1080,2500,1080/0-0-0/d7ad3aa5-d430-4dba-a802-b9a8c66f6a90/1/1/background_lounge.jpg?fjkss=exp=2073829934~hmac=0f76a79b9c8a3c4296565f336675901a8619271863592ef0eae530170e9977bd");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
  z-index: -1
}
body.page-13931450::before {
    background: url("https://format.creatorcdn.com/3d5eb850-2535-4fff-8148-7ec80c868272/0/0/0/0,0,1920,1080,2500,1080/0-0-0/0d397c88-ed37-4928-babc-233dc2f53576/1/1/background_emoi.jpg?fjkss=exp=2073830845~hmac=d1b9ef901c5f5c272b97f844729788488fe56208959d755e6bf275d4ea7e2fe6");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
  z-index: -1
}

body.page-13931463::before {
    background: url("https://format.creatorcdn.com/3d5eb850-2535-4fff-8148-7ec80c868272/0/0/0/0,0,1920,1080,2500,1080/0-0-0/4eaabfaf-f4a3-437e-a5c2-bbf8ded02b8f/1/1/background_resto.jpg?fjkss=exp=2073829934~hmac=0f76a79b9c8a3c4296565f336675901a8619271863592ef0eae530170e9977bd");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
  z-index: -1
}

body.page-13931476::before {
    background: url("https://format.creatorcdn.com/3d5eb850-2535-4fff-8148-7ec80c868272/0/0/0/0,0,1920,1080,2500,1080/0-0-0/9d381f0c-9418-4540-afba-42b011112062/1/1/background_house.jpg?fjkss=exp=2073830845~hmac=d1b9ef901c5f5c272b97f844729788488fe56208959d755e6bf275d4ea7e2fe6");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
  z-index: -1
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("https://format.creatorcdn.com/3d5eb850-2535-4fff-8148-7ec80c868272/0/0/0/0,0,1920,1080,2500,1080/0-0-0/c1447723-8d71-4d27-8fc0-a902a3aef864/1/1/background.jpg?fjkss=exp=2073484354~hmac=3e92d34d479f10e7111625e442f5eac43f612fe305bf10801158ebca7c66d58b");
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
  z-index: -1
}

.hp {
  font-size: 1.2em
}

#caption_1,
#caption_2,
#caption_3 {
  text-align: center;
  padding: .5em 0
}

/* --- CONTAINER --- */
#moodboard-img {
  position: relative;
  display: inline-block;
  width: 60%;
  z-index: 0;
}

/* --- DOTS --- */
#moodboard-img .dot {
  position: absolute;
  width: 3%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: 3px 3px 4px rgb(0 0 0 / 0.4);
  cursor: pointer;
  transition: transform .3s ease, background .3s ease;
  z-index: 1;
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.7);}
}

/* Hover: scale + transparent background + border */
#moodboard-img .dot:hover {
  animation: none;
  transform: scale(1.2);
  background: transparent !important;   /* remove background */
  border: 2px solid #2a2a2a; /* visible outline */
  z-index: 9998;
}

/* --- INDIVIDUAL DOT TOOLTIP (::after) --- */
#moodboard-img .dot::after {
  content: attr(data-info);
  position: absolute;
  left: 50%;
  bottom: 125%;
  transform: translateX(-50%);
  
  background: rgba(0, 45, 100, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 1em;
  display: block;
  width: max-content;
  max-width: 200px;
  white-space: normal;
  text-align: center;
  
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 9999;
}

/* Tooltip appears below if dot is near top */
#moodboard-img .dot[data-flip="true"]::after {
  bottom: auto;
  top: 125%;
}

/* Show tooltip on hover */
#moodboard-img .dot:hover::after {
  opacity: 1;
  z-index: 9999;
}


/* --- GROUP LOGIC --- */
/* Style all dots in a group when any is hovered */
#moodboard-img:has(.dot[data-group="contrast1"]:hover) .dot[data-group="contrast1"],
#moodboard-img:has(.dot[data-group="contrast2"]:hover) .dot[data-group="contrast2"],
#moodboard-img:has(.dot[data-group="contrast3"]:hover) .dot[data-group="contrast3"] {
   animation: none;
  transform: scale(1.2);
  background: transparent !important;
  border: 2px solid #2a2a2a;
}

#asset-269951855,#asset-269951857,#asset-269951858,#asset-269951859{
  transition: filter 0.3s ease;
}
#asset-269951855:hover,#asset-269951857:hover,#asset-269951858:hover,#asset-269951859:hover{
  filter: brightness(1.2);
}