@charset "UTF-8";


@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=PT+Sans+Narrow&family=Poppins:wght@800&display=swap');
@font-face {
    font-family: 'Lane';
    src: url('../FONT/Nuovi/NeuzeitGro-Reg.woff');
}


*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
    font-size: 12px;
}

body, html{
  background: #E3EDF7;
  height:100vh;
  -webkit-font-smoothing: antialiased;
}



/* MAIN REVOLUTION */
   #inizio{
     position:absolute;
     width:100%;
     height:100vh;
     position:absolute;
     z-index:9;
     background:#FFF;
   }

   .iris-leave-active {
     animation: 1s shutters linear;
   }

   @keyframes shutters {
     0% {

     clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);

     }
     100% {
       background:#FFF;
       clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%);


     }
   }


/* FINE MAIN REVOLUTION */

.SansNarrow{
  font-family: 'PT Sans Narrow', sans-serif;
}
.DmSerif{
  font-family: 'DM Serif Display', serif;
}

.Poppins{
  font-family: 'Poppins', sans-serif;
}
.Lane{
 font-family: 'Lane', serif;

}
.textStroke{
  color:transparent;
  -webkit-text-stroke:1px #FFF;

}
.textStroke_black {
  color: transparent;
  -webkit-text-stroke: 1px #000;

}

.NotextStroke{
  color:transparent;
    -webkit-text-stroke:0px transparent;
}

.textColor{
  color:#FFF;
}


.cont_w100_hauto_l20_cb{
  width:100%;
  height:auto;
  line-height:20px;
  clear:both;
}

.cont_w100_h25_l25_cb{
  width:100%;
  height:25px;
  line-height:25px;
  clear:both;
}
/* top,right,bottom,left */
.cont_wauto_h25_l25_fl_padlr5{
  width:auto;
  height:25px;
  line-height:25px;
  float:left;
  padding:0px 5px 0px 5px;
}

/* top,right,bottom,left */
.cont_wauto_h25_l25_fr_padlr5{
  width:auto;
  height:25px;
  line-height:25px;
  float:right;
  padding:0px 5px 0px 5px;
}

.contIamgeFull_w100_hauto{
  width:100%;
  height:auto;
  background-repeat:no-repeat center center fixed;
  background-size: cover;
  clear:both;
}

.contShadow_wauto_hauto_fl{
  width:auto;
  height:auto;
-moz-box-shadow: 0px 4px 5px #DDD;
-webkit-box-shadow: 0px 4px 5px #000;
box-shadow: 0px 4px 5px #000;
  float:left;
}
.cont_absolute_wauto_hauto_cb{
  width:auto;
  height:auto;
  clear:both;
  position:absolute;
}

.cont_center_wauto_hauto_cb{
  width:auto;
  height:auto;
  clear:both;
  position:relative;
  left:50%;
}

.skill{
  width:160px;
  height:160px;
  /* background: cornflowerblue; */
  position:relative;

}

.outer{
  height:160px;
  width:160px;
  border-radius: 50%;
  /* border:1px solid red; */
  padding:20px;
  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
                -6px -6px 10px -1px rgba(255,255,255,0.7);
}
.inner{
  height:120px;
  width:120px;
  border-radius: 50%;
  display:flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* border:1px solid red; */
  box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
                      inset -4px -4px 6px -1px rgba(255,255,255,0.7),
                      -0.5px -0.5px 0px rgba(255,255,255,1),
                        0.5px 0.5px 0px rgba(0,0,0,0.15),
                         0px 12px 10px -10px rgba(0,0,0,0.05);
}
.numero{
  font-weight: 600px;
  color:#555;

}
circle{
  fill:none;
  stroke:url(#GradientColor);
  stroke-width: 20px;
  stroke-dasharray:472;
  /* stroke-dashoffset:472; */
  /* opacity:1; */
  animation: anim 3s alternate-reverse infinite;

}
.circolo{
  position:absolute;
  top:0;
  left:0;
}

.appare{
  position:relative;
animation: fadeIn 2s;
}

.container{
  position:relative;
  width:400px;
  margin-left:-200px;
  top: 35%;
  /* transform-origin: center; */
  animation: move-left 1.2s linear;
}



@keyframes fadeIn {
  0% { opacity: 0;
    margin-top:0px;

   }
   50% { opacity: 0;
     margin-top:30px;

    }
  100% {opacity: 1;
    margin-top:0px;
   }
}

@keyframes anim {
  0%{
    opacity:0;
      stroke-dashoffset:472;
  }

  50%{
    opacity:.5;
  }

  100%{
    stroke-dashoffset:0;
    opacity:0;
  }
}


  @keyframes move-left {
    0%{
        top: -20%;
        opacity: 0;
        /* transform: rotateY(0deg) rotateZ(-360deg);
        transform: translateY(0deg); */

    }

    /* 50%{
      top: 10%;
      opacity: 0.5;
      transform: rotateY(0deg) rotateZ(-360deg);
      transform: translateY(360deg);
    } */

    100%{
    top: 35%;
     opacity: 1;
      /* transform: rotateY(0deg) rotateZ(0deg);
      transform: translateY(0deg); */
        /* transform: rotateZ(90deg); */
    }


  }
span.base{
  font-family: 'Lane';letter-spacing: 6px; font-size:2em;
}