* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*general*/
html {/* font-size: 62.5%*/ font-size: 10px; outline: none; }
body { font-family: "Nunito", sans-serif; color: #FFF; font-weight: 400; background-color: #111722; }
.body { background-color: #111722; max-width: 300rem; margin: 0 auto; overflow: hidden; }
ul, li, h1, h2, h3, h4, h5, p { list-style: none; }
a { font-size: 1.6rem; text-decoration: none; color: #fff; outline: none }
a:focus, input:focus, textarea:focus, select:focus, label:focus {outline: none!important }
p, ul, li { line-height: 1.8; font-size: 1.6rem; }
.container { max-width: 140rem; margin: 0 auto; padding: 0 2%!important; width: 100%; }
.containerbig { max-width: 200rem; margin: 0 auto; padding: 0 2%!important; width: 100%; }
button { color: #fff; font-size: 1.6rem; cursor: pointer; background-color: transparent; border: none; font-family: "Nunito", sans-serif;}
input, textarea, select { font-size: 1.8rem; ; font-weight: 600; font-family: "Nunito", sans-serif;}

.font { font-family: "Ubuntu", sans-serif; }

.center { text-align: center; }
.clear { clear: both; }
.float { float:left; }
.floatr { float:right; }
.flex { display: flex; flex-wrap: wrap; }
.clearfix::after { content:""; display: table; clear: both; }
.upper { text-transform: uppercase; }
.pr { position:relative; }
.oh { overflow:hidden; }

.ls { letter-spacing:1.5px }

/*colors*/
.fff {color: #fff}
.bgfff { background-color:#fff }
.borange { border:2px solid #D99641; }
.bblu { border:2px solid #40CADA; }
.lblu { color:#94E5EE }
.bglblu { background-color:#40CADA }
.gray { color:#D0D2D3 }
.bgf9 { background-color:#F9FAFC }
.orange { color: #D99640 }
.blu { color:#313E4B }
.bgblu { background-color:#313E4B }
.bgdark { background-color:#111722 }

/*fontsize*/
.w800 { font-weight:800 }
.w700 { font-weight:700 }
.w600 { font-weight:600 }
.w500 { font-weight:500 }
.w400 { font-weight:400 }
.w300 { font-weight:300 }
.w200 { font-weight:200 }

.t45 { font-size:4.5rem; line-height:1.2 }
.t55 { font-size:5.5rem; line-height:1.2 }
.t50 { font-size:5rem; line-height:1.2 }
.t40 { font-size:4rem; line-height:1.2 }
.t30 { font-size:3rem; line-height:1.3 }
.t35 { font-size:3.5rem; line-height:1.2 }
.t25 { font-size: 2.5rem; line-height:1.5 }
.t20 { font-size: 2rem }
.t18 { font-size: 1.8rem!important }
.t16 { font-size: 1.6rem }
.t14 { font-size: 1.4rem }

.mt1 { margin-top:1rem }
.mt2 { margin-top:2rem }
.mt3 { margin-top:3rem }
.mt4 { margin-top:4rem }
.mt5 { margin-top:5rem }
.mt6 { margin-top:6rem }
.mt8 { margin-top:8rem }
.mt9 { margin-top:9rem }
.mt10 { margin-top:10rem }
.mb1 { margin-bottom:1rem }
.mb2 { margin-bottom:2rem }
.mb3 { margin-bottom:3rem }
.mb4 { margin-bottom:4rem }
.mb5 { margin-bottom:5rem }
.mb6 { margin-bottom:6rem }
.mb8 { margin-bottom:8rem }
.mb10 { margin-bottom:10rem }

.mw100 { max-width:100rem; margin:0 auto; }

.pad { padding:8rem 0 }
.pad2 { padding:10rem 0 }
.padbig { padding:14rem 0 }

.opt { object-position:top center; }
.opb { object-position:bottom center; }
.ojf { object-fit:cover; object-position:center; height:100%; width:100% }
.multi { mix-blend-mode: multiply; }
.overlay { mix-blend-mode: overlay; }

.br { border-radius: 1rem }

.cta { line-height: 1.4; transition: .3s; font-size: 1.6rem; font-weight: 700; border-radius: 5rem; padding: 1rem 3rem; position: relative; display:inline-block; }
.cta.borange:hover { background-color: #D99641; color:#fff!important }
.cta.bblu:hover { background-color: #40CADA; }

/*padding/margin*/
.wt100 { width:100% }
.ojf { width:100%; height:100%; object-fit:cover; }
.opt { object-position:center top!important; }
.opc { object-position:0!important }

/*TOP BUTTON*/
.div-back-to-top { cursor: pointer; transition: .3s; max-width: 400rem; width: 100%; left: 0; right: 0; bottom: 0; margin: 0 auto; position: fixed; z-index: 10000; }
.back-to-top { transition: .3s; position: absolute; z-index: 2; bottom: 2rem; right: 2rem; }
.back-to-top img { transition: .3s; width: 5.2rem; background-color:#D99641; padding:2rem 1.5rem; border-radius:.5rem }
.back-to-top:hover {cursor: pointer; }

header { z-index: 10; z-index:10; width: 100%; position: absolute; max-width: 300rem; padding: 4rem 0}
header .logo { transition: .3s; width: 18rem; }
header .logo img { width:100% }
header .menu { align-items: center; justify-content:space-between; }
header .menu2 { align-items: center; transition: .3s;  }
header .menu li a { color: #D0D2D3; font-weight: 700; transition: .3s; position: relative; font-size:1.6rem; text-transform:uppercase; }
header .menu2 li { margin:1rem 1.5rem }
header .menu li a.active { color: #94E5EE; font-weight: 700;  }
header .menu li a:hover { color: #94E5EE }
header .allmenu { align-items: center; display: flex; justify-content: flex-end; width: calc(100% - 22rem);}
header .menu2 li:last-child { margin-right:0 }
header .ass img { width:16.2rem }
.sticky { padding: 1rem 0; box-shadow: 0 0 20px rgba(0, 0, 0, .2); background-color: rgba(17, 23, 34, .9); position: fixed; transition: 1s; width: 100%; top: 0; max-width: 300rem; }
.hidden-sticky { }
.sticky .logo { transition: .3s; width:14rem }
.trans { transition:.6s }

header .menu li .dropdown-content a.active { font-weight: 700; color:#C3CC00 }
header .menu li .dropdown-content a.active:before { display:none; }

header .call { display:none; }

.menuresponsive, .sidenav { display: none; }

.dropbtn { transition: all 0.3s ease 0s; padding-bottom:5rem }
.dropdown {display: inline-block; position: relative; }
.dropdown .down { width: 1rem; vertical-align: middle; margin:-.2rem 0 0 .5rem }
.dropdown .icon { width: 4rem; height: 3rem; object-fit: contain; object-position: center; vertical-align: middle; margin:-.1rem 1rem 0 0 }
.dropdown button { position: relative; z-index: 2; }
.dropdown-content { position: absolute; background-color: #313E4B; width: 30rem; border-radius: 1rem; z-index: 2; left: -2rem; margin: 1rem auto 0; height: 0; overflow: hidden; transition: all 0.3s ease-in-out; opacity: 0; }
.dropdown-content .cl { margin: 0 2rem; }
.dropdown-content .cl .promo { display: flex; align-items: center; }
.dropdown-content .cl .promo img { width: 2rem; margin-right: 0.5rem }
.dropdown-content a { border-bottom: 1px solid #121822; padding: 2rem 0; text-transform: none!important; font-size: 1.6rem; display: flex; font-weight: 600; transition: all 0.3s ease 0s; text-decoration: none; }
.dropdown-content a:hover { padding-left: 1rem; color: #E1001E; opacity: 1!important}
.dropdown-content a:last-child { border:0 }
.dropdown:hover .dropdown-content { height: auto; margin-left: 0; opacity: 1}
.dropdown .dropbtn.active {  }
header .dropdown .active::after { content:none!important; }

.main { position: relative; overflow: hidden; height:100vh; min-height:80rem; width: 100%; display:flex; align-items:center; justify-content:center; }
.main .container { z-index: 1; position: relative; display:flex; align-items:center; justify-content:space-between; }
.main .txt { width: 58rem }
.main .img { border-radius: 1rem; box-shadow: 0 3px 20px rgba(0, 0, 0, .4); position: absolute; right: -17rem; width: 82rem}

ul.list { display:flex; flex-direction:column; gap:.6rem }
ul.list li { padding-left: 2.2rem; position: relative; }
ul.list li:before { content:''; left: 0; top: 7px; background-image: url(../img/list-blu.svg); background-size: cover; width: 1.4rem; height: 1.4rem; position:absolute;  }

.typewriter-title { opacity: 1 !important; transform: none !important;}

.bg1 { opacity: .15; position:absolute; top:0; left:-13rem; width:44rem }
.bg2 { opacity: .15; transform: rotate(180deg); position:absolute; bottom:-4rem; right:0rem; width:63rem }

.funzionalita .box { transition: .3s; margin: 2.5% 0 0; padding: 4rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, .38); border-radius:1rem; width:31.33% }
.funzionalita .box img { width:11rem; height:9rem; object-fit:contain; object-position:center; }
.funzionalita { justify-content: center; gap: 2.5% }
.funzionalita .box:hover .cta.bblu { background-color: #40CADA; }
.funzionalita .box:hover { background-color:#111722 }

.banner .flex { align-items:flex-start; justify-content:space-between; }
.banner img { width: 17rem; transform:rotate(-15deg); }
.banner .txt { width:calc(100% - 22rem); }

.banner-img .txt { width: calc(100% - 73rem); }
.banner-img img { border-radius: 1rem;
  box-shadow: 0 3px 20px rgba(0, 0, 0, .4);
  position: absolute; left: 50%;
  width: 82rem; height:61rem }

.piano { padding:18rem 0 8rem }
.piano .price { gap:2% }
.piano .price .box { position: relative; width: 23.5%; padding: 3rem; color: #111722; margin-top: 4rem; border-radius: 1rem; box-shadow: 0 3px 20px rgba(0, 0, 0, .07); }
.piano .price .box .cta { background-color: #94E5EE; width: 100%; padding: 1.8rem; text-align: center; color:#313E4B; font-weight:800 }
.piano .price .box .cta:hover { background-color:#40CADA; color:#fff }
.piano .price .box ul.list li { color:#707070; font-weight:600 }
.piano .price .box ul.list li:before { background-image: url(../img/check.svg); width:1.6rem; height:1.6rem }
.piano .price .box .euro span:first-child { vertical-align:top; display:inline-block; margin-top:2px }
.piano .price .box .best { position:absolute; padding: .5rem; top:-4rem; left:0; width:100%; border-radius:1rem 1rem 0 0 }

.prefooter .txt { max-width:87rem; margin:0 auto; }
.prefooter .bg1 { width:45rem; left:-5%; top:5% }
.prefooter .bg2 { width:45rem; right:-2%; bottom:inherit; top:5% }

/*.footer11*/
.footer1 { background-color: #080A17; padding: 10rem 0 }
.footer1 .foflex { justify-content:space-between; align-items:flex-start; }
.footer1 .foflex .cl50 { width:50% }
.footer1 .foflex .cl50.flex { border-left:1px solid #fff; padding-left:3rem }
.footer1 .foflex .cl50 .cl { margin-right:10rem }
.footer1 p, .footer1 a { font-size:1.4rem; line-height:2.2; color:#fff }
.footer1 b { font-weight:600 }
.footer1 a:hover { color:#94E5EE }
.footer1 .credits { border-top: 1px solid #313E4B; padding-top: 4rem; margin-top: 4rem; opacity:0.5; padding-bottom: 4rem; line-height:1.4 }
.footer1 .cta:hover { background-color:rgba(255, 255, 255, .1); }

.fancybox__backdrop { background: rgba(17, 23, 34, .8)!important; }
.fancybox__content { width: 95%; box-shadow: 0 0 20px rgba(0, 0, 0, .4); max-height: 90vh;overflow-y: auto;-webkit-overflow-scrolling: touch; flex-direction: row!important; padding: 0!important; display: flex; border-radius:1rem!important; background:#111722!important; color:#fff!important }
.fancybox__content img { width:30% }
.fancybox__content .txt { width:70%; padding:4rem; box-shadow: 0 0 20px rgba(0, 0, 0, .4); }
.fancybox__content > .f-button.is-close-btn { right:5px!important; top:5px!important }


.select-wrapper {
      position: relative;
      display: inline-block; width: 100%; margin: -.5rem 0 1rem;
    }
.custom-select { color: #111722; background-color: #fff;
      border: 1px solid #111722;
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 25px;
      appearance: none; /* Rimuove lo stile predefinito */
      width: 100%; /* Imposta la larghezza desiderata */
    }
.custom-select option {
      color: #000; /* Testo nero per le opzioni */
      background-color: #fff; /* Sfondo bianco per le opzioni */
      font-size: 16px;
    }
    /* Freccia personalizzata con immagine */
.select-wrapper::after {
      content: '';
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 13px; /* Larghezza dell'icona */
      height: 8px; /* Altezza dell'icona */
      background-image: url('../img/select.svg'); /* Sostituisci con il link dell'immagine */
      background-size: contain;
      background-repeat: no-repeat;
      pointer-events: none;
    }

/*pages*/
.page header { background-color:#111722; box-shadow: 0 3px 20px rgba(0, 0, 0, .16); }
.page .main { min-height: 100vh; height: auto; padding: 15rem 0 5rem; background: #111722; background: linear-gradient(0deg, rgba(17, 23, 34, 1) 0%, rgba(49, 62, 75, 1) 100%); }
.page .main .txt { width:100%; max-width:74rem; margin:0 auto; }
.page .main .bg1 { bottom:10rem; top:inherit; }
.page .main .bg2 { bottom:inherit; top:16rem }

.desc { padding-bottom: 12rem; position: relative; z-index: 1; text-align: center; background-color:#111722 }
.desc .box { margin-top: 9rem; position: relative; background-color:#080A17; border:1px solid #313E4B; border-radius:1rem } 
.desc .screen { margin-top: -10rem; max-width:82rem; width: 100%; border-radius: 1rem; box-shadow: 0 3px 20px rgba(0, 0, 0, .4); }
.desc .box .txt { padding: 7rem 5rem 5rem; justify-content:space-between; text-align:left; }
.desc .box .txt .t40, .desc .box .txt p { width:49% }
.desc .box img { width: 8rem; position:absolute; top:-4.5rem; left:0; right:0; margin:0 auto; }

.page .piano { background: #111722; background: linear-gradient(0deg, rgba(17, 23, 34, 1) 0%, rgba(49, 62, 75, 1) 100%); padding-top:21rem }
.page .piano .bg2 { bottom:10rem; right:-20rem }
.piano .price .box:nth-child(3) { border-radius:0 0 1rem 1rem }

.sitemap li a { text-transform:uppercase; color:#132142 }

.error p { font-size:20rem; line-height: 1; text-shadow: 0 3px 10px rgba(0, 0, 0, .2); }

/*form1*/
.form1 input, .form1 textarea { margin-top: .5rem; border: 1px solid rgba(255, 255, 255, .2); font-size: 1.6rem; margin-bottom: 1rem; width:100%; background-color:rgba(255, 255, 255, .2); border-radius:.2rem; padding:.8rem; color:#fff }
.form1::placeholder { color:#fff; }
.form1 .cl50 { width:49% }
.form1 .inputs { flex-direction:column;  }
.form1 .cta { background-color:#94E5EE; font-weight:800 }
.form1 .cta:hover { background-color: #40CADA; color: #fff; }

/*-------------------------style check & radio box-------------------------*/
/*style check box*/
.containercheck { text-align: left; width: 100%;
  margin: 1rem 0 2rem; font-size: 1.4rem;
  display: block;
  position: relative;
  padding-left: 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containercheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2rem;
  width: 2rem;
  background-color: #fff;
  border-radius: 1px; border: 1px solid #E3E3E3;
}

/* On mouse-over, add a grey background color */
.containercheck:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containercheck input:checked ~ .checkmark {
  background-color: #40CADA;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containercheck input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.containercheck .checkmark:after {
  left: 0.6rem;
  top: 0.3rem;
  width: 0.6rem;
  height: 1rem;
  border: solid white;
  border-width: 0 0.2rem 0.2rem 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media (max-width: 1300px) {
html { font-size:9px }
.main .txt { width:50% }
.main .img { position:relative; width:47%; right:0 }
.banner-img .flex { align-items:center; justify-content:space-between; }
.banner-img .txt { width:50% }
.banner-img img { position:relative; left:inherit; height:auto; width:47% }
.piano { padding:8rem 0 }
}

@media (max-width: 1024px) {
html { font-size:9.5px }
.main .container { flex-direction: column; }
.main .txt { width:100%; max-width:80rem; }
.main .img { width:100%; max-width:80rem; margin-top:5rem }
.main { height:auto; min-height:auto; padding:20rem 0 5rem }
header, .page header { padding: 3rem 0; background-color:transparent; box-shadow:none }
.sticky { box-shadow: 0 0 20px rgba(0, 0, 0, .2)!important; background-color: rgba(17, 23, 34, .9)!important; padding:1rem 0!important }
header .menu2 { display:none; }
header .logo { position:relative; }
header .info { display:flex; align-items:center; }
header .menu { justify-content:space-between; }

.menuresponsive { margin:4px 0 0 2rem }
.menuresponsive, .sidenav { display: block; }

#mySidenav { display: block; z-index: 1000; height: 100%; width: 0; position: fixed; z-index:1; top: 0; right: 0; overflow-x: hidden; transition: 0.2s; }
#mySidenav .bg a { font-size:2rem }
#mySidenav .bg li { margin:1.5rem 0 }
#mySidenav .closebtn img { width:3.5rem }
.sidenav .bgcolor { width:0; opacity:.4; height:100vh; overflow: hidden; position:absolute; right:0 }
#mySidenav .bg { background: #111722; background: linear-gradient(180deg, rgba(17, 23, 34, 1) 0%, rgba(49, 62, 75, 1) 100%); overflow-y: scroll; width: 100%; margin: 0; height:100vh; padding:8rem 4rem }
#mySidenav .bg a, #mySidenav .bg p { font-weight:600; color:#fff; display:flex; align-items:center; }
#mySidenav .closebtn { position: absolute; top: 0; right: 0; padding: 2rem; text-align: right; margin:0; width:100% }
#mySidenav .bg li a { font-weight:600; text-transform: uppercase; font-size:2rem; padding-bottom: 1.5rem; display:block; }
#mySidenav .bg li a.active { color:#94E5EE }
#mySidenav .bg li:last-child { border:0; display:flex }
#mySidenav .bg li a.cta { margin-left:0; padding-bottom:.8rem }
#mySidenav .bg li { border-bottom:1px solid rgba(255, 255, 255, .2); }

.accordion { position: relative; width:100%; text-align:left; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.accordion li { font-size:2rem; border:0!important }
.accordion li a { padding-bottom:0!important }
.accordion .btnmore { left: 0; top: 0; width: 100%; position: absolute; height: 4.5rem; cursor: pointer; }
.accordion .showhidenew img { margin: 0; transition: 1s; width: 1.8rem; position: absolute; right: 0; top: 1rem}
.accordion .text_opennew .title { padding:.5rem 1rem; border-radius:3px }
.accordion .text_opennew a { display:block; padding: .5rem 0 }
.accordion .text_opennew a { font-size:1.6rem!important }
.accordion .text_opennew a img { width:2.5rem; height:2rem; object-fit:contain; margin-right:.5rem }
.accordion .bggreen { background-color: #82CDC1; }
.accordion .bgblu { background-color: #5D6EA7; }
.accordion .bggreen2 { background-color: #5AB0A1; }
.accordion .text_opennew {margin: 0 0 2rem;}

.funzionalita .box { width:48%; align-items:center; text-align:center; }
.banner img { width:12rem }
.banner .txt { width:calc(100% - 16rem); }
.piano .price { gap:2% }
.piano .price .box { width:49%; margin-top:2% }
.piano .price .box:nth-child(3) { margin-top:6rem }

.page .main { min-height:auto; padding:20rem 0 10rem }
.desc .screen { margin-top:0 }

.page .main .bg2 { display:none; }
}

@media (max-width: 768px) {
.container { padding-left:4%!important; padding-right:4%!important }
.banner .flex { align-items:center; text-align: center; justify-content:center; flex-direction:column; }
.banner .flex img { margin-bottom:3rem }
.banner-img .txt { width:100% }
.banner-img img { width:100%; margin-top:4rem }
.banner .txt { width:100% }
.prefooter .bg2 { display:none; }
.prefooter .bg1 { left:0; right:0; margin:0 auto; top:50% }
.footer1 .foflex { flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.footer1 .cl { margin-top:3rem }
.footer1 .cl .mb2 { margin-bottom: 1rem }

.desc .box .txt .t40, .desc .box .txt p { width:100%; }
.desc .box .txt { gap:1.5rem; flex-direction:column; text-align:center; }
.fancybox__content {
    height: auto !important;
    max-height: 90vh !important;
}
#img_modale {display: none;}
#titolo_modale {font-size: 2.2rem; margin-bottom: 0.5rem}
}

@media (max-width: 600px){
.piano .price .box { width:100%; margin: 1.5rem 0 }
.piano .price .box:nth-child(3) { margin-top:5.5rem }
.t40 { font-size:3rem }
.t45 { font-size:3.5rem }
.funzionalita { gap:0 }
.funzionalita .box { width:100%; margin-bottom:1.5rem }
header, .page header { padding:2rem 0; background-color:transparent; border:0; box-shadow:none }
.sticky { padding: 1rem 0!important; box-shadow:0 3px 20px rgba(0, 0, 0, .4)!important; background-color: rgba(17, 23, 34, .9)!important }
header .logo { width:16rem }
.main { padding-top:15rem }
.pad, .piano { padding:6rem 0 }
.banner img { width:10rem }

.fancybox__content { flex-direction:column!important; }
.fancybox__content img { width:100%; height:30vw }
.fancybox__content .txt { width:100% }
.fancybox__backdrop { background: rgba(148, 229, 238, .8) !important; }

.main .bg1 { left:0; right:0; margin:0 auto; top:-14rem }
.main .bg2 { display:none; }

.gear-svg { width:100% }

.desc .box .txt { padding:7rem 2rem 3rem }

.t30 { font-size:2.5rem; }
.t20 { font-size:1.8rem }
.page .main { padding-top:15rem }
.page .main .txt img { width:10rem }

.page .main .txt { text-align:left; }
.page .main .bg1 { top:-17rem; width:45rem }
.desc .box .txt { text-align:left; }

.page .piano { padding-top:15rem }
.page .piano .mb6 { margin-bottom:2rem }
.page .piano .bg2 { display:none; }
.page .piano .bg1 { left:0; right:0; margin:0 auto; top:-14rem; width:75% }

.page .main.error .txt { text-align:center; }
.page .main.error p { font-size:30vw; }

.fancybox__content .txt { padding:2rem }
}

@media (max-width: 400px){

}

/*gsap css*/
.fade-left { transform: translateX(-100%); opacity:0 }
.fade-right { transform: translateX(100%); }
.fade-in { transform: translateY(0); opacity: 0; }
.fade-in-1 { transform: translateY(0); opacity: 0; }
.fade-in-down { transform: translateY(-100%); opacity: 0; }
.fade-in-up { transform: translateY(100%); opacity: 0; }
.bounce { transform: translateY(100px); }
.rotate { transform: rotate(-180deg); }
.swing { opacity: 0; transform: rotate(-10deg); }
.shake { opacity: 0; transform: translateX(0); }
.zoom-in { transform: scale(0); }
.zoom-out { transform: scale(2); }
.roll-in { transform: translateX(-100%) rotate(-360deg); }
.rotate-slow {animation: rotate 10s linear infinite;}
.mouse-par { will-change: transform; pointer-events: none; }

.gear-svg {
    max-width: 600px;
    margin: 100px auto;
    display: block; overflow: visible;
  }

  .gear-svg .gear {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
  }
.gear { transform-box: fill-box; transform-origin: center; }