*{padding: 0;  
  margin: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

body,html{height: 100%; width: 100%;}


/*LOADER*/ 

.loader{height: 100%;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 7000;
        position: fixed;
        background-color: black;
}

svg path,
svg rect{
  fill: white;
}



/*HEADER*/

header{height: 9.5%;
       background-color: black;
       width: 100%;
       margin: 0 auto;
       display: flex;
       align-items: center;
       justify-content: center;
}


/*DROP MENU PER RESPONSIVE*/

#drop{position: fixed;
      width: 30px;
      right: 20px;
      cursor: pointer;
      padding: 10px;
      top: 20px;
      z-index: 1;
      display: none;
}

#drop:hover>p{background-color: #205970;}

#drop p{transition: all 0.5s;
        height: 3px;
        background-color: white;
        margin-top: 4px;
}

.rotate1{transform: rotate(45deg) translate(4px);}
.rotate2{transform: rotate(-45deg) translate(5px);}


/*PULSANTE SCROLL TO*/

#bt{height: 2.5%;
    width: 2.5%;
    cursor: pointer;
    position: fixed;
    right: 2%;
    bottom: 4%;
    z-index: 50;
}


/*NAV MENU*/

nav{font-family: 'Archivo Black', sans-serif;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.2rem; 
}

nav ul{display: flex;
       justify-content: flex-end;
       align-items: center;
       margin-right: 1%;
}

nav ul li{margin: 5%;
          position: relative;
          
}

nav ul li a{color: white; transition: all 0.5s;}

nav ul li a:hover{color: #205970;}

nav ul li ul{display: none;
             position: absolute;
             width: 30%;
             cursor: pointer;
             background-color: black;
             padding: 20%;
}

nav ul li ul img{width: 100%;
                 display: block;
}

nav ul li ul li{margin: 0 auto;
}

nav ul li:hover>ul{display: block;}

#logo{width: 7%;
      z-index: 1;
      cursor: pointer;
      left: 1%;
      position: absolute;
} 

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


/*SECTION*/



#main{margin: 0 auto;
      display: flex;
      width: 100%;
      height: 100%;
      background-color: black;
}

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

.slider_1{width: 100%;
        margin: 0 auto;  
}

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


#bigpadre{width: 52%; 
    height: 10%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%;
 
}

#padre1{width: 500px; 
    height: 500px;
    margin: 0 auto; 
}

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

#padre2{width: 43%;
        margin: 0 auto;
        padding-left: 1%
}

.figlio1{width: 100%;
         font-size: 1.2rem;
         font-family: 'Archivo Black', sans-serif;
         margin-bottom: 4%;
}

.figlio2{margin-left: auto;
         margin-right: auto;
         display: inline-block;
}

.change{display: inline-block;
       cursor: pointer;
       margin-right: 2%;
       width: 7%;  
}

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

#title{display: flex;
       justify-content: center;
       align-items: center;
       font-family: 'Archivo Black', sans-serif;
       font-size: 4.5rem;
       margin-top: 3%;
       margin-bottom: 10%;
}

table{border-spacing: 0;
  border-collapse: collapse;
    width: 70%;
    margin: 0 auto;
}

tr{ margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
td{border-bottom: solid 2px black;
padding: 40px;
}
.data{ 
width: 20%;}

.venue{ 
width: 50%;}

.luogo{ 
width: 70%;
text-align: right;}

.struca a {
  display: inline-block;
  padding: 5px 10px;
  background: white;
  border: solid 2px black;
  position: relative;
  font-family: 'Archivo Black', sans-serif;
  
}
.struca a:hover {
  box-shadow: none;
  top: 2px;
  left: 2px;
  cursor: pointer;
}

.strong{font-family: 'Archivo Black', sans-serif;}

 #tour{display: flex;
       justify-content: center;
       align-items: center;
       font-family: 'Archivo Black', sans-serif;
       font-size: 4.5rem;
       margin-top: 3%;
}

#bro{margin-top: 10%;
     margin-left: auto;
     margin-right: auto;
     width: 50%;
}

#bro img{width: 100%;
         display: block; 
}
 
#fra{display: flex;
     justify-content: center;
     align-items: center;
     font-family: 'Archivo Black', sans-serif;
     font-size: 4.5rem;
     margin-bottom: 10%;
}

#fra a:link,#fra a:visited{color: black;
                             transition: all 0.5s;
                             text-decoration: none;}


/*MERCH*/

#tool{width: 73%;
      height: 225%;
      background-color: #1c1c1c;
      margin: 0 auto;
}

#ban{display: flex;
     justify-content: center;
     align-items: center;
     font-family: 'Archivo Black', sans-serif;
     font-size: 4.5rem;
     color: white;
     padding-top: 8%;
     padding-bottom: 2%;
} 

#gridfra{width: 70%;
         margin-left: auto;
         margin-right: auto;
         display: flex;
         margin-top: 3%;
         flex-wrap: wrap;
         justify-content: center;    
}

.sum{width: calc(40% - 40px);
     margin: 3%;
     position: relative;
}

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

#tro{font-family: 'Archivo Black', sans-serif;
     font-size: 1.2rem;
     color: white;
     padding-top: 4%;
     text-align: center;
}

#tro a:link,#tro a:visited{color: white;}


/*GALLERY*/

#mono{width: 73%;
      height: 130%;
      background-color: #1c1c1c;
      margin: 0 auto;
}

#waster{display: flex;
     justify-content: center;
     align-items: center;
     font-family: 'Archivo Black', sans-serif;
     font-size: 4.5rem;
     color: white;
     padding-top: 6%;
     padding-bottom: 6%;
} 

.slider{width: 70%; 
        margin: 0 auto;
} 

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


/*ABOUT*/

#roam{width: 75%;
      height: 160%;
      background-color: #1c1c1c;
      margin: 0 auto;
}

#skinny{display: flex;
     justify-content: center;
     align-items: center;
     font-family: 'Archivo Black', sans-serif;
     font-size: 4.5rem;
     color: white;
     padding-top: 6%;
     padding-bottom: 2%;
} 

#bigfather{width: 100%; 
    height: 40%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1%;
}

#father1{width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

video{width: 100%;
      margin: 0 auto;
}
 

#father2{width: 37.5%;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    font-size: 1.3125rem;
    color: white; 
}

.boy{font-family: 'Archivo Black', sans-serif;
     font-size: 1.3125rem; color: white;}

#around{width: 100%;
         margin-left: auto;
         margin-right: auto;
         display: flex;
         justify-content: center;
         align-items: center;
}

.up:hover>.puck{opacity: 1;}

.up{width: 90%;
     margin-left: 1.5%;
     margin-right: 1.5%;
     position: relative;
     background-color: darkseagreen;
}

.puck{position: absolute;
      opacity: 0;
      transition: all 1s;
      background-color: rgba(0,0,0,0.6);
      width: 100%;
      color: white;
      font-family: 'Archivo Black', sans-serif;
      font-size: 1.3125rem;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
}

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

.puck a:link,.puck a:visited{color: white;
                             transition: all 0.5s;
                             text-decoration: none;}

.puck a:hover{color: white;}

.puckmob{display: none;}

/*FOOTER*/

footer{height: 50%;
       width: 100%;
       background-color: black; 
       margin: 0 auto;
}

#logoz{width: 9%;
      z-index: 1;
      padding-top: 2%;
      margin-right: auto;
      margin-left: auto;
} 

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

#location{display: flex;
          justify-content: center;
          align-items: center;
          font-family: 'Archivo Black', sans-serif;
          font-size: 1.2rem;
          padding-top: 1.5%;
          color: white;
}

#face{width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 1.5%;
}

.icona{display: inline-block;
       margin-left: 0.5%;
       margin-right: 0.5%;
       width: 3%;
       
}

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

#mailaddress{display: flex;
             justify-content: center;
             align-items: center;
             font-family: 'Roboto', sans-serif;
             font-size: 1.3125rem;
             padding-top: 1.5%;
             color: white;
             text-decoration: underline;
}

#mailaddress a:link,#mailaddress a:visited{color: white;
                             transition: all 0.5s;
                             text-decoration: none;}

#credits{padding-top: 7%;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         
}

.who{font-family: 'Roboto', sans-serif;
     font-size: 1.125rem;
     color: white;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
}

.who a:link,.who a:visited{color: white;}





/*RESPONSIVE*/


@media only screen and (max-width:1024px) {
    
header{height: 8%;
       background-color: black;
}

#bt{height: 2.3%;
    width: 3%;
    cursor: pointer;
    position: fixed;
    right: 3%;
    bottom: 4%;
    z-index: 50;
}

nav{height: 100%;
    width: 50%;
    position: fixed;
    top: 0;
    right: -50%;
    transition: all 1s;
    font-size: 2rem;
    background-color: black;
    z-index: 400;
    margin: 0 auto;
}
    
nav ul{flex-direction: column;
       margin: 0 auto;
} 

nav ul li{margin: 2%;}
    
nav ul li ul{display: none;}
    
nav ul li ul img{display: none;}
    
nav ul li ul li{display: none;}
    
nav ul li:hover>ul{display: none;}
    
#drop{display: block;
      z-index: 500;
      position: absolute;}
    
#drop:hover>p{background-color: white;}
    
.showNav{right:0!important;}
    
#logo{width: 10%;
      z-index: 500;
      cursor: pointer;
      margin-left: 2%;
      position: absolute;
} 
    
#bigpadre{width: 70%;
    margin-top: 10%;
}

#padre1{width: 300px;
    height: 300px;
    margin: 0 auto; 
}

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

#padre2{width: 50%; 
    margin-left: 2%;
}

.figlio1{font-size: 1rem;}

.figlio2{margin-left: auto;
         margin-right: auto;
         display: inline-block;
}

.change{display: inline-block;
       cursor: pointer;
       margin-right: 3%;
       width: 7%;  
}

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

#title{display: flex;
       justify-content: center;
       align-items: center;
       font-family: 'Archivo Black', sans-serif;
       font-size: 3.8rem;
       margin-top: 3%;
       margin-bottom: 20%;
}

table{border-spacing: 0;
  border-collapse: collapse;
    width: 70%;
    margin: 0 auto; 
}

tr{ margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
td{
   border-bottom: solid 2px black;
    padding: 20px;
}
.data{
width: 25%;}

.venue{font-size: 0.9rem;  
width: 30%;}

.luogo{ font-size: 0.9rem;
width: 70%;
text-align: right;}

.struca a {
  display: inline-block;
  padding: 5px 10px;
  background: white;
  border: solid 2px black;
  position: relative;
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.9rem;
}
.struca a:hover {display: none;}

.strong{font-family: 'Archivo Black', sans-serif;font-size: 0.9rem;}

 #tour{display: flex;
       justify-content: center;
       align-items: center;
       font-family: 'Archivo Black', sans-serif;
       font-size: 3.8rem;
       margin-top: 7%;
}
    
#bro{margin-top: 10%;
    width: 70%;}
    
#fra{display: flex;
       justify-content: center;
       align-items: center;
       font-family: 'Archivo Black', sans-serif;
       font-size: 3.8rem;
       margin-top: -3%;
       margin-bottom: 20%;
}
    
#tool{width: 100%;
      height: auto;
      background-color: #1c1c1c;
      margin: 0 auto;
}

#ban{font-size: 3.8rem;} 

#gridfra{width: 70%; 
         margin-left: auto;
         margin-right: auto;
         display: flex;
         margin-top: 4%;
         flex-wrap: wrap;
         justify-content: center;    
}

.sum{width: calc(40% - 40px);
     margin: 3.2%;}

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

#tro{font-family: 'Archivo Black', sans-serif;
     font-size: 1rem;
     color: white;
     padding-bottom: 6%;
     text-align: center;
}

#tro a:link,#tro a:visited{color: white;}
    
#mono{width: 100%;
      height: auto;
      background-color: #1c1c1c;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding-bottom: 16%;
}

#waster{font-size: 3.8rem;
        padding-top: 6%;
        padding-bottom: 6%;} 

.slider{width: 80%; 
        margin: 0 auto;
} 

.slice img{width: 100%;
           display: block;
}
    
#roam{width: 100%;
      height: auto;
      background-color: #1c1c1c;
      margin: 0 auto;
      padding-bottom: 13%;
}

#skinny{font-size: 3.8rem; padding-top: 5%} 

#bigfather{width: 100%; 
           height: 40%;
           margin: 0 auto;
           display: flex;
           justify-content: center;
           align-items: center;
           padding-top: 2%;
    } 

#father1{width: 45%; 
    margin: 0 auto;
    height: auto;
    padding-left: 2%;
}

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

#father2{width: 45%;
    height: auto;
    font-size: 0.8rem;
    padding-right: 2%;}

.boy{font-family: 'Archivo Black', sans-serif;
     font-size: 0.8rem; color: white;}

#around{width: 100%;
        padding-top: 3%;
         margin-left: auto;
         margin-right: auto;
         display: flex;
         justify-content: center;
         align-items: center;}

.up{width: 21%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
    
.puck{display: none;}
    
.puckmob{font-size: 0.8rem;
         color: white;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         font-family: 'Archivo Black', sans-serif;
         position: absolute;
         width: 100%;
         margin-top: 100%;
         line-height: 130%;
}
   
footer{height: auto;
       width: 100%;
       background-color: black; 
}

#logoz{width: 9%;
      z-index: 1;
      padding-top: 2%;
      margin-right: auto;
      margin-left: auto;
} 

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

#location{font-size: 1rem;
          padding-top: 2%;}

#face{padding-top: 2%;}

.icona{display: inline-block;
       margin-left: 0.5%;
       margin-right: 0.5%;
       width: 3%;}

#mailaddress{font-size: 1rem;
             padding-top: 2%;}

#credits{padding-top: 2%;
         padding-bottom: 2%;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center; 
}

.who{font-family: 'Roboto', sans-serif;
     font-size: 0.654rem;
     color: white;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}

.who a:link,.who a:visited{color: white;}  
    
}


@media only screen and (max-width:667px) {
    
#preload{font-size: 2.2rem;}
    
body,html{height: 100%; width: 100%;}
        
header{height: 7%;
       width: 100%;
       margin: 0 auto;
       background-color: black;
}
    
nav{height: 100%;
    width: 50%;
    position: fixed;
    top: 0;
    right: -50%;
    transition: all 1s;
    font-size: 1.3rem;
    background-color: black;
    z-index: 400;
    margin: 0 auto;
}
    
ul{height: 100%;
    width: 100%;}

nav ul{height: 100%; 
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       margin: 0 auto; 
}
    
nav ul li ul{display: none;}
    
nav ul li ul img{display: none;}
    
nav ul li ul li{display: none;}
    
nav ul li:hover>ul{display: none;}
    
#drop{display: block;
      z-index: 500;
      position: absolute;
      left: 88%;
      top: 2px;
      width: 6%;
}
    
#drop:hover>p{background-color: white;}
    
.showNav{display:block!important;}
    
#logo{width: 17%;
      z-index: 500;
      cursor: pointer;
      margin-left: 3.2%;
      margin-top: 1px;
      position: absolute;
} 
    
    

#main{margin-left: auto;
      margin-right: auto;
      width: 100%;
}
    
#main img{width: 100%;
              display: block;
    }
    
#bigpadre{width: 90%; 
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15%;
    padding: 0px;
}

#padre1{width: 50%;
    height: auto;
    margin: 0 auto;
}

#padre2{width: 40%; 
        margin: 0 auto;
        padding: 0px;
}

.figlio1{width: 100%;
         font-size: 0.71rem;
         font-family: 'Archivo Black', sans-serif;
         margin-bottom: 1%; 
}

.figlio2{margin-left: auto;
         margin-right: auto;
         display: inline-block;
}

.change{display: inline-block;
       cursor: pointer;
       margin-right: 2%;
       width: 10%;  
}

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

#title{display: flex;
       justify-content: center;
       align-items: center;
       font-family: 'Archivo Black', sans-serif;
       font-size: 2.2rem;
       margin-top: 5%;
       margin-bottom: 15%;
       width: 100%;
} 
    
table{border-spacing: 0;
  border-collapse: collapse;
    width: 87%;
    margin: 0 auto;
}

tr{ margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
td{border-bottom: solid 2px black;
padding: 2px; 
}
.data{
width: 24%;}

.venue{font-size: 0.8rem;
width: 2%;}

.luogo{font-size: 0.8rem; 
width: 44%;
text-align: right;}

.struca a {
  display: inline-block;
  padding: 2px 3px;
  background: white;
  border: solid 1.5px black;
  position: relative;
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.6rem;
}
    
.struca a:hover {display: none;}

.strong{font-family: 'Archivo Black', sans-serif; font-size: 0.6rem;}

 #tour{display: flex;
       justify-content: center;
       align-items: center;
       font-family: 'Archivo Black', sans-serif;
       font-size: 2.2rem;
       margin-top: 5%;
       margin-bottom: 15%;
}
    
#bro{width: 70%;}
    
#fra{font-size: 2.2rem;
    margin-bottom: 15%;}
    
#tool{width: 100%;
      height: 102%;
}

#ban{font-size: 2.7rem;
    padding-top: 5%;
     padding-bottom: 0;} 

#gridfra{width: 80%;
         margin-top: 3%;  
}

.sum{width: calc(50% - 40px);
     margin: 3.2%;}

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

#tro{display: none;}
    
#mono{padding-bottom: 45%;}
    
#waster{font-size: 2.7rem;
        padding-top: 5%;
        padding-bottom: 5%;}
    


#roam{width: 100%;
      height: auto;
      background-color: #1c1c1c;
      margin: 0 auto;
      padding-bottom: 20%;
}

#skinny{font-size: 2.7rem;
    padding-top: 5%} 

#bigfather{width: 100%;
           height: 40%;
           margin: 0 auto;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           padding-top: 2%;
    } 

#father1{width: 80%; 
    margin: 0 auto;
    height: auto;
    padding: 0;
}

#father2{width: 80%;
    height: auto;
    font-size: 0.6rem;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    text-align: left;
    }

.boy{font-family: 'Archivo Black', sans-serif;
     font-size: 0.7rem; color: white;}

#around{width: 85%;}
    
.puck{display: none;}
    
.puckmob{font-size: 0.6rem;
         margin-top: 120%;
         line-height: 110%;
}
    
#logoz{width: 15%;
      z-index: 1;
      padding-top: 2%;
      margin-right: auto;
      margin-left: auto;
}

#location{font-size: 0.6rem;
          padding-top: 2%;}

#face{padding-top: 2%;}

.icona{display: inline-block;
       margin-left: 0.5%;
       margin-right: 0.5%;
       width: 5%;}

#mailaddress{font-size: 0.6rem;
             padding-top: 2%;}

#credits{padding-top: 2%;
         padding-bottom: 2%;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center; 
}

.who{font-family: 'Roboto', sans-serif;
     font-size: 0.3rem; text-align: center;
     color: white;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}

.who a:link,.who a:visited{color: white;}  
    
}

@media only screen and (max-width:736px) {
    
    #tool{width: 100%;
      height: 120%;
}

#ban{font-size: 2.7rem;
    padding-top: 5%;
     padding-bottom: 0;} 

#gridfra{width: 80%;
         margin-top: 3%;  
}

.sum{width: calc(50% - 40px);
     margin: 3.2%;}

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

#tro{display: none;}
    
    #logoz{width: 15%;
      z-index: 1;
      padding-top: 2%;
      margin-right: auto;
      margin-left: auto;
}

#location{font-size: 0.6rem;
          padding-top: 2%;}

#face{padding-top: 2%;}

.icona{display: inline-block;
       margin-left: 0.5%;
       margin-right: 0.5%;
       width: 5%;}

#mailaddress{font-size: 0.6rem;
             padding-top: 2%;}

#credits{padding-top: 2%;
         padding-bottom: 2%;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center; 
}

.who{font-family: 'Roboto', sans-serif;
     font-size: 0.3rem; text-align: center;
     color: white;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}
    
    
    
    
    
    
    
}