/* allUnitPlan */
  @media screen and (min-width: 901px) and (max-width: 1024px) {
    #allUnit {
        max-width: 70%;
        padding: 3rem;
    }
  }
  @media screen and (min-width: 790px) and (max-width: 900px) {
    #allUnit {
        max-width: 100%;
        padding-left: 5rem;
        padding-right: 5rem;
  
    }
  }
  
  @media screen and (min-width: 768px) and (max-width: 1024px) {
  .detailGallery {
    width: 100%;
  }
  #carousel1, #carousel2 {
    padding-left: 1rem;
  }
  }
  
  .facilities {
    margin-top: 3rem;
  }
  
  .facilitiesDetail p {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 1.5rem;
    text-justify: auto;
  }
  
  .column3 .headerText {
    width: 80%;
  }
  
    .roomType h1 {
        font-size: 3rem;
        color: #2B4B5f;
    }
    .roomType h3 {
        font-size: 2rem;
    }
    .roomType li{
        font-size: 1.5rem;
    }
  
    .headerPlan{
        font-size: 2rem;
        color: #212529;
        text-align: center;
    }
    .headerPlan img {
      width: 100%;
      height: auto;
    }
  
  @media(max-width:991px){
    .column1 .detailHL .btn {
        margin: 0.5rem;
    }
    .column3 .img-fluid {
        width: 100%;
    }
    .content {
        margin-left: 1rem;
        margin-right: 1rem; 
    }
    .detailTable {
        margin-bottom: 3rem;
    }
    .facilitiesDetail{
        margin-bottom: 3rem;
    }
    .column2 .detailGallery {
        margin: 0;
        padding: 0;
    }
  }

  /* unitPlan */
  @media screen and (min-width: 280px) and (max-width:760px) {
    /* #unitPlan .unitPlan .headerPlan {      
        width: 50%;  
    }  */
    .plan {
    max-height: 300px !important;
    }
  }
  
  /* 360HOVER */
  .plan {
    opacity: 1;
    display: block;
    width: 100%;
    max-height: 600px;
    transition: .5s ease;
    backface-visibility: hidden;
  }
  
  .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 45%;
    left: 45%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
  }

  .btn-moDal {
    font-size: 1.7rem;
    background-color: #2c4d62;
    border-style: none;
    position: relative;
    transition: .5s ease;
    opacity: 1;
    bottom: 10%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
  }

  
  .camera {
    background-color: rgba(250,250,250,0.5);
    color: white;
    font-size: 16px;
    padding: 16px 32px;
  }
  
  
  /* column4 */
  .column4 {
    margin-top: 3rem;
  }
  .headerTextPlan {
    color: #2b4b5f; 
    font-size: 2.3rem;
  }

  .roomCont p {
    font-size: 1.5rem;
  }

  .roomCont li {
    font-size: 1.5rem;

  }

  #unitPlanIndex .bulletPic p{
    font-size: 1.5rem;
    color: white;
    background:rgba(0,0,0, 0.5);
    background-size: contain, cover;
    position: absolute;
    text-align: center;
    bottom: 0;
    width: 100%;
    max-width: 1014px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px !important;
  }
  
  /* 360view differlink */
  .mobileBut {
      display: none;
      visibility: hidden;
      /* clear: both; */
  }
  
  @media screen and (min-width: 280px) and (max-width: 900px) {
    #carousel3 {
        width: 100% !important;
        margin: 0 !important;
    }
    .arrowLeft, .arrowRight  {
      visibility: hidden !important;
    }    
    .mobileBut {
      font-size: 1.7rem;
      background-color: #2c4d62;
      border-style: none;
      position: relative;
      transition: .5s ease;
      opacity: 1;
      bottom: 10%;
      padding-left: 1rem;
      padding-right: 1rem;
      margin-left: auto;
      margin-right: auto;
      display: block !important;
      visibility: visible !important;
    }
    .headerTextPlan {
      color: #2b4b5f; 
      font-size: 2.3rem;
    }
  }
  
  /* muliCarousel1 */
  @media (min-width: 768px) {
  
    .multiCarousel .carousel-inner .carousel-item .img-fluid{
        padding: 0;
    }
    /* show 3 items */
    .multiCarousel .carousel-inner .active,
    .multiCarousel .carousel-inner .active + .carousel-item,
    .multiCarousel .carousel-inner .active + .carousel-item + .carousel-item,
    .multiCarousel .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
        display: block;
    }
    
    .multiCarousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .multiCarousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .multiCarousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .multiCarousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .multiCarousel .carousel-inner .carousel-item-next,
    .multiCarousel .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .multiCarousel .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .multiCarousel .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .multiCarousel .carousel-item-next.carousel-item-left + .carousel-item,
    .multiCarousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .multiCarousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .multiCarousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .multiCarousel .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .multiCarousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .multiCarousel .carousel-item-prev.carousel-item-right + .carousel-item,
    .multiCarousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .multiCarousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
     .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
    }

    #multiCarousel1 .carousel-indicators,
    #multiCarousel2 .carousel-indicators,
    #multiCarousel3 .carousel-indicators
    {
     visibility: hidden;
    }
  }
  
  #multiCarousel1 .carousel-control-prev img,
    #multiCarousel1 .carousel-control-next img,
    #multiCarousel2 .carousel-control-prev img,
    #multiCarousel2 .carousel-control-next img,
    #multiCarousel3 .carousel-control-prev img,
    #multiCarousel3 .carousel-control-next img,
    #carousel1 .carousel-control-prev img,
    #carousel1 .carousel-control-next img,
    #carousel2 .carousel-control-prev img,
    #carousel2 .carousel-control-next img,
    #carousel3 .carousel-control-prev img,
    #carousel3 .carousel-control-next img,
    #carouselSigniFacility .carousel-control-prev img,
    #carouselSigniFacility .carousel-control-next img,
    #carouselSurrounding .carousel-control-prev img,
    #carouselSurrounding .carousel-control-next img
    {
      font-size: 2rem;
  }

  .arrowRight, .arrowLeft {
    background-color: #434d57;
    width: 3rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 0.1rem; 
    padding-right: 0.1rem; 
  }
  /* modal */
  #mymodal {
    width: 1280px;
    height: 1280px;
  }

  .modal-body {
    max-width: 1280px !important;
    max-height: 1280px !important;
  }

  .modal-dialog {
    max-width: 1280px !important;
    max-height: 1280px !important;
  }