html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}



:focus{outline:0}

.half-circle {
    width: 10px;
    height: 5px;
    background: #74a3a4;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    margin-right: -30px;
}

.half-circle-2 {
    width: 10px;
    height: 5px;
    background: #74a3a4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    margin-left: -30px;
}

header.hidden {
    backdrop-filter: none;
}

header {

    backdrop-filter: blur(10px);
}

.headerButton.hidden-item {
    display: none!important;
}
#mainLogo.no-transf{
    transform: none!important
}

#mainLogo.transf {
    transform: translateY(-80px) !important;
}

.langsContainer ul {
    list-style-type: none;
    padding: 0px;
}

.langsContainer ul li {
    transform: none !important;
}

header #mainLogo svg {
    height: auto;
}

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

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)
}

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: #D7D2CB
}

.bFango {
    background: #B6ADA5
}

.bArgilla {
    background: #8C8279
}

.bMarrone {
    background: #6E6259
}

.bGreige {
    background: #41555c
}

.bPink {
    background: #eac0b5
}

.bWater {
    background: #7dc5ca
}

.bLilla {
    background: #f8f1ef
}

.cWhite {
    color: #FFF
}

.cAlyssum {
    color: #EAE6E0
}

.cTortora {
    color: #D7D2CB
}

.cFango {
    color: #B6ADA5
}

.cArgilla {
    color: #74a3a4
}

.cMarrone {
    color: #6E6259
}

.cGreige {
    color: #41555c
}

.mobileArrow {
    display: none
}

.bGreen {
    background: #dee1d0
}

.bVermarine {
    background: #dde9e5
}

.bVermarineGreen {
    background: #a3b5ad
}

section:not(.imageGridSection) {
    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
}

.layerUpdate {
    position: absolute;
    top: 0
}

#hTop {
    position: relative;
    height: 200vh
}

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

#scrollDown {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    bottom: 23%;
    left: 50%;
    margin-left: -165px;
    width: 330px;
    text-align: center
}

.scrollDownText {
    font-family: 'Geometria', 'Manrope';
    font-weight: 300;
    font-size: 14px;
    letter-spacing: .5px;
    margin-top: 12px
}

#verticalArrow {
    width: 10px
}

svg * {
    will-change: transform
}

#hImgContainer {
    transform: scale(1.01);
    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
}

#hImg {
    width: 100vw
}

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

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

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

#hPayLayer span {
    will-change: transform
}

#payLook {
    font-size: 13vw;
    font-weight: 300;
    margin-left: 8vw;
    height: 20vh;
    margin-top: 6vh;
    display: flex;
    position: relative;
    align-items: center
}

#payLimits {
    font-size: 2.5vw;
    font-weight: 300;
    position: absolute;
    top: calc(50% + 2.3vw);
    left: 19vw
}

#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: 380px;
    position: absolute;
    top: 27%;
    left: calc(50% - 190px)
}

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

#hLogo .logoLine {
    transform-origin: center
}


/* == Header == */
header {
    position: fixed;
    top: 0;
    left: 0;
    padding-right: 20px;
    z-index: 3;
    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: 172px;
    display: flex;
    align-items: center;
    margin-left: 0;

}

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

#mainLogo .fillColor {
    fill: #FFF
}

#mainLogo.dark .fillColor {
    fill: #41555c
}

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

#menuClose {
    width: 68px;
    height: 68px;
    top: 10px;
    left: 32px;
    position: absolute; /* Add position: absolute so top/left work */
    z-index: 1;
    overflow: hidden; /* Hide lines initially if they extend beyond the custom-icon bounds */
}

.custom-icon {
    position: relative;
    width: 45px;
    height: 45px;
    opacity: 0; /* Initially hide the icon */
    transform: scale(0.5); /* Start smaller */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Transition for the whole icon */
}




.custom-icon .line {
    position: absolute;
    width: 18px;
    height: 2px;
    background-color: #6fa0a2;
    transform-origin: left center;
    opacity: 0; /* Initially hide lines */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Transition for lines */
    transform: scaleX(0); /* Start with no width */
}



/* Top-left to center */
.custom-icon .line-1 {
    top: 4px;
    left: 5px;
    transform: rotate(45deg) scaleX(0); /* Initially no width */
}

/* Bottom-left to center */
.custom-icon .line-2 {
    bottom: 4px;
    left: 5px;
    transform: rotate(-45deg) scaleX(0); /* Initially no width */
}

/* Top-right to center */
.custom-icon .line-3 {
    top: 17px;
    right: -1px;
    transform: rotate(-45deg) scaleX(0); /* Initially no width */
}

/* Bottom-right to center */
.custom-icon .line-4 {
    bottom: 17px;
    right: -1px;
    transform: rotate(45deg) scaleX(0); /* Initially no width */
}

.custom-icon .center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #6fa0a2;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(45deg) scale(0); /* Initially no size */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Transition for the circle */
}



#menuClose.show .custom-icon {
    opacity: 1;
    transform: scale(1);
}

/* Animation when 'show' class is added */
#menuClose.show .custom-icon .center-circle {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1); /* Appear the circle */
}

#menuClose.show .custom-icon .line {
    opacity: 1;
    transform: scaleX(1); /* Make lines appear */
    transition-delay: 0.2s; /* Delay lines animation after circle starts */
}

/* Specific delays for lines to appear sequentially or with slight offsets */
#menuClose.show .custom-icon .line-1 {
    transform: rotate(45deg) scaleX(1);
    transition-delay: 0.3s;
}
#menuClose.show .custom-icon .line-2 {
    transform: rotate(-45deg) scaleX(1);
    transition-delay: 0.4s;
}
#menuClose.show .custom-icon .line-3 {
    transform: rotate(-45deg) scaleX(1);
    transition-delay: 0.5s;
}
#menuClose.show .custom-icon .line-4 {
    transform: rotate(45deg) scaleX(1);
    transition-delay: 0.6s;
}


#bookNowClose {
    width: 68px;
    height: 68px;

}

#bookNowClose.show .custom-icon {
    opacity: 1;
    transform: scale(1);
}
/* Animation when 'show' class is added */
#bookNowClose.show .custom-icon .center-circle {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1); /* Appear the circle */
}

#bookNowClose.show .custom-icon .line {
    opacity: 1;
    transform: scaleX(1); /* Make lines appear */
    transition-delay: 0.2s; /* Delay lines animation after circle starts */
}

/* Specific delays for lines to appear sequentially or with slight offsets */
#bookNowClose.show .custom-icon .line-1 {
    transform: rotate(45deg) scaleX(1);
    transition-delay: 0.3s;
}
#bookNowClose.show .custom-icon .line-2 {
    transform: rotate(-45deg) scaleX(1);
    transition-delay: 0.4s;
}
#bookNowClose.show .custom-icon .line-3 {
    transform: rotate(-45deg) scaleX(1);
    transition-delay: 0.5s;
}
#bookNowClose.show .custom-icon .line-4 {
    transform: rotate(45deg) scaleX(1);
    transition-delay: 0.6s;
}



#mainMenuController:after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: #EAE6E0;
    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: #fff;
        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
    }

    .menuController.show:hover .half-circle,
    .menuController.show:hover .half-circle-2 {
        background: #fff;
        transition: background 1000ms cubic-bezier(.19, 1, .22, 1), fill 1000ms 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: 2px;
    background: #74a3a4
}

.menuController .fillColor,
.headerButton .circlePath .fillColor {
    stroke: #74a3a4
}

.menuController .line {}

.menuController .line._1 {}

.menuController .line._2 {
    margin-top: 4px;
    margin-bottom: 4px;
    transition-delay: 50ms
}

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

.menuController .half-circle {
    width: 10px;
    height: 5px;
    background: #74a3a4;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    margin-right: -30px;
}

.menuController .half-circle-2 {
    width: 10px;
    height: 5px;
    background: #74a3a4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    margin-left: -30px;
}
@media (max-width: 960px){
.menuController .half-circle {
    width: 8px;
    height: 4px;
    background: #74a3a4;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    margin-right: -17px;
}


.menuController .half-circle-2 {
    width: 8px;
    height: 4px;
    background: #74a3a4;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    margin-left: -17px;
}
}
.circlePath {
    width: 38px;
    height: 38px;
    transform: scale(.5);
    opacity: 0
}

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

.headerButton.dark .circlePath circle {
    stroke: #41555c
}

.headerButton.dark .icon .fillColor {
    fill: #41555c
}

.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: #41555c;
    fill: #FFF
}

.headerButton:hover .icon path {
    fill: #41555c
}

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

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

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

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

.langsContainer a {
    color: #74a3a4;
    font-family: 'Geometria', 'Manrope';
    font-size: 13px;
    text-transform: lowercase;
    transition: color 1000ms cubic-bezier(.19, 1, .22, 1), fill 1000ms cubic-bezier(.19, 1, .22, 1)
}

header .langsContainer a {
    font-weight: 600
}

.langsContainer.dark a {
    color: #41555c
}

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

.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: 1500ms
}

.lang-item:before {
    content: '';
    position: absolute;
    height: 14px;
    width: 1px;
    right: -25px;
    background: #74a3a4;
    top: 50%;
    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: #74a3a4;
    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% - 15.5vw)
}

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

.fullWhite .oBackground{
    background:#fff!important;
}
.oBackground {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 20px;
    background: #74a3a4
}

.oOuter {
    position: absolute;
   
    right: 0;
    
    border-radius: 100px;
}
.oOuter:not(.footerBtnOuter){
 width: 53px;
}
.oOuter .fill {
    opacity: 0
}

@media (max-width: 960px){
    .oOuter:not(.footerBtnOuter){
     width: 46px;
    }
}
.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;
    overflow: hidden
}

.transparent .oContent {
    background: none
}

.oLabelContainer {
    z-index: 1
}

.oLabel {
    font-family: 'Geometria', 'Manrope';
    font-size: 13px;
    color: #FFF;
}

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

.oSymbol {
    position: absolute;
    right: -12px;
    top: 5px
}

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

.oArrow.fillColor {
    fill: #41555c
}

.oButton .oArrow {
    opacity: 0
}

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

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

.oButton.dark .oBackground {
    background: #41555c
}

.oButton.dark .oContent {
    background: #41555c
}

.oButton.dark .oArrow.fillColor {
    fill: #41555c
}

#bookNow.dark .oSymbol .fillColor,
#reserveTable.dark .oSymbol .fillColor {
    fill: #41555c
}

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

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

.oButton.dark .oOuter.fillColor {
    stroke: #928474;
    fill: #41555c
}

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

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

.oButton.whiteArrow .oSymbol .fillColor {
    fill: #74a3a4
}

.oButton.whiteArrow:hover .oSymbol .fillColor {
    fill: #6e6259
}

.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: #41555c;
    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;

}

#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: #FFF
}

.langsContainer.menuForced .lang-item:before{
    background: #FFF;
}
.langsContainer.menuForced .lang-item:after {
    background: #74a3a4;
}

.headerButton .icon .fillColor {
    fill: #74a3a4;
}

.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/casangelina/assets/images/whitechecks.png);
    display: inline;
    vertical-align: baseline;
    font-family: 'Geometria', 'Manrope';
    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', 'Manrope';
    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', 'Manrope';
    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-family: 'Geometria','Manrope';
    font-size: 22px;
    line-height: 36px;
    will-change: transform
}

.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: 'Geometria','Manrope'
}

.compositionText {
    max-width: 280px
}

.geometria {
    font-family: Geometria
}

.text.tech {
    font-family: 'Geometria', 'Manrope';
    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: 'Geometria','Manrope';
    text-transform: lowercase
}

#prSection .miniTitle{
opacity:0;
}

.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: 14%;
    margin-top: 20px
}

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

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

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

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

.accolade.reader {
    width: 21%;
    max-width: 100px
}

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

#location {
    display: flex
}

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

.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)
}

#locationIntroPic {
    margin-top: -5vw
}

.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)
}

#locationTitleContainer {
    display: flex
}

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

.smallTitle {
    font-size: 2.6vw;
    font-family: 'Geometria', 'Manrope';
    line-height: 4vw;
    will-change: transform;
    font-weight:300;
}
.blockTitle {
    font-size: 2.6vw;
    font-family:'Geometria', 'Manrope';
    line-height: 4vw;
    will-change: transform;
    font-weight:300;
}

#locationIntroText {
    max-width: 330px;
    margin-left: calc(17.5vw + 20px)
}

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

#locationContent {
    display: flex
}

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

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

.tl {
    opacity: .6
}

.tl._1 {
    font-family: 'Geometria', 'Manrope';
    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: 'Geometria','Manrope';
    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', 'Manrope';
    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', 'Manrope';
}


#hFacilitiesTitle,#locationTitle{
font-weight:600;
}
.sectionTitle .small,#locationTitle .small {
    font-size: 2.6vw;
     font-family: 'Geometria', 'Manrope';
    will-change: transform;
}

.sectionTitle .big {
    font-size: 7vw;
    line-height: 6vw;
    position: relative
}

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

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



/* PR Slider */
#prSlider {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
    padding: 40px 0px 0px 0px !important;
}

#prText {
    flex: 1;
    max-width: 600px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    order: 1;
}

.is-touch #prText .oButton {}

.is-touch #prText {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#prText p {
    margin: 0;
}

#prImg {
    flex-shrink: 0;
    order: 2;
    position: relative;
    margin-right: 5vw;
    width: 56vw;
    height: 38vw;
}

#prImg img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

@media (max-width: 960px) {
    #prText {
        flex-direction: column;
        align-items: flex-start;
        margin-top: -10px;
        order: 2;
    }

    #prImg {
        margin-left: 60px;
        width: calc(100% + 40px);
        height: 68vw;
        top: 0;
        order: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #prText {
        order: 2;

    }

    #prImg {
        order: 1;
        margin-top: 0px;
    }
}

@media (max-width: 960px) {}



#prSlider {
    height: 45vw;

}

#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
}

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

#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: 300px
}

.listItemTitle {
    text-align: center;
    margin-top: 25px;
    font-family: 'Geometria', 'Manrope';
    font-size: 22px
}

.listItemSubtitle {
    text-align: center;
    font-family: 'Geometria','Manrope';
    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
}

.slidingTitleBig {
    font-size: 6vw;
    font-family: 'Geometria','Manrope';
    display: flex
}

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

.slidingTitleSmall {
    font-family: 'Geometria', 'Manrope';
    font-weight: 300;
    font-size: 2.5vw
}

#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', 'Manrope';
    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: #000;
    opacity: .1
}

#hFacilitiesSticky {
    min-height: 100vh;
    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 {
    order: 0;
    margin-top: 1.125vw;
    left: -.5vw
}

#hFacilitiesTitle .small {
    order: 1;
    position: relative;
    left: -.15vw
}

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
}

.hFacilitiesItem.vertical .hFItemPic {
    width: 22vw;
    height: 35vw
}

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

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

.hFItemTitle {
    font-family: 'Geometria', 'Manrope';
  font-weight: 300;
  font-size: 2.1vw;
  position: absolute;
  color: #8C8279;
  -webkit-transition: opacity 800ms cubic-bezier(.19, 1, .22, 1);
  transition: opacity 800ms cubic-bezier(.19, 1, .22, 1);
  background: #EAE6E0;
  padding: 0px 10px;
}

#hFacilitiesSlider {
    display: flex;
    margin-top: 6vw
}
@media (max-width: 960px){
#hFacilitiesSlider{
	margin-top:-22vw;
    }
}
#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;
    padding-top: 50px;

}

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

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

#hExperiencesTitle {
    margin-top: -2.8vw
}

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

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

#hExperiencesLayer {
    flex: 1;
    height: 650px;
    min-width: 35vw
}

#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', 'Manrope';
    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: 'Geometria','Manrope'
}

.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', 'Manrope';
    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
}



#footerMain {
    height: 100%
}

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

#footerSticky {
    height: 100vh
}

#footerDataTop {
    background: #f3f0ec;
    display: flex;
    flex-direction: column
}

#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: 280px
}

#footerLogo .fillColor {
    fill: #FFF
}

#footerInfo p,
#footerInfo a {
    font-family: 'Geometria', 'Manrope';
    font-size: 18px;
    line-height: 33px;
    color: #FFF;
    font-weight: 300;
    text-decoration: none
}

#copyright {
    margin-bottom: 20px
}

#copyright p {
    font-family: 'Geometria','Manrope';
    font-size: 14px;
    color: #FFF;
    font-weight: 300;
    text-decoration: none;
    letter-spacing: 1px
}

.socials {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px
}

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

#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', 'Manrope';
    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: 'Geometria','Manrope';
    font-size: 1.3vw
}

#date .ext-date {
    font-family: 'Geometria', 'Manrope';
    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', 'Manrope';
    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', 'Manrope';
    color: #6d5f51
}

.temp_text {
    text-align: center;
    font-family: 'Geometria','Manrope';
    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', 'Manrope';
    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: #dbd6d1;
    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
}

#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 {
    max-width: 90px
}

.partner.michelin.key {
    position: relative;
    top: 4px
}

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

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

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

.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
}

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% - 140px);
    margin-top: 70px;
    box-sizing: border-box;
    margin-left: 10px;
    width: calc(100% - 20px);
    padding: 7.5vh 0;
    position: relative
}

#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 {
    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: space-between
}

#navLogo {
    width: 100%;
    max-width: 200px;
    margin-top: 4px
}

#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: 16px;
    font-family: 'Geometria', 'Manrope';
    text-transform: lowercase;
    margin-top: 15px;
    position: relative;
    font-weight: 500
}

.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 {
    transform: none!important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: calc(70px + 28vh);
    will-change: transform;
    position: relative;
    padding-top: 50px;
   
}

.navSection {
    margin-top: 4.5vh
}

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

.navSectionTitle {
    font-family: 'Geometria', 'Manrope';
    color: #fff;
    font-size: 4.5vh;
    font-weight: 300;
    line-height: 5.8vh;
    padding-right: 100px;
    padding-bottom: 10px;
    
}

.navSectionTitle a {
    color: #fff;

}



.navSection:after{
      content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 260px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='224' height='19' viewBox='0 0 224 19' fill='none'><path d='M224 11.5L0.5 11.5' stroke='%236FA0A2' stroke-width='5'/><path d='M224 9.5C224 8.25244 223.692 7.0171 223.092 5.86451C222.493 4.71191 221.615 3.66464 220.508 2.78248C219.401 1.90033 218.086 1.20056 216.64 0.723143C215.193 0.245724 213.643 -1.04357e-06 212.077 -8.74228e-07C210.511 -7.0489e-07 208.961 0.245724 207.514 0.723144C206.068 1.20056 204.753 1.90033 203.646 2.78249C202.539 3.66464 201.661 4.71191 201.061 5.86451C200.462 7.0171 200.154 8.25244 200.154 9.5L212.077 9.5L224 9.5Z' fill='%236FA0A2'/></svg>") no-repeat;
    opacity: 0;
    transform: scale(0);
    will-change: transform, opacity;
    -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);
}

.navSection.show:hover: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
}



 .navSection.show.active: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: 'Geometria', 'Manrope';
    color: #322e2b;
    font-size: 2.2vh;
    font-weight: 300;
    padding: 4px 0;
    text-transform: lowercase;
    display: flex;
    justify-content: space-between;
    position: relative;
    will-change: transform;
    margin-top: 1px
}

.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 {
    fill: #FFF
}

#actionTrack circle.fillColor {
    stroke: #FFF
}

#actionTrack.dark .oArrow.fillColor {
    fill: #6E6259
}

#actionTrack.dark circle.fillColor {
    stroke: #6E6259
}

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

#actionTrack .oArrow {
    position: absolute;
    top: -3px;
    left: -3px;
    transform: rotateZ(0deg);
    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', 'Manrope';
    font-size: 57px;
    font-weight: 300
}

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

.overviewSub {
    font-family: 'Geometria','Manrope';
    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/casangelina/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', 'Manrope';
    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: 'Geometria','Manrope';
    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', 'Manrope';
    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;
    right: 0
}

.titleLogo.sustainability img {
    width: 7vw;
    margin-top: -2.6vw
}

#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/casangelina/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: 1.8vw;
    margin-left: 2.5vw;
    margin-top: -1.3vw
}

#detailServices {
    margin-top: 24vw
}

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

.listText {
    margin-left: 6vw
}

.listItem {
    font-family: 'Geometria','Manrope';
    font-size: 2.2vw;
    margin-top: 1vw
}

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

#detailServicesLeft {
    width: 60vw
}

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



.galleryContainer .sliderTitle{
    position: absolute;
    width: 430px;
    top: 0;
    left: 150px;
    z-index: 10;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.galleryContainer .sliderTitle h2{
    font-family: 'Geometria', 'Manrope';
    font-weight: 300;
    font-size: 1.5vw;
    will-change: transform;
    padding:20px;
}
.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', 'Manrope';
    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: 17.2vw;
    display: flex;
    flex-direction: column;
    align-items: center
}

.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 {
    align-items: center
}

#detailBody .detailBodyContent.summer .right {
    width: 25vw
}

#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: 20vw
}

.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', 'Manrope';
    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: 80px;
    left: 2.5vw
}

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

img.ruinart {
    width: 170px
}

.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', 'Manrope';
    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
}

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

.profileTitle {
    display: inline-block;
    font-size: 5vw;
    font-weight: 300;
    font-family: 'Geometria', 'Manrope';
    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)
}

.scheme1.simpler .text {
    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: 'Geometria','Manrope';
    margin-left: 2.5vw;
    font-size: 2vw;
    line-height: 3vw
}

.editorialText .editorialPreTitle {
    margin-left: 0
}

#editorialWords {
    font-size: 1.2vw;
    font-family: 'Geometria','Manrope';
    margin-left: 2.5vw;
    line-height: 2vw
}

#editorialTitle {
    margin-left: 7.5vw;
    font-family: 'Geometria','Manrope';
    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: -2.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', 'Manrope';
    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', 'Manrope';
    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', 'Manrope';
    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', 'Manrope';
    color: #FFF;
    margin-top: -3px
}

.formField textarea {
    background: none;
    border: 1px solid #b4a89f;
    padding: 5px;
    font-size: 15px;
    font-family: 'Geometria', 'Manrope';
    color: #FFF
}

.wpforms-container label {
    font-family: 'Geometria', 'Manrope';
    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/casangelina/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', 'Manrope';
    color: #FFF;
    font-size: 15px;
    padding-left: 2px
}

.formField textArea::-webkit-input-placeholder {
    padding-left: 0
}

.wpforms-field-description {
    font-family: 'Geometria', 'Manrope';
    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', 'Manrope';
    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', 'Manrope';
    font-size: 13px;
    width: 100%;
    display: block
}

.newsletter_input select {
    background: none;
    border: none;
    color: #FFF;
    font-family: 'Geometria', 'Manrope';
    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/casangelina/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', 'Manrope';
    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/casangelina/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', 'Manrope';
    color: #FFF;
    font-size: 13px;
    padding-left: 2px
}

.newsletter_input input:-ms-input-placeholder {
    color: #fff;
    font-family: 'Geometria', 'Manrope';
    color: #FFF;
    font-size: 13px;
    padding-left: 2px
}

.newsletter_input input::-ms-input-placeholder {
    color: #fff;
    font-family: 'Geometria', 'Manrope';
    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/casangelina/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', 'Manrope';
    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: 'Geometria','Manrope';
    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', 'Manrope';
    font-size: 16px;
    line-height: 24px;
    font-weight: 400
}

.ovSmall+.ovSmall {
    margin-left: 5vw
}

.ovPeople {
    font-size: 2.3vw;
    font-family: 'Geometria', 'Manrope';
    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: #6E6259;
    position: absolute;
    transform: rotate(45deg);
    transform-origin: top left;
    left: 0
}

.overlayCloseInner:after {
    content: '';
    width: 12px;
    height: 1px;
    background: #6E6259;
    position: absolute;
    transform: rotate(-45deg);
    transform-origin: top right;
    right: 0
}

.overlayClose .fillColor {
    stroke: #6E6259
}


.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 , .ovGroupForm .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%
}


.input-field_required{
    color:rgb(171, 6, 6);
    display: none;
    flex: 4;
    margin-left:4px;
}

.input-field_required.show {
  display: inline;
}

.phoneIco ,.emailIco, .fullnameIco{
    width: 34px;
    height: 34px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain
}


.iti--separate-dial-code .iti__selected-flag{
    background: transparent!important;
}

.iti{
    margin-left:30px;
    opacity:0;
    transition-delay:300ms;
}
.iti.show{
    opacity:1;
}


@media (max-width: 960px){
    .iti{
        margin-left:0px; 
    }
    .input-field_required{
    margin-left: 0px;
    
}
}

.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:1440px) {
    .ovSmall+.ovSmall {
        margin-left: 2vw
    }

    .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
    }

    .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
    }
}

@media all and (max-width:1365px) {
    #bookOverlay .ovGroup.double {
        flex-direction: column;
        align-items: flex-start
    }

    .ovSmall+.ovSmall {
        margin-left: 0;
        margin-top: 25px
    }

    .ovSmall br:nth-child(2) {
        display: none
    }

    #bookOverlay .overlayContainer>div:nth-child(2):after {
        content: none
    }
}

@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
    }
}

.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 #locationText {
    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:960px) {
    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 0 0;
        height: 70px;
        
    }

    .headerButton.email {
        display: none
    }

    #leftHeader {
        width: auto;
        position: relative
    }

    #mainLogo {
        width: 132px;
        
    }

    #mainMenuController {
        width: 25px;
        height: 25px;
        padding: 10px;
        padding-right: 18px;
    }

    #mainMenuController:after {
        content: none
    }

    .menuController .line {
        width: 25px
    }

    .mainContainer {
        width: calc(100% - 60px);
        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);
        border: none;
    }

    .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: 25vw;
        letter-spacing: 0;
        margin-left: 35px;
        height: 24.5vw;
        margin-top: 2vw
    }

    #payLimits {
        font-size: 6vw;
        font-weight: 300;
        color: #928474;
        top: calc(50% + 3vw);
        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(-1120px)
        }
    }

    .accolade.slh img,
    .accolade.reader img {
        width: auto
    }

    .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.traveller,
    .accolade.forbes,
    .accolade.design {
        max-width: 80px;
        min-width: 80px
    }

    .accolade.gstc {
        max-width: 162px;
        min-width: 162px
    }

    #location {
        margin-top: calc(80px + 15vw)
    }

    #locationTitleContainer {
        width: 100%;
        flex-direction: column
    }

    .introPic,
    .introPic.big {
        width: 43vw;
        height: 30vw
    }

    #locationIntroPic {
        margin-top: -15vw
    }

    #locationTitle {
        margin-top: 20px;
        align-self: flex-start;
        margin-left: 0
    }

    .blockTitle {
        font-size: 35px;
        line-height: 40px
    }

    #locationContent {
        flex-direction: column;
        margin-top: 40px
    }

    #locationPic {
        margin-left: -20px;
        width: calc(100% + 40px);
        height: 68vw;
        top: 0
    }

    #locationPic img {
        height: 120%;
        top: -10%
    }

    #locationText {
        margin-top: 40px;
        margin-bottom: 40px;
        max-width: none;
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start
    }

    #locationIntroText {
        margin-left: 22vw
    }

    #locationLayer {
        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;
        padding-bottom: 270px;
    }

    .miniTitle {
        font-size: 16px
    }

    .sectionTitle .small, #locationTitle .small{
        font-size: 7vw;
    }
    #hFacilitiesTitle,#locationTitle .small{
    	font-weight:300;
    }
    

    .sectionTitle .big {
        font-size: 11.3vw;
        line-height: 12vw
    }

    #prTop {
        flex-direction: column
    }

    #prSlider+.oButton {
        position: absolute;
        bottom: -300px !important;
        left: -10px !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;
        gap: 40px;
        margin-bottom: 30px;
    }

    #prSection .mainBackground {
        top: calc(46px + 18vw)
    }

    #hFacilitiesTitle {
        margin-top: 15px
    }

    #hFacilities {
        height: 300vh;
        padding-top: 0px;
        margin-top: -80px;
    }
    .location_page #hFacilities{
    	margin-top: 120px !important;
    }

    #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: 75vw;
        height: 47vw
    }

    .hFacilitiesItem.vertical .hFItemPic {
        width: 47vw;
        height: 75vw
    }

    .hFacilitiesItem {
        margin-left: 60px
    }

    .hFItemTitle {
        font-weight: 400;
        opacity: .7;
        font-size: 6vw
    }

    .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: 260px
    }

    #hDiningFixed {
        margin-left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        left: 0
    }

    #hDiningTitle {
        align-self: flex-end;
        margin-top: 30px
    }

    #tasteTitle {
        margin-top: 160px
    }

    .long .hDiningItemPic {
        height: 38vw;
        width: 100%
    }

    #hDining .mainBackground {
        height: calc(48vw + 345px)
    }

    .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 {
        margin-top: -8.5vw
    }

    #hExperiencesTitle .slidingTitleBig {
        margin-top: -4.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;
        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;
        top: -18%
    }

    #footerRight {}

    #footerLeft {
        justify-content: flex-end
    }

    #footerMain .mainBackground img {
        object-position: right
    }

    #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.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: right;
        width: 80px
    }

    .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;
        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
    }

    .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: 3.1vw;
        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 {
        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
    }

    .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: 100%;
        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: -3.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
    }

    .fgroup-container {
        padding-top:10px;
    }
    #Vforms .icoContainer img{
    width: 22px;
  height: 20px;
    }
    .formContainer {
        margin: 0;
        width: 100%;
        padding-bottom:60px!important;
        padding-top:40px!important;
        padding-right:0px!important;
        padding-left:0px!important;
    }

    .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
    }

    .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: 25px 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-bottom: 10px;
        display: flex
    }

    #navBottom .socials svg {
        height: 18px
    }

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

    #navBottom .socials .ig {
        margin-left: 10px
    }

    .navSection:after {
        top: 40px
    }

    .subItem .subTitle {
        display: none
    }

    .subItem:before {
        content: none
    }

    .navSectionTitle {
        padding-right: 0;
        font-size: 24px
    }

    #navContent {
        padding-right: 0;
        padding-left: 0;
        margin: 0 10px
    }

    .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
    }
    
    .galleryContainer .sliderTitle{
        position: relative;
        height:40px;
        width: 110%;
        top: 0;
        left: 0;
    }
    
    .galleryContainer .sliderTitle h2{
       font-size: 18px;

    }
    .photogalleryMarginBottom {
        margin-bottom: 40px
    }

    .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;
        padding-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
    }

    .lang-item:before {
        right: -15px
    }

    .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 {
        
        left: 0px;
        top:0px;
    }

    #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.ae {
        margin-top: 77px
    }

    .partner.michelin {
        margin-top: 50px
    }

    .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: 174px
    }

    #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)
    }

    .sustainabilityText,
    .sustainabilityText.wide {
        margin-left: 56px;
        width: auto
    }

    .titleLogo.sustainability img {
        width: 20vw;
        margin-top: -1.5vw
    }

    .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
}
/* imageGridSection */

.imageGridSection {
    padding: 60px 45px;
    max-width: 100%;
}


.imageGridWrapper {
    display: flex;
    gap: 30px;
    /* allows wrapping if needed on medium screens */
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.imageItem {
    width:30vw;
    height:22vw;
    
}



/* Responsive for mobile */
@media (max-width: 768px) {
  .imageGridSection {
	padding: 130px 45px 60px 45px;
    }
  .imageGridWrapper {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .imageItem {
    width: 80vw;
    height: 50vw;
  }
}




/* Footer */
footer[data-scroll-section] {
    padding: 60px 5vw;
    background: #8C8279;
    color: white;
    min-height: 300px;
    /* or whatever fits your design */
    height: auto!important;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#footerLeft,
#footerRight {
    flex: 1 1 100%;
    max-width: 600px;
    margin-bottom: 40px;
}

#footerRight {
    margin-top: 50px;
}

#footerLogo {
    margin-bottom: 20px;
}

#footerLogo svg {
    width: 180px;
    height: auto;
}

#footerInfo {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}

#footerInfo a,
#footerInfo a:visited {
    color: white;
    text-decoration: none;
}


.footer-socials {
    flex-direction: row;
    display: flex;
    gap: 20px;

}

.footer-socials .ig {
    margin-top: 0;
}



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

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

.footerButton .circlePath circle {
    stroke: #ffffff;
}

.footerButton .icon {
    fill: #ffffff;
}

#copyright {
    font-size: 13px;
}

.socials {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.socials svg {
    width: 24px;
    height: 24px;
    fill: #74a3a4;
}

/* Responsive behavior */
@media (max-width: 768px) {

    #footerLeft,
    #footerRight {
        max-width: 100%;

    }

    #footerLeft {
        order: 2;
    }

    #footerRight {
        order: 1;
        margin-top: 0;
    }

    #footerLogo,
    #footerInfo,
    #copyright {}

    .socials {
        justify-content: center;
        flex-wrap: wrap;
    }

    .socials a {
        margin: 0 10px;
    }

    .footer-socials {}
}




/* Contacts */

/* Contacts */
.formContainer{
    padding:100px;
}

#Vform-submit{
    align-self: flex-end;
    width:160px;
}
#customContactForm{
display: flex;
  flex-direction: column;
}
#customContactForm, 
#customContactForm * {
  box-sizing: border-box; /* ensures padding doesn’t break widths */
}

.fgroup-container {
  display: flex;
  flex-direction: row;
  gap: 24px;              /* space between columns */
  width: 100%;
  position: relative;
}

.fgroup {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.fgroup:not(:has(textarea))::after{
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #FFF;
    transform-origin: left;
    opacity: 0.6;

}
.fgroup label {

  display: flex;
  flex-direction: row;
  margin-bottom: 8px;     /* small spacing for clarity */
}

.fgroup input,
.fgroup textarea {
  width: 100%;            /* full width on all devices */
  font-family: Geometria;
  font-size: 16px;
}

/* keep your original input/textarea visual style */
.fgroup input {
  background: none;
  border: none;
  padding-left: 10px;  
  margin-bottom: -5px;
}

.fgroup textarea {
   background: none;
  border: 1px solid #ffffff9e;
  padding: 8px 10px;
  min-height: 200px;
  resize: vertical;
  margin-bottom: 20px;
  margin-top: 40px;
    
}


/* -------- Breakpoints -------- */

/* Large screens (desktops/laptops): keep two columns */
@media (min-width: 1025px) {
  .fgroup-container .fgroup { flex: 1 1 0; }
}

/* Tablets: comfortable two columns with wrapping */
@media (max-width: 1024px) {
  .fgroup-container {
    flex-wrap: wrap;
    gap: 16px;
  }
  .fgroup-container .fgroup {
    flex: 1 1 calc(50% - 8px); /* two columns */
  }
}

/* Phones: single column, bigger targets */
@media (max-width: 768px) {
  .fgroup-container {
    flex-direction: column;
    gap: 12px;
  }
  .fgroup-container .fgroup {
    flex: 1 1 100%;
  }
  .fgroup input,
  .fgroup textarea {
    font-size: 16px;      /* good for mobile keyboards */
    line-height: 1.4;
  }
  .fgroup textarea {
    min-height: 180px;    /* slightly smaller on phones */
  }
}

/* Tiny phones */
@media (max-width: 400px) {
  .fgroup-container { gap: 10px; }
  .fgroup { margin-bottom: 16px; }
}


.fgroup .iti{
    opacity:1;
    margin-left:5px;
    margin-top: 5px;
}

#Vform-phone{
    padding-top:10px;
}

@media (max-width: 768px){
    #Vform-phone{
    padding-top:0px;
    }
    .fgroup .iti{
    margin-left:3px;
    }
}



/* Ensure the dropdown appears above all elements */
.iti__country-list {
  z-index: 99999 !important;
}


.iti-mobile .iti--container{
    opacity:1;
}


/* Activity-Overlay */
/* =========================
   Overlay – Harmony Edition
   ========================= */

/* Backdrop */


/* =======================================================
   Activity overlay responsive layout
   ======================================================= */
/* 1. Overall wrapper: two columns on desktop */
#activity-Overlay .activityInner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "header image"
    "body   image"
    "button image";
  gap: 40px; /* base gap between sections */
  align-items: flex-start;
}

/* 2. Place each section in its own grid area */
#activity-Overlay .activityHeader { 
  grid-area: header; 
  display: flex; 
  flex-direction: column; 
  gap: 20px; /* space between title and subtitle */
}
#activity-Overlay .activityBody   { grid-area: body; }
#activity-Overlay .activityButton { 
  grid-area: button; 
  margin-top: 32px; 
  display: flex;
}
#activity-Overlay .activityImage  { 
  grid-area: image; 
  position: relative; 
  border-radius: 16px; 
  overflow: hidden; 
  border: 1px solid rgba(255,255,255,0.08); 
}

/* 3. Constrain the image to a square */
#activity-Overlay .activityImage::before {
  content: "";
  display: block;
  padding-top: 100%;
}
#activity-Overlay .activityImage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4. Close button */
#activity-Overlay .overlayClose {
  position: absolute;
  top: 24px;
  right: 24px;
}

/* Desktop font sizes */
#activity-Overlay .activityHeader h3 {
  font-size: 40px;
  line-height: 50px;
}
#activity-Overlay .activityHeader span {
  font-size: 25px;
  line-height: 32px;
}
#activity-Overlay .activityBody {
  font-family: 'Geometria','Manrope';
  font-size: 22px;
  line-height: 36px;
  z-index: 1;
  width: 50%;
  margin-top: -16px;
}
#activity-Overlay .oButton .oLabel {
  font-size: 16px;
  line-height: 19px;
}

/* Default padding for very large screens */
#activity-Overlay .activityContainer {
  padding: 320px;
}

/* ============================= */
/* Unified Responsive Adjustments */
/* ============================= */

/* Extra-large laptops / desktops */
@media (max-width: 1600px) {
  #activity-Overlay .activityContainer { padding: 200px; }
}

/* Standard laptops / tablets */
@media (max-width: 1200px) {
  #activity-Overlay .activityContainer { padding: 120px; }
}

/* Tablets / large phones */
@media (max-width: 960px) {
  #activity-Overlay .activityInner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "image"
      "body"
      "button";
    gap: 20px;
  }
  #activity-Overlay .activityContainer { padding: 60px; }
  #activity-Overlay .activityHeader { gap: 10px; }
  #activity-Overlay .activityBody {
    font-size: 16px;
    line-height: 26px;
    width: 100%;
    margin-top: 8px;
  }
  #activity-Overlay .activityButton { margin-top: 16px; }
  #activity-Overlay .overlayClose { top: 12px; right: 12px; }
  #activity-Overlay .activityHeader h3 {
    font-size: 25px;
    line-height: 31px;
  }
  #activity-Overlay .activityHeader span {
    font-size: 16px;
    line-height: 21px;
  }
  #activity-Overlay .oButton .oLabel {
    font-size: 13px;
    line-height: 18px;
  }
}

/* Slightly smaller tablets */
@media (max-width: 750px) {
  #activity-Overlay .activityContainer { padding: 50px; }
}

/* Phones */
@media (max-width: 600px) {
  #activity-Overlay .activityContainer { padding: 40px; }
}

/* Tiny phones */
@media (max-width: 400px) {
  #activity-Overlay .activityContainer { padding: 30px; }
}


/*Badge Link */
#acfBadgeLink{
  position: fixed;
  top: 300px;
  right: 0;
  z-index: 90000;
  display: block;
  min-width: 120px;
  min-height: 40px;
  text-decoration: none;
}
#acfBadgeLink::before{
  content: attr(data-label);
  display: block;
  background: #4b00a1;
  color: #fff;
  font: bold 1rem/1.2 sans-serif;
  padding: 1rem;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  white-space: nowrap;
}
#acfBadgeLink[data-empty="1"]::before{ content:''; display:none; }
@media (max-width: 480px){ #acfBadgeLink{ display:none; } }

#veAcfModal{ position:fixed; inset:0; display:grid; place-items:center; z-index: 4000;}
#veAcfModal[hidden]{ display:none;  z-index: 100000}
.veAcfModal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.veAcfModal__panel{
  position:relative; width:min(820px, 92vw); max-height:90vh; overflow:auto;
  background:#fff; border-radius:12px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.veAcfModal__close{
  position:absolute; top:8px; right:8px; background:#f3f4f6; border:0; border-radius:8px; padding:.25rem .5rem;
  font-size:20px; cursor:pointer;
}

/*404 Page*/
.error-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1rem;
}

.error-content {
  max-width: 700px;
  margin: 0 auto;
}

.error-title {
  font-size: 8rem;
  font-weight: 700;
  color: #74a3a4; /* Villa Esperia primary color */
  margin-bottom: 1rem;
}

.error-subtitle {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.error-text {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 2rem;
}

.error-page .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  background: #74a3a4;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.error-page .btn:hover {
  background: #4d6f70;
}


/*  Alert Pop Up*/
.ve-alert { position: fixed; inset: 0; display: none; z-index: 9999; }
.ve-alert[aria-hidden="false"] { display: grid; place-items: center; }
.ve-alert__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,17,29,0.55); /* σκούρο ημιδιάφανο */
  backdrop-filter: blur(10px);     /* ✅ κάνει το blur */
}

.ve-alert__card{
  position: relative;
  width: min(420px, 92vw);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 26px 22px 22px;
  text-align: center;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.ve-alert[aria-hidden="false"] .ve-alert__card{ transform: none; opacity: 1; }

/* Icon area */
.ve-alert__icon{ display: grid; place-items: center; margin-bottom: 10px; }
.ve-alert__icon .icon{ width: 64px; height: 64px; display: none; }
.ve-alert__icon .icon circle{ fill:#40C463; }         /* success green */
.ve-alert__icon .icon path{ stroke:#fff; }
.ve-alert--success .icon--success{ display:block; }

.ve-alert--error .icon--error{ display:block; }
.ve-alert--error .icon--error circle{ fill:#E74C3C; }  /* red */
.ve-alert--error .icon--error path{ stroke:#fff; }

/* Text */
.ve-alert__title{
  font-size: 28px; font-weight: 700; color:#2A2A2A; margin: 6px 0 6px;
}
.ve-alert__msg{
  font-size: 15.5px; line-height: 1.55; color:#6B7280; margin: 0 0 18px;
}

/* OK button like image: green, soft shadow */
.ve-alert__ok{
  display:inline-block;
  border:0; cursor:pointer;
  background:#40C463; color:#fff;
  padding: 12px 36px;
  border-radius: 8px;
  font-weight: 600; font-size:16px;
  box-shadow: 0 6px 16px rgba(64,196,99,.35);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.ve-alert__ok:active{ transform: translateY(1px); }
.ve-alert__ok:focus{ outline: 2px solid rgba(64,196,99,.35); outline-offset: 2px; }

/* Remove any close-X — modal closes ONLY via OK */

@media (max-width: 580px){
    .ve-alert__card {
width:min(320px, 92vw);
}
}

@media (max-width: 389px){
  .ve-alert__card { width:min(220px, 92vw)!important; }
}


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


.infoButton .oBackground{
    background:#fff;
}

.infoButton  .oLabel {
    color:#74a3a4;
}


.infoButton  .oOuter.fillColor {
    stroke: #74a3a4;
    fill: #74a3a4;
}

.infoButton .oButton.whiteArrow .oSymbol .fillColor
 {
    fill: #fff;
}