@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree&display=swap');

body {
  font-family: 'Bai Jamjuree', sans-serif;
}

.text-center {
    text-align: center;
}

.imghover:hover { filter: brightness(150%); }

.tagline {
    background-color: #fff;
    text-align: center;
    padding: 20px;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}

.box-menu {
    display: block;
    text-align: center;
    height: 114px;
}

.menu {
    background-color: #fff;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    padding: 5px;
    /* margin: 10px 0 10px 10px; */
    font-family: Cherokee;
    color: #000;
}

.free {
    padding: 20px 32px;
}

.boxroom {
    background-color: #2e2c2c;
    color: #fff;
    padding: 35px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.condo-tablet {
    display: none;
}

.condo-desktop {
    display: block;
}
.displaycondo {
    margin-top: -50%;
}
.box-detail { 
    padding: 50px;
    background-color: #f8f9fa9c;
    text-align: center;
    margin-top: -20.5% !important;
 }
.quotation-text { border-bottom: 1px #000 dotted; text-align: center; }
.box-quotation { border: 1px #000 solid; }
.box-payment { 
    border: 1px #000 solid; 
    border: 1px #000 solid; 
    padding: 1px 10px; 
    text-align: right; 
    margin-bottom: 5px; 
    font-size: 10px;
    line-height: 16px;
}
.box-quotation-dec { padding: 0 3.2%; font-size: 12px; }
OL { counter-reset: item; padding-inline-start: 20px; font-size: 9px; line-height: 16px; }
LI { display: block;}
LI:before { content: counters(item, ".") ". "; counter-increment: item; margin-left: -18px; display: none;}
p { margin-block-start: 0 !important; margin-block-end: 0px; }
.quotation{
    width: 21cm;
    margin: 0 auto;
}
.btn-print {
    background-color: #111;
    border: 1px solid #000;
    color: #fff;
    padding: 5px 2%;
    border-radius: 6px;
    margin-top: 15px;
    font-size: 15px;
}
.condotitle{
    padding: 10px;
    background-color: #111;
    color: #fff;
    margin-bottom: 30px;
}
a:hover { text-decoration: none; }
.bg-desktop {
    display: block;
}
.bg-tablet {
    display: none;
    }
.gallery-drone {
    padding: 2% 0px;
    margin: 0 auto;
}    
.img-status{
    width: 100%;
}
.floor-text {
    position: absolute;
    z-index: -1;
    transition: .25s;
    pointer-events: none;
    width: 10%;
    height: 20px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    text-shadow:2px 2px 0 rgba(0,0,0,.25);
    padding: 0px;
    margin: 0;
    margin-top: -10px;
}

li
{  list-style:none;
   }

li a
    { width:20%;
      padding: 0;
      text-align:center;
      letter-spacing:1px;
      font-size:12px;
      color:#fff;
      text-decoration:none;
    }

li a:hover  {
      /*margin:-10px 0 0 0;*/
}

    
.panel {
  padding: 20px;
  display: none;
  background-color: white;
  overflow: hidden;
}
.accordion {
  background-color: #1b1e21;
  color: #fff;
  cursor: pointer;
  padding: .5rem .75rem;
  width: 100%;
  border: none;
  text-align: center;
  border-radius: .25rem;
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 73%;
  top: 15%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
#myBtn{
    width: 100%;
    background-color: #1b1e21;
    color: #fff;
    padding: .4rem .75rem;
}
@media (min-width: 1200px) {
.box-detail { 
    margin-top: -31%;
    height: 50%;
    }
.box-room {
    margin: 5% 0;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) { 
.condocuvee {
    height: 1300px;
    }
.condo-tablet {
    display: block;
    padding: 25px;
    background: rgba(243, 245, 247, 0.58);
    text-align: center;
    margin-bottom: 30px;
    }
.condo-desktop {
    display: none;
    }
.img-condo {
    top: 242px;
    left: 18%;
    }
.box-floor33 { left: 75px; width: 281px; top: 81px;}
.box-floor32 { left: 71px; width: 281px; top: 80px;}
.box-floor31 { left: 74px; width: 281px; top: 80px;}
.box-floor30 { left: 72px; width: 281px; top: 73px;}
.box-floor29 { left: 70px; width: 281px; top: 81px;}
.box-floor28 { left: 72px; width: 281px; top: 72px;}
.box-floor27 { left: 72px; width: 281px; top: 79px;}
.box-floor26 { left: 71px; width: 281px; top: 69px;}
.box-floor25 { left: 70px; width: 281px; top: 73px;}
.box-floor24 { left: 70px; width: 281px; top: 75px;}
.box-floor23 { left: 71px; width: 281px; top: 79px;}
.box-floor22 { left: 71px; width: 281px; top: 81px;}
.box-floor21 { left: 71px; width: 281px; top: 83px;}
.box-floor20 { left: 71px; width: 281px; top: 82px;}
.box-floor19 { left: 71px; width: 281px; top: 86px;}
.box-floor18 { left: 71px; width: 281px; top: 89px;}
.box-floor17 { left: 71px; width: 281px; top: 90px;}
.box-floor16 { left: 71px; width: 281px; top: 91px;}
.box-floor15 { left: 71px; width: 281px; top: 92px;}
.box-floor14 { left: 71px; width: 281px; top: 73px;}
.box-floor13 { left: 71px; width: 281px; top: 75px;}
.box-floor12 { left: 71px; width: 281px; top: 78px;}
.box-floor11 { left: 71px; width: 281px; top: 81px;}
.box-floor10 { left: 71px; width: 281px; top: 67px;}
.box-floor9 { left: 71px; width: 281px; top: 70px;}
.box-floor8 { left: 71px; width: 281px; top: 72px;}
.box-floor7 { left: 71px; width: 281px; top: 78px;}
.box-floor6 { left: 69px; width: 281px; top: 78px;}
.box-floor5 { left: 74px; width: 281px; top: 68px;}
.bg33 { margin: 20% 0 0; }
.displaycondo {
    margin-top: -189%;
    }
.bg-desktop {
    display: none;
}
.bg-tablet {
    display: block;
    }
.gallery-drone {
    padding: 10% 0px;
    margin: 0 auto;
    }
.img-status{
    width: 40px;
    }
.cuvee-bg33,.cuvee-bg32,.cuvee-bg31,.cuvee-bg30,.cuvee-bg29,.cuvee-bg28,.cuvee-bg27,.cuvee-bg26,.cuvee-bg25,.cuvee-bg24,
.cuvee-bg23,.cuvee-bg22,.cuvee-bg21,.cuvee-bg20,.cuvee-bg19,.cuvee-bg18,.cuvee-bg17,.cuvee-bg16,.cuvee-bg15,.cuvee-bg14,
.cuvee-bg13,.cuvee-bg12,.cuvee-bg11,.cuvee-bg10,.cuvee-bg9,.cuvee-bg8,.cuvee-bg7,.cuvee-bg6,.cuvee-bg5 {
    margin: 30% 0 -8% 0;
    height: 617px;
    }
.floor-text {
    top: 120px;
    }
.floor-text33{top:120px;}
.floor-text32{top:118px;}
.floor-text31{top:115px;}
.floor-text30{top:115px;}
.floor-text29{top:115px;}
.floor-text28{top:115px;}
.floor-text27{top:115px;}
.floor-text26{top:115px;}
.floor-text25{top:115px;}
.floor-text24{top:115px;}
.floor-text23{top:115px;}
.floor-text22{top:115px;}
.floor-text21{top:115px;}
.floor-text20{top:115px;}
.floor-text19{top:115px;}
.floor-text18{top:115px;}
.floor-text17{top:115px;}
.floor-text16{top:115px;}
.floor-text15{top:115px;}
.floor-text14{top:113px;}
.floor-text13{top:115px;}
.floor-text12{top:115px;}
.floor-text11{top:115px;}
.floor-text10{top:115px;}
.floor-text9{top:115px;}
.floor-text8{top:115px;}
.floor-text7{top:115px;}
.floor-text6{top:115px;}
.floor-text5{top:115px;}
}

@media (min-width: 575.98px) and (max-width: 767.98px){
body { display: none; }
}