/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; vertical-align:baseline;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} body {line-height:1;} ol, ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;} table {border-collapse:collapse; border-spacing:0;} html * {-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} html{font-size:62.5%;} html, body {height:100%; text-rendering:optimizeLegibility !important; -webkit-font-smoothing:antialiased !important; font-smooth: always; } body{font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.6rem; line-height:2.2rem; font-weight:300; color:#545860; overflow-x: hidden!important;} body>div.panel {overflow-x:hidden!important;} h1, h2, h3, h4, h5, h6 {font-family:'Rubik', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; font-weight: 600; color:#222222; margin:8px 0} .th h1, .th h2, .th h3, .th h4,.th h5, .th h6{font-weight:500;} .cn h1, .cn h2, .cn h3, .cn h4,.cn h5, .cn h6{font-weight: 700;} .zh h1, .zh h2, .zh h3, .zh h4,.zh h5, .zh h6{font-weight: 700;} h1{font-size:4rem; line-height:1; text-transform:uppercase;} h2{font-size:3.6rem; line-height:1.2; margin-bottom:40px; text-transform:uppercase;} h3{font-size:3.4rem;} h4{font-size:2.2rem;} h5{font-size:2.0rem;} h6{font-size:1.6rem;} b{font-weight:500} [dir='ltr'], [dir='rtl'] {unicode-bidi: -webkit-isolate; unicode-bidi: -moz-isolate; unicode-bidi: -ms-isolate; unicode-bidi: isolate;} bdo[dir='ltr'], bdo[dir='rtl'] {unicode-bidi: bidi-override; unicode-bidi: -webkit-isolate-override; unicode-bidi: -moz-isolate-override; unicode-bidi: -ms-isolate-override; unicode-bidi: isolate-override;} ::selection {background:#c4d9e5; color:#FFF; text-shadow:none;} ::-moz-selection {background:#c4d9e5; color:#FFF; text-shadow:none;} *, *::after, *::before {box-sizing:inherit;} *, *:after, *:before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} /*Circle cursor*/ /*body{cursor: none;}*/body .cursor {pointer-events: none;}body .cursor__ball {position: absolute; top: 0; left: 0; mix-blend-mode: difference; z-index:9999;}body .cursor__ball circle {fill: #fff;} /*Loading Bar*/ .pace {-webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;}.pace-inactive {display: none;}.pace .pace-progress {background:#93cbc5;position:fixed; z-index:5000; top: 0; right:100%; width:100%; height:4px;} /*Lazy Load* // *Avoid empty images to appear as broken*/ img:not([src]):not([srcset]) {visibility:hidden; } /* Fixes the Firefox anomaly while images are loading*/ @-moz-document url-prefix() { img:-moz-loading {visibility:hidden;} } ul, li{margin:0; padding:0} ol{margin:0; padding:0 0 0 15px} img {border:none; max-width: 100%; display: block;} blockquote{border-left:none;} p{margin-bottom:15px;} .hidden{visibility:hidden;opacity:0} .visible{visibility:visible;opacity:1;} .no-padding {padding-left:0; padding-right:0} .center{text-align: center; margin: 0 auto; display: block;} #rtl body {direction:rtl; margin:0; padding:0;} #rtl .text-hidden {text-indent:99999em} .txtred {color:#da523a;} .txtremarks{font-size:1.4rem; color:#9199a0} a{color:#b196a6 /*7aa2de*/; text-decoration:none} a:hover{color:#464d7b; text-decoration:none} .hide-mobile{display:none} .show-mobile {display:block !important;} .show-desktop {display:none !important;} /*alert message*/ .alert-topmessage{position: relative; background:#111f20; color:#fff; font-size:1.2rem; line-height:1.2; text-align:center;} .alert-topmessage .content {padding: 5px 48px;} .alert-topmessage a{color:#fff; text-decoration:underline;} .alert-topmessage a:hover{color:#7dc0d1;text-decoration:none;} .alert-topmessage button.close span:before, .alert-topmessage button.close span:after{background-color: #fff;} /*.alert-topmessage button.close{width: 48px; height: 48px; top: 0; right: 5px}*/ .alert-topmessage button.close{display:none} .alert-topmessage a.dropdown{width:100%; line-height:48px; display:block; text-align:center; color:#fff; text-decoration:none;} .alert-topmessage a.dropdown span {position: absolute; z-index: 50; top: 18px; right: 24px; border: solid white; border-width: 0 2px 2px 0;display: inline-block; padding: 4px; transform: rotate(45deg); -webkit-transform: rotate(45deg); opacity:0.8} .alert-topmessage a.dropdown:not(.collapsed) span{top: 21px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg);} /*Travel Confidence*/ .travel-confidence {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;flex-direction: column;} .travel-confidence .icon{background:url(//storage.shama.com/icon/sprite_travel-confidence.svg) no-repeat; display:inline-block; margin:5px; width:30px; height:30px;} .travel-confidence a{text-decoration: none; display: flex; align-items: center; justify-content: center; line-height:48px;} .cn .travel-confidence a, .zh .travel-confidence a{margin-right:7px;} .travel-confidence .clean{background-position:0 0} .travel-confidence .travel{background-position:-30px 0} .travel-confidence .brg{background-position:-60px 0} /*GDPR*/ .cc-window{background-color:#343352; color:#e5e6eb; z-index:200;} .cc-window.cc-banner, .cc-window.cc-floating{padding:8px 55px 8px 15px; max-width:100%; width: 100%; bottom:0;} .cc-window .cc-message{font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC';font-size:1.4rem;line-height: 1.4;text-align:left;margin-bottom:0;} .th .cc-window .cc-message, .cn .cc-window .cc-message, .zh .cc-window .cc-message {font-size:1.6rem;} .cc-window .cc-message a{color:#fff;} .cc-window .cc-close{display:block;position:absolute;top:-4px;right:5px;width:48px;height:48px;font-size:1.6em;line-height:.75;opacity:1;color:#fff;text-align:center;padding:12px;outline:none;} .cc-window .cc-close:hover{opacity:.5} /*Announce*/ .announce{padding:30px 20px; background:#fafafa; position:relative;} .announce header{margin:10px auto; display:block; text-align:center;} .announce h3{font-size:3rem; color:#464d7b;} .announce .content{text-align:center;} .announce a{color: #5b96a9; text-decoration: none;} .announce a:hover{color: #7aa2de; text-decoration:none;} .announce .btn-border-bk{background-color:transparent!important; border:2px solid #5b97aa; color:#5b97aa; text-decoration: none} .announce .btn-border-bk:hover{background-color:#5b97aa !important; border:2px solid #5b97aa; color:#fff; text-decoration: none} .aos-init:not(.aos-animate):after {position: fixed;} .txtred{color:#ff6c6c} .slash:after{content:'|'; color:#e6e6e6; display:inline; margin: 0 3px} .view .slash{margin:0 10px;} .view .slash:after{content:'|';} .note .slash{margin:0 3px;} .note .slash:after, .cards_border0 .slash:after, .two-column_equal-fluid-h100 .slash:after{content:'/';} .note li{position:relative; padding:0 0 22px 15px; list-style:none;} .note li:before {content:''; background:#ffcca9; border-radius:7px; width:7px; height:7px; margin:2px; position:absolute; left:0; top:7px;} /*Header*/ header.header{position: relative; z-index:1} .linetop{display:none} .header-top{display: none; background:#f7f0ec /*#f8f8f8*/; height:40px; font-size:1.5rem} .header-main{position: relative; width: 100%; height: 90px; background-color: #fff; transform: translateZ(0); transition: all .5s; box-shadow: -1px 4px 9px rgb(0 0 0 / 5%); /*border-bottom: 1px solid #eef4f4;*/} .header-main .cd-dropdown-wrapper {width: 90px; height: 90px; background:#522953; webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .header-main .navbar {padding:0;} /*My Booking / Lang*/ .header-toolbar{float:right; margin:0 5px; font-size:1.2rem} .header-toolbar li{display:inline-block; padding:8px 6px; position:relative;} .header-toolbar li:after{content:'';display:inline-block; position:absolute; top:11px; right:0; height:16px; width:1px; background-color:rgba(0, 0, 0, 0.1); margin:0; padding:0;} .header-toolbar li:last-child:after{content:none} .header-toolbar li a{display:inline-block; padding:0 6px; color:#575757;} .header-toolbar li a:hover{text-decoration:none; color:#7aa2de;} .header-toolbar .login-rewards.signin{position:relative} .th .header-toolbar li a{font-size:1.5rem} /*when login*/ #memberlogin{display:inline-block;} .header-toolbar .login-rewards.signin .dropdown-menu.show, .dropdown.login-rewards .dropdown-menu{width: 300px; left:-165px!important; margin-top:13px} .dropdown.login-rewards .dropdown-menu{width: 300px; left:inherit!important; right: 0; margin-top:13px; background:#fff;} .dropdown.login-rewards .dropdown-menu .form-login{border-radius: inherit; box-shadow: none; margin: 10px auto 10px auto; padding:5px; border: 0; font-size: 1.4rem} .header-toolbar .dropdown.login-rewards .dropdown-menu .user-menu li{width: 49%;} .dropdown.login-rewards .dropdown-menu .user-menu a{font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.6rem; color: #ffffff; background: #606cab; text-align: center; padding: 9px 18px; width: 100%;} .dropdown.login-rewards .dropdown-menu .user-menu a:hover{background:#b196a6; color:#606cab} .txt-loginonyx {color:#6f7271} .txt-loginonyx .fullname {font-family: 'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; font-size:2.2rem; color:#000;} /*language*/ .header-toolbar .language{display:inline-block; position:relative;} .header-toolbar .dropdown-toggle .bt-check.active{display:none} .header-toolbar .language > .dropdown-menu:after, .header-toolbar .language > .dropdown-menu:before {bottom: 100%; left: 72%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;} .header-toolbar .language > .dropdown-menu:before{border-color: rgba(214, 219, 222, 0); border-bottom-color: #d6dbde; border-width: 11px; margin-left: -11px;} .header-toolbar .language > .dropdown-menu:after{border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 10px; margin-left: -10px;} *[dir="rtl"] .language .dropdown-menu{transform: translate3d(0, 22px, 0) !important} *[dir="rtl"] .header-toolbar .language > .dropdown-menu:after, *[dir="rtl"] .header-toolbar .language > .dropdown-menu:before{left: 15%;} .header-toolbar .language .dropdown-menu{min-width:165px; margin-top:13px; background-color: #ffffff;} .header-toolbar .language .dropdown-menu li{display:block; padding:10px 15px; border-bottom:1px solid #f1f4f7; font-size:1.4rem} .header-toolbar .language .dropdown-menu li a{display:block; padding:0; color:#8b9094} .header-toolbar .language .dropdown-menu li:last-child{border-bottom:none} .header-toolbar .language .dropdown-menu li:hover{background:#f7f7f7;cursor:pointer} .header-toolbar .language .dropdown-menu li:hover a{color:#000} .header-toolbar .language .dropdown-menu li.active{position:relative} .header-toolbar .language .dropdown-menu li.active a{color:#000;} .header-toolbar .language .dropdown-menu li:after{background:none; height:0; margin:0; padding:0} .language .disable{background:transparent; color:#dfdfde} .header-toolbar .linkedin .logo-in {background-image: url(https://storage.onyx-hospitality.com/assets/logo/logo-linkedin.svg); background-position: 0 0; background-repeat: no-repeat; width: 63px; height: 16px; display: inline-block; text-indent: -999999em; vertical-align: middle;} .header-toolbar .linkedin .logo-in:hover {background-position: 0 -16px;} /*language - check circle green icon */ .bt-check {position:absolute; top:50%; right:12px; -webkit-transform:translateY(-50%); transform:translateY(-50%); display:inline-block;width:30px;height:30px;border:1px solid;border-radius:50%;text-align:center;cursor:pointer;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;} .bt-check.active {border-color:#68c3d1 !important; background-color:#68c3d1;} .bt-check .bt-content:before {content:'';position:absolute;display:block;top:9px;left:8px;width:12px;height:7px;border:2px solid;border-top:none;border-right:none;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:border 0.3s ease-in-out; transition:border 0.3s ease-in-out;} .bt-check.active .bt-content:before {border-color:#fff;} /*dropdown-menu animation*/ .dropdown-menu{display:block; left:0; right:0; margin-top:0; background-color:#522953; border: 1px solid #d6dbde; border-radius:3px; box-shadow:0px 5px 5px -2px rgba(0,0,0,0.1); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; visibility:hidden; opacity:0; transform: translate3d(-84px, 22px, 0px) !important; z-index:1000;} .show .dropdown-menu.show{visibility:visible; opacity:1;} .mega-bookingmask {visibility:visible; opacity:1; display:none} /*Breadcrumb*/ .breadcrumb{display: none} /*Container*/ #container{position:relative; background-color:#fff; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); margin:0;} /*header navbar*/ .navbar {padding: 0; height:90px} .navbar-brand{padding:0; margin:0; height:90px} .navbar-brand .brand-logo{vertical-align: middle;} .brand-logo img{width:146px; height:45px; margin:18px 12px;} .navbar-brand .logo{width:auto; height:45px; margin:18px 12px;} /*Enquiry button*/ .enquiry .button {float:right;} .enquiry .button button{font-size:1.4rem; font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC';} .enquiry .button button.booking-avail{background:#5774d1; outline:none; position:relative; text-align:center; text-transform:uppercase;letter-spacing: .1rem; margin:0; width:100px; padding:20px; height:90px; overflow: hidden; color:#fff; } .enquiry .button button.booking-avail:hover{cursor:pointer} .enquiry .button button.show-mobile{font-size:1.4rem;} .enquiry .button button.show-mobile.booking-avail:before {padding:38px 10px;} /*button:before (attr data-hover)*/ .enquiry .button button.booking-avail:hover:before{opacity: 1; transform: translate(0,0);} .enquiry .button button.booking-avail:before{background:#31347a; content:attr(data-hover); position:absolute; left:0; top:0; padding:20px; width:100%; height:90px; text-align:center; opacity:0; transform:translate(-100%,0); transition: all .3s ease-in-out;} /*button div (button text before hover)*/ .enquiry .button button.booking-avail:hover div{opacity: 0; transform: translate(100%,0)} .enquiry .button button.booking-avail div{transition: all .3s ease-in-out;} /* Slidebar - Menu Main */ .cd-dropdown-wrapper {width:90px; height:90px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .cd-dropdown-trigger {display:inline-block; position:relative;} .no-touch .cd-dropdown-trigger:hover {color:#000;} .cd-dropdown-trigger {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width:50px; height:90px; top: auto; left: auto; box-sizing: content-box; font-size: 20px; line-height: 24px; margin-top:0; padding:0 19px; overflow:hidden; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; cursor: pointer; } /*Hamburger*/ .cd-dropdown-wrapper .cursor{cursor: none} .cd-dropdown-trigger span {width:40px; top:30px; left:23px; transform:translateY(100%); transform-origin:50% 50%; -webkit-transition: all 400ms ease-in-out; : all 400ms ease-in-out;} .cd-dropdown-trigger span, .cd-dropdown-trigger span::before,.cd-dropdown-trigger span::after {display: block; position: absolute; height:2px; background:#fff; transition: all .25s ease} .cd-dropdown-trigger span::before,.cd-dropdown-trigger span::after {content: '';} .cd-dropdown-trigger span::before {top:-10px; width: 70%} .cd-dropdown-trigger span::after {top:10px; width: 70%} .cd-dropdown-trigger.dropdown-is-active {background-color:rgba(255,255,255,0.5);} .cd-dropdown-trigger.dropdown-is-active span {transform: rotate(45deg); top:50%;} .cd-dropdown-trigger.dropdown-is-active span::before {transform:translate3d(0, 9px, 0); background:#fff; width:100%} .cd-dropdown-trigger.dropdown-is-active span::after {transform:rotate(-90deg) translate3d(9px, 0, 0); background:#fff; width:100%} .cd-dropdown-trigger:hover span, .cd-dropdown-trigger:hover span::before, .cd-dropdown-trigger:hover span::after {background:rgba(255,255,255,0.5);} .cd-dropdown-trigger.dropdown-is-active, .no-touch .cd-dropdown-trigger.dropdown-is-active:hover {background-color:#522953; animation:none;}/*when click show background*/ .cd-dropdown-trigger.dropdown-is-active:hover span::before, .cd-dropdown-trigger.dropdown-is-active:hover span::after {background:#fff; animation:none;} .cd-dropdown-trigger.dropdown-is-active span::before {top:-9px;} .cd-dropdown-trigger.dropdown-is-active span::after {top:9px;} .cd-dropdown-trigger:hover span::before {-webkit-animation: burger-hover 1s infinite ease-in-out alternate; animation: burger-hover 1s infinite ease-in-out alternate;} /*.cd-dropdown-trigger:hover { -webkit-animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms; animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms;}*/ .cd-dropdown-trigger:hover span::after { -webkit-animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms; animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms;} @-webkit-keyframes burger-hover { 0% {width: 100%;} 50% {width: 50%;} 100% {width: 100%;} } @keyframes burger-hover { 0% {width: 100%;} 50% {width: 50%;} 100% {width: 100%;} } /*MENU -Text*/ .cd-dropdown-trigger .text {display: block; width:100%; margin: 50px auto 0 auto; font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 1.4rem; color: #fff; text-transform: uppercase; letter-spacing:.1rem; text-align: center;} .cd-dropdown-trigger .text:after, .cd-dropdown-trigger .text:before {content: none;} .th .cd-dropdown-trigger .text, .cn .cd-dropdown-trigger .text, .zh .cd-dropdown-trigger .text {letter-spacing: normal;} .cd-dropdown-trigger.dropdown-is-active .text {display: none;} .cd-dropdown-trigger.dropdown-is-active:hover .text {text-decoration: none;} .cd-dropdown h2, .cd-dropdown-content a, .cd-dropdown-content ul a {height:60px; line-height:60px;} .cd-dropdown h2, .cd-dropdown-content a, .cd-dropdown-content ul a, .cd-dropdown-content .cd-divider {padding: 0 20px;} .cd-dropdown-content .head {height: 60px; line-height: 60px; border-top: 1px solid #e9ecee; padding: 0 20px;} .cd-dropdown-content .head b{color: #35375e; font-size: 1.6rem;} .cd-dropdown{background-color:#fbfbfb; position:fixed; top:0; left:0; width:100%; height:2000vh; z-index:1000; visibility: hidden; /* Force Hardware Acceleration */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s; -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s; transition: transform 0.5s 0s, visibility 0s 0.5s;} /* 'X' close icon - mobile version only */ .cd-dropdown .header-sidebar{ display: flex; flex-direction: row; background:#fff; width:100%; height:70px; -webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.03); -moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.03); box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.03);} .cd-dropdown .cd-close {display: inline-block!important; position: relative; background: #fbfbfb; width:70px; height:70px; overflow: hidden; text-indent: 100%; white-space: nowrap;color: transparent; border-right: 1px solid #e6eaea;} .cd-dropdown .cd-close::after, .cd-dropdown .cd-close::before {content: '';position: absolute;left:36px;top:38px;bottom: auto;right: auto;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);-o-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); height:38px;width:2px; background-color:#434e58;} .cd-dropdown .cd-close::after {-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);-o-transform: translateX(-50%) translateY(-50%) rotate(45deg);transform: translateX(-50%) translateY(-50%) rotate(45deg);} .cd-dropdown .cd-close::before {-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);-moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);-ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);-o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);transform: translateX(-50%) translateY(-50%) rotate(-45deg);} .cd-dropdown .logo{margin: 13px 15px;} .cd-dropdown .logo img{height: 45px;} .cd-dropdown .logo a{display:block; } .cd-dropdown.dropdown-is-active {visibility:visible; height:200vh; overflow-x: hidden; overflow-y: scroll; -webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);-webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0s;-moz-transition: -moz-transform 0.5s 0s, visibility 0s 0s;transition: transform 0.5s 0s, visibility 0s 0s;} .cd-dropdown-content ul ul ul ul{background: #fbfbfb; height:200vh} @media only screen and (min-width: 1024px) { .cd-dropdown {position: absolute;top: 100%;/* reset style*/width: auto;height: calc(100vh - 110px);-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);background-color: #ffffff;color: #6f7271;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);opacity: 0;-webkit-transform: translateY(30px);-moz-transform: translateY(30px);-ms-transform: translateY(30px);-o-transform: translateY(30px);transform: translateY(30px);-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;} .cd-dropdown .header-sidebar{display:none} .open-to-left .cd-dropdown {/* use the .open-to-left class if you want to open the dropdown on the left */right: 0; left: auto;} .cd-dropdown.dropdown-is-active {visibility: visible; height:100vh; overflow-x: inherit; overflow-y: inherit} .cd-dropdown h2, .cd-dropdown .cd-close,.cd-dropdown .logo {/* on desktop - hide title and 'X' */display: none;} .cd-dropdown.dropdown-is-active {opacity: 1;-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);-webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s, -webkit-transform 0.3s 0s;-moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s;transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s; background: #f5f5f5;} } .cd-dropdown-content, .cd-dropdown-content ul {position: absolute; left: 0;width: 100%; height:250vh; overflow-x: hidden; overflow-y: auto; -webkit-transition: -webkit-transform 0.3s;-moz-transition: -moz-transform 0.3s;transition: transform 0.3s;} .cd-dropdown-content {top:70px;} .cd-dropdown-content ul{top:-1px} .cd-dropdown-content a, .cd-dropdown-content ul a {display:block; color: #565656; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top-width: 1px; border-color: rgba(0,0,0,0.05); border-style: solid;} .cd-dropdown-content li:first-of-type > a, .cd-dropdown-content ul li:first-of-type > a {border-top-width: 0;} .cd-dropdown-content li:last-of-type > a, .cd-dropdown-content ul li:last-of-type > a {border-bottom-width: 1px;} .cd-dropdown-content .cd-divider, .cd-dropdown-content ul .cd-divider {padding-top: 10px;padding-bottom: 10px;background-color: #0b0e23;font-size: 1.1rem;font-weight: bold;color: #585a70;text-transform: uppercase;} .cd-dropdown-content .cd-divider + li > a, .cd-dropdown-content ul .cd-divider + li > a {border-top-width: 0;} .cd-dropdown-content a, .cd-dropdown-content .cd-search, .cd-dropdown-content .cd-divider, .cd-dropdown-content ul a, .cd-dropdown-content ul .cd-search, .cd-dropdown-content ul .cd-divider { /* Force Hardware Acceleration */-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;-moz-transition: opacity 0.3s, -moz-transform 0.3s;transition: opacity 0.3s, transform 0.3s;} .cd-dropdown-content.is-hidden, .cd-dropdown-content ul.is-hidden { /* push the secondary dropdown items to the right */-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-ms-transform: translateX(100%);-o-transform: translateX(100%);transform: translateX(100%);} .cd-dropdown-content.is-hidden > li > a, .cd-dropdown-content.is-hidden > li > .cd-search, .cd-dropdown-content.is-hidden > .cd-divider, .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.is-hidden > li > a, .cd-dropdown-content ul.is-hidden > li > .cd-search, .cd-dropdown-content ul.is-hidden > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider { /* lower down the dropdown items opacity - when secondary dropdown slides in or for dropdown items hidden on the right */ opacity: 0;} .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider {/* push the dropdown items to the left when secondary dropdown slides in */-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-ms-transform: translateX(-100%);-o-transform: translateX(-100%);transform: translateX(-100%);} .dropdown-is-active .cd-dropdown-content, .dropdown-is-active .cd-dropdown-content ul {-webkit-overflow-scrolling: touch;} /*Member rate*/ .menu-member-rate{position:absolute; min-width:300px; width:300px; top:85px; right:5px; padding:20px 20px 10px 20px; background:#ffffff; border:1px solid #d6dbde; box-shadow: 0 0 20px rgba(0,0,0,0.1); font-size:1.4rem; z-index: 1} .menu-member-rate .member-rates{ display:flex; margin-bottom:8px; font-size:1.5rem; line-height:1.8rem; color:#555; } .menu-member-rate .member-rates .icon-bell{content:''; background:url('https://storage.amari.com/icon/bell.svg') no-repeat; display:inline-block; width:35px; height:35px; margin-right:8px; vertical-align:top;} .menu-member-rate .member-rates .text b{font-family: 'Foglihten', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; display:block; margin:0; font-weight:bold; color:#000} .th .menu-member-rate .member-rates {font-size:1.6rem;} .menu-member-rate a.button{float:right; padding:13px 25px; background-color:#9BB7D4; color:#fff; font-size:1.5rem; border:none; border-radius:3px; -webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out;transition: all .4s ease-in-out;} .menu-member-rate a.button:hover{background:#855d99; color:#fff; cursor:pointer;} .th .menu-member-rate a.button {font-size: 1.6rem;} .menu-member-rate .link{clear:both; font-size:1.3rem; text-align:right; color:#8e9291} .menu-member-rate .link a{color:#333; text-decoration:underline; display:inline; padding:0; line-height:48px;} .menu-member-rate .link a:hover{color:#855d99;} .th .menu-member-rate .link{font-size: 1.5rem;} @media only screen and (min-width: 896px) { .cd-dropdown-content, .cd-dropdown-content ul {padding-top:60px;} .cd-dropdown-content a, .cd-dropdown-content ul a {font-size:1.8rem;} } .cd-dropdown-content, .cd-dropdown-content ul {padding-top: 0; overflow: visible; list-style:none} .cd-dropdown-content a, .cd-dropdown-content ul a {color:#565656; height:60px; line-height:60px; font-size: 1.8rem; border-color:rgba(0,0,0,0.05);} .cd-dropdown-content a:hover, .cd-dropdown-content ul a:hover{background: #fff} .cd-dropdown-content li.other{background:#ebf0f2;} .cd-dropdown-content li.other a {height:40px;line-height:40px;font-size: 1.6rem; text-align:center} /*Hamburger - When ONR login*/ .cd-dropdown-content .onr-login a{display: block; color:#fff; background:#6986d1} .no-touch .cd-dropdown-content .onr-login .cd-secondary-dropdown a:hover, .cd-dropdown-content .onr-login .cd-secondary-dropdown > .see-all a{background-color: #f5f5f5!important} .cd-dropdown-content .has-children.onr-login > a::before, .has-children.onr-login > a::after, .has-children.onr-login .go-back a::before, .has-children.onr-login .go-back a::after{background: #fff;} .cd-dropdown-content .onr-login .member-icon:before{content:''; background-image: url('https://storage.onyx-hospitality.com/assets/icon/icon-user_wh.svg'); background-repeat: no-repeat; background-position:0 0; width:30px; height:30px; margin:15px 0; display:inline-block;} .cd-dropdown-content .onr-login .member-icon:hover:before{background-position: 0 -30px} .cd-dropdown-content .onr-login .member-name:before{content:''; background-image: url('https://storage.onyx-hospitality.com/assets/icon/icon-user_wh.svg'); background-repeat: no-repeat; background-position:0 0; width:30px; height:30px; display:inline-block; vertical-align: middle; margin: -3px 5px 0 0} .cd-dropdown-content .onr-login .member-name:hover:before, .cd-dropdown-content .onr-login .acitve .member-name:before{background-position: 0 -30px} .cd-dropdown-content .onr-login .onr-logo{background-image: url('https://storage.mosaic-collection.com/logo/onyx-rewards.svg'); background-repeat: no-repeat; width: 130px; height: 60px; display:inline-block; text-indent:-9999em; margin: 10px auto} .cd-dropdown-content .onr-login .member-detail{padding:20px;} .cd-dropdown-content .onr-login .member-detail a{border-top: none; padding:0; height: 80px; text-align: center; background: transparent!important;} .cd-dropdown-content .onr-login .member-detail p{margin-top:15px; font-size:1.4rem;} .cd-dropdown-content .onr-login .member-detail #span-showname{font-size: 1.8rem; font-weight: bold; display: block} .cd-dropdown-content .onr-login .see-all .member-detail a, .cd-dropdown-content .onr-login .see-all .member-detail a:hover{background-color: transparent!important;} .cd-dropdown-content .onr-login .see-all .member-detail .btn{background-color: #fff!important; background:#fff; color:#5774d1; border: 2px solid #5774d1; display: inline-block; border-radius: 3px; height: auto; padding: 0 20px;} .cd-dropdown-content .onr-login .see-all .member-detail .btn-wrapper{text-align: center} .cd-dropdown-content .onr-login .see-all .member-detail .btn:hover{background-color: #5774d1!important;} .cd-dropdown-content .language .disable{height: 60px; line-height: 60px; padding: 0 20px; border-top:1px solid #e9ecee;} .cd-secondary-dropdown{background: #f5f5f5;} .cd-dropdown-content .cd-info{background:#fff;} .cd-dropdown-content .cd-info a{font-size:1.6rem; color:#7b7775;} .cn .cd-dropdown-content .cd-info a, .zh .cd-dropdown-content .cd-info a {font-size:1.5rem;} .cd-dropdown-content .cd-info.language{border-bottom: 1px solid #e9ecee;} .cd-dropdown-content .cd-divider, .cd-dropdown-content ul .cd-divider {background-color: transparent;color: #b3b3b3; border-top: 1px solid #e9ecee;} .cd-dropdown-content .cd-divider + li > a, .cd-dropdown-content ul .cd-divider + li > a {border-top-width: 1px;} .cd-dropdown-content.is-hidden > li > a, .cd-dropdown-content.is-hidden > li > .cd-search, .cd-dropdown-content.is-hidden > .cd-divider, .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.is-hidden > li > a, .cd-dropdown-content ul.is-hidden > li > .cd-search, .cd-dropdown-content ul.is-hidden > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider {/* reset mobile style */opacity: 1;} .cd-dropdown-content .cd-info .cd-secondary-dropdown a{color: #6d6d6d;} /*remark opening*/ .cd-secondary-dropdown .has-children i{color:#8b9498; font-size:1.4rem; font-style:normal} .cd-dropdown-content ul a i{color:#8b9498; font-size:1.4rem; font-style:normal} .cd-dropdown-content .see-all a {/* different style for the See all links */color: #5b96a9; font-weight: 600} .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item { /* items with picture (or icon) and title */height: 80px;line-height: 80px;} .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item h3, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 { /* truncate text with ellipsis if too long */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {padding-left: 90px;} .cd-dropdown-content .cd-dropdown-gallery img {position: absolute;display: block;height: 40px;width: auto;left: 20px;top: 50%;margin-top: -20px;} .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {padding-left: 75px;position: relative;} .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {color: #111433;font-size: 1.3rem;/* hide description on small devices */display: none;} .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before { /* item icon */content: '';display: block;position: absolute;left: 20px;top: 50%;margin-top: -20px;width: 40px;height: 40px;background-repeat: no-repeat;background-position: center center;background-size: 40px 40px;} .cd-dropdown-content .cd-secondary-dropdown li.title-nolink, .cd-dropdown-content .cd-secondary-dropdown li.property-nolink{height: 60px; line-height: 60px; border-top: 1px solid #e9ecee; padding: 0 20px; font-size: 1.6rem; color: #222} .dropdown-item i{opacity: 0.6} .dropdown-item{white-space: initial;} @media only screen and (min-width: 1024px) { .cd-dropdown-content {/* reset mobile style */position:static; height:auto; width:320px;} .cd-dropdown-content > li:last-of-type a {border-bottom: none;} .no-touch .cd-dropdown-content > li:not(.has-children) a:hover {color: #44697d; text-decoration:none} .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider { /* reset mobile style */-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);opacity: 1;} .cd-dropdown-content .cd-secondary-dropdown, .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons { -webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);left: 100%;height: auto;background-color: #ffffff;box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);} .cd-dropdown-content .cd-secondary-dropdown::after, .cd-dropdown-content .cd-dropdown-gallery::after, .cd-dropdown-content .cd-dropdown-icons::after {clear: both;content: "";display: table;} .open-to-left .cd-dropdown-content .cd-secondary-dropdown, .open-to-left .cd-dropdown-content .cd-dropdown-gallery, .open-to-left .cd-dropdown-content .cd-dropdown-icons { /* use the .open-to-left class if you want to open the dropdown on the left */left: auto;right: 100%;} .cd-dropdown-content .cd-secondary-dropdown.is-hidden, .cd-dropdown-content .cd-dropdown-gallery.is-hidden, .cd-dropdown-content .cd-dropdown-icons.is-hidden { /* reset mobile style */-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);} .cd-dropdown-content .cd-secondary-dropdown.fade-in, .cd-dropdown-content .cd-dropdown-gallery.fade-in, .cd-dropdown-content .cd-dropdown-icons.fade-in { /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */ -webkit-animation: fade-in 0.2s;-moz-animation: fade-in 0.2s;animation: fade-in 0.2s;} .cd-dropdown-content .cd-secondary-dropdown.fade-out, .cd-dropdown-content .cd-dropdown-gallery.fade-out, .cd-dropdown-content .cd-dropdown-icons.fade-out { /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */ -webkit-animation: fade-out 0.2s;-moz-animation: fade-out 0.2s;animation: fade-out 0.2s;} .cd-dropdown-content .cd-secondary-dropdown > .go-back, .cd-dropdown-content .cd-dropdown-gallery > .go-back, .cd-dropdown-content .cd-dropdown-icons > .go-back {display: none;} .cd-dropdown-content .cd-secondary-dropdown > .see-all, .cd-dropdown-content .cd-secondary-dropdown > .upcoming, .cd-dropdown-content .cd-dropdown-gallery > .see-all, .cd-dropdown-content .cd-dropdown-icons > .see-all {/*position: absolute; bottom: 0;*/ height: 45px; text-align: center;} .cd-dropdown-content .cd-secondary-dropdown > .see-all a, .cd-dropdown-content .cd-secondary-dropdown > .upcoming a, .cd-dropdown-content .cd-dropdown-gallery > .see-all a, .cd-dropdown-content .cd-dropdown-icons > .see-all a {margin: 0; height: 100%; line-height: 45px; background: #f5f5f5; color: #091f40; pointer-events: auto;-webkit-transition: color 0.2s, background-color 0.2s;-moz-transition: color 0.2s, background-color 0.2s;transition: color 0.2s, background-color 0.2s;} .cd-dropdown-content .cd-secondary-dropdown > .upcoming{width: 100%} .cd-dropdown-content .cd-secondary-dropdown > .upcoming a{background:#f5f5f5; color: #25304a;} .no-touch .cd-dropdown-content .cd-secondary-dropdown .upcoming a:hover{color: #fff;} .cd-dropdown-content .cd-secondary-dropdown > .upcoming a:hover{background: #b1d2d6; color: #fff;} .cd-dropdown-content .cd-secondary-dropdown > .see-all, .cd-dropdown-content .cd-dropdown-gallery > .see-all, .cd-dropdown-content .cd-dropdown-icons > .see-all {/*position: absolute; bottom: 0;*/ height: 45px; text-align: center;} .cd-dropdown-content .cd-secondary-dropdown > .see-all a, .cd-dropdown-content .cd-dropdown-gallery > .see-all a, .cd-dropdown-content .cd-dropdown-icons > .see-all a {margin: 0;height: 100%;line-height: 45px;background: #f5f5f5; color: #565656; pointer-events: auto;-webkit-transition: color 0.2s, background-color 0.2s;-moz-transition: color 0.2s, background-color 0.2s;transition: color 0.2s, background-color 0.2s;} .no-touch .cd-dropdown-content .cd-secondary-dropdown > .see-all a:hover, .no-touch .cd-dropdown-content .cd-dropdown-gallery > .see-all a:hover, .no-touch .cd-dropdown-content .cd-dropdown-icons > .see-all a:hover {color:#ffffff; background-color:#b1d2d6;} .cd-dropdown-content .cd-secondary-dropdown .cd-dropdown-item, .cd-dropdown-content .cd-secondary-dropdown a, .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-gallery a, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-icons a {border: none;} .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {padding: 20px 30px 100px;} .cd-dropdown-content .cd-dropdown-gallery > .see-all, .cd-dropdown-content .cd-dropdown-icons > .see-all {width: calc(100% - 60px);} .cd-dropdown-content .cd-dropdown-icons > li, .cd-dropdown-content .cd-secondary-dropdown > li {width: 50%; float: left;} .cd-dropdown-content .cd-secondary-dropdown {width:calc(100vw - 320px); height: calc(100vh - 115px); padding-bottom:65px; list-style: none;} /* this is the separation line in the middle of the .cd-secondary-dropdown element */ /*.cd-dropdown-content .cd-secondary-dropdown::before {position: absolute; content: ''; top: calc(100vh - 115px); left: 15px; height: 1px; width: 640px; background-color: #e9ecee;}*/ .cd-dropdown-content .cd-secondary-dropdown > li > a, .cd-dropdown-content .cd-info .cd-secondary-dropdown > li > a {color:#565656; font-family: 'Noto Sans', 'Noto Sans Thai', 'YouYuan'; font-size: 1.6rem; margin-bottom: 10px;line-height: 30px;height: 30px; /*nolink = pointer-events: none;*/} .cd-dropdown-content .cd-secondary-dropdown > li > a::after, .cd-dropdown-content .cd-secondary-dropdown > li > a::before {/* hide the arrow */display: none;} .cd-dropdown-content .cd-secondary-dropdown.move-out > li > a {/* reset mobile style */-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);-o-transform: translateX(0);transform: translateX(0);} .cd-dropdown-content .cd-secondary-dropdown > li {margin: 20px 0;border-right-width: 1px;border-color: #e9ecee;border-style: solid;padding: 0 30px; list-style:none;} .cd-dropdown-content .cd-secondary-dropdown > li:nth-of-type(2n) {border-right-width: 0;} .cd-dropdown-content .cd-secondary-dropdown > li > ul {/* reset mobile style */-webkit-transform: translate(0);-moz-transform: translate(0);-ms-transform: translate(0);-o-transform: translate(0);transform: translate(0);position: relative; height:100%;} .cd-dropdown-content .cd-secondary-dropdown > li > ul > .go-back {display: none;} .cd-dropdown-content .cd-secondary-dropdown li.title-nolink, .cd-dropdown-content .cd-secondary-dropdown a {line-height:30px; height:30px; font-size: 1.6rem; padding-left: 0;} .cd-dropdown-content .cd-secondary-dropdown li.title-nolink{color:#242525} .cd-dropdown-content .cd-secondary-dropdown li.property-nolink{color:#666; font-size: 1.6rem; line-height:30px; height:30px;} .cd-dropdown-content .cd-secondary-dropdown li.title-nolink, .cd-dropdown-content .cd-secondary-dropdown li.property-nolink{border-top:0; padding:0} .cd-dropdown-content .cd-secondary-dropdown li.divider{margin:4px 0; width:100%; height:1px; background-color:#efefef} .cd-dropdown-content .cd-secondary-dropdown li.divider.blank{background-color:transparent} .cd-dropdown-content .cd-secondary-dropdown > li > ul a .badge{padding: .5em .8em; border-radius: 50px;} .no-touch .cd-dropdown-content .cd-secondary-dropdown a:hover {color: #b196a6; text-decoration:none;} .cd-dropdown-content .cd-secondary-dropdown ul {padding:10px 0;overflow:hidden; height:100%; background-color:#fff} .cd-dropdown-content .cd-secondary-dropdown .go-back a {padding-left: 20px;color:#5b96a9;} .no-touch .cd-dropdown-content .cd-secondary-dropdown .go-back a:hover {color: #b196a6 /*7aa2de*/;} .cd-dropdown-content .cd-secondary-dropdown .go-back a::before, .cd-dropdown-content .cd-secondary-dropdown .go-back a::after {left: 0;} .cd-dropdown-content .cd-secondary-dropdown .see-all {width: 100%;} .cd-dropdown-content .cd-secondary-dropdown .see-all a:hover{color:#222d68;} /*ourbrand*/ .cd-dropdown-content .cd-secondary-dropdown > li.header{width: 100%; height: 42px; position: relative; background: transparent; border-bottom: 1px solid #e9ecee; margin-bottom:0; padding: 0 20px;} /*language*/ .cd-dropdown-content .language .cd-secondary-dropdown > li.header{width: 100%; height: 42px; position: relative; background: transparent; border-bottom: 1px solid #e9ecee; margin-bottom:0; padding: 0 20px; border-right: none;} .cd-dropdown-content .language .cd-secondary-dropdown ul{border-top:0;} .cd-dropdown-content .language .cd-secondary-dropdown .is-hidden li, .cd-dropdown-content .language .cd-secondary-dropdown .is-hidden li a {line-height:40px; height:40px; font-size:1.4rem} .th .cd-dropdown-content .language .cd-secondary-dropdown .is-hidden li, .th .cd-dropdown-content .language .cd-secondary-dropdown .is-hidden li a{font-size:1.5rem} .cd-dropdown-content .language .cd-secondary-dropdown .has-children .disable{height:40px; line-height:40px; padding:0; border-top:0;} .cd-dropdown-content .cd-dropdown-gallery {width: 600px;padding-bottom: 100px;} .cd-dropdown-content .cd-dropdown-gallery > li {width: 48%;float: left;margin-right: 4%;} .cd-dropdown-content .cd-dropdown-gallery > li:nth-of-type(2n) {margin-right: 0;} .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {padding: 0;height: auto;line-height: normal;color: #44697d;margin-bottom: 2em;} .cd-dropdown-content .cd-dropdown-gallery > li:nth-last-of-type(2) a,.cd-dropdown-content .cd-dropdown-gallery > li:last-of-type a {margin-bottom: 0;} .cd-dropdown-content .cd-dropdown-gallery img {position: static;height: auto;width: 100%;margin: 0 0 0.6em;} .cd-dropdown-content .cd-dropdown-icons {width: 600px;} .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {height: 80px;line-height: 1.2;padding: 24px 0 0 85px;} .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item:hover {background: #e9ecee;} .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {color: #44697d;font-weight: bold;} .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {display: block;font-size: 1.4rem;} .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {left: 25px;} .cd-dropdown-content > .has-children > ul {visibility: hidden;} .cd-dropdown-content > .has-children > ul.is-active {/* when hover over .cd-dropdown-content items - show subnavigation */visibility: visible;} .cd-dropdown-content > .has-children > .cd-secondary-dropdown.is-active > li > ul {/* if .cd-secondary-dropdown is visible - show also subnavigation */visibility: visible;} .no-touch .cd-dropdown-content > li:not(.has-children) a:hover, .cd-dropdown-content > .has-children > a.is-active {/* hover effect for .cd-dropdown-content items with subnavigation */box-shadow: inset 3px 0 0 #b196a6; color: #b196a6; text-decoration:none; background-color:#fff} .no-touch .cd-dropdown-content > li:not(.has-children) a:hover::before, .no-touch .cd-dropdown-content > li:not(.has-children) a:hover::after, .cd-dropdown-content > .has-children > a.is-active::before, .cd-dropdown-content > .has-children > a.is-active::after {background:#b196a6;} .open-to-left .cd-dropdown-content > .has-children > a.is-active {box-shadow:inset -2px 0 0 #b196a6;} } @media (min-width:1280px) { .cd-dropdown-content .cd-secondary-dropdown {width:calc(100vw - 320px); height: calc(100vh - 115px); padding-bottom:65px; list-style: none;} } @media (min-width:1440px) { .cd-dropdown-content .cd-secondary-dropdown {width:860px;} } .has-children > a, .go-back a {position: relative;} /* arrow icon in CSS - for element with nested unordered lists */ .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {content: '';position: absolute;top: 50%;margin-top: -1px;display: inline-block;height: 2px;width: 10px;background: #ffffff;-webkit-backface-visibility: hidden;backface-visibility: hidden;} .has-children > a::before, .go-back a::before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);} .has-children > a::after, .go-back a::after {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);} .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {background:#b3b3b3;} .has-children > a {padding-right: 40px;} /* arrow goes on the right side - children navigation */ .has-children > a::before, .has-children > a::after {right: 20px;-webkit-transform-origin: 9px 50%;-moz-transform-origin: 9px 50%;-ms-transform-origin: 9px 50%;-o-transform-origin: 9px 50%;transform-origin: 9px 50%;} .has-children.language > a::before, .has-children.language > a::after{content:none} @media only screen and (min-width: 1024px) { .open-to-left .cd-dropdown-content > .has-children > a {padding-left: 40px;padding-right: 20px;} .open-to-left .cd-dropdown-content > .has-children > a::before, .open-to-left .cd-dropdown-content > .has-children > a::after {right: auto;left: 20px;-webkit-transform-origin: 1px 50%;-moz-transform-origin: 1px 50%;-ms-transform-origin: 1px 50%;-o-transform-origin: 1px 50%;transform-origin: 1px 50%;} } .cd-dropdown-content .go-back a {padding-left: 40px;} .cd-dropdown-content .go-back a::before, .cd-dropdown-content .go-back a::after {/* arrow goes on the left side - go back button */left: 20px;-webkit-transform-origin: 1px 50%;-moz-transform-origin: 1px 50%;-ms-transform-origin: 1px 50%;-o-transform-origin: 1px 50%;transform-origin: 1px 50%;} .cd-main-content {background-color:#fff; position: relative; z-index: 0;} .no-js .cd-dropdown-wrapper:hover .cd-dropdown {visibility: visible;opacity: 1;-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);} .no-js .cd-dropdown-wrapper .cd-close {display: none;} /*Hamburger*/ .overlay-effect{position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; -webkit-transform:translateX(-100%); transform:translateX(-100%); background:rgba(0, 0, 0, .7); z-index:5} .overlay-effect.is-active {-webkit-transform:translateX(0); transform:translateX(0);} .navbar-light .hamburger.navbar-toggler{border-right:1px solid #e6eaea; width:38px; height:50px; box-sizing: content-box; padding:0 20px; -webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out; cursor: pointer;} .navbar-toggler {border: none;background: transparent !important;} .navbar-toggler:focus {outline: none;background: transparent !important;} .navbar-toggler .icon-bar {background-color: #b7bfc3;transform: rotate(0deg) translate(0px, 0px);transition: ease all .2s;} .navbar-toggler .icon-bar {display: block; width:38px;height:2px;} .navbar-toggler .icon-bar+.icon-bar {margin-top:6px;} .icon-bar:nth-child(2) {width:28px; transition:ease all .2s;} .navbar-toggler:hover>.icon-bar:nth-child(2) {width: 38px; transition: ease all .2s;} .navbar-toggler:active>.icon-bar:nth-child(2) {width: 38px; transition: ease all .2s;} .navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {transform: rotate(45deg) translate(6px, 5px);transition: ease all .2s;} .navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {opacity: 0; transition: ease all .2s;} .navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {transform: rotate(-45deg) translate(7px, -5px); transition: ease all .2s;} .navbar-expand-lg .navbar-nav .nav-link{padding:20px; font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.6rem; letter-spacing:.3px; line-height:1.8rem; font-weight: normal; color:#282828; text-transform:uppercase; position: relative;} .th .navbar-expand-lg .navbar-nav .nav-link{font-family:'Noto Sans Thai'; font-weight: 500;} .navbar-expand-lg .navbar-nav .nav-link.active{color:#b196a6 /*7aa2de*/} .navbar-expand-lg .navbar-nav .nav-link.dropdown-toggle:hover:after, .navbar-expand-lg .navbar-nav .nav-link.active.dropdown-toggle:after{border: solid #b196a6; border-width: 0 2px 2px 0;} .navbar-expand-lg .navbar-nav .nav-link:focus:after .menu-effect{border: solid #f48573; border-width: 0 2px 2px 0;} /*Top Menu Hover - Menu Effect*/ .navbar-expand-lg .navbar-nav .nav-link:hover .menu-effect, .navbar-expand-lg .navbar-nav .nav-link:focus .menu-effect {transform: translate3d(0, 105%, 0);} .menu-title {display: inline-block;overflow: hidden;} .menu-effect {display: inline-block; position: relative; transition: transform 0.3s;} .menu-effect::before {position: absolute;content: attr(data-hover);} .menu-effect::before { bottom: 105%; color: #b196a6;} /*slide left menu*/ .sidebar-nav{position:fixed; top:0; left:0; bottom:0; width:320px; -webkit-transform:translateX(-320px); transform:translateX(-320px); transition:-webkit-transform .7s; transition:transform .7s; transition:transform .7s, -webkit-transform .7s; background:#f4f7f6; overflow-y:auto; z-index:1000;} .sidebar-nav.is-opened {transform:translateX(0);} /*sidebar-nav scroll bar*/ .sidebar-nav::-webkit-scrollbar, .cd-dropdown-content .cd-secondary-dropdown::-webkit-scrollbar, .cd-dropdown-gallery::-webkit-scrollbar {width:5px;} .sidebar-nav::-webkit-scrollbar-track, .cd-dropdown-content .cd-secondary-dropdown::-webkit-scrollbar-track, .cd-dropdown-gallery::-webkit-scrollbar-track {background:#fff;} /* Track */ .sidebar-nav::-webkit-scrollbar-thumb, .cd-dropdown-content .cd-secondary-dropdown::-webkit-scrollbar-thumb, .cd-dropdown-gallery::-webkit-scrollbar-thumb {background:#e7efec;}/* Handle */ .sidebar-nav::-webkit-scrollbar-thumb:hover, .cd-dropdown-content .cd-secondary-dropdownv::-webkit-scrollbar-thumb:hover, .cd-dropdown-gallery::-webkit-scrollbar-thumb:hover {background:#cce0d9;}/* Handle on hover */ .sidebar-nav .sidebar-top{background:#FFF; height:70px; padding:0; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out; font-weight:normal; overflow:hidden; z-index:1;} .sidebar-nav .sidebar-top .logo{display:block; line-height:normal;} .sidebar-nav .sidebar-top .logo a{display:inline-block} /*sidebar-nav menu*/ .sidebar-nav .menu li.active .item {color:#49c5b6;} .sidebar-nav .menu .item, .sidebar-nav .menu a { position:relative; display:block; padding:20px 30px; font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC',; font-size:.9em; color:#4d5b64; cursor:pointer; background:#f4f7f6; border-bottom:1px solid #E6EAEA; -webkit-transition:background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out; transition:background 0.3s ease-in-out, border 0.3s ease-in-out, color 0.3s ease-in-out;} .sidebar-nav .menu .item:hover, .sidebar-nav .menu a:hover {background-color:#fcfcfc; color:#49c5b6; -webkit-transition:background 0.3s ease-in-out; transition:background 0.3s ease-in-out; text-decoration:none} /*lang*/ .sidebar-nav .menu li [data-count]:not([data-count=""]):after {content:attr(data-count); display:block; position:absolute; top:50%; right:25px; width:24px; height:24px; font-size:.7em; line-height:25px; color:#fff; text-align:center; background-color:#50c5b6; border-radius:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%);} .sidebar-nav .menu li.opens-right>a::after {content:''; display:inline-block; font-style:normal; position:absolute; top:22px; right:25px; width:10px; height:10px; border-right:1px solid #909497; border-top:1px solid #909497; transform:rotate(45deg); margin:0 auto} .sidebar-nav .sidebar-content h6{display:block; background:#fff; color:#999; font-size:0.7em; line-height:1;padding:8px 20px; height:auto; text-transform:capitalize;} .sidebar-nav .menu.about{border-bottom:1px solid #E6EAEA;} .sidebar-nav .menu.about .item, .sidebar-nav .menu.about a{background:#fff; padding:8px 20px; font-size:0.8em;border-bottom:0} .sidebar-nav .menu.about .item:hover, .sidebar-nav .menu.about a:hover{/*background-color:#f4f7f6; */color:#222;} /*stickytop*/ .stickytop .header-main{position:fixed; top:0; width: 100%; background:#fff; z-index:200!important; box-shadow:0 0 10px 0 rgba(0,0,0,0.1); animation:slide-down 0.7s;} .stickytop .navbar{height: 90px;} .stickytop .navbar-light .navbar-nav .nav-link.active{color: #b196a6 /*7aa2de*/;} .stickytop .navbar-light .navbar-nav .nav-link:hover{color:#000} .stickytop .dropdown-toggle:after{border: solid rgba(0,0,0,0.5);border-width: 0 2px 2px 0;} /*Carousel FullScreen*/ .main-banner{position:relative; z-index:1} .main-banner.fullscreen{width:100%; height:75vh;} .main-banner.fullscreen .carousel-item .btn-wrapper{position: relative;} .main-banner.fullscreen .image{position:relative; width:100%; height:75vh; background:no-repeat center center scroll; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;} .main-banner.fullscreen .carousel-caption:before{content:''; position:absolute; width:400px; height:400px; left:calc(50% - 200px); bottom:-80px; border-radius:50%; border:100px solid rgb(72 33 123 / 50%); z-index:-1} /*Content Center = Our Brands, Development*/ .main-banner.fullscreen .carousel-caption{width: calc(100% - 60px); left: 30px; right: 30px; bottom: 30px; margin:0 auto; text-align:center; color:#fff; text-shadow: 0 0 10px rgba(0,0,0,.3)} .main-banner.fullscreen h1{color:#fff} .main-banner.fullscreen h2{color:#fff; text-transform:inherit;} .main-banner.fullscreen .description{font-size: 1.6rem;} /*Content Center = Home*/ .main-banner.fullscreen .carousel-caption h2{font-family:'Montserrat', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; line-height:1.2; color:#fff; text-shadow:0 0 30px rgba(0,0,0,.9); margin:0;} .main-banner.fullscreen .carousel-caption h3{font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-weight: normal; font-size: 2rem; color:#fff} .main-banner.fullscreen .carousel-caption header{margin-bottom:30px} /*indicators*/ .main-banner.fullscreen .indicators {bottom: 70px; left: 40px; margin: 0 auto;} .main-banner.fullscreen .countslide {-webkit-transform: rotate(180deg); transform: rotate(180deg); white-space: nowrap; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; bottom:0; font-size:1.7rem;} .main-banner.fullscreen .carousel-indicators {margin: 0; display: block; bottom:50px; left:-5px;} .main-banner.fullscreen .carousel-indicators .active{width: 24px; height: 24px; margin: 10px 4px; border:1px solid #a2a7a6; background:none; } .main-banner.fullscreen .carousel-indicators li{width: 8px; height: 8px; margin: 10px 13px; border-radius: 50%; border:0; color:rgba(255,255,255,.7)} /*caption*/ .overlay-gradient{background: rgba(0,0,0,0.2); background: -moz-linear-gradient(rgba(255,255,255,0) 40%, rgba(0,0,0,0.5) 100%); background: -webkit-linear-gradient(rgba(255,255,255,0) 40%, rgba(0,0,0,0.5) 100%); background: -o-linear-gradient(rgba(255,255,255,0) 40%, rgba(0,0,0,0.5) 100%); background: -ms-linear-gradient(rgba(255,255,255,0) 40%, rgba(0,0,0,0.5) 100%); background: linear-gradient(rgba(255,255,255,0) 40%, rgba(0,0,0,0.5) 100%); z-index:1;} .carousel-caption{left:15px; right:15px; bottom:30px} .carousel-caption p{line-height:1.4; text-shadow:0 0 10px rgba(0,0,0,.3)} .main-banner .overlay-gradient{position:absolute; bottom:-1px; left:0; right:0; width:100%; height:100%;} .main-banner.fullscreen h3.text-big {font-family:'Montserrat', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:8rem; text-transform:uppercase; letter-spacing:0; font-weight:bold; color: rgba(255,255,255,.13); position:absolute; top: -40px; right: -10px; z-index:2;} *[dir="rtl"] .main-banner.fullscreen .carousel-control-prev {left: 0; right: inherit;} /*Social Responsibility Banner*/ /*.social-responsibility .main-banner.fullscreen .carousel-caption {text-align:left; margin:0; bottom:10%;} .social-responsibility .main-banner.fullscreen .description {margin:0; text-align:left;}*/ .social-responsibility .cards_border0 .cards .content h2.tagline {font-size: 1.9rem; line-height: 2rem; color: #b196a6 /*7aa2de*/; font-weight: 500; margin: 0;} .social-responsibility .cards_border0 .cards .content h2.tagline:after {content: ''; display: block; background: #dfe0e0; width: 35px; height: 2px; margin: 10px 0 20px 0;} .social-responsibility .cards_border0 .cards .content h3 {font-size: 3.6rem; color:#6d6d6d;} .social-responsibility .cards_border0 .cards .content h3 small {font-size: 2rem; color:#aaafb2;} .social-responsibility .fancybox-width h4 {color:#4d738a} .social-responsibility .fancybox-width li {position: relative; padding-left: 15px; list-style: none;} .social-responsibility .fancybox-width li:before {content: ''; background: #ffcca9; border-radius: 7px; width: 7px; height: 7px; margin: 2px; position: absolute; left: 0; top: 7px;} /*scroll down line animation*/ .scrolldown {position: absolute; right: 20px; bottom: 150px; z-index: 10; transition: all 1s ease 0s; transform:rotate(90deg);text-transform:uppercase;color:#fff;font-size:1.5rem;letter-spacing:.7px;} .scrolldown:after, .scrolldown:before{content:""; height:1px; width:50px; margin-left:5px; background-color:#fff; position:absolute; bottom:50%} .scrolldown:before{left:65px;opacity:.5} .scrolldown:after {left:calc(100% + 3px); width:24px; animation:scrolldown 3s cubic-bezier(.77,0,.175,1) infinite} .scrolldown span {color:#fff;} .scrolldown span:hover {opacity:.7;} @keyframes scrolldown {0% {width: 24px} 50% {width: 50px} to {width: 24px}} .hide{display:none} .image .inner, .image_big .inner{width:100%; height:100%;} .image .inner img, .image_big .inner img, .image_small .inner img{object-fit:cover; width:100%; height:100%;} /*Button **********************/ .btn-wrapper{position:relative; margin:30px 0} .btn {font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.6rem; text-transform:uppercase; letter-spacing:1.3px; line-height:1; cursor:pointer; position:relative; margin:15px 0; padding:20px 30px; border:0; border-radius:0; outline: none; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;} .cn .btn, .zh .btn {font-weight:500;} .btn:focus, .btn:active{outline:none; border:none; box-shadow:none;} .btn:after {content: ''; position:absolute; z-index: -1;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;} .btn:before {line-height: 1;position: relative; -webkit-font-smoothing: antialiased;} .th .btn {font-weight:400;} /*button no border*/ button {-webkit-appearance: none;-moz-appearance: none; background: transparent; padding: 0; border: 0; border-radius: 0; line-height: 1; } button:active, button:focus, .btn:focus{outline:none} .flickity-button:focus{box-shadow:none;} /*close button*/ button.close {position:absolute; display:inline-block; top:0; right:0; margin:0; width:48px; height:48px;} button.close span{position:absolute; z-index:50; top:calc(50% - 8px); left:calc(50% - 8px); display:block; width:16px; height:16px; margin:0; -webkit-transform:rotate(45deg); transform:rotate(45deg);} button.close:hover span {-webkit-animation:rotating 0.2s linear; -moz-animation:rotating 0.2s linear;-ms-animation:rotating 0.2s linear;-o-animation:rotating 0.2s linear;animation:rotating 0.2s linear} button.close span:before{content: ''; position: absolute; top: 50%; left: 0px; display: block; margin-top: -1px; width:16px; height:2px; background-color:#000;} button.close span:after{content: ''; position: absolute; top: 0px; left: 50%; display: block; margin-left: -1px; width:2px; height:16px; background-color:#000;} button.close.white span:before{background-color:#fff;} button.close.white span:after{background-color:#fff;} button.expand {-webkit-appearance:none; padding: 0; cursor: pointer; background: 0 0; border: 0;position:absolute; display:inline-block; top:12px; right:12px; margin:0; width:30px; height:30px;} button.expand span{position:absolute; z-index:50; top:0px; left:50%; width:18px; height:18px; display: inline-block; margin:0 0 0 -10px; border-top:2px solid #000; border-right:2px solid #000; transform: rotate(135deg);} button.expand.white span {border-right:2px solid #fff; border-top:2px solid #fff} #rtl button.close{left:10px; right:inherit} #rtl button.expand{left:12px; right:inherit} /* Button on banner / Button Blue */ .btn-bl {background:#111419; color:#fff; padding:20px 40px 20px 30px; display:inline-block; vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px rgba(0, 0, 0, 0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s;} .btn-bl:hover{color:#fff;} .btn-bl:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0; background:#3e56af; color:#fff; -webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;} .btn-bl:hover:before, .btn-bl:focus:before, .btn-bl:active:before {-webkit-transform:scaleX(1);transform:scaleX(1);} .btn-bl:after {content:""; background:url(https://storage.onyx-hospitality.com/assets/icon/icon-arrow-right_wh.svg) no-repeat; display:inline-block; width:8px; height:12px; top:calc(50% - 7px); left:84%; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s; } .btn-bl:hover:after {left:88%;} /*Button bg dark blue - hover green*/ .btn-book {background:#5b97aa; color:#fff; display:inline-block; vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px rgba(0, 0, 0, 0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s;} .btn-book:hover{color:#fff;} .btn-book:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0; background:#6daca4; color:#fff; -webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;} .btn-book:hover:before, .btn-book:focus:before, .btn-book:active:before {-webkit-transform:scaleX(1);transform:scaleX(1);} .btn-book.-full {display: block; margin: 0;} .btn-request {background:#5b97aa; color:#fff; display:inline-block; vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px rgba(0, 0, 0, 0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s;} .btn-request:hover{color:#fff;} .btn-request:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0; background:#6daca4; color:#fff; -webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;} .btn-request:hover:before, .btn-request:focus:before, .btn-request:active:before {-webkit-transform:scaleX(1);transform:scaleX(1);} /*Button readmore*/ .btn-readmore {position: relative; font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 1.6rem; line-height: 1.6rem; color: #30375a; text-transform: uppercase; letter-spacing: .3px; vertical-align: middle; border-bottom:4px solid #eeeef8;padding: 15px 0; transition: all 0.2s ease; text-align: left;} .btn-readmore:after {position: relative; background: url(https://storage.onyx-hospitality.com/assets/icon/btn_arrow-right_bk-bl.svg); background-position: 0 0; content: ''; display: inline-block; width: 22px; height: 14px; top: 2px; margin-left: 10px; transform: translateX(-5px); transition: all 0.3s ease; float:right; z-index:1;} .btn-readmore:hover {border-bottom: 4px solid #5774d1; color:#5774d1;} .btn-readmore:hover:after {transform: translateX(0); background-position:-22px 0;} .btn-readmore.-full {display: block;margin: 20px 0 10px 0;} .btn-readmore.-full:focus{border-bottom:4px solid #eeeef8;} /*Button learnmore*/ .btn-learnmore{ background:#5b97aa; color:#fff;-webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px rgba(0, 0, 0, 0); -webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s; padding: 8px 40px; line-height:48px;} .btn-learnmore:hover{color:#fff} .btn-learnmore:before{content:""; position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0; background:#6daca4; color:#fff; -webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;} .btn-learnmore:hover:before, .text-overlap-image .content .btn-learnmore:focus:before, .text-overlap-image .content .btn-learnmore:active:before {-webkit-transform:scaleX(1); transform:scaleX(1);} /*Button Primary*/ .btn-ani-hover-change {position: relative; margin: 10px auto; padding: 19px 20px; transition: all 0.2s ease; font-weight:600; color:#333} .btn-ani-hover-change:before {content: ""; position: absolute; top: 0; left: 0; display: block; background:#ebd7cb; width: 60px; height: 60px; border-radius: 60px; transition: all 0.3s ease;} .btn-ani-hover-change span {position: relative; font-family:'Montserrat', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 1.4rem; line-height: 1; text-transform:uppercase; letter-spacing: .3px; vertical-align: middle;} .btn-ani-hover-change:after {background:url('https://storage.onyx-hospitality.com/assets/icon/btn_arrow-right_bk-wh.svg'); background-position:0 0; content:''; display:inline-block; width:22px; height:14px; position: relative; top: 3px; margin-left: 10px; transform: translateX(-5px); transition: all 0.3s ease; } .btn-ani-hover-change:hover{color: #fff} .btn-ani-hover-change:hover:before {width: 100%; background:#e0c6b6;} .btn-ani-hover-change:hover:after {transform: translateX(0); background-position:-22px 0;} /*Button border gley*/ .btn-border-gy, .btn-border-bk{background:transparent; color:#5b97aa; border: 2px solid #5b97aa; display: inline-block; border-radius: 0; height: auto; padding: 20px 45px;} .btn-border-gy:hover, .btn-border-gy:focus, .btn-border-gy:active, .btn-border-bk:hover, .btn-border-bk:focus, .btn-border-bk:active{background-color:#5b97aa; color:#fff;} /*Button Color*/ .btn-wh {background:#fff; color:#111f20; display:inline-block; vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px rgba(0, 0, 0, 0);position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s;} .btn-wh:hover{color:#fff;} .btn-wh:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0; background:#5b97aa; color:#fff; -webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;} .btn-wh:hover:before, .btn-wh:focus:before, .btn-wh:active:before {-webkit-transform:scaleX(1);transform:scaleX(1);} .btn-blue {position: relative; margin: 10px auto; padding: 20px 20px; transition: all 0.2s ease; color:#fff} .btn-blue:before {content: ""; position: absolute; top: 0; left: 0; display: block; background:#5774d1; width: 100%; height: 58px; transition: all 0.3s ease;} .btn-blue span {position: relative; font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 1.6rem; line-height: 1.6rem; text-transform:uppercase; letter-spacing: .3px; vertical-align: middle;} .btn-blue:after {background:url('https://storage.onyx-hospitality.com/assets/icon/btn_arrow-right_wh-bk.svg'); background-position:0 0; content:''; display:inline-block; width:22px; height:14px; position: relative; top: 2px; margin-left: 10px; transform: translateX(-5px); transition: all 0.3s ease; } .btn-blue:hover{color: #2f375a} .btn-blue:hover:before {width: 100%; background:#eeeef8;} .btn-blue:hover:after {transform: translateX(0); background-position:-22px 0;} .btn-border-wh {font-family:'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC';position: relative; margin: 10px auto; padding: 16px 20px; transition: all 0.2s ease; color:#fff} .btn-border-wh:before {content: ""; position: absolute; top: 0; left: 0; display: block; background: tranparent; border:2px solid #fff; width: 100%; height: 58px; transition: all 0.3s ease;} .btn-border-wh span {position: relative; font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 1.6rem; line-height: 1.6rem; text-transform:uppercase; letter-spacing: .3px; vertical-align: middle;} .btn-border-wh:after {background:url('https://storage.onyx-hospitality.com/assets/icon/btn_arrow-right_wh-bk.svg'); background-position:0 0; content:''; display:inline-block; width:22px; height:14px; position: relative; top: 2px; margin-left: 10px; transform: translateX(-5px); transition: all 0.3s ease; } .btn-border-wh:hover{color: #eeeef8} .btn-border-wh:hover:before {width: 100%; border:2px solid #eeeef8;} .btn-border-wh:hover:after {transform: translateX(0); background-position:-22px 0;} /*hover images + */ a:hover .hoverimg{clear:both; display:block; background-color:rgba(87,116,209,0.6); width:100%; height:100%;left:0; z-index:5; position:absolute;-webkit-transition:all 0.45s ease-in-out;-moz-transition:all 0.45s ease-in-out;-o-transition:all 0.45s ease-in-out;-ms-transition:all 0.45s ease-in-out;transition:all 0.45s ease-in-out;} a:hover .hoverimg em {position:absolute; z-index:5; top:calc(50% - 25px) !important; left:calc(50% - 25px) !important; display:block; width:50px; height:50px; -webkit-transform:rotate(90deg); transform:rotate(90deg); -webkit-animation:rotating-view 0.2s linear; -moz-animation:rotating-view 0.2s linear;-ms-animation:rotating-view 0.2s linear;-o-animation:rotating-view 0.2s linear;animation:rotating-view 0.2s linear} a:hover .hoverimg em:before{content:''; position:absolute; top:50%; left:0px; display:block; width:50px; height:2px; background-color:#fff;} a:hover .hoverimg em:after{content:''; position:absolute; top:0px; left:50%; display:block; width:2px; height:50px; background-color:#fff;} /*hovereffect*/ .hovereffect {width:100%; height:100% ;float:left; overflow:hidden;position:relative; text-align:center; cursor:default;} .hovereffect .overlay {width:100%;height:100%;position:absolute;overflow:hidden;top:0;left:0;-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;} .hovereffect img {display:block;position:relative;} .hovereffect h3 {text-align:center; position:relative;-webkit-transform:translateY(45px);-ms-transform:translateY(45px);transform:translateY(45px);-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;} .hovereffect:hover h3 {-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);} .hovereffect p {text-align:center; position:relative;-webkit-transform:translateY(45px);-ms-transform:translateY(45px);transform:translateY(45px);-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out; font-size:1.5rem; color:#fff} .hovereffect:hover p {-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);} .hovereffect .seemore {display:inline-block; font-weight:normal; text-decoration:none; opacity:0; filter:alpha(opacity=0); -webkit-transform:scale(0); -ms-transform:scale(0); transform:scale(0); -webkit-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out; font-size:1.6rem; text-transform:uppercase; letter-spacing:.2px; padding-top:10px;} .hovereffect:hover .seemore{color:#fff; opacity:1; filter:alpha(opacity=100); -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1);} /*.hovereffect .seemore:before {content: ''; display: block; width: 16px; height: 1px;background-color:rgba(255,255,255,.5); position: relative; margin:0 auto 5px auto; text-align:center;}*/ /*icon*/ .iconnew{position:absolute; top:10px; right:10px; background:rgb(248 133 94 / 95%);padding:12px 16px; font-size:1.2rem; line-height:1; color:#fff;text-align:center; border-radius:50px; z-index:6;} .badge.badge-top-left {position:absolute; top:10px; left:10px; background:rgb(165 148 130 / 95%); padding:12px 16px; font-size:1.2rem; line-height:1; color:#fff; text-align:center; border-radius:50px; z-index: 6;} /*icon eye*/ .eye-wh{background:url('https://storage.mosaic-collection.com/icon/eye-wh.svg') 0 5px no-repeat; display:block; margin:16px auto; width:20px; height:20px; text-indent:-6666em; position:relative} .eye-wh:before{content:''; display:block; width:16px; height:1px; background:#fff; position:absolute; top:-7px; left:2px;} /*icon arrow*/ .arrow-wh{background:url('https://storage.onyx-hospitality.com/assets/icon/arrow-right_wh_ig.svg') no-repeat center; display:block; margin:7px auto 25px auto; width:27px; height:27px; text-indent:-6666em; position:relative; transition: all .25s ease;} .arrow-wh:hover {border-radius:calc(19.5/44*100%);} /*Bullet*/ .content ul {list-style: none; margin: 10px 0; padding-left: 20px;} .content li {position: relative; padding-left: 20px; list-style: none; line-height: 2.4rem; padding-bottom: 3px;} .content li:before {content: ''; background: #efe1c9; border-radius: 8px; width: 8px; height: 8px; margin: 2px; position: absolute; left: 0; top: 5px;} /*Avout Us - Main Banner*/ .main_twocols {display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px;} .main_twocols .content {grid-area: 2 / 1 / 3 / 2; position:relative; display: flex; justify-content: center; align-items: center; flex-direction: column;} .main_twocols .content:before{content:''; position:absolute; width:450px; height:450px; top:calc(50% - 225px); right:-225px; border-radius:50%; border:120px solid #eadac0; z-index:-1; opacity: 0.6;} .main_twocols .image {grid-area: 1 / 1 / 2 / 2; position:relative;} .main_twocols .content .inner{padding:10%;} .main_twocols .content header {margin-bottom:30px; position:relative;} .main_twocols .content header:before{content:''; position:absolute; width:120px; height:120px; top:-33px; left:-39px; border-radius:50%; background: #d9c8d1; z-index:-1} .main_twocols .content h1{font-size:4rem; line-height:1; color: #522953;} .main_twocols .content h2{font-family: 'Montserrat', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 2rem; line-height: 1; color:#545860; font-weight:500; text-transform:inherit; margin-top: 10px;} /*image box*/ .main_twocols .image .image-wrap{font-size: 0; height:75vh} .main_twocols .image .image-item {display: inline-block; vertical-align: top; padding-left: 1px; padding-right: 1px;} .main_twocols .image .image-item:nth-child(1) {width: 100%; height: 50vh; padding-bottom: 2px;} .main_twocols .image .image-item:nth-child(2), .main_twocols .image .image-item:nth-child(3) {width: 50%; height: 25vh;} /*Scrolldown*/ .main_twocols .scrolldown{right:0} .main_twocols .scrolldown:after, .main_twocols .scrolldown:before{content:""; height:1px; width:50px; margin-left:5px; background-color:#707070; position:absolute; bottom:50%} .main_twocols .scrolldown:before{left:65px;opacity:.5} .main_twocols .scrolldown:after {left:calc(100% + 3px); width:24px; animation:scrolldown 3s cubic-bezier(.77,0,.175,1) infinite} .main_twocols .scrolldown span {color:#707070;} .main_twocols .scrolldown span:hover {opacity:.3;} /****Our Brands = White Logo on image card*/ .logo-wrap{margin-bottom:30px} .logo_wh {background-image: url(https://storage.onyx-hospitality.com/assets/logo/wh_sprite_all-logos.svg); background-repeat: no-repeat; display:block; width: 170px; height: 70px; text-indent: -99999em; margin:0 auto;} .logo_wh.amari {background-position: 0 0;} .logo_wh.shama {background-position: -170px 0;} .logo_wh.ozo {background-position: -340px 0;} .logo_wh.shama-hub {background-position: -510px 0;} .logo_wh.oriental {background-position: -680px 0;} .logo_wh.onyx-rewards {background-position: -850px 0;} .logo_wh.maai-spa {background-position: -1020px 0;} .logo_wh.breeze-spa {background-position: -1190px 0;} .logo_wh.prego {background-position: -1360px 0;} .logo_wh.amaya-food-gallery {background-position: -1530px 0;} .logo_wh.eat {background-position: -1700px 0;} .logo_wh-simg {background-image: url(https://storage.onyx-hospitality.com/assets/logo/wh_sprite_all-logos_image.svg); background-repeat: no-repeat; display:block; width: 170px; height: 70px; text-indent: -99999em; margin-bottom:30px} .logo_wh-simg.maai {background-position: 0 0;} .logo_wh-simg.breeze {background-position: -170px 0;} /****Our Brands = White Logo on slide image spa*/ .logo_wh-simg {background-image: url(https://storage.onyx-hospitality.com/assets/logo/wh_sprite_all-logos_image.svg); background-repeat: no-repeat; display:block; width: 170px; height: 70px; text-indent: -99999em; margin-bottom:30px} .logo_wh-simg.maai {background-position: 0 0;} .logo_wh-simg.breeze {background-position: -170px 0;} /****Our Brands = Color Logo on content individual brand page*/ .logo_c {background-image: url(https://storage.onyx-hospitality.com/assets/logo/sprite_all-logos.svg); background-repeat: no-repeat; display:block; height: 60px; text-indent: -99999em;} .logo_c.amr {background-position: 0 0;} .logo_c.sha {background-position: 0 -60px;} .logo_c.ozo {background-position: 0 -120px;} .logo_c.shb {background-position: 0 -180px;} .logo_c.saf {background-position: 0 -240px;} .logo_c.onr {background-position: 0 -300px;} .logo_c.maai {background-position: 0 -360px;} .logo_c.breeze {background-position: 0 -420px;} .logo_c.prego {background-position: 0 -480px;} .logo_c.amaya-food-gallery {background-position: 0 -540px;} .logo_c.eat {background-position: 0 -600px;} .carousel-control-next, .carousel-control-prev{z-index:10} /*indicators*/ .main-banner .indicators{position:absolute; bottom:15px; left:20px; /*width:250px; height:25px;*/ color:#fff; margin:0 auto; z-index:2;} .main-banner.rooms .indicators{left: inherit; right:0; bottom: 15px; width:320px;} /*control prev, next icon*/ .main-banner .carousel-control-next, .main-banner .carousel-control-prev {width:15%;} .main-banner .carousel-control-prev-icon{background-image:url('https://storage.onyx-hospitality.com/assets/icon/arrow-left_wh_b.svg'); width:66px; height:66px;} .main-banner .carousel-control-next-icon{background-image:url('https://storage.onyx-hospitality.com/assets/icon/arrow-right_wh_b.svg'); width:66px; height:66px;} /*Main Banner - inside page*/ .main-banner.inside, .main-banner.half{width:100%; height:450px;} .main-banner.inside .image{width: 100%; height:450px;} .main-banner.promotion-banner .image{width: 100%; height:450px;} /*Main Banner - Half for exclusive promotion*/ .main-banner.half .carousel-caption h1{font-size:3.6rem; line-height:1; text-shadow:0 0 5px rgba(0,0,0,.4)} .main-banner.half .carousel-caption h2{font-size:3rem; line-height:1; text-shadow:0 0 5px rgba(0,0,0,.4); padding-bottom:10px; text-transform:uppercase;} .main-banner.half .carousel-caption h3{font-size:2.4rem; line-height:1; text-shadow:0 0 5px rgba(0,0,0,.4); font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC', 'Microsoft Sans Serif';} /*Main Banner - Promotion*/ .main-banner.half.promotion-banner .carousel-caption {bottom:0; padding:0;} .main-banner.half.promotion-banner .carousel-caption.sale img{display: block; max-width:100%; margin:0 auto;} .main-banner.half.promotion-banner .carousel-caption img{display: block; max-width:100%; margin:0 auto;} .main-banner.half.promotion-banner .carousel-caption.sale .header, .main-banner.half.promotion-banner .carousel-caption .normal .header, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header {padding: 20px 0 0 0; bottom: 20px; position: absolute; right: 10px; left:10px;} .main-banner.half.promotion-banner .carousel-caption.sale .header h2, .main-banner.half.promotion-banner .carousel-caption .normal .header h2, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h2 {font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; color:#fff; font-size:3.6rem; text-shadow:none !important;} .main-banner.half.promotion-banner .carousel-caption.sale .header h3, .main-banner.half.promotion-banner .carousel-caption .normal .header h3, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h3 {font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; color:#fff; font-size:2.2rem; text-shadow:none !important;} .main-banner.half.promotion-banner .carousel-caption .end-sale img{margin:0 auto; float:none;} /*For VT, VDO landing page*/ /*.iframe-full {width:100%; height:calc(100vh - 62px); clear:both; position:absolute; top:0; left:0; right:0; bottom:0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index:100; border:0}*/ .main-iframe {position:relative; width:100%; height:calc(100vh - 115px);} /*No banner*/ .hotel-photo .main-description, .function-room .main-description, .special-offer .main-description, .hotel-package .main-description, .hotel-portal .main-description, .upcoming-hotel-portal .main-description{padding: 0 0 20px 0;} .onyx-rewards-login .main-description {padding:0;} /*embed iframe*/ .embedvt-container{width:100%; height:100%;} .embedvt-container .iframe-full{position:absolute; top:0; left: 0; width:100%; height:calc(100vh - 115px);} /*embed youtube*/ .embedvideo-container{padding-bottom:56.25%; overflow:hidden;} .embedvideo-container .iframe-full{position:absolute; top:0; left: 0; width: 100%; height:calc(100vh - 115px);} /*add our video*/ .main-iframe .video{width:100%; height:100vh; background:no-repeat center center scroll; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; z-index:10} .main-iframe .video .video-js {width:100% !important; height:100% !important; overflow:hidden;} .main-iframe .video .video-js video{position: absolute; top: 50% !important; left: 50% !important; min-width: 100%; min-height: 100%; width: auto !important; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); object-fit: cover;} /*Main Banner img object-fit:cover*/ .main-banner .image img{object-fit:cover; width:100%; height:100%;} .carousel-item:hover {cursor: grab;} .main-banner.half .pcbox{width:300px} .pcbox{clear:both; background:#5774d1; text-align:center; text-shadow:none; margin:15px auto; padding:5px;} .pcbox .bd{padding:10px; border:1px dashed rgba(255, 255, 255, 0.1); font-size:1.4rem; line-height:1; color:#FFF; letter-spacing:3px;} .pcbox .bd .pctxt{font-size:3.8rem; line-height:1; text-transform:none; letter-spacing:0;} .pcbox .bd .pctxt a{color:#FFF;} .pcbox .bd .pctxt a:hover{color:#fff; text-decoration:none;} /*404*/ .page-not-found .cd-main-content {background-color:#b196a6 /*7aa2de*/;} .main-banner.fullscreen.pagenotfound, .main-banner.fullscreen.pagenotfound .image{height: 100vh} .main-banner.fullscreen.pagenotfound .carousel-caption{margin:0 auto; text-align:center; bottom:15%; color: #fff; width: 60%} .main-banner.fullscreen.pagenotfound .carousel-caption h1{font-size:4rem; line-height: 1.2; margin-bottom: 15px; text-transform:uppercase;} .main-banner.fullscreen.pagenotfound .carousel-caption .number{font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC', 'YouYuan'; color:rgba(255,255,255,.3); font-size:12rem; line-height:.8; font-weight:600; text-align:center; text-shadow:0 0 30px rgba(0,0,0,.3);} @keyframes zoominout { 0% {transform: scale(1,1);} 50% {transform: scale(1.1,1.1);} 100% {transform: scale(1,1);} } #scrollUp {right: 7px; bottom: 40px; background: url('https://storage.onyx-hospitality.com/assets/icon/scroll-up.svg') no-repeat 50% 50%; z-index: 1; width: 50px; height: 150px; transition: all 1s ease 0s; text-indent: -9999em;} #scrollUp:hover {opacity: 0.6;} .th #scrollUp {background: url('https://storage.onyx-hospitality.com/assets/icon/scroll-up.svg') no-repeat 50% 50%} .cn #scrollUp {background: url('https://storage.onyx-hospitality.com/assets/icon/scroll-up.svg') no-repeat 50% 50%} .zh #scrollUp {background: url('https://storage.onyx-hospitality.com/assets/icon/scroll-up.svg') no-repeat 50% 50%} [dir='rtl'] .scrolldown, [dir='rtl'] #scrollUp{left:20px; right:inherit; text-align:right} /*Animation*/ /*Rotating*/ @-webkit-keyframes rotating { from {-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)} to {-ms-transform:rotate(135deg);-moz-transform:rotate(135deg);-webkit-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)} } @keyframes rotating { from {-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)} to {-ms-transform:rotate(135deg);-moz-transform:rotate(135deg);-webkit-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)} } /*Fade in*/ @-webkit-keyframes fade-in { 0% {opacity: 0;visibility: visible;} 100% {opacity: 1;visibility: visible;} } @-moz-keyframes fade-in { 0% {opacity: 0;visibility: visible;} 100% {opacity: 1;visibility: visible;} } @keyframes fade-in { 0% {opacity: 0;visibility: visible;} 100% {opacity: 1;visibility: visible;} } /*Fade-out*/ @-webkit-keyframes fade-out { 0% {opacity: 1;visibility: visible;} 100% {opacity: 0;visibility: visible;} } @-moz-keyframes fade-out { 0% {opacity: 1;visibility: visible;} 100% {opacity: 0;visibility: visible;} } @keyframes fade-out { 0% {opacity: 1;visibility: visible;} 100% {opacity: 0;visibility: visible;} } /*Slide-down*/ @-webkit-keyframes slide-down { 0% {opacity: 0;transform: translateY(-100%);} 100% {opacity: 1;transform: translateY(0);} } @keyframes slide-down { 0% {opacity: 0;transform: translateY(-100%);} 100% {opacity: 1;transform: translateY(0);} } /*callout*/ .float-bottom-left{position:absolute; top:510px; left:5px; z-index:11} @media (min-width: 480px){ .travel-confidence .icon {margin: 0 5px 0 20px;} } /*Mobile lanscape*/ @media (min-width:568px){ .brand-logo img{width:110px; height:46px; margin:18px 12px;} .navbar-brand .logo{width:110px; height:46px;margin:15px 12px;} .main-banner.fullscreen .carousel-caption {width: 50%;} } /*Gallaxy Fold - landscape*/ @media (max-width: 653px) and (min-width: 280px) and (orientation: landscape){ .brand-logo img{width:110px; height:46px; margin:18px 12px;} .navbar-brand .logo{width:110px; height:46px; margin:15px 12px;} .main-banner.fullscreen, .main-banner.fullscreen .image {height:280vh!important;} .main-banner.fullscreen .carousel-item.sale .carousel-caption .logo img{width:auto; height: 100%; object-fit:initial;} } /*only landscape*/ @media (min-width:568px) and (max-width: 926px) and (orientation : landscape) { .brand-logo img{width:110px; height:46px; margin:18px 12px;} .navbar-brand .logo{width:110px; height:46px; margin:15px 12px;} /*Home*/ .main-banner.fullscreen, .main-banner.fullscreen .image{height: 150vh!important;} .main-banner.fullscreen .carousel-item.sale .carousel-caption .logo{width: 100%} /*inside*/ .main-banner.half, .main-banner.half .image{height:700px} .main_twocols .image .image-wrap{height:auto} } /*only landscape*/ @media (min-width:568px) and (max-width: 896px) and (orientation : landscape) { .main-banner.half.promotion-banner .carousel-caption .sale img, .main-banner.half.promotion-banner .carousel-caption .normal img, .main-banner.half.promotion-banner .carousel-caption .pre-sale img{ max-width:50%;} .main-banner.half.promotion-banner .carousel-caption .sale .header, .main-banner.half.promotion-banner .carousel-caption .normal .header, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header { height:inherit; padding:0 20px; position:relative; bottom:0;} .main-banner.half.promotion-banner .carousel-caption .sale .header h2, .main-banner.half.promotion-banner .carousel-caption .normal .header h2, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h2 {font-size:3.4rem;} .main-banner.half.promotion-banner .carousel-caption .sale .header h3, .main-banner.half.promotion-banner .carousel-caption .normal .header h3, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h3 {font-size:2.2rem;} .cd-dropdown-content, .cd-dropdown-content ul {height:320vh;} } @media only screen and (min-width:768px) and (max-width: 1024px) and (orientation : portrait) { .main-banner.fullscreen .sale .carousel-caption .header{top:70px} .main-banner.half.promotion-banner .carousel-caption .sale img, .main-banner.half.promotion-banner .carousel-caption .normal img, .main-banner.half.promotion-banner .carousel-caption .pre-sale img{ max-width:52%;} .main-banner.half.promotion-banner .carousel-caption .sale .header, .main-banner.half.promotion-banner .carousel-caption .normal .header, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header { height:inherit; padding:25px 20px; position:relative;} .main-banner.half.promotion-banner .carousel-caption .sale .header h2, .main-banner.half.promotion-banner .carousel-caption .normal .header h2, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h2 {font-size:3.6rem;} .main-banner.half.promotion-banner .carousel-caption .sale .header h3, .main-banner.half.promotion-banner .carousel-caption .normal .header h3, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h3 {font-size:2.4rem;} .page-not-found .cd-main-content .GF-Pink-3 {background: url(https://storage.shama.com/images/graphic_pink-three_rotate.svg) no-repeat 50% 50%;} .main-banner.fullscreen h3.text-big {letter-spacing:8px; font-size: 11rem; top: -40px; right: -20px;} } @media (min-width:768px){ .travel-confidence a {margin-bottom:inherit;} } @media (min-width: 992px){ .th .navbar-light .navbar-nav .active>.nav-link, .th .navbar-light .navbar-nav .nav-link.active, .th .navbar-light .navbar-nav .nav-link.show, .th .navbar-light .navbar-nav .show>.nav-link{font-weight:500;} .navbar-nav .dropdown-menu{margin:0; font-size: 1.5rem; color: #fff; min-width: 250px; left: calc(100% - 100px); top: calc(100% - 8px); border: 0; border-radius:0;} .navbar-nav .dropdown-menu:last-child {left: calc(100% - 130px);} .navbar-nav .dropdown-header{padding:0} .navbar-nav .dropdown-header h5{font-size:1.8rem; margin:0} .navbar-nav .dropdown-header h5:after {content: ''; display:block; width:25px; height:1px; margin:5px 0 5px 20px; background: rgb(96,109,140,0.2);} .mega-dropdown-content .dropdown-header{color:#48577b;} .navbar-nav .dropdown-header h5 .dropdown-item{font-size:1.8rem; font-weight:500; color: #565656;} .navbar-nav .dropdown-menu .dropdown-item{color:#fff; font-size:1.5rem; line-height:1.3; padding:10px 20px} .navbar-nav .dropdown-menu span.dropdown-item{opacity:0.4!important} .navbar-nav .dropdown-menu .dropdown-item i{font-size:1.2rem} .navbar-nav .dropdown-menu .dropdown-item:hover/*, .navbar-nav .dropdown-menu .dropdown-item.active*/{background:#d2b786;} .navbar-nav .dropdown-menu .destination{color: rgba(255,255,255,0.5); font-size: 1.6rem; line-height: 1.6; text-transform: uppercase; display:block} .navbar-nav .dropdown-menu .dropdown-divider{border-top: 1px solid rgba(255,255,255,0.2);} .dropdown-item.active, .dropdown-item:active{color:#f48573;} /*.navbar-expand-lg .navbar-nav .nav-link{padding:31px 7px 20px 7px;}*/ /*arrow for dropdown*/ .dropdown-toggle:after{vertical-align:.2rem; margin-left:.8rem; margin-right: .8rem; border:solid #282828; border-width: 0 1px 1px 0; padding:3px; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top:22px;} .mega-dropdown-content {padding: 20px 30px 30px; background: rgba(255,255,255,0.97); width: calc(100vw - 10px); top: calc(100% - 22px); left: -278px !important; border: 0; border-top: 1px solid #f5f5f5; border-radius: 0; box-shadow: 5px 5px 5px rgba(0,0,0,0.05); font-size: 1.6rem;} .mega-dropdown-content .link {margin-top: 15px;padding-top: 15px;border-top: 1px solid #efefef;} .mega-dropdown-content .link a {font-weight:600; font-size:1.6rem !important;} .th .navbar-nav .dropdown-header h5 .dropdown-item{font-size: 1.7rem;} .th .navbar-nav .dropdown-menu .dropdown-item{font-size: 1.5rem;} *[dir="rtl"] .mega-dropdown-content .dropdown-header h5, *[dir="rtl"] .navbar-nav .dropdown-menu .dropdown-item{text-align: right;} /*Main Banner Fullscreen - Sale*/ .main-banner.fullscreen .carousel-item.sale .carousel-caption .logo img{width:auto; height:100%;} .travel-confidence a {margin-bottom:inherit;} } @media (min-width: 1024px) { h1{font-size:5rem;} h2{font-size:4rem;} h3{font-size:3.4rem;} h4{font-size:3rem;} /*Desktop*/ .hide-desktop {display:none !important;} .hide-desktop-sm {display:none !important;} .show-desktop {display:block !important;} /*Mobile*/ .hide-mobile {display:block !important;} .show-mobile {display:none !important;} .cc-window .cc-message{text-align: center} .alert-topmessage a.dropdown{display:none} .alert-topmessage button.close{display:inherit} .alert-topmessage .travel-confidence{flex-direction: row; line-height:48px} .alert-topmessage .collapse{display: inline-flex} .header-top {display: flex; justify-content: space-between; position:relative; z-index:100} .header-top.show-desktop {display: flex !important; -ms-flex-wrap: nowrap; flex-wrap: nowrap;} /*.navbar-expand-lg .navbar-nav .nav-link{font-size: 1.3rem; padding:32px 7px 26px 7px;}*/ .brand-logo img {width:110px; height:46px; margin:18px 12px;} .navbar-brand .logo{width:110px; height:46px; margin:15px 12px;} .enquiry .button{margin:0} .enquiry .button button.booking-avail{width:120px; margin:0; padding:38px 5px;} .enquiry .button button.booking-avail:before{padding:38px 5px;} /*arrow for dropdown*/ /*.dropdown-toggle:after{top: 37px} */ .header-toolbar .dropdown-toggle:after{top: 8px; position: inherit;} .breadcrumb{display: flex; margin: 0; padding:8px 20px; background-color:transparent; font-size:1.2rem; font-weight:normal; text-align:left; z-index: 10;} .th .breadcrumb{font-size:1.4rem;} .breadcrumb li a {color:#6283b3;} .breadcrumb li a:hover{color:#b196a6 /*7aa2de*/; text-decoration:none;} .breadcrumb li:after{content:""; display:inline-block; height: 16px; width: 1px; margin:0 10px; background-color:rgba(0,0,0,0.1); vertical-align:middle} .breadcrumb li:last-child:after{content:none; } .breadcrumb li:last-child a{font-weight:normal; color:#575757} .breadcrumb li:last-child a:hover{text-decoration:none; color:#b196a6 /*7aa2de*/;} .breadcrumb-item.active, .breadcrumb-item.no-active{color:rgb(142,146,145);} .breadcrumb-item+.breadcrumb-item::before{content:none;} /*no list dropdown-menu*/ .navbar-nav .dropdown-menu{padding:0} .navbar-nav .dropdown-menu.mega-dropdown-content{padding:30px} .navbar-nav .dropdown-menu h5:after{content:none} .navbar-nav .dropdown-menu a:first-child{text-transform:uppercase} .menu-member-rate{top: 100px; right: 8px;} *[dir="rtl"] .menu-member-rate{left: 8px;} *[dir="rtl"] .language .dropdown-menu{transform: translate3d(105px, 26px, 0) !important;} /*megamenu*/ .mega-dropdown {position:static!important;} .mega-dropdown-content {padding:30px; width:calc(100vw - -72px)!important; left:-6px!important; border:0; border-radius: 0; font-size:1.4rem;} .mega-dropdown-content .dropdown-container{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 960px; margin: 0 auto;} .mega-dropdown-content form {margin: 3px 20px;} .mega-dropdown-content .form-group {margin-bottom: 3px;} .mega-dropdown-content .dropdown-header {padding:0; width: 100%;} .mega-dropdown-content .dropdown-header h5{padding: 20px; font-size:1.7rem; color:#565656; font-weight:600;} .mega-dropdown-content .dropdown-header h5 .dropdown-item{padding: 0} .mega-dropdown-content .dropdown-header h5:after {content: '';width: 25px;height: 2px;display: block; margin: 8px 0;background: #dfe0e0;} .mega-dropdown-content .dropdown-header h5 a:hover{background:none} .mega-dropdown-content .dropdown-header h6, .mega-dropdown-content .dropdown-header h6 a{font-size:1.6rem; font-weight: bold; text-decoration:none; padding: 7px 10px; margin: 0; font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC';} .mega-dropdown-content .dropdown-header h6 span.dropdown-item{font-size:1.6rem; font-weight:500; color:#5b96a9; padding: 7px 10px; margin: 0;} .mega-dropdown-content .dropdown-header h6 span.dropdown-item:hover{color:#5b96a9; background:none} *[dir="rtl"] .mega-dropdown-content{left: inherit!important; right: -84px; width: calc(100vw - 47px)!important;} .th .mega-dropdown-content .dropdown-header h6 span.dropdown-item{font-size: 1.5rem;} /*Banner*/ .main-banner.fullscreen .carousel-caption{left:15%; right:15%; bottom:15%; width:650px;} .main-banner .carousel-control-next, .main-banner .carousel-control-prev {width:11%;} .main-banner.fullscreen, .main-banner.fullscreen .image{height: calc(100vh - 110px)} .main-banner.fullscreen .carousel-item .btn-wrapper{bottom: 7%;} .main-banner.fullscreen h3.text-big {letter-spacing:8px; font-size: 13rem; top: -40px; right: -20px;} .main-banner.fullscreen .carousel-caption h2{font-size: 6.4rem; text-transform:uppercase} .main-banner.fullscreen .carousel-item.sale .carousel-caption .logo{width: 100%; height: calc(100% - 80px);} /*404*/ .main-banner.fullscreen.pagenotfound .carousel-caption .number{font-size:30rem;} .main-banner.fullscreen .description, .main-banner.fullscreen p.text{font-size: 1.8rem;} /*About Us*/ .main_twocols {grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr;} .main_twocols .content { grid-area: 1 / 1 / 2 / 2;} .main_twocols .content h1{font-size:6rem;} .main_twocols .content:before{width:800px; height:800px; top:calc(50% - 400px); right:-400px; border:200px solid #eadac0;} .main_twocols .image { grid-area: 1 / 2 / 2 / 3; } .main_twocols .image .image-item:nth-child(1) {height: 60%;} .main_twocols .image .image-item:nth-child(2), .main_twocols .image .image-item:nth-child(3) {height: 40%;} /*promotion*/ .main-banner.half .pcbox{width:350px} .main-banner.half, .main-banner.half .image{height:calc(600px + 80px)} .main-banner.half .carousel-caption h1{font-size:5.6rem;} .main-banner.half .carousel-caption h2{font-size:5.6rem;} .main-banner.half .carousel-caption h3{font-size:3.6rem;} /*Main Banner - Promotion*/ .main-banner.half.promotion-banner .carousel-caption {bottom:0; padding:40px 0; left:2%; right:2%;} .main-banner.half.promotion-banner .carousel-caption .sale img{display: block; max-width:100%;} .main-banner.fullscreen .carousel-caption:before{width:600px; height:600px; left:calc(50% - 300px); bottom:-100px; border:120px solid rgb(72 33 123 / 50%);} } /*iPad Pro - Portrait */ @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) { } @media (min-width: 1200px) { /*.dropdown-toggle:after{top: 37px}*/ *[dir="rtl"] .mega-dropdown-content{width: calc(100vw - 30px)!important;} .navbar-expand-lg .navbar-nav .nav-link{padding:20px 30px;} .navbar-nav {padding-right:15px;} /*.navbar-expand-lg .navbar-nav .nav-link{padding:32px 14px 27px 14px;}*/ .reservations .navbar-nav {padding-left:0;} /*.navbar-nav .nav-link:before {content: ''; width: 15px; height: 15px; position: absolute; background: url('https://storage.shama.com/icon/menu-graphic.png') no-repeat; background-position: center; left: 0;} .navbar-nav .nav-link.active:before {content: ''; width: 15px; height: 15px; position: absolute; background: url('https://storage.shama.com/icon/menu-graphic-active.png') no-repeat; background-position: center; left: 0;}*/ .reservations .navbar-nav .nav-link:before, .reservations .navbar-nav .nav-link.active:before {background: none;} .stickytop .dropdown-menu.mega-bookingmask{width:100vw} .main-banner .carousel-control-next, .main-banner .carousel-control-prev {width:6%;} .main-banner.fullscreen h3.text-big {font-size: 14.7rem; top: -70px; right: -20px;} .main-banner.half.promotion-banner .carousel-caption {left:7%; right:7%;} .main-banner.half.promotion-banner .carousel-caption .sale .header h2, .main-banner.half.promotion-banner .carousel-caption .normal .header h2, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h2 {font-size:5rem;} .main-banner.half.promotion-banner .carousel-caption .sale .header h3, .main-banner.half.promotion-banner .carousel-caption .normal .header h3, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h3 {font-size:3.4rem;} .mega-dropdown-content {padding:30px; width:calc(100vw - -90px)!important; left:-6px!important; border:0; border-radius: 0; font-size:1.4rem;} } @media (min-width: 1360px) { h1{font-size:5.6rem;} h2{font-size:5.2rem;} .hide-desktop-sm {display:block !important;} /*.navbar-expand-lg .navbar-nav .nav-link{font-size: 1.6rem; letter-spacing:.2px;}*/ /*.navbar-expand-lg .navbar-nav .nav-link{padding:32px 20px 27px 20px;}*/ .brand-logo img {width:128px; height:53px; margin:18px 15px;} .enquiry .button button.booking-avail{width:150px; margin:0; font-size: 1.6rem; padding:38px 5px;} .enquiry .button button.booking-avail:before {padding:38px 5px;} .main-banner.half.promotion-banner .carousel-caption {left:10%; right:10%;} .main-banner.half.promotion-banner .carousel-caption .sale .header, .main-banner.half.promotion-banner .carousel-caption .normal .header, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header {bottom:130px;} .main-banner.half.promotion-banner .carousel-caption .sale .header h2, .main-banner.half.promotion-banner .carousel-caption .normal .header h2, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h2 {font-size:5.6rem;} .main-banner.half.promotion-banner .carousel-caption .sale .header h3, .main-banner.half.promotion-banner .carousel-caption .normal .header h3, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h3 {font-size:3.8rem;} .main-banner.fullscreen.pagenotfound, .main-banner.fullscreen.pagenotfound .image {height: calc(100vh - 152px);} /*arrow for dropdown*/ /*.dropdown-toggle:after{vertical-align:.2rem; margin-left:.7rem; margin-right: .5rem;border:solid #575757; border-width: 0 1px 1px 0; padding:3px; -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 36px} */ .header-toolbar .dropdown-toggle:after{position: inherit;} .mega-dropdown-content {padding:30px; width:calc(100vw - -90px)!important; left:-6px!important; border:0; border-radius: 0; font-size:1.4rem;} } @media (min-width: 1536px) { .main-banner.half.promotion-banner .carousel-caption {left:15%; right:15%;} .main-banner.half.promotion-banner .carousel-caption .sale .header h2, .main-banner.half.promotion-banner .carousel-caption .normal .header h2, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h2 {font-size:6rem;} .main-banner.half.promotion-banner .carousel-caption .sale .header h3, .main-banner.half.promotion-banner .carousel-caption .normal .header h3, .main-banner.half.promotion-banner .carousel-caption .pre-sale .header h3 {font-size:4rem;} } @media (min-width: 1680px) { h1{font-size:6.0rem;} h2{font-size:5.0rem;} *[dir="rtl"] .mega-dropdown-content {width: calc(100vw - 60px)!important;} .main_twocols .content .inner {padding: 5% 25%;} /*No banner*/ .onyx-rewards-login .main-description{padding: 20px 0;} } /*//END//*/