:root{--mm-w-top:30px;--mm-w-logo-top:50px;--mo-bg:rgba(95,115,97,.8);--mo-default-w:50vw;--mo-default-h:50vh;--mo-transition:transform .5s ease, opacity .25s ease} /* mm base */ .mm{position:fixed;z-index:5} /* wrap main */ .mm-w-main{opacity:0;top:30px;right:30px;display: inline-flex; align-items: center;transition:top .5s ease,left .5s ease,right .5s ease;z-index:6} /* responsive for mm-w-main */ @media all and (max-width:812px){ :root{--mm-w-top:46px;--mm-w-logo-top:20px;} .mm-w-main{top:30px;right:30px;} } /* main button */ .mm-w-main a{position:relative;display:inline-block;overflow:hidden;z-index:2;width:105px;height:45px;padding:0;cursor:pointer;border:0;background-color:rgba(154,173,136,.8); border-radius: 30px; -webkit-transition:all .4s linear;-moz-transition:all .4s linear;transition:all .4s linear} .mm-w-main a:focus{outline:none} .mm-w-main a span.mmwm-icona {position: absolute; top:50%; right: 10px; transform: translateY(-53%); width: 35px; height: 35px;transition: 500ms ease-in-out} .mm-w-main a span.mmwm-icona img { width: 100%; height: 100%; object-fit: contain; object-position: center;} /* icon lines */ /*.mm-w-main a span.mmwm-icona,.mm-w-main a span.mmwm-icona:before,.mm-w-main a span.mmwm-icona:after{content:'';position:absolute;top:50%;left:110px;cursor:pointer;height:1px;width:30px;background:#fff;display:block;transition:all 500ms ease-in-out} .mm-w-main a span.mmwm-icona:before{left:0;transform:translateX(0%);background:#fff;width:100%;top:-8px} .mm-w-main a span.mmwm-icona:after{left:20%;transform:translateX(0%);background:#fff;width:80%;top:8px}*/ /* label */ .mm-w-main a span.mmwm-testo{position:absolute;top:50%;transform:translateY(-55%);left:10px;color:#fff;font-size:16px;font-weight:300; letter-spacing: -1px; line-height: normal;overflow: hidden;-webkit-font-smoothing:antialiased; transition:left 500ms ease-in-out} /* hover */ .mm-w-main a:hover span.mmwm-icona:after{left:0;width:100%} /* clicked */ /*.mm-w-main a.clicked span.mmwm-icona:before{transform:rotate(45deg);left:3px;width:70%;top:inherit!important} .mm-w-main a.clicked span.mmwm-icona:after{transform:rotate(-45deg);left:3px;width:70%;top:inherit!important} .mm-w-main a.clicked span.mmwm-icona{background:inherit} .mm-w-main a.clicked span.mmwm-icona:before{background:#fff} .mm-w-main a.clicked span.mmwm-icona:after{background:#fff}*/ /* larger-screen hover adjustments */ @media all and (min-width:820px){ /*.mm-w-main a.clicked:hover span.mmwm-icona:before{transform:rotate(0deg);left:3px;width:70%} .mm-w-main a.clicked:hover span.mmwm-icona:after{transform:rotate(0deg);left:3px;width:70%}*/ } /* state helpers */ .mm-w-main.overlaymenu-open{} body.scroll-page .mm-w-main{right:30px;top:30px;transition:all .4s linear} .mm-w-main.mainmenu-opened{right:30px;top:30px;transition:all .4s linear} body.nocoverpage .mm-w-main {} body.nocoverpage .mm-w-main a:hover{} body.scroll-page .mm-w-main a{ width: 45px;} body.scroll-page .mm-w-main a span.mmwm-icona {right: 5px;transition: 500ms ease} body.scroll-page .mm-w-main a span.mmwm-testo {left: -70px; transition:left 500ms ease} body.nocoverpage .mm-w-main a{} /* responsive small adjustments */ @media all and (max-width:812px){ body.scroll-page .mm-w-main{top:20px!important;right:20px} body.nocoverpage .mm-w-main{top:20px!important;right:20px} body.scroll-page.nocoverpage .mm-w-main{top:var(--mm-w-top)!important} .mm-w-main.mainmenu-opened{right:20px!important;top:20px!important} .mm-w-main a{ } } /* audio*/ .mm-w-audio {bottom: 30px; right: 30px; transition: top .5s ease , left .5s ease; z-index: 999; } .mm-w-audio button {display: flex; align-items:center; justify-content: center; background-color:rgba(154,173,136,.8); border-color:transparent; width: 40px; height: 40px; border-radius: 20px; transition: background-color .8s; } .mm-w-audio button.play{ background-color:rgba(93,111,76,1.00); transition: background-color .4s; } .mm-w-audio button .on_off { color:rgba(255,255,255,1);} .mm-w-audio button .on_off:nth-child(2) { display: none;} .mm-w-audio:hover button{ background-color:rgba(93,111,76,1.00); transition: background-color .4s; } .mm-w-audio:hover button .wave-bar{ opacity: .95;} .mmw-audio-btn .wave-bars { position: relative;height: 13px;width: 15px;} .mmw-audio-btn .wave-bar { position: absolute;background: #fff; bottom: 3px; height: 3px; width: 2px; border-radius: 1px; } .mmw-audio-btn.play .wave-bar {animation: wave-sound 0ms -800ms linear infinite alternate;} @keyframes wave-sound { 0% { opacity: .35; bottom: 0px; height: 3%; } 100% { opacity: 1; bottom: 1px; height: 80%; } } .mmw-audio-btn .wave-bar:nth-child(1) { left: 1px; opacity: .35; height: 6px; animation-duration: 574ms; } .mmw-audio-btn .wave-bar:nth-child(2) { left: 5px; opacity: .35; height: 9px; animation-duration: 533ms; } .mmw-audio-btn .wave-bar:nth-child(3) { left: 9px; opacity: .35; height: 4px; animation-duration: 507ms; } @media all and (max-width:812px){ .mm-w-audio button{ background-color:rgba(93,111,76,1.00); transition: background-color .4s; } } /* whatsapp*/ .mm-w-whatsapp {bottom: 30px; left: 30px; transition: top .5s ease , left .5s ease; z-index: 999; } .mm-w-whatsapp a {display: flex; align-items:center; justify-content: center; background-color:rgba(154,173,136,.8); color: #fff; border-color:transparent; width: 40px; height: 40px; border-radius: 20px; transition: background-color .8s; } .mm-w-whatsapp:hover a{ background-color:rgba(93,111,76,1.00); transition: background-color .4s; } @media all and (max-width:812px){ .mm-w-whatsapp a{ background-color:rgba(93,111,76,1.00); transition: background-color .4s; } } /* wrap logo */ .mm-w-logo{display:flex;align-items:center;opacity:0;top:50%;left:50%; transform: translate(-50%,-50%);overflow:hidden;width:211px;height:210px;z-index:2;transform-origin:top left;transition:opacity .5s ease,top .5s ease,left .5s ease,width .4s .0s linear,height .4s .0s linear,transform .5s .2s linear} .mm-w-logo.logo-extendend{height:165px;transition:all 1s} .mm-w-logo.logo-short{height:75px;transition:all 1s} .mm-w-logo .mmwlogo-wrapper{position:relative;width:100%;height:100%;display:inline-block;overflow:hidden;transition:all .3s} .mm-w-logo .mmwlogo{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transition:all .5s ease} .mm-w-logo.logoscrolled{} body.scroll-page .mm-w-logo{ top:5%;height: 95px;transition:opacity .5s ease,width .4s .2s linear,height .4s .2s linear,top .4s .2s linear,left .4s .2s linear} body.scroll-page .mm-w-logo .mmwlogo{top:0;left:0;width:211px;height:110px;transform:inherit} body.nocoverpage .mm-w-logo{top:80px;width:280px;height:40px;transform:translateX(-50%);transition:opacity .5s ease,top .5s ease,width .4s .2s linear,height .4s .2s linear,transform .5s .2s linear,background-color .8s .6s ease} body.nocoverpage .mm-w-logo .mmwlogo{top:5px} @media all and (max-width:812px){ .mm-w-logo{left:80px;/*width:150px;*/height:80px} .mm-w-logo .mmwlogo{width:150px;height:80px} body.scroll-page .mm-w-logo{left:15px;top:10px;height:70px;width:40px} } /* CHIUSURA button group */ .menu-overlay-btn-close{position:absolute;z-index:5;left:70px;top:100px;width:50px;height:50px;cursor:pointer;border-color:transparent;background-color:transparent;transform:rotate(90deg);-webkit-transition:all .4s linear;-moz-transition:all .4s linear;transition:all .4s linear} .menu-overlay-btn-close:focus{outline:none} .overlay-scale.open .menu-overlay-btn-close{transform:rotate(180deg)} .menu-overlay-btn-close span,.menu-overlay-btn-close span:before,.menu-overlay-btn-close span:after{position:absolute;left:0;cursor:pointer;height:1px;width:50px;background:none;display:block;content:'';transition:all 500ms ease-in-out} .menu-overlay-btn-close span:before,.menu-overlay-btn-close span:after{background:#ffffff} .menu-overlay-btn-close span:before{top:-8px;left:0;transform:translateY(0.5em) translateX(-0) rotate(45deg) scaleX(1)} .menu-overlay-btn-close span:after{bottom:-8px;transform:translateY(-0.5em) translateX(0) rotate(-45deg) scaleX(1)} @media all and (max-width:812px){ .menu-overlay-btn-close{left:28px;top:22px} .menu-overlay-btn-close span,.menu-overlay-btn-close span:before,.menu-overlay-btn-close span:after{width:40px} } /* overlay base & scrollbars group */ .menu-overlay::-webkit-scrollbar-track{background-color:transparent;border-radius:0px} .menu-overlay::-webkit-scrollbar{width:5px;height:5px;background-color:transparent} .menu-overlay::-webkit-scrollbar-thumb{border-radius:0px;background-color:#333;opacity:.65} .menu-overlay{position:fixed;width:var(--mo-default-w);height:var(--mo-default-h);top:50%;left:50% !important;transform:translate(-50%,-50%) scale(0);background:var(--mo-bg);overflow:scroll;justify-content:center;z-index:3;border-radius:50%;visibility:hidden;opacity:0;transition:var(--mo-transition);pointer-events:none} .menu-overlay.open{transform:translate(-50%,-50%) scale(1);visibility:visible;opacity:1;pointer-events:auto} /* wrapper & scrollbar overrides */ .menu-overlay .mo-wrapper{overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;position:relative;height:80%;transition:all .6s ease} .menu-overlay .mo-wrapper::-webkit-scrollbar-track{background-color:transparent;border-radius:0px} .menu-overlay .mo-wrapper::-webkit-scrollbar{width:5px;height:5px;background-color:transparent} .menu-overlay .mo-wrapper::-webkit-scrollbar-thumb{border-radius:0px;background-color:#B42121;opacity:.35} .menu-overlay .mo-logo{position:fixed;top:24px;left:33px;z-index:2;background:rgba(209,10,17,.98);width:158px;height:82px} /* menu items & mainmenu group */ .menu-overlay .mainmenu{margin:0;width:100%;height:100%} .menu-overlay .mainmenu .sm-superclean-overlay{box-shadow:none;margin:0 0 0 30px} .menu-overlay .mainmenu .sm-superclean-overlay a{position:relative;display:inline-block;width:100%;border-left:none;border-bottom:1px solid transparent;padding:0 4px;color:#fff;font-weight: 100; font-size:clamp(.3rem,1.575rem + 0.8333vw,11.5rem)!important;transition:all .9s ease} .menu-overlay .mainmenu .sm-superclean-overlay li.ni-first{margin-bottom:20px} .menu-overlay .mainmenu .sm-superclean-overlay li.ni-first a{font-size:clamp(1.0rem,1.0vw,1.1rem)!important;color:#FFCB00} .menu-overlay .mainmenu .sm-superclean-overlay a>i.fa{display:none!important} .menu-overlay .mainmenu .sm-superclean-overlay a.active,.menu-overlay .mainmenu .sm-superclean-overlay a.current{color:#FFCB00} .menu-overlay .mainmenu .sm-superclean-overlay a:hover{color:#FFCB00;transition:all .5s ease} .menu-overlay .mainmenu .sm-superclean-overlay li{border-top:none;margin-bottom:clamp(.3rem,0.5750rem + 0.5333vw,1.5rem);transition:all .6s ease} /* submenu */ .menu-overlay .mainmenu .sm-superclean-overlay>li.current ul{display:block} .menu-overlay .mainmenu .sm-superclean-overlay li ul{margin-bottom:20px;padding-top:20px;padding-bottom:10px;padding-left:10px} .menu-overlay .mainmenu .sm-superclean-overlay li ul li{margin-bottom:1px} .menu-overlay .mainmenu .sm-superclean-overlay li ul li a{padding:4px 4px;font-size:clamp(1rem,0.1150rem + 0.8vw,1.5rem)!important;line-height:normal} /* menu transform hooks */ .menu-overlay .mainmenu .sm-superclean-overlay>li.menu-transform{clip-path:inset(100% 0% 100% 0%);transition:all .5s ease} .menu-overlay .mainmenu .sm-superclean-overlay>li.menu-transform-active{clip-path:inset(0% 0% 0% 0%);transition:clip-path 1.9s .2s ease} .menu-overlay .mainmenu .sm-superclean-overlay>li>a>i.fa{display:inline-block!important} .menu-overlay .mainmenu .sm-superclean-overlay>li>a span.sub-arrow{z-index:1;opacity:1;width:40px;top:40%;transform:translateY(-50%);right:15px;font-family:'Montserrat'!important;font-size:40px!important;font-weight:100!important;color:#fff;transition:all .6s} .menu-overlay .mainmenu .sm-superclean-overlay a span.sub-arrow:before{margin-top:-3px;font-size:43px} .menu-overlay .mainmenu .sm-superclean-overlay>li>a.highlighted span.sub-arrow:before{margin-top:-3px;font-size:43px} /* social */ .menu-overlay .mo-social{position:fixed;bottom:30px;left:74px;background-color:rgba(209,10,17,1);color:#fff;z-index:3} .menu-overlay .mo-social a{color:#fff;font-size:16px;font-weight:300;line-height:30px;padding:5px} .menu-overlay .mo-social a:hover{color:#FFCB00;opacity:.7} @media screen and (max-width:736px){ .menu-overlay .mo-social a{font-size:26px;line-height:50px;padding:5px} } /* effects: overlay-scale */ .menu-overlay.overlay-scale{visibility:hidden;left:-100%;clip-path:inset(100%);transition:visibility 0s 1.6s,left 0s 1.8s,clip-path 1.4s ease-in} .menu-overlay.overlay-scale.open{visibility:visible!important;opacity:1!important;clip-path:inset(0%);left:0%;transition:visibility 0s 0s,left 0s 0s,clip-path 1.5s ease-out} .menu-overlay.overlay-scale .mo-wrapper{position:relative;width:100%;height:100%;padding:210px 5% 100px 5%} @media all and (max-width:812px){ .menu-overlay.overlay-scale .mo-wrapper{padding:230px 5% 100px 5%} } /* effects: top/bottom/left/right */ .menu-overlay.top{visibility:hidden;top:-100%;clip-path:inset(0% 0% 100% 0%);transition:visibility 0s .6s,top 0s .8s,clip-path .4s ease-in;min-height:200px;height:auto;overflow:inherit} .menu-overlay.top.open{visibility:visible!important;opacity:1!important;clip-path:inset(0% 0% 0% 0%);top:0%;transition:visibility 0s 0s,top 0s 0s,clip-path 0.5s ease-out} .menu-overlay.top .mo-wrapper{position:relative;width:100%;height:100%;padding:0%} @media all and (max-width:812px){ .menu-overlay.top .mo-wrapper{padding:230px 5% 100px 5%} } .menu-overlay.top .mainmenu .logo,.menu-overlay.bottom .mainmenu .logo,.menu-overlay.left .mainmenu .logo,.menu-overlay.right .mainmenu .logo{display:none} .menu-overlay a:hover{opacity:.8} .menu-overlay.top .mainmenu{top:30px;width:80%;transform:none} .menu-overlay.top .menu-overlay-btn-close{transform:rotate(-90deg)} .menu-overlay.bottom{top:inherit;bottom:0!important;height:300px} .menu-overlay.bottom .mainmenu{top:30px;width:80%;transform:none} .menu-overlay.bottom .menu-overlay-btn-close{transform:rotate(90deg)} .menu-overlay.left{width:300px} .menu-overlay.left .mainmenu{top:50px;width:80%;transform:none} .menu-overlay.right{width:30vw;left:inherit;right:0} .menu-overlay.right .mo-wrapper{position:relative;z-index:1} .menu-overlay.right .mainmenu{transform:none} .menu-overlay.right.overlay-slidelateral{visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform 0.5s,visibility 0s 0.5s;transition:transform 0.5s,visibility 0s 0.5s} .menu-overlay.right.overlay-slidelateral.open{visibility:visible;-webkit-transform:translateX(0%)!important;transform:translateX(0%)!important;-webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s} /* center (circular) group - open/closing timing */ .menu-overlay.center{width:80vmin;max-width:95vw;height:80vmin;max-height:95vh;left:50%;top:50%;right:auto;bottom:auto;border-radius:50%;background:rgba(95,115,97,.95);display:flex;align-items:center;justify-content:center;overflow:visible;pointer-events:none;-webkit-clip-path:circle(0% at 50% 50%);clip-path:circle(0% at 50% 50%);opacity:0;visibility:visible;z-index:999} .menu-overlay.center.open{-webkit-clip-path:circle(50% at 50% 50%) !important;clip-path:circle(50% at 50% 50%) !important;opacity:1 !important;pointer-events:auto !important;visibility:visible !important;transition:-webkit-clip-path .9s cubic-bezier(.2,.8,.2,1),clip-path .9s cubic-bezier(.2,.8,.2,1),opacity .35s linear} .menu-overlay.center.closing{-webkit-clip-path:circle(0% at 50% 50%) !important;clip-path:circle(0% at 50% 50%) !important;transition:-webkit-clip-path .7s cubic-bezier(.2,.8,.2,1),clip-path .7s cubic-bezier(.2,.8,.2,1),opacity .35s linear .6s;opacity:0 !important;visibility:visible !important;pointer-events:none !important} .menu-overlay.center .mo-wrapper{width:100%;height:100%;padding:0;box-sizing:border-box;overflow:visible;position:relative} .menu-overlay.center .mainmenu{width:100%;height:100%;display:flex;/*flex-direction:column;*/align-items:center;justify-content:flex-start;text-align:center;padding:5%;box-sizing:border-box;overflow:auto;-webkit-overflow-scrolling:touch} .menu-overlay.center .mainmenu .sm-superclean-overlay{display:flex;flex-direction:column;align-items:center;width:100%;/*gap:1.2rem;*/margin:0;padding:0} /* center overrides to prevent other overlay-effect classes from hiding/moving the circle */ .menu-overlay.center.overlay-scale,.menu-overlay.center.overlay-slidelateral,.menu-overlay.center.overlay-slidedown,.menu-overlay.center.overlay-slideup{left:50% !important;top:50% !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%) !important;-webkit-transform:translate(-50%,-50%) !important;visibility:visible !important} /* make open/closes clip-path rules take precedence */ .menu-overlay.center.open{-webkit-clip-path:circle(50% at 50% 50%) !important;clip-path:circle(50% at 50% 50%) !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important} .menu-overlay.center.closing{-webkit-clip-path:circle(0% at 50% 50%) !important;clip-path:circle(0% at 50% 50%) !important;opacity:0 !important;visibility:visible !important;pointer-events:none !important} /* responsive adjustments */ @media all and (min-width:670px) and (max-width:912px) and (max-height:45.5em){ .menu-overlay .mo-wrapper{height:70%;margin-top:25%;transition:all .6s ease} } @media (max-width:736px){ .menu-overlay{display:inline-block} .menu-overlay .mainmenu .sm-superclean-overlay a{font-size:clamp(.3rem,1.1750rem + 1.2333vw,1.3rem)!important; font-weight: 300!important; -webkit-font-smoothing: subpixel-antialiased;} .menu-overlay .mainmenu .sm-superclean-overlay>li>a span.sub-arrow{text-align:center;width:40px;border:0} .menu-overlay.center { width: 141vmin; max-width: 195vw; height: 150vmin; max-height: 115vh;} } @media screen and (min-height:40.5em) and (max-height:45.5em){ .menu-overlay .mo-wrapper{height:70%;transition:all .6s ease} .menu-overlay .mainmenu .sm-superclean-overlay li{margin-bottom:clamp(.3rem,0.2750rem + 0.2333vw,1.5rem);transition:all .6s ease} } @media (max-width:480px){ .menu-overlay .mainmenu .sm-superclean-overlay li{margin-bottom:clamp(.3rem,0.2750rem + 2.2333vw,1.5rem);transition:all .6s ease} } /* Nasconde visivamente il player