.snippet__title{margin-bottom:30px}.snippet__desc-readmore{margin-top:10px}.snippet__actions-call{margin-top:10px;letter-spacing:.32px}.snippet__actions-call>a{font-weight:700}.snippet__actions,.snippet__actions--grid{margin-top:40px;display:flex;align-items:center}.snippet__actions .uk-button+.uk-button,.snippet__actions--grid .uk-button+.uk-button{margin:0 0 0 25px}.snippet__actions--block{margin-top:40px;display:flex;align-items:flex-start;flex-direction:column}.snippet__actions--block .uk-button+.uk-button{margin:25px 0 0}.snippet__amenities{display:flex;align-items:center;justify-content:flex-start;text-align:center;justify-self:flex-start;column-gap:30px;grid-row-gap:20px;margin-bottom:30px;flex-flow:wrap}.snippet__amenities-item--grid{display:flex;align-items:center;column-gap:15px}.snippet__amenities-name{font:var(--h6-title-fonts);margin:10px 0 0}.snippet__amenities-item--grid .snippet__amenities-name{margin:0;text-align:left}.snippet__amenities-icon{display:block;color:var(--highlight-color);font-size:20px}.snippet__amenities-item--grid .snippet__amenities-icon{display:flex;font-size:26px}.snippet__amenities--stack{flex-direction:column;align-items:flex-start;grid-row-gap:15px}.snippet__media{width:610px;max-width:100%;overflow:hidden;height:0;padding-bottom:103.89610389610388%;border-radius:var(--border-radius)}.snippet__media:focus-within{outline:1px solid var(--highlight-color);box-shadow:0 0 2px var(--highlight-color) inset;-webkit-box-shadow:0 0 2px var(--highlight-color) inset;-ms-box-shadow:0 0 2px var(--highlight-color) inset;-moz-box-shadow:0 0 2px var(--highlight-color) inset}.snippet__media>img{width:100%}.snippet__media--l{width:750px}.snippet__media--xl{width:800px}.snippet__media--vl{width:700px;padding-bottom:115%}.snippet__media--square{padding-bottom:100%}.snippet__media.our-history-media{padding-bottom:133%}.snippet__media--map{height:650px;padding:0}.snippet__media-mapholder{height:100%}.snippet__media-map,.snippet__media-map>div{height:100%!important}.snippet__title .template-icon{display:inline;width:25px;height:25px;font-size:25px;font-weight:normal;line-height:1;align-items:center;vertical-align:baseline;color:var(--highlight-color)}.snippet__zigzag:not(.is-hidden)+.snippet__zigzag:not(.is-hidden){margin-top:40px}.snippet__zigzag.is-hidden+.snippet__zigzag{margin-top:0;transition:margin .4s ease}.snippet__accordion{margin-bottom:30px}.snippet__accordion-name{font:var(--h5-title-fonts)}.snippet__accordion-content{}.snippet__accordion--border{border-bottom:1px solid #ccc;padding-bottom:25px;border-top:1px solid #ccc;padding-top:25px}.snippet__dotnav{position:absolute;left:0;z-index:11;bottom:0;right:0;width:50%;margin-left:auto;margin-right:0;padding-left:35px}.snippet__slider-dotnav{margin-top:40px;width:610px;max-width:100%;justify-content:center}@media(min-width:1200px){.snippet__zigzag:not(.is-hidden)+.snippet__zigzag:not(.is-hidden){margin-top:80px}.snippet__container--small{max-width:1070px}}@media(min-width:960px){.snippet__zigzag:nth-child(even) .snippet__col:first-child{order:2}.snippet__zigzag:nth-child(even) .snippet__col:last-child{order:1}.snippet__zigzag:nth-child(odd) .snippet__col:first-child{order:1}.snippet__zigzag:nth-child(odd) .snippet__col:last-child{order:2}.snippet__zigzag--revert:nth-child(odd) .snippet__col:first-child{order:2}.snippet__zigzag--revert:nth-child(odd) .snippet__col:last-child{order:1}.snippet__zigzag--revert:nth-child(even) .snippet__col:first-child{order:1}.snippet__zigzag--revert:nth-child(even) .snippet__col:last-child{order:2}.snippet__zigzag--padding-middle{align-items:flex-start}.snippet__zigzag--padding-middle .snippet__conent{padding-top:50px}}@media(max-width:1399.98px){.uk-container-small .snippet__media{width:450px}.snippet__media--xl,.snippet__media--l{width:610px}}@media(max-width:1199.98px){.snippet__media{width:100%!important}.snippet__slider-dotnav{margin-top:20px;width:50%}}@media(max-width:1023.98px){.snippet__title,.snippet__desc,.snippet__amenities{margin-bottom:20px}.snippet__actions .button-booknow{min-width:unset;padding:10px 25px}.snippet__actions--grid{display:flex;align-items:center;flex-direction:row}}@media(max-width:959.98px){.snippet__media{width:100%;max-width:100%}.snippet__media img{width:100%}.snippet__title svg{width:15px;height:15px}.snippet__zigzag:not(.is-hidden)+.snippet__zigzag:not(.is-hidden){margin-top:50px}.snippet__media--map{height:600px}.snippet__slider-dotnav{width:100%;justify-content:flex-start;margin-top:40px}}@media(max-width:767.98px){.snippet__actions--block .uk-button+.uk-button{margin:15px 0 0}.snippet__dotnav{position:static;width:auto;padding:0;margin-left:-15px;margin-top:30px}.snippet__actions .uk-button-primary,.snippet__actions--grid .uk-button-primary,.snippet__actions .uk-button-default,.snippet__actions--grid .uk-button-default{padding:10px 15px}.snippet__actions .uk-button+.uk-button,.snippet__actions--grid .uk-button+.uk-button{margin:0 0 0 15px}.overview .snippet__actions{margin-top:25px;display:flex;align-items:center;flex-direction:row}.overview .snippet__actions .uk-button+.uk-button,.overview .snippet__actions--grid .uk-button+.uk-button,.overview .snippet__actions--block .uk-button+.uk-button{margin:0 0 0 25px}}@media(max-width:767.98px)and (min-width:640px){}@media(max-width:639.98px){.snippet__media--map{height:400px}.inner-padding--thirdlevel .snippet__title{font-size:35px}}@media(max-width:575px){.snippet__actions .button-booknow{padding:10px 15px}.snippet__amenities{column-gap:20px}}@media(max-width:374px){.snippet__actions{margin-top:25px;display:flex;flex-direction:column}.snippet__actions .uk-button+.uk-button,.snippet__actions--grid .uk-button+.uk-button,.snippet__actions--block .uk-button+.uk-button{margin:20px 0 0}.snippet__dotnav{justify-content:center}}.gcp-slider__nav{position:absolute;right:0;bottom:0;background:var(--primary-cta-inverse-color);color:var(--inverse-font-color);width:190px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.gcp-slider__nav-link{background:var(--primary-cta-inverse-color);color:var(--primary-cta-inverse-font-color);border-radius:0;font-size:10px;letter-spacing:1px;font-weight:600;min-height:35px;padding:5px 15px;transition:all .4s ease;line-height:1;display:flex;align-items:center}.gcp-slider__nav-link+.gcp-slider__nav-link{padding-left:10px}.gcp-slider__nav-link:first-child{padding-right:10px}.gcp-slider__nav-link.uk-invisible{visibility:visible!important;display:inline-flex!important;cursor:not-allowed;color:rgba(255,255,255,.36)}.gcp-slider__nav-link>.template-icon{font-size:14px;font-weight:normal;line-height:1;display:inline-flex;align-items:center;justify-content:center;margin-right:7px;transition:all .4s ease;margin-left:15px}.gcp-slider__nav-link>.template-icon:last-child{margin-left:15px;margin-right:0}.gcp-slider__nav-link>.template-icon:first-child{margin-right:15px;margin-left:0;margin-top:unset}.gcp-slider__nav-link-text{min-height:14px;display:inline-flex;align-items:flex-end;margin-top:-2%}.gcp-slider__nav-link:hover,.gcp-slider__nav-link:focus,.gcp-slider__nav-link:focus-visible{outline:0;box-shadow:unset}.gcp-slider__nav-link:hover>.template-icon,.gcp-slider__nav-link:focus>.template-icon,.gcp-slider__nav-link:focus-visible>.template-icon,.gcp-slider__nav-link.uk-invisible>.template-icon{opacity:.5}.gcp-slider__expand{font-size:22px;color:#000;position:absolute;bottom:0;right:190px;line-height:1;display:flex;align-items:center;justify-content:center;width:35px;height:35px;background:#fff;transition:all .4s ease}.gcp-slider__expand:hover,.gcp-slider__expand:focus,.gcp-slider__expand:focus-visible{color:var(--highlight-color)}.gcp-slider__actions{position:absolute;bottom:0;left:0;z-index:10;display:inline-flex;width:101px;height:35px;background:var(--body-bg);color:var(--text-color);justify-content:center;align-items:center;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:1px;line-height:1}.gcp-slider__actions--revert{left:auto;right:0}.gcp-slider__actions>.template-icon{margin-left:5px;font-size:16px}@media(max-width:639.98px){} .why-widget{background:var(--primary-color);color:var(--inverse-font-color);text-align:center;padding:50px 20px}.why-widget .title{color:var(--inverse-font-color)}.why-widget__container{max-width:1060px;margin:auto}.why-widget__items>*{width:calc(100%/2.85)}.why-widget__image{transform:scale(.8);transition:all .4s ease;position:relative;height:0;padding-bottom:100%;background:var(--text-color)}.why-widget__image:after{content:'';background:linear-gradient(180deg,rgba(0,0,0,0) 39.38%,rgba(0,0,0,.7) 100%);position:absolute;bottom:0;left:0;width:100%;height:100%;opacity:0}.why-widget__box:not(.uk-transition-slide-bottom) .why-widget__content:not(.uk-transition-slide-bottom){opacity:0}.why-widget__image>img{width:100%;height:100%;position:absolute;top:0;left:0}.why-widget__box.uk-active .why-widget__image{transform:scale(1)}.why-widget__box.uk-active .why-widget__image:after{opacity:1}.why-widget__text{position:absolute;bottom:0;left:0;right:0;width:100%;padding:0 25px 25px}.why-widget__media{position:relative}.why-widget__title:last-child{margin:0}.why-widget__title{filter:opacity(1)}.why-widget__content{margin-top:25px}.why-widget__head{margin-bottom:30px}.why-widget__controls .slider-controls__slidenav{position:absolute;top:50%;transform:translateY(-50%);color:var(--secondary-color);width:70px;height:70px;font-size:26px}.why-widget__controls .slider-controls__slidenav--left{left:0}.why-widget__controls .slider-controls__slidenav--right{right:0}.why-widget__controls .slider-controls__slidenav:hover,.why-widget__controls .slider-controls__slidenav:focus-visible{color:var(--inverse-font-color);opacity:.5}.why-widget__footer{margin-top:30px;justify-content:center}@media(max-width:1399.98px){}@media(max-width:1199.98px){}@media(max-width:1023.98px){.why-widget__items>*{width:100%}.why-widget__media{max-width:350px;margin:auto}.why-widget__content{max-width:350px;margin:25px auto 0;opacity:1!important;--uk-translate-y:0}.why-widget__text{opacity:1!important;--uk-translate-y:0}.why-widget__controls .slider-controls__slidenav{position:static;transform:unset}.why-widget__controls .slider-controls__slidenav--left{}.why-widget__controls{justify-content:center;position:absolute;bottom:-170px;left:0;right:0;margin:auto}.why-widget__slider{}.why-widget{padding-bottom:180px}}@media(max-width:959.98px){}@media(max-width:767.98px){.why-widget{padding-left:0;padding-right:0;padding-bottom:160px;padding-top:40px}}@media(max-width:639.98px){.why-widget{padding-bottom:140px}.why-widget__controls{bottom:-150px}.why-widget__footer{margin-top:20px}}@media(max-width:575px){}.milestone .why-widget{background:#fbf3e3}.why-widget .title{color:var(--h2-font-color)}.milestone .why-widget .why-widget__media .title{color:var(--inverse-font-color)}.milestone .why-widget .why-widget__content{color:var(--h2-font-color)}.milestone .why-widget .why-widget__controls .slider-controls__slidenav{background:var(--primary-color);color:var(--inverse-font-color);border:none;opacity:.7}.milestone .why-widget .why-widget__controls .slider-controls__slidenav{background:var(--primary-color);color:var(--inverse-font-color);border:none;opacity:.7}.milestone .why-widget .why-widget__controls .slider-controls__slidenav:hover,.milestone .why-widget .why-widget__controls .slider-controls__slidenav:focus-visible{opacity:.7}.milestone .why-widget .why-widget__controls .slider-controls__slidenav.template-icon-right-arrow{flex-direction:row-reverse}@media(max-width:639.98px){.milestone .why-widget .why-widget__controls{bottom:-120px}} .footer-widget{background:var(--bg-footer);color:var(--footer-color);font:var(--footer-fonts);font-weight:normal;padding:60px 0 0;position:relative;margin-top:90px}.footer-widget::before{content:" ";background:url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/rooms-waves-cream.svg")no-repeat;position:absolute;top:-160px;left:0;width:100%;height:199px;pointer-events:none;background-size:cover;z-index:0}[data-page-name="milestone"] .footer-widget{margin-top:0}[data-page-name="milestone"] .footer-widget::before{display:none}.footer-widget__container{padding-bottom:150px}.footer-widget__container>.uk-container{padding-left:40px;padding-right:40px}.footer-widget .title,.footer-widget a,.footer-widget .uk-link{color:var(--footer-color);font-family:var(--semibold-text)}.footer-widget a:hover,.footer-widget a:focus{color:var(--tertiary-color)}.footer-widget__grid{justify-content:space-between}.footer-widget__logo{margin-bottom:18px}.footer-widget__logo a:focus-visible{display:block}.footer-widget__logo .footer__logo:focus-visible{display:block}.footer-widget__address,.footer-widget__contact{font-size:15px}.footer-widget__col.footer-address{text-align:center;line-height:26px;padding-top:30px}.footer-widget__contact a:hover svg path,.footer-widget__contact a:focus svg path{fill:var(--tertiary-color)}.footer-widget__social{padding:20px 0 0 0;display:flex;column-gap:30px;justify-content:center}.footer-signup__logo{width:109px;margin:0 auto 30px}.footer-widget-newsletter__title{letter-spacing:0;font:var(--h2-title-fonts)!important;text-align:center}.footer-widget-newsletter__input{height:36px;color:var(--primary-color);background:transparent;border-width:0 0 1px;border-color:var(--primary-color)}.footer-widget-newsletter__input::placeholder{color:var(--primary-color)}.footer-widget-newsletter__input:focus,.footer-widget-newsletter__input:focus,.footer-widget-newsletter__input:focus{background:transparent}.footer-widget-newsletter__grid{font-family:var(--text-fonts);margin-left:-20px;margin-bottom:30px}.footer-widget-newsletter__grid>*{padding-left:20px}.footer-widget-newsletter__grid .uk-grid-margin{margin-top:20px}.footer-widget-newsletter__control{margin-bottom:5px;position:relative}.footer-widget-newsletter__control label{font-family:var(--text-fonts);margin-bottom:16px;text-transform:capitalize;letter-spacing:.24px;font-size:12px;padding:0 0 0 24px;position:relative;display:block;line-height:normal}.footer-widget-newsletter__control label:focus-visible{width:80%}.footer-widget-newsletter__control label a{font-family:var(--text-fonts);text-decoration:underline}.footer-widget-newsletter__checkbox{height:12px;width:12px;background:transparent;position:absolute;margin:1px 0 0 0;left:0;border:solid 1px var(--border-color)}.footer-widget-newsletter__checkbox:focus{border:solid 1px var(--border-color)}.footer-widget-newsletter__action{margin:15px 0 0 0;position:absolute;right:70px;bottom:60px}.footer-widget__nav-item a{font:var(--footer-fonts);font-size:13px;letter-spacing:.65px;text-transform:uppercase;font-family:var(--semibold-text)}.footer-widget__nav-item a.nav.navON{text-decoration:underline}.footer-widget__nav-list{display:flex;justify-content:space-between}.footer-widget__nav{border:solid 1px var(--primary-color);border-width:1px 0;padding:0 30px;margin:40px 0 0 0;height:76px;line-height:76px}.footer-widget__copyright{padding:30px 40px;justify-content:space-between;display:flex;font-size:11px}.footer-widget__copyright span{margin:0 30px}.footer-widget-newsletter__control .uk-checkbox:checked{background-repeat:no-repeat;background-position:center;border:solid 1px var(--inverse-font-color)!important;background-color:var(--inverse-font-color)!important}.footer-widget .input-error{border-color:var(--inverse-error-message-color)!important}.footer-widget .error-message{color:var(--error-message-color);position:static!important;margin-top:0!important;text-transform:none}.footer-widget__col--newsletter{max-width:847px;margin:auto;background:var(--body-bg);border-radius:30px;padding:50px 70px 40px;position:relative}.footer-widget .secondRow{margin-top:40px}.footer-widget__col.footer-widget__col--logo{padding-left:120px}.footerBottom{background:var(--body-bg);padding:50px 0 0;position:relative}.footer9__awards{display:flex;justify-content:end;align-items:center}.footer9__awards .footer9__submenu-item{margin-left:50px}.footer9__awards .footer-awards-logo:focus-visible{background:transparent}.footerBottom .alohaWrap{position:relative;margin-bottom:-130px;z-index:9}.footerBottom .footer-aloha__logo{text-align:center;margin-top:50px}.footerBottom .umbrella{text-align:center;margin-top:-30px}.footer-widget.addBg .wave-animation-footer-top{width:100%;height:185px;position:relative;background-image:url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/hero-wave.svg");background-repeat:repeat-x;margin-top:-185px;animation:wave-scroll-left-right 400s linear infinite}.footer-widget.addBg .footerBottom .wave-animation-container{width:100%;height:130px;position:relative;background-image:url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/site-images/svg/footer-bottom-wave-new.svg");background-repeat:repeat-x;background-size:auto;animation:wave-scroll 400s linear infinite}.copyright-home{display:none}.milestone .copyright-home{display:block}.revinatescript fieldset{border:none;padding:0;margin:0}.revinatescript .footer-widget-newsletter__action{position:relative;display:flex;justify-content:flex-end;right:0;bottom:0}.revinatescript .uk-button-primary:disabled:hover::before{height:0}.revinatescript .uk-button-primary:disabled:hover{color:#999;border-color:#e5e5e5}@media(min-width:1700px){.footerBottom::before{top:-170px}}@media(min-width:1400px){.footer-widget__col.footer-address{padding-left:200px}}@media(min-width:960px){.footer-widget__col--newsletter{width:100%}}@media(max-width:1399.98px){}@media(max-width:1199.98px){.footer-widget__nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:25px}}@media(max-width:1023.98px){}@media(max-width:959.98px){.footer-widget{padding:60px 0;margin-top:80px}.footer-widget::before{top:-70px;height:120px}.footer-widget__social{padding:30px 0 0 0;display:flex}.footer-widget-newsletter__title{padding-right:0}.footer-widget__nav{padding:0}.footer-widget__copyright span{margin:0}}@media(min-width:1201px)and (max-width:1400px){.footer-widget.addBg .footerBottom .wave-animation-container{background-size:auto}}@media(min-width:768px)and (max-width:1200px){.footer-widget-newsletter__control label{width:70%}.footer-widget__nav-item a{font-size:9px}.footer-widget__nav-list{gap:10px}.footer-widget.addBg .footerBottom .wave-animation-container{background-size:auto}}@media(max-width:767.98px){.footer-widget{padding:50px 0 60px}.footer-widget__container>.uk-container{padding-left:20px;padding-right:20px}.footer-widget__grid{flex-direction:column}.footer-widget__social{padding:30px 0 0 0;justify-content:center}.footer-widget__col--logo{text-align:center}.footer-widget__col--newsletter{max-width:100%;text-align:center;padding:50px 20px 40px;border-radius:20px}.footer-widget-newsletter__title{padding-right:0;font:var(--mob-h3-title-fonts)!important}.footer-widget-newsletter__control{text-align:left}.footer-widget-newsletter__action{margin:25px 0 0 0;position:unset}.footer-widget__nav{margin:40px 0 0 0;padding:20px 0;width:100%;height:auto}.footer-widget__nav-list{column-gap:30px;flex-flow:wrap;row-gap:20px;justify-content:space-between}.footer-widget-newsletter__grid{margin-bottom:20px}.footer-widget-newsletter__checkbox{margin:3px 0 0 0;height:12px;width:12px}.footer-widget__grid>*{width:100%}.footer-widget__copyright{padding:30px 20px;flex-direction:column;text-align:center;line-height:20px}.copyright-home{margin-top:8px!important}.footer-widget-newsletter__control label{letter-spacing:.2px;font-size:10px}.footer-widget__col.footer-widget__col--logo{padding-left:0}.footer-widget__col.footer-address{padding-top:0}.footer-widget__nav-item{width:45%;text-align:center;line-height:20px}.footerBottom .left{width:100%;text-align:center;margin-bottom:30px}.footerBottom .right{width:100%}.footer9__awards .footer9__submenu-item{margin-left:0}.footer9__awards{display:flex;justify-content:space-between}.footer9__awards .footer9__submenu-item+.footer9__submenu-item{margin-left:40px}.footer9__awards .footer-awards-logo{width:70px;height:70px}.footer-widget.addBg .footerBottom .wave-animation-container{height:132px;background-size:auto}.footerBottom .umbrella{margin-top:-14px}.footer-widget .secondRow{margin-top:60px}}@media(max-width:639.98px){}.ng-star-inserted .footer-widget__nav-item a{margin-top:30px}@media(max-width:575px){} :root{--header-height:120px}body{padding-top:var(--header-height)}.header{position:fixed;z-index:999;background:#427d8a;color:var(--header-color);padding:0 20px;left:0;top:0;width:100%;min-height:var(--header-height);display:flex;align-items:center}.header.is-fixed{border-bottom:1px solid var(--border-color);background:#427d8a}.header__container{width:100%;padding:0;max-width:100%!important}.header__grid{align-items:center;margin-left:-20px}.header__grid>*{padding-left:20px}.header__col--center{text-align:right}.header__col--right{display:flex;align-items:center}.header__logo{width:var(--logo-width);height:var(--logo-height);display:inline-block;align-items:center;color:var(--header-color)}.header__logo:hover,.header__logo:focus{color:var(--inverse-font-color);filter:opacity(1)}.header__logo>*{width:100%;height:100%;object-fit:contain}.header__logo path{fill:inherit}.header__logo:focus-visible{outline:1px solid #fff;box-shadow:0 0 2px #fff inset;-webkit-box-shadow:0 0 2px #fff inset;-ms-box-shadow:0 0 2px #fff inset;-moz-box-shadow:0 0 2px #fff inset}.header-collapsible{display:flex;justify-content:flex-end}.header__phone{display:inline-flex;align-items:center;font:var(--header-fonts);color:var(--header-color);text-transform:uppercase;padding-left:5px}.header__phone .template-icon{margin-right:10px;font-size:20px;line-height:1}.header__bookstay{margin-left:30px;background:transparent;color:var(--primary-cta-hover-color);border-color:var(--inverse-font-color);background:var(--inverse-font-color)}.header__bookstay .text{color:var(--primary-cta-hover-color)}.header__bookstay:before{background:transparent;border-color:var(--inverse-font-color)}.header__bookstay:hover,.header__bookstay:focus{color:var(--inverse-font-color);border-color:var(--inverse-font-color)}.header__bookstay:hover .text,.header__bookstay:focus .text{color:var(--inverse-font-color)}.header__bookstay:hover:before,.header__bookstay:focus:before{background:transparent}.navmenu__list{padding:0;margin:0;list-style:none;display:flex;align-items:center;justify-content:flex-end}.navmenu__list.mobile-only{display:none}.navmenu__list-item{margin-right:4px;position:relative}.ng-star-inserted .navmenu__list-item{margin-right:0}.navmenu__list-item:last-child{margin-right:0}.navmenu__list-link{display:inline-flex;padding:15px 10px;position:relative;font:var(--header-fonts);text-transform:var(--header-fonts-text-transform);color:var(--header-color);letter-spacing:.7px;font-weight:400;filter:opacity(1)}.navmenu__list-link:hover,.navmenu__list-link:focus-visible{color:var(--inverse-font-color);text-decoration:underline}.navmenu-dropmenu__link:hover,.navmenu-dropmenu__link:focus-visible{color:var(--highlight-color);text-decoration:underline}.navmenu__list-link:focus-visible{outline:1px solid #fff;box-shadow:0 0 2px #fff inset;-webkit-box-shadow:0 0 2px #fff inset;-ms-box-shadow:0 0 2px #fff inset;-moz-box-shadow:0 0 2px #fff inset}.navmenu-dropmenu__link.nav.navON{text-decoration:underline}.navmenu__list-item:last-child .navmenu__list-link{padding-right:0}.navmenu__dropdown>a{position:relative;padding:10px;filter:opacity(1)}.navmenu-dropmenu{padding:20px 0;margin:0;min-width:265px;background:var(--body-bg);overflow:auto;max-height:70vh;--uk-position-offset:15px;text-align:left;box-shadow:0 5px 15px rgba(0,0,0,.1)}.navmenu-dropmenu__link{display:block;padding:8px 20px;text-transform:var(--header-fonts-text-transform);font:var(--header-fonts);color:var(--primary-color);text-align:center;letter-spacing:.7px}.navmenu-dropmenu__link.uk-disabled{opacity:.2}.navmenu__list-link:hover:after,.navmenu__list-link[aria-expanded="true"]:after,.navmenu__list-link.navON:after{opacity:1}.navmenu__list-link.navON,.navmenu__more-link.navON{text-decoration:underline}.headerLink{display:flex;position:relative;top:10px;padding-left:0}.headerLink li{list-style:none}.headerLink li:last-child::before{content:"";background:#fff;height:17px;width:1px;position:absolute;top:20px;left:-2px}.header .footer-widget__social{display:none}@media(min-width:1400px){.header__container{max-width:1420px}}@media(min-width:768px){.header__toggler,.navmenu__list-item--onlymob,.navmenu__list-link--btn{display:none!important}}@media(max-width:1399.98px){.header{padding:15px 20px}.navmenu__list-item{margin-right:0;position:relative}.navmenu__list-link{padding:10px 10px}:root{--header-height:115px}.header__logo{width:150px;height:84px}.header__phone,.navmenu__list-link,.navmenu-dropmenu__link{font-size:12px}.header__bookstay{font-size:12px;padding:10px 20px}.header__phone .template-icon{margin-right:10px;font-size:16px}}@media(max-width:1199.98px){}@media(max-width:1023.98px){.header__logo{width:105px;height:59px}.header__phone,.navmenu__list-link,.header__bookstay{font-size:9px;padding:10px 5px!important}.headerLink li:last-child::before{height:14px;left:0;top:11px}.header__col--right{padding-left:0}}@media(min-width:1400px)and (max-width:1500px){.navmenu__list-link{font-size:14px}}@media(min-width:1290px)and (max-width:1399.98px){.header__bookstay{font-size:18px;padding:10px 30px 6px!important;margin-left:10px}.header__phone,.navmenu__list-link{font-size:14px}.headerLink li:last-child::before{top:9px}.headerLink{top:10px}}@media(min-width:1180px)and (max-width:1290px){.header__bookstay{font-size:18px;padding:10px 30px 6px!important;margin-left:10px}.header__phone,.navmenu__list-link{font-size:12px}.headerLink li:last-child::before{top:9px}.headerLink{top:10px}}@media(min-width:1024px)and (max-width:1180px){.header__logo{width:100px;height:56px}.header__bookstay{font-size:18px;padding:10px 30px 6px!important;margin-left:10px}.header__phone,.navmenu__list-link{font-size:9px}.headerLink li:last-child::before{top:9px}.headerLink{top:10px}}@media(min-width:960px)and (max-width:1023.98px){.header__bookstay{font-size:18px;padding:10px 30px 6px!important;margin-left:10px}.header__phone,.navmenu__list-link{font-size:9px}.headerLink{top:8px}}@media(max-width:959.98px){.headerRight{position:fixed;bottom:0;left:0;right:0;background:var(--inverse-font-color);color:var(--inverse-font-color);font:var(--primary-cta-fonts);height:60px;margin:0;display:flex}.header__phone .template-icon{font-size:16px;margin:0}.header__phone-text{display:flex!important;color:var(--highlight-color)!important;align-items:center;padding:20px 0 15px;width:40%;justify-content:center}.header__bookstay .text{color:var(--inverse-font-color)}.header__bookstay{background:var(--primary-cta-font-color);border-radius:0;height:60px;width:60%;font-size:22px;padding:20px 0 15px;margin-left:0}.header__phone-text .header__phone-no{margin-left:15px}.header__phone-text>.template-icon{margin-top:-2px}}@media(min-width:768px)and (max-width:1200px){.headerLink{top:7px}}@media(max-width:767.98px){:root{--header-height:78px}body{padding-top:var(--header-height)}.header .footer-widget__social{display:flex}.header .footer-widget__social a{color:var(--inverse-font-color)}.header{min-height:65px;z-index:101;padding:12px;display:flex;align-items:center}.header__col--left{order:2;flex:1;min-width:1px;text-align:center;position:absolute;left:50%;transform:translateX(-50%);padding-left:0!important}.header__col--center{order:1;flex:0;min-width:unset}.header__col--right{order:3}.header__container{width:100%}.is-bookstay-active .header__bookstay{display:none}.header__col--right{display:flex;align-items:center}.header__toggler-btn{background:transparent;border:0;display:flex;padding:3px 0;margin:0;font-size:28px;line-height:1;color:var(--header-color);cursor:pointer;align-items:center;min-width:28px;justify-content:flex-end}.header__toggler-btn .is-togglemenu-active{display:none}.header__toggler-btn .is-togglemenu-close{display:block}.is-header-active{overflow:hidden}.is-header-active .header__toggler-btn .is-togglemenu-active{display:block;font-size:20px}.is-header-active .header__toggler-btn .is-togglemenu-close{display:none}.header__phone{min-width:18px;line-height:1;display:block}.header__phone-label{display:none}.header__phone-text>.template-icon{display:block;font-size:18px;font-weight:normal}.header__grid{margin-left:-30px;justify-content:space-between}.header__grid>*{padding-left:30px}.header-collapsible{position:fixed;top:var(--header-height,0);left:-100%;width:100%;height:calc(100vh - var(--header-height,0));z-index:9;overflow:auto;-webkit-overflow-scrolling:touch;transition:left .4s ease;padding-top:35px;padding-bottom:70px;display:block;background:#427d8a;z-index:99}.header-collapsible:after{content:'';background:url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/menu-bg-mobile.svg")no-repeat;position:absolute;left:0;bottom:0;height:84px;width:100%;background-size:100%}.is-header-active .header-collapsible{left:0}.navmenu__list{display:block;position:relative;z-index:10;padding:0 20px;height:60vh;overflow-y:scroll}.navmenu__list.mobile-only{display:block}.navmenu__list.desktop-only{display:none}.navmenu__list-item+.navmenu__list-item{margin-top:0}.navmenu__list-link{display:flex;padding:20px 15px;font:var(--body-text-fonts);text-transform:var(--header-fonts-text-transform);text-align:left;justify-content:center;text-transform:uppercase;font-size:28px;letter-spacing:1.4px}.headerLink .navmenu__list-link{font-size:12px;padding:8px 16px 8px 0}.headerLink li:last-child::before{top:12px;left:0}.navmenu-dropmenu{position:relative!important;box-shadow:none!important;background:transparent;padding:0 0 10px;top:0!important;left:0!important;right:0!important;bottom:auto!important;max-width:100%!important;list-style:none;margin-top:-10px;display:none!important}.navmenu__list-item.navmenu__dropdown.active_menu .navmenu-dropmenu{display:block!important}.navmenu-dropmenu__link{font:var(--body-text-fonts);padding:7px 20px;color:var(--inverse-font-color)}.navmenu__dropdown>a:before{content:'';font-family:'icoamenity'!important;position:absolute;right:0;top:50%;transform:translateY(-50%);background-size:contain;transition:all .4s ease;line-height:1}.navmenu__dropdown.active_menu>a:before{content:'';transform:translateY(-50%)}.navmenu__dropdown>a.navmenu__list-link::before{display:none}.navmenu__dropdown>a.js-navmenu-dropmenu-trigger::before{font-size:22px;position:relative;top:0;transform:none;color:var(--inverse-font-color)}.navmenu__list-link.navON,.navmenu__more-link.navON{}.header__top-left,.header__top-right{width:60px}.header__top-center{width:calc(100% - 60px*2);width:-webkit-calc(100% - 60px*2);max-width:calc(100% - 60px*2);max-width:-webkit-calc(100% - 60px*2)}.navmenu__dropdown>a,.navmenu__list-item>a{padding:8px 30px 8px 0}.navmenu__dropdown>a.js-navmenu-dropmenu-trigger,.navmenu__list-item>a.js-navmenu-dropmenu-trigger{position:absolute;right:0;top:7px;padding:10px 0 10px 10px}.navmenu__list-link:hover,.navmenu__list-link:focus-visible,.navmenu-dropmenu__link:hover,.navmenu-dropmenu__link:focus-visible{color:var(--header-color)}.is-header-active .header{background:#427d8a!important;border-bottom-color:transparent}.header.is-fixed{box-shadow:0 41px 41px 0 #00000017}.header__logo{width:var(--mob-logo-width);height:var(--mob-logo-height)}}@media(max-width:639.98px){}@media(max-width:575px){}@media(min-width:768px){.has-transparent-header{padding-top:0}.has-transparent-header .header:not(.is-fixed){background:transparent}.has-transparent-header .header:not(.is-fixed) .header__logo{color:var(--inverse-font-color);filter:opacity(1)}.has-transparent-header .header:not(.is-fixed) .navmenu__list-link,.has-transparent-header .header:not(.is-fixed) .navmenu__dropdown>a:before,.has-transparent-header .header:not(.is-fixed) .header__phone,.has-transparent-header .header:not(.is-fixed) .header__phone-text{color:var(--inverse-font-color);filter:opacity(1)}.has-transparent-header .header:not(.is-fixed) .navmenu__list-link:hover,.has-transparent-header .header:not(.is-fixed) .navmenu__list-link:focus-visible,.has-transparent-header .header:not(.is-fixed) .header__phone-text:hover,.has-transparent-header .header:not(.is-fixed) .header__phone-text:focus-visible{color:var(--inverse-font-color);text-decoration:underline}.has-transparent-header .header:not(.is-fixed) .header__bookstay{}.has-transparent-header .header:not(.is-fixed) .header__bookstay:hover,.has-transparent-header .header:not(.is-fixed) .header__bookstay:focus-visible{}}@media(max-width:1399.98px){}@media(max-width:1199.98px){}@media(max-width:1023.98px){}@media(max-width:959.98px){}@media(max-width:767.98px){.has-transparent-header{padding-top:0}.has-transparent-header .header:not(.is-fixed){background:transparent}.has-transparent-header .header:not(.is-fixed) .header__logo{color:var(--inverse-font-color);filter:opacity(1)}.has-transparent-header .header:not(.is-fixed) .navmenu__list-link,.has-transparent-header .header:not(.is-fixed) .navmenu__dropdown>a:before,.has-transparent-header .header:not(.is-fixed) .header__phone,.has-transparent-header .header:not(.is-fixed) .header__phone-text{color:var(--inverse-font-color);filter:opacity(1)}.has-transparent-header .header:not(.is-fixed) .navmenu__list-link:hover,.has-transparent-header .header:not(.is-fixed) .navmenu__list-link:focus-visible,.has-transparent-header .header:not(.is-fixed) .header__phone-text:hover,.has-transparent-header .header:not(.is-fixed) .header__phone-text:focus-visible{color:var(--inverse-font-color);text-decoration:underline}.has-transparent-header .header:not(.is-fixed) .header__bookstay{}.has-transparent-header .header:not(.is-fixed) .header__bookstay:hover,.has-transparent-header .header:not(.is-fixed) .header__bookstay:focus-visible{}}@media(max-width:639.98px){}@media(max-width:575px){}.page-component-mi-block .header{position:static;background:var(--bg-header)!important;color:var(--header-color)!important}.page-component-mi-block .navmenu__list-link,.page-component-mi-block .navmenu__dropdown>a:before,.page-component-mi-block .header__phone,.page-component-mi-block .header__phone-text,.page-component-mi-block .header__bookstay,.page-component-mi-block .header__logo{color:var(--header-color)!important}.page-component-mi-block .header__bookstay{border-color:var(--secondary-cta-font-color)!important}.has-transparent-header .hr30-widget{}@media(max-width:767.98px){.vcomponent:has(.header)~ .VComponent .hr30-widget{height:calc(100vh - var(--header-height,0)- 55px);}}@media(max-width:400px){.navmenu__list-link{letter-spacing:1px;font-size:24px}} .bookstay{background:transparent;top:-150%;transition:all ease 1s}.bookstay.uk-open{top:0;transition:all ease 1s}.bookstay *{color:var(--primary-color)}.bookingWrap{max-width:1066px;display:flex;margin:40px auto 100px;justify-content:space-between;position:relative;z-index:99}.bookingWrap #booking-widget{width:515px;margin-right:100px}.bookstay__box{width:100%;max-width:100%;margin-right:0;margin-left:auto;background:var(--body-bg);color:var(--inverse-font-color);padding:50px 50px 0;display:flex;height:100vh}.bookstay__box .title{color:var(--primary-color);font:var(--h2-title-fonts)}.bookstay__media{margin-bottom:40px;background:var(--primary-color);text-align:right;width:437px;border-radius:30px;height:566px;position:relative;bottom:20px}.bookstay__media img{border-radius:30px;box-shadow:0 4px 8px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.19)}body.is-bookstay-active .bookstay{top:0;display:flex!important}.bookstay .uk-modal-dialog{background:transparent;padding:0;z-index:2}.bookstay .uk-modal-dialog:after{position:fixed;content:'';top:0;left:0;width:100%;height:100%;background:var(--secondary-color);z-index:-1;opacity:0}.bookstay__close{background:transparent;padding:10px;min-height:unset;cursor:pointer;border:0;color:var(--primary-color);font:var(--body-text-fonts);font-weight:bold;font-size:26px;display:inline-flex;margin-bottom:30px;left:50%;transform:translateX(-50%);position:absolute;top:20px}.bookstay__close>.template-icon{}.bookstay__close:hover,.bookstay__close:focus-visible{color:var(--highlight-color)}.bookstay__close .template-icon:hover:before{color:var(--highlight-color)}.bookstay-form__title{text-align:center;margin-bottom:15px}.bookstay-form__group{position:relative;padding:0}.bookstay-form__grid{margin-left:-80px}.bookstay-form__grid>*{padding-left:80px}.bookstay-form__box{border-bottom:1px solid var(--border-color);padding:0;text-align:left;position:relative;padding-bottom:25px}.bookstay-form__box+.bookstay-form__box{border-top:0;margin-top:30px}.bookstay-form__control{background:transparent!important;color:var(--primary-color);border-color:transparent;padding-left:0;padding-right:0;height:36px;font:var(--h4-title-fonts)}.bookstay-booking,.bookstay-reminder{padding-bottom:40px}.bookstay-form__label{margin-bottom:10px;display:block;font:var(--h5-title-fonts);color:var(--primary-color);font-size:25px;text-transform:uppercase}.bookstay-form__grid>:not(.uk-first-column)::before{border-color:var(--border-color)}.bookstay-form__actions{margin-top:10px;text-align:center;width:100%}.bookstay__toggle-btn{margin-top:10px;text-align:center}.bookstay__toggle-btn>.uk-button{text-transform:uppercase;font-family:var(--title-fonts);font-size:18px;font-weight:700}.bookstay-form__control{background:transparent!important;padding:0!important;position:relative;z-index:2;font:var(--reservation-widget-input-fonts);border:none;color:var(--primary-color)!important;font-family:var(--title-fonts);padding:0;height:auto;margin-top:10px}.bookstay-form__control:focus{color:var(--inverse-font-color)}.bookstay-form__group--dropdown:after{}.bookstay-form__group--inline{align-items:center;gap:50px}.bookstay-form__group--inline .bookstay-form__label{margin:0}.bookstay-form__submit{width:144px}.bookstay-reminder{display:none}.open-remind-later .bookstay-booking{display:none}.open-remind-later .bookstay-reminder{display:block}.bookstay .ui-datepicker-trigger{bottom:20px;top:unset}.bookstay-form .form-control-container{padding:15px 30px 10px;margin-bottom:20px!important;border:1px solid var(--primary-color);position:relative}.side-widget__form-control{background:transparent;font:var(--reservation-widget-input-fonts);border:none;color:var(--primary-color)!important;font-family:var(--title-fonts);padding:0;height:auto;margin-top:10px}.bookstay-form .form-control-label{font:var(--h5-title-fonts);color:var(--primary-color);font-size:25px;text-transform:uppercase}.bookstay-form .uk-input::placeholder{color:var(--primary-color)}.bookstay-form.uk-grid>*{padding-left:10px}.wave-animation-booking{width:100%;height:166px;position:relative;background-image:url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/menu-wave-bg.svg");background-repeat:repeat-x;background-size:100%;margin-top:-166px}.ctrl-btns{display:flex;flex-direction:column;position:absolute;right:20px;bottom:14px;row-gap:8px;width:14px}.ctrl-btns a{color:var(--primary-color)}.ctrl-btns a .template-icon-plus{font-size:20px}.ctrl-btns a .template-icon-minus-icon{font-size:2px}.bookstay-form .input-error~.error-message{bottom:-30px;color:var(--error-message-color)}.reminder-message{text-align:center;font-weight:bold}@media(min-width:1800px){.bookingWrap{margin:140px auto 100px}.wave-animation-booking{background-size:100%;height:220px;margin-top:-220px}}@media(max-width:1399.98px){}@media(max-width:1199.98px){}@media(min-width:1201px)and (max-width:1400px){.wave-animation-booking{margin-top:-134px}}@media(min-width:768px)and (max-width:1200px){.bookstay__media{display:none}.bookingWrap #booking-widget{margin-right:0}.wave-animation-booking{height:175px;background-size:214%;margin-top:0;position:absolute;bottom:0;left:0}}@media(max-width:767.98px){.bookstay-form .input-error~.error-message{bottom:-24px}.booking-modal-open .headerRight{display:none}.bookstay__box{width:100%;padding:20px 20px 0 20px;height:100vh}.bookstay__close{}.bookstay__media{display:none}.bookstay__media>img{display:block;margin:auto}.bookstay-form__title{font:var(--mob-h2-title-fonts)}.bookstay-form__grid>*{width:100%;padding:0}.bookstay-form__grid{margin:0}.bookstay-form__box{padding:0;border-top:0;padding-bottom:5px}.bookstay-form__grid>.uk-grid-margin::before{left:0!important;border-color:var(--border-color)!important;top:0!important}.bookstay-form__grid>.uk-grid-margin{margin-top:5px!important;!i;!;padding-top:25px;border-top:1px solid var(--border-color)}.bookstay-form__group{padding:0}.bookstay__box .bookstay-form__title{margin-bottom:20px;font-size:45px}.bookstay-form__box+.bookstay-form__box{margin-top:15px}.bookstay-form__control{font:var(--mob-h4-title-fonts);height:30px}.bookstay-form__group--inline{justify-content:space-between}.bookstay-form__group--inline .bookstay-form__control{font-size:15px;text-transform:uppercase;margin-top:5px}.bookstay-form__group--dropdown:after{bottom:3px}.bookstay__close-text{display:none}.bookingWrap{flex-direction:column;width:100%}.bookingWrap #booking-widget{width:auto;margin-right:0}.booking-modal-open .mobile-logo,.mobile-logo{display:flex;justify-content:end;padding-right:15px;background:var(--body-bg);padding:20px 15px 0 0}.booking-modal-open .mobile-logo .logoArea,.mobile-logo .logoArea{position:relative;left:0;transform:translateX(-50%)}.booking-modal-open .header__logo-img.uk-svg{fill:var(--bg-header)}.booking-modal-open .headerLink .navmenu__list-link{color:var(--primary-color);font:var(--mob-header-fonts);font-size:12px;font-weight:600}.booking-modal-open .headerLink li:last-child::before{top:9px;background:var(--primary-color)}.booking-modal-open .bookstay__close,.bookstay__close{position:absolute;left:33px;top:28px;z-index:9;font-size:20px}.bookstay-form .form-control-container{padding:10px 20px 5px;margin-left:5px}.bookstay .ui-datepicker-trigger{bottom:5px}.bookstay-form .uk-width-1-3{max-width:100%;width:100%}.bookstay-form .form-control-label{font-size:20px}.ctrl-btns{row-gap:0}.side-widget__form-control{margin-top:5px}.wave-animation-booking{height:86px;background-size:200%;margin-top:0;position:absolute;bottom:-16px;left:0}.bookstay-form__group--inline .bookstay-form__label{font-size:20px}}@media(max-width:639.98px){}@media(max-width:420px){.wave-animation-booking{height:80px}}@media(max-width:400px){.bookstay__box{height:100%}} /* Home video */ /* Video */ .hero-image { width: 100%; /*max-width: 1920px;*/ margin: auto; position: relative; overflow: hidden; height: auto; background-color: var(--primary-color); } .hero-image:before { position: absolute; content: ''; width: 100%; height: 100%; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 47.75%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 52.25%, rgba(0, 0, 0, 0.3) 100%); } .home-video.addBg .wave-animation-container-banner { width: 100%; height: 122px; position: relative; background-image: url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/hero-wave-new.svg"); background-repeat: repeat-x; margin-top: -122px; z-index: 9; animation: wave-scroll 400s linear infinite; } .home-video.addBg .home-video__wrapper.hero-image::after { content: ""; background-image: url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/hero-waves-blue.svg"); background-repeat: no-repeat; height: 100px; width: 100%; position: absolute; z-index: 0; left: 0; bottom: 25px; } .home-video .edit-overlay.ps-system-generated-edit-icon { margin-top: 40px; } .home-video__wrapper > img { height: 100vh; object-fit: cover; width: 100%; } .home-video__container { margin: 0 auto; max-width: 100%; height: auto; } .hero-content { position: absolute; bottom: 62px; left: 0; right: 0; margin: 0 auto; z-index: 2; text-align: center; max-width: 1100px; } .hero-content *, .hero-content .title--tagline { color: var(--inverse-font-color); } .hero-content .title--xxl { font-size: var(--xl-title-fonts); line-height: 90%; margin-bottom: 90px; font-size: 100px; filter: opacity(1); } .hero-content .title--xxl:focus-visible { outline: 1px solid #fff; box-shadow: 0 0 2px #fff inset; -webkit-box-shadow: 0 0 2px #fff inset; -ms-box-shadow: 0 0 2px #fff inset; -moz-box-shadow: 0 0 2px #fff inset; } .hero-content .title--tagline { margin-bottom: 28px; } .view-main { text-transform: uppercase; font-weight: 600; position: relative; } .home-video__container.cms6, .home-video.cms6 { height: 500px; } .home-video__block { width: 100%; height: 100%; } .home-video__title { z-index: 1; max-width: 700px; color: transparent; text-shadow: 0 0 0 rgba(255, 255, 255, 1); text-align: center; position: absolute; top: 52%; left: 0; transform: translateY(-40%); right: 0; margin: 0 auto; } .home-video__block video { width: 100%; height: 100vh; object-fit: cover; object-position: bottom; } .home-video__block video.video-swap.cms6 { height: 500px; } .home-video__actions { z-index: 2; position: absolute; left: 5px; bottom: 130px; } .home-video__trigger { width: 30px; height: 30px; min-height: 30px; color: var(--primary-color); background: #fff; border-radius: 50px; display: flex; padding: 0; align-items: center; justify-content: center; transition: all 0.3s ease-out; margin: 30px; text-transform: capitalize; padding: 0 10px; line-height: 30px; min-width: auto; min-height: unset; } .home-video__actions.is-active .home-video__trigger, .home-video__trigger:hover, .home-video__trigger:focus { width: 80px; height: 80px; color: #fff; background-color: var(--highlight-color); flex-direction: column; margin: 10px; } .home-video__trigger:hover .home-video__trigger-text, .home-video__trigger:focus .home-video__trigger-text { display: block; } .home-video__actions.is-active .home-video__trigger:hover, .home-video__actions.is-active .home-video__trigger:focus { background-color: var(--bg-alt-1); color: var(--text-color); } .is-off { display: none; } .home-video__actions.is-active .home-video__trigger .is-off { display: block; } .home-video__actions.is-active .home-video__trigger .is-on { display: none; } .home-video__actions-more { display: none; position: absolute; bottom: 90px; left: 10px; } .home-video__actions.is-active .home-video__actions-more { display: block; } .home-video__trigger-icon { display: flex !important; justify-content: center; width: 18px; height: 11px; margin: auto !important; } .home-video__trigger-text { display: none; font-size: 11px; line-height: 1.4; margin-top: 10px; } .home-video__btn { width: 80px; height: 80px; color: #fff; display: flex; line-height: 1; margin-bottom: 3px; background: var(--highlight-color); align-items: center; justify-content: center; text-align: center; border-radius: 50px; opacity: 0.9; font-size: 11px; padding: 0 5px; flex-direction: column; text-transform: capitalize; letter-spacing: 0; transition: all 0.3s ease; font-weight: 400; min-width: auto; } .home-video__btn:hover, .home-video__btn:focus { background: var(--bg-alt-1); color: var(--text-color); } .home-video__btn .is-off, .home-video__btn.active .is-on { display: none; } .home-video__btn .is-on, .home-video__btn.active .is-off { display: block; } .home-video__btn .uk-icon { display: block; margin-bottom: 8px; } .hero-image-wrap.home-video__block { position: relative; height: 0; padding-bottom: 56.25%; background-size: cover; background-repeat: no-repeat; background-position: center; } .home-mp4-vide .hero-image-wrap.home-video__block { padding: 0; height: auto; } .home-mp4-vide .hero-image-wrap.home-video__block.cms6, .hero-image.cms6 { height: 500px; } .hero-image-wrap.home-video__block iframe { position: absolute !important; width: 100% !important; height: 100% !important; } .hero-image-wrap.home-video__block:after { content: none; background: transparent linear-gradient(180deg, #084877 0%, #0a375d 22%, #ffffff00 100%) 0% 0% no-repeat padding-box; mix-blend-mode: multiply; opacity: 0.45; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } ul.ckbullet { margin: 0; padding: 0; } ul.ckbullet li { margin: 0 0 20px 0; font-family: var(--text-fonts); font-size: 15px; line-height: 22px; } ul.ckbullet li::marker { content: none; } ul.ckbullet li:before { content: '\e91e'; font-family: var(--icon-fonts); font-size: 12px; font-weight: 600; color: #D69CA0; padding: 0 5px 0 0; } .home-video__modal .uk-close { top: 0; right: 0; padding: 11px; background-color: var(--highlight-color); color: #fff; } .home-video__modal .uk-close:hover, .home-video__modal .uk-close:focus { background-color: var(--primary-color); color: #fff; } @media (min-width:1700px) { .addBg .hero-image::after {height: 188px;} } @media (max-width:1199.98px) { .hero-content .title--xxl {font-size: 80px; width: 60%; margin: 0 auto 150px;} } @media (max-width: 960px) { .home-video__title { max-width: 90%; } } @media (max-width: 959.98px) { } @media (max-width: 767.98px) { .home-video__block video { height: 100vh; } .hero-content .title--xxl { font-size: 50px; margin-bottom: 60px; padding: 0 20px; width:90%; } .hero-content {bottom: 162px;} } @media (max-width: 767.98px) { .hero-image::before {background: linear-gradient(0deg, rgba(0, 0, 0, 0) 47.75%, rgba(0, 0, 0, 0.85) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 52.25%, rgba(0, 0, 0, 0.5) 100%);} .home-video.addBg .home-video__wrapper.hero-image::after {bottom: 24px; background-position: -110px 0;} div#descModal-0 .uk-modal-body { padding: 40px 20px; } .home-video__trigger:hover .home-video__trigger-text, .home-video__trigger:focus .home-video__trigger-text { display: none; } .home-video__btn .uk-icon { text-indent: 0px; line-height: 30px; margin-top: -2px; margin-bottom: 0; } .home-video__btn .is-on, .home-video__btn.active .is-off { display: flex; } .home-video__actions.is-active .home-video__trigger { width: 30px; height: 30px; margin: 0 20px 15px; } .home-video__actions.is-active { } .home-video__trigger:hover, .home-video__trigger:focus { width: 30px; height: 30px; } .home-video__trigger { margin: 0 0 20px 15px; } .home-video__actions.is-active .home-video__trigger, .home-video__trigger:hover, .home-video__trigger:focus{ margin: 0 0 20px 15px; } .home-video__actions.is-active .home-video__actions-more { display: flex; } .home-video__actions-more { /* bottom: 50px; left: 15px;*/ bottom: 20px; left: 50px; } .home-video__btn { width: 30px; height: 30px; text-indent: -9999px !important; min-height: 30px; line-height: 0px; /* border-radius: 4px; */ text-align: unset; margin-bottom: 0; margin-right: 3px; } .home-video__btn .mobile-hide { display: none; } .home-video__btn.full-video { display: none; } } @media (min-width: 768px) and (max-width: 1023px) { .home-video__btn { width: 70px; height: 70px; font-size: 9px; } .home-video__actions.is-active .home-video__trigger, .home-video__trigger:hover, .home-video__trigger:focus { width: 70px; height: 70px; } .home-video__trigger-text { font-size: 9px; } } @media (max-width: 767.98px) and (orientation: landscape){ .home-video__container{ height: 100vh; } } /* Page Editor Starts */ .page-component-mi-block .home-video__container { position: relative; z-index: 2; } .home-video.js-home-video.home-mp4-vide { overflow: hidden; position: relative; } /* Page Editor Ends*/ .homeIntroSection { padding: 40px 0; position: relative; } .homeIntroSection .left { position: relative; } .homeIntroSection.addBg:before { content: ''; background:url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/site-images/svg/intro-dots-bg.svg")no-repeat; position: absolute; left: 0; bottom: 0; height: 694px; width: 100%; opacity: .7; } .homeIntroSection.addBg .wave-animation-container-intro { width: 100%; height: 336px; /* Adjust this height to match your wave's visual size */ position: relative; /* --- THE KEY TO THE ANIMATION --- */ background-image: url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/intro-wave-bg.svg"); background-repeat: no-repeat; background-size: 100%; bottom: 170px; /* --- The animation properties --- */ /*animation: wave-scroll 10s linear infinite;*/ } .menIcon.floating-icon {right: 13%; bottom: 431px; z-index: 9; width: 100px; height: auto; animation: floatUpDown 2s ease-in-out infinite; position: absolute; } .menIcon.floating-icon img { border-radius: 0; } .homeIntroSection h1 { max-width: 528px; margin: 30px 0 15px; } .homeIntroSection img {border-radius: var(--image-border-radius);} .homeIntroSection .leftImg { position: relative; top: 50px; } .homeIntroSection .left { position: relative; z-index: 9; } .homeIntroSection .left img {box-shadow: 0 4px 8px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.19);} .homeIntroSection .rightBox { max-width: 496px; float: right; } .homeIntroSection .rightBox .content-block-image { margin-bottom: 50px; } .homeIntroSection .rightBox .right-text-content.mob-hide { position: relative; } .homeIntroSection .rightBox .buttonWrap { position: relative; z-index: 99; } @media (min-width:1700px) { .homeIntroSection.addBg .wave-animation-container-intro {height: 390px; bottom: 150px;} } @media (min-width:1400px){ .homeIntroSection .uk-container { max-width: 1248px; } } @media (min-width:1201px) and (max-width:1400px) { .homeIntroSection.addBg .wave-animation-container-intro {bottom: 116px;} } @media (min-width:960px) and (max-width:1200px) { .homeIntroSection.addBg .wave-animation-container-intro {bottom:70px;} .menIcon.floating-icon {bottom: 320px;} } @media (min-width:768px) and (max-width:959.98px) { .homeIntroSection .uk-grid-large.uk-grid { flex-direction: column; } .homeIntroSection .left {display: flex;} .homeIntroSection h1 {max-width: 328px; margin: 64px 15px 15px;} .homeIntroSection .rightBox {margin-top: 50px; float: left;} .homeIntroSection.addBg .wave-animation-container-intro {bottom:-30px;} .menIcon.floating-icon {bottom: 270px;} .homeIntroSection {padding:0 0 50px !important;} } @media (max-width:1199.98px){ .homeIntroSection {padding:0;} .homeIntroSection.addBg::before {content: none;} } @media (max-width:767.98px) { .homeIntroSection h1 {max-width: 100%;} .homeIntroSection .leftImg {top: 10px; margin-bottom: 30px;} .homeIntroSection .right {order: 1;} .homeIntroSection .left {order: 2;} .homeIntroSection .rightBox {float: left; max-width: 100%;} .homeIntroSection .rightBox .content-block-image { margin-bottom: 30px; } .homeIntroSection .buttonWrap { text-align: center; justify-content: center;} .homeIntroSection.addBg::before {content: none;} .homeIntroSection.addBg .wave-animation-container-intro { height: 360px; background-size: auto; background-position: 0 0; } .homeIntroSection .left img {box-shadow: none;} .menIcon.floating-icon {bottom: 246px; right: 10%;} .homeIntroSection img {border-radius: var(--mob-image-border-radius); width: 100%; object-fit: cover;} } @media (max-width:500px) { .homeIntroSection h1 {max-width: 528px;} .homeIntroSection .rightBox {max-width: 496px;} .homeIntroSection.addBg .wave-animation-container-intro { background-position: -896px 0; } } .home-highlight-wrap { background: var(--bg-alt-1); padding: 10px 0 100px; position: relative; margin-top: -192px; } .uk-container.home-highlight { max-width: 1150px; } .home-highlight-wrap .uk-slider.uk-slider-container .feature-benefits__list .feature-benefits__item { text-align: center; } .home-highlight-wrap .uk-slider.uk-slider-container .feature-benefits__list .feature-benefits__item .icon { height: 36px; display: block; } .home-highlight-wrap:before { content: ''; background:url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/rooms-waves-cream.svg")no-repeat; position: absolute; left: 0; top: -190px; height: 199px; width: 100%; background-size: 100%; } .home-highlight-wrap .uk-slider.uk-slider-container .feature-benefits__list .feature-benefits__label { font: var(--h5-title-fonts); font-size: 26px; text-transform: uppercase; margin-top: 20px; letter-spacing: 0; text-align: center; } .home-highlight-wrap img { margin-top: 1px; } .home-highlight-wrap img:focus-visible { background: transparent; } @media (min-width:1201px) and (max-width:1400px) { .home-highlight-wrap::before {top: -169px;} } @media (min-width:960px) and (max-width:1200px) { .home-highlight-wrap:before {top: -95px; } .home-highlight-wrap {padding-top:80px;} .home-highlight-wrap .home-highlight .room-arrows {display:none;} } @media (min-width:768px) and (max-width:959.98px) { .home-highlight-wrap:before {top: -75px;} } .home-highlight-wrap .home-highlight .room-arrows { text-align: center; margin-top: 30px; } .home-highlight-wrap .home-highlight .room-arrows a { margin-left: 20px; } @media (min-width:960px) and (max-width:1024px) { .home-highlight-wrap {padding-top:60px;} } @media (min-width:768px) and (max-width:959.98px) { .home-highlight-wrap {padding-top:60px;} } @media (max-width:767.98px) { .home-highlight-wrap:before { top: -124px; height: 125px; width: 100%; background-size: 240%; background-position: -60px 0; } .home-highlight .uk-grid { flex-direction: column; } .home-highlight .uk-grid .left { width: 100%; text-align: center; margin-bottom: 50px; } .home-highlight .right .feature-benefits__list { flex-direction: row; } .uk-container.home-highlight {padding: 0;} .home-highlight-wrap .uk-slider.uk-slider-container .feature-benefits__list .feature-benefits__item {padding-left: 0; width: 37%;} .home-highlight .right .uk-slider.uk-slider-container { margin-left: -30px; } .home-highlight .room-arrows { justify-content: center; display: flex; margin-top: 40px; } .home-highlight .room-arrows a { font-size: 30px; margin-left: 30px; } .home-highlight-wrap {padding-bottom:60px;} } .home-room { background: var(--bg-alt-1); padding-left: 100px; position: relative; padding-bottom: 230px; } .home-room-wrap.addBg .wave-animation-container-room { width: 100%; height: 150px; /* Adjust this height to match your wave's visual size */ position: relative; /* --- THE KEY TO THE ANIMATION --- */ background-image: url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/room-wave-bg.svg"); background-repeat: repeat-x; /* This makes the wave pattern tile horizontally */ background-size: 100%; /* The width (1440px) must match the width of the wave pattern */ margin-top: -150px; /* --- The animation properties --- */ /*animation: wave-scroll 10s linear infinite;*/ } .home-room .home-room-bottom .room-area { width: 43.333%; } .home-room .home-room-bottom .room-area { } .home-room .home-room-container-top { display: flex; justify-content: space-between; width: calc(100% - 14%); } .home-room .home-room-container-top .uk-button.uk-button-primary { margin-top: 0; } .home-room .room-slide .image img { border-radius: var(--image-border-radius); width: 100%; } .home-room .room-slide .content .top { display: flex; justify-content: space-between; margin-top: 20px; } .home-room .room-slide .content .top .snippet__amenities { display: flex; } .home-room .room-slide .snippet__amenities-item.snippet__amenities-item--grid.dynamiccomponenteditenable { margin-left: 20px; } .home-room .room-slide .snippet__amenities-name { font-family: var(--semibold-text); font-size: 14px; letter-spacing: 0.7px; text-transform: uppercase; } .home-room .room-slide .lt97-widget__actions { padding-bottom: 10px; } .home-room .room-arrows { position: absolute; top: -76px; right: 25%; } .home-room .room-slide .content .top h3 { margin-bottom: 0; } .home-room .lt97-widget__actions > .uk-button { margin-right: 30px; margin-top: 20px; } .home-room .lt97-widget__actions > .uk-button.button-link { margin-left: 15px; } .room-arrows a { font-size: 30px; } .home-room .room-arrows .room-prev { margin-right: 24px; } .home-room .snippet__amenities-item--grid .snippet__amenities-icon {font-size: 20px;} .home-room .snippet__amenities-item--grid .snippet__amenities-icon { color: var(--primary-color);} @media (min-width:1700px) { .home-room .room-arrows {right:23%;} } @media (min-width:768px) and (max-width:1200px) { .home-room {padding-left: 20px;} .home-room .home-room-container-top .uk-button.uk-button-primary {min-width: 150px; margin-top: 60px;} .home-room .home-room-container-top {padding-right: 20px; width: 100%;} .home-room .home-room-container-top .section-title { max-width: 450px; } .home-room .home-room-bottom .room-area { width: 70%; } .home-room-wrap.addBg .wave-animation-container-room {background-size: auto;} } @media (min-width:1201px) and (max-width:1400px) { .home-room .room-arrows {right: 28%;} } @media (min-width:960px) and (max-width:1200px) { .home-room .room-arrows {right: 20%;} } @media (max-width:767.98px) { .home-room {padding: 0 20px 230px;} .home-room .home-room-container-top {flex-direction: column; margin-bottom:40px; width: calc(100% - 22%);} .home-room .home-room-container-top .section-title { margin-bottom: 30px; } .home-room .home-room-container-top .uk-button.uk-button-primary { max-width: 142px; } .home-room .room-arrows { top: -82px; right: 0; } .home-room .home-room-bottom .room-area {width: 100%;} .home-room .room-arrows {right: 0;} .home-room .room-slide .content .top {flex-direction: column; margin-top: 30px;} .home-room .room-slide .content .top h3 { order: 2; font-size: 30px; margin: 0; } .home-room .room-slide .snippet__amenities-item.snippet__amenities-item--grid.dynamiccomponenteditenable { margin-left: 0; } .home-room-wrap.addBg .wave-animation-container-room {background-size: auto; margin-top: -140px; background-image: url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/room-wave-mobile.svg");} .home-room .room-slide .lt97-widget__actions {margin-bottom: 1px;} .home-room .room-slide .image img { border-radius: var(--mob-image-border-radius); width: 100%; } .home-room .lt97-widget__actions > .uk-button { margin-right: 15px; } } /*Home page UI updated 27-03-2026 start*/ .home-room-wrap .home-room { padding-top: 30px; } /*Home page UI updated 27-03-2026 end*/ .home-offer { padding: 80px 0; position: relative; } .home-offer.addBg .wave-animation-container-offer { width: 100%; height: 257px; /* Adjust this height to match your wave's visual size */ position: relative; /* --- THE KEY TO THE ANIMATION --- */ background-image: url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/hero-wave.svg"); background-size: 100%; top: -160px; animation: wave-scroll 400s linear infinite; background-repeat: repeat-x; } .home-offer.addBg .vector-background { position: absolute; top: 180px; right: -150px; width: 493px; height: 493px; background: url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/orange-round-new.svg") no-repeat center center / contain; animation: spin 40s linear infinite; z-index: 1; background-size: 493px 493px; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .home-offer .home-offer-top { text-align: center; padding-bottom: 60px; margin-top: -280px; position: relative; z-index: 9; } .home-offer .home-offer-area { width: 50%; } .home-offer .home-offer-area {padding-left:40px;} .home-offer .home-offer-area .image img { width: 100%; border-radius: var(--image-border-radius); } .home-offer .lt97-widget__tagline { margin-bottom: 15px; } .home-offer .home-offer-area .content { padding: 30px 40px 30px 20px; } .home-offer .home-offer-area .content .lt97-widget__actions { margin-top: 30px; } .home-offer .home-offer-area .content .lt97-widget__actions > .uk-button + .uk-button { margin-left: 30px; } .home-offer .home-offer-bottom { z-index: 9; } @media (min-width:1700px) { .home-offer.addBg .vector-background {width: 593px; height: 593px; top: 200px; background-size: 593px 593px;} } @media (min-width:1201px) and (max-width:1400px) { .home-offer.addBg .vector-background {top:190px;} .home-offer.addBg .wave-animation-container-offer {background-size: auto; top: -188px;} } @media (min-width:768px) and (max-width:1200px) { .home-offer.addBg .wave-animation-container-offer {background-size: auto; top: -188px;} .home-offer .home-offer-area { padding-left: 20px; } .home-offer.addBg .vector-background {right: -104px; top:200px; width: 300px; height: 300px; background-size: 300px 300px;} .home-offer .home-offer-bottom .room-arrows { display: none; } } @media (max-width:767.98px) { .home-offer { padding: 200px 0 60px;} .home-offer.addBg .wave-animation-container-offer { height: 122px; background-image: url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/hero-wave-new.svg"); background-size: cover; top: -327px; } .home-offer .home-offer-top { margin-top: -340px; } .home-offer .home-offer-area {width: 100%; padding-left: 20px;} .home-offer .home-offer-area .content {padding: 30px 0 30px 0;} .home-offer .home-offer-area .content h3 { font-size: 30px; } .home-offer .room-arrows { text-align: center; } .home-offer .room-arrows a + a { margin-left: 25px; } .home-offer .home-offer-area .image img { border-radius: var(--mob-image-border-radius); } .home-offer.addBg .vector-background {top: 200px; right: -80px; width: 210px; height: 210px; background-size: 210px 210px;} .home-offer .home-offer-top {padding-bottom: 40px;} .home-offer .section-title { width: 80%; margin: 0 auto 30px; } } @media (max-width:400px){ .home-offer.addBg .vector-background {top: 210px;} } .home-gallery { padding-bottom: 80px; } .home-gallery .home-gallery-top { margin: 0 auto 20px; width: 86%; } .home-gallery .home-gallery-top .uk-grid { justify-content: space-between; } .home-gallery .home-gallery-top { margin-bottom: 20px; } .home-gallery .home-gallery-top .home-room-container-top { padding: 0; } .home-gallery .room-arrows { position: absolute; top: -80px; right: 20%; } .home-gallery .home-gallery-top .uk-grid .uk-button.uk-button-primary { margin-top: 46px; } .home-gallery .home-gallery-slide .image img { border-radius: 20px; } .home-gallery .home-gallery-area { padding-left: 25px; } .home-gallery .room-arrows .room-prev { margin-right: 24px; } .room-arrows a { font-size: 30px; } @media (min-width:1600px){ .home-gallery .room-arrows {right:26%;} } @media (min-width:1201px) and (max-width:1400px) { .home-gallery .room-arrows {right: 21%;} } @media (min-width:768px) and (max-width:1200px) { .home-gallery .home-gallery-area { padding-left: 20px; } .home-gallery { padding-bottom: 40px; } } @media (min-width:960px) and (max-width:1199.98px) { .home-gallery .room-arrows {right: 25%;} } @media (min-width:768px) and (max-width:959.98px) { .home-gallery .room-arrows {right: 29%;} } @media (max-width:767.98px) { .home-gallery .home-gallery-top .uk-grid {margin: 0;} .home-gallery .home-gallery-top .home-room-container-top { padding: 0; margin: auto; text-align: center; width: 100%; } .home-gallery .home-gallery-top .home-room-container-top .title.title--tagline.lt97-widget__tagline { margin-bottom: 10px; } .home-gallery .home-gallery-top .uk-button.uk-button-primary { margin: 20px auto !important; } .home-gallery .room-arrows { position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%); top: unset; text-align: center; } .home-gallery .home-gallery-area { padding-left: 20px; } .home-gallery-bottom { padding: 0 20px 0 20px; } .home-gallery .home-gallery-top .uk-grid .uk-button.uk-button-primary {padding: 10px 30px 6px;} } .home-dining .snippet__col { position: relative; } .home-dining .icon { position: absolute; right: 100px; top: -30px; } .home-dining .snippet__title { max-width: 434px; } .home-dining .js-texttoggle { max-width: 434px; } .home-dining .title.title--tagline.snippet__smalltitle { margin-top: 40px; } .home-dining .snippet__media > img { width: 100%; border-radius: var(--image-border-radius); } .home-dining .small-image { display: flex; justify-content: end; margin-right: 60px; margin-top: 100px; } .home-dining .small-image img { box-shadow: 0px 12px 27px 0px #0000001A; border-radius: 20px; } .home-dining .text { padding-left: 100px; } .home-dining .uk-button.uk-button-primary .text { padding-left: 0; } @media (min-width:768px) and (max-width:1200px) { .home-dining .text { padding-left: 40px; margin-top: 0; } } @media (min-width:960px) and (max-width:1199.98px) { .home-dining .small-image { margin-top: 50px;} .home-dining .title.title--tagline.snippet__smalltitle { margin-top: 50px; } } @media (min-width:768px) and (max-width:959.98px) { .home-dining .small-image { margin-top: 0;} .home-dining .title.title--tagline.snippet__smalltitle { margin-top: 0;} } @media (max-width:767.98px) { .home-dining .text {padding-left: 40px;} .home-dining .snippet__title { max-width: 214px; } .home-dining .snippet__media { height: 399px; } .home-dining .snippet__media img { object-fit: cover; } .home-dining .icon { position: absolute; right: 0; top: 0; } .home-dining .snippet__actions { margin-top: 30px; } .home-dining .small-image {margin: 30px auto 0; justify-content: center;} .home-dining .uk-button.uk-button-primary { min-width: 140px; } } @media (max-width:450px) { .home-dining .snippet__media img { height: 399px;} } .home-social-wrap.addBg:before { content: ''; background: url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/social-waves.svg")no-repeat; background-size: auto; position: absolute; left: 0; top: -221px; height: 221px; width: 100%; background-size: 100%; } .home-social .left .title-social { margin-bottom: 15px; } .home-social .left a:hover svg path { fill: var(--tertiary-color); } .home-social .left { align-content: center; height: 230px; } .home-social-wrap { background: var(--bg-alt-1); padding-top: 80px; position: relative; } .home-social .home-social__item { position: relative; } .home-social .home-social__item .icon { position: absolute; right: 10px; bottom: 10px; z-index: 9; } .home-social .home-social__item .icon:hover, .home-social .home-social__item .icon:focus { opacity: .7; } .home-social .home-social__item img { width: 100%; object-fit: cover; } .home-social .home-social__item .social-media { position: relative; border-radius: 10px; overflow: hidden; } .home-social .home-social__item .social-media:after { content:""; background: linear-gradient(168.85deg, rgba(0, 0, 0, 0) 67.38%, rgba(0, 0, 0, 0.4) 101.34%); position:absolute; left:0; top:0; height:100%; width:100%; } .home-social .home-social__item .icon img { border-radius: 0; } @media (min-width:1200px) and (max-width:1400px) { .home-social-wrap.addBg::before {top: -203px; height: 203px; background-size: 138%;} } @media (min-width:768px) and (max-width:1200px) { .home-social-wrap {padding-top: 0;} .home-social .left {width: 100%;} .home-social .home-social__item { width: 25%; } } @media (min-width:1024px) and (max-width:1200px) { .home-social-wrap.addBg::before {top: -175px; height: 203px; background-size: 123%;} } @media (min-width:960px) and (max-width:1023.98px) { .home-social-wrap.addBg::before {top: -155px; height: 203px; background-size: 123%;} } @media (min-width:768px) and (max-width:959.98px) { .home-social-wrap.addBg::before {top: -145px; height: 203px; background-size: 123%;} } @media (min-width:768px) { .home-social-wrap .feature-benefits__controls { display: none; } } @media (max-width:767.98px) { .home-social .home-social__item { width: 60%; } .home-social .feature-benefits__controls { display: none; } .home-social-wrap {margin-top: -68px; padding-top: 0;} .home-social-wrap.addBg::before { top: -100px; height: 100px; width: 100%; background-size: 204%; background-position: -10px 0; } .home-social-wrap .home-social .left { width: 100%; } .home-social-wrap .home-social .left .title-social { max-width: 247px; } } .map-container { position: relative; max-width: 1440px; margin: auto; } .boatIcon.floating-icon { z-index: 9; height: auto; animation: floatleftRight 2s ease-in-out infinite; position: absolute; left: 250px; top: 0; } .mapWrap.addBg { background:url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/map-waves-blue.svg")no-repeat; background-size: 100%; padding: 100px 0 100px; background-position: 0 0; margin-top: -150px; } .map-container .topPart { height: 652px; position: relative; } .map-image { display: block; width: 100%; height: auto; } .pin { position: absolute; cursor: pointer; width: 22px; height: 29px; background-color: transparent; border: none; padding: 0; z-index: 1; } .pin::after { font-family: 'template-icon'; content: "\e923"; position: absolute; width: 22px; height: 29px; transform: translate(-50%, -50%); top: 50%; left: 50%; font-size: 30px; color: #004B85; } .pin:hover:after, .pin:focus:after { color: var(--tertiary-color); } .popup { position: absolute; bottom: calc(100% + 15px); left: -120px; transform: translateX(-50%); background-color: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); padding: 0; display: none; /* Initially hidden */ z-index: 20; width: 300px; transition: all ease .5s; /*transform: scale(0);*/ } .popup .content { padding:30px 20px 40px; cursor: default; } .popup .content .uk-button.button-link { color: var(--primary-color); } .popup .content .button-link::after { background-image: url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/site-images/svg/button-line-dark.svg");} .popup.show { display: block; /*transform: scale(1);*/ } .popup .close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer; color: #555; background: var(--inverse-font-color); height: 34px; width: 34px; line-height: 12px; border-radius: 100%; } .popup .close-btn .template-icon.template-icon-close { font-size: 14px; font-weight: bold; color: var(--primary-color); } .popup .close-btn:hover .template-icon.template-icon-close, .popup .close-btn:focus .template-icon.template-icon-close {color:var(--tertiary-color);} .popup img { max-width: 100%; height: auto; border-radius: 10px 10px 0 0; margin-bottom: 0; cursor: default; } .popup h3 { margin-top: 0; margin-bottom: 10px; font: var(--h5-title-fonts); } .popup .link-btn { display: inline-block; padding: 8px 16px; background-color: blue; color: white; text-decoration: none; border-radius: 4px; transition: background-color 0.3s; } .popup .link-btn:hover { background-color: darkblue; } #pin-1 { position: absolute; right: 868px; top: 364px; } #pin-2 { position: absolute; top: 365px; right: 587px; z-index: 9; } #pin-3 { position: absolute; top: 320px; right: 521px; z-index: 9; } #pin-4 { position: absolute; top: 552px; right: 500px; z-index: 99; } #pin-5 { position: absolute; top: 391px; right: 537px; z-index: 9; } #pin-6 { position: absolute; top: 417px; right: 537px; z-index: 1; } #pin-7 { position: absolute; top: 434px; right: 667px; z-index: 1; } #pin-8 { position: absolute; top: 396px; right: 776px; z-index: 0; } #pin-9 { position: absolute; top: 409px; right: 846px; z-index: 0; } #pin-10 { right: 532px; top: 540px; } #pin-11 { right: 195px; top: 236px; } #pin-12 { right: 130px; top: 90px; } .map-container .bottomText { max-width: 623px; margin: 50px auto 140px; text-align: center; } .map-container .bottomText .title.title--tagline { color: var(--inverse-font-color); filter: opacity(1); } .map-container .bottomText .uk-button.uk-button-primary { color: var(--inverse-font-color); border-color: var(--inverse-font-color); margin-top: 40px; } .ng-star-inserted .pin { width: 40px; } .map-container .bottomText .uk-button.uk-button-primary::before { background: var(--inverse-font-color); border-color: var(--inverse-font-color); } .map-container .bottomText .uk-button.uk-button-primary .text {color: var(--inverse-font-color);} .map-container .bottomText .uk-button.uk-button-primary:hover .text, .map-container .bottomText .uk-button.uk-button-primary:focus .text { color: var(--primary-cta-hover-color); } .map-container .topPart .map-image-area img.tablet-image {display:none;} @media (min-width:1700px){ .map-container .topPart {margin-top:80px;} } @media (min-width:1200px) and (max-width:1400px) { .mapWrap.addBg {background-size: cover; background-position: 0 -55px; margin-top: 0;} .boatIcon.floating-icon {top: -58px;} #pin-9 .popup { left: 0; } .map-container {max-width: 1200px;} #pin-1 { right: 718px; top: 304px; } #pin-2 { top: 295px; right: 488px; z-index: 9; } #pin-3 { top: 263px; right: 428px; } #pin-4 { z-index: 99; top: 453px; right: 416px; } #pin-5 { top: 319px; right: 448px; } #pin-6 { top: 344px; right: 446px; z-index: 1; } #pin-7 { top: 355px; right: 555px; z-index: 1; } #pin-8 { top: 323px; right: 644px; } #pin-9 { top: 332px; right: 700px; } #pin-10 { right: 439px; top: 438px; } #pin-11 { right: 165px; top: 186px; } #pin-12 { right: 110px; top: 69px; } } @media (min-width:768px) and (max-width:1199.98px) { .mapWrap.addBg {margin-top: 0; background-size: cover; background-position: 0 -24px;} .boatIcon.floating-icon {left: 40px; top: -88px;} .map-container .topPart .map-image-area img {display:none;} .map-container .topPart .map-image-area img.tablet-image {display:block;} .map-container .topPart .pin {display:none;} .map-container .topPart { height: auto;} .map-container .bottomText {margin: 50px auto 70px;} } @media (max-width:767.98px) { .map-image-area .map-image {height: 750px; width: 100%; margin-left: 60px; margin-top: 60px;} .map-container .bottomText .map-image { height: 70px; } .map-container .bottomText .uk-button.uk-button-primary {margin-top: 20px;} .map-container .bottomText .title.title--tagline {margin-bottom: 10px;} .mapWrap.addBg { background:url("https://assets.milestoneinternet.com/pm-hotel-group-parent/queen-kapiolani-hotel-307237-15/website-assests/bg-images/mobile-mp-bg.svg")no-repeat; background-size: 100%; padding: 0 0 100px; background-position: 0 40px; margin-top: 0; } .boatIcon.floating-icon { left: 42px; top: 66px; } .boatIcon.floating-icon img { width: 68px; height: 68px; } .map-container .bottomText {padding: 0 20px; margin-top: -50px;} } @media (max-width:480px) { .map-image-area .map-image {height: 750px; width: 375px; margin: auto;} } @media (max-width:400px){ .boatIcon.floating-icon {left: 42px; top: 56px;} } body { /* padding-bottom: 100px; */ } .floating-booking { position: fixed; bottom: 20px; left: 0; right: 0; /* max-width: 1025px; */ /* background: linear-gradient(180deg, rgba(207, 180, 168, 0.85) -50.62%, rgba(255, 255, 255, 0.85) 119.37%); */ background: rgba(255, 231, 189, 0.4); backdrop-filter: blur(28.787826538085938px); border: 1px solid var(--border-color); color: var(--h1-font-color); margin: auto; padding: 14px 30px; z-index: 10; max-width: 972px; border-radius: var(--primary-cta-border-radius); } .floating-booking__container { max-width: 1424px; } .floating-booking__input { background: transparent; border: 0; color: var(--text-color); -webkit-appearance: none; font-family: var(--footer-submenu-font-family); font-size: var(--footer-submenu-font-size); appearance: none; padding: 0 17px 0 0; height: 22px; border-bottom: none; cursor: pointer; text-transform: uppercase; } .floating-booking__input::placeholder { color: var(--inverse-font-color); } .floating-booking__input:focus { border-color: var(--highlight-color); color: var(--primary-color); } .floating-booking__col { display: flex; align-items: flex-start; position: relative; flex-direction: column; justify-content: flex-end; } .floating-booking__grid { margin-left: -32px; align-items: center; } .floating-booking__grid>* { padding-left: 32px; } .floating-booking__label { display: block; font-size: var(--primary-cta-font-size); margin-bottom: 0px; text-transform: var(--primary-cta-font-transform); letter-spacing: 1.2px; font-weight: 600; } .floating-booking__col--button { padding-left: 20px; justify-content: flex-end; } .floating-booking__button { background: var(--primary-cta-color); border: 1px solid var(--tertiary-color); padding: 11px 24px; min-width: 187px; /* color: var(--primary-cta-color); */ } .floating-booking__button:hover, .floating-booking__button:focus-visible { background: var(--inverse-font-color); color: var(--text-color); border-color: var(--tertiary-color); padding: 11px 24px; } .floating-booking__button:after { display: none; } .uk-select:not([multiple]):not([size]).floating-booking__input { background: transparent; padding: 0 30px 0 0; height: auto; } .floating-booking__col--has-icon { position: relative; } form.floating-booking__form .floating-booking__col select.uk-select { height: 28px !important; } .floating-booking__col--has-icon:after { content: '\e90b'; pointer-events: none; position: absolute; right: 25px; font-family: var(--icon-fonts); z-index: -1; color: var(--select-arrow-color); cursor: pointer; font-size: 10px; bottom: 5px; } .floating-booking .ui-datepicker-trigger { width: 12px; height: 12px; bottom: 8px; right: 0; cursor: pointer; } .ui-datepicker .ui-datepicker-buttonpane button { font: var(--primary-cta-fonts); text-transform: var(--primary-cta-font-transform); color: var(--primary-cta-font-color); background: var(--primary-cta-color); border: 1px solid var(--primary-cta-font-color); border-radius: var(--primary-cta-border-radius); height: fit-content; position: relative; padding: 6px 20px; font-size: 20px; } .ui-datepicker .ui-datepicker-buttonpane button:hover, .ui-datepicker .ui-datepicker-buttonpane button:focus-visible { color: var(--primary-cta-font-hover-color); background: var(--primary-cta-hover-color); border-color: var(--primary-cta-hover-color); /* padding: 11px 24px; */ } .floating-booking .uk-width-1-6 { width: calc(100%*1/6.5); } @media (max-width: 1399.98px) { .floating-booking__grid { margin-left: -30px; } .floating-booking__grid>* { width: auto; padding-left: 30px; } .floating-booking__button { width: 100%; } } @media (max-width: 1199.98px) { .floating-booking { padding: 10px; } .floating-booking__container { padding: 0 10px; } input.floating-booking__input { max-width: 144px } input#promo.floating-booking__input { max-width: 165px; } } @media (max-width: 1023.98px) {} @media (max-width: 959.98px) { .floating-booking { display: none; } } @media (max-width: 767.98px) { } @media (max-width: 639.98px) {} @media (max-width: 575px) {}