@font-face {
    font-family: 'karimtilaregular';
    src: url('../fonts/Karimtila.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fonsecablack';
    src: url('../fonts/fonseca-black-webfont.woff2') format('woff2'),
    url('../fonts/fonseca-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 1000;
    font-stretch: 25% 151%;
}

:root{

    --title-font: 'fonsecablack';
    --main-font: 'karimtilaregular';
    --body-font: "Montserrat", sans-serif;


    --light-text:white;
    --text-color:#D5DB40;
    --primary:#D5DB40;
    --secondary:#E11583;


    --max-width:75em;
    --container-padding: .5rem;

}


@media screen and (max-width: 75em)  {
    :root{


        --container-padding: 1.8rem;

    }


}

html {
    box-sizing: border-box;
    font-size:clamp(14px, 1.2vw, 19px);
}

body{margin: 0; padding: 0; width: 100%; height: 100%; font-family: var(--body-font); font-style: normal; color: var(--primary); overflow: hidden}

*,
*::before,
*::after {
    box-sizing: border-box;
}
div {display: block;}


h1, h2, h3, h4, h5, h6, p{color: var(--text-color);line-height: 1.2; margin-block:0; }
h1, h2, h3, h4, h5, h6{font-family:var(--title-font)}

u{text-decoration:none; display: inline-block; position: relative;}
u::after{content:""; position:absolute; width: 100%; height: .8ch; display: block; background: var(--text-color); border-radius: .5ch; opacity: .2; translate:5px  -.6ch; z-index: -1;}

button{border:none; outline:none; cursor:pointer}
a{text-decoration: none;color: var(--primary);}
a.button-outlined{padding:1rem; border:1px solid var(--text-color); display:block; border-radius:.5rem; font-weight:700; font-size:1rem; transition:linear .2s}
a.button-outlined:hover{background:var(--text-color); color:var(--primary)}

a.button-contained{padding:1rem; border:1px solid var(--text-color); background:var(--text-color); display:block; border-radius:.5rem; font-weight:600; font-size:1rem; transition:linear .2s; color:white;text-align: center}
a.button-contained:hover{background:none; color:var(--text-color)}

img{ display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic; width: 100%;}

.close-button{width:1.5rem; height:1.5rem;  position:absolute;right: 2rem;  top: 2rem; opacity:0}
.close-button svg{position:absolute; top:50%; left:50%; translate:-50% -50%}
.close-button path{fill:var(--secondary)}

/* ICONS STYLES */
[class^="ic-"]{font-size: 0 !important;}
[class^="ic-"]:before{content: ""; position: relative; width:2rem; aspect-ratio:1; background-position: center center; background-repeat:  no-repeat; background-size: contain; display: inline-block; margin-right: .6rem; }
.ic-instagram:before{background-image: url(../img/ic-instagram.svg);}
.ic-user:before{background-image: url(../img/ic-user.svg);}


/* JUSTIFY */
.justify-center{justify-content: center;}
.justify-specebetween{justify-content: space-between;}

.container{width: 100%; max-width: var(--max-width); margin-inline: auto; height: 100%; position: relative; padding-inline:var(--container-padding)}
.flex-container{display: flex; flex-flow: row wrap;}
.container.max-width{max-width: 45rem;}

.grid-container{width: 100%; height: 100%; max-width: var(--max-width); margin-inline:auto; display: flex;  align-content: center; gap:2rem}
@media screen and (min-width: 64em){
    .grid-container.even-column > div{width:auto; flex: 1 1 0px;}
}

@media screen and (max-width:  63.9375em){
    .grid-container.even-column{flex-direction:column}
}

.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}

.menu { display: flex; flex-flow: row wrap; list-style: none; gap:.5rem; margin: 0; padding: 0}

.button{ display: inline-block; background: var(--primary);  border:.1rem solid var(--primary); border-radius:.5rem; color: var(--secondary); padding: 1rem; font-size: 1rem; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: linear .2s;font-family: var(--body-font);}
.button:hover{background:none; border:.1rem solid var(--primary); color:var(--primary)}

main{overflow-x: clip}
.page-template-default:not(.home) main{padding-top:8rem; margin-bottom: 3rem; }
.page-template-default:not(.home) :is(h2,h3,h4,h5,h6){margin-bottom: 1.5ch; margin-top: 3ch}
.page-template-default:not(.home) :is(p, ul){margin-bottom: 1.5ch; --text-color:#FFD4E3;     color: var(--text-color); }
/* BASIC LAYOUT */
.main-header  .st0{fill:var(--primary);}
.main-header  .st1{fill:var(--secondary-dark);}
.main-header {--secondary-dark:#e60868; top:-100px}
header.main-header{width: 100vw; position: fixed; padding-block: 1rem; z-index:9; }
.logo{width: 6rem; aspect-ratio:1.3 ; background:url(../img/UAOlogo.svg) left center no-repeat; background-size: contain; font-size: 0;}
.logo.no-bg{background:none; transition:linear .2s}
header.main-header .menu li a{font-size: 2.5rem;font-family: var(--main-font);background:var(--secondary-dark);
    padding: 0.5rem;  border-radius: 1rem; transition:background linear .2s;}
.main-header .nav-container{display: flex;    gap: 1rem;    align-items: center;}
.menu-icon{height: 3rem;    width: 4rem;    background: none; font-size: 0; }

footer{background:var(--secondary); padding-block:1rem}
.off-canvas-container{width: 100vw; height: 100vh; position: fixed; top:0; display: none;    opacity: 0; }
.off-canvas-content{ background: #D5DB40; width: max(300px, 20vw); right:calc( max(300px, 20vw)*-1); height: 100vh; padding: 3rem 2rem; border-radius: 2rem 0 0 2rem;     display: grid;  place-content: center; box-shadow: -4px 0 0px #E72465;     position: absolute;    }
.off-canvas-menu.menu{flex-direction: column;}
header .off-canvas-menu.menu li a{font-size: 1.6rem !important;font-family: var(--title-font) !important;color:#E11583; background:none; display:inline-block}
.off-canvas-container .close-button{opacity:1; background:url(../img/ic-close-p.svg) center center no-repeat; background-size: contain; left: 2rem}
.off-canvas-container:before{content:"";width: 200vw; height: 100vh; position: absolute; background: #E72465;
    opacity: .8;}


.main-blue, [data-theme="main-blue"]  *{--light-text:#C7FBFB; --secondary:#00A4B7; --secondary-dark:#00A4B7 !important;}
.main-pink, [data-theme="main-pink"]   *{--light-text:#FFD4E3; --secondary:#E72465; --secondary-dark:#E72465 !important;}
.main-orange, [data-theme="main-orange"]   *{--light-text:#FEF7B5; --secondary:#EE721E; --secondary-dark:#EE721E !important;}
.main-purple, [data-theme="main-purple"]   *{--light-text:#FFD4E3; --secondary:#9B2684; --secondary-dark:#9B2684 !important;}
.main-gradient{background: rgb(225,21,131);  background: radial-gradient(circle, rgba(225,21,131,1) 0%, rgba(230,8,104,1) 60%);}
.main-yellow{--light-text:#E11583; --secondary:#D5DB40; --primary:#E72465;}
.main-red, [data-theme="main-red"]   *{--light-text:#FFD4E3; --secondary:#e6243e; --secondary-dark:#e6243e !important;}
.main-petrolio, [data-theme="main-petrolio"]   *{--light-text:#C7FBFB; --secondary:#018391; --secondary-dark:#018391 !important;}


header[data-theme="main-gradient-inverted"]   *{ --secondary-dark:#D5DB40; --primary:#E72465}

.spacer{height: 70vh;}


.balloon-clip{clip-path: polygon( 22.735% 0%,79.572% 0.338%,79.572% 0.338%,83.724% 0.616%,87.39% 1.323%,90.575% 2.424%,93.286% 3.881%,95.531% 5.659%,97.317% 7.72%,98.649% 10.029%,99.536% 12.549%,99.984% 15.243%,100% 18.074%,98.517% 76.858%,98.517% 76.858%,98.054% 79.291%,97.086% 81.607%,95.651% 83.778%,93.788% 85.78%,91.536% 87.584%,88.933% 89.166%,86.018% 90.499%,82.828% 91.555%,79.404% 92.31%,75.783% 92.736%,75.783% 92.736%,75.694% 93.172%,75.489% 93.832%,75.109% 94.657%,74.499% 95.585%,73.6% 96.558%,72.355% 97.516%,70.706% 98.399%,68.597% 99.147%,65.97% 99.701%,62.768% 100%,62.768% 100%,62.968% 99.906%,63.497% 99.635%,64.249% 99.202%,65.119% 98.622%,66.001% 97.91%,66.789% 97.081%,67.377% 96.151%,67.66% 95.135%,67.532% 94.048%,66.886% 92.905%,32.784% 92.736%,32.784% 92.736%,28.809% 92.493%,25.019% 91.88%,21.462% 90.924%,18.186% 89.653%,15.239% 88.091%,12.667% 86.266%,10.518% 84.204%,8.84% 81.931%,7.679% 79.474%,7.084% 76.858%,0.165% 17.568%,0.165% 17.568%,0.112% 14.69%,0.63% 11.962%,1.698% 9.42%,3.294% 7.103%,5.395% 5.046%,7.982% 3.289%,11.03% 1.868%,14.52% 0.822%,18.429% 0.186%,22.735% -0% ); padding: 1rem 1.5rem 2rem; }

span.heart{isolation:isolate; position:relative}
span.heart .char{ color: var(--secondary);    width: 1.3ch; }
span.heart .char:before{content:""; z-index:1; background: url(../img/heart.svg) center center no-repeat;    background-size: contain;       aspect-ratio: 1;    width: 1.2ch;
    height: 1.3ch; display:inline-block; position:absolute; 	animation: pulse 2s infinite;}
    @keyframes pulse {
        0% {
            transform: scale(0.95);
           
        }
    
        70% {
            transform: scale(1.1);
          
        }
    
        100% {
            transform: scale(0.95);
            
        }
    }


/* SHOW HIDE */

@media screen and (max-width: 39.9375em) {
    .show-for-medium, .show-for-large{ display:none}

}
@media screen and (min-width: 40em) {
    .hide-for-medium{display:none}
    .show-for-medium{ display:revert}
    .show-for-large{ display:none}

}
@media screen and (min-width: 64em) {
    .hide-for-large{display:none}
    .show-for-large{ display:revert}

}


.mf-cursor-text{font-family: var(--main-font);    font-size: 4rem !important;    line-height: .7 !important;}


.pin-spacer, body{background:rgba(230,8,104,1);}


/* PRELOADER */
.preloader{position:fixed;  width: 100vw; height: 100vh;  z-index: 9999; left: 0; right: 0}


/* VIDEO */
.video-section{height:100vh; position: relative}
.video-section .text-overlay{font-size: 40rem; font-family: var(--main-font)}
.video-section .video-container{width: 100%; height: 100%;}
.video-section svg{position: absolute; top:0; left: 0; width: 100%; height: 100%; }
.video-section .video-container{

    -webkit-mask-image: none;
    mask-image: none;
    border-radius:50%;
    overflow: clip;
}
.video-section .video-container video{width: 100%;    height: 100%;    object-fit: cover;}

@media (orientation: portrait) {
    .video-section{height:90vh; }
    .video-section .video-container{ mask-size: cover;}

}

/* HERO */
.hero-section{height: 100vh; position:relative; z-index: 2}
.hero-section .hero-graphics{ height: 100%; max-height: 60vh;     max-width: min(100%, 100vw); position: absolute;bottom: 0; aspect-ratio: .8; left: 0; right: 0; margin-inline: auto; opacity: 0}
.hero-section .hero-graphics img{width: 100%; height: 100%; object-fit: cover; object-position:  center; position: absolute;  }
.hero-section .hero-graphics .image-clip{clip-path:circle(70.7% at 50% 50%);}
.hero-section .hero-graphics .logo{width: 70%; min-width:200px ;position: absolute; top:4%; left: 0; right: 0; margin-inline: auto; z-index:6;     filter: drop-shadow(2px 4px 36px rgba(0, 0, 0, .2)); }


.side-triangles{position:fixed; width:7vw; height:100vh; top:6rem;
    z-index: 2; pointer-events: none}
.side-triangles.left{left: 0}
.side-triangles.right{right: 0}



#triangles-mask {width:100%; height: 110vh; overflow:hidden; bottom:-10%; position:absolute; pointer-events:none; }
.triangle{ position: absolute;  width: 2rem;  height: 2rem;   background:var(--primary);}
@media screen and (max-width: 32.9375em)  {

    .hero-section .hero-graphics .logo{top:calc(25% - 20vw); width:100%;  aspect-ratio: .8;  background-position: top; background-size: 65%;}



}

@media screen and (max-width: 39.9375em)  {

    .side-triangles .triangle{width:1rem; height: 1rem}
    .side-triangles.left{left:-2rem}
    .side-triangles.right{right:-2rem}

}

@media screen and (min-width: 60.9375em)  {
   /* .hero-section{height: 80vh;}*/
    .hero-section .hero-graphics{  max-height: 80vh;bottom: -10vh;}
}




/* BRAND INFO */
.brand-info {padding-block: 6rem; overflow:clip}
.brand-info .container{flex-direction: column;}
.brand-info h2{font-size:2.5rem; font-weight: 900; text-transform: uppercase; font-family:var(--title-font); margin-bottom:2rem;     text-wrap: balance;}
.brand-info p{font-size: 1.3rem; line-height: 1.6; font-weight: 500; color: white;     text-wrap: balance;}
.brand-info .logo-position{ aspect-ratio: 1.4;    max-width: min(100%, 100vw);}


@media screen and (max-width: 32.9375em)  {

    .brand-info h2{font-size:2rem; word-break: break-word;}

}


/* TAGS */
/* .tags-section{ min-height: 100vh; display: grid; place-content: center;} */
.tags-section.pinned .each-tag{translate: 0 5vh}
.each-tag {position: relative;}
.each-tag .tag-text{font-family: var(--main-font); font-size: 10rem; text-transform: uppercase; text-align: center; clip-path:  polygon(0 0, 100% 0, 100% 100%, 0 100%);  line-height: 1; width: 100%;}
.each-tag .tag-text.animated-change{min-height: 30vh; position: absolute; }

.bio-logo{ width:15rem; aspect-ratio: 1.83; background: url(../img/bio-logo.svg) center center no-repeat; background-size: contain; position: absolute; }
.made-tuscany{ width:10rem; aspect-ratio: 1; background: url(../img/made-in-tuscany.svg) center center no-repeat; background-size: contain; position: absolute; font-size: 0;    right: 2rem; bottom: 50%; scale:.5; opacity: 0}
.made-italy{background-image: url(../img/made-in-italy.svg)}

.pop-element{right: 0; top:50%; scale:0}

.hide-chars .char{opacity:0}
.hide-chars .char:nth-child(3), .hide-chars .char:nth-child(4){opacity:1}

.tags-hide .char:first-child,.tags-hide .char:last-child{opacity:0}

@media screen and (max-width: 699px)  {
    .each-tag .tag-text.animated-change{min-height:revert}
    .tags-section{overflow-x:clip;}
}

/* overlap section */
section.overlap{ height: 124vh; position: relative; top: 20vh; margin-bottom:20vh}
section.overlap.last{margin-bottom:30vh}

.overlap.layout-right .grid-container{flex-direction: row-reverse;}
.overlap::before{content: ""; position: absolute; top:0; translate:0 -99%; height: 20vh; width: 100%; background: var(--secondary); display: block;}
.overlap.layout-right::before {clip-path:  polygon(0 0, 0% 100%, 100% 100%);}
.overlap.layout-left::before {clip-path: polygon(100% 0, 0% 100%, 100% 100%);}

.overlap::after{content: ""; position: absolute; bottom:0; translate:0 99%; height: 20vh; width: 100%; background: var(--secondary); display: block;}
.overlap.layout-left::before {clip-path:  polygon(0 0, 0% 100%, 100% 100%);}
.overlap.layout-right::before {clip-path: polygon(100% 0, 0% 100%, 100% 100%);}



/* product section */
.product-section{background: var(--secondary); isolation: isolate; }
.product-section .container{overflow:clip; padding-bottom: 30vh}
.product-section .grid-container{align-items: center; }
.product-section .grid-container > div{flex: 0 auto; width: 50%;}

.overlapTrigger{height:124vh}

.image-container{ position: relative; }
.image-container .image-content{position:relative; }
.image-container img{ -webkit-filter: drop-shadow(0 10px 5px rgba(0,0,0,.3));  filter: drop-shadow(0 10px 5px rgba(0,0,0,.3));}

.upper-title{text-transform: uppercase; color: var(--light-text); font-weight: 500; font-size: .8rem;}
.product-title{font-size: 3.8rem; font-weight: 900; margin-block:1rem; line-height: 1; font-family: var(--title-font); }
.product-subtitle{ font-size: 1.8rem; font-weight: 500; }
.product-image{opacity: 0}
.product-section p{font-size: 1rem; line-height: 1.6; color: var(--light-text); margin-block: 1.5rem; display: block; font-weight: 500;}
.info-balloon{background-color: #FCFFB7; width: 6rem; height: 6rem; color: var(--secondary);padding: 1rem; font-size: 3rem; font-family: var(--main-font); text-align: center; position: absolute; right: 25%; top: 30%; display: grid; place-content: center; rotate: 20deg;z-index:3}
.info-balloon.closed .title:hover{cursor:pointer}
.info-balloon .title span{opacity:0; font-size:0; margin:0; height:0; display:inline-block}
.info-balloon .ingredients{font-size:.85rem; font-family:var(--body-font); opacity:0; height:0;padding-inline:1.1rem; font-weight:500; line-height:1.2}
.info-balloon .close-button{display:none; cursor:pointer}
.overplaceholder{width:100%; height:40%; position:absolute; bottom:10%; left:0; z-index:2}

.info-balloon.closed .title:hover{animation: trill 1s ease-in-out infinite;}
@keyframes trill {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }


    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

.product-balloon{background-color: var(--primary); width: min-content; height: auto;   font-size: 3rem; font-family: var(--main-font); line-height: .8; color: var(--secondary); rotate: -20deg; position: absolute; top: 10%; left: 10%;z-index:2}
.product-balloon span{ display: inline-block;   text-align: center;    width: 100%; }

.overlap.layout-right .product-balloon{left: initial; right: 20%; rotate:20deg}
.overlap.layout-right .info-balloon{right: initial; left: 15%; rotate: -20deg;}

.product-logo{position: relative; top: 0; right: 0; left: 0; width: 20rem; height: 10rem; margin: 0 auto; z-index: -1; pointer-events: none;}
.product-logo img{height: 100%;}


.main-red .product-balloon{top:-20%}
.main-petrolio .product-balloon{top:0%; left:initial !Important; rotate:10deg !important; right:10% !important}

@media screen and (max-width: 55.9375em)  {
    .image-container {width: 65% !important; }
    .image-container .image-content{ translate:0;  margin-inline: auto;}
    .product-section .grid-container{flex-flow: column  !important;}
    .product-section .grid-container .text-container{width: 100%;}
    .product-balloon{font-size: clamp(2rem, 5vw, 5rem);}



}

@media screen and (max-width: 39.9375em)  {
    .product-balloon{left:-10%; top:-20%}
    .info-balloon{right:-10%; top:20%}
    .overlap.layout-right .info-balloon{left:-15%; right: revert}
    .overlap.layout-right .product-balloon{right:-10%}
    .info-balloon .ingredients{font-size:.95rem}
}

@media screen and (max-width: 699px)  {
    .product-title{font-size:3rem}
    .product-subtitle{font-size:1.5rem}
    .product-content{padding-top:10vh}
}


/* FOLLOW US */
.follow-us{padding-block:10rem; overflow:hidden; min-height:100vh;display: grid;    place-content: center; position:relative; overflow:clip}
.photos{ position:relative; aspect-ratio:5; isolation:isolate; height:auto}
.photos .each-photo{position:absolute; height:100%; aspect-ratio:1; border-radius:3rem; overflow:hidden; }
.photos .each-photo img{width:100%; height:100%; object-fit:cover;}

.photos .each-photo:nth-child(1){transform:none !Important; z-index:2 }
.photos .each-photo:nth-child(4){left:5%;rotate:-30deg;top:50%; z-index:0 }
.photos .each-photo:nth-child(2){left:25%;rotate:-15deg;top:20%;  z-index:1}
.photos .each-photo:nth-child(3){right:25%;rotate:15deg;top:20%;  z-index:1}
.photos .each-photo:nth-child(5){right:5%;rotate:30deg;top:50%; z-index:0}

.follow-link a{display:flex; place-content:center; align-items:center; font-size:2rem;}

.follow-text{position:relative; white-space:nowrap; display:flex; gap:6rem}
.follow-text span{font-family:var(--main-font); font-size:20rem;}
.follow-link .username{overflow:clip}

@media screen and (max-width: 39.9375em)  {
    .follow-us{min-height:60vh}
    .follow-text span{font-family:var(--main-font); font-size:8rem;}

    .follow-text-container{margin-top:8vh}


}


/* CONTACTS */
.contacts{position:relative; overflow:clip}
.contacts .even-column{align-items: stretch}
.contacts .clip{clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 90%);background:var(--primary);  padding-blocK:12%}
.contacts .logo{ background-image:url(../img/UAOlogo-inverted.svg); background-position:left center;   }
.contacts *{--text-color:var(--secondary); color:var(--text-color)}
.contacts h2.contact-title{font-size: 3rem}
.contacts :where(h2,h3,p:not(:last-child)){margin-bottom:.9ch}
.contacts .contact-info{align-items: end}
.contacts ul{list-style: none; display: flex;flex-wrap: wrap; padding: 0; gap:1rem}
.contacts .online{display: grid; gap: 2rem}


.contacts  a.effegi{    display: inline-flex; gap:1rem;    justify-content: space-between;    align-items: center;}
.contacts a.effegi:after{content: ""; position: relative; width:2rem; aspect-ratio:1; background-position: center center; background-image: url(../img/ic-user.svg); background-repeat:  no-repeat; background-size: contain; display: inline-block; margin-right: .6rem; }
.contacts  a.effegi:hover:after{filter:hue-rotate(-264deg) saturate(3) brightness(2.2)}


.contacts  h2{font-size:3rem; margin-bottom:2rem}
.contacts  h3{font-size:1.4rem}
.contacts .contact-email{margin-bottom: 1ch}
.contacts .store-locator{display: grid; gap: 1rem}


@media screen and (max-width: 39.9375em)  {

    .contacts .clip{padding-block:22rem}
    .contacts .contact-info{width:100% !important}
    .contacts .cta{text-align:center}
    .contacts .cta h2{font-size:1.6rem}
    .contacts .cta h3{font-size:1.3rem}
    .contacts .cta-button{gap:2rem}
}
@media screen and (max-width: 60.9375em)  {
    .contacts .clip{padding-block:25rem}
}

@media screen and (min-width: 60.9375em)  {
    .contacts .store-locator{padding-left: 8%}
}

/* RECIPE */
.recipe-container{ position:fixed;  inset:0;    width: 100vw;  overflow-y:auto; overflow-x:clip; z-index:252; display:none}
.recipe{width:100%;  display:flex; justify-content:end}
.recipe-image{width:100vw; height:100vh; overflow:clip; position:fixed; top:0; display:none; clip-path: circle(0% at 50% 50%); z-index:251; transform-origin:center center}
.recipe-image img{width:100%; height:100%; object-fit:cover}
.recipe-title-container{width:50%; height:100vh; overflow:clip; position:sticky; top:0; }
.recipe-title{position:absolute; z-index:1; font-size:20rem; font-family:var(--main-font); text-transform:uppercase; overflow:clip; white-space:nowrap; display:flex; gap:6rem}



.recipe-content{width:50%; position:relative; background:var(--primary); min-height:100vh; padding-inline:max(3.5rem, 8vw); padding-block:4rem; counter-reset: step; z-index:2; display:block; }
.recipe-content *{color:var(--secondary)}

.recipe-content .each-step{position:relative; max-width: 600px}
.recipe-content .each-step:before{content:counter(step); counter-increment: step; font-size:3rem; font-family:var(--title-font); position:absolute; top:0; left:-3rem; line-height:2rem; translate:0 1rem}


.recipe-steps .each-step + .each-step{margin-top:2rem}

.recipe-steps .title{font-size: 6rem; font-family: var(--main-font); text-transform: uppercase;}
.recipe-steps .subtitle{font-size: 1.5rem; font-weight: 800; font-family: var(--title-font);}
.recipe-steps p{ font-size:1.2rem; line-height:1.6}
.recipe-steps .step-title{font-size:1.2rem; font-family:var(--title-font); margin-top:4rem; margin-bottom:2rem}
.recipe-steps .ingredients-list li, .recipe-steps .ingredients-list{ list-style:none; padding-inline:0; margin-inline:0}
.recipe-steps .ingredients-list li{margin-bottom:1rem}
.recipe-container .close-button{opacity:1; z-index:4; position:fixed; cursor:pointer}

.open-recipe{cursor:pointer}



@media screen and (max-width: 64.9375em)  {

    .recipe{flex-direction:column; position:relative; top:50vh; background:var(--secondary)}
    .recipe-title-container, .recipe-content{width:100%; position:relative; height:auto}
    .recipe-title{position:relative; font-size:7rem; gap:2rem; padding-block:2rem; line-height: 1}
    .recipe-image{height:50vh}
    .recipe-image img{object-position:bottom left}
    .recipe-container .close-button{    width: 4rem;        height: 4rem;        background: var(--primary);        display: flex;        align-items: center;        justify-content: center;        border-radius: 50%;        top: 1rem;        right: 1rem;}
    .recipe-content{min-height:auto}
    .recipe-content .each-step:before{ left:-2.3rem}

}

/* STORE LOCATOR*/
@media screen and (min-width:40em){
::-webkit-scrollbar {
    width: .8rem;
  
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    background:#AA0C4D;
   
}
 
::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  outline: none;
  border-radius:10px;
  border:2px solid #AA0C4D;

} 

::-webkit-scrollbar-thumb:hover{background-color:#BCBC39}
}

@media screen and (max-width: 63.9375em){
#main-nav{display:none}

}
@media screen and (min-width:40em) and (max-width: 63.9375em) {

    .store-locator-col-md-3 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
   

}


@media screen and  (min-width: 64em) {


    .store-locator-col-md-3 {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }

    .store-locator-col-md-9 {
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }



   .store_locator_text_actions{ font-size: .8rem;
    border: 1px solid var(--primary);
    border-radius: 1rem;
    padding: .7rem;
    display: inline-block; font-weight:600; margin-bottom:.5rem; margin-right:10px}
    
    .store_locator_result_list_item{border:0}
}


#store_locator hr{display:none}
.store-locator-clearfix:before, .store-locator-clearfix:after, .store-locator-container:before, .store-locator-container:after, .store-locator-container-fluid:before, .store-locator-container-fluid:after, .store-locator-row:before, .store-locator-row:after, .modal-header:before, .modal-header:after, .modal-footer:before, .modal-footer:after{display:none}
.wordpress-store-locator-block-search_title, .wordpress-store-locator-filter-container{display: none}
.modal-body{padding:0}
#store_locator_sidebar{ height: calc(100vh - 300px)}
.mf-cursor-media-box img{object-position:left center !important}

#store_locator_reset_filters{display:none}
#store_locator_dragged_button{display:none !important}
#store_locator_result_list{max-height:initial !important; gap:.8rem; margin:0}
#store_locator_sidebar_content{    display: grid;    overflow: clip;    height: inherit;}
#store_locator_result_list_box{overflow-y:scroll; padding-right:10px}
#store_locator_map{height:100% !important}

.store_locator_result_list_item, .store_locator_result_list_item:hover{background: none; padding-block:0; cursor:default}
.store_locator_result_list_item > div{background: white; border-radius: 1rem; padding-block: 1.5rem; border: 0}
.store_locator_details{display:grid; gap:6px}
.store_locator_details *{color:#333}

.store_locator_result_list_item:hover > div{border:0}

.store_locator_result_list_item .store_locator_name{margin: 0 !important; font-family:var(--body-font); color: var(--secondary);    font-size: 1rem;    line-height: 1.2;}
.store_locator_result_list_item .store_locator_address{ color: var(--secondary); margin-bottom:0 !important}
/*
.store_locator_result_list_item .store_locator_contact{ color: var(--secondary); margin-bottom:0 !important; display:grid; align-content:center}
.store_locator_result_list_item .store_locator_contact a{color: var(--secondary); font-weight: 500}*/
.store_locator_result_list_item .store_locator_contact{display:none}



#store_locator_result_list .store-locator-row{    display: grid;    grid-template-areas: "stack";    padding: .5rem;}
#store_locator_result_list .store_locator_image_container {grid-area: stack; padding:0;    margin: 0;  text-align:right}
#store_locator_result_list .store_locator_image_container img{  width: 50px;    height: 50px;  border-radius: 9px;  overflow: clip;        border: 4px solid white;    outline: 1px solid #dadada;    object-fit: contain;  }

#store_locator_result_list .store_locator_details{ padding:0;  grid-template-columns: auto 50px; }
#store_locator_result_list .store_locator_details > *{grid-column:1/-1}


#store_locator_result_list .store_locator_image_container + .store_locator_details{grid-area: stack;grid-template-rows: 50px auto;}
#store_locator_result_list  .store_locator_name{   align-items: center;    display: grid; padding:9px;     -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;    overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;}
#store_locator_result_list  .store_locator_image_container + .store_locator_details  .store_locator_name{grid-column: 1 / 2;  }

#store_locator_result_list .store_locator_address{/*grid-column:1/-1; padding-inline:9px*/ grid-column: 1 / 2;     padding-inline: 9px;}
#store_locator_result_list .store_locator_address >*{display: inline-block; margin-right:6px}
/*#store_locator_result_list .store_locator_contact{grid-column:1/2; padding-inline:9px}*/

#store_locator_result_list  .store_locator_actions{grid-column: 2 / -1;    font-size: 0;    text-align: right;}
#store_locator_result_list  .store_locator_actions > * {height:20px; width:20px; font-size:0; margin:0; margin-top:5px; position:relative}
#store_locator_result_list  .store_locator_actions .store_locator_show_on_map:before{content:""; position:absolute; inset:0; width:100%; height:100%; background:center center no-repeat url(../img/marker-mini.svg); background-size:15px}

 #store_locator_address_field{padding: .7rem 1rem;    border-radius: 10px;    border: 0;    box-shadow: none; margin-bottom:10px}
.wordpress-store-locator-address-title{display:none}
.wordpress-store-locator-address-container{margin-bottom:1rem}


.gm-style .gm-style-iw-c{padding-inline:15px !important; }
.gm-style-iw-d{overflow:initial !important}
.store_locator_infowindow {display:grid;grid-template-areas: "stack";    height: auto;
    max-height: initial;    min-height: auto;    overflow: visible;  font-size:.8rem}
.store_locator_infowindow .store_locator_details{grid-area:stack; grid-template-rows: 50px auto; grid-template-columns: auto 50px ; padding-inline:0 !important; margin-bottom:1rem;}
.store_locator_infowindow .store_locator_image{grid-area: stack; padding:0;    margin: 0; text-align:right;   pointer-events:none}
.store_locator_infowindow .store_locator_image img{ width: 50px;    height: 50px;  border-radius: 9px;  overflow: clip;        border: 4px solid white;    outline: 1px solid #dadada;    object-fit: contain;}

.store_locator_infowindow .store_locator_name{grid-column: 1 / 2;    padding: 0;   font-family:var(--body-font); color: var(--secondary);    font-size: 1rem;    line-height: 1.2;    margin: 0 !important; display:grid; align-items:center; padding-right:1rem}

.store_locator_infowindow  :where(.store_locator_address, .store_locator_contact){grid-column:1/-1}
.store_locator_infowindow .store_locator_actions{display:none}
.store_locator_infowindow .store_locator_address >*{display: inline-block; margin-right:6px}
.store_locator_infowindow a:focus-visible{outline:none !important}

@media screen and (max-width:64em){
    body.page-id-94  main{margin-bottom:0 !important}
    
      body.page-id-94 footer{display:none}     
.store_locator_search_box{position:absolute; z-index:4; border-radius:1rem; background:white; padding:.8rem; width:calc(100vw - 40px); left:10px; box-shadow: 0 0 5px rgba(0,0,0,.3)}
.wordpress-store-locator-address-container{margin-bottom:0}
#store_locator_address_field{border:1px solid #888; margin-bottom:10px}
.store_locator_search_box .store_locator_text_actions {color:black}

#store_locator_result_list_box{position: fixed;    bottom: 0;    z-index: 3;       height: calc(100vh - 230px);
    overflow-y: scroll; width:100vw; left:-1.8rem; max-width: initial;  padding: 0; translate:0 calc(100% - 8rem); height:8rem; overflow:clip; transition:all linear .2s; box-shadow: 0 0 5px rgba(0,0,0,.3)}
#store_locator_main{position: absolute;    top: -10px;    width: calc(100vw - 20px);    height: calc(100vh - 130px);
    padding: 0;    margin: 0;    max-width: initial;border-radius:1rem; overflow:clip}
#store_locator_sidebar {        height: calc(100vh - 130px);    }

.gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom{display:none}

#store_locator_result_list_box:before{
    display: block;
    content: "Visualizza la lista";
    height: 4rem;
    text-align: center;
    background: var(--secondary) 95% center no-repeat url(../img/ic-arrow.svg);
    background-size: 18px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 4rem;
    margin: 0;
    width: 100%;
    background-color: white;
    border-radius: 1rem 1rem 0 0;
    border-bottom: 1px solid #f2f2f2;
    color: black;} 

#store_locator_result_list_box.opened{translate: 0 0;  height: calc(100vh - 240px);}
#store_locator_result_list_box.opened:before{content:"Nascondi la lista"; background-image:url(../img/ic-arrow-down.svg)}

#store_locator_result_list{overflow-y:scroll; height:inherit; padding-top:1rem;  background: white;}

.store_locator_result_list_item{border-bottom:4px solid #f2f2f2; padding-inline:2rem; }

}

.page-template-default :is(.CookieDeclarationType){border: none; background: rgba(255, 255, 255, .2); padding:1rem}
.page-template-default :is(.CookieDeclarationTableHeader, .CookieDeclarationTableCell){border-bottom:1px solid white ; font-size:.8rem; padding-block:.5rem}
.page-template-default :is(.CookieDeclarationTable) {color:white }
.page-template-default :is(.CookieDeclarationTable)  tr:last-child .CookieDeclarationTableCell{border-bottom:none}



#product-2.overlap.layout-right .product-balloon{top:-10%; right:10%}
@media screen and (width<40em){
	#product-2.overlap.layout-right .product-balloon{top:-30%; right:10%}
}