/* @import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap'); */

body {
    color: #6E6259;
    /* overflow: hidden; */
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    background: #FFF;
    cursor: default;
    /* overflow: hidden */
}

/* @font-face {
    font-family: 'Silk Serif';
    src: url('../fonts/silk-serif-extralight.woff2') format('woff2'),
        url('../fonts/silk-serif-extralight.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-Light.woff2') format('woff2'),
        url('../fonts/Cormorant-Light.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-Medium.woff2') format('woff2'),
        url('../fonts/Cormorant-Medium.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-Regular.woff2') format('woff2'),
        url('../fonts/Cormorant-Regular.woff') format('woff');
    font-weight: 600;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-SemiBold.woff2') format('woff2'),
        url('../fonts/Cormorant-SemiBold.woff') format('woff');
    font-weight: 700;
}

@font-face {
    font-family: 'Cormorant';
    src: url('../fonts/Cormorant-Bold.woff2') format('woff2'),
        url('../fonts/Cormorant-Bold.woff') format('woff');
    font-weight: 800;
} */

/* Bodoni FLF */
@font-face {
    font-family: 'Bodoni FLF';
    src: url('../fonts/BodoniFLF-Roman.woff2') format('woff2'),
        url('../fonts/BodoniFLF-Roman.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Bodoni FLF';
    src: url('../fonts/BodoniFLF-Italic.woff2') format('woff2'),
        url('../fonts/BodoniFLF-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Bodoni FLF';
    src: url('../fonts/BodoniFLF-Bold.woff2') format('woff2'),
        url('../fonts/BodoniFLF-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Bodoni FLF';
    src: url('../fonts/BodoniFLF-BoldItalic.woff2') format('woff2'),
        url('../fonts/BodoniFLF-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

/* Montserrat */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Thin.woff2') format('woff2'),
        url('../fonts/Montserrat-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ThinItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ExtraLight.woff2') format('woff2'),
        url('../fonts/Montserrat-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ExtraLightItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.woff2') format('woff2'),
        url('../fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-LightItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
        url('../fonts/Montserrat-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Italic.woff2') format('woff2'),
        url('../fonts/Montserrat-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2'),
        url('../fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-MediumItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('../fonts/Montserrat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2'),
        url('../fonts/Montserrat-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-BoldItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ExtraBold.woff2') format('woff2'),
        url('../fonts/Montserrat-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Black.woff2') format('woff2'),
        url('../fonts/Montserrat-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-BlackItalic.woff2') format('woff2'),
        url('../fonts/Montserrat-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}

/* Playfair Display */
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Medium.woff2') format('woff2'),
        url('../fonts/PlayfairDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Italic.woff2') format('woff2'),
        url('../fonts/PlayfairDisplay-Italic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Bold.woff2') format('woff2'),
        url('../fonts/PlayfairDisplay-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-BoldItalic.woff2') format('woff2'),
        url('../fonts/PlayfairDisplay-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-ExtraBold.woff2') format('woff2'),
        url('../fonts/PlayfairDisplay-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/PlayfairDisplay-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Black.woff2') format('woff2'),
        url('../fonts/PlayfairDisplay-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-BlackItalic.woff2') format('woff2'),
        url('../fonts/PlayfairDisplay-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}

body::-webkit-scrollbar {
    display: none
}

body * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none
}

body.exiting {
    opacity: 0;
    -webkit-transition: -webkit-transform 1000ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1000ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1)
}

.img {
    width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: #333
}

p>a {
    text-decoration: underline
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.above {
    z-index: 2;
    position: relative
}

.uppercase {
    text-transform: uppercase
}

.capitalize {
    text-transform: capitalize
}

.lowercase {
    text-transform: lowercase
}

.fit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform
}

.fit.bottom {
    object-position: bottom
}

.fit.top {
    object-position: top
}

.fit.left {
    object-position: left
}

.fit.right {
    object-position: right
}

.no_events {
    pointer-events: none
}

.no_opacity {
    opacity: 0 !important;
    pointer-events: none
}

.invisible {
    visibility: hidden
}

.no_opacity.show,
.show .no_opacity {
    opacity: 1 !important;
    pointer-events: all
}

.no_transition {
    transition: none !important
}

.no_width {
    transform: scale(0, 1);
    pointer-events: none
}

.no_height {
    transform: scale(1, 0);
    pointer-events: none
}

.no_overflow {
    overflow: hidden
}

.top_hidden {
    -webkit-transform: translateY(101%);
    transform: translateY(101%)
}

.top_low {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0
}

.top_ultralow {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    opacity: 0
}

.top_single {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0
}

.top_double {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0
}

.left_single {
    -webkit-transform: translateX(25px);
    transform: translateX(25px);
    opacity: 0
}

.left_double {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0
}

.top_translated {
    -webkit-transform: translateY(25vw);
    transform: translateY(25vw)
}

.top_translated.less {
    -webkit-transform: translateY(10vw);
    transform: translateY(10vw)
}

.top_translated.full {
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh)
}

.scaled {
    transform: scale(1.03)
}

.top_double.show,
.show .top_double,
.top_single.show,
.show .top_single,
.top_low.show,
.show .top_low,
.top_ultralow.show,
.show .top_ultralow,
.left_single.show,
.left_double.show,
.show .left_single,
.show .left_double,
.scaled.show,
.show .scaled {
    -webkit-transform: none;
    transform: none;
    opacity: 1
}

.top_hidden.show,
.top_translated.show,
.show .top_hidden,
.show .top_translated,
.no_width.show,
.show .no_width,
.no_height.show,
.show .no_height {
    -webkit-transform: none;
    transform: none;
    pointer-events: all
}

.t_container {
    transform: translateX(0);
    height: 100%
}

.t_container:nth-child(2) {
    transition-delay: 100ms
}

.mask_left {
    transform: translateX(50%);
    display: block
}

.mask_left.full {
    transform: translateX(-100%)
}

.mask_left .t_container {
    transform: translateX(-100%);
    display: block
}

.mask_left.full .t_container {
    transform: translateX(100%)
}

.t_container img {
    transform: scale(1.05)
}

.mask_right {
    transform: translateX(-50%)
}

.mask_right .t_container {
    transform: translateX(100%)
}

.mask_right.full {
    transform: translateX(100%)
}

.mask_right.full .t_container {
    transform: translateX(-100%)
}

.mask_top {
    transform: translateY(-50%)
}

.mask_top .t_container {
    transform: translateY(50%)
}

.mask_top.full {
    transform: translateY(-100%)
}

.mask_top .t_container {
    transform: translateY(100%)
}

.mask_bottom {
    transform: translateY(50%)
}

.mask_bottom .t_container {
    transform: translateY(-50%)
}

.mask_bottom.full {
    transform: translateY(100%)
}

.mask_bottom.full .t_container {
    transform: translateY(-100%)
}

.mobileOnly {
    display: none !important
}

.show>.mask_bottom,
.show>.mask_left,
.show>.mask_left .t_container,
.show>.mask_left .t_container img,
.show>.mask_right,
.show>.mask_right .t_container,
.show>.mask_right .t_container img,
.show>.mask_top,
.show>.mask_top .t_container,
.show>.mask_top .t_container img,
.show>.mask_bottom,
.show>.mask_bottom .t_container,
.show>.mask_bottom .t_container img {
    transform: none
}

.transition_all {
    transition-property: all !important
}

.has_transition_5000 {
    -webkit-transition: -webkit-transform 5000ms cubic-bezier(.19, 1, .22, 1), opacity 5000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 5000ms cubic-bezier(.19, 1, .22, 1), opacity 5000ms cubic-bezier(.19, 1, .22, 1)
}

.has_transition_3000 {
    -webkit-transition: -webkit-transform 3000ms cubic-bezier(.19, 1, .22, 1), opacity 3000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 3000ms cubic-bezier(.19, 1, .22, 1), opacity 3000ms cubic-bezier(.19, 1, .22, 1)
}

.has_transition_2000 {
    -webkit-transition: -webkit-transform 2000ms cubic-bezier(.19, 1, .22, 1), opacity 2000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 2000ms cubic-bezier(.19, 1, .22, 1), opacity 2000ms cubic-bezier(.19, 1, .22, 1)
}

.has_transition_1500 {
    -webkit-transition: -webkit-transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1)
}

.has_transition_1000 {
    -webkit-transition: -webkit-transform 1000ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1000ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1)
}

.has_transition_800 {
    -webkit-transition: -webkit-transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1)
}

.has_transition_400 {
    -webkit-transition: -webkit-transform 400ms cubic-bezier(.19, 1, .22, 1), opacity 400ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 400ms cubic-bezier(.19, 1, .22, 1), opacity 400ms cubic-bezier(.19, 1, .22, 1)
}

.has_transition_2000_inout {
    -webkit-transition: -webkit-transform 2000ms cubic-bezier(.575, .005, .285, 1.005), opacity 2000ms cubic-bezier(.575, .005, .285, 1.005);
    transition: transform 2000ms cubic-bezier(.575, .005, .285, 1.005), opacity 2000ms cubic-bezier(.575, .005, .285, 1.005)
}

.has_transition_1500_inout {
    -webkit-transition: -webkit-transform 1500ms cubic-bezier(.575, .005, .285, 1.005), opacity 1500ms cubic-bezier(.575, .005, .285, 1.005);
    transition: transform 1500ms cubic-bezier(.575, .005, .285, 1.005), opacity 1500ms cubic-bezier(.575, .005, .285, 1.005)
}

.has_transition_1000_inout {
    -webkit-transition: -webkit-transform 1000ms cubic-bezier(.575, .005, .285, 1.005), opacity 1000ms cubic-bezier(.575, .005, .285, 1.005);
    transition: transform 1000ms cubic-bezier(.575, .005, .285, 1.005), opacity 1000ms cubic-bezier(.575, .005, .285, 1.005)
}

.show .d50,
.show.d50 {
    transition-delay: 50ms
}

.show .d100,
.show.d100 {
    transition-delay: 100ms
}

.show .d150,
.show.d150 {
    transition-delay: 150ms
}

.show .d200,
.show.d200 {
    transition-delay: 200ms
}

.show .d250,
.show.d250 {
    transition-delay: 250ms
}

.show .d300,
.show.d300 {
    transition-delay: 300ms
}

.show .d350,
.show.d350 {
    transition-delay: 350ms
}

.show .d400,
.show.d400 {
    transition-delay: 400ms
}

.show .d450,
.show.d450 {
    transition-delay: 450ms
}

.show .d500,
.show.d500 {
    transition-delay: 500ms
}

.show .d550,
.show.d550 {
    transition-delay: 550ms
}

.show .d600,
.show.d600 {
    transition-delay: 600ms
}

.show .d650,
.show.d650 {
    transition-delay: 650ms
}

.show .d700,
.show.d700 {
    transition-delay: 700ms
}

.show .d750,
.show.d750 {
    transition-delay: 750ms
}

.show .d800,
.show.d800 {
    transition-delay: 800ms
}

.show .d900,
.show.d900 {
    transition-delay: 900ms
}

.show .d950,
.show.d950 {
    transition-delay: 950ms
}

.show .d1000,
.show.d1000 {
    transition-delay: 1000ms
}

.show .d1050,
.show.d1050 {
    transition-delay: 1050ms
}

.show .d1100,
.show.d1100 {
    transition-delay: 1100ms
}

.show .d1150,
.show.d1150 {
    transition-delay: 1150ms
}

.show .d1200,
.show.d1200 {
    transition-delay: 1200ms
}

.show .d1250,
.show.d1250 {
    transition-delay: 1250ms
}

.show .d1300,
.show.d1300 {
    transition-delay: 1300ms
}

.show .d1350,
.show.d1350 {
    transition-delay: 1350ms
}

.show .d1400,
.show.d1400 {
    transition-delay: 1400ms
}

.show .d1500,
.show.d1500 {
    transition-delay: 1500ms
}

.show .d1600,
.show.d1600 {
    transition-delay: 1600ms
}

.show .d1700,
.show.d1700 {
    transition-delay: 1700ms
}

.show .d1800,
.show.d1800 {
    transition-delay: 1800ms
}

.show .d1900,
.show.d1900 {
    transition-delay: 1900ms
}

.show .d2000,
.show.d2000 {
    transition-delay: 2000ms
}

.show .d2100,
.show.d2100 {
    transition-delay: 2100ms
}

.show .d2200,
.show.d2200 {
    transition-delay: 2200ms
}

.show .d2300,
.show.d2300 {
    transition-delay: 2300ms
}

.show .d2400,
.show.d2400 {
    transition-delay: 2400ms
}

.show .d2500,
.show.d2500 {
    transition-delay: 2500ms
}

.full_width {
    width: 100%;
    height: auto
}

.full_height {
    height: 100%;
    width: auto
}

.block {
    display: block
}

span.block {
    will-change: transform
}

.inline_block {
    display: inline-block;
    will-change: transform
}

.centered {
    text-align: center
}

.flex {
    display: flex
}

.bWhite {
    background: #FFF
}

.bAlyssum {
    background: #EAE6E0
}

.bTortora {
    background: #483728;
}

.bFango {
    background: #B6ADA5
}

.bArgilla {
    background: #8C8279
}

.bMarrone {
    background: url(../images/diningbg.webp) #483728;
    background-position: center;
    background-size: contain;
}

.bGreige {
    background: url(../images/award-bg.webp) #000000;
    background-position: center;
    background-size: contain;
}

.bPink {
    background: #eac0b5
}

.bWater {
    background: #7dc5ca
}

.bLilla {
    background: #f8f1ef
}

.cWhite {
    color: #F2ECE5
}

/* .cAlyssum {
    color: #55200c;
} */

.cTortora {
    color: #D7D2CB
}

.cFango {
    color: #B6ADA5
}

/* .cArgilla {
    color: #c26d19;
} */

.cMarrone {
    color: #483728;
}

.cGreige {
    color: #a39b85
}

.mobileArrow {
    display: none
}

.bGreen {
    background: #dee1d0
}

.bVermarine {
    background: #dde9e5
}

.bVermarineGreen {
    background: #a3b5ad
}

section {
    position: relative;
    width: 100%;
    display: flex
}

article {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden
}

.halfMargin {
    margin-top: 2.5vw
}

.margin {
    margin-top: 5vw
}

.doubleMargin {
    margin-top: 10vw
}

.tripleMargin {
    margin-top: 15vw;
    z-index: 21;
}

.layerUpdate {
    position: absolute;
    top: 0
}

#hTop {
    position: relative;
    height: 200vh;
    background: url(../images/cover-banner.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
}

#hElementsLayer {
    height: 100vh;
    width: 100%;
    position: absolute;
    left: 0;
    will-change: transform;
    z-index: 1;
    pointer-events: none;
}


#hImgCover::after {
    content: '';
    position: absolute;
    height: 100%;
    left: 0;
    width: 100%;
    z-index: 1;
    background: linear-gradient(0deg, #14213d8a, transparent);
    bottom: 0;
    pointer-events: none;
}

#scrollDown {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    bottom: 10%;
    left: 50%;
    width: fit-content;
    text-align: center;
    transform: translate(-50%, -50%);
}

.scrollDownText {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .5px;
    margin-top: 12px;
    color: #fff;
    /* text-shadow: 0.1px 0.1px #fff; */
}

#verticalArrow {
    width: 10px
}

svg * {
    will-change: transform
}

#hImgContainer {
    height: 100vh;
    opacity: 0;
    width: 100vw
}

#hImgContainer.show {
    opacity: 1;
    transform: scale(1)
}

#hImgLayer {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0
}

#hImgCover {
    height: 100%;
    overflow: hidden;
    width: 190vw;
    position: relative;
}

#hImgCover::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #14213d8a, transparent);
    z-index: 9;
    pointer-events: none;
}

#hImg {
    width: 100vw
}

#hTarget {
    position: absolute;
    top: 100vh;
    height: 50vh
}

#hPay {
    position: relative;
}

#hPay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../images/about-bg.png);
    z-index: -1;
    opacity: 0.17 !important;
    background-position: bottom center;
    filter: hue-rotate(324deg);
}

#hPayTarget {
    position: absolute;
    top: 50vh;
    height: calc(100% - 50vh)
}

#hPayLayer {
    font-family: Geometria;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column
}

#hPayLayer span {
    will-change: transform;
}

#payLook {
    font-family: 'Playfair Display';
    font-style: normal;
    font-size: 9vw;
    font-weight: 400;
    margin-left: 5vw;
    /* height: 16vh; */
    margin-top: 3vh;
    display: flex;
    position: relative;
    align-items: center;
    color: #483728;
    letter-spacing: 15px;
}


#payLimits {
    font-family: 'Montserrat';
    font-style: normal;
    font-size: 1.5vw;
    font-weight: 400;
    position: absolute;
    top: calc(50% + 4vw);
    left: 21vw;
    color: #6B5D4C;
    letter-spacing: 4px;
}

.cr {
    font-family: 'Montserrat' !important;
    font-style: normal !important;
    font-size: 1.5vw !important;
    font-weight: 400 !important;
    position: static !important;
    /* top: calc(50% + 3vw) !important; */
    left: 21vw;
    color: #6B5D4C !important;
    letter-spacing: 4px !important;
    margin-left: 5vw;
}

#hStrip {
    width: 75vw;
    margin-top: 2.5vw;
    height: 20vh
}

#hImgStrip {
    top: -35%;
    height: 150%
}

#payFind {
    font-size: 5.5vw;
    font-weight: 300;
    margin-right: 7.5vw;
    align-self: flex-end;
    margin-top: -5vw
}

#payPerfection {
    font-size: 7vw;
    margin-top: .5vw;
    font-weight: 300;
    margin-right: 7.5vw;
    align-self: flex-end
}

#hLogo {
    width: fit-content;
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: all;
    transform: translate(-50%, -50%);
}

#hLogo h1 {
    font-family: 'Playfair Display';
    font-size: 110px;
    font-size: 7.5vw;
    line-height: 92%;
    color: #fff;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

#hLogo .fillColor,
#navLogo .fillColor {
    fill: #FFF
}

#hLogo .logoLine {
    transform-origin: center
}

header {
    position: fixed;
    top: 0;
    left: 0;
    padding-right: 20px;
    z-index: 9;
    display: flex;
    align-items: center;
    height: 90px;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    pointer-events: none
}

#headerShowTarget {
    position: absolute;
    top: 105vh
}

#headerHideTarget {
    position: absolute;
    top: 110vh
}

#textSwitch {
    position: absolute;
    z-index: 1;
    bottom: 30px;
    right: 2vw
}

#mainLogo {
    width: 145px;
    display: flex;
    align-items: center;
    margin-left: 0;
    margin-top: 12px;
}

/* #mainLogo img {
    filter: contrast(1.1) brightness(1) drop-shadow(0px 0px 8px #4837289c);
} */

#mainLogo.hidden,
#mainLogo.menuForced {
    transform: translateY(-110px)
}

#mainLogo .fillColor {
    fill: #FFF
}

#mainLogo.dark .fillColor {
    fill: #a39b85
}

#mainMenuController {
    width: 7.75vw;
    height: 40px;
    will-change: transform;
    cursor: pointer;
    z-index: 1;
    position: relative
}

#menuClose {
    width: 38px;
    height: 38px;
    top: 26px;
    left: 55px;
    z-index: 1
}

#mainMenuController:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: goldenrod;
    left: calc(50% - 30px);
    opacity: 0;
    top: -10px;
    border-radius: 50px;
    transform: scale(.2);
    -webkit-transition: -webkit-transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 600ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 600ms cubic-bezier(.19, 1, .22, 1);
    z-index: -1
}

#mainMenuController.show:hover:after {
    transform: scale(1);
    opacity: .7
}

.menuLines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

@media all and (min-width:961px) {
    #mainMenuController.show:hover .line {
        background: #55200c;
        transition: background 1000ms cubic-bezier(.19, 1, .22, 1), fill 1000ms cubic-bezier(.19, 1, .22, 1), transform 1500ms cubic-bezier(.19, 1, .22, 1);
        transition-delay: 0ms !important
    }
}

.quickColor {
    transition: background 1000ms cubic-bezier(.19, 1, .22, 1), fill 1000ms cubic-bezier(.19, 1, .22, 1);
    transition-delay: 0ms !important
}

.menuController .line {
    width: 40px;
    height: 1px;
    background: #FFF
}

.menuController .fillColor,
.headerButton .circlePath .fillColor {
    stroke: #FFF
}

.menuController .line {
    margin-top: 4px
}

.menuController .line._1 {
    margin-top: 0
}

.menuController .line._2 {
    transition-delay: 50ms
}

.menuController .line._3 {
    transition-delay: 100ms
}

.menuController.dark .line {
    background: #55200c;
}

.circlePath {
    width: 38px;
    height: 38px;
    transform: scale(.5);
    opacity: 0
}

.show .circlePath {
    transform: scale(1);
    opacity: 1
}

.headerButton.dark .circlePath circle {
    stroke: #55200c;
}

.headerButton.dark .icon .fillColor {
    fill: #9c998f;
}

.headerButton .icon {
    transform: scale(.5);
    opacity: 0;
    z-index: 1
}

.show .icon {
    transform: scale(1);
    opacity: 1
}

.headerButton.hidden {
    transform: translateY(-65px)
}

.headerButton:hover .circlePath circle {
    stroke: #a39b85;
    fill: #FFF
}

.headerButton:hover .icon path {
    fill: #a39b85
}

header .ig {
    margin-top: 0;
    margin-right: 15px
}

header .fb {
    margin-top: 0;
    margin-right: 15px
}

header .langsContainer {
    /* position: absolute; */
    left: calc(12.75vw + 172px + (12.75vw - 40px) / 2);
}

header .langsContainer.shifted {
    /* transform: translateX(calc(-2.75vw - (7.75vw - 40px) / 2 + 172px)) */
}

.langsContainer a {
    font-family: 'Playfair Display';
    color: #fff;
    font-size: 1.04vw;
    text-transform: capitalize;
    transition: color 1000ms cubic-bezier(.19, 1, .22, 1), fill 1000ms cubic-bezier(.19, 1, .22, 1);
}

header .langsContainer a {
    font-weight: 500
}

.langsContainer.dark a {
    color: #6B5D4C;
}

.langsContainer.dark .lang-item:before,
.langsContainer.dark .lang-item:after {
    background: #a39b85
}

.langs {
    display: flex
}

.lang-item {
    margin-left: 50px;
    position: relative;
    -webkit-transition: -webkit-transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    opacity: 0
}

.langsContainer.show .lang-item {
    opacity: 1
}

.lang-item:nth-child(2) {
    transition-delay: 50ms
}

.lang-item:nth-child(3) {
    transition-delay: 100ms
}

.lang-item:nth-child(4) {
    transition-delay: 150ms
}

.lang-item:nth-child(5) {
    transition-delay: 200ms
}

.lang-item:nth-child(6) {
    transition-delay: 250ms
}

.lang-item:nth-child(7) {
    transition-delay: 300ms
}

.lang-item:nth-child(8) {
    transition-delay: 350ms
}

/* .lang-item:before {
    content: '';
    position: absolute;
    height: 14px;
    width: 1px;
    right: -25px;
    background: #FFF;
    top: 62%;
    margin-top: -6px;
    transition: background 1000ms cubic-bezier(.19, 1, .22, 1), fill 1000ms cubic-bezier(.19, 1, .22, 1)
} */

.lang-item:after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
    background: #FFF;
    bottom: 0;
    transform: scale(0, 1);
    transform-origin: left;
    -webkit-transition: -webkit-transform 1000ms cubic-bezier(.19, 1, .22, 1), all 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1000ms cubic-bezier(.19, 1, .22, 1), all 1000ms cubic-bezier(.19, 1, .22, 1)
}

.lang-item:hover:after {
    transform: scale(1)
}

.current-lang:after {
    transform: scale(1)
}

.lang-item:last-child:before {
    content: none
}

.lang-item:first-child {
    margin-left: 0
}

.langsContainer.hidden .lang-item {
    transform: translateY(-65px)
}

#hVideoLayer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scale(.5);
    transform-origin: right;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    cursor: pointer;
    z-index: 1
}

#hVideoLayer video {
    transition: all 1000ms cubic-bezier(.19, 1, .22, 1) !important;
    width: 100%;
    height: 100%;
    top: 0%;
    right: 0%;
    position: absolute;
    object-fit: cover;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    clip-path: inset(50% round 0);
    -webkit-clip-path: inset(50% round 0)
}

#hVideoLayer.open {
    transform: scale(1) !important;
    -webkit-transition: -webkit-transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1)
}

#hVideoLayer.open video {
    clip-path: inset(0 0 0 0 round 0) !important;
    -webkit-clip-path: inset(0 0 0 0 round 0) !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important
}

.mainContainer {
    margin: 0 auto;
    width: calc(100% - 12.5vw);
}

.oButton {
    position: relative;
    height: 36px;
    margin-right: 24px;
    cursor: pointer;
    will-change: transform
}

.oBackground {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 20px;
    background: #FFF
}

.oOuter {
    position: absolute;
    width: 53.5px;
    right: 0
}

.oOuter .fill {
    opacity: 0
}

.oButton.dark .oOuter .fill {
    opacity: 1
}

.oOuter.fillColor {
    stroke: #FFF;
    fill: #FFF
}

.oContent {
    height: 100%;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background-color: #483728;
    overflow: hidden;
}

.oContent .oBackground {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 20px;
    background: #483728;
    border: 1px solid #BDAC9A
}

.oContent .oLabel {
    color: #BDAC9A;
    font-weight: 600;
    font-family: 'Montserrat';
    padding: 10px;
}

.transparent .oContent {
    background: none
}

.oLabelContainer {
    z-index: 1
}

.oLabel {
    font-family: 'Geometria';
    font-size: 16px;
}

.oLabel.bigger {
    font-size: 16px
}

.oSymbol {
    position: absolute;
    right: -12px;
    top: 5px;
    color: #6B5D4C;
}

.oArrow {
    width: 8px;
    transform: rotateZ(45deg)
}

.oArrow.fillColor {
    fill: #9c998f
}

.oButton .oArrow {
    opacity: 0
}

.oButton.open .oOuter {
    transform: translateX(24px)
}

.oButton.open .oArrow {
    transform: none;
    opacity: 1
}

.oButton.dark .oBackground {
    background: #483728;
    border: 1px solid #BDAC9A;
}

.oButton.dark .oContent {
    background: #483728;
}

.oButton.dark .oArrow.fillColor {
    fill: #9c998f
}

#bookNow.dark .oSymbol .fillColor,
#reserveTable.dark .oSymbol .fillColor {
    fill: #9c998f
}

#bookNow.dark:hover .oSymbol .fillColor,
#reserveTable.dark:hover .oSymbol .fillColor {
    fill: #BDAC9A;
}

#reserveTable {
    position: absolute;
    top: 80px;
    right: 20px
}

.oButton.dark .oOuter.fillColor {
    stroke: #928474;
    fill: #9c998f
}

.oButton.dark .oLabel {
    color: #BDAC9A;
    transition-delay: 0ms;
}

.oButton.fullWhite .oSymbol .fillColor {
    fill: #6e6259
}

.oButton.whiteArrow .oSymbol .fillColor {
    fill: #BDAC9A
}

.oButton.whiteArrow:hover .oSymbol .fillColor {
    fill: #BDAC9A
}

.oButton.forceWhite .oOuter .fill {
    opacity: 1 !important
}

.oButton.fullWhite {
    overflow: hidden;
    width: 70px
}

.oButton.fullWhite.right .oSymbol {
    right: 10px;
    transform: translateX(20px)
}

.oButton.fullWhite.left .oSymbol {
    left: 6px;
    transform: translateX(-20px)
}

.oButton.fullWhite.show .oSymbol {
    transform: none
}

.oButton.fullWhite.right .oArrow {
    transform: rotateZ(45deg)
}

.oButton.fullWhite.left .oArrow {
    transform: rotateZ(-135deg)
}

.oButton.fullWhite .oOuter,
.oButton.bordered .oOuter {
    display: none
}

.oButton:hover .oBackground {
    transform: translateX(23px)
}

.oButton:hover .oArrow {
    fill: #9c998f;
    transform: rotateZ(-45deg) translateX(-3px) translateY(-3px)
}

.oButton.dark:hover .oArrow {
    fill: #FFF
}

.oButton.bordered {
    border-radius: 25px;
    border: 1.5px solid #8c8279
}

#navigationTrack.bordered .oSymbol {
    display: none
}

.oButton.bordered .oContent {
    padding: 0 20px
}

.oButton.bordered .oArrow {
    transform: rotateZ(45deg)
}

.oButton.bordered .oSymbol {
    right: -30px
}

.oButton.bordered:hover .oBackground {
    transform: none
}

.oButton.download .oArrow {
    transform: rotateZ(135deg)
}

.callerTop {
    position: absolute;
    top: 0
}

.callerBottom {
    position: absolute;
    bottom: 0
}

#leftHeader {
    display: flex;
    align-items: center;
    pointer-events: all
}

#centerHeader {
    display: flex !important;
    justify-content: center;
    align-items: center;
    pointer-events: all;
}

#rightHeader {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: all
}

.headerButton {
    width: 38px;
    height: 38px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.headerButton.menuForced,
.langsContainer.menuForced .lang-item {
    transform: none !important
}

.langsContainer.menuForced .lang-item a {
    color: #BDAC9A;
}

.langsContainer.menuForced .lang-item:before,
.langsContainer.menuForced .lang-item:after {
    background: #BDAC9A;
}

.headerButton .icon .fillColor {
    fill: #FFF
}

.email {
    margin-right: 16px
}

.mobile {
    margin-right: 15px;
    display: none
}

.mobile .icon {
    width: 46%
}

.email .icon {
    width: 14px
}

.headerButton .circlePath {
    position: absolute;
    left: 0;
    top: 0
}

#brownies {
    position: absolute;
    height: 50px;
    bottom: 35px;
    margin: 0 2.8vw;
    z-index: 1
}

#brownies.hidden {
    transform: translateX(-6vw)
}

.brownie {
    height: 200px;
    position: absolute;
    width: 546px;
    bottom: 0;
    left: 50px
}

.brownieBack {
    background: #a8a297;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 800ms cubic-bezier(.19, 1, .22, 1), opacity 400ms cubic-bezier(.19, 1, .22, 1);
    transition: all 800ms cubic-bezier(.19, 1, .22, 1), opacity 400ms cubic-bezier(.19, 1, .22, 1)
}

.brownie.closed .brownieBack {
    border-radius: 50px;
    width: 50px;
    height: 50px;
    transform: translateX(23px) translateY(75px) scale(.5);
    opacity: 0
}

#cookieBrownie.closed .brownieBack {
    transform-origin: 67% 37%
}

#cookieBrownie .brownieButton {
    text-decoration: underline
}

#cookieBrownie.opened {
    height: 270px
}

.cookiePrefs {
    display: none
}

#cookieBrownie.opened .cookiePrefs {
    display: block
}

.cookiePrefs ul {
    margin-top: 10px;
    display: flex;
    width: 82%;
    justify-content: space-between
}

.cookiePrefs input {
    display: none
}

.cookiePrefs label {
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position: -4px -1px;
    padding-top: 5px;
    padding-bottom: 6px;
    cursor: pointer;
    background-image: url(../../../../../../themes/khaas-bagh/assets/images/whitechecks.png);
    display: inline;
    vertical-align: baseline;
    font-family: Geometria;
    font-size: 12px;
    color: #FFF
}

.cookiePrefs input[type=checkbox]:checked+label {
    background-position: -4px -26px
}

#newsLetterBrownie.closed .brownieBack {
    transform-origin: 44%
}

#covidBrownie.closed .brownieBack {
    transform-origin: 60% 35%
}

#cookieBrownie.closed:hover .brownieBack {
    transform: translateX(27px) translateY(72px) scale(1);
    opacity: 1
}

#newsLetterBrownie.closed:hover .brownieBack {
    transform: translateX(21px) translateY(74px) scale(1);
    opacity: 1
}

#covidBrownie.closed:hover .brownieBack {
    transform: translateX(25px) translateY(71px) scale(1);
    opacity: 1
}

#cookieBrownie.closed {
    transform: translateX(-83px) translateY(93px)
}

#newsLetterBrownie.closed {
    transform: translateX(-77px) translateY(1px)
}

#covidBrownie.closed {
    transform: translateX(-81px) translateY(-84px)
}

.brownieContentLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 15px 0 15px 0;
    box-sizing: border-box
}

#cookieBrownie .brownieContentLayer {
    align-items: center;
    justify-content: center
}

.brownieIcoContainer {
    width: 93px;
    display: flex;
    align-items: center;
    justify-content: center
}

.brownieIcoContainer.hidden {
    transform: translateX(calc(-2.8vw - 30px))
}

.brownieContent {
    flex: 1;
    padding-right: 20px;
    box-sizing: border-box;
    overflow: auto;
    margin-right: 30px;
    transition-delay: 300ms
}

.brownieContent::-webkit-scrollbar {
    width: 0
}

.brownieContent::-webkit-scrollbar-track {
    border-radius: 25px;
    height: 5px
}

.brownieContent::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
    height: 5px
}

#cookieBrownie .brownieContent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}

.brownieText {
    font-family: 'Geometria';
    font-size: 12px
}

.brownieButtons .fillColor {
    fill: #FFF
}

#newsLetterBrownie .brownieText {
    margin-top: 20px
}

.brownieTitle {
    font-family: Notera;
    font-size: 40px;
    line-height: 30px
}

.brownieButtons {
    display: flex;
    width: 90%;
    justify-content: space-between
}

.brownieButton {
    font-family: Geometria;
    font-size: 12px;
    cursor: pointer
}

.brownieButton .oArrow {
    transform: none;
    margin-left: 10px
}

.brownie .brownieIco svg .fillColor {
    fill: #FFF
}

.brownie.closed .brownieContent {
    opacity: 0;
    transition-delay: 0ms;
    transition-duration: 0ms
}

.brownie.closed .brownieIco {
    pointer-events: all;
    padding: 10px;
    cursor: pointer;
    transform: scale(.9)
}

.brownie.closed {
    pointer-events: none
}

.brownie .brownieIco svg {
    width: 35px
}

#newsLetterBrownie .brownieIco svg {
    width: 23px
}

#covidBrownie .brownieIco svg {
    width: 32px;
    margin-left: 9px;
    height: 32px
}

#covidBrownie .brownieClose {
    right: -25px
}

#covidBrownie .brownieContent {
    margin-right: 0;
    padding: 0;
    margin-left: 0;
    position: absolute;
    top: 0;
    border-radius: 20px;
    overflow: visible
}

#covidBrownie img {
    border-radius: 20px
}

#covidBrownie:not(.closed) .brownieBack {
    background: #FFF
}

.brownie .brownieIco .svgLine {
    transform-origin: right
}

.brownie.closed .brownieIco .svgLine {
    transform: scale(0, 1)
}

#brownies.dark .brownie.closed .brownieIco svg .fillColor {
    fill: #6E6259
}

#covidBrownie .brownieText {
    font-size: 14px;
    line-height: 24px;
    margin-top: 35px
}

.brownieClose {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 14px;
    height: 16px;
    cursor: pointer;
    z-index: 1
}

.brownieClose .line._1 {
    width: 20px;
    height: 2px;
    background: #fff;
    transform-origin: left;
    transform: rotate(45deg)
}

.brownieClose .line._2 {
    width: 20px;
    height: 2px;
    background: #fff;
    transform-origin: right;
    transform: rotate(-45deg);
    position: absolute;
    right: 0;
    top: 0
}

.mainBackground+.mainContainer {
    z-index: 1
}

.text {
    font-size: 3.6vw;
    font-weight: 400;
    font-family: 'Bodoni FLF';
    line-height: 4vw;
    will-change: transform;
    color: #483728;
}


.text.limited {
    max-width: 330px;
    width: 30vw
}

.text.small {
    font-size: 18px;
    line-height: 28px
}

.text.big {
    font-size: 1.8vw;
    line-height: 3vw;
    font-family: LM Roman
}

.compositionText {
    max-width: 280px
}

.geometria {
    font-family: Geometria
}

.text.tech {
    font-family: 'Geometria';
    font-weight: 300;
    font-size: 30px;
    line-height: 40px
}

.text.tech.small {
    font-size: 25px
}

.text.tech.smaller {
    font-size: 20px
}

.miniTitle {
    font-size: 22px;
    line-height: 32px;
    font-family: LM Roman;
    text-transform: lowercase
}

.introText {
    width: 50%
}

.introTextContainer {
    display: flex;
    justify-content: flex-end
}

#partners {
    display: flex;
    justify-content: space-between;
    align-items: center
}

#accoladesScroller {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.accolade.ruinart {
    max-width: 220px;
    width: 17%
}

.accolade.gstc {
    max-width: 162px;
    width: 12%;
    margin-top: 20px
}

.accolade.sustainability {
    max-width: 180px;
    width: 13%
}

.accolade.traveller,
.accolade.forbes,
.accolade.design {
    max-width: 80px;
    width: 6%
}

.accolade.lhwbnh {
    max-width: 100px;
    width: 7%
}

.accolade.lhwsl {
    max-width: 100px;
    width: 6%
}

.accolade.slh {
    width: 14%;
    max-width: 165px
}

.accolade.reader {
    width: 5.2%;
    max-width: 83px
}

.mainBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform
}

#ethos {
    display: flex
}

.introPic {
    width: 17.5vw;
    position: relative;
    height: 11.493vw;
    max-width: 330px
}

.introPic {
    width: 40.5vw !important;
    height: 27.493vw !important;
    max-width: unset !important;
}

.introPic.big {
    max-width: 700px;
    width: 37vw;
    height: 22vw;
    max-height: 420px
}

.picBar {
    position: absolute;
    width: 17.5vw;
    height: 125vh;
    max-width: 330px;
    top: calc(100% + 30px)
}

#ethosIntroPic {
    margin-top: -5vw
}


.ethosIntroPic2 {
    margin: 3vw 3vw 5vw !important;
}

.fit.wider {
    height: 110%;
    top: -5%
}

img[data-scroll-speed] {
    will-change: transform
}

/* .covered:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #cdc9c1;
    will-change: transform
} */

.covered.show:after {
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 1500ms 200ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1500ms 200ms cubic-bezier(.19, 1, .22, 1)
}

#ethosTitleContainer {
    display: flex
}

.ethosTitleContainer {
    justify-content: flex-start;
    gap: 2vw;
}

#ethosTitle {
    margin-left: 20px;
    align-self: flex-end;
    z-index: 1;
    margin-top: 1.6vw
}

.blockTitle {
    font-size: 3.6vw;
    font-family: 'Playfair Display';
    line-height: 4vw;
    will-change: transform;
    color: #F2ECE5;
}

#ethosIntroText {
    max-width: 330px;
    margin-left: calc(17.5vw + 20px);
    margin: 125px 3vw 5vw !important;
}

.ethosIntroText {
    max-width: 790px !important;
    margin: 150px 3vw 5vw !important;
    text-align: center;
    margin-left: unset !important;
}

.abt-txt {
    font-family: 'Bodoni FLF';
    font-size: 24px;
    font-weight: 500;
    color: #483728;
    line-height: 160%;
    margin: 0;
    text-align: center;
    text-shadow: 0px 0 #483728;
}


.abt-txt span {
    font-family: 'Playfair Display';
    font-size: 34px;
    line-height: 140%;
    color: #bdac9a;
    font-weight: 500;
    text-shadow: 0px 0 #bdac9a;
}

#ethosPic {
    position: relative;
    margin-left: 5vw;
    width: 56vw;
    height: 38vw;
    top: 5vw
}

#ethosContent {
    display: flex
}

#ethosLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0
}

#ethosText {
    margin-left: 5vw;
    max-width: 330px;
    display: flex;
    align-items: center;
    margin-top: 5vw
}

.tl {
    opacity: .6
}

.tl._1 {
    font-family: Geometria;
    font-size: 7.5vw;
    color: #FFF;
    position: absolute;
    top: 28vw;
    left: 2.5vw;
    font-weight: 300;
    will-change: transform
}

.tl._1.smaller {
    font-size: 7.5vw
}

.tl._2 {
    font-family: LM Roman;
    font-size: 4vw;
    color: #FFF;
    position: absolute;
    top: 42vw;
    left: 18vw;
    will-change: transform
}

.tl._3 span {
    transform: rotateZ(180deg);
    display: block;
    will-change: transform;
    writing-mode: tb
}

.tl._3 {
    font-family: Geometria;
    font-size: 8vw;
    color: #FFF;
    opacity: .6;
    position: absolute;
    top: 26vw;
    left: 59vw;
    font-weight: 300;
    will-change: transform;
    text-transform: lowercase;
    text-align: center;
    display: flex;
    justify-content: center
}

#prIntroText {
    max-width: 330px
}

#prTop {
    display: flex;
    justify-content: space-between
}

#prTitle {
    margin-left: -1.3vw
}

.sectionTitle {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    font-family: Geometria;
    font-weight: 300;
    will-change: transform;
    margin-top: 4vw;
}

.sectionTitle .small {
    font-size: 2.6vw
}

.sectionTitle .big {
    font-family: 'Playfair Display';
    font-style: normal;
    font-size: 9vw;
    font-weight: 400;
    margin-left: 5vw;
    height: 20vh;
    margin-top: 0vh !important;
    display: flex;
    position: relative;
    align-items: center;
    color: #F2ECE5;
    letter-spacing: 15px;
}

.dining-mt {
    margin-top: 0;
}

#hDiningScroll .small.uppercase {
    font-family: 'Montserrat';
    font-size: 1.5vw;
    font-weight: 400;
    color: #BDAC9A;
    text-transform: capitalize;
    font-style: normal;
    letter-spacing: 4px;
    margin-top: 0px;
    margin-right: 22px;
}

.sectionTitle .small+.sectionTitle .big {
    left: .6vw
}

#prSection .mainBackground,
#prSection .activeLayer {
    top: 12.5vw;
    height: calc(100% - 12.5vw)
}

#prSlider {
    height: 45vw;
    margin-bottom: 5vw
}

#prSlider {
    will-change: transform
}

#hDining .mainContainer {
    position: relative;
    margin-top: 2.5vw;
    display: flex;
    justify-content: space-between
}

html[lang=en] #hDiningTitle .big {
    order: 0
}

html[lang=en] #hDiningTitle .small {
    order: 1
}

.footer-brand-section {
    position: relative;
}

.foot-divider {
    position: absolute;
    width: 200px;
    left: 50%;
    top: 109%;
    background-color: #F2ECE5;
    transform: translate(-50%, -50%);
}


#hDiningFixed {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 3vw;
}

#hDiningIntroPic {
    margin-top: -6vw;
    align-self: flex-end
}

#hDiningScroll {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

#hDiningItems {
    width: 52.5vw;
    will-change: transform
}

.hDiningItemPic {
    height: 40vw
}

.long .hDiningItemPic {
    height: 25vw
}

#hDining .mainBackground {
    height: 41vw
}

#tasteTitle {
    margin-top: 11.5vw;
    will-change: transform
}


#tasteText {
    max-width: 561px;
}

#tasteText p {
    font-family: 'Bodoni FLF';
    /* font-size: 24px; */
    font-size: 1.04vw;
    line-height: 160%;
    font-weight: 500;
    color: #483728;
    margin: 0;
    text-align: left;
    text-shadow: 0px 0 #483728;
}

.listItemTitle {
    font-weight: 600;
    text-align: center;
    margin-top: 25px;
    font-family: 'Playfair Display';
    font-size: 22px;
    letter-spacing: 0.6px;
    word-spacing: 2px;
}

.listItemSubtitle {
    text-align: center;
    font-family: LM Roman;
    text-transform: uppercase;
    margin-top: 5px;
    font-size: 20px
}

.hDiningItem.whitening .listItemTitle,
.hDiningItem.whitening .listItemSubtitle {
    color: #FFF
}

.hDiningItemRow {
    display: flex;
    justify-content: space-between
}

.hDiningItem {
    width: calc(50% - 1.25vw);
    display: block
}

.hDiningItem.long {
    width: 100%
}

#hDiningSticky {
    width: 100%
}

#hDiningTarget {
    position: absolute
}

#hLifeStyle {
    padding-bottom: 5vw
}

#hLifeStyle .mainContainer {
    display: flex;
    flex-direction: column
}

#hLifeStyle .mainBackground {
    top: 9vw;
    height: calc(100% - 9vw)
}

#hLifeStyleTitle {
    align-self: flex-end
}

.slidingTitle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.slidingTitleBig {
    font-family: 'Playfair Display';
    font-style: normal;
    font-size: 7vw;
    font-weight: 400;
    margin-left: 5vw;
    height: fit-content;
    margin-top: -3vh;
    display: flex;
    position: relative;
    align-items: center;
    color: #F2ECE5;
    letter-spacing: 15px;
    margin-bottom: 30px;
}

.slidingTitleBig.small {
    font-size: 4.3vw;
    top: 2.4vw !important
}

.slidingTitleSmall {
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 1.5vw;
    margin-top: 7vw;
    display: flex;
    justify-content: center;
    margin-right: 25px;
    color: #BDAC9A;
    margin-bottom: 0px;
}

#hLifeStyle .slidingTitleSmall {
    margin-top: -6.5vw;
    z-index: 1;
    align-self: flex-end;
    margin-right: 3.6vw
}

#hLifeStylePanel {
    margin-top: .3vw
}

.hLifeStyleBlock {
    will-change: transform
}

.hLSBlockTitle {
    height: 5vw;
    display: flex;
    align-items: center;
    z-index: 1
}

.hLSBlockTitle:after {
    content: '';
    width: 100%;
    height: 1px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0
}

.panelLabel {
    font-family: Geometria;
    font-size: 2vw
}

.panelLabel * {
    font-weight: 300
}

.hLSBlockPic {
    height: calc(100vh - 10vw);
    width: 100%
}

#hLifeStyleTarget,
#hLifeStyleTarget2,
#hLifeStyleTarget3,
#hLifeStyleTarget4 {
    height: calc(200vh - 15vw);
    position: absolute
}

#hLifeStyleSticky,
#hLifeStyleSticky2,
#hLifeStyleSticky3,
#hLifeStyleSticky4 {
    height: calc(100vh - 5vw);
    width: 100%
}

#hLifeStylePanel {
    z-index: 1;
    margin-top: .25vw
}

.veil {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000000b5;
    /* opacity: .1; */
    /* backdrop-filter: blur(2px); */
}

#hFacilitiesSticky {
    min-height: 1115px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-bottom: 6vw;
    box-sizing: border-box
}

#hFacilities .mainContainer._1 {
    display: flex;
    justify-content: flex-end
}

#hFacilitiesTitle .big {
    font-family: 'Playfair Display';
    font-style: normal;
    font-size: 9vw;
    font-weight: 400;
    margin-left: 5vw;
    height: 14vh;
    margin-top: 0vh !important;
    display: flex;
    position: relative;
    align-items: center;
    color: #F2ECE5;
    letter-spacing: 15px;
    margin-bottom: 140px;
}

#hFacilitiesTitle .small {
    font-family: 'Montserrat';
    font-size: 1.5vw;
    font-weight: 400;
    font-style: normal;
    color: #BDAC9A;
    text-transform: capitalize;
    order: 1;
    position: relative;
    left: -.15vw;
    margin-right: 17px;
    letter-spacing: 4px;
}

html[lang=en] #hFacilitiesTitle {
    align-items: flex-end
}

html[lang=en] #hFacilitiesTitle .small {
    order: 0;
    left: 0
}

html[lang=en] #hFacilitiesTitle .big {
    order: 1;
    left: 0;
    margin-top: 0
}

.hFacilitiesItem {
    margin-left: 7.5vw
}

.hFacilitiesItem:hover .hFItemTitle {
    opacity: 1
}

.hFacilitiesItem.horizontal .hFItemPic {
    width: 35vw;
    height: 22vw;
    filter: brightness(1.2);
}

.hFacilitiesItem.vertical .hFItemPic {
    width: 22vw;
    height: 35vw;
    filter: brightness(1.2);
}

.hFacilitiesItem.horizontal .hFItemTitle {
    bottom: -1.8vw;
    left: -1.5vw
}

.hFacilitiesItem.vertical .hFItemTitle {
    top: 26.5vw;
    left: -2.1vw;
    transform: rotate(-90deg);
    transform-origin: top left;
    white-space: nowrap;
}

.hFItemTitle {
    font-family: 'Bodoni FLF';
    font-weight: 300;
    font-size: 4.2vw;
    position: absolute;
    color: #F2ECE5;
    opacity: 1;
    text-transform: uppercase;
    -webkit-transition: opacity 800ms cubic-bezier(.19, 1, .22, 1);
    transition: opacity 800ms cubic-bezier(.19, 1, .22, 1);
    text-shadow: 4px 1px #55200c;
}

#hFacilitiesSlider {
    display: flex;
    margin-top: 2vw;
}

#hFacilitiesScroller {
    display: flex;
    align-items: center;
    will-change: transform
}

#hFacilitiesTarget {
    position: absolute;
    top: 0;
    height: 400vh
}

#hFacilities {
    flex-direction: column;
    justify-content: space-between;
    height: 400vh
}

@keyframes hFScroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-51.515%)
    }
}

#hExperiencesTitle {
    margin-top: -2.8vw
}

#hExperiencesTitle .slidingTitleBig {
    margin-top: -2vw
}

#hExperiencesContainer {
    /* height: 100%; */
    display: flex
}

#hExperiencesLayer {
    flex: 1;
    min-width: 35vw;
    padding-bottom: 4vw;
}

#hExperiencesPics {
    width: 70vw;
    max-width: 960px;
    margin-left: 5vw;
    margin-right: -150px;
    height: 650px
}

.hExperienceBlock {
    position: absolute;
    width: 100%;
    overflow: hidden
}

.hExperienceBlock.show~.hExperienceBlock {
    transform: translateY(calc(100% - 69px))
}

.hExperienceContent {
    height: calc(650px - 281px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateY(-25%);
    z-index: 0;
    will-change: transform
}

.hExperienceActions {
    display: flex
}

.hExperienceBlock.show {
    transform: none
}

.hExperienceBlock.show .hExperienceContent {
    transform: none
}

.hExperienceBlock._1 {
    top: 0;
    z-index: 0
}

.hExperienceBlock._2 {
    top: 70px;
    z-index: 1
}

.hExperienceBlock._3 {
    top: 140px;
    z-index: 2
}

.hExperienceBlock._4 {
    top: 210px;
    z-index: 3
}

.hExperienceButton {
    display: flex;
    justify-content: space-between;
    height: 70px;
    align-items: center;
    z-index: 1;
    cursor: pointer;
    will-change: transform
}

.hExperienceContent:after,
.hExperienceButton:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #8c8279;
    left: 0;
    height: 1px;
    -webkit-transition: -webkit-transform 2000ms cubic-bezier(.19, 1, .22, 1), opacity 2000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 2000ms cubic-bezier(.19, 1, .22, 1), opacity 2000ms cubic-bezier(.19, 1, .22, 1);
    transform-origin: left;
    will-change: transform
}

.hExperienceBlock.show .hExperienceButton:after {
    transform: scale(0, 1);
    transform-origin: right
}

.hExperienceTitle {
    font-family: Geometria;
    font-size: 22px
}

.hExperienceArrow {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    pointer-events: none;
    margin-right: 1px
}

.hExperienceBlock.show .hExperienceArrow {
    pointer-events: all
}

.hExperienceArrow svg {
    width: 10px;
    z-index: 1
}

.hExperienceBackground {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FFF;
    border-radius: 50%;
    transform: scale(.4);
    opacity: 0
}

.hExperienceBlock.show .hExperienceBackground {
    opacity: 1;
    transform: scale(1)
}

.hExperienceBlock.show .hExperienceArrow {
    transform: rotate(45deg)
}

.hExperienceBlock.show .hExperienceArrow .fillColor {
    fill: #6E6259
}

.hExperienceArrow .fillColor {
    fill: #FFF
}

.hExperienceSubTitle {
    font-family: LM Roman
}

.hExperiencePic {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.hExperiencePic:first-child {
    position: relative
}

.hExperienceText {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column
}

.hExperienceText p:first-child {
    max-width: 300px
}

#hExperiencesPicsContainer {
    height: 100%
}

#clocksContainer {
    display: flex;
    justify-content: space-between
}

.clock {
    width: 180px
}

.clock-container {
    width: 100%;
    height: 200px;
    position: relative
}

.clock-container>div {
    will-change: transform
}

.clock-container:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: #DBDBDF;
    border-radius: 6px;
    content: "";
    display: block
}

.clock-hour {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: calc(50% + 0.5px);
    margin: -1px 0 0 -25%;
    padding: 1px 0 0 25%;
    background: #bab0a7;
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%
}

.clock-minute {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40% -1px 0 0;
    padding: 40% 1px 0 0;
    background: #bab0a7;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%
}

.clock-second {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40% 0 0 0;
    padding: 40% 0 0 1px;
    background: #e1dfdb;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%
}

.clock .center {
    width: 8px;
    height: 8px;
    background: #e1dfdb;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    left: 50%;
    margin-left: -4px
}

.clock-city p {
    font-family: Geometria;
    font-size: 18px;
    text-align: center;
    margin-top: 20px
}

.clock.main {
    margin: 0 5vw
}

.clock.main .clock-container:before {
    content: '';
    position: absolute;
    width: 60%;
    left: 20%;
    background: #f6f4f2;
    top: 0;
    height: 100%;
    border-radius: 60px
}

footer {
    height: 200vh
}

#footerMain {
    height: 100%;
    position: relative;
}

#footerMain::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000000a6;
    z-index: 1;
}

#footerTarget {
    height: 200vh;
    position: absolute
}

#footerSticky {
    height: 100vh
}

#footerDataTop {
    background: #F2ECE5;
    display: flex;
    flex-direction: column;
    padding: 100px 50px 0px;
    height: 100%;
}

#footerMain .mainContainer {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 100%;
    justify-content: space-between
}

#footerLeft {
    height: 65%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    will-change: transform
}

#footerLogo {
    width: 220px;
    margin-bottom: -152px;
}

#footerLogo .fillColor {
    fill: #FFF
}

#footerInfo p i {
    font-size: 17px;
    margin-right: 10px;
}

#footerInfo p,
#footerInfo a {
    font-family: 'Montserrat';
    font-size: 20px;
    line-height: 160%;
    color: #F2ECE5;
    font-weight: 500;
    text-decoration: none;
}

#copyright {
    margin-bottom: 20px
}

#copyright p {
    font-family: 'Montserrat';
    font-size: 16px;
    color: #000;
    font-weight: 500;
    text-decoration: none;
    line-height: 140%;
}

#copyright p a {
    color: #000;
}

.copyright2 p {
    color: #fff !important;
}

.socials {
    display: flex;
    /* flex-direction: column; */
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

.ig,
.tw {
    margin-top: 0px
}

#footerData {
    position: absolute;
    left: 100%;
    width: 50%;
    height: 100%;
    top: 0;
    flex-direction: column;
    display: flex;
    will-change: transform
}

#weatherIn {
    position: absolute;
    top: 100vh
}

#date {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 2.5vw
}

#date .year {
    font-family: 'Geometria';
    font-size: 7vw;
    font-weight: 300
}

#date .day {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.2vw;
    margin-left: 2.5vw
}

#date .ext-day {
    font-family: LM Roman;
    font-size: 1.3vw
}

#date .ext-date {
    font-family: 'Geometria';
    font-weight: 300;
    font-size: 2vw
}

.weatherContainer {
    width: calc(100% - 5vw);
    max-width: 700px;
    margin: auto
}

#days {
    padding: 1vw 0;
    border-top: 1px solid #b9ada4;
    border-bottom: 1px solid #b9ada4
}

#days .weatherContainer {
    display: flex
}

#weather {
    flex: 1
}

#weather img {
    filter: brightness(.8)
}

.meteo_row {
    margin-top: 30px
}

.meteo_row .weatherContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 13px
}

.meteo_row:first-child {
    margin-top: 0
}

.meteo_col {
    width: 200px
}

.meteo_ico_big {
    display: flex;
    align-items: center;
    height: 85px;
    justify-content: center
}

.meteo_stats {
    text-align: center;
    font-family: Geometria;
    color: #6d5f51;
    font-size: 15px;
    height: 40px
}

.meteo_row .data {
    display: flex;
    justify-content: center
}

.meteo_row .data>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px
}

.meteo_row .data>div img {
    margin-right: 12px
}

.meteo_small,
.hour_text {
    font-size: 13px;
    font-family: Geometria;
    color: #6d5f51
}

.temp_text {
    text-align: center;
    font-family: LM Roman;
    color: #6d5f51;
    font-size: 50px;
    letter-spacing: -6px;
    width: 100%;
    position: relative
}

.temp_text span.temp_deg {
    position: absolute;
    top: 10px;
    font-size: 24px;
    margin-left: 7px
}

#hourlyBox {
    margin-top: 2.5vw
}

.hourly_row {
    display: flex;
    border-top: 1px solid #b9ada4;
    border-bottom: 1px solid #b9ada4;
    padding-top: 20px;
    padding-bottom: 15px
}

.hourly_row .weatherContainer {
    display: flex
}

.hour_box {
    width: 12.5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center
}

.hour_box .hour_ico {
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end
}

.hour_box .hour_ico img {
    transform: scale(.55) translateY(20px)
}

.hour_box.active .hour_ico img,
.hour_box:hover .hour_ico img {
    transform: scale(.8) translateY(-5px)
}

.hour_box.active .active_line,
.hour_box:hover .active_line {
    transform: scale(1, 1)
}

.hour_box.active .hour_text p,
.hour_box:hover .hour_text p {
    transform: translateY(0)
}

.hour_box .active_line {
    width: 40px;
    height: 3px;
    background: #CFCED3;
    margin-top: -2px;
    transform: scale(0, 1)
}

.hour_box .separator {
    width: 100%;
    margin-top: 10px;
    height: 1px;
    background: #E5E0E1
}

.hour_box .hour_text {
    margin-top: 12px
}

.hour_box .hour_text p {
    font-size: 14px;
    transform: translateY(-100%)
}

.hour_box.right .hour_ico {
    align-self: flex-end
}

.hour_box.active>.hour_ico {
    align-self: center;
    transform: translateY(-5px)
}

#days_box {
    width: calc(100% - 5vw);
    max-width: 700px;
    margin: auto;
    display: flex;
    margin-top: 50px
}

.day_name {
    width: 14.2857%;
    padding: 5px 15px;
    position: relative;
    cursor: pointer;
    will-change: transform
}

.day_name:first-child p {
    text-transform: none
}

.day_name p {
    font-family: 'Geometria';
    font-size: 16px;
    text-align: center;
    z-index: 1;
    position: relative;
    text-transform: uppercase;
    will-change: transform
}

.day_name .day_back {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #F2ECE5;
    left: 0;
    top: 0;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    z-index: 0;
    -webkit-transform-origin: left;
    transform-origin: left;
    border-radius: 25px
}

.day_name.active .day_back,
.day_name:hover .day_back {
    -webkit-transform: scale(1);
    transform: scale(1)
}

#footerDataBottom {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #F2ECE5;
    padding-top: 16px;
    padding-left: 50px;
    padding-right: 50px;
    justify-content: space-between;
    gap: 25px;
    flex-direction: column;
}

#footerDataBottom .since {
    width: 100%;
    border-bottom: 1px solid #815123;
    padding-bottom: 20px;
}

#footerDataBottom .since p {
    font-family: 'Bodoni FLF';
    font-size: 30px;
    text-align: center;
    color: #483728;
    font-weight: 500;
    line-height: 140%;
    margin: 0;
}

#footerDataBottom .foot22 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#footerDataBottom .weatherContainer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: calc(100% - 5vw);
    max-width: none
}

#weather .animating {
    will-change: transform
}

.partner.lhw {
    max-width: 160px
}

.partner.michelin {
    width: 7%;
    max-width: 90px
}

.partner.michelin.key {
    position: relative;
    top: 0
}

.partner.virtuoso {
    max-width: 162px
}

.partner.ae,
.partner.traveller {
    max-width: 150px
}

.partner.design {
    width: 6%;
    max-width: 85px
}

.partner.virtuoso,
.partner.ae,
.partner.traveller,
.partner.lhw {
    width: 10%
}

.weatherContainer .partner.virtuoso,
.weatherContainer .partner.ae,
.weatherContainer .partner.traveller,
.weatherContainer .partner.lhw,
.weatherContainer .partner.michelin {
    width: 15%
}

.weatherContainer .partner.michelin {
    max-width: 75px
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    will-change: transform;
    width: 100%;
    height: 100vh;
    z-index: 2;
    display: none
}

nav.active {
    display: block;
    z-index: 3;
}

nav.hidden {
    transform: scale(.99);
    opacity: 0
}

#navVideo {
    position: absolute;
    width: 100%;
    height: 100%
}

#navVideo video {
    width: 100%;
    height: 100%;
    top: 0%;
    right: 0%;
    position: absolute;
    object-fit: cover;
    pointer-events: none
}

#navInner {
    display: flex;
    flex-direction: column;
    z-index: 1;
    position: relative;
    left: 10px;
    top: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    will-change: transform
}

#navTop {
    display: flex;
    width: 100%;
    height: calc(100% - 0px);
    margin-top: 70px;
    box-sizing: border-box;
    margin-left: 10px;
    width: calc(100% - 20px);
    padding: 3vh 0;
    position: relative;
}

#navScroller {
    transform: unset !important;
    position: static !important;
}

/* #navTop:before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    background: #FFF;
    opacity: .3
} */

/* #navTop:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #FFF;
    opacity: .3
} */

#navBottom {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 10px;
    width: calc(100% - 20px)
}

#navBottom .socials {
    min-width: 320px;
    display: none;
    flex-direction: row;
    margin-bottom: 0;
    justify-content: center
}

#navBottom .socials .ig,
#navBottom .socials .tw,
#navBottom .socials .yt {
    margin-left: 20px;
    margin-top: 0
}

#navBottom .socials .tw {
    margin-left: 25px
}

#navBackground {
    position: absolute;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    opacity: .95;
    border-radius: 25px;
    top: 10px;
    left: 10px
}

#navBackground.hidden {
    transform: scale(.99);
    opacity: 0
}

#navBar {
    min-width: 320px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 50px;
}

#navLogo {
    width: 100%;
    max-width: 220px;
    margin-top: 8px;
}

#navLogo .logoLine.exit {
    transform-origin: center;
    -webkit-transition: -webkit-transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1)
}

.navSideItem {
    font-size: 20px;
    font-family: 'Playfair Display';
    text-transform: capitalize;
    margin-top: 2.3vh;
    position: relative;
    font-weight: 500;
    color: #bdac9a;
    cursor: pointer;
}

.navSideItem:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #FFF;
    height: 1px;
    transform: scale(0, 1);
    transform-origin: left;
    -webkit-transition: -webkit-transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1)
}

.navSideItem:hover:after,
.navSideItem.active:after {
    transform: scale(1)
}

.navSideItem:first-child {
    margin-top: 0
}

.navSideItem.margin {
    margin-top: 5vw
}

#navSideItems {
    display: flex;
    flex-direction: column;
    align-items: center
}

#navContent {
    flex: 1;
    padding-right: 100px;
    overflow: hidden;
    padding-left: 5vw
}

#navScroller {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: calc(80px + 28vh);
    will-change: transform;
    position: absolute;
    width: -webkit-fill-available;
    top: 0;
}

.navSection {
    margin-top: 4.5vh
}

.navSection:first-child {
    margin-top: 0
}

.navSectionTitle {
    font-family: 'Bodoni FLF';
    color: #F2ECE5;
    font-size: 4.5vh;
    font-weight: 300;
    line-height: 5.8vh;
    padding-right: 100px;
}

.navSection:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #876357;
    top: 6.5vh;
    transform-origin: left;
    transform: scale(0, 1);
    opacity: 0;
    -webkit-transition: -webkit-transform 1000ms cubic-bezier(.19, 1, .22, 1), opacity 600ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1000ms cubic-bezier(.19, 1, .22, 1), opacity 600ms cubic-bezier(.19, 1, .22, 1)
}

.navSection.show:after {
    opacity: 1;
    transform: scale(1);
    -webkit-transition: -webkit-transform 3000ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 3000ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transform-origin: left
}

.navSectionItems {
    display: flex;
    flex-direction: column;
    margin-top: 3vh;
    padding-left: 2.5vw;
    padding-right: 2.5vw
}

.navItem {
    font-family: 'Playfair Display';
    color: #bdac9a;
    font-size: 2vh;
    font-weight: 500;
    padding: 4px 0;
    text-transform: capitalize;
    display: flex;
    justify-content: space-between;
    position: relative;
    will-change: transform;
    margin-top: 1px;
    transition: all .3s linear;
}

.navItem:hover {
    transform: translateX(10px);
}

/* .navItem:after {
    content: '';
    position: absolute;
    height: 100%;
    width: calc(100% + 5vw);
    border: 1px solid #FFF;
    border-radius: 50px;
    left: -2.5vw;
    top: -.1vh;
    transform: scale(1, 0);
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 150ms linear, opacity 800ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 150ms linear, opacity 800ms cubic-bezier(.19, 1, .22, 1);
    will-change: transform
} */

.navItem:hover:after,
.navItem.active:after {
    transform: scale(1);
    -webkit-transition: -webkit-transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 800ms cubic-bezier(.19, 1, .22, 1), opacity 800ms cubic-bezier(.19, 1, .22, 1)
}

.subItem {
    font-size: 1.6vh;
    color: #FFF;
    position: relative;
    height: 2.9vh;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding-right: 30px;
    will-change: transform
}

.subItem .oArrow {
    position: relative;
    left: 20px;
    will-change: transform
}

/* .subItem:before {
    content: '';
    background: #b6ada5;
    position: absolute;
    right: 0;
    height: 100%;
    width: 80px;
    border-radius: 50px;
    z-index: -1;
    transform: translateX(-10px);
    opacity: 0;
    will-change: transform;
    -webkit-transition: -webkit-transform 500ms cubic-bezier(.19, 1, .22, 1), opacity 500ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 500ms cubic-bezier(.19, 1, .22, 1), opacity 500ms cubic-bezier(.19, 1, .22, 1)
} */

.navItem:hover .subItem:before,
.navItem.active .subItem:before {
    opacity: 1;
    transform: translateX(0);
    -webkit-transition: -webkit-transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1)
}

.navItem:hover .subItem span,
.navItem.active .subItem span {
    transform: none
}

.subItem:after {
    content: ''
}

#tracker {
    will-change: transform;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transform: translate(50vw, 50vh)
}

#tracker * {
    pointer-events: none
}

#simpleTrack {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    top: -6px;
    left: -6px;
    transition-delay: 300ms
}

#simpleTrack.no_opacity {
    transition-delay: 0ms
}

#navigationTrack {
    position: absolute;
    top: -30px;
    left: -60px;
    white-space: nowrap;
    text-transform: lowercase
}

.activeLayerContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    cursor: pointer
}

.activeLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: pointer
}

.activeLayerContainer .activeLayer {
    position: relative;
    width: 50%;
    height: 100%;
    z-index: 0
}

#actionTrack {
    top: -8px;
    left: 6px;
    position: absolute
}

#actionTrack .oArrow.fillColor,
#actionTrack .oAudio.fillColor {
    fill: #FFF
}

#actionTrack circle.fillColor {
    stroke: #FFF
}

#actionTrack.dark .oArrow.fillColor,
#actionTrack.dark .oAudio.fillColor {
    fill: #fff
}

#actionTrack.dark circle.fillColor {
    stroke: #fff
}

#actionTrack circle {
    stroke-dasharray: 113;
    stroke-dashoffset: 113
}

#actionTrack .oArrow {
    position: absolute;
    top: -3px;
    left: -3px;
    transform: rotateZ(0deg);
    opacity: 0
}

#actionTrack .oAudio {
    position: absolute;
    width: 18px;
    top: -7.5px;
    left: -7.5px;
    /* opacity: 0 */
}

#actionTrack .circlePath {
    opacity: 1;
    fill: transparent;
    top: -18px;
    left: -18px;
    transform: none;
    position: absolute
}

#actionTrack.show circle {
    stroke-dashoffset: 0
}

#overview #clocks,
#overview footer {
    display: none
}

#overviewScroller {
    height: 100vh;
    padding-top: 90px;
    padding-bottom: 12vh;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 200vw
}

[data-scroll-direction=horizontal] [data-scroll-section] {
    white-space: normal;
    display: flex
}

#overviewViewport {
    display: flex;
    height: 100%;
    max-height: 660px
}

#overviewIntro {
    min-width: 100vw
}

#overviewIntro .mainContainer {
    height: 100%;
    display: flex;
    justify-content: space-between;
    position: relative
}

#overviewIntroLeft {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 45%
}

#overviewMiniTitle {
    position: absolute;
    left: -7.75vw;
    top: 12px;
    width: 7.75vw;
    display: flex;
    justify-content: center
}

#overviewMiniTitle span {
    writing-mode: tb;
    transform: rotateZ(180deg);
    margin-left: -33px
}

.overWord {
    font-family: 'Geometria';
    font-size: 57px;
    font-weight: 300
}

.overviewText {
    max-width: 520px;
    margin-left: 5vw;
    overflow: auto
}

.overviewSub {
    font-family: 'LM Roman';
    font-size: 40px
}

#overviewIntroRight {
    flex: 1;
    margin-left: 5vw;
    display: flex;
    justify-content: center
}

#overviewIntroRight .oButton {
    position: absolute;
    right: 0;
    bottom: 5vw;
    cursor: pointer
}

.scrollBackContainer {
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: pointer;
    width: 7.75vw;
    display: flex;
    justify-content: center;
    display: none
}

.oButton.bordered.scrollBack {
    margin-right: -68px;
    z-index: 1
}

.oButton.bordered.scrollBack .oSymbol {
    left: -30px
}

.oButton.bordered.scrollBack .oArrow {
    transform: rotateZ(-130deg)
}

#overviewIntroPic {
    height: calc(100vh - 90px - 12vh);
    width: calc(100vh - 90px - 12vh);
    min-width: 220px;
    min-height: 220px;
    max-width: 660px;
    max-height: 660px
}

#overviewItems {
    display: flex;
    min-width: 100vw
}

#overviewItems .mainContainer {
    display: flex;
    position: relative
}

.oLeftBar {
    width: 10vw;
    max-width: 150px;
    height: calc(100% + 15vh)
}

.oLeftBar.azureRoom .mainBackground {
    background: url(../../../../../../themes/khaas-bagh/assets/images/rooms/azureBack1.jpg) no-repeat;
    background-size: cover
}

.styleBackground.azure {
    background: #7ab0b4
}

#overviewItemsContent {
    display: flex;
    width: 60%;
    flex: 1;
    z-index: 1
}

#overviewItemTop {
    height: 100%;
    display: flex
}

#overviewItemBottom {
    min-height: 12vh;
    display: flex;
    align-items: center
}

#overviewItemPicsContainer {
    height: 100%;
    z-index: 1;
    overflow: hidden
}

.itemPic {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.itemPic img {
    will-change: transform
}

.itemPic:first-child {
    position: relative
}

.detailTitle {
    font-family: 'Geometria';
    font-weight: 300;
    font-size: 2.2vw;
    will-change: transform
}

.detailDate {
    margin-top: 5px
}

#overviewItems .detailTitle {
    display: none
}

#overviewSnippetContainer {
    width: 100%
}

#overviewSnippetContainer .snippet:last-child {
    font-size: 18px;
    line-height: 28px
}

.overviewSnippet {
    display: none
}

.detailSubtitle {
    font-family: LM Roman;
    font-size: 1.2vw;
    text-transform: uppercase;
    will-change: transform
}

#overviewItems .detailSubtitle {
    display: none;
    writing-mode: tb;
    transform: rotateZ(180deg);
    max-height: 50vh;
    text-align: right
}

#overviewItemSubtitleContainer {
    margin-left: -.6vw
}

#overviewItemTitleContainer {
    margin-left: 25px;
    height: calc(34vh - 178px);
    display: flex;
    align-items: center;
    width: 200%
}

.overviewItemText:first-child {
    position: relative
}

#overviewItemRight {
    display: flex;
    justify-content: space-between;
    margin-left: 50px;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    width: 100%
}

#overviewItemLeft {
    width: 100%;
    max-width: 660px
}

#overviewItems .detailTitle.active,
#overviewItems .overviewSnippet.active,
#overviewItems .detailSubtitle.active {
    display: block
}

#overview .detailSubtitle ._2 {
    margin-right: 68px
}

.oNavigation {
    color: #FFF;
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
    padding-right: 27px;
    padding-left: 13px;
    will-change: transform;
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: -webkit-transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1)
}

.oNavigation .oArrow {
    position: relative;
    left: 12px;
    will-change: transform;
    top: 1px
}

.oNavigation:before {
    content: '';
    background: #EAE6E0;
    position: absolute;
    right: 0;
    height: 100%;
    width: 100%;
    border-radius: 50px;
    z-index: -1;
    opacity: 0;
    will-change: transform;
    -webkit-transition: -webkit-transform 500ms cubic-bezier(.19, 1, .22, 1), opacity 500ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 500ms cubic-bezier(.19, 1, .22, 1), opacity 500ms cubic-bezier(.19, 1, .22, 1)
}

.oNavigation.show:before {
    opacity: 1;
    transform: translateX(calc(100% - 100px));
    -webkit-transition: -webkit-transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1)
}

.oNavigation.show.left:before {
    transform: translateX(calc(-100% + 100px))
}

.oNavigation:hover.show:before {
    transform: translateX(0)
}

.oNavigation:hover {
    transform: translateX(0) !important
}

.navigationTitle {
    font-family: 'Geometria';
    font-size: 14px
}

#overviewControls {
    position: absolute;
    width: 100%;
    height: 100%
}

.overviewColumn.left {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 3;
    width: 7.75vw;
    display: flex;
    justify-content: center
}

.overviewColumn.right {
    position: absolute;
    top: 0;
    height: 100%;
    right: 0;
    z-index: 3;
    width: 7.75vw;
    display: flex;
    justify-content: center
}

.oNavigation.left {
    padding-right: 13px;
    padding-left: 27px;
    margin-top: 100px;
    transform: translateX(-10px)
}

.oNavigation.right {
    margin-top: 100px;
    transform: translateX(10px)
}

.oNavigation.left .oArrow {
    transform: rotateZ(-135deg);
    left: -12px
}

#detailTop {
    padding-top: 120px
}

.column {
    flex-direction: column
}

#detailTop .miniTitle {
    text-transform: lowercase
}

#detailTop>.mainContainer {
    display: flex
}

#detailTop .oLeftBar,
.oLeftBar.wide {
    width: 17.5vw;
    max-width: 330px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start
}

#detailTopTarget {
    position: absolute;
    top: 100vh
}

#detailTopContent {
    flex: 1
}

#detailSectionTitle {
    margin-left: 2.5vw;
    margin-top: 100px
}

.titleLogo {
    position: absolute;
    top: 0
}

.titleLogo img {
    width: 100%;
    height: auto
}

.titleLogo.sustainability {
    right: 0;
    top: -4.2vw;
    width: 5.5vw
}

.titleLogo.fsl {
    right: 8.5vw;
    top: -3.25vw;
    width: 5.1vw
}

.titleLogo.vcommunity {
    width: 10vw;
    right: 17vw;
    top: -2.4vw
}

#detailTopImgContainer {
    height: 106vh;
    width: calc(100% + 150px);
    transform: scale(.95);
    opacity: 0
}

#detailTopImgContainer.show {
    transform: none;
    opacity: 1
}

#detailTopImg {
    height: 100%;
    will-change: transform;
    transform: scale(.8);
    transform-origin: top
}

#detailImgBlock {
    transform: scale(1.25);
    height: 100%;
    overflow: hidden;
    transform-origin: top
}

#detailTopLayer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0
}

#detailTopLayer .tl {
    opacity: .6
}

#detailTopLayer .tl._1 {
    top: 20vw;
    left: -10vw
}

html[lang=de] #detailTopLayer .tl._1.special {
    left: -16vw;
    font-size: 6vw
}

#detailTopLayer .tl._2 {
    top: 36vw;
    right: 32vw;
    width: auto;
    left: auto;
    text-align: left;
    white-space: nowrap
}

#detailTopLayer .tl._2.seascapeSpecial {
    top: 55vw;
    right: 45vw
}

#detailTopLayer .tl._3 {
    top: 0;
    right: 12.5vw;
    left: auto;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%
}

#detailTopLayer .tl._3 span {
    display: block;
    white-space: nowrap
}

.textLayer {
    will-change: transform;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#detailIntroTitle,
#detailIntroSubtitle {
    margin-left: 2.5vw;
    max-width: 75%
}

#detailIntroSubtitle {
    text-transform: uppercase
}

.blockTitle span {
    padding-bottom: .5vw
}

#detailText {
    margin-left: 2.5vw;
    margin-bottom: 7.5vw;
    width: 30vw
}

#detailText.no_margin_bottom {
    margin-bottom: 0
}

#detailTextSpecial {
    width: 30vw;
    margin-left: 2.5vw
}

.hBook {
    width: 50%;
    margin-top: -36px;
    max-width: 290px
}

#detailSpaces {
    height: 200vh
}

#detailSpaces.azure {
    height: 100vh
}

#detailSpacesContainer.azure {
    top: calc(100% - 14vw)
}

#detailSpaces.azure+#detailServices {
    margin-top: 14vw
}

#detailSpaces .introPic.covered:after,
#detailInfo .introPic.covered:after {
    background: #EAE6E0
}

#detailSpaces .introPic {
    margin-top: -2.5vw
}

.fullPicture {
    width: 100%;
    height: 200vh
}

.fullPicture.azure {
    top: -3vw;
    height: 30vw;
    width: 50vw;
    left: 27vw
}

.simplePicture {
    width: 100%;
    height: 100vh
}

#fullPictureTarget,
#fullPictureTarget2,
#fullPictureTarget3,
#fullPictureTarget4 {
    height: 200vh;
    position: absolute;
    top: 0
}

.fullPictureSticky {
    height: 100vh
}

.fullPictureBlock,
.fullPictureBlock2,
.fullPictureBlock3,
.fullPictureBlock4 {
    transform: scale(.8)
}

.fullPictureContainer,
.fullPictureContainer2,
.fullPictureContainer3,
.fullPictureContainer4 {
    transform: scale(1.25)
}

#detailSpaces .mainContainer {
    display: flex;
    flex-direction: column
}

#detailSpacesContainer {
    position: absolute;
    width: calc(100% - 17.5vw);
    align-self: flex-end;
    top: calc(100% - 4vw)
}

#detailSpacesBackground {
    height: 100%;
    position: absolute;
    width: 100%
}

#detailSpacesBackground.azure {
    background: url(../../../../../../themes/khaas-bagh/assets/images/rooms/azureBack2.jpg) no-repeat;
    background-size: cover
}

#detailSpacesContent {
    display: flex;
    flex-direction: column
}

#detailSpaces #detailSnippets {
    margin-top: 2.5vw;
    text-align: right
}

#detailSpacesContent .tech ._2 {
    margin-top: 2.5vw
}

#detailSpaces #detailSnippets .snippet._2:last-child {
    font-size: 25px
}

#detailSpacesContent .slidingTitleBig,
.locationNameContent .slidingTitleBig {
    position: relative;
    top: 3.3vw;
    margin-left: 2.5vw;
    margin-top: -3.3vw
}

#detailServices {
    margin-top: 24vw
}

.listTitle {
    font-size: 6.5vw;
    font-family: 'Geometria';
    font-weight: 300;
    margin-left: -3.1vw
}

.listText {
    margin-left: 6vw
}

.listItem {
    font-family: LM Roman;
    font-size: 2.2vw;
    margin-top: 1vw
}

#detailServicesContent {
    display: flex;
    justify-content: space-between
}

#detailServicesLeft {
    width: 60vw
}

#detailServicesPic {
    width: 25vw;
    height: 40vw
}

.sliderContainer {
    height: 100%;
    z-index: 0;
    position: relative
}

.slideContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    will-change: transform;
    height: 100%
}

.slideContainer img {
    will-change: auto
}

.gallery {
    height: 100%;
    width: 100%
}

.galleryContainer {
    display: flex;
    height: 100vh
}

.loading {
    position: absolute;
    left: -100px;
    top: -25px;
    display: none
}

.loading svg {
    stroke-dasharray: 87px;
    animation: spinning 2s cubic-bezier(.575, .005, .285, 1.005) infinite
}

.loading svg circle {
    stroke: #FFF
}

.loading.blue svg circle {
    stroke: #6c96bc
}

@keyframes spinning {
    0% {
        stroke-dashoffset: 87
    }

    50% {
        stroke-dashoffset: 174
    }

    100% {
        stroke-dashoffset: 261
    }
}

.sliderPreview {
    position: absolute;
    width: 330px;
    bottom: -40px;
    right: 150px
}

.previewText {
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: 'Geometria';
    font-size: 13px
}

.previewContainer {
    height: 185px;
    margin-bottom: 40px
}

#styleDetails .mainContainer {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 6vw
}

.styleBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

#styleDetailsTitle .slidingTitleSmall {
    margin-top: -6.5vw;
    z-index: 1;
    align-self: center
}

#styleDetailsContainer {
    width: 100vw
}

#styleDetailsScroller {
    display: flex;
    animation: styleDetailScroll 55s linear infinite
}

@keyframes styleDetailScroll {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-253.5%)
    }
}

.styleDetail {
    margin-left: 2.5vw;
    min-width: 17vw
}

#styleDetailsLogos {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5vw
}

.styleLogo {
    width: 33.333%;
    display: flex;
    justify-content: center;
    align-items: center
}

.styleLogo.smaller {
    width: 25%;
    flex: 1
}

.styleLogo.smaller.left {
    margin-left: 5%
}

.styleLogo.smaller.right {
    margin-right: 5%
}

.styleLogo img {
    width: auto
}

#others {
    position: relative
}

#others .layerUpdate {
    top: -5vw
}

#others .mainContainer {
    display: flex
}

#otherTarget {
    position: absolute
}

.otherItemPic {
    width: 50vw
}

.otherItemPic img,
.listItemTitle,
.listItemSubtitle {
    will-change: transform
}

#otherFixed {
    margin-left: 5vw;
    margin-top: -2vw
}

#otherFixed .blockTitle {
    text-transform: lowercase
}

#detailExpandableText {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: -23vw;
    position: relative;
    top: -2.5vw
}

#detailExpandableText.big {
    margin-top: -35vw
}

#detailExpandableText .text {
    max-width: 700px
}

.more p {
    display: flex;
    align-items: flex-end;
    flex-direction: column
}

.more p>span {
    margin-top: 2.5vw;
    margin-right: 5vw
}

#detailSnippets {
    align-self: flex-end;
    margin-right: 2.5vw;
    flex-direction: column;
    display: flex
}

.introLogo {
    position: absolute;
    top: 17.5vw;
    width: 16vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.introLogo .text.tech {
    margin-left: 2vw;
    display: block;
    font-size: 19.5px
}

.introLogo a {
    margin-top: 10px;
    white-space: nowrap
}

.introLogo a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #333;
    left: 0;
    bottom: 6px
}

.introLogo+#detailSnippets {
    margin-top: 15vw
}

#detailInfo #detailSnippets .snippet._2,
#detailInfo #detailSnippets .snippet._4,
#detailInfoSecond #detailSnippets .snippet._2,
#detailInfoSecond #detailSnippets .snippet._4 {
    font-size: 25px;
    margin-top: 0
}

#detailSnippets .snippet._2,
#detailSnippets .snippet._4 {
    margin-top: 2.5vw
}

.snippet.no_margin {
    margin-top: 0 !important
}

.snippet._1 strong {
    font-weight: 400
}

#detailComposition,
#detailBody,
.infoBlock {
    flex-direction: column
}

#detailComposition .mainContainer,
.infoBlock .mainContainer {
    display: flex;
    align-items: center;
    justify-content: space-between
}

#detailComposition.seascape .mainBackground {
    top: 5vw
}

.compositionPicContainer {
    position: relative;
    margin-left: 5vw;
    margin-right: 5vw;
    height: 39.5vw;
    width: 56vw;
    margin-bottom: 5vw
}

.compositionPic {
    height: 100%;
    width: 100%
}

.compositionLayer {
    position: absolute
}

.compositionPicContainer .tl._3 {
    top: 10.5vw;
    left: 0vw
}

.compositionPicContainer .tl._1 {
    top: auto;
    bottom: 7.8vw;
    left: 19vw;
    display: flex
}

#detailBody .mainContainer>.introPic {
    margin-top: -2.5vw
}

.detailBodyContent {
    display: flex;
    justify-content: space-between;
    padding-left: 5vw
}

#detailBody .detailBodyContent.scheme1 .blockTitle {
    margin-left: 13vw
}

#detailBody .detailBodyContent.summer {
    padding-left: 0;
    align-items: center
}

#detailBody .detailBodyContent.summer>div {
    width: 30%
}

#detailBody .detailBodyContent.summer>div .text,
#detailBody .detailBodyContent.summer>div .text>span {
    min-height: 7.2vw
}

#detailBody .detailBodyContent.summer .left .blockTitle {
    margin-left: 0
}

#detailBody .detailBodyContent.scheme1 .left {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 650px
}

.verticalPic {
    width: 25vw;
    height: 40vw
}

#detailBody .galleryContainer {
    width: 56.771vw;
    height: 40vw
}

.detailBodyContent .blockTitle {
    text-transform: lowercase
}

.detailBodyContent.scheme2>.right {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 5vw;
    box-sizing: border-box;
    min-width: 300px
}

#detailBody .detailBodyContent.scheme3 .left {
    max-width: 590px;
    width: 40vw
}

.detailBodyContent.scheme3 .blockTitle {
    margin-left: 13vw
}

.detailBodyContent.scheme4 {
    padding-right: 5vw;
    flex-direction: column
}

.menu {
    display: flex
}

.menuBlock,
.menuPic {
    width: 34vw;
    height: 34vw
}

.menuBlock+.menuPic,
.menuPic+.menuBlock,
.menuBlock+.menuBlock {
    margin-left: 30px
}

.menu+.menu {
    margin-top: 30px
}

.menuBlock {
    display: flex;
    align-items: flex-end;
    position: relative
}

.menuLayout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2.5vw;
    width: 100%
}

.menuLayout .slidingTitleBig {
    position: relative;
    top: 3.3vw
}

.menuBlock.small .slidingTitleBig {
    font-size: 3.5vw;
    top: 1.9vw
}

.menuType {
    font-family: 'Geometria';
    font-weight: 300;
    font-size: 4.5vw;
    opacity: .6;
    position: absolute;
    top: 30px;
    right: 15px
}

.menuBlock.small .menuType {
    font-size: 3vw
}

.menuType span {
    writing-mode: tb;
    transform: rotate(180deg);
    text-align: right
}

.menu._2 .menuType {
    opacity: 1
}

.menuBlock.small .oButton {
    position: absolute;
    top: 78%;
    left: 2.5vw
}

.menuBlock .oButton {
    position: absolute;
    top: 70%;
    left: 2.5vw
}

.infoBlock .mainBackground {
    top: 3vw;
    height: calc(100% - 6vw)
}

img.ruinart {
    width: 170px;
    height: auto
}

.outerBlock {
    width: 40vw;
    position: relative;
    padding: 5vw;
    box-sizing: border-box
}

.outerBorders {
    position: absolute;
    width: 100%;
    height: calc(100% + 2vw);
    top: -1vw;
    left: 0;
    pointer-events: none
}

.outerBorders * {
    position: absolute
}

.outerBorders .top {
    height: 1vw;
    width: 100%
}

.outerBorders .bottom {
    height: 1vw;
    width: 100%;
    bottom: 0
}

.outerBorders .left {
    height: 100%;
    width: 1vw
}

.outerBorders .right {
    height: 100%;
    width: 1vw;
    right: 0
}

.outerRow {
    display: flex;
    align-items: center
}

.outerPic {
    width: 250px;
    display: flex;
    justify-content: center
}

.outerDescription {
    font-family: 'Geometria';
    font-size: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start
}

.outerDescription .outerTitle {
    font-weight: 600
}

.outerDescription a {
    display: block;
    margin-top: 5px;
    text-decoration: underline
}

.blockText.ruinart {
    max-width: 500px
}

.outerBlock.ruinart .outerRow {
    flex-direction: column
}

.outerBlock .outerRow .outerDescription .action:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #333;
    transform: scale(0, 1);
    transform-origin: left;
    -webkit-transition: -webkit-transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1)
}

.outerBlock .outerRow:hover .action:after {
    transform: scale(1)
}

.outerBlock.ruinart .outerDescription {
    text-align: center;
    align-items: center
}

.outerBlock.ruinart .outerPic {
    width: 300px
}

.outerBlock.cnd {
    height: 20vw;
    display: flex;
    justify-content: center;
    align-items: center
}

.outerBlock.ab {
    height: 25vw;
    display: flex;
    justify-content: center;
    align-items: center
}

.outerBlock.cnd .outerPic {
    width: 148px
}

.outerBlock.ab .outerPic {
    width: 100%;
    max-width: 600px
}

.outerBlock.cnd .outerDescription {
    margin-left: 15px
}

.testi-head {
    font-size: 7vw !important;
    height: 14vh;
}

.detailBodyContent.profile {
    padding-left: 0;
    flex-direction: column
}

.profileTitle {
    display: inline-block;
    font-size: 5vw;
    font-weight: 300;
    font-family: 'Geometria';
    margin-left: -3.1vw
}

.profileLogo {
    position: absolute;
    right: 0;
    top: 0;
    width: 19vw;
    max-width: 356px
}

.profileContent {
    display: flex;
    justify-content: space-between
}

.profileInfo {
    flex: 1
}

.vCenter {
    display: flex;
    align-items: center
}

.profilePic {
    width: 25vw;
    height: 40vw;
    margin-left: 5vw;
    margin-top: -15vw;
    position: relative;
    top: 8vw
}

#detailBody .detailBodyContent .left .profileText {
    max-width: 650px
}

.sustainabilityText {
    margin-left: 5vw
}

.sustainabilityText.wide {
    width: 146%
}

.sustainabilityIco {
    position: absolute;
    left: -7.5vw;
    top: .5vw;
    width: 63px;
    display: flex;
    align-items: center;
    justify-content: center
}

.profileScheme .mainBackground {
    height: calc(100% + 2.5vw)
}

.profileScheme .mainBackground.bGreen {
    height: calc(100% + 5vw)
}

.scheme1.simpler .text {
    margin-left: 10vw
}

.scheme1 .blockTitle.larger {
    margin-left: 10vw
}

.profilePic.sustainability {
    margin-top: -7vw
}

.sustWorld {
    position: absolute;
    bottom: -3vw;
    right: 7.5vw
}

.backgroundScheme .mainContainer {
    display: flex;
    margin-top: 10vw
}

.taste .backgroundScheme .mainBackground {
    height: calc(100% - 5vw)
}

.taste .compositionPicContainer {
    margin-bottom: 0
}

.unlimited {
    max-width: none !important
}

#detailBody.taste .mainContainer:last-child .scheme1 .left {
    justify-content: flex-start
}

.compositionPicContainer.reversed .tl._3 {
    right: 0;
    left: auto;
    top: 8vw;
    opacity: .9
}

.compositionPicContainer.reversed .tl._1 {
    left: -7.5vw
}

#detailBody .mainContainer.introRight {
    display: flex;
    flex-direction: column
}

#detailBody .mainContainer.introRight>.introPic {
    align-self: flex-end
}

#detailBody .detailBodyContent .left.full {
    width: 56.771vw;
    max-width: none
}

#detailTopSecond {
    padding-top: 120px;
    flex-direction: column
}

#detailTopSecond>.mainContainer {
    display: flex
}

#detailTopSecond .oLeftBar {
    width: 17.5vw;
    max-width: 330px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start
}

.boatBody {
    margin-top: 24vw
}

.boatBody .detailBodyContent.scheme1 {
    padding-left: 0
}

.galleryContainer+#detailTop {
    padding-top: 0
}

#detailSpaces+#detailBody {
    margin-top: 24vw
}

.locationNameContainer {
    position: absolute;
    width: calc(100% - 17.5vw);
    align-self: flex-end;
    top: calc(100% - 4vw)
}

.locationNameBackground {
    height: 100%;
    position: absolute;
    width: 100%
}

.locationNameContent {
    display: flex;
    flex-direction: column
}

.locationContainer {
    display: flex;
    flex-direction: column;
    position: relative
}

.locationContainer+.mainContainer {
    margin-top: 17vw
}

.introPic.down {
    margin-top: 10vw
}

.editorialPreTitle {
    font-family: Lm Roman Dunhill;
    margin-left: 2.5vw;
    font-size: 2vw;
    line-height: 3vw
}

.editorialText .editorialPreTitle {
    margin-left: 0
}

#editorialWords {
    font-size: 1.2vw;
    font-family: Lm Roman Dunhill;
    margin-left: 2.5vw;
    line-height: 2vw
}

#editorialTitle {
    margin-left: 7.5vw;
    font-family: 'LM ROMAN DUNHILL';
    line-height: 5vw;
    font-size: 3.8vw
}

#editorialSubtitle {
    font-style: italic;
    font-size: 3vw;
    line-height: 3.6vw;
    margin-left: 7.5vw
}

.editorialText {
    margin-left: 7.5vw;
    width: 34vw;
    position: relative
}

.editorialText .text {
    font-size: 21px;
    text-align: justify;
    line-height: 40px;
    letter-spacing: .25px
}

#editorialInfo .mainContainer {
    display: flex
}

.editorialPic {
    height: 32vw;
    margin-left: 2.5vw;
    width: 45vw;
    max-width: 850px;
    max-height: 600px
}

#editorialInfo>.mainContainer>.introPic {
    margin-top: -11.5vw
}

.editorialText+.introPic {
    position: absolute;
    right: 6.75vw;
    margin-top: -20%;
    height: auto
}

#editorialInfo .editorialText+.introPic {
    right: -20.5vw;
    margin-top: -43%
}

#editorialInfo .editorialText+.introPic.anita {
    right: -20.5vw;
    margin-top: -103%
}

#editorialInfo .editorialText+.introPic:nth-child(7) {
    margin-top: -21%
}

.introPicText .text {
    font-family: Cormorant Garamond;
    font-style: italic;
    font-weight: 300;
    font-size: 1.7vw;
    line-height: 3vw
}

.introPicText .leftQuo {
    font-size: 5vw
}

.introPicText .rightQuo {
    font-size: 5vw;
    position: absolute;
    bottom: -2vw
}

.formLayer {
    display: flex;
    flex-direction: column;
    min-height: 33vw
}

#formTitle {
    margin-top: -2.8vw;
    margin-left: 25px
}

#formTitle .slidingTitleBig {
    margin-top: -3.5vw
}

#formTitle .slidingTitleBig+.slidingTitleBig {
    margin-top: -5vw
}

.formContainer {
    margin-right: 5vw;
    margin-left: 5vw;
    width: 55%;
    margin-top: -30px
}

.formContent {
    display: flex
}

.formInfo.left {
    width: 45%;
    max-width: 600px
}

.formDescription {
    margin-left: 5vw;
    font-family: Geometria;
    font-size: 1.3vw;
    line-height: 2.5vw;
    font-weight: 300
}

.wpforms-field-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.formContainer .wpforms-confirmation-container {
    color: #FFF;
    position: absolute;
    left: 0;
    top: 14vw;
    background: #6e6259;
    height: calc(100% - 14vw);
    pointer-events: none;
    margin-left: 5vw;
    font-family: Geometria;
    font-size: 1.3vw;
    line-height: 2.5vw;
    font-weight: 300;
    width: 45%;
    max-width: 600px
}

.formField.readOnly textarea {
    display: none
}

.formField.half {
    width: 45%
}

.formField {
    width: 100%;
    margin-top: 30px
}

.formField.noMargin {
    margin-top: 0
}

.formField input {
    background: none;
    border: none;
    border-bottom: 1px solid #b4a89f;
    padding-bottom: 5px;
    font-family: Geometria;
    font-size: 16px;
    color: #FFF
}

.formField select {
    background: none;
    border: none;
    border-bottom: 1px solid #b4a89f;
    padding-bottom: 3px;
    font-size: 16px;
    font-family: Geometria;
    color: #FFF;
    margin-top: -3px
}

.formField textarea {
    background: none;
    border: 1px solid #b4a89f;
    padding: 5px;
    font-size: 15px;
    font-family: Geometria;
    color: #FFF
}

.wpforms-container label {
    font-family: Geometria;
    color: #FFF;
    font-size: 16px;
    font-weight: 400 !important
}

.formContainer.dark .wpforms-container label,
.formContainer.dark .formField textarea,
.formContainer.dark .formField select,
.formContainer.dark .formField input,
.formContainer.dark input::-webkit-input-placeholder,
.formContainer.dark textarea::-webkit-input-placeholder,
.formContainer.dark .wpforms-field-description {
    color: #6E6259
}

.formContainer.dark input,
.formContainer.dark select {
    border-bottom: 1px solid #B6ADA5
}

.formContainer.dark .formField textarea {
    border: 1px solid #6E6259
}

.formContainer.dark .wpforms-confirmation-container {
    background: #eae6e0;
    color: #6e6259;
    top: 19vw;
    height: calc(100% - 19vw)
}

.formField select option {
    color: #6e6259
}

.formField.wpforms-field-checkbox.multiple {
    display: flex;
    justify-content: space-between
}

.formField.wpforms-field-checkbox.multiple ul {
    width: 45%
}

.formField.wpforms-field-checkbox.multiple ul li {
    margin-top: 10px
}

.formField.wpforms-field-checkbox.multiple ul li:first-child {
    margin-top: 0
}

.formField.wpforms-field-checkbox input[type=checkbox] {
    display: none
}

.formField.wpforms-field-checkbox input[type=checkbox]+label {
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position: -4px -1px;
    padding-bottom: 2px;
    padding-top: 2px;
    cursor: pointer;
    background-image: url(../../../../../../themes/khaas-bagh/assets/images/checks.png)
}

.formField.wpforms-field-checkbox input[type=checkbox]:checked+label {
    background-position: -4px -26px
}

.formField.right {
    display: flex;
    justify-content: flex-end
}

.formField.right label.wpforms-error {
    left: auto;
    right: calc(45% - 5px);
    transform: translateX(100%)
}

.formField.right input,
.formField.right textarea {
    width: 45%
}

::-webkit-input-placeholder {
    font-family: Geometria;
    color: #FFF;
    font-size: 15px;
    padding-left: 2px
}

.formField textArea::-webkit-input-placeholder {
    padding-left: 0
}

.wpforms-field-description {
    font-family: Geometria;
    color: #FFF;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-top: 15px !important;
    max-width: 100%;
    border: 1px solid #999;
    padding: 10px !important;
    box-sizing: border-box;
    background: none !important
}

.wpforms-container .wpforms-field input.wpforms-error,
.wpforms-container .wpforms-field input.user-invalid,
.wpforms-container .wpforms-field textarea.user-invalid,
.wpforms-container .wpforms-field select.wpforms-error,
.wpforms-container .wpforms-field select.user-invalid,
.wpforms-container .wpforms-field.wpforms-has-error .choices__inner {
    border: none !important;
    border-bottom: 1px solid #cc0000 !important
}

.wpforms-container .wpforms-field textarea.wpforms-error {
    border: 1px solid #cc0000 !important
}

.wpforms-container label.wpforms-error {
    font-size: 12px !important;
    position: absolute;
    left: 5px;
    bottom: -7px
}

.wpforms-submit-container {
    display: flex;
    justify-content: flex-end;
    padding-right: 50% !important;
    margin-top: 15px;
    width: 100%
}

.wpforms-submit {
    font-family: Geometria;
    padding: 0 12px;
    background: #FFFFFF !important
}

.wpforms-container input.wpforms-field-medium,
.wpforms-container select.wpforms-field-medium,
.wpforms-container .wpforms-field-row.wpforms-field-medium {
    max-width: none !important
}

.wpforms-submit-container .oButton.bordered {
    border: none
}

.experienceConditions {
    padding: 10vw 5vw
}

.newsletterForm {
    margin-top: 15px;
    font-family: Geometria
}

.newsletterFormTitle {
    color: #FFF;
    font-size: 15px;
    font-weight: 300
}

.newsletter_input {
    margin-top: 10px;
    border-bottom: 1px solid #FFF;
    padding-bottom: 4px !important;
    width: 40%
}

.newsletter_input.full {
    width: 100%
}

.newsletter_input.wpforms-has-error {
    border-bottom: 1px solid #900
}

.wpforms-container .wpforms-field.newsletter_input input.wpforms-error {
    border-bottom: none !important
}

.nLangPref {
    display: flex;
    align-items: flex-start;
    padding-bottom: 4px
}

.newsletter_input label {
    color: #FFF;
    font-size: 13px;
    display: inline;
    padding: 1px 2px;
    height: auto;
    margin-top: 15px
}

.newsletter_input label.wpforms-error {
    display: none !important
}

.newsletter_input.nLangPref label {
    color: #FFF;
    font-size: 13px;
    display: inline;
    height: 16px;
    padding: 1px 2px;
    margin-top: 0
}

.newsletter_input input {
    background: none;
    border: none;
    color: #FFF;
    font-family: 'Geometria';
    font-size: 13px;
    width: 100%;
    display: block
}

.newsletter_input select {
    background: none;
    border: none;
    color: #FFF;
    font-family: 'Geometria';
    font-size: 13px;
    padding-bottom: 0;
    width: 54px;
    display: block
}

html[lang=it] .newsletter_input select {
    width: 70px
}

html[lang=it] .newsletter_input.title {
    width: 80px
}

.newsletter_input.nLangPref select {
    width: 80px !Important
}

.newsletter_input select option {
    color: #000
}

.radio li {
    color: #333;
    font-size: 12px;
    position: relative;
    width: 100%;
    height: 18px;
    margin-top: 13px !important;
    float: left
}

.radio li>input {
    padding: 0;
    margin: 0;
    height: 16px;
    width: 16px;
    float: left;
    position: absolute;
    left: 0;
    opacity: 0
}

input[type=radio],
input[type=checkbox] {
    cursor: pointer
}

.radio li:not(#foo)>input[type=radio]+label {
    background-position: 0 -7px
}

.radio li:not(#foo)>input+label {
    background: url(../../../../../../themes/khaas-bagh/assets/images/radio_input_white.png) 0 -1px no-repeat;
    height: 16px
}

.radio li>label {
    padding: 0 0 1px 28px;
    float: left;
    letter-spacing: 0;
    line-height: 15px;
    font-family: Geometria;
    font-size: 13px;
    color: #FFF;
    display: block;
    margin-top: 0
}

.radio li:not(#foo)>input[type=radio]:hover+label,
.radio li:not(#foo)>input[type=radio]:focus+label,
.radio li:not(#foo)>input[type=radio]+label:hover {
    background-position: 0 -32px
}

.radio li:not(#foo)>input[type=radio]+label {
    background-position: 0 -7px
}

.radio li:not(#foo)>input[type=radio]:hover:checked+label,
.radio li:not(#foo)>input[type=radio]:focus:checked+label,
.radio li:not(#foo)>input[type=radio]:checked+label:hover,
.radio li:not(#foo)>input[type=radio]:focus:checked+label {
    background-position: 0 -57px
}

.radio li:not(#foo)>input[type=radio]:checked+label {
    background-position: 0 -57px
}

.radio li:not(#foo)>input[type=checkbox]+label {
    background-position: 0 -7px
}

.radio li:not(#foo)>input+label {
    background: url(../../../../../../themes/khaas-bagh/assets/images/radio_input_white.png) 0 -1px no-repeat;
    height: 16px
}

.radio li:not(#foo)>input[type=checkbox]:hover+label,
.radio li:not(#foo)>input[type=checkbox]:focus+label,
.radio li:not(#foo)>input[type=checkbox]+label:hover {
    background-position: 0 -32px
}

.radio li:not(#foo)>input[type=checkbox]+label {
    background-position: 0 -7px
}

.radio li:not(#foo)>input[type=checkbox]:hover:checked+label,
.radio li:not(#foo)>input[type=checkbox]:focus:checked+label,
.radio li:not(#foo)>input[type=checkbox]:checked+label:hover,
.radio li:not(#foo)>input[type=checkbox]:focus:checked+label {
    background-position: 0 -57px
}

.radio li:not(#foo)>input[type=checkbox]:checked+label {
    background-position: 0 -57px
}

.newsletter_input.radio.wpforms-has-error ul li label {
    background-position: 0 -82px !important
}

.radio.wpforms-has-error li:not(#foo)>input[type=checkbox]:hover+label,
.radio.wpforms-has-error li:not(#foo)>input[type=checkbox]+label:hover {
    background-position: 0 -107px !important
}

.radio.wpforms-has-error li:not(#foo)>input[type=checkbox]:checked+label {
    background-position: 0 -157px !important
}

.newsletter_input input:-webkit-autofill,
.newsletter_input input:-webkit-autofill:hover,
.newsletter_input input:-webkit-autofill:focus,
.newsletter_input input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #a8a297 inset !important;
    -webkit-text-fill-color: white !important
}

.newsletter_input input::placeholder {
    color: #fff;
    opacity: 1;
    font-family: Geometria;
    color: #FFF;
    font-size: 13px;
    padding-left: 2px
}

.newsletter_input input:-ms-input-placeholder {
    color: #fff;
    font-family: Geometria;
    color: #FFF;
    font-size: 13px;
    padding-left: 2px
}

.newsletter_input input::-ms-input-placeholder {
    color: #fff;
    font-family: Geometria;
    color: #FFF;
    font-size: 13px;
    padding-left: 2px
}

.newsletter_input.title {
    width: 59px
}

.newsletter_input .checkbox_container {
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    float: inherit
}

.newsletter_input .checkbox_label {
    color: #FFF;
    margin-left: 0;
    text-transform: uppercase
}

.newsletter_input .radio li:not(#foo)>input+label {
    background: url(../../../../../../themes/khaas-bagh/assets/images/radio_input_white.png) 0 -5.4px no-repeat;
    height: 14px;
    font-size: 14px;
    font-weight: 300;
    background-size: 14px;
    line-height: 14px
}

.newsletter_input .radio li:not(#foo)>input[type=checkbox]:focus+label {
    background-position: 0 -5.4px
}

.newsletter_input .radio li:not(#foo)>input[type=checkbox]:hover+label,
.radio li:not(#foo)>input[type=checkbox]+label:hover {
    background-position: 0 -26px
}

.newsletter_input .radio li:not(#foo)>input[type=checkbox]:checked+label {
    background-position: 0 -47px !important
}

.newsletter_controls .form_reset p {
    font-family: 'Notera';
    letter-spacing: 0;
    font-size: 40px;
    color: #A7FFFE;
    line-height: inherit
}

.newsletter_controls .form_submit p {
    font-family: 'Notera';
    letter-spacing: 0;
    font-size: 40px;
    color: #FFF;
    line-height: inherit;
    margin-right: 0
}

.newsletterForm .wpforms-confirmation-container {
    font-family: 'Notera';
    letter-spacing: 0;
    font-size: 40px;
    color: #FFF;
    line-height: inherit;
    margin-right: 0;
    margin-top: 8px
}

.newsletterForm .wpforms-container {
    margin-bottom: 0
}

.formText {
    color: #FFF;
    margin-top: 30px;
    font-weight: 300;
    font-size: 13px;
    line-height: 23px
}

.newsletter_input.radio {
    border: none;
    margin-top: 0
}

.privacy>textarea {
    width: 98%;
    border: none;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 20px;
    font-family: Geometria;
    text-align: left;
    background: none;
    height: 35px;
    margin-top: 6px;
    resize: none
}

.newsletter_input.privacy {
    color: #FFF;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    padding: 0 !important
}

.newsletter_input.privacy ul {
    order: 1
}

.newsletter_input.privacy label {
    color: #FFF;
    font-size: 13px
}

.newsletter_input .wpforms-field-description {
    order: 0;
    font-size: 12px !important;
    color: #FFF;
    line-height: 15px;
    padding: 5px 5px 5px 5px !important;
    border: 1px solid #FFF;
    height: 70px;
    overflow: auto;
    margin-top: 10px !important
}

.newsletter_input .wpforms-field-description::-webkit-scrollbar {
    width: 0
}

.newsletter_input .wpforms-required-label {
    color: #FFFFFF !important
}

.newsletterForm .wpforms-submit {
    font-family: 'Notera';
    letter-spacing: 0;
    font-size: 40px;
    color: #FFF;
    line-height: inherit;
    background: none !important;
    margin-right: 0;
    border: none !important;
    cursor: pointer
}

.newsletterForm .wpforms-submit-container {
    padding-right: 0 !important
}

#popClose {
    top: 0;
    right: 0;
    width: 23px;
    height: 23px;
    position: absolute;
    transform: rotateZ(45deg);
    padding: 10px;
    cursor: pointer
}

.newsletter_input.privacy textarea {
    font-size: 12px;
    color: #FFF;
    line-height: 12px
}

.newsletter_controls {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
}

#popLayer .menuCloseLine {
    background: #FFF
}

#popLayer .menuCloseLine._1 {
    top: 21px;
    position: absolute;
    width: 23px;
    height: 1px
}

#popLayer .menuCloseLine._2 {
    height: 23px;
    width: 1px;
    left: 21px;
    position: absolute;
    top: 10px
}

#newsletterBody .confirm,
#newsletterBody .deleted,
#newsletterBody .already {
    display: none
}

.pressButtons {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.pressButton {
    margin-top: 20px;
    position: relative;
    cursor: pointer
}

.pressButton:first-child {
    margin-top: 0
}

.pressButton:after {
    content: '';
    position: absolute;
    bottom: .1vw;
    left: 0;
    width: 100%;
    height: 1px;
    background: #6f6359;
    transform: scale(0, 1);
    transform-origin: left;
    -webkit-transition: -webkit-transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1)
}

.pressButton.active:after,
.pressButton:hover:after {
    transform: scale(1)
}

.pressList {
    align-self: flex-end;
    width: calc(100% - 17.5vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.pressEntry:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -3px;
    left: 0;
    background: #333;
    transform: scale(0, 1);
    transform-origin: left;
    -webkit-transition: -webkit-transform 1000ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1000ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1)
}

.pressEntry:hover:after {
    transform: none
}

#pressBody {
    padding-top: 5vw
}

#pressContainer {
    display: flex
}

#pressContainer #detailSnippets {
    align-self: flex-start
}

#pressTarget {
    height: calc(100% - 5vw);
    position: absolute;
    top: 0
}

.pressContent .locationNameContainer {
    top: 0
}

.pressContent .locationContainer+.locationContainer {
    margin-top: 21vw
}

#pressList {
    flex: 1
}

#text .oLeftBar {
    width: 17.5vw;
    max-width: 330px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start
}

#bodyIndex .mainContainer,
#bodyContent .mainContainer {
    display: flex
}

.textIndexContainer,
.bodyParagraphContainer {
    flex: 1;
    margin-left: 2.5vw
}

.textIndex {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.textIndexItem {
    margin-top: 15px;
    cursor: pointer;
    position: relative
}

.textIndexItem:after {
    content: '';
    position: absolute;
    transform: scale(0, 1);
    transform-origin: left;
    -webkit-transition: -webkit-transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 1500ms cubic-bezier(.19, 1, .22, 1), opacity 1000ms cubic-bezier(.19, 1, .22, 1);
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #6E6259
}

.textIndexItem:hover:after {
    transform: scale(1)
}

.bodyParagraphTitle {
    margin-left: -2.5vw;
    display: flex
}

.bodyParagraphTitle h2 {
    margin-left: 2.5vw;
    font-size: 2vw;
    font-family: LM Roman Dunhill;
    position: relative;
    top: 1.15vw
}

.contactsContainer {
    display: flex
}

.mailBlock {
    display: flex;
    flex-direction: column
}

.overlay {
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    z-index: 3;
    display: none
}

.overlay.hidden {
    transform: scale(.99);
    opacity: 0
}

.overlay.active {
    display: flex
}

.overlay .mainBackground {
    border-radius: 25px;
    left: 10px;
    top: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px)
}

.overlay .mainBackground.hidden {
    transform: scale(.99);
    opacity: 0
}

.overlayContainer {
    max-width: 1080px;
    max-height: 770px;
    width: 70%;
    height: calc(100% - 60px);
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around
}

#tableOverlay .overlayContainer {
    max-width: 600px;
    margin: auto;
    justify-content: center
}

#resBooking {
    width: 100%;
    height: 100%
}

.overlayLabel {
    width: 18vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5vw
}

.ovSmall {
    font-family: 'Geometria';
    font-size: 16px;
    line-height: 24px;
    font-weight: 400
}

.ovSmall+.ovSmall {
    margin-left: 5vw
}

.ovPeople {
    font-size: 2.3vw;
    font-family: Geometria;
    font-weight: 300;
    will-change: transform
}

.overlayClose {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 25px;
    right: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.overlayClose:hover .overlayCloseInner,
.overlayClose.hover .overlayCloseInner {
    transform: scale(1.5);
    -webkit-transition: -webkit-transform 600ms cubic-bezier(.19, 1, .22, 1), opacity 400ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 600ms cubic-bezier(.19, 1, .22, 1), opacity 400ms cubic-bezier(.19, 1, .22, 1)
}

.overlayClose .circlePath {
    width: 38px;
    height: 38px;
    transform: none;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0
}

.overlayClose .circlePath circle {
    stroke-dasharray: 125px;
    stroke-dashoffset: 125px
}

.show .overlayClose .circlePath circle,
.show.overlayClose .circlePath circle {
    stroke-dashoffset: 0
}

.overlayCloseInner {
    width: 8px;
    height: 8px;
    position: relative;
    transform: scale(0)
}

.show .overlayCloseInner {
    transform: scale(1)
}

.overlayCloseInner:before {
    content: '';
    width: 12px;
    height: 1px;
    background: goldenrod;
    position: absolute;
    transform: rotate(45deg);
    transform-origin: top left;
    left: 0
}

.overlayCloseInner:after {
    content: '';
    width: 12px;
    height: 1px;
    background: goldenrod;
    position: absolute;
    transform: rotate(-45deg);
    transform-origin: top right;
    right: 0;
}

.overlayClose .fillColor {
    stroke: #ffffff;
}

.ovGroup {
    display: flex;
    padding-bottom: 30px;
    position: relative;
    flex-direction: column;
    align-items: flex-start
}

#bookOverlay .ovGroup.double {
    justify-content: space-between;
    align-items: flex-start
}

.ovGroup.extended {
    flex: 1;
    padding-bottom: 0
}

.ovGroup.extended:after {
    content: ''
}

#bookOverlay .ovGroup {
    align-items: center;
    flex-direction: row;
    padding-bottom: 20px
}

.ovGroup.leaders {
    margin-top: -25px;
    width: 530px
}

.ovGroup.leaders .ovSmall {
    padding-top: 16px;
    line-height: 5px;
    padding-bottom: 10px
}

.ovGroup.leaders img {
    width: 146px;
    height: auto;
    top: -14px;
    position: relative;
    margin-left: 7px
}

.ovGroup input,
.ovGroup select {
    border: none;
    background: none;
    margin-left: 35px;
    font-size: 20px;
    letter-spacing: 3px;
    height: 100%
}

.ovGroup select option {
    font-size: 20px
}

.ovGroup:after {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #FFF;
    opacity: .6;
    transform: scale(0, 1);
    transform-origin: left;
    -webkit-transition: -webkit-transform 2000ms cubic-bezier(.19, 1, .22, 1), opacity 2000ms cubic-bezier(.19, 1, .22, 1);
    transition: transform 2000ms cubic-bezier(.19, 1, .22, 1), opacity 2000ms cubic-bezier(.19, 1, .22, 1)
}

.ovGroup:last-child:after {
    content: none
}

.show .ovGroup:after {
    transform: scale(1)
}

.ovGroup select {
    margin-left: -40px;
    padding-left: 75px
}

#bookSubmit {
    align-self: flex-end;
    width: 200px
}

.icoContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px
}

.calendarIco {
    width: 100%
}

.downArrow {
    display: block;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid #FFF;
    border-left: 2px solid #FFF;
    transform: translateY(-6px) rotateZ(-45deg)
}

.ovGroup select::-ms-expand {
    display: none
}

.ovGroup select {
    -moz-appearance: none;
    -webkit-appearance: none
}

#thanksOverlay .overlayContainer {
    max-height: 600px
}

@media all and (max-width:1600px) {
    .footer-menus {
        padding: 0px 0 !important;
    }

    .menu-col h6 {
        font-size: 28px;
    }

    .footer-heading2 p {
        font-size: 30px;
        margin-bottom: 12px;
    }

    .dining-sequence-txt {
        font-size: 1.5vw !important;
    }

    .anmition-rotate3 {
        right: 26% !important;
    }

    .dining-txt h2 {
        font-size: 40px !important;
    }

    .dining-sequence-item {
        top: 73% !important;
    }

    .kb-timeline-header {
        width: 60% !important;
    }

    .kb-timeline-header h2 {
        font-size: clamp(2.5rem, 5vw, 2rem) !important;
    }

    .kb-sensory-title {
        font-size: 48px !important;
    }

    .kb-sensory-label {
        font-size: 16px !important;
    }

    .serif-title {
        margin-bottom: 20px !important;
    }

    .kb-sensory-desc {
        font-size: 18px !important;
    }

    .slidingTitleSmall {
        font-size: 2.5vw;
    }
}

@media all and (max-width:1440px) {
    .dining-txt h2 {
        font-size: 34px !important;
    }

    .ovSmall+.ovSmall {
        margin-left: 2vw
    }

    .dining-txt h3 {
        font-size: 22px !important;
    }

    .anmition-rotate3 {
        right: 31% !important;
        bottom: -141% !important;
    }

    .kb-time-point {
        font-size: 0.8rem !important;
    }

    .overviewText {
        max-width: 520px;
        margin-left: 0vw
    }

    #overviewIntroRight {
        margin-right: -100px
    }

    #overviewIntroPic,
    #overviewItemPicsContainer {
        width: calc(15vw + 40vh);
        height: calc(15vw + 40vh)
    }

    .overviewIntroLeft {
        width: 60%
    }

    .outerBlock {
        padding: 5vw 2.5vw
    }

    #ethosIntroText {
        margin: 90px 3vw 5vw !important;
    }

    .text {
        font-size: 18px;
        line-height: 32px
    }

    .text.big {
        font-size: 22px;
        line-height: 40px
    }

    .text.tech.smaller {
        font-size: 18px
    }

    .text.small,
    #overviewSnippetContainer .snippet:last-child {
        font-size: 16px;
        line-height: 28px
    }

    #overviewIntroRight .oButton {
        margin-right: -20px;
        bottom: 0
    }

    .text.tech {
        font-size: 26px
    }

    #detailInfo #detailSnippets .snippet._2,
    #detailInfo #detailSnippets .snippet._4 {
        font-size: 20px
    }

    #overviewItemRight {
        padding-bottom: 12vh
    }

    #overviewItems .detailSubtitle {
        writing-mode: horizontal-tb;
        transform: none;
        max-height: 50vh;
        text-align: left;
        font-size: 22px
    }

    #overviewItemRight {
        padding-bottom: 0;
        height: calc(15vw + 40vh)
    }

    .listItemTitle {
        font-size: 20px
    }

    .listItemSubtitle {
        font-size: 18px
    }

    .hExperienceTitle {
        font-size: 20px
    }

    .more p>span {
        margin-top: 5vw;
        margin-right: 2.5vw
    }

    .gi-6 {
        grid-column: 3 / 5 !important;
    }

    .gi-5 {
        grid-column: 5 / 7 !important;
        grid-row: 9 / 6 !important;
    }

    .gi-4 {
        grid-column: 5 / 5 !important;
    }

    .gi-2 {
        grid-column: 3 / 4 !important;
    }

    .gi-3 {
        grid-column: 5 / 5 !important;
    }
}

@media all and (max-width:1365px) {
    .kb-time-point {
        min-width: 70px !important;
        height: 70px !important;
    }

    .kb-timeline-header h2 {
        font-size: clamp(2.5rem, 5vw, 2rem) !important;
    }

    .serif-title {
        margin-bottom: 30px !important;
    }

    #bookOverlay .ovGroup.double {
        flex-direction: column;
        align-items: flex-start
    }

    .timeline-content h3 {
        font-size: 1.8rem !important;
        margin: 16px 0 15px !important;
    }

    .kb-timeline-header {
        width: 130% !important;
    }

    .ovSmall+.ovSmall {
        margin-left: 0;
        margin-top: 25px
    }

    .ovSmall br:nth-child(2) {
        display: none
    }

    #bookOverlay .overlayContainer>div:nth-child(2):after {
        content: none
    }

    .kb-sensory-title {
        font-size: 34px !important;
    }

    .kb-hero-bg {
        background-size: cover !important;
        top: 39px;
    }
}

@media all and (max-width:1279px) {
    #overviewIntroLeft {
        width: 70%
    }

    #overviewIntroRight {
        margin-left: 5vw;
        margin-right: -50px;
        justify-content: flex-end;
        display: flex;
        align-items: flex-start
    }

    #overviewIntroPic {
        height: 25vw;
        width: 25vw;
        margin-top: 7vw
    }

    .tl._3 {
        top: 24vw;
        left: 46vw
    }

    #detailExpandableText .text {
        max-width: 500px
    }

    .outerBlock {
        width: 48vw
    }

    #overviewIntroRight .oButton {
        bottom: 0
    }

    .kb-timeline-main {
        width: 48% !important;
    }

    .kb-time-point {
        font-size: 20px !important;
    }

    .timeline-content h3 {
        font-size: 2.4rem !important;
        margin: 0 0 7px !important;
    }
}

@media (max-width: 1100px) {
    .gi-2 {
        grid-column: 1 / 2 !important;
        grid-row: 8 / 11 !important;
    }

    .gi-3 {
        grid-row: 1 / 3 !important;
        grid-column: 5 / 2 !important;
    }

    .gi-4 {
        grid-row: 3 / 6 !important;
        grid-column: 5 / 2 !important;
    }

    .gi-6 {
        grid-column: 2 / 4 !important;
        grid-row: 9 / 12 !important;
    }

    .gi-text {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 3 !important;
    }

    .gi-1 {
        grid-column: 1 / 2 !important;
        grid-row: 3 / 8 !important;
    }

    .gi-5 {
        grid-column: 5 / 2 !important;
        grid-row: 9 / 6 !important;
    }

    .kb-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .kb-sensory-desc {
        font-size: 14px !important;
    }

    .serif-title {
        margin-bottom: 15px !important;
    }

    .kb-sensory-title {
        font-size: 28px !important;
    }

    .kb-sensory-label {
        font-size: 10px !important;
    }

    .kb-timeline-container {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1000px) {
    .footer-brand-section {
        padding: 70px !important;
    }

    /* 
    .kb-sensory-content {
        flex: 0 0 37% !important;
        padding: 0 6% !important;
    } */
}

@media (max-width: 768px) {
    .kb-vintage-import .slider-section {
        padding: 215px 0 !important;
    }

    /* .kb-sensory-section {
        width: 960px !important;
    } */

    .text-background p {
        max-width: 90% !important;
    }

    .cards-container {
        grid-template-columns: 1fr !important;
        padding: 80vh 15px 50px !important;
        gap: 30px !important;
    }

    .card {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
    }

    .card img {
        height: 250px !important;
        width: 100% !important;
        transform: none !important;
    }

    .info-box {
        position: relative !important;
        transform: translateY(0) !important;
        padding: 25px 20px !important;
        background-color: #483728 !important;
    }

    .info-box h3 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }

    .info-box p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
        color: #bdac9a !important;
    }
}

@media (max-width: 600px) {

    /* #navTop {
        margin-top: 110px !important;
    } */
    .kb-hero-content h1 {
        font-size: clamp(1rem, 8vw, 6rem) !important;
    }

    .kb-hero {
        height: 400px !important;
    }

    .hero-wrapper {
        height: 400px !important;
    }

    .footer-brand-section {
        padding: 60px 10px 0px !important;
    }

    .kb-intro-text {
        font-size: clamp(1rem, 2.5vw, 2.2rem) !important;
    }

    .kb-time-point {
        min-width: 23px !important;
        font-size: 0.8rem !important;
    }

    .kb-gallery-grid {
        display: flex !important;
        flex-direction: column !important;
    }
}

.is-touch #tracker {
    display: none
}

.is-touch .oButton.mobileOnly {
    display: block !important
}

.is-touch .oButton.watch,
.is-touch .oButton.close {
    display: none !important
}

.is-mobile .oButton.watch,
.is-mobile .oButton.close {
    display: block !important
}

.is-touch #ethosText {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.is-touch #hVideoLayer {
    transform-origin: right bottom;
    transform: scale(.5) translateX(calc(50% - 130px)) translateY(calc(50% - 130px));
    pointer-events: none
}

.is-touch #hVideoLayer video {
    pointer-events: all
}

.is-touch .oButton.watch {
    position: absolute;
    bottom: 30px;
    right: 75px;
    pointer-events: none;
    z-index: 1
}

.is-touch .oButton.close {
    position: absolute;
    bottom: 15px;
    right: 15px;
    pointer-events: none;
    z-index: 1
}

.is-touch #prSlider+.oButton {
    position: absolute;
    bottom: 120px;
    left: 60px
}

.is-touch #hFacilities,
.is-touch #hFacilitiesSticky,
.is-touch #hFacilitiesSlider,
.is-touch #hFacilitiesScroller,
.is-touch nav {
    will-change: transform;
    backface-visibility: hidden
}

@media all and (max-width:1700px) {

    #footerDataTop {
        padding: 62px 50px 0;
    }
}

@media all and (max-width:1500px) {
    .footer-heading2 p {
        font-size: 28px;
        padding-bottom: 25px;
    }

    .about-snippet p {
        font-size: 14px;
    }

    .menu-col h6 {
        font-size: 24px;
    }

    #footerInfo p,
    #footerInfo a {
        font-size: 16px;
    }

    #footerLogo {
        margin-bottom: -113px;
    }

    .menu-col a {
        font-size: 16px;
    }

    .footer-menus {
        padding: 0px 0;
    }

    #footerDataBottom .since p {
        font-size: 22px;
    }

    #copyright p {
        font-size: 14px;
    }

    .socials svg {
        width: 15px;
        height: 15px;
    }
}

@media all and (max-width:1400px) {

    header .langsContainer {
        left: unset !important;
    }

    .kd-nav-section {
        padding: 80px 20px !important;
    }
}

@media all and (max-width:1300px) {
    .kb-vintage-import .slider-section {
        padding: 85px 0 !important;
    }

    .kb-vintage-import #kbFleetSyncedLabel {
        bottom: -107px !important;
    }

    .kb-footer-grid {
        gap: 20px !important;
        grid-template-columns: 1.2fr 1fr 1fr 1.2fr !important;
    }

    .kb-buggy-wrapper {
        width: 70%;
    }

    .tabs-nav {
        margin-bottom: 30px !important;
    }

    .kb-cinema-section {
        padding: 60px 0 !important;
    }

    .kb-archive-title-wrap {
        margin-bottom: 40px !important;
    }

    .hero-wrapper {
        padding-bottom: 60px !important;
    }

    .kb-archive-outline {
        top: 24% !important;
    }

    .hero-wrapper {
        overflow: hidden !important;
    }

    .cinema-wrapper {
        width: 60% !important;
        max-width: 1100px !important;
    }

    .kb-archive-shell {
        width: min(1400px, calc(90% - 48px)) !important;
    }

    .kb-cinema-shell {
        width: min(1600px, calc(90% - 32px)) !important;
    }

    .hFacilitiesItem.vertical .hFItemPic {
        width: 30vw;
        height: 46vw;
    }

    .menu-col li {
        margin-bottom: 6px;
    }

    #footerDataBottom .since p {
        font-size: 18px;
    }

    #copyright p {
        font-size: 12px;
    }

    #footerInfo p,
    #footerInfo a {
        font-size: 14px;
    }

    #footerLogo {
        width: 170px;
        margin-bottom: -89px;
    }

    .hFacilitiesItem.horizontal .hFItemPic {
        width: 42vw;
        height: 28vw;
    }

    .menu-col a {
        font-size: 14px;
    }

    .about-snippet p {
        font-size: 12px;
    }

    .footer-heading2 p {
        font-size: 22px;
    }

    .menu-col h6 {
        font-size: 20px;
    }
}

@media all and (max-width:1150px) {
    #hImgCover {
        width: 198vw;
    }

    .ethosIntroText {
        width: 58% !important;
    }

}

@media all and (max-width:1100px) {
    .kb-timeline-container {
        flex-direction: column;
    }

    .kb-timeline-header,
    .kb-timeline-main {
        width: 90% !important;
        margin: 0 auto;
        overflow: visible !important;
    }

    #footerLogo {
        margin-bottom: -30px;
    }

    #mainLogo {
        width: 100px;
    }

    .langsContainer a {
        font-size: 1.3vw;
    }

    .lang-item {
        margin-left: 30px;
    }

    .oButton {
        height: 33px;
    }

    .oContent .oLabel {
        padding: 4px;
    }

    .oLabel {
        font-size: 12px;
    }
}


@media all and (max-width:960px) {
    .ethosIntroText {
        width: 90% !important;
        margin: 0 auto 8vw !important;
    }

    .quote-text {
        font-size: 2.5vw;
    }

    .introPic {
        width: 94% !important;
    }

    body {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0
    }

    .mobileMargin {
        margin-top: 30px !important
    }

    .mobile {
        display: flex
    }

    .mobileOnly {
        display: block !important
    }

    .mobileHidden {
        display: none !important
    }

    [data-disable-mobile-scroll] {
        transform: none !important
    }

    .compositionPic img,
    .slide img {
        height: 105%;
        top: -2.5%
    }

    header {
        padding: 0 16px;
        height: 30px;
        top: 15px
    }

    .headerButton.email {
        display: none
    }

    #leftHeader {
        width: auto;
        position: relative;
        gap: 20px;
    }

    #mainLogo {
        width: 120px;
        margin-top: 19px;
    }

    #mainMenuController {
        width: 25px;
        height: 25px;
        padding: 10px
    }

    #mainMenuController:after {
        content: none
    }

    .menuController .line {
        width: 25px
    }

    .mainContainer {
        width: calc(100% - 120px);
        /* margin-left: 45px; */
    }

    #brownies {
        padding: 0 12px;
        left: -8px;
        bottom: 12px;
        z-index: 9999999999
    }

    .brownie.closed {
        height: 27px !important
    }

    #brownies.hidden {
        transform: translateX(-40px)
    }

    #cookieBrownie.closed {
        transform: translateX(-83px) translateY(0)
    }

    #newsLetterBrownie.closed {
        transform: translateX(-77px) translateY(-87px)
    }

    #covidBrownie.closed {
        transform: translateX(-81px) translateY(-167px)
    }

    #covidBrownie {
        width: calc(100vw - 95px)
    }

    #covidBrownie .brownieClose .line {
        background: #eae6e0;
    }

    .closed .brownieBack {
        opacity: 0 !important;
        transition-duration: 0ms
    }

    .brownie {
        height: 250px;
        position: absolute;
        width: calc(100vw - 61px);
        bottom: 0;
        left: 50px
    }

    .brownie.closed .brownieBack,
    .brownie.closed:hover .brownieBack {
        transform: translateX(23px) translateY(-10px) scale(.5) !important
    }

    .brownie .brownieIcoContainer {
        display: none
    }

    .brownie.closed .brownieIcoContainer {
        display: flex
    }

    .brownieButtons {
        width: 100%
    }

    .brownieButtons .oArrow {
        display: none
    }

    .brownie.closed .brownieIco {
        transform: scale(.8)
    }

    #cookieBrownie.opened {
        height: 340px
    }

    .cookiePrefs ul {
        width: calc(100% - 10px)
    }

    .oButton {
        height: 30px;
        margin-right: 18px
    }

    .brownieContent {
        margin: 0 10px;
        width: 100%;
        padding: 0
    }

    .oContent {
        padding: 0 8px
    }

    .oArrow {
        width: 7px
    }

    .oOuter {
        width: 44.5px
    }

    .oButton.open .oOuter {
        transform: translateX(20px)
    }

    .oSymbol {
        position: absolute;
        right: -11px;
        top: 2px;
        height: 26px;
        display: flex;
        align-items: center
    }

    .oLabel {
        font-size: 11px
    }

    .oLabel.bigger {
        font-size: 13px
    }

    /* #hLogo {
        width: 250px;
        position: absolute;
        top: 37%;
        left: calc(50% - 125px)
    } */

    #hTarget {
        height: 30vh
    }

    #payLook {
        font-size: 20vw;
        letter-spacing: 0;
        margin-left: 35px;
        height: 320px;
        margin-top: 0vw;
    }

    #payLimits {
        font-size: 4vw;
        font-weight: 300;
        color: #928474;
        top: calc(50% + 11vw);
        left: 30vw;
    }

    #hStrip {
        width: 73vw;
        margin-top: 10vw;
        height: 14vh
    }

    #payFind {
        font-size: 6.5vw;
        margin-right: 7.5vw;
        margin-top: -6vw
    }

    #payPerfection {
        font-size: 8.65vw;
        margin-top: 1vw;
        margin-right: 6vw
    }

    .introTextContainer {
        justify-content: flex-start
    }

    .introText {
        width: 100%
    }

    .text {
        font-size: 16px;
        line-height: 26px
    }

    .tripleMargin {
        margin-top: 90px
    }

    .doubleMargin {
        margin-top: 60px
    }

    .margin {
        margin-top: 30px
    }

    .halfMargin {
        margin-top: 15px
    }

    #accoladesScroller.runAccolades {
        animation: accoladeScroll 30s linear infinite
    }

    @keyframes accoladeScroll {
        0% {
            transform: translateX(calc(100vw - 45px))
        }

        100% {
            transform: translateX(-1274px)
        }
    }

    .accolade.slh img {
        width: auto
    }

    .accolade.reader {
        min-width: 86px;
        max-width: 86px
    }

    .accolade {
        margin-left: 70px;
        width: auto !important
    }

    .accolade.ruinart {
        min-width: 180px
    }

    .accolade:first-child {
        margin-left: 0
    }

    .accolade.lhwbnh {
        min-width: 100px
    }

    .accolade.lhwsl {
        min-width: 100px
    }

    .accolade.sustainability {
        min-width: 180px
    }

    .accolade.traveller,
    .accolade.forbes,
    .accolade.design {
        max-width: 80px;
        min-width: 80px
    }

    .accolade.gstc {
        max-width: 162px;
        min-width: 162px
    }

    #ethos {
        margin-top: calc(80px + 15vw)
    }

    #ethosTitleContainer {
        width: 100%;
        flex-direction: column
    }

    .introPic,
    .introPic.big {
        width: 43vw;
        height: 30vw
    }

    #ethosIntroPic {
        margin-top: -15vw
    }

    #ethosTitle {
        margin-top: 20px;
        align-self: flex-start;
        margin-left: 0
    }

    .blockTitle {
        font-size: 35px;
        line-height: 40px
    }

    #ethosContent {
        flex-direction: column;
        margin-top: 40px
    }

    #ethosPic {
        margin-left: -20px;
        width: calc(100% + 40px);
        height: 68vw;
        top: 0
    }

    #ethosPic img {
        height: 120%;
        top: -10%
    }

    #ethosText {
        margin-top: 40px;
        margin-bottom: 40px;
        max-width: none;
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start
    }

    #ethosIntroText {
        margin-left: 22vw
    }

    #ethosLayer {
        position: absolute;
        top: calc(39vw + 120px);
        height: 68vw
    }

    #minimalism {
        font-size: 25px;
        top: 35vw;
        left: 20vw
    }

    #sublime {
        font-size: 50px;
        top: 17vw;
        left: 2.5vw
    }

    #modern {
        font-size: 50px;
        top: 14vw;
        left: auto;
        right: 5vw
    }

    html[lang=it] #modern {
        top: 53vw
    }

    #prSection {
        margin-top: 90px
    }

    .miniTitle {
        font-size: 16px
    }

    .sectionTitle .small {
        font-size: 7vw
    }

    .sectionTitle .big {
        font-size: 11.3vw;
        line-height: 12vw
    }

    #prTop {
        flex-direction: column
    }

    #prSlider+.oButton {
        position: absolute;
        bottom: 60px !important;
        left: 0 !important
    }

    #prSection .mainBackground {
        top: 26vw
    }

    #prIntroPic {
        width: 60%;
        height: 32vw;
        margin-top: 5px;
        z-index: 1
    }

    #prIntroText {
        margin-top: 90px
    }

    #prSlider {
        margin-top: -5vw;
        margin-left: calc(-45px + 5vw);
        width: calc(100% + 60px - 5vw);
        height: 50vw
    }

    #prSection .mainBackground {
        top: calc(46px + 18vw)
    }

    #hFacilitiesTitle {
        margin-top: 15px
    }

    #hFacilities {
        height: 300vh
    }

    #hFacilitiesTarget {
        position: absolute;
        top: 0;
        height: 300vh
    }

    #hFacilitiesSticky {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-around
    }

    #hFacilitiesSlider {
        top: 0
    }

    .hFacilitiesItem.horizontal .hFItemPic {
        width: 50vw;
        height: 34vw;
    }

    .hFacilitiesItem.vertical .hFItemPic {
        width: 41vw;
        height: 62vw;
    }

    .hFacilitiesItem {
        margin-left: 60px
    }

    .hFItemTitle {
        font-weight: 400;
        opacity: .7;
        font-size: 5vw;
    }

    .hFacilitiesItem:first-child {
        margin-left: 35px
    }

    /* .hFacilitiesItem.horizontal .hFItemTitle {
        bottom: 10vw;
        left: auto;
        right: -7vw
    } */

    /* .hFacilitiesItem.vertical .hFItemTitle {
        bottom: 16vw;
        left: -4vw
    } */

    #hDining {
        margin-top: calc(15vw + 60px)
    }

    #hDiningSticky {
        height: auto;
        width: 100%
    }

    #hDiningIntroPic {
        margin-top: -15vw;
        align-self: flex-end
    }

    #hDining .mainContainer {
        flex-direction: column;
        margin-top: 0
    }

    #hDiningScroll {
        width: 100%
    }

    #hDiningScroll .miniTitle {
        margin-top: 7vw
    }

    #hDiningItems {
        width: 100%;
        margin-top: 500px;
    }

    #hDiningFixed {
        margin-left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        left: 0
    }

    #hDiningTitle {
        align-self: flex-start;
        margin-top: 70px;
    }

    #tasteTitle {
        margin-top: 160px
    }

    .long .hDiningItemPic {
        height: 38vw;
        width: 100%
    }

    #hDining .mainBackground {
        height: calc(48vw + 460px);
    }

    .hDiningItemTitle {
        font-size: 18px;
        margin-top: 15px
    }

    .hDiningItemSubtitle {
        font-size: 18px
    }

    .hDiningItemPic {
        height: 76vw
    }

    .hDiningItem {
        width: 100%
    }

    .hDiningItemContainer {
        flex-direction: column;
        margin-top: 0
    }

    .hDiningItemRow {
        flex-direction: column
    }

    #hDiningItems .callerBottom {
        position: relative
    }

    .hDiningItemSubtitle {
        margin-top: 0
    }

    .hDiningItemPic {
        height: 76vw;
        width: 60%;
        margin: auto
    }

    .hDiningItem {
        margin-top: 30px
    }

    #hDiningItems>.hDiningItem:first-child {
        margin-top: 0
    }

    .slidingTitleBig {
        font-size: 10vw
    }

    .slidingTitleBig.small {
        font-size: 8vw !important;
        top: 4.4vw !important
    }

    .slidingTitleSmall {
        font-size: 5.9vw
    }

    #hExperiences {
        margin-top: 120px
    }

    .hBook {
        margin-top: -30px
    }

    #detailSnippets+.hBook {
        margin-top: 15px;
        order: 5
    }

    #hLifeStyle .slidingTitleSmall {
        margin-top: -14vw
    }

    #hLifeStyle .mainBackground {
        top: 16.8vw;
        height: 105%
    }

    .panelLabel {
        font-size: 20px
    }

    .hLSBlockTitle {
        height: 65px
    }

    #hLifeStylePanel {
        margin-top: 0
    }

    #hExperiencesTitle .slidingTitleBig {
        margin-top: -4.6vwl !important;
        font-size: 6vw;
    }

    .hExperienceTitle {
        font-size: 18px
    }

    .hExperienceButton {
        height: 40px
    }

    .hExperienceTitle {
        font-size: 16px
    }

    .hExperienceActions {
        margin-top: 30px
    }

    .hExperienceActions .oLabel,
    .hBook .oLabel {
        position: relative;
        top: -2px
    }

    .hExperienceBlock._2 {
        top: 40px
    }

    .hExperienceBlock._3 {
        top: 80px
    }

    .hExperienceBlock._4 {
        top: 120px
    }

    .hExperienceContent {
        height: auto;
        justify-content: flex-start;
        padding-left: 15px;
        pointer-events: none
    }

    .hExperiencePic {
        position: relative;
        height: 60vw;
        margin-top: 20px
    }

    #hExperiencesLayer {
        height: calc(60vw + 510px)
    }

    .hExperienceText {
        flex: none;
        margin-top: 20px;
        margin-bottom: 20px;
        height: 260px
    }

    .hExperienceSubTitle {
        height: 30px;
        line-height: 20px
    }

    #hExperiences .mainContainer {
        padding-bottom: 35px
    }

    .hExperienceBlock.show~.hExperienceBlock {
        transform: translateY(calc(100% - 40px))
    }

    .clock {
        width: 80px
    }

    .clock.main {
        flex: 1;
        margin: 0
    }

    .clock-city p {
        font-size: 14px
    }

    #date {
        margin-top: 15px
    }

    .weatherContainer {
        width: calc(100% - 20px)
    }

    #date .year {
        font-size: 50px
    }

    #date .day {
        margin-bottom: 9px;
        margin-left: 10px
    }

    #date .ext-day {
        font-size: 18px
    }

    #date .ext-date {
        font-size: 18px
    }

    #weather {
        border-top: 1px solid #b9ada4
    }

    footer {
        height: auto !important
    }

    #footerSticky {
        display: flex;
        flex-direction: column-reverse;
        height: auto !important;
    }

    #footerMain {
        order: 1;
        height: 100vh
    }

    #footerData {
        position: relative;
        top: 0;
        width: 100%;
        left: 0;
        height: auto
    }

    #weatherIn {
        top: 0
    }

    #weather img {
        width: 40px
    }

    #weather .wind_direction img,
    #weather .wind_speed img {
        width: 20px
    }

    #weather .wave_height img {
        width: 11px
    }

    .meteo_stats {
        font-size: 14px
    }

    .temp_text {
        font-size: 50px;
        letter-spacing: -2px;
        font-size: 30px
    }

    .temp_text span.temp_deg {
        top: 3px;
        margin-left: 3px
    }

    .meteo_col {
        width: 33%
    }

    #footerInfo p,
    #footerInfo a {
        font-size: 16px;
        line-height: 28px
    }

    #footerLogo {
        width: 200px;
        position: relative;
    }

    div#footerInfo {
        padding-bottom: 46px;
    }

    /* #footerRight {
        position: absolute;
        bottom: 320px;
        right: 0
    } */

    #footerLeft {
        justify-content: flex-end;
    }

    #footerMain .mainBackground img {
        object-position: center;
    }

    #overviewScroller {
        height: auto;
        padding: 0;
        flex-direction: row;
        justify-content: flex-start;
        width: auto;
        padding-top: 60px;
        padding-bottom: 45px;
    }

    #overviewScroller .oLeftBar {
        position: absolute;
        height: 100%;
    }

    .oLeftBar {
        width: 45px;
    }

    #overviewViewport {
        flex: 1;
        height: auto;
        max-height: none;
        flex-direction: column
    }

    #overviewMiniTitle {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        justify-content: flex-start;
        margin-left: 35px;
        margin-top: 30px
    }

    #overviewMiniTitle span {
        transform: none;
        writing-mode: horizontal-tb
    }

    #overviewIntro .mainContainer {
        flex-direction: column
    }

    #overviewIntroRight {
        justify-content: flex-start;
        margin-left: 10px;
        margin-right: 0
    }

    #overviewIntroLeft {
        order: 2;
        width: auto;
        margin-left: 10px
    }

    #overviewSnippetContainer {
        width: 100%;
        height: auto
    }

    .overWord {
        font-size: 30px
    }

    .overviewSub {
        font-size: 20px
    }

    #overviewItems {
        margin-top: 60px;
        width: 100vw
    }

    #overviewControls {
        width: calc(35vw - 45px);
        height: 60vw;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end
    }

    .overviewColumn.left {
        position: relative;
        height: auto;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .overviewColumn.right {
        position: relative;
        height: auto;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    #overviewIntroPic,
    #overviewItemPicsContainer {
        width: 65vw;
        height: 65vw;
        margin-left: -10px;
        margin-top: 0
    }

    #overviewItemsContent .activeLayer {
        width: 70vw
    }

    .oNavigation.left,
    .oNavigation.right {
        width: 75px;
        padding-right: 10px;
        padding-left: 10px;
        box-sizing: border-box;
        margin-top: 0;
        transform: none !important
    }

    .oNavigation.left {
        justify-content: flex-end
    }

    .oNavigation.right {
        margin-top: 15px
    }

    .oNavigation .oArrow {
        left: 16px
    }

    .oNavigation.left .oArrow {
        left: -16px
    }

    .oNavigation.left:before {
        transform: translateX(25px)
    }

    .oNavigation.left:before {
        transform: translateX(-25px)
    }

    .oNavigation.show:hover:before {
        opacity: 1;
        transform: translateX(0) !important
    }

    .oNavigation .navigationTitle {
        width: 30px
    }

    .detailTitle {
        font-size: 30px
    }

    #overviewItemsContent {
        flex-direction: column
    }

    #overviewItemTitleContainer {
        margin-left: 0;
        height: auto;
        width: auto;
        padding: 20px 0
    }

    #overviewItemRight {
        margin-left: 0;
        padding-bottom: 0;
        align-items: flex-start;
        margin-left: 10px;
        max-height: 250px
    }

    #overviewItemLeft {
        margin-left: 10px
    }

    #detailTop {
        padding-top: 60px
    }

    #detailTop>.mainContainer:first-child,
    #detailTopSecond .simplePicture+.mainContainer {
        position: relative
    }

    #detailTop .oLeftBar,
    .oLeftBar.wide {
        width: 45px;
        position: absolute;
        left: -45px;
        height: calc(100% - 65px)
    }

    #detailTop .oLeftBar.editorial {
        height: calc(100% - 40px)
    }

    #detailTop .oLeftBar.mobileRoom,
    #detailTop .oLeftBar.azureRoom {
        height: calc(100% - 130px)
    }

    #detailTop .oLeftBar.landing {
        height: calc(100% - 95px)
    }

    #detailTopContent {
        display: flex;
        flex-direction: column;
        width: 100%
    }

    #detailSectionTitle {
        order: 1;
        margin-top: 30px;
        margin-left: 10px
    }

    #detailTopImgContainer {
        margin-top: 0;
        order: 0;
        margin-left: 0;
        width: calc(100vw - 45px);
        height: calc(100vw - 45px);
        transform: translateY(60px);
        opacity: 0
    }

    #detailTopImgContainer.show #detailTopImg {
        transform: scale(1) !important;
        -webkit-transition: -webkit-transform 3000ms cubic-bezier(.19, 1, .22, 1), opacity 3000ms cubic-bezier(.19, 1, .22, 1);
        transition: transform 3000ms cubic-bezier(.19, 1, .22, 1), opacity 3000ms cubic-bezier(.19, 1, .22, 1)
    }

    #detailTopImgContainer.show #detailImgBlock {
        transform: scale(1) !important;
        -webkit-transition: -webkit-transform 3000ms cubic-bezier(.19, 1, .22, 1), opacity 3000ms cubic-bezier(.19, 1, .22, 1);
        transition: transform 3000ms cubic-bezier(.19, 1, .22, 1), opacity 3000ms cubic-bezier(.19, 1, .22, 1)
    }

    #detailIntroTitle {
        order: 2;
        margin-left: 10px;
        font-size: 25px;
        line-height: 30px;
        max-width: none
    }

    #detailIntroSubtitle {
        text-transform: uppercase;
        order: 3;
        margin-left: 10px;
        max-width: none
    }

    #detailText,
    #detailText.no_margin_bottom {
        order: 4;
        width: calc(100% - 10px);
        margin-left: 10px;
        margin-bottom: 60px
    }

    #detailText.landing {
        margin-bottom: 30px !important
    }

    .titleLogo {
        display: block;
        position: relative;
        float: left
    }

    .titleLogo.sustainability {
        width: 16.5vw;
        top: 0;
        margin-top: -.2vw;
        margin-left: 3.7vw;
        left: 5vw
    }

    .titleLogo.fsl {
        width: 16vw;
        top: 0;
        margin-top: 6.7vw;
        margin-left: 10vw;
        right: 0
    }

    .titleLogo.vcommunity {
        width: 31vw;
        top: 0;
        margin-top: 9.5vw;
        left: .2vw;
        right: 0
    }

    .editorialPreTitle {
        order: 2;
        font-size: 24px;
        line-height: 39px;
        margin-top: 20px;
        margin-left: 10px
    }

    .editorialText .editorialPreTitle {
        margin-top: 30px
    }

    #editorialWords {
        order: 3;
        font-size: 17px;
        line-height: 27px;
        margin-top: 10px;
        margin-left: 10px
    }

    #editorialTitle {
        order: 4;
        margin-left: 10px;
        font-size: 35px;
        line-height: 56px
    }

    #editorialSubtitle {
        margin-left: 10px;
        font-size: 35px;
        line-height: 38px;
        order: 5
    }

    .editorialText {
        width: calc(100% - 10px);
        margin-left: 10px
    }

    #editorialInfo .editorialText+.introPic,
    #editorialInfo .editorialText+.introPic:nth-child(7),
    #editorialInfo .editorialText+.introPic.anita {
        right: 0;
        max-width: none;
        margin-top: 30px
    }

    .editorialPic {
        width: calc(100% - 10px);
        height: 60vw;
        margin-left: 10px
    }

    #detailTopContent>.editorialText {
        order: 6;
        margin-left: 10px
    }

    .editorialText .text {
        font-size: 16px;
        line-height: 28px
    }

    .editorialText+.introPic {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 30px;
        transform: none !important;
        margin-left: 10px;
        margin-bottom: 30px;
        width: calc(100% - 10px)
    }

    #detailTopContent .editorialText+.introPic {
        order: 6;
        width: calc(100% - 10px);
        margin-left: 10px;
        max-width: none
    }

    .editorialText+.introPic.right {
        margin-left: calc(100% - 43vw)
    }

    .introPicText .text {
        font-size: 22px;
        line-height: 40px
    }

    .introPicText .leftQuo {
        font-size: 50px
    }

    .introPicText .rightQuo {
        font-size: 50px;
        position: absolute;
        bottom: -25px
    }

    .introPicText .text br {
        display: none
    }

    .text.limited {
        width: 100%
    }

    .detailSubtitle {
        font-size: 20px
    }

    .detailTitle {
        font-size: 25px
    }

    #detailTop .miniTitle {
        margin-top: 0
    }

    #detailSectionTitle .detailTitle {
        margin-top: 15px
    }

    .more p>span {
        margin-top: 30px;
        margin-right: 0
    }

    #detailSpaces .introPic {
        margin-top: -25vw
    }

    .fullPicture,
    .fullPictureSticky {
        height: 70vw !important
    }

    .fullPicture.azure img {
        width: 132%;
        left: -14.5%;
        top: 3%
    }

    .fullPicture.azure .fullPictureBlock {
        transform: scale(1)
    }

    #fullPictureTarget,
    #fullPictureTarget2,
    #fullPictureTarget3,
    #fullPictureTarget4 {
        height: 90vw !important
    }

    .locationContainer+.mainContainer {
        margin-top: 45vw
    }

    #detailBody .locationContainer+.mainContainer .detailBodyContent.scheme2 .left {
        order: 0;
        margin-top: 0
    }

    #detailBody .locationContainer+.mainContainer .detailBodyContent.scheme2 .right {
        order: 1;
        margin-top: 60px
    }

    #detailBody .locationContainer+.mainContainer .detailBodyContent.scheme3 .right {
        order: 0;
        margin-top: 0
    }

    #detailBody .locationContainer+.mainContainer .detailBodyContent.scheme3 .left {
        order: 1;
        margin-top: 60px
    }

    .locationContainer+.mainContainer+.fullPicture {
        margin-top: 120px
    }

    .mobileNegative {
        margin-top: -5vw
    }

    #detailSpacesContainer {
        width: 100%;
        position: relative;
        top: 0;
        margin-top: 60vw
    }

    #detailSpacesContainer.azure {
        margin-top: 80vw;
        top: 0
    }

    #detailSpaces {
        height: auto;
        margin-top: 26vw
    }

    #detailSpaces.azure {
        height: auto
    }

    .fullPicture.azure {
        top: 15vw;
        height: 55vw !important;
        width: 70vw;
        left: 20.5vw
    }

    #detailSpaces #detailSnippets {
        margin-top: 8vw;
        order: 0
    }

    #detailSpaces .mainContainer {
        position: relative
    }

    #detailSpacesContent {
        padding: 0 30px;
        align-items: center
    }

    .text.small,
    .text.tech,
    #overviewSnippetContainer .snippet:last-child {
        font-size: 16px;
        line-height: 28px
    }

    .text.tech.small,
    .text.tech.smaller {
        font-size: 14px !important;
        line-height: 26px
    }

    #detailSnippets .snippet {
        width: 100%;
        margin-top: 15px
    }

    #detailSnippets .snippet:first-child {
        margin-top: 0
    }

    .introLogo+#detailSnippets {
        margin-top: 30px
    }

    .introLogo {
        position: relative;
        top: 7.5vw;
        width: 42.5vw
    }

    #detailSpaces .snippet {
        text-align: center
    }

    #detailSpacesContent .slidingTitleBig,
    .locationNameContent .slidingTitleBig {
        top: 6.2vw;
        margin-left: 10px;
        margin-top: 0;
        order: 1;
        position: relative
    }

    #detailServices,
    #shopItems {
        margin-top: 60px
    }

    #detailServicesContent {
        order: 0;
        flex-direction: column;
        margin-left: 0;
        align-items: center
    }

    #detailServicesPic {
        order: 0;
        height: 66vw;
        width: 42vw;
        max-width: none;
        flex: auto;
        margin-top: 0
    }

    #detailServices .mainContainer {
        display: flex;
        flex-direction: column
    }

    #detailServicesLeft {
        order: 1;
        width: 100%;
        margin-top: 60px
    }

    #detailServicesLeft.noServicesPic {
        margin-top: 0
    }

    .listTitle {
        font-size: 33px;
        margin-left: 0
    }

    .listText {
        margin-left: 0;
        margin-top: 30px
    }

    .listItem {
        font-size: 18px;
        margin-top: 12px
    }

    .galleryContainer {
        height: 70vw !important
    }

    #styleDetailsTitle .slidingTitleSmall {
        margin-top: -13vw;
        font-size: 6vw
    }

    .styleDetail {
        min-width: 40vw
    }

    #styleDetailsScroller {
        display: flex;
        animation: styleDetailScroll 40s linear infinite
    }

    @keyframes styleDetailScroll {
        0% {
            transform: translateX(-5%)
        }

        100% {
            transform: translateX(-557.5%)
        }
    }

    #styleDetails .mainContainer {
        width: calc(100% - 60px)
    }

    #others .mainContainer {
        flex-direction: column
    }

    #otherFixed {
        order: 0;
        margin-left: 0;
        margin-top: 0
    }

    #otherFixed .blockTitle {
        text-align: center;
        font-size: 30px;
        line-height: 30px
    }

    #otherFixed .blockTitle br {
        display: none
    }

    #otherItems {
        order: 1;
        margin-top: 60px
    }

    .otherItemPic {
        width: 100%
    }

    .listItemTitle {
        font-size: 17px
    }

    .listItemSubtitle {
        font-size: 13px;
        margin-top: 0
    }

    #detailExpandableText,
    #detailExpandableText.big {
        order: 0;
        margin-left: 0;
        margin-top: 0
    }

    #detailInfo>.mainContainer {
        display: flex;
        flex-direction: column
    }

    #detailInfo>.mainContainer>.introPic {
        order: 1;
        margin-top: 60px
    }

    #detailInfo.noText>.mainContainer>.introPic {
        margin-top: 0
    }

    #detailInfo .snippet._2,
    #detailInfo .snippet._4,
    #detailInfoSecond .snippet._2,
    #detailInfoSecond .snippet._4 {
        margin-top: 0
    }

    #detailSnippets {
        order: 3;
        width: 100%;
        margin-right: 0
    }

    #detailBody .mainContainer>.introPic {
        margin-top: -5vw
    }

    .compositionPicContainer {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        height: 62vw;
        order: 0;
        margin-bottom: 30px
    }

    .compositionText {
        margin-bottom: 60px;
        max-width: none;
        margin-top: 60px
    }

    #detailComposition .mainContainer,
    .infoBlock .mainContainer {
        flex-direction: column
    }

    .compositionPicContainer .tl._3 {
        font-size: 15vw;
        top: 20vw
    }

    .compositionPicContainer .tl._1 {
        top: 10vw;
        bottom: auto;
        left: 25vw
    }

    .text.big {
        font-size: 20px;
        line-height: 35px
    }

    .detailBodyContent {
        padding-left: 0;
        flex-direction: column
    }

    .detailBodyContent .blockTitle {
        margin-left: 0 !important;
        margin-top: 60px
    }

    #detailBody .detailBodyContent>.left,
    #detailBody .detailBodyContent>.right,
    #detailBody .detailBodyContent>.center {
        width: 100% !important
    }

    .verticalPic {
        width: 100%;
        height: 140vw;
        margin-top: 40px;
        margin-left: 0
    }

    #detailBody .galleryContainer {
        height: 60vw
    }

    .detailBodyContent.summer .right {
        order: 1
    }

    #detailBody .detailBodyContent.scheme2>.right {
        order: 0;
        padding-left: 0
    }

    #detailBody .detailBodyContent.scheme2>.left {
        order: 1;
        margin-top: 60px;
        width: 100% !important;
        margin-left: 0
    }

    #detailBody .detailBodyContent.scheme2>.left:only-child {
        margin-top: 0
    }

    #detailBody .detailBodyContent.summer {
        margin-top: 60px
    }

    .menuPic img {
        height: 110%;
        top: -5%
    }

    .detailBodyContent.scheme3>.right {
        display: flex;
        justify-content: flex-end;
        margin-top: 60px
    }

    .detailBodyContent.scheme3>.right .introPic {
        transform: none !important;
        margin-right: 0
    }

    .menuBlock,
    .menuPic {
        width: 41vw;
        height: 41vw;
        margin-left: 0 !important;
        margin-right: 0
    }

    .detailBodyContent.scheme4 {
        padding-right: 0;
        width: 100% !important;
        margin-left: 0
    }

    .menu {
        display: flex;
        justify-content: space-between
    }

    .menu+.menu {
        margin-top: 2vw
    }

    .menuLayout .slidingTitleBig {
        position: relative;
        top: 5.45vw;
        font-size: 10vw
    }

    .menuBlock.small .slidingTitleBig,
    .menuBlock.mobileSmall .slidingTitleBig {
        font-size: 5vw;
        top: 2.6vw
    }

    .menu .oButton {
        position: absolute !important;
        top: 30% !important
    }

    .menuType {
        right: 0;
        top: 20px;
        font-size: 20px
    }

    #detailForm .mainBackground {
        left: 0;
        width: 100%
    }

    .formLayer {
        flex-direction: column;
        width: calc(100% - 20px);
        margin: auto;
        min-height: 45vw
    }

    .wpforms-confirmation-container {
        font-size: 16px;
        width: calc(100% - 5vw);
        line-height: 25px
    }

    .formContent {
        flex-direction: column
    }

    #formTitle {
        margin-left: 0;
        margin-top: -13.3vw
    }

    #detailForm {
        margin-top: calc(60px + 13.3vw)
    }

    #formTitle .slidingTitleBig {
        margin-top: -5.5vw
    }

    .formDescription {
        margin-left: 0
    }

    .formInfo.left {
        width: 100%
    }

    .formContainer .right {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        margin-top: 0
    }

    .formField {
        width: 100% !important;
        padding-bottom: 17px !important
    }

    .formField {
        margin-top: 20px
    }

    .formField select,
    ::-webkit-input-placeholder,
    .formField input,
    .wpforms-container label {
        font-size: 14px
    }

    .wpforms-field-description {
        font-size: 12px !important;
        padding: 5px 5px 0 5px !important
    }

    .wpforms-container .wpforms-submit-container {
        padding: 0 !important;
        width: 100%
    }

    .wpforms-submit {
        margin-right: 0;
        border: none !important
    }

    .formContainer {
        margin: 0;
        width: 100%
    }

    .wpforms-container label.wpforms-error {
        bottom: 0
    }

    .taste .backgroundScheme .mainBackground {
        top: 5vw
    }

    .compositionPicContainer.reversed .tl._3 {
        bottom: 5vw;
        top: auto;
        right: 5vw
    }

    .compositionPicContainer.reversed .tl._1 {
        left: 8vw;
        top: auto;
        bottom: 2vw;
        opacity: .8
    }

    .backgroundScheme .mainContainer {
        margin-top: 0vw;
        flex-direction: column
    }

    .taste .compositionPicContainer {
        margin-left: 0
    }

    .backgroundScheme+.mainContainer .detailBodyContent.scheme1 {
        margin-top: 0
    }

    .infoBlock .blockText>.text {
        text-align: center;
        font-size: 20px
    }

    .infoBlock .blockText>.text.tech {
        font-size: 16px !important
    }

    .outerBlock {
        width: 100%;
        margin-top: 30px;
        padding: 25px 20px
    }

    .outerRow {
        flex-direction: column
    }

    .outerDescription {
        margin-top: 30px;
        font-size: 14px;
        text-align: center;
        align-items: center
    }

    .infoBlock .mainBackground {
        top: 0
    }

    .infoBlock .mainContainer {
        margin-top: 30px;
        width: calc(100% - 90px)
    }

    .outerRow._1 img {
        width: 75px
    }

    .ab .outerRow._1 img {
        width: 200px
    }

    .outerRow._2 img.ruinart {
        width: 100px
    }

    .scheme1.simpler .text {
        margin-left: 0vw
    }

    .outerBlock.ruinart .outerPic {
        width: 200px
    }

    #detailBody .detailBodyContent.scheme1 .left .text:only-child {
        margin-top: 60px
    }

    #detailSpaces+#detailBody .detailBodyContent.scheme1 .left .text:only-child {
        margin-top: 0
    }

    #detailTop+#detailSpaces+#detailTop {
        margin-top: 60vw
    }

    .seascape .compositionPicContainer {
        order: 0
    }

    .seascape .compositionText {
        order: 1
    }

    #detailTextSpecial {
        order: 4;
        width: 100%;
        margin-left: 10px
    }

    .simplePicture {
        height: 70vw
    }

    #detailTopSecond .oLeftBar {
        width: 20px;
        position: absolute;
        left: -35px;
        height: calc(100% - 65px)
    }

    .detailBodyContent.scheme3 .blockTitle {
        margin-top: 0
    }

    #detailIntroTitle br {
        display: none
    }

    #detailInfo .mainContainer #detailSnippets:only-child {
        margin-top: 0
    }

    .profileTitle {
        font-size: 30px;
        margin-left: 0
    }

    .profileLogo {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        right: auto;
        margin-top: 50px;
        width: 150px
    }

    .profileContent {
        flex-direction: column
    }

    .profilePic,
    .profilePic.sustainability {
        width: 100%;
        height: 129vw;
        margin-left: 0;
        margin-top: 50px
    }

    .profileScheme .mainBackground.bGreen {
        height: calc(100% + 30px)
    }

    .locationContainer+.mainContainer .text.big br {
        display: none
    }

    #detailSpaces+#detailBody {
        margin-top: 30px
    }

    .pressButton {
        margin-top: 10px
    }

    #navBar {
        /* display: none */
    }

    #navBackground {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        border-radius: 15px;
        top: 5px;
        left: 5px
    }

    #navScroller {
        padding-bottom: 165px
    }

    #navTop {
        padding: px 0;
        margin-top: 55px;
        margin-left: 0;
        width: 100%;
        height: calc(100% - 110px)
    }

    .navSection {
        margin-top: 30px
    }

    .navSectionItems {
        margin-top: 1.5vh
    }

    .navItem {
        font-size: 18px;
        padding: 5px 0;
        margin: 0
    }

    .subItem {
        height: auto
    }

    .navItem:after {
        top: 1px;
        height: 26px;
        left: -9px;
        width: calc(100% + 17px)
    }

    .navItem:hover .subItem svg {
        transform: translateX(10px) rotateZ(45deg)
    }

    #navBottom {
        justify-content: space-between
    }

    #navBottom .socials {
        order: 1;
        justify-content: flex-end;
        min-width: 0;
        margin-right: 25px;
        display: flex
    }

    #navBottom .socials svg {
        height: 18px
    }

    #navBottom .socials .tw,
    #navBottom .socials .yt {
        margin-left: 12px
    }

    #navBottom .socials .ig {
        margin-left: 10px
    }

    .navSection:after {
        top: 50px
    }

    .subItem .subTitle {
        display: none
    }

    .subItem:before {
        content: none
    }

    #navTop {
        justify-content: center;
    }

    .navSectionTitle {
        padding-right: 0;
        font-size: 24px
    }

    #navContent {
        display: none;
    }

    .c-scrollbar {
        right: 2px;
        overflow: hidden
    }

    .mobileArrow {
        width: 30px;
        height: 30px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .mobileArrow.left {
        margin-left: 15px
    }

    .mobileArrow.right {
        margin-right: 15px
    }

    .mobileArrow.left .oArrow {
        transform: rotateZ(-135deg)
    }

    .galleryContainer .activeLayer {
        display: flex;
        align-items: center
    }

    .galleryContainer .activeLayer.right {
        justify-content: flex-end
    }

    .sliderPreview {
        position: relative;
        top: 0;
        width: 100%;
        right: 0;
        bottom: 0
    }

    .photogalleryMarginBottom {
        margin-bottom: 100px
    }

    .hExperienceArrow svg {
        width: 8px
    }

    .hExperienceArrow {
        width: 25px;
        height: 25px
    }

    .styleLogo:nth-child(1),
    .styleLogo:nth-child(2) {
        margin-top: 0
    }

    .styleLogo,
    .styleLogo.smaller,
    .styleLogo.smaller.left,
    .styleLogo.smaller.right {
        width: 40%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 60px;
        flex: inherit
    }

    #styleDetailsLogos {
        padding: 30px;
        justify-content: space-between
    }

    .styleLogo img.tinyLogo {
        width: 75%
    }

    .styleLogo img.smallerLogo {
        width: 50%
    }

    .styleLogo img.smallestLogo {
        width: 30%
    }

    .styleLogo:nth-child(3) {
        margin-top: 30px
    }

    .styleLogo img {
        width: 100%
    }

    .wind_direction img {
        display: none
    }

    #mainLogo.menuForced {
        transform: translateY(0)
    }

    .formField.wpforms-field-checkbox.multiple {
        flex-direction: column
    }

    .formField.wpforms-field-checkbox.multiple ul {
        width: 100%;
        margin-top: 15px
    }

    .formField.wpforms-field-checkbox input[type=checkbox]+label {
        background-position: -4px -3px
    }

    .formField.wpforms-field-checkbox input[type=checkbox]:checked+label {
        background-position: -4px -28px
    }

    .formField.right input,
    .formField.right textarea {
        width: 100%
    }

    .langsContainer a {
        font-size: 16px
    }

    .overlay .mainBackground {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        border-radius: 15px;
        top: 5px;
        left: 5px
    }

    .overlayContainer {
        width: calc(100% - 50px);
        max-width: 280px
    }

    .ovGroup input,
    .ovGroup select {
        font-size: 18px;
        letter-spacing: 0;
        margin-left: 20px
    }

    .overlayLabel {
        width: 100px;
        font-size: 18px
    }

    .bookGuests .icoContainer {
        margin-left: 56px
    }

    .ovGroup select {
        margin-left: 0;
        padding-left: 50px
    }

    .overlayClose {
        transform: scale(.8);
        top: 10px;
        right: 10px;
        z-index: 2
    }

    .lang-item {
        margin-left: 30px;
        position: relative
    }


    .ovPeople {
        font-size: 20px
    }

    .ovSmall {
        font-size: 13px;
        line-height: 20px
    }

    #thanksOverlay .overlayContainer {
        max-height: 300px
    }

    #creditsOverlay .overlayContainer {
        max-height: 530px
    }

    .ovGroup {
        padding-bottom: 15px
    }

    #bookOverlay .ovGroup {
        padding-bottom: 5px
    }

    .ovGroup.leaders {
        margin-top: 0;
        width: auto
    }

    .text.tech.small.ovRole {
        line-height: 20px
    }

    #menuClose .circlePath {
        display: none
    }

    #menuClose {
        top: 11px;
        left: 9px;
        transform: scale(1.2)
    }

    #partners {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap
    }

    .partner {
        width: 40% !important;
        display: flex;
        justify-content: center;
        max-width: none !important
    }

    .partner.slh img {
        max-width: 80px
    }

    .partner.virtuoso img {
        max-width: 162px
    }

    .partner.design img {
        max-width: 70px
    }

    .partner.ae {
        margin-top: 77px
    }

    .partner.virtuoso {
        margin-top: 45px
    }

    .partner.michelin {
        margin-top: 61px
    }

    .partner.ae img {
        max-width: 100px
    }

    .partner.michelin img {
        max-width: 71px
    }

    .partner.traveller {
        margin-top: 66px
    }

    #footerDataBottom .weatherContainer {
        flex-wrap: wrap;
        padding: 90px 40px;
        align-items: center
    }

    #scrollDown {
        width: 200px;
        /* margin-left: -100px; */
        letter-spacing: .5px;
        text-align: center;
        bottom: 70px;
        left: 50%;
        transform: unset;
    }

    #verticalArrow {
        transform: rotateZ(180deg)
    }

    .scrollDownText {
        font-size: 12px
    }

    .mobile {
        margin-right: 10px
    }

    .amalfiFirst {
        margin-top: 60px
    }

    #formTitle .slidingTitleSmall {
        height: 13.3vw;
        display: flex;
        align-items: flex-end
    }

    .navSection:last-child .navItem {
        color: #6f6359 !important
    }

    .newsletter_input.title {
        width: 50px
    }

    .bodyParagraphTitle h2 {
        font-size: 20px;
        top: 11px
    }

    .textIndexContainer,
    .bodyParagraphContainer {
        width: 100%
    }

    #pressBody {
        padding-top: 90px
    }

    #pressContainer {
        width: calc(100% - 20px);
        margin-left: 10px
    }

    #pressContainer #detailSnippets {
        width: 70px;
        order: 0
    }

    .pressContent .locationNameContainer {
        width: 100%
    }

    .pressContent .locationNameContent {
        margin-top: 0
    }

    .pressContent .locationContainer+.locationContainer {
        margin-top: 35vw
    }

    .pressList {
        width: 100%
    }

    .pressList .text.big {
        text-transform: lowercase;
        font-size: 18px
    }

    #pressBody+#clocks {
        margin-top: 160px
    }

    #pressTarget {
        height: calc(100% - 90px)
    }

    .outerBlock.cnd {
        height: auto
    }

    .ovGroup.leaders .ovSmall {
        padding-bottom: 4px;
        line-height: 17px
    }

    .ovGroup.leaders img {
        top: -15px
    }

    header .ig {
        position: absolute;
        left: 3px;
        top: 50px
    }

    header .fb {
        position: absolute;
        left: 2px;
        top: 100px
    }

    .headerButton.dark.ig .icon .fillColor,
    .headerButton.dark.fb .icon .fillColor {
        fill: #6E6259
    }

    .headerButton.hidden.ig,
    .headerButton.hidden.fb {
        transform: translateX(-40px);
        transition-delay: 0ms
    }

    .headerButton.ig.menuForced,
    .headerButton.fb.menuForced {
        transform: translateX(-40px) !important
    }

    #text #detailSectionTitle {
        margin-top: -5px
    }

    #bodyIndex {
        margin-top: 22px
    }

    #reserveTable {
        top: auto;
        bottom: 15px;
        position: fixed;
        right: 34px;
        width: auto;
        margin-right: 0
    }

    .sustainabilityIco {
        left: -70px
    }

    .sustainabilityIco img {
        transform: scale(.6)
    }

    #tasteText p {
        font-size: 16px;
        color: #fff !important;
    }

    .sustainabilityText,
    .sustainabilityText.wide {
        margin-left: 56px;
        width: auto
    }

    .introLogo a.smaller.text.tech {
        font-size: 11px !important
    }

    html[lang=en] .titleLogo.sustainability img {
        margin-top: 4vw
    }

    #chatbase-bubble-button {
        width: 45px !important;
        height: 45px !important
    }
}

#chatbase-bubble-button {
    background-color: #9c998f !important
}

@media all and (max-width:600px) {

    #payLimits {
        font-size: 4.4vw;
        left: 0vw;
    }

    #payLook {
        font-size: 19vw;
        height: 176px;
    }

    .hFacilitiesItem.vertical .hFItemPic {
        width: 50vw;
        height: 76vw;
    }

    .hFacilitiesItem.horizontal .hFItemPic {
        width: 60vw;
        height: 41vw;
    }
}

@media all and (max-width:500px) {
    .footer-menus {
        grid-template-columns: 1fr;
    }

    .slidingTitleBig {
        font-size: 8vw !important;
        letter-spacing: 6px;
    }

    #hLogo h1 {
        font-size: 18vw;
    }

    .abt-txt {
        font-size: 18px;
    }

    .nav-arrows {
        position: static;
        transform: none;
        width: fit-content;
        gap: 23px;
        margin: 0 auto;
    }
}

@media (max-width: 500px) {
    #hDining .mainBackground {
        height: calc(48vw + 530px) !important;
    }

    #hDiningItems {
        margin-top: 470px !important;
    }

    #hFacilitiesTitle .small {
        margin-right: 12px;
    }

    .lifejnis-btn {
        width: 50px;
        height: 50px;
    }



    .menu-col h6 {
        font-size: 30px;
    }

    #footerDataBottom .since p {
        font-size: 22px;
    }

    .lifejnis-navigation {
        margin-top: 10px;
    }

    .footer-heading2 p {
        font-size: 26px;
        margin-top: 20px;
    }

    .about-snippet p {
        font-size: 16px;
    }

    .quote-text {
        font-size: 14px;
    }

    .signature-line {
        font-size: 26px;
    }

    .testi-head {
        font-size: 10vw !important;
        margin-top: 50px !important;
        height: 94px !important;
    }

    .cr {
        font-size: 4.5vw !important;
        top: calc(50% + 6vw) !important;
    }

    #footerDataBottom .foot22 {
        align-items: center;
        flex-direction: column-reverse;
    }

    #copyright p {
        text-align: center;
    }

    .mainContainer {
        width: calc(100% - 60px);
    }

    #footerDataTop {
        padding: 30px 30px;
    }

    #footerDataBottom {
        padding-left: 30px;
        padding-right: 30px;
    }

    .hFacilitiesItem.vertical .hFItemPic {
        width: 80vw;
        height: 121vw;
    }

    .hFacilitiesItem.horizontal .hFItemPic {
        width: 94vw;
        height: 63vw;
    }

    .hFItemTitle {
        font-size: 9vw;
    }
}

.lifejnis-main {
    margin-top: 0 !important;
    width: 100%;
    padding-top: 50px !important;
    padding-bottom: 100px;
    overflow: visible !important;
}

.lifejnis-slide {
    background-position: center;
    background-size: cover;
    width: 650px !important;
    height: 445px;
    transition: transform 0.6s ease;
}

@media (max-width: 768px) {

    .award-pad {
        padding-top: 50px;
    }

    #navTop:before {
        top: 15px !important;
    }

    #ethosIntroText {
        margin: 0px 3vw 5vw !important;
    }

    #hDiningScroll .small.uppercase {
        font-size: 18px !important;
        margin-right: 10px;
    }


    .dining-head {
        height: 8vh !important;
        margin-top: 40px !important;
    }

    .testi-head {
        height: 70px !important;
        margin-left: 18px !important;
    }

    .v_play_video_wrapper {
        height: 142vw !important;
        width: 100%;
    }

    .slidingTitleSmall {
        margin-right: 7px;
    }

    #hFacilitiesTitle .small {
        font-size: 4.5vw;
    }

    #hFacilitiesTitle .big {
        font-size: 13vw;
        height: 8vh;
    }

    .lifejnis-slide {
        width: 280px !important;
    }

    .khaas-door {
        position: relative !important;
    }

    .khaas-door {
        width: 100vw;
        height: 50vh;
    }

    .khaas-doors-stage {
        flex-direction: column;
    }

    .khaas-door-left {
        left: 0;
        transform-origin: left center;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .khaas-door-right {
        right: 0;
        transform-origin: right center;
        clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 100%);
    }

    .text-background p {
        font-size: 0.9rem !important;
    }

    .text-background h2 {
        font-size: clamp(1rem, 6vw, 5rem) !important;
    }
}

@media (max-width: 450px) {
    #hDining .mainBackground {
        height: calc(100vw + 530px) !important;
    }

    #hDiningItems {
        margin-top: 620px !important;
    }
}


.lifejnis-slide a {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.lifejnis-slide img {
    display: block;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    object-fit: cover;

    /* Create the layered gold look */
    padding: 15px;
    /* The 'Matte' inside the frame */
    background: #fdfdfd;

    /* The ornate metallic border */
    border: 15px solid;
    border-image: linear-gradient(45deg, #8a6d3b, #f1d592, #d9b44a, #8a6d3b) 1;

    /* Inner "bevel" lines */
    box-shadow:
        0 0 0 2px #d9b44a,
        /* Inner gold line */
        0 0 0 10px #333,
        /* Dark gap */
        0 0 20px rgba(0, 0, 0, 0.5);
    /* Outer shadow */
}

.fancybox-image {
    border: 15px solid;
    border-image: linear-gradient(45deg, #8a6d3b, #f1d592, #d9b44a, #8a6d3b) 1;
    box-shadow: 0 0 0 2px #d9b44a, 0 0 0 10px #333, 0 0 20px rgba(0, 0, 0, 0.5);
}

.swiper-slide-active {
    transform: scale(1.2);
    z-index: 10;
}

.lifejnis-navigation {
    margin-top: -10px;
    position: relative;
    margin-bottom: 74px;
    display: flex;
    align-items: center;
    gap: 34px;
    z-index: 100;
    justify-content: center;
}

.lifejnis-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(178 148 94);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.lifejnis-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
    border-color: #fff;
}

.lifejnis-counter {
    color: #000;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 2px;
    min-width: 80px;
    text-align: center;
}

.lifejnis-counter span {
    font-weight: 800;
    color: #483728;
}

#total {
    font-weight: 800;
    color: #bbbbbb;
}

.content-life {
    display: none;
}

.swiper-slide-active .content-life {
    display: block;
    position: relative;
    bottom: -10%;
    left: 0;
    right: 0;
}

.content-life h2 {
    font-family: 'Montserrat';
    font-weight: 400;
    font-size: 24px;
    line-height: 140%;
    color: #f2ece5;
    margin: 0;
    text-align: center;
    margin-bottom: 20px;
    /* Adds a subtle dark shadow */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.header-bg-item {
    position: absolute;
    right: -148px;
    rotate: 152deg;
    bottom: 13px;
    filter: invert(1);
}

.header-circle {
    position: absolute;
    top: -85px;
    left: -63px;
    filter: invert(1);
    opacity: 0.2;
}

.header-dot {
    position: absolute;
    filter: invert(0) hue-rotate(135deg) brightness(0.5);
    bottom: 80px;
    rotate: 90deg;
    right: 515px;
    opacity: 0.4;
}

@media (max-width: 1199px) {
    .kb-vintage-import .slider-section {
        min-height: max-content !important;
        padding: 300px 0 !important;
    }

    .kb-vintage-import .car-display-area,
    .kb-vintage-import .kb-fleet-hero-wrapper {
        min-height: fit-content !important;
    }

    .kb-vintage-import #kbFleetSyncedLabel {
        bottom: -158px !important;
    }
}

@media (max-width: 1024px) {
    .kb-vintage-import .slider-section {
        min-height: max-content !important;
        padding: 230px 0 !important;
    }

    .kb-vintage-import .car-display-area,
    .kb-vintage-import .kb-fleet-hero-wrapper {
        min-height: fit-content !important;
    }

    .kb-vintage-import #kbFleetSyncedLabel {
        bottom: -158px !important;
    }

    .cards-container {
        grid-template-columns: 1fr !important;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }
}

/* --- Smooth Hand & Rings --- */
.hand-anim-container {
    position: absolute;
    bottom: 0%;
    right: 50%;
    transform: translate(167%, 50%);
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.hand-img {
    width: 45px;
    height: 45px;
    z-index: 5;
    filter: invert(0) drop-shadow(0 0 10px rgba(197, 160, 89, 0.4));
    /* Smoothest tapping motion */
    animation: fluidTap 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.ring {
    position: absolute;
    border: 1px solid rgb(229 180 109);
    border-radius: 50%;
    box-shadow: 0 0 10px rgb(100 46 23);
    animation: fluidRing 3s infinite cubic-bezier(0.2, 0.5, 0.3, 1);
    opacity: 0;
}

.ring:nth-child(2) {
    animation-delay: 1s;
}

.ring:nth-child(3) {
    animation-delay: 2s;
}

/* --- Keyframes --- */
@keyframes fluidTap {

    0%,
    100% {
        transform: scale(1) translateY(0);
    }

    50% {
        transform: scale(0.85) translateY(-10px);
    }

    /* Button ki taraf tap karna */
}

@keyframes fluidRing {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0;
        border-width: 2px;
    }

    20% {
        opacity: 0.8;
    }

    100% {
        width: 140px;
        height: 140px;
        opacity: 0;
        border-width: 0.5px;
    }
}

.kb-footer-links ul li a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
}

@media screen and (max-width: 480px) {

    .kb-vintage-import .slider-section {
        padding: 190px 0 !important;
    }

    .kb-timeline-header,
    .kb-timeline-main {
        width: 96% !important;
    }

    .kb-time-point {
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        font-size: 0.6rem !important;
    }

    .kb-alfresco-panel-copy {
        font-size: 0.88rem !important;
    }
}