.Stony {
  font-family: "Recursive", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings: "slnt" 0, "CASL" 0, "CRSV" 0.5, "MONO" 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/*
A = 61.803399
B = 38.196601
A+B = 100

A+B : A = A : B
*/
[data-news] {
  position: fixed;
  inset: auto 0 0;
  background-color: var(--orange);
  padding-block: 1.5rem;
  z-index: 9;
  filter: drop-shadow(0 -0.3rem 0.5rem var(--black));
}
[data-news] .newsSwiper {
  --swiper-theme-color: var(--black);
  --swiper-navigation-size: 1em;
  --swiper-navigation-sides-offset: 0;
  width: clamp(35rem, 90%, 140rem);
  margin-inline: auto;
}
[data-news] .swiper-slide {
  text-align: center;
  font-size: clamp(1.2rem, 0.9em, 1.6rem);
  color: var(--white);
}
[data-news] .swiper-slide p {
  margin: 0 auto;
}
[data-news] .swiper-slide a[href] {
  color: inherit;
  border-color: var(--black);
}
[data-news] .swiper-slide strong {
  color: inherit;
  font-weight: 800;
}

.Homy {
  --Hhead: calc(10rem);
  --hSlide: 100dvh;
  padding: 0;
}
.Homy .brand {
  margin-block-start: 3rem;
}
.Homy #top .main-nav {
  top: 3em;
}
.Homy #Logo {
  --bglogo: var(--black);
  --filllogo: var(--white);
  --blogo: var(--white);
}
.Homy #content {
  margin: 0;
  padding: 0;
  background-image: linear-gradient(180deg, #4d4d4d, #171717 20em);
  overflow-x: clip;
  font-size: clamp(1rem, 0.6rem + 0.8vw, 2.4rem);
}
.Homy .roll-text {
  position: absolute;
  font-size: 1.2em;
}
.Homy .btn {
  font-size: 1.7em;
}
@media (min-width: 56em) {
  .Homy {
    --Hhead: calc(0rem);
  }
  .Homy .brand {
    margin-block-start: 2%;
  }
  .Homy #top .main-nav {
    top: 4em;
  }
}
.Homy #main-footer {
  padding-block-end: 20vh;
}

.nojs main > section[x-data] {
  visibility: hidden;
}

.gridyAbsolute {
  display: grid;
  grid-template-areas: "Absoluty";
}
.gridyAbsolute > * {
  grid-area: Absoluty;
}

section[data-first] {
  --maxW: clamp(37.5rem, 100dvw - var(--gapy) / 2, 160rem);
  width: var(--maxW);
  padding-top: var(--Hhead);
  justify-items: center;
  align-items: end;
  margin-inline: auto;
}
@media (min-width: 56em) {
  section[data-first] {
    --maxW: clamp(37.5rem, 100dvw - var(--gapy), 160rem);
    position: relative;
  }
}
section[data-first] #Shop {
  width: 150%;
  width: 350%;
  height: auto;
  margin-block-start: -100%;
}
@media (min-width: 56em) {
  section[data-first] #Shop {
    width: 103%;
    margin-block-start: -3.3%;
  }
}
section[data-first] #Shop #spray-gas {
  display: inline;
  transform-box: fill-box;
  transform-origin: left bottom;
}
section[data-first] #Piccione {
  width: clamp(5rem, 8%, 12.4rem);
  height: auto;
  position: relative;
  z-index: 1;
  bottom: 6.7%;
  display: none;
}
@media (min-width: 56em) {
  section[data-first] #Piccione {
    display: initial;
  }
}
section[data-first] > div {
  --ww: 17rem;
  width: 100%;
  margin-block-end: 35%;
  padding-inline-start: 0.2rem;
  display: grid;
  align-items: center;
  gap: 0.2rem;
  grid-template-areas: "windowL meny windowR" "menyMob menyMob menyMob";
  grid-template-columns: var(--ww) 1.3rem var(--ww);
  grid-template-rows: 1fr fit-content(1rem);
}
section[data-first] > div .window.l {
  grid-area: windowL;
}
section[data-first] > div .meny {
  grid-area: menyMob;
  background-color: var(--black);
}
section[data-first] > div .window.r {
  grid-area: windowR;
}
@media (min-width: 23.375em) {
  section[data-first] > div {
    --ww: calc(50% - 1.7rem);
    padding-block-start: initial;
    justify-content: center;
  }
}
@media (min-width: 56em) {
  section[data-first] > div {
    --ww: 27.4%;
    margin-block-end: 8.1%;
    gap: initial;
    grid-template-columns: var(--ww) 13% var(--ww);
  }
  section[data-first] > div .meny {
    grid-area: meny;
    background-color: initial;
  }
}
section[data-first] div.meny {
  container: callAction/inline-size;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-block-start: 6%;
  gap: 5%;
  padding-inline: 1rem 2rem;
}
section[data-first] div.meny .call {
  order: 0;
}
section[data-first] div.meny .info {
  display: none;
}
section[data-first] div.meny .map {
  order: 2;
}
section[data-first] div.meny .ss {
  order: 1;
  text-align: center;
}
section[data-first] div.meny .ss svg {
  width: clamp(10rem, 100%, 25rem);
  height: auto;
  margin-inline: auto;
}
@media (min-width: 56em) {
  section[data-first] div.meny {
    gap: 2rem;
    margin-inline: 9%;
    margin-block-start: 75%;
    padding-inline: initial;
    flex-direction: column;
  }
  section[data-first] div.meny > span[class] {
    order: initial;
    width: 100%;
  }
  section[data-first] div.meny .info {
    display: inline-grid;
  }
  section[data-first] div.meny .ss {
    margin-block-start: 10%;
  }
}
section[data-first] .Stony {
  width: 100%;
}
section[data-first] .titly {
  text-align: center;
  color: var(--white);
  margin: 37.7% 4% auto;
  text-wrap: nowrap;
  font-size: 2.4em;
  line-height: 1;
  font-weight: 300;
  font-variation-settings: "slnt" 0, "CASL" 0, "CRSV" 0.5, "MONO" 0;
  letter-spacing: 0.1em;
}
@media (min-width: 56em) {
  section[data-first] .titly {
    font-size: 2.7em;
    margin-block-start: 22.6%;
  }
}
section[data-first] div.window {
  align-items: start;
}
section[data-first] svg.Window {
  width: 100%;
  height: auto;
  margin-block-start: 15%;
}
@media (min-width: 56em) {
  section[data-first] svg.Window {
    margin-block-start: 0%;
  }
}
section[data-first] .window-active {
  margin: auto 4% 2.6%;
  overflow: hidden;
}
section[data-first] .swiper {
  --wswip: 325px;
  width: clamp(15.4rem, 48vw - 4rem, 40rem);
}
@media (min-width: 56em) {
  section[data-first] .swiper {
    width: calc(25vw - 1.1rem);
    max-width: 40rem;
  }
}
section[data-first] .swiper video {
  pointer-events: none;
}
section[data-first] video {
  aspect-ratio: 340/425;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
section[data-first] #GoogleStar {
  display: flex;
  align-items: center;
  margin-block-end: 1.2em;
}
@media (min-width: 56em) {
  section[data-first] #GoogleStar {
    translate: 73%;
    margin-block-end: 0.3em;
  }
}
section[data-first] #GoogleStar > svg {
  height: 100%;
  width: auto;
  margin-inline-end: 1em;
}
section[data-first] #GoogleStar > div {
  font-size: 1.3em;
  padding: 0.3em 1em;
}
@media (min-width: 56em) {
  section[data-first] #GoogleStar > div {
    font-size: 0.8em;
    padding: 0.5em 1em;
  }
}
section[data-first] #GoogleStar > div {
  color: #dedede;
  background-color: #141414;
  border: 1px solid #8f8f8f;
}
section[data-first] #GoogleStar .gstars {
  display: inline-grid;
  vertical-align: text-bottom;
}
section[data-first] #Soccy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: absolute;
  inset: 4rem auto auto 1rem;
  font-size: 0.85em;
}
@media (min-width: 56em) {
  section[data-first] #Soccy {
    position: initial;
    inset: initial;
    gap: 2rem;
    translate: -180%;
    margin-block-end: 0.5em;
    flex-direction: row;
    font-size: 1em;
  }
}

.neon {
  text-shadow: 0 0 0.4rem white, 0 0 0.7rem rgba(255, 255, 255, 0.8), 0 0 1.1rem #73f3e3, 0 0 1.5rem rgba(115, 243, 227, 0.9803921569), 0 0 1.1rem #ff468f, 0 0 1.5rem rgba(255, 70, 143, 0.9803921569);
}

.Stony {
  --tc: var(--black);
  --bc: var(--white);
  --bgc: var(--orange);
  border: none;
  background: none;
  appearance: none;
}
.Stony > div {
  color: var(--tc);
  padding: 1rem 2rem;
  display: flex;
  place-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
  transition: background, filter, color;
  transition-duration: 0.3s;
  background: var(--bgc);
  background: linear-gradient(135deg, transparent 10px, var(--bgc) 0) top left, linear-gradient(225deg, transparent 10px, var(--bgc) 0) top right, linear-gradient(315deg, transparent 10px, var(--bgc) 0) bottom right, linear-gradient(45deg, transparent 10px, var(--bgc) 0) bottom left;
  background-size: 51% 51%;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0) 0.8rem, var(--bgc) 0.9rem), radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0) 0.8rem, var(--bgc) 0.9rem), radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0) 0.8rem, var(--bgc) 0.9rem), radial-gradient(circle at 0 100%, rgba(255, 255, 255, 0) 0.8rem, var(--bgc) 0.9rem);
  filter: drop-shadow(2px 0px 0 var(--bc)) drop-shadow(0px 2px 0 var(--bc)) drop-shadow(-2px 0px 0 var(--bc)) drop-shadow(0px -2px 0 var(--bc));
  flex-direction: column-reverse;
  gap: 0.3rem;
}
@media (min-width: 56em) {
  .Stony > div {
    flex-direction: row;
    gap: 1rem;
  }
}
.Stony span {
  transition: color 0.3s;
  line-height: 1.4em;
  font-size: 1.1em;
  font-weight: 600;
  font-variation-settings: "slnt" 0;
  text-transform: lowercase;
}
.Stony span strong {
  color: inherit;
  text-decoration: underline;
}
.Stony svg {
  width: auto;
  height: 1.3em;
}
.Stony svg path {
  transition: fill 0.3s;
}
.Stony .arry {
  justify-self: end;
  margin-inline-end: -3ch;
  width: auto;
  height: 1.2ch;
}
.Stony {
  margin: 0 auto;
  display: inline-grid;
  grid-template-areas: "Absolute";
  width: fit-content;
  place-items: center;
  font-variation-settings: "slnt" 0;
  font-weight: 700;
  font-size: 1.3em;
}
.Stony > * {
  grid-area: Absolute;
}
.Stony:disabled {
  --tc: rgba(255, 255, 255, 0.666);
  --bgc: gray;
}
.Stony:disabled > div {
  cursor: not-allowed;
}
.Stony:hover:not(:disabled) *, .Stony:focus-visible:not(:disabled) * {
  --tc: var(--orange) !important;
  --bc: var(--orange) !important;
  --bgc: var(--black) !important;
}

#eyes.ano {
  animation: eyes 4s infinite linear;
}

@keyframes eyes {
  0%, 94% {
    opacity: 1;
  }
  95%, 100% {
    opacity: 0;
  }
}
#cam.ano {
  animation: cam 5s infinite alternate linear;
}

@keyframes cam {
  0% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}
#spray-gas.ano {
  animation: spray 2.5s infinite cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes spray {
  0% {
    opacity: 1;
    transform: scale(0) translateX(0);
  }
  100% {
    transform: scale(1.6) translateX(8px);
    opacity: 0.5;
  }
}
@container callAction (width < 10.6rem) {
  section[data-first] .Stony {
    width: 5em;
  }
  section[data-first] .Stony span {
    display: none;
  }
}
.clear {
  --bgpos: -0.21em;
  position: relative;
}
.clear::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: url(../images/serrande-01.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position-y: var(--bgpos);
  font-size: 0.8em;
}
@media (min-width: 56em) {
  .clear::after {
    font-size: 1em;
  }
}

.r .clear::after {
  background-image: url(../images/serrande-02.png);
}

#dropy img {
  animation: drop 1.2s ease-in infinite;
  transform-origin: top;
  transform: scaleY(0.4);
}
#dropy img ~ img {
  animation-delay: 2s;
  animation-duration: 2s;
}

@keyframes drop {
  80% {
    transform: scaleY(1.3) translateY(0);
  }
  100% {
    transform: scaleY(1.6) translateY(16vh);
  }
}
section[data-second] {
  --maxW: clamp(47rem, 100% - var(--gapy), 121rem);
  justify-items: center;
  align-items: start;
  margin-block: 7rem;
}
@media (min-width: 56em) {
  section[data-second] {
    --maxW: clamp(47rem, 77% - var(--gapy), 121rem);
    margin-block: 0;
  }
}
section[data-second] #Fake-bg {
  width: 96%;
  margin: 10% 0 0 auto;
}
section[data-second] #Fake-bg img {
  max-width: none;
  width: 100%;
  height: auto;
}
section[data-second] #Fake {
  width: var(--maxW);
  height: auto;
}
section[data-second] #Fake #buttonFake {
  transform-origin: center;
  transform: translate(0px, 80px) scale(1.6);
}
@media (min-width: 56em) {
  section[data-second] #Fake #buttonFake {
    transform: translate(0px, 66px);
  }
}
section[data-second] .bodyFake {
  text-align: center;
  margin-block-start: 1.7%;
}
section[data-second] .bodyFake h2 {
  font-size: 2.5em;
  color: var(--black);
  line-height: 1;
  margin-block-end: 0;
}
section[data-second] .bodyFake p {
  max-width: 37ch;
  margin-inline: auto;
  font-size: 1.2em;
  line-height: 1.1;
  margin-block: 0.3rem;
}
@media (min-width: 56em) {
  section[data-second] .bodyFake {
    width: 60%;
    margin-block-start: 3%;
    width: fit-content;
  }
  section[data-second] .bodyFake p {
    max-width: 40ch;
    font-size: 1em;
    line-height: 1.4;
    margin-block: 1rem;
  }
}
section[data-second] #fakeRullo {
  align-self: end;
  margin-block-end: 0.7%;
  height: auto;
  width: 42%;
  margin-inline-start: -75%;
}
@media (min-width: 56em) {
  section[data-second] #fakeRullo {
    width: 25%;
    margin-inline-start: -48.8%;
  }
}
@media (min-width: 101.875em) {
  section[data-second] #fakeRullo {
    width: 40rem;
    justify-self: center;
    align-self: self-start;
    margin-inline-start: -80rem;
    margin-block-start: 40rem;
  }
}
section[data-second] .btn.pen {
  align-self: end;
  margin-block-end: 6.4%;
  margin-inline-start: 2%;
}
section[data-second] #stickersFake {
  background: #000;
  background-image: linear-gradient(0deg, white 0.82%, black 0.82%, black 50%, white 50%, white 50.82%, black 50.82%, black 100%);
  background-size: 122px 122px;
  border: 1px solid #fff;
  padding: 1em;
  margin-inline-start: 75%;
  margin-block-start: calc(5em + 8%);
  width: clamp(6.8rem, 15vw, 13rem);
}
@media (min-width: 56em) {
  section[data-second] #stickersFake {
    margin-inline-start: 47%;
    margin-block-start: 13.7%;
    width: 10%;
  }
}
section[data-second] .draggy {
  --x: 0;
  --y: 0;
  translate: var(--x) var(--y);
  cursor: grab;
  touch-action: none;
  width: 100%;
  margin: auto;
}
section[data-second] .draggy img {
  pointer-events: none;
  width: 100%;
  height: auto;
}
section[data-second] #fakeSaetta {
  width: 52%;
}

section[data-third] {
  justify-items: center;
  background-image: linear-gradient(0deg, #4d4d4d 70%, transparent);
}
section[data-third] #dropy {
  justify-self: start;
  margin-inline-start: 78.8%;
  margin-block-start: 30.5%;
  width: 1.5%;
}
section[data-third] #dropy img {
  width: 100%;
  height: auto;
}
section[data-third] #dropy img + img {
  margin-inline-start: -50%;
}
@media (min-width: 56em) {
  section[data-third] #dropy {
    margin-inline-start: 23.8%;
    margin-block-start: 9.5%;
    width: 1%;
  }
}
section[data-third] #Underground-subway {
  margin-block-start: 7%;
  width: clamp(46rem, 100% - var(--gapy), 170rem);
}
section[data-third] #Underground-subway img {
  max-width: none;
  width: 100%;
  height: auto;
}
@media (min-width: 56em) {
  section[data-third] #Underground-subway {
    margin-block-start: -1.2%;
  }
}
section[data-third] .metroAni #Metro {
  width: 97%;
  width: clamp(70rem, 97%, 300rem);
  height: auto;
  translate: calc(-26vw - 2.4em);
  justify-self: start;
}
section[data-third] .metroAni #Metro #pezziunici {
  transform-box: fill-box;
  translate: 225% -30%;
  transform: scale(0.8);
}
@media (min-width: 25em) {
  section[data-third] .metroAni #Metro #pezziunici {
    translate: 0% -35%;
  }
}
@media (min-width: 32.5em) {
  section[data-third] .metroAni #Metro {
    translate: -7%;
  }
}
@media (min-width: 56em) {
  section[data-third] .metroAni #Metro {
    translate: -2%;
  }
  section[data-third] .metroAni #Metro #pezziunici {
    translate: initial;
    transform: initial;
  }
}
@media (min-width: 106.25em) {
  section[data-third] .metroAni #Metro {
    translate: 0%;
  }
}
section[data-third] .metroAni > div {
  width: clamp(18rem, 30%, 40rem);
  margin-inline: auto;
  position: relative;
  align-self: center;
}

span.mm {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #e82218;
  padding-inline: 0.8rem;
  border-radius: 0.7rem;
  font-weight: normal;
}

[data-arty] {
  display: flex;
  justify-content: center;
}
[data-arty] > article {
  position: relative;
  display: grid;
  align-content: stretch;
  gap: 4em;
}
[data-arty] > article header {
  text-align: center;
  max-width: 30ch;
  margin: -5% auto auto;
}
[data-arty] > article header h2 {
  font-size: 2.5em;
  line-height: 1.06;
  margin-inline: auto;
  color: var(--white);
}
[data-arty] > article .metroAni {
  align-items: end;
  text-align: center;
  margin-inline: auto;
}
@media (min-width: 56em) {
  [data-arty] > article {
    gap: 0;
  }
  [data-arty] > article::after {
    content: "";
    display: block;
    position: absolute;
    inset: 40% 0 0 calc(95.7% - var(--gapy) / 2);
    background-color: #4d4d4d;
    border-left: 1px solid #bbb9b8;
    z-index: 1;
  }
  [data-arty] > article header {
    max-width: 40ch;
    margin-block-start: 5%;
  }
}
@media (min-width: 106.25em) {
  [data-arty] > article::after {
    inset: 40% -45% 0 95.8%;
  }
}

.pause,
.pause * {
  animation-play-state: paused !important;
  transition-duration: 0s !important;
}

/*# sourceMappingURL=homy.v5.css.map */