@media only screen and (min-width: 991px) and (max-width: 1199px) {
}

@media (max-width: 1440px) {
  .banner-block .banner-con img {
    width: 74%;
  }

  .banner-block .banner-con .content-block {
    top: calc(50% - 164px);
  }

  .banner-con .content-block .btn-banner a:before {
    bottom: -1px;
    left: 207px;
  }

  .banner-con .content-block .btn-banner a:after {
    bottom: -1px;
  }
}

@media only screen and (min-width: 991px) and (max-width: 1024px) {
  html {
    overflow-x: hidden;
  }

  .facility-list .item-facility .panel-content,
  .content-facilities .item-facility .panel-content {
    padding: 40px;
  }

  .main-nav .navigation nav li a {
    font-size: 11px;
    padding: 0 3px;
  }

  .banner-block img {
    width: auto;
    max-width: none;
  }

  .banner-block .banner-con {
    top: 32%;
  }

  .banner-block .banner-con img {
    width: 77%;
  }

  .banner-block .banner-con p {
    font-size: 14px;
  }

  .banner-con .content-block .btn-banner {
    margin-top: 12px;
  }

  .banner-con .content-block .btn-banner a:before {
    bottom: -2px;
    left: 154px;
  }

  .banner-con .content-block .btn-banner a:after {
    bottom: -2px;
    left: 308px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 992px) {
}

@media (max-width: 812px) {
}

@media only screen and (min-width: 320px) and (max-width: 992px) {
}

@media only screen and (max-width: 768px) {
  html {
    overflow-x: hidden;
  }

  .booking-engine {
    position: static;
  }

  .main-nav {
    padding: 8px 0;
  }

  .main-nav img {
    max-height: 56px;
  }

  .panel-nav {
    position: fixed;

    top: 0;

    left: -50%;

    width: 50%;

    height: 100%;

    padding: 16px;

    background: #252c41;

    transition: 0.4s all ease-in-out;
  }

  .show-panel-nav {
    left: 0 !important;
  }

  .header-alt .panel-nav {
    display: none;
  }

  .banner-block img {
    width: auto;
    height: 520px;
    max-width: none;
  }

  .banner-block .banner-con p {
    color: #fff;
    font-size: 14px;
  }

  .banner-block .banner-con {
    top: 42%;
  }

  .banner-block .banner-con img {
    height: auto;
  }

  .main-nav .navigation nav li,
  .main-nav .navigation nav li a,
  .main-nav .btn-booknow {
    display: block;

    border: none;

    height: auto;

    margin: 0;

    padding: 0;

    line-height: 22px;
  }

  .main-nav .navigation nav li a:hover {
    color: #ff6d5e;
  }

  .main-nav .btn-booknow .la-concierge-bell {
    display: none;
  }

  .main-nav .navigation nav ul {
    width: 100%;
  }

  .main-nav .navigation nav li {
    margin-bottom: 12px;
  }

  .main-nav .navigation nav li a:after {
    display: none !important;
  }

  .m-btn-menu,
  .nav-footer {
    display: block;
  }

  .nav-header {
    display: flex;
  }

  .hero-banner .owl-carousel img,
  .sub-banner img {
    max-width: none;

    width: 100%;

    height: 200px;
    margin-top: 126px;
  }

  .hero-2nd-banner .owl-carousel img {
    max-width: none;
    width: 100% !important;
    height: 200px !important;
  }
  .hero-banner {
    background: url(https://hsma.org.ph/wp-content/uploads/2023/08/9thVirtus_Background-1-scaled.jpg);
    background-size: cover;
    backdrop-filter: blur(50px);
  }
  .main-nav {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .sub-banner img {
    height: 200px;
  }

  .owl-centered .owl-wrapper {
    display: table !important;
  }
  .owl-centered .owl-item {
    display: table-cell;
    float: none;
    vertical-align: middle;
  }
  .owl-centered .owl-item > div {
    text-align: center;
  }

  .hero-banner .content {
    margin-top: calc(74px + 54px);
  }

  .hero-banner .content h1 {
    font-size: 24px;
  }

  .hero-banner .content h5 {
    font-size: 16px;
  }

  .booking-engine h2 {
    display: none;
  }

  .booking-engine-content .gr-field {
    width: 33.333333%;
  }

  .booking-engine-content .gr-field button {
    width: 100%;
  }

  .facility-list .item-facility .panel-img,
  .facility-list .item-facility .panel-content,
  .content-about .tab-main-content .panel-img,
  .content-about .tab-main-content .panel-content,
  .content-facilities .item-facility .panel-img,
  .content-facilities .item-facility .panel-content {
    display: block;

    width: 100%;
  }

  .content-about .tab-main-content .panel-img img {
    width: 100%;
  }

  .facility-list .item-facility .panel-content:before,
  .content-about .tab-main-content .panel-content:before,
  .content-facilities .item-facility .panel-content:before {
    transform: rotate(90deg) !important;

    top: -24px;

    left: calc(50% - 8px) !important;

    right: auto !important;
  }

  .facility-list .item-facility .panel-content,
  .content-about .tab-main-content .panel-content,
  .content-facilities .item-facility .panel-content {
    padding: 64px;
  }

  .footer-band [class*='col-sm-']:nth-child(2) {
    margin-left: 0;

    -webkit-box-flex: 0;

    -ms-flex: 0 0 33.333333%;

    flex: 0 0 33.333333%;

    max-width: 33.333333%;
  }

  .content-rooms .col-sm-4 {
    -webkit-box-flex: 0;

    -ms-flex: 0 0 50%;

    flex: 0 0 50%;

    max-width: 50%;
  }

  .single-content-room [class*='col-sm-'],
  .single-content-facility [class*='col-sm-'] {
    -webkit-box-flex: 0;

    -ms-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;
  }

  .booking-engine-sub {
    margin-top: 40px;
  }

  .other-rooms ul {
    columns: 2;
  }

  .single-content-facility .imageroll {
    margin-bottom: 40px;
  }

  .col-12 .sponsor-block ul li {
    width: 25% !important;
  }

  .banner-block .banner-con .content-block {
    top: calc(50% - 166px);
  }

  .banner-block .banner-con .content-block ul {
    width: 100%;
  }

  .banner-con .content-block .btn-banner a:before {
    left: 94px;
  }

  .banner-con .content-block .btn-banner a:after {
    left: 248px;
  }

  .main-nav .navigation nav .btn-is a {
    padding: 12px 16px;
  }
}

@media only screen and (max-width: 480px) {
  #loading .content {
    padding: 0 64px;
  }

  .slice {
    border: 1px solid #f9f9f9;
    margin: 24px 0 0 0;
  }

  .sponsor-block .img-block {
    margin-bottom: 32px;
  }

  .topband .col-6:nth-child(1),
  .hero-banner .content h5:before,
  .hero-banner .content h5:after {
    display: none;
  }

  header .topband .social-media {
    float: none;

    text-align: center;
  }

  .main-nav [class*='col-'] {
    -webkit-box-flex: 0;

    -ms-flex: 0 0 50%;

    flex: 0 0 50%;

    max-width: 50%;
  }

  .panel-nav {
    left: -300px;

    width: 300px;
  }

  .hero-banner .content {
    padding: 0 40px;
  }

  .hero-banner .content h5 {
    font-size: 14px;
  }

  .hero-banner .content h1,
  .about-block h2,
  .facilities-block h2,
  .reviews-block h2,
  .filler-block .content h2,
  .filler-about .content p,
  .sub-banner .content h1 {
    font-size: 32px;

    line-height: 40px;
  }

  .hero-banner .content a,
  .filler-block .content a,
  .filler-about .content a {
    font-size: 14px;
  }

  .booking-engine-content .checkin,
  .booking-engine-content .checkout,
  footer .col-sm-3 {
    -webkit-box-flex: 0;

    -ms-flex: 0 0 50%;

    flex: 0 0 50%;

    max-width: 50%;
  }

  .booking-engine-content .checkin {
    padding-left: 0;
  }

  .booking-engine-content .checkout {
    padding-right: 0;
  }

  .booking-engine-content .gr-field:last-child {
    padding-left: 0;

    padding-right: 0;

    -webkit-box-flex: 0;

    -ms-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;
  }

  .about-block .order-last,
  .content-about .col-sm-5:last-child {
    order: 0;
  }

  .about-block .order-first,
  .content-about .col-sm-5:first-child {
    order: 1;
  }

  .home-about-content .panel-img,
  .content-intro .panel-img {
    margin-bottom: 32px;
  }

  .facility-list .item-facility .panel-content,
  .content-about .tab-main-content .panel-content,
  .content-facilities .item-facility .panel-content {
    padding: 32px;

    text-align: center;
  }

  .filler-block img,
  .filler-about img {
    max-width: none;

    width: auto;

    height: 100%;
  }

  .panel-review .panel-content {
    padding: 0 32px 32px 32px;
  }

  .footer-band [class*='col-sm-'],
  .content-rooms .col-sm-4,
  .single-content-room .other-rooms li [class*='col-'] {
    -webkit-box-flex: 0;

    -ms-flex: 0 0 100% !important;

    flex: 0 0 100% !important;

    max-width: 100% !important;
  }

  .footer-band [class*='col-sm-']:nth-child(2) {
    margin: 16px 0;
  }

  .footer-band .col-sm-5 {
    border: none;
  }

  footer .col-sm-5 {
    margin-bottom: 32px;
  }

  .content-about .content-tabs {
    padding: 64px 15px;
  }

  .filler-about .content {
    width: 100%;
  }

  .single-content-room .other-rooms li .panel-img {
    margin-bottom: 12px;
  }

  .single-content-room .other-rooms .price h3 {
    margin-top: 4px;

    font-size: 13px;
  }

  .single-content-room .other-rooms .panel-content h2 {
    font-size: 18px;
  }

  .about-block a,
  .single-content-facility .panel-content a,
  .panel-contact-form input[type='submit'] {
    padding: 16px 24px;
  }

  .about-block a {
    margin-bottom: 24px;
  }

  .content-contact .map {
    margin-top: 32px;
  }

  .panel-contact-form .panel-field {
    margin-bottom: 16px;
  }
}

@media only screen and (min-width: 769px) {
  .m-btn-menu,
  .m-btn-closemenu {
    display: none !important;
  }
}

@media (max-height: 480px) {
  .show-panel-nav {
    overflow: auto;
  }
}

@media (max-width: 480px) {
  .banner-block {
    text-align: center;
  }

  .banner-block img {
    height: 783px;
  }

  .banner-block .banner-con .content-block {
    position: relative;
    top: 20px;
    left: 0;
  }

  .banner-con .content-block .panel-item {
    text-align: left;
  }

  .banner-block .banner-con .content-block p {
    font-size: 14px;
  }

  .banner-block .banner-con {
    top: 18%;
  }

  .banner-block .banner-con img {
    width: 68%;
  }

  .banner-con .content-block .btn-banner a:before {
    left: 112px;
  }

  .banner-con .content-block .btn-banner a:after {
    left: 265px;
  }
}

@media (max-width: 375px) {
  .banner-block img {
    height: 717px;
  }

  .banner-con .content-block .btn-banner a:before {
    bottom: -2px;
    left: 87px;
  }

  .banner-con .content-block .btn-banner a:after {
    border-right: -2px;
    left: 240px;
  }
}

@media (max-width: 320px) {
  .banner-block img {
    height: 790px;
  }

  .banner-con .content-block .btn-banner a:before {
    left: 59px;
  }

  .banner-con .content-block .btn-banner a:after {
    left: 213px;
  }
}