.onyxrewardslogin h3, .best-rates-guarantee h3 {font-size:3.4rem; color:#555; margin: 8px 0 15px 0;} /*Description*/ .main-description h1{font-size:3.8rem; line-height:1.3; color: #522953;} .main-description h2{font-size: 2rem; line-height: 1; color: #6a7079; padding-top: 10px; font-weight:500;} .main-description h2.tagline{color: #d9d8d6;} .main-description h3{color: #bfa8b6;} .onyx-rewards-login .main-description h2{margin-bottom:8px} .main-description article {margin-top:40px;} .main-description header { padding-bottom: 30px;} .main-description .content, .main-description .image{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%;} .main-description .content{position: relative; padding:30px 15px; font-size: 1.7rem; color: #727272; -ms-flex-order: 2; order: 2;} .main-description .content h3{font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 2.4rem; font-weight: normal;} .main-description ul{margin-bottom: 15px} .main-description li {position: relative; padding: 0 0 10px 15px; list-style: none; line-height: 2.2rem;} .main-description li:before {content: ''; background:#efe1c9; border-radius:7px; width:7px; height:7px; margin:2px; position:absolute; left:0; top:5px;} .main-description ul ul, .main-description ul ul ul{margin-bottom: 0;} .main-description .image {position: relative; padding:0; height:auto; -ms-flex-order: 1; order: 1} .text-big{font-family:'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; font-size:8rem; letter-spacing:3px; color:rgb(0 0 0 / 4%); text-transform:uppercase; font-weight:bold; position:absolute; display:none;} .text-about{top:430px; right:0; color:rgb(0 0 0 / 2%);} .text-overview{top:-30px; left:5px; z-index:-1} .text-work{top:480px; right:-20px; z-index:-1} .text-brands{top:-20px; right:-20px; z-index:-1} .text-news {top:-40px; right:-40px; z-index:-1} .text-portfolio{left:-10px; top:-20px; z-index:-1} /*Home Description*/ .main_introduction {position:relative; background:#eeebe7; color:#727272; padding:0;} .main_introduction:before{content:'';background:url(//storage.onyx-hospitality.com/assets/images/g-donut_lgd.svg) no-repeat; position:absolute; left:-175px; top:-175px; width:350px; height:350px;} .main_introduction h2 {font-size: 3.6rem; font-weight: 500; text-transform:inherit;} .main_introduction .content {-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; padding:40px; z-index:5} .main_introduction .image {position:relative; -ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; height:50vh;} .main_introduction .inner{width:100%; height:100%; position:relative} .main_introduction .inner img{position: absolute; bottom: 0; right: 0; object-fit: unset; width:auto; height:auto;} .main_introduction .image .image-over {display:none;} .main_introduction .image .image-under {position:relative; right:inherit; height:50vh;} .main_introduction .image .image-under img{object-fit: cover; width:100%; height:100%;} .main_introduction .btn-wrapper {margin:50px 0 30px 0;} /*Home - Video*/ .home .video-container{height: auto; display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; margin:20px;} .video-container .row {justify-content: center;} .video-container header {text-align: center;} .video-container header h2.tagline {font-size: 1.6rem; font-weight: normal; color: #d9d8d6; text-transform: inherit; margin-bottom: 0;} .video-container header h3 {font-size: 4rem; line-height: 1; color: #545860; text-transform:uppercase; margin: 10px 0; } .home .video{position: relative; overflow: hidden; width: 100%; height: 100%;} .home .video a{width: 100%; height: 100%; display: block; position: absolute; z-index: 1;} .home .video a .video-play {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; width: 100%; z-index: 1;} .home .video a .video-play .icon-play:before{content:''; display:block; background:url(https://storage.onyx-hospitality.com/assets/icon/video-play.svg); width:90px; height:90px;} .home .video .image{position: relative;} .home .video .image img {transition: all .3s ease; margin:0 auto} .home .fancybox-content{width:100%!important; height:100%!important;} /*Home - Business Overview*/ .overview{position:relative; padding:40px 20px; background:#b6a2a2/*#262633*/; color:#fff; font-family:'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.7rem; text-align:center;} .overview header {margin:10px auto; display:block; text-align:center;} .overview header h2 {font-size:4rem; color:#fff; font-weight:500; text-transform:uppercase;} .overview h3 {font-size:1.5rem; color:#fff; font-weight:500; text-transform:uppercase;} .overview .value {font-size:5rem; line-height:5rem; margin:20px 0;} .overview .icon-brg {background-image:url('https://storage.onyx-hospitality.com/assets/icon/icon-business.svg'); width:64px; height:64px; display:block; margin:20px auto;} .overview .no1 {background-position:0 0} .overview .no1:hover{background-position:-64px 0} .overview .no2 {background-position:0 -64px} .overview .no2:hover{background-position:-64px -64px} .overview .no3 {background-position:0 -128px} .overview .no3:hover{background-position:-64px -128px} .overview .icon-text {margin:20px auto; text-align:center; display:block;} /*Home - Our Work*/ .our-work {position:relative;} .our-work .image_big{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative;} .our-work .content{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; color: #727272; font-size: 1.6rem; height:60vh} .our-work .content .inner{padding:60px 40px 30px 40px;} .our-work .content h3 {font-size: 2rem; color:#6a7079; margin:30px 0;} .our-work .image_small{display:none;} .our-work .btn-wrapper {margin:50px 0 30px 0;} /*Home - Our Brands*/ .our-brands{margin: 50px 0; position:relative;} .our-brands:before{background:#f7f0ec; content:''; display: block; position: absolute; left: 0; top: 0; width:100%; height: 100%; z-index: -1; opacity: 0.5;} .our-brands .header-container{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; -ms-flex-order: 1; order: 1;} .our-brands .header-container {position:relative; z-index:5; padding:30px; width:100%} .our-brands .content-container{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; -ms-flex-order: 2; order: 2;} .our-brands .carousel-cell{margin-right:20px; width:395px; height:660px} .our-brands .carousel-cell .image{height:660px} /*Home - Portfolio*/ .portfolio {position:relative;} .portfolio .content {color:#727272; padding:90px 30px 50px 30px;} .portfolio h2{font-size: 3.8rem; color: #3b4067; text-transform:uppercase;} .portfolio .content {-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; -ms-flex-order: 2; order: 2} .portfolio .image {position:relative; -ms-flex:0 0 100%; flex:0 0 100%; height:50vh; max-width:100%; -ms-flex-order: 1; order: 1} .portfolio .image img{object-fit: cover; width:100%; height:100%;} .portfolio .btn-wrapper {margin:50px 0 30px 0;} /*Home - Map*/ .footprint header {margin: 10px auto; display: block; text-align: center; font-family:'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; } .footprint h2 {font-size:3.8rem; line-height:1; padding-bottom:30px; color:#545860/*#3b4067*/; text-transform:uppercase;} .footprint .map-footprint {margin:0 auto; text-align:center} .footprint .info-text {margin:20px auto; text-align:center; display:block; border-right:1px solid #ececec; font-family:'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC';} .footprint .info-text h3 {font-size:1.7rem; font-weight:500; color:#6b717a; text-transform:uppercase;} .footprint .info-text .value {font-size:5rem; line-height:5rem; color:#3a4352; margin:20px 0;} .footprint .info-text:nth-child(2), .footprint .info-text:last-child {border-right:none;} /* Mapify custom popOver example */ .mapify-popOver {color: #fff; top: 0; left: 0; padding: 20px 30px; width: 260px; background: #262633; box-shadow: 0 0 10px rgb(0 0 0 / 50%); text-align: left; font-size: 2rem; z-index: -1; opacity: 0;} .mapify-popOver .mapify-popOver-arrow {box-shadow: inset #262633 0 0 0 10px; border-right: solid #262633 2px; border-bottom: solid #262633 2px;} .mapify-popOver.mapify-bottom .mapify-popOver-arrow {border-top: solid #262633 2px; border-left: solid #262633 2px;} .mapify-popOver h3 {font-size:1.7rem; line-height:2.4rem; font-weight: 500; text-transform:uppercase; display: block; margin-bottom: 10px; color: #fff;} .mapify-popOver li {position: relative; padding-left: 15px; padding-bottom: 3px; list-style: none;} .mapify-popOver li span {font-size: 1.5rem;} .mapify-popOver li:before {content: ''; background: #f4deb7; border-radius: 7px; width: 7px; height: 7px; margin: 2px; position: absolute; left: 0;top: 6px;} .mapify-popOver-content {position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);} .mapify-popOver.customPopOver {background: #09f; } /* Custom hovering style */ .mapify-hover {fill: #80a7c4; fill-opacity:0.4; stroke: none; stroke-width: 0;} .customHover {fill: #80a7c4; fill-opacity:0.4; stroke: none; stroke-width: 0;} /*Home - News*/ .news{position:relative; margin:50px 30px 50px 30px;} .news h2 {font-size:3.8rem; color:#3b4067; font-weight:500; text-transform:uppercase;} .news header {margin: 10px auto; display: block; text-align: center;} .news .card{border:0;} /*Image*/ .news .image{height:390px;position:relative;} .news .image figure{height:390px; display:block} .news .image figure img{object-fit:cover; width:100%; height:100%; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity:1;} .news .image figure img:hover {opacity:.8;} /*Content*/ .news .content{background:#fff; padding:20px 0; width:100%;} .news .content .name h3, .news .content .name h3 a{font-size:1.9rem; color:#282828; font-weight:500; margin:0;} .news .content .name h3 a:hover{color:#7aa2de} .news .content .name .date{font-size:1.4rem; color:#7aa2de;} .news .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; text-transform: uppercase; letter-spacing: .3px; vertical-align: middle; border-bottom:4px solid #eeeef8;padding: 15px 0; transition: all 0.2s ease; color: #30375a; text-align: left;} .news .btn-readmore:after {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; position: relative; top: 2px; margin-left: 10px; transform: translateX(-5px); transition: all 0.3s ease; z-index:1; float:right;} .news .btn-readmore:hover {border-bottom: 4px solid #5774d1; color:#5774d1;} .news .btn-readmore:hover:after {transform: translateX(0); background-position:-22px 0;} .news .btn-readmore.-full {display: block;margin: 20px 0 10px 0;} /*Home - IG*/ .stories{position:relative; margin:50px 10px;} .stories h2 {font-size:3.8rem; line-height:1; color:#755475; text-transform:uppercase;} .stories header {margin: 10px auto; display: block; text-align: center;} /*Instafeed Feed*/ .instagram-feed .grid_container {position:relative; width:100%; height:300px; overflow: hidden;} .instagram-feed .grid_container .grid__item {position:relative; float:left; padding:3px; width:33.33333333333333%; height:50%; overflow:hidden} .instagram-feed .grid_container .grid__item .icon-ig {background:url('https://storage.onyx-hospitality.com/assets/icon/logo-ig.svg') no-repeat center; position:absolute; width:20px; height:20px; bottom: 15px; left:15px; z-index:6;} /*Static Our Image*/ .instagram-feed .grid__item:nth-child(7), .instagram-feed .grid__item:nth-child(8), .instagram-feed .grid__item:nth-child(9), .instagram-feed .grid__item:nth-child(10), .instagram-feed .grid__item:nth-child(11), .instagram-feed .grid__item:nth-child(12) {display:none} .instagram-feed .grid__item img{object-fit:cover; width:100%; height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; position:absolute; left:0; top:0; background-size: cover;background-repeat: no-repeat;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all .5s;} .instagram-feed .grid__item:hover img{-webkit-transform: scale(1.05);-moz-transform: scale(1.05);-ms-transform: scale(1.05);-o-transform: scale(1.05);transform: scale(1.05);} .instagram-feed .grid__item .hovereffect .overlay .center-center{opacity:0; eight:100%; width:100%} .instagram-feed .grid__item .hovereffect:hover .overlay {background-color:rgba(0,0,0,.6);} .instagram-feed .grid__item .hovereffect:hover .overlay .center-center{opacity:1} .instagram-feed .grid__item .hovereffect, .instagram-feed .grid__item .hovereffect a{color:#fff;} .instagram-feed .grid__item .hovereffect .inner{padding:10px; font-size:1.4rem; line-height:1} .instagram-feed .grid__item .hovereffect .inner .caption{display:none} .instagram-feed .grid__item .hovereffect .seemore{margin:10px auto} /* Careers page */ .career .jop-detail {margin-bottom:30px;} .career .jop-detail h3 {font-size:2.8rem; color:#3b4067;} .career .jop-detail li {display: inline; float:left; width:100%;} .career .jop-detail li, .career .jop-detail li a {color: #6d6d6d} .career .jop-detail li a:hover {color: #7aa2de;} .titleb {font-weight:bold;} .career .jop-detail.description h3 {color:#3b4067;} /*About ONYX*/ .aboutonyx .cards_border0 .cards .content h4{font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; color: #7aa2de; margin: 15px 0 10px 0;} /*About Us - Vision*/ .row_text-image{position:relative} .row_text-image:before {content: ''; position: absolute; width: 800px; height: 800px; top: -450px; left: -450px; border-radius: 50%; border: 240px solid #e8dee3; z-index: -1;} .row_text-image h2{font-family: 'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; font-size: 4rem; font-weight: bold; color:#444; text-transform: uppercase; margin:20px 0;} .row_text-image header{padding:15px 15px 0 15px} .row_text-image .content{padding:0 15px 25px 15px} .cards_reverse{margin:65px 0} /*About Us - Our Stengths*/ .image_textquote{margin:15px 0} .image_textquote h2{font-family: 'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; margin:20px 0;} .image_textquote .quote {width:93%; padding:40px 0 0 50px; position:relative; font-family:'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; font-weight: 500; font-size:2.6rem; line-height:1.2; position:relative;color: #545960;} .image_textquote .quote:before {content: "“"; color: #edebe7; font-size: 88px; font-weight:600; font-family: 'Playfair Display', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC',serif; text-align: center; line-height: 1em; position: absolute; left: -15px; top:30px} .image_textquote .quote::after {content: "”"; color: #edebe7; font-size: 88px; font-weight:600; font-family: 'Playfair Display', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC',serif; text-align: center; line-height: 1em; position: absolute; right: -30px; bottom:-50px;} .image_textquote .image, .image_textquote .content{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;} .image_textquote .content .inner{padding:10%} /*About Us - Background Image with Text - CEO message, Careers, Italthai*/ .bgimage-text{position:relative; height:70vh; z-index:10;} .bgimage-text .bgimg{height:100%} .bgimage-text .bgimg img{object-fit:cover; width:100%; height:100%; background-position:center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;} .bgimage-text .content{position:absolute; top:0; left:0; right:0; width:100%; height:100%; text-align:left; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index:2} .bgimage-text .content .inner{padding:10%} .bgimage-text .content h2{font-size:3.8rem; color:#fff; text-transform:uppercase; margin-bottom:5px;} .bgimage-text .content h3{font-family:'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; font-size:2.2rem; font-weight:normal; color:#fff; margin: 5px 0 20px 0;} .bgimage-text .content p{font-size:1.7rem; color:#fff; text-shadow:0 0 3px rgba(0,0,0,.5); margin-bottom:0} .bgimage-text .content img.logo {margin-bottom:30px;} .bgimage-text .content .btn-wrapper {margin:50px 0 30px 0;} .bgimage-text .content .quote {width:93%; padding:40px 0 0 50px; position:relative;} .bgimage-text .content .quote p{ font-family:'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; font-weight: 500; font-size:2rem; line-height:1.2;} .bgimage-text .content .quote:before {content: "“"; color: #fff; font-size: 88px; font-weight:600; font-family: 'Playfair Display', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC',serif; text-align: center; line-height: 1em; position: absolute; left: -15px; top:30px} .bgimage-text .content .quote::after {content: "”"; color: #fff; font-size: 88px; font-weight:600; font-family: 'Playfair Display', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC',serif; text-align: center; line-height: 1em; position: absolute; right: -30px; bottom:-50px;} /*Visit Official Website*/ .official-website {padding: 0;} .official-website .bgimage-text{height:50vh} .official-website .bgimage-text .content{width:100%;text-align:center} .download{margin:15px auto} .download .bgimage-text{height:400px} .download .bgimage-text .content {width: 100%; text-align: center;} .download .bgimage-text .bgimg:before{content:''; background-color:rgba(0,0,0,0.4); position:absolute; width:100%; height:100%; z-index:1;} .download .bgimage-text .content .btn-wrapper{margin:0 auto; border-radius: 50%; border:10px solid #fff; padding:20px; width: 350px; height: 350px; display: flex; align-items: center;} .download .btn-border-wh{font-size:3rem; line-height:1.2; font-weight:bold; text-transform:uppercase; text-align:center; padding:0;} .download .btn-border-wh:before, .download .btn-border-wh:after{content:none} .download .btn-wrapper:hover{background:rgba(0,0,0,0.2);} .download .btn-border-wh:hover{color:#fff} /*About Us - Timeline*/ .timelines {height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin:70px 0} .timelines h2{font-family:'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; font-size:5rem; color:#444; text-transform:uppercase; text-align:center;} .timeline { width: 100%; position: relative;} .timeline-nav__item { width: auto; height: auto; text-align: center; opacity: 0.5; background: transparent; color: #d9c8d1; margin: 20px 25px !important; position: relative; font-size: 1.8rem; outline: none; cursor: pointer;} .timeline-nav__item::before { content: ""; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 100%; background-color: #d9c8d1; transition: 0.2s;} .timeline-nav__item.slick-current { color: #3a4352; opacity: 1; font-size:2.4rem;} .timeline-nav__item.slick-current::before { background-color: #3a4352; width: 10px; height: 10px;} .timeline-wrapper { position: relative; width:100%; height:100vh; margin: 30px auto;} .timeline .slick-list { height: 100%;} @media (min-width: 1080px) { .timeline .slick-list {padding: 0 180px !important; } } .timeline .slick-track {height: 100%;} .timeline-slide {position: relative; overflow: hidden; outline: none; margin: 0; width: 100%; z-index: 1; cursor:pointer;} .timeline-slide:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:#f6f6f7; z-index: 2;} .timeline-slide .content, .timeline-slide .image{position: relative; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding:0 15px; display: flex; flex-direction: column; justify-content: center; align-items: center;} .timeline-slide .image{-ms-flex-order: 1; order: 1;} .timeline-slide .content{-ms-flex-order: 2; order: 2;} .timeline-slide .content .inner{padding:10%} .timeline-slide .content h3{font-family:'Rubik', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:4.6rem; color:#444;} .timeline-slide .content h4{font-family:'Montserrat', 'Kanit', 'Noto Serif SC', 'Noto Serif TC'; font-size:3.4rem; color:#555; margin:20px 0;} .timeline-slide .image img{border-radius:50%; border:10px solid #f6f6f7; width: 400px; height: 400px; margin: 0 auto;} .timeline-slide .image .inner{display: flex; flex-direction: column; justify-content: center;} .timeline .slick-current:after {background-color: rgba(0, 52, 113, 0);} .timeline .slick-current .image, .timeline .slick-current .content{opacity: 1;} /*About Us - Leadership*/ .our-team{position:relative; margin:50px 0;} .our-team h2 {font-size:3.8rem; color:#8d7249; font-weight: bold; text-transform:uppercase;} .our-team header {margin: 10px auto 40px auto; display: block;} .our-team .card{border:0; padding:10px;} /*CEO*/ .ceo {padding:50px 0; background:#e8eaf6;} .ceo .image{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; padding:10px;} .ceo .content{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; padding: 50px; display: flex; flex-direction: column; justify-content: center;} /*Image*/ .our-team .image{position:relative;} .our-team .image figure{height:100%; display:block} .our-team .image figure img{object-fit:cover; width:100%; height:100%; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity:1;} .our-team .image figure img:hover {opacity:.8;} /*Content*/ .our-team .content{background: none; padding:20px; width:100%;} .our-team .content h3, .our-team .content h3 a{font-size: 2.8rem; line-height:1; font-weight:500; margin:0 0 20px 0;} .our-team .content h3 a:hover{color:#7aa2de} .our-team .content .position{font-size:2rem; color:#6a7079;} .our-team .content .desc {padding:20px 0;} .fancybox-content .desc {margin:30px 0;} .team{padding:80px 0 50px 0;} .team .image{width:380px; height:380px; position:relative; background:#ededed; overflow:hidden; border-radius:50%; box-shadow:0 0 10px rgba(0,0,0,0.1); text-align: center; margin:0 auto;} .team .card:before{content:''; position:absolute; width:85px; height:85px; background:#c7b6c1; right:30px; top:0; border-radius:50%; opacity:.5} .team-detail .image{width:320px; height:320px; position:relative; overflow:hidden; border-radius:50%; box-shadow:0 0 10px rgba(0,0,0,0.1); text-align: center; margin:0 auto;} .team-detail .image img{margin:0 auto; text-align:center;} .team-detail.fancybox-width {padding:30px;} /*About Us / Community / Our Commitment*/ .commitment {display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(7, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; background-color:#f4f4f5;} .commitment .header {grid-area: 1 / 1 / 2 / 2;} .commitment .photo1 {grid-area: 2 / 1 / 3 / 2;} .commitment .text1 { grid-area: 3 / 1 / 4 / 2;} .commitment .photo2 { grid-area: 4 / 1 / 5 / 2;} .commitment .text2 {grid-area: 5 / 1 / 6 / 2; } .commitment .photo3 {grid-area: 6 / 1 / 7 / 2;} .commitment .text3 {grid-area: 7 / 1 / 8 / 2;} .commitment .header{background-color:#262633; color:#fff; position:relative; display: flex; justify-content: center; align-items: center;} .commitment .header h2{color:#fff;} .commitment .photo img{width: 100%; height: 100%; object-fit: cover;} .commitment .text{position:relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding:50px} .commitment .text h3{text-transform:inherit; margin:10px 0; text-align:center} /*commitment icon*/ .commitment .text .icon{background: url('https://storage.onyx-hospitality.com/assets/icon/sprite_community.svg') no-repeat; width:125px; height:80px; margin: 20px auto;} .commitment .text .icon.no1{background-position:0 0;} .commitment .text .icon.no2{background-position:0 -80px;} .commitment .text .icon.no3{background-position:0 -160px;} /*VIP Partner*/ .vip-benefit{background-color:#f6f6f9; padding:80px 0;} .vip-benefit h2{font-size:4.8rem; line-height:1; color:#34395f; text-align:center; width:100%; margin:0 auto 10px auto;} .vip-benefit .icon-text {background-color:#ffffff; margin: 15px; -ms-flex: 0 0 calc(100% - 25px); flex: 0 0 calc(100% - 25px); max-width: calc(100% - 25px); padding: 30px; text-align: center;} .vip-benefit .text-text {text-align:left} .vip-benefit .text-text h3{font-size:3.2rem; color:#3a4352; margin:30px 0; text-align:center;} .vip-benefit .icon {background: url('https://storage.onyx-hospitality.com/assets/icon/vip-partner-benefit.svg') no-repeat; display: block; margin: 20px auto; width: 100px; height: 100px;} .vip-benefit .room{background-position: 0 0;} .vip-benefit .fb{background-position: -100px 0;} .vip-benefit .fbohg{background-position: -200px 0;} .vip-benefit .spa{background-position: -300px 0;} .vip-term header {width:200px} .vip-term header h3{font-size:4.8rem; line-height:1; color:#3a4352; text-transform:uppercase; position:relative;} .vip-term header h3:before{content:''; border-left:solid 4px #f0f0fa; width:50px; height:100%; position:absolute; left:-20px;} .two-column_equal-fluid-h100{height:120vh; padding:0; margin-right:auto; margin-left:auto;} .two-column_equal-fluid-h100 .image{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; position:relative; height:40vh; overflow:hidden; text-decoration:none; z-index:1;} .two-column_equal-fluid-h100 .content{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; display: flex; align-items: center; justify-content: center;width:100%; height:80vh; position:relative; overflow:hidden; z-index:0} .two-column_equal-fluid-h100 .content .inner{width: 80%;} /*About Us - Community - Initiatives / Our Brands*/ .initiatives, .hospitality, .fnb{position:relative} .initiatives:before, .hospitality:before, .fnb:before {content: ''; position: absolute; width: 1200px; height: 1200px; top:calc(50% - 600px); right: -600px; border-radius: 50%; border: 400px solid #eadac0; opacity:0.6; z-index:-1} .fnb:before{left:-600px; right:inherit; border: 400px solid #fbdad1; z-index:0} .card_wrapper{margin:70px 0;} .card_wrapper header{margin:45px 0} .card_wrapper .card{border:1px solid #ededee} .card_wrapper .card h3{margin:10px 0 20px 0} .card_wrapper .card h3 a{color:#3b4067} .card_wrapper .card h3 a:hover{color:#a4aad3} .card_wrapper .card .image img{width:100%} .card_wrapper .card-body{padding:8%} .card_wrapper .image{position:relative} .card_wrapper .image .logo-wrap{position: absolute; bottom: 20px; width: 100%; margin-bottom:0; display:block} .card_wrapper .image .logo-wrap h3{margin:0 auto} /*Our Brands Slider*/ .card_wrapper .carousel-cell {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;} .card_wrapper .carousel-cell .image{position:relative; height:450px} .card_wrapper .carousel-cell .image .logo-wrap{position: absolute; bottom: 20px; width: 100%; margin-bottom:0; display:block} .card_wrapper .carousel-cell .image .logo-wrap h3{margin:0 auto} .card_wrapper .carousel-cell .content{padding:8%; border:1px solid #ededee; background:#fff; position:relative; height:400px} .card_wrapper .carousel-cell .content h3{margin:10px 0 20px 0; color:#3b4067} .card_wrapper .carousel-cell .content h3 a{color:#3b4067} .card_wrapper .carousel-cell .content h3 a:hover{color:#a4aad3} .card_wrapper .carousel-cell .content .btn-wrapper{position:absolute; bottom:0; margin: 30px auto; width: 84%;} /*previous - next*/ .card_wrapper .flickity-button{width:80px; height:80px} .card_wrapper .flickity-button{opacity:0.5} .card_wrapper .flickity-button:hover{background:transparent; opacity:1} .card_wrapper .flickity-prev-next-button{top:6%} .card_wrapper .flickity-prev-next-button.next{right: 10px;} .card_wrapper .flickity-prev-next-button.previous .flickity-button-icon{background-image: url('https://storage.onyx-hospitality.com/assets/icon/arrow-left_wh_b.svg'); padding: 33px; width: 66px; height: 66px;} .card_wrapper .flickity-prev-next-button.next .flickity-button-icon{background-image: url('https://storage.onyx-hospitality.com/assets/icon/arrow-right_wh_b.svg'); padding: 33px; width: 66px; height: 66px;} .card_wrapper .flickity-prev-next-button .flickity-button-icon{left:7px; top:7px;} /*ONYX Brands*/ .bg, .fnb{background-color:#f6f6f7} .fnb .card_wrapper{margin:65px 0 0 0; padding:0 0 65px 0} .multi-item-carousel .carousel-inner.row{margin:0;} /*********************************************************************/ /* Bootstrap 4 Multiple Item Carousel */ @media (min-width: 768px) and (max-width: 991px) { /* Show 4th slide on md if col-md-4*/ .multi-item-carousel .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item { position: absolute; top: 0; right: -33.3333%; /*change this with javascript in the future*/ z-index: -1; display: block; visibility: visible;} } @media (min-width: 576px) and (max-width: 768px) { /* Show 3rd slide on sm if col-sm-6*/ .multi-item-carousel .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item { position: absolute; top: 0; right: -50%; /*change this with javascript in the future*/ z-index: -1; display: block; visibility: visible; } } @media (min-width: 576px) { .card_wrapper .carousel-cell{margin:0 15px} .fnb .flickity-button, .fnb .flickity-page-dots{display:none} .multi-item-carousel .carousel-item {margin-right: 0;} /* show 2 items */ .multi-item-carousel .carousel-inner .active + .carousel-item {display: block;} .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item { transition: none; } .multi-item-carousel .carousel-inner .carousel-item-next {position: relative; transform: translate3d(0, 0, 0);} /* left or forward direction */ .multi-item-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left, .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item, .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item { position: relative; transform: translate3d(-100%, 0, 0); visibility: visible;} /* farthest right hidden item must be abso position for animations */ .multi-item-carousel .carousel-inner .carousel-item-prev.carousel-item-right {position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible;} /* right or prev direction */ .multi-item-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right, .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item, .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item { position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible; } /***RTL***/ /* left or forward direction */ *[dir='rtl'] .multi-item-carousel .active.carousel-item-left + .carousel-item-next.carousel-item-left, *[dir='rtl'] .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item, *[dir='rtl'] .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item { transform: translate3d(100%, 0, 0);} /* right or prev direction */ *[dir='rtl'] .multi-item-carousel .active.carousel-item-right + .carousel-item-prev.carousel-item-right, *[dir='rtl'] .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item, *[dir='rtl'] .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item { transform: translate3d(-100%, 0, 0);} } @media (min-width: 768px) { /* show 3rd of 3 item slide */ .multi-item-carousel .carousel-inner .active + .carousel-item + .carousel-item {display: block;} .multi-item-carousel .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {transition: none;} .multi-item-carousel .carousel-inner .carousel-item-next {position: relative;transform: translate3d(0, 0, 0);} /* left or forward direction */ .multi-item-carousel .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(-100%, 0, 0); visibility: visible;} /* right or prev direction */ .multi-item-carousel .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {position: relative;transform: translate3d(100%, 0, 0);visibility: visible;display: block;visibility: visible;} } /****Carousel Indicators****/ /****Global = control <-prev--next->****/ .carousel-control-prev-icon{background-image:url(https://storage.onyx-hospitality.com/assets/icon/arrow-left_wh_b.svg); padding: 35px; width:70px; height:70px;} .carousel-control-next-icon{background-image:url(https://storage.onyx-hospitality.com/assets/icon/arrow-right_wh_b.svg); padding: 35px; width:70px; height:70px;} .carousel-control-prev, .carousel-control-next{width:80px; bottom:inherit; z-index:10; opacity:0.4} .carousel-control-prev:hover, .carousel-control-next:hover {opacity: 1} .carousel-indicators li{background-color: #dfe0e3; width: 8px; height: 8px; margin:20px 6px; border-radius: 50%; border:0;} .carousel-indicators li.active{width: 24px; height: 24px; margin: 10px 6px; border:1px solid #dfe0e3; background:none;} /****control <-prev--next-> - multi-item-carousel card (brands ourbrand, fnb)****/ .multi-item-carousel .carousel-control-prev {left: 20px; top: 10px; } .multi-item-carousel .carousel-control-next {right: 20px; top: 10px;} .multi-item-carousel .carousel-indicators{bottom:-55px;} /****control <-prev--next-> - wellness****/ .bgimage .carousel-indicators li{background-color: #fff;} .bgimage .carousel-indicators li.active{border:1px solid #fff; background-color:transparent;} .bgimage .carousel-control-prev {right: 100px; left: inherit; top: 10px; } .bgimage .carousel-control-next {right: 10px; top: 10px;} /**Exceptional**/ #hospitality .carousel-indicators, #fnb .carousel-indicators{display: none} /*******************************/ /*Brands - At a glance*/ .overlap_image-on-text{margin:70px 0; display:flex; flex-direction: column; background-color:#f6f6f7;} .overlap_image-on-text .content, .overlap_image-on-text .image{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;} .overlap_image-on-text .content{ -ms-flex-order: 2; order: 2} .overlap_image-on-text .image{-ms-flex-order: 1; order:1} .overlap_image-on-text .content .inner{padding:10%} .overlap_image-on-text .content a{text-decoration:underline} .carousel.overlap .overlap_image-on-text {margin:0} .carousel.overlap .carousel-control-prev, .overlap .carousel-control-next {top: 50%;} .carousel.overlap .carousel-control-prev-icon{background-image:url(https://storage.onyx-hospitality.com/assets/icon/arrow-left_gy_b.svg); padding: 35px; width:70px; height:70px;} .carousel.overlap .carousel-control-next-icon{background-image:url(https://storage.onyx-hospitality.com/assets/icon/arrow-right_gy_b.svg); padding: 35px; width:70px; height:70px;} /*contact_onyx*/ .contact_onyx{margin:70px auto; text-align:center} .contact_onyx h3{text-transform:uppercase; color: #fff;} .contact_onyx .frame:before{content:''; background:#eadac0; position:absolute; border-radius:0 0 140px 140px; width: 140px; height: 70px; top:-70px; left: calc(50% - 70px);} .contact_onyx .frame{position:relative; padding:50px; margin: 0 auto; border-radius: 50%; width: 350px; height: 350px; display: flex; flex-direction: column; justify-content: center; background: #755475; color: #fff;} .contact_onyx .frame .btn-ani-hover-change{color: #3a4352;} .contact_onyx .frame .btn-ani-hover-change:hover{color:#fff} .contact_onyx .frame .btn-ani-hover-change:before{width:150px} .contact_onyx .frame .btn-ani-hover-change:hover:before {width: 100%;} /*Development*/ .content_highlight .cards_border0 .cards {background:#f3f6f9;} .content_highlight .cards_border0 .cards .content h2, .content_highlight .cards_border0 .cards .content h2 a {font-size: 3rem; color: #3a4352; line-height: 1.3; margin: 0 0 20px 0;} /*Logos Image*/ .brands-logos{background-color:#c0a9b7/*B4BED8*/; padding: 90px 0; display: flex; justify-content: center; flex-direction: column; align-content: center; align-items: center; flex-wrap: nowrap;} .brands-logos h2{color:#fff} /*Development Journey*/ .development_journey{background-color: #f6f6f7; margin: 30px 0 0 0; padding: 50px 30px;} .stepper {display: flex; flex-wrap: wrap; padding:0;} .stepper_item {flex: 1; display: flex; flex-direction: column;} /*.stepper_item:before {--size: 3rem;content: "";position: relative;z-index: 1;display: block;width: var(--size);height: var(--size);border-radius: 50%;margin: 1rem auto 0; background-color:#fff;} .stepper_item:not(:last-child):after {content: "";position: relative;top: 1.5rem;left: 50%;height: 2px;background-color: #e0e0e0;order: -1; width: calc(100% - var(--size) - calc(var(--spacing) * 2)); left: calc(50% + calc(var(--size) / 2 + var(--spacing)));}*/ .stepper_item .title{height: 200px; position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; text-align: center;} .stepper_item .title h3{font-size: 3rem; color: #fff} .stepper_item .title .process{position: absolute; bottom: 20px; width: 122%; display: flex; justify-content: center; align-items: baseline; z-index: 10;} .stepper_item .title .process:before, .stepper_item .title .process:after{content: ''; width: 35px; height: 10px;} .stepper_item .title .process:before{background: url('https://storage.onyx-hospitality.com/assets/icon/arrow-left_lg.svg') 0 50%; margin-right: 10px;} .stepper_item .title .process:after{background: url('https://storage.onyx-hospitality.com/assets/icon/arrow-right_lg.svg') 100% 50%; margin-left: 10px;} .stepper_item:nth-child(1) .title{background:#8b734b} .stepper_item:nth-child(2) .title{background:#e7dac2} .stepper_item:nth-child(3) .title{background:#522953} .stepper_item .content{display: flex; flex-direction:row; text-align:left} .stepper_item .content .content_item{width:50%; margin:15px} .stepper_item .content h4, .stepper_item .content h5{font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC';} .stepper_item .content h4:after{content:""; height:1px; width:100%; display:block; background-color:#dee2e6; margin-top:10px;} .stepper_item .content h4 {font-size:1.8rem; font-weight:500} /*Measures Table*/ .measures {margin:30px 0; display: flex; align-content: center; justify-content: center; align-items: center;} .measures table {border-collapse: collapse; width:100%; margin-bottom:20px;} .measures th {background-color: #c0a9b7; color: #fff;} .measures th, .measures td {padding: 15px; text-align: left; border-bottom: 1px solid #e9ecef;} .measures th:first-child, .measures td:first-child{width: 25%;} .measures tr:nth-child(even) {background-color: #f9f9fa;} .measures tr:hover {background-color: #f9f4ec;} .measures tr:nth-child(2) .color{background:#d9c8d1} .measures tr:nth-child(3) .color{background:#e8dee3} .measures tr:nth-child(4) .color{background:#f4eef1} /*.measures tr:nth-child(2) .color{background:#cfd1e4} .measures tr:nth-child(3) .color{background:#dee0ed} .measures tr:nth-child(4) .color{background:#e5e7f0}*/ /*Development - Meet our team*/ .dev-teams{display: flex; margin: 0 auto;} .dev-teams .content, .dev-teams .content_team{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; display:flex;} .dev-teams .content{position:relative; display: flex; flex-direction: column; justify-content: center; align-items: center;} .dev-teams .content .inner{padding:30px} .dev-teams .content_team{flex-direction: column; align-items: center;} .dev-teams .content_team .team_item{margin:0 1px 20px 1px} .dev-teams .content_team .image{ position: relative; width: 310px; height:310px; border-radius: 50%; overflow: hidden;} .dev-teams .content_team .info{position: relative; height: 160px;padding: 15px;} .dev-teams .content_team .name{font-size: 1.8rem; color: #3b4067; font-weight:500; margin:15px 0 5px 0} .dev-teams .content_team .position{font-size: 1.4rem;} .dev-teams .content_team .info .btn-wrapper{position: absolute; bottom:0} /*Gallery*/ .individual-gallery{margin:30px 0} .individual-gallery .image{height:100%} .individual-gallery .image .inner .carousel, .individual-gallery .image .inner .carousel-item {height: 100%} .individual-gallery .image .inner .carousel-item img{object-fit:cover; width:100%; height:100%; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .individual-gallery .image .link{position:absolute; left:30px; bottom:20px; /*padding:10px 20px; background:rgba(0,0,0,0.5); border-radius:50px;*/ z-index:5} .individual-gallery .image .link a{color:#fff; font-size:1.5rem; display:inline-block; margin:0;} .individual-gallery .image .link a:hover{opacity:.5} .individual-gallery .carousel-control-prev-icon{background-image:url('https://storage.shama.com/icon/arrow-prev_wh.svg'); width:65px; height:15px;} .individual-gallery .carousel-control-next-icon{background-image:url('https://storage.shama.com/icon/arrow-next_wh.svg'); width:65px; height:15px;} .pop-up-360{background-image:url('https://storage.shama.com/icon/pop-up-360.png'); width:26px; height:26px; display:inline-block; vertical-align:middle; margin:0 5px;} .pop-up-plus{background-image:url('https://storage.shama.com/icon/pop-up-plus.png'); width:24px; height:24px; display:inline-block; vertical-align:middle; margin:0 5px;} .pop-up-floor-plan{background-image:url('https://storage.shama.com/icon/pop-up-floor-plan.png'); width:24px; height:24px; display:inline-block; vertical-align:middle; margin:0 5px;} .individual-gallery .carousel-indicators{bottom:0;} .individual-gallery .carousel-indicators li{width:5px; height:5px; border-radius: 50%;} /*Property - Room Type individual Description & Gallery*/ .two-column_23-fluid{position:relative; width: 100%; padding: 0; margin: auto} .two-column_23-fluid .image, .two-column_23-fluid .content{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%;} .two-column_23-fluid .image{-ms-flex-order: 1; order: 1;} .two-column_23-fluid .content{-ms-flex-order: 2; order: 2; z-index:2} .two-column_23-fluid .image{position:relative; width:100%; height:60vh;/* padding-left:15px; padding-right:15px;*/ z-index:1;} .two-column_23-fluid .image .inner .carousel, .two-column_23-fluid .image .inner .carousel-inner, .two-column_23-fluid .image .inner .carousel-item {height: 100%} .two-column_23-fluid .image .inner .carousel-item img{object-fit:cover; width:100%; height:100%; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .two-column_23-fluid .image .link{position:absolute; left:20px; bottom:50px; background: rgba(0,0,0,.5); padding:5px 15px; border-radius:50px; z-index:5} .two-column_23-fluid .image .link a{color:#fff; font-size:1.4rem; display:inline-block; text-shadow:0 0 10px rgba(0,0,0,0.2); line-height:48px;} .two-column_23-fluid .image .link a:hover{opacity:.5} .cn .two-column_23-fluid .image .link a, .zh .two-column_23-fluid .image .link a {font-size:1.5rem;} .pop-up-360{background-image:url('https://storage.shama.com/icon/pop-up-360.png'); width:26px; height:26px; display:inline-block; vertical-align:middle; margin:0 5px;} .pop-up-plus{background-image:url('https://storage.shama.com/icon/pop-up-plus.png'); width:24px; height:24px; display:inline-block; vertical-align:middle; margin:0 5px;} .two-column_23-fluid .content{width:100%; position:relative; color:#727272; background:#fff; padding: 15px;} .two-column_23-fluid .content .inner{width:100vw; height: 100%; margin: 0 auto; padding: 30px} .two-column_23-fluid .content h1 {font-size:4.2rem; line-height:1; color:#3b4067; font-weight: 500;} .th .two-column_23-fluid .content h1 {font-weight: 500;} .two-column_23-fluid .content h2.tagline{font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC';font-size: 2rem;line-height: 1; color: #7aa2de; text-transform: uppercase;letter-spacing: 2px; padding-bottom:10px;} .two-column_23-fluid .content .view{color:#9e9e9e; margin:20px 0; font-size: 1.7rem;} .two-column_23-fluid .content .view span{margin:0 10px; color:#c1c1c1; font-size: 1.7rem;} .two-column_23-fluid .content .remark{font-size: 1.7rem; line-height: 1.5; color: #9e9e9e;} .cn .two-column_23-fluid .content .view, .zh .two-column_23-fluid .content .view{font-size: 1.7rem;} .th .two-column_23-fluid .content h2.tagline, .cn .two-column_23-fluid .content h2.tagline, .zh .two-column_23-fluid .content h2.tagline {letter-spacing: normal;} /*Srollbar*/ /*width*/ .content .inner::-webkit-scrollbar {width:6px;border-radius: 10px;} /* Track */ .content .inner::-webkit-scrollbar-track {background-color:#f4f8fa;border-radius: 10px;} /* Handle */.content .inner::-webkit-scrollbar-thumb {background-color:#e4eaee;border-radius: 10px;} /* Hover */ .content .inner::-webkit-scrollbar-thumb:hover {background-color:#d7dfe4} .slide-arrow-circle_BR_wh .carousel-item{height:70vh} .slide-arrow-circle_BR_wh .indicators{position:absolute; top:15px; right:15px; left:inherit; bottom:inherit; color:#fff;z-index:2; width:10px; height:130px;} .slide-arrow-circle_BR_wh .carousel-indicators{flex-direction:column;} .slide-arrow-circle_BR_wh .carousel-indicators li{width:2px; height:20px;border-top:5px solid transparent; border-bottom:5px solid transparent;} .slide-arrow-circle_BR_wh .carousel-control-prev-icon{background-image:url('https://storage.ozohotels.com/icon/arrow-left-circle_wh.svg'); width:50px; height:50px;} .slide-arrow-circle_BR_wh .carousel-control-next-icon{background-image:url('https://storage.ozohotels.com/icon/arrow-right-circle_wh.svg'); width:50px; height:50px;} .slide-arrow-circle_BR_wh .carousel-control-next, .slide-arrow-circle_BR_wh .carousel-control-prev{opacity:1} .slide-arrow-circle_BR_wh .carousel-control-next:hover, .slide-arrow-circle_BR_wh .carousel-control-prev:hover{opacity:.5} .slide-arrow-circle_BR_wh .carousel-control-prev{right:80px; bottom:20px; top:inherit; left:inherit; width:60px; height:60px;} .slide-arrow-circle_BR_wh .carousel-control-next{right:20px; bottom:20px; top:inherit; left:inherit; width:60px; height:60px;} /*Slider - List restaurants, amenities*/ .text-overlap-image header{text-align:center; margin:50px auto 30px auto;} .text-overlap-image header h2{font-size:4.3rem; color:#3a4352; margin: 0} .text-overlap-image header h3{display:inline-block; margin:10px 0;} .text-overlap-image header h3 a{font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; color:#fff; background:#5774d1; font-size:1.8rem; font-weight:normal; margin:0 5px; padding:12px 30px; border-radius:50px;} .cn .text-overlap-image header h3 a, .zh .text-overlap-image header h3 a {padding:20px 30px 15px 30px;} .text-overlap-image header h3 a:hover{background:#31347a} .text-overlap-image header h3 a.active{background:#31347a} .text-overlap-image .image{height:50vh} .text-overlap-image .content, .text-overlap-image .content .inner{height:auto} .text-overlap-image .content .inner .btn-wrapper {margin:50px 0 20px 0;} .text-overlap-image .image, .text-overlap-image .content{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%;} .text-overlap-image .image{background-color:#f3f6f9;} .text-overlap-image .image img{object-fit:cover; width:100%; height:100%; } .text-overlap-image .content{position:relative; font-size:1.8rem;} .text-overlap-image .content:before {background:#f3f6f9; content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;} .text-overlap-image .content .inner{background: #fff; position: relative; width:100%; height:calc(100% - 15px); font-size:1.6rem; line-height:1.4; padding:50px; overflow:hidden; z-index:5;} .text-overlap-image .content .tagline{font-size:2rem; color:#7aa2de; font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; margin-bottom:10px;} .text-overlap-image .content h3, .text-overlap-image .content h3 a{font-size:3.6rem; line-height:1; color:#3b4067; font-weight: 500; padding-bottom:20px;} .th .text-overlap-image .content h3, .th .text-overlap-image .content h3 a { font-weight:500;} .text-overlap-image .content h3 a:hover{color:#5b96a9} .slide-arrow_tr_gy .indicators {position: absolute; top: 50vh; right: 60px; width: 40px; height: 60px; color: #000; text-align: center; z-index: 5; color:#3b4067;} .slide-arrow_tr_gy .indicators .countslide {width: 60px; height: 60px; line-height: 60px; margin:0 auto} .slide-arrow_tr_gy .indicators, .slide-arrow_tr_gy .carousel-control-prev, .slide-arrow_tr_gy .carousel-control-next{top: 50vh; width: 60px; height: 60px;} .slide-arrow_tr_gy .carousel-control-prev{left: inherit; right: 100px;} .slide-arrow_tr_gy .carousel-control-next{right: 0;} .slide-arrow_tr_gy .carousel-control-prev-icon{background-image:url('https://storage.onyx-hospitality.com/assets/icon/arrow-left_bk_s.svg'); width:24px; height:24px; } .slide-arrow_tr_gy .carousel-control-next-icon{background-image:url('https://storage.onyx-hospitality.com/assets/icon/arrow-right_bk_s.svg'); width:24px; height:24px;} /*Home - Destination*/ .flickity_group {height:auto; margin: 0 auto;} .flickity_group.brands{width: 100vw} .flickity_group.brands .carousel-cell{width: 50%} .flickity_group header{padding:40px 0 0 0; text-align:center;} .flickity_group header h2.tagline {font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 2rem; line-height: 1; color:#3b4067; text-transform: uppercase; letter-spacing: 2px;} .flickity_group header h3 {font-size:3.6rem; line-height:1; color:#7aa2de; margin:10px auto 30px auto;} .th .flickity_group header h2.tagline, .cn .flickity_group header h2.tagline, .zh .flickity_group header h2.tagline {letter-spacing: normal;} .flickity_group .container-fluid{padding:0} /*carousel*/ .flickity_group .carousel-cell.is-selected .hovereffect .overlay {background-color:rgba(0,0,0,0.1); margin:0; width: 100%; height:100%;} .flickity_group .carousel-cell-image {display:block; opacity:0; -webkit-transition:opacity 0.4s; transition:opacity 0.4s;} .flickity_group .carousel-cell {width:60%; height:auto; position:relative;} .flickity_group .carousel-cell a{color:rgba(255,255,255,0.3)} .flickity_group .carousel-cell h3{font-size:2.4rem;color:rgba(255,255,255,0.3); font-weight:500;} .flickity_group .carousel-cell p{font-size:1.5rem;color:rgba(255,255,255,0.3);} .flickity_group .carousel-cell .image{margin:0;} .flickity_group .carousel-cell .center-center{opacity:0} .flickity_group .carousel-cell.is-selected .center-center{opacity:1} .flickity_group .carousel-cell.is-selected a, .flickity_group .carousel-cell.is-selected h3, .flickity_group .carousel-cell.is-selected p{color:#fff} .promotion .flickity_group .carousel-cell .center-center { width:80%; margin:0 auto;} /*arrow*/ .flickity_group .flickity-prev-next-button {top: 12%; width: 100px; height: 50px; border-radius: 0; transform: translateY(-50%);} .flickity_group .flickity-prev-next-button .flickity-button-icon{left: 0; top: 0} .flickity_group .flickity-button:hover {cursor: pointer;background-color: rgba(255,255,255,0);} .flickity_group .flickity-prev-next-button.previous .flickity-button-icon{width:100px; height:50px; background:url('https://storage.mosaic-collection.com/icon/arrow-prev_gr.svg') no-repeat 50% 50%; display:block; margin:0 auto} .flickity_group .flickity-prev-next-button.next .flickity-button-icon{width:100px; height:50px; background:url('https://storage.mosaic-collection.com/icon/arrow-next_gr.svg') no-repeat 50% 50%; display:block; margin:0 auto; } /*hover background color*/ .flickity_group .carousel-cell .hovereffect .overlay{background-color:rgba(134,185,180,0.95);} .flickity_group .carousel-cell .hovereffect:hover .overlay {background-color:rgba(238,128,90,0.8);} /* fade in lazy loaded image */ .flickity_group .carousel-cell-image.flickity-lazyloaded, .flickity_group .carousel-cell-image.flickity-lazyerror {opacity:1;} /*flickity_three*/ .flickity_three .container-fluid{padding:0} .flickity_three header{padding:20px 0; text-align:center;} .flickity_three header h2.tagline {font-family:'Graphik'; font-size:4.8rem; color:#4a5a82;} .flickity_three header h3 {margin:0; font-size:5.8rem; line-height:1; color:#4a5a82;} /*carousel*/ .flickity_three .carousel-cell {margin:15px;} /*overlay*/ .flickity_three .carousel-cell .overlay{background-color:rgba(0,0,0,0.65); width:100%; height:100%; position:absolute; left:0; top:0; right:0; bottom:0; z-index:1; opacity:1} .flickity_three .carousel-cell.is-selected .overlay{opacity:0; display:none} /*content*/ .flickity_three .carousel-cell.is-selected{top:0} .flickity_three .carousel-cell.is-selected .carousel-cell-image{filter:none} .flickity_three .carousel-cell .content {position:relative; display:block; height:auto; overflow:hidden; padding:30px; line-height:1.2;} .flickity_three .carousel-cell .content h3 {font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:2.4rem; color:#4a5a82;} .flickity_three .carousel-cell .content .btn-wrapper .animated-arrow{font-family:'Roboto', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC', 'Microsoft Sans Serif'; font-size:1.6rem;} /*arrow*/ .flickity_three .flickity-prev-next-button{top:42%} .flickity_three .flickity-prev-next-button.previous{left:-15px} .flickity_three .flickity-prev-next-button.next{right: -15px;} /*indicator page*/ .flickity-page-dots{bottom:-45px; display: flex; align-items: center; justify-content: center;} .flickity-page-dots .dot{width: 8px; height: 8px; margin: 0 3px; background:#dfe0e3; opacity:.5} .flickity-page-dots .dot.is-selected{opacity:1; width: 24px; height: 24px; margin: 10px 6px; border: 1px solid #dfe0e3; background: none;} /*previous - next*/ .our-brands .flickity-button{width:80px; height:80px} .our-brands .flickity-button{opacity:0.5} .our-brands .flickity-button:hover{background:transparent; opacity:1} .our-brands .flickity-prev-next-button{top:8%} .our-brands .flickity-prev-next-button.next{right: 15px;} .our-brands .flickity-prev-next-button.previous .flickity-button-icon{background-image: url(https://storage.onyx-hospitality.com/assets/icon/arrow-left_wh_b.svg); padding: 33px; width: 66px; height: 66px;} .our-brands .flickity-prev-next-button.next .flickity-button-icon{background-image: url(https://storage.onyx-hospitality.com/assets/icon/arrow-right_wh_b.svg); padding: 33px; width: 66px; height: 66px;} .our-brands .flickity-prev-next-button .flickity-button-icon{left:7px; top:7px;} .our-brands .content {position: absolute; bottom: 20px; width: 100%; margin: 0 auto; display: block;} .flickity_big-one{position:relative; padding-bottom:50px; background:#f4f1ef;} .flickity_big-one .header-container{padding: 60px 15px 30px 15px; text-align: center; } .flickity_big-one h2.tagline {font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 2rem; color: #3b4067; text-transform: uppercase;} .flickity_big-one h3 {font-size:3.8rem; line-height: 1.5; color:#7aa2de;} .th .flickity_big-one h2.tagline, .cn .flickity_big-one h2.tagline, .zh .flickity_big-one h2.tagline {letter-spacing: normal;} /*carousel*/ .flickity_big-one .carousel-cell {position:relative; width:100vw; height:900px; margin:0 auto;} .flickity_big-one .carousel-cell .image{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; height:400px; cursor: pointer; -ms-flex-order: 1; order: 1;position: relative} .flickity_big-one .carousel-cell .overlay {background-color: rgba(0,0,0,0.2); width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; opacity: 1;} .flickity_big-one .carousel-cell .content{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; width:100%; padding:20px 30px; -ms-flex-order: 2; order: 2; color:#727272} .flickity_big-one .carousel-cell .content h3 {font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:3.6rem; font-weight:500; color:#3b4067; padding-bottom:15px;} .flickity_big-one .carousel-cell .content h3 a{color:#3b4067} .flickity_big-one .carousel-cell .content h3 a:hover{color:#5b96a9} .flickity_big-one .carousel-cell .content .date{margin:8px 0 20px 0; font-size:1.6rem;} .flickity_big-one .carousel-cell .content .btn-wrapper{margin: 25px 0} .flickity_big-one .carousel-cell .condition{font-size:1.5rem; color:#fff; font-style:italic; line-height:1.2} .flickity_big-one .carousel-cell li{position:relative; padding-left:20px; list-style:none;} .flickity_big-one .carousel-cell li:before {content:''; background:#efd1d3; border-radius:6px; width:6px; height:6px; margin:2px; position:absolute; left:0; top:8px;} .flickity_big-one .carousel-cell.is-selected{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; opacity: 1} .flickity_big-one .carousel-cell.is-selected .content{height: 500px; background:#fff url('https://storage.mosaic-collection.com/icon/element_wave.svg') right top no-repeat; margin: 0;} .flickity_big-one .carousel-cell.is-selected .content .inner{padding: 20px 0;} .flickity_big-one .carousel-cell.is-selected .overlay{background-color: rgba(0,0,0,0); display:block;} .flickity_big-one .carousel-cell.is-selected .content .inner{height: 330px; overflow-y: auto;} .flickity_big-one .flickity-page-dots{bottom:10px;} .flickity_big-one .flickity-page-dots .dot{background: rgb(255 255 255);} .flickity_big-one .flickity-prev-next-button{ width: 80px; height: 80px; border-radius:0;top:25%} .flickity_big-one .flickity-prev-next-button.previous .flickity-button-icon{width:80px; height:80px; left:0; top:0; background:url('https://storage.mosaic-collection.com/icon/arrow-prev_gr.svg') no-repeat; display:block;} .flickity_big-one .flickity-prev-next-button.next .flickity-button-icon{width:80px; height:80px; right:0; top:0; left:30%;background:url('https://storage.mosaic-collection.com/icon/arrow-next_gr.svg') no-repeat; display:block} .flickity_big-one .flickity-button{background:transparent;} .flickity_big-one .flickity-button:hover{background-color: transparent;} .flickity_big-one .flickity-prev-next-button.previous .flickity-button-icon:hover, .flickity_big-one .flickity-prev-next-button.next .flickity-button-icon:hover{opacity: 0.5} /*Special Offers Page - Show 1 package - show bottom of page*/ .flickity_one header{padding:40px 0 20px 0; text-align:center;} .flickity_one header h2.tagline {font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 2rem; color: #3b4067; text-transform: uppercase;} .flickity_one header h3 {margin:0; font-size:3.8rem; line-height:1.5; color:#7aa2de;} .th .flickity_one header h2.tagline, .cn .flickity_one header h2.tagline, .zh .flickity_one header h2.tagline {letter-spacing: normal;} /*carousel*/ .flickity_one .carousel{margin-bottom:80px} .flickity_one .carousel-cell {position:relative; width:100vw; height:660px; background:#fff; margin:0 auto; display:flex; opacity:0} .flickity_one .carousel-cell .image{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; height:330px} .flickity_one .carousel-cell .content{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; position:absolute; height:330px; top:330px; line-height:1.5; overflow-y:auto} .flickity_one .carousel-cell .content .detail{overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-overflow-y: auto; height: 110px;} /*content*/ .flickity_one .carousel-cell .content .inner{padding:30px} .flickity_one .carousel-cell .content h3 {font-size:2.6rem; color:#3b4067; line-height:1;} .flickity_one .carousel-cell .content h3 a{color:#3b4067} .flickity_one .carousel-cell .content h3 a:hover{color:#5b96a9} .flickity_one .carousel-cell .content .date{margin:8px 0 20px 0; font-size:1.7rem; border-bottom: dotted 1px #dfe0e0;} .flickity_one .carousel-cell.is-selected{opacity:1} .flickity_one .carousel-cell .condition{font-size:1.5rem; color:#959a9d; font-style:italic; line-height:1.2} .flickity_one .carousel-cell li{position:relative; padding-left:15px; list-style:none;} .flickity_one .carousel-cell li:before {content:''; background:#efe1c9; border-radius:7px; width:7px; height:7px; margin:2px; position:absolute; left:0; top:6px;} .flickity_one .flickity-prev-next-button.previous .flickity-button-icon{width:80px; height:80px; background:url('https://storage.onyx-hospitality.com/assets/icon/arrow-left_bk_s.svg') no-repeat; display:block; top:40%;} .flickity_one .flickity-prev-next-button.next .flickity-button-icon{width:80px; height:80px; background:url('https://storage.onyx-hospitality.com/assets/icon/arrow-right_bk_s.svg') no-repeat; display:block; top:40%;} .flickity_one .flickity-button:hover{background-color:transparent; opacity:.6} /*flickity global*/ .flickity-button{background:transparent} .flickity-button-icon path{display:none} /*About Us - Awards*/ .awards header h2{margin:8px 0} .awards .flickity-prev-next-button, .awards .flickity-page-dots{display:none} /*Scrollbar*/ .content::-webkit-scrollbar {width:6px;border-radius: 10px;} .content::-webkit-scrollbar-track {background-color:#f4f8fa;border-radius: 10px;} .content::-webkit-scrollbar-thumb {background-color:#e4eaee;border-radius: 10px;} .content::-webkit-scrollbar-thumb:hover {background-color:#d7dfe4} .content .detail::-webkit-scrollbar {width:6px;border-radius: 10px;} .content .detail::-webkit-scrollbar-track {background-color:#f4f8fa;border-radius: 10px;} .content .detail::-webkit-scrollbar-thumb {background-color:#e4eaee;border-radius: 10px;} .content .detail::-webkit-scrollbar-thumb:hover {background-color:#d7dfe4} /*Rate + Button*/ .content .rate-wrap{display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center;} .content .rate-wrap .from{display:block; font-size:1.6rem; line-height:1;} .content .rate-wrap .from:after{content:''; border-bottom: 1px solid #dbdee2; display: block; margin: 5px 0 8px 0; width:15px;} .content .rate-wrap .price{font-size:2.4rem; color:#6ba4bc; font-weight:bold;} .content .rate-wrap .price .currency{font-size:1.7rem; font-weight:normal;} .content .rate-wrap .price .night{font-size:1.7rem; color:inherit; font-weight:normal;} .content .rate-wrap .total{font-size:1.7rem; line-height:1; color:#b4b7bd; font-style:italic; text-align:right;} .content .btn-wrapper.bottom{position:absolute; bottom:30px;} .flickity_one .content .rate-wrap{width:calc(100% - 90px); position:absolute; bottom:20px;} .popup{font-size:1.6rem; text-align:left; width:500px; margin:0 auto; display:none} .popup h4{font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; margin:8px 0; font-size:2rem; font-weight:600;} .popup li{position:relative; padding-left:20px; list-style:none;} .popup li:after{content: ''; background: #efe1c9; border-radius: 7px; width: 7px; height: 7px; margin: 2px; position: absolute; left: 0; top: 6px;} /*Accordion*/ .main-accordion{position:relative; margin:30px 0 50px 0;} .main-accordion .panel-default{border-color:#cfd2d6; box-shadow:none;} .main-accordion .panel-group .panel{border-radius:0; border:0; border-top:1px solid #cfd2d6; background:transparent;} .main-accordion .panel-group .panel:last-child{border-bottom:1px solid #cfd2d6;} .main-accordion .panel-default>.panel-heading{padding:20px;background-color:transparent; border-color:transparent; position:relative} .main-accordion .card {background:transparent; -webkit-box-shadow:none; box-shadow:none; -webkit-border-radius:0; border-radius:0; border:0; border-top:1px solid #dfe2e3;} .main-accordion .card:last-of-type{border-bottom:1px solid #dfe2e3;} .main-accordion .card .card-header {position:relative; padding:0; background:0 0; border-bottom:0; border-radius:0} .main-accordion .card .card-header h3{font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC';font-size:3.4rem; color:#555; font-weight: 500; margin:0} .th .main-accordion .card .card-header h3{font-size:2.4rem; font-weight:400;} .main-accordion .card .card-header .card-title {font-weight:400} .main-accordion .card .card-header h3:after{content:''; border: solid #a9aaac; border-width: 0 2px 2px 0; padding: 4px; position: absolute; top:35px; right: 30px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition:-webkit-transform .2s ease-in-out; transition:-webkit-transform .2s ease-in-out; transition:transform .2s ease-in-out; transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out;} .main-accordion .card .card-header a{display: block; padding:30px; -webkit-transition:ease-in-out .3s; -o-transition:ease-in-out .3s; transition:ease-in-out .3s; text-decoration:none;} .main-accordion .card .card-header a:not(.collapsed) h3:after{-webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg);} .main-accordion .card .card-body {font-weight:400; padding:0 30px 30px 30px;} .main-accordion .card .card-body h4{font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:2.2rem; color:#5b96a9;} .th .main-accordion .card .card-body h4 {font-weight: 500} .main-accordion .card .card-body ul{padding:8px 8px 8px 15px;list-style:none; } .main-accordion .card .card-body li{position:relative; padding-left:15px; list-style:none; color:#727272} .main-accordion .card .card-body li:before {content:''; background:#efe1c9; border-radius:7px; width:7px; height:7px; margin:2px; position:absolute; left:0; top:6px;} .main-accordion .card .title{width:60%;} .main-accordion .card .time-price{width:40%; margin-left:auto; display:flex; flex-direction:row;} .main-accordion .card .time-price .time, .main-accordion .card .time-price .price{margin:8px 15px;} *[dir='rtl'] .main-accordion .card .card-header{text-align: right;} *[dir='rtl'] .main-accordion .card .arrow-bullets{left: 20px; right: inherit;} *[dir='rtl'] .main-accordion .card .card-body li:before{right: 0; left:inherit} *[dir='rtl'] .main-accordion .card .card-body li{padding-right: 15px; padding-left: inherit; text-align: right;} .main-accordion.terms .card .card-body ul{margin: 0 30px;} .main-accordion.terms .card .card-body li{margin: 0 0 15px 0;} .main-accordion.faqs h3{font-size: 3.2rem; color: #4d738a; margin: 30px 0;} .main-accordion.faqs blockquote{margin:10px auto; border-left:8px solid #badcdd; line-height:1.6; padding:30px 30px 30px 75px; position: relative; background:#eff4f5; color: #484E69;} .main-accordion.faqs blockquote:before{content: "\201C"; color:#badcdd; font-size:4em; position: absolute; left: 10px; top:-10px;} .main-accordion.faqs blockquote:after{content: '';} .main-accordion.faqs .card-header h3 {color: #727272; font-size: 2.6rem;} /*Location*/ .main-map{margin: 0 15px; background: #fff} *[dir='rtl'] .main-map header{text-align: right;} .main-map h2{font-size:3.6rem; color:#fff; line-height:1.2; font-weight:normal; margin-bottom:20px} .cn .main-map h2, .zh .main-map h2 {font-weight:bold;} .main-map .main-accordion .card{border-top: 1px solid rgba(255,255,255,0.4);} .main-map .main-accordion .card:last-of-type{border-bottom: 1px solid rgba(255,255,255,0.4);} .main-map .main-accordion .card .card-body li:before {content:''; background:#efe1c9; border-radius:7px; width:7px; height:7px; margin:2px; position:absolute; left:0; top:6px; } .main-map .main-accordion .card .card-header h3{font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 3rem; color:#fff;} .main-map .main-accordion .card .card-header h3:after{border:solid #fff; border-width: 0 2px 2px 0;} .main-map .main-accordion .card .card-body li{color:#fff;} /*Fillter Map*/ .main-map input[type=checkbox]{box-sizing:border-box; position:relative; border-radius:2px; border:2px solid rgba(0,0,0,0.3); height:20px; width:20px; min-width:20px; transition:0.4s cubic-bezier(0.25, 0.8, 0.25, 1); vertical-align:middle;-webkit-appearance:none; appearance:none; margin-right:5px; cursor:pointer;} .main-map input[type=checkbox]:checked{background-color:#68c3d1; border-color:#63bac7;} .main-map input[type=checkbox]:after{box-sizing:inherit; content:''; position:absolute; transition:transform 0.25s ease; width:6px; height:13px; top:0; left:5px; z-index:6; border:2px solid #fff; border-top:0; border-left:0; opacity:0; transform:rotate(45deg) scale3D(0.1, 0.1, 0.1);} .main-map input[type=checkbox]:after{opacity:1; transform:rotate(45deg) scale3d(1, 1, 1);} .marker {margin: 10px auto; text-align:center;} .marker li {display: inline-block; position: relative;} /*.marker .icon {background:url(//storage.onyx-hospitality.com/assets/icon/marker.svg?a) no-repeat top center; display:inline-block; margin:5px; width:30px; height:30px; vertical-align:middle;} .marker .blue{background-position:0 0} .marker .gold{background-position:-30px 0}*/ .marker .icon {display:inline-block; margin:4px 5px 5px 5px; width:10px; height:10px; border-radius:50%; vertical-align:middle;} .marker .blue {background:#4e5ed5;} .marker .gold {background:#ddbe7a;} /*Google Map*/ #gmap_location {max-width:100%;height:700px;border:0; margin:15px 0 0 0} .gm-style .gm-style-iw-d{width:250px!important; overflow:visible!important} .gm-style .gm-style-iw-c{padding:0!important} .gm-ui-hover-effect{top:6px!important; right:6px!important; background-color:#fff!important; border-radius:50%; z-index:5; box-shadow: 0 0 10px rgba(0,0,0,1);} #gmap_location .gglayer{width:250px; height:auto; display:flex; flex-direction:column; justify-content:flex-start; margin:0} #gmap_location .gglayer .image{width:250px; height:140px} #gmap_location .gglayer .image img {margin:0; flex:0 1 auto; object-fit:cover; width:100%; height:100%;} #gmap_location .content{padding:15px 20px 20px 20px; line-height:1.4; overflow:overlay; font-family:'Graphik', 'Roboto', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.3rem; color:#727272} #gmap_location .content h2 {font-size:1.9rem; font-weight:500; color:#3b4067; margin-bottom:5px;} #gmap_location .content h3{font-size:1.4rem; font-weight:400; line-height:1; color:#7aa2de; margin:0; padding:0;} #gmap_location .content p{margin: 0 0 10px; padding: 0 0 5px 0; border-bottom: 1px dotted #cbd0d2;} #gmap_location .content ul{margin:5px 0 10px 0; list-style:none;} #gmap_location .content li{position:relative; line-height:1.2; padding:0 0 5px 13px} #gmap_location .content li:before {content:''; background:#efe1c9; border-radius:6px; width:6px; height:6px; margin:2px; position:absolute; left:0; top:2px;} #gmap_location .content li b{font-weight:500;} #gmap_location .content a {text-transform:uppercase; letter-spacing:.2px; font-size:1.3rem; color:#72afde; font-weight:500; padding:10px 0;} #legend {padding: 25px; text-align:center;} #legend h3 {margin-top: 0; padding: 1px; text-align: center; border: 1px solid #fff;} #legend img {vertical-align: middle;} #legend div {display: inline-block; padding: 0px 20px 5px 20px; position: relative; padding-right: 30px;} /*Gallery page*/ .main-gallery{padding:0 0 15px} /*Gallery page - VT, VDO icon*/ .ftg-items .virtual-tour {background:url('https://storage.mosaic-collection.com/icon/sprite_vv.svg') no-repeat; background-position:0 0; width:80px; height:80px; text-indent:-99999em; position:absolute; top: calc(50% - 40px); left: calc(50% - 40px); z-index:1} .ftg-items .video {background:url('https://storage.mosaic-collection.com/icon/sprite_vv.svg') no-repeat; background-position:0 -80px; width:80px; height:80px; text-indent:-99999em; position:absolute; top: calc(50% - 40px); left: calc(50% - 40px); z-index:1} .tile-inner:hover .virtual-tour, .tile-inner:hover .video{opacity:.8} /*Our Brand*/ .video-brand {margin:50px 0;} .video-brand .image {height:320px; margin:15px 0;} .video-brand .image .video {background:url('https://storage.onyx-hospitality.com/assets/icon/icon-video-wh.svg') no-repeat; background-position:0; width:110px; height:110px; text-indent:-99999em; position:absolute; top: calc(50% - 50px); left: calc(50% - 50px); z-index:6;} .video-brand .image img {max-width: 100%; position:relative;} .video-brand .btn-wrapper {margin:50px 0;} /*Upcoming Hotel*/ .hotels h2 {font-size:3.8rem; font-weight: bold; text-transform:uppercase;} .hotels header {margin: 10px auto 60px auto; display: block;} .hotels{position:relative; margin:50px 15px;} .hotels .prop-grid {margin-right: -30px; margin-left: -30px;} .hotels .hotel{margin-bottom:60px; padding:0 30px;} .hotels .hotel.cityhead{margin-bottom:15px; text-align:center;} .hotels .cityhead h2{font-size:2rem; font-weight:normal; margin:5px 0 10px 0;} .hotels .city h2{font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.8rem; color:#838a95; text-transform:none; font-weight:normal; margin:5px 0 10px 0} .hotels .card{border:0;} /*Image*/ .hotels .image{height:300px;position:relative;} .hotels .image figure{height:300px; display:block} .hotels .image figure img{object-fit:cover; width:100%; height:100%} /*tag*/ .hotels .tag-discount-horz {position:absolute; left:-4px; top:5px; font-size:1.5rem; font-weight:bold; text-align:center; text-shadow:0 0 2px rgba(0,0,0,.8); color:#fff; background-color:#bb0000; padding:5px 10px; border-radius:5px; border-top-left-radius:0; border-bottom-left-radius:0; box-shadow:0 0 3px rgba(0,0,0,.3), inset 10px 0 10px -8px rgba(0,0,0,.3); z-index:6;} /*.text-media*/ .hotels .link-media {position:absolute;bottom:0;width:100%;margin:0 auto; padding:5px 20px; font-size:1.6rem; z-index:6;background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); display:flex; justify-content:flex-end} .hotels .link-media a{color:#fff; line-height:48px;} .hotels .link-media a:hover{opacity:.7} .hotels .link-media a:after {content: ''; display: inline-block; height:10px; width:1px; background-color: rgba(255,255,255,0.3);; margin: 0 15px; padding: 0;} .hotels .link-media a:last-child:after{content:none} .th .hotels .link-media, .cn .hotels .link-media, .zh .hotels .link-media, .jp .hotels .link-media {font-size:1.7rem;} /*Content*/ .hotels .content{background:#fff; padding:30px 20px 20px 20px; width:100%;} .hotels .content .name h3, .hotels .content .name h3 a{ font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.9rem; color:#282828; font-weight:600; margin:0; line-height:1.5;} .hotels .content .name h3 a:hover{color:#7aa2de} .hotels .content .name p{font-size:1.7rem; line-height:2rem; color:inherit; margin-bottom:5px} .hotels .content .glance{padding:10px 0; font-size:1.6rem; line-height:2.2} .hotels .content .glance ul{list-style:none; margin:10px 0;} /*.hotels .content .glance ul:last-child{margin-bottom:0}*/ .hotels .content .glance li{position:relative; padding-left:20px; list-style:none; line-height:2.4rem; padding-bottom:3px;} .hotels .content .glance li b{font-weight:600;} .hotels .content .glance li:before {content:''; background:#efe1c9; border-radius:8px; width:8px; height:8px; margin:2px; position:absolute; left:0; top:5px;} .hotels .content .text{margin-top:10px} .hotels .content .highlight{font-weight: bold; font-size: 1.9rem; color: #6ba4bc;} .hotels .content .cond{font-size:1.4rem; line-height:1.2; color:#959b9d; margin:10px 0 5px 0} /*Price*/ .hotels .content .rate-wrap{border-top:1px dotted #e8e9ea; padding-top:10px;} .hotels .content .rate-wrap .from{display:inline-block} .hotels .content .rate-wrap .fullprice{font-size:1.5rem; color:inherit; display:inline-block} .hotels .content .rate-wrap .sellingprice {font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:3rem; color:#7595bc; display:block;} .hotels .content .rate-wrap .sellingprice .currency{font-family: 'Roboto', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:2rem} .hotels .content .rate-wrap .night{font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.6rem; color:inherit;} .hotels .content .btn-wrapper{margin-top:10px; width:100%} .hotels .content .btn-wrapper .btn-book.-full{padding:2.5rem;} .promotion-content .promotion-icon{margin:30px 0} .promotion-content .promotion-icon h4 {font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.8rem; color:#3b4067; margin-top:15px; margin-bottom:5px} .promotion-content .promotion-icon .wrapper{display:flex; line-height:1.2; margin:10px 0;} .promotion-content .promotion-icon .icon{width:60px; height:60px; background:url('https://storage.mosaic-collection.com/icon/sprite_highlight-sale.svg') no-repeat; display:block;} .promotion-content .promotion-icon .icon.onyx-rewards{background-position:0 0} .promotion-content .promotion-icon .icon.book-by{background-position:0 -60px} .promotion-content .promotion-icon .icon.travel-by{background-position:0 -120px} .promotion-content .promotion-icon .icon.promo-code{background-position:0 -180px} .promotion-content .promotion-icon .icon.offer{background-position:0 -180px} .promotion-content .promotion-description{line-height:1.4} .promotion-content .promotion-icon .text {width: 85%; font-size:1.6rem;} /* ---- grid ---- */ .main-filter-content .grid:after {content:''; display:block; clear:both;} /*Select*/ select::-ms-expand {display:none;}/* for IE 11 */ select{background:#FFF; font-weight:normal; padding:8px; color:#5c6265; border:1px solid #dfe2e3; outline:none; display:inline-block; text-indent:0.01px; text-overflow:''; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; cursor:pointer} /*Cards - List all rooms, meeting rooms*/ .cards_borderwh .cards {display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; background:#fff; margin:0 auto 15px; width:100%;} .cards_borderwh .cards:last-child{margin:0 auto} .cards_borderwh .cards .image, .cards_borderwh .cards .content{position:relative; -ms-flex:0 0 100%; flex:0 0 100%; max-width:100%;} .cards_borderwh .cards .image{height:30vh} .cards_borderwh .cards .image {overflow:hidden; -ms-flex-order: 1; order: 1;position:relative;} .cards_borderwh .cards .image .rate-wrap {position: absolute; top: 20px; right:0; z-index:1} .cards_borderwh .cards .image .rate-wrap .rate {background:rgba(245,159,155.9); color: #fff; padding:8px 10px;} .cards_borderwh .cards .image .rate-wrap .from {display: block; font-size: 1.2rem;} .cards_borderwh .cards .image .rate-wrap .price {font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 3rem; font-weight: 700;} .cards_borderwh .cards .image .rate-wrap .price .currency {font-family:'Roboto', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 1.5rem; font-weight: 400;} .cards_borderwh .cards .image .rate-wrap .price .night {font-family:'Roboto', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size: 1.5rem; font-weight: 400;} .cards_borderwh .cards .content {-ms-flex-order: 2; order: 2; z-index:2;} .cards_borderwh .cards .content .inner{padding: 30px} .cards_borderwh .cards .content .title { font-size:1.5rem; color:#7aa2de;} .cards_borderwh .cards .content .title span{margin:0 15px; color:#c1c1c1;} .cards_borderwh .cards .content .name {border-bottom:1px solid #e5e5e5; padding-bottom:10px;} .cards_borderwh .cards .content .name h3{font-size:4rem; color:#555; line-height:1; margin:0} .cards_borderwh .cards .content .name h3 a{color:#555;} .cards_borderwh .cards .content .name h3 a:hover{color:#5b96a9} .cards_borderwh .cards .content .description{padding:30px 0} .cards_borderwh .cards .content .description li{list-style:none; padding:3px 0} .cards_borderwh .cards .content .description .glance {margin: 15px 0; font-size:1.7rem;} .cards_borderwh .cards .content .description .glance li {padding:0 0 0 15px;} .cards_borderwh .cards .content .description .hl span{margin:0 15px; color:#e5e9eb;} .cards_borderwh .cards .content .description .meeting{list-style:none;} .cards_borderwh .cards .content .description .meeting li{display:inline-block; font-size:12px; text-align:center; line-height:1; font-weight:600; padding-right:20px;} .cards_borderwh .cards .content .description .meeting li:last-child{padding-right:0} .cards_borderwh .cards .content .description .meeting li span{font-size:16px; display:block} .cards_borderwh .cards .content .glance li {position: relative; font-size:1.7rem; padding-left: 15px; list-style: none;} .cards_borderwh .cards .content .glance li:before {content: ''; background: #efe1c9; border-radius: 7px; width: 7px; height: 7px; margin: 2px; position: absolute; left: 0; top: 7px;} .cards_borderwh .cards .content .rate {padding:20px 0;} .cards_borderwh .cards .content .rate .annual, .cards_borderwh .cards .content .rate .monthly {display:block;} .cards_borderwh .cards .content .rate .price {font-weight:700;} /*Cards*/ .cards_border0 .cards {background:#fff; margin:0 auto 15px; padding:0; width:100%;} .cards_border0 .cards .image, .cards_border0 .cards .content {-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative; width: 100%; padding:0; display: flex; flex-direction: column; justify-content: center; align-items: center;} .cards_border0 .cards .image{-ms-flex-order: 1; order: 1; height:40vh;} .cards_border0 .cards .content{-ms-flex-order: 2; order: 2; z-index:2;} .cards_border0 .cards .content .inner{padding: 30px} .cards_border0 .cards .content .inner a {line-height:48px;} .cards_border0 .cards .content .inner ul {margin-bottom: 20px} .cards_border0 .cards .content h3, .cards_border0 .cards .content h3 a{font-size:3rem; color:#222; line-height:1.3; margin:0 0 20px 0} .content_highlight .cards_border0 .cards .content h2, .content_highlight .cards_border0 .cards .content h2 a {font-size:3rem; color:#7aa2de;} .cards_border0 .cards .content h3 a:hover, .content_highlight .cards_border0 .cards .content h2 a:hover{color:#5b96a9;} .cards_border0 .cards .content h4, .cards_border0 .cards .content h4 a{font-size:2rem} .cards_border0 .cards .content p{line-height:1.4} .cards_border0 .cards .content .date{font-size:1.7rem} .cards_border0 .cards .content .condition{font-size:1.5rem; color:#959a9d; font-style:italic;} /*Cards - List all offer*/ .cards_border0 .cards .content li{position:relative; padding-left:15px; padding-bottom: 3px; list-style:none;} .cards_border0 .cards .content li:before {content:''; background:#efe1c9; border-radius:7px; width:7px; height:7px; margin:2px; position:absolute; left:0; top:6px;} .cards_border0 .cards .content .rate-wrap{margin-top:30px;} *[dir="rtl"] .cards_border0 .cards .content li{padding-left:inherit; padding-right: 15px} *[dir="rtl"] .cards_border0 .cards .content li:before {right:0; left:inherit} .main-accordion .card .card-body .slash{margin:0 5px; color:#dbdee0} .main-accordion .card .card-body .slash:after{content:'/'; color:rgba(255,255,255,0.3); display:inline;} *[dir="rtl"] .cards_border0 .cards .content{text-align:right} *[dir="rtl"] .cards_border0 .cards .content .note li{padding:0 15px 10px 0;} *[dir="rtl"] .cards_border0 .cards .content .note li:before{left:inherit; right:0} /*Corporate Social Responsibility*/ /*.content-padd .icon-text{padding:30px 40px;}*/ /*.column-count-2 ul{list-style:none; margin:10px 0; padding-left:20px} .column-count-2 li{position:relative; padding-left:20px; list-style:none; line-height:2.4rem; padding-bottom:3px;} .column-count-2 li b{font-weight:600;} .column-count-2 li:before {content:''; background:#efe1c9; border-radius:8px; width:8px; height:8px; margin:2px; position:absolute; left:0; top:5px;}*/ .btn-blue-round-popup{color:#FFF; background-color:#384695; -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; border-radius:50px; padding:1.6rem 3.5rem; position:relative} .btn-blue-round-popup:before{content:''; background:url('/icon/paper-glass.png') no-repeat; display:inline-block; width:35px; height:24px; vertical-align: middle; margin-right:13px; border-right:1px solid rgba(0,0,0,0.2); line-height:10px;} .btn-blue-round-popup:hover{color:#FFF; background-color:#44697d;} .sitemap h3{font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:2.4rem; color:#3b4067;} .sitemap a{color:inherit} .sitemap a:hover{color:#5b96a9} .sitemap .row{margin:30px -15px} .bg-brand {width:100%; background: url('https://storage.ozohotels.com/images/bg_our-brand.jpg') center center no-repeat; color: #fff; padding:0;} /*company profile*/ .table-ourbrand {width:100%; background-color:rgba(0,0,0,0.4);} .table-ourbrand td {border-collapse:collapse; font-size:1.5rem; line-height:1; vertical-align: middle; text-align: center;} .table-ourbrand tr:nth-of-type(1) td{height: auto; padding: 10px 0 0 0;} .table-ourbrand .rotate {-webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform:rotate(270deg); transform: rotate(270deg); writing-mode:lr-tb; text-align:center; width:40px; line-height:1;} .segmentation {width:75px; height:50px; float:none; border-radius:0; background: rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.6); margin: 0 0 10px 0;} .lg-profile {display:block; float: left; text-indent:-666em; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; transition: all ease 0.3s;} .lg-profile{width:75px; height:50px; background:url('/logo/all-our-brands_80.svg') no-repeat;} .lg-orb{background-position:0 0;} .lg-orb:hover{background-position:0 -50px;background-color:rgba(65,54,46,0.8); cursor:pointer;} .lg-amr{background-position:-80px 0;} .lg-amr:hover{background-position:-80px -50px;background-color:rgba(234,122,22,0.8); cursor:pointer;} .lg-ozo{background-position:-160px 0;} .lg-ozo:hover{background-position:-160px -50px;background-color:rgba(160,191,211,0.8); cursor:pointer;} .lg-tmc{background-position:-240px 0;} .lg-tmc:hover{background-position:-240px -50px;background-color:rgba(255,255,255,0.8); cursor:pointer;} .lg-yoo{background-position:-320px 0;} .lg-yoo:hover{background-position:-320px -50px;background-color:rgba(0,0,0,0.8); cursor:pointer;} .lg-yoo2{background-position:-400px 0;} .lg-yoo2:hover{background-position:-400px -50px;background-color:rgba(61,61,60,0.8); cursor:pointer;} .lg-slu{background-position:-480px 0;} .lg-slu:hover{background-position:-480px -50px; background-color:rgba(13,94,166,0.8);cursor:pointer;} .lg-sha{background-position:-560px 0;} .lg-sha:hover{background-position:-560px -50px;background-color:rgba(0,43,84,0.8); cursor:pointer;} .lg-shu{background-position:-640px 0;} .lg-shu:hover{background-position:-640px -50px; background-color:rgba(0,92,185,0.8); cursor:pointer;} .lg-maai{background-position:-720px 0;} .lg-maai:hover{background-position:-720px -50px;background-color:rgba(187,173,143,0.8); cursor:pointer;} .lg-breeze{background-position:-800px 0;} .lg-breeze:hover{background-position:-800px -50px;background-color:rgba(220,248,252,0.9); cursor:pointer;} /*Privacy*/ .privacy{list-style:none; margin:0 auto; text-align: center; width: 100%;} .privacy li{display:inline-block; margin:8px 0 0 5px; vertical-align: top; width:calc(100% - 8px); height:220px; background-color: #FFF; box-shadow: 0 0 20px rgba(0,0,0,.1); position:relative} .privacy li a{display:block; height:100%;} .privacy li a h3{font-size:2rem; color:#555} .privacy li a:hover h3{color:#7aa2de;} .privacy li .icon-text{ width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:block} /*Facybox Content - Privacy policy pop up*/ .fancybox-width{display:none; width:100%; max-width:90%; margin: 20px; padding:20px} .fancybox-width h3{color:#3b4067;} hr.height4px{clear:both; width:100%; height:4px; background:#f6f6f7; border-top:none; margin:30px 0} .fancybox-content a{text-decoration: underline} /*Pop Up*/ .fancybox-slide--html .fancybox-close-small{right:30px; top:30px; border-radius: 50px; border:2px solid #c2c2c2} .fancybox-button {height: 48px; width:48px;} .fancybox-slide--html .fancybox-close-small {padding:3px; opacity:.4;} .fancybox-slide--html .fancybox-close-small:hover {opacity:1;} .fancybox-bg {background: rgba(0, 0, 0, 0.8) !important;} .fancybox-width-banner {width: 100%; background-size: cover; background-position:100%; background-repeat: no-repeat; position: relative; padding:20px;} .fancybox-width-banner .inner {width:100%; color: #727272; font-size:1.6rem; line-height: 1.2; padding:20px; background: rgba(255,255,255,0.9); border-radius: 6px;} .fancybox-width-banner .inner h3{font-size:3rem; line-height: 1; margin: 0 0 10px 0; color:#3b4067} .fancybox-width-banner .inner ul{margin:0 0 15px 0; padding-left: 10px;} .fancybox-width-banner .inner li{position: relative; padding-left: 15px; list-style: none;} .fancybox-width-banner .inner li:before {content: ''; background: #eaa59c; border-radius: 7px; width: 7px; height: 7px; margin: 2px; position: absolute; left: 0; top: 5px;} .fancybox-width-banner .inner .logo {display: none;} .fancybox-width-banner .inner .btn-wrapper {margin:0 auto} .fancybox-width-banner .inner .btn-wrapper .btn {margin: 20px 0;} .fancybox-width-banner .inner .btn-wrapper .btn-view {background: #5b97aa; color: #fff; padding: 20px 30px; text-decoration:none;} .fancybox-width-banner .inner .btn-wrapper .btn-view:hover {color: rgba(255, 255, 255, 0.8);} .fancybox-width-banner .fancybox-button svg path {fill: #fff !important;} /* ----isotope layout-modes ---- */ .grid {display:-ms-flexbox; display:flex;} .grid:after {content:''; display:block; clear:both;} .grid-item a{display:block;} .grid-item img {display:block; max-width:100%;} .cards_borderwh .btn-book, .cards_borderwh .btn-link {padding:20px 40px} .cards_border0 .btn-book {padding:8px 40px} @-webkit-keyframes rotating-view { from {-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)} to {-ms-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)} } @keyframes rotating-view { from {-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)} to {-ms-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)} } /*Enquiry form*/ .claim-form .bg, .contact-us .bg, .meeting-enquiry .bg, .reservation-form .bg, .wedding-enquiry .bg{background: #f2f1ef;} /*Enquiry*/ .form-enquiry{width:90%; padding:30px; margin:15px auto; background: #FFF; -webkit-border-radius:10px; -moz-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);} .form-enquiry .inner-wrap{ padding:20px; background:#eceff1; border-radius: 6px; margin-bottom: 15px;overflow: hidden;} .form-enquiry h2{ background: #f6800c; padding: 20px 30px 15px 30px; margin: -30px -30px 30px -30px; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12); font-size:40px; line-height:40px; -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17); -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.1); box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.1); border: 1px solid #06579b;} .form-enquiry h2 > span{ display: block; margin-top: 2px; font-size:14px; line-height:1em;} .form-enquiry label{ display: block; font-size:1em; font-weight:normal; margin-bottom: 15px; position:relative} .form-enquiry label .pulldown{top:35px; right:10px; z-index:5} .form-enquiry label span{color:#da523a;} .form-enquiry input[type="text"], .form-enquiry input[type="date"], .form-enquiry input[type="datetime"], .form-enquiry input[type="email"], .form-enquiry input[type="number"], .form-enquiry input[type="search"], .form-enquiry input[type="time"], .form-enquiry input[type="url"], .form-enquiry input[type="password"], .form-enquiry textarea, .form-enquiry select { display: block; color:#888; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: 0 0 5px 0; padding: 8px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius: 6px; border: 2px solid #fff;} .form-enquiry .section{color: #aab0d6; margin-bottom: 10px; font-weight:500;} .form-enquiry .section span { background: #aab0d6; padding:9px 18px; position: absolute; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 4px solid #fff; font-size: 16px; margin-left: -55px; color: #fff; margin-top: -12px;} .form-enquiry .section span.title{background:#ffffff;color:#06579b;margin:0;padding:0;position:inherit;border:0; -webkit-border-radius:0;-moz-border-radius:0;border-radius:0;} .form-enquiry input.send{color:#FFF; background: #606cab url('https://storage.onyx-hospitality.com/assets/icon/send-wh.png') no-repeat 15px 9px; border:1px solid #606cab; padding: 9px 18px 9px 37px; -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;} .form-enquiry input.send:hover{color:#606cab; background-color:#eeeef8; border:1px solid #eeeef8;} .form-enquiry input.cancel, .form-enquiry input.cancel{color:#333; background-color:#fff; border:1px solid #ccc; padding:9px 18px; -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;} .form-enquiry input.cancel:hover, .form-enquiry input.cancel:hover{color:#333; background-color:#eceff1; border:1px solid #ccc} .form-enquiry .form-horizontal{clear:both;} .form-enquiry input[type="file"] {display: block; font-size:1.6rem; margin: 0 0 5px 0; padding: 0 8px; color:#777;} .form-enquiry span.note {color:#999; font-size:1.5rem;} .fancybox-enquiry.fancybox-width {padding: 40px;} .fancybox-enquiry .form-enquiry {width:100%;} .fancybox-enquiry .form-enquiry {padding:0; margin:15px auto; background: #FFF; -webkit-border-radius:0; -moz-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;} /*Property index - Highlight*/ .hotel-highlight{padding:30px 0;} .hotel-highlight .text-text{display: block; width:100%; text-align:center;} .hotel-highlight h4{margin:0; font-size:2.6rem; line-height:2; color:#fff; font-weight: 500;} .hotel-highlight h4:after {content: ''; display: block; background:rgba(255,255,255,.4); width: 25px; height: 2px; margin: 5px auto 20px auto;} .th .hotel-highlight h4 {font-weight:400;} .hotel-highlight p{margin:0 0 15px 0; font-size:1.9rem; line-height:1.4; color:#fff;} .hotel-highlight .text-text a.link {line-height:48px; color:#fff;} .hotel-highlight .text-text .link{font-size:1.6rem; text-decoration:underline} .hotel-highlight .text-text .link:hover{text-decoration:none; color:#ffcca9;} .hotel-highlight .icon-text{padding: 30px; text-align: center} /*Footer Hotel - Useful Information -> Contact Us*/ .contact-info {margin:6px} /*1. Map*/ .gmap_location{width:100%; height:550px;} /*2. Contact Us*/ .hotel-contact {margin: 50px 0 0 0;} .hotel-contact h6{margin:0 0 5px 0; font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC', 'Microsoft Sans Serif'; font-size:2rem; line-height:1.2; color:#838383;} .th .hotel-contact h6{font-family: 'Noto Sans Thai', 'Microsoft Sans Serif'; font-size: 1.8rem; font-weight: normal;} .hotel-contact .icon-contact {float:left; background:#fff url('https://storage.mosaic-collection.com/icon/sprite_contact.svg') no-repeat; display: block; border-radius: 50px; border:2px solid #f3f3f3; width: 52px; height: 52px; margin: 15px 0 0 0;} .icon-contact.location{background-position:0 0;} .icon-contact.reservation{background-position:0 -55px;} .icon-contact.tel{background-position:0 -110px;} .icon-contact.fax{background-position:0 -165px;} .icon-contact.enquiry{background-position:0 -220px;} .icon-contact.chk-in{background-position:0 -275px;} .icon-contact.chk-out{background-position:0 -330px;} .icon-contact.cc{background-position:0 -385px;} .icon-contact.non-smoking{background-position:0 -440px;} .icon-contact.award{background-position:0 -495px; margin-top: 30px} .icon-contact.drone{background-position:0 -550px;} .icon-contact.child-policy{background-position:0 -605px;} .hotel-contact .text-text{float:left; margin:15px; width:calc(100% - 85px); font-size:1.8rem; line-height:1.5; color:#9e9e9e;} .hotel-contact .text-text p b{font-weight:normal;} .hotel-contact .text-text a{text-decoration:underline; color:#5b97aa; line-height:48px;} .hotel-contact .text-text a:hover{text-decoration:none} .career .icon-job {float:left; background:url('https://storage.onyx-hospitality.com/assets/icon/icon-job.svg') no-repeat; background-color:#f4f5f8; display: block; border-radius: 50%; width: 55px; height: 55px; margin: 15px 0 0 0;} .icon-job.location{background-position:0 0;} .icon-job.positions{background-position:-55px 0;} .icon-job.education{background-position:-110px 0;} .icon-job.experience{background-position:-165px 0;} .career .text-text {float:left; margin:15px; width:calc(100% - 85px);} .career .text-text h4 {font-size:1.8rem; font-weight:600; color:#5e5e5e;} .career .text-text p b{font-weight:normal;} .cards_border0 .cards .content .bullet_ltgd span.icon-creditcard{margin:6px 0 0 0} /*icon privacy*/ .icon-privacy {background-image:url('https://storage.onyx-hospitality.com/assets/icon/sprite_privacy.svg'); background-repeat:no-repeat; width:120px; height:80px; display:block; margin:20px auto; cursor:pointer} .icon-privacy.no1{background-position:0 0;} .icon-privacy.no2{background-position:-120px 0;} .icon-privacy.no3{background-position:-240px 0;} .icon-privacy.no4{background-position:-360px 0;} .icon-privacy.no5{background-position:-480px 0;} .icon-privacy.no6{background-position:-600px 0;} a:hover .icon-privacy.no1{background-position:0 -80px;} a:hover .icon-privacy.no2{background-position:-120px -80px;} a:hover .icon-privacy.no3{background-position:-240px -80px;} a:hover .icon-privacy.no4{background-position:-360px -80px;} a:hover .icon-privacy.no5{background-position:-480px -80px;} a:hover .icon-privacy.no6{background-position:-600px -80px;} /*Filter on Accommodation , Room Fuction*/ /*filter categories*/ .filter-category {margin:20px 0 40px 0; text-align:center} .filter-category .filters-button-group{margin:0} .filter-category li {display:inline-block; border-bottom:0; text-align:center; margin:0 -2px; cursor:pointer; border-top:1px solid #e0e6e4;border-left:1px solid #e0e6e4;} .filter-category li:last-child {border-right:1px solid #e0e6e4;} .filter-category .button {position:relative; font-size:2rem; font-weight:500; color:#6d6d6d; text-decoration:none; padding:3rem 4rem;} .cn .filter-category .button , .zh .filter-category .button{font-size:1.8rem; font-weight:600;} .filter-category .button.is-checked, .filter-category .button:hover{color:#fff; background:#7aa2de;} /*.filter-category .button:before{content:''; position:absolute; display:block; width:0; height:6px; right:0; bottom:0; background:#f59f9b; margin-top:20px; transition:width .2s ease; -webkit-transition:width .2s ease;} .filter-category .button:hover:before, .filter-category .button.is-checked:before{width:100%; left:0; background:#f59f9b;} */ /*filter select - mobile*/ .filter-category .show-mobile .filter-category-header{margin:12px 10px 12px 0;} .filter-category .show-mobile select {-webkit-appearance: menulist!important; -moz-appearance: menulist!important; appearance: menulist!important; float:right; width:70%; height:45px; border-color:#c1b8b8; margin:0 !important;padding-left:1.125rem;padding-right:1.125rem;} /*Capsule Button - Filter on Gallery */ .final-tiles-gallery li {display:inline-block; border-bottom:0; text-align:center; margin:0 auto;} .final-tiles-gallery .ftg-filters{margin:20px 0 40px 0; text-align:center} .final-tiles-gallery .ftg-filters .capsule-button {border-radius:50px; margin:0 3px; padding:15px 25px;background-color:transparent; color:#6d6d6d; text-decoration:none; cursor:pointer; border:1px solid #dcdcdc;} .final-tiles-gallery .ftg-filters .capsule-button:hover, .final-tiles-gallery .ftg-filters .capsule-button.selected{background-color:#7aa2de; color:#fff; border:1px solid #7aa2de;} /*filter select - mobile*/ .final-tiles-gallery .show-mobile{width:100%; height:45px;} .final-tiles-gallery .show-mobile .filter-category-header{margin:12px 10px 12px 0; float:left} .final-tiles-gallery .show-mobile .select{float:right; width:70%; position:relative} .final-tiles-gallery .show-mobile .select .pulldown{right:6px; top:13px;} .final-tiles-gallery .show-mobile .select select {width:100%; height:45px; border-color:#dfe2e3; margin:0 !important;padding-left:1.125rem;padding-right:1.125rem;} /*filter*/ .main-filter .filter-select{display:inline-block} /* ---- isotope ---- */ .promotion-filter .prop-grid:after {content:'';display:block;clear:both;} /* ---- button-group ---- */ .filter-category-header{font-weight:400;} .promotion-filter .filters-button-group {display:flex; flex-direction:row; -webkit-box-align:center; align-items:center; -webkit-box-pack:justify; justify-content:space-between; margin:0 0 30px 0} .promotion-filter .filters-button-group .button {width:100%; height:80px; text-align:center; display:flex; flex-direction:row; -webkit-box-align:center; align-items:center; -webkit-box-pack:center; justify-content:center; cursor:pointer; flex:2 1 0%; background:#fff; border-bottom:3px solid #3852a6; border-right:1px solid #f3f6f7; padding:20px 0; line-height:1.3;} .promotion-filter .filters-button-group:after {content:''; display:block; clear:both;} /*icon*/ .promotion-filter .filters-button-group .button:before{content:''; vertical-align:middle; display:block; margin:0 5px} .promotion-filter .filters-button-group .button:percent{background:url('//storage.amari.com/icon/percent.svg') no-repeat; width:32px; height:32px; } .promotion-filter .filters-button-group .button.banknote:before{background:url('//storage.amari.com/icon/banknote.svg') no-repeat; width:40px; height:40px; } .cn .promotion-filter .filters-button-group .button:before, .zh .promotion-filter .filters-button-group .button:before{content:none} .promotion-filter .filters-button-group .button:hover {background-color:#dce3e6; color:#263e55; text-shadow:0 1px hsla(0, 0%, 100%, 0.5);} .promotion-filter .filters-button-group .button:active, .promotion-filter .filters-button-group .button.is-checked {background-color:#3852a6; color:white;} .promotion-filter .filters-button-group .button.is-checked {color:white; text-shadow:0 1px hsla(0, 0%, 0%, 0.6);} .promotion-filter .filters-button-group .button:active {box-shadow:inset 0 1px 20px hsla(0, 0%, 0%, 0.1);color:white;} /*Promotion*/ .promotion-filter{padding:15px 0; background:#f4f1ef;} .hotels-filter{padding:30px 0 0 0} /*multi select*/ .multiselect{width:calc(100vw - 35px); text-align:left; margin:2px; padding:15px; background:#fff; border:1px solid #d6dbde; border-radius:2px; font-size:1.6rem} .multiselect.dropdown-toggle::after{position:absolute; top:20px; right:20px; z-index:1} .multiselect-container{width:calc(100vw - 33px); transform:translate3d(0, 50px, 0)!important; font-size:1.6rem;} .multiselect-container>li{padding:0} .multiselect-container>li>a{color:inherit; display:block; padding:5px 0} .multiselect-container>li>a:hover{background:#f9f9f9} .multiselect-container>li.multiselect-group label{padding:3px 20px} .multiselect-container>li>a>label{padding:3px 30px} .multiselect-container>li>a>label.checkbox{margin-left:10px} .multiselect-native-select .caret-container .caret{float:right; margin:-20px 20px 0 0; display:inline-block;border:solid #7d8d92; border-width:0 2px 2px 0; padding:2px; -webkit-transform:rotate(45deg); transform:rotate(45deg);} .multiselect-container .multiselect-item.multiselect-group{color:#6d6d6d; background:#f5f5f5;} .multiselect-container.dropdown-menu>.active>a{background:#fff; color:inherit;} .multiselect-container>li>a>label>input[type=checkbox]{box-sizing:border-box; position:relative; border-radius:2px; border:2px solid rgba(0,0,0,0.3); height:20px; width:20px; min-width:20px; transition:0.4s cubic-bezier(0.25, 0.8, 0.25, 1); vertical-align:middle;-webkit-appearance:none; appearance:none; margin-right:5px; cursor:pointer;} .multiselect-container>li.active>a>label>input[type=checkbox], .multiselect-container>li.active>a>label.checkbox input[type=checkbox]:checked{background-color:#72bcad; border-color:#6bb1a3;} .multiselect-container>li>a>label>input[type=checkbox]:after{box-sizing:inherit; content:''; position:absolute; transition:transform 0.25s ease; width:6px; height:13px; top:0; left:5px; z-index:6; border:2px solid #fff; border-top:0; border-left:0; opacity:0; transform:rotate(45deg) scale3D(0.1, 0.1, 0.1);} .multiselect-container>li.active>a>label>input[type=checkbox]:after{opacity:1; transform:rotate(45deg) scale3d(1, 1, 1);} span.multiselect-native-select{position:relative} span.multiselect-native-select select{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px -1px -1px -3px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;left:50%;top:30px} .multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0} .multiselect-container .input-group{margin:5px} .multiselect-container .multiselect-reset .input-group{width:93%} .multiselect-container>li>a.multiselect-all label{font-weight:700} .multiselect-container>li.multiselect-group label{margin:0;padding:3px 20px;height:100%;font-weight:700} .multiselect-container>li.multiselect-group-clickable label{cursor:pointer} .multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 20px; display:block} .multiselect-container>li>a>label.checkbox,.multiselect-container>li>a>label.radio{margin:0} .multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px} .btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px} .form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px} .form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0} /*ONR Member rates*/ /*Form login*/ .form-login {margin:10px auto 40px auto; max-width:50rem; width:90%; padding:30px; background:#fff; border:1px solid #edf2f2; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,.08); } .form-login h2 {font-size:2.6rem; line-height:1; color:#555; margin:20px 0;} .form-login .form-control {background:#fafafa; border-radius:0; border:1px solid #ededed; height:calc(2.6em + 4px); font-size:1em; padding:8px 8px 8px 50px; color:#495057; text-align:left;} .form-login input.sign-in {display:inline-block; position:relative; background-color:#606cab; border:1px solid #606cab; width:100%; height:55px; margin:0; line-height:20px; color:#fff; text-align:center; -webkit-transition:all ease .8s; -moz-transition:all ease .8s; transition:all ease .8s; cursor:pointer;} .form-login input.sign-in:hover{text-decoration:none; color:#fff; box-shadow:inset 440px 0 0 0 #3b4067; border:1px solid #3b4067;} .form-login .member{display:inline-block; vertical-align:middle; position:relative; width:100%; padding:0} .form-login .member:before {content:''; background-image:url('https://storage.onyx-hospitality.com/assets/icon/sprite_login.svg'); background-repeat:no-repeat; top:9px; left:10px; width:30px; height:30px; position:absolute; pointer-events:none; display:block; z-index:2;} .form-login .member.username:before{background-position:0 0} .form-login .member.password:before{background-position:-30px 0} .form-login .link{font-size:1.4rem;} .form-login .link a{text-decoration:underline; line-height:48px;} .cn .form-login .link, .zh .form-login .link{font-size:1.5rem;} /*ONYX Rewards - Sign-in*/ .main-onyxrewards-login .logo{text-align:center; margin:0 auto} .main-onyxrewards-login h3{font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:3rem; color:#fff; margin-bottom:20px; } .th .main-onyxrewards-login h3, .cn .main-onyxrewards-login h3, .zh .main-onyxrewards-login h3 {letter-spacing: normal;} .main-onyxrewards-login h4{margin: 0; font-size: 2.6rem; line-height: 2; color: #fff; font-weight: 500; text-align:center} .main-onyxrewards-login h4:after {content: ''; display: block; background: rgba(255,255,255,.4); width: 25px; height: 2px; margin: 5px auto 20px auto;} .main-onyxrewards-login .col-12.col-md-3{text-align:center; margin-bottom:20px; color:#fff;} .main-onyxrewards-login .icon-benefit{background:url('https://storage.onyx-hospitality.com/assets/icon/sprite_onyx-rewards_member-benefit.svg'); width:60px; height:60px; display:block; margin:20px auto;} .main-onyxrewards-login .no1{background-position:0 0} .main-onyxrewards-login .no2{background-position:-60px 0} .main-onyxrewards-login .no3{background-position:-120px 0} .main-onyxrewards-login .no4{background-position:-180px 0} .main-onyxrewards-login .remark{margin: 0 auto 30px auto; max-width: 50rem; width: 90%; font-size: 1.2rem; line-height: 1.2; color: #747f95;} /*ONYX Rewards - Offers*/ .main-onyxrewards-access .form-login .logo{text-align:center} .main-onyxrewards-access h2{font-size:3.6rem} .main-onyxrewards-access h4{color:#222; font-weight:700;text-align:center} .main-onyxrewards-access .col-12.col-md-3{text-align:center} .main-onyxrewards-access .icon-member-access {background:url('https://storage.onyx-hospitality.com/assets/icon/sprite_onyx-rewards_member-access.svg'); width:100px; height:100px; display:block; margin:20px auto;} .main-onyxrewards-access .no1{background-position:0 0} .main-onyxrewards-access .no2{background-position:-100px 0} .main-onyxrewards-access .no3{background-position:-200px 0} .main-onyxrewards-access .member-access {position: relative; height: 60px;} .main-onyxrewards-access .member-access span {background:#0ebd8d; padding: 9px 16px; position: absolute; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 4px solid #fff; font-size: 16px; color: #fff; margin-top: -10px;} /*Background Color*/ .bg{padding:40px 0; position:relative;} .aboutonyx .bg, .ourbrands .bg, .career .bg{background:#f3f6f9;} .aboutonyx .bg {padding:0;} .bg.-wh{background-color:#fff;} .onyx-rewards-login .bg{background: #bfa8b6 /*#c3c7e0*/;} /*ONYX Rewards - Member rates*/ .banner-member-rates{background:#44435f; margin:10px; padding:50px 15px; color:#fff; text-align:center} /*.banner-member-rates{background:#a6c7de url(https://storage.shama.com/onyx-rewards/banner-member-rates.jpg) no-repeat; background-position:22% 0; background-size: cover; margin:10px; padding:50px 15px; color:#fff; text-align:center}*/ .banner-member-rates .onr-logo{ background-image:url('https://storage.onyx-hospitality.com/sites/logo/onyx-rewards_wh-glay.svg'); width:185px; height:85px; display:inline-block; margin-right:10px; vertical-align:middle; text-indent:-9999em} .banner-member-rates h2{font-family: 'Foglihten', 'Graphik', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:4rem; color:#fff; margin:0; display:inline-block;} .th .banner-member-rates h2, .cn .banner-member-rates h2, .zh .banner-member-rates h2 {font-weight: 400;} .banner-member-rates p{font-family: 'Foglihten', 'Graphik', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.8rem; margin:15px 0;} .banner-member-rates .link-wrapper{padding:20px 0;} .cn .banner-member-rates .link-wrapper, .zh .banner-member-rates .link-wrapper{font-family: 'Noto Serif SC', 'Noto Serif TC'} .banner-member-rates .btn-joinnow, .banner-member-rates .btn-signin{display: inline-block; margin:5px; padding:12px 30px; border-radius:2px; -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; font-size:1.8rem;} .banner-member-rates .btn-joinnow{background-color:#fff; color:#855d99;} .banner-member-rates .btn-joinnow:hover{background:#000; color:#fff; cursor:pointer; text-decoration:none;} .banner-member-rates .btn-signin{background:#855d99; color:#fff;} .banner-member-rates .btn-signin:hover{background-color:#000; color:#fff; cursor:pointer;text-decoration:none;} /*Footer*/ footer{position:relative;} .footer-bg{background:#f6f6f7} .footer-info{padding:20px 0; background:#f9f9fa} .footer-info .col-12{padding:20px} .footer-info h5{font-family:'Noto Sans', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; font-size:1.8rem; font-weight:500; color:#545860; text-transform:uppercase; letter-spacing:.4px;} .footer-info .info .footer-wrapper a{display:block; line-height: 2;} .footer-wrapper{font-size:1.6rem; color:#6d6d6d; margin:10px 0;} .footer-wrapper a{color:#6d6d6d; text-decoration:none; line-height: 48px;} .footer-wrapper a:hover{color:#606cab; text-decoration:underline; display:inline-block} /*Download App - Banner, Footer*/ .footer-info .dl-app{display: flex; padding: 0 15px;} .footer-info .icon-social{ background-image:url('https://storage.onyx-hospitality.com/assets/logo/social.svg'); background-repeat:no-repeat; width:34px; height:34px; display:inline-block; text-indent:-999999em; margin:12px; vertical-align:middle} .fb{background-position:0 0} .fb:hover{background-position:0 -34px} .ig{background-position:-34px 0} .ig:hover{background-position:-34px -34px} .line{background-position:-68px 0} .line:hover{background-position:-68px -34px} .tw{background-position:-102px 0} .tw:hover{background-position:-102px -34px} .wechat{background-position:-136px 0} .wechat:hover{background-position:-136px -34px} .weibo{background-position:-170px 0} .weibo:hover{background-position:-170px -34px;} .linkedin{background-position:-204px 0} .linkedin:hover{background-position:-204px -34px;} .footer-subscribe{position:relative;} .footer-subscribe input {width:100%; position:relative; border:1px solid #eaeef0; border-radius:50px; color:#7b7c96; padding:15px 30px;} .footer-subscribe .button {position:absolute; top:0; right:0; border-radius:50px; font-family:'Montserrat', 'Noto Sans Thai', 'Noto Serif SC', 'Noto Serif TC'; line-height:1rem; font-size:1.6rem; float:left; background:#522953; border:none; color:#FFF; padding:23px 35px; cursor:pointer; -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;} .footer-subscribe .button:hover{background:#333;} .footer-unsubscribe{margin:20px 0; font-size:1.2rem; color:#6d708c} .footer-unsubscribe a{color:#6d708c; text-decoration:underline;} .footer-unsubscribe a:hover{color:#5b5e7f} *[dir='rtl'] .footer-subscribe input{float:right;} /*Footer brands logo*/ .footer-logos{padding:70px 15px;} .footer-logos .container{list-style:none; margin:0 auto; border: 1px solid #e3e3e4; text-align: center; position: relative;} .footer-logos .item {display:inline-block; vertical-align:middle;} .footer-logos .item a, .logo-top a, .logo-bottom a{display:inline-block; line-height:48px;} .footer-logos .logo-top{position:absolute; top: -40px; left: calc(50% - 94px); background-color:#f6f6f7; margin: 0 auto; padding:10px 20px;} .footer-logos .logo-center{padding:40px 0; margin: 0 auto} .footer-logos .logo-center .item{width:49%; margin:0 auto; padding:15px 5px; display: inline-block; vertical-align: middle;} .footer-logos .logo-bottom {background:#f6f6f7; position:absolute; bottom:-30px; left:calc(50% - 89px); padding:10px 20px;} .footer-logos .logo-bottom .item{padding:10px} /*all logos*/ .footer-logos .brand{background-image:url('https://storage.onyx-hospitality.com/assets/logo/footer-all-logos.svg'); background-repeat: no-repeat; display:inline-block; text-indent:-99999em;} .footer-logos .brand.onyx{width:148px; height:68px; background-position:0 0} .footer-logos .brand.onyx:hover{background-position:0 -70px} .footer-logos .brand.amr{width:76px; height:42px; background-position:-160px 0;} .footer-logos .brand.amr:hover{background-position:-160px -70px;} .footer-logos .brand.sha{width:60px; height:42px; background-position:-250px 0;} .footer-logos .brand.sha:hover{background-position:-250px -70px;} .footer-logos .brand.ozo{ width:75px; height:42px; background-position:-320px 0;} .footer-logos .brand.ozo:hover{background-position:-320px -70px;} .footer-logos .brand.orl{width:92px; height:42px; background-position:-400px 0;} .footer-logos .brand.orl:hover{background-position:-400px -70px;} .footer-logos .brand.tmc{width:127px; height:42px; background-position:-640px 0;} .footer-logos .brand.tmc:hover{background-position:-640px -70px;} .footer-logos .brand.italthai{width:148px; height:42px; background-position:-770px 0;} .footer-logos .brand.italthai:hover{background-position:-770px -70px;} .footer-copyrights{padding:5px 0; font-size:1.4rem; text-align:center; color:#e5e6eb; background:#343352;} /*Disable Auto Zoom in Input “Text” tag - iPhone*/ @media screen and (-webkit-min-device-pixel-ratio:0) { select:focus, textarea:focus, input:focus {font-size:1.6rem; outline:none} } @media (min-width:375px) and (max-width :414px){ .filter-category .show-mobile select { width:50%;} } @media (min-width:480px) { .vip-benefit .icon-text{-ms-flex: 0 0 calc(50% - 25px); flex: 0 0 calc(50% - 25px); max-width: calc(50% - 25px); margin:10px;} } /*only landscape*/ @media (min-width:568px) and (max-width :896px) and (orientation :landscape) { /*official website*/ .official-website .bgimage-text{height:100vh} /*CSR*/ .csr-initiatives .cards{height:1000px} .csr-initiatives .cards .image{height:400px} .csr-initiatives .cards .image .inner{width:80%} .csr-initiatives .cards .image .inner img{object-fit:initial; height:auto; padding:30px} .csr-initiatives .cards .content{height:600px} /*Slider - List restaurants, amenities*/ .text-overlap-image .image{height:100vh} .text-overlap-image .content .inner{padding:60px} .text-overlap-image .slide-arrow_tr_gy .indicators, .text-overlap-image .slide-arrow_tr_gy .carousel-control-prev, .text-overlap-image .slide-arrow_tr_gy .carousel-control-next{top:100vh} /*Promotion*/ .main-banner.half, .main-banner.half .image{height:500px} /*Ourbrand*/ .table-ourbrand {width:450px;} .table-ourbrand td {height:60px;} .segmentation{width:100px; height:60px; margin-bottom:10px;} .lg-profile{margin:5px 10px} /*Privacy*/ .privacy li{width:calc(50% - 8px)} .main_introduction .image, .main_introduction .image .image-under {max-width:100%; height:100vh;} .main_introduction .image .image-under img {object-fit: cover; width: 100%; height: 100%;} .portfolio .image {max-width:100%; height:100vh;} .portfolio .image img {object-fit: cover; width: 100%; height: 100%;} /*instagram-feed*/ /*.instagram-feed .grid_container{height:800px}*/ .fancybox-width-banner{width: 685px; } .fancybox-width-banner .inner{width: 450px} .instagram-feed h2{font-size: 7rem;} .instagram-feed h3{font-size: 2rem;} .footer-info .line:nth-child(1):after{border-right:1px solid #edeeef;} } @media (min-width: 568px) { .property .main-description .content {padding: 30px;} /*Our Work*/ .our-work {margin-bottom:80px;} .our-work .image_big{-ms-flex: 0 0 62%; flex: 0 0 62%; max-width: 62%;} .our-work .image_small{-ms-flex: 0 0 35%; flex: 0 0 35%; max-width: 35%;} .our-work .image_big{-ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; height: 100vh;} .our-work .content{-ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; height: 100vh;} .our-work .content .inner {padding: 30px 40px 30px 40px;} /*Home - Our Brands*/ .our-brands .header-container{-ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; } .our-brands .content-container{-ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%;} .our-brands .header-container {-ms-flex-order: 1; order: 1;} .our-brands .content-container {-ms-flex-order: 2; order: 2;} .bgimage-text{height:600px} /*Timeline*/ .timeline-wrapper{height:100%} /*gmap*/ .gm-style .gm-style-iw-d,#gmap_location .gglayer,#gmap_location .gglayer .image{width:300px!important;} /*Property - Special Offer*/ .flickity_big-one .carousel-cell, .flickity_big-one .carousel-cell .image, .flickity_big-one .carousel-cell.is-selected .content{width:100vw; height:600px} .flickity_big-one .carousel-cell .image{position:relative; -ms-flex:0 0 50%; flex:0 0 50%; max-width: 50%;} .flickity_big-one .carousel-cell .content{position:relative; -ms-flex:0 0 50%; flex:0 0 50%; max-width: 50%;} .flickity_big-one .carousel-cell .content .inner h3 {font-size: 3.4rem;} .flickity_big-one .flickity-prev-next-button{top:45%;} .flickity_one .carousel-cell{width:90vw; height:350px;} .flickity_one .carousel-cell .image{-ms-flex:0 0 50%; flex:0 0 50%; float:left; position:relative; height:350px;} .flickity_one .carousel-cell .content{-ms-flex:0 0 50%; flex:0 0 50%; float:left; position:relative; height:350px; top:inherit; display: flex; align-items: center;} .flickity_one .carousel-cell .content .detail {height: 120px;} .flickity_one .carousel-cell.is-selected{border:1px solid #e5e5e5;} .flickity_big-one .flickity-page-dots{width: 100px; bottom: 20px; left: 20%;} .flickity_big-one .flickity-page-dots .dot.is-selected{width: 9px; height: 9px; margin: 3px;} .flickity_big-one .flickity-page-dots .dot{width: 9px; height: 9px; margin: 3px;} .flickity_one .flickity-prev-next-button{top:50%; width:120px; height:400px} .flickity_one .flickity-prev-next-button.next{right:-9%;} .flickity_one .flickity-prev-next-button.previous{left:-9%} /*Our Brands slider*/ .card_wrapper .carousel-cell{-ms-flex: 0 0 47%; flex: 0 0 47%; max-width: 47%;} .card_wrapper .carousel-cell .image{height:450px} .card_wrapper .carousel-cell .content{height:430px} .card_wrapper .flickity-prev-next-button.next{right: 30px;} /*Promotion*/ .hotels .content{display:flex; flex-flow:column nowrap; justify-content:space-around; align-items:stretch; align-content:stretch; background:#fff; padding:20px; width:calc(100% - 30px); top:325px;} .hotels .content .glance{-ms-flex:1 1 auto; flex:1 1 auto;} .hotels .content .cond{margin:0 0 5px 0} .ta-iframe{width:100%; height:1150px;} .ceo .image{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;} .ceo .content{-ms-flex: 0 0 50; flex: 0 0 50%; max-width: 50%;} } @media (min-width:414px) and (max-height:896px) and (orientation: landscape) { /*.cards_border0 .cards .image{height: 60vh;}*/ } @media (max-width: 360px) { .two-column_23-fluid .image .link {left: 17px; padding: 5px 8px;} } @media (max-width: 414px) { .flickity_one .flickity-prev-next-button {top:46%;} .flickity_one .flickity-prev-next-button.previous {left:-45px;} } @media (min-width: 414px) { .two-column_equal-fluid-h100, .two-column_equal-fluid-h100 .image, .two-column_equal-fluid-h100 .content{height:150vh;} .two-column_equal-fluid-h100 .image, .two-column_equal-fluid-h100 .content{-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;} } @media (min-width: 685px) { /*Pop up*/ .fancybox-width-banner, .th .fancybox-width-banner {width: 685px; height: 500px; background-size: cover; padding:44px} .fancybox-width-banner .inner {width:60%; padding:0; background:none;} } @media (min-width:768px) { /*Property Index - Special Offers*/ .flickity_big-one .carousel-cell .image{-ms-flex-order: 1; order: 1;} .flickity_big-one .carousel-cell .content{-ms-flex-order: 2; order: 2;} .flickity_big-one .flickity-viewport, .flickity_big-one .carousel-cell, .flickity_big-one .carousel-cell .image, .flickity_big-one .carousel-cell.is-selected .content{height:calc(100vh - 20px)} .flickity-prev-next-button.previous{left:10px} .flickity-prev-next-button.next{right:10px} .overview .icon-text {border-right:1px solid rgba(255,255,255,0.2);} .overview .icon-text:last-child {border-right:none;} .footprint .info-text, .footprint .info-text:nth-child(2){border-right:1px solid #ececec;} .footprint .info-text:last-child {border-right:none;} .text-big {font-size: 7rem; display:inherit;} .text-about{top:400px; right:20px;} .text-work{top:10px;} .text-brands {top:-20px;} .text-news {top:50px; right:-40px;} .home .careers .content{top:0; right:0; left:inherit; width:60%; height:100%; text-align:left;} .home .italthai .inner{width:90%} .home .italthai .content{top:0; left:0; right:inherit; width:60%; height:100%; text-align:left;} .video-brand .image {height:auto;} .careers .jop-detail li {display: inline; float:left; width:50%;} .bgimage-text .inner{width:90%} /*About Us - Commitment*/ .commitment {grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr);} .commitment .header { grid-area: 1 / 1 / 2 / 3; } .commitment .photo1 { grid-area: 2 / 1 / 3 / 2; } .commitment .text1 { grid-area: 2 / 2 / 3 / 3; } .commitment .text2 { grid-area: 3 / 1 / 4 / 2; } .commitment .photo2 { grid-area: 3 / 2 / 4 / 3; } .commitment .photo3 { grid-area: 4 / 1 / 5 / 2; } .commitment .text3 { grid-area: 4 / 2 / 5 / 3; } } @media (min-width:820px) and (max-height:1368px) and (orientation:portrait) { .our-work .content .inner {padding: 120px 40px 30px 40px;} .main_introduction .image {display:none} .text-about {top:370px;} .portfolio .image {height:30vh;} .two-column_equal-fluid-h100, .two-column_equal-fluid-h100 .image, .two-column_equal-fluid-h100 .content{height:60vh;} } @media (min-width:768px) and (max-height:1024px) and (orientation:portrait) { .property_highlight .main-highlight .image_big{-ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; height: 50vh;} .property_highlight .main-highlight .content{-ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; height: 50vh;} .our-work .image_big{-ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; height: 50vh;} .our-work .content{-ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; height: 50vh;} .our-work .content .inner {padding: 80px 40px 30px 40px;} .main_introduction .image {height:30vh;} .main_introduction .image .image-under {height:30vh;} .portfolio .image {height:30vh;} .text-about {top:320px;} /*Home - Destination*/ .flickity_group .carousel-cell {width:25%;} /*Property - Room Type individual Description & Gallery*/ .two-column_23-fluid .image{height:60vh;} .two-column_equal-fluid-h100, .two-column_equal-fluid-h100 .image, .two-column_equal-fluid-h100 .content{height:80vh;} /*Cards - List all rooms*/ .cards_borderwh .cards, .cards_borderwh .cards .image, .cards_borderwh .cards .content {height:650px} /*.long-stay .cards_borderwh .cards, .long-stay .cards_borderwh .cards .image, .long-stay .cards_borderwh .cards .image .inner, .long-stay .cards_borderwh .cards .content {height:850px}*/ .cards_borderwh .cards:nth-child(even){-webkit-box-orient:horizontal; -webkit-box-direction:reverse; -webkit-flex-flow:row-reverse; flex-flow:row-reverse;} .cards_borderwh .cards .image, .cards_borderwh .cards .content{order:inherit} .cards_borderwh .cards .image, .cards_borderwh .cards .content {-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;} /*Cards - List all amenities*/ /*.cards_border0 .cards .image{height:40vh;}*/ /*CSR*/ .csr-initiatives .cards{height:1000px} .csr-initiatives .cards .image{height:400px} .csr-initiatives .cards .image .inner{width:80%} .csr-initiatives .cards .image .inner img{object-fit:initial; height:auto; padding:30px} .csr-initiatives .cards .content{height:600px} /*Promotion*/ .main-banner.half, .main-banner.half .image{height:500px} .table-ourbrand{width:350px} /*.instagram-feed .grid_container{height:700px}*/ .privacy li{width:calc(50% - 8px)} } @media (min-width: 991px) { /*Main Destination*/ .main_introduction .content {-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; padding:60px; } .main_introduction .image {position:relative; -ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; height:60vh;} .main_introduction .image .image-over {display:none;} .main_introduction .image .image-under {position:relative; right:inherit;} .main_introduction .image .image-under img{object-fit: cover; width:100%; height:100%;} /*Portfolio*/ .portfolio{margin:60px 0;} .portfolio .content {-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; padding:60px; -ms-flex-order: 2; order: 2; } .portfolio .image {position:relative; -ms-flex:0 0 100%; flex:0 0 100%; max-width:100%; height:60vh; -ms-flex-order: 1; order: 1} .portfolio .image {position:relative; right:inherit;} .portfolio .image img{object-fit: cover; width:100%; height:100%;} } @media (max-width: 928px) and (min-width: 568px) and (orientation: landscape) { .main_introduction .image {height:50vh;} .main_introduction .image .image-under {height:50vh;} .text-about {top: 200px; right: 20px;} .portfolio .image {height:50vh;} /*Timeline*/ .timeline-slide .content{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; -ms-flex-order: 1; order:1;} .timeline-slide .content .inner{padding:30px} .timeline-slide .image{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; -ms-flex-order: 2; order:2;} } @media (min-width:1024px) { /*Popup banner*/ .fancybox-width-banner{width:685px; height:500px;} /*Main Destination*/ .main_introduction .content {-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%; padding:60px; height:auto} .main_introduction .image {position:relative; -ms-flex:0 0 50%; flex:0 0 50%; max-width:50%; height:auto} .main_introduction .image .image-over{position:absolute; top:50%; left:30px; z-index:6; width:60%; display:inherit;} .main_introduction .image .image-over img{-webkit-box-shadow:6px 0px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow:6px 0px 20px 0px rgba(0,0,0,0.1); box-shadow:6px 0px 20px 0px rgba(0,0,0,0.1); object-fit: cover; max-width:100%;} .main_introduction .image .image-under {position:absolute; height:70vh; right:0} .main_introduction .image .image-under img{object-fit: cover; width:100%; height:100%;} /*Text Big*/ .text-big{font-size:13rem;} .text-about{top: -40px;} /*Our Work*/ .our-work {height: 80vh;} .our-work .image_big{-ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; height: 80vh;} .our-work .content{-ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; height: 80vh;} .our-work .content .inner{padding: 100px 50px 50px 50px;} .our-work .image_small{display:none} .main-description h1{font-size: 4.2rem; line-height:1.2;} /*Home - Video*/ .home .video-container{height: auto; margin: 90px 15px;} .overview header h2 {font-size: 4.2rem;} .overview h3 {font-size:1.6rem;} .overview .content {width:80%; margin:0 auto;} .overview .value {font-size:5.6rem; line-height:5rem;} /*Download*/ .download{margin:60px auto} .download .bgimage-text{height:500px} .download .bgimage-text .content .btn-wrapper{width: 400px; height: 400px;} .contact_onyx .frame{width: 400px; height: 400px;} /*Portfolio*/ .portfolio {margin:80px 0 30px 0; background: url(https://storage.onyx-hospitality.com/assets/images/gf-map.svg) bottom right no-repeat;} .portfolio .content {-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%; height: 75vh; padding:60px; margin-bottom:30px; -ms-flex-order: 2; order: 2} .portfolio .image {position:relative; -ms-flex:0 0 50%; flex:0 0 50%; max-width:50%; height:75vh; margin-bottom:30px; -ms-flex-order: 1; order: 1; } .portfolio .image img{object-fit: cover; width:100%; height:100%;} /*Home - Our Brands*/ .our-brands .carousel-indicators{display: flex; bottom: -50px} .our-brands:before{width:50%;} .our-brands .header-container{-ms-flex: 0 0 35%; flex: 0 0 35%; max-width: 35%; position:relative;} .our-brands .content-container{-ms-flex: 0 0 65%; flex: 0 0 65%; max-width: 65%; position:relative;} .our-brands .header-container header{padding: 40px 20px;} .our-brands .carousel-item{width: calc(33.333333% - 10px);} .our-brands h2{font-size: 4rem;} /*Our Brands slider*/ .card_wrapper .carousel-cell{-ms-flex: 0 0 32%; flex: 0 0 32%; max-width: 32%;} .card_wrapper .carousel-cell .image{height:500px} .card_wrapper .carousel-cell .content{height:430px} .card_wrapper .flickity-prev-next-button.next{right: 30px;} /*bgimage*/ .bgimage-text .content{width:50%} .bgimage-text .inner{width:80%} .bgimage-text .inner h2{font-size:4rem; line-height:1;} /*Text Right*/ .careers .bgimage-text .content{right:0; left:inherit;} /*Text Center*/ .official-website{margin:70px auto; padding:0} .team .image{width: 350px; height: 350px;} /*Development Journey*/ .development_journey{margin: 65px 0 0 0; padding: 65px;} .stepper_item .title{height:250px} .stepper_item .title .process{width: 150%;} .stepper_item .title .process:before, .stepper_item .title .process:after{width: 85px;} .stepper_item .title .process:before{background: url('https://storage.onyx-hospitality.com/assets/icon/long-arrow-left_lg.svg') 0 50%;} .stepper_item .title .process:after{background: url('https://storage.onyx-hospitality.com/assets/icon/long-arrow-right_lg.svg') 100% 50%;} /*Development - Team*/ .dev-teams .content, .dev-teams .content_team{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;} .dev-teams .content .inner{padding:25%} .dev-teams .content_team{margin:65px 0} .dev-teams .content_team .team_item {width: 50%; margin:20px;} .dev-teams .content_team .info{height:200px} .dev-teams .content_team{flex-direction: row;} /*contact_onyx*/ .contact_onyx{margin:70px 30px;} .footprint h2, .stories h2{font-size: 4rem;} .news {margin: 50px 10px 50px 10px;} .news h2 {font-size: 4rem;} .news .content .name h3 {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} .popup ul{-webkit-columns:2; -moz-columns:2; columns:2;} /*Instafeed Grid*/ .instagram-feed .header-container {padding: 80px 80px 20px 80px;} .instagram-feed .grid_container{height:250px} .instagram-feed .grid_container .grid__item {position:relative; float:left; padding:8px; width:25%; height: 100%; overflow: hidden;} /*Static Our Image*/ .instagram-feed .grid__item:nth-child(5), .instagram-feed .grid__item:nth-child(6), .instagram-feed .grid__item:nth-child(7), .instagram-feed .grid__item:nth-child(8), .instagram-feed .grid__item:nth-child(9), .instagram-feed .grid__item:nth-child(10), .instagram-feed .grid__item:nth-child(11), .instagram-feed .grid__item:nth-child(12) {display:none} /*Hover Effect*/ .instagram-feed .grid__item .hovereffect .inner{padding:20px; word-wrap: break-word; overflow: hidden; text-align:center; position:relative;-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out; font-size:1.4rem; line-height:1.4} .instagram-feed .grid__item .hovereffect .inner{-webkit-transform:translateY(45px);-ms-transform:translateY(45px);transform:translateY(45px);} .instagram-feed .grid__item .hovereffect:hover .inner{-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px);} .instagram-feed .grid__item .hovereffect .inner .caption{display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical; overflow:hidden;} .instagram-feed .grid__item .hovereffect .seemore{margin:50px auto 20px auto} /*Our Stengths*/ .image_textquote{margin:70px 0;} .image_textquote h2{font-size: 5.2rem;} .image_textquote .image{-ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%;} .image_textquote .content{-ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; position:relative; display: flex; flex-direction: column; justify-content: center; align-items: center;} .image_textquote .content .inner{padding:10%} /*Timeline*/ .timeline-slide{margin:0 20px} .timeline-slide .content{-ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; -ms-flex-order: 1; order: 1; height:76vh; /*background-color:#f6f6f7;*/} .timeline-slide .content .inner{padding: 50px;} .timeline-slide .image{-ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; -ms-flex-order: 2; order: 2; height:76vh} /*.timeline-slide .image .inner{position:absolute; left:30%; top:50%; transform:translate(-50%, -50%); width:105%; padding:50px; z-index:5;}*/ .our-team {margin: 50px 0;} .our-team h2 {font-size: 4rem;} .our-team .content .name h3, .our-team .content .name h3 a{font-size:3rem;} .ceo .image {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;} .ceo .image img{width:600px; height:600px; margin:auto} .ceo .content{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding:50px 15px;} .team-detail.fancybox-width {max-width:80%;} .team-detail .content {padding:50px;} /*Community - Our Commitment*/ .commitment {grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(2, 1fr);} .commitment .header { grid-area: 1 / 1 / 2 / 3;} .commitment .photo1 { grid-area: 1 / 3 / 2 / 4;} .commitment .text1 { grid-area: 1 / 4 / 2 / 5; } .commitment .text2 { grid-area: 2 / 1 / 3 / 2; } .commitment .photo2 { grid-area: 2 / 2 / 3 / 3; } .commitment .text3 { grid-area: 2 / 3 / 3 / 4;} .commitment .photo3 { grid-area: 2 / 4 / 3 / 5;} .commitment .header h2{font-size:5.6rem;} /*Brands - At a Glance*/ .overlap_image-on-text{flex-direction: row; height: calc(100vh - 130px);} .overlap_image-on-text .content{-ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; -ms-flex-order:1; order:1;} .overlap_image-on-text .image{-ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; -ms-flex-order:2; order:2;} .overlap_image-on-text .content .inner{padding: 10% 20% 10% 10%;} .overlap_image-on-text .image .inner{position:absolute; left:30%; top:50%; transform:translate(-50%, -50%); width:110%; padding:50px 0 50px 50px; z-index:5;} .overlap_image-on-text .image img{width:700px; height:700px; border-radius:50%; border: 10px solid #eaeaea;} .hotels h2 {font-size: 4rem;} .vip-benefit h2{width:50%} /*flickity */ /*Cross Brands for campaign .flickity_group.brands{width: 920px;margin: 0 auto;} .flickity_group.brands .carousel-cell {width:50%;} .flickity_group.brands .flickity-page-dots, .flickity_group.brands .flickity-prev-next-button.previous, .flickity_group.brands .flickity-prev-next-button.next{display: none}*/ .flickity_group header h3{ font-size:4.8rem;} .flickity_one header h3 {font-size:4.4rem;} .flickity_three .flickity-prev-next-button.previous{left:5%} .flickity_three .flickity-prev-next-button.next{right:5%} /*Property Index - Special offer*/ .flickity_big-one{height:auto} .flickity_big-one h2{font-size: 3.8rem;} .flickity_big-one .carousel-cell{width:85vw; height: 620px;} .flickity_big-one .carousel-cell .image{-ms-flex:0 0 60%; flex:0 0 60%; max-width: 60%;} .flickity_big-one .carousel-cell .content{-ms-flex:0 0 40%; flex:0 0 40%; max-width: 40%;} .flickity_big-one .carousel-cell .image {height: 100%; -ms-flex-order: 1; order: 1;} .flickity_big-one .carousel-cell .image .inner{margin-left:15px} .flickity_big-one .carousel-cell .content{height: 100%; display: none; -ms-flex-order: 2; order: 2;} .flickity_big-one .carousel-cell.is-selected .content{position: relative; display: block;} .flickity_big-one .carousel-cell.is-selected .content .inner{padding:10%; height: 500px; overflow-y: auto; position:relative; z-index:2;} .flickity_big-one .carousel-cell.is-selected .image .inner{float: left; margin: 0} .flickity_big-one .flickity-prev-next-button{border-radius:0; transform: none; top: initial; bottom: 10px} .flickity_big-one .flickity-prev-next-button:focus{outline:none} .flickity_big-one .flickity-prev-next-button .flickity-button-icon{top:0; right:0} .flickity_big-one .flickity-prev-next-button.previous{top:45%; left:10px; width:80px; height:80px} .flickity_big-one .flickity-prev-next-button.next{top:45%; right:10px; width:80px; height:80px} .flickity_big-one .flickity-page-dots {left:47%;} /*Special Offers*/ .flickity_one header h3 {font-size:4rem;} .flickity_big-one h3 {font-size:5.4rem;} .flickity_one .carousel-cell {position:relative; width:850px; height:450px; background:#fff; margin:0 auto; display:flex; opacity:0} .flickity_one .carousel-cell .image, .flickity_one .carousel-cell .content{height:450px;} .flickity_one .carousel-cell .content .inner{padding:50px} .flickity_one .carousel-cell .content{font-size:1.7rem} .flickity_one .flickity-prev-next-button.next{right:0;} .flickity_one .flickity-prev-next-button.previous{left:0} /*Individual Room Type - Description with Gallery*/ .two-column_23-fluid, .two-column_23-fluid .content, .two-column_23-fluid .image{height:calc(100vh - 30px);} .two-column_23-fluid .image{-ms-flex:0 0 55%; flex:0 0 55%; max-width:55%;} .two-column_23-fluid .content{-ms-flex:0 0 45%; flex:0 0 45%; max-width:45%;} .two-column_23-fluid .content, .two-column_23-fluid .image{order:inherit} .two-column_23-fluid .content .inner{width:80%; height:450px; position: absolute; left: 50%; bottom:0; transform: translate(-50%, 0); overflow-y:auto; } .two-column_23-fluid .content .inner .inner-inner{position: absolute; bottom: 0; height: 100%;} .two-column_23-fluid .content .description{padding: 0 15px 0 0} .two-column_23-fluid .content .description .noted{color: #ffb6ab; font-style: italic;} .two-column_23-fluid .content h1 {font-size:5.4rem;} .two-column_23-fluid .image .link{left:30px; bottom:20px;} .main-banner.rooms .indicators {bottom: 25px;} *[dir="rtl"] .two-column_23-fluid .content .description{padding: 0 0 0 15px} .list-package, .main-gallery{margin:50px 0} .filter-category{margin:20px 0 0 0;} /*promotion*/ .hotels{padding:50px 0} .hotels .image{height:290px;} .hotels .image figure{height:290px;} .hotels .content{top:250px; width:100%; padding:20px 0;} .hotels .link-media{padding: 5px 15px 40px 15px;} .hotels .content .btn-wrapper .btn-book.-full{padding:2rem 3.5rem;} .upcoming-hotel-portal .hotels {padding:0 0 50px 0} .destination-portal .hotels {padding:10px 0 50px 0} .promotion-filter .filters-button-group .button {height:100%;} .multiselect{width:300px;} .multiselect-container {width:303px;} .two-column_equal-fluid-h100, .two-column_equal-fluid-h100 .image, .two-column_equal-fluid-h100 .content{height:calc(100vh - 30px);} .two-column_equal-fluid-h100 .image, .two-column_equal-fluid-h100 .content{-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;} .two-column_equal-fluid-h100 .content h1, .two-column_equal-fluid-h100 .content h2 {font-size:4rem;} *[dir="rtl"] .two-column_equal-fluid-h100 .content{text-align:right} /*Food Gallery*/ .two-column_equal-fluid-h60 .image, .two-column_equal-fluid-h60 .content{height:580px;} .two-column_equal-fluid-h60 .row:nth-child(even){flex-direction:row-reverse; -webkit-flex-direction:row-reverse;} .two-column_equal-fluid-h60 .image, .two-column_equal-fluid-h60 .content{-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%; order:initial} .two-column_equal-fluid-h60 .content .inner{width:60%} /*Cards - List all rooms*/ .cards_borderwh .cards {margin:0 auto 30px; padding:30px; height:auto} .cards_borderwh .cards .image, .cards_borderwh .cards .content{height:600px} /*Long Stay*/ .long-stay .cards_borderwh .cards .image, .long-stay .cards_borderwh .cards .content{height: 750px;} .cards_borderwh .cards:nth-child(even) {-webkit-box-orient:horizontal; -webkit-box-direction:reverse; -webkit-flex-flow:row-reverse; flex-flow:drow-reverse;} .cards_borderwh .cards:nth-child(even) .rate-wrap {right: inherit; left:0;} .cards_borderwh .cards .image{-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;} .cards_borderwh .cards .content{-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;} .cards_borderwh .cards .content .description .meeting li{padding-right:14px} .btn-request{width:inherit} /*Vision, Development*/ .row_text-image, .row_image-text {margin:65px 0;} .row_text-image .image img{display:inline} /*column-count-2*/ .row_text-image .content{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0;} .row_image-text .image{display: flex; justify-content: center; align-items: center;} /*Cards - List all amenities*/ .cards_border0 .cards{flex-flow: row nowrap; margin:0 0 65px 0;} .cards_border0 .cards:last-child{margin-bottom:0} .cards_border0 .cards:nth-child(even){-webkit-box-orient:horizontal; -webkit-box-direction:reverse; -webkit-flex-flow:row-reverse; flex-flow:row-reverse;} .cards_border0 .cards .image, .cards_border0 .cards .content {-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;} .cards_border0 .cards .image{order:inherit; height: inherit;} .cards_border0 .cards .content .inner{padding:15%} .cards_border0 .cards .content h3, .cards_border0 .cards .content h3 a{font-size:3.4rem; font-weight: 500;} .play .cards_border0 .cards .content h3, .play .cards_border0 .cards .content h3 a, .special-offer .cards_border0 .cards .content h3, .special-offer .cards_border0 .cards .content h3 a, .content_highlight .cards_border0 .cards .content h2, .content_highlight .cards_border0 .cards .content h2 a{font-size:3.8rem;} /*Srollbar*/ .cards_border0 .cards .content .inner .detail{/*height: 170px; overflow-y: auto;*/ margin-bottom: 20px; padding-right: 20px; font-size: 1.5rem;} /*width*/ .cards_border0 .cards .content .inner .detail::-webkit-scrollbar {width:6px;border-radius: 10px;} /* Track */ .cards_border0 .cards .content .inner .detail::-webkit-scrollbar-track {background-color:#f4f8fa;border-radius: 10px;} /* Handle */.cards_border0 .cards .content .inner .detail::-webkit-scrollbar-thumb {background-color:#e4eaee;border-radius: 10px;} /* Hover */ .cards_border0 .cards .content .inner .detail::-webkit-scrollbar-thumb:hover {background-color:#d7dfe4} .offer .cards_border0 .cards .content .inner ul {/*height: 80px; overflow-y: auto;*/font-size: 1.5rem; line-height: 1.4} /*width*/ .offer .cards_border0 .cards .content .inner ul::-webkit-scrollbar {width:6px;border-radius: 10px;} /* Track */ .offer .cards_border0 .cards .content .inner ul::-webkit-scrollbar-track {background-color:#f4f8fa;border-radius: 10px;} /* Handle */.offer .cards_border0 .cards .content .inner ul::-webkit-scrollbar-thumb {background-color:#e4eaee;border-radius: 10px;} /* Hover */ .offer .cards_border0 .cards .content .inner ul::-webkit-scrollbar-thumb:hover {background-color:#d7dfe4} /*Privacy*/ .privacy li{width: calc(33.333333% - 10px);} .fancybox-width{max-width:50vw; padding:60px} .content-padd{padding:60px 0} .content-padd .column-count{padding:0 15px} .column-count li{position:relative; padding-left:15px; padding-bottom:5px; list-style:none;} .column-count li:before {content:''; background:#efd1d3; border-radius:6px; width:6px; height:6px; margin:2px; position:absolute; left:0; top:8px;} /*Slider - List restaurants, amenities*/ .text-overlap-image .image, .text-overlap-image .content{height:650px} .text-overlap-image .image{-ms-flex:0 0 66.75%; flex:0 0 66.75%; max-width:66.75%;} .text-overlap-image .content{-ms-flex:0 0 33.25%; flex:0 0 33.25%; max-width:33.25%;} .text-overlap-image .content .inner{position:absolute; width:160%; height:auto; padding:40px; top:50%; left:15%; transform:translate(-50%, -50%); overflow:hidden; z-index:5;} .text-overlap-image .content:before {background: #a8b4cb;} .text-overlap-image .content ul {list-style:none; padding-left:0; margin-bottom:20px;} .text-overlap-image .content li{position:relative; padding-left:15px;} .text-overlap-image .content li:before {content:''; background:#efd1d3; border-radius:6px; width:6px; height:6px; margin:2px; position:absolute; left:0; top:8px;} .slide-arrow_tr_gy .indicators, .slide-arrow_tr_gy .carousel-control-next, .slide-arrow_tr_gy .carousel-control-prev{top:0; right:inherit; z-index:10} .slide-arrow_tr_gy .carousel-control-prev{left: 70%;} .slide-arrow_tr_gy .indicators{left: calc(70% + 60px); color:#fff;} .slide-arrow_tr_gy .carousel-control-next{left: calc(70% + 120px);} .slide-arrow_tr_gy .carousel-control-prev-icon{background-image:url('https://storage.onyx-hospitality.com/assets/icon/arrow-left_wh_s.svg');} .slide-arrow_tr_gy .carousel-control-next-icon{background-image:url('https://storage.onyx-hospitality.com/assets/icon/arrow-right_wh_s.svg');} .timeline-slide .image img{width: 350px; height: 350px;} /*Property - Certificated*/ .certificated-container{margin:140px 0 20px 0;} .promotion-content .certificated-container{margin:20px 0;} .promotion-content .promotion-icon, .promotion-content .promotion-description{margin:50px 0;} .certificated{text-align:right;} *[dir='rtl'] .certificated{text-align: left;} .form-login .link a {line-height: 2.4rem;} .hovereffect p {font-size: 1.4rem;} /*Hotel Contact Us*/ .hotel-contact {margin: 50px 0 0 0;} .hotel-contact .text-text a {line-height:1.4;} .note li {padding:0 0 8px 15px;} /*Member Rate*/ .banner-member-rates{margin:40px 65px 50px 65px; padding:75px 15px} .banner-member-rates h2{font-size: 6rem;} .th .banner-member-rates h2{font-size: 5rem;} .banner-member-rates p{font-size: 2.8rem;} .bg{padding:50px 0;} /*Footer*/ .footer-info .line:after{border-right:1px solid #edeeef;} .footer-info .icon-social{margin:3px!important;} .footer-unsubscribe {margin:10px 0!important;} *[dir='rtl'] .footer-info .line:after{left: 0;right: inherit;} .footer-logos{padding:50px 15px;} .footer-logos .logo-center .item{padding:10px 30px} .footer-logos .logo-center .item:first-child{padding-left:0} .footer-logos .logo-center .item:last-child{padding-right:0} .footer-logos .logo-center{padding:70px 0; margin: 0 auto} .footer-logos .logo-center .item{width:inherit; margin:inherit} .footer-logos .logo-bottom{border-top:0; margin:0 auto; padding:0 20px;} .footer-logos .logo-bottom .item{padding:10px} } /*iPad - Portrait */ @media only screen and (min-width:1024px) and (max-height:1366px) and (orientation:portrait){ .our-work .image_big{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;height:50vh; -ms-flex-order: 1; order: 1; padding:0;} .our-work .content{-ms-flex:0 0 70%;flex:0 0 70%;max-width:70%;height:50vh; -ms-flex-order: 2; order: 2;} .our-work .image_small{-ms-flex:0 0 30%;flex:0 0 30%;max-width:30%; display: block; padding:3%; -ms-flex-order: 3; order: 3;} /*Individual Room*/ .two-column_23-fluid, .two-column_23-fluid .content, .two-column_23-fluid .image{height: auto} .two-column_23-fluid .image, .two-column_23-fluid .content{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%;} .two-column_23-fluid .image{-ms-flex-order: 1; order: 1;} .two-column_23-fluid .content{-ms-flex-order: 2; order: 2; z-index:2; } .two-column_23-fluid .image{position:relative; width:100%; height:50vh; padding-left: 15px; padding-right:15px; z-index:1;} /*.two-column_23-fluid .image .inner .carousel, .two-column_23-fluid .image .inner .carousel-item {height: 100%}*/ .two-column_23-fluid .content .inner{width: calc(100% - 50px); height: auto; padding: 50px; position: relative; left: inherit; bottom: inherit; transform: translate(0, 0); overflow-y:visible;} .two-column_23-fluid .content .inner .inner-inner{position: relative} .hotel-highlight{padding: 0} } @media (min-width:1280px) { .banner-member-rates {background-position:0 0; background-size: inherit;} .our-brands h2 {font-size: 5.4rem;} .our-brands .our-brand h3 {font-size: 4rem;} .our-brands .header-container {padding:100px 80px;} /*Text Big*/ .text-big{font-size:14.6rem;} .text-about {top:30px; right:18%;} .text-work{top:20px; right:-20px;} .text-brands {top:10px;} .text-news {top:70px; right:-40px;} .text-portfolio{top:0;} .home_highlight .main-highlight .content h2{margin:20px 0;} .main_introduction .content {padding:8% 8% 8% 18%;} .main_introduction .image .image-over{position:absolute; top:inherit; bottom:-40px; left:30px; z-index:6; width:60%; display:inherit;} .main_introduction .image .image-over {left:0; top:55%} .main_introduction .image .image-under {right:0} .overview h3 {font-size:1.7rem;} .overview .value {font-size:6.5rem; line-height:6rem;} /*Our Work*/ .our-work .image_big{-ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%;} .our-work .content{-ms-flex: 0 0 35%; flex: 0 0 35%; max-width: 35%;} .our-work .content .inner {padding: 150px 80px 80px 80px;} .our-work .image_small{-ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; position: relative; display:block} .our-work .image_small .inner{position: absolute; top: 160px; right: 0; width: 280px; height: 400px} .footprint h2, .stories h2 {font-size: 5.2rem;} /*.home .careers .inner, .home .italthai .inner{width:60%} .home .careers .inner h2, .home .italthai .inner h2{font-size:5rem;}*/ .news h2, .our-team h2, .hotels h2{font-size:5.2rem;} .video-brand .image {height:350px;} .portfolio .image {height: 80vh; right:0} .portfolio .content {height: 80vh; padding:40px 60px;} *[dir='rtl'] .portfolio .image{right:inherit; left:0} .main_introduction{} .main_introduction .btn-wrapper {margin:80px 0 30px 0;} .our-brands .btn-wrapper {margin:80px 0 30px 0;} .our-work .btn-wrapper {margin:80px 0 30px 0;} .portfolio .btn-wrapper {margin:80px 0 30px 0;} .ourbrands .cards_border0 .cards .btn-wrapper{margin: 80px 0 30px 0;} .container{max-width: 1180px;} .property .main-description .content {padding: 80px 80px 80px 100px;} /*Brands - At a Glance*/ .overlap_image-on-text .content .inner{padding: 10% 25%;} .individual-gallery .image .link a{margin: 0 10px;} .two-column_equal-fluid-h60 .content h3{font-size:5rem} /*Property - Special Offers*/ .flickity_big-one .carousel-cell.is-selected .content .inner {padding: 10%;} .flickity_big-one h3 {font-size:5rem;} /*Special Offers*/ .flickity_one .carousel-cell {width:1000px;} /*Home - Amari Experience*/ .two-column_equal-fluid-h100 .content .inner{width:70%} /*Cards - List all Rooms, Meeting rooms*/ .cards_borderwh .cards .image, .cards_borderwh .cards .image .inner, .cards_borderwh .cards .content{height:500px} /*.long-stay .cards_borderwh .cards .image, .long-stay .cards_borderwh .cards .image .inner, .long-stay .cards_borderwh .cards .content{height:700px}*/ .cards_border0 .cards .content h3, .cards_border0 .cards .content h3 a{font-size:4rem;} .play .cards_border0 .cards .content h3, .play .cards_border0 .cards .content h3 a, .special-offer .cards_border0 .cards .content h3, .special-offer .cards_border0 .cards .content h3 a, .content_highlight .cards_border0 .cards .content h2, .content_highlight .cards_border0 .cards .content h2 a{font-size:4rem;} .column-count{-webkit-column-gap:100px; -moz-column-gap:100px; column-gap:100px;} /*Promotion*/ .hotels .image{height:415px;} .hotels .image figure{height:415px;} .hotels .content{top:360px} .hotels .link-media{padding: 5px 15px 55px 15px;} /*Slider - List restaurants, amenities*/ .text-overlap-image .content .inner{width:140%} .text-overlap-image header .detail {padding-left:7%; padding-right:7%;} .instagram-feed .grid_container{height:300px} .our-team .content .name h3, .our-team .content .name h3 a{font-size:3.2rem;} .ceo .content{padding:80px 15px;} .team-detail .content {padding:80px 50px;} .team-detail.fancybox-width {padding:80px;} .bgimage-text .inner{width:75%} .bgimage-text .inner h2{font-size:5.2rem;} /*column-count-2*/ .row_text-image h2{font-size:5.2rem} .row_text-image .content {-webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:50px; -moz-column-gap:50px; column-gap:50px; padding-bottom:40px} .property-development .row_text-image .content{-webkit-column-count:1; -moz-column-count:1; column-count:1; -webkit-column-gap:0; -moz-column-gap:0; column-gap:0; padding-bottom:0} .footer-logos .logo-center .item{padding:10px 50px} } @media (min-width:1360px) { .container{max-width: 1300px;} .main-description h1{font-size: 5.2rem;} /*.overview header h2, .our-work .content h2, .our-brands h2, .news h2, .footprint h2, .stories h2, .our-team h2, .hotels h2 {font-size: 5.2rem;}*/ /*indicators - highlight*/ .home_highlight .main-highlight .content h2{font-size: 5.4rem;} .home_highlight .carousel-control-prev, .property_highlight .carousel-control-prev{left:50px;} .home_highlight .carousel-control-next, .property_highlight .carousel-control-next{right:50px;} /*.flickity_big-one .flickity-prev-next-button.next .flickity-button-icon {top:45%;}*/ .flickity_big-one .flickity-prev-next-button.previous{top:45%; left:30px; width:80px; height:80px} .flickity_big-one .flickity-prev-next-button.next{top:45%; right:30px; width:80px; height:80px} .our-brands .content-container{margin:40px 0;} .our-brands .carousel-item{width: calc(33.333333% - 20px); margin:0 10px;} .our-brands .our-brand h3 {font-size: 4rem;} .card_wrapper .carousel-cell .content{height:390px} .cards_borderwh .cards{margin:0 auto 30px;} .cards_borderwh .cards .image, .cards_borderwh .cards .image .inner, .cards_borderwh .cards .content{height:450px} .instagram-feed .grid_container{height:300px} .our-team .content .name h3, .our-team .content .name h3 a {font-size:3.4rem;} .team .image{width: 410px; height: 410px;} .team-detail .image {width: 460px; height: 460px;} .vip-benefit .icon-text{-ms-flex: 0 0 calc(25% - 25px); flex: 0 0 calc(25% - 25px); max-width: calc(25% - 25px);} } @media (min-width:1440px) { .banner-member-rates{padding:75px 15px} .container{max-width: 1400px;} /*Home - Our Brands*/ .our-brands .header-container header{padding:120px 80px;} .main-description h1{font-size: 5.2rem;} .portfolio h2 {font-size: 5rem;} .portfolio .image {height: 85vh;} .portfolio .content {height: 85vh;} /*.overview header h2, .our-work .content h2, .our-brands h2, .news h2, .footprint h2, .stories h2, .our-team h2, .hotels h2{font-size: 5.2rem;}*/ .text-overlap-image .content .inner{width:120%} .text-overlap-image header .detail {padding-left:10%; padding-right:10%;} .timeline-slide .image img{width: 600px; height: 600px;} /*Special Offers*/ .flickity_one .flickity-prev-next-button.next{right:5%;} .flickity_one .flickity-prev-next-button.previous{left:5%} .instagram-feed .grid_container{height:350px} .footer-logos .logo-center .item{padding:10px 60px} } @media (min-width:1680px) { .main_introduction .image {height: 85vh;} .main_introduction .content {height: 85vh;} /*Home Description*/ .home .main-description .content{padding: 80px 100px 80px 80px;} .property .main-description .content {padding: 80px 30px 80px 100px;} .our-brands .our-brand h3 {font-size: 4.4rem;} .portfolio .content{padding: 80px 100px 80px 80px;} /*Destination*/ .flickity_group.destinations{margin: 0 30px;} .property .main-description h1{font-size: 5.6rem;} .property_highlight .main-highlight .image_small .inner{bottom:140px; width: 305px; height: 432px} .timeline-slide .content .inner{padding: 10% 25%;} /*Rooms*/ .two-column_23-fluid .image{-ms-flex:0 0 65%; flex:0 0 65%; max-width:65%;} .two-column_23-fluid .content{-ms-flex:0 0 35%; flex:0 0 35%; max-width:35%;} /*Slider - List restaurants, amenities*/ .text-overlap-image .content .inner{width:110%} /*Cards - List all rooms*/ .cards_borderwh .cards {margin:0 auto 50px; padding:75px; height:auto} .long-stay .cards_borderwh .cards {padding:55px} .cards_borderwh .cards .content .name h3{font-size:3.6rem} .text-overlap-image header .detail {padding-left:15%; padding-right:15%;} } @media (min-width:2560px){ } /*END*/