/* ┏━━━┓ ┏┓ ┏┓ ┏━━━┓ ┏━━━━┓ ┏━━━┓ ┏━┓┏━┓ ┏━━━┓ ┏━━━┓ ┏━━━┓ ┃┏━┓┃ ┃┃ ┃┃ ┃┏━┓┃ ┃┏┓┏┓┃ ┃┏━┓┃ ┃ ┗┛ ┃ ┃┏━┓┃ ┃┏━┓┃ ┃┏━┓┃ ┃┃ ┗┛ ┃┃ ┃┃ ┃┗━━┓ ┗┛┃┃┗┛ ┃┃ ┃┃ ┃┏┓┏┓┃ ┃┃ ┗┛ ┃┗━━┓ ┃┗━━┓ ┃┃ ┏┓ ┃┃ ┃┃ ┗━━┓┃ ┃┃ ┃┃ ┃┃ ┃┃┃┃┃┃ ┃┃ ┏┓ ┗━━┓┃ ┗━━┓┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┃┃ ┃┗━┛┃ ┃┃┃┃┃┃ ┃┗━┛┃ ┃┗━┛┃ ┃┗━┛┃ ┗━━━┛ ┗━━━┛ ┗━━━┛ ┗┛ ┗━━━┛ ┗┛┗┛┗┛ ▀ ┗━━━┛ ┗━━━┛ ┗━━━┛ - "CUSTOM STYLESHEET" DESIGN BY © LO STUDIO CUSTOM.CSS STYLESHEET FOR => " Hotel Conca Verde " BASE (MOBILE) SIZE /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █ █ █▀▀ ▄▀▀▄ █▀▀▄ █▀▀ █▀▀▄ * █▀▀█ █▀▀ █▀▀█ █ █ █▀▀ █▐█▀ * ▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - HEADER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ .header { z-index: 4; position: fixed; top: 0; left: 0; } .head_wrapper { z-index: 2; padding: 1rem; gap: 2rem; border-bottom: 1px solid var(--white); } /*.header.scroll, .header.invert { backdrop-filter: blur(1rem); background-color: rgb(var(--black-rgb) / 40%); }*/ .header.scroll { backdrop-filter: blur(1rem); background-color: rgb(var(--cream-rgb) / 75%); } .header.scroll .head_wrapper, .header.invert .head_wrapper { border-color: var(--black); } .header.scroll *::after, .header.invert *::after { background-color: var(--black) !important; } .header.scroll :where(.lang .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle, .link_head), .header.invert :where(.lang .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle, .link_head) { color: var(--black) !important; } .header.scroll #hamburger:not(.tapped) span, .header.invert #hamburger:not(.tapped) span { background-color: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LOGO ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .head_logo { width: 5rem; position: absolute; top: 0; left: 1rem; } .head_logo :where(img, svg) { width: 100%; height: 100%; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HEAD CONTENT ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link_head { display: none; } /* Lang */ .lang { margin-left: 1rem; } .lang .wpml-ls-legacy-dropdown-click { width: auto; } .lang .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle, .lang .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a { display: flex; align-items: center; justify-content: center; width: 2rem; padding: 0; padding: .5rem; background: transparent; border: unset; color: var(--white); font-size: 1.25rem; line-height: 1; text-transform: uppercase; white-space: nowrap; } .lang .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:hover, .lang .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:focus { background-color: var(--gold); } .lang .wpml-ls-legacy-dropdown-click a span { margin-top: 2px; } .lang .wpml-ls-legacy-dropdown-click a.wpml-ls-item-toggle:after { display: none; } .lang .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu { border-top: 0; } .lang .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu a { background-color: var(--gold); font-size: 1rem; border-top: 1px solid rgb(var(--white-rgb) / 25%); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ HAMBURGER / MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #hamburger { display: inline-block; font-size: var(--rem); line-height: 0; margin-left: 2rem; position: relative; padding: .5em .5em; overflow: visible; cursor: pointer; transition: .25s ease; } #hamburger:after { content: ""; width: 1px; height: 8rem; position: absolute; bottom: -1rem; background-color: var(--white); left: -1rem; } #hamburger .wrap { width: 2.5em; height: 2em; } #hamburger span { display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 4em; height: 2px; border-radius: .2em; background-color: var(--white); transform-origin: center; will-change: transform; transition: .25s ease; } #hamburger .top_bun { top: -1px; } #hamburger .burger { top: calc(50% - 1px); } #hamburger .bottom_bun { bottom: -1px; } /* Tapped / Clicked animation */ #hamburger.tapped span { width: 3em; transition: .25s ease; } #hamburger.tapped .burger { opacity: 0; } #hamburger.tapped .top_bun { top: 50%; transform: translate(-50%,-50%) rotate(45deg); } #hamburger.tapped .bottom_bun { top: 50%; transform: translate(-50%,-50%) rotate(-45deg); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ NAV MENU ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #main_nav { display: block; position: absolute; top: 0; right: 0; z-index: 1; width: 40rem; max-width: 100%; transform: translateX(100%); background-color: rgb(var(--black-rgb) / 75%); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); transition: .25s ease-in-out; } .scroll #main_nav { background-color: rgb(var(--black-rgb) / 95%); } #main_nav.open { transform: translateX(0); } #main_nav .menu_wrapper { top: 0; left: 0; padding-top: calc( 81px + ( 101 - 81 ) * ( (100vw - 320px) / 1600 ) + var(--c5v)); } #main_nav .head_menu {} #main_nav .head_menu li { font: inherit; line-height: 1; } #main_nav .head_menu li.current-menu-item { color: ; } #main_nav .head_menu li a { display: inline-block; font-size: 1.5em; line-height: 1; padding: .25em 0; font-family: var(--title-font); color: var(--white); } #main_nav .head_menu li a:hover { color: var(--gold); } .wrp_menu { position: absolute; bottom: 1rem; right: 2rem; } .wrp_menu a { color: var(--white); font-size: 18px; font-weight: 300; } .wrp_menu a:hover { color: var(--gold); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BOOKING ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .booking { display: none; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ WIDGET RECENSIONI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #ca-widget-container { position: fixed; top: calc(81px + (101 - 81) * ((100vw - 320px) / 1600)); right: 0; width: 8rem; } /** * * ▄▀▀▄ ▄▀▀ ▄▀▀ █▀▀ ▀▀█▀▀ ▄▀▀ * █▀▀█ ▀▄ ▀▄ █▀▀ █ ▀▄ * ▀ ▀ ▀▀ ▀▀ ▀▀▀ ▀ ▀▀ - ASSETS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ LINKs / BTNs STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .link { display: block; position: relative; width: fit-content; padding: .75em 1.5em; border: 1px solid var(--black); background-color: var(--black); font: inherit; font-size: var(--rem); color: var(--white); text-transform: uppercase; } .link:hover, .link:focus, .link:active { background-color: var(--white); color: var(--black); } .link.gold { background-color: var(--gold); border-color: var(--gold); color: var(--white); } .link.gold:hover, .link.gold:focus, .link.gold:active { background-color: var(--white); color: var(--gold); } .link.white { background-color: transparent; border-color: var(--white); color: var(--white); } .link.white:hover, .link.white:focus, .link.white:active { background-color: var(--white); color: var(--gold); } .link.brown { backdrop-filter: blur(2.75px); -webkit-backdrop-filter: blur(2.75px); background-color: rgb(var(--brown-rgb) / 75%); border-color: var(--brown); color: var(--white); } .link.brown:hover, .link.brown:focus, .link.brown:active { background-color: var(--white); color: var(--brown); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ FILTERS STYLE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ VARS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SCROLL BUTTON ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #scroll_btn { display: inline-block; position: absolute; left: 50%; bottom: 1.5em; --scroll-px: 40px; --scroll-min: 40; --scroll-max: 60; max-width: 60px; transform: translateX(-50%); cursor: pointer; z-index: 1; } #scroll_btn svg { width: 100%; animation: hang_scroll 1.5s ease-in-out infinite forwards alternate; animation-play-state: running; } @keyframes hang_scroll { from { transform: translateY(0); } to { transform: translateY(.5em); } } #scroll_btn:hover svg, #scroll_btn:focus svg, #scroll_btn:active svg { animation-play-state: paused; } #scroll_btn svg path { fill: var(--black); transition: .25s ease; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SWIPER NAV ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .nav_wrap { gap: 1rem; margin-top: 1rem; } .nav_btn { width: 2em; z-index: 1; cursor: pointer; transition: .25s ease; } .nav_btn :where(img, svg) { width: 100%; } .nav_btn svg path { fill: var(--black); transition: .25s ease; } .nav_btn.abs { top: 50%; transform: translateY(-50%); } .nav_prev.abs { left: 0; } .nav_next.abs { right: 0; } .nav_btn.swiper-button-disabled { display: none; } /* Dots */ .nav_dots { gap: .5em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ COMPONENTS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Social */ .social {} .social a { display: inline-block; width: 3.5em; padding: .25em; } .social a :where(img,svg) { width: 100%; } .social a svg path { transition: .25s ease; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SIDEBAR ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .sidebar.sticky { background-color: var(--brown); top: calc( 81px + ( 101 - 81 ) * ( (100vw - 320px) / 1600 ) ); } .sidebar > div { padding: 1.5rem; } #form.sidebar h4 { font-size: 1.25rem; color: var(--white); text-transform: uppercase; font-family: var(--main-font); margin-bottom: 2rem; text-align: center; } #form.sidebar button[type=submit] { background-color: var(--gold); } .prezzo_off { font-size: clamp(1.25rem, 5vw, 3.5rem); font-family: var(--title-font); line-height: 1; color: var(--cream); } .info_prezzo { color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BREADCRUMBS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #breadcrumb { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5em; } #breadcrumb li { list-style: none; margin: 0; } #breadcrumb .separator {} #breadcrumb :where(a,span) { display: inline-block; min-width: fit-content; color: var(--white); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ ANIMAZIONE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 .s1_title.trigger h1, .s1 .s1_title.trigger .h1 { opacity: 0; } .s1 .s1_title.trigger.active h1, .s1 .s1_title.trigger.active .h1 { opacity: 1; } .trigger h1, .trigger h2, .trigger h3, .trigger .h1, .trigger .h2, .trigger .h3 { opacity: 0; transform: translateY(2rem); transition: .75s ease; } .trigger.active h1, .trigger.active h2, .trigger.active h3, .trigger.active .h1, .trigger.active .h2, .trigger.active .h3 { opacity: 1; transform: translateY(0); } .trigger p:not(.pretitle) { opacity: 0; transform: translateY(2rem); transition: .75s ease .25s; } .trigger.active p:not(.pretitle) { opacity: 1; transform: translateY(0); } .trigger p.pretitle { opacity: 0; transform: translateY(2rem); transition: .25s ease .125s; } .trigger.active p.pretitle { opacity: 1; transform: translateY(0); } .trigger.sec_img { clip-path: inset(0 0 100% 0); transition: 1s cubic-bezier(.76,0,.24,1); } .trigger.sec_img img { transform: scale(1.6); opacity: 0; transition: 2s cubic-bezier(.76,0,.24,1) -.25s, opacity .1s ease; will-change: transform; } .trigger.active.sec_img { clip-path: inset(0 0 0 0); transform: scale(1); } .trigger.active.sec_img img { transform: scale(1); opacity: 1; } /** * * █▀▀ ▄▀▀▄ ▄▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ * █▀▀ █ █ █ █ █ █▀▀ █▐█▀ * ▀ ▀▀ ▀▀ ▀ ▀▀▀ ▀ ▀▀ - FOOTER * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ footer { background-color: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ STRUCTURE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Foot Logo */ .foot_block_logo { padding-bottom: 12rem; } .foot_block_logo:after { content: ""; width: 1px; height: 6rem; background-color: var(--gold); position: absolute; left: 50%; bottom: 3rem; } .foot_logo { display: block; --foot-logo-width: 240px; --foot-logo-min: 240; --foot-logo-max: 600; max-width: 600px; } .foot_logo :where(img, svg) { width: 100%; } /* Foot Block */ .foot_block {} .foot_block h4 { font-size: 1.5rem; color: var(--white); font-weight: 500; font-family: var(--main-font); } .foot_block p { font-size: 1.5rem; font-weight: 300; color: var(--white); margin-top: .75rem; } .foot_block p + p { margin-top: 2rem; } .foot_block p a { font: inherit; } .foot_block p a:hover { color: var(--gold); } /* Foot Social */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CREDITS ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #credits p { font-size: .825em; line-height: 1.5; margin: 0 auto; z-index: 1; color: var(--white); } #credits .resp_sep { display: none; } #credits a { display: inline-block; font: inherit; color: inherit; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ BACK TO TOP ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .btn_wh { display: block; z-index: 2; bottom: 1em; right: 1em; --back-top-px: 40px; --back-top-min: 40; --back-top-max: 60; max-width: 60px; cursor: pointer; transition: .25s ease; } .btn_wh :where(img, svg) { width: 100%; } .btn_wh svg path { fill: var(--black); } /** * * ▄▀▀ █▀▀ ▄▀▀ ▀▀█▀▀ ▀ ▄▀▀▄ █▄ █ ▄▀▀ * ▀▄ █▀▀ █ █ █ █ █ █ ▀█ ▀▄ * ▀▀ ▀▀▀ ▀▀ ▀ ▀ ▀▀ ▀ ▀ ▀▀ - SECTIONS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .s1 { overflow: hidden; } .s1 .container { padding-top: calc( 81px + ( 101 - 81 ) * ( (100vw - 320px) / 1600 ) ); } .s1_title p { font-size: 1.5rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION ____ ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀ ▄▀▀▄ █▀▀▄ █▀▀▄ ▄▀▀ * █ █▀▀█ █▐█▀ █ █ ▀▄ * ▀▀ ▀ ▀ ▀ ▀▀ ▀▀▀ ▀▀ - CARDS * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card { border: 1px solid rgb(30 30 30 / 50%); } .card a { padding: 1.5rem; padding-bottom: 0; height: 100%; } .card .card_content { padding: 2rem 0 .5rem 0; } .card .card_content h3 { text-transform: uppercase; font-size: 1.5rem; margin-bottom: 1rem; } .card .card_content p { font-size: 1rem; line-height: 1.25; } .card button { transform:translateY(50%); padding: .75em 3.5em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD EMPTY ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .card_empty { padding: 2em 1.5em; } .card_empty svg { width: 6em; } .card_empty .text { margin-top: 1em; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CARD OFFERTA ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .prezzo { background-color: var(--gold); padding: 1rem; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; } .prezzo p { color: var(--white); } /** * * █ █ ▄▀▀▄ █▄ ▄█ █▀▀ * █▀▀█ █ █ █ █ █ █▀▀ * ▀ ▀ ▀▀ ▀ ▀ ▀▀▀ - HOMEPAGE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_home .container::after { content: ""; width: calc(100% - var(--c5o)); height: calc(100% - var(--c15v)); position: absolute; top: var(--c7v); left: var(--c2o); border: 1px solid #ccc; z-index: -1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 6 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #page_home #sec_exp { background-color: var(--overlay_cream); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 7 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s7_home { background-color: transparent; } .slider_wrapper .swiper { overflow-y: visible; overflow-x: clip } /** * * █▀▀▄ ▄▀▀▄ ▄▀▀▀ █▀▀ ▄▀▀ * █ █ █▀▀█ █ ▀▌ █▀▀ ▀▄ * █▀▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀ - TEMPLATES _ PAGINE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE GENERALE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .sec_template:nth-of-type(odd) { background-color: var(--overlay_cream); } .sec_template .text > p:first-of-type { font-size: 1.25rem; font-weight: 500; } /* Testo immagine */ #ti_1 .container::after { content: ""; width: calc(100% - var(--c5o)); height: calc(100% - var(--c15v)); position: absolute; top: var(--c7v); left: var(--c2o); border: 1px solid #ccc; z-index: -1; } .sec_ti + .sec_ti .container { flex-direction: row-reverse; } .fresco::after { content: ""; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(to top, rgb(var(--gold-rgb) / 50%), transparent); opacity: 0; transition: .25s ease; } .fresco button { z-index: 1; opacity: 0; } .fresco:hover::after, .fresco:hover button { opacity: 1; } .sec_template .text ul { list-style: none; } .sec_template .text li { padding-left: 3rem; font-size: 1.125rem; margin-left: 0; list-style: none; margin-top: 1.5rem; position: relative; } .sec_template .text li::after { content: ""; width: 1.75rem; height: 1.75rem; position: absolute; left: 0; top: -.25rem; background: url(../images/svg/list_black.svg) no-repeat center / 1.75rem; } /* Testo e 3 immagini */ .img_wrapper { gap: 2rem 3rem; } .img_wrapper .w35m { max-width: 80%; } .img_wrapper .link { width: max-content; } /* Appartamenti */ .wrapper_appartamenti, .wrapper_esc { display: grid; gap: 2rem 1rem; } /* Testo con immagine di sfondo */ .sec_ts .text { background-color: rgb(var(--gold-rgb) / 75%); backdrop-filter: blur(1rem); } .sec_ts .text li::after { background: url(../images/svg/list.svg) no-repeat center / 1.75rem; } /* Doppia colonna */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE SALE MEETING ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #page_sale #ti_1 .ratio-4-5 { background-color: var(--white); padding: 1rem; } #page_sale #ti_1 .ratio-4-5 > img { object-fit: contain; } #page_sale .nav_wrap { margin: 0; } #page_sale .nav_btn { position: absolute; top: 50%; transform: translateY(-50%); } #page_sale .nav_prev { left: 1rem; } #page_sale .nav_next { right: 1rem; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ TEMPLATE CONTATTI ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /* Sec 2 */ #s2_contatti { background-color: var(--beige); } #s2_contatti .text p { font-size: 1.25rem; } /* Sec 3 */ #s3_contatti .container::after { content: ""; width: calc(100% - var(--c5o)); height: calc(100% - var(--c15v)); position: absolute; top: var(--c7v); left: var(--c2o); border: 1px solid #ccc; z-index: -1; } /** * * ▄▀▀▄ █▀▀▄ ▄▀▀▀ █ █ ▀ ▐▌ ▐▌ █▀▀ * █▀▀█ █▐█▀ █ █▀▀█ █ ▀▄▀ █▀▀ * ▀ ▀ ▀ ▀▀ ▀▀▀ ▀ ▀ ▀ ▀ ▀▀▀ - TEMPLATES _ ARCHIVIO * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_archive, #s2_archive { background-color: var(--beige); } #s1_archive h1 { color: var(--black); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * ▄▀▀ ▀ █▄ █ ▄▀▀▀ █ █▀▀ * ▀▄ █ █ ▀█ █ ▀▌ █ ▄ █▀▀ * ▀▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ - SINGLE * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 1 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 2 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s2_single_camere .container::after { content: ""; width: calc(100% - var(--c5o)); height: calc(100% - var(--c15v)); position: absolute; top: var(--c7v); left: var(--c2o); border: 1px solid #ccc; z-index: -1; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION 3 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ .wrapper_servizi { gap: 2rem 1rem; text-align: center; margin-top: var(--c10v); } .servizio { width: calc(50% - 1rem); } .servizio img { width: 3rem; margin-bottom: 1rem; } .servizio p { font-size: 1.25rem; line-height: 1.25; } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ SECTION [...] ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * * █▀▀ ▄▀▀▄ █▀▀▄ █▄ ▄█ * █▀▀ █ █ █▐█▀ █ █ █ * ▀ ▀▀ ▀ ▀▀ ▀ ▀ - FORM * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /* WP-Form - Custom */ #form {} #form .wpforms-field label { color: var(--white); font-weight: 400 } #form .wpforms-field :where(input, textarea, select) { background-color: transparent; border: 1px solid var(--white); border-radius: 0; padding: .75rem; font-size: 1rem; color: var(--white); } #form .wpforms-field:not(.wpforms-field.wpforms-field-checkbox) label { position: absolute; top: 0; left: 0; cursor: pointer; font-size: 16px; font-weight: 400; color: var(--white); opacity: 1; transform: translate(.75rem, 1rem); transition: .25s ease; } #form .wpforms-field:not(.wpforms-field.wpforms-field-checkbox).up label { transform: translate(.75rem, 2px); font-size: 14px; opacity: .5; } #form .wpforms-field.wpforms-field-checkbox { margin-bottom: 0; } #form .wpforms-field.wpforms-field-checkbox li input[type="checkbox"] { border-color: var(--white); } #form .wpforms-field.wpforms-field-checkbox li label a:hover { color: var(--pink); } #form button[type=submit], #form input[type=submit] { padding: 1rem; width: 100%; display: inline-block; margin-top: 2rem; background-color: var(--brown); border: 1px solid var(--brown); border-radius: 0; color: var(--white); text-transform: uppercase; font-weight: 400; } #form button[type=submit]:hover, #form input[type=submit]:hover { background-color: var(--white); color: var(--brown); } /* MailPoet Form - Custom */ #form_mp .mailpoet_form .mailpoet_paragraph label { color: var(--white); } #form_mp .mailpoet_form .mailpoet_paragraph { margin-bottom: 1rem; } #form_mp .mailpoet_form .mailpoet_paragraph :where(input, textarea, select) { background-color: transparent; border: 1px solid rgb(var(--white-rgb) / 50%); border-radius: 0; padding: .75rem !important; font-size: 1rem; color: var(--white); } #form_mp .mailpoet_form .mailpoet_paragraph input::placeholder { color: var(--white); opacity: .5; } #form_mp .mailpoet_form input.mailpoet_checkbox { border-color: var(--white); border-radius: 0; background-size: 16px; width: 1rem; height: 1rem; padding: 13px !important; } #form_mp .mailpoet_form input.mailpoet_checkbox:checked { background-color: var(--white); } #form_mp .mailpoet_form .mailpoet_checkbox_label a:hover { color: var(--gold); } #form_mp .mailpoet_form .mailpoet_paragraph .mailpoet_submit { padding: .75rem; font-size: 1.25rem; color: var(--white); text-transform: uppercase; background-color: var(--gold); border: 1px solid var(--gold); border-radius: 0; } #form_mp .mailpoet_form .mailpoet_paragraph .mailpoet_submit:hover { background-color: var(--white); color: var(--gold); } /** * * █▀▀ █ █ ▀▀█▀▀ █▀▀▄ ▄▀▀▄ * █▀▀ ▄▀▀▄ █ █▐█▀ █▀▀█ * ▀▀▀ ▀ ▀ ▀ ▀ ▀▀ ▀ ▀ - EXTRA * * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE GRAZIE ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_grazie {} /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ PAGE 404 ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ #s1_404 { background-color: var(--bkg_color); } #s1_404 .s1_title h1 { font-size: 2rem; } #s1_404 .s1_title p { font-size: 1.1rem; } #s1_404 .s1_title .link { display: inline-block; padding: 0.9rem 1.7rem; border: 2px solid var(--btn_color); border-radius: 0.6rem; font-size: 1rem; color: var(--btn_color); } #s1_404 .s1_title .link:hover { background-color: var(--btn_color); color: var(--btn_color_hover); transform: scale(1.05); } /*∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞ CSS EXTRA O MOD ∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞∞*/ /** * ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ * * RESPONSIVE * * Settare se necessario regole fluid per minmax di elementi specifici basandosi sulle seguenti regole: * => ORIGINAL CALC -> calc( 12px + (24 - 12) * ( (100vw - 360px) / (1920 - 360) ) ) * => CALC 1920px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 1560 ) ) * => CALC 1280px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 920 ) ) * => CALC 1024px -> 360px -> calc( 12px + (24 - 12) * ( (100vw - 360px) / 664 ) ) * * Da creare fluid dinamico con 2 step per i calc iniziali = 1920 -> 1024 1024 -> 360 * * __________________________________________________________________________________________________________________________________________________________________________ */ #scroll_btn { width: calc( var(--scroll-px) + ( var(--scroll-max) - var(--scroll-min) ) * ( (100vw - 360px) / 1560 ) ); } .foot_logo { width: calc( var(--foot-logo-width) + ( var(--foot-logo-max) - var(--foot-logo-min) ) * ( (100vw - 360px) / 1560 ) ); } .btn_wh { width: calc( var(--back-top-px) + ( var(--back-top-max) - var(--back-top-min) ) * ( (100vw - 360px) / 1560 ) ); } /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ /* Darkmode Switch */ /*∞∞∞∞∞∞ ASSETS ∞∞∞∞∞∞*/ /* Buttons */ /* Links */ /* Filters */ /* Sections 1 */ /* Breadcrumbs */ /* Scroll */ /* Components */ /* Cards */ /* Sidebar */ /* ... */ /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Structure */ /* Credits */ /* Back Top */ /*∞∞∞∞∞∞ SECTIONS ∞∞∞∞∞∞*/ /* Section 1 */ /*∞∞∞∞∞∞ CARDS ∞∞∞∞∞∞*/ /* Card */ /* Card Empty */ /*∞∞∞∞∞∞ HOMEPAGE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec [...] */ /*∞∞∞∞∞∞ PAGE ∞∞∞∞∞∞*/ /* Template ... */ /* Template ... */ /* Template ... */ /*∞∞∞∞∞∞ ARCHIVE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec ... */ /*∞∞∞∞∞∞ SINGLE ∞∞∞∞∞∞*/ /* Sec 1 */ /* Sec 2 */ /* Sec ... */ /*∞∞∞∞∞∞ FORM ∞∞∞∞∞∞*/ /*∞∞∞∞∞∞ EXTRA ∞∞∞∞∞∞*/ /** * * █▄ ▄█ ▄▀▀▄ █▀▀▄ ▀ █ █▀▀ * █ █ █ █ █ █▀▀█ █ █ ▄ █▀▀ * ▀ ▀ ▀▀ ▀▀▀ ▀ ▀▀▀▀ ▀▀▀ - MOBILE PORT | 601 -> 767 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 601px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ /* Logo */ /* Head Content */ /* Hamburger */ /* Nav Menu */ } /** * * ▀▀█▀▀ ▄▀▀▄ █▀▀▄ █ █▀▀ ▀▀█▀▀ * █ █▀▀█ █▀▀█ █ ▄ █▀▀ █ * ▀ ▀ ▀ ▀▀▀ ▀▀▀▀ ▀▀▀ ▀ - TABLET | 768 x 1024 -> 1023 x 1280 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 768px) { /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ /* Credits */ #credits br { display: none; } #credits .resp_sep { display: inline-block; } /*∞∞∞∞∞∞ CAMERE ∞∞∞∞∞∞*/ .servizio { width: calc(33% - 1rem); } /*∞∞∞∞∞∞ TEMPLATE GENERALE ∞∞∞∞∞∞*/ /* Testo e 3 immagini */ .img_wrapper .w35m { width: calc(35% - 3rem); max-width: 80%; } .img_wrapper .w30m { width: calc(30% - 3rem); } /* Appartamenti */ .wrapper_appartamenti, .wrapper_esc { grid-template-columns: 1fr 1fr; } /* Testo con immagine di sfondo */ .sec_ts .container { padding-left: var(--c5o); } .sec_ts .text { min-height: 100vh; min-width: 30%; max-width: 50%; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀▀█▀▀ ▄▀▀▄ █▀▀▄ ▄▀▀ █▄ ▄█ ▄▀▀▄ █ █ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ ▀▄ █ █ █ █▀▀█ █ ▄ █ ▄ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ ▀▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ - LAPTOP | 1024 x 768 -> 1280 x 720 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1024px) { .max_par p { max-width: 70%; margin-left: auto; margin-right: auto; } /*∞∞∞∞∞∞ WIDGET RECENSIONI ∞∞∞∞∞∞*/ #ca-widget-container { width: auto; min-width: 8rem; height: 194px !important; top: 50%; transform: translateY(-50%); } #ca-widget-container iframe { max-width: unset; } /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ .head_wrapper { padding: 1rem 2rem 1rem 8rem; } .head_wrapper .desktop { gap: 1rem; } .head_logo { width: 6rem; position: absolute; top: 0; left: 1rem; } #hamburger { margin-left: 3rem; } #hamburger::after { left: -2rem; } /*∞∞∞∞∞∞ FOOTER ∞∞∞∞∞∞*/ /* Contents */ .foot_block.flex { justify-content: flex-end; } /* Credits */ #credits a:hover, #credits a:active, #credits a:focus { opacity: 1; color: var(--gold); } #credits #credits_studio:hover { color: #e74e0f; } /* Back Top */ .btn_wh { opacity: 1; } /*∞∞∞∞∞∞ HOME ∞∞∞∞∞∞*/ /* Sec 1 */ .booking { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--c7v); background-color: rgb(var(--gold-rgb) / 70%); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); } .booking .link { margin: 0; font-size: .85rem; padding: 1rem; } .input_form { border-right: 1px solid rgb(var(--white-rgb) / 50%); } .input_form:last-of-type { border-right: unset; } .input_form input { display: inline-block; padding: .75rem 3rem .75rem 1rem; width: 100%; height: 100%; background: transparent; color: var(--white); font-size: 1rem; font-weight: 400; font-family: var(--main-font); cursor: pointer; } .input_form input::placeholder { color: var(--white); font-size: 1rem; font-weight: 400; font-family: var(--main-font); } .input_form select { display: inline-block; padding: .75rem 3rem .75rem 1rem; width: 100%; height: 100%; background: transparent; color: var(--white); font-size: 1rem; font-weight: 400; font-family: var(--main-font); appearance: none; -webkit-appearance: none; } .input_form select option { color: var(--black); } .calendar { background: url(../images/svg/form_calendar.svg) no-repeat calc(100% - 1em) / 1em; } .select { background: url(../images/svg/form_sel_open_1.svg) no-repeat calc(100% - 1em) / 1em; } /* Sec 3 */ .big_title { font-size: clamp(2rem, 14vw, 15rem); color: #D3CAB7; } .z1 { margin-bottom: -5vw; }\ .z2 { } .z3 { margin-top: -5vw; } /*∞∞∞∞∞∞ CAMERE ∞∞∞∞∞∞*/ .wrapper_servizi { gap: 4rem 3rem; } .servizio { width: calc(25% - 3rem); } /*∞∞∞∞∞∞ TEMPLATE GENERALE ∞∞∞∞∞∞*/ /* Appartamenti */ .wrapper_appartamenti, .wrapper_esc { grid-template-columns: 1fr 1fr 1fr; } /* Testo con immagine di sfondo */ .sec_ts .text { min-width: 30%; max-width: 40%; } } /** * * █ ▄▀▀▄ █▀▀▄ ▀█▀ ▄▀▀▄ █▀▀▄ * █ ▄ █▀▀█ █ █ █ █ █ █ █ * ▀▀▀▀ ▀ ▀ █▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1281 x 720 -> 1366 x 768 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1281px) { /*∞∞∞∞∞∞ HEADER ∞∞∞∞∞∞*/ .head_wrapper { padding-left: 9rem; } .head_wrapper > .desktop { gap: 2.5rem; } .head_logo { left: 2rem; } .link_head { display: inline-block; color: var(--white); font-size: 1.125rem; position: relative; } .link_head::after { content: ""; width: 1px; height: 8rem; position: absolute; bottom: -1.9rem; background-color: var(--white); right: -1.25rem; } .link_head:hover { color: var(--gold) !important; } #main_nav .head_menu li a { font-size: 1.75em; padding: .375em 0; } } /** * * █▀▀▄ █▀▀ ▄▀▀ █ ▄▀ ▀█▀ ▄▀▀▄ █▀▀▄ * █ █ █▀▀ ▀▄ █▀▄ █ █ █ █ █ * ▀▀▀ ▀▀▀ ▀▀ ▀ ▀▀ ▀ ▀▀ █▀▀ - LAPTOP | 1367 x 768 -> 1919 x 1080 * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1440px) { .head_wrapper { padding-left: 9.5rem; } .head_wrapper > .desktop { gap: 4rem; } .link_head::after { right: -2rem; } /*∞∞∞∞∞∞ TEMPLATE GENERALE ∞∞∞∞∞∞*/ .sec_ts .text { max-width: 45%; } /*∞∞∞∞∞∞ TEMPLATE ESCURSIONI ∞∞∞∞∞∞*/ .wrapper_esc { grid-template-columns: 1fr 1fr 1fr 1fr; } .wrapper_esc .card .card_content h3 { font-size: 1.25rem; } /*∞∞∞∞∞∞ CAMERE ∞∞∞∞∞∞*/ .wrapper_servizi { gap: 4rem 3rem; } .servizio { width: calc(20% - 3rem); } } /** * * █ █ █▀▀▄ █▀▀ █▀▀▄ * █ █ █▀▀█ █▀▀ █▐█▀ * ▀▀ ▀▀▀ ▀▀▀ ▀ ▀▀ - ÜBER | 1921 -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and (min-width: 1921px) {} /** * * ▄▀█ █ ▄▀ * █▄▄█▄ █▀▄ * █ ▀ ▀▀ - DESKTOP 4K & UP | 2561px -> ... * __________________________________________________________________________________________________________________________________________________________________________ */ @media screen and ( min-width: 2561px ) {}