@charset "utf-8";

/*
Theme Name: Hibomar - Water Park Resort HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Responsive Stylesheet %%%%%%%
*/

/*======================
Max Width 1399px
========================*/
@media (max-width: 1399.98px) {
  .hr-topbar .topbar-left > span:first-child {
    display: none;
  }
  .ticket-stub {
    padding: 30px 24px;
  }
  /* the offcanvas carries the currency switch; the boxed header runs out of room first */
  .header-style-three .hr-currency {
    display: none;
  }
  .hr-nav > ul > li > a {
    padding: 12px 10px;
    font-size: 14.5px;
  }
  .hr-nav > ul > li > a::after {
    left: 10px;
    right: 10px;
  }
  .header-call .call-text {
    display: none;
  }
  .hr-header .header-right {
    gap: 12px;
  }
  .hero-sun {
    max-width: 520px;
    --sun: 520px;
  }
  .schedule-inner {
    padding: 60px 56px;
  }
  .finder-bar {
    gap: 24px;
    padding: 28px 30px;
  }
  .room-bar {
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
  }
}

/*======================
Max Width 1199px
========================*/
@media (max-width: 1199.98px) {
  .hr-topbar a[href^="mailto:"] {
    display: none;
  }
  .hr-nav {
    display: none;
  }
  .hr-header .header-inner {
    grid-template-columns: auto 1fr;
  }
  .hr-logo,
  .header-style-three .hr-logo {
    justify-self: start;
  }
  .header-style-three .header-inner {
    grid-template-columns: auto 1fr;
  }
  .hr-hero {
    padding: 150px 0 130px;
  }
  .hero-sun {
    max-width: 440px;
    --sun: 440px;
  }
  .hero-sun .sun-rays i {
    width: 28px;
    height: 34px;
    margin-left: -14px;
  }
  .hero-sun .sun-sticker {
    width: 124px;
    height: 124px;
  }
  .hero-sun .sun-sticker b {
    font-size: 38px;
  }
  .ticket-pane {
    grid-template-columns: 1fr 260px;
    -webkit-mask: radial-gradient(circle at calc(100% - 260px) 0, transparent 15px, #000 16px) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - 260px) 100%, transparent 15px, #000 16px) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle at calc(100% - 260px) 0, transparent 15px, #000 16px) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - 260px) 100%, transparent 15px, #000 16px) bottom / 100% 51% no-repeat;
  }
  .ticket-fields {
    gap: 18px;
    padding: 30px 28px;
  }
  .ring {
    width: 132px;
    height: 132px;
  }
  .ring::before {
    inset: 26px;
  }
  .ring i {
    font-size: 40px;
  }
  .schedule-list .session {
    grid-template-columns: 70px 1fr 130px;
    gap: 20px;
  }
  .session .session-ic {
    width: 70px;
    height: 70px;
  }
  .session .session-count {
    left: 50px;
  }
  .review-bands.is-three {
    grid-template-columns: 1fr 1fr;
  }
  .band-form {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .band-submit {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .board-row {
    grid-template-columns: 56px 100px 1fr auto;
    gap: 20px;
  }
  .board-row .board-photo {
    width: 100px;
    height: 100px;
  }
  .hr-pool-menu .menu-cutout {
    display: none;
  }
  .calc-step {
    padding: 32px;
  }
  .cabana-pick {
    grid-template-columns: 1fr 1fr;
  }
  .strip-day b {
    font-size: 22px;
  }
  .finder-bar {
    grid-template-columns: 1fr 1fr;
  }
  .finder-bar .finder-zones {
    grid-column: 1 / -1;
  }
  .room-bar {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .room-bar .bar-stay {
    grid-column: 1 / -1;
  }
  .room-row {
    grid-template-columns: 280px 1fr 200px;
  }
  .ride-specs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .amenity-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dish-tiles {
    grid-template-columns: repeat(3, 1fr);
  }
  .offer-row {
    grid-template-columns: 360px 1fr;
  }
  .gal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .account-body {
    padding: 50px 44px;
  }
}

/*======================
Max Width 991px
========================*/
@media (max-width: 991.98px) {
  .hr-topbar .open-now span {
    display: none;
  }
  .hr-hero .row {
    row-gap: 60px;
  }
  .hero-sun {
    margin: 0 auto;
  }
  .hr-hero .hero-ring-1 {
    top: auto;
    bottom: 30%;
  }
  .hr-ticket {
    margin-top: -40px;
  }
  .ticket-pane {
    grid-template-columns: 1fr;
    border-radius: 0 26px 26px 26px;
    -webkit-mask: none;
    mask: none;
  }
  .ticket-stub {
    border-left: 0;
    border-top: 2px dashed var(--hr-color-line-2);
    border-radius: 0 0 26px 26px;
  }
  .hr-rings {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 44px;
  }
  .hr-rings li {
    flex: 0 0 30%;
  }
  .hr-rings li:nth-child(even) {
    padding-top: 40px;
  }
  .hr-rings-area::after {
    height: 36%;
  }
  .zones-tabs {
    justify-content: flex-start;
    margin-top: 26px;
  }
  .zone-tile.is-tall {
    height: 420px;
  }
  .schedule-inner {
    padding: 50px 40px;
  }
  .room-photos .hr-frame {
    height: 420px;
  }
  .rooms-card-wrap {
    position: relative;
    height: auto;
    margin-top: -110px;
  }
  .video-card .hr-frame {
    height: 380px;
  }
  .review-bands {
    margin-top: 10px;
  }
  .hr-splash-cta {
    padding: 150px 0;
  }
  .hr-splash-cta .cta-star,
  .hr-splash-cta .cta-anchor,
  .hr-splash-cta .cta-coconut {
    width: 90px;
  }
  .hero-two-slider .swiper-slide {
    min-height: 740px;
  }
  .split-media .split-photo {
    height: 440px;
  }
  .pass-card.is-featured {
    transform: none;
  }
  .pass-card.is-featured:hover {
    transform: translateY(-10px);
  }
  .hr-film {
    min-height: 480px;
  }
  .hr-hero-three,
  .hero-three-copy {
    min-height: 820px;
  }
  .next-wave {
    margin: 40px 0 0;
  }
  .band-form {
    grid-template-columns: 1fr 1fr;
  }
  .board-intro {
    position: static;
  }
  .center-room .center-photo {
    height: 400px;
  }
  .intro-media .intro-back {
    display: none;
  }
  .intro-media {
    padding: 0;
  }
  .intro-media .hr-play {
    top: 50%;
    left: 50%;
  }
  .post-card.is-big .post-img {
    height: 300px;
  }
  .post-card.is-big .post-date {
    top: 262px;
  }
  .hr-breadcrumb-area {
    padding: 100px 0 110px;
  }
  .room-rows .room-row,
  .room-rows .room-row:nth-child(n) {
    position: relative;
    top: auto;
  }
  .glance-head {
    display: none;
  }
  .glance-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 20px;
    padding: 20px 24px;
  }
  .glance-room {
    grid-column: 1 / -1;
  }
  .glance-row .hr-link {
    justify-self: start;
  }
  .pass-receipt,
  .ride-side,
  .blog-sidebar,
  .board-intro {
    position: static;
  }
  .room-row {
    grid-template-columns: 1fr;
  }
  .room-row .room-row-img {
    min-height: 280px;
  }
  .room-row .room-row-price {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-left: 0;
    border-top: 2px dashed var(--hr-color-line-2);
  }
  .offer-row {
    grid-template-columns: 1fr;
  }
  .offer-row .offer-img {
    min-height: 280px;
  }
  .gal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .account-card {
    grid-template-columns: 1fr;
  }
  .account-visual {
    padding: 50px 30px;
  }
  .join-box {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .contact-map {
    min-height: 420px;
  }
  .cabana-media .hr-frame {
    height: 380px;
  }
  .story-video .hr-frame {
    height: 400px;
  }
  .dining-stack .stack-back {
    height: 400px;
  }
  .price-grid th,
  .price-grid td {
    padding: 18px 16px;
  }
  .price-grid td {
    font-size: 22px;
  }
  .story-icons {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*======================
Max Width 767px
========================*/
@media (max-width: 767.98px) {
  .header-call,
  .hr-header .header-right > .hr-btn,
  .hr-header .hr-currency {
    display: none;
  }
  .hr-topbar .topbar-right {
    display: none;
  }
  .hr-topbar .topbar-left > span:first-child {
    display: none;
  }
  .header-style-three .header-box {
    padding: 0 20px;
  }
  .hr-hero {
    padding: 130px 0 110px;
  }
  .hero-facts {
    gap: 18px;
  }
  .ticket-tab {
    padding: 13px 18px 11px;
    font-size: 13.5px;
  }
  .ticket-fields {
    grid-template-columns: 1fr;
  }
  .hr-rings li {
    flex: 0 0 45%;
  }
  .hr-rings li:nth-child(even) {
    padding-top: 0;
  }
  .zone-tile,
  .zone-tile.is-tall {
    height: 280px;
  }
  .schedule-list .session {
    grid-template-columns: 64px 1fr;
  }
  .session .session-next {
    grid-column: 2;
    text-align: left;
  }
  .session .session-ic {
    width: 64px;
    height: 64px;
    font-size: 30px;
  }
  .session .session-count {
    left: 44px;
    top: 26px;
    margin-top: 0;
  }
  .schedule-list .session:first-child .session-count {
    top: 0;
    margin-top: -6px;
  }
  .schedule-list .session:last-child .session-count {
    margin-top: 0;
  }
  .rooms-card {
    width: 100%;
    padding: 32px 28px;
  }
  .review-bands,
  .review-bands.is-three {
    grid-template-columns: 1fr;
  }
  .review-panel.is-row {
    grid-template-columns: 1fr;
  }
  .hr-splash-cta .cta-ring,
  .hr-splash-cta .cta-ball {
    display: none;
  }
  .hero-two-controls .sl-dots {
    display: none;
  }
  .hr-photo-strip .strip-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .center-room .center-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .center-room .room-icons {
    gap: 10px;
    padding: 10px 16px;
    font-size: 15px;
  }
  .board-row {
    grid-template-columns: 84px 1fr;
    padding: 22px;
  }
  .board-row .board-count {
    display: none;
  }
  .board-row .board-photo {
    width: 84px;
    height: 84px;
  }
  .board-row .board-price {
    grid-column: 2;
    text-align: left;
  }
  .hr-footer .copyright-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .hr-breadcrumb-area .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .hr-breadcrumb-nav {
    position: relative;
    right: auto;
    bottom: auto;
    display: inline-flex;
    margin-top: 26px;
    margin-bottom: 0;
  }
  .split-media .split-ring {
    right: 0;
  }
  .day-strip {
    grid-template-columns: repeat(4, 1fr);
  }
  .addon {
    grid-template-columns: 48px 1fr auto 26px;
    gap: 12px;
    padding: 14px 16px;
  }
  .addon .addon-ic {
    width: 48px;
    height: 48px;
  }
  .finder-bar {
    grid-template-columns: 1fr;
  }
  .room-bar {
    grid-template-columns: 1fr 1fr;
  }
  /* the peak columns fold away rather than scroll */
  .price-grid .is-peak {
    display: none;
  }
  .post-item-body {
    padding: 28px 26px 30px;
  }
  .post-media .hr-frame,
  .post-gallery .hr-frame {
    height: 300px;
  }
  .post-nav {
    grid-template-columns: 1fr;
  }
  .post-nav .nav-next {
    text-align: left;
  }
  .post-author {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .comment {
    grid-template-columns: 48px 1fr;
    gap: 12px;
  }
  .comment-avatar {
    width: 48px;
    height: 48px;
  }
  .comment-children {
    grid-column: 1 / -1;
    padding-left: 30px;
  }
  .post-content blockquote {
    padding: 90px 26px 28px;
  }
  .post-content blockquote::before {
    top: 24px;
    left: 26px;
  }
  .gal-grid {
    grid-auto-rows: 200px;
  }
  .offer-row .offer-body {
    padding: 28px 26px;
  }
  .dish-card .hr-frame {
    height: 240px;
  }
  .account-body {
    padding: 40px 26px;
  }
  .soon-count {
    gap: 8px;
  }
  .soon-count b {
    font-size: 36px;
  }
  .story-icons {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*======================
Max Width 575px
========================*/
@media (max-width: 575.98px) {
  .hr-logo img {
    height: 50px;
  }
  .hr-header.is-scrolled .hr-logo img {
    height: 46px;
  }
  .hr-header .header-inner {
    height: 84px;
  }
  .container-wide {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero-actions .hr-btn {
    width: 100%;
  }
  .hero-sun {
    max-width: 330px;
    --sun: 330px;
  }
  .hero-sun .sun-rays i {
    width: 20px;
    height: 26px;
    margin-left: -10px;
  }
  .hero-sun .sun-rays i::after {
    left: 6px;
    right: 6px;
    top: 10px;
    bottom: 4px;
  }
  .hero-sun .sun-photo {
    border-width: 6px;
  }
  .hero-sun .sun-sticker {
    width: 100px;
    height: 100px;
    bottom: 0;
  }
  .hero-sun .sun-sticker b {
    font-size: 30px;
  }
  .hero-sun .sun-sticker span {
    font-size: 9.5px;
  }
  .hr-hero .hero-ball-1 {
    width: 50px;
    height: 50px;
  }
  .hr-hero .hero-ring-1 {
    width: 64px;
    height: 64px;
  }
  .hr-hero .hero-star {
    width: 70px;
  }
  .ticket-stub {
    padding: 26px 24px;
  }
  .ticket-stub .stub-total {
    font-size: 36px;
  }
  .ticket-fields {
    padding: 26px 22px;
  }
  .ring {
    width: 116px;
    height: 116px;
  }
  .ring::before {
    inset: 22px;
  }
  .ring i {
    font-size: 34px;
  }
  .ring-title {
    font-size: 19px;
  }
  .zone-tile .tile-title {
    font-size: 24px;
  }
  .zone-tile .tile-body {
    left: 22px;
    right: 22px;
  }
  .schedule-inner {
    padding: 36px 22px;
    border-radius: 24px;
  }
  .room-photos .hr-frame {
    height: 320px;
  }
  .rooms-card-wrap {
    margin-top: -60px;
  }
  .video-card::before {
    left: -14px;
    top: 18px;
    right: 14px;
    bottom: -18px;
  }
  .video-card .hr-frame {
    height: 280px;
  }
  .review-panel {
    padding: 24px 20px;
  }
  .wristband {
    grid-template-columns: 56px 1fr 22px;
  }
  .wristband .band-body {
    padding: 22px 18px 20px 20px;
  }
  .hr-splash-cta {
    padding: 120px 0;
  }
  .hr-splash-cta .cta-star,
  .hr-splash-cta .cta-anchor,
  .hr-splash-cta .cta-coconut {
    width: 64px;
  }
  .hr-splash-cta .cta-star {
    top: 6%;
  }
  .hero-two-slider .swiper-slide {
    min-height: 680px;
    padding: 140px 0 170px;
  }
  .hero-two-controls {
    bottom: 96px;
  }
  .split-media .split-photo {
    height: 340px;
    border-radius: 120px 24px 24px 24px;
  }
  .split-figures {
    gap: 24px;
  }
  .split-figures .figure b {
    font-size: 40px;
  }
  .counter-box b {
    font-size: 44px;
  }
  .counter-box .counter-ic {
    width: 84px;
    height: 84px;
  }
  .counter-box .counter-ic img {
    width: 46px;
  }
  .hr-film {
    min-height: 380px;
  }
  .hr-photo-strip .strip-tag {
    font-size: 16px;
    padding: 11px 20px;
  }
  .hr-hero-three,
  .hero-three-copy {
    min-height: 780px;
  }
  .hero-three-copy {
    padding: 200px 0 60px;
  }
  .next-wave {
    padding: 24px 22px;
  }
  .band-form {
    grid-template-columns: 1fr;
  }
  .band-submit {
    flex-direction: column;
    align-items: stretch;
  }
  .mosaic {
    gap: 14px;
  }
  .mosaic .is-up {
    transform: none;
  }
  .mosaic-card {
    min-height: 220px;
    padding: 24px 16px;
  }
  .mosaic-card h3 {
    font-size: 20px;
  }
  .mosaic-photo {
    min-height: 220px;
  }
  .center-room .center-photo {
    height: 280px;
  }
  .center-room .center-info {
    width: calc(100% - 24px);
    padding: 22px 22px;
  }
  .intro-media .intro-front {
    height: 300px;
  }
  .hr-intro-video {
    padding: 130px 0;
  }
  .dish {
    gap: 14px;
  }
  .dish img {
    width: 70px;
    height: 70px;
  }
  .menu-plates .hr-frame {
    height: 240px;
  }
  .counters-box {
    padding: 56px 16px;
  }
  .post-row {
    grid-template-columns: 104px 1fr;
    gap: 16px;
    padding: 14px;
  }
  .post-row .post-thumb {
    height: 100px;
  }
  .post-card.is-big .post-img {
    height: 240px;
  }
  .post-card.is-big .post-date {
    top: 202px;
  }
  .post-card.is-big h3 {
    font-size: 24px;
  }
  .hr-breadcrumb-area {
    padding: 80px 0 90px;
  }
  /* the wide gutter would push rows past a phone-width container */
  .row.g-5 {
    --bs-gutter-x: 1.5rem;
  }
  .calc-step {
    padding: 26px 20px;
    border-radius: 24px;
  }
  .step-head {
    gap: 14px;
  }
  .step-head .step-num {
    width: 48px;
    height: 48px;
    font-size: 15px;
  }
  .step-head .step-num::before {
    inset: 7px;
  }
  .step-head .step-title {
    font-size: 22px;
  }
  .day-strip {
    gap: 6px;
  }
  .strip-day {
    padding: 10px 2px;
  }
  .strip-day .sd-price {
    padding: 2px 5px;
    font-size: 11px;
  }
  .addon {
    grid-template-columns: 44px 1fr 26px;
  }
  .addon .addon-ic {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .addon .addon-price {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
  .addon .addon-price b {
    display: inline;
    margin-right: 6px;
    font-size: 18px;
  }
  .addon .addon-tick {
    grid-column: 3;
    grid-row: 1;
  }
  .pass-receipt {
    padding: 28px 22px 24px;
  }
  .receipt-total > b {
    font-size: 36px;
  }
  .cabana-pick {
    gap: 8px;
  }
  .cabana-opt .opt-body {
    padding: 16px 6px 14px;
  }
  .price-grid th,
  .price-grid td {
    padding: 14px 10px;
  }
  .price-grid td {
    font-size: 19px;
  }
  .price-grid tbody th {
    gap: 10px;
  }
  .price-grid tbody th i {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }
  .price-grid tbody th span {
    font-size: 16px;
  }
  .finder-bar,
  .room-bar {
    padding: 24px 20px;
  }
  .room-bar {
    grid-template-columns: 1fr;
  }
  .room-row .room-row-body {
    padding: 24px 22px;
  }
  .room-panel {
    padding: 26px 22px;
  }
  .amenity-grid {
    grid-template-columns: 1fr;
  }
  .coupon-box {
    flex-direction: column;
  }
  .ride-gallery .ride-main .hr-frame {
    height: 300px;
  }
  .can-ride,
  .side-card {
    padding: 26px 22px;
  }
  .gal-grid {
    grid-auto-rows: 150px;
    gap: 12px;
  }
  .dish-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .soon-count {
    grid-template-columns: repeat(2, 1fr);
  }
  .join-box {
    padding: 32px 24px;
  }
  .info-card,
  .contact-form-card,
  .table-form {
    padding: 28px 22px;
  }
  .core-card {
    padding: 32px 26px;
  }
  .side-widget {
    padding: 26px 22px;
  }
  .post-quote,
  .post-link,
  .post-audio {
    padding: 30px 24px;
  }
  .post-quote p {
    font-size: 21px;
  }
  .error-num {
    gap: 4px;
  }
  .dining-stack {
    padding: 0 30px 40px 0;
  }
  .dining-stack .stack-back {
    height: 320px;
    border-radius: 120px 24px 24px 24px;
  }
  .dining-stack .stack-front {
    height: 190px;
  }
  .cabana-media .hr-frame {
    height: 300px;
  }
  .cabana-row .cabana-media .hr-frame,
  .cabana-row.is-flip .cabana-media .hr-frame {
    border-radius: 120px 24px 24px 24px;
  }
  .story-video .hr-frame {
    height: 280px;
  }
  .account-sun {
    width: 280px;
    --sun: 280px;
  }
  .hr-error .err-star {
    display: none;
  }
}