*{padding: 0;
margin: 0;}


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #f57ab0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#cookie{cursor: pointer;
    font-size: 12px;
    color: dimgray;
}

#cookie:hover{color: black;}

#wc{margin: 0 auto;
    padding-top: 200px;
width: 80%;
}

.cre{color: black;font-size: 14px;color: dimgray;text-decoration: none;}
.cre:hover{text-decoration: none;color: black;}
.contattiTitle{font-size: 10vw;
font-weight: 700;}

.Herocontatti{font-size: 1vw!important;
text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    font-size: 4vw!important;
 

}

.sx{text-align: left!important;}

#piva{

text-align: center;
    z-index: 30;
   padding: 20px;
    color: #333;
    font-weight: 500;
font-size: 14px;
}

.tvTesti{font-size: 1.4vw!important;text-align: right!important;
    display: block;
text-transform: uppercase;}

.titoletto{font-size: 44vh;text-align: center;
    display: block;
    line-height: 44vh;
    margin-bottom: 60px;
font-weight: 700;}

.tv{margin-bottom: 2vh;
}

.Cyo p a{text-decoration: none;
    transition: 0.5s ease;
color: #c81f82;}

.Cyo p a:hover{color: black;}

.spazione{height: 20vh;}
.social{display: flex;
    position: fixed;
   z-index: 5;
    
top:10px;
right:50px;}

.foto {display: flex;
    
    padding: 8vw;
   
flex-wrap: wrap;}
.fotoSing{
    width: 50%;
}
.fotoSing{ background-color: black;}
.piccolo{
    
    font-weight: 600!important;
 
   
    font-size: 1.8vw;
    line-height: 2.2vw!important;
    text-transform: uppercase;
  

    
}

.social a{display: block;
width: 30px;
    opacity: 0.8;
    
padding: 10px;}

.social a img{background-color: white;
    border:solid 1px black;
   
border-radius: 50%;}

.social a:hover{opacity: 1;}

body{overflow-x: hidden;}
@font-face {
    font-family: 'jejumyeongjoregular';
    src: url('../font/jejumyeongjo-regular-webfont.woff2') format('woff2'),
         url('../font/jejumyeongjo-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.link a{color: black;
text-decoration: none;}

.foto2{padding-top:4vw; }

#wrapLoop{
overflow: hidden;
 

    position: relative;
    z-index: 10;
    width: 100%!important;

left: 0;}

#pippo{color: black;
display: flex;
    font-size: 14vw;
     animation: loop 20s infinite linear;
     white-space: nowrap;
    font-weight: 700;
    color: rgba(0,0,0,0.7);
    text-transform: uppercase;
    mix-blend-mode:multiply;
    
flex-wrap: nowrap;}


@keyframes loop {
  100% {

    transform: translateX(-100%);
  }
}

#pippo p{display: flex;
justify-content: center;
align-items: center;}
#pippo p:before{
    content: "";
    height: 40px;
    border-radius: 50%;
    width: 40px;
    margin-left: 50px;
    margin-right: 30px;

    display: inline-block;
    background-color: #c81f82;
}
footer{display: flex;
justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2vw;
    opacity: 0;
    box-sizing: border-box;
background-color: white;
     
    
}


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

padding-bottom: 2vw;

padding-right: 0;
padding-left: 0;}

.half{width: 50%;
text-align: center;}

.tecnica{padding: 4vw;
font-size: 1.8vw;
    text-align: right;
    
}
.txtTecnico{

    display: block;
    font-size: 1.2vw;
    line-height:  1.3vw!important;
 
   

}

.bianco{
background-image: url("../img/headNozza.png");
background-size: cover;
    background-position: center;
}
.bloccoLoghi img{width: 20%;
    filter: grayscale(1);
 
display: block;}

.bloccoLoghi{display: flex;
    flex-wrap: wrap;
       background-color: white;
     filter: grayscale(1);
    
    

}

.orange{color: orange;}
.bombo{color:#04c27d;}
.blue{color: blue;}

.red{color: red;}
.titleTecnica{text-transform: uppercase;
    font-weight: bold;
    padding-bottom: 2vw;
font-size: 4vw;
    
    line-height: 4vw;
}

.ruota{width: 50%;
   
margin: 0 auto;}


.introSez{font-size: 1.4vw;
    line-height: 1.4vw;
    width: 100%;
    column-gap: 40px;
   width: 50%;
    text-align: left;
    padding-bottom: 2vw;

}
body{font-family: "League Spartan", sans-serif;

    font-family: "Josefin Slab", serif;


    
}

.colonna{width: 50%;
}
.scritta{
 
    top:2vw;
    
   padding-bottom: 4vw;
    overflow: hidden;
 
    font-size: 7vw!important;
}

.scrittaIn{
    text-align: center;
    font-weight: 700;

   
transform: translateX(50%)}

.firma{display: block;
font-size: 1.2vw;
    font-style: italic;
}

.wq{position: relative;}
.quadrato{
animation: rq 4s linear infinite  both;
    opacity: 0.4;
    mix-blend-mode:difference;
width: 150px;
    height: 150px;
   



}
@keyframes rq{
    0%{transform: rotate(0) scale(0.5) translateY(-50%);}
    100%{transform: rotate(360deg) scale(0.5) translateY(-50%);}
 
  
    
}

.testo{font-style: italic;
    mix-blend-mode:hard-light;
    padding-bottom: 2vw;
    display: block;
font-weight: 600;}

.left{padding-right: 4vw;text-align: right;}

.slice{padding-bottom: 4vw;
text-transform: none;
    font-weight: 400;
    flex-direction: column;
    color: #000;
    display: flex;
    justify-content: center;
    align-content: center;
    line-height: 2.8vw;
    font-size: 2.5vw;
}

@keyframes scopriOrso{
    
    from{
        filter: grayscale(1);
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    
     margin-top: 0;}
    to{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
margin-top: 200px;
        filter: grayscale(0);
    }
}

.foto1{position: relative;



}

#firma{width: 60%;
mix-blend-mode: multiply;}

.heroaziende{position: relative;}
.testoAziende{position: absolute;
left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    height: 50vw;
    
    top:0;
   
}

.commissione{

    display: flex;
    flex-wrap: wrap;
    
    
}

.quadro{width: 50%;

box-sizing: border-box;}

.quadr{width: 50%;}

#rece{width: 400px;
    display: block;
    padding-top: 8vw;
    padding-bottom: 8vw;
    margin: 0 auto;
  
text-align: center;}

#rece span{display: block;
    
margin-bottom: 1vw;}

.calice{width: 400px;
animation: ruotaCalice 5s linear infinite both;
    position: absolute;
    left: 50%;
margin-left: -200px;
margin-top: -200px;
    opacity: 0.4;
    top:50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
}
.calice p{
    animation: 10s ruotaCalice linear infinite;
    display: block;
    transform-origin: center;
    
}

@keyframes ruotaCalice{
    
    0%{transform: rotate(0);}
    100%{transform: rotate(360deg);}
    
}
.testoAziendeDes{
    padding-top: 2vw;
    display: block;
    padding-bottom: 2vw;
    text-transform: none!important;
    font-size: 2.8vw!important;
    width: 60%;
}

.blocchetto{font-weight: 500;
line-height: 3vw;}
.testoAziendeDes p{display: block;
  
padding-bottom: 2vw;}
.bloccoScritta{width: 100%;

    overflow: hidden;
    display: flex;
    justify-content: center;
text-align: center;}
.bloccoScritta span{width: 60%;
 text-align: center;
display: block;
    width: 100%;
 
   font-size: 10vw;
 color: #fff;
    text-transform: uppercase;
    font-weight: 100;
    
transform: translateY(100%);
  animation: fade 1s 0.5s ease both;
}

@keyframes fade{
    
    0%{transform: translateY(100);}
    100%{transform: translateY(-4%);}
}

.bn{position: absolute;
left: 0;
    top:0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
filter: grayscale(1);
    

}



#player{width: 100%;
}

.pageWrap{background-color: #ebc5db;
height: 50px;
  
    width: 50px;

    position: absolute;
    left:50%;
    top:50%;
  translate:-50% -50%;
    animation: intro 1s both;
    border-radius: 50%;
    z-index: -1;
    filter: blur(10px);

    
}
.cuoreSing:nth-child(2){
    
    left: 20%;
    scale:0.8;
    animation: cuoreAnim2 6s linear infinite both; 
}

.cuoreSing:nth-child(3){
    
    left: 50%;
    scale:0.4;
    animation: cuoreAnim2 10s linear infinite both; 
}

.cuoreSing:nth-child(4){
    
    left: 62%;
    scale:0.6;
    animation: cuoreAnim3 10s linear infinite both; 
}

.cuoreSing:nth-child(5){
    
    left: 54%;
    scale:0.5;
    animation: cuoreAnim4 10s linear infinite both; 
}

.cuoreSing:nth-child(6){
    
    left: 10%;
    scale:0.58;
    animation: cuoreAnim4 7s linear infinite both; 
}


.cuoreSing{position: absolute;
width: 50px;
    height: 50px;
   

    animation: cuoreAnim1 5s linear infinite both; 
}


@keyframes cuoreAnim4{
    
    0%{top:105%;}
    50%{top:77%; transform: translateX(15px);}
    
    100%{top:-5%; transform: translateX(8px);}
 
}

.small{font-size: 2.2vw!important;

    line-height: 2.2vw!important;
}
@keyframes cuoreAnim3{
    
      0%{top:110%;}
    45%{top:72%; transform: translateX(5px);}

    100%{top:-20%; transform: translateX(15px);}
 
}

@keyframes cuoreAnim2{
    
    0%{top:120%;}
   
    50%{top:40%; transform: translateX(-30px);}
    100%{top:-20%; transform: translateX(20px);}
 
}

@keyframes cuoreAnim1{
    
    0%{top:100%;}
    40%{transform: translateX(-25px);}
    
    100%{top:-20%; transform: translateX(-20px);}
 
}

.pageWrap:nth-child(2){background-color: yellow;
 animation: animHome 8s linear infinite both;}

.pageWrap:nth-child(3){background-color: aquamarine;
 animation: animHome 4s linear infinite both;}

.pageWrap:nth-child(4){background-color: greenyellow;
 animation: animHome 5s linear infinite both;}

.pageWrap:nth-child(5){background-color: fuchsia;
 animation: animHome 10s linear infinite both;}

@keyframes animHome{
    0%{transform: rotate(0) translate(-50%, -50%) scale(4);}
    30%{transform: rotate(180deg) translate(-50%, -50%) scale(2);}
    60%{transform: rotate(720deg) translate(-50%, -50%) scale(1.5);}
    100%{transform: rotate(0) translate(-50%, -50%) scale(4);}
   
    
}

.containereLoad{}



.bgiallo{
    
    background-color: #d3bd07!important;
}

.bazz{
    
    background-color: #95e3ea!important;
}

.bverde{
    position: absolute;
    left:50%;
    top:50%;
    height: 100px;
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(3);
    z-index: -1;
    width: 100px;
    background-color: #76eca8;
    animation:lamp 0.5s infinite both;
}

.b{color: white!important;
}
.inMusic{
    animation:lamp2 0.5s infinite both;
    position: absolute;
    left: 50%;
    top:50%;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    transform: translate(-50%,-50%);
    background-color: orange;
    
}
@keyframes lamp2{
    
    0%{opacity: 0.5;width: 100px;height: 100px;
  
    }
 
    100%{opacity: 1; width: 10px;height: 10px;
opacity: 1;
    }
}


@keyframes lamp{
    
    0%{opacity: 0.5;width: 100px;height: 100px;
  
    }
 
    100%{opacity: 1; width: 140px;height: 140px;
opacity: 0.5;
    }
}


@keyframes intro{
from{}
to{
    scale:10;
    
    }
    
}

.blocco{display: flex;}

nav{height: 100%;
    position: fixed;
    left: 0;
    top:-100%;
    column-gap: 2vw;
width: 100%;
opacity: 0;
    flex-wrap: wrap;
     display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10;
background-color: rgba(255,255,255,0.9);
   
  

  
}

.wrappone{
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 2vw;
}

.big{  
}

.showNav{
    top:0!important;
}

.titleTecnica{display: block;}

.serif{font-family: "jejumyeongjoregular", sans-serif;

font-size: 5vw;
text-transform: uppercase;}


.hero{height: 90vh;
      text-transform: uppercase;
     font-family: "jejumyeongjoregular", sans-serif;
position: relative;
font-size: 9vw;
    position: relative;
    display: flex;
text-align: center;
    justify-content: center;
    align-items: center;
color: black;
}
.t2{font-size: 4vw;
    font-style: normal;
line-height: 4vw;}
.bloccoBio{
    width: 100%;
    padding-bottom: 4vw;
    padding-top: 4vw;
}


.italiana{
    font-family: "linotype-sabon", sans-serif;
    
}

.link{font-size: 2.4vw;
    text-align: center;
    font-weight: 700;
width: 25%;
    cursor: pointer;
   
text-transform: uppercase;
    font-weight: 700;

    transition: 0.5s ease;
    color: black;
    overflow: hidden;
 opacity: 1;
}


.cit{position: relative;}



.link span{transform: translateY(100px);display: block;
   
  transform-origin: top left;
 opacity: 1;
}

.link:hover{color: black;
transform: translateX(1vw);
}
h1{font-size: 12vw;
   
   
    text-align: center;
  
 text-align: center;
    position: absolute;
    bottom: 0;

   overflow: hidden;
    height: 12vw;
top: 50%;
border-bottom: solid 1px black;
   width: 0;
    left: 0;
text-transform: uppercase;

}


#fast{font-size: 16vw;
   
   position: absolute;
color: black;
    width: 100%;
    text-align: center;
    color: black;

    top: 50%;
transform: translateY(30%);
 

}


.yo{
    font-weight: 100;
     font-size: 7vw;
    padding-left: 20px;
    padding-right: 20px;
overflow: hidden;
 

}

.yo:nth-child(2){font-weight: 500; line-height: 10vw;!important;
    padding-bottom: 1.6vw;

}

.yo:nth-child(3){font-style: italic;

}

.yo p{transform: translateY(200px) rotate(360deg);

height: 60%;}

h1 p{display: inline-block;
margin: -2.4vw;
    color: black;
    opacity: 0;
    transform: translateY(100%);

padding: 0;}

#laura{font-size: 15vw;
position: absolute;
    top:50%;
    transform: translateY(-50%);
    text-align: right;


    left: 2vw;
}

#fast p{display: inline-block;
margin: -2.4vw;
    color: black;
    font-weight: 300;
    opacity: 0;
    transform: translateY(100%);

padding: 0;}

#laura{font-size: 15vw;
position: absolute;
    top:50%;
    transform: translateY(-50%);
    text-align: right;


    left: 2vw;
}

#ciao{
  display: block;

padding-bottom: 20vh;
   
   
   

  
}

#open{right: 60px;
    cursor: pointer;
    z-index: 11;

    

    width: 20px;
    height: 20px;
    padding: 10px;
    justify-content: center;
    display: flex;
    flex-direction: column;

top:60px;
    font-weight: 500;
position: fixed;}

#open p{
    width: 100%;
    display: block;
    position: absolute;
    top:50%;
    left: 0;
 
    transition: 0.5s ease;
    height: 2px;
    background-color: black;
}


#open p:nth-child(1){
    transform: translateY(4px);
      transform-origin: center center;
}

#open p:nth-child(2){
    transform: translateY(-4px);
          transform-origin: center center;

}



.rotate1{
    width: 100%!important;
    
    transform: rotate(45deg) translateY(0)!important;
    
}
.rotate2{
    transform: rotate(-45deg) translateY(0)!important;
        width: 100%!important;
    
    
}

#open:hover>p{
     margin-left: 0;
}

#prova{background-color: red;
    height: 400px;
    
}


.bastoni{font-family: 'Plus Jakarta Sans', sans-serif;

}
.intro{width: 40%;}

.vuoto{width: 100px;
display: inline-block;}

.bio{font-size: 1.4vw;
    position: relative;
    padding-top: 2vw;
line-height:1.4vw;
    width: 50%;
    
transform: translateY(-50%);

text-align: left;}





.animazioneSottoTxt{background-color: blue;
height: 100%;
position: absolute;
    width: 100%;
    {overflow: hidden;display: block;
}
    left: 0;
    top:0;
}

.stop{position: sticky!important;
   
top:0;}

.disp{display: flex;
font-size: 16vw;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.ciaoBio{text-transform: uppercase;
font-weight: 900;
  display: flex;
line-height: 20vw;

    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
font-size: 24vw;}

.ciaoBio p{
display: inline-block;
    text-align: left;
    margin-left: -26px;

}


.bio img{position: absolute;

right: -107%;
   animation: gira 5s linear infinite both;
   scale:0.5;
}

@keyframes gira{
    from{transform: rotate(0);}
    to{transform: rotate(360deg);}
    
}


img{width: 100%;
display: block;}

#mk{width: 100%;
position: fixed;
left: 50px;
top:30px;
    transform-origin: center;
width: 150px;}

#bg{height: 100%;
position: fixed;
    width: 100%;
    left: 0;
    z-index: -2;
    top:0;
  background: rgb(239,240,224);
background: linear-gradient(90deg, rgba(239,240,224,1) 0%, rgba(247,231,215,1) 40%, rgba(237,248,250,1) 72%, rgba(255,255,255,1) 100%);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;

}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.badge{width: 150px;

   }


@media screen and (max-width: 844px) {
    
 #mk{width: 100%;
position: fixed;
left: 20px;
top:20px;
width: 100px;}
    
    .yo{font-size: 9vw;}
    
    .ruota{width: 70%;}
    
    .hero{height: 50vh;}
    
   
    
    .calice{width: 150px;
        margin-left: -75px;
    margin-top: -75px;
    
    }
    
    .testoAziendeDes p {}
    
    #open{
        right: 20px;
        top:50px;
        width: 12px;
        
    }
    
    .social{right: 10px;}
    
    .testoAziendeDes{width: 100%;}
    
   .bloccoLoghi img {
       width: 50%;}
    
    .link{font-size: 2.8vh;
    width: 100%;}
    
    .quadro {
        width: 100%;}
    
    #firma {
        width: 80%;}
    
    #rece {
        width: 180px;}
    
    .half{width: 100%;}
    
    .ciaoBio p {
    display: inline-block;
    text-align: left;
        margin-left: 0;}
    
    .introSez {
    font-size: 1.8vh;
        line-height: 1.8vh;
    width: 100%;
    padding-bottom: 2vh;}
    
    .bverde{    transform: translate(-50%, -50%) scale(2);}
    
    iframe{height: 400px;}
    
    @keyframes intro{
from{}
to{
    scale:5;
    
    }
    }
        

    
    .slice {
        line-height: 2.8vh;
    font-size: 3vh;
        }
    
    .firma {
    display: block;
        font-size: 1.6vh;}
    
    .dama{flex-direction: column;}
 
    .tecnica{font-size: 1.8vh;
    text-align: center;}
    
    .titleTecnica {
    text-transform: uppercase;
    font-weight: bold;
    padding-bottom: 2vw;
    font-size: 4vh;
        text-align: center;
    line-height: 4vh;
}
    
    .small {
    font-size: 2.2vh!important;
        text-align: center;
        line-height: normal;
}
    
    .hal{text-align: center;
    font-size: 2vh;}
    
  
    
    .cuoreSing{position: absolute;
width: 50px;
    height: 50px;
    
    left: 40%;
    animation: cuoreAnim1 5s linear infinite both; 
}
    
    .txtTecnico {
    display: block;
    font-size: 1.8vh;
      line-height: 1.8vh!important;
}
    
    .badge{display: none;}
    
   
    
    .Herocontatti {font-size: 4vh;
    }
    
    Cyo,.link{font-size: 2.9vh;}
    .Cyo p{font-size: 3vh!important;
    display: block;
        margin: 1vh;
    }
    #pippo p:before {
    content: "";
    height: 15px;
    border-radius: 50%;
    width: 15px;
    margin-left: 50px;
    margin-right: 30px;
    display: inline-block;
    background-color: #c81f82;
}
    
    .titoletto {font-size: 12vh;
        margin-top: 50px;
    line-height: 8vh;}
    
    .tv{font-size: 1.6vh;}
    
    .fotoSing{width: 100%;}
    
    #piva{padding-bottom: 20vh;}
    
    .ciaoBio{transform: translateY(250px);
   }
    
    .badge{width: 150px;
position: static;
    display: block;
    z-index: 150000;
right: 20px;
bottom:40px;}
    
    footer{flex-direction: column;
    justify-content: center;
    align-items: center;
        padding: 0;
        padding-top: 10vh;
        padding-bottom: 10vh;
        row-gap:20px;
        padding-bottom: 20vh;
    height: auto;}
    #piva{height: auto;padding: 0;}
    

.testoAziendeDes {
    padding-top: 2vw;
    display: block;
    padding-bottom: 2vw;
    text-transform: none !important;
    font-size: 2.4vh !important;
    line-height: 3.8vh;
    width: 100%;
  
}

.blocchetto{font-weight: 500;
line-height: 3vh;}
    
}
}