:root {
  /*--SizeLogo: 25%;
    --BorderLogoSize: 0.2rem;
    --ColorLogo: #ede0d4;
    --BackColorLogo: #9c6644;
    --paddingLogo: 0.5rem;*/

  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  --BackgroundColor: #ddb892;
  --BackgroundColor2: #dabfa4;

  --WebContainerSection: var(--BackgroundColor2);

  --MarroneScritte: #ffffffff;
  --MarroneChiaroScritte: #f8b945;
  --NavBar: #a98467;
  --BordoNavbar: #4b392fff;
  --MarroneBottoni: #ddb892;
  --MarroneBordi: #49352aff;
  --MarroneBordi2: #83644aff;
  --Registrati: #4b392fff;
  --Logo: #ddb892;

  /*Pop Up Sign In*/
  --LightGradientSwitch: #ccb188;
  --DarkGradientSwitch: #a5885d;
  --LightColorPopUp: white;
  --DarkColorPopUp: black;
  --PopUpShadow: rgba(0, 0, 0, 0.5);
  /*Pop Up Sign In*/

  /*Menu*/
  --CenterMenuColor: var(--MarroneBottoni);
  --SideMenuColor1: var(--MarroneBordi);
  --SideMenuColor2: rgb(255, 255, 255);
  /*Menu*/

  /*LogIn*/
  --XColor: var(--DarkGradientSwitch);
  --XColorMobile: var(--LightColorPopUp);

  --Ombra: rgba(0, 0, 0, 0.4);
  --Luce: rgba(255, 255, 255, 0.1);

  --translatePropety: translateX(calc(max(calc(79vw + 1rem), 55rem) - 100%));

  --base-height: 7.55vw;
  --base-min-height: 8rem;
  --media-height: 23vw;
  --media-min-height: 8.85rem;
  --Goccia-width: 4rem;
}
body{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;

    width: 100vw;
    height: auto;
    background-color: var(--BackgroundColor);
}

*{
    margin: 0px;
    padding: 0px;
}



#NavBar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: calc(80vw + 1rem);
  transition: height 0.2s;
  height: 5rem;

  position: fixed;

  margin-top: min(4vh, 3rem);

  border: 0.03rem solid rgba(0, 0, 0, 0.5);

  box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
    0.15rem -0.15rem 0.15rem var(--Ombra),
    -0.15rem -0.15rem 0.15rem var(--Ombra),
    0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
    -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
    0.18rem -0.18rem 0rem 0.18rem rgba(0, 0, 0, 0.5),
    -0.18rem -0.18rem 0rem 0.18rem rgba(0, 0, 0, 0.5);

  background-color: var(--NavBar);

  border-radius: 1.5rem;
  z-index: 100;
}

#Content {
  position: relative;

  display: flex;
  align-items: start;
  justify-content: space-around;

  height: 1.8rem;
  width: max-content;

  overflow: hidden;
}
.scritte {
  transition: all 0.3s;

  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  color: var(--MarroneScritte);

  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;

  margin-left: 1rem;
  margin-right: 1rem;

  text-decoration: none;
  line-height: 150%;
}

.scritte::after {
  position: relative;
  content: attr(data-text);

  font-size: 1.3rem;

  color: var(--MarroneChiaroScritte);
}
.scritte:hover {
  transform: translateY(-50%);
}

#Login {
  display: flex;
  align-items: center;
  justify-content: start;

  height: 120%;
  width: 13rem;
  white-space: nowrap;

  margin-right: 1rem;
}
#SignInContainer {
  position: relative;

  display: flex;
  align-items: start;
  justify-content: space-around;

  height: 1.8rem;
  width: max-content;

  overflow: hidden;
}

#SignIn {
  transition: all 0.3s;

  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  color: var(--MarroneScritte);

  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;

  margin-left: 1rem;
  margin-right: 1rem;

  text-decoration: none;
  line-height: 150%;
}
#SignIn::after {
  position: relative;
  content: attr(data-text);

  font-size: 1.3rem;

  color: var(--MarroneChiaroScritte);
}
#SignInContainer:hover #SignIn {
  transform: translateY(-50%);
}

#Register {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;
  height: auto;
  border-radius: 0.8rem;

  background: linear-gradient(
    -45deg,
    var(--MarroneBordi),
    var(--MarroneBordi2)
  );

  transform-style: preserve-3d;
  margin-left: 1rem;

  cursor: pointer;
  transition: all 0.1s ease-in-out;

  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  border: solid 0.03rem rgba(0, 0, 0, 0.4);

  box-shadow: 0.2rem 0.2rem 0.2rem var(--Ombra);
}
#Register h1 {
  background-color: var(--MarroneBottoni);
  border-radius: 0.8rem;
  padding: 0.4rem;

  transition: all 0.1s ease-in-out;

  font-size: 1.3rem;
  color: var(--Registrati);
  text-decoration: none;
  font-weight: bold;

  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  box-shadow: -0rem 0rem 0rem 0.05rem rgba(0, 0, 0, 0.4);

  transform: translateY(-0.3rem) translateX(0.2vw);
}
#Register:active {
  box-shadow: none;
}
#Register:active h1 {
  transform: none;
  box-shadow: -0rem 0rem 0rem 0.05rem rgba(0, 0, 0, 0.4);
}

.BottoniPiatti {
  animation: BottoniPiattiAnim 0.2s 1 forwards;
}
@keyframes BottoniPiattiAnim {
  0% {
  }
  100% {
    box-shadow: none;
    background-color: var(--NavBar);

    --Registrati: var(--MarroneScritte);

    transform: none;
  }
}
.Bottoni3D {
  animation: Bottoni3DAnim 0.2s 1 forwards;
}
@keyframes Bottoni3DAnim {
  0% {
    box-shadow: none;
    background-color: var(--NavBar);

    --Registrati: var(--MarroneScritte);
    transform: none;
  }
  100% {
  }
}

#Telefono {
  display: flex;
  height: 100%;
  width: min-content;

  align-items: center;
  justify-content: space-between;
}
#Hamburger {
  display: none;
}
#LoginMobileContainer {
  display: none;
}
.LoginMobileSVG {
  display: none;
}

#LogoContainer {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  height: 100%;
  aspect-ratio: 1/1;

  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.LogoProva {
  width: 80%;
  height: 80%;

  border-radius: 100rem;

  fill: var(--MarroneScritte);

  /*border: 1px solid red;*/
}
.LogoProva:nth-child(1) {
  transform: translateY(-0.15rem);
  /*filter: drop-shadow(0rem 0.05rem 0.05rem var(--Ombra));*/

  z-index: 1;
}
.LogoProva:nth-child(2) {
  position: absolute;
  filter: drop-shadow(0rem 0.1rem 0.05rem var(--Ombra));

  z-index: 0;
}

.NavBarIncavata {
  animation: NavBarIncavata 0.2s 1 forwards linear;
}
@keyframes NavBarIncavata {
  0% {
    box-shadow: 0.4rem 0.4rem 0.4rem var(--Ombra),
      -0.4rem 0.4rem 0.4rem var(--Ombra);

    scale: 102%;
  }
  50% {
    box-shadow: none;
  }
  100% {
    box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
      0.15rem -0.15rem 0.15rem var(--Ombra),
      -0.15rem -0.15rem 0.15rem var(--Ombra),
      0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5),
      -0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5);

    scale: 100%;
  }
}
.NavBarVolante {
  animation: NavBarVolante 0.2s 1 forwards linear;
}
@keyframes NavBarVolante {
  0% {
    box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
      0.15rem -0.15rem 0.15rem var(--Ombra),
      -0.15rem -0.15rem 0.15rem var(--Ombra),
      0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
      0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5),
      -0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5);

    scale: 100%;
  }
  50% {
    box-shadow: none;
  }
  100% {
    box-shadow: 0.4rem 0.4rem 0.4rem var(--Ombra),
      -0.4rem 0.4rem 0.4rem var(--Ombra);

    scale: 102%;
  }
}

#img {
  display: flex;

  width: 100vw;
  height: 100vh;

  object-fit: cover;
  overflow: hidden;

  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}

#Banner {
  position: fixed;

  width: 100vw;
  height: 100vh;

  z-index: -1;
}

#Welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  height: 100vh;

  background-color: rgba(0, 0, 0, 0.4);
}
.welcome {
  line-height: 100%;

  font-family: var(--font);
  color: var(--LightColorPopUp);
  font-weight: 200;
  letter-spacing: 0.2rem;

  font-size: min(3vw, 3rem);

  text-transform: uppercase;
}
.welcome:nth-child(2) {
  font-size: min(15vw, 15rem);
  margin-top: 7.5vh;

  text-transform: capitalize;

  /*width: 100%;
    line-height: 125%;
    text-align: center;

    background-color: rgba(0, 0, 0, 0.5);*/
}
.welcome:nth-child(3) {
  font-size: min(6vw, 6rem);
  margin-top: 2.5vh;

  text-transform: capitalize;
}
#Welcome-BTN {
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font);
  color: var(--NavBar);
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 2rem);
  letter-spacing: 0.2rem;

  text-transform: uppercase;

  background-color: rgb(199, 199, 207);

  width: 25vw;
  min-width: 12rem;
  max-width: 25rem;
  aspect-ratio: 5;

  margin-top: 15vh;

  /*border-radius: 1rem;
    box-shadow: 
        inset 0rem 0rem 1rem 0rem var(--Ombra),
        0.2rem -0.3rem 0rem 0.1rem rgb(174, 174, 176),
        0rem 0.3rem 0.3rem 0rem var(--Ombra);
    border: 0.3rem solid var(--LightColorPopUp);*/

  cursor: pointer;
}
#Welcome-BTN:active {
  /*box-shadow:inset 0rem 0rem 0.5rem 0rem var(--Ombra);
    transform: translateY(-0.3rem) translateX(0.3rem);*/
}

#SignInPopUpBackground * {
  user-select: none; /* disabilita selezione */
  -webkit-user-select: none; /* Safari / iOS */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* vecchi Edge */
  -webkit-touch-callout: none;
}

#SignInPopUpBackground {
  position: fixed;

  display: none;
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100vh;

  overflow-x: hidden;

  background-color: var(--PopUpShadow);

  z-index: 101;
}
#SignInPopUp {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: start;

  width: max(calc(79vw + 1rem), 55rem);
  height: clamp(35rem, calc(39vw + 1rem), max(80vh, 45rem));

  overflow: hidden;
  background: linear-gradient(
    0deg,
    var(--LightGradientSwitch) 15%,
    var(--DarkGradientSwitch) 85%
  );
  border-radius: 3rem;
}

#ClosePopUp {
  position: absolute;

  display: none;
  align-items: start;
  justify-content: start;

  width: 9rem;
  height: 9rem;

  top: calc(
    (100vh - clamp(35rem, calc(39vw + 1rem), max(80vh, 45rem))) / 2 - 6rem
  );
  right: calc((100vw - max(calc(79vw + 1rem), 55rem)) / 2 - 6rem);

  z-index: 2;

  background-color: rgba(255, 0, 0, 0);
}
#Xanimation {
  width: 100%;
  height: 100%;

  fill: var(--XColorMobile);
}
#XanimationMobile {
  display: none;
}
#XPopUp {
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: 3rem;
  right: 3rem;

  width: 3rem;
  height: 3rem;

  z-index: 2;

  cursor: pointer;

  border-radius: 3rem;
}
#XPopUp svg {
  width: 80%;
  height: 80%;

  opacity: 0;
  transition: all 0.5s ease;

  fill: var(--XColor);
}

#SwitchPopUp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 35%;
  height: 100%;
  background-color: transparent;

  will-change: transform;

  /*Move To Other Side*/
  /*transform: translate(calc(max(calc(79vw + 1rem),55rem) - 100%));*/
}
#Welcome1 {
  display: flex;
  text-align: center;

  font-family: var(--font);
  font-size: max(3vw, 2.6rem);
  font-weight: 600;
  line-height: 100%;

  letter-spacing: 2%;

  color: var(--LightColorPopUp);
}
#Welcome1-mobile {
  display: none;
}
#Slogan1 {
  font-family: var(--font);
  text-align: center;

  margin-top: 5%;

  font-size: max(1vw, 0.9rem);
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 2%;

  color: var(--LightColorPopUp);
}
#Slogan1-mobile {
  display: none;
}
#Switch1 {
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font);
  font-size: max(1.5vw, 1.5rem);

  font-weight: 500;

  color: var(--LightColorPopUp);
  background-color: transparent;

  border-radius: 5rem;
  border: 0.1rem solid var(--LightColorPopUp);

  width: 50%;

  line-height: 170%;
  padding-bottom: 1%;

  margin-top: max(15%, 5rem);

  cursor: pointer;
}

#FormPopUp {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: end;

  width: 65%;
  height: 100%;

  overflow: hidden;
  background: transparent;

  z-index: 1;

  will-change: transform;

  transform: var(--translatePropety);

  /*Move To Other Side*/
  /*transform: none;*/
}
#Form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  height: 100%;

  background-color: var(--LightColorPopUp);
}
.Welcome2 {
  font-family: var(--font);
  font-size: max(3.5vw, 3.2rem);
  font-weight: 600;
  line-height: 100%;

  color: var(--LightGradientSwitch);

  margin-bottom: 2%;
}
#Welcome2-mobile {
  display: none;
}
.Welcome2:nth-child(2) {
  margin-bottom: 5%;
  font-size: max(3.3vw, 3rem);
  letter-spacing: 5%;
  color: var(--DarkGradientSwitch);
}
#InputFormContainer {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: max(60%, 28rem);
  height: auto;
}
#InputForm {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: 100%;
  height: max(var(--base-height), var(--base-min-height)); /*45%*/
}
.inputForm {
  width: 100%;

  font-size: max(1.2vw, 1.3rem);
  font-family: var(--font);

  padding-bottom: 0.5%;
  line-height: 150%;

  text-align: center;

  border-radius: 5rem;

  margin-bottom: 1.5%;

  border: 0.1rem solid var(--DarkGradientSwitch);
  color: var(--DarkColorPopUp);

  background-color: var(--LightColorPopUp);
}
.inputForm:last-child() {
  margin-bottom: 1.5%;
}
.inputForm:focus {
  outline: 0.2rem solid var(--LightGradientSwitch);
}
#SecondPassword {
  transition: opacity 0.2s ease;
}
#Switch2 {
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font);
  font-size: max(1.5vw, 1.5rem);

  font-weight: 500;

  color: var(--LightColorPopUp);
  background-color: transparent;

  border-radius: 5rem;
  background: linear-gradient(
    -90deg,
    var(--LightGradientSwitch),
    var(--DarkGradientSwitch)
  );
  border: none;

  width: 53%;

  line-height: 170%;
  padding-bottom: 1%;

  cursor: pointer;

  margin-top: 5%;
}

#RadioGroup {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
}
#Switch2 {
  font-size: min(4vw, 1.5rem);
  margin-top: 5%;
}

#ricordami {
  cursor: pointer;
}
.radioChoose {
  font-family: var(--font);
  font-size: min(2.5vw, 0.95rem);

  color: var(--DarkColorPopUp);

  cursor: pointer;
}

#Alternative {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: max(60%, 28rem);
  height: auto;
}

#Choose {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 0.2rem;

  background-color: var(--DarkColorPopUp);

  opacity: 0.4;

  margin-top: 7%;
  margin-bottom: 7%;
}
#Choose::after {
  position: absolute;

  content: "Oppure";
  color: var(--DarkColorPopUp);

  background-color: var(--LightColorPopUp);
  font-family: var(--font);
  font-weight: 600;

  padding-left: 3%;
  padding-right: 3%;
}
#Forget {
  display: none;
}

#SwitchText {
  display: none;
}

/*Menu*/
#Menu-mobile {
  display: none;
}
.NomeLogoMenu-mobile {
  display: none;
}
/*Menu*/














































#Container{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;

    width: calc(100vw - 5rem);
    height: calc(90rem - 2.5rem - 11rem);
    background-color: var(--BackgroundColor);

    margin: 2.5rem;
    margin-top: 11rem;

    transition: margin 0.2s ease;
}

#Main{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: row;

    width: 100%;
    height: calc(80% - 2.5rem);
    margin-bottom: 2.5rem;
}

#Info{
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;

    width: calc(60% - 2.5rem);
    height: 100%;

    margin-right: 2.5rem;

    /*background-color: rgba(255, 0, 0, 0.23);*/
}




#Utility{
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: auto;
}

#BackButton{
    font-family: var(--font);
    color: var(--LightColorPopUp);
    text-decoration: none;

    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    text-transform: capitalize;
    font-weight:300;

    border-radius: 3rem;
    border: 0.1rem solid var(--LightColorPopUp);

    padding: 0.5rem 1.5rem;

    cursor: pointer;
}
#OtherButton{
    display: flex;
    align-items: center;
    justify-content: end;

    height: 100%;
    width: 50%;
}
.OtherButton{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    aspect-ratio: 1/1;

    border-radius: 3rem;
    border: 0.1rem solid var(--LightColorPopUp);

    cursor: pointer;
}
.OtherButton:first-child{
    margin-right: 1.25rem;
}
.OtherButton svg{
  stroke-width: 0.05rem;
  stroke: var(--LightColorPopUp);

  height: 80%;
  aspect-ratio: 1/1;

  fill: none;
}

#TitoloMagazzino{
    width: 100%;
    text-align: start;

    font-family: var(--font);
    color: var(--LightColorPopUp);

    font-size: 5rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    line-height: 100%;

    margin-top: 2.5rem;
}

#TitoloDescription{
    width: 100%;
    height: auto;
    overflow-y: scroll;

    font-family: var(--font);
    color: var(--LightColorPopUp);

    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 0.1rem;
    line-height: 150%;
    opacity: 0.8;

    margin-top: 2.5rem;
}

#Price{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;

    gap: 1.25rem;

    width: 100%;
    height: auto;

    margin-top: 2.5rem;
}
#PriceLabel{
    display: flex;
    align-items: start;
    justify-content: start;

    font-family: var(--font);
    color: var(--LightColorPopUp);

    font-size: 4rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
    line-height: 100%;

    cursor: auto;
}
#PriceLabel span{
  font-size: 1.5rem;
  font-weight: 200;
}
#AddCart{
    display: flex;
    align-items: center;
    justify-content: center;

    width:  auto;
    height: 4rem;

    border-radius: 3rem;
    background-color: rgb(175, 225, 111);

    cursor: pointer;
}
#AddCart h1{
    font-family: var(--font);
    color: var(--DarkGradientSwitch);

    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    line-height: 100%;
    white-space: nowrap;

    text-align: center;

    /*transform: translateY(-0.5rem); Solo per centrare il font non centrato*/

    margin: 1rem;
}
#AddButton{
    height: calc(100% - 2rem - 0.2rem);
    aspect-ratio: 1/1;
    margin-right: 0.6rem;
    padding: 0.6rem;

    background-color: var(--DarkGradientSwitch);
    border-radius: 3rem;

    fill: var(--LightColorPopUp);
}
.AddButton{
    

    fill: none;
    stroke-width: 0.4rem;
    stroke: var(--LightColorPopUp);
}




/*Galleria*/
.Images{
    position: relative;

    display: flex;
    align-items: center;
    justify-content: start;

    width: 40%;
    height: 100%;
}
.MobileImgScroll{
  display: none;
}
.image-container {
  width: 100%;
  height: 100%;
  overflow: hidden;

  border-radius: 3rem;
}

.image-container img {
  width: 100%;
  height: 100%;
  display: none;
  object-fit: cover;
}

.image-container img.active {
  display: block;
}

.nav {
  position: absolute;

    font-family: var(--font);

  display: flex;
  align-items: center;
  justify-content: center;

  height: 3rem;
  aspect-ratio: 1/1;

  background: rgba(0, 0, 0, 0.6);
  color: var(--LightColorPopUp);
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 1rem;

    border-radius: 3rem;

  left: 1rem;
}
.nav:last-child{
    left: unset;
    right: 1rem;
}


#SubMain{
    display: flex;
    align-items: center;
    justify-content: space-around;

    width: 100%;
    height: 20%;
}

#SubMain h1{
    position: relative;

    font-family: var(--font);
    color: var(--LightGradientSwitch);

    font-weight: 400;
    font-size: 1.5rem;

    text-align: center;
}
#SubMain h1:nth-child(2){
    font-size: 3rem;
}
#SubMain span{
    color: var(--LightColorPopUp);
}

#SubMain h1::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 0.1rem;

    bottom: -1rem;
    left: 0px;

    background-color: var(--LightColorPopUp);
    opacity: 0.2;
}



/*More*/

#MoreContainer{
  position: relative;
  width: calc(100% - 5rem);
  height: 10rem;

  margin: 2.5rem;
  margin-top: 0rem;
}
#MoreContainer::after{
  content: "";
  position: absolute;
  width: calc(100% + 5rem);
  height: 0.1rem;

  background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.4) 20% , rgba(255, 255, 255, 0.4) 80% , transparent 95%);

  bottom: 0px;
  left:-2.5rem;
}
/*More*/


/*Other*/

#OtherContainer{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 2.5rem;

  width: calc(100% - 5rem);
  height: auto;

  margin: 2.5rem;
  margin-top: 0rem;
}
.Other{
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  height: 30rem;
  width: min-content;
}
.Other:last-child{
  margin:0px;
}
.Other img{
  height: 80%;
  aspect-ratio: 1;

  object-fit: cover;

  border-radius: 3rem;
}
.subOtherContainer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  width: 100%;
  height: 10%;
}
.subOtherContainer:last-child{
  justify-content: start;
}
.InfoOther{
  color: var(--LightColorPopUp);
  font-family: var(--font);

  font-size: 1.5rem;
  font-weight: 500;
}
.InfoOther:last-child{
  font-weight: 600;
}
.MoreStelline{
  border-radius: 3rem;
  height: 70%;
  aspect-ratio: 1;

  background-color: rgba(255, 217, 0, 0.3);
}
.stelline{
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  background-color: rgba(255, 217, 0, 0.3);
  border-radius: 3rem;

  padding-left: 0.25rem;
  padding-right: 0.25rem;

  margin-left: 1.25rem;
}
.stelline svg{
  height: 70%;
  aspect-ratio: 1;

  margin-right: 0.25rem;

  fill: rgb(255, 225, 45);
}

/*Other*/


#ServiziAltro{
  display: flex;
  align-items: center;
  justify-content: start;

  width: calc(100% - 5rem);
  height: auto;

  margin: 2.5rem;
}
#ServiziAltro h1{
  font-family: var(--font);
    color: var(--LightColorPopUp);
    text-decoration: none;

    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    text-transform: capitalize;
    font-weight:300;

    border-radius: 3rem;
    border: 0.1rem solid var(--LightColorPopUp);

    padding: 0.5rem 1.5rem;

    cursor: pointer;
}


/*MoreInfoContainer*/

#MoreInfoContainer{
  display: flex;

  width: calc(100% - 5rem);
  height:auto;

  margin: 2.5rem;
  margin-top: 0px;
}
.MoreInfoSubContainer{
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: calc(70% - 2.5rem);
  height: auto;

  margin-right: 2.5rem;
}
.MoreInfoSubContainer:last-child{
  justify-content: center;

  width: 30%;
  margin-right: 0rem;
}

#MoreInfoTitle{
  font-family: var(--font);
  color: var(--LightColorPopUp);

  width: 100%;
  font-size: 4rem;
  font-weight: 500;

  margin-bottom: 2.5rem;

  text-align: center;
}


#AchievmenInfoContainer{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  height: min-content;
  max-height: 100%;

  border-radius: 3rem;

  background-color: rgb(119, 150, 79);
}

.OtherAchievment{
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: calc(100% - 3rem);
  height: 3rem;

  margin: 1.5rem;

  color: var(--LightColorPopUp);
  font-family: "Times New Roman", Times, serif;
  font-size: 1.5rem;
}
.OtherAchievment:last-child{
  justify-content: end;
}
.Logo{
  height: 100%;
  aspect-ratio: 1;

  fill: var(--LightColorPopUp);
}

#Achievment{
  width: calc(100% - 3rem);
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-family: var(--font);
  font-size: 2rem;
  font-weight: 600;

  overflow-y: scroll;

  color: var(--LightColorPopUp);
}

#MoreInfo{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 2.5rem;

  width: 100%;
  height: auto;
}
.MoreInfoSub{
  flex: 1 1 25%;
  min-width: 30rem;

  height: auto;
  margin: 0rem;
}
.MoreInfo{
  color: var(--LightColorPopUp);
  font-family: var(--font);
}
.MoreInfo p{
  font-size: 1.2rem;
  font-weight: 300;

  text-align: justify;

  margin-bottom: 1.25rem;
}
.MoreInfo a{
  color: var(--LightColorPopUp);
}

.SubMoreInfo{
  margin-bottom: 1.25rem;
  width: calc(100% - 2rem);
  border-radius: 3rem;

  padding-left: 1rem;
  padding-right: 1rem;

  font-size: 1.5rem;
  font-weight: 600;

  border: 0.1rem solid var(--LightColorPopUp);
}
.SubMoreInfo:nth-child(3){
  margin-top: 2.5rem;
}



.svgContainerFaq{
  display: flex;
  align-items: center;
  justify-content: end;

  width: 100%;
  height: 100%;
}
.Faq{
  display: flex;
  align-items: center;
  justify-content: start;

  width: 100%;
  height: 3rem;
  border-bottom: 0.1rem solid var(--LightColorPopUp);

  color: var(--LightColorPopUp);
  font-family: var(--font);

  margin-bottom: 2.5rem;
  white-space: nowrap;
}
.Faq h2{
  font-size: 1.2rem;
  font-weight: 700;
}
.Faq h1{
  font-size: 2rem;
  font-weight: 500;

  margin-left: 1.25rem;
}

.Faq svg{
  height: 80%;
  aspect-ratio: 1;

  stroke-width: 0.25rem;
  stroke: var(--LightColorPopUp);

  fill: none;

  cursor: pointer;
}
/*MoreInfoContainer*/

/*Footer*/
#Footer {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: 80% 20%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  width: 100%;
  height: 500px;

  background: var(--BackgroundColor);
}
#Footer * {
  font-family: var(--font);
  transition: none;
}

.Footer-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.Footer-sub:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}
.Footer-sub:nth-child(2) {
  grid-area: 1 / 2 / 2 / 3;

  flex-direction: row;
  justify-content: center;
}
.Footer-sub:nth-child(3) {
  justify-content: space-between;
  grid-area: 2 / 1 / 3 / 3;
}

#FooterCompanyLogo {
  color: var(--LightColorPopUp);

  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 100%;
}
#Dati-Azzienda-mobile {
  display: none;
}
.Dati-Azzienda {
  color: var(--LightColorPopUp);

  font-size: 1rem;
  font-weight: 100;
  opacity: 0.5;
}

.Footer-sub-cont {
  display: flex;
  align-items: center;
  justify-content: start;

  width: 80%;
  height: min-content;
}
.Footer-sub-cont:nth-child(1) {
  height: 20%;
}
.Footer-sub-cont:nth-child(2) {
  flex-direction: column;
  align-items: start;
  justify-content: center;

  height: 40%;
}
.Footer-sub-cont:nth-child(3) {
  height: 15%;
}
.Social3D-cont {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 50%;
  aspect-ratio: 1/1;

  margin-left: 1rem;
  border-radius: 50%;

  /*background-color: var(--LightColorPopUp);
    box-shadow: 0.05vw -0.2rem 0rem 0rem rgba(255, 255, 255, 0.8),
                -0.05rem 0.15rem 0.2rem var(--Ombra);

    transform:  translateY(0.2rem)
                translateX(-0.05vw);
*/
  border: 0.1rem solid var(--LightColorPopUp);
  /*background-color: rgba(255, 255, 255, 0.2);*/

  cursor: pointer;
}
.Social3D {
  width: 100%;
  aspect-ratio: 1/1;

  padding: 25%;
}
#ig {
  fill: white;
}
#fb {
  fill: white;
}
#tw {
  fill: white;
}
#tt {
  fill: white;
}

.Social3D-cont:active {
  transition: all 1s ease;
  box-shadow: none;
  transform: none;
}

.Social3D-cont:first-child {
  margin-left: 0%;
}

#LogoFooter-cont {
  height: 100%;
  aspect-ratio: 1/1;

  margin-right: 2%;
}
#LogoFooter {
  width: 100%;
  height: 100%;

  fill: var(--LightColorPopUp);
}

.scritte-Footer {
  text-align: start;

  display: flex;
  align-items: start;
  justify-content: space-around;
  flex-direction: column;

  height: 75%; /*somma delle 3 .Footer-sub-cont:nth-child*/

  color: var(--LightColorPopUp);

  padding-left: 15%;
  padding-right: 15%;
}
#scritte-Footer-mobile {
  display: none;
}
.scritte-Footer-h1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: start;
  white-space: nowrap;

  font-weight: 200;
  font-size: 1rem;

  height: calc((100% - 26.7%) / 5);

  color: var(--LightColorPopUp);
  text-decoration: none;

  cursor: pointer;
}
.scritte-Footer-h1::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.1rem;

  background-color: var(--MarroneChiaroScritte);

  top: 80%;
  width: 0%;
  transition: 0.5s width ease;
}
.scritte-Footer-h1:hover {
  color: var(--MarroneChiaroScritte);
}
.scritte-Footer-h1:hover::after {
  width: 100%;
}
.scritte-Footer h2 {
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 600;
  font-size: 1rem;
  height: 26.7%;

  opacity: 0.5;
}

#Redirect-Footer-cont {
  display: flex;
  align-items: center;
  justify-content: space-around;

  width: 90%;
  height: 50%;

  border-top: 0.1rem solid var(--LightColorPopUp);
}
.Redirect-Footer-cont2 {
  display: flex;
  align-items: center;
  justify-content: center;

  border-right: 0.1rem solid var(--LightColorPopUp);

  width: 100%;
}
.Redirect-Footer-cont2:last-child {
  border: none;
}

.Redirect-Footer-text {
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  line-height: 100%;
  white-space: nowrap;

  color: var(--LightColorPopUp);

  font-weight: 600;
  font-size: 1rem;

  cursor: pointer;
}
.Redirect-Footer-cont2:first-child .Redirect-Footer-text {
  justify-content: start;
}
.Redirect-Footer-cont2:last-child .Redirect-Footer-text {
  justify-content: end;
}

.Redirect-Footer-text::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.1rem;

  background-color: var(--MarroneChiaroScritte);

  top: 100%;
  width: 0%;
  transition: 0.5s width ease;
}
.Redirect-Footer-text:hover {
  color: var(--MarroneChiaroScritte);
}
.Redirect-Footer-text:hover::after {
  width: 100%;
}

#copyright {
  font-family: var(--font);
  font-weight: 100;
  font-size: 0.8rem;

  color: var(--LightColorPopUp);

  opacity: 0.3;

  margin-bottom: 0.5rem;
}

/*Footer*/



@media only screen and (max-width: 60rem) {
    :root {
    --translatePropety: translateY(calc(min(calc(120vw + 1rem), 47rem) - 100%));
    --Goccia-width: 3rem;
  }

  #NavBar {
    height: 3.5rem;
  }
  #LogoContainer {
    height: 3.5rem;
  }
  #Content {
    display: none;
  }
  #Login {
    display: none;
  }
  #Telefono {
    width: 100%;
  }
  .LoginMobileSVG {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;

    height: 50%;
    aspect-ratio: 1/1;

    cursor: pointer;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;

    background-color: var(--MarroneBottoni);
    border-radius: 0.6rem;
    padding: 0.3rem;

    transform: translateY(-0.2rem);

    border: 0.05rem solid rgba(0, 0, 0, 0.5);

    box-shadow: 0rem 0.2rem 0rem var(--MarroneBordi),
      0rem 0.3rem 0.2rem 0rem var(--Ombra);
  }

  .LoginMobileSVG:nth-child(1) {
    margin-left: 1rem;
  }
  .LoginMobileSVG:last-child {
    margin-right: 1rem;
  }

  .LoginMobileSVG:active {
    transform: translateY(-0.05rem);
    box-shadow: -0rem 0rem 0rem 0.03rem rgba(0, 0, 0, 0.4),
      -0rem 0.05rem 0rem var(--MarroneBordi);
  }
  .SVG {
    width: 100%;
    height: 100%;
    fill: var(--MarroneScritte);
  }
  .LoginMobileSVG h1 {
    font-size: 0.55rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;

    color: var(--Registrati);
  }

  .BottoniPiatti {
    animation: BottoniPiattiAnim 0.2s 1 forwards;
  }
  @keyframes BottoniPiattiAnim {
    0% {
    }
    100% {
      box-shadow: none;
      background-color: var(--NavBar);

      --Registrati: var(--MarroneScritte);

      transform: none;
    }
  }
  .Bottoni3D {
    animation: Bottoni3DAnim 0.2s 1 forwards;
  }
  @keyframes Bottoni3DAnim {
    0% {
      box-shadow: none;
      background-color: var(--NavBar);

      --Registrati: var(--MarroneScritte);
      transform: none;
    }
    100% {
    }
  }

  /*SVG*/

  /*SVG*/

  #LoginMobileContainer {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 60%;
    aspect-ratio: 1/1;

    margin: 0.6rem;
    border-radius: 10rem;

    background: linear-gradient(
      -45deg,
      var(--MarroneBordi),
      var(--MarroneBordi2)
    );
    box-shadow: 0.1rem 0.1rem 0.1rem var(--Ombra);

    transition: all 0.1s linear;

    cursor: pointer;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  #LoginMobile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    height: 100%;
    width: 100%;

    border-radius: 10rem;
    background-color: var(--MarroneBottoni);

    box-shadow: inset 0.05rem 0.1rem 0.1rem var(--Luce);

    transform: translateX(0.05rem) translateY(-0.1rem);

    transition: all 0.1s linear;
  }
  #LoginMobileContainer:active {
    box-shadow: none;
  }
  #LoginMobileContainer:active #LoginMobile {
    box-shadow: none;
    transform: none;
  }
  #Testa {
    display: flex;
    align-items: end;
    justify-content: center;

    height: 30%;
    aspect-ratio: 1/1;
    border-radius: 1rem;

    margin-bottom: 0.05rem;

    box-shadow: inset 0rem 0rem 0rem 0.1rem var(--NavBar);
  }
  #Testa::after {
    position: absolute;
    content: "";
    width: 0.1rem;
    height: 0.25rem;

    background-color: var(--NavBar);
    transform: translateX(0.4rem) translateY(0.15rem) rotate(-45deg);

    border-radius: 0.2rem;
  }
  #Testa::before {
    position: absolute;
    content: "";
    width: 0.1rem;
    height: 0.4rem;

    background-color: var(--NavBar);
    transform: translateX(0.4rem) translateY(calc(50% + 0.125rem)) rotate(45deg)
      translateY(calc(-50% - 0.025rem));

    border-radius: 0.2rem;
  }
  #Corpo {
    height: 40%;
    aspect-ratio: 1.3/1;
    border-radius: 0.4rem 0.4rem 0.2rem 0.2rem;

    box-shadow: inset 0rem 0rem 0rem 0.1rem var(--NavBar);
  }

  @keyframes NavBarIncavata {
    0% {
      box-shadow: 0.4rem 0.4rem 0.4rem var(--Ombra),
        -0.4rem 0.4rem 0.4rem var(--Ombra);

      scale: 101%;
    }
    50% {
      box-shadow: none;
    }
    100% {
      box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
        0.15rem -0.15rem 0.15rem var(--Ombra),
        -0.15rem -0.15rem 0.15rem var(--Ombra),
        0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
        -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
        0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5),
        -0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5);

      scale: 100%;
    }
  }

  @keyframes NavBarVolante {
    0% {
      box-shadow: inset 0rem 0.4rem 0.4rem var(--Ombra),
        0.15rem -0.15rem 0.15rem var(--Ombra),
        -0.15rem -0.15rem 0.15rem var(--Ombra),
        0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
        -0.15rem -0.15rem 0rem 0.15rem var(--BordoNavbar),
        0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5),
        -0.17rem -0.17rem 0rem 0.17rem rgba(0, 0, 0, 0.5);

      scale: 100%;
    }
    50% {
      box-shadow: none;
    }
    100% {
      box-shadow: 0.4rem 0.4rem 0.4rem var(--Ombra),
        -0.4rem 0.4rem 0.4rem var(--Ombra);

      scale: 101%;
    }
  }

  /*PopUp*/

  #SignInPopUp {
    position: relative;
    justify-content: start;
    flex-direction: column;

    width: min(calc(90vw + 1rem), 35rem);
    height: min(calc(120vw + 1rem), 47rem);

    transform: translateZ(0px);

    background: linear-gradient(
      0deg,
      var(--DarkGradientSwitch) 5%,
      var(--LightGradientSwitch) 40%,
      var(--LightGradientSwitch) 60%,
      var(--DarkGradientSwitch) 95%
    );
  }
  #ClosePopUp {
    right: unset;
    top: calc((100vh - min(calc(120vw + 1rem), 47rem)) / 2 - 9rem);
  }
  #Xanimation {
    display: none;
  }
  #XanimationMobile {
    display: flex;
    width: 100%;
    height: 100%;

    fill: var(--XColor);
  }
  #XPopUp svg {
    fill: var(--XColorMobile);
  }

  #SwitchPopUp {
    width: 100%;
    height: 25%;

    /*transform:translateY(calc( min(calc(120vw + 1rem),50rem) - 100%));*/
  }
  #Welcome1 {
    display: none;
  }
  #Welcome1-mobile {
    display: flex;
    text-align: center;
    font-family: var(--font);
    font-size: min(7vw, 2.6rem);
    font-weight: 500;
    line-height: 100%;

    letter-spacing: 5%;

    color: var(--LightColorPopUp);
  }
  #Slogan1 {
    display: none;
  }
  #Slogan1-mobile {
    display: flex;

    font-family: var(--font);
    text-align: center;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: 4%;

    color: var(--LightColorPopUp);

    margin-top: 2.5%;

    font-size: min(2.5vw, 0.95rem);
  }
  #Switch1 {
    display: none;
  }

  #FormPopUp {
    width: 100%;
    height: 75%;

    transform: var(--translatePropety);
    border-radius: 3rem;
    /*Move To Other Side*/
    /*transform: none;*/
  }
  #Form {
    justify-content: start;
  }
  .Welcome2 {
    display: none;
  }
  #Welcome2-mobile {
    display: flex;
    text-align: center;

    font-family: var(--font);
    font-size: min(10vw, 3.8rem);
    font-weight: 600;
    line-height: 100%;

    color: var(--DarkGradientSwitch);

    margin-top: 4%;
    padding-bottom: 4%;
  }
  #Slogan2 {
    display: none;
  }
  #InputFormContainer {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;

    width: 70%;
    height: auto;
  }
  #InputForm {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;

    width: 100%;
    height: min(var(--media-height), var(--media-min-height));
  }
  .inputForm {
    width: 100%;
    font-size: min(3vw, 1.15rem);

    line-height: 200%;

    border: 0.05rem solid var(--DarkGradientSwitch);
  }

  #Alternative {
    width: 70%;
    font-size: min(2vw, 0.75rem);
  }
  #SwitchText {
    font-family: var(--font);

    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;

    color: var(--DarkGradientSwitch);

    font-size: min(3vw, 1.15rem);
    font-weight: 500;

    bottom: 4%;

    white-space: nowrap;
  }
  #SwitchText a {
    color: var(--LightGradientSwitch);
    text-decoration: underline;

    padding-top: 4%;
    padding-bottom: 4%;

    font-weight: 600;

    cursor: pointer;
  }

  /*PopUp*/

  /*Menu*/
  #Menu-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: 100%;
    height: calc(100% - max(20%, 3.5rem));

    overflow: hidden;
  }

  .foot-menu-mobile {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 15%;
  }
  #ContentMenu-mobile {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    width: 100%;
    height: 85%;

    /* background: linear-gradient(var(--CenterMenuColor)0%,var(--SideMenuColor1)10%,var(--SideMenuColor1)90%,var(--CenterMenuColor)100%);*/
    background: var(--SideMenuColor1);
  }

  #MenuUserLogo-mobile {
    width: 30%;
    height: 30%;

    fill: var(--LightColorPopUp);
  }
  .MenuLogoContainer-mobile {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    aspect-ratio: 1/1;
  }
  .NomeLogoMenu-mobile {
    position: absolute;
    display: flex;
    opacity: 0;
    align-items: start;
    justify-content: center;

    color: var(--LightColorPopUp);
    font-family: var(--font);

    font-size: 2vh;

    font-weight: 500;

    width: auto;
    white-space: nowrap;
    overflow: hidden;

    margin-top: 30%;

    z-index: -1;
  }
  .foot-menu-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
  #LoginMenu {
    position: relative;
    opacity: 1;

    font-family: var(--font);

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 3.5vw;

    height: min-content;

    color: var(--LightColorPopUp);

    margin-right: 5%;

    white-space: nowrap;
  }

  #LoginMenu::after {
    content: "Account base";

    font-family: var(--font);

    font-size: 2.5vw;
    color: var(--DarkColorPopUp);
    opacity: 0.5;

    font-weight: 700;
  }

  .SingleContentMenu {
    display: flex;
    align-items: center;
    justify-content: start;

    width: 80%;
    height: max(4vh, 2rem);

    cursor: pointer;
  }
  .SingleContentMenu:last-child {
    margin-bottom: 5vh;
  }
  .SingleContentMenu:first-child {
    margin-top: 5vh;
  }

  .SingleContentMenu:hover > .SingleContentText {
    color: var(--MarroneChiaroScritte);
  }
  .SingleContentMenu:hover > .SingleContentText::after {
    width: 100%;
  }

  .SingleContentLogoContainer {
    height: 100%;
    aspect-ratio: 1/1;

    margin-left: calc(50% - (max(4vh, 2rem) / 2));
  }
  .SvgMenu {
    width: 100%;
    height: 100%;

    fill: transparent;
    stroke-width: 7%;
    stroke: var(--LightGradientSwitch);
  }
  .SvgMenuChiSiamo {
    width: 100%;
    height: 100%;

    fill: var(--LightGradientSwitch);
  }
  .SvgMenuChiSiamo2 {
    width: 100%;
    height: 100%;

    fill: var(--LightGradientSwitch);
    stroke-width: -5%;
    stroke: var(--SideMenuColor1);
  }
  .SingleContentText {
    display: none;
    justify-content: start;
    align-items: end;
    position: relative;

    width: 0%;

    font-family: var(--font);

    color: var(--MarroneScritte);
    margin-left: 5%;

    font-size: 1.5vh;
    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;
  }
  .SingleContentText::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 0.2vw;

    background-color: var(--MarroneChiaroScritte);

    transition: width 0.4s ease;
  }

  /*Menu*/    



  




  #Container{
    width: calc(100vw - 2.5rem);
    height: auto;

    margin: 1.25rem;
    margin-top: calc(min(4vh, 3rem) + 3.5rem + min(4vh, 3rem));
}

#Main{
    width: 100%;
    height: auto;
    margin: 0rem;
}

#Info{
    width: 100%;
    height: auto;

    margin-right: 0rem;

    /*background-color: rgba(255, 0, 0, 0.23);*/
}




#Utility{
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 1.5rem;
}

#BackButton{
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.8rem;
    letter-spacing: 0rem;

    height: 100%;
    padding: 0rem 0.5rem;

    border: 0.05rem solid var(--LightColorPopUp);
}
#OtherButton{
    display: flex;
    align-items: center;
    justify-content: end;

    height: 100%;
    width: 50%;
}
.OtherButton{
    height: 100%;
    aspect-ratio: 1/1;

    border-radius: 3rem;
    border: 0.05rem solid var(--LightColorPopUp);
}
.OtherButton:first-child{
    margin-right: 0.5rem;
}


#TitoloMagazzino{
    width: 100%;
    font-size: 2rem;

    margin-top: 1.25rem;
}

#TitoloDescription{
    width: 100%;

    font-size: 1rem;
    letter-spacing: 0rem;
    
    margin-top: 1.25rem;
}

#Price{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 0rem;
    flex-wrap: nowrap;

    width: 100%;
    height: auto;

    margin-top: 1.25rem;
}
#PriceLabel{
    font-size: 2.5rem;
}
#PriceLabel span{
  font-size: 0.8rem;
}
#AddCart{
    position: relative;

    height: 2.5rem;
    margin-top: 2.5rem;
}
#AddCart::after{
  content: "";
  position: absolute;

  width: 100%;
  height: 0.1rem;

  background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.4) 20% , rgba(255, 255, 255, 0.4) 80% , transparent 95%);


  top: -1.25rem;
}
#AddCart h1{
    font-family: var(--font);
    color: var(--DarkGradientSwitch);

    font-size: 1.2rem;

    /*transform: translateY(-0.5rem); Solo per centrare il font non centrato*/

    margin: 0.5rem;
}
#AddButton{
    height: calc(100% - 1rem);
    aspect-ratio: 1/1;
    margin-right: 0.25rem;
    padding: 0.25rem;

    background-color: var(--DarkGradientSwitch);
    border-radius: 3rem;
}
.AddButton{
    fill: none;
    stroke-width: 0.4rem;
    stroke: var(--LightColorPopUp);
}




/*Galleria*/
.Images{
    display: none;
  }
  .MobileImgScroll{
    display: flex;
    width: 100%;
    aspect-ratio: 1;

    margin-top: 1.25rem;
  }
.image-container {
  width: 100%;
  height: 100%;
  overflow: hidden;

  border-radius: 3rem;
}

.nav {
  position: absolute;

    font-family: var(--font);

  display: flex;
  align-items: center;
  justify-content: center;

  height: 3rem;
  aspect-ratio: 1/1;

  background: rgba(0, 0, 0, 0.6);
  color: var(--LightColorPopUp);
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 1rem;

    border-radius: 3rem;

  left: 1rem;
}
.nav:last-child{
    left: unset;
    right: 1rem;
}


#SubMain{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    width: 100%;
    height: 20%;
}

#SubMain h1{
    position: relative;

    font-family: var(--font);
    color: var(--LightGradientSwitch);

    font-weight: 400;
    font-size: 1.5rem;

    text-align: center;

    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
}
#SubMain h1:nth-child(2){
    font-size: 2.5rem;
}
#SubMain span{
    color: var(--LightColorPopUp);
}

#SubMain h1::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 0.1rem;

    bottom: -1rem;
    left: 0px;

    background-color: var(--LightColorPopUp);
    opacity: 0.2;
}









/*More*/

#MoreContainer{
  position: relative;
  width: calc(100% - 2.5rem);
  height: 10rem;

  margin: 1.25rem;
  margin-top: 0rem;
}
#MoreContainer::after{
  content: "";
  position: absolute;
  width: calc(100% + 2.5rem);
  height: 0.1rem;

  background: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, 0.4) 20% , rgba(255, 255, 255, 0.4) 80% , transparent 95%);

  bottom: 0px;
  left:-1.25rem;
}
/*More*/


/*Other*/

#OtherContainer{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 0rem;

  width: calc(100% - 2.5rem);
  height: auto;

  margin: 1.25rem;
  margin-top: 0rem;
}
.Other{
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  height: 20rem;
  width: min-content;

  margin-bottom: 2.5rem;
}
.Other:last-child{
  margin:0px;
}
.Other img{
  height: 80%;
  aspect-ratio: 1;

  object-fit: cover;

  border-radius: 3rem;
}
.subOtherContainer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  width: 100%;
  height: 10%;
}
.subOtherContainer:last-child{
  justify-content: start;
}
.InfoOther{
  color: var(--LightColorPopUp);
  font-family: var(--font);

  font-size: 1rem;
  font-weight: 500;
}
.InfoOther:last-child{
  font-weight: 600;
}
.MoreStelline{
  border-radius: 3rem;
  height: 70%;
  aspect-ratio: 1;

  background-color: rgba(255, 217, 0, 0.3);
}
.stelline{
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  background-color: rgba(255, 217, 0, 0.3);
  border-radius: 3rem;

  padding-left: 0.25rem;
  padding-right: 0.25rem;

  margin-left: 0.5rem;
}
.stelline svg{
  height: 70%;
  aspect-ratio: 1;

  margin-right: 0.25rem;

  fill: rgb(255, 225, 45);
}

/*Other*/


#ServiziAltro{
  display: flex;
  align-items: center;
  justify-content: start;

  width: calc(100% - 2.5rem);
  height: auto;

  margin: 1.25rem;

  
}
#ServiziAltro h1{
  font-family: var(--font);
    color: var(--LightColorPopUp);
    text-decoration: none;

    font-size: 0.8rem;
    letter-spacing: 0rem;
    text-transform: capitalize;
    font-weight:300;

    border-radius: 3rem;
    border: 0.05rem solid var(--LightColorPopUp);

    padding: 0.2rem 0.5rem;

    cursor: pointer;
}


/*MoreInfoContainer*/

#MoreInfoContainer{
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: calc(100% - 2.5rem);
  height:auto;

  margin: 1.25rem;
  margin-top: 0px;
}
.MoreInfoSubContainer{
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;

  width: 100%;
  height: auto;

  margin-right: 0rem;
}
.MoreInfoSubContainer:last-child{
  justify-content: center;

  width: 100%;
  margin: 0rem;
}

#MoreInfoTitle{
  font-family: var(--font);
  color: var(--LightColorPopUp);

  width: 100%;
  font-size: 2rem;
  font-weight: 500;

  margin-bottom: 1.25rem;

  text-align: center;
}


#AchievmenInfoContainer{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  height: min-content;
  max-height: 100%;

  border-radius: 2rem;

  background-color: rgb(119, 150, 79);
}

.OtherAchievment{
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: calc(100% - 2rem);
  height: 2rem;

  margin: 1rem;

  color: var(--LightColorPopUp);
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
}
.OtherAchievment:last-child{
  justify-content: end;
}
.Logo{
  height: 100%;
  aspect-ratio: 1;

  fill: var(--LightColorPopUp);
}

#Achievment{
  width: calc(100% - 2rem);
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-family: var(--font);
  font-size: 1.25rem;
  font-weight: 600;

  overflow-y: scroll;

  color: var(--LightColorPopUp);
}

#MoreInfo{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 0rem;

  width: 100%;
  height: auto;
}
.MoreInfoSub{
  flex: auto;
  min-width: unset;

  height: auto;
  width: 100%;
  margin: 0rem;
}
.MoreInfoSub:last-child{
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.MoreInfo{
  color: var(--LightColorPopUp);
  font-family: var(--font);
}
.MoreInfo p{
  font-size: 1rem;
  letter-spacing: 0rem;
  font-weight: 300;

  text-align: center;

  margin-bottom: 1.25rem;
}
.MoreInfo a{
  color: var(--LightColorPopUp);
}

.SubMoreInfo{
  text-align: center;

  margin-bottom: 1.25rem;
  width: calc(100% - 2rem);
  border-radius: 3rem;

  padding-left: 1rem;
  padding-right: 1rem;

  font-size: 1.25rem;
  font-weight: 600;

  border: 0.1rem solid var(--LightColorPopUp);
}
.SubMoreInfo:nth-child(3){
  margin-top: 2.5rem;
}



.svgContainerFaq{
  display: flex;
  align-items: center;
  justify-content: end;

  width: 100%;
  height: 100%;

  
}
.Faq{
  display: flex;
  align-items: center;
  justify-content: start;

  width: 100%;
  height: 2rem;
  border-bottom: 0.1rem solid var(--LightColorPopUp);

  color: var(--LightColorPopUp);
  font-family: var(--font);

  margin-bottom: 1.25rem;
  white-space: nowrap;
}
.Faq h2{
  font-size: 0.8rem;
  font-weight: 700;
}
.Faq h1{
  font-size: 1.25rem;
  font-weight: 500;

  margin-left: 1.25rem;
}

.Faq svg{
  height: 100%;
  aspect-ratio: 1;

  stroke-width: 0.1rem;
  stroke: var(--LightColorPopUp);

  cursor: pointer;
}
/*MoreInfoContainer*/


  /*Footer*/
  #Footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    height: min(160vw, 76rem);
  }

  .Footer-sub {
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    width: 100%;
    height: 100%;
  }
  .Footer-sub:nth-child(1) {
    justify-content: start;
    height: 75%;
  }
  .Footer-sub:nth-child(2) {
    display: none;
  }
  .Footer-sub:nth-child(3) {
    justify-content: space-between;

    height: 25%;

    background-color: var(--BordoNavbar);
  }

  #FooterCompanyLogo {
    font-size: min(8vw, 3rem);
  }

  .Dati-Azzienda {
    display: none;
  }
  #Dati-Azzienda-mobile {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;

    width: 100%;
    height: 100%;
  }
  .Dati-Azzienda-mobile {
    color: var(--LightColorPopUp);

    font-size: min(2.5vw, 1.2rem);
    font-weight: 100;
    opacity: 0.5;

    line-height: 200%;

    margin-left: 5%;
  }
  .Dati-Azzienda-mobile h1 {
    color: var(--LightColorPopUp);
    text-decoration: none;
    -webkit-touch-callout: none;
  }

  .Footer-sub-cont {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 80%;
    height: min-content;
  }
  .Footer-sub-cont:nth-child(1) {
    height: 10%;

    margin-top: 5%;
  }
  .Footer-sub-cont:nth-child(2) {
    flex-direction: column;
    align-items: start;
    justify-content: center;

    height: 65%;

    margin-top: 2%;
  }
  .Footer-sub-cont:nth-child(3) {
    height: 6%;

    margin-top: 2%;
  }

  .Social3D-cont {
    height: 100%;

    /*border: 0.05rem solid rgba(0, 0, 0, 0.5);
        box-shadow: 0rem -0.15rem 0rem 0rem rgba(255, 255, 255, 0.8),
                    0rem 0.2rem 0.2rem var(--Ombra);

        transform:  translateY(0.15rem)
                    translateX(0rem);*/

    border: 0.12rem solid var(--LightColorPopUp);
  }

  .scritte-Footer {
    display: none;
  }
  #scritte-Footer-mobile {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }
  .scritte-Footer-h1 {
    font-size: min(4vw, 1.5rem);
  }

  #Redirect-Footer-cont {
    display: none;
  }

  #copyright {
    font-size: min(2.5vw, 0.8rem);
  }
  /*Footer*/
}