@font-face {
  font-family: techfont;
  src: url(../Resources/fonts/JuliusSansOne-Regular.ttf);
}

@-webkit-keyframes animationIcona {
  0% {
    top: 48%;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 48%;
  }
}

@keyframes animationIcona {
  0% {
    top: 48%;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 48%;
  }
}

@-webkit-keyframes rotateSquare {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotateSquare {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes rotatecircle {
  from {
    transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
  }
}

@keyframes rotatecircle {
  from {
    transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
  }
}

@-webkit-keyframes rotatecircleInv {
  from {
    transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    -o-transform: rotateX(360deg);
  }
}

@keyframes rotatecircleInv {
  from {
    transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    -o-transform: rotateX(360deg);
  }
}

.activateSquare {
  -webkit-animation: rotateSquare 15s infinite linear;
          animation: rotateSquare 15s infinite linear;
}

.squareContainer {
  position: relative;
  -webkit-transform-origin: center;
          transform-origin: center;
  pointer-events: none;
}

.squareContainer span {
  position: absolute;
  width: 0px;
  height: 0px;
  left: calc(50% - 250px);
  top: calc(50% - 250px);
  -webkit-transition: all 1s;
  transition: all 1s;
}

.squareContainer span:nth-of-type(2) {
  border-radius: 50%;
}

.squareContainer span:nth-of-type(1), .squareContainer .squareMenu span:nth-of-type(5), .squareMenu .squareContainer span:nth-of-type(5), .squareContainer .squareMenu span:nth-of-type(6), .squareMenu .squareContainer span:nth-of-type(6) {
  border-radius: 50%;
}

.squareContainer .activateRotationInv {
  -webkit-animation: rotatecircleInv 40s infinite linear;
          animation: rotatecircleInv 40s infinite linear;
}

.squareContainer .activateRotation {
  -webkit-animation: rotatecircle 40s infinite linear;
          animation: rotatecircle 40s infinite linear;
}

.squareContainer .comparsaCerchi {
  width: 500px;
  height: 500px;
  border: solid #e82525 2px;
}

.squareContainer::after {
  content: "";
  border: double 4px #1ec2b4;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 40%;
  top: 40%;
  border-radius: 50%;
}

.squareContainer::before {
  content: "";
  border: double 4px #1ec2b4;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 60%;
  top: 60%;
  border-radius: 50%;
}

.icon {
  position: absolute;
  width: 120px;
  height: 120px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
  border-radius: 50%;
  -webkit-transform-origin: center !important;
          transform-origin: center !important;
}

.comparsaIcona {
  opacity: 1;
}

@-webkit-keyframes bolt {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes bolt {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.boltON {
  -webkit-animation: bolt 0.2s forwards;
          animation: bolt 0.2s forwards;
}

.floatingON {
  -webkit-animation: animationIcona 2s linear infinite;
          animation: animationIcona 2s linear infinite;
}

.bolt {
  position: absolute;
  width: 600px;
  height: 600px;
  left: 45%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

@-webkit-keyframes rotateMenuAni1 {
  from {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
            transform: translate(-50%, -50%) rotateZ(45deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
            transform: translate(-50%, -50%) rotateZ(0deg);
    left: 20%;
    top: 36%;
  }
}

@keyframes rotateMenuAni1 {
  from {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
            transform: translate(-50%, -50%) rotateZ(45deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
            transform: translate(-50%, -50%) rotateZ(0deg);
    left: 20%;
    top: 36%;
  }
}

@-webkit-keyframes rotateMenuAni2 {
  from {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
            transform: translate(-50%, -50%) rotateZ(45deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotateZ(-90deg);
            transform: translate(-50%, -50%) rotateZ(-90deg);
    left: 20%;
    top: 36%;
  }
}

@keyframes rotateMenuAni2 {
  from {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
            transform: translate(-50%, -50%) rotateZ(45deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotateZ(-90deg);
            transform: translate(-50%, -50%) rotateZ(-90deg);
    left: 20%;
    top: 36%;
  }
}

@-webkit-keyframes rotateMenuAni3 {
  from {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
            transform: translate(-50%, -50%) rotateZ(45deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotateZ(180deg);
            transform: translate(-50%, -50%) rotateZ(180deg);
    left: 20%;
    top: 36%;
  }
}

@keyframes rotateMenuAni3 {
  from {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
            transform: translate(-50%, -50%) rotateZ(45deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotateZ(180deg);
            transform: translate(-50%, -50%) rotateZ(180deg);
    left: 20%;
    top: 36%;
  }
}

@-webkit-keyframes rotateMenuAni4 {
  from {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
            transform: translate(-50%, -50%) rotateZ(45deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotateZ(90deg);
            transform: translate(-50%, -50%) rotateZ(90deg);
    left: 20%;
    top: 36%;
  }
}

@keyframes rotateMenuAni4 {
  from {
    -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
            transform: translate(-50%, -50%) rotateZ(45deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotateZ(90deg);
            transform: translate(-50%, -50%) rotateZ(90deg);
    left: 20%;
    top: 36%;
  }
}

.rotateMenu1 {
  -webkit-animation: rotateMenuAni1 0.5s forwards;
          animation: rotateMenuAni1 0.5s forwards;
}

.rotateMenu2 {
  -webkit-animation: rotateMenuAni2 0.5s forwards;
          animation: rotateMenuAni2 0.5s forwards;
}

.rotateMenu3 {
  -webkit-animation: rotateMenuAni3 0.5s forwards;
          animation: rotateMenuAni3 0.5s forwards;
}

.rotateMenu4 {
  -webkit-animation: rotateMenuAni4 0.5s forwards;
          animation: rotateMenuAni4 0.5s forwards;
}

.squareMenu {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
          transform: translate(-50%, -50%) rotateZ(45deg);
}

.squareMenu span {
  width: 50px;
  height: 50px;
  position: absolute;
  font-size: 18px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 1s;
  transition: all 1s;
  -webkit-transform-origin: center;
          transform-origin: center;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 2;
}

.squareMenu span:nth-of-type(1), .squareMenu span:nth-of-type(5), .squareMenu span:nth-of-type(6) {
  left: 50%;
  top: -10%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
}

.squareMenu span:nth-of-type(2) {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  right: -10%;
  top: 50%;
  -webkit-transform: translateY(-50%) rotateZ(180deg);
          transform: translateY(-50%) rotateZ(180deg);
}

.squareMenu span:nth-of-type(3) {
  bottom: -10%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.squareMenu span:nth-of-type(4) {
  left: -10%;
  top: 50%;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  -webkit-transform: rotateZ(180deg) translateY(-50%);
          transform: rotateZ(180deg) translateY(-50%);
}

@-webkit-keyframes animazioneMano {
  0% {
    top: -30%;
    left: 70%;
  }
  50% {
    left: 60%;
    top: -8%;
  }
  60%, 100% {
    left: 60%;
    top: -8%;
    -webkit-transform: translate(-50%) scale(0.6);
            transform: translate(-50%) scale(0.6);
  }
}

@keyframes animazioneMano {
  0% {
    top: -30%;
    left: 70%;
  }
  50% {
    left: 60%;
    top: -8%;
  }
  60%, 100% {
    left: 60%;
    top: -8%;
    -webkit-transform: translate(-50%) scale(0.6);
            transform: translate(-50%) scale(0.6);
  }
}

@-webkit-keyframes animazioneManoP {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  50% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  60%, 100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    border: solid red 2px;
  }
}

@keyframes animazioneManoP {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  50% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  60%, 100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    border: solid red 2px;
  }
}

.squareMenu span:nth-of-type(5) {
  background: url("../Resources/tap.png");
  left: 55%;
  top: -8%;
  background-size: contain;
  -webkit-transform: translate(-50%) scale(0.8);
          transform: translate(-50%) scale(0.8);
  -webkit-animation: animazioneMano 3s linear infinite;
          animation: animazioneMano 3s linear infinite;
  pointer-events: none;
  will-change: scroll-position;
}

.squareMenu span:nth-of-type(6) {
  border-radius: 50%;
  left: 58%;
  top: -5%;
  padding: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: animazioneManoP 3s linear infinite !important;
          animation: animazioneManoP 3s linear infinite !important;
  pointer-events: none;
  will-change: scroll-position;
}

@-webkit-keyframes animazioneSpostamentoNucleo {
  from {
    top: 50%;
  }
  to {
    top: 5%;
    left: 24%;
    -webkit-transform: scale(1.5) translate(-50%, -50%);
            transform: scale(1.5) translate(-50%, -50%);
  }
}

@keyframes animazioneSpostamentoNucleo {
  from {
    top: 50%;
  }
  to {
    top: 5%;
    left: 24%;
    -webkit-transform: scale(1.5) translate(-50%, -50%);
            transform: scale(1.5) translate(-50%, -50%);
  }
}

.spostaNucleo {
  -webkit-animation: animazioneSpostamentoNucleo 1s forwards;
          animation: animazioneSpostamentoNucleo 1s forwards;
}

@-webkit-keyframes spostaIconaA {
  to {
    left: 24%;
    top: 5%;
    -webkit-transform: scale(0.5) translate(-50%, -50%);
            transform: scale(0.5) translate(-50%, -50%);
  }
}

@keyframes spostaIconaA {
  to {
    left: 24%;
    top: 5%;
    -webkit-transform: scale(0.5) translate(-50%, -50%);
            transform: scale(0.5) translate(-50%, -50%);
  }
}

.spostaIcona {
  -webkit-animation: spostaIconaA 1s forwards;
          animation: spostaIconaA 1s forwards;
}

@-webkit-keyframes textRevealBlock {
  from {
    height: 0%;
  }
  to {
    height: 100%;
    padding: 5%;
    z-index: 10000;
  }
}

@keyframes textRevealBlock {
  from {
    height: 0%;
  }
  to {
    height: 100%;
    padding: 5%;
    z-index: 10000;
  }
}

.activateSectionTest {
  -webkit-animation: textRevealBlock 1s forwards;
          animation: textRevealBlock 1s forwards;
}

.textRevealNucleo {
  width: 50%;
  height: 0%;
  float: right;
  background: rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
          box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  font-size: 18px;
  line-height: 2em;
  border-radius: 0 !important;
  font-family: techfont;
}

.textRevealNucleo p {
  opacity: 1;
  position: absolute;
  width: 70%;
  height: 70%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-weight: 400;
}

.textRevealNucleo span {
  background-color: #e82525;
  position: absolute;
  will-change: contents;
  z-index: 10 !important;
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
          box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

@-webkit-keyframes setOne1 {
  from {
    width: 0%;
  }
  to {
    width: 10%;
  }
}

@keyframes setOne1 {
  from {
    width: 0%;
  }
  to {
    width: 10%;
  }
}

.setOne1 {
  -webkit-animation: setOne1 0.5s forwards;
          animation: setOne1 0.5s forwards;
}

.textRevealNucleo span:nth-of-type(1), .textRevealNucleo .squareMenu span:nth-of-type(5), .squareMenu .textRevealNucleo span:nth-of-type(5), .textRevealNucleo .squareMenu span:nth-of-type(6), .squareMenu .textRevealNucleo span:nth-of-type(6) {
  bottom: 30%;
  left: 0;
  width: 0%;
  height: 2px;
  -webkit-transform-origin: left !important;
          transform-origin: left !important;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes setOne2 {
  from {
    height: 0%;
  }
  to {
    height: 3%;
  }
}

@keyframes setOne2 {
  from {
    height: 0%;
  }
  to {
    height: 3%;
  }
}

.setOne2 {
  -webkit-animation: setOne2 0.5s forwards;
          animation: setOne2 0.5s forwards;
}

.textRevealNucleo span:nth-of-type(2) {
  bottom: 27.2%;
  left: 10%;
  width: 2px;
  height: 0%;
  -webkit-transform-origin: bottom !important;
          transform-origin: bottom !important;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

@-webkit-keyframes setOne3 {
  from {
    width: 0%;
  }
  to {
    width: 40%;
  }
}

@keyframes setOne3 {
  from {
    width: 0%;
  }
  to {
    width: 40%;
  }
}

.setOne3 {
  -webkit-animation: setOne3 0.5s forwards;
          animation: setOne3 0.5s forwards;
}

.textRevealNucleo span:nth-of-type(3) {
  bottom: 27.1%;
  left: 10%;
  width: 0%;
  height: 2px;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

@-webkit-keyframes setTwo1 {
  from {
    width: 0%;
  }
  to {
    width: 20%;
  }
}

@keyframes setTwo1 {
  from {
    width: 0%;
  }
  to {
    width: 20%;
  }
}

.setTwo1 {
  -webkit-animation: setTwo1 0.5s forwards;
          animation: setTwo1 0.5s forwards;
}

.textRevealNucleo span:nth-of-type(4) {
  bottom: 10%;
  left: 0;
  width: 0%;
  height: 2px;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

@-webkit-keyframes setTwo2 {
  from {
    height: 0%;
  }
  to {
    height: 10%;
  }
}

@keyframes setTwo2 {
  from {
    height: 0%;
  }
  to {
    height: 10%;
  }
}

.setTwo2 {
  -webkit-animation: setTwo2 0.5s forwards;
          animation: setTwo2 0.5s forwards;
}

.textRevealNucleo span:nth-of-type(5) {
  bottom: 10%;
  left: 20%;
  width: 2px;
  height: 0%;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

@-webkit-keyframes setTwo3 {
  from {
    width: 0%;
  }
  to {
    width: 30%;
  }
}

@keyframes setTwo3 {
  from {
    width: 0%;
  }
  to {
    width: 30%;
  }
}

.setTwo3 {
  -webkit-animation: setTwo3 0.5s forwards;
          animation: setTwo3 0.5s forwards;
}

.textRevealNucleo span:nth-of-type(6) {
  bottom: 20%;
  left: 20%;
  width: 0%;
  height: 2px;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

@-webkit-keyframes setTwo4 {
  from {
    height: 0%;
  }
  to {
    height: 10%;
  }
}

@keyframes setTwo4 {
  from {
    height: 0%;
  }
  to {
    height: 10%;
  }
}

.setTwo4 {
  -webkit-animation: setTwo4 0.5s forwards;
          animation: setTwo4 0.5s forwards;
}

.textRevealNucleo span:nth-of-type(7) {
  bottom: 20%;
  left: 50%;
  width: 2px;
  height: 0%;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

@-webkit-keyframes setThree1 {
  from {
    width: 0%;
  }
  to {
    width: 15%;
  }
}

@keyframes setThree1 {
  from {
    width: 0%;
  }
  to {
    width: 15%;
  }
}

.setThree1 {
  -webkit-animation: setThree1 0.5s forwards;
          animation: setThree1 0.5s forwards;
}

.textRevealNucleo span:nth-of-type(8) {
  bottom: 40%;
  left: 0%;
  width: 0%;
  height: 2px;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

@-webkit-keyframes setThree2 {
  from {
    height: 0%;
  }
  to {
    height: 10%;
  }
}

@keyframes setThree2 {
  from {
    height: 0%;
  }
  to {
    height: 10%;
  }
}

.setThree2 {
  -webkit-animation: setThree2 0.5s forwards;
          animation: setThree2 0.5s forwards;
}

.textRevealNucleo span:nth-of-type(9) {
  bottom: 30.3%;
  left: 15%;
  width: 2px;
  height: 0%;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

@-webkit-keyframes setThree3 {
  from {
    width: 0%;
  }
  to {
    width: 30%;
  }
}

@keyframes setThree3 {
  from {
    width: 0%;
  }
  to {
    width: 30%;
  }
}

.setThree3 {
  -webkit-animation: setThree3 0.5s forwards;
          animation: setThree3 0.5s forwards;
}

.textRevealNucleo span:nth-of-type(10) {
  bottom: 30.3%;
  left: 15%;
  width: 0%;
  height: 2px;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

@-webkit-keyframes setFour1 {
  from {
    height: 0%;
  }
  to {
    height: 30%;
  }
}

@keyframes setFour1 {
  from {
    height: 0%;
  }
  to {
    height: 30%;
  }
}

.setFour1 {
  -webkit-animation: setFour1 0.5s forwards;
          animation: setFour1 0.5s forwards;
}

.textRevealNucleo span:nth-of-type(11) {
  bottom: 0%;
  left: 55%;
  width: 2px;
  height: 0%;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

#neon {
  color: #e82525;
  border-radius: 10px;
  position: absolute;
  text-transform: uppercase;
  text-align: center;
  -webkit-transition: all 500ms;
  transition: all 500ms;
  letter-spacing: 2px;
  width: 120px;
  height: 80px;
  bottom: 24%;
  left: 45%;
  outline: none !important;
  font-size: 12px;
  font-weight: 700 !important;
  border: solid #e82525 2px !important;
  z-index: 1000 !important;
  background: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#neon:hover {
  background-color: #e82525;
  color: white;
}

.closeNucleo {
  position: absolute;
  top: 3%;
  left: 3%;
  width: 20px;
  height: 20px;
  z-index: 11111;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  pointer-events: none;
  cursor: pointer;
}

.comparsaCloseNucelo {
  opacity: 1 !important;
  pointer-events: all;
}

.titoloMobile {
  font-size: 20px;
  opacity: 0;
}

.decorationImage {
  position: absolute;
  width: 50%;
  height: auto;
  bottom: 0%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

@-webkit-keyframes activeBigImageA {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes activeBigImageA {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.activeBigImage {
  -webkit-animation: activeBigImageA 1s forwards;
          animation: activeBigImageA 1s forwards;
}

@media (max-width: 480px) {
  .decorationImage {
    display: none;
  }
  @-webkit-keyframes textRevealBlock {
    from {
      height: 0%;
    }
    to {
      height: 100%;
    }
  }
  @keyframes textRevealBlock {
    from {
      height: 0%;
    }
    to {
      height: 100%;
    }
  }
  #neon {
    padding: 0;
  }
  .textRevealNucleo {
    height: 0%;
    width: 100%;
    bottom: 0;
    border-radius: 0;
  }
  .textRevealNucleo P {
    font-size: 14px;
    width: 85%;
    height: 50%;
    top: 40%;
    line-height: 1.2rem;
    overflow-y: scroll;
  }
  .icon {
    width: 80px;
    height: 80px;
  }
  .squareContainer {
    position: relative;
    -webkit-transform-origin: center;
            transform-origin: center;
    pointer-events: none;
  }
  .squareContainer span {
    left: calc(50% - 150px);
    top: calc(50% - 150px);
  }
  .squareContainer::before {
    left: 56%;
    top: 56%;
  }
  .comparsaCerchi {
    width: 300px !important;
    height: 300px !important;
  }
  .squareMenu {
    width: 300px;
    height: 300px;
  }
  .closeNucleo {
    left: 5%;
  }
  .titoloMobile {
    opacity: 1;
    margin-top: 60px;
  }
}

@media (min-width: 481px) and (max-width: 1024px) {
  .decorationImage {
    display: none;
  }
  .titoloMobile {
    opacity: 1;
    margin-top: 60px;
  }
  @-webkit-keyframes textRevealBlock {
    from {
      height: 0%;
    }
    to {
      height: 100%;
    }
  }
  @keyframes textRevealBlock {
    from {
      height: 0%;
    }
    to {
      height: 100%;
    }
  }
  @-webkit-keyframes animazioneSpostamentoNucleo {
    to {
      top: 85%;
      -webkit-transform: scale(1.5) translate(-50%, -50%);
              transform: scale(1.5) translate(-50%, -50%);
    }
  }
  @keyframes animazioneSpostamentoNucleo {
    to {
      top: 85%;
      -webkit-transform: scale(1.5) translate(-50%, -50%);
              transform: scale(1.5) translate(-50%, -50%);
    }
  }
  .textRevealNucleo {
    height: 0%;
    width: 100%;
    bottom: 0;
  }
  .textRevealNucleo P {
    font-size: 20px;
    top: 50%;
  }
  @-webkit-keyframes rotateMenuAni1 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
              transform: translate(-50%, -50%) rotateZ(0deg);
      top: 95%;
      left: 50%;
    }
  }
  @keyframes rotateMenuAni1 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
              transform: translate(-50%, -50%) rotateZ(0deg);
      top: 95%;
      left: 50%;
    }
  }
  @-webkit-keyframes rotateMenuAni2 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(-90deg);
              transform: translate(-50%, -50%) rotateZ(-90deg);
      top: 95%;
      left: 50%;
    }
  }
  @keyframes rotateMenuAni2 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(-90deg);
              transform: translate(-50%, -50%) rotateZ(-90deg);
      top: 95%;
      left: 50%;
    }
  }
  @-webkit-keyframes rotateMenuAni3 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(180deg);
              transform: translate(-50%, -50%) rotateZ(180deg);
      top: 95%;
      left: 50%;
    }
  }
  @keyframes rotateMenuAni3 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(180deg);
              transform: translate(-50%, -50%) rotateZ(180deg);
      top: 95%;
      left: 50%;
    }
  }
  @-webkit-keyframes rotateMenuAni4 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(90deg);
              transform: translate(-50%, -50%) rotateZ(90deg);
      top: 95%;
      left: 50%;
    }
  }
  @keyframes rotateMenuAni4 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(90deg);
              transform: translate(-50%, -50%) rotateZ(90deg);
      top: 95%;
      left: 50%;
    }
  }
  #neon {
    width: 130px;
    height: 60px;
    bottom: 27% !important;
    z-index: 100000;
  }
}

@media (min-width: 1030px) and (max-width: 1440px) {
  .textRevealNucleo p {
    font-size: 16px;
    top: 40%;
  }
  @-webkit-keyframes rotateMenuAni1 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
              transform: translate(-50%, -50%) rotateZ(0deg);
      left: 20%;
      top: 50%;
    }
  }
  @keyframes rotateMenuAni1 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(0deg);
              transform: translate(-50%, -50%) rotateZ(0deg);
      left: 20%;
      top: 50%;
    }
  }
  @-webkit-keyframes rotateMenuAni2 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(-90deg);
              transform: translate(-50%, -50%) rotateZ(-90deg);
      left: 20%;
      top: 50%;
    }
  }
  @keyframes rotateMenuAni2 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(-90deg);
              transform: translate(-50%, -50%) rotateZ(-90deg);
      left: 20%;
      top: 50%;
    }
  }
  @-webkit-keyframes rotateMenuAni3 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(180deg);
              transform: translate(-50%, -50%) rotateZ(180deg);
      left: 20%;
      top: 50%;
    }
  }
  @keyframes rotateMenuAni3 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(180deg);
              transform: translate(-50%, -50%) rotateZ(180deg);
      left: 20%;
      top: 50%;
    }
  }
  @-webkit-keyframes rotateMenuAni4 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(90deg);
              transform: translate(-50%, -50%) rotateZ(90deg);
      left: 20%;
      top: 50%;
    }
  }
  @keyframes rotateMenuAni4 {
    from {
      -webkit-transform: translate(-50%, -50%) rotateZ(45deg);
              transform: translate(-50%, -50%) rotateZ(45deg);
    }
    to {
      -webkit-transform: translate(-50%, -50%) rotateZ(90deg);
              transform: translate(-50%, -50%) rotateZ(90deg);
      left: 20%;
      top: 50%;
    }
  }
}
/*# sourceMappingURL=stile3.css.map */