/*
Theme Name: Nonna Custom Template
Theme URI: https://template/
Author: Studio Ingiusto
Author URI: https://template/
Description: Nonna Custom Template
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nonna-uci
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@charset "utf-8";* { margin: 0; padding: 0; box-sizing: border-box; } 

/* -------------------------------------------------------------------------------- /
/ ! IMPOSTAZIONI GENERALI /
/ -------------------------------------------------------------------------------- */

:root { /* Colors */

 --white: #fff; --black: #000; --orange: #D7B496; --pink: #7D1054; /* Font Size */

 --font-s: clamp(14px, 999px, calc(100vw/(1920/20))); --font-m: clamp(14px, 999px, calc(100vw/(1920/25))); --font-ml: clamp(20px, 999px, calc(100vw/(1920/30))); --font-l: clamp(32px, 999px, calc(100vw/(1920/120))); --font-xl: clamp(40px, 999px, calc(100vw/(1920/150))); --font-2xl: clamp(40px, 999px, calc(100vw/(1920/200))); /* Fonts */

 --coplette: 'Coplette'; --montserrat: 'Montserrat'; } 

*::selection { background: #FFC695; color: var(--pink); } 

body { font-size: var(--font-m); font-family: var(--montserrat); font-weight: 300; background: var(--white); } 

/* -------------------------------------------------------------------------------- /
/ ! TYPOGRAPHY /
/ -------------------------------------------------------------------------------- */

.font-s { font-size: var(--font-s); line-height: 1.5em } 
.font-m { font-size: var(--font-m); line-height: 1.4em } 
.font-ml { font-size: var(--font-ml); line-height: 1.4em } 
.font-l { font-size: var(--font-l); line-height: 1.3em } 
.font-xl { font-size: var(--font-xl); line-height: 1.2em } 
.font-2xl { font-size: var(--font-2xl); line-height: 1.2em } 

.montserrat { font-family: var(--montserrat); } 
.coplette { font-family: var(--coplette); } 

.color-pink { color: var(--pink); } 
.color-orange { color: var(--orange); } 
.color-black { color: var(--black); } 
.color-white { color: var(--white); } 

.bold { font-weight: bold !important; } 
.medium { font-weight: 500; } 
.text-stroke { color: transparent !important; -webkit-text-stroke: 2px var(--black); } 

strong { font-weight: 500; } 
.uppercase { text-transform: uppercase; } 

h1, h2, h3, h4, h5, h6, p, ul, ol, a { font-size: inherit; } 

/* .fancy-title h2 { flex-shrink: 0; overflow: hidden; clip-path: inset(0.15em 0 0.15em 0); } 
.fancy-title h2 > span { position: relative; display: inline-block; transform: translateY(0.15em); margin-right: -0.05em; } 
.fancy-title h2 > span.right { justify-content: flex-end; padding-top: 0; transform: translateY(-0.15em); padding-bottom: 0.1em; margin-right: 0; } 
.fancy-title .line { display: block; height: 0.14em; width: 100%; background: var(--black); flex-shrink: 0; position: absolute; } 
.fancy-title .left .line { top: 0; left: 0; } 
.fancy-title .right .line { bottom: 0; right: 0; } 
.fancy-title .right .line { margin-top: 0.1em; } 
.fancy-title .text { line-height: 1em; display: inline-block; } 

@media (max-width: 576px){
 .fancy-title .text { transform: translateY(0.15em); } 
 .fancy-title h2 { clip-path: inset(0.15em 0 0.05em 0); } 
 }*/

.fancy-title h2 { display: flex; gap: 0.1em; overflow: hidden; } 
.fancy-title-col { display: flex; flex-direction: column; } 
.fancy-title-col .line { height: 0.15em; width: 100%; background: var(--black); } 
.fancy-title-col .text { height: 1em; line-height: 1em; vertical-align: middle; } 
.fancy-title-col.right { transform: translateY(-0.2em); gap: 0.1em; } 

@media screen and (min-device-width: 375px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2){
 .fancy-title .text { transform: translateY(0.125em); } 
 }

@media screen and (-webkit-min-device-pixel-ratio: 1) and (min-device-width: 1024px){
 .fancy-title .text { transform: translateY(0.125em); } 
 }

/* -------------------------------------------------------------------------------- /
/ ! HELPERS /
/ -------------------------------------------------------------------------------- */

.background-image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; } 
.background-image figure { width: 100%; height: 100%; } 
.background-image img { height: 100%; width: 100%; object-fit: cover; } 

a,
a:hover,
a:visited { color: inherit; text-decoration: none; transition: font-weight .4s cubic-bezier(.15,.32,.5,1); } 

a:hover:not(.cta:hover) { font-weight: 800; } 

.cta { display: inline-block; width: max-content; cursor: pointer; } 
.cta .text { text-decoration: underline; } 

.background-pink { background: var(--pink); } 
.background-orange { background: var(--orange); } 
.background-black { background: var(--black); } 
.background-white { background: var(--white); } 

.path-fill-pink path { fill: var(--pink); } 
.path-fill-orange path { fill: var(--orange); } 
.path-fill-black path { fill: var(--black); } 
.path-fill-white path { fill: var(--white); } 

.placeholder { height: 100%; width: 100%; background: #ccc; } 

.h-screen { height: 100vh; } 

header { padding-top: clamp(120px, 999px, calc(100vh/(960/210))); } 

.text-content { max-width: clamp(960px, 9999px, calc(100vw/(1920/1420))); margin-inline: auto; } 

.marquee-container { display: flex; flex-direction: column; justify-content: center; } 
.marquee { width: 100%; overflow: hidden; } 
.marquee-content { display: flex; gap: 0.3em; flex-wrap: nowrap; width: max-content; } 
.marquee span, .marquee h2 { font-size: inherit; font-weight: inherit; } 

/** follow cursor */
.follow-cursor { pointer-events: none; position: fixed; z-index: 9; min-width: 150px; min-height: 150px; padding: 0.3em; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; border: 4px solid #707070; border-radius: 9999px; font-weight: 300; font-size: var(--font-s); background: var(--white); opacity: 0; transform: scale(0.5) translate(20%, 20%); transition: opacity .2s cubic-bezier(.15,.32,.5,1) .1s, transform .3s cubic-bezier(.15,.32,.5,1); } 
.follow-cursor.hovering { opacity: 1; transform: scale(1) /* translate(-10%, -10%) */; transition: opacity .2s cubic-bezier(.15,.32,.5,1) .1s, transform .3s cubic-bezier(.15,.32,.5,1), color .3s cubic-bezier(.15,.32,.5,1), background .3s cubic-bezier(.15,.32,.5,1), border .3s cubic-bezier(.15,.32,.5,1); } 

/* -------------------------------------------------------------------------------- /
/ ! INIZIO CSS /
/ -------------------------------------------------------------------------------- */

/*! preloader */
.preloader { position: fixed; inset: 0; z-index: 9999999; background: var(--white); display: flex; justify-content: center; align-items: center; } 
.preloader video { width: clamp(64px, 999px, calc(100vw/(1920/160))); height: auto; image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; opacity: 0; } 

/*! Gooey transition */

.gooey-wrapper { position: fixed; inset: 0; z-index: 99999; mix-blend-mode: multiply; pointer-events: none; opacity: 0; } 
.gooey-container { height: 100%; width: 100%; position: relative; background-color: #fff; filter: contrast(100); } 
.gooey { position: absolute; height: calc(100vw/(1920/150)); width: calc(100vw/(1920/150)); border-radius: 50%; background-color: #353535; filter: blur(20px); } 
/* .gooey-in::before { content: ''; position: absolute; inset: 0; background: var(--pink); mix-blend-mode: overlay; z-index: 2; } */
.gooey-out .gooey { background: #fff; transition: width 0.4s linear, height 0.4s linear; } 
.gooey.hidden { width: 0 !important; height: 0 !important; } 
.gooey:nth-child(1) { top: 80%; left: 10%; } 
.gooey:nth-child(2) { top: 55%; left: 40%; } 
.gooey:nth-child(3) { top: 30%; left: 55%; } 
.gooey:nth-child(4) { top: 20%; left: 35%; } 
.gooey:nth-child(5) { top: 5%; left: 95%; } 
.gooey:nth-child(6) { top: 80%; left: 80%; } 

/*! navbar */
.main-nav { position: fixed; width: 100%; top: 40px; left: 0; padding-inline: 32px; z-index: 999; color: var(--white); mix-blend-mode: difference; } 
.main-nav .container { padding-inline: 0; flex-wrap: nowrap; align-content: center; } 
.main-nav .nav-logo { padding: 0.1em 0.4em; padding-left: 0; font-size: 40px; font-family: var(--coplette); border: 2px solid var(--white); border-left: none; border-top-right-radius: 999px; border-bottom-right-radius: 999px; flex-shrink: 0; display: flex; align-items: center; line-height: 1em; } 
.main-nav .nav-logo span { transform: translateY(0.05em); padding-left: 0.2em; } 
.main-nav .line-container { width: 5%; border-right: 2px solid var(--white); display: flex; align-items: center; margin-right: 1em; } 
.main-nav .line { width: 100%; height: 2px; background: var(--white); align-self: center; } 
.main-nav .hamburger { line-height: 0; cursor: pointer; } 
.main-nav .hamburger svg { height: 60px; width: auto; } 
.main-nav .hamburger svg path { fill: var(--white); } 

.hamburger-content { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999; background: var(--white); opacity: 0; pointer-events: none; } 
.hamburger-content .container { height: 100%; display: flex; justify-content: center; align-items: center; padding-block: clamp(32px, 999px, calc(100vh/(960/80))); position: relative; } 
.hamburger-content ul { list-style: none; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; line-height: 1em; } 
.hamburger-content .cta .number { font-size: 0.25em; } 
.hamburger-content .cta .text { text-decoration: none; } 
.hamburger-content .cta { transition: opacity 0.5s cubic-bezier(.15,.32,.5,1); opacity: 0.5; text-align: center; } 
.hamburger-content .cta:hover { opacity: 1; } 
.close-btn { position: absolute; right: 32px; top: 72px; transform: translate(0, -50%); opacity: 0; height: 80px; width: 80px; cursor: pointer; transition: opacity .5s cubic-bezier(.15,.32,.5,1); opacity: 0.5; z-index: 2; } 
.close-btn svg { width: 100%; height: 100%; } 
.close-btn svg path { fill: var(--black); } 
.close-btn:hover { opacity: 1; } 

.lang-btns { display: flex; mix-blend-mode: difference; align-self: center; } 
.lang-btns a { padding: 0.5em 1em; color: var(--white); border: 2px solid var(--white); margin: 0; font-weight: 400 !important; transition: all .3s cubic-bezier(.15,.32,.5,1); } 
.lang-btns a:first-child { border-top-left-radius: 0.65em; border-bottom-left-radius: 0.65em; border-right: 0; } 
.lang-btns a:last-child { border-top-right-radius: 0.65em; border-bottom-right-radius: 0.65em; border-left: 0; } 
.lang-btns a.active { font-weight: 800 !important; text-decoration: underline; text-underline-offset: 0.1em; text-decoration-thickness: 2px; } 
.lang-btns a:hover { color: var(--black); background: var(--white); } 
.lang-btns.mobile { position: absolute; left: 50%; right: unset; top: unset; bottom: 15vh; transform: translateX(-50%); font-size: 0.5em; } 

.single-vino .lang-btns { display: none; } 

@media (max-width: 1280px){
 .main-nav .nav-logo { font-size: 24px; } 
 .main-nav .hamburger svg { height: 40px; width: auto; } 
 .lang-btns { top: 60px; right: 160px; } 
 }

@media (max-width: 960px){
 .hamburger-content ul { justify-content: center; gap: 0.4em; } 
 }

@media (min-width: 768px){
 .lang-btns.mobile { display: none; } 
 }

@media (max-width: 767px){
 .lang-btns:not(.mobile) { display: none; } 
 }

@media (max-width: 576px){
 .main-nav .nav-logo { padding-top: 0.2em; padding-bottom: 0; } 
 }

/*! fine navbar */

/*! home */
/* header */
.home header { height: 100vh; position: relative; } 
.home header .container { height: 100vh; width: 100%; max-width: 100%; flex-direction: column; align-items: center; text-align: center; position: absolute; top: 0; left: 0; z-index: -1; flex-wrap: nowrap; padding-inline: 0; } 
.home header .container > .row { height: 50%; width: 100%; padding-block: 24px; } 
.home header .container > .row:first-child { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-top: clamp(120px, 999px, calc(100vh/(960/210))); } 
.home header svg { width: calc(100vw/(1920/1540)); height: auto; margin-bottom: -4.5em; } 

.home header .glasses { display: flex; justify-content: space-between; width: 100%; } 
.home header .glass { width: 15%; height: 100%; } 
.home header .glass svg { width: 100%; height: 100%; object-fit: contain; } 

.home main { background: var(--white); } 

@media (max-height: 720px){
 .home header svg { margin-bottom: -2.75em; } 
 .home header .container > .row { height: 60%; } 
 .home header .container > .row:last-child { height: 40%; } 
 }

@media (max-width: 768px){
 .home header .container > .row { height: 50% !important; } 
 }

@media (max-width: 680px){
 .home header svg { margin-bottom: -1.5em; } 
 .home header .container > .row:last-child { height: calc(50% - 120px) !important; } 
 .home header .container > .row:first-child { height: 50% !important; justify-content: center; } 
 .home header { height: 85vh; } 
 }

/* video */
.home .video-section { height: 100vh; width: 100%; } 
.home .video-section video { height: 100%; width: 100%; object-fit: cover; } 

@media (max-width: 576px){
 .home .video-section { max-height: 70vh; } 
 }

/* manifesto */
.manifesto { position: relative; } 
.manifesto .row { height: 50%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; } 
.manifesto .title { display: flex; flex-direction: column; align-items: center; margin-bottom: 0.1em; } 
.manifesto h2 { margin-bottom: -0.2em; line-height: 1em; } 
.manifesto h3 { font-size: 0.45em; font-weight: 200; line-height: 1em; letter-spacing: 0.17em; } 
/* .manifesto .row:last-child .title { margin-bottom: 0.14em; } */
.svg-carousel { position: absolute; left: 100%; top: 0; height: 100%; width: auto; display: flex; align-items: center; gap: 60vw; pointer-events: none; } 
.svg-carousel svg { height: 60%; width: auto; transform: translate(50%, 0); } 

@media (max-width: 960px){
 .manifesto { height: auto; } 
 .manifesto .row { min-height: 50vh; } 
 .manifesto .row:nth-child(2) h2 { margin-bottom: 0.3em; } 
 .svg-carousel { display: none; } 
 }

@media (max-width: 680px){
 .manifesto .title { margin-bottom: 0.5em; } 
 }

/* gallery */
.gallery .container { min-height: 100vh; } 
.gallery .col-m-60 { padding-top: 10%; } 
.gallery .text-content { margin-top: 2em; } 
.gallery .col-m-40 { padding-left: 32px; } 
.gallery .swiper-container { height: 100%; width: 100%; position: relative; } 
.gallerySwiper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; cursor: grab; } 
.gallerySwiper .swiper-slide { display: flex; justify-content: space-between; gap: 26px; } 
.gallerySwiper picture { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: clamp(32px, 999px, calc(100vw/(1920/72))); } 
.gallerySwiper img { width: 100%; height: 100%; object-fit: cover; } 

@media (max-width: 1280px){
 .gallery :is(.col-m-60, .col-m-40) { width: 50%; } 
 .gallery .fancy-title { font-size: var(--font-xl); } 
 }

@media (max-width: 960px){
 .gallery :is(.col-m-60, .col-m-40) { width: 100%; } 
 .gallery .col-m-60 { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 40px 32px; height: 100%; } 
 .gallery .col-m-40 { height: 75vh; padding-left: 0; max-height: 580px; } 
 .gallery .swiper-container { width: 100%; margin-inline: auto; max-height: 65vh; } 
 }

@media (max-width: 680px){
 .gallery .col-m-60 { padding-inline: 32px; } 
 .gallery .container { padding-inline: 0; } 
 .gallerySwiper { pointer-events: none; } 
 .gallerySwiper .swiper-slide { gap: 16px; opacity: 1 !important; backface-visibility: visible !important; transform: none !important; z-index: 1 !important; } 
 }

/* social */
.social-banner { height: 100%; width: 100%; overflow: hidden; padding-block: 2%; } 
.social-banner svg { max-height: 100%; width: 100%; height: auto; overflow: visible; } 
.social > .container { max-width: 100%; padding-inline: 0; } 
.social .col-m-40 { min-height: 200vh; } 
.social :is(.reviews, .instagram) { width: 100%; height: 50%; padding-top: 10%; padding-left: 15%; } 
.social .reviews { background: var(--black); color: var(--white); } 
.reviewsSwiper, .instagramSwiper { height: clamp(280px, 999px, calc(100vw/(1920/386))); margin-top: clamp(40px, 999px, calc(100vw/(1920/160))); cursor: grab; } 
:is(.reviewsSwiper, .instagramSwiper) .swiper-slide { aspect-ratio: 1; height: 100%; width: auto; background: var(--white); color: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; } 
.instagramSwiper .swiper-slide { background: var(--black); color: var(--white); padding: 0; position: relative; } 
.reviewsSwiper .swiper-slide { transition: color 0.4s cubic-bezier(.15,.32,.5,1), background 0.4s cubic-bezier(.15,.32,.5,1); } 
.reviewsSwiper .swiper-slide:hover { color: var(--pink); background: var(--orange); } 
.reviewsSwiper .quote { line-height: 0.25em; padding-top: 0.45em; } 
.instagram { border-left: 1px solid #707070; } 
.instagram .cta { display: flex; align-items: center; gap: 0.25em; } 
.instagram .cta svg { height: 1.5em; width: 1.5em; } 

@media (max-width: 960px){
 .social .col-m-40 { min-height: 250vh; } 
 .social .social-banner { display: flex; align-items: center; padding-bottom: 24px; } 
 }

@media (max-width: 767px){
 .social .col-m-40 { min-height: 100vh; } 
 .social :is(.reviews, .instagram) { height: auto; padding: 56px 32px; text-align: center; } 
 .social .cta { margin-inline: auto; } 
 }

@media (max-width: 576px){
 .social .col-m-40 { width: 100%; height: auto; min-height: 0; padding-block: 32px; } 
 }

/*! fine home */

/*! pagina menu */
/* header */
.page-template-menu header { padding-top: 0; position: relative; } 
.page-template-menu header .menu-link { position: absolute; inset: 0; z-index: 2; } 
.page-template-menu header .container { max-width: 100%; height: 100vh; padding-inline: 0; flex-wrap: nowrap; } 
.page-template-menu header .text-svg { height: 100%; width: auto; flex-shrink: 0; } 
.page-template-menu header :is(.left-col, .right-col) { height: 100%; width: 100%; display: flex; flex-direction: column; } 
.page-template-menu header .fancy-title { margin-inline: auto; } 
.page-template-menu header .left-col > div { height: 50%; width: 100%; background: var(--orange); } 
.page-template-menu header .left-col > div:first-child { display: flex; align-items: flex-end; padding-bottom: 0.8em; padding-inline: 0.3em; } 
.page-template-menu header :is(.left-col, .right-col) > div picture { display: block; height: 100%; width: 100%; line-height: 0; } 
.page-template-menu header :is(.left-col, .right-col) > div picture img { height: 100%; width: 100%; object-fit: cover; } 
.page-template-menu header .right-col > div { height: 100%; width: 100%; } 

@media (max-width: 1024px){
 .page-template-menu header { padding-top: 120px; } 
 .page-template-menu header .container { flex-direction: column; height: auto; } 
 .page-template-menu header .left-col > div:first-child { padding-block: 2em; } 
 .page-template-menu header .left-col > div:not(:first-child), .page-template-menu header .right-col > div { height: 60vh; } 
 .page-template-menu header .text-svg-container { max-height: 60vh; width: 100%; overflow: hidden; display: flex; align-items: center; } 
 }

/* parallax section */
.page-template-menu .parallax-section { position: absolute; top: 0; z-index: -1; width: 100%; } 
.page-template-menu .parallax-section .content { height: 100%; width: 100%; position: relative; } 
.page-template-menu .parallax-section .card { background: var(--pink); color: var(--white); padding: 1.5em; display: flex; flex-direction: column; align-items: center; font-weight: 500; max-width: clamp(460px, 9999px, calc(100vw/(1920/460))); text-align: center; position: absolute; z-index: 2; } 
.page-template-menu .parallax-section .card .title { font-size: 1.5em; margin-top: 0.75em; margin-bottom: 1em; font-weight: inherit; text-transform: uppercase; } 
.page-template-menu .parallax-section .card .icon { width: 40%; height: clamp(60px, 999px, calc(100vw/(1920/125))); } 
.page-template-menu .parallax-section .card .icon svg { width: 100%; height: 100%; } 
.page-template-menu .parallax-section .background-svg { width: 55%; height: auto; right: 0; position: absolute; } 
.page-template-menu .parallax-section .background-svg svg { width: 100%; height: auto; } 
.page-template-menu .card.laboratorio { top: 0; left: calc(100%/(1920/600)); } 
.page-template-menu .card.macelleria { top: calc(100%/(1080/164)); left: calc(100%/(1920/112)); } 
.page-template-menu .card.selecta { bottom: 0; left: 0; } 
.page-template-menu .card.caffe { bottom: 0; right: calc(100%/(1920/140)); } 

.page-template-menu .follow-cursor { border: none; min-height: 250px; min-width: 250px; background: none; } 

@media (max-width: 1800px){
 .page-template-menu .card.macelleria { left: calc(100vw/(1800/70)); } 
 }

@media (max-width: 1660px){
 .page-template-menu .card.macelleria { left: 0; } 
 .page-template-menu .card.laboratorio { left: clamp(440px, 9999px, calc(100vw/(1920/450))); } 
 }

@media (max-width: 1140px){
 .page-template-menu .parallax-section-placeholder { display: none; } 
 .page-template-menu .parallax-section { position: static; height: auto; } 
 .page-template-menu .parallax-section .content { display: flex; flex-direction: column; max-width: 800px; margin-inline: auto; } 
 .page-template-menu .parallax-section .card { width: calc(100vw/(393/260)); min-width: 320px; position: static; } 
 .page-template-menu .parallax-section .card:nth-child(even) { margin-left: auto; } 
 .page-template-menu .parallax-section .card:not(:first-child) { margin-top: -1em; } 
 .page-template-menu .parallax-section .background-svg { position: static; width: 100%; max-width: 560px; margin-block: 2em; margin-inline: auto; } 
 }

@media (max-width: 380px){
 .page-template-menu .parallax-section .card { min-width: 230px; } 
 }

/* img parallax section */
.img-parallax-section { position: relative; width: 100%; background: var(--white); overflow: hidden; border-top: 2px solid var(--black); } 
.img-parallax-section .background { height: 100%; width: 100%; display: flex; align-items: center; overflow: hidden; } 
.img-parallax-section .background svg { height: auto; width: 100%; object-fit: cover; } 
.img-parallax-section .parallax-container { position: absolute; top: 0; left: 0; width: 100%; } 
.img-parallax-section .container { flex-wrap: nowrap; gap: 2em; width: 100%; max-width: 100%; padding-inline: 0; justify-content: center; } 
.img-parallax-section .half-col { width: 10%; display: flex; flex-direction: column; align-items: flex-end; padding-top: 50vh; } 
.img-parallax-section .half-col:last-child { align-items: flex-start; padding-top: 25vh; } 
.img-parallax-section .col-1 { padding-top: 25vh; } 
.img-parallax-section .col-2 { padding-top: 150vh; } 
.img-parallax-section .col-3 { padding-top: 75vh; } 
.img-parallax-section .img { width: 100%; aspect-ratio: 336/550; height: auto; } 
.img-parallax-section .half-col .img { width: 200%; } 
.img-parallax-section .img:not(:last-child) { margin-bottom: 2em; } 
.img-parallax-section .parallax-container img { width: 100%; height: 100%; object-fit: cover; } 

@media (max-width: 1140px){
 .img-parallax-section { border-top: none; height: auto; } 
 .img-parallax-section .background { display: flex; flex-direction: column; } 
 .img-parallax-section .img { display: none; } 
 .img-parallax-section div[class*="img-"] { display: inline-block; margin-bottom: 0 !important; max-width: calc((100% - 16em) / 3); } 
 .img-parallax-section .container { flex-direction: column; } 
 .img-parallax-section :is(.half-col, .col-s-20) { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start; width: 100%; padding-top: 0 !important; gap: 8em; transform: none !important; } 
 .img-parallax-section .col-2 { justify-content: flex-start; margin-bottom: calc(-100vw/(1024/280)); } 
 .img-parallax-section .col-3 { justify-content: flex-end; } 
 .img-parallax-section .container > div > div[class*="img-"]:nth-of-type(2) { margin-top: 4em; } 
 .img-parallax-section .container > div > div[class*="img-"]:nth-of-type(3) { margin-top: 8em; } 
 }

 @media (max-width: 768px){
 .img-parallax-section div[class*="img-"] { max-width: calc((100% - 8em) / 3); } 
 .img-parallax-section :is(.half-col, .col-s-20) { gap: 4em; } 
 .img-parallax-section .container > div > div[class*="img-"]:nth-of-type(2) { margin-top: 2em; } 
 .img-parallax-section .container > div > div[class*="img-"]:nth-of-type(3) { margin-top: 4em; } 
 }

 @media (max-width: 576px){
 .img-parallax-section div[class*="img-"] { max-width: calc((100% - 4em) / 3); } 
 .img-parallax-section :is(.half-col, .col-s-20) { gap: 2em; } 
 .img-parallax-section .container > div > div[class*="img-"]:nth-of-type(2) { margin-top: 2em; } 
 .img-parallax-section .container > div > div[class*="img-"]:nth-of-type(3) { margin-top: 4em; } 
 }

 @media (max-width: 420px){
 .img-parallax-section .parallax-container { transform: translateY(-50%); top: 50%; } 
 .img-parallax-section .col-2 { margin-bottom: calc(-100vw/(420/200)); } 
 .img-parallax-section div[class*="img-"] { max-width: calc((100% - 2em) / 3); } 
 .img-parallax-section :is(.half-col, .col-s-20) { gap: 1em; } 
 .img-parallax-section .container > div > div[class*="img-"]:nth-of-type(2) { margin-top: 2em; } 
 .img-parallax-section .container > div > div[class*="img-"]:nth-of-type(3) { margin-top: 4em; } 
 }


/*! fine pagina menu */

/*! pagina vini */
/* header */
.header-vini { padding-top: 0; min-height: 100vh; } 
.header-vini .container { max-width: 100%; padding-inline: 0; height: 100%; } 
.header-vini .col-m-40 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2em; flex-wrap: nowrap; } 
.header-vini .col-m-40 svg { height: 60%; width: auto; } 
.header-vini .fancy-title { flex-shrink: 0; } 
.header-vini .col-m-60 { position: relative; } 

/* marquee */
.page-template-vini .marquee-container { font-size: calc(100vw/(1920/100)); line-height: 1em; margin-block: 0.5em; } 
.page-template-vini .marquee-container sup { font-size: 0.5em; } 

/* sezione nera */
.page-template-vini .plain-text-section .container { max-width: 100%; justify-content: flex-end; padding-block: 2em; } 
.page-template-vini .plain-text-section .text-content { margin-inline: 0; text-align: right; font-size: clamp(14px, 99px, calc(100vw/(1920/40))); } 

@media (max-width: 767px){
 .page-template-vini .plain-text-section .text-content { text-align: center; } 
 }

/* consigli */
.consigli { margin-bottom: 2em; } 
.consigli .container { max-width: 100%; max-height: 100vh; } 
.consigli .container.title { border-bottom: 2px solid var(--black); padding-block: 1.5em; justify-content: space-between; align-items: center; } 
.consigli .container.title h2 { font-size: 2em; } 
.viniSwiper { padding-bottom: 56px; } 
.viniSwiper .swiper-slide { display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 75px; } 
.viniSwiper .swiper-slide picture { display: block; line-height: 0; height: 100%; width: 100%; max-height: 70vh; } 
.viniSwiper .swiper-slide img { height: 100%; width: 100%; object-fit: contain; } 
.viniSwiper .swiper-pagination-bullet-active { background: var(--pink); } 
.viniSwiper .swiper-pagination-bullet { width: 16px; height: 16px; } 

@media (max-width: 767px){
 .consigli .container.title { flex-direction: column; align-items: center; text-align: center; } 
 }

@media (max-width: 576px){
 .consigli .slider-vini-container { max-height: none; padding-top: 2em; } 
 .consigli .slider-vini-container .swiper-wrapper { flex-direction: column; height: auto; gap: 3em; } 
 }

/* quote-row */
.quote-row { border-block: 2px solid var(--black); padding: 1.3em 1em; text-align: center; } 
.quote-row p { font-size: clamp(20px, 99px, calc(100vw/(1920/40))); font-weight: 500; } 

/* mappa */
.mappa > .container { max-width: 100%; } 
.mappa .col-m-70 { padding-left: 32px; } 
.mappa .col-m-70 svg { width: 100%; height: auto; } 
.mappa .col-m-30 { display: flex; align-items: center; justify-content: center; } 
.mappa .title { transform: rotate(90deg); white-space: nowrap; text-align: center; line-height: 0.9em; display: flex; justify-content: center; align-items: center; padding-block: 24px; } 
.mappa .title span:last-child { font-size: 0.425em; line-height: 0.425em; } 
.mappa .title h2 { display: flex; flex-direction: column; } 
.mappa svg .points circle { pointer-events: all; cursor: pointer; } 

@media (max-width: 767px){
 .mappa .title { transform: none; } 
 }

/* stati */
.stati { background: var(--orange); color: var(--pink); min-height: 100vh; padding-top: 120px; display: flex; flex-direction: column; position: relative; border-bottom: 5px solid var(--pink); } 
.stati[data-index="even"] { background: var(--pink); color: var(--orange); border-bottom: 5px solid var(--orange); } 
.stati .marquee-container { margin-top: 0; } 
/* .stati .marquee:not(:last-child) { margin-bottom: -0.5em; } */
.stati .marquee-content { gap: 0; } 
/* .stati :is(.marquee-text, .duplicate) { display: flex; flex-wrap: nowrap; } */
.stati :is(.marquee-text, .duplicate) { color: var(--orange); -webkit-text-stroke: 2px var(--pink); } 
.stati .marquee-content :is(.marquee-text, .duplicate):nth-child(even) { color: var(--pink); -webkit-text-stroke: none; } 
.stati[data-index="even"] .marquee-content :is(.marquee-text, .duplicate) { color: var(--pink); -webkit-text-stroke: 2px var(--orange); } 
.stati .marquee { overflow: visible; } 
.stati[data-index="even"] .marquee-content :is(.marquee-text, .duplicate):nth-child(even) { color: var(--orange); -webkit-text-stroke: none; } 
.stati .marquee svg { height: 120px; width: auto; } 
.stati > .container { height: 100%; width: 100%; } 
.stati .svg-map { position: relative; } 
.stati .svg-map svg { position: absolute; height: 40vh; width: 100%; left: 0; } 
.stati .text-col { padding-bottom: 140px; } 
.btn-pdf { display: flex; align-items: center; justify-content: center; width: max-content; text-align: center; font-weight: 300; line-height: 1em; aspect-ratio: 1; padding: 0.5em; border-radius: 999px; border: 2px solid var(--pink); margin-left: auto; margin-top: 1em; margin-right: 3em; } 
.btn-pdf:hover { font-weight: 300 !important; } 
.stati[data-index="even"] .btn-pdf { border-color: var(--orange); margin-left: 3em; margin-right: auto; } 
.stati[data-index="even"] .container { flex-direction: row-reverse; text-align: right; } 
.stati .waves-container { height: 100vh; width: 100%; position: absolute; top: 5px; left: 0; z-index: 2; pointer-events: none; overflow: hidden; } 
.stati .waves-container .waves-content, .liquid-transition-content { display: flex; flex-direction: column; width: 100%; height: 100%; } 
.stati .waves-container .state-svg-container, .liquid-svg-container { height: 100vh; width: 100vw; overflow: hidden; display: flex; justify-content: flex-start; align-items: flex-end; flex-shrink: 0; } 
.stati .state-wave, .liquid-wave { fill: var(--pink); } 
.stati[data-index="even"] .state-wave { fill: var(--orange); } 
.stati .state-svg .text-element textPath, .liquid-svg .text-element textPath { font-size: calc(100vw/(1920/100)); fill: var(--pink); font-family: var(--coplette); } 
.stati[data-index="even"] .state-svg .text-element textPath { fill: var(--orange); } 
.stati .waves-container .waves-bg, .liquid-transition-bg { background: var(--pink); height: 100vh; width: 100%; flex-shrink: 0; } 
.stati[data-index="even"] .waves-container .waves-bg { background: var(--orange); } 
.stati .mobile-button { display: none; } 
.stati:last-child .state-wave { fill: var(--white) !important; } 
.stati:last-child .waves-bg { background: var(--white) !important; } 
.stati .desktop-link { position: absolute; z-index: 3; inset: 0; } 

/* Transition */
.liquid-transition-container { position: fixed; inset: 0; z-index: 999; pointer-events: none; } 
.liquid-transition-content { transform: translateY(20vh); } 
.liquid-transition-bg { box-shadow: 0 -5px 0 5px var(--pink); } 

.page-template-vini footer { border-top: none; } 

@media (max-width: 1800px){
 .header-vini { height: 100vh; } 
 }

@media (max-width: 1024px){
 .stati .desktop-link { display: none; } 
 .stati .text-content { padding-right: 80px; padding-top: 2em; border-top: 3px solid var(--pink); border-right: 3px solid var(--pink); position: relative; } 
 .stati[data-index="even"] .text-content { border-top: 3px solid var(--orange); border-left: 3px solid var(--orange); padding-right: 0; padding-left: 80px; } 
 .stati .mobile-button { padding-inline: 1em; width: auto; height: auto; aspect-ratio: 1; border: 3px solid var(--pink); background: var(--orange); border-radius: 9999px; text-align: center; display: flex; align-items: center; justify-content: center; font-weight: 300; font-size: 1.2em; position: absolute; top: 100%; left: 100%; transform: translate(-50%, -50%); } 
 .stati[data-index="even"] .mobile-button { left: 0; background: var(--pink); border-color: var(--orange); } 
 .stati .marquee-container { font-size: 50px; } 
 .stati .marquee:not(:last-child) { margin-bottom: 0.25em; } 
 }

 @media (max-width: 767px){
 .stati { border-bottom: none; padding-bottom: 60px; } 
 .stati .text-col { padding-right: 3em; padding-bottom: 3em; } 
 .stati .transition-container { display: none !important; } 
 .stati[data-index="even"] .text-content { border-right: 3px solid var(--orange); border-left: none; padding-left: 0; padding-right: 80px; text-align: left; } 
 .stati[data-index="even"] .mobile-button { left: 100%; } 
 .stati .svg-map { height: 40vh; } 
 .stati .svg-map svg { position: static; height: 100%; width: 100%; } 
 }

/*! fine pagina vini */

/*! pagina vino */
.vino-header { height: 100vh; width: 100%; padding-top: 0; } 
.vino-header .container { height: 100%; flex-wrap: nowrap; } 
.vino-header picture { display: inline-block; height: 100%; width: auto; line-height: 0; position: relative; z-index: 2; margin-right: -200px; } 
.vino-header img { height: 100%; width: auto; } 
.vino-header .vino-info { height: 100%; display: flex; flex-direction: column; gap: calc(100vh/(960/27)); } 
.vino-header .vino-info .top { height: 35%; max-width: 65vw; display: flex; flex-direction: column; justify-content: flex-end; padding-left: 100px; } 
.vino-header .vino-info .top .back { margin-bottom: 1em; width: max-content; position: relative; z-index: 99; color: var(--pink); display: flex; align-items: center; }
.vino-header .vino-info .top .back svg { height: 0.8em; width: auto; margin-right: 0.2em; }
.vino-header h1 { font-size: clamp(32px, 999px, calc(100vw/(1920/64))); margin-bottom: 0.2em; } 
.vino-header .vino-info .bottom { height: 49%; width: 100%; } 
.vino-header .vino-info .bottom-content { height: 100%; width: 100vw; border-block: 50px solid var(--black); display: flex; flex-direction: column; } 
.vino-header .vino-info .row { display: flex; height: 100%; } 
.vino-header .vino-info .bottom-content .row { height: 33%; } 
.vino-header .vino-info .row .label { border-right: 2px solid var(--black); display: flex; align-items: center; padding-left: 52px; font-weight: 500; font-size: 1.6em; } 
.vino-header .label br { display: none; } 
.vino-header .vino-info .row .info { width: 100%; display: flex; align-items: center; padding-inline: 1em; gap: 0.1em; } 
.vino-header .vino-info .row:not(:last-child) .info { border-bottom: 2px solid var(--black); } 
.vino-header .cell { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; padding-block: 0.4em; padding-inline: 0.4em; width: clamp(40px, 999px, calc(100vw/(1920/160))); text-align: center; } 
.vino-header .cell .cell-icon { height: 55%; width: auto; aspect-ratio: 1; position: relative; } 
.vino-header .cell .cell-icon svg { height: 100%; width: auto; } 
.vino-header .cell .cell-value { font-weight: 250; display: flex; justify-content: center; align-items: center; position: absolute; inset: 0; } 
.vino-header .cell .cell-info { font-weight: 500; font-size: clamp(18px, 99px, 0.8em); line-height: clamp(18px, 99px, 0.8em); } 

@media (min-width: 1280px){
 .vino-header .vino-info .bottom { min-height: 372px; } 
 .vino-header .vino-info .row .label { font-size: clamp(24px, 1.6em, calc(100vh/(660/28))); } 
 }

@media (min-width: 1280px) and (max-height: 860px){
 .vino-header .vino-info .row .label { padding-left: calc(100vw/(1560/96)); } 
 }


@media (max-height: 800px){
 .vino-header img { height: 96%; margin-top: 4%; } 
 }

@media (min-width: 1280px) and (max-height: 756px){
 .vino-header .vino-info .row { min-height: 92px; } 
 .vino-header .cell .cell-icon { min-height: 42px; } 
 .vino-header .vino-info .top { min-height: 264px; } 
 .vino-header img { min-height: 728px; } 
 }

@media (max-width: 1280px){
 .vino-header { height: auto; padding-top: 140px; } 
 .vino-header .container { height: auto; position: relative; flex-direction: column-reverse; margin-bottom: clamp(240px, 999px, 20%); } 
 .vino-header .vino-info .bottom { position: absolute; height: 100%; width: calc(100vw - 64px); pointer-events: none; } 
 .vino-header .vino-info .bottom-content { border: none; position: relative; height: 100%; width: 100%; } 
 .vino-header picture { width: 50%; height: auto; margin-inline: auto; } 
 .vino-header img { width: 100%; height: auto; } 
 .vino-header .vino-info .top { padding-left: 0; max-width: none; padding-right: 15%; } 
 .vino-header .vino-info .top p { font-size: 1.4em; } 
 .vino-header .vino-info .row { position: absolute; width: auto; border: none; flex-direction: column; align-items: center; gap: 1em; height: auto; text-align: center; pointer-events: all; } 
 .vino-header .vino-info .row .info { width: auto; flex-direction: column; gap: 1em; padding-inline: 0; border: none !important; } 
 .vino-header .vino-info .row .label { border: none; padding-left: 0; width: auto; font-size: 2.25em; } 
 .vino-header .row.sentori { top: calc(100vw/(1280/300)); left: 30px; } 
 .vino-header .row.abbinamenti { top: calc(100vw/(1280/300)); right: 30px; } 
 .vino-header .cell { width: auto; } 
 .vino-header .cell .cell-icon { height: 60px; margin-bottom: 0.6em; } 
 .vino-header .cell :is(.cell-info, .cell-value) { font-size: clamp(14px, 99px, calc(100vw/(1280/26))); } 
 .vino-header .row.caratteristiche { top: 100%; width: 100vw; left: -32px; border-top: 2px solid var(--black); padding-top: 2em; } 
 .vino-header .row.caratteristiche .cell-icon { height: 72px; } 
 .vino-header .row.caratteristiche .col.info { flex-direction: row; justify-content: center; } 
 
 /* Footer */
 .page-template-vino footer { margin-top: 300px; } 
 }

@media (max-width: 960px){
 .vino-header picture { width: 60%; height: auto; margin-inline: auto; } 
 .vino-header .label br { display: block; } 
 .vino-header .vino-info .row .label { font-size: clamp(20px, 99px, calc(100vw/(960/32))); } 
 .vino-header .cell .cell-icon { height: 40px; margin-bottom: 0.6em; } 
 .vino-header .row.caratteristiche .cell-icon { height: 52px; } 
 }

@media (max-width: 720px){
 .vino-header .row.sentori { left: 0; top: clamp(220px, 999px, 100vw/(720/280)); } 
 .vino-header .row.abbinamenti { right: 0; top: clamp(220px, 999px, 100vw/(720/280)); } 
 }

 @media (max-width: 640px){
 .vino-header h1 { font-size: clamp(24px, 99px, calc(100vw/(640/32))); } 
 .vino-header .vino-info .top p { font-size: clamp(14px, 99px, calc(100vw/(640/24))); } 
 .vino-header picture { height: 60vh; width: auto; } 
 .vino-header picture img { height: 100%; width: auto; } 
 .vino-header .container { padding-inline: 16px; } 
 .vino-header .container .bottom { width: calc(100vw - 32px); } 
 .vino-header .row.caratteristiche { left: -16px; } 

 /* Footer */
 .page-template-vino footer { margin-top: 200px; } 
 }

 @media (max-width: 480px){
 .vino-header .cell .cell-icon { height: 32px; } 
 .vino-header .row.caratteristiche .col { transform: scale(0.85); } 
 .vino-header .row.caratteristiche .cell-value { font-size: 18px; } 
 }

/*! footer */
footer { background: var(--white); padding-top: 60px; padding-bottom: 40px; border-block: 1px solid var(--black); } 
footer .container { flex-direction: column; justify-content: center; align-items: center; } 
footer .text-content { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 1em; text-align: center; } 
footer .footer-title { font-size: 2.5em; } 
footer .social-icons { margin-top: 1em; display: flex; justify-content: center; gap: 0.5em; } 
footer .social-icons svg { transition: opacity .4s cubic-bezier(.15,.32,.5,1); } 
footer .social-icons svg:hover { opacity: 0.4; } 

footer .policies { gap: 1em; flex-direction: row; font-size: 0.9em; } 

@media (max-width: 576px) { footer .text-content p { display: flex; flex-direction: column; align-items: center; text-align: center; } 
 footer .separator { display: none; } 
 }
/*! fine footer */

.iubenda-iframe-badge-container { display: none !important; } 

/* -------------------------------------------------------------------------------- /
/ ! GRID SYSTEM /
/ -------------------------------------------------------------------------------- */

/* CONTAINER */

.container { max-width: 1784px; padding-inline: 32px; margin: 0 auto; display: flex; flex-wrap: wrap; } 

/* COLONNE */

[class*='col-'] { width: 100%; } 

@media (min-width: 576px){
 .col-s-20 { width: 20%; } 
 .col-s-25 { width: 25%; } 
 .col-s-30 { width: 30%; } 
 .col-s-33 { width: calc(100%/3); } 
 .col-s-40 { width: 40%; } 
 .col-s-50 { width: 50%; } 
 .col-s-60 { width: 60%; } 
 .col-s-66 { width: calc((100%/3)*2); } 
 .col-s-70 { width: 70%; } 
 .col-s-75 { width: 75%; } 
 .col-s-80 { width: 80%; } 
 .col-s-100 { width: 100%; } 
 }

@media (min-width: 768px){
 .col-m-20 { width: 20%; } 
 .col-m-25 { width: 25%; } 
 .col-m-30 { width: 30%; } 
 .col-m-33 { width: calc(100%/3); } 
 .col-m-40 { width: 40%; } 
 .col-m-50 { width: 50%; } 
 .col-m-60 { width: 60%; } 
 .col-m-66 { width: calc((100%/3)*2); } 
 .col-m-70 { width: 70%; } 
 .col-m-75 { width: 75%; } 
 .col-m-80 { width: 80%; } 
 .col-m-100 { width: 100%; } 
 }

@media (min-width: 1200px){
 .col-l-20 { width: 20%; } 
 .col-l-25 { width: 25%; } 
 .col-l-30 { width: 30%; } 
 .col-l-33 { width: calc(100%/3); } 
 .col-l-40 { width: 40%; } 
 .col-l-50 { width: 50%; } 
 .col-l-60 { width: 60%; } 
 .col-l-66 { width: calc((100%/3)*2); } 
 .col-l-70 { width: 70%; } 
 .col-l-75 { width: 75%; } 
 .col-l-80 { width: 80%; } 
 .col-l-100 { width: 100%; } 
 }