/* Extra small devices (portrait phones, less than 576px) 
   No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {
  .quick-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
  .center-img {
    width: 75%;
  }
  .content-cell h2 {
    font-size: x-large;
  }
  .why-us p {
    padding: 20px 10px;
  }
  .quick-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .title-outer {
    margin-left: 3rem;
  }
  .modal-dialog {
    /* width: 800px; */
    margin: 30px auto;
    /* max-width: none; */
    border-radius: 25px;
  }
  .servicePage .modal-dialog {
    width: 800px !important;
    max-width: none !important;
  }

  .gallery .dull-filter {
    min-height: 100vh;
  }

  .newsPage .modal-dialog {
    max-width: 75vw;
  }

  .modalImages ul li {
    display: inline-block;
    vertical-align: top;
    width: 49.6%;
    height: 100%;
  }
  .modalImages ul li img {
    width: 100%;
    height: 250px;
  }
  
  
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
  .center-img {
    width: 50%;
  }
  .navbar {
    background: rgba(255, 255, 255, 0.75);
  }
  .nav-link {
    font-size: large;
    font-weight: 500;
    padding: 30px 0 30px 0;
    margin: 0 8px;
  }

  .nav-link[lang="zh"] {
    font-size: x-large;
  }

  .nav-item {
    padding: 0 2px;
  }
  .navbar-nav > .active > .nav-link {
    padding: 27px 0 30px 0;
  }
  .navbar-nav > .active::before {
    position: relative;
    display: block;
    content: "";
    width: 100%;
    height: 3px;
    background: #2c2a25;
    top: 0px;
    bottom: auto;
    left: 0;
    right: 0;
  }
  .sub-active {
    background-color: #e77534;
    color: white;
  }
  /* .dropdown:hover .dropdown-menu {
    display: block;
  } */
  .dropdown-menu > a:hover {
    background-color: #fd8137;
    color: white;
  }
  .banner-outer {
    margin-top: 86px;
    font-size: 40px;
  }

  .banner-outer[lang="zh"] {
    font-size: 44px;
  }

  .why-us img {
    height: 200px;
    margin-bottom: 10px;
  }

  .cn_head_bs {
    font-size: 5rem;
  }

  .sign1[lang="zh"] {
    font-size: 4rem;
  }

  .sign1,
  .header,
  .header[lang="zh"] {
    font-size: 5.5rem;
  }

  .sign2[lang="zh"] {
    font-size: 3rem;
  }

  .sign2 {
    font-size: 4.5rem;
  }

  .book {
    height: 50px;
    padding: 0px 30px;
    border-radius: 30px;
    margin: 18px 2px 2px 15px;
    font-size: large;
  }

  .book[lang="zh"] {
    font-size: x-large;
  }

  .book:hover,
  .book-active,
  .btn-submit:hover {
    padding: 2px 30px;
  }
  
}

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
  .why-us img {
    height: 200px;
    margin-bottom: 50px;
  }
  .quick-list {
    grid-template-columns: 1fr;
  }
  .room-table {
    font-size: large;
  }
  .choose-room {
    font-size: 1.7rem;
  }
}

@media (min-width: 1500px) {

  .choose-room {
    font-size: 1.8rem;
  }
  .things-to-prepare h4 {
    font-size: 1.7rem;
    font-weight: 600;
  }
  .things-to-prepare h5 {
    font-size: 1.4rem;
  }
}

/* Tageting specific breakpoint */

/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 991.98px) {
  .cover {
    background-position: bottom;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    -o-background-size: contain;
    min-height: 70vh;
    padding-top: 120px;
  }


  .gallery-carousel-caption h5 {
    line-height: 1;
    font-size: 1.2rem;
  }
  .gallery-carousel-caption p {
    font-size: 1rem;
  }
}


@media (max-width: 768px) {


  h1 {
    font-size: 2.2rem;
  }
  .cn_head_bs {
    font-size: 4.5rem;
  }
  .cover {
    background: url("../images/cover-min.png") no-repeat bottom center;
    background-size: contain;
  }
  .newsPage .fotorama__caption {
    display: none;
  }

  .gallery-carousel-caption h5 {
    font-size: 1.1rem;
  }
  .gallery-carousel-caption p {
    font-size: 0.9rem;
  }
  
  #carouselGaller .slick-arrow{
      display:none;
  }
  
}

@media (max-width: 575.98px) {
  
  #carouselGallery{
    padding: 0 15px
  }

  .quick-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .cover {
    height: 400px;
    min-height: 0px;
  }
  .navbar-brand {
    height: 50px;
    width: 156px;
  }
  .header,
  .header[lang="zh"] {
    font-size: 2.3rem;
  }
  .cn_head_bs {
    font-size: 3rem;
  }
  h1 {
    font-size: 1.3rem;
  }
  .room-table {
    margin: 2rem 1rem 1rem 1rem;
    padding: 0;
    width: 95%;
    font-size: small;
  }
  .serviceInner {
    padding: 27px 5px 0 5px;
    min-height: 210px;
  }
  .serviceInner h5 {
    font-size: 14px;
  }
  .testimonial {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 5rem;
  }


  .gallery-carousel-caption h5 {
    line-height: 1;
    font-size: 1rem;
  }
  .gallery-carousel-caption p {
    font-size: 0.7rem;
  }

  .textBox strong {
    font-size: 15px;
  }

  .textBox p {
    font-size: 12px;
  }

  .room-more-detail {
    font-size: 0.8rem;
  }
}

@media (max-width: 449.5px) {
  .card-price {
    font-size: 1.8rem;
  }
  .room-table {
    margin: 2rem 0 1rem 0;
    width: 100%;
  }
  .room-table td,
  .room-table th {
    font-size: 12px;
    padding: 2px;
  }

}

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) and (max-width: 767.98px) {
  .navbar-brand {
    height: 50px;
    width: 156px;
  }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 991.98px) {
  .sign1,
  .header {
    font-size: 4.5rem;
  }
  .sign1[lang="zh"] {
    font-size: 3rem;
  }
  h1 {
    font-size: 2.3rem;
  }

  .sign2 {
    font-size: 3.5rem;
  }
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1199.98px) {
  .get-connect-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-desc {
    font-size: small;
  }
  .card-price {
    font-size: 1.5rem;
  }
}

@media (min-width: 992px) and (max-width: 1155px) {
  .nav-min {
    font-size: 12px;
  }
}

/* other */
