*{padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
 
header{height: 120px;
       display: flex;
       width: 100%;
       justify-content: space-between;
       position: fixed;
       background-color: rgba(0,0,0,0.4);
       z-index: 10;
}

#logo{width: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
}

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


#language{display: flex;
          width: 4%;
          font-family: 'Abel', sans-serif;
          margin-top: auto;
          margin-bottom: auto;
          z-index: 20;
          cursor: pointer;
}

nav{display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    background-color: rgba(255,255,255,0.4);
    margin-right: 1;
    margin-left: auto;
    margin-bottom: auto;
    margin-top: auto;
    width: 100%;
    font-family: 'Abel', sans-serif;
}

nav ul{display: flex;
       height: 50%;
       align-items: center;
       justify-content: center;
}


nav ul li{margin-left: 20px;
          font-size: 20px;
          margin-right: 20px;
          justify-content: center;
}

nav ul li a:link,nav ul li a:visited{color: black;
                                     transition: all 0.5s;
                                     text-decoration: none;}

nav ul li a:hover{color: white;}

#bt span{position: fixed;
  top: 0;
  left: 93.4%;
  width: 24px; z-index: 1000;
  height: 24px;
  margin-top: 780px;
  border-left: 2.5px solid black;
  border-bottom: 2.5px solid black;
  transform: rotate(135deg);
  box-sizing: border-box;
  cursor: pointer; 
}


section {position: relative;
  width: 100%;
  height: 100%;}

.demo a {
  position: absolute;
  bottom: 150px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: white;
  font-size: 1.5rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}
.demo a:hover {
  opacity: .5;
}

#section01 a,#section02 a {
  padding-top: 60px;
}
#section01 a span,#section02 a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}


.slider{
      margin-left: auto;
      margin-right: auto;
      position: relative;
      width: 100%;
}

.slider img{width: 100%;
          display: block;
          margin-left: auto;
          margin-right: auto;
}

#knuckle{position: absolute;
         height: 100%;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         z-index: 1;
}

.puck{position: absolute;
      background-color: rgba(0,0,0,0.4);
      display: inline-block;
      cursor: pointer;
} 

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

#total{position: absolute;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;}


#claim{font-size: 80px;
       color: black;
       width: 100%;
       text-align: center;
       top: 25%;
       position: absolute;
       font-family: 'Roboto', sans-serif;
       font-weight: 700;
       z-index: 10;
}

#team{font-size: 80px;
      color: white;
      position: absolute;
      top:340px;
      background-color: rgba(0,0,0,0.4);
      font-family: 'Roboto', sans-serif;
      display: inline-block;
      font-weight: 700;
}

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

.box{width: 50%;
     font-size: 20px;
     line-height: 40px;
     padding: 30px;
     text-align: left;
     font-weight: 300;
     box-sizing: border-box;
     margin-top: 30px;
     font-family: 'Roboto', sans-serif;
     justify-content: center;
     align-items: center;
}

.box img{width: 70%;
         display: block;
         margin-left: auto;
         margin-right: none;}

.box testo{margin: 0 auto;}

.title{font-family: 'Roboto', sans-serif;
       font-weight: 700;
       display: block;
       font-size: 20px;
}

#grid{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.pod:hover>.tipe{opacity: 1;}

.pod{width: calc(30% - 40px);
     cursor: pointer;
     margin: 30px;
     position: relative;
}

.tipe{position: absolute;
      opacity: 0;
      transition: all 1s;
      background-color: rgba(0,0,0,0.6);
      width: 100%;
      color: white;
      font-family: 'Roboto', sans-serif;
      font-size: 20px;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%}

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

#gridletti{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: white;
}

.bro:hover>.shot{opacity: 1;}

.bro{width: calc(40% - 40px);
     cursor: pointer;
     margin: 30px;
     position: relative;
}

.shot{position: absolute;
      opacity: 0;
      transition: all 1s;
      background-color: rgba(0,0,0,0.6);
      width: 100%;
      color: white;
      font-family: 'Roboto', sans-serif;
      font-size: 20px;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%}

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

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

.shot a:hover{color: white;}

.slider2{margin-left: auto;
       margin-right: auto;
       width: 25%; 
       margin-top: 100px;
}

.slider img2{width: 100%;
          display: block;
          margin-left: auto;
          margin-right: auto;
}



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


.okc{width: calc(10% - 40px);
     margin: 10px;
     position: relative;
     margin-bottom: 100px;
}

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

#wrap{display:flex;
         justify-content: center;}

.scatola{width: 50%;
     font-size: 20px;
     line-height: 40px;
     padding: 30px;
     text-align: left;
     font-weight: 300;
     box-sizing: border-box;
     margin-top: 30px;
     font-family: 'Roboto', sans-serif;
}

.scatola img{width: 45%;
         display: block;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 70px;}

.scatola testo{}

footer{background-color: #494949;
       font-family: 'Roboto', sans-serif;
       text-align: center;
       font-size: 12px;
}

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

footer a:hover{color: silver;}




@media only screen and (max-width:1024px) {
    
    header{height: 80px;}
    
    #language{width: auto;
          font-size: 0.7rem;}

    nav{height: 40px;}
    
    nav ul li{margin-left: 10px;
           font-size: 1rem;
          margin-right: 10px;}
    
    .puck{width: 70%;} 
    
    .demo a {bottom: -10px;
  margin: 0 auto;
  font-size: 1rem;
    left: 48%;}

   .box{width: 50%;
     font-size: 15px;
     line-height: 20px;
     margin-top: 0;
     margin-left: 10px;
     margin-right: 10px;}

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

    .box testo{width: 40%;}

   .title{font-size: 15px;}
    
    #grid{width: 75%;}

   .pod{width: calc(50% - 40px);
     margin: 15px;}
    
    footer{margin-top: 10%;
        font-size: 9px;}
    
    #bt span{top: 0;
            left: 91.5%;
            width: 20px;
            height: 20px;
            margin-top: 900px;}
    
    #claim{font-size: 50px;
       top: 15%;}
    
    #team{font-size: 50px; top: 150px;}
    
    .slider2{width: 45%;}
    
    #wrap{display:flex;
         justify-content: center;
         align-items: center;
         margin: 0 auto; width: 85%;}
    
    .scatola{width: 50%;
     font-size: 15px;
     line-height: 20px;
     padding: 0px;
     text-align: left;;
     margin-top: 0px;
     margin: 10px;}

.scatola img{width: 100%; margin-bottom: 0;}

.scatola testo{width: 50%; font-size: 15px;}
    
}



@media only screen and (max-width:667px) {
    
    header{height: 40px;}
    
    #language{width: auto;
          font-size: 0.4rem;}

    nav{height: 12px;}
    
    nav ul li{margin-left: 0.5px;
           font-size: 0.54rem;
          margin-right: 10px;}
    
    #logo{width: 42px;}
    
    .demo a {bottom: -10px;
             margin: 0 auto;
             font-size: 0.5rem;
             left: 48%;}
    
    #section01 a span,#section02 a span {
  top: 0;
  left: 70%;
  width: 12px;
  height: 12px;
  margin-left: -12px;}
    
    #section01 a,#section02 a {
  padding-top: 36px;}
    
  .box{width: 100%;
     font-size: 0.7rem;
     line-height: 0.8rem;
     margin: 0 auto;
     padding: 10px;}

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

    .box testo{width: 60%;
               height: auto;}

   .title{font-size: 0.7rem;}
    
    #content{width: 90%;
         margin: 0 auto;
    padding-top: 35px; }
    
    #grid{width: 85%;}

   .pod{margin: 10px;}
    
    footer{margin-top: 10%;
        font-size: 0.4rem;}
    
    #bt span{top: 0;
            left: 91%;
            width: 10px;
            height: 10px;
            margin-top: 550px;}
    
    #claim{font-size: 20px;
       top: 10%;}
    
    #gridletti{width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: white;}

   .shot{font-size: 0.5rem;}
    
    #team{font-size: 20px; top: 88px;}
    
    .slider2{width: 45%; margin-top: 10px;}
    
    #wrap{display:flex;
         justify-content: center;
         align-items: center;
         margin: 0 auto; width: 90%;}
    
    .scatola{width: 50%;
        font-size: 0.7rem;
     line-height: 0.8rem;
     margin: 5px;}
    
}