/* Theme Name: Casa Angelina Text Domain: casangelina */ /************ DEFS *************/ body { color: #6E6259; overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; background: #FFFFFF; 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(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } a { text-decoration: none; color: #333333; } 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(0.190, 1.000, 0.220, 1.000), opacity 5000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 5000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 5000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .has_transition_3000 { -webkit-transition: -webkit-transform 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .has_transition_2000 { -webkit-transition: -webkit-transform 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .has_transition_1500 { -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .has_transition_1000 { -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .has_transition_800 { -webkit-transition: -webkit-transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .has_transition_400 { -webkit-transition: -webkit-transform 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .has_transition_2000_inout { -webkit-transition: -webkit-transform 2000ms cubic-bezier(0.575, 0.005, 0.285, 1.005), opacity 2000ms cubic-bezier(0.575, 0.005, 0.285, 1.005); transition: transform 2000ms cubic-bezier(0.575, 0.005, 0.285, 1.005), opacity 2000ms cubic-bezier(0.575, 0.005, 0.285, 1.005); } .has_transition_1500_inout { -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.575, 0.005, 0.285, 1.005), opacity 1500ms cubic-bezier(0.575, 0.005, 0.285, 1.005); transition: transform 1500ms cubic-bezier(0.575, 0.005, 0.285, 1.005), opacity 1500ms cubic-bezier(0.575, 0.005, 0.285, 1.005); } .has_transition_1000_inout { -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.575, 0.005, 0.285, 1.005), opacity 1000ms cubic-bezier(0.575, 0.005, 0.285, 1.005); transition: transform 1000ms cubic-bezier(0.575, 0.005, 0.285, 1.005), opacity 1000ms cubic-bezier(0.575, 0.005, 0.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; } /************** PALETTE *******************/ .bWhite { background: #FFFFFF; } .bAlyssum { background: #EAE6E0; } .bTortora { background: #D7D2CB; } .bFango { background: #B6ADA5; } .bArgilla { background: #8C8279; } .bMarrone { background: #6E6259; } .bGreige { background: #9D968D; } .bPink { background: #eac0b5; } .bWater { background: #7dc5ca; } .bLilla { background: #f8f1ef; } .cWhite { color: #FFFFFF; } .cAlyssum { color: #EAE6E0; } .cTortora { color: #D7D2CB; } .cFango { color: #B6ADA5; } .cArgilla { color: #8C8279; } .cMarrone { color: #6E6259; } .cGreige { color: #9D968D; } .mobileArrow { display: none; } .bGreen { background: #dee1d0; } .bVermarine { background: #dde9e5; } .bVermarineGreen { background: #a3b5ad; } /***********************************/ section { position: relative; width: 100%; display: flex; } article { transform: translate3d(0, 0, 0); backface-visibility: hidden; } .halfMargin { margin-top: 2.5vw; } .margin { margin-top: 5vw; } .doubleMargin { margin-top: 10vw; } .tripleMargin { margin-top: 15vw; } .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; pointer-events: none; } #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'; font-weight: 300; font-size: 14px; letter-spacing: 0.5px; margin-top: 12px; } #verticalArrow { width: 10px; } svg * { will-change: transform; } #hImgContainer { /*transform: scale(1.01); tolto perche c'รจ un video e non voglio l'effetto zoom out*/ 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; 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; } #hPayLayer span {} #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: 3vw; margin-top: 0.5vw; font-weight: 300; margin-right: 7.5vw; align-self: flex-end; } #hLogo { width: 380px; position: absolute; top: 37%; left: calc(50% - 190px); pointer-events: all; } #hLogo .fillColor, #navLogo .fillColor { fill: #FFFFFF; } #hLogo .logoLine { transform-origin: center; } 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: 0px; margin-top: 12px; } #mainLogo.hidden, #mainLogo.menuForced { transform: translateY(-65px); } #mainLogo .fillColor { fill: #FFFFFF; } #mainLogo.dark .fillColor { fill: #9d968d; } #mainMenuController { width: 7.75vw; height: 40px; will-change: transform; cursor: pointer; z-index: 1; position: relative; } #menuClose { width: 38px; height: 38px; top: 26px; left: 55px; z-index: 1; } #mainMenuController:after { content: ''; position: absolute; width: 60px; height: 60px; background: #EAE6E0; left: calc(50% - 30px); opacity: 0; top: -10px; border-radius: 50px; transform: scale(0.2); -webkit-transition: -webkit-transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 600ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 600ms cubic-bezier(0.190, 1.000, 0.220, 1.000); z-index: -1; } #mainMenuController.show:hover:after { transform: scale(1); opacity: 0.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: #6E6259; transition: background 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), fill 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition-delay: 0ms !important; } } .quickColor { transition: background 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), fill 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition-delay: 0ms !important; } .menuController .line { width: 40px; height: 1px; background: #FFFFFF; } .menuController .fillColor, .headerButton .circlePath .fillColor { stroke: #FFFFFF; } .menuController .line { margin-top: 4px; } .menuController .line._1 { margin-top: 0; } .menuController .line._2 { transition-delay: 50ms; } .menuController .line._3 { transition-delay: 100ms; } .menuController.dark .line { background: #9d968D; } .circlePath { width: 38px; height: 38px; transform: scale(0.5); opacity: 0; } .show .circlePath { transform: scale(1); opacity: 1; } .headerButton.dark .circlePath circle { stroke: #9d968D; } .headerButton.dark .icon .fillColor { fill: #9d968D; } .headerButton .icon { transform: scale(0.5); opacity: 0; z-index: 1; } .show .icon { transform: scale(1); opacity: 1; } .headerButton.hidden { transform: translateY(-65px); } .headerButton:hover .circlePath circle { stroke: #9d968D; fill: #FFFFFF; } .headerButton:hover .icon path { fill: #9d968D; } 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(-2.75vw - (7.75vw - 40px) / 2 + 172px)); } .langsContainer a { color: #FFFFFF; font-family: Geometria; font-size: 13px; text-transform: lowercase; transition: color 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), fill 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } header .langsContainer a { font-weight: 600; } .langsContainer.dark a { color: #9d968D; } .langsContainer.dark .lang-item:before, .langsContainer.dark .lang-item:after { background: #9d968D; } .langs { display: flex; } .lang-item { margin-left: 50px; position: relative; -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 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: #FFFFFF; top: 50%; margin-top: -6px; transition: background 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), fill 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .lang-item:after { content: ''; position: absolute; height: 1px; width: 100%; left: 0; background: #FFFFFF; bottom: 0; transform: scale(0, 1); transform-origin: left; -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .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(0.5); transform-origin: right; -webkit-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; z-index: 1; } /*#videoTopLayer video { transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important; width: 75%; height: 85%; top: 7.5%; right: 4%; position: absolute; object-fit:cover; }*/ #hVideoLayer video { transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !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 0px); -webkit-clip-path: inset(50% round 0px); } #hVideoLayer.open { transform: scale(1) !important; -webkit-transition: -webkit-transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } #hVideoLayer.open video { clip-path: inset(0 0 0 0 round 0px) !important; -webkit-clip-path: inset(0 0 0 0 round 0px) !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; } .mainContainer { margin: 0 auto; width: calc(100% - 15.5vw); } /*.circlePath circle { stroke-dasharray: 113; stroke-dashoffset: 113; } .show circle { stroke-dashoffset: 0; }*/ /************* O-BUTTON ***************/ .oButton { position: relative; height: 36px; margin-right: 24px; cursor: pointer; will-change: transform; } .oBackground { width: 100%; height: 100%; position: absolute; border-radius: 20px; background: #FFFFFF; } .oOuter { position: absolute; width: 53.5px; right: 0; } .oOuter .fill { opacity: 0; } .oButton.dark .oOuter .fill { opacity: 1; } .oOuter.fillColor { stroke: #FFFFFF; fill: #FFFFFF; } .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'; font-size: 13px; } .oLabel.bigger { font-size: 16px; } .oSymbol { position: absolute; right: -12px; top: 5px; } .oArrow { width: 8px; transform: rotateZ(45deg); } .oArrow.fillColor { fill: #9c998f; } .oButton .oArrow { opacity: 0; } .oButton.open .oOuter { transform: translateX(24px); } .oButton.open .oArrow { transform: none; opacity: 1; } .oButton.dark .oBackground { background: #9c998f; } .oButton.dark .oContent { background: #9c998f; } .oButton.dark .oArrow.fillColor { fill: #9c998f; } #bookNow.dark .oSymbol .fillColor, #reserveTable.dark .oSymbol .fillColor { fill: #9c998f; } #bookNow.dark:hover .oSymbol .fillColor, #reserveTable.dark:hover .oSymbol .fillColor { fill: #FFFFFF; } #reserveTable { position: absolute; top: 80px; right: 20px; } .oButton.dark .oOuter.fillColor { stroke: #928474; fill: #9c998f; } .oButton.dark .oLabel { color: #FFFFFF; transition-delay: 0ms; } .oButton.fullWhite .oSymbol .fillColor { fill: #6e6259; } .oButton.whiteArrow .oSymbol .fillColor { fill: #FFFFFF; } .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: #9c998f; transform: rotateZ(-45deg) translateX(-3px) translateY(-3px); } .oButton.dark:hover .oArrow { fill: #FFFFFF; } .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: #FFFFFF; } .langsContainer.menuForced .lang-item:before, .langsContainer.menuForced .lang-item:after { background: #FFFFFF; } .headerButton .icon .fillColor { fill: #FFFFFF; } .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: 0px; left: 50px; } .brownieBack { background: #a8a297; width: 100%; height: 100%; border-radius: 20px; position: absolute; top: 0; left: 0; -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .brownie.closed .brownieBack { border-radius: 50px; width: 50px; height: 50px; transform: translateX(23px) translateY(75px) scale(0.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(../images/whitechecks.png); display: inline; vertical-align: baseline; font-family: Geometria; font-size: 12px; color: #FFFFFF; } .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%; /* overflow: hidden;*/ 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: 0px; } .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, 0.5); height: 5px; } #cookieBrownie .brownieContent { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .brownieText { font-family: 'Geometria'; font-size: 12px; } .brownieButtons .fillColor { fill: #FFFFFF; } #newsLetterBrownie .brownieText { margin-top: 20px; } .brownieTitle { font-family: Notera; font-size: 40px; line-height: 30px; } .brownieButtons { display: flex; width: 90%; justify-content: space-between; } .brownieButton { font-family: Geometria; font-size: 12px; cursor: pointer; } .brownieButton .oArrow { transform: none; margin-left: 10px; } .brownie .brownieIco svg .fillColor { fill: #FFFFFF; } .brownie.closed .brownieContentLayer {} .brownie.closed .brownieContent { opacity: 0; transition-delay: 0ms; transition-duration: 0ms; } .brownie.closed .brownieIco { pointer-events: all; padding: 10px; cursor: pointer; transform: scale(0.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: #FFFFFF; } .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: white; transform-origin: left; transform: rotate(45deg); } .brownieClose .line._2 { width: 20px; height: 2px; background: white; transform-origin: right; transform: rotate(-45deg); position: absolute; right: 0; top: 0; } .mainBackground+.mainContainer { z-index: 1; } .text { font-family: LM Roman; 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: LM Roman; } .compositionText { max-width: 280px; } .geometria { font-family: Geometria; } .text.tech { font-family: 'Geometria'; font-weight: 300; font-size: 30px; line-height: 40px; } .text.tech.small { font-size: 25px; } .text.tech.smaller { font-size: 20px; } .miniTitle { font-size: 22px; line-height: 32px; font-family: LM Roman; text-transform: lowercase; } .introText { width: 50%; } .introTextContainer { display: flex; justify-content: flex-end; } #partners { display: flex; justify-content: space-between; align-items: center; } #accoladesScroller { display: flex; justify-content: space-between; align-items: center; } .accolade.ruinart { max-width: 220px; width: 17%; } .accolade.gstc { max-width: 162px; width: 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; } #ethos { 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); } #ethosIntroPic { 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(0.190, 1.000, 0.220, 1.000); transition: transform 1500ms 200ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } #ethosTitleContainer { display: flex; } #ethosTitle { margin-left: 20px; align-self: flex-end; z-index: 1; margin-top: 1.6vw; } .blockTitle { font-size: 3.6vw; font-family: Lm Roman; line-height: 4vw; will-change: transform; } #ethosIntroText { max-width: 330px; margin-left: calc(17.5vw + 20px); } #ethosPic { position: relative; margin-left: 5vw; width: 56vw; height: 38vw; top: 5vw; } #ethosContent { display: flex; } #ethosLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0; } #ethosText { margin-left: 5vw; max-width: 330px; display: flex; align-items: center; margin-top: 5vw; } .tl { opacity: 0.6; } .tl._1 { font-family: Geometria; font-size: 7.5vw; color: #FFFFFF; position: absolute; top: 28vw; left: 2.5vw; font-weight: 300; will-change: transform; } .tl._1.smaller { font-size: 7.5vw; } .tl._2 { font-family: LM Roman; font-size: 4vw; color: #FFFFFF; position: absolute; top: 42vw; left: 18vw; will-change: transform; } .tl._3 span { transform: rotateZ(180deg); display: block; will-change: transform; writing-mode: tb; } .tl._3 { font-family: Geometria; font-size: 8vw; color: #FFFFFF; opacity: 0.6; position: absolute; top: 26vw; left: 59vw; font-weight: 300; will-change: transform; text-transform: lowercase; text-align: center; display: flex; justify-content: center; } html[lang=it] #modern { /* top: 41vw;*/ } #prIntroText { max-width: 330px; } #prTop { display: flex; justify-content: space-between; } #prTitle { margin-left: -1.3vw; } .sectionTitle { display: flex; align-items: flex-end; flex-direction: column; font-family: Geometria; font-weight: 300; will-change: transform; } .sectionTitle .small { font-size: 2.6vw; } .sectionTitle .big { font-size: 7vw; line-height: 6vw; position: relative; } .sectionTitle .small+.sectionTitle .big { left: 0.6vw; } #prSection .mainBackground, #prSection .activeLayer { top: 12.5vw; height: calc(100% - 12.5vw) } #prSlider { height: 45vw; margin-bottom: 5vw; } #prSlider { will-change: transform; } #hDining .mainContainer { position: relative; margin-top: 2.5vw; display: flex; justify-content: space-between; } html[lang=en] #hDiningTitle .big { order: 0; } html[lang=en] #hDiningTitle .small { order: 1; } #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'; font-size: 22px; } .listItemSubtitle { text-align: center; font-family: LM Roman; text-transform: uppercase; margin-top: 5px; font-size: 20px; } .hDiningItem.whitening .listItemTitle, .hDiningItem.whitening .listItemSubtitle { color: #FFFFFF; } .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: LM Roman Dunhill; display: flex; } .slidingTitleBig.small { font-size: 4.3vw; top: 2.4vw !important; } .slidingTitleSmall { font-family: 'Geometria'; 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: 0.3vw; } .hLifeStyleBlock { will-change: transform; } .hLSBlockTitle { height: 5vw; display: flex; align-items: center; z-index: 1; } .hLSBlockTitle:after { content: ''; width: 100%; height: 1px; background: white; position: absolute; bottom: 0; left: 0; } .panelLabel { font-family: Geometria; font-size: 2vw; } .panelLabel * { font-weight: 300; } .hLSBlockPic { height: calc(100vh - 10vw); width: 100%; } #hLifeStyleTarget, #hLifeStyleTarget2, #hLifeStyleTarget3, #hLifeStyleTarget4 { height: calc(200vh - 15vw); position: absolute; } #hLifeStyleSticky, #hLifeStyleSticky2, #hLifeStyleSticky3, #hLifeStyleSticky4 { height: calc(100vh - 5vw); width: 100%; } #hLifeStylePanel { z-index: 1; margin-top: 0.25vw; } .veil { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #000000; opacity: 0.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 { /*align-items:flex-start;*/ } #hFacilitiesTitle .big { order: 0; margin-top: 1.125vw; left: -0.5vw; } #hFacilitiesTitle .small { order: 1; position: relative; left: -0.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:first-child { /*margin-left:0vw;*/ } .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'; font-weight: 300; font-size: 4.2vw; position: absolute; color: #FFFFFF; opacity: 0.5; text-transform: uppercase; -webkit-transition: opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } #hFacilitiesSlider { display: flex; margin-top: 6vw; } #hFacilitiesScroller { display: flex; align-items: center; /*animation: hFScroll 50s linear infinite;*/ will-change: transform; } #hFacilitiesTarget { position: absolute; top: 0; height: 400vh; } #hFacilities { flex-direction: column; justify-content: space-between; height: 400vh; } @keyframes hFScroll { 0% { transform: translateX(0) } 100% { transform: translateX(-51.515%) } } #hExperiencesTitle { margin-top: -2.8vw; } #hExperiences {} #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; } .hMore { /*margin-left:30px;*/ } .hExperienceBlock.show { transform: none; } .hExperienceBlock.show .hExperienceContent { transform: none; } .hExperienceBlock._1 { top: 0px; 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(0.190, 1.000, 0.220, 1.000), opacity 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transform-origin: left; will-change: transform; } .hExperienceBlock.show .hExperienceButton:after { transform: scale(0, 1); transform-origin: right; } .hExperienceTitle { font-family: Geometria; font-size: 22px; } .hExperienceArrow { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; position: relative; pointer-events: none; margin-right: 1px; } .hExperienceBlock.show .hExperienceArrow { pointer-events: all; } .hExperienceArrow svg { width: 10px; z-index: 1; } .hExperienceBackground { position: absolute; width: 100%; height: 100%; background: #FFFFFF; border-radius: 50%; transform: scale(0.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: #FFFFFF; } .hExperienceSubTitle { font-family: LM Roman; } .hExperiencePic { height: 100%; position: absolute; top: 0; left: 0; width: 100%; } .hExperiencePic:first-child { position: relative; } .hExperienceText { flex: 1; display: flex; justify-content: center; flex-direction: column; } .hExperienceText p:first-child { max-width: 300px; } #hExperiencesPicsContainer { height: 100%; } /*#holder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; opacity:0; }*/ /************ CLOCKS *****************************/ #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 0px 0px -25%; padding: 1px 0px 0px 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 0px 0px; 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% 0px 0 0px; padding: 40% 0px 0 1px; background: #e1dfdb; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; } .clock .center { width: 8px; height: 8px; background: #e1dfdb; border-radius: 50%; position: absolute; top: 50%; margin-top: -4px; left: 50%; margin-left: -4px; } .clock-city p { font-family: Geometria; font-size: 18px; text-align: center; margin-top: 20px; } .clock.main { margin: 0 5vw; } .clock.main .clock-container:before { content: ''; position: absolute; width: 60%; left: 20%; background: #f6f4f2; top: 0; height: 100%; border-radius: 60px; } /************************************/ footer { height: 200vh; } #footerMain { height: 100%; /*transform: translateX(-50vw);*/ } #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: #FFFFFF; } #footerInfo p, #footerInfo a { font-family: Geometria; font-size: 18px; line-height: 33px; color: #FFFFFF; font-weight: 300; text-decoration: none; } #copyright { margin-bottom: 20px; } #copyright p { font-family: LM Roman; font-size: 14px; color: #FFFFFF; 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%; /* transform: translateX(-50vw);*/ top: 0; flex-direction: column; display: flex; will-change: transform; } #weatherIn { position: absolute; top: 100vh; } /************ WEATHER ****************/ #date { display: flex; align-items: flex-end; justify-content: center; margin-top: 2.5vw; } #date .year { font-family: 'Geometria'; font-size: 7vw; font-weight: 300; } #date .day { display: flex; flex-direction: column; margin-bottom: 1.2vw; margin-left: 2.5vw; } #date .ext-day { font-family: LM Roman; font-size: 1.3vw; } #date .ext-date { font-family: 'Geometria'; font-weight: 300; font-size: 2vw; } .weatherContainer { width: calc(100% - 5vw); max-width: 700px; margin: auto; } #days { padding: 1vw 0; border-top: 1px solid #b9ada4; border-bottom: 1px solid #b9ada4; } #days .weatherContainer { display: flex; } #weather { flex: 1; } #weather img { filter: brightness(0.8); } .meteo_row { margin-top: 30px; } .meteo_row .weatherContainer { display: flex; flex-direction: row; justify-content: space-between; align-items: center; font-size: 13px; } .meteo_row:first-child { margin-top: 0; } .meteo_col { width: 200px; } .meteo_ico_big { display: flex; align-items: center; height: 85px; justify-content: center; } .meteo_stats { text-align: center; font-family: Geometria; color: #6d5f51; font-size: 15px; height: 40px; } .meteo_row .data { display: flex; justify-content: center; } .meteo_row .data>div { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; } .meteo_row .data>div img { margin-right: 12px; } .meteo_small, .hour_text { font-size: 13px; font-family: Geometria; color: #6d5f51; } .temp_text { text-align: center; font-family: LM Roman; color: #6d5f51; font-size: 50px; letter-spacing: -6px; width: 100%; position: relative; } .temp_text span.temp_deg { position: absolute; top: 10px; font-size: 24px; margin-left: 7px; } #hourlyBox { margin-top: 2.5vw; } .hourly_row { display: flex; border-top: 1px solid #b9ada4; border-bottom: 1px solid #b9ada4; padding-top: 20px; padding-bottom: 15px; } .hourly_row .weatherContainer { display: flex; } .hour_box { width: 12.5%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .hour_box .hour_ico { height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .hour_box .hour_ico img { transform: scale(0.55) translateY(20px); } .hour_box.active .hour_ico img, .hour_box:hover .hour_ico img { transform: scale(0.8) translateY(-5px); } .hour_box.active .active_line, .hour_box:hover .active_line { transform: scale(1, 1); } .hour_box.active .hour_text p, .hour_box:hover .hour_text p { transform: translateY(0); } .hour_box .active_line { width: 40px; height: 3px; background: #CFCED3; margin-top: -2px; transform: scale(0, 1); } .hour_box .separator { width: 100%; margin-top: 10px; height: 1px; background: #E5E0E1; } .hour_box .hour_text { margin-top: 12px; } .hour_box .hour_text p { font-size: 14px; transform: translateY(-100%); } .hour_box.right .hour_ico { align-self: flex-end; } .hour_box.active>.hour_ico { align-self: center; transform: translateY(-5px); } #days_box { width: calc(100% - 5vw); max-width: 700px; margin: auto; display: flex; margin-top: 50px; } .day_name { width: 14.2857%; padding: 5px 15px; position: relative; cursor: pointer; will-change: transform; } .day_name:first-child p { text-transform: none; } .day_name p { font-family: 'Geometria'; font-size: 16px; text-align: center; z-index: 1; position: relative; text-transform: uppercase; will-change: transform; } .day_name .day_back { width: 100%; height: 100%; position: absolute; background: #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 ************/ 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(0.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: #FFFFFF; opacity: 0.3; } #navTop:after { content: ''; position: absolute; bottom: 0; width: 100%; height: 1px; background: #FFFFFF; opacity: 0.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: 0.95; border-radius: 25px; top: 10px; left: 10px; } #navBackground.hidden { transform: scale(0.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: 8px; } #navLogo .logoLine.exit { transform-origin: center; -webkit-transition: -webkit-transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .navSideItem { font-size: 16px; font-family: 'Geometria'; text-transform: lowercase; margin-top: 15px; position: relative; font-weight: 500; } .navSideItem:after { content: ''; position: absolute; bottom: 0px; width: 100%; background: #FFFFFF; height: 1px; transform: scale(0, 1); transform-origin: left; -webkit-transition: -webkit-transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .navSideItem:hover:after, .navSideItem.active:after { transform: scale(1); } .navSideItem:first-child { margin-top: 0; } .navSideItem.margin { margin-top: 5vw; } #navSideItems { display: flex; flex-direction: column; align-items: center; } #navContent { flex: 1; padding-right: 100px; overflow: hidden; padding-left: 5vw; } #navScroller { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: calc(80px + 28vh); /**** workaround for LS padding *****/ will-change: transform; position: relative; top: 0px; /*** align with logo ***/ } .navSection { margin-top: 4.5vh; } .navSection:first-child { margin-top: 0; } .navSectionTitle { font-family: Geometria; color: #fff; font-size: 4.5vh; font-weight: 300; line-height: 5.8vh; padding-right: 100px; } .navSection:after { content: ''; position: absolute; width: 100%; height: 1px; background: #FFFFFF; top: 6.5vh; transform-origin: left; transform: scale(0, 1); opacity: 0; -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 600ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 600ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .navSection.show:after { opacity: 1; transform: scale(1); -webkit-transition: -webkit-transform 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transform-origin: left; } .navSectionItems { display: flex; flex-direction: column; margin-top: 3vh; padding-left: 2.5vw; padding-right: 2.5vw; } .navItem:first-child { /*color:#FFFFFF;*/ } .navItem { font-family: geometria; /*color: #6f6359;*/ 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 #FFFF; border-radius: 50px; left: -2.5vw; top: -0.1vh; transform: scale(1, 0); backface-visibility: hidden; -webkit-transition: -webkit-transform 150ms linear, opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 150ms linear, opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); will-change: transform; } .navItem:hover:after, .navItem.active:after { transform: scale(1); -webkit-transition: -webkit-transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .subItem { font-size: 1.6vh; color: #FFFFFF; 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(0.190, 1.000, 0.220, 1.000), opacity 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .navItem:hover .subItem:before, .navItem.active .subItem:before { opacity: 1; transform: translateX(0); -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .navItem:hover .subItem span, .navItem.active .subItem span { transform: none; } .subItem:after { content: ''; } #tracker { will-change: transform; position: absolute; top: 0; left: 0; pointer-events: none; transform: translate(50vw, 50vh); } #tracker * { pointer-events: none; } #simpleTrack { position: absolute; width: 12px; height: 12px; border-radius: 50px; top: -6px; left: -6px; transition-delay: 300ms; } #simpleTrack.no_opacity { transition-delay: 0ms; } #navigationTrack { position: absolute; top: -30px; left: -60px; white-space: nowrap; text-transform: lowercase; } .activeLayerContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; cursor: pointer; } .activeLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer; } .activeLayerContainer .activeLayer { position: relative; width: 50%; height: 100%; z-index: 0; } #actionTrack { top: -8px; left: 6px; position: absolute; } #actionTrack .oArrow.fillColor, #actionTrack .oAudio.fillColor { fill: #FFFFFF; } #actionTrack circle.fillColor { stroke: #FFFFFF; } #actionTrack.dark .oArrow.fillColor, #actionTrack.dark .oAudio.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 .oAudio { position: absolute; width: 18px; top: -7.5px; left: -7.5px; opacity: 0; } #actionTrack .circlePath { opacity: 1; fill: transparent; top: -18px; left: -18px; transform: none; position: absolute; } #actionTrack.show circle { stroke-dashoffset: 0; } /************************ OVERVIEW **********************/ #overview #clocks, #overview footer { display: none; } #overviewScroller { height: 100vh; padding-top: 90px; padding-bottom: 12vh; flex-direction: column; justify-content: center; box-sizing: border-box; width: 200vw; } [data-scroll-direction=horizontal] [data-scroll-section] { white-space: normal; display: flex; } #overviewViewport { display: flex; height: 100%; max-height: 660px; } #overviewIntro { min-width: 100vw; } #overviewIntro .mainContainer { height: 100%; display: flex; justify-content: space-between; position: relative; } #overviewIntroLeft { display: flex; flex-direction: column; justify-content: space-between; width: 45%; } #overviewMiniTitle { position: absolute; left: -7.75vw; top: 12px; width: 7.75vw; display: flex; justify-content: center; } #overviewMiniTitle span { writing-mode: tb; transform: rotateZ(180deg); margin-left: -33px; } .overWord { font-family: 'Geometria'; font-size: 57px; font-weight: 300; } .overviewText { max-width: 520px; margin-left: 5vw; overflow: auto; } .overviewSub { font-family: 'LM Roman'; font-size: 40px; } #overviewIntroRight { flex: 1; margin-left: 5vw; display: flex; justify-content: center; } #overviewIntroRight .oButton { position: absolute; right: 0; bottom: 5vw; cursor: pointer; } .scrollBackContainer { position: absolute; left: 0; bottom: 0; cursor: pointer; width: 7.75vw; display: flex; justify-content: center; display: none; } .oButton.bordered.scrollBack { margin-right: -68px; z-index: 1; } .oButton.bordered.scrollBack .oSymbol { left: -30px; } .oButton.bordered.scrollBack .oArrow { transform: rotateZ(-130deg); } #overviewIntroPic { height: calc(100vh - 90px - 12vh); width: calc(100vh - 90px - 12vh); min-width: 220px; min-height: 220px; max-width: 660px; max-height: 660px; } #overviewItems { display: flex; min-width: 100vw; } #overviewItems .mainContainer { display: flex; position: relative; } .oLeftBar { width: 10vw; max-width: 150px; height: calc(100% + 15vh); } .oLeftBar.azureRoom .mainBackground { background: url(../images/rooms/azureBack1.jpg) no-repeat; background-size: cover; } .styleBackground.azure { background: #7ab0b4; } #overviewItemsContent { display: flex; width: 60%; flex: 1; z-index: 1; } #overviewItemTop { height: 100%; display: flex; } #overviewItemBottom { min-height: 12vh; display: flex; align-items: center; } #overviewItemPicsContainer { height: 100%; z-index: 1; overflow: hidden; } .itemPic { height: 100%; position: absolute; top: 0; left: 0; width: 100%; } .itemPic img { will-change: transform; } .itemPic:first-child { position: relative; } .detailTitle { font-family: 'Geometria'; font-weight: 300; font-size: 2.2vw; will-change: transform; } .detailDate { margin-top: 5px; } #overviewItems .detailTitle { display: none; } #overviewSnippetContainer { width: 100%; } #overviewSnippetContainer .snippet:last-child { font-size: 18px; line-height: 28px; } .overviewSnippet { display: none; } .detailSubtitle { font-family: LM Roman; font-size: 1.2vw; text-transform: uppercase; will-change: transform; } #overviewItems .detailSubtitle { display: none; writing-mode: tb; transform: rotateZ(180deg); max-height: 50vh; text-align: right; } #overviewItemSubtitleContainer { margin-left: -0.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: #FFFFFF; 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(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .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(0.190, 1.000, 0.220, 1.000), opacity 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .oNavigation.show:before { opacity: 1; transform: translateX(calc(100% - 100px)); -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .oNavigation.show.left:before { transform: translateX(calc(-100% + 100px)); } .oNavigation:hover.show:before { transform: translateX(0); } .oNavigation:hover { transform: translateX(0) !important; } .navigationTitle { font-family: 'Geometria'; font-size: 14px; } #overviewControls { position: absolute; width: 100%; height: 100%; } .overviewColumn.left { position: absolute; top: 0; left: 0; height: 100%; z-index: 3; width: 7.75vw; display: flex; justify-content: center; } .overviewColumn.right { position: absolute; top: 0; height: 100%; right: 0; z-index: 3; width: 7.75vw; display: flex; justify-content: center; } .oNavigation.left { padding-right: 13px; padding-left: 27px; margin-top: 100px; transform: translateX(-10px); } .oNavigation.right { margin-top: 100px; transform: translateX(10px); } .oNavigation.left .oArrow { transform: rotateZ(-135deg); left: -12px; } /************** DETAIL *********************************/ #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; /*top: calc(100vh - 120px); non so perchรฉ avevo messo cosรฌ ma mi sballa la precisione del top*/ } #detailTopContent { flex: 1; } #detailSectionTitle { margin-left: 2.5vw; margin-top: 100px; } .titleLogo { position: absolute; top: 0; } .titleLogo.right { right: 0; } .titleLogo.left { right: 7.5vw; } .titleLogo.sustainability img { width: 5.5vw; height: auto; margin-top: -2.6vw; } .titleLogo.sustainability.fsl img { width: 5vw; height: auto; margin-top: -1.5vw; } #detailSectionTitle .detailTitle {} #detailTopImgContainer { height: 106vh; width: calc(100% + 150px); transform: scale(0.95); opacity: 0; } #detailTopImgContainer.show { transform: none; opacity: 1; } #detailTopImg { height: 100%; will-change: transform; transform: scale(0.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: 0.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; } .tl {} #detailIntroTitle, #detailIntroSubtitle { margin-left: 2.5vw; max-width: 75%; } #detailIntroSubtitle { text-transform: uppercase; } .blockTitle span { padding-bottom: 0.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(0.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(../images/rooms/azureBack2.jpg) no-repeat; background-size: cover; } #detailSpacesContent { display: flex; flex-direction: column; } #detailSpaces #detailSnippets { margin-top: 2.5vw; text-align: right; } #detailSpacesContent .tech ._2 { margin-top: 2.5vw; } #detailSpaces #detailSnippets .snippet._2:last-child { font-size: 25px; } #detailSpacesContent .slidingTitleBig, .locationNameContent .slidingTitleBig { position: relative; top: 3.3vw; margin-left: 2.5vw; margin-top: -3.3vw; } #detailServices { margin-top: 24vw; } #detailServices .mainContainer {} .listTitle { font-size: 6.5vw; font-family: 'Geometria'; font-weight: 300; margin-left: -3.1vw; } .listText { margin-left: 6vw; } .listItem { font-family: LM Roman; font-size: 2.2vw; margin-top: 1vw; } #detailServicesContent { display: flex; justify-content: space-between; } #detailServicesLeft { width: 60vw; } #detailServicesPic { width: 25vw; height: 40vw; } .sliderContainer { height: 100%; z-index: 0; position: relative; } .slideContainer { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; height: 100%; } .slideContainer img { will-change: auto; } .gallery { height: 100%; width: 100%; } .galleryContainer { display: flex; height: 100vh; } .loading { position: absolute; left: -100px; top: -25px; display: none; } .loading svg { stroke-dasharray: 87px; animation: spinning 2s cubic-bezier(0.575, 0.005, 0.285, 1.005) infinite; } .loading svg circle { stroke: #FFFFFF; } .loading.blue svg circle { stroke: #6c96bc; } @keyframes spinning { 0% { stroke-dashoffset: 87; } 50% { stroke-dashoffset: 174; } 100% { stroke-dashoffset: 261; } } .sliderPreview { position: absolute; width: 330px; bottom: -40px; right: 150px; } .previewText { height: 40px; display: flex; justify-content: space-around; align-items: center; font-family: 'Geometria'; font-size: 13px; } .previewContainer { height: 185px; margin-bottom: 40px; } #styleDetails {} #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 {} #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; } /******************* DINING *********************/ /************** SEASCAPE ***************/ #detailExpandableText { display: flex; flex-direction: column; align-items: flex-end; margin-top: -23vw; position: relative; top: -2.5vw; } #detailExpandableText.big { margin-top: -35vw; } #detailExpandableText .text { max-width: 700px; } .more p { display: flex; align-items: flex-end; flex-direction: column; } .more p>span { margin-top: 2.5vw; margin-right: 5vw; } #detailSnippets { align-self: flex-end; margin-right: 2.5vw; flex-direction: column; display: flex; } .introLogo { position: absolute; top: 17.5vw; width: 16vw; display: flex; flex-direction: column; align-items: flex-start; } .introLogo .text.tech { margin-left: 2vw; display: block; font-size: 19.5px; } .introLogo a { margin-top: 10px; white-space: nowrap; } .introLogo a:after { content: ''; position: absolute; width: 100%; height: 1px; background: #333; left: 0; bottom: 6px; } .introLogo+#detailSnippets { margin-top: 15vw; } #detailInfo #detailSnippets .snippet._2, #detailInfo #detailSnippets .snippet._4, #detailInfoSecond #detailSnippets .snippet._2, #detailInfoSecond #detailSnippets .snippet._4 { /*quelli del dining*/ font-size: 25px; margin-top: 0; } #detailSnippets .snippet._2, #detailSnippets .snippet._4 { /*quelli delle camere*/ margin-top: 2.5vw; } .snippet.no_margin { margin-top: 0 !important; } .snippet._1 strong { font-weight: 400; } #detailComposition, #detailBody, .infoBlock { flex-direction: column; } #detailComposition .mainContainer, .infoBlock .mainContainer { display: flex; align-items: center; justify-content: space-between; } #detailComposition.seascape .mainBackground { top: 5vw; } .compositionPicContainer { position: relative; margin-left: 5vw; margin-right: 5vw; height: 39.5vw; width: 56vw; margin-bottom: 5vw; } .compositionPic { height: 100%; width: 100%; } .compositionLayer { position: absolute; } .compositionPicContainer .tl._3 { top: 10.5vw; left: 0vw; } .compositionPicContainer .tl._1 { top: auto; bottom: 7.8vw; left: 19vw; display: flex; } #detailBody .mainContainer>.introPic { margin-top: -2.5vw; } .detailBodyContent { display: flex; justify-content: space-between; padding-left: 5vw; } #detailBody .detailBodyContent.scheme1 .blockTitle { margin-left: 13vw; } #detailBody .detailBodyContent.summer { padding-left: 0; align-items: center; } #detailBody .detailBodyContent.summer>div { width: 30%; } #detailBody .detailBodyContent.summer>div .text, #detailBody .detailBodyContent.summer>div .text>span { min-height: 7.2vw; } #detailBody .detailBodyContent.summer .left .blockTitle { margin-left: 0; } #detailBody .detailBodyContent.scheme1 .left { width: 60%; display: flex; flex-direction: column; justify-content: space-between; max-width: 650px; } .verticalPic { width: 25vw; height: 40vw; } #detailBody .galleryContainer { width: 56.771vw; height: 40vw; } .detailBodyContent .blockTitle { text-transform: lowercase; } .detailBodyContent.scheme2>.right { flex: 1; display: flex; align-items: center; padding-left: 5vw; box-sizing: border-box; min-width: 300px; } #detailBody .detailBodyContent.scheme3 .left { max-width: 590px; width: 40vw; } .detailBodyContent.scheme3 .blockTitle { margin-left: 13vw; } .detailBodyContent.scheme4 { padding-right: 5vw; flex-direction: column; } .menu { display: flex; } .menuBlock, .menuPic { width: 34vw; height: 34vw; } .menuBlock+.menuPic, .menuPic+.menuBlock, .menuBlock+.menuBlock { margin-left: 30px; } .menu+.menu { margin-top: 30px; } .menuBlock { display: flex; align-items: flex-end; position: relative; } .menuLayout { display: flex; justify-content: space-between; align-items: center; padding: 0 2.5vw; width: 100%; } .menuLayout .slidingTitleBig { position: relative; top: 3.3vw; } .menuBlock.small .slidingTitleBig { font-size: 3.5vw; top: 1.9vw; } .menuType { font-family: 'Geometria'; font-weight: 300; font-size: 4.5vw; opacity: 0.6; position: absolute; top: 30px; right: 15px; } .menuBlock.small .menuType { font-size: 3vw; } .menuType span { writing-mode: tb; transform: rotate(180deg); text-align: right; } .menu._2 .menuType { opacity: 1; } .menuBlock.small .oButton { position: absolute; top: 78%; left: 2.5vw; } .menuBlock .oButton { position: absolute; top: 70%; left: 2.5vw; } /******** UPNC **************/ .infoBlock .mainBackground { top: 3vw; height: calc(100% - 6vw); } img.ruinart { width: 170px; height: auto; } .outerBlock { width: 40vw; position: relative; padding: 5vw; box-sizing: border-box; } .outerBorders { position: absolute; width: 100%; height: calc(100% + 2vw); top: -1vw; left: 0; pointer-events: none; } .outerBorders * { position: absolute; } .outerBorders .top { height: 1vw; width: 100%; } .outerBorders .bottom { height: 1vw; width: 100%; bottom: 0; } .outerBorders .left { height: 100%; width: 1vw; } .outerBorders .right { height: 100%; width: 1vw; right: 0; } .outerContent {} .outerRow { display: flex; align-items: center; } .outerPic { width: 250px; display: flex; justify-content: center; } .outerDescription { font-family: 'Geometria'; font-size: 16px; display: flex; flex-direction: column; flex: 1; align-items: flex-start; } .outerDescription .outerTitle { font-weight: 600; } .outerDescription a { display: block; margin-top: 5px; text-decoration: underline; } .blockText.ruinart { max-width: 500px; } .outerBlock.ruinart .otherContent {} .outerBlock.ruinart .outerRow { flex-direction: column; } .outerBlock .outerRow .outerDescription .action:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #333333; transform: scale(0, 1); transform-origin: left; -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .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'; 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: 0.5vw; width: 63px; display: flex; align-items: center; justify-content: center; } .profileScheme .mainBackground { height: calc(100% + 2.5vw); } .profileScheme .mainBackground.bGreen { height: calc(100% + 5vw); } .scheme1.simpler .text { margin-left: 10vw; } .scheme1 .blockTitle.larger { margin-left: 10vw; } .profilePic.sustainability { margin-top: -7vw; } .sustWorld { position: absolute; bottom: -3vw; right: 7.5vw; } /********** TASTE **************/ .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: 0.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; } /********** ROOFTOP ********************/ #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; } /************** HOTEL **************/ #detailSpaces+#detailBody { margin-top: 24vw; } .locationNameContainer { position: absolute; width: calc(100% - 17.5vw); align-self: flex-end; top: calc(100% - 4vw); } .locationNameBackground { height: 100%; position: absolute; width: 100%; } .locationNameContent { display: flex; flex-direction: column; } .locationContainer { display: flex; flex-direction: column; position: relative; } .locationContainer+.mainContainer { margin-top: 17vw; } .introPic.down { margin-top: 10vw; } .editorialPreTitle { font-family: Lm Roman Dunhill; margin-left: 2.5vw; font-size: 2vw; line-height: 3vw; } .editorialText .editorialPreTitle { margin-left: 0; } #editorialWords { font-size: 1.2vw; font-family: Lm Roman Dunhill; margin-left: 2.5vw; line-height: 2vw; } #editorialTitle { margin-left: 7.5vw; font-family: 'LM ROMAN DUNHILL'; line-height: 5vw; font-size: 3.8vw; } #editorialSubtitle { font-style: italic; font-size: 3vw; line-height: 3.6vw; margin-left: 7.5vw; } .editorialText { margin-left: 7.5vw; width: 34vw; position: relative; } .editorialText .text { font-size: 21px; text-align: justify; line-height: 40px; letter-spacing: 0.25px; } #editorialInfo {} #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; } /************** FORMS *************/ .formLayer { display: flex; flex-direction: column; min-height: 33vw; } #formTitle { margin-top: -2.8vw; margin-left: 25px; } #formTitle .slidingTitleBig { margin-top: -3.5vw; } #formTitle .slidingTitleBig+.slidingTitleBig { margin-top: -5vw; } .formContainer { margin-right: 5vw; margin-left: 5vw; width: 55%; margin-top: -30px; } .formContent { display: flex; } .formInfo.left { width: 45%; max-width: 600px; } .formDescription { margin-left: 5vw; font-family: Geometria; font-size: 1.3vw; line-height: 2.5vw; font-weight: 300; } .wpforms-field-container { display: flex; flex-wrap: wrap; justify-content: space-between; } .formContainer .wpforms-confirmation-container { color: #FFFFFF; position: absolute; left: 0; top: 14vw; background: #6e6259; height: calc(100% - 14vw); pointer-events: none; margin-left: 5vw; font-family: Geometria; font-size: 1.3vw; line-height: 2.5vw; font-weight: 300; width: 45%; max-width: 600px; } .formField.readOnly textarea { display: none; } .formField.half { width: 45%; } .formField { width: 100%; margin-top: 30px; } .formField.noMargin { margin-top: 0; } .formField input { background: none; border: none; border-bottom: 1px solid #b4a89f; padding-bottom: 5px; font-family: Geometria; font-size: 16px; color: #FFFFFF; } .formField select { background: none; border: none; border-bottom: 1px solid #b4a89f; padding-bottom: 3px; font-size: 16px; font-family: Geometria; color: #FFFFFF; margin-top: -3px; } .formField textarea { background: none; border: 1px solid #b4a89f; padding: 5px; font-size: 15px; font-family: Geometria; color: #FFFFFF; } .wpforms-container label { font-family: Geometria; color: #FFFFFF; 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(../images/checks.png); } .formField.wpforms-field-checkbox input[type=checkbox]:checked+label { background-position: -4px -26px; } .formField.readOnly textArea {} .formField.multiple {} .formField.multiple ul {} .formField.right { display: flex; justify-content: flex-end; } .formField.right label.wpforms-error { left: auto; right: calc(45% - 5px); transform: translateX(100%); } .formField.right input, .formField.right textarea { width: 45%; } ::-webkit-input-placeholder { font-family: Geometria; color: #FFFFFF; font-size: 15px; padding-left: 2px; } .formField textArea::-webkit-input-placeholder { padding-left: 0; } .wpforms-field-description { font-family: Geometria; color: #FFFFFF; font-size: 14px !important; font-weight: 400 !important; margin-top: 15px !important; max-width: 100%; border: 1px solid #999999; padding: 10px !important; box-sizing: border-box; background: none !important; } .wpforms-container .wpforms-field input.wpforms-error, .wpforms-container .wpforms-field input.user-invalid, .wpforms-container .wpforms-field textarea.user-invalid, .wpforms-container .wpforms-field select.wpforms-error, .wpforms-container .wpforms-field select.user-invalid, .wpforms-container .wpforms-field.wpforms-has-error .choices__inner { border: none !important; border-bottom: 1px solid #cc0000 !important; } .wpforms-container .wpforms-field textarea.wpforms-error { border: 1px solid #cc0000 !important; } .wpforms-container label.wpforms-error { font-size: 12px !important; position: absolute; left: 5px; bottom: -7px; } .wpforms-submit-container { display: flex; justify-content: flex-end; padding-right: 50% !important; margin-top: 15px; width: 100%; } .wpforms-submit { font-family: Geometria; padding: 0 12px; background: #FFFFFF !important; } .wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium { max-width: none !important; } .wpforms-submit-container .oButton.bordered { border: none; } .experienceConditions { padding: 10vw 5vw; } /*********** NEWSLETTER BROWNIE ***********/ .newsletterForm { margin-top: 15px; font-family: Geometria; } .newsletterFormTitle { color: #FFFFFF; font-size: 15px; font-weight: 300; } .newsletter_input { margin-top: 10px; border-bottom: 1px solid #FFFFFF; padding-bottom: 4px !important; width: 40%; } .newsletter_input.full { width: 100%; } .newsletter_input.wpforms-has-error { border-bottom: 1px solid #990000; } .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: #FFFFFF; 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: #FFFFFF; font-size: 13px; display: inline; height: 16px; padding: 1px 2px; margin-top: 0px; } .newsletter_input input { background: none; border: none; color: #FFFFFF; font-family: 'Geometria'; font-size: 13px; width: 100%; display: block; } .newsletter_input select { background: none; border: none; color: #FFFFFF; font-family: 'Geometria'; font-size: 13px; padding-bottom: 0px; 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: black; } .radio li { color: #333333; 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(../images/radio_input_white.png) 0 -1px no-repeat; height: 16px; } .radio li>label { padding: 0px 0px 1px 28px; float: left; letter-spacing: 0px; line-height: 15px; font-family: Geometria; font-size: 13px; color: #FFFFFF; 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(../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 { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: white; opacity: 1; /* Firefox */ font-family: Geometria; color: #FFFFFF; font-size: 13px; padding-left: 2px; } .newsletter_input input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: white; font-family: Geometria; color: #FFFFFF; font-size: 13px; padding-left: 2px; } .newsletter_input input::-ms-input-placeholder { /* Microsoft Edge */ color: white; font-family: Geometria; color: #FFFFFF; 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: #FFFFFF; margin-left: 0; text-transform: uppercase; } .newsletter_input .radio li:not (#foo)>input+label { background: url(../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: #FFFFFF; line-height: inherit; margin-right: 0; } .newsletterForm .wpforms-confirmation-container { font-family: 'Notera'; letter-spacing: 0; font-size: 40px; color: #FFFFFF; line-height: inherit; margin-right: 0; margin-top: 8px; } .newsletterForm .wpforms-container { margin-bottom: 0px; } .formText { color: #FFFFFF; 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: 0px; line-height: 20px; font-family: Geometria; text-align: left; background: none; height: 35px; margin-top: 6px; resize: none; } .newsletter_input.privacy { color: #FFFFFF; border-bottom: none; display: flex; flex-direction: column; padding: 0 !important; } .newsletter_input.privacy ul { order: 1; } .newsletter_input.privacy label { color: #FFFFFF; font-size: 13px; } .newsletter_input .wpforms-field-description { order: 0; font-size: 12px !important; color: #FFFFFF; line-height: 15px; padding: 5px 5px 5px 5px !important; border: 1px solid #FFFFFF; height: 70px; overflow: auto; margin-top: 10px !important; } .newsletter_input .wpforms-field-description::-webkit-scrollbar { width: 0px; } .newsletter_input .wpforms-required-label { color: #FFFFFF !important; } .newsletterForm .wpforms-submit { font-family: 'Notera'; letter-spacing: 0; font-size: 40px; color: #FFFFFF; line-height: inherit; background: none !important; margin-right: 0; border: none !important; cursor: pointer; } .newsletterForm .wpforms-submit-container { padding-right: 0 !important; } #popClose { top: 0px; right: 0px; width: 23px; height: 23px; position: absolute; transform: rotateZ(45deg); padding: 10px; cursor: pointer; } .newsletter_input.privacy textarea { font-size: 12px; color: #FFFFFF; line-height: 12px } .newsletter_controls { display: flex; justify-content: flex-end; margin-top: 20px; } #popLayer .menuCloseLine { background: #FFFFFF; } #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; } /************ PRESS **********/ .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: 0.1vw; left: 0; width: 100%; height: 1px; background: #6f6359; transform: scale(0, 1); transform-origin: left; -webkit-transition: -webkit-transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .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: #333333; transform: scale(0, 1); transform-origin: left; -webkit-transition: -webkit-transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .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 PAGE **************/ #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(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 1500ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); bottom: 0; left: 0; width: 100%; height: 1px; background: #6E6259; } .textIndexItem:hover:after { transform: scale(1); } .bodyParagraphTitle { margin-left: -2.5vw; display: flex; } .bodyParagraphTitle h2 { margin-left: 2.5vw; font-size: 2vw; font-family: LM Roman Dunhill; position: relative; top: 1.15vw; } .contactsContainer { display: flex; } .mailBlock { display: flex; flex-direction: column; } /********** OVERLAYS *****************/ .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(0.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(0.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; } .overlayTitle {} .ovSmall { font-family: 'Geometria'; font-size: 16px; line-height: 24px; font-weight: 400; } .ovSmall+.ovSmall { margin-left: 5vw; } .ovPeople { font-size: 2.3vw; font-family: Geometria; font-weight: 300; will-change: transform; } .overlayClose { position: absolute; width: 38px; height: 38px; top: 25px; right: 25px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .overlayClose:hover .overlayCloseInner, .overlayClose.hover .overlayCloseInner { transform: scale(1.5); -webkit-transition: -webkit-transform 600ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 600ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 400ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .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: 0px; } .overlayCloseInner:after { content: ''; width: 12px; height: 1px; background: #6E6259; position: absolute; transform: rotate(-45deg); transform-origin: top right; right: 0px; } .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 { 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: #FFFFFF; opacity: 0.6; transform: scale(0, 1); transform-origin: left; -webkit-transition: -webkit-transform 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 2000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .ovGroup:last-child:after { content: none; } .show .ovGroup:after { transform: scale(1); } .ovGroup select { margin-left: -40px; padding-left: 75px; } #bookSubmit { align-self: flex-end; width: 200px; } .icoContainer { display: flex; align-items: center; justify-content: center; width: 30px; } .calendarIco { width: 100%; } .downArrow { display: block; width: 15px; height: 15px; border-bottom: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; 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); } /*.mainContainer { margin: 0 auto; width: calc(100% - 100px); } #mainLogo { position: relative; left: -18px; }*/ .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: 0px; } } /****** touch devices ********/ .is-touch #tracker { display: none; } .is-touch .oButton.mobileOnly { display: block !important; } .is-touch .oButton.watch, .is-touch .oButton.close { display: none !important; } .is-mobile .oButton.watch, .is-mobile .oButton.close { display: block !important; } .is-touch #ethosText { flex-direction: column; align-items: flex-start; justify-content: center; } .is-touch #hVideoLayer { transform-origin: right bottom; transform: scale(0.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: 0px 16px 0 0px; height: 30px; top: 15px; } .headerButton.email { display: none; } #leftHeader { width: auto; position: relative; } #mainLogo { width: 132px; margin-top: 10px; } #mainMenuController { width: 25px; height: 25px; padding: 10px; } #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(0px); } #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: 0px; left: 50px; } .brownie.closed .brownieBack, .brownie.closed:hover .brownieBack { transform: translateX(23px) translateY(-10px) scale(0.5) !important; } .brownie .brownieIcoContainer { display: none; } .brownie.closed .brownieIcoContainer { display: flex; } .brownieButtons { width: 100%; } .brownieButtons .oArrow { display: none; } .brownie.closed .brownieIco { transform: scale(0.8); } #cookieBrownie.opened { height: 340px; } .cookiePrefs ul { width: calc(100% - 10px); } .oButton { height: 30px; margin-right: 18px; } .brownieContent { margin: 0 10px; width: 100%; padding: 0; } .oContent { padding: 0 8px; } .oArrow { width: 7px; } .oOuter { width: 44.5px; } .oButton.open .oOuter { transform: translateX(20px); } .oSymbol { position: absolute; right: -11px; top: 2px; height: 26px; display: flex; align-items: center; } .oLabel { font-size: 11px; } .oLabel.bigger { font-size: 13px; } #hLogo { width: 250px; position: absolute; top: 37%; left: calc(50% - 125px); } #hTarget { height: 30vh; /* regola a che altezza sgancia */ } #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(-1274px); } } .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; } #ethos { margin-top: calc(80px + 15vw); } #ethosTitleContainer { width: 100%; flex-direction: column; } .introPic, .introPic.big { width: 43vw; height: 30vw; } #ethosIntroPic { margin-top: -15vw; } #ethosTitle { margin-top: 20px; align-self: flex-start; margin-left: 0; } .blockTitle { font-size: 35px; line-height: 40px; } #ethosContent { flex-direction: column; margin-top: 40px; } #ethosPic { margin-left: -20px; width: calc(100% + 40px); height: 68vw; top: 0; } #ethosPic img { height: 120%; top: -10%; } #ethosText { margin-top: 40px; margin-bottom: 40px; max-width: none; margin-left: 0px; flex-direction: column; align-items: flex-start; } #ethosIntroText { margin-left: 22vw; } #ethosLayer { position: absolute; top: calc(39vw + 120px); height: 68vw; } #minimalism { font-size: 25px; top: 35vw; left: 20vw; } #sublime { font-size: 50px; top: 17vw; left: 2.5vw; } #modern { font-size: 50px; top: 14vw; left: auto; right: 5vw; } html[lang=it] #modern { top: 53vw; } #prSection { margin-top: 90px; } .miniTitle { font-size: 16px; } .sectionTitle .small { font-size: 7vw; } .sectionTitle .big { font-size: 11.3vw; line-height: 12vw; } #prTop { flex-direction: column; } #prSlider+.oButton { position: absolute; bottom: 60px !important; left: 0 !important; } #prSection .mainBackground { top: 26vw; } #prIntroPic { width: 60%; height: 32vw; margin-top: 5px; z-index: 1; } #prIntroText { margin-top: 90px; } #prSlider { margin-top: -5vw; margin-left: calc(-45px + 5vw); width: calc(100% + 60px - 5vw); height: 50vw; } #prSection .mainBackground { top: calc(46px + 18vw); } #hFacilitiesTitle { margin-top: 15px; } #hFacilities { height: 300vh; } #hFacilitiesTarget { position: absolute; top: 0; height: 300vh; } #hFacilitiesSticky { height: 100vh; display: flex; flex-direction: column; justify-content: space-around; } #hFacilitiesSlider { top: 0; } .hFacilitiesItem.horizontal .hFItemPic { width: 75vw; height: 47vw; } .hFacilitiesItem.vertical .hFItemPic { width: 47vw; height: 75vw; } .hFacilitiesItem { margin-left: 60px; } .hFItemTitle { font-weight: 400; opacity: 0.7; font-size: 8vw; } .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: 0px; } .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; /* ref per hFSticky e hFtarget (delta 1.2 > 18) */ height: 105%; } .panelLabel { font-size: 20px; } .hLSBlockTitle { height: 65px; } #hLifeStylePanel { margin-top: 0; } /* .hLSBlockPic { */ /* height: 100vw; */ /* width: 100%; */ /* } */ /* #hLifeStyle { */ /* height: 200vh; uguale height target desktop */ /* padding-bottom:90px; */ /* } */ /* #hLifeStyleSticky { */ /* height: calc(116.77vw + 130px); */ /* overflow:hidden; */ /* } */ /* #hLifeStyleTarget { */ /* top: calc(-100vh + (98.8vw + 280px)); delta 1.2 come altezza background */ /* position:absolute; */ /* } */ /* .hLifeStyleBlock:first-child .hLSBlockPic img { */ /* transform: none; */ /* } */ /* .hLSBlockPic img { */ /* transform: translateY(-100%); */ /* } */ #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 { position: absolute; bottom: 320px; right: 0; } #footerLeft { justify-content: flex-end; } #footerMain .mainBackground img { object-position: right; } /********************* OVERVIEW ************************/ #overviewScroller { height: auto; padding: 0px; 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; } #overviewSnippetContainer br { /*display:none;*/ } .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; } /************* DETAIL ************/ #detailTop { padding-top: 60px; } #detailTop>.mainContainer:first-child, #detailTopSecond .simplePicture+.mainContainer { position: relative; } #detailTop .oLeftBar, .oLeftBar.wide { width: 45px; position: absolute; left: -45px; height: calc(100% - 65px); } #detailTop .oLeftBar.editorial { height: calc(100% - 40px); } #detailTop .oLeftBar.mobileRoom, #detailTop .oLeftBar.azureRoom { height: calc(100% - 130px); } #detailTop .oLeftBar.landing { height: calc(100% - 95px); } #detailTopContent { display: flex; flex-direction: column; width: 100%; } #detailSectionTitle { order: 1; margin-top: 30px; margin-left: 10px; } #detailTopImgContainer { margin-top: 0; order: 0; margin-left: 0px; 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(0.190, 1.000, 0.220, 1.000), opacity 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } #detailTopImgContainer.show #detailImgBlock { transform: scale(1) !important; -webkit-transition: -webkit-transform 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: transform 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000), opacity 3000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } #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; } .titleLogo.sustainability { display: block; position: relative; float: right; width: 80px; right: -80px; } .titleLogo.fsl { right: 100px; } .titleLogo.sustainability img { width: 20vw; margin-top: -1.5vw; } .titleLogo.fsl img { width: 80px !important; height: auto; margin-top: 33px !important; } .editorialPreTitle { order: 2; font-size: 24px; line-height: 39px; margin-top: 20px; margin-left: 10px; } .editorialText .editorialPreTitle { margin-top: 30px; } #editorialWords { order: 3; font-size: 17px; line-height: 27px; margin-top: 10px; margin-left: 10px; } #editorialTitle { order: 4; margin-left: 10px; font-size: 35px; line-height: 56px; } #editorialSubtitle { margin-left: 10px; font-size: 35px; line-height: 38px; order: 5; } .editorialText { width: calc(100% - 10px); margin-left: 10px; } #editorialInfo .editorialText+.introPic, #editorialInfo .editorialText+.introPic:nth-child(7), #editorialInfo .editorialText+.introPic.anita { right: 0; max-width: none; margin-top: 30px; } .editorialPic { width: calc(100% - 10px); height: 60vw; margin-left: 10px; } #detailTopContent>.editorialText { order: 6; margin-left: 10px; } .editorialText .text { font-size: 16px; line-height: 28px; } .editorialText+.introPic { position: relative; top: auto; right: auto; margin-top: 30px; transform: none !important; margin-left: 10px; margin-bottom: 30px; width: calc(100% - 10px); } #detailTopContent .editorialText+.introPic { order: 6; width: calc(100% - 10px); margin-left: 10px; max-width: none; } .editorialText+.introPic.right { margin-left: calc(100% - 43vw); } .introPicText .text { font-size: 22px; line-height: 40px; } .introPicText .leftQuo { font-size: 50px; } .introPicText .rightQuo { font-size: 50px; position: absolute; bottom: -25px; } .introPicText .text br { display: none; } .text.limited { width: 100%; } .detailSubtitle { font-size: 20px; } .detailTitle { font-size: 25px; } #detailTop .miniTitle { margin-top: 0; } #detailSectionTitle .detailTitle { margin-top: 15px; } .more p>span { margin-top: 30px; margin-right: 0; } #detailSpaces .introPic { margin-top: -25vw; } .fullPicture, .fullPictureSticky { height: 70vw !important; } .fullPicture.azure img { width: 132%; left: -14.5%; top: 3%; } .fullPicture.azure .fullPictureBlock { transform: scale(1); } #fullPictureTarget, #fullPictureTarget2, #fullPictureTarget3, #fullPictureTarget4 { height: 90vw !important; } .locationContainer+.mainContainer { margin-top: 45vw; } #detailBody .locationContainer+.mainContainer .detailBodyContent.scheme2 .left { order: 0; margin-top: 0; } #detailBody .locationContainer+.mainContainer .detailBodyContent.scheme2 .right { order: 1; margin-top: 60px; } #detailBody .locationContainer+.mainContainer .detailBodyContent.scheme3 .right { order: 0; margin-top: 0; } #detailBody .locationContainer+.mainContainer .detailBodyContent.scheme3 .left { order: 1; margin-top: 60px; } .locationContainer+.mainContainer+.fullPicture { margin-top: 120px; } .mobileNegative { margin-top: -5vw; } #detailSpacesContainer { width: 100%; position: relative; top: 0; margin-top: 60vw; } #detailSpacesContainer.azure { margin-top: 80vw; top: 0; } #detailSpaces { height: auto; margin-top: 26vw; } #detailSpaces.azure { height: auto; } .fullPicture.azure { top: 15vw; height: 55vw !important; width: 70vw; left: 20.5vw; } #detailSpaces #detailSnippets { margin-top: 8vw; order: 0; } #detailSpaces .mainContainer { position: relative; } #detailSpacesContent { padding: 0 30px; align-items: center; } .text.small, .text.tech, #overviewSnippetContainer .snippet:last-child { font-size: 16px; line-height: 28px; } .text.tech.small, .text.tech.smaller { font-size: 14px !important; line-height: 26px; } #detailSnippets .snippet { width: 100%; margin-top: 15px; } #detailSnippets .snippet:first-child { margin-top: 0; } .introLogo+#detailSnippets { margin-top: 30px; } .introLogo { position: relative; top: 7.5vw; width: 42.5vw; } #detailSpaces .snippet { text-align: center; } #detailSpacesContent .slidingTitleBig, .locationNameContent .slidingTitleBig { top: 6.2vw; margin-left: 10px; margin-top: 0; order: 1; position: relative; } #detailServices, #shopItems { margin-top: 60px; } #detailServicesContent { order: 0; flex-direction: column; margin-left: 0; align-items: center; } #detailServicesPic { order: 0; height: 66vw; width: 42vw; max-width: none; flex: auto; margin-top: 0; } #detailServices .mainContainer { display: flex; flex-direction: column; } #detailServicesLeft { order: 1; width: 100%; margin-top: 60px; } #detailServicesLeft.noServicesPic { margin-top: 0; } .listTitle { font-size: 33px; margin-left: 0; } .listText { margin-left: 0; margin-top: 30px; } .listItem { font-size: 18px; margin-top: 12px; } .galleryContainer { height: 70vw !important; } #styleDetailsTitle .slidingTitleSmall { margin-top: -13vw; font-size: 6vw; } .styleDetail { min-width: 40vw; } #styleDetailsScroller { display: flex; animation: styleDetailScroll 40s linear infinite; } @keyframes styleDetailScroll { 0% { transform: translateX(-5%) } 100% { transform: translateX(-557.5%); } } #styleDetails .mainContainer { width: calc(100% - 60px); } #others .mainContainer { flex-direction: column; } #otherFixed { order: 0; margin-left: 0; margin-top: 0; } #otherFixed .blockTitle { text-align: center; font-size: 30px; line-height: 30px; } #otherFixed .blockTitle br { display: none; } #otherItems { order: 1; margin-top: 60px; } .otherItemPic { width: 100%; } .listItemTitle { font-size: 17px; } .listItemSubtitle { font-size: 13px; margin-top: 0; } #detailExpandableText, #detailExpandableText.big { order: 0; margin-left: 0; margin-top: 0; } #detailInfo>.mainContainer { display: flex; flex-direction: column; } #detailInfo>.mainContainer>.introPic { order: 1; margin-top: 60px; } #detailInfo.noText>.mainContainer>.introPic { margin-top: 0; } #detailInfo .snippet._2, #detailInfo .snippet._4, #detailInfoSecond .snippet._2, #detailInfoSecond .snippet._4 { margin-top: 0; } #detailInfo .snippet br { /*display:none;*/ } #detailSnippets { order: 3; width: 100%; margin-right: 0; } #detailBody .mainContainer>.introPic { margin-top: -5vw; } .compositionPicContainer { width: 100%; margin-left: 0px; margin-right: 0; height: 62vw; order: 0; margin-bottom: 30px; } .compositionText { margin-bottom: 60px; max-width: none; margin-top: 60px; } #detailComposition .mainContainer, .infoBlock .mainContainer { flex-direction: column; } .compositionPicContainer .tl._3 { font-size: 15vw; top: 20vw; } .compositionPicContainer .tl._1 { top: 10vw; bottom: auto; left: 25vw; } .text.big { font-size: 20px; line-height: 35px } .detailBodyContent { padding-left: 0; flex-direction: column; } .detailBodyContent .blockTitle { margin-left: 0 !important; margin-top: 60px; } #detailBody .detailBodyContent>.left, #detailBody .detailBodyContent>.right, #detailBody .detailBodyContent>.center { width: 100% !important; } .verticalPic { width: 100%; height: 140vw; margin-top: 40px; margin-left: 0; } #detailBody .galleryContainer { height: 60vw; } .detailBodyContent.summer .right { order: 1; } #detailBody .detailBodyContent.scheme2>.right { order: 0; padding-left: 0; } #detailBody .detailBodyContent.scheme2>.left { order: 1; margin-top: 60px; width: 100% !important; margin-left: 0; } #detailBody .detailBodyContent.scheme2>.left:only-child { margin-top: 0px; } #detailBody .detailBodyContent.summer { margin-top: 60px; } .menuPic img { height: 110%; top: -5%; } .detailBodyContent.scheme3>.right { display: flex; justify-content: flex-end; margin-top: 60px; } .detailBodyContent.scheme3>.right .introPic { transform: none !important; margin-right: 0; } .menuBlock, .menuPic { width: 41vw; height: 41vw; margin-left: 0 !important; margin-right: 0; } .detailBodyContent.scheme4 { padding-right: 0; width: 100% !important; margin-left: 0px; } .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: 0px; top: 20px; font-size: 20px; } #detailForm .mainBackground { left: 0px; width: 100%; } .formLayer { flex-direction: column; width: calc(100% - 20px); margin: auto; min-height: 45vw; } .wpforms-confirmation-container { font-size: 16px; width: calc(100% - 5vw); line-height: 25px; } .formContent { flex-direction: column; } #formTitle { margin-left: 0; margin-top: -13.3vw; } #detailForm { margin-top: calc(60px + 13.3vw); } #formTitle .slidingTitleBig { margin-top: -5.5vw; } .formDescription { margin-left: 0; } .formInfo.left { width: 100%; } .formContainer .right { width: 100%; margin-right: 0; margin-left: 0; margin-top: 0px; } .formField { width: 100% !important; padding-bottom: 17px !important; } .formField { margin-top: 20px; } .formField select, ::-webkit-input-placeholder, .formField input, .wpforms-container label { font-size: 14px; } .wpforms-field-description { font-size: 12px !important; padding: 5px 5px 0 5px !important; } .wpforms-container .wpforms-submit-container { padding: 0 !important; width: 100%; } .wpforms-submit { margin-right: 0; border: none !important; } .formContainer { margin: 0; width: 100%; } .wpforms-container label.wpforms-error { bottom: 0; } .taste .backgroundScheme .mainBackground { top: 5vw; } .compositionPicContainer.reversed .tl._3 { bottom: 5vw; top: auto; right: 5vw; } .compositionPicContainer.reversed .tl._1 { left: 8vw; top: auto; bottom: 2vw; opacity: 0.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 { /**** our boats multi - body ***/ margin-top: 60vw; } .seascape .compositionPicContainer { order: 0; } .seascape .compositionText { order: 1; } #detailTextSpecial { order: 4; width: 100%; margin-left: 10px; } .simplePicture { height: 70vw; } #detailTopSecond .oLeftBar { width: 20px; position: absolute; left: -35px; height: calc(100% - 65px); } .detailBodyContent.scheme3 .blockTitle { margin-top: 0; } #detailIntroTitle br { display: none; } #detailInfo .mainContainer #detailSnippets:only-child { margin-top: 0; } .profileTitle { font-size: 30px; margin-left: 0; } .profileLogo { position: relative; top: 0; left: 0; display: block; right: auto; margin-top: 50px; width: 150px; } .profileContent { flex-direction: column; } .profilePic, .profilePic.sustainability { width: 100%; height: 129vw; margin-left: 0; margin-top: 50px; } .profileScheme .mainBackground.bGreen { height: calc(100% + 30px); } .locationContainer+.mainContainer .text.big br { display: none; } #detailSpaces+#detailBody { margin-top: 30px; } .pressButton { margin-top: 10px; } /*NAV */ #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-right: 25px; display: flex; } #navBottom .socials svg { height: 18px; } #navBottom .socials .tw { margin-left: 12px; } #navBottom .socials .ig { margin-left: 10px; } .navSection:after { top: 50px; } .subItem .subTitle { display: none; } .subItem:before { content: none; } .navSectionTitle { padding-right: 0; font-size: 24px; } #navContent { padding-right: 0; padding-left: 0px; 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) } .mobileArrow.right .oArrow {} .galleryContainer .activeLayer { display: flex; align-items: center; } .galleryContainer .activeLayer.right { justify-content: flex-end; } .sliderPreview { position: relative; top: 0; width: 100%; right: 0; bottom: 0; } .photogalleryMarginBottom { margin-bottom: 100px; } .hExperienceArrow svg { width: 8px; } .hExperienceArrow { width: 25px; height: 25px; } .styleLogo:nth-child(1), .styleLogo:nth-child(2) { margin-top: 0; } .styleLogo, .styleLogo.smaller, .styleLogo.smaller.left, .styleLogo.smaller.right { width: 40%; margin-left: 0; margin-right: 0; margin-top: 60px; flex: inherit; } #styleDetailsLogos { padding: 30px; justify-content: space-between; } .styleLogo img.tinyLogo { width: 75%; } .styleLogo img.smallerLogo { width: 50%; } .styleLogo img.smallestLogo { width: 30%; } .styleLogo:nth-child(3) { margin-top: 30px; } .styleLogo img { width: 100%; } .wind_direction img { display: none; } #mainLogo.menuForced { transform: translateY(0px); } .formField.wpforms-field-checkbox.multiple { flex-direction: column; } .formField.wpforms-field-checkbox.multiple ul { width: 100%; margin-top: 15px; } .formField.wpforms-field-checkbox input[type=checkbox]+label { background-position: -4px -3px; } .formField.wpforms-field-checkbox input[type=checkbox]:checked+label { background-position: -4px -28px; } .formField.right input, .formField.right textarea { width: 100%; } .langsContainer a { font-size: 16px; } .overlay .mainBackground { width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 15px; top: 5px; left: 5px; } .overlayContainer { width: calc(100% - 50px); max-width: 280px; } .ovGroup input, .ovGroup select { font-size: 18px; letter-spacing: 0; margin-left: 20px; } .overlayLabel { width: 100px; font-size: 18px; } .bookGuests .icoContainer { margin-left: 56px; } .ovGroup select { margin-left: 0; padding-left: 50px; } .overlayClose { transform: scale(0.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 { top: 11px; left: 9px; transform: scale(1.2); } #partners { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .partner { width: 40% !important; display: flex; justify-content: center; max-width: none !important; } .partner.slh img { max-width: 80px; } .partner.virtuoso img { max-width: 162px; } .partner.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: 0.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(0.6); } .sustainabilityText, .sustainabilityText.wide { margin-left: 56px; width: auto; } .introLogo a.smaller.text.tech { font-size: 11px !important; } html[lang=en] .titleLogo.sustainability img { margin-top: 4vw; } #chatbase-bubble-button { width: 45px !important; height: 45px !important; } } #chatbase-bubble-button { background-color: #9c998f !important; } .introText p { padding-top: 15px; }