@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/			v2.0 | 20110126*/ 
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin: 0;  padding: 0;  border: 0;  vertical-align: baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
blockquote,q {quotes: none;}
blockquote:after,blockquote:before,q:after,q:before {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

html * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
html {font-size: 62.5%; scroll-behavior: smooth;}
body,html {height: 100%; text-rendering: optimizeLegibility!important; -webkit-font-smoothing: antialiased!important; font-smooth: always;}
body {font-family: Marcellus, Sans-serif; /*font-family: 'SukhumvitSet', Sans-serif;*/ font-size: 1.6rem; line-height: 1.5; font-weight: normal; color: #313131; background-color: #fff;}
body>div.panel {overflow-x: hidden!important;}

/*The Notched Phone*/
@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}

[dir=ltr],[dir=rtl] {unicode-bidi: -webkit-isolate; unicode-bidi: -moz-isolate; unicode-bidi: -ms-isolate; unicode-bidi: isolate;}
bdo[dir=ltr],bdo[dir=rtl] {unicode-bidi: bidi-override; unicode-bidi: -webkit-isolate-override; unicode-bidi: -moz-isolate-override; unicode-bidi: -ms-isolate-override; unicode-bidi: isolate-override;}
::selection {background: #502B3A; color: #fff; text-shadow: none;}
::-moz-selection {background: #502B3A; color: #fff; text-shadow: none;}
*,::after,::before {box-sizing: inherit;}
*,:after,:before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

h1, h2, h3, h4, h5, h6{ color:#512B38}
ol ol, ol ul, ul ol, ul ul {padding-left: 15px; margin: 0;}

img {border: none; max-width: 100%; display: block;}
blockquote {border-left: none;}
p {margin-bottom: 15px;}

.btn:focus, .btn.focus {box-shadow: none;}

#rtl body {direction: rtl; margin: 0; padding: 0;}
#rtl .text-hidden {text-indent: 99999em;}

.hidden {visibility: hidden; opacity: 0;}
.visible {visibility: visible; opacity: 1;}

.no-padding {padding-left: 0; padding-right: 0;}
.center {text-align: center; margin: 0 auto; display: block;}

a {color: #512B38; text-decoration: underline;}
a:hover {color: #54595F;}

.hide-mobile {display: none;}
.show-mobile {display: block !important;}
.show-desktop {display: none !important;}

.c-pointer{ cursor: pointer;}

/*****HEADER*****/
.header {background-color: #502B3A; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;}

.header .logo {float: left; padding: 20px; text-decoration: none;}
	.header .logo img{width: 80px}
	
/* Main Menu */	
.header .main-menu{display: flex; justify-content: flex-end;}
	.header ul {margin: 0; padding: 0; list-style: none; overflow: hidden;}
	.header .menu li a {display: block; padding: 15px; font-family: Marcellus, Sans-serif;color: #333; text-decoration: none;}
	.header .menu li a.active{color: #512B38}

	/* Nav Menu */
	.header .menu {max-height: 0; transition: max-height 0.2s ease-out; position: absolute; left: 0; right: 0; top: 60px;}

	/* Hamburger - Menu Icon*/
	.header .sub-menu{order: 1;}
	.header .menu-icon {order: 2;}
	.header .menu-icon {cursor: pointer; display: inline-block; float: right; padding: 30px 25px; position: relative; user-select: none;}
	.header .menu-icon .navicon {background: #fff; display: block; height: 2px; width: 18px; position: relative; transition: background 0.2s ease-out;}
	.header .menu-icon .navicon:before,.header .menu-icon .navicon:after {background: #fff; content: ""; display: block; height: 100%;
		position: absolute; transition: all 0.2s ease-out; width: 100%;}
	.header .menu-icon .navicon:before {top: 5px;}
	.header .menu-icon .navicon:after {top: -5px;}

	/* Menu Button */
	.header .menu-btn {display: none;}
	.header .menu-btn:checked ~ .menu {max-height: 360px; padding: 20px 0; background-color: #fff;	text-align: center;	color: #333; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; z-index: 200}
	.header .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}
	.header .menu-btn:checked ~ .menu-icon .navicon:before {transform: rotate(-45deg);}
	.header .menu-btn:checked ~ .menu-icon .navicon:after {transform: rotate(45deg);}
	.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {top: 0;}
	
/* Sub Menu */
.header .sub-menu{display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
	.header .search{display: none}	
	
	.header .language{display: flex; align-items: center;}
	.header .language li{display: inline-block;}
	.header .language a{color: #fff; text-decoration: none; margin: 0 15px;}
	.header .language a:hover{color: #e4d4b7}
	.header .language a.active{color:#bea577}
	.header .language li:first-child:after{content: ''; display: inline-block; width: 1px; height: 11px; background-color: rgb(255 255 255 / 30%); margin: 0;}
	
/*****CONTENT ABOVE THE FOLD*****/
/*Introduction*/
.introduction{margin: 50px 15px; font-family: Marcellus, Sans-serif; text-align: center; color: #502b3a}
.introduction h1{font-size: 3.4rem; margin: 20px 0;}
.introduction p{font-size: 2rem; line-height: 1.4; margin: 20px 0;}
.introduction p:last-child{margin-bottom: 0;}
.introduction .inner{width: 95%; margin: 0 auto}

/*Background: image and video*/
.background-image-and-video {display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px;}
.background-image-and-video .image {position: relative; height: 390px;}

	.col-image-1 { grid-area: 1 / 1 / 2 / 2;}
	.col-image-2 { grid-area: 1 / 2 / 2 / 3;}
	.col-image-3 { grid-area: 2 / 1 / 3 / 2;}
	.col-image-4 { grid-area: 2 / 2 / 3 / 3;}	

	.col-image-2:before{content: ''; display: block; position: absolute; background-color: #512b38; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7;}
	.background-image-and-video .overlay-content{position: absolute; font-size: 2.2rem; line-height: 1.4; color: #fff; width: 100%; padding: 60px; text-align: center; margin: 0;  top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
	
	.video-container{}
	.video-container .inner{position: absolute; overflow: hidden; z-index: 0;}
	.video-container .inner:before {z-index: 1}
	.video-container .video-js {width: 100% !important; height: 100% !important; margin-top: 0; overflow: hidden; object-fit: cover; object-position: center center;}
		
		.youtube-video-embed{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: none; width: 100%; height: 100%;}

/*Main Banner - Inside*/
.main-banner {position: relative; overflow: hidden; z-index: 1;}
.main-banner.inside, .main-banner.inside .image{width: 100%; height: 300px;}
.main-banner.inside .image{position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;}
.main-banner.inside .image:before{content: ''; background-color: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%;}
.main-banner.inside .content{position: absolute; margin: 0 auto; width: 100%; height: 100%;display: flex; justify-content: center; align-items: center; z-index: 1;}
.main-banner.inside .content h2{font-size: 3rem; color: #fff; text-shadow: 0px 0px 17px rgba(0, 0, 0, 0.3); text-align: center; text-transform: uppercase;}


/*scroll down arrow*/
.scrolldown-arrow a {padding-top: 50px; position: absolute; bottom: -20px; left: calc(50% - 30px); z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: #fff; font-size: 14px; text-align: center; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: opacity .3s;}
.scrolldown-arrow a:hover{opacity: 0.5; }
.scrolldown-arrow a span {position: absolute; top: 10px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb04 2s infinite; animation: sdb04 2s infinite; box-sizing: border-box;}

@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    -webkit-transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
  }
}

@keyframes sdb04 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
  }
  20% {
    transform: rotate(-45deg) translate(-10px, 10px);
  }
  40% {
    transform: rotate(-45deg) translate(0, 0);
  }
}

/*Main Banner*/
.main-banner.fullscreen, .main-banner.fullscreen .image, .main-banner.fullscreen .video {width: 100%; height: calc(100vh - 75px);}

/*404*/
.main-banner.fullscreen.pagenotfound .carousel-caption {margin: 0 auto; text-align: center; bottom: 15%;}
.main-banner.fullscreen.pagenotfound .carousel-caption h1 {font-size: 3.4rem; color: #fff;}
.main-banner.fullscreen.pagenotfound .carousel-caption .number {font-family: Arial, Helvetica, sans-serif; font-size: 16rem; line-height: 0.8; font-weight: 600; color: rgba(255, 255, 255, 0.1); text-align: center;}
.main-banner.fullscreen.pagenotfound .carousel-caption .btn-border-wh {margin: 0 auto;}
.main-banner.fullscreen.pagenotfound .image{position: relative}
	.main-banner.fullscreen.pagenotfound .image:before{content: ''; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%;}
	.pagenotfound .link {margin: 20px}
	.pagenotfound .link a{color: #fff; text-decoration: underline; position: relative}
	.pagenotfound .link a:hover{text-decoration: none}
	.pagenotfound .link a:after{content: '|'; color: rgba(255,255,255,0.2); margin: 0 15px;}
	.pagenotfound .link a:last-child:after{content: none}

/*Button*/
.btn-border-wh {padding: 20px 35px;}
.btn-border-wh, .btn-border-wh:hover {position: relative; background-color: transparent; border: 2px solid #fff; color: #fff;}
.btn-border-wh:before {position: absolute; top: calc(50% - 5px); left: 75%; content: ''; background: url(//storage.amari.com/icon/icon-arrow-right_wh.svg) no-repeat; display: inline-block; width: 17px; height: 13px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; opacity: 0;}
.btn-border-wh:hover:before {left: 85%; opacity: 1;}
.btn-border-wh:active:before {color: #fff;}

/*About Us - Two Column*/
.description-twocols{margin: 15px}
	.description-twocols .content{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; font-size: 2rem;}
	.description-twocols .image{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
	
	.description-twocols .content header{margin-bottom: 20px}
	.description-twocols h1{font-size: 3.4rem;}
	.description-twocols .content  .inner{margin: 15px;}
	
	/*Control*/	
	.description-twocols .carousel-control-prev, .description-twocols .carousel-control-next{bottom: 0; top: inherit; left: inherit; width: 60px; height: 60px; background: #fff;}
	.description-twocols .carousel-control-prev {right: 60px;}
	.description-twocols .carousel-control-next {right: 0px;}
	.description-twocols .carousel-control-prev-icon {
    background-image: url(https://cdn.onyx-hospitality.com/icon/arrow-left_bk-40.svg); width: 40px; height: 40px;}
	.description-twocols .carousel-control-next-icon {
    background-image: url(https://cdn.onyx-hospitality.com/icon/arrow-right_bk-40.svg); width: 40px; height: 40px;}

/*scrollUp*/
#scrollUp{position:absolute; right:5px; bottom:40px; background:rgba(228,224,230,0.6); width:50px; height:50px; border-radius:50%; transition: all 1s ease 0s; text-indent:-9999em; z-index:1;}
#scrollUp:before{content: ''; position: absolute; display: block; width: 19px; height: 19px; top: 50%; left: 50%; border-style: solid; border-color: #000; border-width: 1px 1px 0 0; transform-origin: 50% 50%; transform: rotate(-45deg); margin: -9px 0 0 -10px;}	
#scrollUp:after{content: ''; position: absolute; display: block; top: 50%; left: 50%; border-style: solid; border-color: #000; transform-origin: 50% 50%; width: 0; height: 22px; border-width: 0 1px 0 0; transform:translate(-1px, -12px);}
#scrollUp:hover{opacity:1}

@media (min-width: 768px) {
.show-mobile {display: none !important;}
.show-desktop {display: block !important;}
	
/*Background: image and video*/
.background-image-and-video {display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px;}
.background-image-and-video .image {position: relative; height: 345px;}
	.col-image-1 { grid-area: 1 / 1 / 2 / 2;}
	.col-image-2 { grid-area: 1 / 2 / 2 / 3;}
	.col-image-3 { grid-area: 1 / 3 / 2 / 4;}
	.col-image-4 { grid-area: 1 / 4 / 2 / 5;}
}

@media (min-width: 1024px) {
/*****HEADER*****/
.header {padding:15px;}
.header .logo{padding: 0 20px;}
.header .logo img{width: 100px}
.header li a{font-size: 1.5rem;}

.header .main-menu{width: 81%}
.header .menu {max-height: none; position: inherit;}
.header .menu-icon {display: none;}

.header .menu li{display: inline-block;}
.header .menu li a {padding: 10px; color: #fff}
	.header .menu li a.active {color: rgba(255, 255, 255, 0.5);}
	.header .menu li a:hover,	.header .menu-btn:hover {color: #e4e0e6}
.header .menu-btn:checked ~ .menu{background-color: transparent;}	

.header .menu {order: 1; flex-grow:8}
.header .sub-menu {order: 2;}

	.header .search {display: inline-block; margin: 0 40px}
	.header .search img {width: 20px; height: 20px}	
	
/*****CONTENT ABOVE THE FOLD*****/	
/*Introduction*/
.introduction .inner{width: 70%;}
.introduction h1{font-size: 5rem;}
	
/*Background: image and video*/
.background-image-and-video .image {height: 450px;}	
	
/*Main Banner - Inside*/
.main-banner.inside, .main-banner.inside .image{height: 500px;}
.main-banner.inside .content h2{font-size: 5rem;}

.main-banner.fullscreen, .main-banner.fullscreen .image, .main-banner.fullscreen .video {height: calc(100vh - 75px);}
	
/*pagenotfound*/
.main-banner.fullscreen.pagenotfound .carousel-caption{bottom: 10%}
.main-banner.fullscreen.pagenotfound .carousel-caption h2.number {font-size: 26rem; margin: 0} 
.main-banner.fullscreen.pagenotfound .carousel-caption h1 {font-size: 5rem;} 

}
@media (min-width: 1200px) {
/*****CONTENT ABOVE THE FOLD*****/
/*Introduction*/
.introduction .inner{width: 60%;}
	
/*About Us - Two Column*/
.description-twocols{margin: 100px 30px}
	.description-twocols h1{font-size: 4.8rem;}
	.description-twocols .content{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
	.description-twocols .image{-ms-flex: 0 0 0 50%; flex: 0 0 50%; max-width: 50%;}	
	.description-twocols .content .inner{margin: 0 50px 0 0}
}
@media (min-width: 1440px) {
.container{max-width: 1380px;}
/*****HEADER*****/
.header {padding: 15px 30px;}
.header .logo img{width: 155px}
.header .main-menu{width: 78%}
.header li a{font-size: 1.7rem;}
.header .menu li a {padding: 25px;}

/*****CONTENT ABOVE THE FOLD*****/
/*Background: image and video*/
.background-image-and-video .overlay-content{font-size: 3.8rem; line-height: 1.4;}
.background-image-and-video .image {height: 720px;}

.description-twocol .detail{font-size: 2.4rem;}
	
/*Main Banner - Inside*/
.main-banner.inside, .main-banner.inside .image{height: 700px;}
.main-banner.inside .content h2	{font-size: 7rem;}

.main-banner.fullscreen, .main-banner.fullscreen .image, .main-banner.fullscreen .video {height: calc(100vh - 108px);}
    .main-banner.fullscreen.pagenotfound .carousel-caption {bottom: 20%;}
/*About Us - Two Column*/
.description-twocols .content .inner{margin: 0 100px}

.introduction p{font-size: 2.2rem; line-height: 1.4;}
}
@media (min-width: 1680px) {
.container{max-width: 1600px;}
.header .main-menu{width: 70%}
	
/*****CONTENT ABOVE THE FOLD*****/
}